/* GENERATED by scripts/ds-sync.mjs from @innovedge/design-system 3.7.3 (0c7de2d, HEAD, in origin/main) and engrama_demo origin/main (bd46a08). Do not edit. */
/* tokens: generated from tokens/ (DTCG 2025.10) by npm run build:tokens. Pages load this file and get every token; never redefine them in a page */
:host{--ground:#F3F4F7;--surface:#FFFFFF;--surface-sunken:#F9FAFB;--select-tint:#D8ECF9;--line:#E5E7EC;--control-line:#6D7283;--line-soft:#F3F4F7;--ink:#11175F;--ink-2:#3A4050;--muted:#4E5465;--navy:#11175F;--strong:#11175F;--navy-active:#1C2494;--navy-line:#1C2494;--on-navy:#FFFFFF;--on-navy-muted:#A0B8F8;--on-navy-focus:#FFFFFF;--brand-cyan:#86C9F3;--highlight:#86C9F3;--on-highlight:#11175F;--logo:#2637C9;--royal:#2637C9;--on-royal:#FFFFFF;--btn-glow:rgba(255, 255, 255, 0.1);--btn-glow-hover:rgba(255, 255, 255, 0.05);--btn-shade:rgba(17, 23, 95, 0.14);--btn-press:#1F25B1;--btn-press-inset:rgba(17, 23, 95, 0.3);--btn-shadow:rgba(17, 23, 95, 0.12);--btn-shadow-soft:rgba(17, 23, 95, 0.06);--btn-wash:rgba(241, 245, 254, 0.35);--btn-edge:rgba(38, 55, 201, 0.05);--btn-edge-hover:rgba(38, 55, 201, 0.09);--btn-veil:rgba(255, 255, 255, 0.9);--btn-veil-soft:rgba(255, 255, 255, 0.55);--btn-press-2:#F1F5FE;--btn-press-2-inset:rgba(17, 23, 95, 0.16);--btn-off-fill:#DEE6FB;--btn-off-ink:#2637C9;--btn-off-line:#C5D3F8;--btn-off-2-ink:#6D7283;--btn-off-2-line:#D0D4DD;--blue:#2637C9;--focus:#2637C9;--aura-deep:#2637C9;--aura-mid:#4E6FEE;--aura-light:#86C9F3;--aura-flash:#FFFFFF;--aura-navy:#B9DDF5;--cyan:#126791;--ai-ink:#11175F;--ai-tint:#86C9F3;--ai-line:#86C9F3;--info-tint:#D8ECF9;--green:#0E6B3D;--green-mark:#138A4F;--green-tint:#E3F4EA;--green-panel:#F0F7F3;--green-line:#C9E7D5;--amber:#8A5A00;--amber-mark:#C97A00;--amber-tint:#FDF1D6;--red:#A82D20;--red-mark:#C4352A;--red-tint:#FBE5E2;--alert-fill:#C4352A;--on-alert:#FFFFFF;--scrim:rgba(17, 23, 95, 0.26);--type-sup:#3A4050;--type-sup-tint:#F3F4F7;--type-serv:#3A4050;--type-serv-tint:#F3F4F7;--type-cli:#3A4050;--type-cli-tint:#F3F4F7;--type-con:#3A4050;--type-con-tint:#F3F4F7;--type-otr:#3A4050;--type-otr-tint:#F3F4F7;--search-fill:#E5E7EC;--search-fill-hover:#D0D4DD;--space-1:0.25rem;--space-1\.5:0.375rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--sidebar-width:4.5rem;--sidebar-width-open:12.5rem;--topbar-height:3.25rem;--control-sm:1.75rem;--control-md:2rem;--control-lg:2.25rem;--touch-target:2.75rem;--row-table:2.375rem;--row-list:3.125rem;--icon-xs:0.75rem;--icon-sm:0.875rem;--icon-md:1rem;--icon-lg:1.25rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:999px;--shadow-card:0 1px 2px rgba(17, 23, 95, 0.04);--shadow-popover:0 12px 32px rgba(17, 23, 95, 0.14), 0 2px 6px rgba(17, 23, 95, 0.06);--shadow-dialog:0 24px 64px rgba(17, 23, 95, 0.22);--font-sans:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.8125rem;--font-size-md:0.875rem;--font-size-lg:0.9375rem;--font-size-xl:1rem;--font-size-2xl:1.0625rem;--font-size-3xl:1.125rem;--font-size-4xl:1.375rem;--font-size-5xl:1.625rem;--font-size-6xl:3.25rem;--line-height-xs:1rem;--line-height-sm:1.125rem;--line-height-md:1.25rem;--line-height-lg:1.375rem;--line-height-xl:1.5rem;--line-height-2xl:1.5rem;--line-height-3xl:1.625rem;--line-height-4xl:1.75rem;--line-height-5xl:1.875rem;--line-height-6xl:3.25rem;--white:#FFFFFF;--black:#000000;--motion-instant:120ms;--motion-quick:150ms;--motion-enter:180ms;--motion-sheet:240ms;--motion-rise:400ms;--motion-pop:600ms;--motion-ease-pop:cubic-bezier(0.2, 0.8, 0.2, 1);--blue-50:#F1F5FE;--blue-100:#DEE6FB;--blue-200:#C5D3F8;--blue-300:#A0B8F8;--blue-400:#7191F4;--blue-500:#4E6FEE;--blue-600:#344EE1;--blue-700:#2637C9;--blue-800:#1F25B1;--blue-900:#1C2494;--blue-950:#11175F;--neutral-50:#F9FAFB;--neutral-100:#F3F4F7;--neutral-200:#E5E7EC;--neutral-300:#D0D4DD;--neutral-400:#9B9FAD;--neutral-500:#6D7283;--neutral-600:#4E5465;--neutral-700:#3A4050;--neutral-800:#242835;--neutral-900:#151820;--neutral-950:#06070B;--glacier-50:#EEF7FC;--glacier-100:#D8ECF9;--glacier-200:#B9DDF5;--glacier-300:#86C9F3;--glacier-400:#5EA9D6;--glacier-500:#438FBB;--glacier-600:#2A78A3;--glacier-700:#126791;--glacier-800:#01547A;--glacier-900:#014768;--glacier-950:#002D43;--flare-50:#FCF4E7;--flare-100:#F9E5C7;--flare-200:#F5D299;--flare-300:#F2B33D;--flare-400:#D09303;--flare-500:#AF7B03;--flare-600:#936701;--flare-700:#7E5700;--flare-800:#674701;--flare-900:#583C00;--flare-950:#392500;--paper-50:#FAFAF8;--paper-100:#FAF9F6;--paper-200:#EDECE6;--paper-300:#DAD7CF;--paper-400:#A5A29A;--paper-500:#77756D;--paper-600:#58564E;--paper-700:#44413A;--paper-800:#2B2923;--paper-900:#1A1812;--paper-950:#090703;--danger-50:#FCF3F1;--danger-100:#FBE5E2;--danger-200:#F6CFCA;--danger-300:#F1AFA6;--danger-400:#E48275;--danger-500:#D75A4D;--danger-600:#C4352A;--danger-700:#A82D20;--danger-800:#88281D;--danger-900:#6C2A21;--danger-950:#421C17;--warning-50:#FAF5E9;--warning-100:#FDF1D6;--warning-200:#F6DEB3;--warning-300:#EEC180;--warning-400:#DC9A3E;--warning-500:#C97A00;--warning-600:#A56801;--warning-700:#8A5A00;--warning-800:#6F490A;--warning-900:#593E18;--warning-950:#352611;--success-50:#F0F7F3;--success-100:#E3F4EA;--success-200:#C9E7D5;--success-300:#A2D4B6;--success-400:#6DB88C;--success-500:#40A16B;--success-600:#138A4F;--success-700:#0E6B3D;--success-800:#145834;--success-900:#1F4A30;--success-950:#182F20;--web-ground:#FAF9F6;--web-ink:#11175F;--web-signature:#2637C9;--web-on-signature:#FAF9F6;--web-deep:#11175F;--web-on-deep:#FAF9F6;--web-accent:#F2B33D;--web-line:#EDECE6;--web-section:6rem;--web-section-compact:4rem;--web-gutter:2.5rem;--web-gutter-compact:1rem;--web-wrap:70rem;--web-wrap-wide:80rem;--web-control:3rem}

/* base: the page itself */
body { margin: 0; background: var(--ground); font-family: var(--font-sans); color: var(--ink); }
/* Innovedge Labs — component styles. Every colour, size and radius is a token from tokens.css.
   Prefix ie-. Sizes are rem and controls use min-height, so text resize (WCAG 1.4.4) and text spacing (1.4.12) reflow instead of clipping. */

.ie, .ie * { box-sizing: border-box; }
.ie { font-family: var(--font-sans); color: var(--ink); font-size: var(--font-size-sm); line-height: var(--line-height-sm); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.ie-ground { background: var(--ground); }
.ie svg.ie-icon { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ie svg.ie-icon.sm { width: var(--icon-sm); height: var(--icon-sm); }
.ie svg.ie-icon.lg { width: var(--icon-lg); height: var(--icon-lg); }
.ie :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ie-skip { position: absolute; left: .5rem; top: -2.75rem; background: var(--strong); color: var(--surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-weight: 600; z-index: 100; text-decoration: none; }
.ie-skip:focus { top: .5rem; }

/* ---------- Button ---------- */
.ie-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-full); font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); cursor: pointer; text-align: center;
  background: var(--surface); color: var(--strong); border: 1px solid var(--control-line); }
/* Focus: a 3px ring flush on the button's edge, in strong (Midnight; near-white in dark). Flush, because a ring in focus blue vanishes against the blue primary. Buttons only */
.ie-btn:focus-visible { outline: 3px solid var(--strong); outline-offset: 0; }
/* Primary and secondary share one build: the face is flat and the light from above is a diffuse glow on it. Hover and pressed are pseudo-element layers whose opacity changes (only opacity and transform animate); nothing moves on hover.
   Primary: royal face + btn-glow fading out over the top half. Hover: btn-glow-hover warms it and btn-shade comes onto the face, so the label's contrast holds or rises (the glow alone would lower it). Pressed: glow off, face to btn-press, a faint inset top shadow, scale .98 */
.ie-btn.primary { background: linear-gradient(180deg, var(--btn-glow), transparent 55%), var(--royal); color: var(--on-royal); border-color: var(--royal); box-shadow: 0 1px 2px var(--btn-shadow), 0 2px 6px var(--btn-shadow-soft); }
.ie-btn.primary:not(.hl)::before { background: linear-gradient(180deg, var(--btn-glow-hover), transparent 55%), linear-gradient(var(--btn-shade), var(--btn-shade)); }
.ie-btn.primary:not(.hl)::after { background: linear-gradient(180deg, var(--royal), var(--btn-press)); box-shadow: inset 0 1px 3px var(--btn-press-inset); }
/* Secondary (the plain .ie-btn): surface face with a whisper of btn-wash toward the bottom and a faint royal tint on the low edge. Hover: the veil brightens the face and the low edge warms. Pressed: the face tints and an inset top shadow shows */
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]) { background: linear-gradient(180deg, transparent, var(--btn-wash)), var(--surface); box-shadow: inset 0 -3px 5px -3px var(--btn-edge), 0 1px 2px var(--btn-shadow), 0 2px 6px var(--btn-shadow-soft); }
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl)::before { background: linear-gradient(180deg, var(--btn-veil), var(--btn-veil-soft)); box-shadow: inset 0 -3px 5px -3px var(--btn-edge-hover); }
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl)::after { background: var(--btn-press-2); box-shadow: inset 0 1px 3px var(--btn-press-2-inset); }
.ie-btn.primary:not(.hl)::before, .ie-btn.primary:not(.hl)::after, .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl)::before, .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity var(--motion-instant) ease-out; }
.ie-btn:where(.primary:not(.hl), :not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl)) { position: relative; isolation: isolate; transition: transform var(--motion-instant) ease-out; } /* the :where keeps this at .ie-btn's own specificity: it wins over the reset above by coming later, and a button its container places absolutely (the input's inline button) stays so */
@media (hover: hover) {
  .ie-btn.primary:not(.hl):hover:not([disabled]):not([aria-disabled="true"])::before, .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl):hover:not([disabled]):not([aria-disabled="true"])::before { opacity: 1; }
  .ie-btn.primary.hl:hover:not([disabled]):not([aria-disabled="true"]) { background: linear-gradient(180deg, var(--btn-glow-hover), transparent 55%), linear-gradient(var(--btn-shade), var(--btn-shade)), linear-gradient(180deg, var(--btn-glow), transparent 55%), var(--royal); } /* a lit (.hl) button's pseudo-elements draw the tour ring, so its hover is on the face itself */
}
@media (prefers-reduced-motion: no-preference) { .ie-btn.primary:active:not([disabled]):not([aria-disabled="true"]), .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.98); } } /* reduced motion: no scale, the layer swap alone shows the press */
.ie-btn.primary:not(.hl):active:not([disabled]):not([aria-disabled="true"])::before, .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl):active:not([disabled]):not([aria-disabled="true"])::before { opacity: 0; }
.ie-btn.primary:not(.hl):active:not([disabled]):not([aria-disabled="true"])::after, .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]):not(.hl):active:not([disabled]):not([aria-disabled="true"])::after { opacity: 1; }
.ie-btn.primary.hl:active:not([disabled]):not([aria-disabled="true"]) { background: var(--btn-press); }
.ie-btn.ai { background: var(--ai-tint); color: var(--ai-ink); border-color: var(--ai-line); }
.ie-btn.ai .ie-icon { color: var(--cyan); }
.ie-btn.ghost { background: transparent; border-color: transparent; color: var(--blue); padding: 0 var(--space-1\.5); }
@media (hover: hover) { .ie-btn.ghost:hover { text-decoration: underline; } }
.ie-btn.danger { background: var(--red-tint); color: var(--red); border-color: var(--red); }
.ie-btn.lg { min-height: var(--control-lg); padding: 0 .875rem; }
.ie-btn.icon { width: var(--control-md); padding: 0; color: var(--ink-2); }
.ie-btn.icon.bare { border-color: transparent; background: transparent; }
@media (hover: hover) { .ie-btn.icon.bare:hover { background: var(--surface-sunken); } }
.ie-btn.add { width: var(--touch-target); min-height: var(--touch-target); padding: 0; border-radius: var(--radius-full); background: var(--royal); color: var(--on-royal); border-color: var(--royal); }
.ie-btn[disabled], .ie-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
/* Disabled primary and secondary keep their own colours instead of fading: flat, no glow, no shadow */
.ie-btn.primary[disabled], .ie-btn.primary[aria-disabled="true"] { opacity: 1; background: var(--btn-off-fill); color: var(--btn-off-ink); border-color: var(--btn-off-line); box-shadow: none; }
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current])[disabled], .ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current])[aria-disabled="true"] { opacity: 1; background: transparent; color: var(--btn-off-2-ink); border-color: var(--btn-off-2-line); box-shadow: none; }
@media (pointer: coarse) { .ie-btn.icon, .ie-btn.ghost { min-width: var(--touch-target); min-height: var(--touch-target); } .ie-btn { min-height: var(--touch-target); } }
.ie-badge-host { position: relative; display: inline-flex; }
.ie-notif { position: absolute; top: -.375rem; right: -.375rem; min-width: 1rem; height: 1rem; padding: 0 var(--space-1); border-radius: var(--radius-full);
  background: var(--alert-fill); color: var(--on-alert); font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); text-align: center; }

/* ---------- Status ---------- */
.ie-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: .3125rem; min-height: 1.375rem; padding: .125rem .5625rem; border-radius: var(--radius-full); font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); border: 1px solid transparent; }
.ie-pill .ie-icon { width: var(--icon-xs); height: var(--icon-xs); }
.ie-pill.ok { background: var(--green-tint); color: var(--green); }
.ie-pill.warn { background: var(--amber-tint); color: var(--amber); }
.ie-pill.bad { background: var(--red-tint); color: var(--red); }
.ie-pill.info { background: var(--select-tint); color: var(--blue); }
.ie-pill.review { background: var(--ai-tint); color: var(--ai-ink); border-color: var(--ai-line); }
.ie-pill.review .ie-icon { color: var(--cyan); }
.ie-pill.hold { background: var(--strong); color: var(--surface); }
.ie-pill.na { background: transparent; color: var(--ink-2); border: 1px dashed var(--control-line); }
.ie-pill.neutral { background: var(--line-soft); color: var(--ink-2); }
.ie-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: var(--radius-full); flex: none; }
.ie-dot.ok { background: var(--green-mark); } .ie-dot.warn { background: var(--amber-mark); } .ie-dot.bad { background: var(--red-mark); } .ie-dot.info { background: var(--blue); }
.ie-due { font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-due.ok { color: var(--muted); font-weight: 500; } .ie-due.warn { color: var(--amber); } .ie-due.bad { color: var(--red); }
.ie-rollup { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ie-rollup .via { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-rollup .via a { color: var(--blue); font-weight: 600; text-decoration: none; }

.ie-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; min-height: 1.25rem; padding: 0 .4375rem; border-radius: var(--radius-full);
  background: var(--select-tint); color: var(--blue); font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); }
.ie-count.on-navy { background: var(--highlight); color: var(--on-highlight); }

.ie-tag { display: inline-flex; align-items: center; min-height: 1.375rem; padding: .125rem .5625rem; border-radius: var(--radius-sm); background: var(--line-soft); color: var(--ink-2); font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); }
.ie-tag.principal { background: var(--select-tint); color: var(--strong); font-weight: 700; }
.ie-tag.current { background: transparent; border: 1px solid var(--blue); color: var(--blue); font-weight: 600; }

/* ---------- Forms ---------- */
.ie-field { display: flex; flex-direction: column; gap: var(--space-1\.5); min-width: 0; }
.ie-field > label, .ie-field > .lbl { font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-field .req { font-weight: 400; color: var(--muted); }
.ie-field .help { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-field .err { display: flex; gap: var(--space-1\.5); align-items: flex-start; font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--red); }
.ie-field .err .ie-icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; }
.ie-input, .ie-textarea { all: unset; cursor: text; box-sizing: border-box; width: 100%; min-height: var(--control-lg); padding: var(--space-2) var(--space-3); border: 1px solid var(--control-line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-textarea { min-height: 4.5rem; display: block; white-space: pre-wrap; }
.ie-input::placeholder, .ie-textarea::placeholder { color: var(--muted); }
.ie-input:focus-visible, .ie-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-input[aria-invalid="true"], .ie-textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.ie-input[disabled] { opacity: .55; cursor: not-allowed; }
.ie-input.with-icon { padding-right: 2.25rem; }
.ie-inputwrap { position: relative; }
.ie-inputwrap .ie-btn { position: absolute; right: .125rem; top: 50%; transform: translateY(-50%); }

.ie-search { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--control-line); border-radius: var(--radius-full); background: var(--surface); color: var(--muted); min-width: 0; }
.ie-search input { all: unset; flex: 1; min-width: 0; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-search input::placeholder { color: var(--muted); }
.ie-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-kbd { font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); border: 1px solid var(--control-line); border-radius: var(--radius-sm); padding: 0 .3125rem; }

.ie-chips { display: flex; gap: var(--space-1\.5); flex-wrap: wrap; }
.ie-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--control-line); background: var(--surface); color: var(--strong); font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); cursor: pointer; }
.ie-chip .n { color: var(--muted); font-weight: 500; }
.ie-chip[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--surface); }
.ie-chip[aria-pressed="true"] .n { color: inherit; }
.ie-chips.inline .ie-chip { min-height: var(--control-sm); font-size: var(--font-size-xs); padding: 0 .625rem; }
.ie-chips.inline .ie-chip[aria-pressed="true"] { background: var(--select-tint); border-color: var(--blue); color: var(--blue); }
.ie-chips.inline .ie-chip[aria-pressed="true"] .n { color: var(--blue); }
.ie-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-chip.removable { background: var(--select-tint); border-color: var(--select-tint); color: var(--blue); min-height: var(--control-sm); font-size: var(--font-size-xs); }

.ie-check { display: flex; align-items: center; gap: .625rem; min-height: var(--control-sm); font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); cursor: pointer; }
.ie-check input { appearance: none; margin: 0; width: 1rem; height: 1rem; border: 1.5px solid var(--control-line); border-radius: 3px; display: grid; place-content: center; background: var(--surface); flex: none; }
.ie-check input:checked { border-color: var(--blue); }
.ie-check input:checked::after { content: ""; width: .5rem; height: .25rem; border: solid var(--blue); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.ie-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-check .n { margin-left: auto; color: var(--muted); font-size: var(--font-size-xs); }
@media (pointer: coarse) { .ie-check { min-height: var(--touch-target); } }
.ie-facet { display: flex; flex-direction: column; gap: .125rem; }
.ie-facet h4 { margin: 0 0 var(--space-1\.5); font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ie-facet .more { all: unset; cursor: pointer; color: var(--blue); font: 600 var(--font-size-xs)/var(--line-height-sm) var(--font-sans); padding-left: var(--space-3); margin-top: .125rem; }
.ie-facet .more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ie-seg { display: inline-flex; border: 1px solid var(--control-line); border-radius: var(--radius-full); padding: .125rem; background: var(--surface); }
.ie-seg button { all: unset; cursor: pointer; min-height: 1.5rem; padding: 0 var(--space-3); border-radius: var(--radius-full); font: 500 var(--font-size-sm)/1.5rem var(--font-sans); color: var(--ink); }
.ie-seg button[aria-pressed="true"] { background: var(--select-tint); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ie-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.ie-select { display: inline-flex; align-items: center; gap: .625rem; min-height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--control-line); border-radius: var(--radius-full); background: var(--surface); font: 500 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); cursor: pointer; }
.ie-select .ie-icon { color: var(--muted); width: var(--icon-sm); height: var(--icon-sm); }
@media (pointer: coarse) { .ie-input, .ie-select { min-height: var(--touch-target); } } /* after .ie-select's own min-height: same specificity, the later rule wins */

.ie-switch { all: unset; cursor: pointer; width: 2.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--control-line); position: relative; flex: none; }
.ie-switch::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: var(--radius-full); background: var(--surface); transition: transform var(--motion-quick); }
.ie-switch[aria-checked="true"] { background: var(--blue); }
.ie-switch[aria-checked="true"]::after { transform: translateX(1rem); }
.ie-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* date picker */
.ie-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-popover); padding: var(--space-3); width: 20rem; }
.ie-cal .hd { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.ie-cal .hd b { flex: 1; text-align: center; font: 700 var(--font-size-md)/var(--line-height-md) var(--font-sans); }
.ie-cal table { border-collapse: collapse; width: 100%; }
.ie-cal th { font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); padding: var(--space-1) 0; text-align: center; }
.ie-cal td { padding: 1px; text-align: center; }
.ie-cal td button { all: unset; box-sizing: border-box; width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-md); display: inline-grid; place-items: center; cursor: pointer; font: 500 var(--font-size-sm)/1 var(--font-sans); color: var(--ink); }
@media (hover: hover) { .ie-cal td button:hover { background: var(--select-tint); } }
.ie-cal td button[aria-selected="true"] { background: var(--royal); color: var(--on-royal); font-weight: 700; }
.ie-cal td button[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--blue); }
.ie-cal td button.out { color: var(--muted); }
.ie-cal td button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ie-cal .ft { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }

