/* ─────────────────────────────────────────────────────────────────────────────
   INKLINE · components   (requires tokens.css; behaviour in inkline.js)
   Rules baked in: flat surfaces · hard-edge depth (never a blur) · one accent ·
   shapes not colours · springs on every press · focus is always visible.
   Everything is prefixed  ik-  and reads only semantic tokens.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── base (opt in with <body class="ik">) ─────────────────────────────────── */
.ik, .ik * , .ik *::before, .ik *::after { box-sizing: border-box; }
/* hidden means hidden, whatever layout class the element also carries (02.1: tab panels are .ik-stack) */
.ik [hidden] { display: none !important; }
.ik {
  margin: 0; background: var(--ik-bg); color: var(--ik-text);
  font: 400 var(--ik-fs-body)/1.5 var(--ik-font-body); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.ik ::selection { background: var(--ik-marker); color: var(--ik-ink); }
:where(.ik) :focus-visible { outline: var(--ik-focus-w) solid var(--ik-text); outline-offset: 3px; }
/* UI-4: reduced motion (the device, or the member's choice) also stops endless animations */
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .ik *, :root:not([data-motion="full"]) .ik *::before, :root:not([data-motion="full"]) .ik *::after { animation-iteration-count: 1 !important; animation-duration: 1ms !important; } }
:root[data-motion="reduce"] .ik *, :root[data-motion="reduce"] .ik *::before, :root[data-motion="reduce"] .ik *::after { animation-iteration-count: 1 !important; animation-duration: 1ms !important; }
/* UI-18: an element with an id is reached by a link without hiding under the top bar */
:where(.ik) [id] { scroll-margin-top: 24px; }
@media (max-width: 860px) { :where(.ik) [id] { scroll-margin-top: 72px; } }
html:has(.ik) { scroll-padding-bottom: calc(var(--ik-dock) + 12px); }
/* no sideways pan, ever (post-release 01): whatever is a few pixels too wide is cut at the screen's edge instead of
   widening the page — on an iPhone a wider page also makes the layout viewport taller, which pushes the tab bar down.
   clip, not hidden: position: sticky keeps working. A sideways swipe never drags the page either. */
html:has(> body.ik), body.ik { overflow-x: clip; overscroll-behavior-x: none; }   /* what is scrolled to or focused never ends under the phone's tab bar */
:root:has(.ik-editor__bar) { --ik-bar: 64px; }
@media (max-width: 560px) { :root:has(.ik-editor__bar) { --ik-bar: 104px; } }   /* the bar wraps to two rows on small phones */   /* a page with an editor bar (Save draft · Publish): everything that floats at the bottom lifts above it, so the bar is always tappable (S6b) */
:where(.ik) button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; touch-action: manipulation; }
.ik button:disabled, .ik [aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }

/* ── type ─────────────────────────────────────────────────────────────────── */
.ik-display { font: 800 var(--ik-fs-display)/0.95 var(--ik-font-display); letter-spacing: var(--ik-track-display); margin: 0; }
.ik-h1 { font: 700 var(--ik-fs-h1)/1.05 var(--ik-font-display); letter-spacing: var(--ik-track-display); margin: 0; }
.ik-h2 { font: 700 var(--ik-fs-h2)/1.15 var(--ik-font-display); letter-spacing: var(--ik-track-heading); margin: 0; }
.ik-h3 { font: 600 var(--ik-fs-h3)/1.25 var(--ik-font-display); letter-spacing: -0.015em; margin: 0; }
.ik-body { font: 400 var(--ik-fs-body)/1.5 var(--ik-font-body); margin: 0; }
.ik-small { font: 400 var(--ik-fs-small)/1.45 var(--ik-font-body); color: var(--ik-text-2); margin: 0; }
.ik-num { font-family: var(--ik-font-display); font-weight: 800; letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-label, .ik-eyebrow { font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); margin: 0; }
.ik-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.ik-hand { font: 600 var(--ik-fs-hand)/1 var(--ik-font-hand); color: var(--ik-accent-text); display: inline-flex; align-items: flex-end; gap: 6px; transform: rotate(-2deg); }
.ik-hand svg { width: 44px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: -6px; }
.ik-link { color: var(--ik-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ik-marker); text-decoration-thickness: 2px; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.ik-link:hover { text-decoration-thickness: 3px; }
.ik-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ik-r-xs); font: 600 11px var(--ik-font-body); color: var(--ik-text-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-rule { height: 0; border: 0; border-top: 1px solid var(--ik-rule); margin: var(--ik-s-5) 0; }

/* ── glyphs & icons (sprite injected by inkline.js) ───────────────────────── */
.ik-glyph { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--ik-stroke-glyph); stroke-linejoin: round; overflow: visible; }
.ik-glyph.is-filled { fill: currentColor; }
.ik-glyph--lg { width: 28px; height: 28px; stroke-width: 0.9; } .ik-glyph--xl { width: 56px; height: 56px; stroke-width: 0.5; }
.ik-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ICOR stage symbols — the standard marks for Input · Control · Output · Refine (24×24 square, same footprint) */
.ik-stage { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; }
.ik-stage--sm { width: 16px; height: 16px; stroke-width: 2; } .ik-stage--lg { width: 40px; height: 40px; stroke-width: 0.9; } .ik-stage--xl { width: 64px; height: 64px; stroke-width: 0.6; }
.ik-kind .ik-stage { width: 16px; height: 16px; stroke-width: 2; color: var(--ik-accent-text); }
.ik-kind { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--ik-font-body); color: var(--ik-text-2); }
.ik-kind .ik-glyph { color: var(--ik-accent-text); }
.ik-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ik-marker); flex: none; }

/* ── buttons ─────────────────────────────────────────────────────────────────
   solid   → flat. Pressed, it moves into the surface: the fill dims, an inner highlight lights the edge
   marker  → rests on a deeper orange, sinks into it when pressed
   ghost   → a thin outline; pressed, it moves into the surface (fill + inner edge) */
.ik-btn {
  --btn-bg: var(--ik-solid); --btn-fg: var(--ik-on-solid); --btn-edge: var(--ik-marker-deep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  height: 46px; padding: 0 20px; border: 0; border-radius: var(--ik-r-btn);
  background: var(--btn-bg); color: var(--btn-fg); font: 600 16px/1 var(--ik-font-body); white-space: nowrap; user-select: none;
  transform: translateY(0); box-shadow: inset 0 0 0 1px transparent, inset 0 1px 0 transparent;
  transition: transform var(--ik-press), box-shadow var(--ik-press), background var(--ik-quick), color var(--ik-quick);
}
.ik-btn:active, .ik-btn.is-down {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--btn-bg) 90%, var(--btn-fg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-fg) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--btn-fg) 18%, transparent);
}
.ik-btn--marker { --btn-bg: var(--ik-marker); --btn-fg: var(--ik-ink); box-shadow: 0 var(--ik-sink) 0 var(--btn-edge); }
.ik-btn--marker:active, .ik-btn--marker.is-down { transform: translateY(calc(var(--ik-sink) - 1px)); background: var(--btn-bg); box-shadow: 0 1px 0 var(--btn-edge); }
.ik-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); margin-bottom: 0; }
.ik-btn--ghost:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-btn--ghost:active, .ik-btn--ghost.is-down { transform: translateY(1px); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-btn--lg { height: 54px; padding: 0 28px; border-radius: var(--ik-r-md); font-size: 17px; }
.ik-btn--sm { height: 34px; padding: 0 14px; font-size: 14px; --ik-sink: 3px; }
.ik-btn { max-width: 100%; min-width: 0; }
.ik-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* one-line buttons end in … (with a data-tip) */
.ik-btn--block { display: flex; width: 100%; height: auto; min-height: 46px; padding-block: 10px; white-space: normal; line-height: 1.25; text-align: center; text-wrap: balance; }   /* a block button wraps */
.ik-btn--block.ik-btn--sm { min-height: 34px; padding-block: 7px; } .ik-btn--block.ik-btn--lg { min-height: 54px; padding-block: 14px; }
.ik-btn--start { justify-content: flex-start; text-align: left; text-wrap: pretty; }   /* buttons stacked as a list: words start at the left */
.ik-btn--caps { font: 600 12px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); text-transform: uppercase; }
.ik-iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ik-r-btn);
  background: transparent; color: var(--ik-text-2); box-shadow: none;
  transition: background var(--ik-quick), color var(--ik-quick), box-shadow var(--ik-quick);
}
.ik-iconbtn .ik-icon { transition: transform var(--ik-press); }
.ik-iconbtn:hover { color: var(--ik-text); background: var(--ik-fill); }
/* pressed = moves into the surface, and stays in while toggled (aria-pressed / aria-expanded) */
.ik-iconbtn:active, .ik-iconbtn.is-down, .ik-iconbtn[aria-pressed="true"], .ik-iconbtn[aria-expanded="true"] { color: var(--ik-text); background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-iconbtn:active .ik-icon, .ik-iconbtn.is-down .ik-icon, .ik-iconbtn[aria-pressed="true"] .ik-icon, .ik-iconbtn[aria-expanded="true"] .ik-icon { transform: translateY(1px) scale(.94); }
.ik-iconbtn--outline { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
/* the one solid marker icon button of a view (play): marker fill, ink glyph, sinks like .ik-btn--marker; disabled fades */
.ik-iconbtn--marker { background: var(--ik-marker); color: var(--ik-ink); box-shadow: 0 var(--ik-sink, 4px) 0 var(--ik-marker-deep); }
.ik-iconbtn--marker:hover { background: var(--ik-marker); color: var(--ik-ink); }
.ik-iconbtn--marker:active, .ik-iconbtn--marker.is-down, .ik-iconbtn--marker[aria-pressed="true"] { transform: translateY(calc(var(--ik-sink, 4px) - 1px)); background: var(--ik-marker); color: var(--ik-ink); box-shadow: 0 1px 0 var(--ik-marker-deep); }
.ik-iconbtn--marker:disabled { opacity: .45; transform: none; box-shadow: none; cursor: default; }
.ik-iconbtn--outline:active, .ik-iconbtn--outline.is-down, .ik-iconbtn--outline[aria-pressed="true"], .ik-iconbtn--outline[aria-expanded="true"] { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-hold { overflow: hidden; min-width: 200px; }
.ik-hold__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ik-marker); transition: width 0ms; }
.ik-hold.is-holding .ik-hold__fill { width: 100%; transition: width var(--hold-ms, 900ms) linear; }
.ik-hold__label { position: relative; color: var(--ik-on-solid); }
.ik-hold.is-done { --btn-bg: var(--ik-marker); --btn-fg: var(--ik-ink); box-shadow: 0 var(--ik-sink) 0 var(--btn-edge); }
.ik-hold.is-done:active { transform: translateY(calc(var(--ik-sink) - 1px)); background: var(--btn-bg); box-shadow: 0 1px 0 var(--btn-edge); }
.ik-hold.is-done .ik-hold__fill { display: none; }
.ik-hold.is-done .ik-hold__label { color: var(--ik-ink); }

/* ── selection: segmented, chips, tags ────────────────────────────────────── */
.ik-seg { position: relative; display: inline-flex; padding: 3px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-faint) 60%, transparent); }
.ik-seg > button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 14px; border-radius: inherit; color: var(--ik-text-2); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); text-transform: uppercase; white-space: nowrap; transition: color var(--ik-quick), transform var(--ik-press); }
.ik-seg > button:active { transform: scale(.94); }
.ik-seg > button[aria-checked="true"], .ik-seg > button[aria-selected="true"] { color: var(--ik-on-solid); }
.ik-seg__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: inherit; background: var(--ik-solid); }
.ik-seg:not(.is-ready) > [aria-checked="true"], .ik-seg:not(.is-ready) > [aria-selected="true"] { background: var(--ik-solid); }
.ik-seg:not(.is-ready) > :is(button, a) { transition: transform var(--ik-press); } /* without the sliding thumb the chosen fill snaps, so the words snap with it (a fading colour left dark words on the dark fill for a moment) */ /* before (or without) data-ui="seg", a framework-rendered tab row shows its chosen tab too, not only a radiogroup */
.ik-seg--square { border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); }
.ik-seg--square > button { border-radius: 11px; font: 600 14px/1.2 var(--ik-font-body); letter-spacing: 0; text-transform: none; padding: 9px 16px; }
.ik-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--ik-r-pill); background: transparent; color: var(--ik-text); font: 500 14px/1 var(--ik-font-body); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); transition: transform var(--ik-press), background var(--ik-quick), color var(--ik-quick), box-shadow var(--ik-quick); }
.ik-chip:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-chip:active { transform: scale(.95); }
.ik-chip[aria-pressed="true"], .ik-chip[aria-checked="true"], .ik-chip.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; } /* UI-11: the chosen chip of a radiogroup (aria-checked) looks like a pressed toggle, as DESIGN §12 says the chip styles all three */
.ik-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--ik-r-xs); background: var(--ik-paper); color: var(--ik-ink); font: 600 10px/1 var(--ik-font-body); letter-spacing: 0.07em; text-transform: uppercase; }
.ik-tag--marker { background: var(--ik-marker); }
.ik-tag--pill { height: 24px; padding: 0 11px; border-radius: var(--ik-r-pill); background: transparent; color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font: 600 11px/1 var(--ik-font-body); letter-spacing: 0.08em; }
.ik-tag--outline { background: transparent; color: var(--ik-text-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); }
.ik-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ik-marker); color: var(--ik-ink); font: 600 11px/1 var(--ik-font-body); }
.ik-badge-done { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ik-r-sm); background: var(--ik-marker); color: var(--ik-ink); }
.ik-badge-done .ik-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.ik-avatar { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ik-surface-2); color: var(--ik-text); font: 700 14px/1 var(--ik-font-display); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); flex: none; }

/* ── form: text, switch, check, radio, slider ─────────────────────────────── */
.ik-field { display: grid; gap: 6px; }
.ik-field > label { font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-field__hint { font-size: 13px; color: var(--ik-text-2); margin: 0; }
.ik-input, .ik-textarea, .ik-select {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: var(--ik-r-btn); background: transparent; color: var(--ik-text);
  font: 400 16px/1.4 var(--ik-font-body); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick); outline: none; appearance: none;
}
.ik-input::placeholder, .ik-textarea::placeholder { color: var(--ik-text-2); }   /* UI-7: readable (≥ 4.5:1), text-3 is for decoration only */
.ik-input:hover, .ik-textarea:hover, .ik-select:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-input:focus, .ik-textarea:focus, .ik-select:focus { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-textarea { min-height: 96px; resize: vertical; }
.ik-select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E897D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.ik-field.is-error .ik-input, .ik-field.is-error .ik-textarea { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-field.is-error .ik-field__hint { color: var(--ik-accent-text); font-weight: 500; }
.ik-switch { appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border: 0; border-radius: var(--ik-r-pill); background: var(--ik-fill-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; flex: none; transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ik-paper); transition: transform var(--ik-press), width var(--ik-press); }
.ik-switch:checked { background: var(--ik-marker); box-shadow: none; }
.ik-switch:checked::before { transform: translateX(18px); }
.ik-switch:active::before { width: 22px; }
.ik-switch:checked:active::before { transform: translateX(14px); }
/* UI-20 · a quiet switch: on is solid (ink on paper, paper on ink), never the marker. For a list where many rows carry a switch (a
   roster of agents, a set of journals): the marker stays free to pick the one thing that matters on the page */
.ik-switch--quiet:checked { background: var(--ik-solid); }
.ik-switch--quiet:checked::before { background: var(--ik-on-solid); }
.ik-check { appearance: none; position: relative; width: 20px; height: 20px; margin: 0; border: 0; border-radius: var(--ik-r-sm); background: transparent; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; flex: none; transition: background var(--ik-quick), box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-check:active { transform: scale(.88); }
.ik-check:checked { background: var(--ik-solid); box-shadow: none; }
.ik-check:checked::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid var(--ik-on-solid); border-width: 0 1.6px 1.6px 0; border-radius: 0; transform: rotate(45deg); }
.ik-radio { appearance: none; position: relative; width: 20px; height: 20px; margin: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; flex: none; transition: box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-radio:active { transform: scale(.88); }
.ik-radio:checked { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); }
.ik-radio:checked::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ik-marker); }
.ik-option { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
/* UI-12 · an option with a switch: the words (and a hint under them) on the left, the switch on the right; the whole row is the label */
.ik-option--switch { justify-content: space-between; gap: 16px; padding-block: 6px; }
.ik-option__text { display: grid; gap: 2px; min-width: 0; }
.ik-option__hint { color: var(--ik-text-2); font-size: 13.5px; line-height: 1.4; }
.ik-option--switch .ik-switch { flex: none; }
/* UI-19 · a choice list: several things picked from a list that can be long (sessions, people, calendars). One bounded box: a head
   that says how many are chosen with Select all / Select none, then .ik-option rows (the .ik-check on the left, the name in sentence
   case, an optional .ik-option__hint) that scroll inside the box, never the page. data-ui="choices": the list is one Tab stop,
   ↑ ↓ Home End walk it, Space ticks; the head button and the count stay in step. A row is never a label style: no uppercase. */
.ik-choices { display: grid; min-width: 0; border-radius: var(--ik-r-md); background: transparent; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); overflow: hidden; }
.ik-choices__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 4px 4px 14px; box-shadow: inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); color: var(--ik-text-2); font: 500 13.5px/1.3 var(--ik-font-body); letter-spacing: 0; text-transform: none; }
.ik-choices__count { min-width: 0; font-variant-numeric: tabular-nums; }
.ik-choices__all { flex: none; }
.ik-choices__filter { display: block; padding: 8px 8px 4px; box-shadow: inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
.ik-choices__filter .ik-input { min-height: 40px; padding-block: 8px; }
.ik-choices__list { display: grid; align-content: start; max-height: var(--ik-choices-max, 268px); padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ik-outline) transparent; }
.ik-choices__list > .ik-option { padding: 6px 10px; border-radius: var(--ik-r-sm); color: var(--ik-text); font: 400 15px/1.35 var(--ik-font-body); letter-spacing: 0; text-transform: none; transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-choices__list > .ik-option:hover { background: var(--ik-fill); }
.ik-choices__list > .ik-option:active { background: var(--ik-fill-2); }
.ik-choices__list > .ik-option:has(:focus-visible) { box-shadow: inset 0 0 0 var(--ik-focus-w) var(--ik-text); }
.ik-choices__list > .ik-option .ik-check:focus-visible { outline: none; }
.ik-choices__list > .ik-option:has(:disabled) { opacity: .5; cursor: default; }
.ik-choices__list .ik-option__text { flex: 1; overflow-wrap: anywhere; }
.ik-choices__empty { margin: 0; padding: 12px 10px; color: var(--ik-text-2); font: 400 14px/1.45 var(--ik-font-body); }
@media (max-width: 560px) { .ik-choices__list > .ik-option { font-size: 16px; } }
/* UI-11 · a chip set: always wraps (--scroll: one row that scrolls). Single choice = radiogroup + aria-checked;
   navigation = links + aria-current="page"; several = aria-pressed (the chip styles all three) */
.ik-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ik-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ik-chips--scroll::-webkit-scrollbar { display: none; }
.ik-chips--scroll > * { flex: none; }
/* UI-14 · a textarea that grows with its words */
.ik-textarea--grow { field-sizing: content; min-height: calc(1.5em + 22px); max-height: 60vh; resize: none; }
.ik-slider { position: relative; height: 28px; width: 100%; --v: 0.5; }
.ik-slider::before, .ik-slider::after { content: ""; position: absolute; left: 0; top: 13px; height: 2px; border-radius: 1px; }
.ik-slider::before { right: 0; background: var(--ik-fill-2); }
.ik-slider::after { width: calc(9px + (100% - 18px) * var(--v)); background: var(--ik-marker); }
.ik-slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.ik-slider input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.ik-slider input::-moz-range-track { height: 28px; background: transparent; }
.ik-slider input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: 5px; border-radius: 50%; border: 0; background: var(--ik-solid); box-shadow: 0 0 0 3px var(--ik-bg); transition: transform var(--ik-press); }
.ik-slider input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--ik-solid); box-shadow: 0 0 0 3px var(--ik-bg); }
.ik-slider input:active::-webkit-slider-thumb { transform: scale(.88); }

/* ── progress: the marker traces the line ─────────────────────────────────── */
:root { --ik-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4C4.7 1.2 9.3 1.2 14 4S23.3 6.8 28 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.ik-bar { --p: 0.5; position: relative; height: 2px; border-radius: 1px; background: var(--ik-fill-2); overflow: hidden; }
.ik-bar > i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 1px; background: var(--ik-marker); transition: width var(--ik-trace); }
.ik-bar--lg { height: 4px; border-radius: 2px; } .ik-bar--lg > i { border-radius: 2px; }
.ik-bar--quiet > i { background: var(--ik-text-2); } /* progress beside something that already wears the marker (one accent per view) */
/* the rest of the way is a loose wave (like the journey lines); the done part is the straight marker line */
.ik-bar--wave { height: 8px; border-radius: 0; background: none; overflow: visible; }
.ik-bar--wave::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--p) * 100%); background: var(--ik-line); opacity: .7;
  -webkit-mask: var(--ik-wave) repeat-x left center / 28px 8px; mask: var(--ik-wave) repeat-x left center / 28px 8px; transition: left var(--ik-trace); }
.ik-bar--wave > i { position: absolute; top: 3px; left: 0; height: 2px; }
.ik-bar--wave.ik-bar--lg > i { top: 2px; height: 4px; }
.ik-pips { display: inline-flex; align-items: center; gap: 4px; }
.ik-pips > i { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-pips > i.on { background: var(--ik-solid); box-shadow: none; }
.ik-pips > i.now { background: var(--ik-marker); box-shadow: none; }
.ik-rings, .ik-chalk, .ik-untangle svg, .ik-loader { display: block; }
.ik-rings { overflow: visible; }
.ik-rings .track, .ik-rings .trace { fill: none; stroke-linecap: round; }
.ik-rings .track { stroke: var(--ik-rule); }
.ik-rings .trace { stroke: var(--ik-marker); transition: stroke-dashoffset var(--ik-trace); }
.ik-rings .cap { fill: var(--ik-bg); }
.ik-stat { display: grid; gap: 6px; }
.ik-stat__num { font: 800 56px/1 var(--ik-font-display); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-stat__num small { font-size: 22px; color: var(--ik-text-2); font-weight: 700; margin-left: 2px; }

/* ── surfaces: card, list, hero, steps ────────────────────────────────────── */
.ik-card { background: var(--ik-surface); border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 1px var(--ik-rule); padding: var(--ik-s-5); }
.ik-card--outline { background: transparent; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-card--press { cursor: pointer; transition: transform var(--ik-press), background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-card--press:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-card--press:active, .ik-card--press.is-down { transform: translateY(1px); background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-list { background: var(--ik-surface); border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 1px var(--ik-rule); overflow: hidden; }
.ik-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; background: none; color: inherit; text-align: left; position: relative; transition: background var(--ik-quick); }
.ik-row + .ik-row { box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-row:active { background: var(--ik-fill); }
.ik-row__lead { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--ik-r-sm); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); font: 600 13px var(--ik-font-body); color: var(--ik-text-2); }
.ik-row.is-done .ik-row__lead { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-row.is-current .ik-row__lead { background: var(--ik-marker); color: var(--ik-ink); box-shadow: none; }
.ik-row__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ik-row__title { font: 600 16px/1.25 var(--ik-font-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-row__sub { font-size: 13px; color: var(--ik-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-row__end { color: var(--ik-text-2); flex: none; display: inline-flex; align-items: center; gap: 8px; }
/* .ik-on-ink: a surface that stays ink in either theme (hero, media, art). Re-points the semantic tokens inside it. */
.ik-on-ink { --ik-bg: var(--ik-ink); --ik-surface: var(--ik-ink-1); --ik-surface-2: var(--ik-ink-2); --ik-text: var(--ik-paper); --ik-text-2: var(--ik-text-2-ink); --ik-text-3: var(--ik-text-3-ink); --ik-rule: var(--ik-ink-rule); --ik-solid: var(--ik-paper); --ik-on-solid: var(--ik-ink); --ik-on-solid-accent: var(--ik-marker-text); --ik-accent-text: var(--ik-marker); --ik-outline: color-mix(in srgb, var(--ik-faint) 55%, transparent); --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 60%, transparent); --ik-fill: color-mix(in srgb, var(--ik-paper) 7%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-paper) 15%, transparent); background: var(--ik-ink); color: var(--ik-paper); }
.ik-hero { position: relative; overflow: hidden; border-radius: var(--ik-r-xl); }
.ik-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 3; }
.ik-hero__art { position: relative; aspect-ratio: var(--ratio, 3 / 2); display: grid; place-items: center; }
.ik-hero__art .ik-tag { position: absolute; top: 12px; left: 12px; }
.ik-hero__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--ik-paper) 18%, transparent); }
.ik-hero__line > i { display: block; height: 100%; background: var(--ik-marker); }
.ik-hero__body { display: grid; gap: 10px; padding: 20px 22px 22px; }
.ik-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ik-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.ik-steps li + li { border-top: 1px solid var(--ik-rule); }
.ik-steps li > span { padding-top: 1px; transition: color var(--ik-quick); }
.ik-steps li:has(:checked) > span { color: var(--ik-text-3); text-decoration: line-through; text-decoration-color: var(--ik-marker); text-decoration-thickness: 2px; }

/* ── navigation ───────────────────────────────────────────────────────────── */
.ik-tabbar { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 22px; background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ik-tabbar__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 18px; background: var(--ik-solid); pointer-events: none; }
.ik-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: max-content; display: grid; justify-items: center; gap: 2px; padding: 8px clamp(6px, 1.6vw, 14px) 6px; border: 0; border-radius: 18px; background: none; color: var(--ik-text-2); transition: color var(--ik-quick), transform var(--ik-press); }
.ik-tab span { font: 600 9.5px/1 var(--ik-font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }   /* tabs share the width equally, but never below their label (post-release 01: COMMUNITY was cut by the pill) */
.ik-tab:active { transform: scale(.94); }
.ik-tab:hover { color: var(--ik-text); }
.ik-tab.is-on, .ik-tab[aria-selected="true"] { color: var(--ik-on-solid); }
.ik-tabbar:not(.is-ready) .ik-tab.is-on { background: var(--ik-solid); }
.ik-tab.just-on .ik-icon { animation: ik-pop 520ms var(--ik-soft) both; }
@keyframes ik-pop { 0% { transform: translateY(3px) scale(.78); } 45% { transform: translateY(-3px) scale(1.16); } 100% { transform: none; } }
.ik-navbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 var(--ik-s-3); box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-navbar__title { font: 600 16px var(--ik-font-display); letter-spacing: -0.015em; }
.ik-navbar > :last-child { justify-self: end; }
.ik-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 8px 8px 8px 0; color: var(--ik-text); font: 500 15px var(--ik-font-body); justify-self: start; }
.ik-back .ik-icon { width: 20px; height: 20px; stroke-width: 1.8; }
.ik-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ik-title h1 { font: 700 34px/1.08 var(--ik-font-display); letter-spacing: -0.028em; margin: 0; }
.ik-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.ik-section-head > :first-child { min-width: min(100%, 12ch); }
.ik-section-head h2 { font: 700 22px/1.2 var(--ik-font-display); letter-spacing: -0.022em; margin: 0; }
.ik-pill-switcher { position: relative; display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--ik-r-pill); background: var(--ik-solid); }
.ik-pill-switcher__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--ik-r-pill); background: var(--ik-marker); pointer-events: none; }
.ik-pill-switcher > button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 16px; border-radius: inherit; color: var(--ik-on-solid); opacity: .6; font: 600 11px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); text-transform: uppercase; transition: opacity var(--ik-quick), color var(--ik-quick); }
.ik-pill-switcher > button[aria-current="true"] { opacity: 1; color: var(--ik-ink); }
.ik-pill-switcher:not(.is-ready) > button[aria-current="true"] { background: var(--ik-marker); }

/* ── overlays (appearance only — position them in your app) ───────────────── */
.ik-scrim { background: var(--ik-scrim); }
.ik-sheet { background: var(--ik-bg); border-radius: var(--ik-r-xl) var(--ik-r-xl) 0 0; border: var(--ik-hair) solid var(--ik-outline); border-bottom: 0; padding: 10px var(--ik-s-5) var(--ik-s-6); }
.ik-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--ik-outline); margin: 0 auto 16px; }
.ik-menu { min-width: 220px; padding: 6px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); display: grid; }
.ik-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ik-text); font: 500 15px var(--ik-font-body); text-align: left; }
.ik-menu__item:hover, .ik-menu__item:focus-visible { background: var(--ik-fill); }
.ik-menu__item.is-destructive { color: var(--ik-accent-text); }
.ik-menu hr { border: 0; border-top: 1px solid var(--ik-rule); margin: 4px 6px; }
a.ik-menu__item { color: inherit; text-decoration: none; }
.ik-menu__label { padding: 8px 12px 4px; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-menu__item .ik-menu__hint { flex: none; margin-left: auto; padding-left: 16px; color: var(--ik-text-2); font-size: 12px; }
/* a choice made in place inside a menu (the profile menu's Ink | Paper): an icon and a label, then two options as a small
   segmented pill — role="menuitemradio" data-ik-keep, so arrow keys reach them and the menu stays open to show the change */
.ik-menu__seg { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 6px 4px 12px; color: var(--ik-text); font: 500 15px/1.2 var(--ik-font-body); }
.ik-menu__seg > .ik-icon { width: 20px; height: 20px; color: var(--ik-text-2); flex: none; }
.ik-menu__seg > span:first-of-type { flex: 1; }
.ik-menu__opts { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--ik-r-pill); background: var(--ik-fill); }
.ik-menu__opt { min-width: 58px; padding: 6px 12px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text-2); font: 600 13px/1 var(--ik-font-body); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick); }
.ik-menu__opt:hover { color: var(--ik-text); }
.ik-menu__opt[aria-checked="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-menu__opt:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 1px; }
/* the menu inline in a panel (no popup): a list of commands — icon left, words left, rows of at least 44px that wrap,
   a hint under the words; .ik-menu__label heads a group, <hr> splits groups */
.ik-menu--inline { min-width: 0; padding: 0; background: none; box-shadow: none; }
.ik-menu--inline .ik-menu__item { justify-content: flex-start; gap: 12px; min-height: 44px; padding: 8px 10px; line-height: 1.3; white-space: normal; }
.ik-menu--inline .ik-menu__item > .ik-icon { flex: none; width: 18px; height: 18px; color: var(--ik-text-2); }
.ik-menu--inline .ik-menu__item > span { min-width: 0; }
.ik-menu--inline .ik-menu__item .ik-menu__hint { display: block; margin: 2px 0 0; padding: 0; color: var(--ik-text-2); font-size: 12.5px; }
.ik-menu--inline .ik-menu__label { padding: 10px 10px 4px; }
.ik-menu--inline hr { margin: 6px 4px; }
.ik-dialog { max-width: 380px; padding: var(--ik-s-6); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); display: grid; gap: 12px; }
.ik-dialog__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; padding-bottom: var(--ik-sink); }
.ik-toast { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border-radius: var(--ik-r-md); background: var(--ik-solid); color: var(--ik-on-solid); font: 500 15px var(--ik-font-body); }
.ik-toast .ik-icon { color: var(--ik-on-solid-accent); }
.ik-toast__action { margin-left: 4px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ik-on-solid-accent); font: 600 14px var(--ik-font-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ik-toast__action:active { background: var(--ik-fill-2); }
.ik-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--ik-text-2); }
.ik-empty .ik-h3 { color: var(--ik-text); }

/* ── signature: the one continuous line ───────────────────────────────────── */
.ik-untangle { position: relative; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.ik-untangle svg { width: 100%; height: auto; overflow: visible; }
.ik-untangle__line { fill: none; stroke: var(--ik-text); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ik-untangle__knob { fill: var(--ik-marker); cursor: grab; }
.ik-untangle.is-drag .ik-untangle__knob { cursor: grabbing; }
.ik-untangle__state { position: absolute; right: 0; top: 0; }
.ik-untangle:focus-visible { outline-offset: 6px; }
.ik-chalk { width: 100%; height: auto; }
.ik-chalk .frame { fill: none; stroke: var(--ik-line); stroke-width: 1.5; }
.ik-chalk .life { fill: none; stroke: var(--ik-line); stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 0.1 7; stroke-linecap: round; }
.ik-chalk .region { cursor: pointer; }
.ik-chalk .region .hit { fill: transparent; }
.ik-chalk .region .edge { fill: none; stroke: var(--ik-dim); stroke-opacity: .6; stroke-width: 1.5; transition: stroke var(--ik-quick), stroke-opacity var(--ik-quick); }
.ik-chalk .region:hover .edge, .ik-chalk .region:focus-visible .edge { stroke: var(--ik-text); stroke-opacity: 1; }
.ik-chalk .trace { --p: 0; fill: none; stroke: var(--ik-marker); stroke-width: var(--ik-stroke-marker); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); opacity: calc(var(--p) * 1000); transition: stroke-dashoffset var(--ik-trace), opacity var(--ik-quick); }
.ik-chalk text { font: 500 20px var(--ik-font-body); letter-spacing: 0; fill: var(--ik-text-2); text-anchor: middle; pointer-events: none; }
:root[data-theme="paper"] .ik-chalk .region .edge { stroke: var(--ik-faint); }
.ik-loader { width: 96px; height: 48px; overflow: visible; }
.ik-loader path, .ik-loader use { fill: none; stroke: var(--ik-text); stroke-width: var(--ik-stroke-line, 1.5); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ik-draw 2.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes ik-draw { 0% { stroke-dashoffset: 1; } 55%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

/* ── notices: richer toasts — announcements, posts, events. Flat, thin outline, one accent. ── */
.ik-notice { position: relative; display: grid; gap: 10px; width: 100%; max-width: 400px; padding: 18px 20px 20px; border-radius: var(--ik-r-lg); background: var(--ik-surface); text-align: left; }
.ik-notice::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 2; }
.ik-notice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.ik-notice .ik-iconbtn { width: 32px; height: 32px; margin: -4px -8px -4px 0; }
.ik-notice__title { margin: 0; font: 600 19px/1.25 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-notice__text { margin: 0; color: var(--ik-text-2); font-size: 15px; line-height: 1.45; max-width: 34ch; }
.ik-notice__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ik-text-2); font-size: 14px; }
.ik-notice__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ik-notice__meta .ik-icon { width: 16px; height: 16px; color: var(--ik-accent-text); stroke-width: 1.8; }
.ik-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding-bottom: var(--ik-sink); }
.ik-notice__actions .ik-btn { --ik-sink: 3px; height: 38px; padding: 0 16px; font-size: 15px; }
.ik-notice__art { position: relative; margin: -18px -20px 6px; aspect-ratio: 16 / 9; border-radius: var(--ik-r-lg) var(--ik-r-lg) 0 0; overflow: hidden; background: var(--ik-ink); color: var(--ik-paper); }
.ik-notice__art > svg, .ik-notice__art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-notice__art .ik-iconbtn { position: absolute; top: 10px; right: 10px; margin: 0; background: var(--ik-ink); color: var(--ik-paper); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-notice__art .ik-iconbtn:active, .ik-notice__art .ik-iconbtn.is-down { background: var(--ik-ink-2); box-shadow: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-faint) 70%, transparent), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-notice__art .ik-tag { position: absolute; left: 12px; top: 12px; }
.ik-notice--compact { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 8px 10px 10px; max-width: 380px; }
.ik-notice--compact .ik-notice__thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--ik-ink); }
.ik-notice--compact .ik-notice__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-notice--compact .ik-notice__thumb > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-notice--compact .ik-notice__title { font-size: 16px; }
.ik-notice--compact .ik-notice__text { font-size: 13px; }
.ik-notice--compact .ik-iconbtn { margin: 0; }
/* stack: the newest notice in front, the rest peek out behind it as thin outlines.
   Hover / focus (or tap) unstacks them into full notices, one above the next. Layout is set by inkline.js (data-ui="stack"). */
.ik-notice-stack { position: relative; width: 100%; max-width: 400px; transition: height var(--ik-soft); }
.ik-notice-stack > .ik-notice { position: absolute; top: 0; left: 0; right: 0; max-width: none; transform-origin: 50% 100%; transition: transform var(--ik-soft); }
.ik-notice-stack > .ik-notice > * { transition: opacity var(--ik-quick); }
.ik-notice-stack > .ik-notice.is-behind > * { opacity: 0; }
.ik-art { display: block; color: var(--ik-paper); }
.ik-art .a-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ik-art .a-mark { fill: var(--ik-marker); }
.ik-art .a-shape { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* ── avatars ─────────────────────────────────────────────────────────────── */
.ik-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ik-avatar--sm { width: 28px; height: 28px; font-size: 11px; } .ik-avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.ik-avatar__badge { position: absolute; right: -5px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--ik-bg); box-shadow: 0 0 0 2px var(--ik-surface), inset 0 0 0 var(--ik-hair) var(--ik-text-2); color: var(--ik-text); font: 600 10.5px/19px var(--ik-font-body); text-align: center; font-style: normal; }
.ik-avatars { display: inline-flex; }
.ik-avatars .ik-avatar { width: 22px; height: 22px; font-size: 9px; margin-left: -7px; box-shadow: 0 0 0 2px var(--ik-surface), inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-avatars .ik-avatar:first-child { margin-left: 0; }
.ik-avatars .ik-avatar:nth-child(1) { z-index: 3; } .ik-avatars .ik-avatar:nth-child(2) { z-index: 2; } .ik-avatars .ik-avatar:nth-child(3) { z-index: 1; }
/* crowd (3.1): everyone who uses something, in one row across the full width — faces overlap evenly (each on top of the
   one before), as many as fit, then "+N" for the rest. data-ui="crowd" + data-total; the faces are .ik-avatar (links). */
.ik-crowd { display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 3px 0 3px 3px; }
.ik-crowd > .ik-avatar, .ik-crowd__more { flex: none; width: 34px; height: 34px; margin-left: -8px; box-shadow: 0 0 0 2.5px var(--ik-surface); transition: transform var(--ik-press); }
.ik-crowd > .ik-avatar { padding-right: 6px; font-size: 11px; letter-spacing: -0.02em; } /* initials sit left of the next face's overlap */
.ik-crowd > .ik-avatar:last-of-type, .ik-crowd > .ik-avatar:has(img) { padding-right: 0; }
.ik-crowd > :first-child { margin-left: 0; }
.ik-crowd > .ik-avatar[hidden] { display: none; }
.ik-crowd > a.ik-avatar:hover { z-index: 2; transform: translateY(-2px); }
.ik-crowd__more { position: relative; display: inline-grid; place-items: center; width: auto; min-width: 34px; padding: 0 9px; border-radius: var(--ik-r-pill); background: var(--ik-surface-2); color: var(--ik-text); font: 600 12px/1 var(--ik-font-body); text-decoration: none; }
.ik-crowd__more[hidden] { display: none; }
/* who is going (an event's RSVPs): the crowd, the count and a chevron as ONE button that opens the list (.ik-dialog--list) */
.ik-going { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 4px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text); font: 500 14px/1.2 var(--ik-font-body); text-align: left; cursor: pointer; transition: background var(--ik-quick), transform var(--ik-press); }
.ik-going:hover { background: var(--ik-fill); }
.ik-going:active { transform: translateY(1px); background: var(--ik-fill-2); }
.ik-going:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-going .ik-crowd { flex: 0 1 auto; pointer-events: none; }
.ik-going .ik-crowd > .ik-avatar, .ik-going .ik-crowd__more { width: 32px; height: 32px; }
.ik-going__count { white-space: nowrap; }
.ik-going__count b { font-weight: 650; }
.ik-going > .ik-icon { width: 16px; height: 16px; color: var(--ik-text-2); flex: none; }
.ik-going--empty { cursor: default; padding-left: 12px; color: var(--ik-text-2); }
.ik-going--empty:hover, .ik-going--empty:active { background: none; transform: none; }

/* ── dropdown (replaces the browser's own select popup) ─────────────────── */
.ik-dropdown { position: relative; display: block; width: 100%; }
.ik-dropdown__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ik-dropdown__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: var(--ik-r-btn); background: transparent; color: var(--ik-text); font: 400 16px/1.4 var(--ik-font-body); text-align: left; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick); }
.ik-dropdown__trigger:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-dropdown__trigger:focus-visible, .ik-dropdown__trigger[aria-expanded="true"] { outline: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-dropdown__trigger .ik-icon { width: 18px; height: 18px; color: var(--ik-text-2); transition: transform var(--ik-soft); }
.ik-dropdown__trigger[aria-expanded="true"] .ik-icon { transform: rotate(180deg); }
.ik-dropdown__menu { position: fixed; z-index: var(--ik-z-pop); min-width: 0; overflow-y: auto; outline: none; }
.ik-dropdown__menu[hidden] { display: none; }
.ik-dropdown__menu .ik-menu__item { justify-content: space-between; }
.ik-dropdown__menu .ik-menu__item .ik-icon { width: 18px; height: 18px; color: var(--ik-accent-text); opacity: 0; }
.ik-dropdown__menu .ik-menu__item.is-active { background: var(--ik-fill); }
.ik-dropdown__menu .ik-menu__item[aria-selected="true"] { font-weight: 600; }
.ik-dropdown__menu .ik-menu__item[aria-selected="true"] .ik-icon { opacity: 1; }

/* ── actions: quiet buttons on one row (post, reply) ─────────────────────── */
.ik-action { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); font: 500 14px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; transition: background var(--ik-quick), color var(--ik-quick), box-shadow var(--ik-quick); }
.ik-action .ik-icon { width: 20px; height: 20px; transition: fill var(--ik-quick), color var(--ik-quick); }
.ik-action:hover { color: var(--ik-text); background: var(--ik-fill); }
.ik-action:active, .ik-action.is-down { background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-action[aria-pressed="true"] { color: var(--ik-accent-text); }
.ik-action[aria-pressed="true"] .ik-icon { fill: currentColor; }
.ik-action--save[aria-pressed="true"] { color: var(--ik-text); }
.ik-action.just-on .ik-icon { animation: ik-pop 520ms var(--ik-soft) both; }

/* ── post (social feed) ─────────────────────────────────────────────────────
   One card on the darker surface. The avatar sits IN the header row (no rail under it), so the
   words, media and actions use the full width of the card. The post's kind sits top-right in the header. Head 44px → 14 → body → 12 → actions. */
.ik-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 640px; padding: 20px 22px 14px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: left; }
.ik-post__main { display: contents; }
.ik-post--wide { max-width: none; } /* a post that is the page (its own page, with replies below): as wide as its column */
.ik-post__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "av who kind more" "av role kind more"; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 44px; }
.ik-post__head > .ik-avatar { grid-area: av; }
/* a post by two people (a release by Tom & Paco): both faces in the avatar's place, the second tucked behind the first */
.ik-post__head > .ik-avatars { grid-area: av; }
.ik-post__head > .ik-avatars .ik-avatar { width: 36px; height: 36px; font-size: 13px; margin-left: -14px; }
.ik-post__head > .ik-avatars .ik-avatar:first-child { margin-left: 0; }
.ik-post__who { grid-area: who; justify-self: start; max-width: 100%; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ik-post__name { font: 600 16px/1.25 var(--ik-font-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-post__time { flex: none; color: var(--ik-text-2); font-size: 14px; }
.ik-post__time::before { content: "·"; margin-right: 8px; }
.ik-post__role { grid-area: role; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--ik-text-2); font-size: 14px; line-height: 1.3; }
.ik-post__menu { grid-area: more; margin: 0 -8px 0 0; align-self: start; }
.ik-post__head > .ik-post__kind { grid-area: kind; align-self: start; justify-self: end; margin: 2px 0 0 8px; white-space: nowrap; }
@media (max-width: 480px) { .ik-post__head > .ik-post__kind { font-size: 12px; gap: 5px; } }
.ik-post__body { margin-top: 14px; min-width: 0; }
/* Fold — the one "read more" for written text (05): .ik-expand (data-ui="expand" data-lines="N") clamps at a line boundary
   (no fade — no gradients); .ik-expand__toggle[data-expand-toggle], right after it, opens it on the SOFT spring. A feed post
   folds at 7 lines ("Show more"), a comment or reply at 6 ("Read more" — data-more / data-less name the two states).
   .ik-post__toggle is the toggle's old name, kept for one iteration. */
.ik-expand p { margin: 0 0 0.8em; font: 400 16px/1.55 var(--ik-font-body); text-wrap: pretty; }
.ik-expand p:last-child { margin-bottom: 0; }
.ik-expand.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); overflow: hidden; }
.ik-expand__toggle, .ik-post__toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 0; border: 0; background: none; color: var(--ik-text-2); font: 500 14px/1.4 var(--ik-font-body); }
.ik-expand__toggle[hidden], .ik-post__toggle[hidden] { display: none; }
.ik-expand__toggle:hover, .ik-post__toggle:hover { color: var(--ik-text); }
.ik-expand__toggle .ik-icon, .ik-post__toggle .ik-icon { width: 16px; height: 16px; transition: transform var(--ik-soft); }
.ik-expand__toggle[aria-expanded="true"] .ik-icon, .ik-post__toggle[aria-expanded="true"] .ik-icon { transform: rotate(180deg); }
.ik-reply .ik-expand__toggle { margin-top: 2px; font-size: 13px; } /* in a comment, at the scale of its reply row */
.ik-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 12px -10px 0; }
.ik-post__actions > .ik-replies { margin: 0 4px 0 0; height: 36px; }
.ik-post__actions .ik-spacer { flex: 1; }
.ik-replies { display: inline-flex; align-items: center; gap: 10px; height: 40px; margin: 6px -10px 0; padding: 0 10px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); font: 500 14px/1 var(--ik-font-body); transition: background var(--ik-quick), color var(--ik-quick); }
.ik-replies:hover { color: var(--ik-text); background: var(--ik-fill); }
.ik-replies .ik-icon { width: 16px; height: 16px; transition: transform var(--ik-soft); }
.ik-replies[aria-expanded="true"] .ik-icon { transform: rotate(180deg); }
.ik-thread { display: grid; padding-top: 8px; }
.ik-thread[hidden] { display: none; }
.ik-reply { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
.ik-reply:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 52px; bottom: -8px; width: 1px; background: var(--ik-outline); }
.ik-reply__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 32px; }
.ik-reply__name { font: 600 15px/1.25 var(--ik-font-display); letter-spacing: -0.01em; }
.ik-reply__time { color: var(--ik-text-2); font-size: 13px; }
.ik-reply__time::before { content: "·"; margin-right: 8px; }
.ik-reply__text { margin: 2px 0 0; font: 400 15px/1.5 var(--ik-font-body); }
.ik-reply__text a, .ik-mention { color: var(--ik-accent-text); text-decoration: none; font-weight: 500; }
.ik-reply .ik-post__actions { margin-top: 4px; }
.ik-reply__content { min-width: 0; }
.ik-reply.has-children::before { content: ""; display: block; position: absolute; left: 15.5px; top: 52px; bottom: 12px; width: 1px; background: var(--ik-outline); }
.ik-reply.has-children.is-folded::before, .ik-reply.has-children:has(> .ik-reply__content > .ik-replies[aria-expanded="false"])::before { display: none; }
.ik-reply--nested { padding: 8px 0 4px; }
.ik-reply--nested::before { display: none !important; }
/* the line into a reply is the brand's line: it leaves the spine and swings into the reply's avatar */
.ik-reply--nested::after { content: ""; position: absolute; left: -28.5px; top: 6px; width: 26px; height: 20px; background: var(--ik-outline);
  -webkit-mask: var(--ik-swing) no-repeat 0 0 / 100% 100%; mask: var(--ik-swing) no-repeat 0 0 / 100% 100%; }
:root { --ik-swing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cpath d='M.5 0C.5 9 3 15.5 8 16.3c4.3.7 6-2.8 9.2-2.4 2.8.3 4.4 3.7 8.3 4.1' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* a comment's own menu (three dots) sits top right; replies fold under the familiar replies toggle */
.ik-reply__head .ik-reply__menu { margin-left: auto; width: 32px; height: 32px; }
.ik-reply__head .ik-reply__menu .ik-icon { width: 18px; height: 18px; }
.ik-reply .ik-replies { height: 32px; margin: 2px -10px 0; font-size: 13px; }
.ik-reply .ik-replies .ik-avatars .ik-avatar { width: 20px; height: 20px; }
.ik-reply .ik-replies[aria-expanded="true"] > .ik-icon:last-child { transform: rotate(180deg); }
.ik-thread--nested { padding-top: 0; }
/* every thread starts folded (05); when the replies toggle opens it, its replies rise in one after another (--i: the reply's place) */
.ik-thread--nested > .ik-reply { animation: ik-reply-rise 460ms cubic-bezier(.2,.9,.25,1) backwards; animation-delay: calc(70ms + var(--i, 0) * 55ms); } /* backwards, never forwards: a filling transform would hold the reply's fixed menus */
@keyframes ik-reply-rise { from { opacity: 0; transform: translateY(10px); } }
.ik-composer--inline { padding: 8px 0 4px; }
.ik-reply .ik-action { height: 32px; }
/* a reply still on its way to the server (shown at once, principle 8): quieter until it is stored, no actions yet */
.ik-reply[aria-busy="true"] > .ik-reply__content, .ik-reply[aria-busy="true"] > .ik-avatar { opacity: .62; transition: opacity var(--ik-quick); }
/* narrow (15z — a phone, a side column, a card): every pixel across goes to the words. The thread is a container; under
   520px a comment is one header row (avatar · name · badge · time · ⋯) with the text, its actions and its replies below
   at the full width — nothing indented past the avatar. Replies sit behind one thin thread line, a small step in. */
.ik-thread:not(.ik-thread--nested) { container: ik-thread / inline-size; }
@container ik-thread (max-width: 520px) {
  .ik-reply { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 12px 0 8px; }
  .ik-reply > .ik-avatar { grid-column: 1; grid-row: 1; align-self: center; }
  .ik-reply__content { display: contents; }
  .ik-reply__content > * { grid-column: 1 / -1; min-width: 0; }
  .ik-reply__content > .ik-reply__head { grid-column: 2; grid-row: 1; }
  .ik-reply__content > .ik-replies, .ik-reply__content > .ik-expand__toggle { justify-self: start; }
  .ik-reply__head { flex-wrap: nowrap; gap: 6px; min-height: 28px; min-width: 0; }
  .ik-reply__head > * { flex: none; }
  .ik-reply__name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ik-reply__time { white-space: nowrap; }
  .ik-reply__time::before { margin-right: 6px; }
  .ik-reply__head .ik-reply__menu { margin-right: -6px; }
  .ik-reply__text { margin-top: 6px; }
  .ik-reply .ik-post__actions { margin: 2px -8px 0; gap: 0; }
  .ik-reply .ik-action { height: 34px; padding: 0 8px; gap: 5px; font-size: 13px; }
  .ik-reply .ik-action .ik-icon { width: 18px; height: 18px; }
  .ik-reply .ik-replies { margin: 0 -8px; padding: 0 8px; }
  /* no spine at the old avatar column: it would run through the words (every selector the wide layout draws it with) */
  .ik-reply::before, .ik-reply:not(:last-child)::before, .ik-reply.has-children::before, .ik-reply.has-children:not(.is-folded)::before { display: none; }
  .ik-thread--nested { margin: 4px 0 0 13px; padding-left: 12px; box-shadow: inset var(--ik-hair) 0 0 var(--ik-outline); }
  .ik-reply--nested { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; padding: 8px 0 4px; }
  .ik-reply--nested > .ik-avatar { width: 24px; height: 24px; font-size: 10px; }
  .ik-reply--nested::after { display: none; }
  .ik-reply--nested .ik-reply__head { min-height: 24px; }
}

/* ── composer: ONE thin outline. focus turns it orange, the toolbar folds out inside it ── */
.ik-composer { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 4px 0 8px; }
.ik-composer__box { border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); padding: 0 14px; transition: box-shadow var(--ik-quick); }
.ik-composer__box:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-composer__box:focus-within { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-composer textarea { display: block; width: 100%; height: 44px; padding: 12px 0; border: 0; background: none; color: var(--ik-text); font: 400 15px/1.5 var(--ik-font-body); resize: none; outline: none; overflow: hidden; transition: height var(--ik-soft); }
.ik-composer textarea::placeholder { color: var(--ik-text-2); }
.ik-composer.is-open textarea { height: 84px; }
.ik-composer__bar { display: flex; align-items: center; gap: 2px; height: 0; margin: 0 -8px; overflow: hidden; opacity: 0; transition: height var(--ik-soft), opacity var(--ik-quick); }
.ik-composer.is-open .ik-composer__bar { height: 48px; opacity: 1; }
.ik-composer__bar .ik-iconbtn { width: 34px; height: 34px; }
.ik-composer__bar .ik-iconbtn .ik-icon { width: 20px; height: 20px; }
.ik-composer__bar .ik-btn { margin-left: auto; margin-right: 8px; height: 34px; padding: 0 16px; font-size: 14px; }
.ik-composer__bar .ik-btn:disabled { opacity: .35; }
.ik-composer__bar .ik-btn + .ik-btn { margin-left: 0; } /* two buttons (editing: Cancel · Save) sit together on the right */
/* the format buttons (iteration 06): "Aa" opens the format bar at the caret, then one-press commands (a code block). Docked on
   a phone only "Aa" stays beside Send */
.ik-composer__fmt { display: flex; align-items: center; gap: 2px; flex: none; }
.ik-composer__fmt + .ik-small { padding-left: 4px; }
.ik-composer.is-docked .ik-composer__fmt > :not(:first-child) { display: none; }
/* editing in place (iteration 06): the composer where the words were — no avatar of its own (the comment or post already
   shows who wrote it), open, Cancel · Save on the right */
.ik-composer--edit { grid-template-columns: minmax(0, 1fr); padding: 2px 0 4px; }
.ik-composer--edit textarea { min-height: 84px; }
.ik-composer__tools .ik-composer__fmt > .ik-iconbtn { width: 36px; height: 36px; color: var(--ik-text-2); }
.ik-composer__tools .ik-composer__fmt > .ik-iconbtn:hover { color: var(--ik-text); }
.ik-composer__tools .ik-composer__fmt > .ik-iconbtn .ik-icon { width: 20px; height: 20px; }
/* what else a member makes from the post composer (iteration 06): an article and a video, side by side, the same weight —
   on their own line under the tools, on the right (the tool row wraps for them; Post stays at the end of the first line) */
.ik-composer__tools:has(.ik-composer__make) { flex-wrap: wrap; row-gap: 6px; }
.ik-composer__make { order: 1; display: flex; align-items: center; justify-content: flex-end; flex: 1 0 100%; gap: 6px 20px; padding: 2px 6px 0; }
.ik-composer__make .ik-link { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.ik-composer__make .ik-link .ik-icon { width: 18px; height: 18px; }
@media (max-width: 560px) { .ik-composer__make { justify-content: flex-start; flex-wrap: wrap; } }
/* the format bar (.ik-fmt, inkline.js formatting): rises over selected words in any textarea[data-format] — or at the caret
   from an "Aa" button. One thin outline like a menu, icon buttons, pressed = what the selection already has */
.ik-fmt { position: fixed; z-index: var(--ik-z-pop); display: flex; align-items: center; gap: 2px; max-width: calc(100vw - 16px); padding: 4px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); overflow-x: auto; scrollbar-width: none; -webkit-user-select: none; user-select: none; }
.ik-fmt[hidden] { display: none; }
.ik-fmt.is-in { animation: ik-fmt-in var(--ik-press) both; }
@keyframes ik-fmt-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.ik-fmt__btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ik-text-2); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick), transform var(--ik-press); }
.ik-fmt__btn .ik-icon { width: 18px; height: 18px; }
.ik-fmt__btn:hover { background: var(--ik-fill); color: var(--ik-text); }
.ik-fmt__btn:active { transform: scale(.9); }
.ik-fmt__btn[aria-pressed="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-fmt__btn:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: -2px; }
.ik-fmt__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--ik-rule); }
@media (pointer: coarse) { .ik-fmt__btn { width: 40px; height: 40px; } .ik-fmt__btn .ik-icon { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .ik-fmt.is-in { animation: none; } }
@media (pointer: coarse) { .ik-composer textarea { font-size: 16px; } } /* under 16px the iPhone zooms the page into the box */
.ik-composer__main > .ik-suggest { margin-top: 0; }
/* "Replying to Name ×" (15z): which comment the words go under, in the composer above the box; × makes it a new comment */
.ik-composer__to { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding-left: 4px; color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); }
.ik-composer__to > .ik-icon { flex: none; width: 16px; height: 16px; }
.ik-composer__to > b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ik-text); font-weight: 600; }
.ik-composer__to > .ik-iconbtn { flex: none; width: 28px; height: 28px; margin-left: auto; }
.ik-composer__to > .ik-iconbtn .ik-icon { width: 16px; height: 16px; }
/* docked (15z · data-dock + data-ui="composer"): on a phone the composer the member writes in leaves the page and sits at
   the bottom of the screen, right on top of the keyboard, as in Messages. inkline.js keeps its place in the page
   (min-height), follows the keyboard (--ik-kb: its height where Safari does not shrink the page for it; 0 inside the iPhone
   app, whose web view shrinks above the keyboard) and grows the box with the words up to a third of the screen. Send is
   always beside the words. While one is docked (<html data-ik-docked>) the tab bar and the floating cards step aside and
   toasts lift above it. */
.ik-composer.is-docked > .ik-avatar { visibility: hidden; }
.ik-composer.is-docked > .ik-composer__main { position: fixed; z-index: var(--ik-z-float); left: 0; right: 0; bottom: var(--ik-kb, 0px); gap: 6px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--ik-bg); box-shadow: 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
:root[data-ik-kb] .ik-composer.is-docked > .ik-composer__main { padding-bottom: 8px; } /* the keyboard covers the home indicator */
.ik-composer.is-docked .ik-composer__box { display: flex; align-items: flex-end; gap: 6px; padding: 0 5px 0 16px; border-radius: 22px; background: var(--ik-surface); }
.ik-composer.is-docked textarea { flex: 1; min-width: 0; height: 44px; max-height: 168px; padding: 11px 0; font-size: 16px; transition: none; }
.ik-composer.is-docked .ik-composer__bar { flex: none; height: auto; margin: 0 0 5px; opacity: 1; overflow: visible; }
.ik-composer.is-docked .ik-composer__bar > .ik-small { display: none; }
.ik-composer.is-docked .ik-composer__bar .ik-btn { margin: 0; height: 34px; border-radius: 17px; }
.ik-composer.is-docked .ik-suggest { max-height: min(220px, 30vh); }
:root[data-ik-docked] { --ik-dock: 0px; --ik-bar: calc(var(--ik-composer-h, 60px) + var(--ik-kb, 0px)); scroll-padding-bottom: calc(var(--ik-bar) + 12px); }
:root[data-ik-docked] .ik-app__tabbar, :root[data-ik-docked] .ik-annstack, :root[data-ik-docked] .ik-floatstack { visibility: hidden; } /* nothing floats over the words while the member writes */
:root[data-ik-docked] .ik-app__main { padding-bottom: calc(var(--ik-bar) + 24px); }

/* arrived (15z): what a link pointed at — a notification, a copied link, Later — is washed once in the marker so the eye
   finds it, then fades (Inkline.arrive / Inkline.reveal(el, { arrive: true })). Still under reduced motion; only the fade goes. */
:root { --ik-arrive: color-mix(in srgb, var(--ik-marker) 14%, transparent); }
.ik-reply.is-arrived, .ik-post.is-arrived, .ik-row.is-arrived, .ik-card.is-arrived, .ik-msg.is-arrived { border-radius: var(--ik-r-sm); background-color: var(--ik-arrive); box-shadow: 0 0 0 8px var(--ik-arrive); }
.ik-reply.is-arrived.is-fading, .ik-post.is-arrived.is-fading, .ik-row.is-arrived.is-fading, .ik-card.is-arrived.is-fading, .ik-msg.is-arrived.is-fading { background-color: transparent; box-shadow: 0 0 0 8px transparent; transition: background-color 1s ease-out, box-shadow 1s ease-out; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .is-arrived.is-fading { transition: none; } }
:root[data-motion="reduce"] .is-arrived.is-fading { transition: none; }

/* ── jline: ICOR progress as lines — symbol · progress line · percent. Straight orange = done, loose smooth wave = still to go ── */
.ik-jline { display: grid; grid-template-columns: 24px minmax(0, 1fr) 44px; align-items: center; gap: 16px; }
.ik-jline__track { height: 20px; min-width: 0; }
.ik-jline__track svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ik-jline__done { fill: none; stroke: var(--ik-marker); stroke-width: 2.5; stroke-linecap: round; }
.ik-jline__todo { fill: none; stroke: var(--ik-outline); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ik-jline__pct { color: var(--ik-text-2); font: 500 14px/1 var(--ik-font-display); font-variant-numeric: tabular-nums; text-align: right; }

/* ── popup menu (three-dot menu etc.): icon left, groups split by thin rules, destructive in the accent ── */
.ik-popmenu { position: fixed; z-index: var(--ik-z-pop); min-width: 240px; width: max-content; max-width: min(380px, calc(100vw - 16px)); }
.ik-popmenu[hidden] { display: none; }
.ik-menu--icons .ik-menu__item { justify-content: flex-start; gap: 14px; min-height: 44px; padding: 0 14px 0 12px; }
.ik-menu--icons .ik-menu__item .ik-icon { width: 20px; height: 20px; color: var(--ik-text-2); transition: color var(--ik-quick); }
.ik-menu--icons .ik-menu__item:hover .ik-icon, .ik-menu--icons .ik-menu__item:focus-visible .ik-icon { color: var(--ik-text); }
.ik-menu--icons .ik-menu__item.is-destructive .ik-icon { color: var(--ik-accent-text); }
.ik-menu__item:focus-visible { outline: none; background: var(--ik-fill); }
.ik-menu__item:active { background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }

/* ── tooltips & callouts. A label (data-tip) or a callout card (data-tip + data-tip-body): highlight, a line that draws itself, a card that slides in ── */
.ik-tip, .ik-tooltip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--ik-solid); color: var(--ik-on-solid); font: 600 12.5px/1.25 var(--ik-font-body); }
.ik-tooltip { position: fixed; left: 0; top: 0; z-index: var(--ik-z-tip); pointer-events: none; }
.ik-tooltip[hidden], .ik-callout[hidden], .ik-callout-hl[hidden] { display: none; }
.ik-tip .ik-kbd, .ik-tooltip .ik-kbd { height: 18px; min-width: 18px; padding: 0 5px; border-radius: 5px; color: inherit; opacity: .75; font: 600 11px/1 var(--ik-font-body); box-shadow: inset 0 0 0 1px currentColor; }
.ik-callout { display: grid; gap: 10px; width: 260px; padding: 16px 18px 18px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: left; }
.ik-callout--float { position: fixed; left: 0; top: 0; z-index: var(--ik-z-tip); pointer-events: none; }
.ik-callout__top { display: flex; align-items: center; gap: 10px; }
.ik-callout__n { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ik-accent); color: var(--ik-ink); font: 600 11px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-callout h3 { margin: 0; font: 600 17px/1.25 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-callout p { margin: 0; color: var(--ik-text-2); font-size: 14px; line-height: 1.5; }
.ik-callout p b { color: var(--ik-text); font-weight: 600; }
.ik-callout__how { padding-top: 10px; box-shadow: inset 0 1px 0 var(--ik-rule); font: 500 12.5px/1.6 var(--ik-font-body); color: var(--ik-text-2); font-variant-numeric: tabular-nums; }
.ik-callout__lab { display: block; margin-bottom: 2px; font: 600 10px/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-accent-text); }
.ik-callout-hl { position: fixed; z-index: 118; left: 0; top: 0; border-radius: 10px; box-shadow: 0 0 0 1px var(--ik-accent); pointer-events: none; }
.ik-callout-lines { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 119; pointer-events: none; overflow: visible; }
.ik-callout-lines path { fill: none; stroke: var(--ik-accent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ik-callout-lines circle { fill: var(--ik-accent); opacity: 0; }

/* ── ICOR micro: the journey at badge size — one ring, four arcs (Input · Control · Output · Refine), each filled on its own ── */
.ik-icor-micro { --s: 22px; display: block; width: var(--s); height: var(--s); overflow: visible; flex: none; }
.ik-icor-micro circle { fill: none; stroke-linecap: butt; }
.ik-icor-micro .track { stroke: var(--ik-outline); }
.ik-icor-micro .fill { stroke: var(--ik-marker); transition: stroke-dasharray var(--ik-trace); }
.ik-avatar__icor { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ik-surface); box-shadow: 0 0 0 2px var(--ik-surface); }
.ik-avatar__icor .ik-icor-micro { --s: 16px; }
.ik-avatar--sm .ik-avatar__icor { right: -7px; bottom: -7px; width: 16px; height: 16px; } .ik-avatar--sm .ik-avatar__icor .ik-icor-micro { --s: 12px; }
.ik-avatar--lg .ik-avatar__icor { right: -10px; bottom: -10px; width: 24px; height: 24px; } .ik-avatar--lg .ik-avatar__icor .ik-icor-micro { --s: 19px; }
.ik-avatar--ring > .ik-icor-micro { position: absolute; inset: -7px; --s: calc(100% + 14px); width: calc(100% + 14px); height: calc(100% + 14px); }

/* ── modals: dialog · CTA with image · lightbox ─────────────────────────────── */
.ik-modal { position: fixed; inset: 0; z-index: var(--ik-z-modal); display: grid; place-items: center; padding: 24px; }
.ik-modal[hidden] { display: none; }
.ik-modal__scrim { position: absolute; inset: 0; background: var(--ik-scrim); }
.ik-modal__panel { position: relative; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; }
.ik-modal .ik-dialog { width: min(400px, 100%); max-width: none; }
.ik-kind .ik-icon { width: 16px; height: 16px; color: var(--ik-accent-text); stroke-width: 1.8; }
.ik-cta { position: relative; width: min(520px, 100%); border-radius: var(--ik-r-xl); background: var(--ik-surface); overflow: hidden; }
.ik-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 3; }
.ik-cta__art { position: relative; aspect-ratio: 16 / 9; background: var(--ik-ink); color: var(--ik-paper); }
.ik-cta__art > svg, .ik-cta__art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-cta__art .ik-iconbtn { position: absolute; top: 12px; right: 12px; background: var(--ik-ink); color: var(--ik-paper); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-cta__art .ik-iconbtn:active, .ik-cta__art .ik-iconbtn.is-down { background: var(--ik-ink-2); }
.ik-cta__art .ik-tag { position: absolute; left: 14px; top: 14px; }
.ik-cta__body { display: grid; gap: 12px; padding: 24px 26px 26px; }
.ik-cta__title { margin: 0; font: 800 30px/1.05 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-cta__text { margin: 0; color: var(--ik-text-2); font-size: 16px; line-height: 1.5; }
.ik-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; padding-bottom: var(--ik-sink); }
.ik-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; width: 100%; }
.ik-tile { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--ik-ink); transition: transform var(--ik-press); }
.ik-tile > [data-art] { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ik-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 2; transition: box-shadow var(--ik-quick); }
.ik-tile:hover::after { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-tile:hover { transform: scale(1.025); }
.ik-tile:active, .ik-tile.is-down { transform: scale(.97); }
.ik-tile__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); }
.ik-tile__play .ik-icon { width: 18px; height: 18px; }
.ik-tile .ik-tag { position: absolute; right: 8px; bottom: 8px; }

.ik-lightbox { padding: 0; }
.ik-lightbox .ik-modal__scrim { background: color-mix(in srgb, var(--ik-ink) 96%, transparent); }
.ik-lightbox .ik-modal__panel { position: absolute; inset: 0; max-height: none; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ik-lb__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px 6px 22px; }
.ik-lb__count { font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; color: var(--ik-text-2); flex: none; }
.ik-lb__title { flex: 1; min-width: 0; font: 600 16px/1.2 var(--ik-font-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-lb__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.ik-lb__zoom { min-width: 46px; text-align: center; font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; color: var(--ik-text-2); }
.ik-lb__tools .ik-iconbtn:disabled { opacity: .3; }
.ik-lb__stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; }
.ik-lb__stage.is-zoomed { cursor: grab; } .ik-lb__stage.is-panning { cursor: grabbing; }
.ik-lb__media { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; place-items: center; transform-origin: 50% 50%; will-change: transform; } /* definite tracks: the picture fits the screen (3.1) */
.ik-lb__media.is-anim { transition: transform var(--ik-soft); }
.ik-lb__img { max-width: calc(100% - 168px); max-height: calc(100% - 12px); object-fit: contain; border-radius: 6px; outline: var(--ik-hair) solid var(--ik-outline); outline-offset: calc(var(--ik-hair) * -1); user-select: none; -webkit-user-drag: none; }
.ik-lb__nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--ik-ink); color: var(--ik-paper); }
.ik-lb__nav .ik-icon { width: 22px; height: 22px; }
.ik-lb__nav:disabled { opacity: .25; }
.ik-lb__nav--prev { left: 20px; } .ik-lb__nav--next { right: 20px; }
.ik-lightbox.is-single .ik-lb__nav, .ik-lightbox.is-single .ik-lb__thumbs { display: none; }
.ik-lb__foot { display: grid; justify-items: center; gap: 12px; padding: 8px 18px 18px; min-height: 24px; }
.ik-lb__caption { margin: 0; max-width: 72ch; text-align: center; color: var(--ik-text-2); font-size: 14px; line-height: 1.5; }
.ik-lb__caption:empty { display: none; }
.ik-lb__thumbs { display: flex; justify-content: center; gap: 10px; max-width: 100%; overflow-x: auto; padding: 2px; }
.ik-lb__thumb { position: relative; flex: none; width: 72px; height: 48px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--ik-ink-1); opacity: .55; transition: opacity var(--ik-quick), transform var(--ik-press); }
.ik-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ik-lb__thumb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 1; }
.ik-lb__thumb:hover { opacity: .9; } .ik-lb__thumb:active { transform: scale(.94); }
.ik-lb__thumb[aria-current="true"] { opacity: 1; }
.ik-lb__thumb[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent); }
.ik-lb__thumb-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); }
.ik-lb__thumb-play .ik-icon { width: 11px; height: 11px; }
.ik-lb__video { position: relative; width: min(1120px, calc(100% - 176px)); aspect-ratio: 16 / 9; max-height: 100%; border-radius: 10px; overflow: hidden; background: var(--ik-ink); }
.ik-lb__video::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 2; }
.ik-lb__frame { position: absolute; inset: 0; cursor: pointer; }
.ik-lb__frame canvas, .ik-lb__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ik-lb__bigplay { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border: 0; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); transition: opacity var(--ik-quick), transform var(--ik-press); }
.ik-lb__bigplay .ik-icon { width: 30px; height: 30px; margin-left: 3px; }
.ik-lb__bigplay:active { transform: scale(.94); }
.ik-lb__video.is-playing .ik-lb__bigplay { opacity: 0; pointer-events: none; transform: scale(.8); }
.ik-lb__vbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: color-mix(in srgb, var(--ik-ink) 78%, transparent); }
.ik-lb__time { flex: none; font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; color: var(--ik-text-2); }
.ik-lb__scrub { --p: 0; position: relative; flex: 1; height: 24px; cursor: pointer; outline: none; }
.ik-lb__scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 1px; background: var(--ik-outline); }
.ik-lb__scrub > i { position: absolute; left: 0; top: 11px; height: 2px; border-radius: 1px; width: calc(var(--p) * 100%); background: var(--ik-marker); }
.ik-lb__scrub > i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ik-marker); }
.ik-lb__scrub:focus-visible::before { box-shadow: 0 0 0 4px var(--ik-fill-2); }
@media (max-width: 720px) { .ik-lb__img { max-width: calc(100% - 24px); } .ik-lb__video { width: calc(100% - 24px); } .ik-lb__nav { width: 40px; height: 40px; margin-top: -20px; } .ik-lb__nav--prev { left: 8px; } .ik-lb__nav--next { right: 8px; } .ik-lb__title { display: none; } }

/* ── hand note: a handwritten aside. Static arrow variants (below) or data-ui="handnote" data-target="#thing" for an arrow that points at the real thing ── */
.ik-hand--se, .ik-hand--nw { align-items: center; } .ik-hand--se svg, .ik-hand--nw svg { width: 30px; height: 44px; margin: 0; }
.ik-hand--sw, .ik-hand--nw, .ik-hand--left { flex-direction: row-reverse; } .ik-hand--sw svg { margin: 0; }
.ik-hand--right svg, .ik-hand--left svg { width: 48px; height: 20px; margin: 0 0 2px; }
.ik-hand--left svg { transform: scaleX(-1); }
.ik-hand--down, .ik-hand--up { flex-direction: column; align-items: flex-start; gap: 2px; }
.ik-hand--up { flex-direction: column-reverse; }
.ik-hand--down svg, .ik-hand--up svg { width: 24px; height: 40px; margin: 0 0 0 10px; }
.ik-hand--up svg { transform: rotate(180deg); }
.ik-hand--none { transform: rotate(-2deg); }
.ik-hand--target { display: inline-block; transform: none; }
.ik-hand--target .ik-hand__text { display: inline-block; transform: rotate(-2deg); }
.ik-hand__pointer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 5; }
.ik-hand__pointer path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── drawn structures: lines that draw on, shapes that pop, dashes that flow, tokens that travel ── */
.ik-draw, .ik-draw-late { fill: none; stroke: currentColor; stroke-width: var(--ik-stroke-line); stroke-linecap: round; stroke-linejoin: round; }
.ik-draw--mark { stroke: var(--ik-marker); }
.ik-draw-pop { transform-box: fill-box; transform-origin: center; }
.ik-flowdash { stroke-dasharray: 2 9; animation: ik-march 1.1s linear infinite; }
@keyframes ik-march { to { stroke-dashoffset: -11; } }
.ik-token { fill: var(--ik-marker); }
.ik-node { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text); font: 600 15px/1 var(--ik-font-display); letter-spacing: -0.01em; background: transparent; }
.ik-node .ik-stage, .ik-node .ik-glyph { width: 18px; height: 18px; color: var(--ik-accent-text); }
.ik-node--fill { background: var(--ik-surface); }
.ik-node--on { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease-out, transform var(--ik-soft); }
.ik-js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ik-js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── clutter → line ─────────────────────────────────────────────────────────── */
.ik-clutter { display: grid; gap: 14px; width: 100%; outline: none; }
.ik-clutter__stage { position: relative; aspect-ratio: 640 / 200; }
.ik-clutter__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; cursor: ew-resize; touch-action: none; }
.ik-clutter__main, .ik-clutter__strand { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ik-clutter__main { stroke: var(--ik-text); stroke-width: 1.5px; }
.ik-clutter__strand { stroke: var(--ik-text-2); stroke-width: 1px; }
.ik-clutter__knob { fill: var(--ik-marker); cursor: grab; }
.ik-clutter__marks { position: absolute; inset: 0; pointer-events: none; }
.ik-clutter__mark { position: absolute; top: 50%; display: grid; justify-items: center; gap: 8px; color: var(--ik-text); opacity: 0; transform: translate(-50%, calc(-100% - 18px)) scale(.7); transition: opacity 360ms ease-out, transform var(--ik-soft); }
.ik-clutter__mark.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.ik-clutter__mark .ik-stage { width: 28px; height: 28px; stroke-width: 1.5; }
.ik-clutter__mark span { font: 500 13px/1 var(--ik-font-body); color: var(--ik-text-2); }
.ik-clutter__ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ik-clutter__state.is-clear { color: var(--ik-accent-text); }

/* ── chat: a person and the assistant ─────────────────────────────────────── */
.ik-chat { display: grid; gap: 14px; width: 100%; max-width: 580px; }
.ik-chat__log { display: flex; flex-direction: column; gap: 16px; height: 420px; overflow-y: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.ik-msg { display: flex; align-items: flex-end; gap: 10px; }
.ik-msg--me { justify-content: flex-end; align-items: flex-end; }
.ik-msg--ai { align-items: flex-start; }
.ik-msg--ai > .ik-avatar { margin-top: 22px; }
.ik-msg__col { display: grid; gap: 6px; min-width: 0; }
.ik-msg__who { display: flex; align-items: center; gap: 8px; color: var(--ik-text-2); font: 600 12px/1 var(--ik-font-body); }
.ik-msg__bubble { max-width: min(460px, 100%); padding: 11px 15px; border-radius: 18px; font: 400 15px/1.5 var(--ik-font-body); }
.ik-msg--me .ik-msg__bubble { background: var(--ik-surface-2); border-bottom-right-radius: 6px; }
.ik-msg--ai .ik-msg__bubble { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); border-bottom-left-radius: 6px; }
.ik-avatar--ai { color: var(--ik-accent-text); }
.ik-avatar--ai .ik-stage { width: 16px; height: 16px; }
.ik-msg__card { display: grid; margin-top: 12px; border-radius: 12px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-msg__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; }
.ik-msg__row + .ik-msg__row { box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-msg__row .ik-stage { width: 18px; height: 18px; color: var(--ik-text-2); }
.ik-msg__row .ik-dot { margin-left: auto; }
.ik-typing { display: inline-flex; gap: 5px; padding: 8px 0 6px; }
.ik-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ik-text-2); animation: ik-wave 1s ease-in-out infinite; }
.ik-typing i:nth-child(2) { animation-delay: .14s; } .ik-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes ik-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ik-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--ik-text); animation: ik-blink 1s steps(2) infinite; }
@keyframes ik-blink { 50% { opacity: 0; } }
.ik-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; transition: opacity var(--ik-quick); }
.ik-chat.is-busy .ik-chat__chips { opacity: .4; pointer-events: none; }
.ik-chat__form { display: flex; gap: 8px; align-items: center; }
.ik-chat__form .ik-input { min-height: 44px; }

/* ── flow diagram ─────────────────────────────────────────────────────────── */
.ik-flow { position: relative; display: grid; gap: 28px; width: 100%; }
.ik-flow__nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; padding-bottom: 46px; }
.ik-flow.is-vertical .ik-flow__nodes { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 46px 0 0; }
.ik-flow__node { display: grid; gap: 6px; justify-items: start; padding: 18px 18px 20px; border: 0; border-radius: var(--ik-r-lg); background: transparent; color: var(--ik-text-2); text-align: left; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: color var(--ik-quick), background var(--ik-quick), box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-flow__node .ik-stage { width: 30px; height: 30px; margin-bottom: 6px; transition: color var(--ik-quick); }
.ik-flow__node b { color: var(--ik-text); font: 600 18px/1.2 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-flow__node span { font-size: 14px; line-height: 1.35; }
.ik-flow__node:hover { color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-flow__node:active { transform: scale(.98); }
.ik-flow__node.is-on { color: var(--ik-text); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-flow__node.is-on .ik-stage { color: var(--ik-accent-text); }
.ik-flow__lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ik-flow__seg, .ik-flow__head { fill: none; stroke: var(--ik-outline); stroke-width: var(--ik-stroke-line); stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--ik-quick); }
.ik-flow__seg.is-on { stroke: var(--ik-marker); }
.ik-flow__token { fill: var(--ik-marker); }
.ik-flow__detail { display: grid; gap: 12px; padding: 22px 24px 24px; border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-flow__dhead { display: flex; align-items: center; gap: 16px; }
.ik-flow__dhead .ik-stage { color: var(--ik-accent-text); flex: none; }
.ik-flow__dhead h3 { margin: 2px 0 0; font: 700 26px/1.1 var(--ik-font-display); letter-spacing: -0.025em; }
.ik-flow__detail p { margin: 0; max-width: 60ch; color: var(--ik-text-2); font-size: 16px; line-height: 1.55; }
.ik-flow__eg { display: flex; flex-wrap: wrap; gap: 8px; }
.ik-flow__ctl { display: flex; justify-content: flex-end; }

.ik-flow__motion { fill: none; stroke: none; }
.ik-flow__node.is-receive { animation: ik-receive 560ms var(--ik-soft); }
@keyframes ik-receive { 0% { transform: scale(1); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-marker); } 35% { transform: scale(1.03); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-marker); } 100% { transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   APP KIT — the pieces a whole product is made of (added for the myICOR app, 2026).
   Shell · layout · page head · media cards · prose · player · chapters ·
   transcript · events · profile · pager · journey · life map · outline trace.
   Same rules: tokens only, flat, one accent, hairline outlines, springs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── links that are also components: never underlined ── */
a.ik-row, a.ik-chip, a.ik-tab, a.ik-card, a.ik-iconbtn, a.ik-action, a.ik-replies, a.ik-tile, a.ik-post__name, a.ik-post__time, a.ik-reply__name, a.ik-reply__time, .ik-seg > a { text-decoration: none; color: inherit; }
a.ik-action, a.ik-replies, a.ik-post__time, a.ik-reply__time { color: var(--ik-text-2); }
a.ik-post__name:hover, a.ik-reply__name:hover { text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; }
a.ik-tile { display: block; }
a.ik-chip { color: var(--ik-text); }
.ik-tab[aria-current="page"] { color: var(--ik-on-solid); }
.ik-tabbar:not(.is-ready) .ik-tab[aria-current="page"] { background: var(--ik-solid); }
.ik-chip[aria-current="page"], .ik-chip[aria-current="true"] { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-chip .ik-badge { margin-right: -6px; }
.ik-row[aria-current="page"] .ik-row__lead, .ik-row[aria-current="true"] .ik-row__lead { background: var(--ik-marker); color: var(--ik-ink); box-shadow: none; }
.ik-row[aria-current="page"], .ik-row[aria-current="true"] { background: var(--ik-fill); }
.ik-row:hover { background: var(--ik-fill); }
.ik-row__lead .ik-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.ik-seg > a { position: relative; z-index: 1; padding: 7px 14px; border-radius: inherit; color: var(--ik-text-2); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); text-transform: uppercase; white-space: nowrap; transition: color var(--ik-quick), transform var(--ik-press); }
.ik-seg > a:active { transform: scale(.94); }
.ik-seg > a[aria-current="page"], .ik-seg > a[aria-current="true"] { color: var(--ik-on-solid); }
.ik-seg:not(.is-ready) > a[aria-current="page"] { background: var(--ik-solid); }
.ik-seg--square > a { border-radius: 11px; font: 600 14px/1.2 var(--ik-font-body); letter-spacing: 0; text-transform: none; padding: 9px 16px; }
.ik-seg--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; --fade-l: 0px; --fade-r: 0px; mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
.ik-seg--scroll.is-more-l { --fade-l: 28px; } .ik-seg--scroll.is-more-r { --fade-r: 28px; }
.ik-seg--scroll::-webkit-scrollbar { display: none; }
/* a sideways row moves only sideways (post-release 01): nothing in it can be dragged up or down (a finger's 44px hit
   area used to stick out of the row and made it scroll vertically, cutting the labels in half); a vertical swipe that
   starts on the row scrolls the page; the row's end never drags the page along */
:is(.ik-seg--scroll, .ik-chips--scroll, .ik-scroller, .ik-lb__thumbs, .ik-codeblock pre, .ik-prose table, .ik-lanes__chart) { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.ik-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-hero__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-hero__art > img + * { position: relative; }
.ik-avatar--xl { width: 96px; height: 96px; font-size: 32px; }
.ik-avatar--xl .ik-avatar__icor { right: -6px; bottom: -6px; width: 32px; height: 32px; } .ik-avatar--xl .ik-avatar__icor .ik-icor-micro { --s: 26px; }
/* --journey: the member's picture at the centre of their ICOR for Life (the journey page's panel): the ring, larger, wears the four stage arcs */
.ik-avatar--journey { width: 128px; height: 128px; font-size: 42px; }
.ik-avatar--journey.ik-avatar--ring > .ik-icor-micro { inset: -12px; --s: calc(100% + 24px); width: calc(100% + 24px); height: calc(100% + 24px); }
a.ik-avatar { text-decoration: none; }

/* ── layout primitives: page · stack · cluster · grid · split · scroller ── */
.ik-page { width: 100%; max-width: var(--page-max, 1120px); margin: 0 auto; padding: var(--ik-s-7) var(--ik-s-6) var(--ik-s-10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ik-s-8); align-content: start; min-width: 0; } /* the column never grows past the screen for a wide child (a live room's chat box, a row of buttons) */
.ik-page--narrow { --page-max: 800px; }
.ik-page--wide { --page-max: 1320px; }
.ik-stack { display: grid; gap: var(--gap, var(--ik-s-4)); align-content: start; min-width: 0; }
.ik-stack--xs { --gap: var(--ik-s-2); } .ik-stack--sm { --gap: var(--ik-s-3); } .ik-stack--lg { --gap: var(--ik-s-6); } .ik-stack--xl { --gap: var(--ik-s-8); }
.ik-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--ik-s-2)); min-width: 0; }
.ik-cluster--between { justify-content: space-between; } .ik-cluster--center { justify-content: center; } .ik-cluster--end { justify-content: flex-end; }
.ik-cluster--lg { --gap: var(--ik-s-4); }
/* ── definition list (§20 App kit · Content): a key, a title and its words, one row each, a hairline between — numbered
   rules, a component's parts, settings explained. The key column is as wide as the widest key (subgrid), so a word key
   ("transport") never runs into its words; words and code wrap inside their column; under 560px the key sits above. ── */
.ik-deflist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ik-s-5); min-width: 0; }
.ik-deflist > * { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--ik-s-1); min-width: 0; padding: 18px 0; box-shadow: inset 0 var(--ik-hair) 0 var(--ik-rule); }
.ik-deflist__key { grid-column: 1; max-width: 14ch; font: 800 20px/1.15 var(--ik-font-display); letter-spacing: -0.01em; color: var(--ik-accent-text); overflow-wrap: anywhere; }
.ik-deflist__body { grid-column: 2; min-width: 0; color: var(--ik-text-2); line-height: 1.6; overflow-wrap: break-word; }
.ik-deflist__body > :first-child { margin-top: 0; } .ik-deflist__body > :last-child { margin-bottom: 0; }
.ik-deflist__body p { margin: 6px 0 0; max-width: 72ch; }
.ik-deflist__body strong { color: var(--ik-text); }
.ik-deflist__body code { overflow-wrap: anywhere; }
.ik-deflist__title { margin: 0; color: var(--ik-text); font: 700 20px/1.25 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-deflist__more { grid-column: 2; min-width: 0; margin-top: var(--ik-s-3); }   /* what follows the words: tags, a live demo */
@media (max-width: 560px) { .ik-deflist, .ik-deflist > * { grid-template-columns: minmax(0, 1fr); } .ik-deflist__key, .ik-deflist__body, .ik-deflist__more { grid-column: 1; } .ik-deflist__key { max-width: none; } }
.ik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 264px)), 1fr)); gap: var(--gap-y, var(--ik-s-7)) var(--gap, var(--ik-s-5)); min-width: 0; }
.ik-grid--sm { --min: 200px; } .ik-grid--lg { --min: 340px; } .ik-grid--tight { --gap-y: var(--ik-s-4); --gap: var(--ik-s-4); }
.ik-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside, 340px); gap: var(--ik-s-8); align-items: start; }
.ik-split--left { grid-template-columns: var(--aside, 300px) minmax(0, 1fr); }
.ik-sticky { position: sticky; top: var(--ik-s-6); }
.ik-scroller { display: flex; gap: var(--ik-s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--ik-s-6) * -1); padding: 2px var(--ik-s-6) 4px; }
.ik-scroller::-webkit-scrollbar { display: none; }
.ik-scroller > * { flex: 0 0 var(--item, 280px); scroll-snap-align: start; }
.ik-loading { display: grid; place-items: center; min-height: 40vh; }
@media (max-width: 1024px) { .ik-split, .ik-split--left { grid-template-columns: minmax(0, 1fr); gap: var(--ik-s-7); } .ik-sticky { position: static; } }
/* .ik-split--third: the main column two thirds, the side column one third (home: what is new beside this week's poll).
   .ik-split--side-first: on phones the side column comes first (the poll before the feed). */
.ik-split--third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .ik-split--third { grid-template-columns: minmax(0, 1fr); } .ik-split--side-first > :last-child { order: -1; } }
@media (max-width: 720px) {
  .ik-page { padding: var(--ik-s-5) var(--ik-s-4) var(--ik-s-9); gap: var(--ik-s-7); }
  .ik-scroller { margin: 0 calc(var(--ik-s-4) * -1); padding: 2px var(--ik-s-4) 4px; }
  .ik-grid { --gap-y: var(--ik-s-6); }
}

/* ── brand mark: the wordmark with the one line and its marker dot ── */
.ik-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ik-text); text-decoration: none; }
.ik-brand__mark { width: 36px; height: 20px; flex: none; color: var(--ik-marker); } /* 3.1: the orange lemniscate, as app.myicor.com */
.ik-brand b { font: 800 22px/1 var(--ik-font-display); letter-spacing: -0.035em; }
.ik-brand span { font: 600 11px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); color: var(--ik-text-2); }

/* ── app shell: side rail on wide screens, top bar + floating tab bar on phones ── */
.ik-app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.ik-app__side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--ik-s-6); padding: var(--ik-s-6) var(--ik-s-4) var(--ik-s-5); box-shadow: inset -1px 0 0 var(--ik-rule); overflow-y: auto; scrollbar-width: none; }
.ik-app__side > .ik-brand { padding: 4px 12px 0; }
.ik-app__foot { position: sticky; bottom: 0; margin-top: auto; margin-bottom: calc(-1 * var(--ik-s-5)); display: grid; gap: var(--ik-s-3); padding: 8px 12px var(--ik-s-5); background: var(--ik-bg); } /* the foot (the account row, a free member's rail offer) stays in view while a long navigation scrolls under it */
.ik-app__main { min-width: 0; }
.ik-app__top, .ik-app__tabbar { display: none; }
.ik-sidenav { display: grid; gap: 2px; }
.ik-sidenav__label { padding: var(--ik-s-5) 12px 6px; font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-sidenav__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--ik-r-md); color: var(--ik-text-2); font: 500 15px/1.2 var(--ik-font-body); text-decoration: none; transition: background var(--ik-quick), color var(--ik-quick), transform var(--ik-press); }
.ik-sidenav__item .ik-icon { width: 20px; height: 20px; }
.ik-sidenav__item .ik-glyph { margin: 0 4px; }
.ik-sidenav__item:hover { color: var(--ik-text); background: var(--ik-fill); }
.ik-sidenav__item:active, .ik-sidenav__item.is-down { transform: translateY(1px); background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-sidenav__item[aria-current="page"], .ik-sidenav__item[aria-current="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-sidenav__item .ik-badge, .ik-sidenav__item .ik-sidenav__end { margin-left: auto; }
@media (max-width: 860px) {
  .ik-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .ik-app__side { display: none; }
  .ik-app__top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--ik-topbar-h); padding: 0 var(--ik-s-2) 0 var(--ik-s-4); background: var(--ik-bg); box-shadow: inset 0 -1px 0 var(--ik-rule); }
  .ik-app__main { padding-bottom: calc(var(--ik-dock) + 12px); }
  .ik-app__tabbar { position: fixed; z-index: var(--ik-z-dock); left: var(--ik-s-3); right: var(--ik-s-3); bottom: calc(var(--ik-s-3) + env(safe-area-inset-bottom, 0px)); display: flex; transition: transform var(--ik-soft), opacity var(--ik-quick); }
}
/* the keyboard on a phone (<html data-ik-kb>, set by inkline.js while the on-screen keyboard takes the bottom of the
   screen for any text field): the tab bar steps out of the way instead of riding on the keyboard (iOS keeps fixed pieces
   on the layout viewport) and comes back when the keyboard goes */
@media (max-width: 860px) { :root[data-ik-kb] .ik-app__tabbar { transform: translateY(calc(100% + var(--ik-s-3) + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; } }
/* native tab bar mode (post-release 01): inside the iPhone and iPad app (<html data-ik-native-tabbar>) iOS draws the tab
   bar; the web bar is not drawn, and everything that sat above it sits above the native one (--ik-dock, tokens.css) */
:root[data-ik-native-tabbar] .ik-app__tabbar { display: none; }
/* glass (post-release 01) — .ik-tabbar--glass: the phone's floating tab bar as iOS draws its own. A translucent ground
   that blurs and deepens what scrolls under it, a hairline edge, and the current tab a lighter glass capsule (the text
   colour on it, never the marker). The one blurred material in the system (DESIGN §4 Depth); solid where the device
   asks for less transparency or cannot blur. */
.ik-tabbar--glass { padding: 5px; border-radius: 28px; background: var(--ik-glass); -webkit-backdrop-filter: var(--ik-glass-blur); backdrop-filter: var(--ik-glass-blur); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-glass-edge); }
.ik-tabbar--glass .ik-tabbar__pill { top: 5px; bottom: 5px; border-radius: 23px; background: var(--ik-glass-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-glass-pill-edge), inset 0 1px 0 var(--ik-glass-pill-edge); }
.ik-tabbar--glass .ik-tab { border-radius: 23px; }
.ik-tabbar--glass .ik-tab:is(.is-on, [aria-current="page"], [aria-selected="true"]) { color: var(--ik-text); }
.ik-tabbar--glass:not(.is-ready) .ik-tab:is(.is-on, [aria-current="page"]) { background: var(--ik-glass-pill); }
@media (prefers-reduced-transparency: reduce) { .ik-tabbar--glass { background: var(--ik-bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ik-tabbar--glass { background: var(--ik-bg); } }

/* ── page head: eyebrow · title · one-sentence lede · actions ── */
.ik-pagehead { display: grid; gap: var(--ik-s-3); min-width: 0; }
.ik-pagehead > .ik-h1, .ik-pagehead > .ik-display { text-wrap: balance; }
.ik-pagehead__lede { margin: 0; max-width: 62ch; color: var(--ik-text-2); font: 400 18px/1.5 var(--ik-font-body); text-wrap: pretty; }
.ik-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ik-s-3); margin-top: var(--ik-s-2); padding-bottom: var(--ik-sink); }
.ik-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ik-text-2); font: 500 14px/1.3 var(--ik-font-body); }
.ik-crumbs a { color: inherit; text-decoration: none; border-radius: 4px; }
.ik-crumbs a:hover { color: var(--ik-text); }
.ik-crumbs .ik-icon { width: 14px; height: 14px; stroke-width: 2; color: var(--ik-text-3); }
.ik-crumbs [aria-current] { color: var(--ik-text); }

/* ── search field: an input with the search glyph inside ── */
.ik-search { position: relative; display: block; min-width: 0; }
.ik-search > .ik-icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ik-text-2); pointer-events: none; }
.ik-search > .ik-input { padding-left: 44px; }
.ik-search > .ik-input::-webkit-search-cancel-button { appearance: none; }
.ik-search--inline { flex: 1 1 260px; max-width: 420px; }

/* ── media card: artwork (16:9 by default) with an outline drawn above it, then kind · title · text · meta ── */
.ik-mcard { position: relative; display: grid; align-content: start; gap: var(--ik-s-3); min-width: 0; color: inherit; text-decoration: none; border-radius: var(--ik-r-md); transition: transform var(--ik-press); }
.ik-mcard:active, .ik-mcard.is-down { transform: translateY(1px) scale(.99); }
.ik-mcard__media { position: relative; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--ik-r-md); overflow: hidden; background: var(--ik-ink-1); color: var(--ik-paper); }
.ik-mcard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ik-soft); }
.ik-mcard__media > .ik-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ik-mcard__media::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; transition: box-shadow var(--ik-quick); }
.ik-mcard:hover .ik-mcard__media::after, .ik-mcard:focus-visible .ik-mcard__media::after { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-mcard:hover .ik-mcard__media > img { transform: scale(1.03); }
.ik-mcard__media > .ik-tile__play { z-index: 3; }
.ik-mcard__media > .ik-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-radius: 0; background: color-mix(in srgb, var(--ik-paper) 18%, transparent); }
.ik-mcard__time { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 4px 7px; border-radius: var(--ik-r-xs); background: var(--ik-ink); color: var(--ik-paper); font: 600 12px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-mcard__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ik-dim); }
.ik-mcard__glyph .ik-glyph, .ik-mcard__glyph .ik-stage, .ik-mcard__glyph .ik-icon { width: 44px; height: 44px; stroke-width: 1; }
.ik-mcard__body { display: grid; gap: 6px; min-width: 0; padding: 0 2px; }
/* the kind of thing sits right-aligned in the kind row — never over the artwork */
.ik-mcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ik-mcard__top > .ik-kind { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ik-mcard__top > .ik-tag { flex: none; }
.ik-mcard__title { margin: 0; font: 600 18px/1.25 var(--ik-font-display); letter-spacing: -0.015em; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ik-mcard__text { margin: 0; color: var(--ik-text-2); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); overflow: hidden; }
.ik-mcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: var(--ik-text-2); font-size: 13px; line-height: 1.4; }
.ik-mcard__meta > * + *::before { content: "·"; margin: 0 8px; }
.ik-mcard__meta .ik-bar { flex: 1 0 100%; margin: 6px 0 2px; }
.ik-mcard__meta .ik-bar::before { display: none; }
.ik-mcard--row { grid-template-columns: var(--thumb, 176px) minmax(0, 1fr); align-items: start; gap: var(--ik-s-4); }
.ik-mcard--row .ik-mcard__body { padding-top: 2px; }
.ik-mcard--row .ik-mcard__title { font-size: 17px; }
.ik-mcard--square { --ratio: 1 / 1; }
.ik-mcard--lg .ik-mcard__title { font-size: 26px; line-height: 1.15; letter-spacing: var(--ik-track-heading); }
.ik-mcard--mini { --thumb: 112px; gap: var(--ik-s-3); } /* a row card for a narrow side column (a panel's "more videos") */
.ik-mcard--mini .ik-mcard__title { font-size: 15px; line-height: 1.3; -webkit-line-clamp: 2; }
.ik-mcard--mini .ik-mcard__meta { font-size: 12.5px; }
.ik-mcard--mini .ik-mcard__time { right: 6px; bottom: 6px; padding: 3px 5px; font-size: 11px; }
/* the tools a thing works with, over the top right of its media (Tom's Tool Lab cards): small app icons, ringed in ink so
   they read on any cover; four at most, then "+n" in the same chip */
.ik-mcard__tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 4px; }
.ik-mcard__tools .ik-appicon { box-shadow: 0 0 0 2px var(--ik-ink); }
.ik-mcard--mini .ik-mcard__tools { display: none; }
.ik-mcard--mini .ik-tile__play { width: 28px; height: 28px; margin: -14px 0 0 -14px; } .ik-mcard--mini .ik-tile__play .ik-icon { width: 13px; height: 13px; }
@media (max-width: 560px) { .ik-mcard--row { --thumb: 120px; gap: var(--ik-s-3); } .ik-mcard--row .ik-mcard__title { font-size: 15.5px; } .ik-mcard--row .ik-mcard__text { display: none; } }

/* ── prose: long-form reading (lessons, articles, show notes). Headings are anchors for the chapter list ── */
.ik-prose { max-width: var(--measure, 68ch); color: var(--ik-text); font: 400 17px/1.7 var(--ik-font-body); text-wrap: pretty; overflow-wrap: break-word; }
.ik-prose > * { margin: 0 0 1em; }
.ik-prose > :first-child { margin-top: 0; } .ik-prose > :last-child { margin-bottom: 0; }
.ik-prose h1, .ik-prose h2 { margin: 1.9em 0 .55em; font: 700 27px/1.2 var(--ik-font-display); letter-spacing: var(--ik-track-heading); text-wrap: balance; scroll-margin-top: 88px; }
.ik-prose h3 { margin: 1.6em 0 .45em; font: 600 21px/1.3 var(--ik-font-display); letter-spacing: -0.015em; scroll-margin-top: 88px; }
.ik-prose h4 { margin: 1.4em 0 .4em; font: 600 17px/1.35 var(--ik-font-display); }
.ik-prose a { color: var(--ik-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ik-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--ik-quick); }
.ik-prose a:hover { text-decoration-color: var(--ik-marker); }
.ik-prose a.ik-mention { color: var(--ik-accent-text); text-decoration: none; }
.ik-prose a.ik-mention:hover { text-decoration: underline; text-decoration-color: currentColor; }
.ik-prose strong, .ik-prose b { font-weight: 600; }
.ik-prose ul, .ik-prose ol { padding-left: 1.35em; }
.ik-prose li { margin: .35em 0; padding-left: .2em; }
.ik-prose li::marker { color: var(--ik-text-2); }
.ik-prose li > p { margin: 0; }
.ik-prose blockquote { margin: 1.5em 0; padding: 2px 0 2px 22px; box-shadow: inset 1px 0 0 var(--ik-line); color: var(--ik-text-2); font-size: 18px; }
.ik-prose blockquote p { margin: 0 0 .6em; } .ik-prose blockquote p:last-child { margin: 0; }
.ik-prose img, .ik-prose video { display: block; max-width: 100%; height: auto; border-radius: var(--ik-r-md); outline: var(--ik-hair) solid var(--ik-outline); outline-offset: calc(var(--ik-hair) * -1); }
.ik-prose figure { margin: 1.6em 0; } .ik-prose figcaption { margin-top: 8px; color: var(--ik-text-2); font-size: 14px; }
.ik-prose hr { height: 0; border: 0; border-top: 1px solid var(--ik-rule); margin: 2.2em 0; }
.ik-prose code { padding: 1px 6px; border-radius: var(--ik-r-xs); background: var(--ik-fill); font: 500 .88em var(--ik-font-mono); overflow-wrap: anywhere; }
/* a code block (``` in what members write, iteration 06): monospace, its lines kept as written and scrolled sideways inside the
   block, never the page */
.ik-prose pre { max-width: 100%; padding: 14px 16px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; font: 400 13.5px/1.6 var(--ik-font-mono); tab-size: 2; scrollbar-width: thin; }
.ik-prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.ik-prose pre code { padding: 0; background: none; }
.ik-codeblock { min-width: 0; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); overflow: hidden; }   /* a snippet to copy: a config, a command */
.ik-codeblock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; box-shadow: inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
.ik-codeblock__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); color: var(--ik-text-2); }
.ik-codeblock pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 400 13.5px/1.6 var(--ik-font-mono); color: var(--ik-text); tab-size: 2; }
.ik-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; display: block; overflow-x: auto; }
.ik-prose th, .ik-prose td { padding: 10px 12px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-prose th { font: 600 11px/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--ik-r-md); }
.ik-prose--compact { font-size: 16px; line-height: 1.6; }
.ik-prose--compact h1, .ik-prose--compact h2 { font-size: 20px; margin: 1.3em 0 .4em; } .ik-prose--compact h3 { font-size: 18px; }
.ik-prose--compact > * { margin-bottom: .8em; }
/* a note inside prose: Tip · Info · Note · Warning. Thin outline, a label, never a colour */
.ik-note { display: grid; gap: 6px; margin: 1.6em 0; padding: 16px 18px 18px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font-size: 16px; line-height: 1.6; color: var(--ik-text); }
.ik-note > p { margin: 0; } .ik-note > p + p { margin-top: .6em; }
.ik-note__label { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-note__label .ik-icon { width: 16px; height: 16px; stroke-width: 1.8; }
.ik-note--warn .ik-note__label { color: var(--ik-accent-text); }
@media (max-width: 720px) { .ik-prose { font-size: 16.5px; } .ik-prose h1, .ik-prose h2 { font-size: 23px; } .ik-prose h3 { font-size: 19px; } }

/* ── player: video in the page. Poster first, a paper play button, then a thin control bar with the marker line (data-ui="player") ── */
.ik-player { position: relative; aspect-ratio: var(--ratio, 16 / 9); width: 100%; border-radius: var(--ik-r-lg); overflow: hidden; background: var(--ik-ink); color: var(--ik-paper); isolation: isolate; user-select: none; -webkit-user-select: none; }
.ik-player::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ik-ink); }
.ik-player__poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ik-quick); }
/* a still frame: the player's shape with a picture and no video — a stored poster image or the generated art (.ik-art), never a frame of a video the viewer may not play */
.ik-player--still > img, .ik-player--still > .ik-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-player--still > .ik-art { color: var(--ik-text-2); }
.ik-player.is-started .ik-player__poster { opacity: 0; pointer-events: none; }
.ik-player__big { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border: 0; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); transition: opacity var(--ik-quick), transform var(--ik-press); }
.ik-player__big .ik-icon { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }
.ik-player__big:hover { transform: scale(1.05); } .ik-player__big:active { transform: scale(.94); }
.ik-player.is-playing .ik-player__big { opacity: 0; transform: scale(.8); pointer-events: none; }
.ik-player__hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.ik-player__wait { position: absolute; left: 50%; top: 50%; z-index: 3; width: 72px; height: 36px; margin: -18px 0 0 -36px; opacity: 0; pointer-events: none; transition: opacity var(--ik-quick); }
.ik-player__wait path { stroke: var(--ik-paper); }
.ik-player.is-waiting .ik-player__wait { opacity: 1; }
.ik-player__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; background: color-mix(in srgb, var(--ik-ink) 80%, transparent); transition: opacity var(--ik-quick), transform var(--ik-soft); }
.ik-player:not(.is-started) .ik-player__bar { opacity: 0; transform: translateY(100%); pointer-events: none; }
.ik-player.is-idle.is-playing .ik-player__bar { opacity: 0; transform: translateY(8px); }
.ik-player.is-idle.is-playing { cursor: none; }
.ik-player__bar .ik-iconbtn { width: 36px; height: 36px; color: var(--ik-paper); }
.ik-player__bar .ik-iconbtn:hover { background: color-mix(in srgb, var(--ik-paper) 12%, transparent); }
.ik-player__bar .ik-iconbtn .ik-icon { width: 20px; height: 20px; }
.ik-player__bar .ik-iconbtn[data-act="play"] .ik-icon { fill: currentColor; }
.ik-player__time { flex: none; min-width: 84px; padding: 0 6px; color: var(--ik-dim); font: 600 12.5px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-player__scrub { --p: 0; --b: 0; position: relative; flex: 1; height: 28px; cursor: pointer; outline: none; touch-action: none; }
.ik-player__scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ik-paper) 22%, transparent); }
.ik-player__scrub > b { position: absolute; left: 0; top: 13px; height: 2px; width: calc(var(--b) * 100%); border-radius: 1px; background: color-mix(in srgb, var(--ik-paper) 38%, transparent); }
.ik-player__scrub > i { position: absolute; left: 0; top: 13px; height: 2px; width: calc(var(--p) * 100%); border-radius: 1px; background: var(--ik-marker); }
.ik-player__scrub > i::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ik-marker); transform: scale(.8); transition: transform var(--ik-press); }
.ik-player__scrub:hover > i::after, .ik-player__scrub.is-drag > i::after { transform: scale(1.1); }
.ik-player__scrub:focus-visible::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ik-paper) 16%, transparent); }
.ik-player__rate { min-width: 44px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-paper); font: 600 12.5px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; transition: background var(--ik-quick); }
.ik-player__rate:hover { background: color-mix(in srgb, var(--ik-paper) 12%, transparent); }
.ik-player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.ik-player__error { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; text-align: center; background: var(--ik-ink); color: var(--ik-dim); font-size: 15px; }
.ik-player__error[hidden] { display: none; }
@media (max-width: 560px) { .ik-player { border-radius: var(--ik-r-md); } .ik-player__time { min-width: 0; font-size: 12px; } .ik-player__rate { display: none; } .ik-player__big { width: 60px; height: 60px; margin: -30px 0 0 -30px; } }

/* ── chapters (toc): a thin line with the chapters on it; the current one gets the marker dot (data-ui="toc": scroll spy, or follows the player) ── */
.ik-toc { display: grid; }
.ik-toc__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; width: 100%; padding: 9px 12px 9px 22px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); text-align: left; text-decoration: none; font: 500 15px/1.35 var(--ik-font-body); cursor: pointer; transition: color var(--ik-quick), background var(--ik-quick); }
.ik-toc__item::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--ik-rule); }
.ik-toc__item:first-child::before { top: 50%; } .ik-toc__item:last-child::before { bottom: 50%; } .ik-toc__item:only-child::before { display: none; }
.ik-toc__item::after { content: ""; position: absolute; left: 2.5px; top: calc(9px + .5lh); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); transition: background var(--ik-quick), box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-toc__item:hover { color: var(--ik-text); background: var(--ik-fill); }
.ik-toc__item.is-past::after { background: var(--ik-line); box-shadow: none; }
.ik-toc__item[aria-current="true"] { color: var(--ik-text); }
.ik-toc__item[aria-current="true"]::after { background: var(--ik-marker); box-shadow: none; transform: scale(1.25); }
.ik-toc__n, .ik-toc__time { min-width: 22px; color: var(--ik-text-2); font: 600 12px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-toc__time { min-width: 40px; }
.ik-toc__t { min-width: 0; }
.ik-toc--scroll { max-height: var(--h, 420px); overflow-y: auto; scrollbar-width: thin; }
/* chapters you tick off (lessons): each row is the chapter (opens it) and a round tick on the right; a read chapter's dot
   fills, the current one keeps the marker. The rail is drawn on the rows. */
.ik-toc--check .ik-toc__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ik-toc--check .ik-toc__item::before { display: none; }
.ik-toc--check .ik-toc__row::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--ik-rule); pointer-events: none; }
.ik-toc--check .ik-toc__row:first-child::before { top: 50%; } .ik-toc--check .ik-toc__row:last-child::before { bottom: 50%; } .ik-toc--check .ik-toc__row:only-child::before { display: none; }
.ik-toc--check .ik-toc__row.is-read .ik-toc__item::after { background: var(--ik-text-2); box-shadow: none; }
.ik-toc--check .ik-toc__row.is-read .ik-toc__t { color: var(--ik-text-2); }
.ik-toc__check { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 2px; border: 0; border-radius: 50%; background: none; color: var(--ik-text-3); cursor: pointer; transition: color var(--ik-quick), background var(--ik-quick), transform var(--ik-press); }
.ik-toc__check > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-toc__check .ik-icon { width: 14px; height: 14px; opacity: 0; transition: opacity var(--ik-quick); }
.ik-toc__check:hover > span { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-toc__check:hover .ik-icon { opacity: .45; }
.ik-toc__check[aria-pressed="true"] > span { background: var(--ik-text); box-shadow: none; color: var(--ik-bg); }
.ik-toc__check[aria-pressed="true"] .ik-icon { opacity: 1; }
.ik-toc__check:active { transform: scale(.92); }
@media (pointer: coarse) { .ik-toc__check { width: 44px; height: 44px; } }

/* Focus mode — a lesson's chapters read one at a time, full screen, nothing else on it: the bar (where you are, a dot per
   chapter, leave), the chapter in a reading column, the foot (previous · mark as read and go on). Safe areas on phones. */
html.ik-reader-open { overflow: hidden; }
.ik-reader { position: fixed; inset: 0; z-index: var(--ik-z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ik-bg); color: var(--ik-text); animation: ik-reader-in var(--ik-soft, .32s) both; }
@keyframes ik-reader-in { from { opacity: 0; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .ik-reader { animation: none; } }
.ik-reader__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 var(--ik-hair) 0 var(--ik-rule); }
.ik-reader__where { min-width: 0; overflow: hidden; color: var(--ik-text-2); font: 600 12px/1.2 var(--ik-font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.ik-reader__dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; max-width: 50vw; }
.ik-reader__dot { display: grid; place-items: center; width: 20px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.ik-reader__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); transition: background var(--ik-quick), transform var(--ik-press); }
.ik-reader__dot.is-read::before { background: var(--ik-text-2); box-shadow: none; }
.ik-reader__dot[aria-current="true"]::before { background: var(--ik-marker); box-shadow: none; transform: scale(1.3); }
.ik-reader__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ik-reader__page { width: min(100%, 680px); margin: 0 auto; padding: clamp(28px, 6vh, 64px) max(20px, env(safe-area-inset-left, 0px)) 48px max(20px, env(safe-area-inset-right, 0px)); }
.ik-reader__title { margin: 8px 0 24px; font: 700 clamp(28px, 4.2vw, 40px)/1.08 var(--ik-font-display); letter-spacing: -.02em; }
.ik-reader__page .ik-prose { font-size: 18px; line-height: 1.7; }
.ik-reader__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
.ik-reader__foot .ik-reader__next { margin-left: auto; }
@media (max-width: 560px) { .ik-reader__dots { display: none; } .ik-reader__foot .ik-reader__next { flex: 1; justify-content: center; } .ik-reader__long { display: none; } }

/* ── transcript: time · speaker · words. Press a line to jump there; the line being spoken is marked ── */
.ik-transcript { display: grid; gap: 2px; max-height: var(--h, 560px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.ik-transcript__line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); text-align: left; font: 400 15px/1.55 var(--ik-font-body); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick); }
.ik-transcript__line:hover { background: var(--ik-fill); color: var(--ik-text); }
.ik-transcript__time { grid-row: span 2; padding-top: 3px; font: 600 12px/1.6 var(--ik-font-body); font-variant-numeric: tabular-nums; color: var(--ik-text-2); }
.ik-transcript__who { font: 600 13.5px/1.3 var(--ik-font-display); color: var(--ik-text); }
.ik-transcript__line[aria-current="true"] { color: var(--ik-text); background: var(--ik-fill); }
.ik-transcript__line[aria-current="true"] .ik-transcript__time { color: var(--ik-accent-text); }

/* ── events: a date block, and an event row built on it ── */
.ik-date { display: grid; place-items: center; align-content: center; gap: 3px; width: 56px; height: 60px; flex: none; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text); }
.ik-date__m { font: 600 10.5px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-date__d { font: 800 24px/1 var(--ik-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ik-date--next { background: var(--ik-marker); box-shadow: none; color: var(--ik-ink); }
.ik-date--next .ik-date__m { color: var(--ik-ink); }
.ik-date--lg { width: 72px; height: 78px; } .ik-date--lg .ik-date__d { font-size: 32px; }
.ik-event { display: grid; grid-template-columns: 56px minmax(0, 1fr) var(--thumb, 132px); align-items: center; gap: var(--ik-s-4); padding: 14px; border-radius: var(--ik-r-lg); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: transform var(--ik-press), background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-event:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-event:active, .ik-event.is-down { transform: translateY(1px); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-event--compact { grid-template-columns: 56px minmax(0, 1fr); }
.ik-event__main { display: grid; gap: 4px; min-width: 0; }
.ik-event__title { font: 600 18px/1.25 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-event__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ik-text-2); font-size: 14px; }
.ik-event__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ik-event__meta .ik-icon { width: 15px; height: 15px; stroke-width: 1.8; }
.ik-event__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ik-r-sm); overflow: hidden; background: var(--ik-ink-1); }
.ik-event__thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-event__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-event.is-past .ik-date { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); }
.ik-event.is-past .ik-date__d { color: var(--ik-text-2); }
@media (max-width: 600px) { .ik-event { grid-template-columns: 56px minmax(0, 1fr); } .ik-event__thumb { display: none; } .ik-event__title { font-size: 16px; } }
/* the featured event (a campaign's workshop): an ink card in either theme, its own cover big on top, a pulse, the clock to
   its real start and one paper button; the hand note says who is there. One per page, above the list. */
.ik-event.ik-event--feature { position: relative; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; border-radius: var(--ik-r-xl); overflow: hidden; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-event--feature:active, .ik-event--feature.is-down { background: var(--ik-ink); }
.ik-event__cover { position: relative; display: block; aspect-ratio: var(--ratio, 2 / 1); background: var(--ik-ink); }
.ik-event__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-event__cover .ik-hand { position: absolute; right: 22px; bottom: 14px; font: 600 26px/1 var(--ik-font-hand); color: var(--ik-marker); transform: rotate(-4deg); pointer-events: none; }
.ik-event__body { display: grid; gap: 10px; padding: 18px 24px 24px; min-width: 0; box-shadow: inset 0 var(--ik-hair) 0 var(--ik-ink-rule); }
.ik-event--feature .ik-event__title { font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.ik-event__text { color: var(--ik-text-2); font-size: 15px; line-height: 1.5; max-width: 60ch; }
.ik-event__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-top: 6px; }
.ik-event__clock { display: grid; gap: 6px; }
.ik-event__clock > span { color: var(--ik-text-2); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
/* it pops by being the opposite of the page: paper on the ink ground (here), ink on the paper ground (.ik-on-ink, above);
   the cover sits inside it as a framed picture, and the card floats */
:root:not([data-theme="paper"]) .ik-event--feature { --ik-bg: var(--ik-paper); --ik-surface: var(--ik-paper-1); --ik-surface-2: var(--ik-paper-2); --ik-text: var(--ik-ink); --ik-text-2: var(--ik-text-2-paper); --ik-text-3: var(--ik-text-3-paper); --ik-rule: var(--ik-paper-rule); --ik-outline: color-mix(in srgb, var(--ik-faint) 44%, transparent); --ik-line: var(--ik-faint); --ik-solid: var(--ik-ink); --ik-on-solid: var(--ik-paper); --ik-on-solid-accent: #FF5A2D; --ik-accent-text: var(--ik-marker-text); --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 16%, transparent); --ik-fill: color-mix(in srgb, var(--ik-ink) 5.5%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-ink) 12%, transparent); background: var(--ik-paper); color: var(--ik-ink); }
:root:not([data-theme="paper"]) .ik-event--feature:active, :root:not([data-theme="paper"]) .ik-event--feature.is-down { background: var(--ik-paper-1); }
.ik-event--feature { box-shadow: var(--ik-float); }
.ik-event--feature:hover { box-shadow: var(--ik-float-up); }
.ik-event--feature .ik-event__cover { margin: 10px 10px 0; border-radius: var(--ik-r-lg); overflow: hidden; }
.ik-event--feature .ik-event__body { box-shadow: none; padding-top: 16px; }
/* in a side rail (a campaign's workshop under "Coming up"): the same card, compact, not a link itself — the cover and the
   title link to the event, and two real buttons act (__actions: the campaign's one action, then the details) */
.ik-event--rail { cursor: default; }
.ik-event--rail:active { transform: none; }
.ik-event--rail .ik-event__cover { --ratio: 16 / 9; margin: 8px 8px 0; border-radius: var(--ik-r-md); }
.ik-event--rail .ik-event__cover .ik-hand { font-size: 20px; right: 12px; bottom: 8px; }
.ik-event--rail .ik-event__body { gap: 8px; padding: 12px 14px 14px; }
.ik-event--rail .ik-event__title { font-size: 18px; line-height: 1.2; }
.ik-event--rail a.ik-event__title { color: inherit; text-decoration: none; }
.ik-event--rail a.ik-event__title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ik-event--rail .ik-event__meta { font-size: 13px; }
.ik-event__actions { display: grid; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) { .ik-event.ik-event--feature { grid-template-columns: minmax(0, 1fr); } .ik-event--feature .ik-event__cover { margin: 8px 8px 0; } .ik-event__body { padding: 16px 18px 20px; } .ik-event--feature .ik-event__title { font-size: 22px; } .ik-event__cover .ik-hand { font-size: 22px; right: 16px; bottom: 10px; } .ik-event__foot .ik-btn { width: 100%; } }
/* facts: icon + words, one per line (when · where · who) */
.ik-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ik-facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; }
.ik-facts .ik-icon { width: 20px; height: 20px; flex: none; margin-top: 0; color: var(--ik-text-2); }
.ik-facts small { display: block; color: var(--ik-text-2); font-size: 13px; }

/* ── byline & profile ── */
.ik-byline { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.ik-byline__text { display: grid; gap: 1px; min-width: 0; }
.ik-byline__name { font: 600 15px/1.25 var(--ik-font-display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-byline__meta { color: var(--ik-text-2); font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ik-byline:hover .ik-byline__name { text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; }
.ik-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ik-s-6); }
.ik-profile__main { display: grid; gap: 8px; min-width: 0; }
.ik-profile__stats { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ik-text-2); font-size: 14px; }
.ik-profile__stats b { color: var(--ik-text); font: 700 17px/1 var(--ik-font-display); font-variant-numeric: tabular-nums; margin-right: 4px; }
@media (max-width: 560px) { .ik-profile { grid-template-columns: minmax(0, 1fr); gap: var(--ik-s-4); } }

/* ── post extras: media grid (--cols) · link card · reply peek ── */
.ik-post__media { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ik-post__media .ik-tile { aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--ik-r-md); cursor: zoom-in; }
.ik-post__media .ik-tile:hover { transform: none; }
.ik-post__media--single .ik-tile { aspect-ratio: auto; background: var(--ik-fill); }
/* 3.1: one picture shows whole, whatever its shape (as LinkedIn does) — full width, its own height, at most most of the
   screen; a very tall one is letterboxed on the sides, never cropped */
.ik-post__media--single .ik-tile > img { position: static; display: block; width: 100%; height: auto; max-height: min(80vh, 760px); object-fit: contain; }
.ik-linkcard { display: grid; grid-template-columns: minmax(0, 1fr) var(--thumb, 96px); align-items: stretch; margin-top: 12px; border-radius: var(--ik-r-md); overflow: hidden; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-linkcard:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-linkcard:active { transform: translateY(1px); }
.ik-linkcard__main { display: grid; gap: 3px; align-content: center; min-width: 0; padding: 12px 14px; }
.ik-linkcard__host { color: var(--ik-text-2); font: 500 12px/1.2 var(--ik-font-body); letter-spacing: 0.02em; }
.ik-linkcard__title { font: 600 15px/1.3 var(--ik-font-display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ik-linkcard__img { position: relative; background: var(--ik-surface-2); }
.ik-linkcard__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-linkcard--noimg { grid-template-columns: minmax(0, 1fr); }
.ik-feed { display: grid; gap: var(--ik-s-4); justify-items: stretch; }
.ik-feed > .ik-post { max-width: none; }
/* Poll (05.1, Tom 2026-10-03) — the community's weekly question. Holista asks, a member answers in one press.
   A card like a post: her byline (her mark, "Weekly poll · 4 days left"), the question, one line on why she asks it (what
   the community is talking about), the answers as full-width rows, a foot (how many voted, the conversation).
   Before you answer the rows are buttons that sink. After, every row fills to its share (--p, on the trace spring), the share
   grows in, your answer carries a check, and you can still change it. A closed poll (.ik-poll--closed) shows results only.
   No marker: the poll is never the one thing a page asks you to press. */
.ik-poll { display: grid; gap: 14px; width: 100%; max-width: 640px; padding: 18px 20px 14px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: left; }
.ik-poll--wide, .ik-feed > .ik-poll, .ik-modal .ik-poll { max-width: none; }
.ik-modal .ik-poll { width: min(560px, 100%); padding: 22px 24px 16px; }
.ik-poll__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.ik-poll__who { display: grid; gap: 2px; min-width: 0; }
.ik-poll__name { font: 600 15px/1.25 var(--ik-font-display); letter-spacing: -0.01em; color: var(--ik-text); text-decoration: none; }
.ik-poll__meta { color: var(--ik-text-2); font-size: 13px; line-height: 1.3; }
.ik-poll__q { margin: 0; font: 600 19px/1.3 var(--ik-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.ik-poll__why { margin: -6px 0 0; color: var(--ik-text-2); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.ik-poll__options { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ik-poll__opt { --p: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--ik-r-md); background: transparent; color: var(--ik-text); font: 500 15px/1.35 var(--ik-font-body); text-align: left; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; transition: box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-poll__opt::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--ik-fill-2); transition: width var(--ik-trace); }
.ik-poll__opt:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-poll__opt:active, .ik-poll__opt.is-down { transform: translateY(1px) scale(.995); }
.ik-poll__opt:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 2px; }
.ik-poll__label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ik-poll__label .ik-icon { width: 16px; height: 16px; flex: none; }
.ik-poll__pct { display: none; font: 600 14px/1 var(--ik-font-display); font-variant-numeric: tabular-nums; color: var(--ik-text-2); }
.ik-poll.is-answered .ik-poll__opt::before, .ik-poll--closed .ik-poll__opt::before { width: calc(var(--p) * 100%); }
.ik-poll.is-answered .ik-poll__pct, .ik-poll--closed .ik-poll__pct { display: block; animation: ik-poll-grow var(--ik-press) both; }
.ik-poll__opt[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ik-text); font-weight: 600; }
.ik-poll__opt[aria-pressed="true"] .ik-poll__pct { color: var(--ik-text); }
.ik-poll--closed .ik-poll__opt { cursor: default; transform: none; }
.ik-poll--closed .ik-poll__opt:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-poll__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 28px; color: var(--ik-text-2); font-size: 13px; }
.ik-poll__foot a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ik-poll__foot .ik-icon { width: 16px; height: 16px; }
.ik .ik-poll__opt:disabled { opacity: 1; color: var(--ik-text); pointer-events: none; }
.ik-poll__foot a:hover { color: var(--ik-text); }
.ik-poll__foot .ik-spacer { flex: 1; }
@keyframes ik-poll-grow { from { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .ik-poll__opt::before { transition: none; } .ik-poll.is-answered .ik-poll__pct { animation: none; } }

/* ── pager: previous / next, named for where they go ── */
.ik-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ik-s-4); }
.ik-pager__link { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 16px 18px; border-radius: var(--ik-r-lg); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: transform var(--ik-press), background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-pager__link:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-pager__link:active, .ik-pager__link.is-down { transform: translateY(1px); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-pager__dir { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-pager__dir .ik-icon { width: 14px; height: 14px; stroke-width: 2; }
.ik-pager__title { font: 600 16px/1.3 var(--ik-font-display); letter-spacing: -0.01em; }
.ik-pager__link--next { text-align: right; justify-items: end; grid-column: 2; }
@media (max-width: 560px) { .ik-pager { grid-template-columns: minmax(0, 1fr); } .ik-pager__link--next { grid-column: auto; } }

/* ── outline trace: the marker traces an element's own outline as progress is made (data-ui="trace" data-value="0..1") ── */
.ik-trace { position: relative; }
.ik-trace__svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ik-trace__svg rect { fill: none; stroke: var(--ik-marker); stroke-width: var(--ik-stroke-marker); stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset var(--ik-trace), opacity var(--ik-quick); }

/* ── journey: the ICOR stages as one continuous line, each stage holding its courses ── */
.ik-journey { display: grid; grid-template-columns: repeat(var(--stages, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ik-journey__stage { display: grid; align-content: start; gap: var(--ik-s-4); min-width: 0; padding-right: var(--ik-s-5); }
.ik-journey__stage:last-child { padding-right: 0; }
.ik-journey__head { display: flex; align-items: center; gap: 14px; }
.ik-journey__head .ik-stage { flex: none; color: var(--ik-text); }
.ik-journey__head .ik-h3 { font-size: 22px; }
.ik-journey__stage > .ik-bar { margin-right: calc(var(--ik-s-5) * -1); border-radius: 0; }
.ik-journey__stage:first-child > .ik-bar { border-radius: 1px 0 0 1px; } .ik-journey__stage:last-child > .ik-bar { margin-right: 0; border-radius: 0 1px 1px 0; }
.ik-journey__stage.is-current .ik-journey__head .ik-stage { color: var(--ik-accent-text); }
.ik-journey__note { margin: 0; color: var(--ik-text-2); font-size: 14px; line-height: 1.45; }
@media (max-width: 1024px) { .ik-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ik-s-8); } .ik-journey__stage:nth-child(2n) { padding-right: 0; } .ik-journey__stage:nth-child(2n) > .ik-bar { margin-right: 0; } }
@media (max-width: 640px) { .ik-journey { grid-template-columns: minmax(0, 1fr); } .ik-journey__stage { padding-right: 0; } .ik-journey__stage > .ik-bar { margin-right: 0; border-radius: 1px; } }

/* ── life map · the Minimal Valuable System: the core concepts and workflows of ICOR for Life as a chalk diagram.
      Information (My Life, Journal) flows into Action (Weekly, Daily Planning, PEA) along quiet dashed lines.
      Each part links to what teaches it; progress is a thin trace + a check; the marker only marks the next part ── */
.ik-lifemap { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) 88px minmax(0, 1fr); grid-template-areas: "info flow act"; gap: 0; padding: var(--ik-s-6); border-radius: var(--ik-r-xl); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-lifemap__info { grid-area: info; } .ik-lifemap__act { grid-area: act; }
.ik-lifemap__col { display: grid; align-content: start; gap: var(--ik-s-3); min-width: 0; }
.ik-lifemap__act { grid-template-rows: auto repeat(3, 1fr); }
.ik-lifemap__head { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 32px; margin: 0; font: 700 22px/1.2 var(--ik-font-display); letter-spacing: var(--ik-track-heading); text-align: center; }
.ik-lifemap__head small { font: 400 13px/1.3 var(--ik-font-body); letter-spacing: 0; color: var(--ik-text-2); }
/* the flow: information travels into action along quiet dashed lines */
.ik-lifemap__flow { grid-area: flow; position: relative; display: grid; place-items: center; min-width: 0; }
.ik-lifemap__flow svg { position: absolute; inset: 44px 0 0; width: 100%; height: calc(100% - 44px); overflow: visible; }
.ik-lifemap__flow path { fill: none; stroke: var(--ik-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ik-lifemap__flow circle { fill: var(--ik-marker); }
.ik-lifemap__flowlabel { position: relative; padding: 4px 8px; border-radius: var(--ik-r-pill); background: var(--ik-bg); color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; text-align: center; }
.ik-lifemap__zone { position: relative; display: grid; align-content: center; justify-items: center; gap: var(--ik-s-3); min-height: 72px; padding: var(--ik-s-4); border-radius: var(--ik-r-lg); color: inherit; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: background var(--ik-quick), transform var(--ik-press); }
.ik-lifemap__zone--group { align-content: start; justify-items: stretch; }
a.ik-lifemap__zone:hover, a.ik-lifemap__cell:hover { background: var(--ik-fill); }
a.ik-lifemap__zone:active, a.ik-lifemap__cell:active { transform: translateY(1px); background: var(--ik-fill-2); }
.ik-lifemap__title { justify-self: center; color: inherit; font: 700 19px/1.2 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-lifemap__name { display: block; font: 700 18px/1.2 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-lifemap__sub { display: block; margin-top: 4px; color: var(--ik-text-2); font: 400 13px/1.35 var(--ik-font-body); }
.ik-lifemap__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ik-s-3); }
.ik-lifemap__cell { position: relative; display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 76px; padding: 12px 10px; border-radius: var(--ik-r-md); border: 1px dashed color-mix(in srgb, var(--ik-line) 70%, transparent); color: inherit; text-align: center; text-decoration: none; }
.ik-lifemap__cell .ik-lifemap__name { font-size: 15.5px; }
.ik-lifemap__cell .ik-lifemap__sub { margin-top: 0; font-size: 12.5px; }
.ik-lifemap__cell--wide { min-height: 60px; }
/* progress is quiet: the trace is a thin line in the text colour, a finished part carries a small check,
   and only the NEXT part to learn wears the marker (the marker picks one) */
.ik-lifemap .ik-trace__svg rect { stroke: var(--ik-text-2); stroke-width: 1.5px; }
.ik-lifemap .ik-trace__svg { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.ik-lifemap .is-next.ik-lifemap__zone, .ik-lifemap .is-next.ik-lifemap__cell { box-shadow: inset 0 0 0 1.5px var(--ik-accent-text); border-color: transparent; }
.ik-lifemap .is-next > .ik-trace__svg { display: none; }
.ik-lifemap__done { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-lifemap__done .ik-icon { width: 11px; height: 11px; stroke-width: 2.6; }
.ik-lifemap__next { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) { .ik-lifemap__flow path { stroke-dasharray: 2 7; animation: ik-march 1.4s linear infinite; } }
@media (max-width: 860px) {
  .ik-lifemap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "flow" "act"; padding: var(--ik-s-4); border-radius: var(--ik-r-lg); }
  .ik-lifemap__flow { min-height: 64px; } .ik-lifemap__flow svg { display: none; }
  .ik-lifemap__flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.25px dashed var(--ik-line); }
  .ik-lifemap__act { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ik-s-2); } .ik-lifemap__act > .ik-lifemap__head { grid-column: 1 / -1; }
  .ik-lifemap__act .ik-lifemap__zone { min-height: 88px; padding: var(--ik-s-3) var(--ik-s-2); } .ik-lifemap__act .ik-lifemap__sub { display: none; }
  .ik-lifemap__row { gap: var(--ik-s-2); } .ik-lifemap__cell { min-height: 68px; padding: 10px 6px; } .ik-lifemap__cell .ik-lifemap__name { font-size: 14px; } .ik-lifemap__cell .ik-lifemap__sub { display: none; }
}

/* ── magic slide: a lesson's one-page visual summary. Ink frame, outline above, opens big in the lightbox ── */
.ik-slide { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--ik-r-lg); overflow: hidden; background: var(--ik-ink-1); cursor: zoom-in; transition: transform var(--ik-press); }
.ik-slide > img { display: block; width: 100%; height: auto; aspect-ratio: auto var(--ratio, 16 / 9); }   /* the slide keeps its room before it loads (lazy images far down the page have no height otherwise): the natural ratio once known, --ratio or 16:9 until then */
.ik-slide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; transition: box-shadow var(--ik-quick); }
.ik-slide:hover::after { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-slide:active { transform: scale(.995); }
.ik-slide__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ik-ink); color: var(--ik-paper); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-slide__zoom .ik-icon { width: 20px; height: 20px; }

/* ── panel: a titled block with a thin outline (course outline, facts, magic slide, chapters) ── */
.ik-panel { display: grid; gap: var(--ik-s-4); padding: var(--ik-s-5); border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); min-width: 0; }
.ik-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 32px; }
.ik-panel__head > :first-child { min-width: min(100%, 12ch); }
.ik-panel__title { margin: 0; font: 600 17px/1.25 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-panel--flush { padding: 0; overflow: hidden; } .ik-panel--flush > .ik-panel__head { padding: var(--ik-s-5) var(--ik-s-5) 0; }
.ik-panel .ik-list { background: transparent; box-shadow: none; border-radius: 0; }

/* ── toaster: where toasts appear (bottom centre; above the tab bar on phones). Inkline.toast("Link copied") ── */
.ik-toaster { position: fixed; left: 50%; bottom: calc(var(--ik-s-6) + env(safe-area-inset-bottom, 0px) + var(--ik-bar)); z-index: var(--ik-z-toast); display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.ik-toaster > .ik-toast { pointer-events: auto; }
@media (max-width: 860px) { .ik-toaster { bottom: calc(16px + var(--ik-dock) + var(--ik-bar)); } }

/* ── reply peek: the latest reply, inside the post, under a hairline — a feed you can hear talking ── */
.ik-post__peek { display: grid; gap: 2px; margin: 10px -22px -14px; padding: 6px 22px 12px; border-radius: 0 0 var(--ik-r-lg) var(--ik-r-lg); box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-post__peek .ik-reply { padding: 8px 0 4px; }
.ik-post__peek .ik-reply::before { display: none; }
.ik-reply--peek .ik-reply__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ik-post__more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: var(--ik-text-2); font: 500 14px/1.4 var(--ik-font-body); text-decoration: none; }
.ik-post__more:hover { color: var(--ik-text); }
button.ik-post__more { border: 0; background: none; cursor: pointer; }
/* the conversation unfolded inside the card (02.1): spines come back, the composer and thread sit on the card */
.ik-post__peek.is-open { gap: 8px; padding-top: 14px; }
.ik-post__peek.is-open .ik-reply.has-children:not(.is-folded)::before { display: block; }
.ik-post__peek.is-open .ik-reply { padding: 12px 0; }
.ik-post__peek.is-open .ik-section-head h2 { font-size: 16px; }
.ik-post__peek .ik-skel { padding: 10px 0; }
.ik-post__more .ik-icon { width: 16px; height: 16px; }

/* ── hand note in a list: a slot above an item that holds one note, pointing into the item (data-ui="handnote") ── */
.ik-hand--target { position: relative; }
.ik-handslot { display: flex; justify-content: flex-end; min-height: 34px; margin: 4px 0 -6px; padding: 0 var(--ik-s-7) 0 var(--ik-s-5); pointer-events: none; }
.ik-handslot--start { justify-content: flex-start; padding-left: var(--ik-s-10); } /* sits beside, not on top of, what it points at — the arrow needs room to travel */
.ik-handslot > .ik-hand { pointer-events: auto; }
@media (max-width: 560px) { .ik-handslot { padding: 0 var(--ik-s-4) 0 var(--ik-s-2); } .ik-handslot { margin-bottom: 6px; } .ik-handslot--start { padding-left: var(--ik-s-10); } .ik-handslot .ik-hand { font-size: 23px; } }

/* ── post composer: the feed's own "share something" card — an .ik-post with a borderless writing area and the kind chips ── */
.ik-composer--post { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px 12px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick); }
.ik-composer--post:focus-within { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-composer--post .ik-composer__box, .ik-composer--post .ik-composer__box:hover, .ik-composer--post .ik-composer__box:focus-within { padding: 0; box-shadow: none; }
.ik-composer--post textarea { display: block; width: 100%; height: auto; min-height: 44px; padding: 9px 0; border: 0; background: none; color: var(--ik-text); font: 400 16px/1.5 var(--ik-font-body); resize: none; outline: none; overflow: hidden; transition: min-height var(--ik-soft); }
.ik-composer--post textarea::placeholder { color: var(--ik-text-2); }
.ik-composer--post.is-open textarea { min-height: 112px; }
.ik-composer__main { display: grid; gap: 10px; min-width: 0; }
/* what is attached: square tiles with a remove button; one still uploading breathes */
.ik-composer__attach { display: flex; flex-wrap: wrap; gap: 8px; }
.ik-attach { position: relative; width: 88px; height: 88px; border-radius: var(--ik-r-md); overflow: hidden; background: var(--ik-fill); }
.ik-attach img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ik-attach::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-attach[aria-busy="true"] { animation: ik-breathe 1.6s ease-in-out infinite; }
.ik-attach[aria-busy="true"] img { opacity: .5; }
.ik-attach__remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--ik-scrim); color: var(--ik-paper); cursor: pointer; }
.ik-attach__remove .ik-icon { width: 14px; height: 14px; }
.ik-attach__kind { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: var(--ik-r-xs); background: var(--ik-scrim); color: var(--ik-paper); font: 600 10px/1.2 var(--ik-font-body); letter-spacing: .06em; text-transform: uppercase; }
/* the tool row under the text: attach · GIF · emoji · mention │ kind … write an article · Post */
.ik-composer__tools { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 -6px; padding-top: 8px; box-shadow: inset 0 var(--ik-hair) 0 var(--ik-rule); }
.ik-composer__tools > .ik-iconbtn { width: 36px; height: 36px; color: var(--ik-text-2); }
.ik-composer__tools > .ik-iconbtn:hover { color: var(--ik-text); }
.ik-composer__tools > .ik-iconbtn .ik-icon { width: 20px; height: 20px; }
.ik-composer__tools .ik-spacer { flex: 1; }
.ik-composer--post textarea { field-sizing: content; }
@media (max-width: 560px) { .ik-composer__tools { flex-wrap: wrap; row-gap: 6px; } .ik-composer__tools .ik-spacer { flex: 1 0 40%; } }
.ik-composer__tools .ik-composer__sep { width: 1px; height: 20px; margin: 0 8px; background: var(--ik-rule); }
.ik-composer__tools .ik-dropdown { width: auto; }
.ik-composer__tools .ik-dropdown__trigger { min-height: 34px; padding: 6px 10px 6px 12px; gap: 6px; font-size: 14px; box-shadow: none; }
.ik-composer__tools .ik-dropdown__trigger:hover { background: var(--ik-fill); box-shadow: none; }
.ik-composer__tools .ik-btn { height: 36px; padding: 0 18px; font-size: 14px; }
.ik-composer__tools .ik-link { margin-right: 16px; font-size: 14px; }
@media (max-width: 560px) { .ik-composer--post { grid-template-columns: minmax(0, 1fr); } .ik-composer--post > .ik-avatar { display: none; } .ik-composer__tools { flex-wrap: wrap; row-gap: 6px; } }
/* emoji: a grid of buttons inside a popup menu */
.ik-emoji { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 4px; }
.ik-emoji > button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ik-r-sm); background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.ik-emoji > button:hover, .ik-emoji > button:focus-visible { background: var(--ik-fill); outline: none; }
/* GIFs: a search and a grid of moving pictures in a wide dialog */
.ik-dialog--wide { width: min(640px, 100%); max-width: none; }
/* ═══ Live reports (DESIGN §34, holista-live.js): a report Holista presents in real time — her line morphing slide to slide,
   filled words on the film's layer, her voice made while she speaks. The stage is always ink (it is a film); one big paper
   button starts it (never autoplay); the bar under it: play/pause, the slide's headline, the time, the progress. ═══ */
.ik-livereport { display: grid; gap: 10px; min-width: 0; }
.ik-livereport__stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ik-r-lg); overflow: hidden; background: var(--ik-ink); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-livereport__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; }
.ik-livereport__start { position: absolute; left: 50%; top: 56%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); cursor: pointer; box-shadow: var(--ik-float); transition: transform var(--ik-press); }
.ik-livereport__start .ik-icon { width: 34px; height: 34px; margin-left: 4px; }
.ik-livereport__start:hover { transform: scale(1.04); }
.ik-livereport__start:active { transform: scale(.97); }
.ik-livereport__start:focus-visible { outline: 2px solid var(--ik-marker); outline-offset: 4px; }
.ik-livereport.is-started .ik-livereport__start { display: none; }
.ik-livereport__bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ik-livereport__title { flex: 1; min-width: 0; overflow: hidden; color: var(--ik-text); font: 600 14px/1.3 var(--ik-font-body); white-space: nowrap; text-overflow: ellipsis; }
.ik-livereport__time { flex: none; color: var(--ik-text-2); font: 500 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-livereport__progress > i { transition: none; }
/* she is still finding her words (the next slide's voice has not arrived): a quiet pulse in the corner, nothing more */
.ik-livereport.is-waiting .ik-livereport__stage::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--ik-marker); animation: ik-livereport-wait 1.1s ease-in-out infinite; }
@keyframes ik-livereport-wait { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ik-livereport.is-waiting .ik-livereport__stage::after { animation: none; } }

/* a list in a dialog (who is going): a sticky head with the title and the close button, the rows under it */
.ik-dialog--list { width: min(420px, 100%); max-width: none; padding: 0 0 var(--ik-s-3); gap: 0; }
.ik-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 14px 12px 22px; background: var(--ik-surface); box-shadow: inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
.ik-dialog__head .ik-small { display: block; margin-top: 2px; }
.ik-dialog--list .ik-list { padding: 6px 8px 0; border-radius: 0; background: none; box-shadow: none; }
.ik-modal .ik-dialog--wide { width: min(640px, 100%); }
.ik-dialog--danger { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent); }   /* what cannot be undone: a marker outline, a marker title */
.ik-dialog--danger .ik-h3 { color: var(--ik-accent-text); }
.ik-panel--danger { box-shadow: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-accent) 55%, var(--ik-outline)); }
.ik-panel--danger .ik-panel__title { color: var(--ik-accent-text); }
.ik-btn:disabled { opacity: .4; cursor: not-allowed; }
.ik-gifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; max-height: min(52vh, 460px); overflow: auto; overscroll-behavior: contain; }
.ik-gifs > button { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--ik-r-sm); overflow: hidden; background: var(--ik-fill); cursor: pointer; }
.ik-gifs > button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ik-gifs > .ik-skel .ik-skel__block { aspect-ratio: 1; }
.ik-gifs > button:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-chip .ik-icon { width: 16px; height: 16px; }
.ik-composer__bar .ik-small { padding-left: 8px; }

/* ── aside that stays: sticky beside the main column, scrolling on its own (chapters, outlines, facts) ── */
.ik-aside { position: sticky; top: var(--ik-s-6); max-height: calc(100vh - var(--ik-s-8)); max-height: calc(100dvh - var(--ik-s-8)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ik-rule) transparent; padding-right: 2px; }
@media (max-width: 1024px) { .ik-aside { position: static; max-height: none; overflow: visible; } }

/* ── focus reading: hide the aside of an .ik-split--focus and bring the main column to the centre.
      A button with data-ui="focus" toggles <html data-ik-focus> and remembers it. Wide screens only. ── */
.ik-split--focus { transition: grid-template-columns var(--ik-soft); }
:root[data-ik-focus] .ik-split--focus { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; }
:root[data-ik-focus] .ik-split--focus > :last-child { visibility: hidden; overflow: hidden; }
:root[data-ik-focus] .ik-split--focus > :first-child { width: 100%; max-width: 800px; margin-inline: auto; }
:root[data-ik-focus] .ik-page:has(.ik-split--focus) .ik-pagehead { max-width: 800px; margin-inline: auto; width: 100%; }
.ik-pagehead__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ik-s-4); min-height: 40px; }
/* back to where you came from (3.1): opened from a feed, the page offers the way back to the same spot — it takes the breadcrumbs' place */
.ik-pagehead__bar .ik-back { margin-right: auto; padding-block: 4px; color: var(--ik-text-2); font-size: 14px; cursor: pointer; border-radius: 4px; transition: color var(--ik-quick); }
.ik-pagehead__bar .ik-back:hover { color: var(--ik-text); }
.ik-pagehead__bar .ik-back .ik-icon { width: 18px; height: 18px; }
.ik-pagehead__bar .ik-back + .ik-crumbs { display: none; }
[data-ui="focus"][aria-pressed="true"] { color: var(--ik-text); }
@media (max-width: 1024px) { [data-ui="focus"] { display: none; } :root[data-ik-focus] .ik-split--focus { grid-template-columns: minmax(0, 1fr); } :root[data-ik-focus] .ik-split--focus > :last-child { visibility: visible; } }

/* ── icon rail: the side navigation collapsed to icons. A button with data-ui="rail" toggles <html data-ik-rail>
      and remembers it; labels become tooltips. Wide screens only — phones keep the tab bar. ── */
.ik-app { transition: grid-template-columns var(--ik-soft); }
.ik-app__sidetop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 12px; }
.ik-app__sidetop .ik-iconbtn .ik-icon { width: 20px; height: 20px; }
.ik-sidenav__item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 861px) {
  :root[data-ik-rail] .ik-app { grid-template-columns: 80px minmax(0, 1fr); }
  :root[data-ik-rail] .ik-app__side { padding-inline: var(--ik-s-3); align-items: center; }
  :root[data-ik-rail] .ik-app__sidetop { flex-direction: column; padding: 0; gap: var(--ik-s-4); }
  :root[data-ik-rail] .ik-brand b, :root[data-ik-rail] .ik-brand span, :root[data-ik-rail] .ik-sidenav__label,
  :root[data-ik-rail] .ik-sidenav__item > span, :root[data-ik-rail] .ik-app__foot .ik-byline__text, :root[data-ik-rail] .ik-app__foot .ik-seg { display: none; }
  :root[data-ik-rail] .ik-sidenav { justify-items: center; }
  :root[data-ik-rail] .ik-sidenav__item { width: 48px; justify-content: center; padding: 0; }
  :root[data-ik-rail] .ik-sidenav__item .ik-badge { position: absolute; margin: -22px -22px 0 0; }
  :root[data-ik-rail] .ik-app__foot { padding-inline: 0; justify-items: center; }
  :root[data-ik-rail] .ik-app__foot .ik-cluster { justify-content: center; }
}

/* ── tabs with news: a segmented control whose items carry a count badge (new since your last visit) ── */
.ik-seg > button, .ik-seg > a { display: inline-flex; align-items: center; gap: 6px; }
.ik-seg .ik-badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }
.ik-tabpanel[hidden] { display: none; }

/* ═══ App kit · iteration 02 (the myICOR app): inbox, messages, search + Ask AI, tools, Growth Assignments ═══ */

/* ── tab bar badge: a count on a tab's icon (unread messages). Same .ik-badge, smaller, riding the icon's corner ── */
.ik-tab .ik-badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; font: 600 10px/1 var(--ik-font-body); letter-spacing: 0; text-transform: none; }

/* ── app icon: a tool's logo on a small paper tile (logos are drawn for light grounds); emoji when there is no logo ── */
.ik-appicon { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; overflow: hidden; border-radius: var(--ik-r-sm); background: var(--ik-paper); color: var(--ik-ink); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font: 700 16px/1 var(--ik-font-display); }
.ik-appicon img { width: 76%; height: 76%; object-fit: contain; }
.ik-appicon--sm { width: 26px; height: 26px; border-radius: var(--ik-r-xs); font-size: 12px; }
.ik-appicon--lg { width: 64px; height: 64px; border-radius: var(--ik-r-md); font-size: 28px; }
a.ik-appicon { text-decoration: none; transition: transform var(--ik-press), box-shadow var(--ik-quick); }
a.ik-appicon:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
a.ik-appicon:active { transform: scale(.94); }
.ik-appicons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* ── ICOR Framework: four circles — PKM · PPM (personal) over BKM · BPM (business) — whose overlaps make 13 regions.
      Tools sit in a region's slot (data-region 1–13; 1 = all four). Pure layout: the circles are outlines, the slots
      are positioned by region, the tools are .ik-appicon--sm. ── */

/* ── chat as a page: a direct-message conversation. The log grows with the page; the form stays at the bottom ── */
.ik-chat--page { max-width: none; gap: 0; }
.ik-chat--page .ik-chat__log { height: auto; min-height: 40vh; overflow: visible; padding: var(--ik-s-4) 0; }
.ik-chat--page .ik-chat__form { position: sticky; bottom: 0; z-index: 5; align-items: flex-end; padding: var(--ik-s-3) 0 var(--ik-s-4); background: var(--ik-bg); box-shadow: 0 -1px 0 var(--ik-rule); }
.ik-chat--page .ik-msg--ai .ik-msg__bubble { max-width: min(680px, 100%); }
/* Holista's stage (§24): she is on the page you talk to her on — her one line, the infinity knot, above the conversation, and
   a word for what she is doing. Compact (and still in view) once there is a conversation. */
.ik-holostage { position: relative; display: grid; justify-items: center; gap: 4px; padding: var(--ik-s-4) 0 var(--ik-s-2); }
.ik-holostage__line { width: clamp(150px, 26vw, 220px); aspect-ratio: 1; transition: width var(--ik-ease, .5s) ; }
.ik-holostage__status { min-height: 1.4em; font: 500 var(--ik-fs-label)/1.4 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); text-align: center; }
.ik-holostage__status b { color: var(--ik-text); font-weight: 600; }
.ik-holostage--compact { position: sticky; top: 0; z-index: 4; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 12px; padding: var(--ik-s-2) 0; background: var(--ik-bg); box-shadow: 0 1px 0 var(--ik-rule); }
.ik-holostage--compact .ik-holostage__line { width: 56px; }
.ik-holostage--compact .ik-holostage__status { text-align: left; }
@media (max-width: 860px) { .ik-holostage--compact { top: 56px; } }
.ik-msg__holo { flex: none; width: 34px; height: 34px; }   /* her own small line beside each answer: alive while she writes */
.ik-msg__bubble ul { margin: 0 0 .5em; padding-left: 1.2em; }
.ik-chat__form .ik-textarea { flex: 1; min-height: 44px; max-height: 40vh; resize: none; }
.ik-chat__day { align-self: center; padding: 4px 10px; font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-msg__time { font: 400 12px/1 var(--ik-font-body); color: var(--ik-text-2); }
.ik-msg--me .ik-msg__col { justify-items: end; }
.ik-msg:not(.ik-msg--me):not(.ik-msg--ai) .ik-msg__bubble { background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); border-bottom-left-radius: 6px; }
.ik-msg__bubble p { margin: 0 0 .5em; } .ik-msg__bubble p:last-child { margin: 0; }
@media (max-width: 860px) { .ik-chat--page .ik-chat__form { bottom: calc(var(--ik-dock) - 4px); } }   /* above the tab bar — the web one or the app's own (--ik-dock) */

/* ── citation: a numbered chip inside an AI answer; it links to the source listed under the answer ── */
.ik-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 2px; padding: 0 5px; border-radius: 9px; vertical-align: 2px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-2); font: 600 10.5px/1 var(--ik-font-body); text-decoration: none; transition: color var(--ik-quick), box-shadow var(--ik-quick); }
a.ik-cite:hover { color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-msg__row > .ik-cite { margin: 0; flex: none; }
.ik-msg__row a { color: inherit; text-decoration: none; } .ik-msg__row a:hover { text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; }

/* ── disclosure: optional content that folds away ("why this matters"). <details class="ik-disclosure"> + <summary>.
      Opens on the SOFT spring where the browser can animate height; the chevron turns. An ACHIEVED section is .ik-fold. ── */
.ik-disclosure { interpolate-size: allow-keywords; }
.ik-disclosure > summary { display: flex; align-items: center; gap: var(--ik-s-3); list-style: none; cursor: pointer; border-radius: var(--ik-r-md); }
.ik-disclosure > summary::-webkit-details-marker { display: none; }
.ik-disclosure > summary > .ik-icon:last-child { margin-left: auto; color: var(--ik-text-2); transition: transform var(--ik-soft); }
.ik-disclosure[open] > summary > .ik-icon:last-child { transform: rotate(180deg); }
.ik-disclosure > summary:hover > .ik-icon:last-child { color: var(--ik-text); }
.ik-disclosure::details-content { height: 0; overflow: clip; transition: height var(--ik-soft), content-visibility var(--ik-soft) allow-discrete; }
.ik-disclosure[open]::details-content { height: auto; }
.ik-disclosure[open] > summary { margin-bottom: var(--ik-s-5); }

/* ── fold: an achieved section folded into the thin card of its outcome (a finished Kickstart, a Minimal Valuable System
      in place). The card is a <button data-ui="disclose" aria-expanded aria-controls> — tick, title + one-line outcome,
      the count, a chevron that turns — and the full section waits in .ik-fold__body (hidden until pressed), which unfolds
      on the SOFT spring (disclose: height on the spring, children rise in; 1ms under reduced motion). Fold it back the
      same way. Where a section is not yet achieved, it is simply not folded: the page shows the section itself. ── */
.ik-fold { display: grid; min-width: 0; }
.ik-fold__card { display: flex; align-items: center; gap: var(--ik-s-3); width: 100%; min-height: 56px; margin: 0; padding: 10px var(--ik-s-4) 10px var(--ik-s-3); border: 0; border-radius: var(--ik-r-lg); background: var(--ik-surface); color: var(--ik-text); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-fold__card:hover { background: var(--ik-fill); }
.ik-fold__card[aria-expanded="true"] { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-fold__card > .ik-badge-done { flex: none; }
.ik-fold__main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ik-fold__title { font: 600 15px/1.25 var(--ik-font-display); letter-spacing: -0.01em; }
.ik-fold__line { color: var(--ik-text-2); font-size: 13px; line-height: 1.4; }
.ik-fold__count { flex: none; color: var(--ik-text-2); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.ik-fold__card > .ik-icon:last-child { flex: none; width: 18px; height: 18px; color: var(--ik-text-2); transition: transform var(--ik-soft), color var(--ik-quick); }
.ik-fold__card:hover > .ik-icon:last-child { color: var(--ik-text); }
.ik-fold__card[aria-expanded="true"] > .ik-icon:last-child { transform: rotate(180deg); }
.ik-fold__body { display: grid; gap: var(--ik-s-5); padding-top: var(--ik-s-5); min-width: 0; }
@media (max-width: 420px) { .ik-fold__count { display: none; } }

/* ── Growth Assignment: the lesson's own check that you applied it, at the top of the lesson. One question at a time,
      progress as pips, your answer and why, then a summary. A panel with a firmer outline (it is the work). ── */
.ik-assign { display: grid; gap: var(--ik-s-4); padding: var(--ik-s-5) var(--ik-s-6); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-assign__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ik-s-3); flex-wrap: wrap; }
.ik-assign__q { font: 700 19px/1.3 var(--ik-font-display); letter-spacing: var(--ik-track-heading); margin: 0; text-wrap: pretty; }
.ik-assign__options { display: grid; gap: 4px; }
.ik-assign__options .ik-option { padding: 8px 12px; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); transition: box-shadow var(--ik-quick), background var(--ik-quick); }
.ik-assign__options .ik-option:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-assign__options .ik-option:has(:checked) { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); background: var(--ik-fill); }
.ik-assign__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ik-s-3); flex-wrap: wrap; }
.ik-assign__result { display: grid; gap: 2px; padding: 10px 0; }
.ik-assign__result + .ik-assign__result { box-shadow: inset 0 1px 0 var(--ik-rule); }
@media (max-width: 560px) { .ik-assign { padding: var(--ik-s-4); } }

/* ── unread: a row the member has not opened yet — the title in full weight and a small marker dot at the end ── */
.ik-row.is-unread .ik-row__title { font-weight: 700; }
.ik-row.is-unread .ik-row__end .ik-dot { width: 8px; height: 8px; }
.ik-row__title--wrap { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 560px) { .ik-row__title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } }
.ik-row__sub--wrap { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* a row with its own quick action (3.1, notifications): .ik-row--split holds the link (.ik-row__link, the row's main
   area) and, beside it, .ik-row__mark — read / unread in one press (aria-pressed = read). Unread rows carry the marker dot
   on that button and a bolder title; read rows go quiet. data-ui="rowkeys" on the .ik-list: J/K or ↓/↑ move, E toggles. */
.ik-row--split { padding: 0 8px 0 0; }
.ik-row__link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; align-self: stretch; min-height: 60px; padding: 10px 0 10px 16px; color: inherit; text-decoration: none; border-radius: inherit; }
.ik-row__link:focus-visible { outline: none; }
.ik-row--split:focus-within { background: var(--ik-fill); box-shadow: inset 3px 0 0 var(--ik-accent); }
.ik-row--split + .ik-row--split:focus-within { box-shadow: inset 3px 0 0 var(--ik-accent), inset 0 1px 0 var(--ik-rule); }
.ik-row--split:not(.is-unread) .ik-row__title { font-weight: 500; color: var(--ik-text-2); }
.ik-row__mark { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background var(--ik-quick); }
.ik-row__mark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ik-marker); transition: transform var(--ik-press), background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-row__mark:hover { background: var(--ik-fill-2); }
.ik-row__mark:hover::before { transform: scale(1.25); }
.ik-row__mark[aria-pressed="true"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ik-outline); opacity: 0; }
.ik-row--split:hover .ik-row__mark[aria-pressed="true"]::before, .ik-row--split:focus-within .ik-row__mark[aria-pressed="true"]::before, .ik-row__mark[aria-pressed="true"]:focus-visible::before { opacity: 1; }
@media (hover: none) { .ik-row__mark[aria-pressed="true"]::before { opacity: 1; } }
/* a second quick action in a split row (15z: Later): a quiet round icon button beside the mark, shown on hover or focus of
   the row with a pointer. Inside a swipe row on a touch screen the swipe is the way, so it stays out of sight there but
   keeps its place for screen readers and keyboards (it shows when it has keyboard focus). E and L reach both (rowkeys). */
.ik-row__act { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ik-text-2); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick), opacity var(--ik-quick); }
.ik-row__act:hover { background: var(--ik-fill-2); color: var(--ik-text); }
.ik-row__act:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .ik-row--split .ik-row__act { opacity: 0; }
  .ik-row--split:hover .ik-row__act, .ik-row--split:focus-within .ik-row__act { opacity: 1; }
}
@media (hover: none) { .ik-swipe .ik-row__act:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ── swipe (15z, the inbox): a row that moves sideways under a finger, as in Mail. .ik-swipe holds the row in
   .ik-swipe__body and, underneath, .ik-swipe__actions--start (revealed by a swipe to the right) and --end (to the left),
   each with one or more .ik-swipe__action buttons (icon + a short label; --quiet for the second kind). data-ui="swipe":
   horizontal drags only (vertical scroll stays the browser's: touch-action pan-y), a rubber band where there is nothing
   to reveal and past the edge; let go past half an action and the actions stay open (tap one, or tap the row to close);
   past half the row the outermost action arms (.is-armed: the marker fills it, the icon pops, a tick) and letting go
   presses it. The app hides a row that leaves with .is-gone (it folds away on the soft spring; taking the class off
   brings it back). The actions are aria-hidden: the row always has the same actions as buttons (.ik-row__mark,
   .ik-row__act) or in its ⋯ menu. Reduced motion: no slide, no fold — it just happens. */
@property --ik-swipe-x { syntax: '<number>'; inherits: true; initial-value: 0; }
.ik-swipe { --ik-swipe-x: 0; position: relative; display: grid; grid-template-rows: 1fr; overflow: hidden; transition: --ik-swipe-x var(--ik-soft), grid-template-rows var(--ik-soft), opacity var(--ik-quick), visibility 0s; }
.ik-swipe.is-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.ik-swipe + .ik-swipe, .ik-swipe + .ik-row, .ik-row + .ik-swipe { box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-swipe__body { position: relative; z-index: 1; min-height: 0; overflow: hidden; background: var(--ik-surface); transform: translate3d(calc(var(--ik-swipe-x) * 1px), 0, 0); touch-action: pan-y; -webkit-touch-callout: none; }
.ik-panel .ik-swipe__body { background: var(--ik-bg); }
.ik-swipe.is-dragging .ik-swipe__body { cursor: grabbing; }
.ik-swipe.is-dragging .ik-swipe__body a { pointer-events: none; }
.ik-swipe__actions { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; background: var(--ik-surface); }
.ik-swipe__actions--start { left: 0; width: calc(max(0, var(--ik-swipe-x)) * 1px); }
.ik-swipe__actions--end { right: 0; width: calc(max(0, var(--ik-swipe-x) * -1) * 1px); }
.ik-swipe__action { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 0; background: var(--ik-solid); color: var(--ik-on-solid); font: 600 10.5px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick), flex-grow var(--ik-soft); }
.ik-swipe__action--quiet { background: var(--ik-fill-2); color: var(--ik-text); }
.ik-swipe__action .ik-icon { width: 22px; height: 22px; transition: transform var(--ik-press); }
.ik-swipe__action.is-armed { flex-grow: 1000; background: var(--ik-marker); color: var(--ik-ink); }
.ik-swipe__action.is-armed .ik-icon { transform: scale(1.22); }
.ik-swipe.is-gone { grid-template-rows: 0fr; opacity: 0; visibility: hidden; pointer-events: none; transition: grid-template-rows var(--ik-soft), opacity var(--ik-quick), visibility 0s linear 0.5s; }

/* ── glossary: an ICOR word in running text (.ik-term, a dotted underline — it is a button) opens its card
      (.ik-glossary): the term and its abbreviation, "also called", the definition, a longer note, and the lessons
      that teach it. inkline.js data-ui="term" places the card under the word (above if there is no room). ── */
.ik-term { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: help; text-align: inherit;
  text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--ik-line) 90%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color var(--ik-quick); }
.ik-term:hover, .ik-term[aria-expanded="true"] { text-decoration-color: var(--ik-accent-text); }
.ik-term:focus-visible { outline: 1.5px solid var(--ik-text); outline-offset: 2px; border-radius: 3px; }
.ik-glossary { position: fixed; z-index: var(--ik-z-pop); display: grid; gap: 10px; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; padding: 16px 18px 14px; border-radius: var(--ik-r-lg); background: var(--ik-surface); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: left; }
.ik-glossary[hidden] { display: none; }
.ik-glossary__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding-right: 28px; }
.ik-glossary__term { margin: 0; font: 700 18px/1.2 var(--ik-font-display); letter-spacing: -0.015em; }
.ik-glossary__aka { margin: 0; color: var(--ik-text-2); font: 400 13px/1.4 var(--ik-font-body); }
.ik-glossary__def { margin: 0; font: 400 15px/1.5 var(--ik-font-body); }
.ik-glossary__more { margin: 0; color: var(--ik-text-2); font: 400 14px/1.5 var(--ik-font-body); }
.ik-glossary__lessons { display: grid; gap: 2px; margin: 2px -8px 0; }
.ik-glossary__lessons > a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--ik-r-sm); color: inherit; font: 500 14px/1.3 var(--ik-font-body); text-decoration: none; }
.ik-glossary__lessons > a:hover { background: var(--ik-fill); }
.ik-glossary__lessons .ik-icon { width: 16px; height: 16px; color: var(--ik-text-2); flex: none; }
.ik-glossary__close { position: absolute; top: 8px; right: 8px; }

/* ── iteration 02.1 · community pulse: small numbers, ranked lists, a directory table, a filter bar ── */
.ik-stat--sm { gap: 2px; }
.ik-stat--sm .ik-stat__num { font-size: 30px; letter-spacing: var(--ik-track-heading); }
.ik-stat--sm .ik-stat__num small { font-size: 14px; }
.ik-stat__label { color: var(--ik-text-2); font: 400 13px/1.35 var(--ik-font-body); }
.ik-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ik-s-5) var(--ik-s-4); }
.ik-stats > .ik-stat:first-child { grid-column: 1 / -1; padding-bottom: var(--ik-s-4); box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-stats > .ik-stat:first-child .ik-stat__num { font-size: 44px; }
.ik-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ik-marker); vertical-align: 6px; }
/* live tag (2026-10-05): "we are live right now" on a way in — the Events item of the navigation, a row, an event in a list.
   The marker dot with a slow ring going out from it, then LIVE. In the rail and on a tab only the dot, riding the icon's corner. */
.ik-livetag { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--ik-accent-text); font: 600 10.5px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; white-space: nowrap; }
.ik-livetag::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ik-marker); }
.ik-livetag::after { content: ""; position: absolute; left: -4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ik-marker); opacity: 0; animation: ik-offer-pulse 2.4s cubic-bezier(.2, .9, .25, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .ik-livetag::after { animation: none; } }
.ik-sidenav__item .ik-livetag { margin-left: auto; }
.ik-sidenav__item[aria-current="page"] .ik-livetag { color: inherit; }
.ik-tab .ik-livetag { position: absolute; top: 6px; left: calc(50% + 8px); font-size: 0; gap: 0; }
.ik-kind .ik-livetag { margin-right: 4px; }
@media (min-width: 861px) {
  :root[data-ik-rail] .ik-sidenav__item > .ik-livetag { display: inline-flex; position: absolute; margin: -20px -20px 0 0; font-size: 0; gap: 0; }
}

/* ranked list: rank · who · what they did, right-aligned (newest members, streaks, most engaged) */
.ik-rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: ik-rank; }
.ik-rank > li { counter-increment: ik-rank; }
.ik-rank > li > a, .ik-rank > li > span { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border-radius: var(--ik-r-sm); color: inherit; text-decoration: none; font: 500 14px/1.3 var(--ik-font-body); }
.ik-rank > li > a:hover { background: var(--ik-fill); }
.ik-rank > li > * > :first-child::before { content: counter(ik-rank); }
.ik-rank__n { color: var(--ik-text-2); font: 500 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; text-align: right; }
.ik-rank__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ik-rank__value { display: inline-flex; align-items: center; gap: 5px; color: var(--ik-text-2); font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-rank__value .ik-icon { width: 15px; height: 15px; }
.ik-rank > li:first-child .ik-rank__value .ik-icon { color: var(--ik-accent-text); }

/* flow (2026-10-04, tool trends): who comes and who goes, one row per thing. A diverging bar from one centre baseline —
   joined grows right as a solid bar, left grows left as an outline (shape, never colour, tells them apart); the value
   at the end. Bars are 10px, square at the baseline, 4px round at the data end; each bar's length is its width (% of
   its half). --shifts: rows are A → B pairs with where it happened (.ik-zonetag) and how many. Never the marker. */
.ik-flow { display: grid; gap: var(--ik-s-3); min-width: 0; }
.ik-flow__legend { display: flex; flex-wrap: wrap; gap: var(--ik-s-2) var(--ik-s-4); color: var(--ik-text-2); font: 500 13px/1 var(--ik-font-body); }
.ik-flow__key { display: inline-flex; align-items: center; gap: 6px; }
.ik-flow__key::before { content: ""; width: 14px; height: 10px; border-radius: 0 4px 4px 0; background: var(--ik-text); }
.ik-flow__key--in::before { border-radius: 0 4px 4px 0; background: var(--ik-text); }
.ik-flow__key--out::before { border-radius: 4px 0 0 4px; background: none; box-shadow: inset 0 0 0 1.5px var(--ik-text-2); }
.ik-flow__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ik-flow__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(88px, 1fr) minmax(44px, auto); align-items: center; gap: var(--ik-s-3); min-height: 40px; padding: 0 6px; border-radius: var(--ik-r-sm); }
.ik-flow__row:hover { background: var(--ik-fill); }
.ik-flow__name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; font: 500 14px/1.3 var(--ik-font-body); }
.ik-flow__name > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
a.ik-flow__name:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ik-flow__bars { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 28px; }
.ik-flow__bars::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--ik-rule); }
.ik-flow__out, .ik-flow__in { display: flex; height: 10px; }
.ik-flow__out { justify-content: flex-end; padding-right: 2px; }
.ik-flow__in { padding-left: 2px; }
.ik-flow__out > i, .ik-flow__in > i { display: block; height: 100%; transition: width var(--ik-trace); }
.ik-flow__in > i { border-radius: 0 4px 4px 0; background: var(--ik-text); }
.ik-flow__out > i { border-radius: 4px 0 0 4px; box-shadow: inset 0 0 0 1.5px var(--ik-text-2); }
.ik-flow__value { color: var(--ik-text-2); font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ik-flow__value b { color: var(--ik-text); font-weight: 700; }
.ik-flow--shifts .ik-flow__row { grid-template-columns: minmax(0, 1fr) auto minmax(44px, auto); }
.ik-flow__pair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ik-flow__pair > .ik-flow__name { flex: 0 1 auto; }
.ik-flow__pair > .ik-icon { flex: none; width: 15px; height: 15px; color: var(--ik-text-2); }
/* narrow (a phone, an aside): the name and the value on one line, the bar under them across the width; pairs wrap */
.ik-flow { container-type: inline-size; }
@container (max-width: 440px) {
  .ik-flow__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "bars bars"; row-gap: 2px; padding: 6px; }
  .ik-flow__row > .ik-flow__name, .ik-flow__row > .ik-flow__pair { grid-area: name; }
  .ik-flow__row > .ik-flow__value { grid-area: value; }
  .ik-flow__row > .ik-flow__bars { grid-area: bars; height: 18px; }
  .ik-flow--shifts .ik-flow__row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: none; }
  .ik-flow--shifts .ik-flow__row > * { grid-area: auto; }
  .ik-flow__pair { flex-wrap: wrap; row-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ik-flow__out > i, .ik-flow__in > i { transition: none; } }

/* directory table: a member per row; extra columns fold into the sub line on phones */
.ik-table { width: 100%; border-collapse: collapse; border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 1px var(--ik-rule); background: var(--ik-surface); overflow: hidden; }
.ik-table th { padding: 12px 16px; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; text-align: left; white-space: nowrap; }
.ik-table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ik-table th a:hover, .ik-table th a[aria-current] { color: var(--ik-text); }
.ik-table th a .ik-icon { width: 13px; height: 13px; }
.ik-table td { padding: 10px 16px; border-top: 1px solid var(--ik-rule); vertical-align: middle; font-size: 14px; }
.ik-table tbody tr { transition: background var(--ik-quick); }
.ik-table tbody tr:hover { background: var(--ik-fill); }
.ik-table .ik-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-table .ik-table__quiet { color: var(--ik-text-2); white-space: nowrap; }
.ik-table .ik-byline__meta { max-width: 42ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 860px) { .ik-table .ik-table__opt { display: none; } .ik-table td, .ik-table th { padding-inline: 12px; } }
@media (max-width: 560px) {
  .ik-table--stack thead { display: none; }
  .ik-table--stack, .ik-table--stack tbody { display: block; }
  .ik-table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--ik-rule); }
  .ik-table--stack tr:last-child { box-shadow: none; }
  .ik-table--stack td { display: block; padding: 0; border: 0; min-width: 0; }
  .ik-table--stack td[data-label]::before { content: attr(data-label) " · "; color: var(--ik-text-2); }
  .ik-table--stack td.ik-table__num { text-align: right; }
}

/* filter bar: compact pill dropdowns (the one INKLINE dropdown) next to a search; a set filter reads solid */
.ik-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ik-filters .ik-dropdown { width: auto; }
.ik-filters .ik-dropdown__trigger { min-height: 36px; padding: 6px 10px 6px 14px; border-radius: var(--ik-r-pill); font-size: 14px; white-space: nowrap; }
.ik-filters .is-set .ik-dropdown__trigger { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-filters .is-set .ik-dropdown__trigger .ik-icon { color: var(--ik-on-solid); }
.ik-filters .ik-search { flex: 1 1 240px; max-width: 360px; }

/* ── mention suggestions: typing @ (a member) or # (a tool) in a composer lists matches under the text box ── */
.ik-suggest { display: grid; gap: 2px; max-height: 280px; overflow: auto; margin-top: 6px; padding: 6px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-suggest[hidden] { display: none; }
.ik-suggest__label { padding: 4px 8px 2px; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-suggest__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--ik-r-sm); background: none; color: inherit; font: 500 14px/1.3 var(--ik-font-body); text-align: left; cursor: pointer; }
.ik-suggest__item small { margin-left: auto; color: var(--ik-text-2); font-size: 12px; font-weight: 400; }
.ik-suggest__item:hover, .ik-suggest__item[aria-selected="true"] { background: var(--ik-fill); }
.ik-mention--tool { color: var(--ik-text); text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; }
.ik-mention--tool:hover { text-decoration-color: var(--ik-accent-text); }

/* ── skeleton (02.1): the shape of what is coming, while it loads ─────────────────
   Blocks in --ik-fill that breathe; a line of text is a rounded bar, a face a circle. Compose them inside the
   real container (.ik-post, .ik-card, .ik-row) so nothing jumps when the content arrives. */
.ik-skel { display: grid; gap: 10px; }
.ik-skel__line, .ik-skel__face, .ik-skel__block, .ik-skel__pill { display: block; background: var(--ik-fill); border-radius: var(--ik-r-pill); }
.ik-skel__line { height: 12px; width: 100%; }
.ik-skel__line:last-child:not(:first-child) { width: 64%; }
.ik-skel__line--short { width: 38%; }
.ik-skel__line--title { height: 16px; }
.ik-skel__face { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ik-skel__face--sm { width: 28px; height: 28px; }
.ik-skel__block { width: 100%; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--ik-r-md); }
.ik-skel__pill { width: 72px; height: 32px; }
.ik-skel__row { display: flex; align-items: center; gap: 12px; }
.ik-skel__row > .ik-skel { flex: 1; gap: 8px; }
.ik-skel[aria-busy="true"] .ik-skel__line, .ik-skel[aria-busy="true"] .ik-skel__face, .ik-skel[aria-busy="true"] .ik-skel__block, .ik-skel[aria-busy="true"] .ik-skel__pill { animation: ik-breathe 1.6s ease-in-out infinite; }
.ik-skel__row:nth-child(2) > *, .ik-skel > :nth-child(3) { animation-delay: .15s; }
.ik-skel > :nth-child(4) { animation-delay: .3s; }
@keyframes ik-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ik-skel[aria-busy="true"] * { animation: none; } }

/* ── keep menu (02.1): Later on top, then bookmark folders — the bookmark button's menu ──────────── */
.ik-menu__item:is([role="menuitemcheckbox"], [role="menuitemradio"]) .ik-menu__check { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--ik-accent-text); opacity: 0; transform: scale(.6); transition: opacity var(--ik-quick), transform var(--ik-press); }
.ik-menu__item[aria-checked="true"] .ik-menu__check { opacity: 1; transform: none; }
.ik-menu--icons .ik-menu__item[aria-checked="true"] > .ik-icon:first-child { color: var(--ik-text); }
.ik-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ik-dot, var(--ik-faint)); }
.ik-menu--icons .ik-menu__item > .ik-dot { width: 10px; height: 10px; margin: 0 5px; }
.ik-dot--indigo { --ik-dot: #8189E0; } .ik-dot--rose { --ik-dot: #E27A92; } .ik-dot--orange { --ik-dot: #F08A4B; } .ik-dot--yellow { --ik-dot: #E6C04C; }
.ik-dot--green { --ik-dot: #86A97A; } .ik-dot--cyan { --ik-dot: #62B5C2; } .ik-dot--brass { --ik-dot: #B89B5E; } .ik-dot--burgundy { --ik-dot: #A4475A; }
/* choosing a colour: a row of dots, the chosen one ringed */
.ik-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.ik-swatches label { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.ik-swatches input { position: absolute; opacity: 0; pointer-events: none; }
.ik-swatches .ik-dot { width: 16px; height: 16px; transition: transform var(--ik-press); }
.ik-swatches label:hover .ik-dot { transform: scale(1.15); }
.ik-swatches input:checked + .ik-dot { box-shadow: 0 0 0 3px var(--ik-surface), 0 0 0 4.5px var(--ik-dot); }
.ik-swatches input:focus-visible + .ik-dot { outline: 2px solid var(--ik-accent); outline-offset: 5px; }

/* ── editor (02.1): writing an article — the page is the paper ─────────────────────────────────── */
.ik-editor { display: grid; gap: var(--ik-s-5); width: 100%; max-width: 760px; }
.ik-editor__title { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ik-text); font: 700 clamp(30px, 4.4vw, 44px)/1.1 var(--ik-font-display); letter-spacing: -0.025em; resize: none; outline: none; overflow: hidden; }
.ik-editor__title::placeholder, .ik-editor__body::placeholder { color: var(--ik-text-2); }
.ik-editor__title, .ik-editor__excerpt { field-sizing: content; resize: none; }   /* they grow with their words (UI-14) */
.ik-editor__excerpt { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ik-text-2); font: 400 19px/1.5 var(--ik-font-body); resize: none; outline: none; overflow: hidden; }
.ik-editor__body { display: block; width: 100%; min-height: 48vh; padding: 0; border: 0; background: none; color: var(--ik-text); font: 400 17px/1.75 var(--ik-font-body); resize: none; outline: none; }
.ik-editor__cover { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; aspect-ratio: 2.4; border: 0; border-radius: var(--ik-r-lg); background: none; color: var(--ik-text-2); font: 500 14px/1.3 var(--ik-font-body); cursor: pointer; overflow: hidden; }
.ik-editor__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-editor__cover:not(:has(img)) { outline: 1.5px dashed var(--ik-outline); outline-offset: -1.5px; }
.ik-editor__cover:not(:has(img))::after { display: none; }
.ik-editor__cover:hover { color: var(--ik-text); background: var(--ik-fill); }
.ik-editor__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-editor__cover[aria-busy="true"] { animation: ik-breathe 1.6s ease-in-out infinite; }
.ik-editor__cover .ik-icon { width: 24px; height: 24px; }
.ik-editor__cover .ik-attach__remove { z-index: 1; top: 10px; right: 10px; width: 30px; height: 30px; }
/* a video being published (iteration 06): the same tile at 16:9 — first the dashed drop zone, then the upload's progress
   (.ik-bar under the file's name), then "getting it ready" (aria-busy breathes), then the video itself (.ik-player fills it) */
.ik-editor__cover--video { aspect-ratio: 16 / 9; padding: 16px; text-align: center; }
.ik-editor__cover--video:has(.ik-player) { outline: 0; padding: 0; background: none; cursor: default; }
.ik-editor__cover--video > .ik-player { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.ik-editor__cover--video > .ik-bar { width: min(320px, 72%); }
.ik-editor__cover--video > .ik-small { max-width: 46ch; }
/* the poster beside its buttons (a video's cover picture) */
.ik-editor__poster { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ik-editor__poster > .ik-attach { width: 128px; height: 72px; }
.ik-editor__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ik-editor__bar { position: sticky; bottom: var(--ik-dock); z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 calc(14px + var(--ik-sink)); background: var(--ik-bg); box-shadow: 0 calc(-1 * var(--ik-hair)) 0 var(--ik-rule); }
.ik-editor__bar .ik-small { margin-right: auto; }
.ik-editor .ik-prose { min-height: 48vh; }

/* tags: pills you can remove, and an input that makes the next one (Enter or comma) */
.ik-tagfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 10px; border-radius: var(--ik-r-btn); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick); cursor: text; }
.ik-tagfield:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-tagfield:focus-within { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
.ik-tagfield > .ik-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; }
.ik-tagfield__x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.ik-tagfield__x:hover { background: var(--ik-fill-2); }
.ik-tagfield__x .ik-icon { width: 12px; height: 12px; }
.ik-tagfield input { flex: 1; min-width: 120px; height: 30px; padding: 0 4px; border: 0; background: none; color: var(--ik-text); font: 400 15px/1 var(--ik-font-body); outline: none; }
.ik-tagfield input::placeholder { color: var(--ik-text-3); }

/* ── tool set (02.1): a member's stack on their profile — the four circles as a 2 × 2 (the map's layout), each with
   its core tools; then satellites and utilities. */
.ik-toolset { --c-pkm: var(--ik-circle-pkm); --c-bkm: var(--ik-circle-bkm); --c-ppm: var(--ik-circle-ppm); --c-bpm: var(--ik-circle-bpm); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ik-toolset__circle { --c: var(--ik-line); display: grid; align-content: start; gap: 12px; padding: 16px 18px 18px; border-radius: var(--ik-r-lg); background: color-mix(in srgb, var(--c) 7%, var(--ik-surface)); box-shadow: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--c) 45%, transparent); }
.ik-toolset__circle[data-circle="pkm"] { --c: var(--c-pkm); border-top-left-radius: 34px; } .ik-toolset__circle[data-circle="bkm"] { --c: var(--c-bkm); border-top-right-radius: 34px; }
.ik-toolset__circle[data-circle="ppm"] { --c: var(--c-ppm); border-bottom-left-radius: 34px; } .ik-toolset__circle[data-circle="bpm"] { --c: var(--c-bpm); border-bottom-right-radius: 34px; }
.ik-toolset__head { display: grid; gap: 2px; margin: 0; }
.ik-toolset__head b { color: color-mix(in srgb, var(--c) 55%, var(--ik-text)); font: 800 20px/1 var(--ik-font-display); letter-spacing: var(--ik-track-heading); }   /* the circle's colour, deepened toward the text so it reads on paper and on ink (≥ 4.5:1) */
.ik-toolset__head span { color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.25 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-toolset__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-toolset__none { color: var(--ik-text-3); font: 400 14px/1.4 var(--ik-font-body); }
.ik-toolset__extra { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px 18px; border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-toolset__extra h3 { margin: 0; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
/* one tool: its icon and name; small says what else it touches or serves */
.ik-toolchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 4px; border-radius: var(--ik-r-pill); background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text); font: 500 14px/1.2 var(--ik-font-body); text-decoration: none; transition: box-shadow var(--ik-quick), transform var(--ik-press); }
a.ik-toolchip:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
a.ik-toolchip:active { transform: translateY(1px); }
.ik-toolchip .ik-appicon { width: 28px; height: 28px; border-radius: 50%; }
.ik-toolchip small { color: var(--ik-text-2); font-size: 12px; font-weight: 400; }
/* tool set, editable (3.1 — replaces the Venn map): data-ui="toolset". Boxes and zones are [data-ts-drop]; chips, tray rows and search
   results are [data-ts-drag]; core chips are [data-ts-core] (rest on one: satellite). A chip carries the other boxes it is in as
   coloured tags, its stage as a quiet tag, and a ⋯ menu that shows on hover (touch: always). */
.ik-toolset [data-circle="pkm"], .ik-zonetag[data-circle="pkm"] { --c: var(--ik-circle-pkm); } .ik-toolset [data-circle="bkm"], .ik-zonetag[data-circle="bkm"] { --c: var(--ik-circle-bkm); }
.ik-toolset [data-circle="ppm"], .ik-zonetag[data-circle="ppm"] { --c: var(--ik-circle-ppm); } .ik-toolset [data-circle="bpm"], .ik-zonetag[data-circle="bpm"] { --c: var(--ik-circle-bpm); }
.ik-zonetag { --c: var(--ik-line); display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--ik-r-pill); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font: 700 10px/1 var(--ik-font-body); letter-spacing: .04em; }
.ik-toolchip--edit { gap: 6px; padding-right: 4px; }
.ik-toolchip__main { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: var(--ik-r-pill); }
.ik-toolchip__main:hover { text-decoration: underline; text-decoration-color: var(--ik-text-3); text-underline-offset: 3px; }
.ik-toolchip__tag { color: var(--ik-text-2); font: 500 11px/1 var(--ik-font-body); }
.ik-toolchip__more { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ik-text-2); cursor: pointer; }
.ik-toolchip__more:hover, .ik-toolchip__more[aria-expanded="true"] { background: var(--ik-fill); color: var(--ik-text); }
.ik-toolchip__more .ik-icon { width: 16px; height: 16px; }
.ik-toolset__zone { display: grid; gap: 10px; min-height: 44px; border-radius: var(--ik-r-md); transition: box-shadow var(--ik-quick), background var(--ik-quick); }
.ik-toolset__zone + .ik-toolset__zone { padding-top: 12px; border-top: var(--ik-hair) solid var(--ik-rule); border-radius: 0; }
/* satellites and utilities: their tools in two columns (the four boxes keep one tool per row); one column on a narrow phone */
.ik-toolset__extra .ik-toolset__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; justify-items: start; gap: 6px 18px; }
.ik-toolset__extra .ik-toolset__none { grid-column: 1 / -1; }
@media (max-width: 560px) { .ik-toolset__extra .ik-toolset__tools { grid-template-columns: 1fr; } }
.ik-toolset[data-ui="toolset"] [data-ts-drag], .ik-toolset__pick[data-ts-drag] { cursor: grab; touch-action: none; }
.ik-toolset__circle.is-over { background: color-mix(in srgb, var(--c) 16%, var(--ik-surface)); box-shadow: inset 0 0 0 2px var(--c); }
.ik-toolset__zone.is-over, .ik-toolset__drop.is-over { background: var(--ik-fill); box-shadow: inset 0 0 0 2px var(--ik-accent); }
.is-ts-dragging [data-ts-drop]:not(.is-over) { outline: 1.5px dashed var(--ik-outline); outline-offset: -1.5px; }
.is-ts-dragging, .is-ts-dragging * { -webkit-user-select: none; user-select: none; } /* dragging a tool never selects the page's words or logos */
[data-ts-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* a chip is a handle: pressing it to drag starts no selection */
[data-ts-drag].is-lifted { opacity: .35; }
[data-ts-core].is-target { box-shadow: 0 0 0 2px var(--ik-accent); transform: scale(1.04); }
.ik-toolset__ghost { position: fixed; left: 0; top: 0; z-index: var(--ik-z-drag); pointer-events: none; }
.ik-toolset__ghost .ik-appicon { transform: translate(-50%, -50%) scale(1.3) rotate(-4deg); box-shadow: 0 0 0 2px var(--ik-accent); }
.ik-toolset__hint { position: fixed; left: 0; top: 0; z-index: calc(var(--ik-z-drag) + 1); padding: 5px 10px; border-radius: var(--ik-r-pill); background: var(--ik-solid); color: var(--ik-on-solid); font: 600 12px/1.2 var(--ik-font-body); white-space: nowrap; pointer-events: none; transform: translate(16px, 18px); }
.ik-toolset__hint[hidden] { display: none; }
.ik-toolset__drop { display: grid; gap: 2px; padding: 4px; border-radius: var(--ik-r-md); transition: box-shadow var(--ik-quick), background var(--ik-quick); }
.ik-toolset__pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text); font: 500 14px/1.3 var(--ik-font-body); text-align: left; }
.ik-toolset__pick:hover { background: var(--ik-fill); }
.ik-toolset__pick small { margin-left: auto; color: var(--ik-text-2); font-size: 12px; font-weight: 400; }
.ik-toolset__pick[aria-disabled="true"] { cursor: default; opacity: .7; }
.ik-toolset__grip { width: 16px; height: 16px; color: var(--ik-text-3); }
@media (pointer: coarse) { .ik-toolset[data-ui="toolset"] [data-ts-drag], .ik-toolset__pick[data-ts-drag] { touch-action: auto; } }
@media (max-width: 560px) { .ik-toolset { grid-template-columns: minmax(0, 1fr); } .ik-toolset__circle { border-radius: var(--ik-r-lg) !important; } }

/* ── category picker (02.1): what a tool does in *your* system — secondary categories grouped by circle, chips that
   take the circle's colour when chosen. Personal: it sits in a panel that says so. */
.ik-catpick { display: grid; gap: 16px; }
.ik-catpick__group { --c: var(--ik-line); display: grid; gap: 8px; }
.ik-catpick__group[data-circle="pkm"] { --c: var(--ik-circle-pkm); } .ik-catpick__group[data-circle="bkm"] { --c: var(--ik-circle-bkm); }
.ik-catpick__group[data-circle="ppm"] { --c: var(--ik-circle-ppm); } .ik-catpick__group[data-circle="bpm"] { --c: var(--ik-circle-bpm); }
.ik-catpick__head { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-catpick__head b { color: color-mix(in srgb, var(--c) 55%, var(--ik-text)); font: 800 15px/1 var(--ik-font-display); letter-spacing: var(--ik-track-heading); text-transform: none; }
.ik-catpick__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-catpick .ik-chip { gap: 6px; }
.ik-catpick .ik-chip .ik-icon { width: 14px; height: 14px; display: none; }
.ik-catpick .ik-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--c); }
.ik-catpick .ik-chip[aria-pressed="true"] .ik-icon { display: block; color: var(--c); }

/* ── sign in (3.0): one calm page — the brand on one side, one short form on the other ─────────────────────────────
   .ik-auth > .ik-auth__brand (the mark, a line, a sentence) + .ik-auth__main > .ik-auth__panel (title, lede, providers,
   or, the form, the foot). On phones the brand becomes a slim header. */
.ik-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--ik-bg); }
.ik-auth__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 44px; background: var(--ik-surface); box-shadow: inset calc(-1 * var(--ik-hair)) 0 0 var(--ik-outline); overflow: hidden; }
.ik-auth__art { position: absolute; right: -18%; bottom: -14%; width: 96%; color: var(--ik-marker); opacity: .09; pointer-events: none; }
.ik-auth__claim { position: relative; display: grid; gap: 14px; max-width: 30ch; }
.ik-auth__claim h2 { margin: 0; font: 800 clamp(28px, 3.4vw, 44px)/1.05 var(--ik-font-display); letter-spacing: -0.035em; }
.ik-auth__claim p { margin: 0; color: var(--ik-text-2); font: 400 17px/1.5 var(--ik-font-body); }
.ik-auth__claim .ik-mark-line { color: var(--ik-accent); }
.ik-auth__small { position: relative; color: var(--ik-text-2); font: 400 13px/1.4 var(--ik-font-body); }
.ik-auth__main { display: grid; place-items: center; padding: 48px 24px; }
.ik-auth__panel { display: grid; gap: 22px; width: min(400px, 100%); }
.ik-auth__title { margin: 0; font: 800 clamp(28px, 3vw, 34px)/1.1 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-auth__lede { margin: 6px 0 0; color: var(--ik-text-2); font: 400 16px/1.5 var(--ik-font-body); }
.ik-auth__form { display: grid; gap: 16px; }
.ik-auth__form .ik-btn--block { justify-content: center; }
.ik-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ik-auth__row > .ik-field { flex: 1; min-width: 0; }
.ik-auth__foot { margin: 0; color: var(--ik-text-2); font: 400 15px/1.5 var(--ik-font-body); text-align: center; }
.ik-auth .ik-note { margin: 0; }
.ik-auth .ik-note--warn { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent-text); }
/* "or" between a provider and the form */
.ik-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--ik-text-2); font: 500 var(--ik-fs-label)/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-or::before, .ik-or::after { content: ""; height: var(--ik-hair); background: var(--ik-rule); }
/* a sign-in provider: the provider's own mark, the words, one outline (Google asks for its colours untouched) */
.ik-btn--provider { display: flex; width: 100%; justify-content: center; gap: 12px; background: var(--ik-surface); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-btn--provider:hover { background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); }
.ik-btn--provider .ik-btn__mark { width: 20px; height: 20px; flex: none; }
/* a password you can show; a one-time code */
.ik-field__control { position: relative; }
.ik-field__control > .ik-input { padding-right: 48px; }
.ik-field__reveal { position: absolute; top: 50%; right: 5px; width: 36px; height: 36px; transform: translateY(-50%); }
.ik-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ik-field__label-row > label { font: 500 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-field__label-row a { color: var(--ik-text-2); font-size: 13px; }
.ik-input--code { padding: 14px; font: 600 28px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; letter-spacing: .42em; text-align: center; text-indent: .42em; }
.ik-qr { display: block; width: 184px; height: 184px; padding: 12px; border-radius: var(--ik-r-md); background: #fff; image-rendering: pixelated; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }   /* a code to scan: always dark on white, also on ink */
.ik-qr + .ik-small code { word-break: break-all; }
/* the captcha (Cloudflare Turnstile) keeps its space so the form never jumps */
.ik-captcha { display: flex; justify-content: center; min-height: 65px; }
.ik-captcha:empty::before { content: ""; width: 300px; max-width: 100%; height: 65px; border-radius: var(--ik-r-sm); background: var(--ik-fill); animation: ik-breathe 1.6s ease-in-out infinite; }
@media (max-width: 860px) {
  .ik-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ik-auth__brand { padding: 18px 20px; box-shadow: inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-outline); }
  .ik-auth__claim, .ik-auth__small, .ik-auth__art { display: none; }
  .ik-auth__main { place-items: start center; padding: 32px 20px 48px; }
}

/* ── help (3.1): explanations live behind a "?" next to the title, not on the surface ───────────────────────────────
   .ik-help (data-ui="term", aria-controls → an .ik-popnote) opens a small card under or over it; tap again, Esc or a
   tap elsewhere closes it. Works the same with a mouse, a keyboard and a finger. */
.ik-help { display: inline-grid; place-items: center; flex: none; width: max(14px, 0.5em); height: max(14px, 0.5em); margin: 0 calc(-0.12em - max(14px, 0.5em)) 0 0.12em; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ik-text-3); font-size: inherit; line-height: 1; vertical-align: baseline; align-self: flex-start; position: relative; top: -0.26em; cursor: pointer; transition: color var(--ik-quick), background var(--ik-quick); } /* a superscript, sized by its title: half the size, its bottom a quarter above the baseline, its top on the capitals; it hangs after the last word (no width of its own), so it never wraps onto a line alone */
.ik-help:hover, .ik-help[aria-expanded="true"] { color: var(--ik-text); background: var(--ik-fill); }
.ik-help:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-help .ik-icon { width: 86%; height: 86%; }
@media (pointer: coarse) { .ik-help::after { content: ""; position: absolute; inset: -12px; } } /* a 44px touch target */
.ik-popnote { position: fixed; z-index: var(--ik-z-pop); display: grid; gap: 6px; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 14px 16px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-2); font: 400 14px/1.5 var(--ik-font-body); text-align: left; text-transform: none; letter-spacing: 0; }
.ik-popnote[hidden] { display: none; }
/* every floating panel stays inside the screen with --ik-gutter-float to spare, and scrolls inside when it is taller
   than the room it has (Inkline.place sets the max-height); its one column never grows past the panel */
.ik-popnote, .ik-glossary { grid-template-columns: minmax(0, 1fr); }
.ik-popnote, .ik-glossary, .ik-popmenu, .ik-dropdown__menu, .ik-suggest { max-width: min(var(--pop-w, 360px), calc(100vw - 2 * var(--ik-gutter-float))); overflow-y: auto; overscroll-behavior: contain; }
.ik-popnote, .ik-glossary, .ik-popmenu, .ik-dropdown__menu { max-height: calc(100dvh - 2 * var(--ik-gutter-float)); }
.ik-popnote { --pop-w: 320px; } .ik-popmenu { --pop-w: 380px; }
.ik-popnote b, .ik-popnote strong { color: var(--ik-text); font-weight: 600; }
.ik-popnote p { margin: 0; }
.ik-popnote__title { color: var(--ik-text); font: 600 14px/1.3 var(--ik-font-body); }

/* ── account (3.1): the member's avatar and name ARE the menu — no extra control. Under the name, their job title;
   without one, a quiet invitation to add it (.ik-byline__meta--cta). */
.ik-byline--menu { width: 100%; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: var(--ik-r-btn); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--ik-quick); }
.ik-byline--menu:hover, .ik-byline--menu[aria-expanded="true"] { background: var(--ik-fill); }
.ik-byline--menu:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 0; }
.ik-byline__meta--cta { color: var(--ik-accent-text); }

/* ── quiet until needed (3.1): optional controls show on hover or keyboard focus of their host; touch always shows them */
@media (hover: hover) and (pointer: fine) {
  .ik-revealer .ik-reveal { opacity: 0; transition: opacity var(--ik-quick); }
  .ik-revealer:hover .ik-reveal, .ik-revealer:focus-within .ik-reveal, .ik-reveal[aria-expanded="true"] { opacity: 1; }
}

/* ── keep states (3.1): the bookmark button says where the thing is — a filled bookmark when it is in a folder, a clock
   when it is in Later (outlined, in the text colour), a filled bookmark with a small clock when both. */
.ik-action--save { position: relative; }
.ik-action--save.is-later:not([aria-pressed="true"]) { color: var(--ik-text); }
.ik-action--save.is-later .ik-icon { fill: none; }
.ik-action__badge { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ik-surface); color: var(--ik-text); pointer-events: none; }
.ik-action__badge .ik-icon { width: 11px; height: 11px; fill: none; }

/* ── embeds and link previews (3.1): what a link points to, shown under the words that carry it ───────────────────── */
/* a video or post from another site: its picture, a play button and the provider until pressed, then the provider's own
   player (.is-live). --ratio for the shape (16/9 videos, 4/5 LinkedIn posts). */
.ik-embed { position: relative; display: block; width: 100%; margin-top: 12px; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--ik-r-md); overflow: hidden; background: var(--ik-ink); color: var(--ik-paper); cursor: pointer; }
.ik-embed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; z-index: 3; }
.ik-embed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity var(--ik-quick); }
.ik-embed:hover > img { opacity: 1; }
.ik-embed__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); transition: transform var(--ik-press); }
.ik-embed:hover .ik-embed__play { transform: scale(1.06); }
.ik-embed__play .ik-icon { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.ik-embed__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 28px 14px 12px; background: linear-gradient(transparent, color-mix(in srgb, var(--ik-ink) 80%, transparent)); font: 600 14px/1.3 var(--ik-font-body); }
.ik-embed__meta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ik-embed__meta small { flex: none; margin-left: auto; color: color-mix(in srgb, var(--ik-paper) 75%, transparent); font-size: 12px; font-weight: 500; }
.ik-embed > iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; background: var(--ik-ink); }
.ik-embed.is-live { cursor: default; }
.ik-embed:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
/* a post on X, as its words: the author, the text, a link out (no third-party script) */
.ik-quotecard { display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: var(--ik-r-md); background: var(--ik-surface-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: inherit; text-decoration: none; }
.ik-quotecard:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-quotecard__head { display: flex; align-items: center; gap: 8px; color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); }
.ik-quotecard__head b { color: var(--ik-text); font-weight: 600; }
.ik-quotecard__head small { margin-left: auto; }
.ik-quotecard__text { margin: 0; color: var(--ik-text); font: 400 15px/1.55 var(--ik-font-body); white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
/* a link inside myICOR: our own card — what it is (the kind), its title and a line, its picture */
.ik-linkcard--internal { background: var(--ik-surface-2); }
.ik-linkcard__kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ik-accent-text); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-linkcard__kind .ik-icon { width: 14px; height: 14px; }
.ik-linkcard__text { color: var(--ik-text-2); font: 400 13px/1.4 var(--ik-font-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* "3 new posts": appears at the top of a live feed; a tap takes you up and shows them */
.ik-fresh { position: sticky; top: 12px; z-index: 20; justify-self: center; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: var(--ik-r-pill); background: var(--ik-solid); color: var(--ik-on-solid); font: 600 14px/1 var(--ik-font-body); cursor: pointer; animation: ik-fresh-in var(--ik-soft) both; }
.ik-fresh .ik-icon { width: 16px; height: 16px; }
.ik-fresh .ik-avatars .ik-avatar { width: 20px; height: 20px; }
@keyframes ik-fresh-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
/* the feed's own video: plays inline, muted, while it is in view */
.ik-post__media .ik-player { width: min(100%, calc(70vh * var(--ratio, 16 / 9))); margin: 0 auto; border-radius: var(--ik-r-md); } /* upright videos whole, like pictures */

/* ═══ INKLINE · Video Creation (extension) ═══════════════════════════════════════════════════════════
   Elements for recording and editing video: source cards, record button, meters, timeline lanes, clips,
   audio overlaps (J-cuts), scene chips, transcript words, Jev suggestion card, emphasis chips.
   Tokens only (--ik-*). Flat, one marker accent, hard-edge depth, everything gives back.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── source card: screen / camera / microphone picker with a live preview ─────────────────────────── */
.ik-vc-source { display: grid; gap: var(--ik-s-3); padding: var(--ik-s-4); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: box-shadow var(--ik-quick), transform var(--ik-press); }
.ik-vc-source.is-on { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-source__head { display: flex; align-items: center; gap: var(--ik-s-3); }
.ik-vc-source__head .ik-icon { width: 20px; height: 20px; color: var(--ik-text-2); }
.ik-vc-source__title { font: 700 16px/1.2 var(--ik-font-display); letter-spacing: var(--ik-track-heading); margin: 0; }
.ik-vc-source__state { margin-left: auto; }
.ik-vc-source__view { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ik-r-md); overflow: hidden; background: var(--ik-ink); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); display: grid; place-items: center; color: var(--ik-text-2); font: 500 14px/1.3 var(--ik-font-body); }
.ik-vc-source__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-vc-source__view video.is-contain { object-fit: contain; }

/* ── level meter: segmented, calm, the marker marks the peak ─────────────────────────────────────── */
.ik-vc-meter { display: flex; gap: 3px; height: 14px; align-items: stretch; }
.ik-vc-meter i { flex: 1; border-radius: 2px; background: var(--ik-fill-2); transition: background var(--ik-quick); }
.ik-vc-meter i.on { background: var(--ik-solid); }
.ik-vc-meter i.peak { background: var(--ik-accent); }

/* ── record button: rests on a deeper marker, sinks when pressed (INKLINE marker button, round) ─── */
.ik-vc-rec { appearance: none; border: 0; cursor: pointer; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--ik-marker); color: var(--ik-ink); box-shadow: 0 var(--ik-sink) 0 var(--ik-marker-deep); transition: transform var(--ik-press), box-shadow var(--ik-press); }
.ik-vc-rec::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--ik-ink); transition: border-radius var(--ik-soft), transform var(--ik-press); }
.ik-vc-rec:active, .ik-vc-rec.is-down { transform: translateY(calc(var(--ik-sink) - 1px)); box-shadow: 0 1px 0 var(--ik-marker-deep); }
.ik-vc-rec.is-recording::before { border-radius: 6px; width: 24px; height: 24px; }
.ik-vc-rec:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 4px; }
.ik-vc-rec:disabled { opacity: .45; cursor: not-allowed; }

.ik-vc-clock { font: 800 44px/1 var(--ik-font-display); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-vc-count { font: 800 clamp(120px, 24vw, 260px)/0.9 var(--ik-font-display); letter-spacing: var(--ik-track-display); color: var(--ik-text); }

/* ── preview stage: the 16:9 frame with its toolbar ─────────────────────────────────────────────── */
.ik-vc-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--ik-r-lg); overflow: hidden; background: var(--ik-ink); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-vc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ik-vc-stage.is-aiming canvas { cursor: crosshair; }
.ik-vc-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-vc-stage__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: var(--ik-r-pill); background: var(--ik-solid); color: var(--ik-on-solid); font: 600 13px/1 var(--ik-font-body); pointer-events: none; }
.ik-vc-stage__tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: var(--ik-s-2); opacity: .0; transition: opacity var(--ik-quick); }
.ik-vc-stage:hover .ik-vc-stage__tools, .ik-vc-stage__tools:focus-within, .ik-vc-stage__tools:has([aria-pressed="true"]) { opacity: 1; }
.ik-vc-stage__tools .ik-vc-tool { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-stage__tools .ik-vc-tool[aria-pressed="true"] { background: var(--ik-marker); color: var(--ik-on-accent); }
@media (hover: none) { .ik-vc-stage__tools { opacity: 1; } }
.ik-vc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ik-s-2); }
.ik-vc-toolbar__sep { width: 1px; align-self: stretch; margin: 4px var(--ik-s-1); background: var(--ik-rule); }
.ik-vc-tool { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--ik-r-btn); background: transparent; color: var(--ik-text); font: 600 13px/1 var(--ik-font-body); cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: transform var(--ik-press), background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-vc-tool .ik-icon { width: 17px; height: 17px; }
.ik-vc-tool:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-tool:active, .ik-vc-tool.is-down, .ik-vc-tool[aria-pressed="true"] { transform: translateY(1px); background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge), inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-tool:disabled { opacity: .4; cursor: not-allowed; }
.ik-vc-tool:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 2px; }

/* ── timeline ───────────────────────────────────────────────────────────────────────────────────── */
.ik-vc-tl { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); background: var(--ik-surface); border-top: var(--ik-hair) solid var(--ik-rule); min-height: 0; }
.ik-vc-tl__heads { display: grid; align-content: start; border-right: var(--ik-hair) solid var(--ik-rule); }
.ik-vc-tl__head { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: var(--lane-h, 44px); border-bottom: var(--ik-hair) solid var(--ik-rule); }
.ik-vc-tl__head.is-ruler { height: 28px; }
.ik-vc-tl__scroll { position: relative; overflow-x: auto; overflow-y: hidden; min-width: 0; }
.ik-vc-tl__canvas { position: relative; }
.ik-vc-lane { position: relative; height: var(--lane-h, 44px); border-bottom: var(--ik-hair) solid var(--ik-rule); }
.ik-vc-lane--audio { --lane-h: 76px; }
.ik-vc-ruler { position: relative; height: 28px; border-bottom: var(--ik-hair) solid var(--ik-rule); cursor: pointer; user-select: none; }
.ik-vc-ruler__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ik-rule); }
.ik-vc-ruler__tick b { position: absolute; top: 7px; left: 6px; font: 600 10px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); color: var(--ik-text-2); font-variant-numeric: tabular-nums; }
.ik-vc-playhead { position: absolute; top: 0; bottom: 0; width: 0; z-index: 8; pointer-events: none; }
.ik-vc-playhead::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ik-accent); }
.ik-vc-playhead::after { content: ""; position: absolute; top: -1px; left: -6px; width: 12px; height: 10px; border-radius: 2px 2px 6px 6px; background: var(--ik-accent); }

/* clips: a kept stretch of source on a track */
.ik-vc-clip { position: absolute; top: 5px; bottom: 5px; border-radius: var(--ik-r-sm); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); overflow: hidden; display: flex; align-items: center; padding: 0 10px; font: 600 11px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); text-transform: uppercase; color: var(--ik-text-2); white-space: nowrap; }
.ik-vc-clip--audio { top: 4px; bottom: auto; height: 32px; padding: 0; background: var(--ik-fill); }
.ik-vc-clip--audio.is-row-b { top: 40px; }
.ik-vc-clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ik-vc-clip--audio .ik-vc-clip__tag { position: absolute; left: 6px; top: 3px; z-index: 2; padding: 2px 5px; border-radius: 4px; background: var(--ik-bg); color: var(--ik-text); font: 700 9px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); }
/* a cut: where picture jumps, and the audio overlap (J-cut) that hides the seam */
.ik-vc-cut { position: absolute; top: 0; bottom: 0; width: 0; z-index: 4; }
.ik-vc-cut::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: -1px; width: 2px; border-radius: 1px; background: var(--ik-text); }
.ik-vc-xfade { position: absolute; z-index: 3; top: 4px; height: 72px; border-radius: var(--ik-r-xs); box-shadow: inset 0 0 0 1.5px var(--ik-text); background: var(--ik-fill-2); cursor: ew-resize; }
.ik-vc-xfade::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top right, transparent calc(50% - .75px), var(--ik-text) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(to bottom right, transparent calc(50% - .75px), var(--ik-text) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)); opacity: .5; pointer-events: none; } /* the crossfade X: one line out, one line in (hard lines, not a fade) */
.ik-vc-xfade::after { content: attr(data-label); position: absolute; left: 50%; top: -1px; transform: translate(-50%, -100%); padding: 2px 6px; border-radius: 4px; background: var(--ik-solid); color: var(--ik-on-solid); font: 700 9px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); white-space: nowrap; }
.ik-vc-xfade.is-hard { background: none; box-shadow: none; }
.ik-vc-xfade.is-hard::after { display: none; }

/* scene chip: a stretch of one layout; zoom + float shown by shape, never by colour alone */
.ik-vc-scene { position: absolute; top: 5px; bottom: 5px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--ik-r-sm); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text); font: 600 12px/1 var(--ik-font-body); white-space: nowrap; overflow: hidden; cursor: pointer; transition: background var(--ik-quick), transform var(--ik-press); }
.ik-vc-scene:active { transform: translateY(1px); }
.ik-vc-scene.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-scene .ik-icon { width: 14px; height: 14px; flex: none; }
.ik-vc-scene__edge { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.ik-vc-scene__edge::after { content: ""; position: absolute; top: 10px; bottom: 10px; right: 3px; width: 2px; border-radius: 1px; background: currentColor; opacity: .35; }

/* emphasis chip on the timeline */
.ik-vc-emph { position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); background: var(--ik-fill); color: var(--ik-text); font: 600 12px/1 var(--ik-font-body); white-space: nowrap; overflow: hidden; cursor: pointer; }
.ik-vc-emph.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-emph.is-off { opacity: .45; text-decoration: line-through; }
.ik-vc-emph .ik-glyph { width: 12px; height: 12px; flex: none; }

/* ── transcript words: the editing surface ─────────────────────────────────────────────────────── */
.ik-vc-transcript { display: grid; gap: var(--ik-s-4); }
.ik-vc-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--ik-s-3); align-items: start; }
.ik-vc-line__time { padding-top: 4px; font: 600 11px/1.4 var(--ik-font-body); letter-spacing: var(--ik-track-label-tight); color: var(--ik-text-2); font-variant-numeric: tabular-nums; }
.ik-vc-line__text { font: 500 16px/1.75 var(--ik-font-body); }
.ik-vc-word { display: inline; padding: 2px 1px; border-radius: 4px; cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick); -webkit-user-select: none; user-select: none; }
.ik-vc-word:hover { background: var(--ik-fill); }
.ik-vc-word.is-now { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-vc-word.is-sel { background: var(--ik-fill-2); box-shadow: inset 0 var(--ik-hair) 0 var(--ik-line), inset 0 calc(-1 * var(--ik-hair)) 0 var(--ik-line); border-radius: 2px; }
.ik-vc-word.is-cut { color: var(--ik-text-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ik-vc-word.is-emph { box-shadow: inset 0 -2px 0 var(--ik-accent); }
.ik-vc-word.is-sel.is-cut { color: var(--ik-text-2); }
.ik-vc-selbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--ik-s-2); padding: var(--ik-s-3); border-radius: var(--ik-r-md); background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-vc-selbar .ik-btn { --btn-bg: transparent; --btn-fg: var(--ik-on-solid); }

/* ── Jev suggestion card: what Jev would do, why, and one click to accept ──────────────────────── */
.ik-vc-suggest { display: grid; gap: var(--ik-s-3); padding: var(--ik-s-4); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-suggest__who { display: flex; align-items: center; gap: var(--ik-s-2); }
.ik-vc-suggest__why { margin: 0; font: 400 14px/1.5 var(--ik-font-body); color: var(--ik-text-2); }
.ik-vc-suggest__actions { display: flex; gap: var(--ik-s-2); padding-bottom: var(--ik-sink); }

/* ── processing steps ──────────────────────────────────────────────────────────────────────────── */
.ik-vc-steps { display: grid; gap: var(--ik-s-3); margin: 0; padding: 0; list-style: none; }
.ik-vc-step { display: flex; align-items: center; gap: var(--ik-s-3); font: 500 16px/1.3 var(--ik-font-body); color: var(--ik-text-2); }
.ik-vc-step .ik-icon { width: 20px; height: 20px; }
.ik-vc-step.is-now { color: var(--ik-text); }
.ik-vc-step.is-done { color: var(--ik-text); }
.ik-vc-step__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); flex: none; }
.ik-vc-step.is-done .ik-vc-step__mark { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-step.is-now .ik-vc-step__mark { box-shadow: inset 0 0 0 2px var(--ik-accent); }

/* ── what gets drawn on the picture (the renderer paints the same shapes on canvas) ──────────────── */
.ik-vc-bold { display: inline-block; padding: .12em .34em; border-radius: .16em; background: var(--ik-marker); color: var(--ik-ink); font: 800 40px/1.1 var(--ik-font-display); letter-spacing: -.02em; box-shadow: .06em .09em 0 var(--ik-ink); transform: rotate(-.7deg); }
.ik-vc-hand { position: relative; display: inline-block; font: 600 42px/1 var(--ik-font-hand); color: var(--ik-marker); transform: rotate(-2deg); text-shadow: 2px 0 0 var(--ik-ink), -2px 0 0 var(--ik-ink), 0 2px 0 var(--ik-ink), 0 -2px 0 var(--ik-ink), 2px 2px 0 var(--ik-ink), -2px -2px 0 var(--ik-ink), 2px -2px 0 var(--ik-ink), -2px 2px 0 var(--ik-ink); }
.ik-vc-lift { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 12px; background: var(--ik-slate); color: var(--ik-ink); font: 700 20px/1 var(--ik-font-body); transform: perspective(700px) rotateY(-14deg) translateY(-6px) scale(1.06); box-shadow: 12px 18px 0 color-mix(in srgb, var(--ik-ink) 58%, transparent), inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-paper) 35%, transparent); transition: transform var(--ik-soft); }
.ik-vc-lift:hover { transform: perspective(700px) rotateY(10deg) translateY(-8px) scale(1.08); }
.ik-vc-ghost { display: inline-block; width: 84px; height: 84px; border-radius: 50%; border: 3px dashed var(--ik-marker); background: color-mix(in srgb, var(--ik-marker) 12%, transparent); }
.ik-vc-drag { display: inline-block; width: 220px; height: 96px; border: 3px dashed var(--ik-marker); background: color-mix(in srgb, var(--ik-marker) 14%, transparent); }
.ik-vc-wave { display: block; width: 100%; height: 100%; fill: var(--ik-text-2); }

/* ═══ iteration 04 — access, upgrade, status, announcements, live events ═══════════════════════════════════════ */

/* lock (04): what a member may not open yet shows its shape. .ik-lock wraps the content (.ik-lock__content) and a
   veil with one calm card (.ik-lock__card: icon, one line, one button). --blur: statistics, chat, a card — blurred
   under the card. --fade: written content — the beginning, then it fades into the card. --composer: an input a
   member may not use — its shape, the reason, the button. --inline: a "Show more" that leads to the upgrade. */
.ik-lock { position: relative; display: grid; isolation: isolate; }
.ik-lock__content { min-width: 0; }
.ik-lock--blur { min-height: var(--lock-min, 260px); overflow: hidden; }
.ik-lock--blur.ik-lock--compact { --lock-min: 180px; }
.ik-lock--blur > .ik-lock__content { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none; }
.ik-lock__veil { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; }
.ik-lock__card { display: grid; justify-items: center; gap: 8px; max-width: 380px; padding: 18px 20px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: center; }
.ik-lock__card > .ik-icon { width: 22px; height: 22px; color: var(--ik-accent-text); }
.ik-lock__title { margin: 0; color: var(--ik-text); font: 600 16px/1.3 var(--ik-font-display); letter-spacing: -0.01em; }
.ik-lock__card p { margin: 0; color: var(--ik-text-2); font: 400 14px/1.5 var(--ik-font-body); }
.ik-lock--compact .ik-lock__card { gap: 6px; padding: 12px 14px; }
.ik-lock--compact .ik-lock__title { font-size: 14px; }
.ik-lock--fade > .ik-lock__content { max-height: var(--fade, 14em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.ik-lock--fade > .ik-lock__veil { position: static; margin-top: -1.5em; padding: 0; }
.ik-lock--fade .ik-lock__card { justify-self: center; }
.ik-lock--composer { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-lock--composer > .ik-icon { flex: none; width: 18px; height: 18px; color: var(--ik-text-3); }
.ik-lock--composer > p { flex: 1; min-width: 0; margin: 0; color: var(--ik-text-2); font: 400 15px/1.4 var(--ik-font-body); }
.ik-lock--inline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ik-text-2); font: 500 14px var(--ik-font-body); cursor: pointer; }
.ik-lock--inline:hover { color: var(--ik-text); }
.ik-lock--inline .ik-icon { width: 15px; height: 15px; color: var(--ik-accent-text); }
@media (max-width: 560px) { .ik-lock--composer { flex-wrap: wrap; } .ik-lock--composer > .ik-btn { margin-left: auto; } }

/* upgrade dialog (04): the one way up, opened by any [data-ik-upgrade]. A modal panel (.ik-upgrade) with the offer the
   member has right now (.ik-upgrade__offer: kicker, words, the days left), then the plans they can move to (.ik-plan,
   --best for the recommended one, .is-current for theirs), each with its price for this member and one button. */
.ik-upgrade { position: relative; display: grid; gap: 18px; width: min(780px, 100%); border-radius: var(--ik-r-xl); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; }
.ik-upgrade__head { display: grid; gap: 6px; padding-right: 36px; }
.ik-upgrade__head h2 { margin: 0; font: 800 30px/1.08 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-upgrade__head p { margin: 0; color: var(--ik-text-2); font-size: 15px; line-height: 1.5; }
.ik-upgrade__close { position: absolute; top: 16px; right: 16px; }
.ik-upgrade__offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: var(--ik-r-md); background: color-mix(in srgb, var(--ik-marker) 12%, var(--ik-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ik-marker) 45%, transparent); font: 500 14px/1.4 var(--ik-font-body); }
.ik-upgrade__offer .ik-label { color: var(--ik-accent-text); }
.ik-upgrade__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ik-upgrade__note { margin: 0; color: var(--ik-text-2); font-size: 13px; }
.ik-upgrade__note.is-error { color: var(--ik-accent-text); }
.ik-plan { display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-plan--best { box-shadow: inset 0 0 0 1.5px var(--ik-accent); }
.ik-plan__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 18px var(--ik-font-display); }
.ik-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font: 800 34px/1 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-plan__price small { color: var(--ik-text-2); font: 500 14px var(--ik-font-body); letter-spacing: 0; }
.ik-plan__price s { color: var(--ik-text-3); font: 500 16px var(--ik-font-body); letter-spacing: 0; }
.ik-plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ik-text-2); font-size: 14px; line-height: 1.4; }
.ik-plan li { display: flex; gap: 8px; }
.ik-plan li .ik-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ik-accent-text); }
.ik-plan.is-current { opacity: .7; }
/* the exclusion line (05): what a plan leaves out, said plainly where the plan is offered — "Not included in Monthly: the
   weekly coaching … — and Holista." An li in a plan's or tier card's check list, or a p on its own under a button
   (.ik-offermodal__alt, the free banner). Grey with a ✕ — never a lock: a lock is the way up, this is simply not part of it. */
.ik-not { display: flex; gap: 8px; margin: 0; color: var(--ik-text-3); }
.ik-not .ik-icon, .ik-plan .ik-not .ik-icon, .ik-tiercard .ik-not .ik-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ik-text-3); } /* the ✕ stays grey inside a check list (whose icons are the accent) */
p.ik-not, span.ik-not { font: 500 13px/1.4 var(--ik-font-body); }
.ik-offermodal__alt .ik-not { flex: 1 1 100%; }
@media (max-width: 560px) { .ik-upgrade { padding: 22px 16px; } .ik-upgrade__head h2 { font-size: 24px; } }

/* tier badge (04): status shown, never shouted — a pill per tier that grows in status by material, not size:
   free (a faint outline) · monthly (an outline) · lifetime (a paper outline, a fill) · Inner Circle (the marker, the
   lemniscate) · host (solid paper, the lemniscate). A button: data-ui="term" + aria-controls opens .ik-tiercard
   (what the tier is, what it adds, the way up). --sm for lists and bylines. */
.ik-tier { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text-2); box-shadow: inset 0 0 0 1px var(--ik-rule); font: 700 11px/1 var(--ik-font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform var(--ik-press), box-shadow var(--ik-quick); }
.ik-tier:active { transform: scale(.95); }
.ik-tier:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-tier__mark { width: 18px; height: 11px; flex: none; }
.ik-tier--monthly { color: var(--ik-text); box-shadow: inset 0 0 0 1px var(--ik-outline); }
.ik-tier--lifetime { color: var(--ik-text); background: var(--ik-fill); box-shadow: inset 0 0 0 1px var(--ik-text-2); }
.ik-tier--ic { color: var(--ik-ink); background: var(--ik-marker); box-shadow: none; }
.ik-tier--host { color: var(--ik-on-solid); background: var(--ik-solid); box-shadow: none; }
.ik-tier--host .ik-tier__mark { color: var(--ik-marker); }
.ik-tier--sm { height: 20px; padding: 0 8px; gap: 4px; font-size: 9.5px; }
.ik-tier--sm .ik-tier__mark { width: 14px; height: 9px; }
.ik-tiercard { width: min(320px, calc(100vw - 16px)); gap: 10px; }
.ik-tiercard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ik-tiercard ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ik-tiercard li { display: flex; gap: 8px; } .ik-tiercard li .ik-icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ik-accent-text); }

/* the banner slot (04): the one banner above the page — an offer (.ik-offer, §25) or an alert */
.ik-app__banner { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--ik-s-6) var(--ik-s-6) 0; } /* the one banner above the page, in the page's gutters */
.ik-app__banner:empty { display: none; }

/* admin tool (04 · 05): admins only — a round button in the top-right corner of the screen (its own fixed piece, not
   part of the bottom-right float stack); its flyout (a .ik-popnote, data-ui="term") opens downward and views the app as
   another tier and fires that tier's dialogs and banners. While viewing as a tier the button wears the marker and says
   which tier. On phones it sits under the top bar (--ik-topbar-h), never over its controls. A page head beneath it
   keeps clear of it (padding-right while a tool is on the page), so no page action is ever covered. */
.ik-admintool { position: fixed; top: 16px; right: 16px; z-index: var(--ik-z-float); display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--ik-r-pill); background: var(--ik-solid); color: var(--ik-on-solid); font: 700 12px var(--ik-font-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 0 1px var(--ik-outline); transition: transform var(--ik-press); }
.ik-admintool:active { transform: scale(.94); }
.ik-admintool .ik-icon { width: 20px; height: 20px; }
.ik-admintool.is-viewing { background: var(--ik-marker); color: var(--ik-ink); }
.ik-admintool__panel { width: min(320px, calc(100vw - 2 * var(--ik-gutter-float))); gap: 12px; }
.ik-admintool__list { display: grid; gap: 6px; }
:root:has(.ik-admintool) .ik-pagehead { padding-right: 56px; }
:root:has(.ik-admintool) .ik-offer { padding-right: 72px; } :root:has(.ik-admintool) .ik-offer__close { right: 54px; }   /* the offer banner at the top of a page: its × and its words stay clear of the eye */
@media (min-width: 861px) { :root:has(.ik-admintool.is-viewing) .ik-offer { padding-right: 216px; } :root:has(.ik-admintool.is-viewing) .ik-offer__close { right: 198px; } }               /* the eye's column: 44px + the gap to it */
:root:has(.ik-admintool.is-viewing) .ik-pagehead { padding-right: 200px; }   /* with the tier's name on the pill */
@media (max-width: 860px) { .ik-admintool { top: calc(var(--ik-topbar-h) + 8px); right: 12px; } :root:has(.ik-admintool.is-viewing) .ik-pagehead { padding-right: 56px; } }


/* announcements (04): the newest unseen ones as a stack of cards bottom right (.ik-annstack, up to three, --i = 0
   in front). Resting, they sit on top of each other; hover or focus spreads them out. Each card opens its
   announcement; its × dismisses it. The picture is the cover, the first picture, or generated art (.ik-art). */
.ik-annstack { position: fixed; right: 16px; bottom: calc(16px + var(--ik-dock) + var(--ik-bar)); z-index: var(--ik-z-float); display: grid; width: min(360px, calc(100vw - 32px)); }
.ik-annstack--raised { bottom: 72px; }
.ik-anncard { --i: 0; grid-area: 1 / 1; position: relative; z-index: calc(10 - var(--i)); display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 88px; padding: 10px 6px 10px 10px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), 0 0 0 4px var(--ik-bg); transform: translateY(calc(var(--i) * -10px)) scale(calc(1 - var(--i) * .04)); transform-origin: 50% 0; transition: transform var(--ik-soft), opacity var(--ik-quick); animation: ik-ann-in var(--ik-soft) both; }
@keyframes ik-ann-in { from { opacity: 0; } } /* opacity only: the stack's own transform stays in charge */
.ik-anncard:not(:first-child) .ik-anncard__body { opacity: 0; transition: opacity var(--ik-quick); }
.ik-annstack:hover .ik-anncard, .ik-annstack:focus-within .ik-anncard { transform: translateY(calc(var(--i) * -98px)); }
.ik-annstack:hover .ik-anncard__body, .ik-annstack:focus-within .ik-anncard__body { opacity: 1; }
.ik-anncard__media { width: 64px; height: 64px; overflow: hidden; border-radius: var(--ik-r-md); background: var(--ik-fill); }
.ik-anncard__media > img, .ik-anncard__media > .ik-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-anncard__body { display: grid; gap: 3px; min-width: 0; }
.ik-anncard__kind { color: var(--ik-accent-text); font: 600 11px var(--ik-font-body); letter-spacing: .06em; text-transform: uppercase; }
.ik-anncard__title { color: var(--ik-text); font: 600 14px/1.3 var(--ik-font-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ik-anncard__hit { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ik-anncard__hit:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-anncard > .ik-iconbtn { position: relative; z-index: 1; align-self: start; width: 30px; height: 30px; }
.ik-anncard__media, .ik-anncard__body { position: relative; z-index: 0; pointer-events: none; }
@media (max-width: 860px) { .ik-annstack { right: 12px; } .ik-annstack--raised { bottom: calc(72px + var(--ik-dock) + var(--ik-bar)); } }
/* the floating stack (UI-8 · 05): the announcements and the tour card share one bottom-right column above the dock
   instead of fixed offsets that collide on phones (the admin tool left the stack in 05: it is top right on its own) */
.ik-floatstack { position: fixed; right: 16px; bottom: calc(16px + var(--ik-dock) + var(--ik-bar)); z-index: var(--ik-z-float); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; max-width: calc(100vw - 32px); pointer-events: none; }
.ik-floatstack > * { pointer-events: auto; }
.ik-floatstack > .ik-annstack, .ik-floatstack > .ik-tourcard { position: relative; right: auto; bottom: auto; left: auto; }
@media (max-width: 860px) { .ik-floatstack { right: 12px; max-width: calc(100vw - 24px); } }

/* generated art (04): when something has no picture, INKLINE draws one from its id (data-ui="art", data-seed) — one
   smooth line that loops and settles, ending in the marker dot. The same seed always draws the same art. */
.ik-art { display: block; width: 100%; aspect-ratio: 1; background: var(--ik-surface-2); }
.ik-art svg { display: block; width: 100%; height: 100%; }
.ik-art path { fill: none; stroke: var(--ik-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ik-art circle { fill: var(--ik-marker); }

/* live room (04): an event that is happening — the stream (.ik-liveroom__stream, 16:9) or what is coming
   (.ik-liveroom__wait), and beside it the chat and who is here (.ik-liveroom__side). One column on phones. */
.ik-liveroom { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ik-liveroom__stage { flex: 999 1 520px; display: grid; gap: 12px; min-width: 0; } /* the side drops below when the room is narrow */
.ik-liveroom__stream { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ik-r-lg); background: var(--ik-ink); }
.ik-liveroom__stream iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ik-liveroom__wait { display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; aspect-ratio: 16 / 9; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); text-align: center; color: var(--ik-text-2); }
.ik-liveroom__wait b { color: var(--ik-text); font: 800 28px/1.1 var(--ik-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ik-liveroom__side { flex: 1 1 320px; min-width: 0; position: sticky; top: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); height: min(78vh, 760px); overflow: hidden; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-liveroom__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; box-shadow: inset 0 -1px 0 var(--ik-rule); }
@media (max-width: 960px) { .ik-liveroom__side { position: static; height: 70vh; } }

/* live chat (04): the chat of an event — short messages in a scrolling log, the newest at the bottom, the box below.
   .is-locked blurs other members' messages for members who may not write (with an .ik-lock--composer box).
   --popout fills its own window. */
.ik-livechat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; }
.ik-livechat__log { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.ik-livechat__msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.ik-livechat__msg .ik-avatar { width: 28px; height: 28px; font-size: 11px; }
.ik-livechat__head { display: flex; align-items: baseline; gap: 6px; font: 600 13px var(--ik-font-body); }
.ik-livechat__head time { color: var(--ik-text-3); font-weight: 500; font-size: 11px; }
.ik-livechat__text { margin: 2px 0 0; color: var(--ik-text); font: 400 14px/1.45 var(--ik-font-body); overflow-wrap: anywhere; }
.ik-livechat__msg.is-mine .ik-livechat__head { color: var(--ik-accent-text); }
.ik-livechat__msg.is-pending { opacity: .6; }
.ik-livechat__box { display: flex; gap: 8px; padding: 10px; box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-livechat__box .ik-input { flex: 1; min-width: 0; }
.ik-livechat__empty { margin: auto; color: var(--ik-text-3); font-size: 14px; text-align: center; }
.ik-livechat.is-locked .ik-livechat__msg:not(.is-mine) { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.ik-livechat.is-locked .ik-livechat__box { display: block; }
.ik-livechat--popout { height: 100dvh; }
.ik-people { display: grid; gap: 2px; padding: 8px; overflow-y: auto; }
.ik-people a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--ik-r-btn); color: inherit; text-decoration: none; font: 500 14px var(--ik-font-body); }
.ik-people a:hover { background: var(--ik-fill); }
.ik-people .ik-avatar { width: 28px; height: 28px; font-size: 11px; }

/* ── words on the waveform: which sound belongs to which word, what is a filler, what is unrecognised, what is a pause ── */
.ik-vc-lane--words { --lane-h: 34px; }
.ik-vc-wblock { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; padding: 0 8px; border-radius: var(--ik-r-xs); background: var(--ik-fill-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text); font: 500 12px/1 var(--ik-font-body); white-space: nowrap; overflow: hidden; cursor: pointer; transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-vc-wblock:hover { background: var(--ik-fill-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-wblock--filler { background: transparent; outline: 1px dashed var(--ik-line); outline-offset: -1px; box-shadow: none; color: var(--ik-text-2); font-style: italic; }
.ik-vc-wblock--pause { justify-content: center; background: var(--ik-fill); box-shadow: none; color: var(--ik-text-2); cursor: pointer; }
.ik-vc-wblock--noise { justify-content: center; background: var(--ik-fill); box-shadow: none; color: var(--ik-text-3); padding: 0 4px; }
.ik-vc-wblock--speech { justify-content: center; background: transparent; outline: 1px dashed var(--ik-accent); outline-offset: -1px; box-shadow: none; color: var(--ik-text-2); padding: 0 4px; font-style: italic; }
.ik-vc-wblock.is-sel { background: var(--ik-fill-2); box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-vc-wblock.is-now { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-wdur { position: absolute; z-index: 5; top: 6px; padding: 3px 7px; border-radius: 5px; background: var(--ik-solid); color: var(--ik-on-solid); font: 700 11px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; pointer-events: none; }

/* ── B-roll chip on the timeline: an explanatory graphic laid over the picture ── */
.ik-vc-broll { position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--ik-r-sm); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); background: var(--ik-fill); color: var(--ik-text); font: 600 12px/1 var(--ik-font-body); white-space: nowrap; overflow: hidden; cursor: pointer; }
.ik-vc-broll .ik-icon { width: 14px; height: 14px; flex: none; }
.ik-vc-broll.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-broll.is-off { opacity: .45; text-decoration: line-through; }

/* ── AI chat panel: talk to the editor, watch it work ── */
.ik-vc-chat { display: grid; gap: var(--ik-s-3); grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-height: 0; height: 100%; }
.ik-vc-chat__ctx { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ik-r-md); background: var(--ik-fill); color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); }
.ik-vc-chat__ctx .ik-icon { width: 16px; height: 16px; flex: none; }
.ik-vc-chat__ctx.is-on { background: var(--ik-fill-2); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-chat__log { min-height: 0; overflow: auto; display: grid; align-content: start; gap: var(--ik-s-3); padding: 2px 2px var(--ik-s-3); }
.ik-vc-chat__prompts { display: flex; flex-wrap: wrap; gap: var(--ik-s-2); }
.ik-vc-chat__composer { display: grid; gap: var(--ik-s-2); }
.ik-vc-chat__input { resize: none; min-height: 52px; height: 52px; }
.ik-vc-chat__actions { display: flex; justify-content: flex-end; gap: var(--ik-s-2); padding-bottom: 3px; }
.ik-vc-msg { display: grid; gap: 6px; justify-items: start; }
.ik-vc-msg--me { justify-items: end; }
.ik-vc-msg__bubble { max-width: 92%; padding: 10px 14px; border-radius: var(--ik-r-lg); font: 400 14px/1.5 var(--ik-font-body); background: var(--ik-fill); color: var(--ik-text); overflow-wrap: anywhere; }
.ik-vc-msg--me .ik-vc-msg__bubble { background: var(--ik-solid); color: var(--ik-on-solid); border-bottom-right-radius: 6px; }
.ik-vc-msg--ai .ik-vc-msg__bubble { border-bottom-left-radius: 6px; }
.ik-vc-msg__bubble:empty { display: none; }
.ik-vc-msg__bubble code { font: 500 .92em var(--ik-font-body); padding: 1px 5px; border-radius: 4px; background: var(--ik-fill-2); }
.ik-vc-msg__typing { color: var(--ik-text-2); }
.ik-vc-msg__typing::after { content: "…"; animation: ik-vc-dots 1.2s steps(4) infinite; }
@keyframes ik-vc-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ik-vc-toolchip { display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 5px 10px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-2); font: 600 12px/1.2 var(--ik-font-body); }
.ik-vc-toolchip .ik-icon { width: 14px; height: 14px; flex: none; }
.ik-vc-toolchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-vc-toolchip.is-ok { color: var(--ik-text); }
.ik-vc-toolchip.is-error { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent); color: var(--ik-accent-text); }
.ik-vc-toolchip.is-run .ik-icon { animation: ik-vc-spin 1.4s linear infinite; }
@keyframes ik-vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ik-vc-toolchip.is-run .ik-icon, .ik-vc-msg__typing::after { animation: none; } }

/* ── the macOS menu-bar recorder (native app): status item states and its menu, as designed ── */
.ik-vc-menubar { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--ik-surface-2); color: var(--ik-text); font: 600 13px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-vc-menubar .ik-icon { width: 16px; height: 16px; }
.ik-vc-menubar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ik-accent); }
.ik-vc-menubar.is-paused .ik-vc-menubar__dot { display: none; }

/* ── import: drop zone and the list of files, each told what it is ── */
.ik-vc-drop { display: flex; align-items: center; gap: var(--ik-s-4); padding: var(--ik-s-5) var(--ik-s-6); border-radius: var(--ik-r-lg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); background: var(--ik-surface); color: var(--ik-text-2); font: 500 15px/1.4 var(--ik-font-body); cursor: pointer; transition: box-shadow var(--ik-quick), background var(--ik-quick), transform var(--ik-press); }
.ik-vc-drop .ik-icon { width: 24px; height: 24px; flex: none; color: var(--ik-text); }
.ik-vc-drop b { color: var(--ik-text); font: 700 17px/1.3 var(--ik-font-display); letter-spacing: var(--ik-track-heading); }
.ik-vc-drop small { color: var(--ik-text-2); font-size: 13px; }
.ik-vc-drop .ik-btn { margin-left: auto; }
.ik-vc-drop:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-drop.is-over { background: var(--ik-fill-2); box-shadow: inset 0 0 0 2px var(--ik-accent); transform: translateY(1px); }
.ik-vc-files { display: grid; gap: var(--ik-s-2); }
.ik-vc-file { display: flex; align-items: center; gap: var(--ik-s-3); padding: 10px 12px; border-radius: var(--ik-r-md); background: var(--ik-fill); }
.ik-vc-file__lead .ik-icon { width: 20px; height: 20px; color: var(--ik-text-2); }
.ik-vc-file__main { display: grid; min-width: 0; flex: 1; }
.ik-vc-file__name { font: 600 14px/1.3 var(--ik-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-vc-file__meta { font: 400 12px/1.3 var(--ik-font-body); color: var(--ik-text-2); }
.ik-vc-file.is-error { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-accent); }
.ik-vc-file.is-error .ik-vc-file__meta { color: var(--ik-accent-text); }
.ik-vc-file.is-uploading { opacity: .65; }

/* ── review notes: a region on the timeline, the note chips on it, the callout where you write one, the tray of parked notes ── */
.ik-vc-region { position: absolute; top: 28px; bottom: 0; z-index: 6; pointer-events: none; background: color-mix(in srgb, var(--ik-accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--ik-accent); border-radius: 4px; }
.ik-vc-tl.is-noting .ik-vc-tl__scroll { cursor: crosshair; }
.ik-vc-note { position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--ik-r-sm); background: transparent; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); color: var(--ik-text); font: 600 12px/1 var(--ik-font-body); white-space: nowrap; overflow: hidden; cursor: pointer; border-left: 3px solid var(--ik-accent); }
.ik-vc-note .ik-icon { width: 14px; height: 14px; flex: none; }
.ik-vc-note span { overflow: hidden; text-overflow: ellipsis; }
.ik-vc-note.is-sent { background: var(--ik-fill-2); border-left-color: var(--ik-text-2); color: var(--ik-text-2); }
.ik-vc-note.is-resolved { background: var(--ik-fill); border-left-color: var(--ik-text-3); color: var(--ik-text-3); text-decoration: line-through; }
.ik-vc-note.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-vc-callout { position: fixed; z-index: 300; width: 360px; display: grid; gap: var(--ik-s-3); padding: var(--ik-s-4); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), 0 6px 0 color-mix(in srgb, var(--ik-ink) 55%, transparent); }
.ik-vc-callout__quote { margin: 0; color: var(--ik-text-2); font: 400 13px/1.45 var(--ik-font-body); max-height: 4.4em; overflow: hidden; }
.ik-vc-callout__quote:not(:empty)::before { content: "said there: “"; } .ik-vc-callout__quote:not(:empty)::after { content: "”"; }
.ik-vc-callout__actions { display: flex; justify-content: flex-end; gap: var(--ik-s-2); padding-bottom: 3px; }
.ik-vc-notes { display: grid; gap: 6px; padding: var(--ik-s-3); border-radius: var(--ik-r-md); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-vc-notes[hidden] { display: none; }
.ik-vc-notes__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ik-s-3); }
.ik-vc-notes__text { font: 400 13px/1.4 var(--ik-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Lanes (DESIGN.md §32) ── one time axis, several lanes: a step timing, a Gantt chart, swim lanes. Inkline.lanes(el, spec) or data-ui="lanes".
   Kinds are told by fill and outline, never by colour: bar = outline, say = solid, key = the one marker, milestone = a diamond. ── */
.ik-lanes { --ik-lanes-head: 170px; --ik-lanes-row: 46px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ik-s-5); min-width: 0; }
.ik-lanes.has-stage { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
@media (max-width: 860px) { .ik-lanes.has-stage { grid-template-columns: minmax(0, 1fr); } }
.ik-lanes.has-stage.is-narrow { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .ik-lanes { --ik-lanes-head: 104px; } }
.ik-lanes__stage { display: grid; justify-items: center; align-content: start; gap: 10px; padding: var(--ik-s-5); border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 1px var(--ik-rule); text-align: center; }
.ik-lanes__presence { width: 160px; height: 160px; }
.ik-lanes__state { font: 600 var(--ik-fs-label)/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); min-height: 14px; }
.ik-lanes__clock { font: 800 34px/1 var(--ik-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ik-lanes__clock small { font-size: 14px; font-weight: 600; color: var(--ik-text-2); }
.ik-lanes__say { margin: 0; min-height: 4.5em; max-width: 34ch; font-size: 16px; line-height: 1.5; }
.ik-lanes__say .is-you { display: block; margin-bottom: 6px; color: var(--ik-text-2); font-size: 14px; }
.ik-lanes__bar { display: flex; align-items: center; gap: 12px; }
.ik-lanes__time { font: 700 15px/1 var(--ik-font-display); font-variant-numeric: tabular-nums; color: var(--ik-text-2); }
.ik-lanes__time small { font-size: 12px; }
.ik-lanes__chart { min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 14px 16px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 1px var(--ik-rule); }
.ik-lanes__inner { position: relative; min-width: var(--ik-lanes-min, 640px); }
.ik-lanes__marks { position: relative; margin-left: calc(var(--ik-lanes-head) + 12px); }
.ik-lanes__mark { position: absolute; padding-left: 6px; font-size: 11px; line-height: 18px; color: var(--ik-text-2); white-space: nowrap; box-shadow: inset 1px 0 0 var(--ik-line); }
.ik-lanes__mark b { margin-right: 5px; color: var(--ik-text); font: 700 13px var(--ik-font-display); font-variant-numeric: tabular-nums; }
.ik-lanes__mark.is-key { box-shadow: inset 2px 0 0 var(--ik-marker); } .ik-lanes__mark.is-key b { color: var(--ik-accent-text); }
.ik-lanes__lane { display: grid; grid-template-columns: var(--ik-lanes-head) minmax(0, 1fr); gap: 12px; align-items: center; min-height: var(--ik-lanes-row); box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-lanes__head { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.25 var(--ik-font-body); }
.ik-lanes__head small { display: block; font-weight: 400; font-size: 12px; color: var(--ik-text-2); }
.ik-lanes__head .ik-avatar { flex: none; }
.ik-lanes__track { position: relative; height: var(--ik-lanes-row); }
.ik-lanes__item { position: absolute; top: 50%; height: 24px; margin-top: -12px; padding: 0 8px; border-radius: 6px; background: var(--ik-surface-2); color: var(--ik-text); box-shadow: inset 0 0 0 1px var(--ik-line); font: 500 11.5px/24px var(--ik-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left center; transition: box-shadow var(--ik-quick); }
.ik-lanes__item.is-say { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-lanes__item.is-key { box-shadow: inset 0 0 0 1.5px var(--ik-marker); }
.ik-lanes__item.is-live:not(.is-say):not(.is-key) { box-shadow: inset 0 0 0 1.5px var(--ik-text); }
.ik-lanes__item.is-out { overflow: visible; }
.ik-lanes__item.is-out .ik-lanes__label { position: absolute; left: calc(100% + 6px); color: var(--ik-text-2); }
.ik-lanes__label { position: relative; }
.ik-lanes__done { position: absolute; inset: 0 auto 0 0; background: var(--ik-fill-2); border-radius: inherit; }
.ik-lanes__item.is-milestone { padding: 0 0 0 16px; margin-left: -6px; background: none; box-shadow: none; overflow: visible; font-weight: 600; }
.ik-lanes__item.is-milestone::before { content: ""; position: absolute; left: 1px; top: 6.5px; width: 10px; height: 10px; border-radius: 2px; background: var(--ik-text); transform: rotate(45deg); }
.ik-lanes__item.is-milestone.is-key::before { background: var(--ik-marker); }
.ik-lanes__axis { position: relative; height: 22px; margin-left: calc(var(--ik-lanes-head) + 12px); box-shadow: inset 0 1px 0 var(--ik-rule); font-size: 11px; color: var(--ik-text-3); font-variant-numeric: tabular-nums; }
.ik-lanes__axis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.ik-lanes__axis span.is-first { transform: none; } .ik-lanes__axis span.is-last { transform: translateX(-100%); }
.ik-lanes__plot { position: absolute; top: 0; bottom: 22px; left: calc(var(--ik-lanes-head) + 12px); right: 0; pointer-events: none; }
.ik-lanes__vline { position: absolute; bottom: 0; width: 0; border-left: 1px dashed var(--ik-line); }
.ik-lanes__now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--ik-marker); }
.ik-lanes__now::before { content: attr(data-label); position: absolute; top: -2px; left: 5px; font: 600 10px/1 var(--ik-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ik-accent-text); white-space: nowrap; }
.ik-lanes__playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ik-marker); opacity: 0; transition: opacity var(--ik-quick); }
.ik-lanes.is-playing .ik-lanes__playhead { opacity: 1; }
.ik-lanes__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ik-lanes__links path { fill: none; stroke: var(--ik-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ik-lanes__links path.ik-lanes__tip { stroke-dasharray: none; }
.ik-lanes__links path.is-handoff { stroke: var(--ik-text); stroke-width: 1.6; }
.ik-lanes__links path.is-hidden { visibility: hidden; }
.ik-lanes.is-reveal .ik-lanes__item:not(.is-in) { transform: scaleX(0); }
.ik-lanes.is-reveal .ik-lanes__item.is-milestone:not(.is-in) { transform: scale(0); }
/* Gantt: outlined bars, done is filled in, dependencies are arrows, today is the marker */
.ik-lanes--gantt .ik-lanes__item { background: transparent; }
/* swim lanes: who owns each step (an avatar per lane), steps as cards in columns, a hand-off arrow when work changes lanes */
.ik-lanes--swim { --ik-lanes-row: 68px; }
.ik-lanes--swim .ik-lanes__lane:nth-of-type(even) .ik-lanes__track { background: var(--ik-fill); border-radius: var(--ik-r-sm); }
.ik-lanes--swim .ik-lanes__item { display: flex; align-items: center; height: 44px; margin-top: -22px; padding: 0 10px; border-radius: var(--ik-r-md); background: var(--ik-bg); font-size: 12.5px; line-height: 1.25; white-space: normal; transform-origin: center; }
.ik-lanes--swim.is-reveal .ik-lanes__item:not(.is-in) { transform: scale(0); }

/* ── Holista (DESIGN.md §24) ─ the presence, the mood chip, and the output system: file · location · info · alarm · stat · source · session · list ──
   Flat ink surfaces, hairline outlines, one marker. Types are told apart by glyph + label, never by colour. The deck is flat ink at scrim strength, never a blur. */
.ik-holo-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ik-holo-shape { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; overflow: visible; }
.ik-holo-shape.is-on { fill: currentColor; }

/* presence: the boxed line */
.ik-holo-presence { display: block; width: 112px; height: 112px; }
.ik-holo-presence--hero { width: 100%; height: 132px; }

/* running (§24 · Running): what she has going, stacked above her presence — a helper, a shell command, a monitor,
   a Claude session working or asking. One hairline pill each: a glyph for the kind (never a colour), the name, the time.
   The session that asks you is the one marker. Chips spring in and out; nothing blinks; the most important sits nearest her. */
.ik-holo-run { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; max-width: 260px; pointer-events: none; }
.ik-holo-run__item { pointer-events: auto; display: grid; grid-template-columns: 14px minmax(0, auto) auto; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding: 0 12px 0 10px;
  border: 0; border-radius: var(--ik-r-pill); background: var(--ik-bg); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line);
  font: 500 13px/1 var(--ik-font-body); text-align: left; transform-origin: right center; animation: ik-holo-run-in var(--ik-press) both; transition: opacity var(--ik-quick), transform var(--ik-press); }
button.ik-holo-run__item { cursor: pointer; }
button.ik-holo-run__item:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); }
.ik-holo-run__item:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 2px; }
.ik-holo-run__glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ik-holo-run__label { min-width: 0; max-width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ik-holo-run__meta { color: var(--ik-text-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-holo-run__item--asks { background: var(--ik-marker); color: var(--ik-ink); box-shadow: 0 2px 0 var(--ik-marker-deep); }
.ik-holo-run__item--asks .ik-holo-run__meta { color: var(--ik-ink); }
.ik-holo-run__item.is-done .ik-holo-run__meta { color: var(--ik-text); }
.ik-holo-run__item.is-out { opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none; }
.ik-holo-run__more { pointer-events: auto; padding: 0 10px; color: var(--ik-text-2); font: 500 12px/22px var(--ik-font-body); }
@keyframes ik-holo-run-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* mood chip: a box with a dot where the feeling sits (→ valence, ↑ arousal), and the word for it */
.ik-holo-mood { display: inline-flex; align-items: center; gap: 8px; color: var(--ik-text); }
.ik-holo-mood svg { width: 28px; height: 28px; flex: none; }
.ik-holo-mood rect { fill: none; stroke: var(--ik-line); stroke-width: 1; }
.ik-holo-mood .ax { stroke: var(--ik-rule); stroke-width: 1; fill: none; }
.ik-holo-mood circle { fill: var(--ik-text); transition: cx var(--ik-soft), cy var(--ik-soft); }
.ik-holo-mood b { font: 700 13px/1 var(--ik-font-display); letter-spacing: -.01em; }

/* a card is a fly-out: it arrives from the presence (bottom right) on a soft spring */
.ik-holo-card { position: relative; display: grid; gap: var(--ik-s-3); padding: var(--ik-s-4); border-radius: var(--ik-r-lg); background: var(--ik-surface); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float); transform-origin: 100% 100%; min-width: 0; transition: box-shadow var(--ik-soft), transform var(--ik-soft); }
.ik-holo-card:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float-up); }
.ik-holo-card.is-in { animation: ik-holo-fly var(--ik-fly) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ik-holo-card.is-out { animation: ik-holo-away 220ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes ik-holo-fly { from { opacity: 0; transform: translate(var(--fx, 36px), var(--fy, 64px)) scale(.62); } to { opacity: 1; transform: none; } }
@keyframes ik-holo-away { to { opacity: 0; transform: translate(24px, 24px) scale(.9); } }
.ik-holo-card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--ik-s-3); }
.ik-holo-kind { display: inline-flex; align-items: center; gap: 8px; color: var(--ik-text-2); font: 600 10.5px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-holo-kind .ik-holo-ic { width: 18px; height: 18px; }
.ik-holo-x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; border: 0; border-radius: var(--ik-r-btn); background: transparent; color: var(--ik-text-3); transition: background var(--ik-quick), color var(--ik-quick); }
.ik-holo-x .ik-holo-ic { width: 16px; height: 16px; }
.ik-holo-x:hover { background: var(--ik-fill); color: var(--ik-text); }
.ik-holo-x:active { background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-holo-title { margin: 0; font: 700 20px/1.15 var(--ik-font-display); letter-spacing: var(--ik-track-heading); word-break: break-word; }
.ik-holo-body { display: grid; gap: var(--ik-s-3); min-width: 0; }
.ik-holo-card > footer { display: flex; flex-wrap: wrap; gap: var(--ik-s-2); }
.ik-holo-text { margin: 0; font: 400 15px/1.5 var(--ik-font-body); white-space: pre-wrap; word-break: break-word; }
.ik-holo-note { margin: 0; color: var(--ik-text-2); font-size: 13.5px; line-height: 1.45; }
.ik-holo-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ik-text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ik-holo-meta .is-ask { color: var(--ik-text); font-weight: 600; }

/* locations: a path is told as a breadcrumb, the type by its glyph and label */
.ik-holo-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--ik-text-2); font-size: 12.5px; }
.ik-holo-path i { font-style: normal; color: var(--ik-text-3); }
.ik-holo-path .is-last { color: var(--ik-text); font-weight: 600; }
.ik-holo-path.is-big { font-size: 14px; }
.ik-holo-url { font-size: 14px; font-weight: 600; word-break: break-all; }
.ik-holo-place { display: grid; grid-template-columns: 40px 1fr; gap: var(--ik-s-3); align-items: center; }
.ik-holo-place > .ik-holo-ic { width: 40px; height: 40px; stroke-width: .9; color: var(--ik-text); }

/* files: a preview, never a screenshot of a window */
.ik-holo-preview { position: relative; display: grid; place-items: center; min-height: 120px; max-height: 340px; overflow: hidden; border-radius: var(--ik-r-md); background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); }
.ik-holo-preview img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.ik-holo-preview.is-text { place-items: start; padding: var(--ik-s-3) var(--ik-s-4); overflow: auto; user-select: text; }
.ik-holo-preview pre { margin: 0; font: 400 13px/1.5 var(--ik-font-body); white-space: pre-wrap; word-break: break-word; }
.ik-holo-preview.is-code pre { font-size: 12px; line-height: 1.55; white-space: pre; word-break: normal; }
.ik-holo-preview.is-empty { color: var(--ik-text-3); gap: 6px; align-content: center; font-size: 12.5px; }
.ik-holo-preview.is-empty .ik-holo-ic { width: 36px; height: 36px; stroke-width: .9; }
.ik-holo-more { position: absolute; right: 12px; bottom: 8px; color: var(--ik-text-3); }

/* info boxes: five tones, told by glyph and label (a quote is set larger and quieter) */
.ik-holo-card--info[data-tone="fact"] .ik-holo-kind { color: var(--ik-text); }
.ik-holo-card--info[data-tone="tip"] { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), var(--ik-float); }
.ik-holo-card--info[data-tone="definition"] .ik-holo-text { font-family: var(--ik-font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.ik-holo-text.is-quote { font: 600 20px/1.3 var(--ik-font-display); letter-spacing: -.015em; }
.ik-holo-by { color: var(--ik-text-2); font-size: 13px; }

/* alarms: watch (outline) · warning (firmer line) · urgent (the marker; the one accent) */
.ik-holo-card--alarm[data-level="warn"] { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text), inset 0 3px 0 var(--ik-text), var(--ik-float); }
.ik-holo-card--alarm[data-level="urgent"] { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-marker), inset 0 3px 0 var(--ik-marker), var(--ik-float); }
.ik-holo-card--alarm[data-level="urgent"] .ik-holo-kind { color: var(--ik-ink); background: var(--ik-marker); padding: 5px 8px; border-radius: var(--ik-r-xs); margin: -2px 0; }
.ik-holo-card--alarm[data-level="urgent"] .ik-holo-ic { animation: ik-holo-ring 1.6s var(--ik-soft) infinite; transform-origin: 50% 12%; }
@keyframes ik-holo-ring { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-14deg); } 70% { transform: rotate(12deg); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(4deg); } }
.ik-holo-when { display: flex; align-items: center; gap: 8px; color: var(--ik-text-2); }
.ik-holo-when .ik-holo-ic { width: 18px; height: 18px; }
.ik-holo-when b { font: 800 26px/1 var(--ik-font-display); letter-spacing: var(--ik-track-display); color: var(--ik-text); font-variant-numeric: tabular-nums; }

/* figures */
.ik-holo-big { font: 800 56px/.95 var(--ik-font-display); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-holo-statlabel { color: var(--ik-text-2); font: 600 11px/1.3 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-holo-delta { font: 700 15px/1 var(--ik-font-display); }
.ik-holo-spark { width: 100%; height: 34px; overflow: visible; }
.ik-holo-spark path { fill: none; stroke: var(--ik-text-2); stroke-width: var(--ik-stroke-line, 1.5); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ik-holo-spark path.d { stroke: var(--ik-text); stroke-width: 6px; } /* the end dot: a zero-length round stroke stays a true circle under preserveAspectRatio=none */

/* sources */
.ik-holo-refs { list-style: none; margin: 0; padding: 0; display: grid; }
.ik-holo-refs li + li { box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-holo-refs button { display: grid; grid-template-columns: 22px 1fr; gap: 10px; width: 100%; padding: 9px 0; border: 0; background: none; color: var(--ik-text); text-align: left; cursor: pointer; }
.ik-holo-refs .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); font: 700 11px/1 var(--ik-font-display); color: var(--ik-text-2); }
.ik-holo-refs .t { display: grid; gap: 1px; min-width: 0; }
.ik-holo-refs b { font: 600 14px/1.3 var(--ik-font-body); }
.ik-holo-refs small { color: var(--ik-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-holo-refs button:hover b { text-decoration: underline; text-decoration-color: var(--ik-marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* sessions & lists */
.ik-holo-sess { display: flex; align-items: center; gap: 8px; color: var(--ik-text-2); font-size: 13.5px; }
.ik-holo-sess .d { color: var(--ik-text-3); }
.ik-holo-items { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: it; }
.ik-holo-items li { counter-increment: it; display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 0; font-size: 14.5px; }
.ik-holo-items li + li { box-shadow: inset 0 1px 0 var(--ik-rule); }
.ik-holo-items li::before { content: counter(it); color: var(--ik-text-3); font: 700 13px/1.5 var(--ik-font-display); font-variant-numeric: tabular-nums; }

/* the deck: flat ink scrim, cards fly out of the presence. fly = a column beside her · full = she takes the screen */
.ik-holo-scrim { position: absolute; inset: 0; background: transparent; /* the screen behind stays visible: depth comes from the cards' shadows (--ik-float), not a veil */ animation: ik-holo-fade var(--ik-quick) both; }
@keyframes ik-holo-fade { from { opacity: 0; } to { opacity: 1; } }
.ik-holo-deck { display: grid; gap: var(--ik-s-3); align-content: end; }
.ik-holo-deck--full { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; align-items: start; grid-auto-flow: dense; gap: var(--ik-s-4); }
.ik-holo-deck--full .ik-holo-card--file { grid-column: span 2; }
.ik-holo-deck--full .ik-holo-card--file .ik-holo-preview { max-height: 44vh; }
.ik-holo-deck--full .ik-holo-card--file .ik-holo-preview img { max-height: 44vh; }
.ik-holo-caption { margin: 0; max-width: 34ch; font: 700 clamp(22px, 2.4vw, 34px)/1.15 var(--ik-font-display); letter-spacing: var(--ik-track-heading); text-wrap: balance; }
.ik-holo-bars { display: flex; align-items: center; gap: 3px; height: 40px; }
.ik-holo-bars i { display: block; width: 3px; height: 4px; border-radius: 2px; background: var(--ik-text-2); }
@media (prefers-reduced-motion: reduce) { .ik-holo-card.is-in, .ik-holo-card.is-out, .ik-holo-card--alarm[data-level="urgent"] .ik-holo-ic { animation: none; } }

/* ── Holista whiteboard & alignment (DESIGN.md §24) ── she draws while she talks: outlines are traced in the marker, then settle to paper ── */
.ik-holo-card--board { padding: var(--ik-s-4) var(--ik-s-5) var(--ik-s-5); }
.ik-holo-deck--full .ik-holo-card--board { grid-column: 1 / -1; }
.ik-holo-board { position: relative; border-radius: var(--ik-r-md); background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); overflow: hidden; }
.ik-holo-board__svg { display: block; width: 100%; height: auto; max-height: var(--ik-board-max, 64vh); }
.ik-holo-board__note { position: absolute; right: 22px; top: 14px; font-size: 28px; pointer-events: none; }
.ik-holo-board__svg .bn .trace { fill: none; stroke: var(--ik-marker); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; stroke-linejoin: round; }
.ik-holo-board__svg .bn.go .trace { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ik-trace-ease, cubic-bezier(.3, .7, .2, 1)); }
.ik-holo-board__svg .bn.done .trace { stroke: var(--ik-text-2); stroke-width: 1.5; transition: stroke var(--ik-quick), stroke-width var(--ik-quick); }
.ik-holo-board__svg .bn .lab { font: 700 20px var(--ik-font-display); letter-spacing: -.02em; fill: var(--ik-text); }
.ik-holo-board__svg .bn .sub { font: 400 13px var(--ik-font-body); fill: var(--ik-text-2); }
.ik-holo-board__svg .bn .ico { fill: none; stroke: var(--ik-text); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ik-holo-board__svg .bn .lab, .ik-holo-board__svg .bn .sub, .ik-holo-board__svg .bn .ico { opacity: 0; }
.ik-holo-board__svg .bn.go .lab, .ik-holo-board__svg .bn.go .sub, .ik-holo-board__svg .bn.go .ico { opacity: 1; transition: opacity 420ms 380ms; }
.ik-holo-board__svg .be .trace { fill: none; stroke: var(--ik-marker); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.ik-holo-board__svg .be.go .trace { stroke-dashoffset: 0; transition: stroke-dashoffset 820ms var(--ik-trace-ease, cubic-bezier(.3, .7, .2, 1)); }
.ik-holo-board__svg .be.done .trace { stroke: var(--ik-text-2); stroke-width: 1.5; transition: stroke var(--ik-quick), stroke-width var(--ik-quick); }
.ik-holo-board__svg .be .arrow { fill: none; stroke: var(--ik-text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ik-holo-board__svg .be.go .arrow { opacity: 1; transition: opacity 220ms 700ms; }
.ik-holo-board__svg .be .el { font: 500 12.5px var(--ik-font-body); fill: var(--ik-text-2); paint-order: stroke; stroke: var(--ik-bg); stroke-width: 7px; stroke-linejoin: round; opacity: 0; }
.ik-holo-board__svg .be.go .el { opacity: 1; transition: opacity 420ms 520ms; }
@media (prefers-reduced-motion: reduce) { .ik-holo-board__svg .bn .trace, .ik-holo-board__svg .be .trace { stroke-dashoffset: 0; transition: none; } .ik-holo-board__svg .bn .lab, .ik-holo-board__svg .bn .sub, .ik-holo-board__svg .bn .ico, .ik-holo-board__svg .be .el, .ik-holo-board__svg .be .arrow { opacity: 1; transition: none; } }

.ik-holo-align { display: grid; gap: 14px; }
.ik-holo-align .row { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.ik-holo-align .ic { display: inline-flex; color: var(--ik-text); }
.ik-holo-align .ic .ik-holo-ic { width: 20px; height: 20px; }
.ik-holo-align b { font: 700 14px/1 var(--ik-font-display); letter-spacing: -.01em; }
.ik-holo-align svg:not(.ik-holo-ic) { width: 100%; height: 22px; overflow: visible; }
.ik-holo-align .rest { fill: none; stroke: var(--ik-text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ik-holo-align .rest.dotted { stroke-dasharray: 1 7; }
.ik-holo-align .done { fill: none; stroke: var(--ik-text); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ik-holo-align .is-weakest .done { stroke: var(--ik-marker); }
.ik-holo-align .n { text-align: right; font: 800 18px/1 var(--ik-font-display); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-holo-align .is-unmeasured b, .ik-holo-align .is-unmeasured .n, .ik-holo-align .is-unmeasured .ic { color: var(--ik-text-3); }

/* ── Offers (DESIGN.md §25): the way up, impossible to miss and still INKLINE. Every offer is an ink slab in either theme
   (add .ik-on-ink), the brand's line breathing behind it and running straight into the one marker button, a countdown
   that rolls to a real moment, and what is inside in real numbers. Flat: hairlines, hard steps, no glow, no gradient. ── */
.ik-countdown { display: inline-flex; align-items: flex-start; gap: 10px; font-variant-numeric: tabular-nums; }
.ik-countdown__unit { display: grid; justify-items: center; gap: 7px; }
.ik-countdown__num { display: flex; gap: 3px; }
.ik-countdown__digit { position: relative; display: grid; width: 0.74em; height: 1.18em; overflow: hidden; border-radius: 9px; background: var(--ik-surface-2); color: var(--ik-text); font: 800 44px/1 var(--ik-font-display); letter-spacing: -0.02em; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: background var(--ik-quick), color var(--ik-quick); }
.ik-countdown__digit > span { grid-area: 1 / 1; display: grid; place-items: center; }
.ik-countdown__digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--ik-hair); background: var(--ik-bg); opacity: .85; } /* the seam of a flip clock, flat */
.ik-countdown__label { color: var(--ik-text-2); font: 600 10px/1 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-countdown.is-last .ik-countdown__digit { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; } /* the last day: the tiles turn to chalk */
.ik-countdown.is-last .ik-countdown__digit::after { background: var(--ik-on-solid); opacity: .25; }
.ik-countdown--sm { gap: 7px; }
/* the shape before it ticks (DESIGN principle 8): an empty clock already holds its height, so nothing under it jumps when
   the tiles arrive (a press aimed at the button below would land on the jump) */
.ik-countdown:empty { min-height: 69px; }
.ik-countdown--sm:empty { min-height: 46px; }
.ik-countdown--lg:empty { min-height: calc(clamp(40px, 6vw, 60px) * 1.15 + 19px); }
.ik-countdown--inline:empty, .ik-countdown--words:empty { min-height: 0; }
.ik-countdown--sm .ik-countdown__digit { font-size: 26px; border-radius: 7px; }
.ik-countdown--sm .ik-countdown__unit { gap: 5px; }
.ik-countdown--lg .ik-countdown__digit { font-size: clamp(40px, 6vw, 60px); border-radius: 11px; }
.ik-countdown--inline { display: inline-flex; align-items: baseline; gap: 0; font: 700 1em/1 var(--ik-font-display); letter-spacing: -0.01em; }
.ik-countdown--inline .ik-countdown__unit { display: inline-flex; align-items: baseline; gap: 0; }
.ik-countdown--inline .ik-countdown__num { gap: 0; }
.ik-countdown--inline .ik-countdown__digit { width: 0.6em; height: 1.15em; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; }
.ik-countdown--inline .ik-countdown__digit::after { display: none; }
.ik-countdown--inline .ik-countdown__label { margin-right: .25em; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
.ik-countdown--inline .ik-countdown__sep { opacity: .5; }
.ik-countdown--inline.is-last { color: var(--ik-text); text-decoration: underline 1.5px; text-underline-offset: 4px; }
/* UI-13 · the countdown in words: "Starts in 2 h 5 min" → "Live now" (the marker) → "It has ended" */
.ik-countdown--words { display: inline; font: inherit; font-variant-numeric: tabular-nums; }
.ik-countdown--words[data-state="live"] { color: var(--ik-accent-text); font-weight: 600; }
.ik-countdown--words[data-state="ended"] { color: var(--ik-text-2); }

.ik-offerline { display: block; pointer-events: none; }
.ik-offerline svg { display: block; overflow: visible; }
.ik-offerline path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ik-offerline__line { stroke: var(--ik-text); stroke-width: 2.25; opacity: .92; }
.ik-offerline__ghost { stroke: var(--ik-text-2); stroke-width: 1.5; opacity: .14; }
.ik-offerline__dot { fill: var(--ik-text); }

.ik-roll { position: relative; display: grid; min-width: 0; overflow: hidden; }
.ik-roll__item { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-width: 0; opacity: 0; }
.ik-roll__item.is-on, .ik-roll:not(:has(.is-on)) > .ik-roll__item:first-child { opacity: 1; }
.ik-roll__item .ik-icon { flex: none; width: 18px; height: 18px; color: var(--ik-text-2); }
.ik-roll__item b { font: 800 1.12em/1 var(--ik-font-display); letter-spacing: -0.02em; color: var(--ik-text); }

/* the offer banner: top of the page, above everything, one per screen. It lays itself out by its own width
   (a container), so it holds in a narrow column as well as on a phone. */
.ik-offer { position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-wrap: wrap; gap: var(--ik-s-6) var(--ik-s-7); padding: 28px 28px 28px 32px; border-radius: var(--ik-r-xl); overflow: hidden; }
.ik-offer::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-offer > .ik-offerline { position: absolute; inset: 0; z-index: -1; }
.ik-offer__main { flex: 1 1 24rem; display: grid; align-content: start; gap: 12px; max-width: 35rem; min-width: 0; }
.ik-offer__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--ik-text-2); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-offer__kicker b { color: var(--ik-text); font-weight: 600; }
.ik-offer__pulse { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ik-text); }
.ik-offer__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ik-text); opacity: 0; animation: ik-offer-pulse 2.4s cubic-bezier(.2, .9, .25, 1) infinite; }
@keyframes ik-offer-pulse { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ik-offer__pulse::after { animation: none; } }
.ik-offer__title { margin: 0; font: 800 clamp(32px, 4.4vw, 54px)/0.98 var(--ik-font-display); letter-spacing: -0.038em; text-wrap: balance; }
.ik-offer__title s, .ik-offermodal__price s, .ik-plan__price s { color: var(--ik-text-3); font-weight: 700; text-decoration-thickness: .07em; }
.ik-offer__title s { font-size: .62em; margin-left: .12em; }
.ik-offer__text { margin: 0; color: var(--ik-text-2); font: 400 16px/1.5 var(--ik-font-body); max-width: 33rem; }
.ik-offer__text b { color: var(--ik-text); font-weight: 600; }
.ik-offer__roll { margin-top: 4px; font: 500 15px/1.5 var(--ik-font-body); color: var(--ik-text-2); }
.ik-offer__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ik-text-2); font: 500 14px/1.35 var(--ik-font-body); }
.ik-offer__proof b { color: var(--ik-text); font-weight: 700; }
.ik-offer .ik-crowd, .ik-offermodal .ik-crowd { width: 216px; max-width: 100%; } /* a crowd fills the width it is given: give it one, or it shrinks to a face */
.ik-offer .ik-crowd > .ik-avatar, .ik-offer .ik-crowd__more { width: 30px; height: 30px; box-shadow: 0 0 0 2.5px var(--ik-bg); }
.ik-offermodal .ik-crowd > .ik-avatar, .ik-offermodal .ik-crowd__more { box-shadow: 0 0 0 2.5px var(--ik-surface); }
.ik-offer__side { flex: 1 0 auto; display: grid; align-content: space-between; justify-items: end; gap: 22px; min-width: 0; }
.ik-offer__clock { display: grid; justify-items: end; gap: 10px; }
.ik-offer__clocklabel { color: var(--ik-text-2); font: 600 11px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; text-align: right; }
.ik-offer__act { display: grid; justify-items: end; gap: 10px; padding-bottom: var(--ik-sink); }
.ik-offer__cta { white-space: nowrap; } /* the one marker: the offer line runs into its left edge */
.ik-offer__note { color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); text-align: right; }
.ik-offer__close { position: absolute; top: 10px; right: 10px; z-index: 3; }
.ik-offer:has(.ik-offer__close) .ik-offer__clock { padding-right: 34px; }
@container (max-width: 760px) {
  .ik-offer__side { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
  .ik-offer__clock, .ik-offer__act { justify-items: start; }
  .ik-offer__clocklabel, .ik-offer__note { text-align: left; }
  .ik-offer__clock { padding-right: 0 !important; }
  .ik-offer__main { max-width: none; padding-right: 30px; }
}
@container (max-width: 520px) {
  .ik-offer__act, .ik-offer__act .ik-btn { width: 100%; }
  .ik-offer__act .ik-btn { justify-content: center; }
  .ik-offer .ik-countdown__digit { font-size: 32px; }
  .ik-offer__text, .ik-offer__main > .ik-not { display: none; } /* narrow: the title, what is inside, the clock and the button — the banner stays a banner */
  .ik-offer__title { font-size: 30px; }
}
@media (max-width: 760px) { .ik-offer { padding: 22px 18px 20px; gap: 18px; } }
/* slim: the same offer folded to one line — it shrinks, it never goes away */
.ik-offer--slim { container-type: normal; align-items: center; gap: 8px 16px; padding: 9px 9px 9px 18px; border-radius: var(--ik-r-lg); }
.ik-offer--slim .ik-offer__text { flex: 1 1 260px; max-width: none; color: var(--ik-text); font: 500 15px/1.4 var(--ik-font-body); }
.ik-offer--slim .ik-offer__text .ik-countdown--inline { font-size: 1.05em; }
.ik-offer--slim .ik-offer__act { display: flex; align-items: center; gap: 4px; padding-bottom: 0; width: auto; }
.ik-offer--slim .ik-offer__act .ik-btn { width: auto; }
.ik-offer--slim .ik-offer__close { position: static; }
@media (max-width: 760px) { .ik-offer--slim { padding: 10px 8px 10px 14px; gap: 8px 12px; } }
/* rail offer: the way up, always in view — a compact card in the side rail directly above the account row (first
   child of .ik-app__foot), for free members only. A quiet line on top (__kicker; in the welcome week a clock to the
   window's end in __clock, an --inline countdown; after it one sentence in __text), then __cta: the one marker button
   of the rail (icon + a word) to the plans. The nav's current item is a solid fill, so the two never fight.
   Folded rail (<html data-ik-rail>): the card falls away and the button stands alone, 48px square, its word a tooltip
   (data-rail-tip). Phones have no rail: --page is the same card at the top of the More page, text left, button
   right; the offer banner stays the always-visible piece there. */
.ik-railoffer { display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }   /* uses the rail's whole width: generous padding, the clock as the one big thing, the button at full size */
.ik-railoffer__kicker { display: block; color: var(--ik-text-2); font: 600 11px/1.3 var(--ik-font-body); letter-spacing: .06em; text-transform: uppercase; }
.ik-railoffer__kicker b { color: var(--ik-marker); font-weight: 700; }
.ik-railoffer__clock { display: block; min-height: 1em; margin-top: 2px; color: var(--ik-text); font: 700 26px/1 var(--ik-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ik-railoffer__clock .ik-countdown--inline { font-size: inherit; }
.ik-railoffer__price { margin: 0; color: var(--ik-text-2); font: 500 13px/1.4 var(--ik-font-body); }   /* what the clock is about: the price now, the price after */
.ik-railoffer__price b { color: var(--ik-text); font-weight: 700; }
.ik-railoffer__price s { color: var(--ik-text-2); text-decoration-thickness: var(--ik-hair); }
.ik-railoffer__text { margin: 0; color: var(--ik-text-2); font: 500 14px/1.4 var(--ik-font-body); text-wrap: pretty; }
.ik-railoffer__text b { color: var(--ik-text); font-weight: 700; }
.ik-railoffer__cta { width: 100%; margin-top: 8px; }
.ik-railoffer__cta .ik-icon { width: 20px; height: 20px; }
.ik-railoffer--page { display: none; }
@media (min-width: 861px) {
  :root[data-ik-rail] .ik-railoffer { padding: 0; gap: 0; background: none; box-shadow: none; }
  :root[data-ik-rail] .ik-railoffer__kicker, :root[data-ik-rail] .ik-railoffer__clock, :root[data-ik-rail] .ik-railoffer__price, :root[data-ik-rail] .ik-railoffer__text, :root[data-ik-rail] .ik-railoffer__cta > span { display: none; }
  :root[data-ik-rail] .ik-railoffer__cta { width: 48px; height: 48px; padding: 0; margin-top: 0; }
  :root[data-ik-rail] .ik-railoffer__cta .ik-icon { width: 22px; height: 22px; }
}
@media (max-width: 860px) {
  .ik-railoffer--page { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: calc(100% - 2 * var(--ik-s-4)); max-width: 800px; margin: var(--ik-s-5) auto 0; }
  .ik-railoffer--page .ik-railoffer__cta { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .ik-railoffer--page .ik-railoffer__clock { font-size: 22px; }
  .ik-railoffer--page .ik-railoffer__cta { margin-top: 0; }
}

/* the offer dialog: the big one — the price on the line, what opens, who is already inside, why we are sure */
.ik-offermodal { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); width: min(1000px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--ik-r-xl); }
.ik-offermodal { outline: var(--ik-hair) solid var(--ik-outline); outline-offset: calc(-1 * var(--ik-hair)); } /* outlines paint above the content: the edge stays whole while the panel scrolls */
.ik-offermodal__close { position: absolute; top: 14px; right: 14px; z-index: 4; }
.ik-offermodal__stage { position: relative; isolation: isolate; grid-area: 1 / 1; display: grid; align-content: space-between; gap: 28px; min-height: 580px; padding: 34px 34px 30px; overflow: hidden; }
.ik-offermodal__stage > .ik-offerline { position: absolute; inset: 0; z-index: -1; }
.ik-offermodal__top { display: grid; gap: 14px; }
.ik-offermodal__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font: 800 clamp(76px, 11vw, 132px)/0.84 var(--ik-font-display); letter-spacing: -0.055em; }
.ik-offermodal__price s, .ik-offermodal__price small { font-size: .3em; letter-spacing: -0.02em; }
.ik-offermodal__price small { color: var(--ik-text-2); font-weight: 700; }
.ik-offermodal__save { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ik-text); font: 600 15px/1.35 var(--ik-font-body); }
.ik-offermodal__save span { display: inline-flex; align-items: center; gap: 6px; }
.ik-offermodal__save .ik-icon { width: 16px; height: 16px; color: var(--ik-text-2); }
.ik-offermodal__clock { display: grid; gap: 12px; justify-items: start; }
.ik-offermodal__clock .ik-offer__clocklabel { text-align: left; }
.ik-offermodal__body { grid-area: 1 / 2; display: grid; align-content: start; gap: 20px; padding: 34px; background: var(--ik-surface); box-shadow: inset var(--ik-hair) 0 0 var(--ik-rule); }
.ik-offermodal__title { margin: 0; padding-right: 30px; font: 800 clamp(26px, 3vw, 34px)/1.02 var(--ik-font-display); letter-spacing: -0.032em; text-wrap: balance; }
.ik-offermodal__gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ik-offermodal__get { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 15px; border-radius: var(--ik-r-md); background: var(--ik-fill); }
.ik-offermodal__get b { display: flex; align-items: center; gap: 8px; font: 800 30px/1 var(--ik-font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ik-offermodal__get b .ik-icon { width: 18px; height: 18px; color: var(--ik-text-2); }
.ik-offermodal__get span { color: var(--ik-text-2); font: 500 13.5px/1.35 var(--ik-font-body); }
.ik-offermodal__quote { position: relative; display: grid; gap: 10px; margin: 0; padding: 2px 0 2px 16px; box-shadow: inset 1.5px 0 0 var(--ik-text); }
.ik-offermodal__quote p { margin: 0; font: 600 17px/1.42 var(--ik-font-body); }
.ik-offermodal__quote footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); }
.ik-offermodal__quote .ik-hand { position: absolute; right: 0; top: -32px; font-size: 24px; }
/* a hand note on one card (who it is: "Tom & Paco" on the coaching) — top right, over the card's edge, never covering its words */
.ik-offermodal__get .ik-hand { position: absolute; right: 10px; top: -16px; font: 600 22px/1 var(--ik-font-hand); color: var(--ik-accent-text); pointer-events: none; } /* the card's own span rule (body font, text-2) must not win */
.ik-offermodal__actions { display: grid; gap: 12px; padding-bottom: var(--ik-sink); }
.ik-offermodal__actions > .ik-btn--marker { height: 58px; font-size: 18px; }
.ik-offermodal__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ik-offermodal__note { margin: 0; color: var(--ik-text-2); font: 500 13px/1.4 var(--ik-font-body); }
.ik-offermodal__note.is-error { color: var(--ik-accent-text); }
@media (max-width: 860px) {
  .ik-offermodal { grid-template-columns: minmax(0, 1fr); }
  .ik-offermodal__stage > .ik-offerline { display: none; }
  .ik-offermodal__top .ik-offer__kicker { padding-right: 40px; }
  .ik-offermodal__stage { min-height: 0; padding: 26px 20px 24px; gap: 22px; }
  .ik-offermodal__body { grid-area: 2 / 1; padding: 24px 20px 26px; box-shadow: inset 0 var(--ik-hair) 0 var(--ik-rule); }
  .ik-offermodal__title { padding-right: 0; }
  .ik-offermodal .ik-countdown__digit { font-size: 34px; }
}
@media (max-width: 560px) { .ik-modal:has(> .ik-offermodal), .ik-modal:has(> .ik-upgrade) { padding: 12px; } .ik-offermodal { max-height: calc(100dvh - 24px); } }
@media (max-width: 420px) { .ik-offermodal__gets { grid-template-columns: minmax(0, 1fr); } .ik-offermodal__get b { font-size: 26px; } }

/* the upgrade dialog, alive: its offer is an ink band with the countdown; what Free leaves out, in numbers */
.ik-upgrade__offer.ik-on-ink { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 14px 16px 14px 18px; gap: 10px 18px; border-radius: var(--ik-r-lg); background: var(--ik-ink); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font-size: 15px; }
@media (max-width: 640px) { .ik-upgrade__offer.ik-on-ink { grid-template-columns: minmax(0, 1fr); } .ik-upgrade__offer .ik-countdown { margin-left: 0; } }
.ik-upgrade__offer.ik-on-ink .ik-label { color: var(--ik-text-2); }
.ik-upgrade__offer .ik-countdown { margin-left: auto; }
.ik-upgrade__missing { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ik-upgrade__missing li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: var(--ik-r-pill); background: var(--ik-fill); color: var(--ik-text-2); font: 500 13.5px/1.2 var(--ik-font-body); }
.ik-upgrade__missing li .ik-icon { width: 15px; height: 15px; color: var(--ik-text-3); }
.ik-upgrade__missing b { color: var(--ik-text); font: 800 15px/1 var(--ik-font-display); letter-spacing: -0.02em; }
.ik-plan__save { color: var(--ik-text); font: 600 14px/1.35 var(--ik-font-body); }
.ik-plan__save small { display: block; color: var(--ik-text-2); font: 500 13px/1.35 var(--ik-font-body); }

/* ── Holista widgets (DESIGN.md §24) ── capture · dropzone · planner · calendar · poll · choice · scale · checklist · habits · document.
      Flat ink, hairlines, one marker per widget. Every press answers at once. ── */
.ik-holo-card--widget { padding: var(--ik-s-4); }
.ik-holo-q { margin: 0; font: 700 19px/1.25 var(--ik-font-display); letter-spacing: var(--ik-track-heading); }
.ik-holo-status { color: var(--ik-text-2); font-size: 12.5px; align-self: center; }
.ik-holo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-holo-chip { height: 28px; padding: 0 11px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text-2); font: 500 12.5px var(--ik-font-body); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick); }
.ik-holo-chip[aria-pressed="true"] { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-holo-cap { min-height: 84px; resize: none; font-size: 15px; user-select: text; }
.ik-holo-recent { display: grid; }
.ik-holo-recent .r { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; box-shadow: inset 0 1px 0 var(--ik-rule); animation: ik-holo-fade var(--ik-quick) both; }
.ik-holo-recent small { color: var(--ik-text-3); white-space: nowrap; }

.ik-holo-drop { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border-radius: var(--ik-r-lg); text-align: center; cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); transition: background var(--ik-quick), box-shadow var(--ik-quick); outline: none; }
.ik-holo-drop .ik-holo-ic { width: 38px; height: 38px; stroke-width: .9; color: var(--ik-text-2); }
.ik-holo-drop b { font: 700 17px var(--ik-font-display); } .ik-holo-drop small { color: var(--ik-text-2); font-size: 12.5px; }
.ik-holo-drop:hover, .ik-holo-drop:focus-visible { background: var(--ik-fill); }
.ik-holo-drop.is-over { background: var(--ik-fill-2); box-shadow: inset 0 0 0 2px var(--ik-marker); }
.ik-holo-files { display: grid; } .ik-holo-files .f { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; box-shadow: inset 0 1px 0 var(--ik-rule); animation: ik-holo-fade var(--ik-quick) both; }
.ik-holo-files small { color: var(--ik-text-2); text-align: right; }

/* planner */
.ik-holo-plan { display: grid; gap: var(--ik-s-3); }
.ik-holo-plan .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ik-holo-plan .nav { display: flex; align-items: center; gap: 4px; } .ik-holo-plan .nav b { font: 700 16px var(--ik-font-display); letter-spacing: -.01em; padding: 0 6px; }
.ik-holo-plan button, .ik-holo-cal button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.ik-holo-plan .nav button, .ik-holo-cal .bar button { width: 30px; height: 30px; border-radius: var(--ik-r-btn); display: inline-grid; place-items: center; color: var(--ik-text-2); transition: background var(--ik-quick); }
.ik-holo-plan .nav button:hover, .ik-holo-cal .bar button:hover { background: var(--ik-fill); color: var(--ik-text); }
.ik-holo-plan .nav .today { width: auto; padding: 0 10px; font: 600 12.5px var(--ik-font-body); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); border-radius: var(--ik-r-pill); height: 28px; margin-left: 4px; }
.ik-holo-plan .seg { display: inline-flex; padding: 3px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-holo-plan .seg button { height: 26px; padding: 0 12px; border-radius: var(--ik-r-pill); font: 600 12.5px var(--ik-font-body); color: var(--ik-text-2); transition: background var(--ik-quick), color var(--ik-quick); }
.ik-holo-plan .seg button[aria-selected="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-holo-plan .lb { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-holo-plan .wk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); }
.ik-holo-plan .wk .g { padding: 4px 10px; border-radius: var(--ik-r-pill); font-size: 12.5px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-holo-plan .wk .g.empty { width: 56px; height: 22px; box-shadow: none; border-bottom: 1px dotted var(--ik-line); border-radius: 0; }
.ik-holo-plan .cols { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 10px; align-items: start; }
.ik-holo-plan .cols[data-n="1"] { --cols: 1; } .ik-holo-plan .cols[data-n="3"] { --cols: 3; } .ik-holo-plan .cols[data-n="7"] { --cols: 7; }
.ik-holo-plan .day { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); min-height: 150px; transition: background var(--ik-quick), box-shadow var(--ik-quick); }
.ik-holo-plan .day.is-today { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); }
.ik-holo-plan .day.is-hot { background: var(--ik-fill-2); box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-plan .day > header { display: flex; align-items: baseline; gap: 6px; }
.ik-holo-plan .day > header b { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-holo-plan .day > header .dn { font: 800 22px/1 var(--ik-font-display); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-holo-plan .ld { margin-left: auto; width: 44px; height: 3px; background: var(--ik-rule); border-radius: 2px; position: relative; align-self: center; } .ik-holo-plan .ld u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ik-text); border-radius: 2px; transition: width var(--ik-soft); }
.ik-holo-plan .day.is-over .ld u { background: var(--ik-marker); }
.ik-holo-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ik-holo-plan .ev li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ik-text-2); padding: 4px 8px; border-radius: var(--ik-r-xs); background: var(--ik-fill); } .ik-holo-plan .ev time { font-variant-numeric: tabular-nums; color: var(--ik-text-3); }
.ik-holo-plan .t { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: var(--ik-r-xs); font-size: 13.5px; cursor: grab; transition: background var(--ik-quick); }
.ik-holo-plan .t:hover { background: var(--ik-fill); } .ik-holo-plan .t.is-drag { opacity: .4; }
.ik-holo-plan .t.is-done .tt { text-decoration: line-through; color: var(--ik-text-3); }
.ik-holo-plan .t.is-hl { box-shadow: inset 2px 0 0 var(--ik-marker); padding-left: 8px; }
.ik-holo-plan .t em { font-style: normal; color: var(--ik-text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ik-holo-plan .ck, .ik-holo-check .ck { width: 18px; height: 18px; border-radius: 5px; padding: 0; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); display: inline-grid; place-items: center; transition: background var(--ik-press); }
.ik-holo-plan .ck[aria-pressed="true"], .ik-holo-check .ck[aria-pressed="true"] { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-holo-plan .ck .ik-holo-ic, .ik-holo-check .ck .ik-holo-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ik-holo-plan .fl { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; color: var(--ik-text-3); opacity: 0; transition: opacity var(--ik-quick), color var(--ik-quick); border-radius: 6px; }
.ik-holo-plan .t:hover .fl, .ik-holo-plan .fl[aria-pressed="true"] { opacity: 1; } .ik-holo-plan .fl[aria-pressed="true"] { color: var(--ik-marker); } .ik-holo-plan .fl .ik-holo-ic { width: 15px; height: 15px; }
.ik-holo-plan .add input { min-height: 32px; padding: 5px 10px; font-size: 13px; border-radius: var(--ik-r-sm); }
.ik-holo-plan .hint { margin: 0; color: var(--ik-text-2); font-size: 12.5px; }
.ik-holo-plan .un { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ik-holo-plan .un .u { padding: 4px 10px; border-radius: var(--ik-r-pill); font-size: 12.5px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: grab; }
.ik-holo-plan .ft { display: flex; align-items: center; gap: 10px; } .ik-holo-plan .msg { color: var(--ik-text-2); font-size: 12.5px; }
.ik-holo-deck--full .ik-holo-card--widget[data-widget="planner"], .ik-holo-deck--full .ik-holo-card--widget[data-widget="calendar"] { grid-column: 1 / -1; }

/* calendar */
.ik-holo-cal { display: grid; gap: var(--ik-s-3); } .ik-holo-cal .bar { display: flex; align-items: center; justify-content: space-between; } .ik-holo-cal .bar b { font: 700 20px var(--ik-font-display); letter-spacing: var(--ik-track-heading); }
.ik-holo-cal .g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .ik-holo-cal .h { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-3); text-align: center; font-style: normal; }
.ik-holo-cal .c { display: grid; align-content: space-between; justify-items: start; min-height: 56px; padding: 6px 8px; border-radius: var(--ik-r-sm); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); text-align: left; transition: background var(--ik-quick); }
.ik-holo-cal .c:hover { background: var(--ik-fill); } .ik-holo-cal .c:active { background: var(--ik-fill-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-holo-cal .c.out { opacity: .35; } .ik-holo-cal .c.today { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); } .ik-holo-cal .c b { font: 700 14px var(--ik-font-display); font-variant-numeric: tabular-nums; }
.ik-holo-cal .c s { display: flex; gap: 3px; } .ik-holo-cal .c u { width: 5px; height: 5px; border-radius: 50%; background: var(--ik-text-2); } .ik-holo-cal .c.hl u:first-child { background: var(--ik-marker); }

/* poll, choice, scale */
.ik-holo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ik-holo-tiles .tile { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 104px; padding: 12px 8px; border: 0; border-radius: var(--ik-r-md); background: none; color: var(--ik-text); cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: transform var(--ik-press), box-shadow var(--ik-quick), opacity var(--ik-quick), background var(--ik-quick); }
.ik-holo-tiles .tile:hover { background: var(--ik-fill); } .ik-holo-tiles .tile:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line), inset 0 1px 0 var(--ik-pressed-edge); }
.ik-holo-tiles .tile.is-on { box-shadow: inset 0 0 0 2px var(--ik-text); background: var(--ik-fill-2); } .ik-holo-tiles .tile.is-off { opacity: .3; }
.ik-holo-tiles .tile .ik-holo-ic { width: 34px; height: 34px; stroke-width: 1.1; } .ik-holo-tiles .tile img { width: 100%; max-height: 90px; object-fit: cover; border-radius: var(--ik-r-sm); }
.ik-holo-tiles .tile b { font: 600 13.5px var(--ik-font-body); text-align: center; } .ik-holo-tiles .ltr { font: 800 32px/1 var(--ik-font-display); }
.ik-holo-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ik-holo-btns .ik-btn { height: 42px; }
.ik-holo-scale { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 8px; align-items: end; }
.ik-holo-scale button { display: grid; justify-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; color: var(--ik-text-2); cursor: pointer; border-radius: var(--ik-r-sm); transition: transform var(--ik-press), color var(--ik-quick); }
.ik-holo-scale button s { width: 100%; max-width: 38px; background: var(--ik-fill-2); border-radius: 4px; text-decoration: none; transition: background var(--ik-quick); }
.ik-holo-scale button:hover:not(:disabled) s { background: var(--ik-line); } .ik-holo-scale button:active:not(:disabled) { transform: scale(.94); }
.ik-holo-scale button.is-on s { background: var(--ik-text); } .ik-holo-scale button.is-on { color: var(--ik-text); } .ik-holo-scale b { font: 700 15px var(--ik-font-display); }
.ik-holo-ends { display: flex; justify-content: space-between; color: var(--ik-text-2); font-size: 12.5px; }

/* checklist, habits */
.ik-holo-check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 9px 4px; cursor: pointer; border-radius: var(--ik-r-xs); font-size: 14.5px; }
.ik-holo-check li + li { box-shadow: inset 0 1px 0 var(--ik-rule); } .ik-holo-check li:hover { background: var(--ik-fill); } .ik-holo-check li.is-done span { text-decoration: line-through; color: var(--ik-text-3); }
.ik-holo-check { margin: 0; padding: 0; list-style: none; }
.ik-holo-habits { display: grid; gap: 6px; } .ik-holo-habits .hd, .ik-holo-habits .hr { display: grid; grid-template-columns: minmax(80px, 1.4fr) repeat(7, 1fr); gap: 6px; align-items: center; }
.ik-holo-habits .hd i { font: 600 10.5px var(--ik-font-body); color: var(--ik-text-3); text-align: center; font-style: normal; } .ik-holo-habits .hd i.today { color: var(--ik-text); }
.ik-holo-habits .nm { font-weight: 600; font-size: 14px; }
.ik-holo-habits .d { height: 30px; border: 0; border-radius: var(--ik-r-sm); background: none; color: var(--ik-text); cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); display: grid; place-items: center; transition: background var(--ik-quick), transform var(--ik-press); }
.ik-holo-habits .d:active { transform: scale(.92); } .ik-holo-habits .d.done { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; } .ik-holo-habits .d.missed { color: var(--ik-text-3); background: var(--ik-fill); }
.ik-holo-habits .d .ik-holo-ic { width: 16px; height: 16px; stroke-width: 2.2; }

/* the document that is on its way: its shape first, never a spinner */
.ik-holo-skel { display: grid; gap: 10px; } .ik-holo-skel i { display: block; height: 11px; border-radius: 6px; background: var(--ik-fill-2); animation: ik-holo-breathe 1.8s ease-in-out infinite; } .ik-holo-skel .box { height: 150px; border-radius: var(--ik-r-md); background: var(--ik-fill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); animation: ik-holo-breathe 1.8s ease-in-out infinite .2s; }
@keyframes ik-holo-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ik-holo-lookup { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ik-holo-skel i, .ik-holo-skel .box { animation: none; } }

/* ── copy to clipboard: on every card, shown on hover or focus; a press answers at once ── */
.ik-holo-tools { display: inline-flex; align-items: center; gap: 2px; margin: -6px -6px -6px 0; }
.ik-holo-card > header .ik-holo-x { margin: 0; }
.ik-holo-copy { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--ik-r-btn); background: transparent; color: var(--ik-text-3); cursor: pointer; opacity: 0; transition: opacity var(--ik-quick), background var(--ik-quick), color var(--ik-quick); }
.ik-holo-copy .ik-holo-ic { width: 16px; height: 16px; }
.ik-holo-card:hover .ik-holo-copy, .ik-holo-card:focus-within .ik-holo-copy, .ik-holo-copy.is-done { opacity: 1; }
.ik-holo-copy:hover { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-copy:active { background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-holo-copy.is-done { color: var(--ik-text); }
@media (hover: none) { .ik-holo-copy { opacity: .7; } }

/* ── charts ── */
.ik-holo-chart { display: grid; gap: var(--ik-s-3); }
.ik-holo-chart__svg { width: 100%; height: auto; display: block; overflow: visible; color: var(--ik-text-2); }
.ik-holo-chart__svg .grid { stroke: var(--ik-rule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ik-holo-chart__svg .tick, .ik-holo-chart__svg .lab { font: 500 11.5px var(--ik-font-body); fill: var(--ik-text-2); }
.ik-holo-chart__svg .val, .ik-holo-chart__svg .pct { font: 700 12px var(--ik-font-display); fill: var(--ik-text); font-variant-numeric: tabular-nums; }
.ik-holo-chart__svg .pct { fill: var(--ik-bg); } .ik-holo-chart__svg .slice.s1 ~ .pct { fill: var(--ik-text); }
.ik-holo-chart__svg .big { font: 800 54px var(--ik-font-display); fill: var(--ik-text); letter-spacing: var(--ik-track-display); font-variant-numeric: tabular-nums; }
.ik-holo-chart__svg .bar { fill: var(--ik-text); stroke: var(--ik-text); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 100%; }
.ik-holo-chart__svg .bar.b1 { fill: none; } .ik-holo-chart__svg .bar.b2 { fill: url(#hatch1); color: var(--ik-text); } .ik-holo-chart__svg .bar.h { transform-origin: 0 50%; }
.ik-holo-chart__svg .bar.hi { fill: var(--ik-marker); stroke: var(--ik-marker); }
.ik-holo-chart__svg .ln { fill: none; stroke: var(--ik-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ik-holo-chart__svg .ln.l1 { stroke-dasharray: 7 5; } .ik-holo-chart__svg .ln.l2 { stroke-dasharray: 1.5 5; } .ik-holo-chart__svg .ln.rad { stroke-width: 1.8; }
.ik-holo-chart__svg .ln.gauge { stroke-width: 12; stroke: var(--ik-marker); stroke-dasharray: var(--from); stroke-dashoffset: var(--to); }
.ik-holo-chart__svg .fillarea { fill: var(--ik-fill); stroke: none; }
.ik-holo-chart__svg .pt { fill: var(--ik-bg); stroke: var(--ik-text); stroke-width: 2; vector-effect: non-scaling-stroke; } .ik-holo-chart__svg .pt.hi { fill: var(--ik-marker); stroke: var(--ik-marker); }
.ik-holo-chart__svg .slice { stroke: var(--ik-bg); stroke-width: 2; fill: var(--ik-text); } .ik-holo-chart__svg .slice.s1 { fill: var(--ik-text-3); } .ik-holo-chart__svg .slice.s2 { fill: url(#hatch1); color: var(--ik-text); stroke: var(--ik-text); stroke-width: 1; }
.ik-holo-chart__svg .slice.hi { fill: var(--ik-marker); } .ik-holo-chart__svg .swt.s0 { fill: var(--ik-text); } .ik-holo-chart__svg .swt.s1 { fill: var(--ik-text-3); } .ik-holo-chart__svg .swt.s2 { fill: url(#hatch1); color: var(--ik-text); stroke: var(--ik-text); stroke-width: 1; } .ik-holo-chart__svg .swt.hi { fill: var(--ik-marker); stroke: none; }
.ik-holo-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ik-text-2); } .ik-holo-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--ik-text); vertical-align: middle; margin-right: 7px; } .ik-holo-legend .k1 i { border-top-style: dashed; } .ik-holo-legend .k2 i { border-top-style: dotted; }
/* drawn as asked for: bars grow, lines trace, the pie sweeps, labels arrive after */
.is-draw .bar { animation: ik-holo-grow 560ms var(--ik-trace) both; animation-delay: var(--d, 0ms); }
.is-draw .ln:not(.gauge) { stroke-dasharray: 1; animation: ik-holo-trace 900ms var(--ik-trace) both; } .is-draw .ln.l1:not(.gauge) { stroke-dasharray: 1; }
.is-draw .ln.gauge { animation: ik-holo-gauge 900ms var(--ik-trace) both; }
.is-draw .pt { animation: ik-holo-pop var(--ik-press) both; animation-delay: var(--d, 700ms); }
.is-draw .sweepc { animation: ik-holo-trace 900ms var(--ik-trace) both; }
.is-draw .val, .is-draw .pct, .is-draw .leg { animation: ik-holo-fade var(--ik-quick) both; animation-delay: var(--d, 600ms); }
.is-draw .fillarea { animation: ik-holo-fade 700ms 500ms both; }
@keyframes ik-holo-grow { from { transform: scaleY(0); } to { transform: none; } }
.is-draw .bar.h { animation-name: ik-holo-growx; } @keyframes ik-holo-growx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ik-holo-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ik-holo-gauge { from { stroke-dashoffset: var(--from); } to { stroke-dashoffset: var(--to); } }
@keyframes ik-holo-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.ik-holo-chart__svg .pt { transform-box: fill-box; transform-origin: center; }
.ik-holo-card--widget[data-widget="chart"] .ik-holo-chart { min-width: 0; }
.ik-holo-deck--full .ik-holo-card--widget[data-widget="chart"] { grid-column: span 2; }
@media (prefers-reduced-motion: reduce) { .is-draw .bar, .is-draw .ln, .is-draw .pt, .is-draw .sweepc, .is-draw .val, .is-draw .pct, .is-draw .leg, .is-draw .fillarea { animation: none; } }

.is-still, .is-still * { animation: none !important; }

/* ── Holista: table · person · company (DESIGN.md §24 · Tables and files). Flat ink, hairlines, ONE marker (highlighted rows, the pivot's maximum, highlighted fields).
      Rows are told apart by glyphs and shapes, never colours. A table is a container: under 460px it becomes a compact card of three columns, no sideways scroll. ── */
.ik-holo-av { --s: 28px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; color: var(--ik-text); font: 700 calc(var(--s) * .38)/1 var(--ik-font-display); letter-spacing: -.01em; text-transform: uppercase; user-select: none; }
.ik-holo-av::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); pointer-events: none; }
.ik-holo-av.is-square { border-radius: calc(var(--s) * .22); }
.ik-holo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* <<holista-table-css */
.ik-holo-card--widget[data-widget="table"] { --tbl-h: 460px; }
.ik-holo-deck--full .ik-holo-card--widget[data-widget="table"] { --tbl-h: min(66vh, 720px); grid-column: 1 / -1; }
.ik-holo-deck--full .ik-holo-card--widget[data-widget="person"], .ik-holo-deck--full .ik-holo-card--widget[data-widget="company"] { grid-column: span 2; }
.ik-holo-tbl { container: tbl / inline-size; position: relative; display: grid; gap: 10px; min-width: 0; }
.ik-holo-tbl [hidden], .ik-holo-ent [hidden] { display: none !important; }
.ik-holo-tbl .ik-holo-ic { width: 14px; height: 14px; flex: none; }
.ik-holo-tbl :where(button:not(.ik-btn)) { font: inherit; color: inherit; }
.ik-holo-tbl.is-drop .lst { box-shadow: inset 0 0 0 2px var(--ik-marker); }
.ik-holo-tbl mark { background: var(--ik-fill-2); color: inherit; border-radius: 3px; box-shadow: inset 0 -1.5px 0 var(--ik-text); }
body.ik-holo-dragging { cursor: grabbing; user-select: none; }

/* views, toolbar, chips */
.ik-holo-tbl .vbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ik-holo-tbl .vtabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.ik-holo-tbl .vtabs::-webkit-scrollbar { display: none; }
.ik-holo-tbl .vt { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 4px 0 10px; border-radius: var(--ik-r-pill); color: var(--ik-text-2); font: 600 12.5px var(--ik-font-body); cursor: pointer; white-space: nowrap; user-select: none; outline: none; transition: background var(--ik-quick), color var(--ik-quick), transform var(--ik-press); }
.ik-holo-tbl .vt:hover { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-tbl .vt:focus-visible { box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-tbl .vt[aria-selected="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-holo-tbl .vt.is-drag { opacity: .7; box-shadow: var(--ik-float); }
.ik-holo-tbl .vt .vg .ik-holo-ic { width: 14px; height: 14px; }
.ik-holo-tbl .vt .vm { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--ik-r-pill); background: none; opacity: 0; cursor: pointer; transition: opacity var(--ik-quick), background var(--ik-quick); }
.ik-holo-tbl .vt:hover .vm, .ik-holo-tbl .vt[aria-selected="true"] .vm, .ik-holo-tbl .vt .vm:focus-visible { opacity: .8; } .ik-holo-tbl .vt .vm:hover { background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1; }
.ik-holo-tbl .vt .vr { width: 110px; height: 22px; border: 0; border-radius: 6px; background: var(--ik-surface); color: var(--ik-text); font: 600 12.5px var(--ik-font-body); padding: 0 6px; outline: 2px solid var(--ik-text); outline-offset: -1px; }
.ik-holo-tbl .vbar .vsel { display: none; flex: 1 1 auto; justify-content: space-between; min-width: 0; } .ik-holo-tbl .vsel span { overflow: hidden; text-overflow: ellipsis; }
.ik-holo-tbl .tb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ik-holo-tbl .tbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text-2); font: 600 12.5px var(--ik-font-body); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick), transform var(--ik-press); }
.ik-holo-tbl .tbtn.ico { width: 30px; padding: 0; } .ik-holo-tbl .vbar .tbtn.ico { box-shadow: none; }
.ik-holo-tbl .tbtn:hover:not(:disabled) { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-tbl .tbtn:active:not(:disabled) { transform: scale(.96); }
.ik-holo-tbl .tbtn:disabled { opacity: .35; cursor: default; } .ik-holo-tbl .tbtn:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 1px; }
.ik-holo-tbl .tbtn.is-on { background: var(--ik-fill-2); color: var(--ik-text); } .ik-holo-tbl .tbtn[aria-expanded="true"] { background: var(--ik-fill-2); color: var(--ik-text); }
.ik-holo-tbl .tbtn .bd { display: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ik-solid); color: var(--ik-on-solid); font: 700 10.5px/16px var(--ik-font-body); text-align: center; } .ik-holo-tbl .tbtn.is-on .bd { display: inline-block; }
.ik-holo-tbl .find { position: relative; display: block; flex: 1 1 150px; min-width: 120px; margin-left: auto; max-width: 280px; }
.ik-holo-tbl .find .ik-holo-ic { position: absolute; left: 11px; top: 50%; margin-top: -7px; color: var(--ik-text-3); pointer-events: none; }
.ik-holo-tbl .find input { min-height: 30px; height: 30px; padding: 0 12px 0 32px; font-size: 13px; }
.ik-holo-tbl .find input::-webkit-search-cancel-button { appearance: none; }
.ik-holo-tbl .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-holo-tbl .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px 0 11px; border: 0; border-radius: var(--ik-r-pill); background: var(--ik-fill); color: var(--ik-text); font: 500 12.5px var(--ik-font-body); cursor: pointer; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); transition: background var(--ik-quick), transform var(--ik-press); animation: ik-holo-fade var(--ik-quick) both; max-width: 100%; }
.ik-holo-tbl .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ik-holo-tbl .chip:hover { background: var(--ik-fill-2); } .ik-holo-tbl .chip:active { transform: scale(.95); }
.ik-holo-tbl .chip .ik-holo-ic { width: 11px; height: 11px; stroke-width: 2; color: var(--ik-text-2); }
.ik-holo-tbl .pkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ik-holo-tbl .pkrow label { display: inline-flex; align-items: center; gap: 6px; }
.ik-holo-tbl .pkrow label > span { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-holo-tbl .pkrow .ik-select, .ik-holo-tbl .pop .ik-select { width: auto; min-height: 30px; height: 30px; padding: 0 28px 0 10px; font-size: 13px; background-size: 16px; background-position: right 7px center; max-width: 180px; }
.ik-holo-tbl .pkrow .ik-select:disabled { opacity: .4; }

/* the grid */
.ik-holo-tbl .main { position: relative; display: grid; min-width: 0; }
.ik-holo-tbl.has-rec .main { min-height: 440px; }
.ik-holo-tbl .lst { border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); overflow: hidden; min-width: 0; }
.ik-holo-tbl .scroll { position: relative; max-height: var(--tbl-h, 460px); overflow: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; scrollbar-color: var(--ik-line) transparent; }
.ik-holo-tbl .scroll:focus-visible { outline: 2px solid var(--ik-text); outline-offset: -2px; }
.ik-holo-tbl .head { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: var(--tc); min-width: var(--minw); height: var(--head, 38px); align-items: stretch; background: var(--ik-surface); box-shadow: inset 0 -1px 0 var(--ik-line); }
.ik-holo-tbl .body { position: relative; min-width: var(--minw); }
.ik-holo-tbl .sumrow { position: sticky; bottom: 0; z-index: 6; display: grid; grid-template-columns: var(--tc); min-width: var(--minw); height: 34px; background: var(--ik-surface); box-shadow: inset 0 1px 0 var(--ik-line); }
.ik-holo-tbl .r { --rb: var(--ik-surface); --hl: 0 0 0 0 transparent; --cur: 0 0 0 0 transparent; position: absolute; top: 0; left: 0; right: 0; height: var(--row, 40px); display: grid; grid-template-columns: var(--tc); align-items: stretch; background: var(--rb); box-shadow: inset 0 -1px 0 var(--ik-rule), var(--hl), var(--cur); contain: layout style; }
.ik-holo-tbl .r.gh { height: var(--gh, 36px); --rb: color-mix(in srgb, var(--ik-surface) 92%, var(--ik-text)); cursor: pointer; }
@media (hover: hover) { .ik-holo-tbl .r:not(.gh):hover { --rb: color-mix(in srgb, var(--ik-surface) 94%, var(--ik-text)); } }
.ik-holo-tbl .r.is-sel { --rb: color-mix(in srgb, var(--ik-surface) 90%, var(--ik-text)); }
.ik-holo-tbl .r.is-hl { --hl: inset 3px 0 0 var(--ik-marker); }
.ik-holo-tbl .r.is-pulse { animation: ik-tbl-pulse 1.5s ease-out 1 both; }
@keyframes ik-tbl-pulse { 0% { background: color-mix(in srgb, var(--ik-marker) 24%, var(--ik-surface)); } 100% { background: var(--rb); } }
.ik-holo-tbl .c { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; overflow: hidden; white-space: nowrap; font: 400 13.5px/1.25 var(--ik-font-body); color: var(--ik-text); border-right: 1px solid var(--ik-rule); background: transparent; }
.ik-holo-tbl .c.fz { position: sticky; z-index: 2; background: var(--rb); } .ik-holo-tbl .head .c.fz { background: var(--ik-surface); z-index: 7; }
.ik-holo-tbl .c.fzl { border-right-color: var(--ik-line); }
.ik-holo-tbl .c > span:not(.ik-holo-av):not(.bar):not(.oc):not(.lc):not(.stars):not(.cb):not(.err):not(.th):not(.mk), .ik-holo-tbl .c > time, .ik-holo-tbl .c > .lnk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ik-holo-tbl[data-rh="l"] .r:not(.gh) .c, .ik-holo-tbl[data-rh="xl"] .r:not(.gh) .c { align-items: flex-start; padding-top: 10px; white-space: normal; line-height: 1.35; flex-wrap: wrap; align-content: flex-start; }
.ik-holo-tbl[data-rh="l"] .r:not(.gh) .c > span:not([class]), .ik-holo-tbl[data-rh="xl"] .r:not(.gh) .c > span:not([class]) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ik-holo-tbl[data-rh="xl"] .r:not(.gh) .c > span:not([class]) { -webkit-line-clamp: 4; }
.ik-holo-tbl .c.rn { position: sticky; left: 0; z-index: 3; display: grid; grid-template-columns: 14px 24px 22px; justify-content: start; align-items: center; gap: 0; padding: 0 0 0 4px; background: var(--rb); }
.ik-holo-tbl .c.rn .rg { grid-column: 1; display: inline-grid; place-items: center; height: 100%; color: var(--ik-text-3); opacity: 0; cursor: grab; } .ik-holo-tbl .c.rn .rg .ik-holo-ic { width: 12px; height: 12px; } .ik-holo-tbl .r:hover .rg { opacity: .8; } .ik-holo-tbl:not(.can-reorder) .rg { display: none; }
.ik-holo-tbl .head .c.rn { background: var(--ik-surface); z-index: 8; } .ik-holo-tbl .sumrow .c.rn { background: var(--ik-surface); }
.ik-holo-tbl .c.rn .rnum { grid-area: 1 / 2; text-align: center; color: var(--ik-text-3); font: 500 11.5px var(--ik-font-body); font-variant-numeric: tabular-nums; cursor: grab; }
.ik-holo-tbl .c.rn .ckb { grid-area: 1 / 2; opacity: 0; } .ik-holo-tbl .c.rn .exp { grid-area: 1 / 3; opacity: 0; }
.ik-holo-tbl .r:hover .rnum, .ik-holo-tbl .r.is-sel .rnum, .ik-holo-tbl .r:focus-within .rnum { opacity: 0; } .ik-holo-tbl .r:hover .ckb, .ik-holo-tbl .r.is-sel .ckb, .ik-holo-tbl .r:hover .exp, .ik-holo-tbl .r.is-sel .exp, .ik-holo-tbl .head .ckb { opacity: 1; }
@media (hover: none) { .ik-holo-tbl .c.rn .exp { opacity: .6; } }
.ik-holo-tbl .ckb { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; flex: none; transition: background var(--ik-press), opacity var(--ik-quick); justify-self: center; }
.ik-holo-tbl .ckb .ik-holo-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ik-holo-tbl .ckb[aria-checked="true"], .ik-holo-tbl .ckb[aria-checked="mixed"] { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-holo-tbl .exp { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ik-text-3); cursor: pointer; transition: opacity var(--ik-quick), color var(--ik-quick); } .ik-holo-tbl .exp:hover { color: var(--ik-text); background: var(--ik-fill-2); } .ik-holo-tbl .exp .ik-holo-ic { width: 13px; height: 13px; }
.ik-holo-tbl .c.num, .ik-holo-tbl .c.t-number, .ik-holo-tbl .c.t-currency, .ik-holo-tbl .c.t-percent, .ik-holo-tbl .c.t-formula:has(> .num) { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.ik-holo-tbl .c .nm { font-weight: 600; } .ik-holo-tbl .c .nil { color: var(--ik-text-3); }
.ik-holo-tbl .c.t-person .ik-holo-ic, .ik-holo-tbl .c.t-company .ik-holo-ic { color: var(--ik-text-3); }
.ik-holo-tbl .c time, .ik-holo-tbl .fv time { color: var(--ik-text-2); font-variant-numeric: tabular-nums; }
.ik-holo-tbl .c em, .ik-holo-tbl .fv em { font-style: normal; color: var(--ik-text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-holo-tbl .oc { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: 22px; padding: 0 9px 0 7px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font: 500 12.5px var(--ik-font-body); color: var(--ik-text); }
.ik-holo-tbl .oc > span { overflow: hidden; text-overflow: ellipsis; } .ik-holo-tbl .oc .ik-holo-shape { width: 10px; height: 10px; flex: none; }
.ik-holo-tbl .c .oc { cursor: pointer; } .ik-holo-tbl .c .oc:hover { background: var(--ik-fill-2); }
.ik-holo-tbl .lc { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: 24px; padding: 0 9px 0 3px; border-radius: var(--ik-r-pill); background: var(--ik-fill); font: 500 12.5px var(--ik-font-body); cursor: pointer; transition: background var(--ik-quick); }
.ik-holo-tbl .lc:hover { background: var(--ik-fill-2); } .ik-holo-tbl .lc > span:last-child { overflow: hidden; text-overflow: ellipsis; } .ik-holo-tbl .lc .ik-holo-av { --s: 18px; }
.ik-holo-tbl .stars { display: inline-flex; gap: 1px; } .ik-holo-tbl .stars i { display: inline-grid; place-items: center; cursor: pointer; color: var(--ik-text-3); line-height: 0; } .ik-holo-tbl .stars i .ik-holo-ic { width: 15px; height: 15px; stroke-width: 1.4; }
.ik-holo-tbl .stars i.on { color: var(--ik-text); } .ik-holo-tbl .stars i.on .ik-holo-ic { fill: currentColor; }
.ik-holo-tbl .cb { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; flex: none; } .ik-holo-tbl .cb.on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; } .ik-holo-tbl .cb .ik-holo-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ik-holo-tbl .err { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text-2); color: var(--ik-text-2); font: 600 11px var(--ik-font-body); letter-spacing: .02em; }
.ik-holo-tbl .th { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 5px; object-fit: cover; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); color: var(--ik-text-3); overflow: hidden; } .ik-holo-tbl .th .ik-holo-ic { width: 14px; height: 14px; }
.ik-holo-tbl .fn { font-size: 12.5px; color: var(--ik-text-2); overflow: hidden; text-overflow: ellipsis; }
.ik-holo-tbl .mk { display: inline-grid; place-items: center; width: 12px; flex: none; } .ik-holo-tbl .mk .ik-holo-shape { width: 10px; height: 10px; }
.ik-holo-tbl .lnk { padding: 0; border: 0; background: none; color: var(--ik-text); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; text-align: left; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ik-holo-tbl .lnk:hover { text-decoration-color: var(--ik-text); }
.ik-holo-tbl .bar { position: relative; flex: 1 1 auto; min-width: 26px; height: 6px; border-radius: 3px; background: var(--ik-rule); overflow: hidden; } .ik-holo-tbl .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ik-text); }
.ik-holo-tbl .c.t-progress em { flex: none; width: 30px; text-align: right; color: var(--ik-text-2); }

/* header cells, sort, resize, reorder, summaries, overlays */
.ik-holo-tbl .hc { position: relative; gap: 6px; padding: 0 4px 0 10px; color: var(--ik-text-2); font: 600 12.5px var(--ik-font-body); cursor: pointer; user-select: none; transition: background var(--ik-quick), color var(--ik-quick); }
.ik-holo-tbl .hc:hover { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-tbl .hc.is-drag { opacity: .45; }
.ik-holo-tbl .hc .ti .ik-holo-ic { width: 14px; height: 14px; opacity: .7; } .ik-holo-tbl .hc .hl { overflow: hidden; text-overflow: ellipsis; }
.ik-holo-tbl .hc .si { display: inline-flex; align-items: center; color: var(--ik-text); flex: none; } .ik-holo-tbl .hc .si .ik-holo-ic { width: 13px; height: 13px; stroke-width: 1.8; } .ik-holo-tbl .hc .si sup { font: 700 9px var(--ik-font-body); margin-left: 1px; }
.ik-holo-tbl .hc .hm { margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ik-text-3); opacity: 0; cursor: pointer; flex: none; } .ik-holo-tbl .hc:hover .hm, .ik-holo-tbl .hc .hm:focus-visible { opacity: 1; } .ik-holo-tbl .hc .hm:hover { background: var(--ik-fill-2); color: var(--ik-text); }
.ik-holo-tbl .hc .rz { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; } .ik-holo-tbl .hc .rz:hover, .ik-holo-tbl .head.is-resizing .rz { box-shadow: inset -2px 0 0 var(--ik-text); background: none; }
.ik-holo-tbl .dropcol { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ik-text); z-index: 9; pointer-events: none; }
.ik-holo-tbl .dropline { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ik-text); z-index: 5; pointer-events: none; }
.ik-holo-tbl .sc { padding: 0; } .ik-holo-tbl .sc .sb { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 0 10px; border: 0; background: none; cursor: pointer; text-align: left; justify-content: flex-end; font: 600 12.5px var(--ik-font-body); color: var(--ik-text); font-variant-numeric: tabular-nums; }
.ik-holo-tbl .sc .sl { font: 600 10px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-3); } .ik-holo-tbl .sc .hint { opacity: .55; transition: opacity var(--ik-quick); } .ik-holo-tbl .sc:hover .hint, .ik-holo-tbl .sc .sb:focus-visible .hint { opacity: 1; } .ik-holo-tbl .sc .sb:hover { background: var(--ik-fill); }
.ik-holo-tbl .selr, .ik-holo-tbl .selc, .ik-holo-tbl .fillh { position: absolute; left: 0; top: 0; pointer-events: none; }
.ik-holo-tbl .selr { z-index: 4; background: var(--ik-fill); box-shadow: inset 0 0 0 1px var(--ik-text-2); } .ik-holo-tbl .selc { z-index: 5; box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-tbl .fillh { z-index: 6; width: 10px; height: 10px; background: var(--ik-text); box-shadow: 0 0 0 2px var(--ik-surface); cursor: crosshair; pointer-events: auto; }
.ik-holo-tbl .ed { position: absolute; left: 0; top: 0; z-index: 7; border-radius: 0; min-height: 0; padding: 0 10px; background: var(--ik-surface); font: 400 13.5px var(--ik-font-body); box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-tbl .ed:focus { box-shadow: inset 0 0 0 2px var(--ik-text); }

/* group header rows */
.ik-holo-tbl .gh .c { height: 100%; } .ik-holo-tbl .gh .gl { grid-column: 2 / span 2; gap: 8px; border-right: 0; }
.ik-holo-tbl .gh .gl b { font: 700 14px var(--ik-font-display); letter-spacing: var(--ik-track-heading); overflow: hidden; text-overflow: ellipsis; } .ik-holo-tbl .gh .gl em { color: var(--ik-text-2); }
.ik-holo-tbl .gh .gl .ik-holo-shape { width: 11px; height: 11px; flex: none; }
.ik-holo-tbl .gh .gc .ik-holo-ic { transition: transform var(--ik-press); margin-left: 2px; } .ik-holo-tbl .gh[aria-expanded="false"] .gc .ik-holo-ic { transform: rotate(-90deg); }
.ik-holo-tbl .gh .ga { justify-content: flex-end; gap: 6px; } .ik-holo-tbl .gh .ga em { font: 600 10px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; } .ik-holo-tbl .gh .ga b { font: 700 13px var(--ik-font-display); }

/* add record, footer, toast, empty */
.ik-holo-tbl .addrow { position: sticky; left: 0; padding: 8px 10px; min-width: 0; width: max-content; max-width: 100%; } .ik-holo-tbl .addrow .ik-btn { gap: 6px; } .ik-holo-tbl .addrow .ik-holo-ic { width: 14px; height: 14px; }
.ik-holo-tbl .ft { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--ik-text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ik-holo-tbl .ft b { color: var(--ik-text); font-weight: 600; } .ik-holo-tbl .ft .cnt { flex: 1 1 auto; min-width: 0; } .ik-holo-tbl .ft .acts { display: inline-flex; gap: 6px; } .ik-holo-tbl .ft .acts .ik-holo-ic { width: 14px; height: 14px; margin-right: 4px; }
.ik-holo-tbl .empty { margin: 0; padding: 14px 4px; }
.ik-holo-tbl .toast { position: absolute; left: 50%; bottom: 40px; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--ik-r-pill); background: var(--ik-solid); color: var(--ik-on-solid); font: 600 13px var(--ik-font-body); box-shadow: var(--ik-float); transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 16px); }
.ik-holo-tbl .toast.is-in { animation: ik-tbl-toast var(--ik-fly) both; } @keyframes ik-tbl-toast { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
.ik-holo-tbl .toast .ik-btn { height: 30px; color: var(--ik-on-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ik-on-solid) 45%, transparent); }
.ik-holo-tbl.is-pending .ik-holo-skel i { height: 14px; }

/* popovers */
.ik-holo-tbl .pop { position: absolute; z-index: 30; min-width: 240px; max-width: min(440px, calc(100% - 8px)); max-height: 72vh; overflow: auto; padding: 12px; display: grid; gap: 10px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float); animation: ik-holo-fade var(--ik-quick) both; scrollbar-width: thin; }
.ik-holo-tbl .pop .ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ik-holo-tbl .pop .ph b { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); } .ik-holo-tbl .pop .pc { font-size: 12px; color: var(--ik-text-2); font-variant-numeric: tabular-nums; }
.ik-holo-tbl .pop .pf { display: flex; flex-wrap: wrap; gap: 6px; } .ik-holo-tbl .pop .ik-btn .ik-holo-ic { width: 14px; height: 14px; margin-right: 4px; } .ik-holo-tbl .pop .ik-btn { height: 30px; font-size: 13px; padding: 0 12px; }
.ik-holo-tbl .pop .ik-input { width: auto; min-height: 30px; height: 30px; padding: 0 10px; font-size: 13px; } .ik-holo-tbl .pop textarea.ik-textarea { width: 100%; min-height: 70px; font-size: 13.5px; padding: 8px 10px; }
.ik-holo-tbl .pop .rl { display: grid; gap: 8px; } .ik-holo-tbl .pop .fr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ik-holo-tbl .pop-filter { min-width: min(420px, calc(100% - 8px)); } .ik-holo-tbl .pop-filter .fr { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr) 26px; gap: 6px; align-items: center; } .ik-holo-tbl .pop-filter .fr .ik-select, .ik-holo-tbl .pop-filter .fr .ik-input { width: 100%; max-width: none; }
.ik-holo-tbl .pop-filter .fr .vv { grid-column: 2 / 4; min-width: 0; width: 100%; } .ik-holo-tbl .pop-filter .fr .vv:empty { display: none; } .ik-holo-tbl .pop-filter .fr .vv.two { display: flex; gap: 6px; } .ik-holo-tbl .pop-filter .fr .vv.two .ik-input { flex: 1 1 0; min-width: 0; } .ik-holo-tbl .pop-filter .fr .vv.opts { display: flex; flex-wrap: wrap; gap: 4px; } .ik-holo-tbl .pop-filter .fr .rm { grid-column: 4; grid-row: 1; }
.ik-holo-tbl .pop-filter .fr .cj { width: auto; } .ik-holo-tbl .pop-filter .fr select.cj { width: 100%; }
.ik-holo-tbl .pop .cj { width: 52px; flex: none; color: var(--ik-text-2); font-size: 12.5px; padding: 0; } .ik-holo-tbl .pop select.cj { width: 66px; padding-right: 22px; }
.ik-holo-tbl .pop .rm, .ik-holo-tbl .pop .grip { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-3); cursor: pointer; flex: none; } .ik-holo-tbl .pop .grip { cursor: grab; } .ik-holo-tbl .pop .rm:hover, .ik-holo-tbl .pop .grip:hover { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-tbl .pop .rm .ik-holo-ic { width: 12px; height: 12px; } .ik-holo-tbl .pop .grip .ik-holo-ic { width: 14px; height: 14px; }
.ik-holo-tbl .pop .is-drag { background: var(--ik-fill-2); box-shadow: var(--ik-float); border-radius: var(--ik-r-xs); position: relative; z-index: 2; }
.ik-holo-tbl .pop button.oc { cursor: pointer; height: 24px; background: none; } .ik-holo-tbl .pop button.oc.is-on { background: var(--ik-solid); color: var(--ik-on-solid); box-shadow: none; }
.ik-holo-tbl .pop .seg2 { display: inline-flex; padding: 2px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); } .ik-holo-tbl .pop .seg2 button { height: 24px; padding: 0 10px; border: 0; border-radius: var(--ik-r-pill); background: none; color: var(--ik-text-2); font: 600 12px var(--ik-font-body); cursor: pointer; } .ik-holo-tbl .pop .seg2 button[aria-pressed="true"] { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-holo-tbl .pop .fr .seg2 { margin-left: auto; }
.ik-holo-tbl .pop .sw { position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); cursor: pointer; transition: background var(--ik-press); } .ik-holo-tbl .pop .sw i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ik-text-3); transition: transform var(--ik-press), background var(--ik-quick); }
.ik-holo-tbl .pop .sw[aria-checked="true"] { background: var(--ik-solid); box-shadow: none; } .ik-holo-tbl .pop .sw[aria-checked="true"] i { transform: translateX(12px); background: var(--ik-on-solid); }
.ik-holo-tbl .pop-fields .fr { flex-wrap: nowrap; min-height: 32px; padding: 0 2px; border-radius: var(--ik-r-xs); } .ik-holo-tbl .pop-fields .fr .ti { color: var(--ik-text-3); display: inline-flex; } .ik-holo-tbl .pop-fields .fr .fl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ik-holo-tbl .pop-fields .fs { width: 100%; } .ik-holo-tbl .pop-fields .rl { max-height: 280px; overflow: auto; }
.ik-holo-tbl .pop .rhs { display: flex; gap: 6px; } .ik-holo-tbl .pop .rhs button { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border: 0; border-radius: var(--ik-r-sm); background: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-2); font: 600 11.5px var(--ik-font-body); cursor: pointer; } .ik-holo-tbl .pop .rhs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ik-text); color: var(--ik-text); }
.ik-holo-tbl .pop .rhg { display: block; width: 26px; height: var(--h); max-height: 22px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; }
.ik-holo-tbl .pop .fzs button { padding: 6px 4px; }
.ik-holo-tbl .pop-menu { padding: 6px; min-width: 210px; } .ik-holo-tbl .pop .menu { display: grid; } .ik-holo-tbl .pop .menu hr { border: 0; height: 1px; background: var(--ik-rule); margin: 4px 0; }
.ik-holo-tbl .pop .menu button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--ik-r-xs); background: none; color: var(--ik-text); font: 500 13.5px var(--ik-font-body); text-align: left; cursor: pointer; } .ik-holo-tbl .pop .menu button:hover:not(:disabled), .ik-holo-tbl .pop .menu button:focus-visible { background: var(--ik-fill); outline: none; } .ik-holo-tbl .pop .menu button:disabled { opacity: .35; cursor: default; }
.ik-holo-tbl .pop .menu button .ik-holo-ic { width: 15px; height: 15px; color: var(--ik-text-2); } .ik-holo-tbl .pop .menu button[aria-checked="true"] .ik-holo-ic { color: var(--ik-text); } .ik-holo-tbl .pop .menu .ph0 { width: 15px; flex: none; }
.ik-holo-tbl .pop-opts { padding: 8px; min-width: 220px; } .ik-holo-tbl .pop-opts .q { width: 100%; }
.ik-holo-tbl .pop .ol { display: grid; max-height: 250px; overflow: auto; }
.ik-holo-tbl .pop .oi { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--ik-r-xs); background: none; color: var(--ik-text); font: 500 13.5px var(--ik-font-body); text-align: left; cursor: pointer; } .ik-holo-tbl .pop .oi:hover, .ik-holo-tbl .pop .oi.is-hi { background: var(--ik-fill); } .ik-holo-tbl .pop .oi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ik-holo-tbl .pop .oi .ik-holo-ic { width: 14px; height: 14px; margin-left: auto; flex: none; } .ik-holo-tbl .pop .oi .ik-holo-shape { width: 11px; height: 11px; flex: none; } .ik-holo-tbl .pop .oi.new .ik-holo-ic { margin-left: 0; } .ik-holo-tbl .pop .oi.clr { color: var(--ik-text-2); }
.ik-holo-tbl .pop-long { min-width: 300px; } .ik-holo-tbl .pop-date { min-width: 270px; }
.ik-holo-tbl .pop .dn { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .ik-holo-tbl .pop .dn b { font: 700 14px var(--ik-font-display); } .ik-holo-tbl .pop .dn button { width: 28px; height: 28px; border: 0; border-radius: var(--ik-r-btn); background: none; cursor: pointer; display: grid; place-items: center; color: var(--ik-text-2); } .ik-holo-tbl .pop .dn button:hover { background: var(--ik-fill); } .ik-holo-tbl .pop .dn button:first-child .ik-holo-ic { transform: rotate(90deg); } .ik-holo-tbl .pop .dn button:last-child .ik-holo-ic { transform: rotate(-90deg); }
.ik-holo-tbl .pop .dw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ik-holo-tbl .pop .dw i { font: 600 10.5px var(--ik-font-body); color: var(--ik-text-3); text-align: center; font-style: normal; padding: 2px 0 4px; }
.ik-holo-tbl .pop .dd { height: 30px; border: 0; border-radius: var(--ik-r-xs); background: none; color: var(--ik-text); font: 500 13px var(--ik-font-body); cursor: pointer; font-variant-numeric: tabular-nums; } .ik-holo-tbl .pop .dd:hover { background: var(--ik-fill-2); } .ik-holo-tbl .pop .dd.out { color: var(--ik-text-3); } .ik-holo-tbl .pop .dd.today { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-text); } .ik-holo-tbl .pop .dd.on { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-holo-tbl .pop-field { min-width: 280px; } .ik-holo-tbl .pop .fe { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ik-text-2); } .ik-holo-tbl .pop .fe.col { display: grid; gap: 4px; } .ik-holo-tbl .pop .fe.col > span { font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; } .ik-holo-tbl .pop .fe.col .ik-input, .ik-holo-tbl .pop .fe.col .ik-select { width: 100%; max-width: none; }
.ik-holo-tbl .pop .fe.chk input { width: 16px; height: 16px; } .ik-holo-tbl .pop .fx-err { margin: 0; min-height: 0; color: var(--ik-text); font-size: 12.5px; font-weight: 600; } .ik-holo-tbl .pop .fx-err:not(:empty)::before { content: "▲ "; }
.ik-holo-tbl .pop .oe { display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) 26px; gap: 4px; align-items: center; } .ik-holo-tbl .pop .oe .gl { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: var(--ik-r-btn); background: none; cursor: pointer; color: var(--ik-text); } .ik-holo-tbl .pop .oe .gl:hover { background: var(--ik-fill); } .ik-holo-tbl .pop .opt-ed { max-height: 220px; gap: 4px; }
.ik-holo-tbl .pop-drill { min-width: 220px; }

/* the record panel */
.ik-holo-tbl .rec { outline: none; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float); animation: ik-tbl-rec var(--ik-fly) both; overflow: hidden; }
@keyframes ik-tbl-rec { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.ik-holo-tbl .rec > header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-holo-tbl .rec .rt { flex: 1; min-width: 0; font: 700 16px var(--ik-font-display); letter-spacing: var(--ik-track-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-holo-tbl .rec .rbtns { display: inline-flex; gap: 2px; } .ik-holo-tbl .rec .rbtns button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); cursor: pointer; } .ik-holo-tbl .rec .rbtns button:hover:not(:disabled) { background: var(--ik-fill); color: var(--ik-text); } .ik-holo-tbl .rec .rbtns button:disabled { opacity: .3; cursor: default; } .ik-holo-tbl .rec .rbtns button[data-r="prev"] .ik-holo-ic { transform: rotate(180deg); }
.ik-holo-tbl .rec .rb { overflow: auto; padding: 4px 16px 16px; scrollbar-width: thin; }
.ik-holo-tbl .rec dl { margin: 0; } .ik-holo-tbl .rec .rf { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--ik-rule); } .ik-holo-tbl .rec .rf.is-hid { opacity: .6; }
.ik-holo-tbl .rec dt { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 5px; color: var(--ik-text-2); font-size: 12.5px; } .ik-holo-tbl .rec dt .ti { display: inline-flex; color: var(--ik-text-3); }
.ik-holo-tbl .rec dd.fv { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; outline: none; min-width: 0; overflow-wrap: anywhere; } .ik-holo-tbl .rec dd.fv.can { cursor: text; } .ik-holo-tbl .rec dd.fv.can:hover { background: var(--ik-fill); } .ik-holo-tbl .rec dd.fv:focus-visible { box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-tbl .rec dd .ik-input { height: 30px; min-height: 30px; padding: 0 10px; font-size: 13.5px; } .ik-holo-tbl .rec dd .nil { color: var(--ik-text-3); } .ik-holo-tbl .rec .hh { margin: 14px 0 0; font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-3); }
.ik-holo-tbl .rec .actv h5 { margin: 18px 0 6px; font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); } .ik-holo-tbl .rec .actv ul { margin: 0 0 8px; padding: 0; list-style: none; } .ik-holo-tbl .rec .actv li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 7px 0; font-size: 13px; box-shadow: inset 0 -1px 0 var(--ik-rule); } .ik-holo-tbl .rec .actv time { color: var(--ik-text-3); font-size: 12px; }
.ik-holo-tbl .rec .cm { display: flex; gap: 6px; } .ik-holo-tbl .rec .cm .ik-input { flex: 1; }

/* kanban, gallery, calendar */
.ik-holo-tbl .alt { min-width: 0; }
.ik-holo-tbl .lanes { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.ik-holo-tbl .kl { flex: 0 0 264px; display: grid; gap: 8px; padding: 8px; border-radius: var(--ik-r-md); background: var(--ik-fill); scroll-snap-align: start; transition: box-shadow var(--ik-quick); }
.ik-holo-tbl .kl.is-over, .ik-holo-tbl .cd.is-over { box-shadow: inset 0 0 0 2px var(--ik-text); }
.ik-holo-tbl .kl > header { display: flex; align-items: center; gap: 8px; padding: 2px 4px; } .ik-holo-tbl .kl > header b { font: 700 14px var(--ik-font-display); letter-spacing: var(--ik-track-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ik-holo-tbl .kl > header em { font-style: normal; color: var(--ik-text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ik-holo-tbl .kl .lm .ik-holo-shape { width: 11px; height: 11px; } .ik-holo-tbl .kl .ls { margin-left: auto; font: 600 12px var(--ik-font-body); color: var(--ik-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-holo-tbl .kl .la { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-2); cursor: pointer; margin-left: auto; } .ik-holo-tbl .kl .ls ~ .la { margin-left: 0; } .ik-holo-tbl .kl .la:hover { background: var(--ik-fill-2); color: var(--ik-text); }
.ik-holo-tbl .kc { display: grid; gap: 8px; max-height: calc(var(--tbl-h, 460px) - 60px); overflow: auto; scrollbar-width: thin; align-content: start; }
.ik-holo-tbl .kcard, .ik-holo-tbl .gcard { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px 12px; border-radius: var(--ik-r-sm); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); cursor: grab; outline: none; transition: box-shadow var(--ik-quick), transform var(--ik-press); touch-action: none; }
.ik-holo-tbl .kcard:hover, .ik-holo-tbl .gcard:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); } .ik-holo-tbl .kcard:focus-visible, .ik-holo-tbl .gcard:focus-visible, .ik-holo-tbl .ce:focus-visible { box-shadow: inset 0 0 0 2px var(--ik-text); } .ik-holo-tbl .kcard.is-drag { opacity: .35; }
.ik-holo-tbl .gcard { cursor: pointer; touch-action: auto; }
.ik-holo-tbl .kcard h5, .ik-holo-tbl .gcard h5 { margin: 0; font: 600 13.5px/1.3 var(--ik-font-body); overflow-wrap: anywhere; }
.ik-holo-tbl .kf { display: grid; gap: 2px; } .ik-holo-tbl .kf .kl2 { font: 600 10px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-3); } .ik-holo-tbl .kf .kv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; min-width: 0; } .ik-holo-tbl .kf .kv .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.ik-holo-tbl .hlm { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ik-marker); } .ik-holo-tbl .gcard.is-hl, .ik-holo-tbl .ce.is-hl { box-shadow: inset 3px 0 0 var(--ik-marker), inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-holo-tbl .ghost { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: .96; box-shadow: var(--ik-float), inset 0 0 0 1px var(--ik-text-2); background: var(--ik-surface); border-radius: var(--ik-r-sm); }
.ik-holo-tbl .more { height: 30px; border: 0; border-radius: var(--ik-r-pill); background: none; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-2); font: 600 12.5px var(--ik-font-body); cursor: pointer; } .ik-holo-tbl .more:hover { background: var(--ik-fill); color: var(--ik-text); }
.ik-holo-tbl .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: var(--tbl-h, 460px); overflow: auto; padding: 2px; scrollbar-width: thin; }
.ik-holo-tbl .gcov { display: grid; place-items: center; height: 92px; margin: -10px -12px 4px; border-radius: var(--ik-r-sm) var(--ik-r-sm) 0 0; background: var(--ik-fill); overflow: hidden; } .ik-holo-tbl .gcov img { width: 100%; height: 100%; object-fit: cover; }
.ik-holo-tbl .cbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ik-holo-tbl .cbar b { font: 700 18px var(--ik-font-display); letter-spacing: var(--ik-track-heading); } .ik-holo-tbl .cbar span { display: inline-flex; gap: 4px; } .ik-holo-tbl .cbar .tbtn.ico { box-shadow: none; } .ik-holo-tbl .cbar [data-cm="-1"] .ik-holo-ic { transform: rotate(90deg); } .ik-holo-tbl .cbar [data-cm="1"] .ik-holo-ic { transform: rotate(-90deg); }
.ik-holo-tbl .cg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); overflow: hidden; } .ik-holo-tbl .cg .ch { padding: 6px 8px; font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-3); font-style: normal; box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-holo-tbl .cd { position: relative; display: grid; align-content: start; gap: 3px; min-height: 96px; padding: 6px; min-width: 0; box-shadow: inset -1px -1px 0 var(--ik-rule); transition: box-shadow var(--ik-quick); } .ik-holo-tbl .cd.out { background: var(--ik-fill); } .ik-holo-tbl .cd.out > b { opacity: .5; }
.ik-holo-tbl .cd > b { font: 700 12.5px var(--ik-font-display); font-variant-numeric: tabular-nums; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; } .ik-holo-tbl .cd.today > b { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-holo-tbl .ce { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--ik-fill); color: var(--ik-text); font: 500 12px var(--ik-font-body); text-align: left; cursor: grab; outline: none; transition: background var(--ik-quick); touch-action: none; } .ik-holo-tbl .ce:hover { background: var(--ik-fill-2); } .ik-holo-tbl .ce > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ik-holo-tbl .ce.is-drag { opacity: .35; } .ik-holo-tbl .ce .mk .ik-holo-shape { width: 9px; height: 9px; }
.ik-holo-tbl .cmore { height: 20px; padding: 0 6px; border: 0; background: none; color: var(--ik-text-2); font: 600 11.5px var(--ik-font-body); text-align: left; cursor: pointer; } .ik-holo-tbl .cmore:hover { color: var(--ik-text); }
.ik-holo-tbl .ca { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ik-text-3); opacity: 0; cursor: pointer; transition: opacity var(--ik-quick); } .ik-holo-tbl .cd:hover .ca, .ik-holo-tbl .ca:focus-visible { opacity: 1; } .ik-holo-tbl .ca:hover { background: var(--ik-fill-2); color: var(--ik-text); } .ik-holo-tbl .ca .ik-holo-ic { width: 12px; height: 12px; }

/* pivot: a matrix. Heat is the length of the bar under a number, never a colour; the marker is on the maximum (or on cells that hold a highlighted row). */
.ik-holo-tbl .pvw { max-height: var(--tbl-h, 460px); overflow: auto; border-radius: var(--ik-r-md); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-rule); outline: none; scrollbar-width: thin; scrollbar-color: var(--ik-line) transparent; }
.ik-holo-tbl .pvw:focus-visible { outline: 2px solid var(--ik-text); outline-offset: -2px; }
.ik-holo-tbl .pvt { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13.5px var(--ik-font-body); font-variant-numeric: tabular-nums; }
.ik-holo-tbl .pvt th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--ik-surface); color: var(--ik-text-2); font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; text-align: right; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--ik-rule); }
.ik-holo-tbl .pvt th:first-child { left: 0; z-index: 3; text-align: left; }
.ik-holo-tbl .pvt tbody th, .ik-holo-tbl .pvt tfoot th { position: sticky; left: 0; top: auto; z-index: 1; background: var(--ik-surface); color: var(--ik-text); font: 600 13.5px var(--ik-font-body); letter-spacing: 0; text-transform: none; text-align: left; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ik-holo-tbl .pvt tfoot th, .ik-holo-tbl .pvt tfoot td { position: sticky; bottom: 0; background: var(--ik-surface); box-shadow: inset 0 1px 0 var(--ik-line); }
.ik-holo-tbl .pvt td { position: relative; min-width: 62px; padding: 9px 12px 14px; text-align: right; box-shadow: inset 0 -1px 0 var(--ik-rule); cursor: pointer; transition: background var(--ik-quick); outline: none; }
.ik-holo-tbl .pvt td:hover, .ik-holo-tbl .pvt td:focus-visible { background: var(--ik-fill); }
.ik-holo-tbl .pvt td b { font: 700 14px var(--ik-font-display); }
.ik-holo-tbl .pvt td i { position: absolute; left: 12px; bottom: 6px; height: 3px; width: calc((100% - 24px) * var(--h, 0) / 100); border-radius: 2px; background: var(--ik-text-2); transition: width var(--ik-soft); }
.ik-holo-tbl .pvt td.nil::after { content: "·"; color: var(--ik-text-3); }
.ik-holo-tbl .pvt td.tt, .ik-holo-tbl .pvt th.tt { background: var(--ik-fill); cursor: default; } .ik-holo-tbl .pvt td.tt:hover { background: var(--ik-fill); }
.ik-holo-tbl .pvt tfoot td.tt, .ik-holo-tbl .pvt tfoot th { background: var(--ik-surface); }
.ik-holo-tbl .pvt td.is-max, .ik-holo-tbl .pvt td.is-hl { box-shadow: inset 0 0 0 2px var(--ik-marker); } .ik-holo-tbl .pvt td.is-max i, .ik-holo-tbl .pvt td.is-hl i { background: var(--ik-marker); }
.ik-holo-tbl .pvn { margin: 0; color: var(--ik-text-2); font-size: 12.5px; } .ik-holo-tbl .pvc { display: none; }

/* the compact card: 392px in the fly deck. Three columns, no sideways scroll. */
@container tbl (max-width: 460px) {
  .ik-holo-tbl .head, .ik-holo-tbl .r, .ik-holo-tbl .sumrow { grid-template-columns: var(--tc3); min-width: 0; }
  .ik-holo-tbl .head, .ik-holo-tbl .body, .ik-holo-tbl .sumrow { min-width: 0; }
  .ik-holo-tbl .scroll { overflow-x: hidden; } .ik-holo-tbl .sumrow { display: none; }
  .ik-holo-tbl .c[data-j]:not([data-j="0"]):not([data-j="1"]):not([data-j="2"]), .ik-holo-tbl .pvt [data-j]:not([data-j="0"]):not([data-j="1"]) { display: none; }
  .ik-holo-tbl .c.rn { grid-template-columns: 0 22px 20px; padding-left: 4px; } .ik-holo-tbl .pvt td { min-width: 0; } .ik-holo-tbl .pvt tbody th, .ik-holo-tbl .pvt tfoot th { max-width: 76px; }
  .ik-holo-tbl .c { padding: 0 6px; gap: 6px; } .ik-holo-tbl .c.fz { position: static; } .ik-holo-tbl .hc { padding-left: 6px; } .ik-holo-tbl .hc .ti { display: none; } .ik-holo-tbl .hc .hm { display: none; }
  .ik-holo-tbl .oc { padding: 0 7px 0 6px; gap: 5px; font-size: 12px; } .ik-holo-tbl .c .ik-holo-av { --s: 24px; }
  .ik-holo-tbl .vtabs { display: none; } .ik-holo-tbl .vbar .vsel { display: inline-flex; } .ik-holo-tbl .tb .tbtn:not(.ico) span { display: none; } .ik-holo-tbl .tb .tbtn { padding: 0 9px; } .ik-holo-tbl .find { flex-basis: 100%; max-width: none; margin-left: 0; order: 10; }
  .ik-holo-tbl .pvc { display: inline; } .ik-holo-tbl .pvt td, .ik-holo-tbl .pvt th { padding-left: 6px; padding-right: 6px; } .ik-holo-tbl .pvt td b { font-size: 13px; } .ik-holo-tbl .pvt td i { left: 6px; width: calc((100% - 12px) * var(--h, 0) / 100); }
  .ik-holo-tbl .rec { width: 100%; } .ik-holo-tbl .rec .rf { grid-template-columns: 1fr; gap: 0; } .ik-holo-tbl .rec dt { padding-top: 0; }
  .ik-holo-tbl .kl { flex-basis: 84%; } .ik-holo-tbl .cd { min-height: 64px; padding: 3px; } .ik-holo-tbl .ce { font-size: 11px; padding: 0 4px; } .ik-holo-tbl .ce .mk { display: none; } .ik-holo-tbl .cg .ch { padding: 4px; font-size: 9.5px; letter-spacing: .04em; }
  .ik-holo-tbl .pop { max-width: calc(100% - 8px); } .ik-holo-tbl .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ik-holo-tbl .r.is-pulse, .ik-holo-tbl .chip, .ik-holo-tbl .pop, .ik-holo-tbl .rec, .ik-holo-tbl .toast.is-in { animation: none; } }
/* holista-table-css>> */

/* person · company */
.ik-holo-ent .lnk { padding: 0; border: 0; background: none; color: var(--ik-text); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ik-line); text-underline-offset: 3px; text-align: left; } .ik-holo-ent .lnk:hover { text-decoration-color: var(--ik-text); }
.ik-holo-ent { container: ent / inline-size; display: grid; gap: var(--ik-s-4); min-width: 0; }
.ik-holo-ent .ik-holo-ic { width: 16px; height: 16px; flex: none; }
.ik-holo-ent .hd { display: flex; gap: var(--ik-s-4); align-items: flex-start; }
.ik-holo-ent .avw { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; cursor: pointer; outline: none; }
.ik-holo-ent[data-kind="company"] .avw { border-radius: 21px; }
.ik-holo-ent .avw .ik-holo-av { --s: 96px; }
.ik-holo-ent .avh { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; border-radius: inherit; background: color-mix(in srgb, var(--ik-bg) 74%, transparent); color: var(--ik-text); font: 600 10.5px/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--ik-quick); }
.ik-holo-ent .avw:hover .avh, .ik-holo-ent .avw:focus-visible .avh, .ik-holo-ent .avw.is-over .avh { opacity: 1; }
.ik-holo-ent .avw:focus-visible { outline: 2px solid var(--ik-text); outline-offset: 3px; }
.ik-holo-ent .avw.is-over { outline: 2px solid var(--ik-marker); outline-offset: 3px; }
.ik-holo-ent .id { display: grid; gap: 7px; align-content: start; min-width: 0; }
.ik-holo-ent .nm { margin: 0; font: 800 28px/1.05 var(--ik-font-display); letter-spacing: var(--ik-track-display); overflow-wrap: anywhere; }
.ik-holo-ent .sub { margin: 0; color: var(--ik-text-2); font-size: 14.5px; overflow-wrap: anywhere; } .ik-holo-ent .sub i { font-style: normal; color: var(--ik-text-3); margin: 0 2px; }
.ik-holo-ent .sub .lnk { color: var(--ik-text); font-weight: 600; }
.ik-holo-ent .tgs { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-holo-ent .gt { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--ik-r-pill); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font: 600 12px var(--ik-font-body); color: var(--ik-text); }
.ik-holo-ent .gt .ik-holo-ic { width: 13px; height: 13px; } .ik-holo-ent .gt .ik-holo-shape { width: 11px; height: 11px; }
.ik-holo-ent .gt.tag { padding-left: 10px; color: var(--ik-text-2); font-weight: 500; }
.ik-holo-ent .meta { margin: 0; color: var(--ik-text-2); font-size: 12.5px; } .ik-holo-ent .meta b { color: var(--ik-text); font-weight: 600; }
.ik-holo-ent .act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ik-holo-ent .act .ik-btn { gap: 7px; padding: 0 12px; } .ik-holo-ent .act .ik-btn:disabled { opacity: .35; pointer-events: none; } .ik-holo-ent .act .ik-btn.is-done { color: var(--ik-text); }
.ik-holo-ent .body2 { display: grid; gap: var(--ik-s-4); grid-template-columns: minmax(0, 1fr); }
.ik-holo-ent .colA, .ik-holo-ent .colB { display: grid; gap: var(--ik-s-4); align-content: start; min-width: 0; }
.ik-holo-ent .colB:empty, .ik-holo-ent .lks:empty { display: none; }
.ik-holo-ent .flds { display: grid; gap: 14px; align-content: start; }
.ik-holo-ent.is-pending .colA, .ik-holo-ent.is-pending .colB { display: none; } .ik-holo-ent:not(.is-pending) .sk { display: none; } .ik-holo-ent.is-pending .act .ik-btn:not([data-a="ask"]) { opacity: .35; pointer-events: none; }
@container ent (min-width: 640px) { .ik-holo-ent .body2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; } }
@container ent (max-width: 330px) { .ik-holo-ent .hd { flex-direction: column; } }
.ik-holo-ent .grp h5 { margin: 0 0 6px; font: 600 10.5px var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; color: var(--ik-text-2); }
.ik-holo-ent dl { margin: 0; display: grid; }
.ik-holo-ent .fr { display: grid; grid-template-columns: minmax(78px, 32%) minmax(0, 1fr); gap: 10px; align-items: center; min-height: 38px; padding: 0 8px; border-radius: var(--ik-r-xs); box-shadow: inset 0 -1px 0 var(--ik-rule); transition: background var(--ik-quick); }
.ik-holo-ent .fr dt { margin: 0; color: var(--ik-text-2); font-size: 12.5px; }
.ik-holo-ent .fr dd { margin: 0; display: flex; align-items: center; gap: 4px; min-width: 0; }
.ik-holo-ent .val { flex: 1 1 auto; min-width: 0; margin: 0 -6px; padding: 7px 6px; border: 0; border-radius: 6px; background: none; color: var(--ik-text); font: 400 14px/1.3 var(--ik-font-body); text-align: left; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-holo-ent .val.t-longtext { white-space: normal; }
.ik-holo-ent .val:hover { background: var(--ik-fill); } .ik-holo-ent .val:focus-visible { outline: 2px solid var(--ik-text); outline-offset: -2px; }
.ik-holo-ent .val .nil { color: var(--ik-text-3); }
.ik-holo-ent .go { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ik-r-btn); background: none; color: var(--ik-text-3); cursor: pointer; transition: background var(--ik-quick), color var(--ik-quick); }
.ik-holo-ent .go:hover, .ik-holo-ent .go:focus-visible { background: var(--ik-fill); color: var(--ik-text); outline: none; } .ik-holo-ent .go .ik-holo-ic { width: 15px; height: 15px; }
.ik-holo-ent .fr.is-hl { background: var(--ik-fill); box-shadow: inset 3px 0 0 var(--ik-marker), inset 0 -1px 0 var(--ik-rule); }
.ik-holo-ent .fr .ik-input, .ik-holo-ent .fr .ik-textarea { min-height: 34px; padding: 6px 10px; font-size: 14px; }
.ik-holo-ent .fr .ik-textarea { min-height: 70px; }
.ik-holo-ent .addw { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.ik-holo-ent .addf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; width: 100%; }
.ik-holo-ent .addf .ik-input, .ik-holo-ent .addf .ik-select { min-height: 34px; padding: 0 10px; font-size: 13.5px; } .ik-holo-ent .addf .ik-select { padding-right: 32px; background-size: 16px; background-position: right 8px center; }
.ik-holo-ent .nts textarea { min-height: 92px; font-size: 14px; }
.ik-holo-ent .ns { display: block; min-height: 18px; margin-top: 4px; }
.ik-holo-ent .plist, .ik-holo-ent .tlist, .ik-holo-ent .llist { margin: 0; padding: 0; list-style: none; display: grid; }
.ik-holo-ent .prow, .ik-holo-ent .lk { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 8px; border: 0; border-radius: var(--ik-r-xs); background: none; color: var(--ik-text); font: 500 14px var(--ik-font-body); text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 var(--ik-rule); transition: background var(--ik-quick); }
.ik-holo-ent .prow:hover, .ik-holo-ent .lk:hover { background: var(--ik-fill); } .ik-holo-ent .prow:focus-visible, .ik-holo-ent .lk:focus-visible { outline: 2px solid var(--ik-text); outline-offset: -2px; }
.ik-holo-ent .prow small { margin-left: auto; color: var(--ik-text-2); font-size: 12.5px; } .ik-holo-ent .lk .ik-holo-ic { color: var(--ik-text-2); } .ik-holo-ent .lk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-holo-ent .log { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; margin-bottom: 6px; }
.ik-holo-ent .log .ik-input, .ik-holo-ent .log .ik-select { min-height: 34px; padding: 0 10px; font-size: 13.5px; } .ik-holo-ent .log .ik-select { width: auto; padding-right: 32px; background-size: 16px; background-position: right 8px center; }
.ik-holo-ent .tlist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 4px; box-shadow: inset 0 -1px 0 var(--ik-rule); font-size: 13.5px; line-height: 1.35; animation: ik-holo-fade var(--ik-quick) both; }
.ik-holo-ent .tlist .ki { display: grid; place-items: center; height: 19px; color: var(--ik-text-2); } .ik-holo-ent .tlist .ki .ik-holo-ic { width: 16px; height: 16px; }
.ik-holo-ent .tlist time { color: var(--ik-text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; }
.ik-holo-ent .more { margin-top: 6px; }
.ik-holo-ent .ik-holo-skel i { height: 14px; }
@media (prefers-reduced-motion: reduce) { .ik-holo-ent .tlist li { animation: none; } }

/* ── Iteration 04 feedback (DESIGN.md §26): the framework one tool per row, X pictures and videos, the ICOR Alignment
   Check (onboarding), the alignment panel, versioned Growth Assignment notes with Holista's reading ── */
.ik-toolset__tools { flex-direction: column; align-items: flex-start; } /* one tool per row: its other boxes read as its own */

/* X: the tweet's picture or video inside the quote card (the words stay text; the media is the provider's file) */
.ik-quotecard__media { position: relative; display: block; overflow: hidden; border-radius: var(--ik-r-sm); background: var(--ik-ink); aspect-ratio: var(--ratio, 16 / 9); max-height: 70vh; }
.ik-quotecard__media img, .ik-quotecard__media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ik-quotecard__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); pointer-events: none; }
.ik-quotecard__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--ik-paper); color: var(--ik-ink); cursor: pointer; transition: transform var(--ik-press); }
.ik-quotecard__play:active { transform: scale(.94); }
.ik-quotecard__play .ik-icon { width: 24px; height: 24px; margin-left: 3px; }

/* a stage as a pill: its symbol and name (.is-main: the one the words touch most — solid, never orange) */
.ik-stagetag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: var(--ik-r-pill); background: var(--ik-fill); color: var(--ik-text); font: 600 12.5px/1 var(--ik-font-body); white-space: nowrap; }
.ik-stagetag .ik-stage { width: 16px; height: 16px; }
.ik-stagetag.is-main { background: var(--ik-solid); color: var(--ik-on-solid); }
.ik-stagetag small { color: inherit; opacity: .7; font-weight: 500; }

/* the ICOR Alignment Check: a calm full page — the question on the left, what Holista hears on the right, live */
.ik-onboard { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); background: var(--ik-bg); color: var(--ik-text); }
.ik-onboard__main { display: grid; align-content: start; gap: 28px; width: 100%; max-width: 780px; margin: 0 auto; padding: 36px clamp(20px, 6vw, 80px) 72px; }
.ik-onboard__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ik-onboard__steps { display: flex; flex: 1; gap: 6px; max-width: 360px; }
.ik-onboard__steps > i { flex: 1; height: 3px; border-radius: 2px; background: var(--ik-rule); transition: background var(--ik-quick); }
.ik-onboard__steps > i.is-done { background: var(--ik-text-2); }
.ik-onboard__steps > i.is-now { background: var(--ik-text); }
.ik-onboard__kicker { color: var(--ik-text-2); font: 600 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-onboard__title { margin: 0; font: 800 clamp(32px, 5vw, 52px)/1 var(--ik-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.ik-onboard__lede { margin: 0; max-width: 36rem; color: var(--ik-text-2); font: 400 17px/1.5 var(--ik-font-body); }
.ik-onboard__q { display: grid; gap: 14px; }
.ik-onboard__qtitle { margin: 0; font: 700 20px/1.3 var(--ik-font-display); letter-spacing: var(--ik-track-heading); text-wrap: pretty; }
.ik-onboard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: var(--ik-sink); }
.ik-onboard__aside { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: grid; align-content: start; gap: 24px; padding: 36px 26px; background: var(--ik-surface); box-shadow: inset var(--ik-hair) 0 0 var(--ik-rule); }
.ik-onboard__section { display: grid; gap: 12px; }
.ik-onboard__section > h3 { margin: 0; color: var(--ik-text-2); font: 600 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
@media (max-width: 1000px) { .ik-onboard { grid-template-columns: minmax(0, 1fr); } .ik-onboard__aside { position: static; height: auto; box-shadow: inset 0 var(--ik-hair) 0 var(--ik-rule); } }

/* the check asks with Holista's own widgets (§24): the poll tiles (.ik-holo-tiles, multiple choice) and the scale
   (.ik-holo-scale). Two additions for pages that render them without holista-widgets.js: INKLINE icons and stage
   symbols inside a tile, and the bar heights from --i (0…4) when no inline height is given. */
.ik-holo-tiles .tile .ik-icon, .ik-holo-tiles .tile .ik-stage { width: 30px; height: 30px; }
.ik-holo-tiles .tile small { color: var(--ik-text-2); font: 400 12px/1.3 var(--ik-font-body); text-align: center; }
.ik-holo-scale button s { min-height: calc(14px + var(--i, 0) * 6.5px); }

/* what Holista hears, live: one sentence and the stages the words touch */
.ik-heard { display: grid; gap: 10px; }
.ik-heard__line { margin: 0; font: 600 17px/1.4 var(--ik-font-body); text-wrap: pretty; transition: opacity var(--ik-quick); }
.ik-heard.is-listening .ik-heard__line { opacity: .55; }
.ik-heard__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* members in the same shoes, ahead on the journey: their own words about a win */
.ik-shoes { display: grid; gap: 10px; }
.ik-shoe { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--ik-r-md); background: var(--ik-bg); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: inherit; text-decoration: none; }
a.ik-shoe:hover { box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-line); }
.ik-shoe__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 600 14px/1.3 var(--ik-font-body); }
.ik-shoe__head small { color: var(--ik-text-2); font: 400 12.5px/1.3 var(--ik-font-body); }
.ik-shoe__text { margin: 4px 0 0; color: var(--ik-text-2); font: 400 14px/1.45 var(--ik-font-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ik-shoe__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

/* the alignment panel: the four stages now, the versions of the check, and which way each stage is moving */
.ik-alignpanel { display: grid; gap: 18px; padding: 22px 24px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-alignpanel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.ik-alignpanel__score { margin: 0; font: 800 46px/0.9 var(--ik-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ik-alignpanel__score small { margin-left: 6px; color: var(--ik-text-2); font: 500 15px/1 var(--ik-font-body); letter-spacing: 0; }
.ik-alignpanel__versions { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-alignpanel__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ik-alignpanel__fact { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--ik-r-md); background: var(--ik-fill); }
.ik-alignpanel__fact b { font: 800 22px/1 var(--ik-font-display); letter-spacing: -0.02em; }
.ik-alignpanel__fact span { color: var(--ik-text-2); font: 500 13px/1.35 var(--ik-font-body); }
.ik-alignpanel__note { margin: 0; color: var(--ik-text-2); font: 400 14px/1.5 var(--ik-font-body); }
/* direction since the last version: the arrow carries it (shape, not colour) */
.ik-holo-align--delta .row { grid-template-columns: 22px 64px minmax(0, 1fr) 34px 64px; }
.ik-holo-align .dl { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--ik-text-2); font: 600 12px/1 var(--ik-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ik-holo-align .dl.is-up { color: var(--ik-text); }

/* Growth Assignment notes, versioned: sealed versions (no longer editable) above the draft that saves as you type */
.ik-notevers { display: grid; gap: 10px; }
.ik-notever { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--ik-r-md); background: var(--ik-fill); }
.ik-notever__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ik-text-2); font: 600 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-notever__head .ik-icon { width: 14px; height: 14px; }
.ik-notever__text { margin: 0; white-space: pre-line; color: var(--ik-text); font: 400 15px/1.5 var(--ik-font-body); }
.ik-draftstate { color: var(--ik-text-3); font: 500 12.5px/1.3 var(--ik-font-body); }
.ik-draftstate.is-saved { color: var(--ik-text-2); }
/* Holista's reading of a note (Inner Circle): the stages it touches, what changed since the last version, where to go */
.ik-reading { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--ik-r-md); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-reading__stages { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-reading__text { margin: 0; color: var(--ik-text); font: 400 14px/1.5 var(--ik-font-body); }
.ik-reading__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ik-reading__links a { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; color: var(--ik-text); font: 500 14px/1.35 var(--ik-font-body); text-decoration: none; }
.ik-reading__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ik-reading__links small { flex: none; color: var(--ik-text-2); font: 500 12px/1.35 var(--ik-font-body); }
.ik-onboard--inset { min-height: 0; border-radius: var(--ik-r-lg); overflow: hidden; box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }
.ik-onboard--inset .ik-onboard__aside { position: static; height: auto; }
.ik-onboard--inset .ik-onboard__main { padding: 28px; }
a.ik-quotecard__head { color: inherit; text-decoration: none; } a.ik-quotecard__head:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* a page from a trusted provider inside ours (the referral dashboard): flat, outlined, tall enough to need no scroll of its own */
.ik-frame { display: block; width: 100%; min-height: var(--h, 900px); border: 0; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); }

/* ── Welcome & guide (DESIGN.md §27): the welcome checklist that flies out of the sidebar, Holista's guide card with her
   presence and voice, the spot around what she is explaining, the profile picture step ── */
.ik-welcome { position: fixed; z-index: var(--ik-z-float); left: calc(var(--ik-rail-w) + 12px); bottom: calc(16px + var(--ik-bar)); display: grid; gap: 12px; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 18px 14px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float, 0 0 0 transparent); transform-origin: 0 100%; animation: ik-welcome-in var(--ik-soft) both; }
html[data-ik-rail] .ik-welcome { left: calc(76px + 12px); }
@keyframes ik-welcome-in { from { opacity: 0; transform: translateX(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ik-welcome, .ik-welcome__pill, .ik-tourcard { animation: none; } }
.ik-welcome__head { display: grid; gap: 8px; padding-right: 30px; }
.ik-welcome__title { margin: 0; font: 800 20px/1.1 var(--ik-font-display); letter-spacing: var(--ik-track-heading); }
.ik-welcome__count { color: var(--ik-text-2); font: 500 13px/1.3 var(--ik-font-body); }
.ik-welcome__close { position: absolute; top: 10px; right: 10px; }
.ik-welcome__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ik-welcome__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--ik-r-md); background: none; color: var(--ik-text); text-align: left; text-decoration: none; font: 500 14.5px/1.3 var(--ik-font-body); cursor: pointer; transition: background var(--ik-quick); }
.ik-welcome__item:hover { background: var(--ik-fill); }
.ik-welcome__item:active { background: var(--ik-fill-2); box-shadow: inset 0 1px 0 var(--ik-pressed-edge); }
.ik-welcome__check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ik-line); color: transparent; }
.ik-welcome__check .ik-icon { width: 14px; height: 14px; }
.ik-welcome__item.is-done .ik-welcome__check { background: var(--ik-solid); box-shadow: none; color: var(--ik-on-solid); }
.ik-welcome__item.is-done .ik-welcome__label { color: var(--ik-text-2); }
.ik-welcome__item.is-next .ik-welcome__check { box-shadow: inset 0 0 0 2px var(--ik-marker); } /* the one to do next: the marker traces its circle */
.ik-welcome__label small { display: block; margin-top: 2px; color: var(--ik-text-2); font: 400 12.5px/1.3 var(--ik-font-body); }
.ik-welcome__item .ik-tag { white-space: nowrap; }
.ik-welcome__pill { position: fixed; z-index: var(--ik-z-float); left: calc(var(--ik-rail-w) + 12px); bottom: calc(16px + var(--ik-bar)); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: var(--ik-r-pill); background: var(--ik-surface); color: var(--ik-text); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); font: 600 13.5px/1 var(--ik-font-body); cursor: pointer; transform-origin: 0 100%; animation: ik-welcome-in var(--ik-soft) both; transition: transform var(--ik-press); } /* the fold and the unfold answer the press at once (principle 8): the app swaps panel and pill before the server confirms */
.ik-welcome__pill:active { transform: scale(.96); }
html[data-ik-rail] .ik-welcome__pill { left: calc(76px + 12px); }
@media (max-width: 860px) {
  .ik-welcome { left: 12px; right: 12px; width: auto; bottom: calc(4px + var(--ik-dock) + var(--ik-bar)); max-height: 70dvh; }
  .ik-welcome__pill { left: 12px; bottom: calc(4px + var(--ik-dock) + var(--ik-bar)); }
}

/* Holista's guide card: her presence (ikHolo.Presence on the canvas), who is speaking, what she says, her voice */
.ik-tourcard { position: fixed; z-index: var(--ik-z-float); right: 20px; bottom: calc(20px + var(--ik-bar)); display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px 16px; width: min(460px, calc(100vw - 32px)); padding: 16px 18px 16px 16px; border-radius: var(--ik-r-lg); background: var(--ik-surface); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline), var(--ik-float, 0 0 0 transparent); animation: ik-welcome-in var(--ik-soft) both; }
.ik-tourcard__presence { display: block; width: 88px; height: 88px; }
.ik-tourcard__body { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ik-tourcard__kind { color: var(--ik-text-2); font: 600 var(--ik-fs-label)/1.2 var(--ik-font-body); letter-spacing: var(--ik-track-label); text-transform: uppercase; }
.ik-tourcard__title { margin: 0; font: 800 19px/1.15 var(--ik-font-display); letter-spacing: var(--ik-track-heading); }
.ik-tourcard__text { margin: 0; color: var(--ik-text); font: 400 14.5px/1.5 var(--ik-font-body); }
.ik-tourcard__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: var(--ik-sink); }
.ik-tourcard__close { position: absolute; top: 8px; right: 8px; }
@media (max-width: 860px) { .ik-tourcard { right: 12px; left: 12px; width: auto; bottom: calc(4px + var(--ik-dock) + var(--ik-bar)); grid-template-columns: 64px minmax(0, 1fr); } .ik-tourcard__presence { width: 64px; height: 64px; } }
/* the spot: a thin marker outline around what she is talking about, breathing once a second */
.ik-tourspot { position: fixed; z-index: calc(var(--ik-z-float) - 1); left: var(--x, 0); top: var(--y, 0); width: var(--w, 0); height: var(--h, 0); border-radius: var(--ik-r-md); box-shadow: 0 0 0 1.5px var(--ik-marker); pointer-events: none; transition: left var(--ik-soft), top var(--ik-soft), width var(--ik-soft), height var(--ik-soft); animation: ik-tourspot 1.6s ease-in-out infinite; }
@keyframes ik-tourspot { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ik-marker) 0%, transparent), 0 0 0 1.5px var(--ik-marker); } }
@media (prefers-reduced-motion: reduce) { .ik-tourspot { animation: none; transition: none; } }

/* the profile picture step: the face as members will see it, why it matters, one button */
.ik-photo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 20px; }
.ik-photo__preview { display: grid; place-items: center; width: 112px; height: 112px; overflow: hidden; border-radius: 50%; background: var(--ik-surface-2); box-shadow: inset 0 0 0 var(--ik-hair) var(--ik-outline); color: var(--ik-text-3); }
.ik-photo__preview img { width: 100%; height: 100%; object-fit: cover; }
.ik-photo__preview .ik-icon { width: 36px; height: 36px; }
/* an app logo instead of a face (My Own Tool): a rounded square, the logo whole */
.ik-photo--app .ik-photo__preview { width: 88px; height: 88px; border-radius: var(--ik-r-md); background: var(--ik-paper); }
.ik-photo--app .ik-photo__preview img { width: 76%; height: 76%; object-fit: contain; }
.ik-photo__text { display: grid; gap: 8px; }
.ik-photo__text ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ik-text-2); font: 400 14px/1.4 var(--ik-font-body); }
.ik-photo__text li { display: flex; gap: 8px; } .ik-photo__text li .ik-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ik-text); }
@media (max-width: 520px) { .ik-photo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
.ik-welcome .ik-bar > i { background: var(--ik-text); } /* progress in the text colour: the marker stays on the next step */

/* ── Holista Lessons (DESIGN.md §28; lessons/holista-lesson.js): a 16:9 lesson frame where Holista teaches. On screen only
   her line (no box, no captions) and one scene at a time, moved like motion graphics: a camera with depth (__world,
   __camera, __plane), a quiet dot field with dust (__field) and a film finish (__print: grain, a soft vignette). Her line
   (__presence, the whole frame) points at what she explains. Flat ink, one marker per scene, springs. ── */
.ik-hl { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--ik-ink); color: var(--ik-paper); font-family: var(--ik-font-body); }
.ik-hl__field, .ik-hl__presence, .ik-hl__print { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.ik-hl__world { position: absolute; inset: 0; perspective: 1800px; perspective-origin: 50% 45%; }
.ik-hl__camera { position: absolute; inset: 0; transform-style: preserve-3d; }
.ik-hl__plane { position: absolute; left: 560px; right: 90px; top: 110px; bottom: 110px; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform, opacity; }
.ik-hl__plane--wide { left: 110px; right: 110px; top: 340px; bottom: 90px; } /* she stands at the top: the scene sits under her */
/* scene pieces — each a plain INKLINE shape at film size */
.ik-hl-title { display: grid; gap: 22px; justify-items: center; text-align: center; }
.ik-hl-title span { color: var(--ik-text-2); font: 600 22px/1 var(--ik-font-body); letter-spacing: .18em; text-transform: uppercase; }
.ik-hl-title b { font: 800 120px/0.92 var(--ik-font-display); letter-spacing: -0.045em; }
.ik-hl-title small { color: var(--ik-text-2); font: 500 30px/1.3 var(--ik-font-body); }
.ik-hl-card { display: grid; gap: 18px; padding: 44px 52px; border-radius: 30px; background: var(--ik-ink-1); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); max-width: 1100px; }
.ik-hl-card__kind { color: var(--ik-text-2); font: 600 20px/1 var(--ik-font-body); letter-spacing: .16em; text-transform: uppercase; }
.ik-hl-card__big { margin: 0; font: 800 76px/1 var(--ik-font-display); letter-spacing: -0.035em; }
.ik-hl-card__text { margin: 0; color: var(--ik-text); font: 500 38px/1.35 var(--ik-font-body); }
.ik-hl-card__text em { font-style: normal; color: var(--ik-marker); }
.ik-hl-question { margin: 0; max-width: 1100px; font: 800 84px/1.02 var(--ik-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.ik-hl-question i { font-style: normal; display: inline-block; width: 0.08em; height: 0.9em; margin-left: 6px; vertical-align: -0.08em; background: var(--ik-marker); }
.ik-hl-stat { display: grid; justify-items: center; gap: 18px; text-align: center; }
.ik-hl-stat__line { display: flex; align-items: baseline; gap: 28px; font: 800 110px/1 var(--ik-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ik-hl-stat__line small { color: var(--ik-text-3); font-size: .6em; }
.ik-hl-stat__result { font: 800 170px/0.9 var(--ik-font-display); letter-spacing: -0.05em; color: var(--ik-marker); }
.ik-hl-stat__label { color: var(--ik-text-2); font: 600 30px/1 var(--ik-font-body); letter-spacing: .12em; text-transform: uppercase; }
.ik-hl-draw { width: 900px; height: 560px; overflow: visible; }
.ik-hl-draw path, .ik-hl-draw circle, .ik-hl-draw rect { fill: none; stroke: var(--ik-paper); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ik-hl-draw .is-marker { stroke: var(--ik-marker); }
.ik-hl-draw text { fill: var(--ik-text-2); stroke: none; font: 600 30px var(--ik-font-body); letter-spacing: .12em; text-transform: uppercase; }
.ik-hl-homes { display: grid; grid-template-columns: repeat(2, 520px); gap: 22px; }
.ik-hl-home { --c: var(--ik-line); position: relative; display: grid; align-content: start; gap: 14px; height: 250px; padding: 26px 28px; border-radius: 30px; background: color-mix(in srgb, var(--c) 9%, var(--ik-ink-1)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.ik-hl-home[data-circle="pkm"] { --c: var(--ik-circle-pkm); border-top-left-radius: 70px; } .ik-hl-home[data-circle="bkm"] { --c: var(--ik-circle-bkm); border-top-right-radius: 70px; }
.ik-hl-home[data-circle="ppm"] { --c: var(--ik-circle-ppm); border-bottom-left-radius: 70px; } .ik-hl-home[data-circle="bpm"] { --c: var(--ik-circle-bpm); border-bottom-right-radius: 70px; }
.ik-hl-home b { color: var(--c); font: 800 46px/1 var(--ik-font-display); letter-spacing: -0.02em; }
.ik-hl-home span { color: var(--ik-text-2); font: 600 18px/1.2 var(--ik-font-body); letter-spacing: .12em; text-transform: uppercase; }
.ik-hl-chip { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 12px 20px 12px 14px; border-radius: 999px; background: var(--ik-ink); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); color: var(--ik-text); font: 600 26px/1 var(--ik-font-body); white-space: nowrap; }
.ik-hl-chip svg { width: 30px; height: 30px; }
.ik-hl-statement { margin: 0; max-width: 1150px; text-align: center; font: 800 96px/1 var(--ik-font-display); letter-spacing: -0.04em; text-wrap: balance; }
.ik-hl-statement em { font-style: normal; color: var(--ik-marker); }
.ik-hl-loop { position: relative; width: 820px; height: 620px; }
.ik-hl-loop__hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; background: var(--ik-ink-1); box-shadow: inset 0 0 0 2px var(--ik-paper); text-align: center; font: 800 52px/1 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-hl-loop__hub small { display: block; margin-top: 8px; color: var(--ik-text-2); font: 600 15px/1.2 var(--ik-font-body); letter-spacing: .12em; text-transform: uppercase; }
.ik-hl-loop__stage { position: absolute; display: grid; justify-items: center; gap: 12px; width: 240px; margin-left: -120px; text-align: center; }
.ik-hl-loop__stage .ik-stage { width: 70px; height: 70px; }
.ik-hl-loop__stage b { font: 800 40px/1 var(--ik-font-display); letter-spacing: -0.02em; }
.ik-hl-loop__stage span { color: var(--ik-text-2); font: 500 22px/1.25 var(--ik-font-body); }
.ik-hl-loop > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ik-hl-loop > svg path { fill: none; stroke: var(--ik-ink-rule); stroke-width: 3; }
.ik-hl-loop > svg path.is-on { stroke: var(--ik-marker); }
.ik-hl-compare { display: grid; grid-template-columns: repeat(2, 540px); gap: 28px; }
.ik-hl-compare > div { display: grid; align-content: start; gap: 20px; padding: 38px 40px; border-radius: 30px; background: var(--ik-ink-1); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); }
.ik-hl-compare > div.is-after { box-shadow: inset 0 0 0 2px var(--ik-paper); }
.ik-hl-compare b { font: 800 60px/1 var(--ik-font-display); letter-spacing: -0.03em; }
.ik-hl-compare p { margin: 0; color: var(--ik-text-2); font: 500 30px/1.35 var(--ik-font-body); }
.ik-hl-steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; max-width: 1100px; }
.ik-hl-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 26px; font: 700 46px/1.15 var(--ik-font-display); letter-spacing: -0.02em; }
.ik-hl-steps li i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ik-ink-rule); color: var(--ik-text-2); font: 800 28px/1 var(--ik-font-display); font-style: normal; }
.ik-hl-steps li.is-done i { background: var(--ik-paper); box-shadow: none; color: var(--ik-ink); }
.ik-hl-steps li.is-now i { box-shadow: inset 0 0 0 3px var(--ik-marker); color: var(--ik-text); }
.ik-hl-tiles { display: flex; align-items: flex-start; gap: 44px; }
.ik-hl-tile { display: grid; justify-items: center; gap: 20px; width: 220px; }
.ik-hl-tile__icon { display: grid; place-items: center; width: 168px; height: 168px; border-radius: 44px; background: var(--ik-ink-1); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); color: var(--ik-text); }
.ik-hl-tile__icon svg { width: 76px; height: 76px; }
.ik-hl-tile.is-on .ik-hl-tile__icon { box-shadow: inset 0 0 0 2.5px var(--ik-paper); }
.ik-hl-tile__name { color: var(--ik-text); font: 700 32px/1 var(--ik-font-display); letter-spacing: -0.01em; white-space: nowrap; }
.ik-hl-tile__tag { color: var(--ik-text-3); font: 600 17px/1 var(--ik-font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ik-hl-copies { display: grid; grid-template-columns: repeat(2, 720px); gap: 56px; }
.ik-hl-copies__panel { position: relative; display: grid; align-content: start; justify-items: start; gap: 22px; min-height: 480px; padding: 36px 40px 44px; border-radius: 30px; background: var(--ik-ink-1); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); }
.ik-hl-copies__panel header { color: var(--ik-text-2); font: 600 22px/1 var(--ik-font-body); letter-spacing: .16em; text-transform: uppercase; }
.ik-hl-copies__card { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 20px; background: var(--ik-ink); box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); color: var(--ik-text); font: 700 34px/1 var(--ik-font-display); white-space: nowrap; }
.ik-hl-copies__card svg, .ik-hl-copies__link svg { width: 32px; height: 32px; flex: none; }
.ik-hl-copies__card.is-off { box-shadow: none; outline: 1.5px dashed var(--ik-text-3); outline-offset: -1.5px; color: var(--ik-text-2); }
.ik-hl-copies__day { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ik-ink-rule); color: var(--ik-text-2); font: 600 24px/1 var(--ik-font-body); font-style: normal; }
.ik-hl-copies__neq { position: absolute; left: 84%; top: 64%; color: var(--ik-marker); font: 800 120px/1 var(--ik-font-display); font-style: normal; }
.ik-hl-copies__line { width: 40px; height: 70px; margin-left: 30px; overflow: visible; }
.ik-hl-copies__line path { fill: none; stroke: var(--ik-marker); stroke-width: 4; stroke-linecap: round; }
.ik-hl-copies__link { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--ik-paper); color: var(--ik-text); white-space: nowrap; }
.ik-hl-copies__link span { color: var(--ik-text-2); font: 500 22px/1 var(--ik-font-body); }
.ik-hl-copies__link b { font: 700 28px/1 var(--ik-font-display); }
/* UI-6 · touch targets: on a finger (coarse pointer) every small control answers 44px around it, whatever it looks like */
@media (pointer: coarse) {
  :where(.ik-chip, .ik-action, .ik-iconbtn, .ik-btn--sm, .ik-tier, .ik-cite, .ik-seg > button, .ik-seg > a, .ik-menu__item) { position: relative; }   /* :where: a control placed absolutely keeps its own position */
  :is(.ik-chip, .ik-action, .ik-iconbtn, .ik-btn--sm, .ik-tier, .ik-cite, .ik-seg > button, .ik-seg > a, .ik-menu__item)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--ik-target)); height: max(100%, var(--ik-target)); transform: translate(-50%, -50%); }
  :is(.ik-seg--scroll, .ik-chips--scroll) > :is(a, button, .ik-chip)::after { height: 100%; }   /* inside a sideways row the hit area keeps to the row's height: the row is the target (post-release 01) */
}
/* S5 · a title with a Help "?" keeps room for it, so the hanging mark never pushes the page sideways */
:is(h1, h2, h3, .ik-h1, .ik-h2, .ik-h3, .ik-panel__title):has(> .ik-help) { padding-inline-end: calc(max(14px, .5em) + .12em); }
/* UI-15 · the spot: a thin marker outline around what a guide is explaining, following it on scroll and resize
   (data-ui="spot" data-target); --breathe for the tour. .ik-tourspot is the same element under its old name. */
.ik-spot { position: fixed; z-index: calc(var(--ik-z-float) - 1); border-radius: var(--ik-r-md); box-shadow: 0 0 0 1.5px var(--ik-marker); pointer-events: none; transition: left var(--ik-soft), top var(--ik-soft), width var(--ik-soft), height var(--ik-soft); }
.ik-spot[hidden] { display: none; }
.ik-spot--breathe { animation: ik-tourspot 1.6s ease-in-out infinite; }

/* ═══ iOS feel on phones (15z-d · DESIGN.md §6, §15) ══════════════════════════════════════════════════════════════
   The page itself behaves like an iPhone app — on the web and in the iPhone and iPad app alike. inkline.js decides what
   "a phone" is (Inkline.phone(): 640px wide or less) and marks what it presents that way with [data-ik-sheet]. */

/* ── sheets: the one modal system, on a phone. Rises from the bottom, rounded top corners, a grabber, the page dims;
      drag it down to dismiss (inkline.js). Safe area at the bottom; the content scrolls inside, never the page. ── */
.ik-modal:not([data-ik-sheet]) .ik-sheet__grab { display: none; }   /* the sheet's grabber, added by inkline.js, only while it is a sheet */
.ik-modal__panel { overscroll-behavior: contain; }
.ik-modal[data-ik-sheet] { place-items: end stretch; padding: max(44px, calc(env(safe-area-inset-top, 0px) + 10px)) 0 0; overscroll-behavior: contain; }
.ik-modal[data-ik-sheet] > .ik-modal__scrim { touch-action: none; }
.ik-modal[data-ik-sheet] > .ik-modal__panel { width: 100%; min-width: 0; max-width: none; margin: 0; max-height: calc(100dvh - max(44px, calc(env(safe-area-inset-top, 0px) + 10px))); overflow-y: auto; border-radius: var(--ik-r-xl) var(--ik-r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ik-modal[data-ik-sheet] > .ik-dialog.ik-modal__panel { padding-bottom: calc(var(--ik-s-6) + env(safe-area-inset-bottom, 0px)); }
.ik-modal[data-ik-sheet] > .ik-upgrade.ik-modal__panel { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.ik-modal[data-ik-sheet] > .ik-poll.ik-modal__panel { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.ik-modal[data-ik-sheet] > .ik-modal__panel > .ik-sheet__grab { position: absolute; z-index: 5; top: 7px; left: 50%; width: 40px; height: 5px; margin: 0 0 0 -20px; border-radius: 3px; background: color-mix(in srgb, var(--ik-text) 28%, transparent); pointer-events: none; }
.ik-modal[data-ik-dragging], .ik-modal[data-ik-dragging] * { -webkit-user-select: none; user-select: none; }

/* ── action sheet: a ⋯ menu on a phone. One grouped list from the bottom over the dimmed page (the modal scrim), groups split by a band,
      the destructive item in the warning colour (.is-destructive), and a separate Cancel. ── */
.ik-modal__scrim--fixed { position: fixed; z-index: calc(var(--ik-z-modal) - 1); touch-action: none; }   /* the same scrim, on its own under an action sheet */
.ik-modal__scrim--fixed[hidden] { display: none; }
.ik-menu__cancel { display: none; }
.ik-popmenu[data-ik-sheet] { inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; z-index: var(--ik-z-modal); width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - 72px); padding: 0; gap: 0; background: none; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
.ik-popmenu[data-ik-sheet] > * { background: var(--ik-surface); }
.ik-popmenu[data-ik-sheet] .ik-menu__item { min-height: 56px; padding: 0 20px; gap: 16px; border-radius: 0; font-size: 17px; }
.ik-popmenu[data-ik-sheet] .ik-menu__item + .ik-menu__item { box-shadow: inset 0 var(--ik-hair) 0 var(--ik-rule); }
.ik-popmenu[data-ik-sheet] > .ik-menu__item:is(:hover, :active, :focus-visible, .is-down) { background: linear-gradient(var(--ik-fill-2) 0 0) var(--ik-surface); }
.ik-popmenu[data-ik-sheet] > hr { height: 6px; margin: 0; border: 0; background: var(--ik-bg); }
.ik-popmenu[data-ik-sheet] .ik-menu__label { padding: 14px 20px 6px; }
.ik-popmenu[data-ik-sheet] > :first-child { border-radius: var(--ik-r-md) var(--ik-r-md) 0 0; }
.ik-popmenu[data-ik-sheet] > :nth-last-child(2) { border-bottom-left-radius: var(--ik-r-md); border-bottom-right-radius: var(--ik-r-md); }
.ik-popmenu[data-ik-sheet] > .ik-menu__cancel { display: flex; justify-content: center; margin-top: 8px; border-radius: var(--ik-r-md); box-shadow: none; font-weight: 600; }

/* ── touch: no grey flash, no selection or callout on controls (text stays selectable), a pressed state on every
      press that is instant under a finger (inkline.js listens to touchstart, so iOS shows :active), fields at 16px so
      Safari never zooms into them ── */
:where(.ik) :where(a, button, [role="button"], label, summary, [tabindex]) { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  :where(.ik) :where(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], summary, nav a, .ik-btn, .ik-iconbtn, .ik-chip, .ik-tab, .ik-seg > *, .ik-sidenav__item, .ik-card--press, .ik-mcard, .ik-event, .ik-pager__link, .ik-row__link, .ik-tile, .ik-action, .ik-back, .ik-option, .ik-dropdown__trigger) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  :where(.ik) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"], [type="hidden"]), textarea, select):not(.ik-input--code, .ik-input--title) { font-size: 16px !important; }
  /* UI-21 · a title you edit in place (a page's name as a field: .ik-input--title) keeps its display size; it is above 16px, so no zoom */
}
@media (hover: none) {
  :where(.ik) :where(a[href], button, [role="button"], [role="tab"], [role="option"], summary):where(:not(:disabled, [aria-disabled="true"], .ik-btn, .ik-iconbtn, .ik-chip, .ik-tab, .ik-seg > *, .ik-sidenav__item, .ik-card--press, .ik-mcard, .ik-event, .ik-pager__link, .ik-tile, .ik-poll__opt, .ik-action, .ik-menu__item, .ik-swipe__action, .ik-dropdown__trigger, .ik-row__mark, .ik-row__act)):active { opacity: .6; }
}

/* ── pages: push and pop on a phone (View Transitions; Inkline.navKind / pageTransition). The page that comes slides in
      from the right over the one that goes (which moves a third to the left and dims); back is the same, reversed. The
      top bar and the tab bar stay put; taps go through to the new page while it moves. ── */
.ik-navmark { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root:active-view-transition-type(ik-push, ik-pop)::view-transition { pointer-events: none; }
:root:active-view-transition-type(ik-push, ik-pop) .ik-app__top { view-transition-name: ik-top; }
:root:active-view-transition-type(ik-push, ik-pop) .ik-app__tabbar { view-transition-name: ik-tabbar; }
::view-transition-group(ik-top), ::view-transition-group(ik-tabbar) { z-index: 2; animation: none; }
::view-transition-old(ik-top), ::view-transition-old(ik-tabbar) { display: none; }
::view-transition-new(ik-top), ::view-transition-new(ik-tabbar) { animation: none; }
::view-transition-group(*.ik-nav) { animation: none; }
::view-transition-old(*.ik-nav) { display: none; }
::view-transition-new(*.ik-nav) { animation: none; }
:root:active-view-transition-type(ik-push, ik-pop)::view-transition-group(root) { animation: none; }
:root:active-view-transition-type(ik-push, ik-pop)::view-transition-old(root),
:root:active-view-transition-type(ik-push, ik-pop)::view-transition-new(root) { mix-blend-mode: normal; }
:root:active-view-transition-type(ik-push)::view-transition-old(root) { animation: ik-page-under var(--ik-slide) both; }
:root:active-view-transition-type(ik-push)::view-transition-new(root) { animation: ik-page-over var(--ik-slide) both; box-shadow: calc(var(--ik-hair) * -1) 0 0 var(--ik-rule); }
:root:active-view-transition-type(ik-pop)::view-transition-old(root) { z-index: 1; animation: ik-page-away var(--ik-slide) both; box-shadow: calc(var(--ik-hair) * -1) 0 0 var(--ik-rule); }
:root:active-view-transition-type(ik-pop)::view-transition-new(root) { animation: ik-page-back var(--ik-slide) both; }
@keyframes ik-page-over { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ik-page-under { from { transform: none; filter: none; } to { transform: translateX(-30%); filter: brightness(.82); } }
@keyframes ik-page-away { from { transform: none; } to { transform: translateX(100%); } }
@keyframes ik-page-back { from { transform: translateX(-30%); filter: brightness(.82); } to { transform: none; filter: none; } }