/* GENERATED by scripts/ds-sync.mjs from @innovedge/design-system 3.2.0 (24db54a, web-phone-media-foundations, in origin/web-phone-media-foundations) and engrama_demo origin/main (e31b25c). 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;--blue:#2637C9;--focus:#2637C9;--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-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:#F6F5F2;--paper-100:#F4F1EA;--paper-200:#E5DFD3;--paper-300:#CDC7B9;--paper-400:#ABA698;--paper-500:#918B7E;--paper-600:#797367;--paper-700:#676256;--paper-800:#544F43;--paper-900:#474237;--paper-950:#2E291E;--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:#F4F1EA;--web-ink:#11175F;--web-signature:#2637C9;--web-on-signature:#F4F1EA;--web-deep:#11175F;--web-on-deep:#F4F1EA;--web-accent:#F2B33D;--web-line:#E5DFD3;--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); }
.ie-btn:hover { background: var(--surface-sunken); }
.ie-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ie-btn.primary { background: var(--royal); color: var(--on-royal); border-color: var(--royal); }
.ie-btn.primary:hover { filter: brightness(1.08); }
.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); }
.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; }
.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; }
@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); }

.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); }
.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 { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--royal); color: var(--on-royal); font: 700 var(--font-size-xs)/1.75rem var(--font-sans); text-align: center; flex: none; display: inline-block; }
.ie-avatar.lg { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: var(--font-size-sm); }
.ie-avatar.neutral { background: var(--line-soft); color: var(--ink-2); }
.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; }
.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 a { 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 { width: 3.25rem; height: 1.75rem; border-radius: var(--radius-full); display: grid; place-items: center; }
.ie-bottomnav a[aria-current="page"] { color: var(--blue); }
.ie-bottomnav a[aria-current="page"] .pad { background: var(--select-tint); }
.ie-bottomnav a: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); }
.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; }
.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); }
.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:hover, .ie-menu .item:focus-visible { 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-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: 600px) { .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; }
@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: 600px) { .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; }

/* 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: 600px) { .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); }
.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); }
.ie-choice .exs { display: flex; flex-direction: column; gap: var(--space-1); }
.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); }
.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: auto; 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; }
.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; }
.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 { 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); }
.ie-btn:not(.primary):not(.ai):not(.ghost):not(.danger):not(.bare):not(.add):hover { background: var(--select-tint); }

/* ---- 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; }
.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:hover { background: var(--surface-sunken); }
.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; }
.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; }

/* ---- 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); }
.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: 900px) { .ie-topbar, .ie-topbar .ie-title { flex-wrap: wrap; white-space: normal; } }

/* 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); }
.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); }
.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-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); }
.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 */
.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); }
.ie-rail-item:hover { background: rgba(255,255,255,.08); }
.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-item:hover .lb, .ie-rail-add .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 { background: var(--navy-active); flex: none; width: 2.25rem; height: 2.25rem; line-height: 2.25rem; 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; }
.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; }
.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: surface-sunken fill, 12px corners, bleeding 8px past the text. 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); }
.ie-row-go:hover, .ie-row.link.has-act:hover { background: var(--surface-sunken); }
.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; }
.ie-row.link.has-act .ie-row-go:hover { background: transparent; }
.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:hover .ie-go, .ie-row-go:focus-visible .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: surface-sunken. 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; }
.ie-row.sub.sel .ie-row-go:hover { background: var(--surface-sunken); }
.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; }
.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. */
.ie-bar i.miss:first-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:hover .ie-go, .ie-row.link.has-act:focus-within .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) */
.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); }
.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-table tr.link:hover td, .ie-table tr.link:hover th.name { background: var(--surface-sunken); }
.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; }
.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); }
.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 glow is one ring that grows out and fades, the same on every control a tour points at (and in a product's own tour tips: use hl-ring) */
@keyframes hl-ring { from { inset: -.1875rem; opacity: .9; } to { inset: -.5rem; opacity: 0; } } /* 8px: inside the rail's and the footers' gutters */
@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); }
.ie-tourtip .act, .ck-glow .ie-check input, .hl { position: relative; z-index: 41; }
.ck-glow .ie-check input { overflow: visible; }
.ie-tourtip .act::before, .ck-glow .ie-check input::before, .hl::before { content: ''; position: absolute; inset: -.1875rem; border-radius: inherit; border: 3px solid var(--glow, var(--blue)); pointer-events: none; animation: hl-ring 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .ie-rise, .ie-pop { animation: none; } .ie-tourtip .act::before, .ck-glow .ie-check input::before, .hl::before { animation: none; } }
.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); }