/* dropzone */
.ie-drop { border: 2px dashed var(--control-line); border-radius: var(--radius-xl); padding: 1.625rem 1.125rem; text-align: center; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: .625rem; }
.ie-drop .ie-btn { max-width: 100%; white-space: normal; } /* the product's own label in a box that cannot wrap buttons to a second line: the one place a label may wrap */
.ie-drop.is-over { background: var(--select-tint); border-color: var(--blue); }
.ie-drop .ttl { font: 700 var(--font-size-lg)/var(--line-height-lg) var(--font-sans); }
.ie-drop .sub { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }

/* ---------- Navigation ---------- */
.ie-avatar { --avatar: 1.75rem; width: var(--avatar); height: var(--avatar); border-radius: var(--radius-full); background: var(--royal); color: var(--on-royal); font: 700 var(--font-size-xs)/var(--avatar) var(--font-sans); text-align: center; flex: none; display: inline-block; }
.ie-avatar.lg { --avatar: 2.5rem; font-size: var(--font-size-sm); }
/* An avatar that is a control (the rail's account menu) takes a touch-target hit area on touch: padding round the circle, which keeps its size (the fill stops at the content box), and an equal negative margin, so nothing around it moves */
@media (pointer: coarse) { :is(button, a).ie-avatar { --hit: max(0px, (var(--touch-target) - var(--avatar)) / 2); box-sizing: content-box; padding: var(--hit); margin: calc(-1 * var(--hit)); background-clip: content-box; } }
.ie-avatar.neutral { background-color: var(--line-soft); color: var(--ink-2); } /* the colour alone: a background shorthand here would undo the touch rule's background-clip */
.ie-avatars { display: inline-flex; }
.ie-avatars .ie-avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -.25rem; }
.ie-avatars .ie-avatar:first-child { margin-left: 0; }
.ie-owner { display: inline-flex; align-items: center; gap: var(--space-1\.5); font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-owner .ie-icon { width: var(--icon-xs); height: var(--icon-xs); }

.ie-topbar { display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-height); flex-wrap: wrap; }
.ie-title { margin: 0; font: 700 var(--font-size-4xl)/var(--line-height-4xl) var(--font-sans); letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; min-width: 0; }
.ie-title a { color: var(--blue); text-decoration: none; font-weight: 600; }
@media (hover: hover) { .ie-title a:hover { text-decoration: underline; } }
.ie-title .sep { color: var(--muted); display: inline-flex; }
.ie-topbar .end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.ie-bottomnav { display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-2) var(--space-1\.5) .625rem; }
.ie-bottomnav > button { all: unset; box-sizing: border-box; cursor: pointer; } /* an item without href is a button that looks the same */
.ie-bottomnav a, .ie-bottomnav > button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--ink-2); text-decoration: none; font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); min-height: var(--touch-target); }
.ie-bottomnav a .pad, .ie-bottomnav > button .pad { width: 3.25rem; height: 1.75rem; border-radius: var(--radius-full); display: grid; place-items: center; }
.ie-bottomnav a[aria-current="page"], .ie-bottomnav > button[aria-current="page"] { color: var(--blue); }
.ie-bottomnav a[aria-current="page"] .pad, .ie-bottomnav > button[aria-current="page"] .pad { background: var(--select-tint); }
.ie-bottomnav a:focus-visible, .ie-bottomnav > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }

.ie-mtop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-1); padding: var(--space-1\.5) var(--space-2); background: var(--surface); border-bottom: 1px solid var(--line); }
.ie-mtop .ttl { min-width: 0; padding: 0 var(--space-1); }
.ie-mtop .par { font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-mtop h1 { margin: 0; font: 800 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-mtop .acts { display: flex; align-items: center; gap: .125rem; }
.ie-mtop .ie-btn.icon { width: var(--touch-target); min-height: var(--touch-target); }

.ie-sheet { background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-dialog); padding: var(--space-2) var(--space-3) .875rem; }
.ie-sheet .grab { width: 2.5rem; height: .25rem; border-radius: 2px; background: var(--control-line); margin: var(--space-1) auto .625rem; }
.ie-sheet .item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 3rem; padding: var(--space-1) .625rem; border-radius: var(--radius-md); font: 600 var(--font-size-lg)/var(--line-height-lg) var(--font-sans); cursor: pointer; }
.ie-sheet .item .ie-icon { color: var(--blue); width: var(--icon-lg); height: var(--icon-lg); }
.ie-sheet .item.lead { background: var(--select-tint); }
.ie-sheet .item small { display: block; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); }
.ie-sheet .item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.ie-tabs [role="tablist"] { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ie-tabs [role="tab"] { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1\.5); min-height: var(--control-lg); padding: 0 var(--space-3); font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ie-tabs [role="tab"][aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
@media (hover: hover) { .ie-tabs [role="tab"]:hover { color: var(--ink); } }
.ie-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.ie-tabs [role="tabpanel"] { padding: .875rem 0; }
/* refined underline tabs: tinted selected tab with a rounded royal underline */
.ie-tabs [role="tablist"] { overflow-y: hidden; }
.ie-tabs [role="tab"] { position: relative; border-bottom: 0; border-radius: 10px 10px 0 0; transition: background-color var(--motion-quick), color var(--motion-quick); }
.ie-tabs [role="tab"]::after { content: ""; position: absolute; left: .625rem; right: .625rem; bottom: 0; height: .1875rem; border-radius: 3px 3px 0 0; background: transparent; }
@media (hover: hover) { .ie-tabs [role="tab"]:hover { background: var(--surface-sunken); } }
.ie-tabs [role="tab"][aria-selected="true"] { color: var(--strong); background: var(--select-tint); }
.ie-tabs [role="tab"][aria-selected="true"]::after { background: var(--royal); }
.ie-tabs .ie-tab-ico { color: var(--muted); }
.ie-tabs [role="tab"][aria-selected="true"] .ie-tab-ico { color: var(--blue); }
.ie-tabs .ie-tab-donedot { width: .875rem; height: .875rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-mark); color: #fff; flex: none; }
.ie-tabs .ie-tab-donedot .ie-icon { width: .625rem; height: .625rem; }
@media (prefers-reduced-motion: reduce) { .ie-tabs [role="tab"] { transition: none; } }
@media (pointer: coarse) { .ie-tabs [role="tab"] { min-height: var(--touch-target); } }

.ie-steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.ie-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1\.5); position: relative; font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); text-align: center; }
.ie-step::before { content: ""; position: absolute; top: .6875rem; left: calc(-50% + .875rem); right: calc(50% + .875rem); height: .125rem; background: var(--control-line); }
.ie-step:first-child::before { display: none; }
.ie-step .c { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); border: 1.5px solid var(--control-line); background: var(--surface); display: grid; place-items: center; font: 600 var(--font-size-xs)/1 var(--font-sans); color: var(--ink-2); position: relative; }
.ie-step.done .c { background: var(--green-mark); border-color: var(--green-mark); color: var(--on-navy); }
.ie-step.done::before, .ie-step.current::before { background: var(--green-mark); }
.ie-step.current .c { background: var(--strong); border-color: var(--strong); color: var(--surface); }
.ie-step.current { color: var(--ink); font-weight: 700; }
.ie-step.goal .c { border-style: dashed; }

/* ---------- Data display ---------- */
.ie-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: .875rem; }
.ie-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ie-card-head h3 { margin: 0; font: 700 var(--font-size-lg)/var(--line-height-lg) var(--font-sans); }
.ie-card-head .end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); max-width: 100%; }

.ie-overline { font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ie-stats { display: flex; gap: var(--space-8); align-items: flex-end; flex-wrap: wrap; }
.ie-stat .l { font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); }
.ie-stat .v { font: 800 var(--font-size-5xl)/var(--line-height-5xl) var(--font-sans); color: var(--ink); }
.ie-stat .v.ok { color: var(--green); } .ie-stat .v.warn { color: var(--amber); } .ie-stat .v.bad { color: var(--red); }
.ie-hero { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ie-hero .v { font: 800 var(--font-size-6xl)/var(--line-height-6xl) var(--font-sans); letter-spacing: -0.02em; }
.ie-hero .v.bad { color: var(--red); } .ie-hero .v.warn { color: var(--amber); } .ie-hero .v.ok { color: var(--green); }
.ie-hero .what { font: 700 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); }
.ie-formula { margin-top: var(--space-2); font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-formula summary { cursor: pointer; color: var(--blue); font-weight: 600; width: fit-content; }
.ie-formula summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ie-list { list-style: none; margin: 0; padding: 0; }
.ie-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-list); padding: var(--space-2) 0; border-top: 1px solid var(--line-soft); }
.ie-row:first-child { border-top: 0; }
.ie-row .main { flex: 1; min-width: 0; }
.ie-row .t { font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.ie-row .m { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-row > .ie-icon { color: var(--blue); }
.ie-more { display: flex; align-items: center; gap: .625rem; justify-content: space-between; padding-top: .625rem; border-top: 1px solid var(--line-soft); font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); flex-wrap: wrap; }
.ie-pager { display: inline-flex; gap: var(--space-1); align-items: center; }
.ie-pager .ie-btn[aria-current="page"] { background: var(--select-tint); color: var(--blue); border-color: var(--blue); }

.ie-table-wrap { overflow-x: auto; }
.ie-table { width: 100%; border-collapse: collapse; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-table caption { text-align: left; padding: 0; }
.ie-table th { text-align: left; font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); background: var(--surface-sunken); padding: .5625rem var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ie-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); font: inherit; color: inherit; }
.ie-table th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-table th[aria-sort] { color: var(--ink); }
.ie-table th .ie-icon { width: var(--icon-xs); height: var(--icon-xs); }
.ie-table td { padding: var(--space-1\.5) var(--space-3); min-height: var(--row-table); border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: middle; }
.ie-table td.name { color: var(--ink); min-width: 13rem; }
.ie-table .nm { display: flex; align-items: center; gap: .625rem; }
.ie-table .nm b { display: block; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-table .nm small { display: block; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-tile { width: 1.625rem; height: 1.625rem; border-radius: var(--radius-md); background: var(--select-tint); color: var(--blue); display: grid; place-items: center; flex: none; }
.ie-tile .ie-icon { width: var(--icon-sm); height: var(--icon-sm); }
.ie-tile.lg { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); }
.ie-tile.lg .ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
.ie-tile.bad { background: var(--red-tint); color: var(--red); }

.ie-fields { display: grid; grid-template-columns: minmax(6.5rem, 9.25rem) 1fr auto; }
.ie-fields > * { padding: .4375rem 0; border-bottom: 1px solid var(--line-soft); }
.ie-fields .k { color: var(--muted); font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-fields .v { color: var(--ink); font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); overflow-wrap: anywhere; }
.ie-fields .v.bad { color: var(--red); }
.ie-fields .s { display: flex; align-items: center; justify-content: flex-end; padding-left: var(--space-2); }
.ie-fields .s.ai { color: var(--cyan); } .ie-fields .s.ok { color: var(--green); }
.ie-fields .ie-icon { width: var(--icon-sm); height: var(--icon-sm); }
.ie-legend { display: flex; gap: var(--space-3); align-items: center; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); flex-wrap: wrap; }
.ie-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }

.ie-segbar { display: flex; gap: var(--space-1); }
.ie-segbar i { width: 1.875rem; height: .875rem; border-radius: 4px; border: 1px solid var(--control-line); background: var(--surface); }
.ie-segbar.thin i { width: .875rem; height: .5rem; border-radius: 2px; }
.ie-segbar i.ok { background: var(--green-mark); border-color: var(--green-mark); }
.ie-segbar i.warn { background: var(--amber-tint); border-color: var(--amber-mark); }
.ie-progress { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.ie-progress .t { font: 700 var(--font-size-md)/var(--line-height-md) var(--font-sans); }
.ie-progress .m { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }

.ie-bar { display: flex; height: .625rem; border-radius: var(--radius-full); overflow: hidden; background: var(--line-soft); }
.ie-bar i { display: block; height: 100%; }
.ie-bar i.ok { background: var(--green-mark); }
.ie-bar i.warn { background: repeating-linear-gradient(135deg, var(--amber-mark) 0 4px, var(--surface) 4px 6px); }
.ie-bar i.bad { background: var(--red-mark); }
.ie-bar i + i { border-left: 2px solid var(--surface); }
.ie-barrow { display: grid; grid-template-columns: minmax(7.5rem, 9.75rem) 1fr 1.75rem; gap: var(--space-3); align-items: center; min-height: var(--control-md); }
.ie-barrow .n { font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); text-align: right; }
.ie-legend .sw { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }
.ie-legend .sw.ok { background: var(--green-mark); } .ie-legend .sw.warn { background: repeating-linear-gradient(135deg, var(--amber-mark) 0 2px, var(--surface) 2px 3px); border: 1px solid var(--amber-mark); } .ie-legend .sw.bad { background: var(--red-mark); }

.ie-links { list-style: none; margin: 0; padding: 0; }
.ie-links > li { border-top: 1px solid var(--line-soft); }
.ie-links > li:first-child { border-top: 0; }
.ie-links summary { list-style: none; display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; cursor: pointer; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
@media (pointer: coarse) { .ie-links summary { min-height: var(--touch-target); } }
.ie-links summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.ie-links summary::-webkit-details-marker { display: none; }
.ie-links summary .chev { color: var(--muted); transition: transform var(--motion-quick); display: inline-flex; }
.ie-links details[open] summary .chev { transform: rotate(90deg); }
.ie-links summary .ie-count { margin-left: auto; }
.ie-links .kids { padding: 0 0 var(--space-3) 3.625rem; display: flex; flex-direction: column; gap: .625rem; }
.ie-links .kids b { display: block; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-links .kids small { color: var(--muted); font-size: var(--font-size-xs); }

.ie-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ie-feed li { display: grid; grid-template-columns: .5rem 1fr; gap: .625rem; }
.ie-feed .ie-dot { margin-top: .3125rem; }
.ie-feed b { display: block; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-feed small { color: var(--muted); font-size: var(--font-size-xs); }

/* skeleton + states */
.ie-skel { display: block; border-radius: var(--radius-md); background: var(--line-soft); position: relative; overflow: hidden; }
.ie-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-sunken), transparent); transform: translateX(-100%); animation: ie-shim 1.4s infinite; }
@keyframes ie-shim { to { transform: translateX(100%); } }
.ie-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .625rem; padding: 1.875rem 1.125rem; max-width: 28rem; margin: 0 auto; }
.ie-state h3 { margin: var(--space-1\.5) 0 0; font: 700 var(--font-size-2xl)/var(--line-height-2xl) var(--font-sans); }
.ie-state p { margin: 0; color: var(--muted); font: 400 var(--font-size-sm)/var(--line-height-md) var(--font-sans); }
.ie-state .ref { font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }

.ie-banner { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-3); border-radius: var(--radius-lg); border: 1px solid transparent; }
.ie-banner .ie-icon { margin-top: 1px; }
.ie-banner b { display: block; font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-banner span.tx { font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-banner > span:not(.act) { flex: 1 1 12rem; min-width: 0; } /* the text takes the room; the action wraps to its own line, still on the right, only when it cannot sit beside 12rem of text */
.ie-banner .act { margin-left: auto; flex: none; }
.ie-banner.info { background: var(--info-tint); border-color: var(--info-tint); color: var(--ink); } .ie-banner.info .ie-icon { color: var(--cyan); }
.ie-banner.ok { background: var(--green-tint); border-color: var(--green-line); color: var(--ink); } .ie-banner.ok .ie-icon { color: var(--green); }
.ie-banner.warn { background: var(--amber-tint); border-color: var(--amber-mark); color: var(--ink); } .ie-banner.warn .ie-icon { color: var(--amber); }
.ie-banner.bad { background: var(--red-tint); border-color: var(--red); color: var(--ink); } .ie-banner.bad .ie-icon { color: var(--red); }

/* ---------- Evidence + document viewer ---------- */
.ie-evid { border-bottom: 1px solid var(--line-soft); padding: .625rem 0; display: grid; grid-template-columns: minmax(6.5rem, 9.25rem) 1fr; gap: var(--space-1) var(--space-3); }
.ie-evid .k { color: var(--muted); font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-evid .v { font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ie-evid .was { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); text-decoration: line-through; }
.ie-evid .src { grid-column: 2; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-evid .src button { all: unset; cursor: pointer; color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-1); }
@media (hover: hover) { .ie-evid .src button:hover { text-decoration: underline; } }
.ie-evid .src button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-evid .audit { grid-column: 2; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); display: flex; gap: var(--space-1\.5); align-items: center; }
.ie-evid.active { background: var(--select-tint); margin: 0 -.625rem; padding: .625rem; border-radius: var(--radius-md); border-bottom-color: transparent; }
.ie-doc { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: .875rem; }
.ie-doc .bar { display: flex; align-items: center; gap: var(--space-1\.5); margin-bottom: var(--space-3); font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-doc .bar .grow { flex: 1; }
.ie-doc .page { position: relative; background: #fff; color: #1d2430; border: 1px solid var(--line); border-radius: 4px; padding: 1.625rem 1.625rem 2.125rem; aspect-ratio: 8.5 / 11; max-width: 26rem; margin: 0 auto; font: 400 .6875rem/1.5 Georgia, serif; }
.ie-doc .page .ln { height: .375rem; background: var(--line); border-radius: 3px; margin: var(--space-2) 0; }
.ie-doc .page h4 { margin: 0 0 var(--space-3); text-align: center; letter-spacing: .3em; font: 700 .9375rem/1 Georgia, serif; }
.ie-doc .page .big { font: 700 .9375rem/1.3 Georgia, serif; text-align: center; margin: .625rem 0; }
.ie-hl { position: absolute; border-radius: 3px; box-shadow: 0 0 0 2px var(--blue-700); } /* on the always-white page: fixed brand steps, not themed tokens */
.ie-hl::before { content: ""; position: absolute; inset: 0; background: var(--blue-700); opacity: .16; border-radius: 3px; }
.ie-hl .tag { position: absolute; left: -.125rem; top: -1.375rem; background: var(--blue-700); color: var(--white); font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); padding: .125rem var(--space-1\.5); border-radius: 4px 4px 4px 0; white-space: nowrap; }

/* ---------- Overlays ---------- */
.ie-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-popover); padding: var(--space-2); min-width: 16rem; }
.ie-menu .item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .625rem; width: 100%; min-height: var(--control-md); padding: var(--space-1) .625rem; border-radius: var(--radius-md); font: 500 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); cursor: pointer; }
.ie-menu .item .ie-icon { color: var(--blue); }
.ie-menu .item:focus-visible { background: var(--select-tint); }
@media (hover: hover) { .ie-menu .item:hover { background: var(--select-tint); } }
.ie-menu .item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ie-menu .item.lead { background: var(--select-tint); align-items: flex-start; padding: var(--space-2) .625rem; }
.ie-menu .item.lead b { display: block; font-weight: 700; }
.ie-menu .item.lead small { display: block; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); }
.ie-menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) 0; }
.ie-menu .group { padding: var(--space-1\.5) .625rem var(--space-1); font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.ie-scrim { background: var(--scrim); }
.ie-dialog { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; overflow: hidden; }
.ie-dialog nav { background: var(--surface-sunken); border-right: 1px solid var(--line); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: .125rem; }
.ie-dialog nav h2 { margin: 0 .625rem var(--space-3); font: 700 var(--font-size-lg)/var(--line-height-lg) var(--font-sans); }
.ie-dialog nav .group { margin: .625rem .625rem var(--space-1); font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ie-dialog nav a { display: block; padding: var(--space-1\.5) .625rem; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font: 500 var(--font-size-sm)/var(--line-height-md) var(--font-sans); }
.ie-dialog nav a[aria-current="page"] { background: var(--select-tint); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ie-dialog nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ie-dialog .body { padding: var(--space-5) var(--space-6); }
.ie-dialog .head { display: flex; align-items: baseline; gap: .625rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.ie-dialog .head h3 { margin: 0; font: 700 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); }
.ie-dialog .head small { color: var(--muted); font-size: var(--font-size-xs); }
.ie-dialog .head .x { margin-left: auto; }
.ie-setrow { display: flex; align-items: center; gap: .875rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.ie-setrow .t b { display: block; font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-setrow .t small { color: var(--muted); font-size: var(--font-size-xs); }
.ie-setrow > :last-child { margin-left: auto; }
.ie-confirm { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); padding: var(--space-5) 1.375rem; max-width: 26rem; }
.ie-confirm h3 { margin: 0 0 var(--space-1\.5); font: 700 var(--font-size-2xl)/var(--line-height-2xl) var(--font-sans); }
.ie-confirm p { margin: 0 0 var(--space-4); color: var(--ink-2); font: 400 var(--font-size-sm)/var(--line-height-md) var(--font-sans); }
.ie-confirm .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }

.ie-drawer { background: var(--surface); box-shadow: var(--shadow-dialog); display: flex; flex-direction: column; height: 100%; }
.ie-drawer .head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) .875rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ie-drawer .head h3 { margin: 0; font: 700 var(--font-size-md)/var(--line-height-md) var(--font-sans); }
.ie-drawer .head small { color: var(--muted); font-size: var(--font-size-xs); }
.ie-drawer .head .end { margin-left: auto; display: flex; gap: var(--space-1); }
.ie-drawer .content { flex: 1; padding: .875rem; overflow: auto; }
.ie-drawer .foot { display: flex; align-items: center; gap: .875rem; padding: var(--space-3) .875rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ie-drawer .foot .end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.ie-panel-ok { background: var(--green-panel); border: 1px solid var(--green-line); border-radius: var(--radius-xl); padding: var(--space-4) 1.125rem; }
.ie-panel-ok .k { font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); }
.ie-panel-ok h4 { margin: .125rem 0 .625rem; font: 700 var(--font-size-2xl)/var(--line-height-2xl) var(--font-sans); }

.ie-toasts { position: fixed; left: .875rem; bottom: .875rem; display: flex; flex-direction: column; gap: var(--space-2); z-index: 60; }
.ie-toast { display: flex; align-items: center; gap: var(--space-3); background: var(--strong); color: var(--surface); border-radius: var(--radius-lg); padding: .625rem var(--space-3) .625rem var(--space-3); box-shadow: var(--shadow-popover); min-width: 16rem; max-width: 26rem; font: 500 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-toast .ie-icon { flex: none; }
.ie-toast .tx { flex: 1; }
.ie-toast button { all: unset; cursor: pointer; font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); text-decoration: underline; padding: var(--space-1\.5) var(--space-2); border-radius: var(--radius-md); }
.ie-toast button:focus-visible { outline: 2px solid var(--surface); outline-offset: 1px; }
.ie-toast.bad { background: var(--red); color: var(--surface); }

.ie-tipwrap { position: relative; display: inline-flex; }
.ie-tip { position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%); background: var(--strong); color: var(--surface); padding: var(--space-1\.5) .625rem; border-radius: var(--radius-md); font: 500 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-popover); z-index: 50; }
.ie-tip[hidden] { display: none; }
.ie-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -.3125rem; border: 5px solid transparent; border-top-color: var(--strong); }

