/* Preread — base.css. Requires tokens.css. Structure classes only; no appearance names. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
::selection{background:var(--color-selection)}
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--weight-heading);margin:0}
h1{font-size:var(--text-h1);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:pretty}
h2,h3{font-size:var(--text-h2);line-height:1.4;text-transform:uppercase;letter-spacing:var(--tracking-label)}
h3{color:var(--color-fg-muted)}
p,ul,ol{margin:0}
strong{font-weight:var(--weight-strong)}
time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted)}
.mono{font-family:var(--font-mono)}
.meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted)}
.muted{color:var(--color-fg-muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Layout: page + the gutter grid */
.page{max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--page-pad) var(--space-8)}
.page--wide{max-width:var(--app-max)}
.g{display:grid;grid-template-columns:var(--gutter) 1fr;column-gap:var(--gutter-gap);align-items:start}
.gutter{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);padding-top:3px}
.wash{background:var(--color-wash);border-bottom:var(--border-hair)}
.sunken{background:var(--color-surface-sunken)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.stack--lg{gap:var(--space-5)}
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.section{margin-top:var(--section-gap)}
.section > h2{margin-bottom:var(--space-4)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;line-height:1;color:var(--color-fg);background:var(--color-surface);border:var(--border-strong);border-radius:var(--radius-1);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--color-surface-sunken)}
.btn-primary{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.btn-primary:hover{background:var(--color-fg);opacity:.88}
.btn-quiet{border-color:var(--color-rule);color:var(--color-fg-muted);font-weight:400}
.btn-link{border:0;background:none;padding:0 var(--space-1);font-weight:400;text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:2px}
.btn-link:hover{background:none;text-decoration-color:currentColor}
.btn-danger{color:var(--color-danger);border-color:var(--color-danger)}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--color-fg-faint);border-color:var(--color-rule);background:var(--color-surface);cursor:default}
.btn-block{width:100%}

/* Forms */
label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);display:block;margin-bottom:var(--space-2)}
input,textarea,select{color-scheme:inherit;font:inherit;color:var(--color-fg);background:var(--color-surface);border:var(--border-hair);border-radius:var(--radius-1);padding:10px var(--space-3);min-height:var(--tap-min);width:100%}
input::placeholder,textarea::placeholder{color:var(--color-fg-faint)}
textarea{font-family:var(--font-mono);font-size:13px;line-height:1.6;min-height:220px;resize:vertical}
select{font-family:var(--font-mono);font-size:var(--text-sm);appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field{display:flex;flex-direction:column}
.hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);margin-top:var(--space-2)}

/* Status — glyph + word, no colour (except failed) */
.status-badge{font-family:var(--font-mono);font-size:var(--text-sm);display:inline-flex;gap:var(--space-2);align-items:baseline;white-space:nowrap;transition:font-weight var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.status-badge::before{display:inline-block;width:1ch}
.status-badge[data-status="new"]::before{content:"○"}
.status-badge[data-status="reviewing"]{font-weight:500}
.status-badge[data-status="reviewing"]::before{content:"◐"}
.status-badge[data-status="approved"]::before{content:"●"}
.status-badge[data-status="published"]::before{content:"¶"}
.status-badge[data-status="skipped"]{color:var(--color-fg-faint)}
.status-badge[data-status="skipped"]::before{content:"×"}
.status-badge[data-status="failed"]{color:var(--color-danger);font-weight:500}
.status-badge[data-status="failed"]::before{content:"!"}

/* App chrome */
.app-nav{display:flex;gap:var(--space-4);align-items:center;padding:0 var(--page-pad);border-bottom:var(--border-hair);font-family:var(--font-mono);font-size:var(--text-sm);min-height:52px}
.app-nav a{text-decoration:none;color:var(--color-fg-muted);min-height:var(--tap-min);display:inline-flex;align-items:center}
.app-nav a[aria-current="page"]{color:var(--color-fg);font-weight:500}
.app-nav .brand{color:var(--color-fg);font-weight:500;margin-right:var(--space-2)}
.app-nav .spacer{flex:1}
.app-nav .account{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:899px){.app-nav{gap:var(--space-3)}.app-nav .account{display:none}}
.action-bar{position:sticky;bottom:0;background:var(--color-bg);border-top:var(--border-hair);padding:var(--space-3) var(--page-pad);display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between;align-items:center}
.action-bar .primary{margin-left:auto}
@media (max-width:899px){.action-bar .primary{flex-basis:100%;display:flex;gap:var(--space-2)}.action-bar .primary .btn-primary{flex:1}}
.notice{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);padding:var(--space-3) var(--space-4);background:var(--color-surface-sunken);border-radius:var(--radius-1)}
details > summary{cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:var(--text-sm);min-height:var(--tap-min);display:flex;align-items:center;gap:var(--space-2)}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"→";display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
details[open] > summary::before{transform:rotate(90deg)}

/* Tables (queue, library, logs): rows on hairlines, not boxes */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;color:var(--color-fg-muted);text-align:left;padding:0 var(--space-3) var(--space-2) 0;border-bottom:var(--border-strong)}
.table td{padding:var(--space-3) var(--space-3) var(--space-3) 0;border-bottom:var(--border-hair);vertical-align:top}
.table .num{font-family:var(--font-mono);font-size:var(--text-sm);font-variant-numeric:tabular-nums}

