/* ── annals.css — the Annals, the yearly keepsake and the print view (banking/js/annals.js).
   Tokens from desk.css; nothing here names a colour of its own. ── */

/* the pane: a spine of years on the left, the year as paper on the right */
.an-wrap{ display:grid; grid-template-columns:calc(150 * var(--u)) minmax(0, 1fr); gap:var(--sp-3); align-items:start; }
.an-spine{ position:sticky; top:0; display:flex; flex-direction:column; gap:var(--sp-px); border-right:1px solid var(--line); padding-right:var(--sp-2); max-height:calc(100vh - 220 * var(--u)); overflow:auto; }
.an-sp-k{ font:var(--fs-1) var(--mono); letter-spacing:.18em; color:var(--dim); padding:0 var(--sp-2) var(--sp-1h); }
.an-yr{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-px); width:100%; text-align:left; background:transparent; border:0; border-left:2px solid var(--line); color:var(--muted); font:var(--fs-2) var(--mono); padding:var(--sp-1) var(--sp-2); cursor:pointer; }
.an-yr b{ color:var(--text); font-weight:500; letter-spacing:.08em; }
.an-yr span{ font:var(--fs-1) var(--sans); color:var(--dim); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-yr:hover{ background:var(--panel-2); border-left-color:var(--line-2); }
.an-yr.on{ background:var(--panel-2); border-left-color:var(--accent); }
.an-yr.on b{ color:var(--accent); }
.an-keep-btn{ margin-top:var(--sp-3); align-self:flex-start; }
.an-main{ min-width:0; }
.an-tabs{ display:flex; gap:var(--sp-1); margin:0 0 var(--sp-2); }
.an-tab{ font:var(--fs-2) var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:transparent; border:1px solid var(--line-2); padding:var(--sp-1) var(--sp-2h); cursor:pointer; }
.an-tab:hover{ color:var(--text); border-color:var(--muted); }
.an-tab.on{ color:var(--accent); border-color:var(--accent); }
.an-empty{ margin:var(--sp-3) 0; }
.an-ar-link{ margin:0 0 var(--sp-2); display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }

/* the page */
.doc.an-page, .doc.an-report{ padding:var(--sp-7) var(--page-1); box-shadow:none; font-size:var(--fs-4); }
.doc.an-page h1, .doc.an-report h1{ font-size:var(--fs-7); line-height:var(--lh-1); }
.doc.an-page .doc-meta, .doc.an-report .doc-meta{ margin-bottom:var(--sp-4); }
.an-narr{ font-size:var(--fs-5); line-height:var(--lh-4); }
.an-h{ font:500 var(--fs-1) var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:var(--sp-4) 0 var(--sp-1h); padding-bottom:var(--sp-1); border-bottom:1px solid var(--line); }
.an-quiet{ color:var(--ink-2); font-style:italic; }
.an-figs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(112 * var(--u)), 1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.an-fig{ display:flex; flex-direction:column; gap:var(--sp-px); background:var(--paper-3); padding:var(--sp-1h) var(--sp-2); min-width:0; }
.an-fig .k{ font:var(--fs-1) var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.an-fig .v{ font:500 var(--fs-5) var(--mono); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-fig .s{ font:var(--fs-1) var(--mono); color:var(--ink-dim); }
.an-fig .s.up{ color:var(--ink-up); } .an-fig .s.down{ color:var(--ink-down); }
/* the desk's chart pasted into the page: a dark plate, so the canvas keeps the terminal's colours */
.an-plate{ --text:var(--paper); --muted:var(--rule-2); --dim:var(--sepia); --accent:var(--duotone); --line:var(--ink-3); background:var(--bg-2); padding:var(--sp-2) var(--sp-3); margin:var(--sp-3) 0 0; }
.an-plate .gcc-head{ color:var(--rule-2); }
.an-svgs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-3) 0 0; }
.an-svgs figure{ margin:0; }
.an-svgs figcaption{ font:var(--fs-1) var(--mono); letter-spacing:.08em; color:var(--ink-2); }
.an-sv{ display:block; width:100%; height:auto; }
.an-sv-ax{ stroke:var(--rule-2); stroke-width:1; }
.an-sv-l{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linejoin:round; }
.an-sv-r{ fill:none; stroke:var(--ink-2); stroke-width:1; stroke-dasharray:1 3; }
.an-sv-d{ fill:var(--ink); }
.an-sv-t{ font:var(--fs-1) var(--mono); fill:var(--ink); }
.an-ev{ margin:0; padding-left:var(--sp-5); }
.an-ev li{ margin:0 0 var(--sp-1); }
.an-ev b, .an-list b{ font:500 var(--fs-2) var(--mono); letter-spacing:.04em; margin-right:var(--sp-1); }
.an-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(calc(220 * var(--u)), 1fr)); gap:0 var(--sp-5); }
.an-list{ margin:0; padding-left:var(--sp-4); }
.an-list li{ margin:0 0 var(--sp-1); }
.an-from{ font:var(--fs-1) var(--mono); color:var(--ink-dim); letter-spacing:.04em; }
.an-people{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(176 * var(--u)), 1fr)); gap:var(--sp-1h); }
.an-person{ display:flex; gap:var(--sp-2); align-items:flex-start; padding:var(--sp-1h) var(--sp-2); border:1px solid var(--rule); border-left:3px solid var(--rule-2); background:var(--paper-3); min-width:0; }
.an-person.an-loyal{ border-left-color:var(--ink-up); } .an-person.an-tired{ border-left-color:var(--ink-accent); } .an-person.an-leaving{ border-left-color:var(--ink-down); }
.an-person span{ display:flex; flex-direction:column; min-width:0; font-size:var(--fs-3); line-height:var(--lh-2); }
.an-person b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-person i{ font-style:normal; color:var(--ink-2); font-size:var(--fs-2); }
.an-person em{ font:normal var(--fs-1) var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.an-moves{ margin:var(--sp-2) 0 0; font-size:var(--fs-3); color:var(--ink-2); }
.an-board{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-top:var(--sp-2); font-size:var(--fs-3); color:var(--ink-2); align-items:center; }
.an-board > span{ display:inline-flex; align-items:center; gap:var(--sp-1h); }
.an-board b{ color:var(--ink); font-weight:600; }
.an-k{ font:var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); flex-basis:100%; }
.an-foot{ margin:var(--sp-5) 0 0; }

