@import url("../tokens/fonts.css");

/* ==========================================================================
   Isoland — the UI as a tiny isometric diorama.
   Every block is a top face plus two side faces (front + right, drawn at 45°
   down-right) standing on the ground, with a cast shadow thrown at 2:1.
   One variable drives it all: --z, the face's offset along the block's height.
     --z < 0  raised (hover)       --z = 0  at rest       --z > 0  sunk (pressed)
   Side faces scale by (d - z) / d so they always meet the ground.
   Rules: transform/opacity only; entrances fill BACKWARDS; no blur.
   ========================================================================== */

:root {
  --il-hi: rgb(255 255 255 / .5);      /* the lit top-left edge on a face */
  --il-scrim: rgb(21 35 58 / .38);
  --il-mix-side: 82%;                    /* tone share in the front face */
  --il-mix-shade: 64%;                   /* tone share in the right face */
  color-scheme: light;
}
[data-theme="dark"] {
  --il-hi: rgb(255 255 255 / .13);
  --il-scrim: rgb(4 5 18 / .62);
  --il-mix-side: 80%;
  --il-mix-shade: 60%;
  color-scheme: dark;
}

html { background-color: var(--ground); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 500 15px/23px var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* the iso grid etched into the ground (static mask, themed by colour) */
body::before, .il-ground::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--ground-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32'%3E%3Cpath d='M0 16L28 0L56 16L28 32Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 56px 32px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32'%3E%3Cpath d='M0 16L28 0L56 16L28 32Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 56px 32px;
}
.il-ground { position: relative; isolation: isolate; background-color: var(--ground); color: var(--ink); }
.il-ground::before { position: absolute; }

*, *::before, *::after { box-sizing: border-box; }
.il-sr, .il-toggle input, .il-check input, .il-radio input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.il-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* preview stage */
.il-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 18px; padding: 24px; }
.il-stage--col { flex-direction: column; align-items: flex-start; }
.il-overline, .il-field__label, .il-card__eyebrow {
  font: 800 11px/14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.il-overline { width: 100%; }

/* ==========================================================================
   The block
   ========================================================================== */
.il-block, .il-pr, .il-avatar, .il-radio__coin, .il-toned {
  --tone: var(--surface);
  --il-fg: var(--ink);
  --il-fg2: var(--ink-soft);
  --il-side: color-mix(in oklab, var(--tone) var(--il-mix-side), var(--tone-shade, var(--shade)));
  --il-shd: color-mix(in oklab, var(--tone) var(--il-mix-shade), var(--tone-shade, var(--shade)));
}
.il-block {
  --d: 10;                 /* depth in px (unitless) */
  --c: var(--d);           /* cast length at rest */
  --lift: 3;               /* how far hover raises */
  --sink: calc(var(--d) - 2);   /* how far a press sinks */
  --hold: calc(var(--d) / 2);   /* a held / checked state */
  --z: 0;
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0 calc(var(--d) * 1px) calc(var(--d) * 1px) 0;
  -webkit-tap-highlight-color: transparent;
}
.il-face {
  position: relative;
  z-index: 1;
  display: block;
  background-color: var(--tone);
  color: var(--il-fg);
  box-shadow: inset 1px 1px 0 var(--il-hi);
  transform: translate(calc(var(--z) * 1px), calc(var(--z) * 1px));
  transition: transform var(--dur-lift) var(--ease-lift), background-color var(--dur-lift) ease, color var(--dur-lift) ease;
}
.il-block > .il-face::before,
.il-block > .il-face::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  transition: inherit;
}
/* front face: a parallelogram hanging off the bottom edge */
.il-block > .il-face::before {
  left: 0; top: 100%;
  width: 100%; height: calc(var(--d) * 1px);
  background-color: var(--il-side);
  transform: skewX(45deg) scaleY(calc((var(--d) - var(--z)) / var(--d)));
}
/* right face: a parallelogram off the right edge (1px longer to seal the seam) */
.il-block > .il-face::after {
  left: 100%; top: 0;
  width: calc(var(--d) * 1px); height: calc(100% + 1px);
  background-color: var(--il-shd);
  transform: skewY(45deg) scaleX(calc((var(--d) - var(--z)) / var(--d)));
}
/* the cast: two bands of shadow lying on the ground at a 2:1 slope */
.il-block::before,
.il-block::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: var(--shadow);
  transform-origin: 0 0;
  transition: transform var(--dur-lift) var(--ease-lift);
}
.il-block::before {
  left: calc(var(--d) * 1px); top: 100%;
  width: calc(100% - var(--d) * 1px); height: calc(var(--c) * .5px);
  transform: skewX(63.435deg) scaleY(max(0, calc((var(--c) - var(--z) * 2.2) / var(--c))));
}
.il-block::after {
  left: 100%; top: calc(var(--d) * 1px);
  width: calc(var(--c) * 1px); height: calc(100% - var(--d) * 1px);
  transform: skewY(26.565deg) scaleX(max(0, calc((var(--c) - var(--z) * 2.2) / var(--c))));
}
.il-nocast::before, .il-nocast::after { display: none; }

/* states: all of them just move --z */
.il-hover:where(:not([disabled]):not(.is-disabled)):hover,
.il-hover:where(:not([disabled])):focus-visible,
.il-block.is-raised { --z: calc(var(--lift) * -1); }
.il-press:where(:not([disabled])):active,
.il-press.is-pressing { --z: var(--sink); }
.il-block.is-sunk { --z: var(--hold); }
.il-press:where(:not([disabled])):active > .il-face,
.il-press.is-pressing > .il-face,
.il-press:where(:not([disabled])):active::before,
.il-press:where(:not([disabled])):active::after { transition-duration: var(--dur-press); transition-timing-function: var(--ease-sink); }

.il-block:focus-visible { outline: none; }
.il-block:focus-visible > .il-face { outline: 3px solid var(--focus); outline-offset: 3px; }
.il-fill { height: 100%; }
.il-fill > .il-face { height: 100%; }