@media (forced-colors: active) {
  .ie-btn, .ie-chip, .ie-input, .ie-card, .ie-pill, .ie-tag { border: 1px solid CanvasText; }
  .ie-btn.primary, .ie-btn:not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current]) { background: ButtonFace; color: ButtonText; box-shadow: none; } /* the glow and layers are decoration: a real border and system colours remain */
  .ie-btn.primary::before, .ie-btn.primary::after, .ie-btn:not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current])::before, .ie-btn:not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):not(.link):not([aria-current])::after { display: none; }
  .ie-btn:focus-visible { outline-color: Highlight; }
  .ie-switch[aria-checked="true"] { background: Highlight; }
  .ie-hl { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) { .ie *, .ie-skel::after { transition: none !important; animation: none !important; } }
@media (max-width: 599.98px) { .ie-dialog { grid-template-columns: 1fr; } .ie-dialog nav { border-right: 0; border-bottom: 1px solid var(--line); } .ie-evid { grid-template-columns: 1fr; } .ie-evid .src, .ie-evid .audit { grid-column: 1; } }
.ie-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--scrim); padding: .875rem; }
.ie-overlay[hidden] { display: none; }

/* BottomSheet.css */
.ie-sheet-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.ie-sheet-root.contained { position: absolute; z-index: 1; overflow: hidden; }
.ie-sheet-root .ie-sheet { width: 100%; max-height: 90%; overflow-y: auto; outline: none; }
.ie-sheet .item[disabled] { opacity: .5; cursor: not-allowed; }
.ie-sheet-root .ie-sheet:focus { outline: none; }

/* DataTable.css */
.ie-table tbody th.name { background: none; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); padding: var(--space-1\.5) var(--space-3); min-width: 13rem; border-bottom: 1px solid var(--line-soft); white-space: normal; }
.ie-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ie-table td[colspan] { text-align: center; padding: 1.375rem var(--space-3); }
.ie-table th[aria-sort] button { min-height: 1.5rem; }

/* DatePicker.css */
.ie-datepicker { position: relative; }
.ie-datepicker-pop { position: absolute; top: calc(100% + .375rem); inset-inline-start: 0; z-index: 30; }
.ie-cal { width: min(20rem, calc(100vw - 2rem)); box-sizing: border-box; }
.ie-cal table { table-layout: fixed; }
.ie-cal td button { width: 100%; height: var(--control-lg); }
@media (pointer: coarse) { .ie-cal td button { height: var(--touch-target); } }
.ie-cal td[aria-selected="true"] button { background: var(--royal); color: var(--on-royal); font-weight: 700; }
.ie-cal td[aria-selected="true"] button.out { color: var(--on-royal); }
.ie-cal td[aria-selected="true"] button[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--blue); }

/* Dialog.css */
.ie-overlay > .ie-dialog { width: min(51.25rem, 100%); max-height: 100%; overflow: auto; }
.ie-dialog.single { grid-template-columns: 1fr; }

/* DocumentViewer.css */
.ie-doc-scroll { overflow: auto; max-height: 36rem; }
.ie-doc-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-doc .page .ln { display: block; }
.ie-doc .page .at { position: relative; display: inline-block; padding: .125rem var(--space-1); }

/* Drawer.css */
.ie-drawer-host { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: var(--scrim); }
.ie-drawer.side { width: min(40rem, 100%); height: 100%; animation: ie-drawer-in var(--motion-enter) ease-out; }
@media (min-width: 600px) { .ie-drawer.side.narrow { width: min(24rem, 100%); } } /* narrow: a side panel for a short list; a phone's sheet is full width either way */
@keyframes ie-drawer-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ie-drawer.side { animation: none; } }

/* EmptyState.css */
.ie-state-actions { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center; margin-top: var(--space-1); }

/* Evidence.css */
.ie-evid-list { list-style: none; margin: 0; padding: 0; }
.ie-evid .actions { grid-column: 2; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ie-evid .src button:focus-visible { border-radius: 2px; }
@media (max-width: 599.98px) { .ie-evid .actions { grid-column: 1; } }

/* FieldList.css */
.ie-fields { margin: 0; }
.ie-fields dd { margin: 0; }
.ie-fields dt { margin: 0; }

/* Menu.css */
.ie-menu-host { position: relative; display: inline-block; }
.ie-menu-pop { position: absolute; top: 100%; inset-inline-start: 0; margin-top: var(--space-1\.5); z-index: 30; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); }
.ie-menu-pop.end { inset-inline-start: auto; inset-inline-end: 0; }
.ie-menu .item[disabled] { opacity: .55; cursor: not-allowed; }
@media (pointer: coarse) { .ie-menu .item { min-height: var(--touch-target); } }

/* MobileTopBar.css */
/* The phone bar uses 20px icons (the "lg" icon size) in every control. */
.ie-mtop .lg-icon .ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
.ie-mtop .ttl { display: flex; align-items: center; gap: var(--space-2); }
.ie-mtop .ttl-text { min-width: 0; }
.ie-mtop-brand { display: inline-flex; flex: none; }

/* SearchField.css */
.ie-search input[type="search"]::-webkit-search-cancel-button,
.ie-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Select.css */
.ie-select-host { position: relative; display: inline-block; }
.ie-select-ph { color: var(--muted); font-weight: 400; }
.ie-select[disabled] { opacity: .5; cursor: not-allowed; }
.ie-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-select-pop { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; min-width: 100%; width: max-content; max-width: 20rem; padding: var(--space-1\.5); }
.ie-select-pop ul { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.ie-select-pop .item { cursor: pointer; justify-content: space-between; }
.ie-select-pop .item.active { background: var(--select-tint); }
.ie-select-pop .item[aria-selected="true"] { font-weight: 700; }
.ie-select-pop .item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ie-select-pop .ie-select-tick { color: var(--blue); }
/* native <select> keeps the pill look; the chevron is drawn by the host */
select.ie-select { appearance: none; -webkit-appearance: none; padding-right: 2.125rem; }
select.ie-select + .ie-icon { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); width: var(--icon-sm); height: var(--icon-sm); }
@media (forced-colors: active) { .ie-select-pop .item.active { outline: 2px solid Highlight; outline-offset: -2px; } }

/* Sidebar.css */
/* Brand mark (shared by NavRail, TopBar, MobileTopBar) */
.ie-logo { display: block; flex: none; }
/* Working: Engrama's mark turning while it works on something for a few seconds (drawn by the motion module; still under reduced motion) */
.ie-working { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); font: 600 .9375rem/1.4 var(--font-sans); }
.ie-working.below { flex-direction: column; text-align: center; }
.ie-working .mark { display: block; flex: none; fill: var(--logo); overflow: visible; }
.ie-working.on-navy { color: var(--white); }
.ie-working.on-navy .mark { fill: var(--white); }

/* StatBlock.css */
.ie-statblock { display: flex; gap: var(--space-8) calc(var(--space-8) * 1.5); align-items: flex-end; flex-wrap: wrap; }
.ie-statblock-meta { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-statblock-meta a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.ie-statblock dl.ie-stats { margin: 0; }
.ie-statblock .ie-stat dd { margin: 0; }
.ie-statblock .ie-stat dt { margin: 0; }

/* Switch.css */
.ie-switch-row { display: inline-flex; align-items: center; gap: .625rem; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); cursor: pointer; min-height: var(--control-sm); }
.ie-switch[disabled] { opacity: .5; cursor: not-allowed; }
@media (pointer: coarse) { .ie-switch-row { min-height: var(--touch-target); } }

/* Toast.css */
.ie-toasts { display: flex; flex-direction: column; }
.ie-toasts-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ie-toasts-list:empty { display: none; }
.ie-toasts-list + .ie-toasts-list { margin-top: var(--space-2); }
.ie-toasts-list:empty + .ie-toasts-list { margin-top: 0; }
@media (max-width: 599.98px) { .ie-toasts-list > .ie-toast:not(:last-child) { display: none; } }

/* Tooltip.css */
.ie-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; }
.ie-tip.below { bottom: auto; top: calc(100% + .5rem); }
.ie-tip.below::before { top: auto; bottom: 100%; }
.ie-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--strong); }

/* TopBar.css */
.ie-topbar-brand { display: inline-flex; align-items: center; flex: none; }

.ie-topbar-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.ie-title .ie-count { margin-left: .125rem; }

/* Guided setup: StepDots, ChoiceCard, GuideStrip, TourTip, StepDialog */
.ie-stepdots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) .625rem; min-height: 1.25rem; } /* the caps label is wide: wrap the dots under it on a phone */
.ie-stepdots .lbl { font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.ie-stepdots .dots { display: flex; gap: var(--space-1); }
.ie-stepdots .dot { width: .5rem; height: .375rem; border-radius: var(--radius-full); background: var(--line); }
.ie-stepdots .dot.done { background: var(--blue); }
.ie-stepdots .dot.cur { width: 1.125rem; background: var(--strong); }
.ie-stepdots.dark .lbl { color: var(--on-navy); }
.ie-stepdots.dark .dot { background: var(--navy-line); }
.ie-stepdots.dark .dot.done { background: var(--highlight); }
.ie-stepdots.dark .dot.cur { background: var(--on-navy); }
.ie-stepdots.complete .lbl { color: var(--green); }
.ie-stepdots.complete .dot { width: .75rem; background: var(--green-mark); }

.ie-choice { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; padding: 1.125rem; border-radius: var(--radius-xl); background: var(--surface); border: 1.5px solid var(--line); text-align: left; font-family: var(--font-sans); color: var(--ink); }
@media (hover: hover) { .ie-choice:hover { border-color: var(--control-line); } }
.ie-choice.on { background: var(--select-tint); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ie-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-choice .top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.ie-choice .tile { width: 3.25rem; height: 3.25rem; border-radius: 18px; background: var(--select-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.ie-choice.on .tile { background: var(--surface); }
.ie-choice .tile.ai { background: var(--ai-tint); color: var(--cyan); }
.ie-choice .ind { width: 1.375rem; height: 1.375rem; box-sizing: border-box; border: 2px solid var(--control-line); background: var(--surface); color: var(--on-royal); display: flex; align-items: center; justify-content: center; flex: none; }
.ie-choice .ind.box { border-radius: 7px; }
.ie-choice .ind.radio { border-radius: var(--radius-full); }
.ie-choice.on .ind.box { background: var(--blue); border-color: var(--blue); color: var(--surface); }
.ie-choice.on .ind.radio { border: 7px solid var(--blue); }
.ie-choice .badge { font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--select-tint); color: var(--strong); }
.ie-choice .ttl { font: 800 var(--font-size-xl)/var(--line-height-xl) var(--font-sans); }
.ie-choice.lg .tile { width: 3.75rem; height: 3.75rem; border-radius: 20px; }
.ie-choice.lg .ttl { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); }
.ie-choice .desc { font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink-2); }
.ie-choice .ex { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
.ie-choice .exl { font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
/* the examples show at most --ie-choice-rows lines (5): a card holds one size however long its list, and a longer list scrolls inside the card, so a set of cards fits its dialog */
.ie-choice .exs { display: flex; flex-direction: column; gap: var(--space-1); max-height: calc(var(--ie-choice-rows, 5) * var(--line-height-sm) + (var(--ie-choice-rows, 5) - 1) * var(--space-1)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ie-choice .exi { display: flex; gap: var(--space-2); font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink-2); }
.ie-choice .exi::before { content: "\2022"; color: var(--blue); }

.ie-guide { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-3); border-radius: 14px; background: var(--select-tint); font-family: var(--font-sans); }
.ie-guide .tile { width: 2rem; height: 2rem; border-radius: 10px; background: var(--surface); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.ie-guide .txt { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ie-guide b { font: 700 var(--font-size-md)/var(--line-height-md) var(--font-sans); color: var(--ink); }
.ie-guide .body { font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink-2); }
.ie-guide .back { flex: none; margin-left: auto; } /* Back wraps to its own line, still on the right, only when it cannot sit beside 12rem of text */

.ie-tourtip { --glow: var(--on-navy); position: relative; width: min(23rem, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: 1.125rem; border-radius: var(--radius-xl); background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow-dialog); font-family: var(--font-sans); }
.ie-tourtip .arrow { position: absolute; width: .75rem; height: .75rem; background: var(--navy); transform: rotate(45deg); }
.ie-tourtip.bottom-end .arrow { top: -.375rem; right: 3.25rem; }
.ie-tourtip.bottom-start .arrow { top: -.375rem; left: 3.25rem; }
.ie-tourtip.top-end .arrow { bottom: -.375rem; right: 3.25rem; }
.ie-tourtip.right .arrow { left: -.375rem; top: 1.625rem; }
.ie-tourtip .ie-stepdots { justify-content: space-between; }
.ie-tourtip .main { display: flex; gap: var(--space-3); align-items: flex-start; }
.ie-tourtip .tile { width: 3rem; height: 3rem; border-radius: 16px; background: var(--highlight); color: var(--on-highlight); display: flex; align-items: center; justify-content: center; flex: none; }
.ie-tourtip .txt { display: flex; flex-direction: column; gap: var(--space-1\.5); min-width: 0; }
.ie-tourtip b { font: 600 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); }
.ie-tourtip .body { font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--on-navy); }
.ie-tourtip .back { all: unset; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.5rem; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--on-navy); text-decoration: underline; }
.ie-tourtip .back:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; border-radius: 4px; }
.ie-tourtip .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ie-tourtip .foot .act, .ie-stepdialog .foot > :last-child:not(:first-child) { margin-left: auto; } /* the main action stays on the right when the footer wraps */
.ie-tourtip .act { all: unset; white-space: nowrap; cursor: pointer; box-sizing: border-box; min-height: var(--control-lg); padding: 0 .875rem; border-radius: var(--radius-full); background: var(--on-navy); color: var(--navy); display: inline-flex; align-items: center; font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
@media (hover: hover) { .ie-tourtip .act:hover { background: var(--highlight); } }
.ie-tourtip .act:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; }
.ie-tourtip.left .arrow { right: -.375rem; top: 1.625rem; }

.ie-stepdialog { width: min(67.5rem, 100%); height: min(48.75rem, 100%); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: .875rem; padding: 1.375rem; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-dialog); font-family: var(--font-sans); color: var(--ink); }
.ie-stepdialog .head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.ie-stepdialog .head .tile { width: 2.25rem; height: 2.25rem; border-radius: 12px; background: var(--select-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.ie-stepdialog .head h2 { margin: 0; flex: 1; font: 800 var(--font-size-4xl)/var(--line-height-4xl) var(--font-sans); letter-spacing: -.01em; color: var(--strong); }
.ie-stepdialog .q { display: flex; flex-direction: column; gap: var(--space-1); }
.ie-stepdialog .q h3 { margin: 0; font: 700 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); }
.ie-stepdialog .q p { margin: 0; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink-2); }
.ie-stepdialog .content { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1.125rem; }
/* at every width the footer is pinned: the head stays, the body under it scrolls, so the one action is always whole on screen
   (a footer an app places inside the content sticks to the body's bottom) */
.ie-stepdialog-body { display: flex; flex-direction: column; gap: .875rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); }
.ie-stepdialog .content > .foot { position: sticky; bottom: 0; z-index: 1; background: var(--surface); }
.ie-stepdialog .foot { margin-top: auto; min-height: 4.125rem; box-sizing: border-box; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; padding-top: .875rem; border-top: 1px solid var(--line); }
.ie-overlay > .ie-stepdialog { max-height: 100%; }
@media (prefers-reduced-motion: reduce) { .ie-choice { transition: none; } }

/* App shell: the page never scrolls; containers do */
.ie-app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.ie-fill { flex: 1 1 auto; min-height: 0; min-width: 0; }
.ie-scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; }

/* Scrollbars: one quiet style, no arrows, no track */
.ie ::-webkit-scrollbar, .ie::-webkit-scrollbar { width: 10px; height: 10px; }
.ie ::-webkit-scrollbar-track, .ie ::-webkit-scrollbar-corner { background: transparent; }
.ie ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ie ::-webkit-scrollbar-thumb { background-color: var(--control-line); border: 3px solid transparent; border-radius: var(--radius-full); background-clip: padding-box; min-height: 32px; }
@media (hover: hover) { .ie ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); } }
@supports not selector(::-webkit-scrollbar) {
  .ie, .ie * { scrollbar-width: thin; scrollbar-color: var(--control-line) transparent; }
}

/* Popovers sit above everything and flip upward near the bottom edge (positioned by the component) */
.ie-select-pop, .ie-menu-pop { z-index: 90; }
.ie-tabs [role="tab"] .ie-tab-done { color: var(--green); }
.ie-btn.primary.icon:not([disabled]) { color: var(--on-royal); }

/* Secondary buttons pair with the primary: royal outline, strong label */
.ie-btn { white-space: nowrap; } /* a button's label never wraps: its container wraps the buttons instead */
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add) { border-color: var(--royal); }

/* ---- Partner types: one neutral tile for every type; the icon tells them apart ---- */
.ie-tile.type-sup { background: var(--type-sup-tint); color: var(--type-sup); }
.ie-tile.type-serv { background: var(--type-serv-tint); color: var(--type-serv); }
.ie-tile.type-cli { background: var(--type-cli-tint); color: var(--type-cli); }
.ie-tile.type-con { background: var(--type-con-tint); color: var(--type-con); }
.ie-tile.type-otr { background: var(--type-otr-tint); color: var(--type-otr); }
.ie-tile.ok { background: var(--green-tint); color: var(--green); }
.ie-tile.warn { background: var(--amber-tint); color: var(--amber); }
.ie-tile.ai { background: var(--ai-tint); color: var(--cyan); }
.ie-tile.idle { background: var(--surface-sunken); color: var(--muted); }

/* ---- ComplianceBar: Not on file ---- */
.ie-bar i.miss { background: var(--red-tint); box-shadow: inset 0 0 0 1.5px var(--red-mark); border-radius: 0 999px 999px 0; }
.ie-legend .sw.miss { background: var(--red-tint); border: 1.5px solid var(--red-mark); box-sizing: border-box; }
/* ComplianceBar: To review (a document not on file whose upload waits for review). The review tone of the pills
   (ai-tint fill) with a cyan ring and dots: the pill's own border is ai-line, equal to its fill, which would vanish on
   the track, so the bar marks use cyan. Dotted, so it differs from Not on file's red outline by pattern as well as hue.
   Not on file keeps its round right end only when it is the last segment. The `.miss` `:first-child` / `:only-child`
   rules further down ("Not on file alone in a bar") have the same specificity as the `:not(:last-child)` rule here and
   override it by coming later in this file: keep them after it. */
.ie-bar i.miss:not(:last-child) { border-radius: 0; }
.ie-bar i.review { background: radial-gradient(circle, var(--cyan) 0.9px, transparent 1.3px) 0 0 / 4px 4px, var(--ai-tint); box-shadow: inset 0 0 0 1.5px var(--cyan); border-radius: 0 999px 999px 0; }
.ie-bar i.review:first-child { border-radius: 999px; }
.ie-legend .sw.review { background: radial-gradient(circle, var(--cyan) 0.9px, transparent 1.3px) 0 0 / 4px 4px, var(--ai-tint); border: 1.5px solid var(--cyan); box-sizing: border-box; }
.ie-barrow .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

/* ---- ListRow that opens something: the whole row is the link ---- */
.ie-row.link { padding: 0; }
.ie-row-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); width: calc(100% + 1rem); margin: 0 -.5rem; min-height: var(--row-list); padding: var(--space-2); border-radius: var(--radius-md); }
.ie-row-go:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ie-row-go .main { flex: 1; min-width: 0; text-align: left; }
.ie-go { width: var(--control-sm); height: var(--control-sm); flex: none; border-radius: var(--radius-full); box-sizing: border-box; border: 1.5px solid var(--royal); color: var(--royal); display: grid; place-items: center; }
@media (hover: hover) { .ie-row-go:hover .ie-go { background: var(--royal); color: var(--on-royal); } }

