/* hub.css — the Company Hub design system.
   Sections 01-03 are the former base.html inline styles, moved verbatim
   (2026-07-31). Section 04+ is the unified component library; see
   docs/DESIGN.md for the catalog and /styleguide for the living demo.
   EDITING RULES: this file is ALSO consumed by Poro OS (~/poro-os/web)
   via a symlink at its static/hub.css — do not rename or move it, and
   remember shell/section-03 changes now restyle both apps (the old
   hand-mirrored Poro OS sidebar copy was retired 2026-08-01). */

/* ======================== 01 TOKENS ======================== */

:root{
  --bg:#0b0d12; --surface:#141821; --surface-2:#1a1f29; --card:#141821; --inset:#11141c;
  --border:#242a36; --border-soft:#1b2130;
  --fg:#e8eaed; --fg-dim:#c4c8d1; --muted:#878d9b;
  --accent:#c8102e; --accent-bright:#e5394c; --accent-soft:rgba(200,16,46,.16);
  --gold:#d4af37; --gold-soft:rgba(212,175,55,.14);
  --good:#3fb950; --bad:#f85149;
  --radius:16px; --sidebar-w:212px;
}

:root{
  /* -- added by the UI unification (2026-07-31); derived from recurring literals -- */
  --field:#0f1117; --on-gold:#1a1d27; --chart-tick:#9aa0aa;
  --warn:#e3a008; --warn-soft:rgba(227,160,8,.14);
  --info:#6aa9ff; --info-soft:rgba(106,169,255,.14);
  --good-soft:rgba(63,185,80,.14); --bad-soft:rgba(248,81,73,.12);
  --bad-border:rgba(248,81,73,.35);
  --btn-red:#a8122a; --shadow-pop:0 14px 40px rgba(0,0,0,.55);
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px;
  --fs-lg:16px; --fs-xl:18px; --fs-2xl:21px; --fs-3xl:28px;
  --r-md:10px; --r-sm:7px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
}

/* ======================== 02 BASE ======================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 520px at 10% -10%,rgba(200,16,46,.10),transparent 60%),
             radial-gradient(760px 520px at 102% -4%,rgba(212,175,55,.06),transparent 55%)}
a{color:inherit}

/* ======================== 03 SHELL ======================== */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ---- sidebar ---- */
.sidebar{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c0e14,#090b10);border-right:1px solid var(--border-soft);padding:20px 10px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.4px;font-size:18px;padding:2px 6px 22px}
.logo-mark{display:inline-grid;place-items:center;width:34px;height:34px;flex:none}
.logo-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 7px rgba(200,16,46,.4))}
.logo-accent{color:var(--gold)}
.nav,.nav-bottom{display:flex;flex-direction:column;gap:3px}
.nav-bottom{margin-top:auto;border-top:1px solid var(--border-soft);padding-top:10px}
.nav-cap{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:0 8px 7px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--muted);text-decoration:none;font-weight:500;transition:.15s}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.85}
.nav-item:hover{background:var(--surface);color:var(--fg)}
.nav-item.active{background:linear-gradient(90deg,var(--accent-soft),transparent 80%);color:#fff;
  box-shadow:inset 2.5px 0 0 var(--accent-bright)}
.nav-item.active svg{opacity:1;color:var(--accent-bright)}

/* ---- collapsible nav group (e.g. Poro OS): header is a link, chevron toggles ---- */
.nav-group{display:flex;align-items:center;border-radius:10px;color:var(--muted);transition:.15s}
.nav-group:hover{background:var(--surface);color:var(--fg)}
.nav-group.active{background:linear-gradient(90deg,var(--accent-soft),transparent 80%);color:#fff;box-shadow:inset 2.5px 0 0 var(--accent-bright)}
.ng-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:9px 4px 9px 10px;
  color:inherit;text-decoration:none;font-weight:500;font-size:14px}