/* depths */
.il-d1 { --d: 3; } .il-d2 { --d: 6; } .il-d3 { --d: 10; } .il-d4 { --d: 16; }

/* tones: the face colour; side faces are mixed from it */
.il-tone-surface { --tone: var(--surface); --il-fg: var(--ink); --il-fg2: var(--ink-soft); }
.il-tone-sky { --tone: var(--sky); --il-fg: var(--on-color); --il-fg2: var(--on-color); }
.il-tone-grass { --tone: var(--grass); --il-fg: var(--on-color); --il-fg2: var(--on-color); }
.il-tone-sun { --tone: var(--sun); --il-fg: var(--on-color); --il-fg2: var(--on-color); --tone-shade: #8f3a0c; } /* yellow shades to amber, not olive */
.il-tone-coral { --tone: var(--coral); --il-fg: var(--on-color); --il-fg2: var(--on-color); --tone-shade: #5a1430; }
.il-tone-lilac { --tone: var(--lilac); --il-fg: var(--on-color); --il-fg2: var(--on-color); }
.il-tone-sunk { --tone: var(--surface-sunk); --il-fg: var(--ink-soft); --il-fg2: var(--ink-soft); }
.il-tone-ink { --tone: var(--ink); --il-fg: var(--ground); --il-fg2: var(--ground); }
.il-tone-moss { --tone: color-mix(in oklab, var(--grass) 74%, var(--shade)); --il-fg: var(--on-color); }
.il-tone-trunk { --tone: color-mix(in oklab, var(--sun) 52%, var(--shade)); }

/* ==========================================================================
   Entrance: blocks rise out of the ground (fill BACKWARDS only)
   ========================================================================== */
.il-rise { animation: il-fade calc(var(--dur-rise) * .4) linear backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
.il-rise > .il-face { animation: il-rise-face var(--dur-rise) var(--ease-rise) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
.il-rise > .il-face::before { animation: il-rise-front var(--dur-rise) var(--ease-rise) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
.il-rise > .il-face::after { animation: il-rise-right var(--dur-rise) var(--ease-rise) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
.il-rise::before { animation: il-rise-castb var(--dur-rise) var(--ease-rise) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
.il-rise::after { animation: il-rise-castr var(--dur-rise) var(--ease-rise) backwards; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }
@keyframes il-fade { from { opacity: 0; } }
@keyframes il-rise-face { from { transform: translate(calc(var(--d) * 1px), calc(var(--d) * 1px)); } }
@keyframes il-rise-front { from { transform: skewX(45deg) scaleY(0); } }
@keyframes il-rise-right { from { transform: skewY(45deg) scaleX(0); } }
@keyframes il-rise-castb { from { transform: skewX(63.435deg) scaleY(0); } }
@keyframes il-rise-castr { from { transform: skewY(26.565deg) scaleX(0); } }
@keyframes il-pop-in { from { transform: scale(0); } }
.il-panel-in { animation: il-panel-in var(--dur-rise) var(--ease-rise) backwards; }
@keyframes il-panel-in { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   Button
   ========================================================================== */
button.il-block, a.il-block, .il-ghost {
  appearance: none; border: 0; margin: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; text-align: inherit;
}
.il-btn { --d: 6; --lift: 2; --sink: 5; display: inline-block; vertical-align: middle; }
.il-btn > .il-face {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  font: 800 15px/1 var(--font-body); letter-spacing: .01em; white-space: nowrap;
}
.il-btn .il-icon { width: 18px; height: 18px; }
.il-btn--sm { --d: 4; --sink: 3; --lift: 2; }
.il-btn--sm > .il-face { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.il-btn--sm .il-icon { width: 16px; height: 16px; }
.il-btn--lg { --d: 9; --sink: 7; --lift: 3; }
.il-btn--lg > .il-face { height: 56px; padding: 0 26px; font-size: 17px; gap: 10px; }
.il-btn--block { display: block; width: 100%; }
.il-btn[disabled] { cursor: not-allowed; --d: 2; --tone: var(--surface-sunk); --il-fg: var(--ink-soft); }
.il-btn.is-loading { cursor: progress; }
.il-btn.is-loading > .il-face > :not(.il-loader) { opacity: 0; }
.il-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.il-loader__cube { width: 11px; height: 12px; fill: currentColor; animation: il-hop 900ms var(--ease-slide) infinite; }
@keyframes il-hop { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } }
/* ghost: a decal painted on the ground, no height */
.il-ghost { display: inline-block; vertical-align: middle; padding: 0; }
.il-ghost > .il-face { background: transparent; box-shadow: none; color: var(--ink); transform: none; transition: background-color var(--dur-lift) ease, transform var(--dur-press) var(--ease-sink); }
.il-ghost > .il-face::before, .il-ghost > .il-face::after { display: none; }
.il-ghost:hover > .il-face { background-color: color-mix(in oklab, var(--ink) 8%, transparent); }
.il-ghost:active > .il-face { transform: translate(1px, 1px); }
.il-ghost:focus-visible { outline: none; }
.il-ghost:focus-visible > .il-face { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   IconButton
   ========================================================================== */
.il-ibtn { --d: 5; --sink: 4; --lift: 2; --hold: 3; display: inline-block; vertical-align: middle; }
.il-ibtn > .il-face { width: 42px; height: 42px; display: grid; place-items: center; }
.il-ibtn--sm { --d: 3; --sink: 2; --hold: 2; --lift: 1; }
.il-ibtn--sm > .il-face { width: 32px; height: 32px; }
.il-ibtn--sm .il-icon { width: 16px; height: 16px; }
.il-ibtn--lg { --d: 7; --sink: 6; }
.il-ibtn--lg > .il-face { width: 52px; height: 52px; }
.il-ibtn--lg .il-icon { width: 24px; height: 24px; }
.il-ibtn[aria-pressed="true"] { --z: var(--hold); --tone: var(--sun); --il-fg: var(--on-color); }
.il-ibtn[aria-pressed="true"]:hover { --z: var(--hold); }
.il-ibtn[disabled] { cursor: not-allowed; --tone: var(--surface-sunk); --il-fg: var(--ink-soft); }
.il-count {
  position: absolute; z-index: 3; top: -8px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--coral); color: var(--on-color); font: 800 11px/1 var(--font-body);
  box-shadow: 1px 1px 0 color-mix(in oklab, var(--coral) 70%, var(--shade)), 2px 2px 0 color-mix(in oklab, var(--coral) 60%, var(--shade));
}
.il-pop-in { animation: il-pop-in var(--dur-slide) var(--ease-rise) backwards; }

/* in dusk, knobs and thumbs are lit: pale blocks on the dark grooves */
[data-theme="dark"] .il-toggle__knob, [data-theme="dark"] .il-slider__thumb, [data-theme="dark"] .il-seg__thumb.il-tone-surface { --tone: var(--ink); --il-fg: var(--on-color); }
[data-theme="dark"] .il-seg__thumb.il-tone-surface ~ .il-seg__opt[aria-checked="true"] { color: var(--on-color); }

/* ==========================================================================
   Toggle — the iso switch: a knob block sliding along a carved groove
   ========================================================================== */
.il-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; position: relative; }
.il-toggle__track {
  position: relative; flex: none; width: 58px; height: 31px;
  background-color: var(--surface-sunk); box-shadow: var(--shadow-recess-deep); border-radius: var(--radius-sm);
  transition: background-color var(--dur-slide) ease;
}
.il-toggle__pip { position: absolute; right: 10px; top: 11px; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-soft); opacity: .55; }
.il-toggle__knob { --d: 5; --c: 3; --sink: 3; position: absolute; left: 4px; top: 3px; transition: transform var(--dur-slide) var(--ease-slide); }
.il-toggle__knob > .il-face {
  width: 21px; height: 21px;
  background-image: linear-gradient(90deg, transparent 7px, var(--il-side) 7px 8.5px, transparent 8.5px 12px, var(--il-side) 12px 13.5px, transparent 13.5px);
  background-size: 100% 9px; background-position: 0 6px; background-repeat: no-repeat;
}
.il-toggle input:checked + .il-toggle__track { background-color: var(--grass); }
.il-toggle input:checked + .il-toggle__track .il-toggle__pip { opacity: 0; }
.il-toggle input:checked + .il-toggle__track .il-toggle__knob { transform: translateX(25px); }
.il-toggle:active .il-toggle__knob { --z: var(--sink); }
.il-toggle:hover .il-toggle__knob { --z: -1; }
.il-toggle__knob.il-thunk > .il-face { animation: il-thunk var(--dur-slide) var(--ease-slide); }
@keyframes il-thunk { 40% { transform: translate(-3px, -3px); } }
.il-toggle input:focus-visible + .il-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; }
.il-toggle__text, .il-check__text { display: grid; gap: 1px; min-width: 0; }
.il-toggle__label, .il-check__label { font-weight: 700; color: var(--ink); }
.il-toggle__hint, .il-check__hint { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-soft); }
.il-toggle.is-disabled, .il-check.is-disabled, .il-radio.is-disabled { cursor: not-allowed; opacity: .55; }

/* ==========================================================================
   Checkbox + Radio
   ========================================================================== */
.il-check, .il-radio { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; user-select: none; }
.il-check__box { --d: 5; --c: 4; --hold: 3; flex: none; margin-top: 0; }
.il-check__box > .il-face { width: 22px; height: 22px; display: grid; place-items: center; }
.il-check__tick { width: 16px; height: 16px; stroke-width: 3.2; transform: scale(0) rotate(-12deg); transition: transform var(--dur-slide) var(--ease-rise); }
.il-check__dash { position: absolute; width: 10px; height: 3px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform var(--dur-slide) var(--ease-rise); }
.il-check input:not(:checked):not(:indeterminate) + .il-check__box > .il-face { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ink-soft) 60%, transparent); }
.il-check:hover .il-check__box { --z: -1; }
.il-check input:checked + .il-check__box,
.il-check input:indeterminate + .il-check__box { --z: var(--hold); }
.il-check input:checked + .il-check__box { --tone: var(--grass); --il-fg: var(--on-color); }
.il-check input:indeterminate + .il-check__box { --tone: var(--sun); --il-fg: var(--on-color); }
.il-check input:checked + .il-check__box .il-check__tick { transform: none; }
.il-check input:indeterminate + .il-check__box .il-check__tick { transform: scale(0); }
.il-check input:indeterminate + .il-check__box .il-check__dash { transform: none; }
.il-check input:focus-visible + .il-check__box > .il-face { outline: 3px solid var(--focus); outline-offset: 3px; }
.il-check__text { padding-top: 1px; }

.il-radios { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; }
.il-radios--inline { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.il-radios--inline > .il-field__label { width: 100%; }
/* radio = a coin standing on its edge-stack */
.il-radio__coin {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background-color: var(--surface); display: grid; place-items: center;
  box-shadow: inset 1px 1px 0 var(--il-hi), 1px 1px 0 var(--il-side), 2px 2px 0 var(--il-side), 3px 3px 0 var(--il-shd), 4px 4px 0 var(--il-shd), 8px 6px 0 var(--shadow);
  transition: transform var(--dur-press) var(--ease-sink), box-shadow var(--dur-press) var(--ease-sink), background-color var(--dur-lift) ease;
}
.il-radio__coin i { width: 8px; height: 8px; border-radius: 50%; background: var(--on-color); transform: scale(0); transition: transform var(--dur-slide) var(--ease-rise); }
.il-radio input:not(:checked) + .il-radio__coin { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ink-soft) 60%, transparent), 1px 1px 0 var(--il-side), 2px 2px 0 var(--il-side), 3px 3px 0 var(--il-shd), 4px 4px 0 var(--il-shd), 8px 6px 0 var(--shadow); --il-side: color-mix(in oklab, var(--surface) var(--il-mix-side), var(--shade)); --il-shd: color-mix(in oklab, var(--surface) var(--il-mix-shade), var(--shade)); }
.il-radio:hover input:not(:checked) + .il-radio__coin { transform: translate(-1px, -1px); }
.il-radio input:checked + .il-radio__coin {
  background-color: var(--tone); transform: translate(2px, 2px);
  box-shadow: inset 1px 1px 0 var(--il-hi), 1px 1px 0 var(--il-side), 2px 2px 0 var(--il-shd), 5px 4px 0 var(--shadow);
}
.il-radio input:checked + .il-radio__coin i { transform: none; }
.il-radio input:focus-visible + .il-radio__coin { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ==========================================================================
   TextField — a slot carved into the ground; focus raises its floor
   ========================================================================== */
.il-field { display: grid; gap: 7px; min-width: 0; }
.il-field__well {
  --w: 6;
  --wall: var(--surface);
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: 48px;
  background-color: var(--surface);
  box-shadow: 0 0 0 1.5px var(--ground-line);
  transition: box-shadow var(--dur-lift) ease;
}
.il-field__well::before, .il-field__well::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transform-origin: 0 0;
  transition: transform var(--dur-lift) var(--ease-lift), background-color var(--dur-lift) ease;
}
.il-field__well::before { width: 100%; height: calc(var(--w) * 1px); background-color: color-mix(in oklab, var(--wall) 86%, var(--shade)); transform: skewX(45deg); }
.il-field__well::after { width: calc(var(--w) * 1px); height: 100%; background-color: color-mix(in oklab, var(--wall) 72%, var(--shade)); transform: skewY(45deg); }
.il-field__well:focus-within::before { transform: skewX(45deg) scaleY(.34); }
.il-field__well:focus-within::after { transform: skewY(45deg) scaleX(.34); }
.il-field__well:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.il-field__input {
  position: relative; z-index: 1; flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; margin: 0;
  font: 600 15px/22px var(--font-body); color: var(--ink);
  padding: calc(var(--w) * 1px + 7px) 14px 7px calc(var(--w) * 1px + 11px);
}
.il-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
textarea.il-field__input { resize: vertical; min-height: 92px; }
.il-field__well.is-multi { align-items: stretch; }
.il-field__icon { position: relative; z-index: 1; display: grid; place-items: center; padding: 6px 0 0 calc(var(--w) * 1px + 10px); color: var(--ink-soft); }
.il-field__icon + .il-field__input { padding-left: 8px; }
.il-field__suffix { position: relative; z-index: 1; padding: 6px 14px 0 0; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.il-field__hint { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-soft); }
.il-field__msg:empty { display: none; }
.il-field.is-error .il-field__well { --wall: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.il-field.is-error .il-field__well:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.il-field__err { --d: 3; --c: 3; display: inline-block; }
.il-field__err > .il-face { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: 700 13px/18px var(--font-body); }
.il-field__err .il-icon { width: 15px; height: 15px; }
.il-field--sm .il-field__well { min-height: 40px; --w: 4; }
.il-field--sm .il-field__input { padding-top: calc(var(--w) * 1px + 5px); padding-bottom: 5px; font-size: 14px; }
.il-field.is-disabled .il-field__well { opacity: .6; }
.il-shake { animation: il-shake 360ms var(--ease-sink); }
@keyframes il-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 90% { transform: translateX(1px); } }

/* ==========================================================================
   Select + Menu + popups
   ========================================================================== */
.il-select { display: grid; gap: 7px; min-width: 0; }
.il-anchor { position: relative; display: inline-block; }
.il-select .il-anchor { display: block; }
.il-select__btn { --d: 5; --lift: 2; --sink: 4; display: block; width: 100%; }
.il-select__btn > .il-face { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 14px; font: 700 15px/1 var(--font-body); }
.il-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.il-select__value.is-placeholder { color: var(--ink-soft); }
.il-select__lead { color: var(--ink-soft); }
.il-select__chev { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--surface-sunk); box-shadow: var(--shadow-recess); transition: transform var(--dur-slide) var(--ease-slide); }
.il-select__chev .il-icon { width: 16px; height: 16px; }
.il-select__btn[aria-expanded="true"] .il-select__chev .il-icon { transform: rotate(180deg); }
.il-pop { --d: 8; --c: 10; position: absolute; z-index: 60; left: 0; top: calc(100% + 8px); min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 32px)); }
.il-pop[hidden] { display: none; }
.il-pop--right { left: auto; right: 0; }
.il-pop--up { top: auto; bottom: calc(100% + 8px); }
.il-pop > .il-face { padding: 6px; }
.il-pop__list { max-height: 264px; overflow: auto; outline: none; display: grid; gap: 2px; }
.il-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; text-align: left;
  font: 600 15px/20px var(--font-body); color: var(--ink); cursor: pointer; border-radius: var(--radius-xs);
}
.il-opt small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-weight: 600; }
.il-opt__label { flex: 1; min-width: 0; }
.il-opt__icon { color: var(--ink-soft); width: 18px; height: 18px; }
.il-opt__check { width: 16px; height: 16px; stroke-width: 3; opacity: 0; color: var(--link); }
.il-opt.is-active, .il-opt:hover, button.il-opt:focus-visible { background-color: var(--surface-sunk); outline: none; }
.il-opt[aria-selected="true"] { color: var(--link); font-weight: 800; }
.il-opt[aria-selected="true"] .il-opt__check { opacity: 1; }
.il-opt.is-danger { color: var(--danger-ink); }
.il-opt.is-danger .il-opt__icon { color: var(--danger-ink); }
.il-opt kbd { font: 700 11px/1 var(--font-body); color: var(--ink-soft); padding: 4px 6px; background: var(--surface-sunk); border-radius: var(--radius-xs); }
.il-pop__sep { height: 1.5px; margin: 4px 6px; background: var(--ground-line); }