/* ---- Brief markup (see BRIEF_MARKUP.md). Used on /b/<slug> and inside review. ---- */
.brief-page{color:var(--color-fg)}
.brief-header{background:var(--color-wash);border-bottom:var(--border-hair);padding:var(--space-7) var(--page-pad) var(--space-6)}
.brief-header > .g,.brief-body{max-width:var(--content-max);margin:0 auto}
.brief-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);letter-spacing:.04em}
.brief-header h1{margin-top:var(--space-3);max-width:40ch}
.brief-lede{margin-top:var(--space-3);color:var(--color-fg-muted)}
.brief-body{padding:var(--space-6) var(--page-pad) var(--space-8)}
.brief-section{margin-top:var(--section-gap)}
.brief-section:first-child{margin-top:0}
.brief-section > h2{margin-bottom:var(--space-4)}
.brief-section p{color:var(--color-fg-muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.brief-section p + p{margin-top:var(--space-3)}
.attendee-list,.timeline,.question-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.attendee-name{font-weight:500}
.attendee-role{color:var(--color-fg-muted)}
.attendee-note{margin-top:var(--space-1)}
.timeline > li,.question-list > li{display:grid;grid-template-columns:56px 1fr;column-gap:var(--space-3)}
.timeline time{padding-top:4px}
.question-list{counter-reset:q;gap:var(--space-3)}
.question-list > li::before{counter-increment:q;content:counter(q);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-fg-muted);padding-top:1px}
.question-list > li{color:var(--color-fg)}
/* Day map (6d): one 24h band in UTC; each attendee is a 2px line whose night (19:00–07:00 local) is inked.
   --call = call position in UTC as a percentage; per line, --ns = where that person's night starts, as a %:
   ns = ((19 − utcOffsetHours) mod 24) / 24 × 100. The ledger below carries names and 12h local times. */
.day-map{margin-top:var(--space-6);--call:50%}
.day-map-lines{list-style:none;padding:6px 0 0;margin:0;position:relative;display:flex;flex-direction:column;gap:10px}
.day-map-line{height:2px;background:
  linear-gradient(90deg,var(--color-fg) 0,var(--color-fg) clamp(0%,var(--ns) - 50%,50%),transparent 0,transparent var(--ns),var(--color-fg) 0,var(--color-fg) min(var(--ns) + 50%,100%),transparent 0)}
.day-map-lines::before{content:"";position:absolute;top:0;bottom:-4px;left:var(--call);width:1px;background:var(--color-fg)}
.day-map-lines::after{content:"";position:absolute;top:-6px;left:calc(var(--call) - 3px);width:7px;height:7px;background:var(--color-fg)}
.day-map-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--color-fg-muted);margin-top:var(--space-2)}
.day-map-scale .call{color:var(--color-fg)}
.day-map-list{list-style:none;padding:0;margin:var(--space-4) 0 0;border-bottom:var(--border-hair)}
.day-map-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:baseline;padding:var(--space-2) 0;border-top:var(--border-hair);font-size:13px}
.day-map-time{font-family:var(--font-mono);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.day-map-zone{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted)}
/* Shape of the meeting: 3 columns on desktop, stacked on phone */
.shape{margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.shape > div > .meta{font-weight:500;color:var(--color-fg);margin-bottom:var(--space-1);letter-spacing:.04em}
.shape p{font-size:13.5px;color:var(--color-fg-muted)}
.preread-footer{margin-top:var(--space-7);padding-top:var(--space-3);border-top:var(--border-hair);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-muted);display:flex;justify-content:space-between;gap:var(--space-1) var(--space-4);flex-wrap:wrap}
.preread-footer .brand{color:var(--color-fg);font-weight:500;text-decoration:none}

@media (min-width:900px){
  .shape{grid-template-columns:1fr 1fr 1fr;gap:0}
  .shape > div{padding:0 var(--space-5)}
  .shape > div:first-child{padding-left:0}
  .shape > div:last-child{padding-right:0}
  .shape > div + div{border-left:var(--border-hair)}
  .action-bar{position:static;border:0;padding:var(--space-5) 0 0;justify-content:flex-start}
  .action-bar .primary{margin-left:auto}
}

@media print{
  :root{--color-bg:#fff;--color-fg:#000;--color-fg-muted:#444;--color-fg-faint:#888;--color-rule:#bbb;--color-rule-strong:#000;--color-wash:#fff;--color-surface:#fff;--color-surface-sunken:#f2f2f2;--color-link:#000}
  body{font-size:11pt;color:#000;background:#fff}
  .brief-header .g + .g{margin-top:14pt}
  .day-map-list{break-inside:avoid}
  .preread-footer{margin-top:24pt}
  .preread-footer a[href]::after{content:""}
  .brief-header{background:none;padding:0 0 18pt;border-bottom:1pt solid #000}
  .brief-body{padding:0}
  .brief-section{break-inside:avoid;margin-top:18pt}
  a{text-decoration:none;color:inherit}
  .no-print,.app-nav,.action-bar{display:none !important}
  .day-map-track::before{background:#eee}
}
