/* ============================================================
   表 · omote: the professional side, set as the page of a book: text on the left, sources in the margin.
   Rule: these pages do not use 朱.
   No cards, no pill buttons, no numbered labels, no full-screen arrows, no monospaced all-caps small print, and no "label + rule" section names.
   One voice: EB Garamond from the name down to the margin notes; hierarchy comes only from size, italics and space. Monospace is only for real code.
   The superscript number after each claim links to a note in the margin: dates sit level with their headings, sources level with their superscripts,
   and when the pointer rests on a claim, superscript or note, all three light up and an indigo line appears between the columns (js/receipts.js).
   On narrow screens the margin notes drop below their paragraphs and the superscripts are ordinary in-page anchors.
   ============================================================ */

/* These pages use a whiter paper than base.css's default 和紙 (#f2eee6): a printed page rather than old 和紙. Day side only; night is unchanged. */
@layer tokens {
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body[data-side="omote"] { --washi: #fbfaf6; --tana: #ffffff; --kei: #e2ded4; --usu: #625e56; }
  }
  :root[data-theme="light"] body[data-side="omote"] { --washi: #fbfaf6; --tana: #ffffff; --kei: #e2ded4; --usu: #625e56; }
}

@layer layout {
  body[data-side="omote"] {
    --text: 34rem;                        /* text column: about 66 Latin characters */
    --margin: 15rem;                      /* margin-note column */
    --gap: clamp(2rem, 4.6vw, 4rem);
    --col: calc(var(--text) + var(--margin) + var(--gap) + 2 * var(--gutter));
    font-family: var(--f-serif);
    font-size: 1.2rem;
    line-height: 1.56;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* EB Garamond ships one weight, 500: every heading is 500, and the browser may not fake a bold.
     Letter-spacing stays 0: Chrome turns off the fi / fl ligatures otherwise, and the f in “fixes” and “Deskflow” collides with the next letter. */
  body[data-side="omote"] :is(h1, h2, h3, h4) { font-weight: 500; }
  html[lang="en"] body[data-side="omote"] { font-synthesis-weight: none; }

  .omote-head {
    display: flex; align-items: center; justify-content: flex-end; gap: 20px;
    max-width: var(--col); margin-inline: auto;
    padding: 14px var(--gutter) 0;
  }
  .header-actions { display: flex; align-items: center; gap: 18px; font-size: .95rem; }
  .header-actions > a { display: inline-flex; align-items: center; min-height: 44px; border: 0; color: var(--usu); }
  .header-actions > a:hover { color: var(--ai); }
  /* On these pages the day/night switch is a line of text, not a pill: the current half is in ink (base.css) */
  body[data-side="omote"] .theme-btn {
    border: 0; border-radius: 0; padding: 0 2px;
    font-family: var(--f-serif); font-size: .95rem; letter-spacing: 0;
  }

  /* A row is text plus margin. Both columns share one grid, so whatever is in the margin starts at the top of its paragraph. */
  .sheet-row {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, var(--text)) minmax(0, var(--margin));
    column-gap: var(--gap);
  }
  .sheet-row > .text { grid-column: 1; min-width: 0; }
  .sheet-row > .notes { grid-column: 2; }

  .intro { padding: 12vh 0 4vh; }
  .intro h1 {
    font-size: clamp(2.9rem, 7vw, 4.6rem); font-weight: 500;
    line-height: .98; letter-spacing: -.018em; margin-bottom: 10px;
  }
  .intro .aka { font-style: italic; color: var(--usu); margin-bottom: 36px; }
  .intro .opening { font-size: 1.42rem; line-height: 1.42; margin-bottom: 20px; }
  .intro p { margin-bottom: 14px; }
  .intro .contact { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 22px; hyphens: manual; }
  .intro .contact a { display: inline-flex; align-items: center; min-height: 44px; }

  /* A section name is one line of slightly larger type after a generous space; no rule, no small grey text */
  .block { padding: 3.4rem 0 .4rem; }
  .block > h2 { max-width: var(--text); font-size: 1.32rem; font-weight: 500; font-style: italic; color: var(--sumi); margin-bottom: 4px; }
  .block > .sheet-row > .text > p { margin-bottom: .8em; }   /* paragraphs on the case pages need a little space between them */
  .block > .sheet-row > .text > p:last-child { margin-bottom: 0; }

  .entry { padding: 14px 0 16px; }
  .entry h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-bottom: 2px; }
  .entry h3 a { color: inherit; border-bottom: 1px solid transparent; }
  .entry h3 a:hover { color: var(--ai); border-bottom-color: color-mix(in srgb, var(--ai) 40%, transparent); }
  .entry p { margin-bottom: 10px; max-width: none; }
  .entry.degree { padding: 8px 0 8px; }
  .entry.degree h3 { font-size: 1.28rem; }
  .entry .cite { max-width: none; }
  .entry .cite b { font-weight: inherit; }      /* no underline: on this page an underline means a link */
  .entry .skills { color: var(--usu); font-size: 1.02rem; }

  /* ---------- Figures: crops of the real thing, not illustrations ---------- */
  /* The two lines of the atlas record: text set from the live record, not a screenshot, so it stays sharp at night and on phones */
  .record { margin: 16px 0 8px; }
  .record-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kei); border-bottom: 1px solid var(--kei); }
  .record-list li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 2px 20px; padding: 11px 0 12px; }
  .record-list li + li { border-top: 1px solid color-mix(in srgb, var(--kei) 55%, transparent); }
  .record .grade { display: flex; flex-direction: column; gap: 1px; padding-top: .3em; font-size: .86rem; line-height: 1.35; }
  .record .grade > [lang] { font-family: var(--f-sans); font-weight: 600; letter-spacing: .02em; color: var(--sumi); }
  .record .gloss { font-style: italic; color: var(--usu); font-size: .86rem; line-height: 1.35; }
  .record .place { display: flex; flex-direction: column; gap: 2px; }
  .record .place .dsp { font-size: 1.14rem; line-height: 1.35; }
  .record figcaption { font-size: .9rem; line-height: 1.45; color: var(--usu); hyphens: manual; margin-top: 6px; }

  /* ---------- Margin ---------- */
  /* Without scripts the notes stack from the top of the column; js/receipts.js then moves each to the line of its superscript */
  .notes { font-size: .88rem; line-height: 1.46; color: var(--usu); padding-top: .3rem; hyphens: manual; }
  /* Two columns with scripts (receipts.js adds .placed): the margin column takes no height, each item sits on its own baseline, and a cursor running across paragraphs keeps them from overlapping */
  .notes.placed { position: relative; height: 0; padding-top: 0; }
  .notes.placed > * { position: absolute; left: 0; right: 0; margin: 0; }
  .when { font-style: italic; font-variant-numeric: tabular-nums; margin: .35rem 0 .9em; max-width: none; white-space: nowrap; }
  .note { position: relative; padding-left: 1.45em; margin-bottom: .75em; max-width: none; transition: color var(--t-touch) var(--ease); scroll-margin-top: 30vh; }
  .note .n {
    position: absolute; left: 0; top: 0; min-width: 1.1em;
    color: var(--ai); border: 0; font-variant-numeric: tabular-nums;
  }
  .note a:not(.n) { overflow-wrap: anywhere; }
  .note[data-lit], .note:target { color: var(--sumi); }

  /* A superscript and the words it supports: lit, they get an indigo underline, not a selection-coloured background */
  .ref { font-size: .6em; line-height: 0; vertical-align: .62em; margin-left: .05em; }
  .ref a { position: relative; color: var(--ai); border: 0; font-variant-numeric: tabular-nums; scroll-margin-top: 30vh; }
  .ref a::after { content: ''; position: absolute; inset: -.9em -.6em; }   /* easy to hit, without pushing the number away from its word */
  .claim {
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--t-touch) var(--ease), background-color var(--t-touch) var(--ease);
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .claim[data-lit] { text-decoration-color: var(--ai); background: color-mix(in srgb, var(--ai) 7%, transparent); }
  :root[data-theme="dark"] .claim[data-lit] { background: color-mix(in srgb, var(--ai) 20%, transparent); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .claim[data-lit] { background: color-mix(in srgb, var(--ai) 20%, transparent); } }

  /* Footer */
  .omote-foot {
    max-width: var(--col); margin: 56px auto 0;
    padding: 22px var(--gutter) 48px;
    background: linear-gradient(var(--kei), var(--kei)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px;
    color: var(--usu); font-size: .95rem;
  }
  .omote-foot > a { color: var(--usu); border: 0; display: inline-flex; align-items: center; min-height: 44px; }
  .omote-foot > a:hover { color: var(--ai); }

  /* The way into the keyboard sheet (the case pages and the colophon; the home page has its own) */
  .kbd-hint { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; color: var(--usu); font: inherit; }
  .kbd-hint:hover { color: var(--ai); }
  .kbd-hint kbd { font-family: var(--f-mono); font-size: .8em; border: 1px solid var(--kei); border-radius: 3px; padding: 0 .4em; margin-right: .4em; }

  /* First-screen entrance: the only motion, 0.6s, opacity and 6px only. None with reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    .intro .text > *, .intro .notes { animation: intro-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
    .intro .text > :nth-child(2) { --i: 1; } .intro .text > :nth-child(3) { --i: 2; } .intro .text > :nth-child(4) { --i: 3; }
    .intro .text > :nth-child(5) { --i: 4; } .intro .notes { --i: 4; }
  }
  @keyframes intro-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
}

/* ---------- Case pages: the same paper, headings one size smaller; demos and flow diagrams may span text and margin ---------- */
@layer layout {
  .omote-head:has(> .back) { justify-content: space-between; }   /* pages with a back link: back on the left, the switch on the right */
  .omote-head .back { display: inline-flex; align-items: center; min-height: 44px; border: 0; color: var(--usu); white-space: nowrap; }
  /* On narrow phones the controls move to a second row instead of breaking "← Carl Fan" or "Print or save as PDF" in two. */
  .omote-head { flex-wrap: wrap; row-gap: 0; }
  .omote-head .header-actions { margin-left: auto; }
  .header-actions .print-btn { white-space: nowrap; }
  .omote-head .back:hover { color: var(--ai); }
  .case-top { padding: 8vh 0 2vh; }
  .case-top h1 { font-size: clamp(2.4rem, 5.4vw, 3.5rem); }
  .case-top .aka { margin-bottom: 26px; }
  .wide-block, .flow { max-width: calc(var(--text) + var(--margin) + var(--gap)); }
  .wide-block > h2 { max-width: none; }
  .run-in { font-style: italic; color: var(--sumi); }

  /* Tables: a book's three-rule table: a top rule, a hairline under the head, a bottom rule; no vertical rules, fills or zebra stripes */
  .book-table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 1rem; line-height: 1.4; hyphens: manual;
    border-top: 1px solid var(--sumi); border-bottom: 1px solid var(--sumi); }
  .book-table caption { caption-side: bottom; text-align: left; font-size: .86rem; color: var(--usu); padding-top: 8px; }
  .book-table thead :is(th, td) { border-bottom: 1px solid var(--kei); font-style: italic; font-weight: 500; color: var(--usu); text-align: left; padding: 8px 16px 6px 0; }
  .book-table tbody :is(th, td) { padding: 8px 16px 8px 0; vertical-align: top; text-align: left; font-weight: inherit; }
  .book-table tbody tr + tr :is(th, td) { border-top: 1px solid color-mix(in srgb, var(--kei) 55%, transparent); }
  .book-table :is(th, td):last-child { padding-right: 0; }
  .book-table.num thead th:not(:first-child), .book-table.num tbody td { width: 5em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .book-table.num tbody th { color: var(--sumi); }
  /* A large default text size on a narrow phone: the numbers table tightens instead of running off the page (em: follows that setting). */
  @media (max-width: 19em) {
    .book-table.num { font-size: .86rem; }
    .book-table.num thead th:not(:first-child), .book-table.num tbody td { width: auto; }
    .book-table.num :is(th, td):not(:last-child) { padding-right: .5em; }
    .book-table.num tbody th { hyphens: auto; }
  }
  .note:not(:has(.n)) { padding-left: 0; }
  .case-foot-links { gap: 8px 30px; }

  .flow { margin: 2.2rem 0 .6rem; }
  .flow-steps {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0; padding: 0; list-style: none;
    border-top: 1px solid var(--kei); border-bottom: 1px solid var(--kei);
  }
  .flow-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px 0; font-size: .95rem; line-height: 1.35; color: var(--usu); hyphens: manual; }
  .flow-steps li + li { padding-left: 24px; }
  .flow-steps li + li::before { content: '→'; position: absolute; left: 0; top: 14px; color: var(--ai); }   /* arrows only for a real flow */
  .flow-head { color: var(--sumi); font-style: italic; font-size: 1.05rem; margin-bottom: 4px; }
  .flow figcaption { font-size: .9rem; color: var(--usu); margin-top: 8px; max-width: var(--text); }
  @media (max-width: 899px) {
    .flow-steps { grid-template-columns: 1fr; }
    .flow-steps li { padding: 10px 0 12px; }
    .flow-steps li + li { padding-left: 0; padding-top: 30px; }
    .flow-steps li + li::before { content: '↓'; top: 6px; }
  }
}