/* ==========================================================================
   Tabs — blocks standing on a strip; the chosen one rises tall
   ========================================================================== */
.il-tabs { display: grid; gap: 18px; min-width: 0; }
.il-tabs__list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 6px 0; scrollbar-width: none; }
.il-tabs__list::-webkit-scrollbar { display: none; }
.il-tab { --d: 9; --c: 7; --z: 6; --tone: var(--surface); --il-fg: var(--ink-soft); flex: none; }
.il-tab > .il-face { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font: 800 14px/1 var(--font-body); white-space: nowrap; transition: transform var(--dur-slide) var(--ease-slide), background-color var(--dur-slide) ease, color var(--dur-slide) ease; }
.il-tab .il-icon { width: 17px; height: 17px; }
.il-tab::before, .il-tab::after { transition: transform var(--dur-slide) var(--ease-slide); }
.il-tab:hover { --z: 3; --il-fg: var(--ink); }
.il-tab:active { --z: 7; }
.il-tab[aria-selected="true"] { --z: 0; --il-fg: var(--on-color); }
.il-tab[aria-selected="true"].il-tone-sky { --tone: var(--sky); }
.il-tab[aria-selected="true"].il-tone-grass { --tone: var(--grass); }
.il-tab[aria-selected="true"].il-tone-sun { --tone: var(--sun); }
.il-tab[aria-selected="true"].il-tone-coral { --tone: var(--coral); }
.il-tab[aria-selected="true"].il-tone-lilac { --tone: var(--lilac); }
.il-tab:not([aria-selected="true"]) { --tone: var(--surface); }
.il-tab__count { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: color-mix(in oklab, currentColor 14%, transparent); font-size: 11px; text-align: center; }
.il-tabs--sm .il-tab { --d: 6; --z: 4; }
.il-tabs--sm .il-tab:hover { --z: 2; }
.il-tabs--sm .il-tab[aria-selected="true"] { --z: 0; }
.il-tabs--sm .il-tab > .il-face { height: 32px; padding: 0 12px; font-size: 13px; }
.il-tabs__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ==========================================================================
   SegmentedControl — a carved tray with a block thumb that hops across
   ========================================================================== */