.ng-link svg.gi{width:18px;height:18px;flex:none;opacity:.85}
.nav-group.active .ng-link svg.gi{opacity:1;color:var(--accent-bright)}
.ng-toggle{display:flex;align-items:center;background:none;border:none;cursor:pointer;color:inherit;padding:9px 9px 9px 5px}
.ng-toggle .chev{width:15px;height:15px;flex:none;opacity:.65;transition:transform .18s}
.nav-group.open .ng-toggle .chev{transform:rotate(180deg)}
.nav-sub{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:0;transition:max-height .22s ease}
.nav-group.open + .nav-sub{max-height:460px}
.nav-sub a{display:block;padding:7px 10px 7px 36px;border-radius:9px;color:var(--muted);
  text-decoration:none;font-size:13.5px;font-weight:500;transition:.12s}
.nav-sub a:hover{background:var(--surface);color:var(--fg)}
.nav-sub a.active{color:#fff;background:linear-gradient(90deg,var(--accent-soft),transparent 80%);box-shadow:inset 2.5px 0 0 var(--accent-bright)}

/* ---- content ---- */
.content{display:flex;flex-direction:column;min-width:0}
.avatar{display:inline-grid;place-items:center;width:33px;height:33px;border-radius:50%;font-weight:700;font-size:13px;flex:none;
  background:linear-gradient(135deg,#2b313f,#3b424f);color:#fff;border:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:6px 10px 10px}
.su-meta{min-width:0}
.su-name{font-size:13px;font-weight:600;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:142px}
.su-mail{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:142px}
.preview-pill{position:absolute;top:16px;right:18px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--gold);
  border:1px solid rgba(212,175,55,.5);border-radius:999px;padding:4px 11px;background:var(--gold-soft)}

.main{padding:24px 28px 52px;max-width:1340px;width:100%}

/* ---- shared components (site-wide) ---- */
.container{max-width:1100px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:20px}
.card h2{font-size:16px;font-weight:700;margin-bottom:15px}
.card h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--gold);margin-right:10px;vertical-align:middle;box-shadow:0 0 10px rgba(212,175,55,.55)}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--btn-red);color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600;transition:background .15s}
.btn:hover{background:var(--accent)}

/* ---- mobile: off-canvas drawer (sidebar collapses behind a hamburger) ---- */
.topbar{display:none}
.menu-btn{display:none}
.scrim{display:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .topbar{display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:30;padding:9px 13px;background:#0c0e14;border-bottom:1px solid var(--border-soft)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--fg);cursor:pointer;flex:none}
  .menu-btn svg{width:20px;height:20px}
  .tb-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;letter-spacing:.3px}
  .tb-brand img{width:26px;height:26px;object-fit:contain}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:min(82vw,290px);z-index:50;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 14px 40px rgba(0,0,0,.55)}
  .sidebar.open{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
  .main{padding:18px 15px 44px}
}

/* ======================== 04 COMPONENTS ======================== */
/* Everything below is the unified component library (DESIGN.md #3). All class
   names are NEW — no pre-migration template references them, so adding this
   section changes nothing until a page opts in. The legacy .container/.card/
   .btn rules above are FROZEN until the dashboard migration (it overrides
   .container/.card locally; see DESIGN.md guardrails). */

/* -- page header -- */
.page-head{margin-bottom:18px}
.page-title{font-size:var(--fs-2xl);font-weight:800;letter-spacing:.2px}
.page-lede{color:var(--muted);font-size:var(--fs-base);margin-top:5px;max-width:640px}

/* -- section label (the uppercase-muted caption used by th, nav-cap, form sections) -- */
.section-label{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}

/* -- table -- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.tbl th{text-align:left;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;padding:0 8px 9px;border-bottom:1px solid var(--border)}
.tbl td{padding:6px 8px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl--hover tbody tr:hover td{background:var(--surface-2)}
.tbl--dense td{padding:4px 8px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl input,.tbl select{background:var(--field);border:1px solid var(--border);color:var(--fg);
  border-radius:var(--r-sm);padding:4px 7px;font:inherit;font-size:var(--fs-md)}
.tbl tfoot td{border-top:1px solid var(--border);border-bottom:none;font-weight:600}

/* -- buttons --
   The base .btn above is untouched (frozen); these additions make it safe on
   <button> elements and add the variant set. button.btn matches only <button>,
   whose current instances carry identical inline patches, so this is a no-op
   on existing pages. */