/* ---- ExpiryTimeline ---- */
.ie-timeline { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ie-timeline figcaption { font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink-2); }
.ie-timeline .cols, .ie-timeline .labels { display: grid; gap: var(--space-1\.5); }
.ie-timeline .cols { align-items: end; height: 4.125rem; }
.ie-timeline .col { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); height: 100%; }
.ie-timeline .n { font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink); text-align: center; }
.ie-timeline i { display: block; border-radius: 4px 4px 0 0; }
.ie-timeline i.ok { background: var(--green-mark); } .ie-timeline i.warn { background: repeating-linear-gradient(135deg, var(--amber-mark) 0 4px, var(--surface) 4px 6px); } .ie-timeline i.bad { background: var(--red-mark); } .ie-timeline i.zero { background: var(--line); }
.ie-timeline .labels span { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); text-align: center; white-space: nowrap; }
/* below 1280 a label wider than its column wraps under it (a word wider than the column breaks) instead of running into its neighbours */
@media (max-width: 1279.98px) { .ie-timeline .labels span { white-space: normal; overflow-wrap: break-word; } }

/* ---- WorkspaceSwitcher ---- */
.ie-ws { position: relative; flex: none; }
.ie-ws-trigger { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding: 0 .625rem 0 var(--space-1\.5); border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); }
.ie-ws-trigger .nm { font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-ws-trigger .ie-icon { color: var(--muted); }
.ie-ws-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-ws-badge { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--navy); color: #FFFFFF; font: 800 var(--font-size-xs)/1 var(--font-sans); display: grid; place-items: center; flex: none; }
.ie-ws-pop { width: 18.75rem; box-sizing: border-box; padding: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); display: flex; flex-direction: column; gap: .125rem; }
.ie-ws-pop .ttl { padding: var(--space-1\.5) .625rem var(--space-1); font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ie-ws-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .625rem; padding: var(--space-2) .625rem; border-radius: var(--radius-md); }
@media (hover: hover) { .ie-ws-item:hover { background: var(--surface-sunken); } }
.ie-ws-item[aria-checked="true"] { background: var(--select-tint); }
.ie-ws-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ie-ws-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ie-ws-item b { font: 700 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-ws-item small { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-ws-item > .ie-icon { color: var(--royal); }
.ie-next { display: inline-flex; align-items: center; gap: var(--space-1\.5); font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); white-space: nowrap; }

/* ---- Icons sit beside the title, centred on the title's line (not on the whole block) ---- */
.ie-row, .ie-row-go { align-items: flex-start; }
.ie-row .ie-tile, .ie-row-go .ie-tile { margin-top: -.25rem; }
.ie-row .ie-go { margin-top: -.3125rem; }
.ie-row .ie-pill { margin-top: -.125rem; }
.ie-row > .ie-icon, .ie-row-go > .ie-icon { margin-top: 1px; }
.ie-row .ie-dot, .ie-row-go .ie-dot { margin-top: .3125rem; }
.ie-titled-icon { height: var(--line-height-sm); display: flex; align-items: center; flex: none; }

/* ---- TopBar: a long path shrinks (ancestors first, each down to 2.5em), then the current page, which always ends in its ellipsis; search and actions never drop to a second line ---- */
/* Past those minimums (the current page keeps 6em, or its own width when shorter) TopBar hides the oldest ancestors behind a "…" link, so no crumb that takes focus ever sits outside the bar. */
.ie-topbar { flex-wrap: nowrap; }
.ie-topbar .ie-title { flex: 1 100000 auto; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 6em; }
.ie-topbar .ie-title > * { min-width: 0; }
.ie-topbar .ie-title a { flex: 0 100 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.ie-topbar .ie-title a.ie-crumb-more { flex: none; min-width: 1.5rem; min-height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; }
@media (pointer: coarse) { .ie-topbar .ie-title a.ie-crumb-more { min-width: var(--touch-target); min-height: var(--touch-target); } }
.ie-topbar .ie-title .sep { flex: none; }
/* the title clips its overflow, so a focus ring inside it is drawn inset or its edge would be cut */
.ie-topbar .ie-title a:focus-visible { outline-offset: -2px; }
.ie-topbar .ie-title [aria-current="page"] { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ie-topbar .ie-title .ie-count { flex: none; }
.ie-topbar .end { flex: none; }
@media (max-width: 599.98px) { .ie-topbar, .ie-topbar .ie-title { flex-wrap: wrap; white-space: normal; } } /* the desktop TopBar on a phone (use MobileTopBar): it wraps */

/* TopBar search: one wide filled field (like a file manager's search). Focus lifts it and opens results under it. */
.ie-omni { position: relative; flex: 0 1 34.875rem; min-width: 15.125rem; }
.ie-omni.open { z-index: 45; }
.ie-omni-field { --omni-h: var(--control-lg); display: flex; align-items: center; gap: var(--space-3); height: var(--omni-h); padding: 0 .625rem 0 .875rem; border-radius: calc(var(--omni-h) / 2); background: var(--search-fill); color: var(--ink-2); border: 1px solid transparent; box-sizing: border-box; cursor: text; transition: background var(--motion-instant), box-shadow var(--motion-instant), border-color var(--motion-instant); }
@media (hover: hover) { .ie-omni-field:hover { background: var(--search-fill-hover); border-color: var(--control-line); } } /* the border shows hover where the fill step is small */
.ie-omni-field input { all: unset; flex: 1; min-width: 0; text-overflow: ellipsis; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-omni-field input::placeholder { color: var(--ink-2); }
.ie-omni-field .ie-btn.icon.bare:focus-visible { outline-offset: -2px; } /* the clear button's ring stays inside the field */
@media (pointer: coarse) { .ie-omni-field { --omni-h: var(--touch-target); } } /* the 44px clear button fits the field on touch (still a pill: its radius is half its height); the 52px bar holds it */
.ie-omni-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ie-omni-field .ie-kbd { margin-left: auto; }
.ie-omni.open .ie-omni-field, .ie-omni-field:focus-within { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-popover); }
.ie-omni.open .ie-omni-field { border-radius: calc(var(--omni-h) / 2) calc(var(--omni-h) / 2) 0 0; box-shadow: 0 1px 1px color-mix(in srgb, var(--navy) 6%, transparent), var(--shadow-popover); }
.ie-omni-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-radius: 0 0 20px 20px; box-shadow: var(--shadow-popover); border-top: 1px solid var(--line-soft); padding: var(--space-1\.5) 0 .625rem; max-height: min(30.125rem, 70vh); overflow-y: auto; }
.ie-omni-scopes { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) .875rem var(--space-1\.5); }
.ie-omni-scope { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1\.5); height: var(--control-sm); padding: 0 var(--space-3); border-radius: 8px; border: 1px solid var(--control-line); font: 600 var(--font-size-xs)/1 var(--font-sans); color: var(--ink-2); }
@media (hover: hover) { .ie-omni-scope:hover { background: var(--surface-sunken); } }
.ie-omni-scope.on { background: var(--select-tint); border-color: var(--blue); color: var(--strong); }
.ie-omni-scope:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-omni-head { padding: var(--space-2) .875rem var(--space-1); font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); min-height: .25rem; }
.ie-omni-head:empty { padding: .125rem 0 0; }
.ie-omni-list { list-style: none; margin: 0; padding: 0; }
.ie-omni-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--row-list); padding: var(--space-1\.5) .875rem; }
.ie-omni-row.act { background: var(--select-tint); }
.ie-omni-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ie-omni-row .t { font: 400 var(--font-size-md)/var(--line-height-md) var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-omni-row .t b { font-weight: 800; }
.ie-omni-row .m { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-omni-empty { margin: 0; padding: var(--space-3) .875rem; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--muted); }
.ie-row-pills { display: inline-flex; gap: var(--space-1\.5); flex-wrap: wrap; justify-content: flex-end; }
/* ListRow: the title and its status pills share a line, pills at the end; a name too long to sit beside them pushes them under it.
   The wrap goes by the name's own width, so the pills never squeeze it (a min-width here would count in that width and push even a short name's pill down). */
.ie-row-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1) var(--space-3); }
.ie-row-head > .t { flex: 0 1 auto; }
.ie-row-head > .ie-pill, .ie-row-head > .ie-row-pills { margin-left: auto; max-width: 100%; }
.ie-overlay > .ie-dialog.narrow { width: min(34rem, 100%); }
/* The title ellipsizes before the search shrinks: its shrink weight dwarfs the search's, so the search keeps 390px until the title is down to its 6em. */
.ie-topbar > .ie-omni { flex: 0 1 24.375rem; min-width: 11.625rem; }
.ie-topbar .end .ie-btn { white-space: nowrap; }
.ie-topbar-acts { display: contents; } /* TopBar's box around the app's actions: no box of its own, except on a medium window (below) */
/* SearchBox results: from the field's left edge, at least 24rem wide (the field may be narrower) within their room, kept inside
   the window and a clipping container by SearchBox (--ie-omni-min, --ie-omni-shift) */
@media (max-width: 1279.98px) { .ie-omni-panel { min-width: var(--ie-omni-min, min(24rem, calc(100vw - 2 * var(--space-2)))); margin-left: var(--ie-omni-shift, 0px); } } /* a margin, not a translate: the page's scroll width follows where it is drawn */
/* TopBar on a medium window (600 to 899) holds ONE line: the title steps down a size and folds its path to "…" (the line above no longer wraps),
   then the search shrinks to its icon (TopBar adds .icon-only below 9rem). Focusing the icon opens the field across the whole bar,
   its results at the bar's width, and the rest of the bar waits under it. Below 600 apps use MobileTopBar. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .ie-topbar { position: relative; }
  .ie-topbar .ie-title { font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); flex-shrink: 100000000; }
  .ie-topbar > .ie-omni { --omni-h: var(--control-lg); min-width: var(--omni-h); flex-shrink: 1000; }
  .ie-topbar > .ie-omni.icon-only:not(.open) .ie-omni-field { position: relative; justify-content: center; padding: 0; }
  .ie-topbar > .ie-omni.icon-only:not(.open) .ie-omni-field input { position: absolute; inset: 0; width: 100%; opacity: 0; } /* still the tap target and the focus stop */
  .ie-topbar > .ie-omni.icon-only:not(.open) .ie-kbd, .ie-topbar > .ie-omni.icon-only:not(.open) .ie-omni-field .ie-btn { display: none; } /* no hint, no clear button on the icon */
  .ie-topbar > .ie-omni.icon-only:not(.open) .ie-omni-field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } /* the field shows no ring of its own: the icon does */
  .ie-topbar > .ie-omni.icon-only.open { position: static; } /* the bar anchors the open field and its results */
  .ie-topbar > .ie-omni.icon-only.open .ie-omni-field { position: absolute; inset-block: 0; inset-inline: 0; margin-block: auto; }
  .ie-topbar > .ie-omni.icon-only.open .ie-omni-panel { top: calc(50% + var(--omni-h) / 2); min-width: 0; margin-left: 0; } /* it spans the bar */
  .ie-topbar:has(> .ie-omni.icon-only.open) > :not(.ie-omni) { visibility: hidden; }
  /* The app's actions give way last: their grid column narrows to nothing and clips, and TopBar hides an action that no
     longer fits whole (data-ie-clipped). The end is never narrower than the bell and Ask. The order is the shrink weights:
     title 1e8, search 1000 (the base rules' ratio), end 1; never under 1, since a line whose remaining weights sum under 1
     hands out only that fraction of the overflow. The padding, taken back by the margin, keeps focus rings inside the clip. */
  .ie-topbar .end { flex: 0 1 auto; display: grid; grid-auto-flow: column; }
  .ie-topbar .end:has(> .ie-topbar-acts:not(:empty, [data-ie-spent])) { grid-template-columns: minmax(0, max-content); }
  .ie-topbar-acts { display: flex; align-items: center; gap: inherit; min-width: 0; overflow-x: clip; padding-inline: var(--space-1\.5); margin-inline: calc(-1 * var(--space-1\.5)); }
  .ie-topbar-acts:empty, .ie-topbar-acts[data-ie-spent], .ie-topbar-acts > [data-ie-clipped] { display: none; } /* no actions, every one hidden (data-ie-spent, set by TopBar), or one that does not fit whole: no box, no room (the grid rule above has the same condition; text alone stays) */
  .ie-topbar-acts > * { flex: none; } /* an action never shrinks to its longest word: it fits whole or is hidden */
}
@media (min-width: 600px) and (max-width: 899.98px) and (pointer: coarse) { .ie-topbar > .ie-omni { --omni-h: var(--touch-target); } .ie-topbar .ie-title a { padding-block: calc((var(--touch-target) - var(--line-height-3xl)) / 2); } }
.ie-omni-field input:focus, .ie-omni-field input:focus-visible { outline: none; box-shadow: none; }
.ie-dialog .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: .125rem; align-items: start; }
.ie-dialog .head h3 { grid-column: 1; grid-row: 1; }
.ie-dialog .head small { grid-column: 1; grid-row: 2; }
.ie-dialog .head .x { grid-column: 2; grid-row: 1; margin: -.25rem -.375rem 0 0; }

/* NavRail: the desktop navigation. A narrow navy rail, icon over label (like a chat app's rail). The current page is the
   rail's one Glacier highlight, with a Midnight icon and label; focus on navy is a white ring, never Glacier. */