.il-seg {
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px;
  background-color: var(--surface-sunk); box-shadow: var(--shadow-recess-deep); border-radius: var(--radius-sm); max-width: 100%;
}
.il-seg--block { display: grid; width: 100%; }
.il-seg__thumb {
  --d: 4; --lift: 3; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform var(--dur-slide) var(--ease-slide);
}
.il-seg__thumb > .il-face { height: 100%; }
.il-seg__opt {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  height: 38px; padding: 0 18px 4px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 800 13px/1 var(--font-body); color: var(--ink-soft); transition: color var(--dur-slide) ease;
}
.il-seg__opt .il-icon { width: 16px; height: 16px; }
.il-seg__opt[aria-checked="true"] { color: var(--ink); }
.il-seg__thumb.il-tone-sky ~ .il-seg__opt[aria-checked="true"], .il-seg__thumb.il-tone-grass ~ .il-seg__opt[aria-checked="true"],
.il-seg__thumb.il-tone-sun ~ .il-seg__opt[aria-checked="true"], .il-seg__thumb.il-tone-lilac ~ .il-seg__opt[aria-checked="true"],
.il-seg__thumb.il-tone-coral ~ .il-seg__opt[aria-checked="true"] { color: var(--on-color); }
.il-seg__opt:not([aria-checked="true"]):hover { color: var(--ink); }
.il-seg__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.il-seg--sm .il-seg__opt { height: 32px; padding: 0 14px 4px 10px; font-size: 12px; }

