/* GrammarWerk /guide/ — the "ledger" template for the findable (SEO/AI) pages.
   Loaded ALONGSIDE /try/try.css, which provides the design tokens (canvas,
   surface, ink scale, hairline, note colours), the wordmark, and the base body.
   This file adds the ledger layout ported from the Ink design handoff
   (product-spec-design-ideas/project/guides/german-two-way-prepositions.html).

   The design bundle was dark-default with data-theme="light"; the live site is
   light-default with [data-theme="dark"]. Only the LAYOUT is ported here — the
   tokens come from try.css, which already defines the light/dark palette. */

/* ── Tokens try.css does not define (fonts, radii, easings, accent aliases) ── */
[data-gw]{
  --font-display:'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-chip:6px; --r-control:10px; --r-card:13px; --r-sheet:17px;
  --ease-smooth:cubic-bezier(0.25, 0.1, 0.25, 1);
  --accent:#F2E59A; --accent-text:#1A1A17;
  --shadow-card:0 6px 20px var(--shadow);
}

@keyframes gw-reveal { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }

/* The highlight token. try.css ships .gw-hl; the design markup uses .highlight.
   Alias both to the same treatment so either class works in generated markup. */
.highlight,.gw-hl{
  background:var(--accent); color:var(--accent-text);
  padding:0 4px; border-radius:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ── Document shell ──
   The guide sits on a "paper sheet" (surface) floating on the canvas page, so
   the content reads as a framed page rather than an unframed centred column,
   and the page background is visibly distinct from the reading surface. */
.doc{max-width:900px;margin:36px auto 20px;padding:0 52px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-sheet);
  box-shadow:0 1px 2px var(--shadow),0 22px 48px -24px var(--shadow);}

/* Tail — the CTA, "more guides" and footer sit on the canvas BELOW the sheet
   (not on the paper), aligned to the same column. No rail lines here. */
.tail{max-width:900px;margin:0 auto;padding:0 52px;}
.tail .rail{border-right:none;}
.tail .main{padding-left:0;}  /* align "more guides" with the CTA above it */