/* the annual report */
.an-cover{ text-align:center; padding:var(--sp-3) 0 var(--sp-2); }
.an-cover .art-crest{ display:block; margin:0 auto var(--sp-2); }
.an-cover h1{ margin-top:var(--sp-1); }
.an-cover .art-photo{ text-align:left; margin-top:var(--sp-3); }
.an-sec{ border-top:1px solid var(--rule); margin-top:var(--sp-5); padding-top:var(--sp-3); }
.an-sec .doc-kicker{ margin-bottom:var(--sp-2); }
.an-sub{ margin-top:var(--sp-3); }
.an-sigrow{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); font-size:var(--fs-3); }
.an-kf{ width:100%; font:var(--fs-3) var(--mono); }
.an-kf .r{ text-align:right; }
.an-audit p{ font-size:var(--fs-3); }

/* the epilogue on the ending notice */
.an-epi{ border-top:1px solid var(--line); margin-top:var(--sp-5); padding-top:var(--sp-3); }
.an-basis{ font-size:var(--fs-3); color:var(--muted); font-style:italic; }
.an-epi-ppl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1h); }
.an-epi-ppl li{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-4); }
.an-earlier{ font-size:var(--fs-3); color:var(--muted); margin-top:var(--sp-2); }
.an-keep{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin:var(--sp-4) 0 var(--sp-2); }
.an-keep .small{ color:var(--muted); font-family:var(--sans); font-size:var(--fs-3); flex:1; min-width:calc(200 * var(--u)); }

/* the phone: the spine becomes a row of years */
@media screen and (max-width:900px){
  .an-wrap{ grid-template-columns:minmax(0, 1fr); }
  .an-spine{ position:static; flex-direction:row; max-height:none; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:0 0 var(--sp-1); }
  .an-yr{ width:auto; border-left:0; border-bottom:2px solid var(--line); }
  .an-yr.on{ border-bottom-color:var(--accent); }
  .an-yr span, .an-sp-k{ display:none; }
  .an-keep-btn{ margin:0 0 0 var(--sp-2); }
  .doc.an-page, .doc.an-report{ padding:var(--sp-5) var(--sp-4); }
  .an-svgs{ grid-template-columns:1fr; }
}

/* the print view: the chronicle on A4, the desk hidden */
#gc-annals-print{ display:none; }
@media print{
  @page{ size:A4; margin:14mm 15mm; }
  body.gc-printing{ overflow:visible; background:var(--paper); }
  body.gc-printing > :not(#gc-annals-print){ display:none; }
  body.gc-printing #gc-annals-print{ display:block; }
  .an-print{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color:var(--ink); background:var(--paper); }
  .an-print .an-sheet{ box-shadow:none; padding:0; margin:0; background:var(--paper); break-after:page; page-break-after:always; font-size:var(--fs-3); }
  .an-print .an-sheet:last-child{ break-after:auto; page-break-after:auto; }
  .an-print .an-sheet h1{ font-size:var(--fs-7); }
  .an-print .an-narr{ font-size:var(--fs-4); line-height:var(--lh-3); margin-bottom:var(--sp-1h); }
  .an-print .an-h{ margin:var(--sp-2h) 0 var(--sp-1); padding-bottom:var(--sp-0); }
  .an-print .doc-meta{ margin-bottom:var(--sp-2); }
  /* the photographs print in plain grey: a blend or a screen pattern makes the printer rasterise the whole page */
  .an-print .art-photo.paper .art-photo-in img{ height:calc(100 * var(--u)); mix-blend-mode:normal; filter:grayscale(1) contrast(1.1); }
  .an-print .art-photo.paper .art-photo-in::after{ display:none; }
  .an-print .an-cover-sheet .art-photo.paper .art-photo-in img{ height:calc(300 * var(--u)); }
  .an-print .an-figs{ grid-template-columns:repeat(5, 1fr); }
  .an-print .an-fig{ padding:var(--sp-1) var(--sp-1h); }
  .an-print .an-fig .v{ font-size:var(--fs-3); }
  .an-print .an-people{ grid-template-columns:repeat(3, 1fr); }
  .an-print .an-person{ padding:var(--sp-1) var(--sp-1h); }
  .an-print .an-ev li, .an-print .an-list li{ margin:0; }
  .an-print .an-figs, .an-print .an-svgs, .an-print .an-person, .an-print .an-sec, .an-print .an-ev li{ break-inside:avoid; }
  .an-print .an-cover-sheet .an-cover{ padding-top:var(--page-3); }
  .an-print .an-cover-sheet h1{ font-size:var(--fs-8); }
  .an-print .an-cover-l{ font-size:var(--fs-5); margin-top:var(--sp-5); }
  .an-print .an-colophon{ font:var(--fs-1) var(--mono); letter-spacing:.1em; color:var(--ink-2); margin-top:var(--page-1); }
  .an-print .an-epi{ border-top:0; margin-top:0; padding-top:0; }
  .an-print button{ display:none; }
}