/* ==========================================================================
   Slider — a groove, a raised fill, and a cube you drag
   ========================================================================== */
.il-slider { display: grid; gap: 8px; min-width: 0; }
.il-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.il-slider__value { font: 400 17px/1 var(--font-display); color: var(--ink); }
.il-slider__track { position: relative; height: 32px; --p: 0; }
.il-slider__groove {
  position: absolute; left: 0; right: 0; top: 9px; height: 17px; overflow: hidden;
  background-color: var(--surface-sunk); box-shadow: var(--shadow-recess-deep); border-radius: var(--radius-sm);
}
.il-slider__fill { --d: 3; position: absolute; left: 0; top: 4px; width: calc(var(--p) * (100% - 26px) / 100 + 13px); }
.il-slider__fill > .il-face { height: 10px; }
.il-slider__thumb { --d: 6; --c: 6; --sink: 3; position: absolute; top: 3px; left: calc(var(--p) * (100% - 26px) / 100); pointer-events: none; }
.il-slider__thumb > .il-face {
  width: 20px; height: 20px;
  background-image: linear-gradient(90deg, transparent 6px, var(--il-side) 6px 7.5px, transparent 7.5px 11px, var(--il-side) 11px 12.5px, transparent 12.5px);
  background-size: 100% 8px; background-position: 0 6px; background-repeat: no-repeat;
}
.il-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; z-index: 2;
}
.il-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 32px; }
.il-slider input[type="range"]::-moz-range-thumb { width: 26px; height: 32px; border: 0; }
.il-slider input[type="range"]:active { cursor: grabbing; }
.il-slider input:hover ~ .il-slider__thumb { --z: -2; }
.il-slider input:active ~ .il-slider__thumb { --z: var(--sink); }
.il-slider input:focus-visible ~ .il-slider__thumb > .il-face { outline: 3px solid var(--focus); outline-offset: 3px; }
.il-slider__flag {
  position: absolute; left: 50%; bottom: calc(100% + 8px); margin-left: -3px; padding: 4px 8px; white-space: nowrap;
  background: var(--ink); color: var(--ground); font: 800 12px/1 var(--font-body); box-shadow: var(--shadow-cast-sm);
  transform: translate(-50%, 6px); opacity: 0; transition: transform var(--dur-lift) var(--ease-lift), opacity var(--dur-lift) ease;
}
.il-slider input:active ~ .il-slider__thumb .il-slider__flag,
.il-slider input:focus-visible ~ .il-slider__thumb .il-slider__flag { transform: translate(-50%, 0); opacity: 1; }
.il-slider__marks { position: relative; height: 16px; margin: 0 13px; }
.il-slider__marks span { position: absolute; left: calc(var(--m) * 1%); transform: translateX(-50%); font: 700 11px/16px var(--font-body); color: var(--ink-soft); white-space: nowrap; }
.il-slider.is-disabled { opacity: .55; }