a{color:var(--blue)}a:hover{color:var(--strong)}
.tip-cktab .ie-tourtip .arrow{right:auto;left:112px}
.fb-q{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.fb-q-head{display:flex;align-items:center;gap:2px}.fb-n{flex:1;font-size:13px;font-weight:700;color:var(--muted)}.fb-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.lj{flex:none;position:relative;z-index:45;display:flex;flex-direction:column;min-height:0;margin:10px;border-radius:22px;overflow:hidden;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)}
.lj.open{width:280px}.lj.gone{display:none}
.lj-gate{position:fixed;top:0;left:0;bottom:0;right:300px;z-index:44;background:color-mix(in srgb,var(--navy) 50%,transparent);cursor:not-allowed}
/* 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:14px;padding:0 0 32px}.lj-choose>:not(.lj-hello){margin-left:18px;margin-right:18px}.lj-choose>:last-child{margin-bottom:auto}
.lj-hello{margin:0 0 18px;padding:40px 18px 30px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-size:22px;line-height:28px;font-weight:800;background:var(--navy);color:var(--on-navy)}
.lj-brand{display:flex;justify-content:center}
.lj-either{margin:0 0 4px;font-size:26px;line-height:32px;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:18px;min-height:96px;padding:18px;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:hover{transform:translateY(-3px)}.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:132px;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:48px;height:48px;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:20px;font-weight:800;color:var(--strong);line-height:24px;letter-spacing:-.2px}.lj-pick.main b{font-size:24px;line-height:28px}
.lj-or{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;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:38px;padding:10px 0 8px;gap:6px;border-radius:14px;background:var(--royal);color:var(--on-royal);font-size:12.5px;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:10px;padding:18px 14px 6px 20px;background:var(--navy)}
.lj-head h2{margin:0;font-size:16px;font-weight:800;color:var(--on-navy);letter-spacing:.1px}.lj-sub{display:block;margin-top:1px;font-size:12.5px;color:var(--on-navy-muted)}
.lj-x{all:unset;cursor:pointer;width:32px;height:32px;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:4px;padding:8px 20px 16px;background:var(--navy)}.lj-segs i{flex:1;height:6px;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:4px 16px 24px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--navy) 22%,transparent) transparent}
.lj-unit{margin-top:14px}
.lj-ban{display:flex;align-items:center;gap:12px;padding:12px 14px;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:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}.lj-ban b{display:block;font-size:15.5px;font-weight:800;line-height:20px}
.lj-bcount{margin-left:auto;flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent)}
.lj-path{list-style:none;margin:0;padding:18px 0 4px;display:flex;flex-direction:column;align-items:center;gap:12px}
.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:7px;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:62px;height:58px;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:hover .lj-dot{transform:translateY(-2px)}.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%)}
.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%)}
.lj-node.next .lj-dot::after{content:'';position:absolute;inset:-8px;border-radius:999px;border:3px solid color-mix(in srgb,var(--blue) 35%,transparent);opacity:.9;animation:ljp 1.8s ease-out infinite}
@keyframes ljp{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.18);opacity:0}}
/* the pulse is a faint tint, never the focus ring; without motion it goes (the Blue dot already says next) */
@media (prefers-reduced-motion: reduce){.lj-node.next .lj-dot::after{display:none}}
.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:-7px;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.locked:hover .lj-dot{transform:none}
.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:150px;text-align:center;font-size:12.5px;font-weight:700;line-height:16px;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:14px;padding:14px 16px;border-radius:16px;background:var(--surface);color:var(--ink)}
.lj-pop::before{content:'';position:absolute;top:-7px;left:var(--ax,50%);width:14px;height:14px;margin-left:-7px;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:15px;font-weight:800;line-height:20px}.lj-pop p{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--ink-2)}.lj-pop.locked p{color:var(--muted)}
.lj-pop-in{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 12px}.lj-pop-in b{flex:1 1 120px}.lj-pop .row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
.lj-go{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 18px;border-radius:12px;background:var(--royal);color:var(--on-royal);font-size:14px;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:9px 6px}
.lj-steps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.lj-steps li{position:relative;padding-left:24px;font-size:12.5px;line-height:17px;color:var(--muted)}.lj-steps li::before{content:attr(data-n);position:absolute;left:0;top:0;width:17px;height:17px;border-radius:999px;background:var(--line);font-size:10.5px;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 4px;padding:8px 8px 10px 12px;border-top:1px solid color-mix(in srgb,var(--navy) 18%,transparent);font-size:12px;color:var(--muted)}
.lj-foot button{all:unset;cursor:pointer;white-space:nowrap;font-size:12px;font-weight:700;color:var(--blue);padding:6px 4px;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;width:46px;height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0;color:var(--ink);font-size:12px;font-weight:800}.lj-tab:hover{background:color-mix(in srgb,var(--navy) 5%,transparent)}.lj-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.lj-tab .mini{display:flex;flex-direction:column;gap:3px}.lj-tab .mini i{width:6px;height:14px;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)}
.portal.jm-open{right:300px}.portal.jm-tab{right:66px}.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:10px;padding:10px 20px;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:28px 20px 32px}
.portal-col{margin:0 auto;display:flex;flex-direction:column;gap:16px}
.portal-foot{flex:none;display:flex;align-items:center;gap:16px;padding:14px 28px;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:14px 24px;display:flex;flex-direction:column;gap:4px;background:var(--surface-sunken);border-bottom:1px solid var(--line-soft)}
.mail-head div{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:13.5px}.mail-head dt{color:var(--muted)}.mail-head dd{margin:0;color:var(--ink)}
.mail-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:22px;color:var(--ink)}.mail-body p{margin:0}
.mail-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}.mail-why{display:block;font-size:13px;color:var(--red)}
.mail-note{margin:0;padding:10px 14px;border-left:3px solid var(--line);color:var(--ink-2);font-size:14px}.mail-note span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.mail-small{font-size:12.5px!important;line-height:18px!important;color:var(--muted)}
.up-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.up-file{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:var(--surface-sunken)}
.rvchg{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:10px;padding:8px 12px 8px 28px;font-size:14px;list-style:none}.rvchg .lbl{color:var(--muted)}.rvchg b{display:block;color:var(--ink)}.rvchg s{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}.vchg-box{display:flex;flex-direction:column;gap:6px}.vdiff{flex:none;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface-sunken);border:1px solid var(--line-soft)}.up-out{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:2px 0 6px 26px;border-radius:10px;background:var(--surface-sunken);font-size:13px;color:var(--ink-2)}
.vchg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:baseline;font-size:13.5px;padding:6px 0;border-top:1px solid var(--line-soft)}
.vchg.head span{font-size:12px;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(220px,1fr));gap:10px 14px}
.up-checking{font-size:12.5px;color:var(--ai-ink);font-weight:600;animation:hl-pulse 1s ease-in-out infinite alternate}
@keyframes hl-pulse{from{opacity:.45}to{opacity:1}}
.up-back{margin:0;padding:8px 12px;border-radius:12px;background:var(--red-tint);color:var(--red);font-size:13px;font-weight:600}
.pt-hole{position:fixed;z-index:39;border-radius:18px;box-shadow:0 0 0 9999px color-mix(in srgb,var(--navy) 50%,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,var(--navy) 50%,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,var(--navy) 22%,transparent)}
.pt-ring{position:fixed!important;border-radius:16px;pointer-events:none;z-index:41;box-shadow:0 0 0 3px var(--glow,var(--blue))}
/* on the navy rail the glow is white, as the design system's tour glow is (never Engram Blue on Midnight) */
.pt-ring.on-navy{--glow:var(--on-navy)}
.jt{position:relative;box-sizing:border-box;width:100%;padding:16px 18px 14px;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:16px;height:16px;background:var(--info-tint);transform:rotate(45deg);border-radius:3px}
.jt.at-right::before{left:-7px;top:var(--ay,24px)}.jt.at-left::before{right:-7px;top:var(--ay,24px)}.jt.at-bottom-start::before{top:-7px;left:var(--ax,28px)}.jt.at-top-end::before{bottom:-7px;right:28px}.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:12px}
.jt.fin{width:360px}
/* 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:3px;min-width:0}.jt-segs i{flex:1;height:6px;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:14px;margin-top:12px}.jt-row .jt-act{flex:none}.jt-t{flex:1;min-width:0;margin:0;font-size:16px;font-weight:800;line-height:22px;color:var(--ink)}
.jt-hint{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;line-height:17px}.jt-hint svg{width:16px;height:16px;flex:none;color:var(--cyan)}
.jt-freeze{position:fixed;z-index:40;pointer-events:auto;cursor:default;border-radius:18px;background:transparent}
/* the tour glow, as the design system draws it on the control a step points at (.hl, keyframes hl-ring) */
.jt-act{position:relative}.jt.look .jt-act::after,.jt.fin .jt-act::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--blue);pointer-events:none;animation:hl-ring 1.8s ease-out infinite}
.lj-ghost{position:fixed;z-index:70;background:var(--info-tint);border-radius:22px;box-shadow:0 22px 50px color-mix(in srgb,var(--navy) 30%,transparent);pointer-events:none;transition:left .5s cubic-bezier(.3,.8,.25,1),top .5s cubic-bezier(.3,.8,.25,1),width .5s cubic-bezier(.3,.8,.25,1),height .5s cubic-bezier(.3,.8,.25,1),border-radius .5s ease,opacity .25s ease}
.ie-row.nr,li.nr{margin:3px 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:10px;text-align:center;padding:18px 6px 6px}
.lj-win .medal{width:68px;height:64px;border-radius:999px;display:grid;place-items:center;background:var(--green-mark);color:var(--on-royal);box-shadow:0 5px 0 color-mix(in srgb,var(--green-mark),#000 35%)}
.lj-win h3{margin:4px 0 0;font-size:21px;line-height:26px;font-weight:800;color:var(--ink)}.lj-win p{margin:0 0 6px;font-size:13.5px;line-height:19px;color:var(--ink-2)}
.lj-win .lj-pick{width:100%;min-height:112px}
.lj-tourbtn.lj-hide{visibility:hidden}.lj-tourbtn.lj-pulse{position:relative}.lj-tourbtn.lj-pulse::before{content:'';position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--blue);pointer-events:none;animation:hl-ring 1.8s ease-out 2 forwards}
.jt-foot{display:flex;align-items:center;gap:8px;margin-top:14px}.jt-foot:empty{display:none}
.jt-back{all:unset;flex:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);padding:2px 2px;border-radius:8px}.jt-back:hover{color:var(--ink)}.jt-back:focus-visible{outline:2px solid var(--blue)}
.jt-pin{position:fixed;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;border-radius:999px;background:var(--highlight);color:var(--on-highlight);font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25);pointer-events:none;animation:jtb 1.2s ease-in-out infinite}
.jt-pin svg{width:16px;height:16px;flex:none}
@keyframes jtb{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.jt-pin,.jt-act::after,.lj-tourbtn.lj-pulse::before{animation:none}}
.pt-scrim{position:fixed;inset:0;z-index:39;background:color-mix(in srgb,var(--navy) 50%,transparent)}
.pt-lost{position:fixed;left:96px;bottom:24px;z-index:42;display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-popover);width:380px}
.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:14px;line-height:1.4;font-weight:400;position:absolute;left:calc(100% + 16px);top:-14px;z-index:6;width:270px;box-sizing:border-box;padding:12px;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:8px;text-align:left}
.reviewtip::before{content:'';position:absolute;left:-8px;top:20px;width:12px;height:12px;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:52px}
.reviewtip .ie-input{width:100%;box-sizing:border-box;background:var(--surface)}
.reviewtip .rt-val{font-size:15px;font-weight:700;color:var(--ink)}
.rt-alts{display:flex;flex-direction:column;gap:4px}
.rt-alt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border-radius:10px;border:1px solid var(--control-line);background:var(--surface);font-size:13.5px;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:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.reviewtip .rt-acts{display:flex;justify-content:flex-end;gap:6px}
.vdoc{font:400 13px/1.5 "Helvetica Neue",Arial,sans-serif;color:#111}
.toastbtn{all:unset;cursor:pointer;padding:4px 10px;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:40px;height:6px;border-radius:999px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;margin:0 4px}
.reviewtip.below{left:auto;right:-8px;top:calc(100% + 12px)}
.reviewtip.below::before{left:auto;right:24px;top:-8px;border-bottom:0;border-top:2px solid var(--blue)}
.rt-ai{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ai-ink)}
.rt-lbl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.reviewtip .rt-key{min-height:34px;font-size:14px;font-weight:600;color:var(--ink)}
.rt-pc{display:inline-flex;align-items:center;gap:3px;color:var(--ai-ink)!important}