/* Top bar — sticky, bleeds to the sheet edges so its divider spans full width */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 -52px;padding:20px 52px;background:var(--surface);border-bottom:1px solid var(--hairline);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;}
.guide-theme{background:transparent;border:1px solid var(--hairline);border-radius:10px;color:var(--ink-3);width:38px;height:38px;cursor:pointer;font-size:15px;line-height:1;flex:none;}
.crumbs{font-family:var(--font-mono);font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.crumbs a{color:var(--ink-2);text-decoration:none;}

/* Spine rows: [ rail | content ] with a continuous vertical rule on the rail */
.row{display:grid;grid-template-columns:96px 1fr;}
.rail{border-right:1.5px solid var(--hairline);padding:58px 26px 0 0;text-align:right;}
.rail .num{position:sticky;top:26px;display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:500;letter-spacing:-0.02em;color:var(--ink-faint);}
.main{padding:58px 0 58px 44px;min-width:0;}

/* Hero (no number, spine begins below it) */
.hero-row .rail{border-right:none;padding:0;}
.hero-main{padding-top:30px;padding-bottom:30px;}
.eyebrow{font-family:var(--font-mono);font-size:0.62rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.hero-main h1{font-family:var(--font-display);font-size:2.9rem;line-height:1.04;letter-spacing:-0.035em;font-weight:500;color:var(--ink);margin:1.1rem 0 0;max-width:17ch;}
.hero-lead{font-family:var(--font-sans);font-size:1.18rem;font-weight:400;line-height:1.6;color:var(--ink-2);margin-top:1.4rem;max-width:44ch;}
.hero-lead b{color:var(--ink);font-weight:600;}

/* Section content type */
.kicker{font-family:var(--font-mono);font-size:0.62rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.main h2{font-family:var(--font-display);font-size:1.85rem;font-weight:500;letter-spacing:-0.03em;color:var(--ink);line-height:1.12;margin:0.65rem 0 0;max-width:20ch;}
.body{font-family:var(--font-sans);font-size:1.06rem;font-weight:400;line-height:1.72;color:var(--ink-2);margin-top:1.15rem;max-width:56ch;}
.body b,.body strong{color:var(--ink);font-weight:600;}
.body i,.body em{color:var(--ink);font-style:italic;}
.body p{margin:0 0 1.15rem;}
.body p:last-child{margin-bottom:0;}
.body p + p{margin-top:1.15rem;}

/* rule — two contrast blocks, no boxes, a calm ledger */
.rule{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;}
.rule-block{padding:0.35rem 0 0.4rem;}
.rule-block:first-child{padding-right:2.6rem;}
.rule-block + .rule-block{border-left:1px solid var(--hairline);padding-left:2.6rem;}
.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;}
.rule-q{display:flex;align-items:baseline;gap:0.9rem;}
.rule-q .word{font-family:var(--font-display);font-size:2.3rem;font-weight:500;letter-spacing:-0.03em;color:var(--ink);}
.rule-q .to{font-family:var(--font-display);font-size:1.3rem;color:var(--ink-faint);}
.rule-q .case{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.rule-gloss{font-family:var(--font-sans);font-size:0.95rem;color:var(--ink-3);margin-top:0.5rem;}
.rule-gloss i{font-style:italic;}
.rule-ex{font-family:var(--font-sans);font-size:1.25rem;font-weight:500;color:var(--ink);margin-top:0.9rem;}
.rule-ex .tr{display:block;font-size:0.92rem;font-weight:400;font-style:italic;color:var(--ink-3);margin-top:0.3rem;}

/* split4 — a table beside a stacked plate */
.split4{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start;margin-top:2rem;}
.split4 .endings{margin-top:0;}

/* plate — illustration pair: light surface, hairline split, minimal labels */
.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.9rem;}
.plate-cell{padding:1.7rem 1.6rem;}
.plate-cell + .plate-cell{border-left:1px solid var(--hairline);}
.plate.stacked{grid-template-columns:1fr;margin-top:0;}
.plate.stacked .plate-cell + .plate-cell{border-left:none;border-top:1px solid var(--hairline);}
.plate.stacked .illo-svg{max-width:240px;margin:0 auto;}
.illo-svg{width:100%;height:auto;color:var(--ink);display:block;}
/* Raster artwork: black line art on a white ground, the SAME in light and dark
   (deliberate: highest fidelity; the white figure sits on the plate as a framed
   illustration, like a textbook plate). Subtle rounding so corners aren't harsh. */
.illo-img{width:100%;height:auto;display:block;background:#fff;border-radius:calc(var(--r-card) - 3px);}
.plate.stacked .illo-img{max-width:240px;margin:0 auto;}
.plate-cap{font-family:var(--font-sans);font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.4;margin-top:1.2rem;}
.plate-tr{font-family:var(--font-sans);font-size:0.9rem;font-style:italic;color:var(--ink-3);margin-top:0.4rem;}
.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, usable in any section */
.aside{font-family:var(--font-sans);font-size:1.02rem;line-height:1.65;color:var(--ink-2);margin-top:1.5rem;padding-left:1.1rem;border-left:2px solid var(--ink);max-width:52ch;}
.aside b{color:var(--ink);font-weight:600;}
.aside i{font-style:italic;}

/* pairs / verbs — two plain lists, hairline between */
.verbs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:1.9rem;border-top:1px solid var(--hairline);}
.verbs-col{padding:1.4rem 0;}
.verbs-col:first-child{padding-right:2rem;border-right:1px solid var(--hairline);}
.verbs-col:last-child{padding-left:2rem;}
.verbs-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem;}
.verbs-head h3{font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--ink);}
.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);}
.verb{display:flex;align-items:baseline;justify-content:space-between;padding:0.5rem 0;gap:1rem;}
.verb .de{font-family:var(--font-sans);font-size:1.02rem;font-weight:600;color:var(--ink);}
.verb .en{font-family:var(--font-sans);font-size:0.85rem;color:var(--ink-3);text-align:right;}

/* table — the swap line + endings */
.swap{font-family:var(--font-display);font-size:2rem;font-weight:500;letter-spacing:-0.02em;color:var(--ink);margin-top:1.9rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;}
.swap .arrow{color:var(--ink-faint);}
.endings{width:100%;border-collapse:collapse;margin-top:1.8rem;}
.endings th,.endings td{text-align:left;padding:0.9rem 0;border-bottom:1px solid var(--hairline);}
.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);}
.endings tbody th{font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--ink-2);width:34%;}
.endings td{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--ink);}
.endings td .g{color:var(--ink-faint);font-size:0.72rem;margin-left:0.4rem;}

/* examples — tap-to-reveal worked examples (the app's .sentence-item pattern) */
.examples{display:flex;flex-direction:column;gap:10px;margin-top:1.9rem;}
.examples .target-text{font-size:1.08rem;}
.hint{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:1.1rem;}

.sentence-item{padding:1rem 2.4rem 1rem 1.1rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);display:grid;grid-template-columns:26px 1fr;align-items:start;gap:0.6rem;transition:border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);cursor:pointer;min-height:54px;position:relative;}
.sentence-item:active{background:var(--surface-2);}
.sentence-item.revealed{border-color:var(--ink);box-shadow:var(--shadow-card);}
.sentence-number{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);font-weight:700;font-size:0.7rem;padding-top:4px;}
.sentence-item.revealed .sentence-number{color:var(--ink-2);}
.sentence-content{display:flex;flex-direction:column;gap:0.4rem;}
.target-text{font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35;}
.base-text{font-size:0.88rem;color:var(--ink-2);font-style:italic;display:none;line-height:1.45;padding-top:0.5rem;border-top:1px solid var(--hairline);margin-top:0.15rem;}
.sentence-item.revealed .base-text{display:block;animation:gw-reveal 0.28s var(--ease-smooth) both;}
.sentence-note{display:none;background:var(--note-bg);border:1px solid var(--note-border);border-radius:var(--r-control);padding:0.65rem 0.8rem;margin-top:0.55rem;}
.sentence-item.revealed .sentence-note{display:block;animation:gw-reveal 0.28s var(--ease-smooth) both;}
.sentence-note-label{font-family:var(--font-mono);font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--note-label);margin-bottom:0.3rem;}
.sentence-note-text{font-size:0.82rem;color:var(--ink-2);line-height:1.5;}
.sentence-note-text b{color:var(--ink);font-weight:600;}
.sentence-note-text i{font-style:italic;}
.bookmark-btn{position:absolute;top:0.7rem;right:0.7rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:0.95rem;color:var(--ink-faint);cursor:pointer;opacity:0.6;transition:color 0.2s, opacity 0.2s;z-index:2;}
.sentence-item:hover .bookmark-btn,.bookmark-btn.bookmarked{opacity:1;}
.bookmark-btn.bookmarked{color:var(--ink);}