/* ==========================================================================
   Card + Cube
   ========================================================================== */
.il-card { --d: 10; --lift: 4; min-width: 0; color: inherit; text-decoration: none; }
.il-card > .il-face { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; min-width: 0; }
.il-card--sm { --d: 6; --lift: 3; }
.il-card--sm > .il-face { padding: 16px 18px; gap: 10px; }
.il-card--lg { --d: 16; --lift: 5; }
.il-card--lg > .il-face { padding: 28px 30px 30px; }
.il-card--flush > .il-face { padding: 0; }
.il-card.il-hover { cursor: pointer; }
.il-card__head { display: flex; align-items: center; gap: 12px 14px; min-width: 0; flex-wrap: wrap; }
.il-card__head > .il-cube { align-self: flex-start; }
.il-card__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.il-card__eyebrow { color: var(--il-fg2); }
.il-card__title { margin: 0; font: 400 20px/26px var(--font-display); color: var(--il-fg); }
.il-card__action { flex: none; display: flex; gap: 8px; align-items: center; max-width: 100%; }
.il-card__body { margin: 0; color: var(--il-fg2); }
.il-tone-sky .il-card__body, .il-tone-grass .il-card__body, .il-tone-sun .il-card__body, .il-tone-coral .il-card__body, .il-tone-lilac .il-card__body { color: var(--on-color); }
.il-card__foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 4px; }

.il-cube { --d: 4; --c: 4; display: inline-block; flex: none; vertical-align: middle; }
.il-cube > .il-face { width: 38px; height: 38px; display: grid; place-items: center; }
.il-cube .il-icon { width: 20px; height: 20px; }
.il-cube--sm { --d: 3; --c: 3; }
.il-cube--sm > .il-face { width: 28px; height: 28px; }
.il-cube--sm .il-icon { width: 16px; height: 16px; }
.il-cube--lg { --d: 6; --c: 6; }
.il-cube--lg > .il-face { width: 48px; height: 48px; }
.il-cube--lg .il-icon { width: 24px; height: 24px; }

/* ==========================================================================
   Badge + Tag
   ========================================================================== */
.il-badge { --d: 3; --c: 3; --lift: 1; display: inline-block; vertical-align: middle; }
.il-badge > .il-face {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 8px;
  font: 800 11px/14px var(--font-body); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.il-badge .il-icon { width: 13px; height: 13px; stroke-width: 2.8; }
.il-badge--lg > .il-face { padding: 6px 12px; font-size: 12px; }
.il-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.il-tag > .il-face { text-transform: none; letter-spacing: .01em; font-size: 13px; line-height: 18px; padding: 4px 6px 4px 10px; }
.il-tag__x { display: grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--radius-xs); }
.il-tag__x:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
.il-tag__x:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.il-tag.is-leaving { --z: var(--d); }
.il-tag.is-leaving > .il-face { transition: transform 240ms var(--ease-out), opacity 240ms ease; opacity: 0; }

/* ==========================================================================
   Avatar — a coin with its edge stacked down-right
   ========================================================================== */
.il-avatar {
  --s: 40px; --e: 3;
  position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background-color: var(--tone); color: var(--il-fg);
  font: 400 calc(var(--s) * .32)/1 var(--font-display); letter-spacing: .01em; user-select: none;
  box-shadow: inset 1px 1px 0 var(--il-hi), 1px 1px 0 var(--il-side), 2px 2px 0 var(--il-side), 3px 3px 0 var(--il-shd), 8px 6px 0 var(--shadow);
  transition: transform var(--dur-lift) var(--ease-lift);
}
.il-avatar--deep { box-shadow: inset 1px 1px 0 var(--il-hi), 1px 1px 0 var(--il-side), 2px 2px 0 var(--il-side), 3px 3px 0 var(--il-side), 4px 4px 0 var(--il-shd), 5px 5px 0 var(--il-shd), 12px 9px 0 var(--shadow); }
.il-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.il-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 2.5px var(--ground); }
.il-avatar__status--away { background: var(--sun); }
.il-avatar__status--busy { background: var(--coral); }
.il-avatar__status--off { background: var(--ink-soft); }
.il-stack { display: inline-flex; align-items: center; padding-right: 6px; }
.il-stack .il-avatar { box-shadow: 0 0 0 2.5px var(--ground), 1px 1px 0 2.5px var(--il-side), 3px 3px 0 2px var(--il-shd); transform: translateX(calc(var(--k) * -7px)); }
.il-stack:hover .il-avatar { transform: translateX(calc(var(--k) * 2px)); }
.il-stack .il-avatar:hover { transform: translate(calc(var(--k) * 2px), -4px); }

/* ==========================================================================
   Tooltip — a little dark slab that rises above its anchor
   ========================================================================== */
.il-tip { --d: 4; --c: 6; position: fixed; z-index: 1200; pointer-events: none; }
.il-tip[hidden] { display: none; }
.il-tip > .il-face { padding: 6px 10px; max-width: 240px; font: 700 13px/18px var(--font-body); }

/* ==========================================================================
   Toast — drops in from above, lands with a bounce, its shadow arriving with it
   ========================================================================== */
