/* ============================================================
   GUIDES — in-app grammar guide pages (#guideScreen)
   The /guide/ "ledger" layout (landing/guide/guide.css) ported onto the
   app's own Ink tokens (styles.css) — dark default, [data-theme="light"]
   flips automatically because only var() colors are used. Examples reuse
   the app's global .sentence-item / .highlight styles verbatim.
   ============================================================ */

#guideScreen { background: var(--canvas); }

.guide-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(0.65rem + var(--safe-top)) 1rem 0.65rem;
    border-bottom: 1px solid var(--hairline);
    background: var(--canvas);
    flex: none;
}
.guide-topbar-title {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

#guideContent {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(48px + var(--safe-bottom));
}

/* The paper sheet */
.gd-doc {
    max-width: 860px;
    margin: 24px auto 20px;
    padding: 0 48px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-card);
}

/* Loading / error states */
.guide-loading, .guide-error {
    max-width: 860px;
    margin: 48px auto;
    text-align: center;
    font-family: var(--font-sans);
    color: var(--ink-2);
}
.guide-retry-btn {
    margin-top: 1rem;
    padding: 0.7rem 1.4rem;
    background: var(--ink);
    color: var(--on-ink);
    border: none;
    border-radius: var(--r-control);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

/* ── Spine rows: [ rail | content ] ── */
#guideScreen .row { display: grid; grid-template-columns: 84px 1fr; }
#guideScreen .rail { border-right: 1.5px solid var(--hairline); padding: 54px 24px 0 0; text-align: right; }
#guideScreen .rail .num { position: sticky; top: 20px; display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-faint); }
#guideScreen .main { padding: 54px 0 54px 40px; min-width: 0; }

/* Hero (unnumbered; spine begins below it) */
#guideScreen .hero-row .rail { border-right: none; padding: 0; }
#guideScreen .hero-main { padding-top: 34px; padding-bottom: 26px; }
#guideScreen .eyebrow { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
#guideScreen .hero-main h1 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; color: var(--ink); margin: 1rem 0 0; max-width: 17ch; }
#guideScreen .hero-lead { font-family: var(--font-sans); font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); margin-top: 1.3rem; max-width: 46ch; }
#guideScreen .hero-lead b { color: var(--ink); font-weight: 600; }

/* Section type */
#guideScreen .kicker { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
#guideScreen .main h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1.12; margin: 0.6rem 0 0; max-width: 22ch; }
#guideScreen .body { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); margin-top: 1.1rem; max-width: 56ch; }
#guideScreen .body b, #guideScreen .body strong { color: var(--ink); font-weight: 600; }
#guideScreen .body i, #guideScreen .body em { color: var(--ink); font-style: italic; }
#guideScreen .body p { margin: 0 0 1.1rem; }
#guideScreen .body p:last-child { margin-bottom: 0; }
.gd-note { font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); margin-top: 1.1rem; max-width: 56ch; }
.gd-note b { color: var(--ink); font-weight: 600; }

/* rule — two contrast blocks */
#guideScreen .rule { margin-top: 1.9rem; display: grid; grid-template-columns: 1fr 1fr; }
#guideScreen .rule-block { padding: 0.35rem 0 0.4rem; }
#guideScreen .rule-block:first-child { padding-right: 2.4rem; }
#guideScreen .rule-block + .rule-block { border-left: 1px solid var(--hairline); padding-left: 2.4rem; }
#guideScreen .side-kicker { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
#guideScreen .rule-q { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
#guideScreen .rule-q .word { font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
#guideScreen .rule-q .to { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-faint); }
#guideScreen .rule-q .case { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
#guideScreen .rule-gloss { font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink-3); margin-top: 0.5rem; }
#guideScreen .rule-ex { font-family: var(--font-sans); font-size: 1.18rem; font-weight: 500; color: var(--ink); margin-top: 0.9rem; }
#guideScreen .rule-ex .tr { display: block; font-size: 0.9rem; font-weight: 400; font-style: italic; color: var(--ink-3); margin-top: 0.3rem; }