.ie-rail { --glow: var(--on-navy); width: 5.25rem; height: 100%; box-sizing: border-box; background: var(--navy); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 .875rem; }
.ie-rail-brand { height: 2.375rem; display: grid; place-items: center; margin-bottom: var(--space-1); flex: none; }
.ie-rail-ws { all: unset; box-sizing: border-box; cursor: pointer; flex: none; border-radius: 14px; padding: .1875rem; box-shadow: inset 0 0 0 2px var(--navy-line); }
@media (hover: hover) { .ie-rail-ws:hover { box-shadow: inset 0 0 0 2px var(--on-navy-muted); } }
.ie-rail-ws:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; }
.ie-rail-wsbadge { width: 2.5rem; height: 2.5rem; border-radius: 11px; background: var(--navy-active); color: #FFFFFF; font: 800 var(--font-size-sm)/1 var(--font-sans); display: grid; place-items: center; }
.ie-rail-add, .ie-rail-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .125rem; width: 4.5rem; padding: var(--space-1\.5) 0 .4375rem; border-radius: 14px; text-decoration: none; flex: none; }
.ie-rail-add .ic { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--on-navy); color: var(--navy); display: grid; place-items: center; } /* never Blue on Midnight */
@media (hover: hover) { .ie-rail-add:hover .ic { background: var(--highlight); } }
.ie-rail-add:focus-visible { outline: none; } /* the white ring is on the circle (below), not the tile */
.ie-rail-item .ic { position: relative; width: 2.5rem; height: 2rem; display: grid; place-items: center; color: var(--on-navy-muted); }
@media (hover: hover) { .ie-rail-item:hover { background: rgba(255,255,255,.08); } }
@media (hover: hover) { .ie-rail-item:hover .ic { color: #FFFFFF; } }
.ie-rail-item[aria-current="page"] { background: var(--highlight); }
.ie-rail-item[aria-current="page"] .ic { color: var(--on-highlight); }
.ie-rail-add .lb, .ie-rail-item .lb { font: 700 var(--font-size-xs)/.875rem var(--font-sans); color: var(--on-navy-muted); text-align: center; max-width: 4.5rem; }
.ie-rail-add .lb { color: #FFFFFF; }
@media (hover: hover) { .ie-rail-item:hover .lb { color: #FFFFFF; } }
.ie-rail-item[aria-current="page"] .lb { color: var(--on-highlight); }
.ie-rail-add:focus-visible .ic, .ie-rail-item:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; }
.ie-rail-item .cnt { position: absolute; top: -.25rem; right: -.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; box-sizing: border-box; border-radius: 9px; background: var(--highlight); color: var(--on-highlight); font: 800 var(--font-size-xs)/1.125rem var(--font-sans); text-align: center; }
.ie-rail-item[aria-current="page"] .cnt { background: var(--on-highlight); color: var(--on-navy); }
.ie-rail-items { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.ie-rail-div { width: 2.25rem; height: 1px; background: var(--navy-line); margin: .125rem 0; }
.ie-rail-fill { flex: 1 1 auto; }
.ie-rail-me { --avatar: 2.25rem; background: var(--navy-active); flex: none; font-size: var(--font-size-xs); }
.ie-rail-mebtn { border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 700; }
.ie-rail-mebtn:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; }
@media (pointer: coarse) { .ie-rail-mebtn:focus-visible { outline-offset: calc(2px - var(--hit)); } } /* the ring stays 2px off the circle, inside the touch padding */
.ie-rail-item .ic .ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
.ie-rail-add .ic .ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
/* Text fields and selects draw their focus ring inside their border, so a scrolling card never clips it. */
.ie-input:focus-visible, .ie-textarea:focus-visible, .ie-select:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
/* Lean document viewer in a dialog: the file is evidence, opened from a value */
.ie-overlay > .ie-dialog.docview { width: min(52rem, 100%); }
.ie-dialog.docview .ie-doc { border: 0; padding: 0; background: transparent; }
.ie-dialog.docview .ie-doc-scroll { max-height: min(70vh, 44rem); background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 1.125rem; }
.ie-dialog.docview .ie-doc .page { max-width: 34rem; aspect-ratio: auto; min-height: 30rem; font: 400 .75rem/1.5 Georgia, serif; }
/* ListRow in a selection list (master-detail): the selected row is tinted; actions sit outside the row's button */
.ie-row.link.has-act { display: flex; align-items: center; gap: var(--space-1); }
.ie-row.link.has-act .ie-row-go { flex: 1; min-width: 0; width: auto; margin-right: 0; }
.ie-row.sel .ie-row-go { background: var(--select-tint); }
.ie-row.sel .ie-row-go .t { color: var(--strong); }
.ie-row-act { flex: none; display: flex; align-items: center; }
/* DocumentPreview: the file by itself */
.ie-preview { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--navy) 82%, transparent); display: flex; flex-direction: column; outline: none; }
.ie-preview-bar { position: absolute; top: .875rem; right: 1.125rem; z-index: 2; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1\.5) var(--space-1) var(--space-3); border-radius: 999px; background: color-mix(in srgb, var(--navy) 92%, transparent); color: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.ie-preview-bar .meta { font: 600 var(--font-size-xs)/1 var(--font-sans); color: var(--on-navy-muted); margin-right: var(--space-2); max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-preview-bar .pct { font: 700 var(--font-size-xs)/1 var(--font-sans); min-width: 3rem; text-align: center; }
.ie-preview-bar .sep { width: 1px; height: 1rem; background: rgba(255,255,255,.25); margin: 0 var(--space-1); }
.ie-preview-bar .ie-btn.icon.bare { color: #FFFFFF; }
@media (hover: hover) { .ie-preview-bar .ie-btn.icon.bare:hover { background: rgba(255,255,255,.12); } }
.ie-preview-bar .ie-btn:focus-visible { outline: 2px solid var(--on-navy-focus); outline-offset: 2px; }
.ie-preview-scroll { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 4.125rem 1.375rem 2.75rem; }
.ie-preview-page { width: 40rem; max-width: 100%; min-height: 52rem; box-sizing: border-box; background: #FFFFFF; color: #111; padding: 3.25rem 3.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.45); font: 400 .8125rem/1.5 Georgia, "Times New Roman", serif; }
.ie-preview-page .ln { display: block; height: .4375rem; background: var(--line); border-radius: 4px; margin: .5625rem 0; }

/* ---------- One standard for rows (ListRow, table rows, queues, selection lists, field rows) ----------
   Rows sit on a hairline divider. Hover: a 1px line drawn just inside the row, 12px corners, bleeding 8px past the text; the ground stays, because a fill under ink on a white card lowers the text's contrast and a state may only raise it. Selected: select-tint fill, title in strong.
   Text never changes on hover (no underline, no colour). Focus: 2px focus ring inside the row. The arrow is a bare chevron that fills royal on hover. */
.ie-row-go { border-radius: var(--radius-md); }
@media (hover: hover) { .ie-row-go:hover:not(:focus-visible), .ie-row.link.has-act:hover { outline: 1px solid var(--line); outline-offset: -1px; } } /* a focused row keeps its focus ring */
.ie-row.link.has-act { margin: 0 -.5rem; padding: 0 var(--space-1) 0 0; border-radius: var(--radius-md); }
.ie-row.link.has-act .ie-row-go { margin: 0; width: auto; background: transparent; }
@media (hover: hover) { .ie-row.link.has-act .ie-row-go:hover:not(:focus-visible) { outline: 0; } } /* the line goes round the whole row, its actions included */
.ie-row.sel .ie-row-go, .ie-row.link.has-act.sel { background: var(--select-tint); }
.ie-row.link.has-act.sel .ie-row-go { background: transparent; }
.ie-row.sel .t { color: var(--strong); }
.ie-row.sub { padding-left: 2.5rem; min-height: 2.75rem; }
.ie-row.sub .ie-row-go { min-height: 2.5rem; }
.ie-row-exp .ie-icon { transition: transform var(--motion-quick); }
.ie-row-exp.open .ie-icon { transform: rotate(180deg); }
.ie-go { width: var(--control-sm); height: var(--control-sm); border: 0; background: transparent; color: var(--muted); }
.ie-row-go:focus-visible .ie-go { background: var(--royal); color: var(--on-royal); }
@media (hover: hover) { .ie-row-go:hover .ie-go, .ie-go-host:hover .ie-go { background: var(--royal); color: var(--on-royal); } }
.ie-row-go:active .ie-go { background: var(--strong); color: var(--surface); }
/* Tooltip floats in a portal */
.ie-tip-float { z-index: 120; white-space: normal; max-width: 18rem; }
.ie-tip-float::after { left: var(--arrow, 50%); }
.ie-tip-float::before { display: none; }
/* Icon-only buttons at lg get a 20px icon (an icon alone needs the size a label would give) */
.ie-btn.icon.lg { width: var(--control-lg); }
.ie-btn.icon.lg .ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
.ie-preview-bar { padding: var(--space-1) var(--space-1\.5); }

/* Row standard v2 (Oct 2026)
   - Leading icon: bare 16px icon in muted, centred on the title line. No tile, no colour: the status pill carries the meaning.
   - The whole row is the target. Hover: a 1px line inside the row, the ground unchanged. Selected: select-tint, title bold in blue (accent).
   - Sub-row (a version): one line, no icon, label bold in blue, meta beside it; aligned with the row's title.
   - Scroll areas that hold rows take .ie-rows: they bleed 8px on both sides so row fills and focus rings are never cropped. */
.ie-scroll.ie-rows { margin-inline: -.5rem; padding-inline: var(--space-2); }
.ie-row-ic { display: flex; align-items: center; height: var(--line-height-sm); flex: none; color: var(--muted); }
.ie-row .ie-row-ic, .ie-row-go .ie-row-ic { margin-top: 0; }
.ie-row-go { gap: var(--space-3); }
.ie-row.sel .t, .ie-row.sel .ie-row-go .t { color: var(--blue); font-weight: 700; }
.ie-row.sub { padding-left: 1.75rem; min-height: 0; border-top: 0; }
.ie-row.sub .ie-row-go { min-height: 2rem; padding-block: var(--space-1\.5); }
.ie-row.sub .main { display: block; }
.ie-row.sub .t, .ie-row.sub .m { display: inline; }
.ie-row.sub .t { margin-right: var(--space-2); }
.ie-row.sub .t { color: var(--blue); font-weight: 700; }
.ie-row.sub .m { color: var(--muted); }

/* Sub-rows (versions): the fill stays on the document row. A version is bold ink; the one on screen is bold blue. */
.ie-row.sub .t { color: var(--ink); font-weight: 700; }
.ie-row.sub.sel .ie-row-go { background: transparent; }
@media (hover: hover) { .ie-table tr.link:hover { outline: 1px solid var(--line); outline-offset: -1px; } } /* the row standard's hover: the cells keep their ground */
.ie-row.sub.sel .t { color: var(--blue); }

/* Timeline list (periods). Works with rows wrapped by a template host (display: contents). */
.ie-list.ie-timeline > :last-child .ie-row::after, .ie-list.ie-timeline > .ie-row:last-child::after { display: none; }
/* Timeline list (periods): a dot per row on the icon column, joined by a line. Only the selected row is highlighted. */
.ie-list.ie-timeline .ie-row { position: relative; border-top: 0; }
.ie-list.ie-timeline .ie-row .ie-row-go { padding-left: 2.125rem; }
.ie-list.ie-timeline .ie-row::before { content: ''; position: absolute; z-index: 1; left: .1875rem; top: .75rem; width: .625rem; height: .625rem; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--control-line); background: var(--surface); pointer-events: none; }
.ie-list.ie-timeline .ie-row::after { content: ''; position: absolute; z-index: 0; left: .4375rem; top: 1.375rem; bottom: -.75rem; width: .125rem; background: var(--line); pointer-events: none; }
.ie-list.ie-timeline .ie-row.sel::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 3px var(--select-tint); }

/* Field sub-rows (a value or a check under a document being reviewed): label column, value, trailing mark. */
.ie-row.sub.has-label .main { display: flex; align-items: baseline; gap: .625rem; }
.ie-row.sub.has-label .t { display: block; flex: 1; min-width: 0; margin: 0; }
.ie-row-fl { flex: none; width: 6rem; font: 400 var(--font-size-xs)/var(--line-height-sm) var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-row.sub .ie-row-mark { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font: 600 var(--font-size-xs)/var(--line-height-sm) var(--font-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ie-row.sub .ie-row-mark.ok { color: var(--green); } .ie-row.sub .ie-row-mark.ai { color: var(--ai-ink); } .ie-row.sub .ie-row-mark.bad { color: var(--red); }
.ie-row-subhead { list-style: none; padding: .625rem 0 .125rem 1.75rem; font: 800 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* Empty slot: a document Engrama expects but hasn't received. Dashed icon, muted title. */
.ie-row.slot .t { color: var(--ink-2); font-weight: 600; }
.ie-row.slot.sel .t { color: var(--blue); }

/* Review sub-rows (values and checks of a document in review): they open the review tip, so they take the go arrow,
   and the one whose tip is open is filled (select-tint) with a blue title. Subheads (Data, Checks) are blue. */
.ie-row.sub.rv .ie-row-go { padding-right: var(--space-1); }
.ie-row.sub.rv .ie-go { width: 1.5rem; height: 1.5rem; }
.ie-row.sub.rv.sel .ie-row-go { background: var(--select-tint); }
.ie-row.sub.rv.sel .ie-go { background: var(--blue); color: var(--surface); }
.ie-row-subhead { color: var(--blue); }

/* Where it goes: an outline of the places a document is filed under, one level per line, joined like a file tree. */
.ie-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ie-path > li, .ie-path > * > li { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 1.5rem; font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--ink); }
.ie-path .lvl-ic { display: flex; color: var(--muted); flex: none; }
.ie-path .lvl-kind { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-path .lvl-top { font-size: var(--font-size-lg); font-weight: 700; }
.ie-path .lvl-elbow { position: absolute; top: -1rem; width: .75rem; height: 1.75rem; border-left: 1.5px solid var(--control-line); border-bottom: 1.5px solid var(--control-line); border-bottom-left-radius: 6px; pointer-events: none; }
/* In a narrow column the value drops under its label instead of breaking letter by letter. */
.ie-row.sub.has-label .main { flex-wrap: wrap; row-gap: 0; }
.ie-row.sub.has-label .t { flex: 1 1 7rem; min-width: 7rem; overflow-wrap: break-word; }

/* DocumentViewer: the document inline. No well, no card in a card: the page has a hairline border and fills the width by default.
   Zoom out, Zoom in, Fit width, Fit page float top right. The page's content is written in em and scales with the page. */
.ie-viewer { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ie-viewer-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; outline: none; }
.ie-viewer-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 6px; }
.ie-viewer-page { position: relative; margin: 0 auto; box-sizing: border-box; background: #FFFFFF; color: #111; border: 1px solid var(--line); border-radius: 6px; padding: 2.6em 2.9em 2.2em; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.5; }
.ie-viewer-bar { position: absolute; top: .625rem; right: .75rem; z-index: 5; display: flex; gap: .125rem; padding: .1875rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 14px color-mix(in srgb, var(--navy) 12%, transparent); }
.ie-viewer-bar .ie-btn.icon.bare { width: var(--control-sm); height: var(--control-sm); color: var(--ink-2); }
.ie-viewer-bar .ie-btn.icon.bare.on { background: var(--select-tint); color: var(--blue); }

/* Values on a document (review and filed, same shape everywhere): a tinted box with a 1.5px outline.
   Blue = to review, green = confirmed. The one you are looking at gets a 4px halo of its colour. The page is a
   white sheet in every theme, so the marks read fixed brand steps (--blue-700, --success-600), not themed tokens. */
.ie-mark { all: unset; cursor: pointer; border-radius: 3px; padding: 0 .2em; margin: 0 -.05em; font-weight: 600; color: #111; outline-offset: 1px; }
.ie-mark.todo { background: var(--glacier-100); outline: 1.5px solid var(--blue-700); }
.ie-mark.done { background: var(--success-100); outline: 1.5px solid var(--success-600); }
.ie-mark.on.todo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-700) 28%, transparent); }
.ie-mark.on.done { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-600) 28%, transparent); }
.ie-mark:focus-visible { outline: 2px solid var(--blue-950); outline-offset: 2px; } /* Midnight, clear of the blue mark outline */
.ie-row.sub.rv .ie-row-go { padding-right: var(--space-1\.5); align-items: center; }
.ie-row.sub.rv .ie-go { margin-top: 0; }
.ie-row.sub.rv .ie-row-mark { align-self: center; }
/* A document in review: the page's edge is the accent, so you know you are working on it, not just reading it. */
.ie-viewer.rv .ie-viewer-page { border: 2px solid var(--blue); }

/* A tab that has nothing to show yet (Data before the document arrives): greyed, no pointer, no hover. */
.ie-tabs [role="tab"]:disabled, .ie-tabs [role="tab"][aria-disabled="true"] { cursor: default; color: var(--muted); opacity: .45; }
@media (hover: hover) { .ie-tabs [role="tab"]:disabled:hover, .ie-tabs [role="tab"][aria-disabled="true"]:hover { background: transparent; color: var(--muted); } }
/* "Not on file" alone in a bar: round on both ends like the bar itself; first of several (before To review): round on the left. */
.ie-bar i.miss:first-child { border-radius: 999px 0 0 999px; }
.ie-bar i.miss:only-child { border-radius: 999px; }

/* ListRow: a second line (what happens next), coloured by tone */
.ie-row .n { display: flex; align-items: center; gap: .3125rem; margin-top: .125rem; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-row .n .ie-icon { flex: none; }
.ie-row .n.bad { color: var(--red); font-weight: 600; }
.ie-row .n.warn { color: var(--amber); font-weight: 600; }
.ie-row .n.ai { color: var(--ai-ink); font-weight: 600; }
.ie-row .n.ai .ie-icon { color: var(--cyan); }
/* ListRow with actions: the actions sit inside the row's fill, and the go arrow stays last */
.ie-row.link.has-act { align-items: flex-start; padding: 0 var(--space-2) 0 0; }
.ie-row.link.has-act .ie-row-act { gap: .125rem; margin-top: var(--space-2); }
.ie-row.link.has-act .ie-row-act .ie-btn.bare { width: var(--control-sm); height: var(--control-sm); }
.ie-go.ie-go-end { all: unset; box-sizing: border-box; flex: none; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-full); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-2); cursor: pointer; }
.ie-row.link.has-act:focus-within .ie-go { background: var(--royal); color: var(--on-royal); }
@media (hover: hover) { .ie-row.link.has-act:hover .ie-go { background: var(--royal); color: var(--on-royal); } }
/* Details under a row (the stuck box): aligned with the row's title */
.ie-row-detail { list-style: none; padding: 0 0 .625rem 1.75rem; }
.ie-row.has-act:not(.link) .ie-row-act { gap: .125rem; margin-top: -.25rem; }

/* ===== One card. Every card on every page: .ie-card (the Card component in React), its title row .ie-card-head ===== */
.ie-card { box-sizing: border-box; border-radius: var(--radius-xl); padding: .875rem; display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; min-height: 0; box-shadow: none; }
.ie-card-head { flex: none; display: flex; align-items: center; gap: .625rem; min-height: var(--control-md); margin-bottom: 0; }
.ie-card-head h2, .ie-card-head h3 { margin: 0; font: 700 var(--font-size-lg)/var(--line-height-lg) var(--font-sans); color: var(--ink); flex: 1; }
.ie-card-head .count { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
/* text styles that repeat: a help line, an empty line, a section label */
.ie-help { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-empty-line { margin: 0; padding: var(--space-1) 0; font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); color: var(--muted); }
.ie-overline.blue { color: var(--blue); }
.ie-row-subhead small { display: block; margin-top: .125rem; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
/* footers of forms and dialogs: secondary then primary, on the right; optional text on the left */
.ie-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.ie-foot > span:first-child:not(:only-child) { flex: 1; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-foot.ruled { padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
/* a Select that fills its field */
.ie-select-fill { display: block; }
.ie-select-fill .ie-select-host { display: block; }
.ie-select-fill .ie-select { width: 100%; justify-content: space-between; box-sizing: border-box; }
.ie-select-fill.sm .ie-select-trigger, .ie-select-fill.sm button { min-height: var(--control-sm); }
.seg-sm.ie-seg button { min-height: var(--control-sm); line-height: var(--control-sm); font-size: var(--font-size-xs); white-space: nowrap; }
/* a text button (links inside rows and forms) */
.ie-btn.link { all: unset; cursor: pointer; color: var(--blue); font: 700 inherit; font-weight: 700; } /* a link reads as running text and wraps like it: the one .ie-btn whose label may wrap besides the dropzone's (Button README) */
@media (hover: hover) { .ie-btn.link:hover { text-decoration: underline; } }
.ie-btn.link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* field labels: the FormField look, also for a plain <label class="ie-field"> */
.ie-field > .lbl .opt { font-weight: 400; color: var(--muted); }
label.ie-field > .lbl { font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink); }
.ie-field-glow { display: block; border-radius: var(--radius-md); }

/* ===== Lists of things: FilterPanel + ListBar + DataTable ===== */
.ie-filters { padding: var(--space-4) .875rem; gap: var(--space-4); }
.ie-filters .grp { display: flex; flex-direction: column; gap: .125rem; }
.ie-filters .ie-overline { padding: 0 var(--space-1) var(--space-1\.5); }
/* plain: no card, no scroller, inside a Drawer or BottomSheet that owns the padding and the scroll */
.ie-filters.plain { display: flex; flex-direction: column; padding: 0; }
.ie-listbar { flex: none; display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: var(--space-3) .875rem; border-bottom: 1px solid var(--line); }
.ie-listbar .q { width: 17.375rem; max-width: 100%; }
.ie-listbar .count { margin-left: auto; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-listbar .ie-chips { gap: var(--space-2); align-items: center; }
.ie-table-wrap.plain { flex: 0 1 auto; min-height: 0; border: 0; border-radius: 0; overflow: auto; }
.ie-table { font: 400 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-table th { font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); padding: .625rem .875rem; }
.ie-table thead th { position: sticky; top: 0; z-index: 2; } /* the header row only: a row's name cell (th scope=row) scrolls with its row */
.ie-table td, .ie-table tbody th.name { padding: .625rem .875rem; vertical-align: middle; background: var(--surface); } /* 38px for a one-line row: --row-table (min-height does not size table cells) */
.ie-table tbody th.name { font-weight: 700; min-width: 0; }
.ie-table tr.link { cursor: pointer; }
@media (pointer: coarse) { .ie-table tr.link td, .ie-table tr.link th.name { padding-top: .8125rem; padding-bottom: .8125rem; } } /* a row you tap is at least touch-target (44px): 13 + 18 + 13 */
.ie-cell { display: flex; align-items: center; gap: .625rem; }
.ie-cell .main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.ie-cell .t { color: var(--ink-2); }
.ie-table th.name .ie-cell .t { color: var(--ink); font-weight: 700; }
.ie-cell .t.strong { font-weight: 700; font-size: var(--font-size-xs); white-space: nowrap; }
.ie-cell .t.bad { color: var(--red); }
.ie-cell .t.ai { color: var(--ai-ink); }
.ie-cell .t.none { color: var(--control-line); }
.ie-cell .s { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-cell .s.bad { color: var(--red); font-weight: 600; }
.ie-cell .s.warn { color: var(--amber); font-weight: 600; }
.ie-cell.nowrap .t, .ie-cell.nowrap .s { white-space: nowrap; }
.ie-cell-pills { display: inline-flex; gap: var(--space-1\.5); flex-wrap: wrap; white-space: nowrap; }
.ie-cell-btn { all: unset; cursor: pointer; font-weight: 700; color: var(--ink); text-align: left; }
.ie-cell-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ===== PageHeader ===== */
.ie-pagehead { flex: none; flex-direction: row; align-items: flex-start; gap: .875rem; flex-wrap: wrap; padding: 1.125rem 1.375rem; position: relative; overflow: visible; }
.ie-pagehead .main { flex: 1; min-width: 13.875rem; display: flex; flex-direction: column; gap: .125rem; }
.ie-pagehead .row { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
/* A pill the header's `pills` prop renders wraps inside the header's column instead of running past the card (words stay; no ellipsis), where .ie-pill elsewhere keeps its single line. The radius is three quarters of one text line (var(--line-height-xs), 12px at a 16px root): in rem like the pill's min-height, so it is always at least half a one-line pill's height (11px; half of 1.375rem) and the box clamps it to a fully round pill on one line, at any root font size, while at two lines it stays a rounded corner, not a lozenge. The icon (as tall as one text line) sits at the top, level with the first line. */
.ie-pagehead .row > .ie-pill { max-width: 100%; white-space: normal; align-items: flex-start; border-radius: calc(var(--line-height-xs) * .75); overflow-wrap: anywhere; }
.ie-pagehead .t { font: 700 var(--font-size-2xl)/var(--line-height-2xl) var(--font-sans); color: var(--ink); }
.ie-pagehead .m { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-pagehead .acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ===== FieldList layouts: stacked (Details) and a grid of three (the Request card) ===== */
.ie-fields.stack, .ie-fields.grid { margin: 0; display: grid; }
.ie-fields.stack { grid-template-columns: 1fr; }
.ie-fields.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem .875rem; }
.ie-fields.stack > .f, .ie-fields.grid > .f { padding: 0; border: 0; display: flex; flex-direction: column; gap: 1px; }
.ie-fields.stack > .f { padding: var(--space-2) 0; border-top: 1px solid var(--line-soft); }
.ie-fields.stack > .f > *, .ie-fields.grid > .f > * { padding: 0; border: 0; margin: 0; }
.ie-fields.stack .k, .ie-fields.grid .k { font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }
.ie-fields.stack .v, .ie-fields.grid .v { font: 600 var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.ie-fields .v.ai { color: var(--ai-ink); }
.ie-fields .v small { display: block; font: 400 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); }

/* ===== Checklist: the one add form ===== */
.ie-addbox { flex: none; display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-1\.5); border-radius: var(--radius-lg); } /* its body's radius: a box a tour can light has corners */
.ie-addbox-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--line); }
.ie-addbox-foot { flex: none; padding: .625rem 0 .125rem; background: var(--surface); }
/* an open add form owns its card: the card stops scrolling, the sunken box scrolls, the buttons stay put */
.ie-card-body:has(.ie-addbox:not(.bare)) { overflow: hidden; display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-2); margin: 0 -.5rem -.5rem; } /* the clip sits 8px out, room for the tour glow on the save; the buttons stay aligned */
.ie-card-body .ie-addbox:not(.bare) { flex: 0 1 auto; min-height: 0; }
.ie-card-body .ie-addbox:not(.bare) > .ie-addbox-body { flex: 0 1 auto; min-height: 0; overflow: auto; }
.ie-card-body:has(.ie-addbox:not(.bare)) > :not(.ie-addbox):not(.sc-host-x) { flex: 0 1000 auto; min-height: 0; overflow: hidden; }
.ie-checklist { display: flex; flex-direction: column; gap: .125rem; }
.ie-checklist-title { font: 600 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--muted); padding-bottom: var(--space-1); }
.ie-ckrow { display: flex; align-items: center; gap: .625rem; min-height: var(--control-lg); }
.ie-ckrow .lab { flex: 1; min-width: 0; }
.ie-ckrow .own { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.ie-ckrow .own > .ie-icon { color: var(--blue); }
.ie-ckrow.sub { padding-left: var(--space-7); min-height: 2rem; }
.ie-ckrow.sub .ie-input { flex: 1; min-width: 0; }
.ie-ckown { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: end; }
.ie-ckown.nosetting { grid-template-columns: minmax(0, 1fr) auto; }
.ie-ckown .ie-select-fill { min-width: 8.75rem; }

/* ===== ListRow: people lead with their avatar ===== */
.ie-row-av { flex: none; display: flex; }
.ie-row.has-av { align-items: flex-start; }

/* ===== Alert box under a row or in a card: the stuck box ===== */
.ie-alertbox { padding: var(--space-3); border-radius: var(--radius-md); background: var(--red-tint); display: flex; flex-direction: column; gap: .625rem; font: 700 var(--font-size-xs)/var(--line-height-xs) var(--font-sans); color: var(--ink); }
.ie-alertbox .head { display: flex; align-items: center; gap: var(--space-2); }
.ie-alertbox .head .ie-icon { color: var(--red); }
.ie-alertbox .acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ===== Guided tours: the spotlight, the glow on the next control, tips arriving ===== */
/* the ring width in WHOLE device pixels. 3 CSS px is 3.75 device px at 125% scaling and 4.5 at 150%, and the browser snaps every edge of a
   box to the pixel grid on its own, so a 3px ring came out 3 or 4 device px thick depending on the side. --ie-dp is one device pixel in CSS px
   (set per display scaling); --aura-w is 3px rounded to a whole number of them, and the same for a control's border width, so every offset the
   rings use is a whole number of device pixels and every side snaps alike. */
:host { --ie-dp: 1px; --aura-w: 3px; }
@media (min-resolution: 1.125dppx) and (max-resolution: 1.374dppx) { :host { --ie-dp: .8px; } }
@media (min-resolution: 1.375dppx) and (max-resolution: 1.624dppx) { :host { --ie-dp: .666667px; } }
@media (min-resolution: 1.625dppx) and (max-resolution: 1.874dppx) { :host { --ie-dp: .571429px; } }
@media (min-resolution: 1.875dppx) and (max-resolution: 2.124dppx) { :host { --ie-dp: .5px; } }
@media (min-resolution: 2.125dppx) and (max-resolution: 2.374dppx) { :host { --ie-dp: .444444px; } }
@media (min-resolution: 2.375dppx) and (max-resolution: 2.749dppx) { :host { --ie-dp: .4px; } }
@media (min-resolution: 2.75dppx) and (max-resolution: 3.499dppx) { :host { --ie-dp: .333333px; } }
@media (min-resolution: 3.5dppx) { :host { --ie-dp: .25px; } }
@supports (width: round(3px, 1px)) { :host { --aura-w: round(3px, var(--ie-dp)); } }
/* the aura: the one mark on what a tour points at. A 3px ring flush on the control's edge, concentric with it (its radius + 3px), lit along its whole
   length in Engram Blue through Glacier to a white flash that travels round it, and a soft bloom outside it that never tints the control.
   The light turns by transform (a conic-painted square rotating behind a ring-shaped mask), so only transform and opacity animate.
   Markup: <span class="ie-aura" style="left/top/width/height of the control; --aura-r: its radius">
             <span class="halo"><span class="shape"><i></i></span></span><span class="ring"><i></i></span></span>
   A control whose corners differ sets --aura-ring-r and --aura-halo-r (full border-radius values) instead of --aura-r.
   Reduced motion: the ring stays lit and still. The same light on every ground, navy included: one aura, one look. */
@keyframes ie-aura-turn { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes ie-aura-breathe { 50% { opacity: calc(var(--aura-bloom) * 1.35); } }
.ie-aura { --aura-bloom: .42; --aura-paint: conic-gradient(var(--aura-deep), var(--aura-mid) 25%, var(--aura-light) 45%, var(--aura-flash) 52%, var(--aura-light) 60%, var(--aura-mid) 80%, var(--aura-deep));
  position: absolute; pointer-events: none; z-index: 41; }
.ie-aura .ring, .ie-aura .halo .shape { position: absolute; inset: calc(var(--aura-w) * -1); border-radius: var(--aura-ring-r, calc(var(--aura-r, 12px) + var(--aura-w))); overflow: hidden; }
.ie-aura .ring { padding: var(--aura-w); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the bloom: blurred, inside a box wide enough that the blur fades out before any edge, with the control itself cut out */
.ie-aura .halo { --aura-hp: 72px; position: absolute; inset: calc(var(--aura-hp) * -1); padding: var(--aura-hp); border-radius: var(--aura-halo-r, calc(var(--aura-r, 12px) + var(--aura-hp)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ie-aura .halo .shape { inset: calc(var(--aura-hp) - var(--aura-w)); filter: blur(16px); opacity: var(--aura-bloom); animation: ie-aura-breathe 3.2s ease-in-out infinite; }
.ie-aura i { position: absolute; left: 50%; top: 50%; width: var(--aura-d, 300%); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--aura-paint); animation: ie-aura-turn 4.5s linear infinite; }
/* the Aura component: filling its positioned parent. An aura is never left still: it turns, or (once) turns one time and fades out.
   `still` is for reduced motion only. */
.ie-aura.fill { inset: calc(var(--aura-bw, 0px) * -1); }
@supports (width: round(3px, 1px)) { .ie-aura.fill { inset: calc(round(down, var(--aura-bw, 0px), var(--ie-dp)) * -1); } }
.ie-aura.still i, .ie-aura.once i { animation: none; transform: translate(-50%, -50%) rotate(.55turn); }
.ie-aura.once i { animation: ie-aura-turn-once 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ie-aura.once { animation: ie-aura-leave .5s ease-out 1.4s both; }
@keyframes ie-aura-leave { to { opacity: 0; } }
@keyframes ie-aura-turn-once { from { transform: translate(-50%, -50%) rotate(-.45turn); } to { transform: translate(-50%, -50%) rotate(.55turn); } }
.ie-aura.still .halo .shape, .ie-aura.once .halo .shape { animation: none; }

/* the value Engrama read that is under review, on the page: the aura, turning (the mark's own outline steps aside).
   In-place rings (here, .hl, a tour tip's action, a lit checkbox) are pseudo-elements, which cannot hold the turning square the .ie-aura ring
   uses, so their conic paint turns by a registered angle (--ie-aura-a). That repaints the 3px ring each frame instead of running on the
   compositor: the least-bad option for a class an app puts on its own control; where the design system owns the markup, use <Aura>. */
@property --ie-aura-a { syntax: '<angle>'; inherits: false; initial-value: .55turn; }
@keyframes ie-aura-spin { to { --ie-aura-a: 1.55turn; } }
.ie-mark { position: relative; }
.ie-mark.on.todo { outline-color: transparent; box-shadow: 0 0 16px 2px color-mix(in srgb, var(--aura-light) 55%, transparent); }
.ie-mark.on.todo::before { content: ''; position: absolute; inset: calc(var(--aura-w) * -1); /* the mark has no border: its padding box is its border box */ padding: var(--aura-w); border-radius: calc(3px + var(--aura-w)); pointer-events: none;
  background: conic-gradient(from var(--ie-aura-a), var(--aura-deep), var(--aura-mid) 25%, var(--aura-light) 45%, var(--aura-flash) 52%, var(--aura-light) 60%, var(--aura-mid) 80%, var(--aura-deep)); animation: ie-aura-spin 4.5s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* the aura edge: Engrama's own things (the Ask button, an AI tile, a To review pill) carry a still hairline of the aura's light in place of their
   border. No bloom, no motion: these are many on a screen, the aura itself is one */
.ie-btn.ai, .ie-pill.review, .ie-tile.ai, .ie-choice .tile.ai, .ie-aura-edge { position: relative; border-color: transparent; }
.ie-tile.ai, .ie-choice .tile.ai { --edge-bw: 0px; }
.ie-btn.ai:not(.hl)::before, .ie-pill.review:not(.hl)::before, .ie-tile.ai:not(.hl)::before, .ie-choice .tile.ai:not(.hl)::before, .ie-aura-edge:not(.hl)::before { content: ''; position: absolute; inset: calc(var(--edge-bw, 1px) * -1); padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, var(--aura-deep), var(--aura-light) 45%, var(--aura-navy) 55%, var(--aura-mid)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* THE TOUR RING ALWAYS WINS. The ring's selectors carry :not(#ie-ring): an id's weight (1,0,0), which no class-based component rule can reach, so any
   rule that paints a ::before/::after on something a tour can light (an aura edge, a timeline dot, a tab's underline) loses to it, whatever its own
   specificity or order, and the ring's reset (size, margin, transform, z-index, border) keeps that rule's leftovers off it. One place, so a new
   component cannot forget it. The ::after halo skips the parts whose ::after is the control itself (a switch's thumb, a tick, a tab's underline, a mark's tap box).
   Any rule that restyles the ring (the reduced-motion one below) uses the same selector. tools/app-css.test.mjs holds the line. */
/* a control lit in place (.hl, a tour tip's own action, a checkbox to tick): the same ring, still, flush and concentric (--hl-r: the control's border-box radius, --hl-bw: its border width, 1px unless set; the ring is anchored on the border box, so the control's own border is never covered or left showing inside it) */
@keyframes ie-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ie-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.ie-rise { animation: ie-rise var(--motion-rise) ease-out both; }
.ie-pop { animation: ie-pop var(--motion-pop) var(--motion-ease-pop) both; }
.ie-tourtip { pointer-events: auto; }
.ie-tip-anchor { position: absolute; top: 0; z-index: 41; width: 19.75rem; }
.ie-tip-anchor.right { left: calc(100% + .875rem); }
.ie-tip-anchor.left { right: calc(100% + .875rem); }
.ie-tip-anchor.narrow { width: 17.375rem; }
.ie-spot { position: relative; z-index: 40; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--navy) 55%, transparent); }
/* a lit control is the ring's positioning context. This stays at the plain .hl's weight on purpose: a component that positions itself (the date picker's absolute calendar button, a sticky header) must keep its own position, so the id-weight boost the ring needs is NOT used here. It only has to beat an `all: unset` (the bare .ie-btn, .ie-chip: one class, earlier; .ie-seg button, .ie-omni-field input: a class and a type; a tour tip's .act: two) and the link button's, which is two classes strong, hence the third. tools/app-css.test.mjs holds the line. */
.ie-tourtip .act, .ck-glow .ie-check input, .hl { position: relative; z-index: 41; }
button.hl, input.hl, .ie-btn.link.hl { position: relative; } /* an `all: unset` on an element selector (.ie-seg button, .ie-omni-field input) is one type stronger than .hl */
.ck-glow .ie-check input { overflow: visible; }
:is(.ie-tourtip .act, .ck-glow .ie-check input, .hl):not(#ie-ring)::before { content: ''; position: absolute; width: auto; height: auto; margin: 0; transform: none; translate: none; z-index: auto; border: 0; box-shadow: none; opacity: 1; inset: calc(var(--aura-w) * -1 - var(--hl-bws, var(--hl-bw, 1px))); padding: var(--aura-w); border-radius: calc(var(--hl-r, 12px) + var(--aura-w)); pointer-events: none;
  background: conic-gradient(from var(--ie-aura-a), var(--aura-deep), var(--aura-mid) 25%, var(--aura-light) 45%, var(--aura-flash) 52%, var(--aura-light) 60%, var(--aura-mid) 80%, var(--aura-deep)); animation: ie-aura-spin 4.5s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the checkbox's ::after is its tick, so a lit checkbox gets the ring alone */
:is(.ie-tourtip .act, .hl:not(.ie-switch, .ie-check input, [role="tab"], .ie-mark)):not(#ie-ring)::after { content: ''; position: absolute; width: auto; height: auto; margin: 0; transform: none; translate: none; z-index: auto; border: 0; background: none; inset: calc(var(--aura-w) * -1 - var(--hl-bws, var(--hl-bw, 1px))); border-radius: calc(var(--hl-r, 12px) + var(--aura-w)); pointer-events: none; box-shadow: 0 0 18px 2px color-mix(in srgb, var(--aura-light) 45%, transparent); }
.ie-tourtip .act, .ie-btn.hl, .ie-rail .hl, .ie-rail-add.hl { --hl-r: 999px; }
.ck-glow .ie-check input { --hl-r: 3px; --hl-bw: 1.5px; }
/* a control's border width is snapped down to whole device pixels by the browser, so the ring's offset uses the snapped width */
@supports (width: round(3px, 1px)) { .ie-tourtip .act, .ck-glow .ie-check input, .hl { --hl-bws: round(down, var(--hl-bw, 1px), var(--ie-dp)); } }
/* while lit the ring is the control's edge: its own border steps aside (transparent, so its background runs to the edge and the ring abuts it), which is what stops a second edge showing inside the ring */
.ie-tourtip .act, .ck-glow .ie-check input, .hl { border-color: transparent !important; }
@media (prefers-reduced-motion: reduce) { .ie-rise, .ie-pop { animation: none; } .ie-aura i, .ie-aura.once i, .ie-aura .halo .shape { animation: none; } .ie-aura.once i { transform: translate(-50%, -50%) rotate(.55turn); } }
.ie-rail-item.ie-spot:not([aria-current="page"]) { background: var(--navy-active); }
.ie-spot.pad { background: var(--surface); border-radius: 14px; padding: var(--space-2); margin: -.5rem; }
.ie-addbox.bare { margin: 0; }
.ie-addbox.bare .ie-addbox-body { padding: 0; background: none; border: 0; border-radius: 0; }
.ie-btn.link { align-self: flex-start; }
.ie-btn.link.sm { font-size: var(--font-size-xs); }
.ie-cell .t.em { font-weight: 600; }
.ie-fields .v.muted { color: var(--muted); font-weight: 400; }
.ie-fields.grid > .f.wide { grid-column: 1 / -1; }
.ie-row-subhead.top { padding-left: 0; padding-top: .625rem; }
/* a card's growing body (it scrolls; the head stays) */
.ie-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* a card that only holds an EmptyState */
.ie-card-empty { padding: 3.25rem 1.375rem; align-items: center; gap: .875rem; }
/* running text inside cards and dialogs */
.ie-text { margin: 0; font: 400 var(--font-size-sm)/var(--line-height-md) var(--font-sans); color: var(--ink-2); }


@media (prefers-reduced-motion: reduce) { .ie-mark.on.todo::before, :is(.ie-tourtip .act, .ck-glow .ie-check input, .hl):not(#ie-ring)::before { animation: none; } }
/* ---------- Phones and tablets: window classes, touch, safe areas (foundations/screens.md) ----------
   Window classes: compact < 600, medium 600–899, expanded 900–1279, desktop ≥ 1280 (lib/ui BREAKPOINTS, MEDIA).
   Every rule in this file sits under a width query below 1280, under (pointer: coarse), or on a class that only a
   new prop or component adds (the unwrapped rules at the top), so the desktop (1280 and wider, fine pointer) renders
   exactly as it did. Layout follows the width; target sizes and 16px fields follow the pointer, never the width (a
   touch laptop reports fine and stays a laptop). */

/* ===== Parts that new props add (no existing markup carries these classes) ===== */

/* BottomSheet with a title, a footer or size="full": the head and foot stay, the body scrolls between them */
.ie-sheet.framed { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ie-sheet.framed .grab { flex: none; margin: var(--space-2) auto var(--space-1); }
.ie-sheet-head { flex: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-2) var(--space-1) var(--space-4); }
.ie-sheet-head h2 { margin: 0; flex: 1; min-width: 0; font: 800 var(--font-size-3xl)/var(--line-height-3xl) var(--font-sans); color: var(--ink); }
.ie-sheet.framed .ie-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-4) var(--space-3); }
.ie-sheet-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4) .875rem; border-top: 1px solid var(--line); background: var(--surface); }
.ie-sheet-root.full .ie-sheet { height: calc(100% - var(--space-4)); max-height: none; }

/* BottomNav: an item without href is a button; count badges; fixed to the bottom edge */
.ie-bottomnav .pad { position: relative; }
.ie-bottomnav .cnt { position: absolute; top: -.25rem; right: .125rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; box-sizing: border-box; border-radius: var(--radius-full); background: var(--royal); color: var(--on-royal); font: 800 var(--font-size-xs)/1.125rem var(--font-sans); text-align: center; }
.ie-bottomnav.fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }

/* A bar that holds the tour's spotlight (BottomNav or MobileTopBar `highlight`) rises over the other bar (40, under the tip's 41),
   so the spotlight's scrim covers both bars */
.ie-bottomnav.fixed:has(.ie-spot), .ie-mtop.sticky:has(.ie-spot) { z-index: 40; }
.ie-bottomnav .ie-spot { border-radius: var(--radius-md); }

/* MobileTopBar: sticky when asked, the avatar button that opens the account menu */
.ie-mtop.sticky { position: sticky; top: 0; z-index: 30; }
.ie-mtop-me { all: unset; box-sizing: border-box; flex: none; width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; border-radius: var(--radius-full); cursor: pointer; }
.ie-mtop-me .ie-avatar { width: 2rem; height: 2rem; line-height: 2rem; }
.ie-mtop-me:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Tabs and SegmentedControl that share the width equally (fill) */
.ie-tabs.fill [role="tab"] { flex: 1 1 0; justify-content: center; min-width: 0; }
.ie-seg.fill { display: flex; width: 100%; box-sizing: border-box; }
.ie-seg.fill button { flex: 1 1 0; text-align: center; justify-content: center; min-width: 0; }

/* TourTip docked: full width at the bottom of the screen, above the bottom bar (--ie-tourtip-bottom) and the safe area, at most
   --ie-tourtip-h tall (both variables are set on :host, where this padding reads them). While one shows, the document keeps that much room at its bottom edge for scrolling (scroll-padding), so
   scrollIntoView and a focus move stop a target above the tip. */
:host:has(.ie-tourtip.docked) { scroll-padding-bottom: calc(var(--ie-tourtip-h, min(15rem, 40dvh)) + var(--ie-tourtip-bottom, var(--space-3)) + env(safe-area-inset-bottom) + var(--space-3)); }
.ie-tourtip.docked { max-height: var(--ie-tourtip-h, min(15rem, 40dvh)); overflow-y: auto; overscroll-behavior: contain; position: fixed; z-index: 41; left: calc(var(--space-3) + env(safe-area-inset-left)); right: calc(var(--space-3) + env(safe-area-inset-right)); bottom: calc(var(--ie-tourtip-bottom, var(--space-3)) + env(safe-area-inset-bottom)); width: auto; max-width: 30rem; margin-inline: auto; }


/* Dialog footer (the footer prop): actions on the right, under the section */
.ie-dialog-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); background: var(--surface); }

/* SearchBox variant="screen": the phone's search, one full screen. The field sits in a top bar with Cancel; scopes
   are one row of chips that scrolls sideways; recent items and results are rows. */
.ie-searchscreen { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); }
.ie-searchscreen-bar { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-2) + env(safe-area-inset-top)) calc(var(--space-3) + env(safe-area-inset-right)) var(--space-2) calc(var(--space-3) + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.ie-searchscreen-bar .ie-omni-field { --omni-h: var(--touch-target); flex: 1; min-width: 0; }
.ie-searchscreen-bar .ie-omni-field input { font-size: var(--font-size-xl); line-height: var(--line-height-xl); }
.ie-searchscreen-bar .ie-btn.ghost { flex: none; min-height: var(--touch-target); font-size: var(--font-size-lg); }
.ie-searchscreen-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + var(--ie-kb, 0px)); }
.ie-searchscreen .ie-omni-scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: var(--space-3); }
.ie-searchscreen .ie-omni-scopes::-webkit-scrollbar { display: none; }
.ie-searchscreen .ie-omni-scope { flex: none; height: var(--touch-target); border-radius: var(--radius-full); padding: 0 var(--space-4); font-size: var(--font-size-sm); }
.ie-searchscreen .ie-omni-head { padding-inline: var(--space-4); }
.ie-searchscreen .ie-omni-row { padding: var(--space-2) var(--space-4); }
.ie-searchscreen .ie-omni-row .t { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.ie-searchscreen .ie-omni-empty { padding-inline: var(--space-4); }

/* ===== Phones and tablets (every window below desktop) or any touch screen ===== */
/* A BottomSheet that opens or closes while the other move plays starts where it is (BottomSheet sets --ie-sheet-at, --ie-sheet-o) */
@keyframes ie-sheet-in { from { transform: var(--ie-sheet-at, translateY(100%)); } to { transform: none; } }
@keyframes ie-sheet-out { from { transform: var(--ie-sheet-at, none); } to { transform: translateY(100%); } }
@keyframes ie-fade-in { from { opacity: var(--ie-sheet-o, 0); } to { opacity: 1; } }
@keyframes ie-fade-out { from { opacity: var(--ie-sheet-o, 1); } to { opacity: 0; } }
/* A Drawer: a side panel that slides in from the right, on compact a sheet that rises; one animation name for both, so
   crossing 600 with a Drawer open (a phone turned sideways) never replays its entrance */
@keyframes ie-panel-in { from { transform: var(--ie-panel-from, translateX(2rem)); opacity: var(--ie-panel-o, 0); } to { transform: none; opacity: 1; } }
@media (max-width: 1279.98px), (pointer: coarse) {
  /* MobileTopBar and icon-only lg buttons draw 20px icons (`.ie svg.ie-icon.sm` used to win over the lg size) */
  .ie-mtop .lg-icon svg.ie-icon, .ie-btn.icon.lg svg.ie-icon { width: var(--icon-lg); height: var(--icon-lg); }
  /* Safe areas: the bars and sheets pad for the notch, the rounded corners and the home indicator
     (zero on a rectangular screen, and only non-zero with viewport-fit=cover in the page's viewport meta) */
  .ie-mtop { padding: calc(var(--space-1\.5) + env(safe-area-inset-top)) calc(var(--space-2) + env(safe-area-inset-right)) var(--space-1\.5) calc(var(--space-2) + env(safe-area-inset-left)); }
  .ie-bottomnav { padding: var(--space-2) calc(var(--space-1\.5) + env(safe-area-inset-right)) calc(.625rem + env(safe-area-inset-bottom)) calc(var(--space-1\.5) + env(safe-area-inset-left)); }
  /* The BottomNav's height without the bottom inset (border, padding, a 28px pad, the gap and a 16px label: 67px). The bar adds
     the inset itself; the page's bottom padding, toasts and docked tips read this and add env(safe-area-inset-bottom) once. */
  :host { --ie-bottomnav-h: calc(1px + var(--space-2) + 1.75rem + var(--space-1) + var(--line-height-xs) + .625rem); }
  .ie-sheet { padding-bottom: calc(.875rem + env(safe-area-inset-bottom)); }
  .ie-sheet.framed { padding-bottom: 0; }
  .ie-sheet.framed .ie-sheet-body:last-child { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .ie-sheet-foot { padding-bottom: calc(.875rem + env(safe-area-inset-bottom)); }
  .ie-sheet-root { padding-bottom: var(--ie-kb, 0px); }
  /* Layers (foundations/screens.md): Drawer, Dialog, StepDialog and the sheet share 70 and stack in the order they opened
     (each renders in a portal appended to the body when it opens); toasts sit above them; the desktop keeps main's
     sheet 50 and toasts 60 under the dialogs' 70 */
  .ie-sheet-root:not(.contained) { z-index: 70; }
  .ie-toasts { z-index: 75; }
  .ie-sheet .ie-cal { width: 100%; border: 0; box-shadow: none; padding: 0; } /* a calendar in a sheet fills it */
  .ie-sheet-root.full .ie-sheet { height: calc(100% - var(--space-4) - env(safe-area-inset-top)); }
  .ie-toasts { left: calc(.875rem + env(safe-area-inset-left)); bottom: calc(var(--ie-toast-bottom, .875rem) + env(safe-area-inset-bottom)); }
  /* BottomSheet rises from the bottom edge and leaves the same way. The scrim fades on a layer of its own (::before, under the
     sheet), so the sheet never fades with it */
  .ie-sheet-root:not(.contained), .ie-drawer-host { background: none; }
  .ie-sheet-root:not(.contained)::before, .ie-drawer-host::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); animation: ie-fade-in var(--motion-enter) ease-out; }
  .ie-sheet-root:not(.contained) .ie-sheet { animation: ie-sheet-in var(--motion-sheet) ease-out; }
  .ie-sheet-root:not(.contained).out { pointer-events: none; }
  .ie-sheet-root:not(.contained).out::before { animation: ie-fade-out var(--motion-enter) ease-out forwards; }
  .ie-sheet-root:not(.contained).out .ie-sheet { animation: ie-sheet-out var(--motion-enter) ease-out forwards; }
  .ie-drawer.side { animation-name: ie-panel-in; } /* a Drawer's panel slides in while its scrim fades (the ::before above) */
  /* A long tab strip scrolls sideways: the edge that hides more tabs fades out (Tabs sets edge-start / edge-end) */
  .ie-tabs.edge-end [role="tablist"] { -webkit-mask-image: linear-gradient(to left, transparent, var(--ink) 2rem); mask-image: linear-gradient(to left, transparent, var(--ink) 2rem); }
  .ie-tabs.edge-start [role="tablist"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 2rem); mask-image: linear-gradient(to right, transparent, var(--ink) 2rem); }
  .ie-tabs.edge-start.edge-end [role="tablist"] { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 2rem, var(--ink) calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) 2rem, var(--ink) calc(100% - 2rem), transparent); }
  /* Pagination's buttons wrap under the summary instead of running off a narrow screen */
  .ie-pager { flex-wrap: wrap; }
}

/* ===== Touch: every control reaches touch-target (44px), fields are 16px, a tap shows a pressed state ===== */
@media (pointer: coarse) {
  .ie, .ie * { -webkit-tap-highlight-color: transparent; }
  /* 16px text in every field: iOS Safari zooms into a smaller one and does not zoom back (iPads too) */
  .ie-input, .ie-textarea, .ie-search input, .ie-omni-field input, .ie-select, select.ie-select { font-size: var(--font-size-xl); line-height: var(--line-height-xl); }
  .ie-input, .ie-search, .ie-select, .ie-select-fill.sm .ie-select, .ie-btn.lg { min-height: var(--touch-target); }
  .ie-search input, .ie-omni-field input { align-self: stretch; margin-block: -1px; } /* the whole 44px field takes the tap, not just its text line */
  .ie-omni-field .ie-kbd { display: none; } /* no keyboard shortcut to show on a touch screen */
  .ie-chip, .ie-chips.inline .ie-chip, .ie-chip.removable { min-height: var(--touch-target); }
  .ie-seg button, .seg-sm.ie-seg button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); }
  .ie-row.sub .ie-row-go { min-height: var(--touch-target); align-items: center; }
  .ie-go.ie-go-end { min-width: var(--touch-target); min-height: var(--touch-target); margin-top: 0; }
  .ie-table th[aria-sort] button { min-height: var(--touch-target); }
  .ie-ws-trigger, .ie-ws-item { min-height: var(--touch-target); }
  .ie-title a { padding-block: calc((var(--touch-target) - var(--line-height-4xl)) / 2); }
  /* a mark on a document page: two transparent boxes take the tap, and the text does not move. ::after is at least 24px tall
     (space-6) and a touch-target wide; ::before, one layer up, is the mark's own box, so a mark's text always beats a
     neighbour's wider box; where only wide boxes overlap (between lines, beside a short value) the later mark wins. The mark makes no stacking context, so both boxes sit over the page's own text.
     The document page does make one (isolation), so the boxes stay inside the page: chrome over it (DocumentPreview's bar,
     a full-screen Dialog's sticky head) takes its own taps even where a mark has scrolled under it. */
  .ie-doc .page, .ie-viewer-page, .ie-preview-page { isolation: isolate; }
  .ie-mark { position: relative; }
  .ie-mark::before, .ie-mark::after { content: ''; position: absolute; }
  .ie-mark::before { z-index: 2; inset: 0; }
  .ie-mark::after { z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, var(--touch-target)); height: max(100%, var(--space-6)); }
  .ie-tourtip .back, .ie-tourtip .act { min-height: var(--touch-target); }
  .ie-toast button { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .ie-btn.link { padding-block: .875rem; } /* inline in a sentence the padding grows the hit area, not the line; on its own it is a 44px row */
  .ie-evid .src button, .ie-cell-btn, .ie-table th .ie-cell-btn { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .ie-facet .more { display: flex; align-items: center; min-height: var(--touch-target); }
  .ie-formula summary { padding-block: .875rem; }
  .ie-link-item { display: flex; flex-direction: column; justify-content: center; min-height: var(--touch-target); }
  .ie-omni-scope { height: var(--touch-target); }
  .ie-dialog nav a { display: flex; align-items: center; min-height: var(--touch-target); }
  /* a switch on its own: the same pill, a size up, with a transparent ring that makes the target 44px tall */
  .ie-switch, .ie-switch[aria-checked="true"] { width: 3.25rem; height: 2rem; border: .375rem solid transparent; background-clip: padding-box; }
  .ie-switch::after { top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; }
  .ie-switch[aria-checked="true"]::after { transform: translateX(1.25rem); }
  /* days fill a wider calendar: 44px columns even at 360 */
  .ie-cal { width: min(22rem, calc(100vw - 1rem)); padding: var(--space-2); }
  /* pressed: shown while the finger is down, and never lower in contrast than the control at rest (a state raises contrast, never lowers it; the floor's contrast-states gate fails any drop over 0.05:1). Ink and ink-2 on a white card are the darkest pairs there are, so any fill under them lowers the text: those controls show the press as an inset ring (the same 2px control-line the chips and segments use), measured at 416 wide in light and dark. The fills left below were measured to raise or keep it: the tab's label darkens to ink as its ground goes sunken, and the rail item's label turns white on navy */
  .ie-btn.icon.bare:active, .ie-row-go:active, .ie-ws-item:active, .ie-omni-scope:not(.on):active, .ie-cal td:not([aria-selected="true"]) button:active,
  .ie-menu .item:active { box-shadow: inset 0 0 0 2px var(--control-line); }
  .ie-tourtip .act:active { box-shadow: inset 0 0 0 2px var(--navy); } /* the pill is on-navy: the control-line ring is under 3:1 on it in dark, navy is not */
  .ie-cal td:not([aria-selected="true"]) button[aria-current="date"]:active { box-shadow: inset 0 0 0 1px var(--blue), inset 0 0 0 3px var(--control-line); } /* today keeps its blue ring while pressed */
  .ie-row.link.has-act:has(.ie-row-go:active) { box-shadow: inset 0 0 0 2px var(--control-line); } /* as the hover: the ring goes round the whole row, its actions included */
  .ie-row.link.has-act .ie-row-go:active { box-shadow: none; }
  .ie-table tr.link:active { outline: 2px solid var(--control-line); outline-offset: -2px; } /* a table row is not a box a shadow can ring: the outline runs round it, as its hover does */
  .ie-tabs [role="tab"]:not([aria-selected="true"]):active { background: var(--surface-sunken); color: var(--ink); } /* as the desktop hover: the label darkens */
  .ie-btn.ghost:active { text-decoration: underline; } /* as the desktop hover: no fill under the blue label */
  .ie-choice:not(.on):active { border-color: var(--control-line); } /* as the desktop hover */
  /* ink on white is the darkest pair there is, so any tint lowers it: these show the press as an inset ring instead */
  .ie-chip:not([aria-pressed="true"]):active, .ie-seg button:not([aria-pressed="true"]):active, .ie-sheet .item:not(.lead):active,
  .ie-omni-row:active, .ie-mtop-me:active { box-shadow: inset 0 0 0 2px var(--control-line); }
  .ie-btn.add:active { filter: brightness(.9); } /* the primary and secondary buttons show their own pressed layer (03-button.css) */
  .ie-btn.ai:active, .ie-btn.danger:active { filter: brightness(.96); }
  .ie-bottomnav a:not([aria-current="page"]):active .pad, .ie-bottomnav > button:not([aria-current="page"]):active .pad { box-shadow: inset 0 0 0 2px var(--control-line); }
  .ie-rail-item:not([aria-current="page"]):active { background: var(--navy-active); }
  .ie-rail-item:not([aria-current="page"]):active .ic, .ie-rail-item:not([aria-current="page"]):active .lb { color: var(--on-navy); } /* as the desktop hover: the label turns white */
}

/* ===== The shell below 900 (compact and medium): the document scrolls (foundations/screens.md, The shell below 900) =====
   One scroller, the page, so a phone's address bar collapses as you scroll and nothing scrolls inside the scroll. The shell
   stops locking the window; regions and cards inside it take their content's height; sideways lanes (tables, tab strips,
   chip rows) still scroll sideways. Overlays render outside .ie-app and are untouched. Expanded and desktop keep the fixed shell. */
@media (max-width: 899.98px) {
  .ie-app { box-sizing: border-box; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .ie-app .ie-scroll, .ie-app .ie-card { overflow: visible; min-height: auto; }
  .ie-app .ie-table-wrap { overflow-x: auto; }
  /* medium: the rail stays on the left at the window's height, the TopBar (a direct child of the content column) on top */
  .ie-app .ie-rail { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .ie-app .ie-topbar { position: sticky; top: 0; z-index: 30; background: var(--ground); }
}
@media (max-width: 599.98px) {
  /* compact: one column, MobileTopBar (sticky) on top, the page, BottomNav (fixed) on the bottom edge; the page ends above the bar */
  .ie-app { flex-direction: column; }
  .ie-app:has(.ie-bottomnav.fixed) { padding-bottom: calc(var(--ie-bottomnav-h) + env(safe-area-inset-bottom)); }
}

/* ===== Compact (phones, below 600) ===== */
@media (max-width: 599.98px) {
  /* Drawer becomes a bottom sheet: full width, top corners, as tall as its content up to the screen less the top safe area */
  .ie-drawer-host { flex-direction: column; justify-content: flex-end; padding: calc(env(safe-area-inset-top) + var(--space-4)) 0 var(--ie-kb, 0px); }
  .ie-drawer.side { width: 100%; height: auto; max-height: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; --ie-panel-from: translateY(100%); --ie-panel-o: 1; animation-duration: var(--motion-sheet); }
  .ie-drawer.side .content { min-height: 0; overscroll-behavior: contain; }
  .ie-drawer.side .foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .ie-drawer.side .content:last-child { padding-bottom: calc(.875rem + env(safe-area-inset-bottom)); }
  /* Dialog (window) and StepDialog go full screen: no overlay padding, the head stays on top, the foot stays at the bottom.
     A confirmation stays a small centred card. */
  .ie-overlay:has(> .ie-dialog), .ie-overlay:has(> .ie-stepdialog) { padding: 0 0 var(--ie-kb, 0px); place-items: stretch; background: var(--surface); }
  .ie-overlay > .ie-dialog, .ie-overlay > .ie-dialog.narrow, .ie-overlay > .ie-dialog.docview { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; border-top: env(safe-area-inset-top) solid var(--surface); grid-template-rows: auto 1fr; } /* a border, not padding: the dialog scrolls, and content (and the sticky head) stay below the notch */
  .ie-overlay > .ie-dialog.single { grid-template-rows: 1fr; }
  .ie-overlay > .ie-dialog .body { display: flex; flex-direction: column; padding: 0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .ie-overlay > .ie-dialog .body > .head { position: sticky; top: 0; z-index: 2; background: var(--surface); margin: 0 calc(-1 * var(--space-4)) var(--space-3); padding: var(--space-3) var(--space-4); }
  .ie-overlay > .ie-dialog .ie-dialog-foot { position: sticky; bottom: 0; z-index: 2; margin: auto calc(-1 * var(--space-4)) calc(-1 * (var(--space-5) + env(safe-area-inset-bottom))); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .ie-dialog.docview .ie-doc-scroll { max-height: none; } /* the full-screen dialog scrolls; nothing scrolls inside it */
  .ie-overlay > .ie-stepdialog { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) 0; gap: var(--space-3); }
  .ie-stepdialog .head { flex-wrap: wrap; row-gap: var(--space-2); }
  .ie-stepdialog .head h2 { min-width: 0; font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); }
  .ie-stepdialog .head .ie-stepdots { order: 3; flex-basis: 100%; }
  .ie-overlay > .ie-stepdialog .foot { min-height: 0; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  /* With a fixed BottomNav on the page, toasts and a docked tip sit over it by default. :where() makes this a default only: an
     app's own value on :host (where TourTip and Toast say to set it) or on any ancestor of the toasts or the tip wins. */
  :where(:host:has(.ie-bottomnav.fixed)) { --ie-toast-bottom: calc(var(--ie-bottomnav-h) + .875rem); --ie-tourtip-bottom: calc(var(--ie-bottomnav-h) + var(--space-3)); }
  /* Toasts: centred, one at a time (the rule above), lifted over a bottom bar by --ie-toast-bottom */
  .ie-toasts { right: calc(.875rem + env(safe-area-inset-right)); }
  .ie-toasts-list { align-items: center; }
  .ie-toast { min-width: 0; width: 100%; }
  /* The desktop TopBar on a phone (prefer MobileTopBar): its actions wrap instead of running off the screen */
  .ie-topbar .end { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  /* A table's name column gives way to the others on a phone */
  .ie-table td.name { min-width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ie-sheet-root, .ie-sheet-root::before, .ie-sheet-root .ie-sheet, .ie-drawer.side, .ie-drawer-host, .ie-drawer-host::before { animation: none !important; }
}

a{color:var(--blue)}a:hover{color:var(--strong)}
.tip-cktab .ie-tourtip .arrow{right:auto;left:6.5rem}
.fb-q{display:flex;flex-direction:column;gap:.625rem;padding:var(--space-3);border:1px solid var(--line);border-radius:14px;background:var(--surface)}.fb-q-head{display:flex;align-items:center;gap:.125rem}.fb-n{flex:1;font-size:var(--font-size-xs);font-weight:700;color:var(--muted)}.fb-row{display:flex;gap:.875rem;align-items:flex-end;flex-wrap:wrap}
/* the lessons panel is a drawer: it slides over the app from the right edge (2rem and a fade, the design system Drawer's shape) and its scrim fades with it;
   both go back out the same way. They move by transitions, so a close half way through the open turns back from where the drawer is (and so does a reopen).
   The lessons hold no column: the app is always full width and the drawer and its closed tab float over it, so nothing ever shifts. The tab is
   a slim edge tab in the app's right gutter (main and the top bar pad 1.625rem, the tab is 1.5rem), where it covers no control on any page */
.lj{flex:none;position:relative;z-index:45;display:flex;flex-direction:column;min-height:0;color:var(--ink)}
/* timing from the shared floor (shared/claude/design/floor.md, Motion): a drawer moves in 200-500ms and enters and exits on an ease-out curve, never ease-in.
   The design system has no token in that range (its drawer uses --motion-enter, 180ms, under the floor: design_system#16), so these are local */
:host{--lj-open:240ms;--lj-close:200ms;--lj-morph:420ms;--lj-ease:cubic-bezier(.32,.72,0,1)}
.lj-drawer{position:fixed;top:.625rem;right:.625rem;bottom:.625rem;width:280px;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--info-tint);box-shadow:0 22px 50px color-mix(in srgb,var(--navy) 30%,transparent),0 3px 10px color-mix(in srgb,var(--navy) 18%,transparent),inset 0 0 0 1px var(--line);transition:transform var(--lj-open) var(--lj-ease),opacity var(--lj-open) var(--lj-ease)}
.lj-drawer.leaving{pointer-events:none;transform:translateX(2rem);opacity:0;transition-duration:var(--lj-close)}
/* a lesson starting: the drawer shrinks onto the tab (it stays solid until it is nearly there), its content fading first; the tab waits, then lights once */
.lj-drawer.leaving.to-tab{transform:var(--to,none);transform-origin:100% 50%;opacity:0;transition:transform var(--lj-morph) var(--lj-ease),opacity 140ms linear calc(var(--lj-morph) - 140ms)}
.lj-drawer.to-tab>*{opacity:0;transition:opacity 120ms linear}
.lj-tab.arriving{opacity:0}
.lj-tab.arrived{animation:lj-land 1.4s ease-out 1}
@keyframes lj-land{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--aura-light) 0%,transparent),inset 0 0 0 2px var(--aura-mid)}30%{box-shadow:0 0 22px 6px color-mix(in srgb,var(--aura-light) 70%,transparent),inset 0 0 0 2px var(--aura-mid)}100%{box-shadow:0 22px 50px color-mix(in srgb,var(--navy) 30%,transparent),inset 0 0 0 1px var(--line)}}
@media (prefers-reduced-motion: reduce){.lj-tab.arrived{animation:none}}
.lj-gate{position:fixed;inset:0;z-index:44;background:color-mix(in srgb,var(--navy) 50%,transparent);cursor:not-allowed;transition:opacity var(--lj-open) var(--lj-ease)}
.lj-gate.leaving{pointer-events:none;opacity:0;transition-duration:var(--lj-close)}
@starting-style{.lj-drawer{transform:translateX(2rem);opacity:0}.lj-gate{opacity:0}}
/* reduced motion removes transitions (design_system/foundations/accessibility.md, Motion): the drawer and its scrim just appear and go */
@media (prefers-reduced-motion: reduce){.lj-drawer,.lj-gate{transition:none}}
/* the panel is light Glacier (the info tint) with a Midnight band on top (the title and progress, or the welcome and the logo); below the band Engram Blue is the main action, and lesson cards are White */
.lj-choose{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-3);padding:0 0 1.875rem}.lj-choose>:not(.lj-hello){margin-left:var(--space-4);margin-right:var(--space-4)}.lj-choose>:last-child{margin-bottom:auto}
.lj-hello{margin:0 0 var(--space-4);padding:2.375rem var(--space-4) var(--space-7);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;font-size:var(--font-size-4xl);line-height:var(--line-height-4xl);font-weight:800;background:var(--navy);color:var(--on-navy)}
.lj-brand{display:flex;justify-content:center}
.lj-either{margin:0 0 var(--space-1);font-size:var(--font-size-5xl);line-height:var(--line-height-5xl);font-weight:800;color:var(--ink);letter-spacing:-.2px}
.lj-pick{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--space-4);min-height:5.625rem;padding:var(--space-4);border-radius:22px;background:var(--surface);box-shadow:0 4px 0 color-mix(in srgb,var(--info-tint),#000 12%);transition:transform .12s ease}
.lj-pick:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--info-tint),#000 12%)}.lj-pick:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.lj-pick.main{min-height:7.625rem;background:var(--royal);box-shadow:0 5px 0 color-mix(in srgb,var(--royal),#000 45%)}.lj-pick.main:active{box-shadow:0 1px 0 color-mix(in srgb,var(--royal),#000 45%)}.lj-pick.main b{color:var(--on-royal)}.lj-pick.main .ic{background:rgba(255,255,255,.16);color:var(--on-royal)}
.lj-pick .ic{flex:none;width:2.75rem;height:2.75rem;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--royal) 10%,transparent);color:var(--royal)}
.lj-pick b{display:block;font-size:var(--font-size-3xl);font-weight:800;color:var(--strong);line-height:var(--line-height-3xl);letter-spacing:-.2px}.lj-pick.main b{font-size:var(--font-size-4xl);line-height:var(--line-height-4xl)}
.lj-or{display:flex;align-items:center;gap:var(--space-3);margin:0;font-size:var(--font-size-md);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.lj-or::before,.lj-or::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--navy) 18%,transparent)}
.lj-tour{display:grid;place-items:center;width:2.25rem;padding:.625rem 0 var(--space-2);gap:var(--space-1\.5);border-radius:14px;background:var(--royal);color:var(--on-royal);font-size:var(--font-size-xs);font-weight:800;box-shadow:0 3px 0 color-mix(in srgb,var(--royal),#000 45%)}
.lj-head{flex:none;display:flex;align-items:center;gap:.625rem;padding:var(--space-4) var(--space-3) var(--space-1\.5) 1.125rem;background:var(--navy)}
.lj-head h2{margin:0;font-size:var(--font-size-lg);font-weight:800;color:var(--on-navy);letter-spacing:.1px}.lj-sub{display:block;margin-top:1px;font-size:var(--font-size-xs);color:var(--on-navy-muted)}
.lj-x{all:unset;cursor:pointer;width:1.875rem;height:1.875rem;border-radius:10px;display:grid;place-items:center;color:var(--on-navy-muted)}.lj-x:hover{background:rgba(255,255,255,.08);color:var(--on-navy)}.lj-x:focus-visible{outline:2px solid var(--on-navy-focus)}
.lj-segs{flex:none;display:flex;gap:var(--space-1);padding:var(--space-2) 1.125rem .875rem;background:var(--navy)}.lj-segs i{flex:1;height:.375rem;border-radius:999px;background:rgba(255,255,255,.34)}.lj-segs i.d{background:var(--green-mark)}.lj-segs i.n{background:var(--highlight)}
.lj-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--space-1) .875rem 1.375rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--navy) 22%,transparent) transparent}
.lj-unit{margin-top:var(--space-3)}
.lj-ban{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:16px;background:var(--surface);color:var(--ink)}
.lj-unit.done .lj-ban{background:var(--green-tint);color:var(--green)}.lj-unit.locked .lj-ban{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--muted)}
.lj-ban small{display:block;font-size:var(--font-size-xs);font-weight:800;letter-spacing:.9px;text-transform:uppercase}.lj-ban b{display:block;font-size:var(--font-size-md);font-weight:800;line-height:var(--line-height-md)}
.lj-bcount{margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--space-1\.5);font-size:var(--font-size-xs);font-weight:800;padding:var(--space-1) .625rem;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent)}
.lj-path{list-style:none;margin:0;padding:var(--space-4) 0 var(--space-1);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.lj-step{display:flex;flex-direction:column;align-items:center;width:100%}
.lj-node{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:.4375rem;transition:transform .15s ease}
.lj-node:focus-visible{outline:none}.lj-node:focus-visible .lj-dot{outline:3px solid var(--focus);outline-offset:4px}
/* a lesson you can open: White with an Engram Blue ring; the next and the active one: Engram Blue; done: green; locked: faint */
.lj-dot{position:relative;width:3.625rem;height:3.375rem;border-radius:999px;display:grid;place-items:center;background:var(--surface);color:var(--royal);box-shadow:inset 0 0 0 2px var(--royal),0 5px 0 color-mix(in srgb,var(--info-tint),#000 12%);transition:transform .12s ease,box-shadow .12s ease}
.lj-node:active .lj-dot{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--royal),0 2px 0 color-mix(in srgb,var(--info-tint),#000 12%)}
/* hover lifts only where there is a real hover: a tap fires a false one (shared floor, Motion) */
@media (hover: hover) and (pointer: fine){.lj-pick:hover{transform:translateY(-3px)}.lj-node:hover .lj-dot{transform:translateY(-2px)}.lj-node.locked:hover .lj-dot{transform:none}}
.lj-node.next .lj-dot,.lj-node.active .lj-dot{background:var(--royal);color:var(--on-royal);box-shadow:0 5px 0 color-mix(in srgb,var(--royal),#000 45%)}
/* the next lesson wears the aura and nothing else: a white face it frames (a blue face would swallow the ring), no lip, no selected outline */
.lj-node.next .lj-dot,.lj-node.next.sel .lj-dot{background:var(--surface);color:var(--royal);box-shadow:none;outline:none}

@media (prefers-reduced-motion: reduce){}
.lj-node.done .lj-dot{background:var(--green-mark);color:var(--on-royal);box-shadow:0 5px 0 color-mix(in srgb,var(--green-mark),#000 35%)}
.lj-ring{position:absolute;inset:-.4375rem;border-radius:999px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))}
.lj-node.locked{cursor:default}.lj-node.locked .lj-dot{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--muted);box-shadow:inset 0 0 0 2px var(--control-line)}
.lj-node.sel .lj-dot{outline:3px solid color-mix(in srgb,var(--blue) 30%,transparent);outline-offset:4px}.lj-node.sel:focus-visible .lj-dot{outline-color:var(--focus)}
.lj-lab{max-width:8.75rem;text-align:center;font-size:var(--font-size-xs);font-weight:700;line-height:var(--line-height-xs);color:var(--ink)}.lj-node.locked .lj-lab{color:var(--muted);font-weight:600}.lj-node.done .lj-lab{color:var(--ink-2)}
.lj-pop{position:relative;width:100%;box-sizing:border-box;margin-top:var(--space-3);padding:var(--space-3) .875rem;border-radius:16px;background:var(--surface);color:var(--ink)}
.lj-pop::before{content:'';position:absolute;top:-.375rem;left:var(--ax,50%);width:.75rem;height:.75rem;margin-left:-.375rem;background:var(--surface);transform:rotate(45deg);border-radius:3px 0 0 0}
.lj-pop.locked{color:var(--ink-2)}
.lj-pop b{display:block;font-size:var(--font-size-md);font-weight:800;line-height:var(--line-height-md)}.lj-pop p{margin:var(--space-1) 0 0;font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--ink-2)}.lj-pop.locked p{color:var(--muted)}
.lj-pop-in{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.625rem var(--space-3)}.lj-pop-in b{flex:1 1 7rem}.lj-pop .row{display:flex;align-items:center;justify-content:flex-end;gap:.625rem;margin-left:auto}
.lj-go{all:unset;box-sizing:border-box;cursor:pointer;padding:.5625rem var(--space-4);border-radius:12px;background:var(--royal);color:var(--on-royal);font-size:var(--font-size-sm);font-weight:800;box-shadow:0 3px 0 color-mix(in srgb,var(--royal),#000 45%)}.lj-go:hover{filter:brightness(1.1)}.lj-go:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--royal),#000 45%)}.lj-go:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lj-go.ghost{background:transparent;color:var(--blue);box-shadow:none;padding:.5625rem var(--space-1\.5)}
.lj-steps{margin:.625rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.3125rem}
.lj-steps li{position:relative;padding-left:1.375rem;font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--muted)}.lj-steps li::before{content:attr(data-n);position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:999px;background:var(--line);font-size:var(--font-size-xs);font-weight:800;display:flex;align-items:center;justify-content:center}
.lj-steps li.now{color:var(--ink);font-weight:700}.lj-steps li.now::before{background:var(--royal);color:var(--on-royal)}
.lj-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);padding:var(--space-2) var(--space-2) .625rem var(--space-3);border-top:1px solid color-mix(in srgb,var(--navy) 18%,transparent);font-size:var(--font-size-xs);color:var(--muted)}
.lj-foot button{all:unset;cursor:pointer;white-space:nowrap;font-size:var(--font-size-xs);font-weight:700;color:var(--blue);padding:var(--space-1\.5) var(--space-1);border-radius:8px}.lj-foot button:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}.lj-foot button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.lj-tab{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;right:0;top:50%;transform:translateY(-50%);width:1.5rem;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:.625rem 0;border-radius:12px 0 0 12px;background:var(--info-tint);color:var(--ink);box-shadow:0 22px 50px color-mix(in srgb,var(--navy) 30%,transparent),0 3px 10px color-mix(in srgb,var(--navy) 18%,transparent),inset 0 0 0 1px var(--line);font-size:var(--font-size-xs);font-weight:800}.lj-tab .n{writing-mode:vertical-rl;line-height:1}.lj-tab:hover{background:color-mix(in srgb,var(--info-tint),var(--navy) 6%)}.lj-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.lj-tab .mini{display:flex;flex-direction:column;gap:.1875rem}.lj-tab .mini i{width:.375rem;height:.75rem;border-radius:999px;background:color-mix(in srgb,var(--navy) 18%,transparent)}.lj-tab .mini i.d{background:var(--green-mark)}.lj-tab .mini i.n{background:var(--blue)}
/* the partner's side is full width too; on a lessons page its scrolling body stops short of the tab, so the tab never sits on its scrollbar */
.portal.jm-tab .portal-body{margin-right:1.5rem}.portal{position:fixed;inset:0;z-index:35;background:var(--ground);display:flex;flex-direction:column}
.portal-bar{flex:none;display:flex;align-items:center;gap:.625rem;padding:.625rem 1.125rem;background:var(--navy);color:var(--on-navy)}
.portal-back.ie-btn{background:var(--on-navy);color:var(--navy);border-color:transparent}.portal-back.ie-btn:focus-visible{outline:2px solid var(--on-navy-focus);outline-offset:2px}
.portal-body{flex:1 1 auto;min-height:0;overflow:auto;padding:1.625rem 1.125rem 1.875rem}
.portal-col{margin:0 auto;display:flex;flex-direction:column;gap:.875rem}
.portal-foot{flex:none;display:flex;align-items:center;gap:.875rem;padding:var(--space-3) 1.625rem;background:var(--surface);border-top:1px solid var(--line)}
.mail{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.mail-head{margin:0;padding:var(--space-3) 1.375rem;display:flex;flex-direction:column;gap:var(--space-1);background:var(--surface-sunken);border-bottom:1px solid var(--line-soft)}
.mail-head div{display:grid;grid-template-columns:4.125rem 1fr;gap:var(--space-2);font-size:var(--font-size-sm)}.mail-head dt{color:var(--muted)}.mail-head dd{margin:0;color:var(--ink)}
.mail-body{padding:1.125rem 1.375rem 1.375rem;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--font-size-sm);line-height:var(--line-height-sm);color:var(--ink)}.mail-body p{margin:0}
.mail-list{margin:0;padding-left:1.125rem;display:flex;flex-direction:column;gap:var(--space-1)}.mail-why{display:block;font-size:var(--font-size-xs);color:var(--red)}
.mail-note{margin:0;padding:.625rem var(--space-3);border-left:3px solid var(--line);color:var(--ink-2);font-size:var(--font-size-sm)}.mail-note span{display:block;font-size:var(--font-size-xs);color:var(--muted);margin-top:var(--space-1)}
.mail-small{font-size:var(--font-size-xs)!important;line-height:var(--line-height-xs)!important;color:var(--muted)}
.up-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:.875rem 1.125rem;display:flex;flex-direction:column;gap:var(--space-1)}
.up-file{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:.625rem var(--space-3);border-radius:12px;background:var(--surface-sunken)}
.rvchg{display:grid;grid-template-columns:minmax(0,6rem) minmax(0,1fr);gap:.625rem;padding:var(--space-2) var(--space-3) var(--space-2) 1.625rem;font-size:var(--font-size-sm);list-style:none}.rvchg .lbl{color:var(--muted)}.rvchg b{display:block;color:var(--ink)}.rvchg s{display:block;color:var(--muted);font-size:var(--font-size-xs);margin-top:.125rem}.vchg-box{display:flex;flex-direction:column;gap:var(--space-1\.5)}.vdiff{flex:none;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-3);border-radius:14px;background:var(--surface-sunken);border:1px solid var(--line-soft)}.up-out{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);margin:.125rem 0 var(--space-1\.5) var(--space-6);border-radius:10px;background:var(--surface-sunken);font-size:var(--font-size-xs);color:var(--ink-2)}
.vchg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:.625rem;align-items:baseline;font-size:var(--font-size-sm);padding:var(--space-1\.5) 0;border-top:1px solid var(--line-soft)}
.vchg.head span{font-size:var(--font-size-xs);font-weight:700;color:var(--muted);text-decoration:none}.vchg .lbl{color:var(--muted)}.vchg .from{color:var(--muted);text-decoration:line-through}.vchg .to{color:var(--ink);font-weight:700}
.up-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.75rem,1fr));gap:.625rem var(--space-3)}
@keyframes hl-pulse{from{opacity:.45}to{opacity:1}}
.up-back{margin:0;padding:var(--space-2) var(--space-3);border-radius:12px;background:var(--red-tint);color:var(--red);font-size:var(--font-size-xs);font-weight:600}
.pt-hole{position:fixed;z-index:39;border-radius:18px;box-shadow:0 0 0 9999px color-mix(in srgb,color-mix(in srgb,var(--navy),#000 35%) 74%,transparent);pointer-events:none;transition:all .25s ease}
/* the spotlight keeps a steady 3px ring under the pulse (.hl::before), so the target is never unmarked between pulses */
/* a step with context: the context box cuts the full scrim, and inside it a lighter scrim leaves only what to do next fully lit */
.pt-ctx{position:fixed;z-index:39;border-radius:18px;overflow:hidden;pointer-events:none;box-shadow:0 0 0 9999px color-mix(in srgb,color-mix(in srgb,var(--navy),#000 35%) 74%,transparent);transition:all .25s ease}
.pt-ctx .pt-hole.in{position:absolute;z-index:auto;border-radius:14px;box-shadow:0 0 0 9999px color-mix(in srgb,color-mix(in srgb,var(--navy),#000 35%) 30%,transparent)}
.pt-ring{position:fixed!important;pointer-events:none}
/* a rail label wider than its item (a long list name) widens the item up to the rail's width and wraps, centred; a label that fits keeps the design system's item.
   Temporary, for every setup: design_system#18 moves it into NavRail. */
.ie-rail .ie-rail-item{width:auto;min-width:4.5rem;max-width:100%}
.ie-rail .ie-rail-item .lb{max-width:none}
/* on the navy rail the glow is white, as the design system's tour glow is (never Engram Blue on Midnight) */

.jt{position:relative;box-sizing:border-box;width:100%;padding:.875rem var(--space-4) var(--space-3);border-radius:18px;background:var(--info-tint);color:var(--ink);box-shadow:0 22px 50px color-mix(in srgb,var(--navy) 32%,transparent),0 3px 10px color-mix(in srgb,var(--navy) 16%,transparent);font-family:var(--font-sans)}
.jt::before{content:'';position:absolute;width:.875rem;height:.875rem;background:var(--info-tint);transform:rotate(45deg);border-radius:3px}
.jt.at-right::before{left:-.4375rem;top:var(--ay,1.375rem)}.jt.at-left::before{right:-.4375rem;top:var(--ay,1.375rem)}.jt.at-bottom-start::before{top:-.4375rem;left:var(--ax,1.625rem)}.jt.at-top-end::before{bottom:-.4375rem;right:1.625rem}.ie-rise[style*='--ax'] .jt.at-top-end::before{right:auto;left:var(--ax)}.jt.at-none::before{display:none}
/* the tip's head: Back on the left, the lesson's steps to its right */
.jt-head{display:flex;align-items:center;gap:var(--space-3)}
.jt.fin{width:20.875rem}
/* the lesson's steps, as the collapsed tab shows them: done green, this one Engram Blue, the rest faint */
.jt-segs{flex:1;display:flex;gap:.1875rem;min-width:0}.jt-segs i{flex:1;height:.375rem;border-radius:999px;background:color-mix(in srgb,var(--navy) 18%,transparent)}.jt-segs i.d{background:var(--green-mark)}.jt-segs i.n{background:var(--blue)}
.jt-row{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-3)}.jt-row .jt-act{flex:none}.jt-t{flex:1;min-width:0;margin:0;font-size:var(--font-size-lg);font-weight:800;line-height:var(--line-height-lg);color:var(--ink)}
.jt-hint{display:flex;align-items:center;gap:var(--space-2);margin:.625rem 0 0;padding:var(--space-2) .625rem;border-radius:10px;background:var(--surface);color:var(--ink);font-size:var(--font-size-xs);font-weight:700;line-height:var(--line-height-xs)}.jt-hint svg{width:.875rem;height:.875rem;flex:none;color:var(--cyan)}
.jt-freeze{position:fixed;z-index:40;pointer-events:auto;cursor:default;border-radius:18px;background:transparent}
.jt-act{position:relative}
/* one primary on the screen, and it is the next thing to do: when the tip holds it (Next, Done), the tip's button is the primary and the app's primaries step back to secondary */
body:has(.jt button.jt-act) .ie-btn.primary{background:var(--surface);color:var(--strong);border-color:var(--royal)}body:has(.jt button.jt-act) .ie-btn.primary .ie-icon,body:has(.jt button.jt-act) .ie-btn.primary svg{color:var(--strong)}
/* the lit control's own focus border goes quiet under the lesson's ring: one mark, never two */
.ie-input[data-jt-lit],.ie-textarea[data-jt-lit],[data-jt-lit] .ie-input:focus-visible{border-color:var(--control-line)!important;box-shadow:none!important;outline:none!important}
/* the lesson's end: a success card, its view behind lit lightly */
.jt.fin{width:20.875rem;text-align:center}.jt.fin .jt-segs{display:none}.jt.fin .jt-head{justify-content:flex-start}
.jt.fin .jt-row{flex-direction:column;align-items:center;margin-top:var(--space-2)}.jt.fin .jt-t{flex:none}
.jt-medal{position:relative;display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:.25rem auto 0;border-radius:999px;background:var(--green-mark);color:var(--on-royal)}.jt-medal svg{width:1.5rem;height:1.5rem}
.ie-row.nr,li.nr{margin:.1875rem 0}.ie-row.nr:not(.link),li.nr:not(.link){border:1.5px solid var(--red-mark);background:var(--red-tint);border-radius:12px}
/* a missing document marks the row's own button, the same box the selection tints (the row's menu sits outside it) */
.ie-row.nr .ie-row-go{background:var(--red-tint);box-shadow:inset 0 0 0 1.5px var(--red-mark)}.ie-row.nr:not(.sel) .ie-row-go:hover{background:color-mix(in srgb,var(--red-tint),#000 5%)}.ie-row.nr.sel .ie-row-go{background:var(--select-tint)}
.lj-win{display:flex;flex-direction:column;align-items:center;gap:.625rem;text-align:center;padding:var(--space-4) var(--space-1\.5) var(--space-1\.5)}
.lj-win .medal{position:relative;width:4rem;height:4rem;border-radius:999px;display:grid;place-items:center;background:var(--green-mark);color:var(--on-royal);box-shadow:none}
.lj-win h3{margin:var(--space-1) 0 0;font-size:var(--font-size-3xl);line-height:var(--line-height-3xl);font-weight:800;color:var(--ink)}.lj-win p{margin:0 0 var(--space-1\.5);font-size:var(--font-size-sm);line-height:var(--line-height-sm);color:var(--ink-2)}
.lj-win .lj-pick{width:100%;min-height:6.5rem}
.jt-foot{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}.jt-foot:empty{display:none}
.jt-back{all:unset;flex:none;cursor:pointer;font-size:var(--font-size-xs);font-weight:700;color:var(--muted);padding:.125rem .125rem;border-radius:8px}.jt-back:hover{color:var(--ink)}.jt-back:focus-visible{outline:2px solid var(--blue)}
.pt-scrim{position:fixed;inset:0;z-index:39;background:color-mix(in srgb,var(--navy) 50%,transparent)}
/* a lesson's last step: the view behind stays readable under a light veil */
.pt-scrim.soft{background:color-mix(in srgb,var(--navy) 18%,transparent)}
.pt-lost{position:fixed;left:6rem;bottom:1.375rem;z-index:42;display:flex;align-items:center;gap:var(--space-2);padding:.625rem var(--space-3) .625rem .875rem;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-popover);width:22rem}
.sheet{width:100%;max-width:520px;box-sizing:border-box;background:#fff;border-radius:6px;box-shadow:0 1px 3px color-mix(in srgb,var(--navy) 12%,transparent),0 8px 24px color-mix(in srgb,var(--navy) 8%,transparent);padding:32px 36px;font-family:Georgia,"Times New Roman",serif;align-self:flex-start}
.sheet .line{height:8px;border-radius:4px;background:#ECEFF3;margin:8px 0}
.svwrap{position:relative;display:inline-flex}
.reviewtip{font-size:var(--font-size-sm);line-height:1.4;font-weight:400;position:absolute;left:calc(100% + .875rem);top:-.75rem;z-index:6;width:15.625rem;box-sizing:border-box;padding:var(--space-3);border-radius:14px;background:var(--info-tint);border:2px solid var(--blue);box-shadow:0 10px 28px color-mix(in srgb,var(--navy) 25%,transparent);font-family:var(--font-sans);color:var(--ink);display:flex;flex-direction:column;gap:var(--space-2);text-align:left}
.reviewtip::before{content:'';position:absolute;left:-.5rem;top:1.125rem;width:.75rem;height:.75rem;background:var(--info-tint);border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg)}
/* the viewer's zoom bar floats at the top of the viewer; while a tip is open the page scrolls below the bar, so the tip (z 6, above the document) never sits on it */
.ie-viewer:has(.reviewtip) .ie-viewer-scroll{margin-top:3rem}
.reviewtip .ie-input{width:100%;box-sizing:border-box;background:var(--surface)}
.reviewtip .rt-val{font-size:var(--font-size-md);font-weight:700;color:var(--ink)}
.reviewtip .rt-val::placeholder{font-size:var(--font-size-sm);font-weight:400}
.rt-alts{display:flex;flex-direction:column;gap:var(--space-1)}
.rt-alt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 .625rem;border-radius:10px;border:1px solid var(--control-line);background:var(--surface);font-size:var(--font-size-sm);font-weight:600}
.rt-alt[aria-checked="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.rt-alt:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.rt-pc{margin-left:auto;font-size:var(--font-size-xs);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.reviewtip .rt-acts{display:flex;justify-content:flex-end;gap:var(--space-1\.5)}
.vdoc{font:400 13px/1.5 "Helvetica Neue",Arial,sans-serif;color:#111}
/* the toast centres on the window; from 64rem, while a side drawer (min(40rem, 100%) wide) is open, it centres in the space left of it. Below 40rem the drawer fills the window and the toast stays centred over it; from 40rem to 64rem the toast still overlaps the drawer */
.toast-host{position:fixed;left:0;right:0;bottom:1.375rem;z-index:80;display:flex;justify-content:center;pointer-events:none}
@media (min-width:64rem){body:has(.ie-drawer.side) .toast-host{right:40rem}}
.toastbtn{all:unset;cursor:pointer;padding:var(--space-1) .625rem;border-radius:999px;color:var(--on-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toastbtn:hover{background:rgba(255,255,255,.12)}
.toastbtn:focus-visible{outline:2px solid var(--on-navy-focus)}
.rvbar{flex:1;min-width:2.375rem;height:.375rem;border-radius:999px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;margin:0 var(--space-1)}
.reviewtip.below{left:auto;right:-.5rem;top:calc(100% + .75rem)}
.reviewtip.below::before{left:auto;right:1.375rem;top:-.5rem;border-bottom:0;border-top:2px solid var(--blue)}
.rt-ai{display:flex;align-items:center;gap:var(--space-1\.5);font-size:var(--font-size-xs);font-weight:700;color:var(--ai-ink)}
.rt-lbl{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--font-size-xs);font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.reviewtip .rt-key{min-height:var(--control-md);font-size:var(--font-size-sm);font-weight:600;color:var(--ink)}
.rt-pc{display:inline-flex;align-items:center;gap:.1875rem;color:var(--ai-ink)!important}
/* the Details card yields its height first (the shrink weight) and scrolls inside, so the card below it keeps its rows; it keeps two fields in view, and folds to its title while the card below holds a form */
.ie-card.ie-yield{flex:0 1000 auto;min-height:10.625rem}
.ie-card.ie-yield.folded{flex:none;min-height:0}
.ie-card.ie-yield.folded>.ie-card-body{display:none}
/* on a short window the folded card steps aside altogether, so the whole contact form (with its send-to checkbox) fits under Contacts' title */
@media (max-height:760px){.ie-card.ie-yield.folded{display:none}}
/* the filter column beside a list scrolls inside itself when its options are taller than the window (D72). FilterPanel asks for it (ie-scroll),
   but the card's overflow:hidden comes later in the design system bundle and wins; the fix belongs in the design system, this restores it here meanwhile */
.ie-card.ie-filters{overflow-y:auto}
/* a drawer's own buttons stay at its bottom edge while its content scrolls, ruled like the drawer's footer */
.ie-drawer-foot{position:sticky;bottom:-.875rem;z-index:1;margin:0 -.875rem -.875rem;padding:var(--space-3) .875rem;background:var(--surface);border-top:1px solid var(--line)}
/* the dashboard's right column on a short window (under 760px tall): the expiry chart steps aside, so the four numbers and three coverage rows show; it comes back while a tour step is about it */
.ie-dash-nums{flex:none}
.ie-dash-cov{flex:1 1 0;min-height:0}
@media (max-height:760px){.ie-dash-chart{display:none}body:has(.ie-rise.chart) .ie-dash-chart,.ie-dash-nums:has(.ie-tip-anchor) .ie-dash-chart{display:block}}
/* the file Engrama is reading: a rounded row, so the aura has the shape of what it lights (its width unchanged as the reading moves on) */
.ie-row.reading{position:relative;border-radius:12px;border-top-color:transparent;margin-inline:calc(var(--space-2) * -1);padding-inline:var(--space-2)}
/* during a lesson the tip says what happened: the app's toasts (and their Undo) wait, so nothing stacks on the tip or the lit control */
body:has(.jt) .toast-row{display:none!important}   /* over .toast-host's display */