.il-toasts { position: fixed; z-index: 1150; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 16px; width: min(372px, calc(100vw - 32px)); pointer-events: none; }
.il-toast { position: relative; pointer-events: auto; padding: 0 12px 10px 0; }
.il-toast__cast { position: absolute; left: 0; top: 0; right: 12px; bottom: 10px; background-color: var(--shadow); transform: translate(20px, 10px); animation: il-cast-land var(--dur-drop) linear backwards; }
.il-toast__slab { --d: 10; animation: il-drop var(--dur-drop) linear backwards; }
.il-toast__slab > .il-face { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 12px 16px 14px; }
.il-toast__text { display: grid; gap: 2px; padding-top: 2px; min-width: 0; }
.il-toast__title { font: 800 15px/21px var(--font-body); }
.il-toast__msg { font: 600 13px/19px var(--font-body); color: var(--ink-soft); }
.il-toast__act { margin-top: 8px; }
.il-toast__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: var(--tone); transform-origin: 0 0; animation: il-timer linear forwards; }
.il-toast:hover .il-toast__bar, .il-toast:focus-within .il-toast__bar { animation-play-state: paused; }
@keyframes il-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes il-drop {
  0% { transform: translateY(-120px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  10% { opacity: 1; }
  52% { transform: translateY(0) scaleY(.96); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  70% { transform: translateY(-10px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  84% { transform: translateY(0) scaleY(.985); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  92% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
@keyframes il-cast-land {
  0% { transform: translate(70px, 35px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  52% { transform: translate(20px, 10px); opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  70% { transform: translate(26px, 13px); opacity: .8; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  84% { transform: translate(20px, 10px); opacity: 1; }
  100% { transform: translate(20px, 10px); }
}
.il-toast.is-leaving .il-toast__slab { animation: il-lift-off 240ms var(--ease-out) forwards; }
.il-toast.is-leaving .il-toast__cast { animation: il-cast-off 240ms var(--ease-out) forwards; }
@keyframes il-lift-off { to { transform: translateY(-40px); opacity: 0; } }
@keyframes il-cast-off { to { transform: translate(44px, 22px) scale(.8); opacity: 0; } }

/* ==========================================================================
   Modal — a deep slab rising out of the ground; sinks back on close
   ========================================================================== */
.il-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.il-modal__scrim { position: fixed; inset: 0; background-color: var(--il-scrim); animation: il-fade 240ms linear backwards; }
.il-modal .il-modal__dlg { --d: 16; --c: 22; position: relative; width: min(540px, 100%); padding-right: 16px; animation: il-modal-in var(--dur-rise) var(--ease-rise) backwards; outline: none; }
.il-modal--sm { width: min(420px, 100%) !important; }
.il-modal--lg { width: min(720px, 100%) !important; }
.il-modal__dlg > .il-face { display: grid; gap: 18px; padding: 24px 26px 26px; }
.il-modal__head { display: flex; align-items: flex-start; gap: 14px; }
.il-modal__titles { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 2px; }
.il-modal__title { margin: 0; font: 400 24px/30px var(--font-display); }
.il-modal__body { color: var(--ink-soft); display: grid; gap: 16px; max-height: calc(100vh - 260px); overflow: auto; padding: 4px 12px 12px 0; margin: -4px -12px -12px 0; }
.il-modal__body p { margin: 0; }
.il-modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
@keyframes il-modal-in { from { opacity: 0; transform: translateY(40px); } }
.il-modal.is-closing .il-modal__scrim { animation: il-fade-out 240ms linear forwards; }
.il-modal.is-closing .il-modal__dlg { --z: var(--d); animation: il-modal-out 240ms var(--ease-out) forwards; }
.il-modal.is-closing .il-modal__dlg > .il-face { transition-duration: 240ms; transition-timing-function: var(--ease-out); }
@keyframes il-modal-out { to { opacity: 0; transform: translateY(24px); } }
@keyframes il-fade-out { to { opacity: 0; } }

/* ==========================================================================
   Progress — bar (a raised strip sliding out of the wall) + stairs
   ========================================================================== */
.il-progress { display: grid; gap: 8px; min-width: 0; --p: 0; }
.il-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.il-progress__label { font-weight: 700; color: var(--ink); }
.il-progress__value { font: 400 16px/1 var(--font-display); color: var(--ink); }
.il-progress__groove { position: relative; height: 22px; overflow: hidden; background-color: var(--surface-sunk); box-shadow: var(--shadow-recess-deep); border-radius: var(--radius-sm); }
.il-progress__fill { --d: 4; position: absolute; left: 0; top: 5px; width: 100%; transform: translateX(calc((var(--p) - 100) * 1%)); transition: transform var(--dur-grow) var(--ease-rise); }
.il-progress__fill > .il-face { height: 12px; background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(255 255 255 / .28) 7px 11px); }
.il-progress--sm .il-progress__groove { height: 16px; }
.il-progress--sm .il-progress__fill { top: 4px; --d: 3; }
.il-progress--sm .il-progress__fill > .il-face { height: 8px; }
.il-progress.is-indeterminate .il-progress__fill { width: 34%; transform: none; animation: il-shuttle 1.5s var(--ease-slide) infinite alternate; }
@keyframes il-shuttle { from { transform: translateX(-10%); } to { transform: translateX(206%); } }

.il-stairs { display: inline-flex; align-items: flex-end; gap: 3px; padding-top: 4px; }
.il-stair { --d: 7; --c: 5; --hold: calc(var(--d) - 1); position: relative; }
.il-stair > .il-face { width: 44px; height: calc(16px + var(--k) * 9px); display: grid; place-items: start center; padding-top: 4px; font: 400 13px/16px var(--font-display); }
.il-stair .il-icon { width: 16px; height: 16px; stroke-width: 3; }
.il-stair.is-todo { --z: var(--hold); }
.il-stair.is-todo > .il-face { color: var(--ink-soft); }
.il-stair.is-current { --z: 0; }
.il-stair > .il-face { transition: transform var(--dur-rise) var(--ease-rise), background-color var(--dur-slide) ease; }
.il-stair::before, .il-stair::after { transition: transform var(--dur-rise) var(--ease-rise); }
.il-stair__label { position: absolute; left: 0; top: 100%; width: calc(100% + 2px); padding-top: 4px; font: 700 10.5px/13px var(--font-body); color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-stairs--sm { gap: 2px; }
.il-stairs--sm .il-stair { --d: 4; --c: 3; }
.il-stairs--sm .il-stair > .il-face { width: 14px; height: calc(8px + var(--k) * 5px); padding: 0; }
.il-stairs--sm .il-stair .il-icon, .il-stairs--sm .il-stair__mark { display: none; }

/* ==========================================================================
   True-iso SVG: prisms (IsoChart, IsoMap)
   ========================================================================== */
.il-pr > * { transition: transform var(--dur-grow) var(--ease-rise) var(--gd, 0ms), fill var(--dur-lift) ease, stroke var(--dur-lift) ease; }
.il-pr .t { fill: var(--tone); stroke: color-mix(in oklab, var(--tone) 86%, #fff); stroke-width: 1; stroke-linejoin: round; }
.il-pr .l { fill: var(--il-side); stroke: var(--il-side); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.il-pr .r { fill: var(--il-shd); stroke: var(--il-shd); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.is-ready .il-pr > * { transition-duration: var(--dur-lift), var(--dur-lift), var(--dur-lift); transition-timing-function: var(--ease-lift), ease, ease; }

.il-chart { position: relative; width: 100%; min-width: 0; }
.il-chart svg { display: block; overflow: visible; }
.il-chart__bar { cursor: pointer; outline: none; }
.il-chart__bar:hover, .il-chart__bar:focus-visible { --hv: 7; }
.il-chart__bar:focus-visible .t { stroke: var(--focus); stroke-width: 3; }
.il-chart__bar.is-selected .t { stroke: var(--ink); stroke-width: 2.5; }
.il-chart__val { font: 400 13px/1 var(--font-display); fill: var(--ink); transition: opacity var(--dur-lift) ease; }
.il-chart.is-many .il-chart__val { opacity: 0; }
.il-chart.is-many .il-chart__bar:hover .il-chart__val, .il-chart.is-many .il-chart__bar:focus-visible .il-chart__val { opacity: 1; }
.il-chart__lab { font: 800 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
.il-chart--compact .il-chart__val { display: none; }
.il-chart--compact .il-chart__bar { cursor: default; }
.il-chart__tile .t { stroke-width: 1; }

.il-map { position: relative; width: 100%; min-width: 0; user-select: none; }
.il-map svg { display: block; overflow: visible; }
.il-map__cast { fill: var(--shadow); }
.il-tile { outline: none; }
.il-map.is-editable .il-tile { cursor: pointer; }
.il-tile:hover, .il-tile:focus-visible { --hv: 4; }
.il-tile:focus-visible .t { stroke: var(--focus); stroke-width: 3; }
.il-tile .il-pr, .il-prop { --hv: 0; }
.il-prop[role="button"] { cursor: pointer; outline: none; }
.il-prop[role="button"]:hover .il-prop__body, .il-prop[role="button"]:focus-visible .il-prop__body { --hv: 6; }
.il-prop[role="button"]:focus-visible .il-prop__body .t { stroke: var(--focus); stroke-width: 3; }
.il-prop__flag { fill: var(--tone); }
.il-prop__sail { fill: var(--surface); stroke: color-mix(in oklab, var(--surface) 80%, var(--shade)); stroke-width: 1; }
.il-prop--in .il-prop__in { animation: il-prop-drop 640ms linear backwards; animation-delay: var(--pd, 0ms); }
@keyframes il-prop-drop {
  0% { transform: translateY(-46px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  12% { opacity: 1; }
  55% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  74% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  100% { transform: translateY(0); }
}
.il-prop--out .il-prop__in { animation: il-prop-out 260ms var(--ease-out) forwards; }
@keyframes il-prop-out { to { transform: translateY(8px); opacity: 0; } }
.il-map__pop { font: 400 13px/1 var(--font-display); fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; animation: il-float 900ms var(--ease-lift) forwards; }
@keyframes il-float { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

/* ==========================================================================
   Widgets
   ========================================================================== */
.il-stat__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.il-stat__val { display: inline-flex; align-items: baseline; gap: 2px; font: 400 34px/38px var(--font-display); color: var(--il-fg); font-variant-numeric: tabular-nums; }
.il-stat__fix { font-size: .6em; color: var(--il-fg2); }
.il-stat__cap { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--il-fg2); margin-top: -6px; }
.il-stat .il-chart { margin: 0 -6px -6px; }

.il-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 16px; }
.il-hud__chip { --d: 7; --lift: 3; min-width: 0; }
.il-hud__chip > .il-face { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; min-width: 0; }
.il-hud__text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.il-hud__label { font: 800 10.5px/13px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-hud__row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.il-hud__val { font: 400 21px/24px var(--font-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.il-hud__delta { flex: none; }

.il-queue { display: grid; gap: 4px; margin: 0 -8px; }
.il-queue__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--radius-xs); transition: transform 300ms var(--ease-out), opacity 300ms ease; }
.il-queue__row + .il-queue__row { box-shadow: 0 -1.5px 0 var(--ground-line); }
.il-queue__row .il-cube { --d: 3; }
.il-queue__row .il-cube > .il-face { width: 32px; height: 32px; }
.il-queue__row .il-cube .il-icon { width: 17px; height: 17px; }
.il-queue__title { font: 800 14px/19px var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-queue__meta { font: 600 12px/17px var(--font-body); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-queue__text .il-stairs { margin-top: 6px; padding-top: 0; }
.il-queue__row.is-done .il-queue__title::after { content: " ✓"; color: var(--link); }
.il-queue__row.is-leaving { transform: translateY(6px) scale(.98); opacity: 0; }
.il-row-in { animation: il-panel-in var(--dur-rise) var(--ease-rise) backwards; }

/* ==========================================================================
   Reduced motion: keep every state, drop the travel
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .il-loader__cube { animation: none !important; }
  .il-toast__bar { animation-duration: 6s !important; }
}