/* ATELIER ATOMS · the minimum vocabulary every screen is built from.
   Anything richer (tables, charts, modals) → see reference/atelier-kit.css. */

/* ── Card ─────────────────────────────────────────── */
.card{background:var(--paper);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-low)}
.card-h{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.card-h h3{margin:0;font-size:var(--t-card);font-weight:600;color:var(--ink-0);letter-spacing:-.005em}
.card-h .sub{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.card-h .right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Deck stacking: 2 ghost cards behind a stackable/primary card */
.deck{position:relative}
.deck::before,.deck::after{content:'';position:absolute;inset:0;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line-soft);box-shadow:var(--sh-low);z-index:-1;transition:transform var(--e-base) var(--ease)}
.deck::before{transform:translateY(9px) scale(.965)}
.deck::after{transform:translateY(18px) scale(.93)}
.deck:hover::before{transform:translateY(13px) scale(.965)}
.deck:hover::after{transform:translateY(26px) scale(.93)}
/* .deck must NOT create a stacking context (no isolation/opacity/transform on it),
   otherwise the z-index:-1 ghosts paint above the card surface. Leave room below: margin-bottom ≥20px. */
/* Sage anchor card — max ONE per view, for THE primary metric */
.card.anchor{background:var(--sage-0);color:var(--on-sage)}
.card.anchor .num,.card.anchor h3{color:var(--on-sage)}

/* ── Text atoms ───────────────────────────────────── */
.mono-lbl{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-0)}
.hint{font-family:var(--font-serif);font-style:italic;font-size:10.5px;color:var(--ink-3);opacity:.75}
.serif-accent{font-family:var(--font-serif);font-style:italic;color:var(--sage-0)}

/* ── The dashed-pill control law ──────────────────── */
.pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;background:none;border:1px dashed var(--ink-3);border-radius:var(--r-pill);font-size:var(--t-cell);font-weight:500;color:var(--ink-2);cursor:pointer;transition:all var(--e-quick)}
.pill:hover{border-style:solid;background:var(--paper-2);color:var(--ink-0)}
.pill.on{border-style:solid;background:var(--ink-0);border-color:var(--ink-0);color:var(--page)}
.pill.on-sage{border-style:solid;background:var(--sage-0);border-color:var(--sage-0);color:var(--on-sage)}
.pill svg{color:currentColor}
.pill.cycle svg{transition:transform var(--e-base) var(--ease)}
.pill.cycle:hover svg{transform:rotate(120deg)}
.seg{display:inline-flex;gap:3px;padding:3px;background:var(--paper-2);border-radius:var(--r-pill)}
.seg button{border:0;background:none;border-radius:var(--r-pill);min-height:26px;padding:0 11px;font-size:var(--t-meta);color:var(--ink-3);cursor:pointer;transition:all var(--e-quick)}
.seg button:hover{color:var(--ink-0)}
.seg button[aria-selected="true"]{background:var(--paper);color:var(--ink-0);box-shadow:var(--sh-low)}
.btn-primary{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--sage-0);color:var(--on-sage);font-size:var(--t-cell);font-weight:600;cursor:pointer;transition:all var(--e-quick)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-mid)}
.btn-danger{background:var(--bad);color:var(--page)}

/* ── Tone semantics · never color without meaning ── */
[data-tone="revenue"],.t-good{color:var(--good)}
[data-tone="expense"],.t-bad{color:var(--bad)}
[data-tone="risk"],.t-warn{color:var(--warn)}
[data-tone="forecast"],.t-info{color:var(--info)}
.tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 5px;border-radius:4px;border:1px solid var(--line);color:var(--ink-3)}
.tag.t-new{color:var(--sage-0);border-color:color-mix(in oklch,var(--sage-0) 35%,transparent);background:var(--sage-bg-2)}
.tag.t-erp{color:var(--info);border-color:color-mix(in oklch,var(--info) 35%,transparent);background:color-mix(in oklch,var(--info) 9%,transparent)}
.badge{font-family:var(--font-mono);font-size:var(--t-micro);min-width:18px;text-align:center;padding:1px 5px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line-soft)}

/* ── Table contract (see README §Tables for the rules) ── */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-cell)}
.tbl thead th{position:sticky;top:0;z-index:2;background:var(--paper);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-1)}
.tbl tbody tr{transition:background var(--e-quick)}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-0)}
.tbl tr.ghost td{opacity:0;pointer-events:none}          /* ghost-padding: fixed row count, height never jumps */
.tbl tfoot td{position:sticky;bottom:0;background:var(--sage-bg-2);color:var(--sage-0);border-top:2px solid var(--sage-0);font-family:var(--font-mono);padding:10px 12px}
.bar-cell{position:relative;isolation:isolate}
.bar-cell::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--bar,0%);background:linear-gradient(90deg,var(--sage-bg),transparent);z-index:-1;transform-origin:left;animation:barGrow var(--e-enter) var(--ease)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Overlays · портал у #root, НЕ в body (STYLE_LOCK §20.1):
      блоки сторінки мають scroll-reveal transform, і position:fixed
      усередині трансформованого предка їде за екран. ─────── */
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(6px);z-index:100}
.modal{position:fixed;z-index:101;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-pop);animation:modalIn var(--e-enter) var(--ease-pop)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ── State atoms ──────────────────────────────────── */
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sage-0);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.skeleton{background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper) 50%,var(--paper-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}