/* plate — illustration cards */
#guideScreen .plate { display: grid; grid-template-columns: 1fr 1fr; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sheet); overflow: hidden; margin-top: 1.8rem; }
#guideScreen .plate-cell { padding: 1.6rem 1.5rem; }
#guideScreen .plate-cell + .plate-cell { border-left: 1px solid var(--hairline); }
#guideScreen .plate.stacked { grid-template-columns: 1fr; margin-top: 0; }
#guideScreen .plate.stacked .plate-cell + .plate-cell { border-left: none; border-top: 1px solid var(--hairline); }
/* Raster line art on a white ground, same in both themes (framed like a
   textbook plate). A missing PNG hides itself via onerror. */
#guideScreen .illo-img { width: 100%; height: auto; display: block; background: #fff; border-radius: calc(var(--r-card) - 3px); }
#guideScreen .plate.stacked .illo-img { max-width: 240px; margin: 0 auto; }
#guideScreen .plate-cap { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin-top: 1.1rem; }
#guideScreen .plate-cap:first-child { margin-top: 0; }
#guideScreen .plate-tr { font-family: var(--font-sans); font-size: 0.9rem; font-style: italic; color: var(--ink-3); margin-top: 0.4rem; }
#guideScreen .plate-tag { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-top: 1rem; }

/* aside — bordered-left callout */
#guideScreen .aside { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--ink-2); margin-top: 1.4rem; padding-left: 1.1rem; border-left: 2px solid var(--ink); max-width: 52ch; }
#guideScreen .aside b { color: var(--ink); font-weight: 600; }

/* pairs — two plain lists, hairline between */
#guideScreen .verbs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.8rem; border-top: 1px solid var(--hairline); }
#guideScreen .verbs-col { padding: 1.3rem 0; }
#guideScreen .verbs-col:first-child { padding-right: 1.8rem; border-right: 1px solid var(--hairline); }
#guideScreen .verbs-col:last-child { padding-left: 1.8rem; }
#guideScreen .verbs-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; gap: 0.8rem; }
#guideScreen .verbs-head h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--ink); }
#guideScreen .verbs-head .tag { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
#guideScreen .verb { display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 0; gap: 1rem; }
#guideScreen .verb .term { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); }
#guideScreen .verb .gloss { font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-3); text-align: right; }

/* table — swap line + endings (+ optional beside-plate) */
#guideScreen .swap { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
#guideScreen .swap .arrow { color: var(--ink-faint); }
#guideScreen .endings { width: 100%; border-collapse: collapse; margin-top: 1.7rem; }
#guideScreen .endings th, #guideScreen .endings td { text-align: left; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); }
#guideScreen .endings thead th { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
#guideScreen .endings tbody th { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; color: var(--ink-2); width: 34%; }
#guideScreen .endings td { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
#guideScreen .split4 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; margin-top: 1.9rem; }
#guideScreen .split4 .endings { margin-top: 0; }

/* examples — container only; .sentence-item/.highlight come from styles.css */
#guideScreen .examples { display: flex; flex-direction: column; gap: 10px; margin-top: 1.8rem; }
#guideScreen .examples .sentence-item { padding-right: 1.1rem; }
#guideScreen .hint { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1rem; }

/* wordlist */
#guideScreen .nine { margin-top: 1.7rem; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; column-gap: 42px; }
#guideScreen .nine-row { display: flex; align-items: baseline; gap: 1.1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--hairline); }
#guideScreen .nine-row .term { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--ink); width: 7rem; letter-spacing: -0.01em; flex: none; }
#guideScreen .nine-row .gloss { font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink-2); }

/* faq — accordion */
#guideScreen .faq { margin-top: 1.5rem; border-top: 1px solid var(--hairline); }
#guideScreen .faq-item { border-bottom: 1px solid var(--hairline); }
#guideScreen .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
#guideScreen .faq-q .mark { font-family: var(--font-mono); color: var(--ink-3); font-size: 1.25rem; flex: none; transition: transform 0.2s var(--ease-smooth); }
#guideScreen .faq-item.open .faq-q .mark { transform: rotate(45deg); }
#guideScreen .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease-smooth); }
#guideScreen .faq-item.open .faq-a { max-height: 400px; }
#guideScreen .faq-a p { font-family: var(--font-sans); font-size: 0.98rem; color: var(--ink-2); line-height: 1.7; padding-bottom: 1.1rem; max-width: 60ch; }
#guideScreen .faq-a b { color: var(--ink); font-weight: 600; }