button.btn{border:none;font:inherit;cursor:pointer}
.btn--gold{background:var(--gold);color:var(--on-gold)}
.btn--gold:hover{background:#e0bd4e}
.btn--ghost{background:none;border:1px solid var(--border);color:var(--fg-dim)}
.btn--ghost:hover{background:var(--surface);border-color:var(--gold);color:var(--gold)}
a.btn--ghost,button.btn--ghost{border:1px solid var(--border)}
.btn--danger{background:none;border:1px solid #5c2b2b;color:var(--bad)}
.btn--danger:hover{background:var(--bad-soft)}
.btn--sm{padding:5px 11px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn.is-loading{opacity:.6;pointer-events:none}

/* -- form fields -- */
.field{display:block;width:100%;background:var(--field);border:1px solid var(--border);
  color:var(--fg);border-radius:var(--r-sm);padding:7px 10px;font:inherit;
  font-size:var(--fs-base);outline:none;transition:border-color .15s,box-shadow .15s}
/* Gold, not red: gold is the action color everywhere (save buttons, active
   tabs, hover borders), and 6 pre-migration pages already focused gold. A red
   ring on an empty required field reads as an error. */
.field:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.field--num{text-align:right;font-variant-numeric:tabular-nums}
.field--lg{padding:12px 14px;font-size:14.5px}  /* comfy variant for primary form pages */
.field-label{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
textarea.field{resize:vertical;line-height:1.5}

/* -- card modifiers (the base .card is frozen above) -- */
.card--flush{padding:0}
.card--flush>.tbl td:first-child,.card--flush>.tbl th:first-child{padding-left:20px}
.card--flush>.tbl td:last-child,.card--flush>.tbl th:last-child{padding-right:20px}
.card--tight{padding:14px 16px}
.widget-grid{display:flex;flex-direction:column;gap:20px}
.widget-grid>.card{margin-bottom:0}  /* the grid gap IS the spacing */

/* -- pills / badges -- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.pill--good{background:var(--good-soft);color:var(--good)}
.pill--bad{background:var(--bad-soft);color:var(--bad)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--info{background:var(--info-soft);color:var(--info)}
.pill--gold{background:var(--gold-soft);color:var(--gold)}
.pill--muted{background:var(--surface-2);color:var(--muted)}

/* -- notices (flash banners, inline errors) -- */
/* (The bare-.notice de-collision workaround is gone: the last legacy bare
   .notice banner was migrated with meeting_detail on 2026-07-31.) */
.notice{padding:10px 14px;border-radius:var(--r-sm);font-size:var(--fs-md);
  border:1px solid transparent;border-left-width:3px;margin-bottom:14px}
.notice--error{background:var(--bad-soft);border-color:var(--bad-border);border-left-color:var(--bad);color:#ffb4ae}
.notice--success{background:var(--good-soft);border-color:rgba(63,185,80,.3);border-left-color:var(--good);color:#7ed695}
.notice--warn{background:var(--warn-soft);border-color:rgba(227,160,8,.35);border-left-color:var(--warn);color:#e8cf84}
.notice--info{background:var(--info-soft);border-color:rgba(106,169,255,.3);border-left-color:var(--info);color:#a8c8f2}

/* -- empty + loading states -- */
.empty{padding:26px;text-align:center;color:var(--muted);font-size:var(--fs-md)}
.skeleton{background:linear-gradient(90deg,var(--inset),var(--surface-2),var(--inset));
  background-size:200% 100%;animation:hub-shimmer 1.2s infinite;border-radius:var(--r-sm);min-height:1em}
@keyframes hub-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Frozen for reduced-motion users AND for the screenshot harness (shoot.py
   emulates reduced motion so styleguide gates are deterministic). */
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* -- tabs (standardized on the finance .ftab look) -- */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.tab{background:var(--inset);border:1px solid var(--border);color:var(--muted);
  font-size:var(--fs-md);font-weight:600;padding:6px 14px;border-radius:8px;
  text-decoration:none;cursor:pointer;font-family:inherit;transition:.15s}
.tab:hover{color:var(--fg);border-color:var(--gold)}
.tab.active{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:700}
/* Two-cluster tab bar (finance: read vs write). Groups wrap as whole units,
   so a cluster never splits across rows. */
.tabs--split{justify-content:space-between;column-gap:24px}
.tab-group{display:flex;gap:7px;flex-wrap:wrap}

/* -- modal (markup via the modal() macro in _macros.html) -- */
.modal-scrim{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);
  display:none;align-items:flex-start;justify-content:center;padding:9vh 16px}
.modal-scrim.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;max-width:440px;width:100%;box-shadow:var(--shadow-pop)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-title{font-size:var(--fs-lg);font-weight:700}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;
  padding:2px 6px;border-radius:6px}
.modal-close:hover{color:var(--fg);background:var(--surface-2)}

/* -- definition chips -- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--inset);
  border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:3px 11px;
  font-size:var(--fs-sm);color:var(--muted)}
.chip b{color:var(--fg-dim);font-weight:600}

/* -- generic utilities (promoted 2026-07-31: finance + dashboard both need
   them; finance's local copies are identical and harmless) -- */
.fw4{font-weight:400}.fw6{font-weight:600}.fw7{font-weight:700}
.t10{font-size:10px}.xs{font-size:var(--fs-xs)}.sm{font-size:var(--fs-sm)}.t13{font-size:var(--fs-md)}
.cgood{color:var(--good)}.cbad{color:var(--bad)}.cwarn{color:var(--warn)}
.cgold{color:var(--gold)}.cmut{color:var(--muted)}.cdim{color:var(--fg-dim)}.cfg{color:var(--fg)}
.nowrap{white-space:nowrap}.ctr{text-align:center}.m0{margin:0}
.op4{opacity:.4}.op5{opacity:.5}.op6{opacity:.6}.op7{opacity:.7}
.help{cursor:help;border-bottom:1px dotted var(--muted)}
.scrollx{overflow-x:auto}

/* ======================== 06 CHARTS ======================== */
/* Chart canvases get sized by their page wrappers; colors come from hub.js
   (Hub.chartDefaults reads --chart-tick / --border-soft at runtime). */
.chart-wrap{position:relative}

/* ---------------------------------------------------------------------------
   Gallery Card Creation Hub (graded + raw). Page CSS lives here rather than in
   the templates: the ratchet gives new pages a zero allowance, and these three
   were written in June before the design system existed. Values are the June
   literals translated to tokens — #0f1117/#1a1d27 were already exact matches
   for --field/--on-gold, #262a36 differs from --border by one digit.
   --------------------------------------------------------------------------- */
.gal-choices{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.gal-choice{flex:1;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:18px}
.gal-choice h3{font-size:var(--fs-lg);margin-bottom:6px}
.gal-choice p{color:var(--muted);font-size:var(--fs-md);line-height:1.5;margin-bottom:14px}
.gal-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border)}
.gal-row:last-child{border-bottom:none}
.gal-id{color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px}
.gal-link{flex:1;color:var(--fg);text-decoration:none;font-weight:600;font-size:var(--fs-base)}
.gal-link:hover{color:var(--gold)}
.gal-when{color:var(--muted);font-size:var(--fs-sm)}
.gal-badge{display:inline-block;font-size:var(--fs-xs);padding:1px 8px;border-radius:6px;border:1px solid var(--border);background:var(--inset);color:var(--muted)}
.gal-badge.graded{border-color:var(--border);color:var(--fg-dim)}
.gal-badge.raw{border-color:var(--gold);color:var(--gold)}
.gal-crumb{color:var(--muted);font-size:var(--fs-md);margin-bottom:14px}
.gal-crumb a{color:var(--muted)}
.gal-crumb a:hover{color:var(--fg)}
.gal-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.gal-table th,.gal-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.gal-table th{color:var(--muted);font-weight:600}
.gal-addgrid{display:flex;flex-direction:column;gap:14px}
.gal-addform label{display:block;color:var(--muted);font-size:var(--fs-sm);margin-bottom:6px}
.gal-addform .gal-inputs{display:flex;gap:8px;flex-wrap:wrap}
.gal-addform input{background:var(--field);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--fg);padding:8px 10px;font-size:var(--fs-md)}
.gal-addform input[name="name"]{flex:1;min-width:160px}
.gal-notice{color:var(--gold);font-size:var(--fs-md);margin-bottom:10px}
.gal-caprow{margin:-2px 0 14px}
.gal-caphint{margin-left:8px}
.gal-subhead{font-size:var(--fs-base);margin-top:18px}
.gal-nomatch{margin-top:14px}
/* Phone capture: full-bleed camera column inside the shell's main area. */
.cap-wrap{max-width:520px;margin:0 auto;padding:12px}
.cap-bar{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.cap-bar a{color:var(--muted);text-decoration:none;font-size:var(--fs-lg)}
.cap-video{width:100%;border-radius:12px;background:var(--bg);aspect-ratio:3/4;object-fit:cover}
.cap-side{display:block;text-align:center;font-size:var(--fs-xl);font-weight:700;margin:12px 0 2px}
.cap-side.front{color:var(--gold)}
.cap-side.back{color:var(--fg-dim)}
.cap-shutter{display:block;width:76px;height:76px;border-radius:50%;background:var(--accent);border:5px solid var(--fg);margin:12px auto;cursor:pointer}
.cap-shutter:active{transform:scale(.94)}
.cap-hint{text-align:center;color:var(--muted);font-size:var(--fs-md);line-height:1.5}
.cap-count{text-align:center;color:var(--muted);font-size:var(--fs-base)}
.cap-canvas{display:none}
.cap-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--on-gold);border:1px solid var(--border);color:var(--fg);padding:9px 16px;border-radius:8px;font-size:var(--fs-md);opacity:0;transition:opacity .25s;pointer-events:none}
.cap-toast.show{opacity:1}
.cap-err{color:var(--accent);text-align:center;margin:16px;font-size:var(--fs-base)}

/* ---------------------------------------------------------------------------
   Cardboard Capital Ab — statutory books (/cardboard). Page CSS lives here
   rather than in the templates for the same reason the gallery's does: the
   ratchet gives a new template a zero allowance on literals and page-local
   CSS, so a new section is born with its styles in the design system or not at
   all. Tokens only; the print block is the one exception and is explained
   where it sits.
   --------------------------------------------------------------------------- */
.cc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 16px}
.cc-bar .field{width:auto;min-width:210px}
.cc-bar-note{color:var(--muted);font-size:var(--fs-sm)}

/* Statutory report (tase / tuloslaskelma): indent carries the hierarchy, so the
   level lands on the row and the label cell reads it. */
.cc-rep{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.cc-rep th{text-align:left;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:0 10px 8px}
.cc-rep th.num,.cc-rep td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-rep td{padding:5px 10px;border-bottom:1px solid var(--border-soft)}
.cc-rep tr.cc-l0 td{font-weight:700;color:var(--fg);border-top:1px solid var(--border);border-bottom:none}
.cc-rep tr.cc-l1 td{font-weight:600;color:var(--fg-dim)}
.cc-rep tr.cc-l2 td:first-child{padding-left:32px;color:var(--muted)}
.cc-rep tr.cc-head td{border-bottom:none;padding-top:16px}

/* Overview numbers. A tile is a value over a caption — the finance pages grew a
   page-local .fstat for the same job; this one is in the system so the next
   page that needs it does not grow a third. */
.cc-stats{display:flex;flex-wrap:wrap;gap:14px 34px}
.cc-stat b{display:block;font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.cc-stat span{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

/* One voucher, as it reads on paper: a header line then its rows. */
.cc-v{border-bottom:1px solid var(--border);padding:11px 0}
.cc-v:last-child{border-bottom:none}
.cc-vhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.cc-vno{font-variant-numeric:tabular-nums;color:var(--muted);min-width:38px}
.cc-vtitle{font-weight:600;color:var(--fg)}
.cc-vdate{color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.cc-vact{margin-left:auto;display:flex;gap:7px;align-items:center}
.cc-vrows{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.cc-vrows th{text-align:left;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:0 10px 5px;white-space:nowrap}
.cc-vrows th.num{text-align:right}
.cc-vrows td{padding:3px 10px;border-bottom:1px solid var(--border-soft);color:var(--fg-dim)}
.cc-vrows tr:last-child td{border-bottom:none}
.cc-vrows td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-vrows .cc-acct{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-void{text-decoration:line-through;opacity:.55}

.cc-liitteet{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.cc-liite{display:inline-flex;align-items:center;gap:6px;background:var(--inset);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 9px;
  font-size:var(--fs-xs);color:var(--fg-dim);text-decoration:none}
.cc-liite:hover{border-color:var(--gold);color:var(--gold)}

/* Entry form: the debet/kredit pair is how a voucher is read, so it is typed
   that way too, even though one signed number is what gets stored. */
.cc-entry{width:100%;border-collapse:collapse}
.cc-entry th{text-align:left;color:var(--muted);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:0 6px 6px}
.cc-entry th.num{text-align:right}
.cc-entry td{padding:3px 6px}
.cc-entry .field{padding:6px 9px}
.cc-form-top{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cc-form-top>div{flex:1;min-width:190px}
.cc-form-top>div.cc-narrow{flex:0 0 168px;min-width:168px}
.cc-actions{display:flex;gap:9px;align-items:center;margin-top:14px;flex-wrap:wrap}
.cc-inline{display:inline}

/* Pääkirja / erittelyt: an account and everything under it. */
.cc-acctblock{border-bottom:1px solid var(--border);padding:13px 0}
.cc-acctblock:last-child{border-bottom:none}
.cc-accthead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.cc-acctno{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;min-width:52px}
.cc-acctname{font-weight:600}
.cc-acctsum{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--fg-dim)}


/* The signable tilinpäätös document (/cardboard/tilinpaatos/<id>). Laid out to
   match the Kitsas original it replaces so the auditor gets the same shape of
   paper he has had every year. Rendered to PDF by scripts/cardboard_pdf.py,
   which prints this same page — screen and paper cannot drift apart. */
.cc-doc{max-width:820px}
.cc-dochead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:var(--fs-md);color:var(--fg-dim);border-bottom:1px solid var(--border);padding-bottom:4px}
.cc-dochead--sub{border-bottom:none;color:var(--muted);font-size:var(--fs-xs);
  padding-top:2px;margin-bottom:18px}
.cc-doctitle{font-weight:700;letter-spacing:.06em;color:var(--fg)}
.cc-cover{min-height:420px;display:flex;flex-direction:column;justify-content:space-between}
.cc-cover-mid{text-align:center;padding:56px 0 40px}
.cc-cover-name{font-size:var(--fs-xl);font-weight:700}
.cc-cover-title{font-size:var(--fs-2xl);font-weight:700;margin:34px 0 10px}
.cc-cover-period{font-size:var(--fs-lg);margin-bottom:34px}
.cc-cover-keep{color:var(--muted);font-size:var(--fs-md)}
.cc-cover-foot{display:flex;justify-content:space-between;gap:24px;
  font-size:var(--fs-md);color:var(--fg-dim);border-top:1px solid var(--border-soft);padding-top:12px}
.cc-note{margin-bottom:22px}
.cc-note-h{font-size:var(--fs-base);font-weight:700;margin-bottom:5px}
.cc-note p{font-size:var(--fs-md);color:var(--fg-dim);max-width:640px;line-height:1.55}
.cc-note-sub{color:var(--muted)}
.cc-sign{margin-top:44px}
.cc-signline{font-size:var(--fs-md);color:var(--fg-dim);margin-top:34px}
/* The rule stays literal underscores, so an unsigned document prints exactly as
   it did before anyone could sign one. The image lies over them the way ink sits
   on a printed line, and is bounded by the rule so a wide signature scales into
   the space rather than running across the place and date beside it. */
/* The ink sits on its own line above the rule and the line box grows around it,
   so nothing has to reserve a guess at how tall a signature is: an absolutely
   positioned version left a hand-sized hole above short signatures and would
   have collided with the heading above tall ones. The negative margin is what
   drops the strokes onto the rule instead of hovering them over it. Free of the
   rule's width, it can also overrun the line slightly, the way real ones do. */
.cc-sigimg{display:block;max-width:180px;max-height:104px;margin:0 0 -10px 2px}
/* The stored image is black ink on transparency, which is invisible against the
   hub's dark page — the preview needs paper under it. */
.cc-sigpreview{background:white;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 16px;display:inline-block}
.cc-sigshow{display:block;max-width:100%;max-height:90px}
/* Sits tight under the rule it names, so the pairing survives a page break. */
.cc-signname{font-size:var(--fs-md);color:var(--fg-dim);margin-top:5px}
/* Two signature blocks on one page: the second needs less air above it than the
   first, or the merkintä pushes off the signature page it belongs on. */
.cc-merkinta{margin-top:30px}

/* Print: the archive pack is the artefact that has to outlive this app, so it
   drops the shell and inverts to ink-on-paper. Keywords rather than tokens —
   the palette is deliberately dark-only and there is nothing to reuse here. */
@media print{
  .sidebar,.topbar,.scrim,.cc-noprint,.tabs,.page-lede{display:none}
  /* The shell's ambient red/gold glow is a fixed pseudo-element, so it survives
     painting the body white and lands as a wash across the top of every printed
     page. Kill it, not just the background under it. */
  body::before{display:none}
  .shell{display:block}
  .main{padding:0;max-width:none}
  body,.card{background:white;color:black}
  .card{border:none;padding:0 0 18px;margin:0 0 18px}
  .cc-rep td,.cc-vrows td,.cc-entry td{border-color:silver}
  /* On screen the detail rows are dimmed to let the totals lead. On paper that
     same dimming is unreadable, so anything carrying a figure or a name goes to
     full black and only the supporting metadata stays grey. */
  .cc-rep tr.cc-l0 td,.cc-rep tr.cc-l1 td,.cc-rep tr.cc-l2 td:first-child,
  .cc-acctname,.cc-acctno,.cc-vtitle,.cc-stat b,
  .cc-rep td.num,.cc-vrows td,.cc-vrows td.num,.cc-acctsum{color:black}
  .cc-vno,.cc-vdate,.cc-stat span,.cc-rep th,.cc-vrows .cc-acct,
  .cmut,.muted,.cc-bar-note{color:dimgray}
  .cc-page{page-break-after:always}
  .cc-page:last-child{page-break-after:auto}
  /* A voucher or an account split across a page break leaves rows that cannot
     be attributed to anything, and a heading stranded at the foot of a page is
     the same problem one line earlier. */
  .cc-v,.cc-acctblock,.cc-sign{page-break-inside:avoid;break-inside:avoid}
  .card h2,.cc-accthead,.cc-vhead{page-break-after:avoid;break-after:avoid}
  /* When a table does run over, its column headers come with it. */
  .cc-rep thead,.cc-vrows thead{display:table-header-group}
  .cc-vrows th{color:dimgray}
  /* The filename chips are the last link of the kirjausketju. On screen they
     are inset panels; on paper a row of solid dark blocks across a statutory
     document reads as redaction, so they invert to outlines. */
  .cc-liite{background:white;border-color:silver;color:black}
  .cc-doc{max-width:none}
  .cc-dochead{color:black;border-color:silver}
  .cc-dochead--sub{color:dimgray}
  .cc-cover{min-height:60vh}
  .cc-cover-name,.cc-cover-title,.cc-cover-period,.cc-note-h,.cc-note p,
  .cc-doctitle,.cc-signname{color:black}
  .cc-cover-keep,.cc-cover-foot,.cc-note-sub,.cc-signline{color:dimgray}
  .cc-cover-foot{border-color:silver}
}