/* wordlist — clean two-column rows */
.nine{margin-top:1.8rem;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr 1fr;column-gap:46px;}
.nine-row{display:flex;align-items:baseline;gap:1.2rem;padding:0.85rem 0;border-bottom:1px solid var(--hairline);}
.nine-row .de{font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--ink);width:6.5rem;letter-spacing:-0.01em;flex:none;}
.nine-row .en{font-family:var(--font-sans);font-size:0.98rem;color:var(--ink-2);}

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

/* CTA */
.cta-row .rail{border-right:none;}
.cta-main{padding:64px 0;}
.cta-main h2{font-family:var(--font-display);font-size:2rem;font-weight:500;letter-spacing:-0.03em;color:var(--ink);max-width:18ch;}
.cta-main p{font-family:var(--font-sans);font-size:1.08rem;font-weight:400;color:var(--ink-2);line-height:1.6;margin:1rem 0 1.9rem;max-width:44ch;}
.cta-btns{display:flex;gap:0.75rem;flex-wrap:wrap;}
.cta-btns a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.95rem 1.6rem;border-radius:13px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:15px;white-space:nowrap;}
.cta-btns a.primary{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);}
.cta-btns a.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}

/* More guides — minimal hairline block above the footer */
.guide-more{margin-top:1.6rem;}
.guide-more .side-kicker{margin-bottom:0.4rem;}
.guide-more-list{border-top:1px solid var(--hairline);}
.guide-more-row{display:block;padding:0.95rem 0;border-bottom:1px solid var(--hairline);text-decoration:none;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--ink);transition:color 0.15s ease;}
.guide-more-row:hover{color:var(--ink-3);}

/* footer */
footer{border-top:1px solid var(--hairline);padding:30px 0 56px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.foot-links{display:flex;gap:1.4rem;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;flex-wrap:wrap;}
.foot-links a{color:var(--ink-3);text-decoration:none;}

/* ── Hub page — the original live layout (canvas page, white tiles). The ONLY
   change from the pre-redesign hub is the sticky header (no divider). It does
   NOT use the ledger sheet; that is intentional (kept as it lives). ── */
.guide-wrap{max-width:760px;margin:0 auto;padding:0 20px 72px;}
.guide-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--canvas);padding:22px 0 12px;}
.guide-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:26px 0 10px;}
.guide-h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;font-size:clamp(28px,5vw,40px);line-height:1.12;margin:0 0 18px;color:var(--ink);}
.guide-body{font-size:17px;line-height:1.62;color:var(--ink-2);}
.guide-body p{margin:0 0 16px;}
.hub-langhead{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;margin:30px 0 12px;color:var(--ink);}
.guide-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.guide-more-card{display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;text-decoration:none;transition:border-color .15s ease;min-width:0;}
.guide-more-card:hover{border-color:var(--ink);}
.guide-more-title{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;}
.guide-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap;}
.guide-foot a{text-decoration:none;color:var(--ink-3);}

@media (max-width:760px){
  .doc{margin:14px auto 16px;padding:0 20px;}
  .top{margin:0 -20px;padding:16px 20px;}
  .tail{padding:0 20px;}
  .row{grid-template-columns:1fr;}
  .rail{border-right:none;text-align:left;padding:40px 0 0;}
  .rail .num{position:static;font-size:0.9rem;color:var(--ink-3);}
  .main{padding:12px 0 44px;}
  .hero-main h1{font-size:2.2rem;}
  .plate,.verbs{grid-template-columns:1fr;}
  .plate-cell + .plate-cell{border-left:none;border-top:1px solid var(--hairline);}
  .verbs-col:first-child{padding-right:0;border-right:none;border-bottom:1px solid var(--hairline);}
  .verbs-col:last-child{padding-left:0;}
  .swap{font-size:1.6rem;}
  .rule,.split4,.nine{grid-template-columns:1fr;}
  .rule-block:first-child{padding-right:0;}
  .rule-block + .rule-block{border-left:none;border-top:1px solid var(--hairline);padding-left:0;padding-top:1.4rem;}
  .split4{gap:24px;}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}