/* Aperture — the stylesheet, and the design plan it follows.

   THE IDEA. Two registers, kept apart on sight. The material is a RECORD: a typescript, set in a
   typewriter face, numbered, never restyled — the researcher must always know they are looking at
   what was said. The analysis is READING: a text face with real italics, the app's and the model's
   sentences, never in the record's face. The one saturated colour on the page is the marker that
   joins them: a quote lit in the record where a claim rests on it. Everything else is ink on paper.

   COLOUR. A cool archival ground — the grey-blue of a reading room, not cream — with near-black
   ink; links and controls in a deep ink blue; the marker a highlighter yellow in light and a muted
   amber in dark. Neutrals carry a slight blue bias so they read as chosen. Dark is designed, not
   inverted: warm-grey text on charcoal, the record pane a shade darker than the page.

   TYPE. Literata (reading), Courier Prime (record). Two faces, nothing else — the register rule
   is enforced by the palette of faces. Labels are Literata, small, letter-spaced caps. Numbers are
   tabular everywhere a count appears. Measure held to ~66ch for prose.

   LAYOUT. A single column of prose at the top of every page; the material page opens into two
   columns — claims left, record right — with the record scrolling in its own pane so the claim
   stays put. A 4px spacing grid. Hairlines, not boxes. No JavaScript anywhere; :target does the
   highlighting, <details> does the folding. */

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --paper: #f3f4f6;        /* page ground, cool */
  --sheet: #fbfbfc;        /* raised surfaces: the record pane, cards */
  --ink: #16181d;
  --ink-2: #4a4f5a;        /* secondary text */
  --ink-3: #8a909c;        /* labels, derivations, dims */
  --rule: #d9dce2;         /* hairlines */
  --rule-2: #e9ebef;       /* fainter hairlines */
  --link: #1f3f8f;         /* deep ink blue */
  --link-hover: #142b66;
  --mark: #ffe066;         /* the one saturated colour */
  --mark-ink: #1a1400;
  --target: #e6eefc;       /* the sentence a claim points at */
  --record-ink: #22262d;
  --focus: #1f3f8f;
  --reading: 'Literata', Georgia, 'Iowan Old Style', serif;
  --record: 'Courier Prime', 'Courier New', Courier, monospace;
  --measure: 66ch;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171b; --sheet: #1c1f24; --ink: #e8e6e1; --ink-2: #b4b1aa; --ink-3: #7d7b76;
    --rule: #2c3038; --rule-2: #23262c; --link: #9db4ee; --link-hover: #c3d2f6;
    --mark: #c9a227; --mark-ink: #16120a; --target: #232c3f; --record-ink: #d9d6cf; --focus: #9db4ee;
  }
}