@layer components {
  /* Source line (js/receipts.js): an indigo line that appears only when lit. It ignores the pointer and is drawn only in two columns. */
  .receipt-thread { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
  .receipt-thread path { fill: none; stroke-linecap: round; }
  .receipt-thread .live { stroke: var(--ai); stroke-width: 1.2; opacity: 0; transition: opacity var(--t-touch) var(--ease); }
  .receipt-thread .live.on { opacity: 1; }
  .receipt-thread circle { fill: var(--ai); opacity: 0; transition: opacity var(--t-touch) var(--ease); }
  .receipt-thread circle.on { opacity: 1; }
}

.nowrap { white-space: nowrap; }

@media (max-width: 899px) {
  .sheet-row { grid-template-columns: minmax(0, 1fr); }
  .sheet-row > .notes { grid-column: 1; padding: 0 0 4px 1rem; margin: 0 0 4px; font-size: .86rem; }
  .sheet-row > .notes:not(:has(.note)) { display: none; }
  .when { display: none; }
  .note { scroll-margin-top: 20vh; }
}
@media (max-width: 560px) {
  body[data-side="omote"] { font-size: 1.12rem; }
  .intro { padding-top: 40px; }
  .intro .opening { font-size: 1.28rem; }
  .entry h3 { font-size: 1.36rem; }
  .block { padding-top: 2.6rem; }
  .omote-foot { justify-content: space-between; }
  .record-list li { grid-template-columns: minmax(0, 1fr); }
  .book-table.num thead th:not(:first-child), .book-table.num tbody td { width: 3.2em; }
}