/* ── timeline (in-app kind) ── */
#guideScreen .timeline { margin-top: 2rem; }
#guideScreen .tl-axis { position: relative; display: flex; justify-content: space-between; margin-bottom: 1.1rem; }
#guideScreen .tl-axis-label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
#guideScreen .tl-axis-now { position: absolute; transform: translateX(-50%); color: var(--ink); }
#guideScreen .tl-row { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 20px; align-items: center; padding: 0.9rem 0; border-top: 1px solid var(--hairline); }
#guideScreen .tl-row-label { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.45; min-width: 0; }
#guideScreen .tl-row-gloss { display: block; font-size: 0.85rem; font-weight: 400; font-style: italic; color: var(--ink-3); margin-top: 0.2rem; }
#guideScreen .tl-track { position: relative; height: 44px; }
#guideScreen .tl-line { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--hairline); }
#guideScreen .tl-now { position: absolute; top: 4px; bottom: 4px; width: 0; border-left: 1.5px dashed var(--ink-3); }
#guideScreen .tl-point { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ink); }
#guideScreen .tl-point.tl-dashed { background: var(--surface); border: 1.5px dashed var(--ink); }
#guideScreen .tl-span { position: absolute; top: 50%; height: 7px; margin-top: -3.5px; border-radius: 4px; background: var(--accent); }
#guideScreen .tl-span.tl-dashed { background: none; border: 1.5px dashed var(--ink-2); }
#guideScreen .tl-mark-label { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
#guideScreen .tl-point .tl-mark-label { top: -24px; }

/* ── breakdown (in-app kind) ── */
#guideScreen .breakdown { position: relative; margin-top: 1.9rem; padding-top: 50px; }
#guideScreen .bd-arcs { position: absolute; top: 0; left: 0; pointer-events: none; color: var(--ink-2); }
#guideScreen .bd-arc-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-2); }
#guideScreen .bd-tokens { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 18px; row-gap: 54px; }
#guideScreen .bd-token { display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
#guideScreen .bd-word { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
#guideScreen .bd-gloss { font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-3); margin-top: 0.35rem; max-width: 9rem; }
#guideScreen .bd-tag { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.25rem; }
#guideScreen .bd-base { font-family: var(--font-sans); font-size: 0.95rem; font-style: italic; color: var(--ink-2); margin-top: 1.3rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }

/* ── "Learn more" link in the Quick explainer panel ── */
.guide-learn-link {
    display: block;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}
.guide-learn-link:active { opacity: 0.7; }

/* ── Responsive ── */
@media (max-width: 720px) {
    #guideContent { padding: 0 10px calc(40px + var(--safe-bottom)); }
    .gd-doc { margin: 12px auto 14px; padding: 0 18px; }
    #guideScreen .row { grid-template-columns: 1fr; }
    #guideScreen .rail { border-right: none; text-align: left; padding: 36px 0 0; }
    #guideScreen .rail .num { position: static; font-size: 0.85rem; color: var(--ink-3); }
    #guideScreen .main { padding: 10px 0 40px; }
    #guideScreen .hero-main h1 { font-size: 1.9rem; }
    #guideScreen .plate, #guideScreen .verbs, #guideScreen .rule, #guideScreen .split4, #guideScreen .nine { grid-template-columns: 1fr; }
    #guideScreen .plate-cell + .plate-cell { border-left: none; border-top: 1px solid var(--hairline); }
    #guideScreen .verbs-col:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--hairline); }
    #guideScreen .verbs-col:last-child { padding-left: 0; }
    #guideScreen .rule-block:first-child { padding-right: 0; }
    #guideScreen .rule-block + .rule-block { border-left: none; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 1.3rem; }
    #guideScreen .swap { font-size: 1.4rem; }
    #guideScreen .split4 { gap: 22px; }
    #guideScreen .tl-row { grid-template-columns: 1fr; gap: 6px; }
    /* Keep short sentences on one line (wrapped lines lose their arcs): the
       wide mono tags are what inflates token width, so let them wrap. */
    #guideScreen .bd-word { font-size: 1.15rem; }
    #guideScreen .bd-tokens { gap: 0 12px; }
    #guideScreen .bd-tag { white-space: normal; max-width: 4.5rem; }
    #guideScreen .bd-gloss { max-width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    #guideScreen .faq-a, #guideScreen .faq-q .mark { transition: none !important; }
}