/* ---- ground and type ------------------------------------------------------------------------ */
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--reading);
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
main { max-width: 78rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
@media (min-width: 60rem) { main { padding: 2.5rem 3rem 5rem; } }
h1 { font-size: 1.85rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.005em; margin: .2rem 0 .6rem; text-wrap: balance; }
h2 { font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
p  { margin: 0 0 .85em; }
a  { color: var(--link); text-decoration: none; text-underline-offset: .14em; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--mark); color: var(--mark-ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
ul, ol { padding-left: 1.2rem; }
li { margin: 0 0 .3rem; }
q { quotes: '\201C' '\201D'; }

/* the app's small voice: derivations, states, kinds */
.dim { color: var(--ink-3); }
.small, .dim.small { font-size: .875rem; }
.provisional { max-width: var(--measure); color: var(--ink-3); font-size: .875rem; font-style: italic; margin: 0 0 .5rem; }

/* the top line of every page */
body > main > p:first-child { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
body > main > p:first-child a { color: var(--ink-2); }

/* ---- the reading register (summaries, accounts, claims) --------------------------------------- */
.summary { max-width: var(--measure); font-size: 1.04rem; line-height: 1.65; }
.summary p { margin: 0 0 .9em; }
.claim { font-weight: 500; line-height: 1.4; margin: 0 0 .25rem; }
.claims { list-style: none; padding: 0; margin: 0; }
.claims > li { margin: 0 0 1.35rem; padding-left: .9rem; border-left: 2px solid var(--rule); }
.claims > li:hover { border-left-color: var(--ink-3); }
.cite { font-family: var(--record); font-size: .82em; letter-spacing: 0; }
.gist { font-weight: normal; color: var(--ink-2); }

/* ---- the record register (the material itself) ------------------------------------------------ */
.text, .record, pre { font-family: var(--record); font-size: .9rem; line-height: 1.6; color: var(--record-ink); }
/* The record scrolls with the page; the claims beside it stick. A nested scroll box inside the
   page broke the one interaction the design rests on — a claim's link scrolled the page to the
   pane and never the pane to the sentence — and it is a worse way to read a long text anyway. */
.text { background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 1rem 1.1rem; }
.cols > .side:first-child { position: sticky; top: 1rem; align-self: start; }
.text pre.material { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .9em; font: inherit; color: inherit; }
.text pre.material > b { color: var(--ink-3); font-size: .78em; font-weight: 400; margin-right: .5em; user-select: none; }
.text h3.material { font-family: var(--reading); color: var(--ink-3); font-size: .78rem; font-weight: 600; letter-spacing: .07em;
                    text-transform: uppercase; margin: 1.4em 0 .4em; }
.quote { font-family: var(--record); font-size: .84rem; color: var(--ink-2); display: inline-block; padding: .05em 0; }
q.quote::before, q.quote::after { color: var(--ink-3); }

/* the marker: the one saturated colour, and the sentence a claim points at */
mark { background: var(--mark); color: var(--mark-ink); padding: .04em .12em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.s:target { background: var(--target); box-shadow: 0 0 0 .35rem var(--target); border-radius: 2px; }
.s { scroll-margin-top: 38vh; }

/* ---- the material page: claims beside the record ---------------------------------------------- */
.cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; margin-top: 1rem; }
@media (max-width: 60rem) { .cols { grid-template-columns: 1fr; } .cols > .side:first-child { position: static; } }
.stack { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 1.2rem; }
.card { display: block; padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet);
        color: var(--ink-2); font-size: .9rem; max-width: 22rem; line-height: 1.35; }
.card:hover { border-color: var(--ink-3); text-decoration: none; }
.card.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 3px 0 0 var(--mark); }

/* ---- the project page: themes by material ----------------------------------------------------- */
.scroller { overflow-x: auto; max-width: 100%; }
.themes { border-collapse: collapse; width: 100%; font-size: .95rem; }
.themes th, .themes td { padding: .7rem .8rem; border-top: 1px solid var(--rule-2); vertical-align: top; text-align: left; }
.themes thead th, .themes tr:first-child th { border-top: 0; color: var(--ink-3); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.themes th.gist { width: 34%; font-weight: 500; }
.themes th.gist span { display: block; font-weight: normal; color: var(--ink-2); font-size: .9rem; margin-top: .15rem; }
.themes td { text-align: center; font-variant-numeric: tabular-nums; }
.themes td a { display: inline-block; min-width: 2.2rem; padding: .15rem .4rem; border-radius: 3px; border: 1px solid var(--rule); }
.themes td a:hover { border-color: var(--ink-3); text-decoration: none; }
.mats { list-style: none; padding: 0; }
.mats li { padding: .55rem 0; border-top: 1px solid var(--rule-2); }
.mats li:first-child { border-top: 0; }
.carries { margin: 0 0 1.8rem; }
.carries h3 { margin: 0 0 .5rem; }

/* ---- what the researcher does: one comment per block, a question to the material -------------- */
form { margin: .6rem 0 1.2rem; max-width: var(--measure); }
form label { display: block; margin: .5rem 0; color: var(--ink-2); font-size: .9rem; }
form label > input, form label > textarea { margin-top: .25rem; }
.say { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; max-width: var(--measure); }
.say label { margin: 0; }
.say textarea, .row input, input, textarea, select { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule);
        border-radius: 3px; padding: .45rem .6rem; width: 100%; box-sizing: border-box; }
.say textarea { resize: vertical; min-height: 2.6rem; font-size: .95rem; }
.say textarea::placeholder, input::placeholder { color: var(--ink-3); font-style: italic; }
button { font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-3);
         border-radius: 3px; padding: .42rem .9rem; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row label { display: flex; gap: .5rem; align-items: center; color: var(--ink-2); font-size: .9rem; }
.row.inline { display: inline-flex; gap: .4rem; align-items: baseline; margin-left: .3rem; }
.found { margin: .35rem 0 .2rem 1rem; }
details { margin: .8rem 0; }
details > summary { cursor: pointer; color: var(--ink-3); font-size: .9rem; }
details > summary:hover { color: var(--ink-2); }
.aside li { font-size: .9rem; }

/* ---- progress: one narrated line while something runs ----------------------------------------- */
p.run { display: flex; gap: .6rem; align-items: baseline; padding: .6rem .8rem; margin: 0 0 1.2rem; border: 1px solid var(--rule);
           border-left: 3px solid var(--mark); border-radius: 3px; background: var(--sheet); font-size: .95rem; }
p.run::before { content: '·'; color: var(--mark); font-weight: 700; }

/* ---- the top of the page: name, kind, people, derivation ------------------------------------- */
.meta { color: var(--ink-3); font-size: .9rem; line-height: 1.5; margin: -.2rem 0 1rem; max-width: 60rem; }

@media print { .say, form, button { display: none; } .text { max-height: none; overflow: visible; border: 0; } }

/* who is signed in, and the way out — one quiet line at the top right */
.who { display: flex; gap: .75rem; align-items: baseline; justify-content: flex-end; margin: -1.6rem 0 1rem;
       font-size: .8rem; color: var(--ink-3); }
.who form { margin: 0; display: inline; }
.who button { padding: .1rem .5rem; font-size: .78rem; border-color: var(--rule); color: var(--ink-2); background: transparent; }
.who button:hover { border-color: var(--ink-3); color: var(--ink); background: transparent; }
.problem { max-width: var(--measure); padding: .55rem .8rem; border: 1px solid var(--rule); border-left: 3px solid var(--mark);
           border-radius: 3px; background: var(--sheet); font-size: .95rem; }

/* signing in: one narrow column, the form and nothing else */
.signin { max-width: 22rem; margin: 12vh auto 0; }
.signin h1 { margin-bottom: .2rem; }
.signin form { margin: 1.6rem 0 1rem; display: grid; gap: .9rem; }
.signin label { display: grid; gap: .3rem; font-size: .85rem; color: var(--ink-2); letter-spacing: .02em; }
.signin input { padding: .6rem .7rem; font-size: 1rem; }
.signin button { justify-self: start; padding: .5rem 1.1rem; }
/* the admin page: people, then every project */
.people, .projects { list-style: none; padding: 0; }
.people li, .projects li { padding: .55rem 0; border-top: 1px solid var(--rule-2); display: flex; gap: 1rem; align-items: baseline; }
.people li:first-child, .projects li:first-child { border-top: 0; }
.admin form.row { margin: .8rem 0 1.6rem; }

/* a warning only an administrator sees, only while it is true */
.warn { max-width: var(--measure); padding: .6rem .8rem; margin: 0 0 1.2rem; border: 1px solid var(--rule); border-left: 3px solid #b3261e;
        border-radius: 3px; background: var(--sheet); font-size: .9rem; }