/* ---------------------------------------------------------------- base */
[class*="ifn-"], [class*="ifn-"]::before, [class*="ifn-"]::after { box-sizing: border-box; }
.ifn-root, .ifn-portal, .ifn-modal, .ifn-menu, .ifn-listbox, .ifn-tip, .ifn-card, .ifn-asks, .ifn-toaster, .ifn-sheet-backdrop, .ifn-window, .ifn-page, .ifn-staff, .ifn-oh-host {
  font-family: var(--ifn-font); font-size: var(--ifn-text-md); line-height: var(--ifn-leading); font-weight: var(--ifn-weight-regular);
  color: var(--ifn-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.ifn-root { position: relative; min-width: 0; max-width: 100%; }
.ifn-portal { position: fixed; inset: 0; z-index: var(--ifn-z-popup); pointer-events: none; overflow: hidden; }
.ifn-portal > * { pointer-events: auto; }
/* One scrollbar for every scroll area the kit draws, and (a host puts .ifn-scrollbars on its root) for the host's own: thin, quiet, a
   translucent thumb that brightens while the pointer is over the area, no arrows, no track box. The standard properties first (native,
   cheapest); WebKit's pseudo-elements only where they are missing. Zero specificity (:where): an area that hides its bar or sets
   its own keeps it. */
:where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll), :where(.ifn-scrollbars) * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ifn-text) 32%, transparent) transparent; }
@media (hover: hover) { :where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll):hover, :where(.ifn-scrollbars) *:hover { scrollbar-color: color-mix(in srgb, var(--ifn-text) 60%, transparent) transparent; } }
@supports not (scrollbar-width: thin) {
  :where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll)::-webkit-scrollbar, :where(.ifn-scrollbars) *::-webkit-scrollbar { width: 9px; height: 9px; }
  :where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll)::-webkit-scrollbar-thumb, :where(.ifn-scrollbars) *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ifn-text) 32%, transparent); background-clip: content-box; }
  :where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll)::-webkit-scrollbar-track, :where(.ifn-scrollbars) *::-webkit-scrollbar-track, :where(.ifn-scrollbars) *::-webkit-scrollbar-corner { background: transparent; }
  :where(.ifn-scrollbars, .ifn-modal-body, .ifn-window-body, .ifn-page-body, .ifn-listbox, .ifn-menu, .ifn-sheet, .ifn-staff-body, .ifn-scroll)::-webkit-scrollbar-button, :where(.ifn-scrollbars) *::-webkit-scrollbar-button { display: none; }
}
.ifn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ifn-ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.ifn-ico svg { width: 100%; height: 100%; display: block; }
[class*="ifn-"]:focus { outline: none; }
[class*="ifn-"]:focus-visible, html.ifn-nav-keys [class*="ifn-"]:focus { outline: 3px solid var(--ifn-focus); outline-offset: 2px; }
/* zero specificity (:where), so every component's own font size and colour win over this reset */
:where(button[class*="ifn-"], input[class*="ifn-"], select[class*="ifn-"], textarea[class*="ifn-"]) { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { :root { --ifn-motion: 0; } }
:root[data-reduced-motion] [class*="ifn-"] { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

/* ---------------------------------------------------------------- buttons */
.ifn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ifn-space-2);
  min-height: var(--ifn-tap); min-width: var(--ifn-tap); padding: 0 var(--ifn-space-4); max-width: 100%;
  border-radius: var(--ifn-radius-control, var(--ifn-radius-pill)); border: var(--ifn-edge-w, 2px) solid var(--ifn-control-edge, var(--ifn-line-2)); background: var(--ifn-control-bg, var(--ifn-surface-2)); color: var(--ifn-text);
  font-weight: var(--ifn-weight-heavy); font-size: var(--ifn-text-md); cursor: pointer; white-space: nowrap; touch-action: manipulation; user-select: none;
  transition: transform var(--ifn-dur-fast) var(--ifn-ease), background var(--ifn-dur-fast), border-color var(--ifn-dur-fast), box-shadow var(--ifn-dur-fast);
}
.ifn-btn-label { overflow: hidden; text-overflow: ellipsis; }
.ifn-btn:active { transform: scale(0.97); }
.ifn-btn--primary { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--ifn-on-accent); }
.ifn-btn--lime { background: var(--color-lime); border-color: var(--color-lime); color: var(--ifn-on-lime); }
.ifn-btn--danger { background: var(--ifn-danger); border-color: var(--ifn-danger); color: var(--ifn-on-danger); }
.ifn-btn--ghost { background: transparent; border-color: transparent; }
.ifn-btn--block { display: flex; width: 100%; }
.ifn-btn--lg { min-height: calc(var(--ifn-tap) + 8px); padding: 0 var(--ifn-space-5); font-size: var(--ifn-text-lg); }
.ifn-btn:disabled, .ifn-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }
.ifn-iconbtn {
  display: inline-grid; place-items: center; width: var(--ifn-tap); height: var(--ifn-tap); min-width: var(--ifn-tap); min-height: var(--ifn-tap); padding: 0;
  border-radius: var(--ifn-radius-control, var(--ifn-radius-pill)); border: var(--ifn-edge-w, 2px) solid var(--ifn-control-edge, var(--ifn-line-2)); background: var(--ifn-control-bg, var(--ifn-surface-2)); color: var(--ifn-text); cursor: pointer; touch-action: manipulation;
  transition: background var(--ifn-dur-fast), border-color var(--ifn-dur-fast), transform var(--ifn-dur-fast) var(--ifn-ease);
}
.ifn-iconbtn .ifn-ico { width: 1.35em; height: 1.35em; }
.ifn-iconbtn:active { transform: scale(0.94); }
.ifn-iconbtn--ghost { background: transparent; border-color: transparent; }
.ifn-iconbtn--primary { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--ifn-on-accent); }
.ifn-iconbtn:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) {
  .ifn-btn:not(:disabled):hover, .ifn-iconbtn:not(:disabled):hover { border-color: var(--accent-primary); }
  .ifn-btn--ghost:not(:disabled):hover, .ifn-iconbtn--ghost:not(:disabled):hover { background: var(--ifn-surface-3); }
  .ifn-tab:hover, .ifn-chip:hover, .ifn-seg:hover, .ifn-staff-tab:hover { color: var(--ifn-text); }
  .ifn-option:hover, .ifn-menuitem:not(:disabled):hover, .ifn-page-tab:hover { background: var(--ifn-surface-3); }
  .ifn-preset:hover, .ifn-toggle:hover, .ifn-dropdown:hover { border-color: var(--accent-primary); }
  .ifn-input:not(:focus):hover { border-color: color-mix(in srgb, var(--ifn-focus) 45%, var(--ifn-line-2)); }
}

/* ---------------------------------------------------------------- toggle (the whole row is the target) */
.ifn-toggle {
  display: flex; align-items: center; gap: var(--ifn-space-3); width: 100%; min-height: var(--ifn-tap); padding: var(--ifn-space-2) var(--ifn-space-3);
  border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ifn-toggle:disabled { cursor: default; opacity: 0.6; }
.ifn-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ifn-toggle-label { font-weight: var(--ifn-weight-bold); overflow-wrap: anywhere; }
.ifn-toggle-desc, .ifn-set-desc { color: var(--ifn-text-2); font-size: var(--ifn-text-sm); overflow-wrap: anywhere; }
.ifn-switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--ifn-surface-3); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); transition: background var(--ifn-dur-fast), border-color var(--ifn-dur-fast); }
.ifn-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ifn-text-2); transition: transform var(--ifn-dur-base) var(--ifn-spring), background var(--ifn-dur-fast); }
.ifn-toggle[aria-checked="true"] .ifn-switch { background: var(--accent-primary); border-color: var(--accent-primary); }
.ifn-toggle[aria-checked="true"] .ifn-switch::after { transform: translateX(22px); background: var(--ifn-on-accent); }

/* ---------------------------------------------------------------- slider with readout, stepper, text field */
.ifn-slider { display: flex; flex-direction: column; gap: var(--ifn-space-1); width: 100%; min-width: 0; }
.ifn-rolling { position: relative; display: inline-block; }
.ifn-rolling-pop { position: absolute; right: 0; bottom: 78%; opacity: 0; pointer-events: none; white-space: nowrap; font-size: 0.74em; font-weight: 700; }
.ifn-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ifn-space-3); }
.ifn-slider-label, .ifn-field-label, .ifn-stepper-label { font-weight: var(--ifn-weight-bold); min-width: 0; overflow-wrap: anywhere; }
.ifn-readout { flex: none; min-width: 3.5em; text-align: right; font-weight: var(--ifn-weight-heavy); font-variant-numeric: tabular-nums; color: var(--ifn-accent-text); }
.ifn-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: var(--ifn-tap); height: var(--ifn-tap); margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.ifn-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-primary) var(--ifn-fill, 0%), var(--ifn-surface-3) var(--ifn-fill, 0%)); }
.ifn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--ifn-text); border: 4px solid var(--accent-primary); box-shadow: 0 2px 6px var(--ifn-world-shade); }
.ifn-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--ifn-surface-3); }
.ifn-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent-primary); }
.ifn-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--ifn-text); border: 4px solid var(--accent-primary); }
.ifn-range:disabled { opacity: 0.5; cursor: default; }
.ifn-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--ifn-space-3); width: 100%; min-width: 0; }
.ifn-stepper-controls { display: inline-flex; align-items: center; gap: var(--ifn-space-1); flex: none; border-radius: var(--ifn-radius-pill); background: var(--ifn-surface-2); border: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
.ifn-stepper-value { min-width: 3em; text-align: center; font-weight: var(--ifn-weight-heavy); font-variant-numeric: tabular-nums; }
.ifn-field { display: flex; flex-direction: column; gap: var(--ifn-space-1); width: 100%; min-width: 0; }
.ifn-input {
  width: 100%; min-width: 0; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-4); border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2);
  background: var(--ifn-surface-2); color: var(--ifn-text); font-size: max(16px, var(--ifn-text-md)); user-select: text; -webkit-user-select: text;
  transition: border-color var(--ifn-dur-fast), box-shadow var(--ifn-dur-fast);
}
/* a text field draws its own one focus look (its edge and a soft glow on the same corners), never the ring offset
   round it: a field takes :focus-visible on every click, and a second ring out from it reads as a smudge */
.ifn-input:focus, .ifn-input:focus-visible, html.ifn-nav-keys .ifn-input:focus { outline: none; border-color: var(--ifn-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifn-focus) 28%, transparent); }
.ifn-input::placeholder { color: var(--ifn-text-3); }
.ifn-field-hint { color: var(--ifn-text-3); font-size: var(--ifn-text-sm); }
.ifn-field--invalid .ifn-input { border-color: var(--ifn-danger); }
.ifn-field--invalid .ifn-input:focus { border-color: var(--ifn-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifn-danger) 28%, transparent); }
.ifn-field--invalid .ifn-field-hint { color: var(--ifn-danger-text); }

/* ---------------------------------------------------------------- tabs, chips, segmented choice */
.ifn-tabs { display: flex; gap: var(--ifn-space-1); min-width: 0; max-width: 100%; }
.ifn-tabs--horizontal { flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.ifn-tabs--horizontal::-webkit-scrollbar { display: none; }
.ifn-tabs--vertical { flex-direction: column; }
.ifn-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--ifn-space-2); flex: none; min-height: var(--ifn-tap); min-width: var(--ifn-tap);
  padding: 0 var(--ifn-space-4); border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid transparent; background: transparent; color: var(--ifn-text-2);
  font-weight: var(--ifn-weight-heavy); cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.ifn-tab[aria-selected="true"] { color: var(--ifn-text); background: var(--ifn-surface-2); border-color: var(--accent-primary); }
.ifn-tab[aria-selected="true"] .ifn-ico { color: var(--ifn-accent-text); }
.ifn-tab:disabled { opacity: 0.45; cursor: default; }
.ifn-tab-count { margin-left: auto; font-size: var(--ifn-text-xs); color: var(--ifn-text-3); font-variant-numeric: tabular-nums; }
.ifn-chips { display: flex; flex-wrap: wrap; gap: var(--ifn-space-2); min-width: 0; }
.ifn-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ifn-chip {
  display: inline-flex; align-items: center; gap: var(--ifn-space-1); flex: none; min-height: var(--ifn-tap); min-width: var(--ifn-tap); padding: 0 var(--ifn-space-4);
  border-radius: var(--ifn-radius-pill); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); background: var(--ifn-surface-2); color: var(--ifn-text-2);
  font-weight: var(--ifn-weight-bold); cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.ifn-chip[aria-pressed="true"] { color: var(--ifn-text); border-color: var(--accent-primary); background: var(--ifn-surface-3); }
.ifn-segmented { display: flex; flex-wrap: wrap; gap: var(--ifn-space-1); padding: 3px; border-radius: var(--ifn-radius-lg); background: var(--ifn-surface-2); border: var(--ifn-edge-w, 2px) solid var(--ifn-line); max-width: 100%; }
.ifn-seg {
  flex: 1 0 auto; min-height: var(--ifn-tap); min-width: var(--ifn-tap); padding: 0 var(--ifn-space-3); border: 0; border-radius: var(--ifn-radius-md); background: transparent;
  color: var(--ifn-text-2); font-weight: var(--ifn-weight-heavy); cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.ifn-seg[aria-checked="true"] { background: var(--accent-primary); color: var(--ifn-on-accent); }
.ifn-swatches { display: flex; flex-wrap: wrap; gap: var(--ifn-space-2); }
.ifn-swatch {
  width: var(--ifn-tap); height: var(--ifn-tap); padding: 0; border-radius: var(--ifn-radius-pill); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); background: var(--ifn-swatch, transparent);
  box-shadow: inset 0 0 0 3px var(--ifn-surface); cursor: pointer; touch-action: manipulation;
}
.ifn-swatch[aria-checked="true"] { border-color: var(--ifn-focus); box-shadow: inset 0 0 0 3px var(--ifn-surface), 0 0 0 2px var(--ifn-focus); }
.ifn-swatch:disabled { opacity: 0.45; cursor: default; }
.ifn-search {
  display: flex; align-items: center; gap: var(--ifn-space-2); min-width: 0; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-1) 0 var(--ifn-space-3);
  border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); background: var(--ifn-control-bg, var(--ifn-surface-2)); color: var(--ifn-text-2);
}
.ifn-search:focus-within { border-color: var(--ifn-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ifn-focus) 28%, transparent); }
.ifn-search-input { flex: 1 1 auto; min-width: 0; height: var(--ifn-tap); margin: calc(var(--ifn-edge-w, 2px) * -1) 0; border: 0; background: transparent; color: var(--ifn-text); font: inherit; outline: none; }
.ifn-search-input::placeholder { color: var(--ifn-text-3); }
.ifn-search-input::-webkit-search-cancel-button { display: none; }
.ifn-search-count { flex: none; color: var(--ifn-text-3); font-size: var(--ifn-text-sm); font-variant-numeric: tabular-nums; }
.ifn-search-clear { flex: none; }
.ifn-mark { background: color-mix(in srgb, var(--accent-primary) 38%, transparent); color: inherit; border-radius: 3px; }
.ifn-seg:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------- badges, progress, key caps, avatar */
.ifn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--ifn-space-2); border-radius: var(--ifn-radius-pill); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-heavy); background: var(--ifn-surface-3); color: var(--ifn-text); white-space: nowrap; }
.ifn-badge--accent { background: var(--accent-primary); color: var(--ifn-on-accent); }
.ifn-badge--lime { background: var(--color-lime); color: var(--ifn-on-lime); }
.ifn-badge--danger { background: var(--ifn-danger); color: var(--ifn-on-danger); }
.ifn-badge--success { color: var(--ifn-success); }
.ifn-badge--warning { color: var(--ifn-warning); }
.ifn-badge--info { color: var(--ifn-info); }
.ifn-progress { position: relative; width: 100%; height: 10px; border-radius: 999px; background: var(--ifn-surface-3); overflow: hidden; }
.ifn-progress-fill { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--accent-primary); transition: transform var(--ifn-dur-base) var(--ifn-ease); }
.ifn-progress--success .ifn-progress-fill { background: var(--ifn-success); }
.ifn-progress--danger .ifn-progress-fill { background: var(--ifn-danger); }
.ifn-progress--warning .ifn-progress-fill { background: var(--ifn-warning); }
.ifn-progress--indeterminate .ifn-progress-fill { width: 35%; animation: ifn-sweep calc(1100ms * max(var(--ifn-motion), 0.001)) linear infinite; }
@keyframes ifn-sweep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.ifn-ring { display: inline-block; flex: none; }
.ifn-ring-track { fill: none; stroke: var(--ifn-surface-3); }
.ifn-ring-fill { fill: none; stroke: var(--accent-primary); stroke-linecap: round; transition: stroke-dashoffset var(--ifn-dur-slow) var(--ifn-ease); }
.ifn-ring-text { fill: var(--ifn-text); font-weight: var(--ifn-weight-heavy); font-size: 26px; }
.ifn-keycap {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.45em; border-radius: 0.45em;
  background: var(--ifn-text); color: var(--ifn-bg); font-weight: var(--ifn-weight-heavy); font-size: var(--ifn-text-sm); line-height: 1; white-space: nowrap;
  box-shadow: 0 3px 0 var(--ifn-text-3);
}
.ifn-keycap--pad { border-radius: 999px; color: var(--ifn-on-accent); }
.ifn-keycap--touch { background: var(--accent-primary); color: var(--ifn-on-accent); }
.ifn-avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--ifn-surface-3); color: var(--ifn-world-text); font-weight: var(--ifn-weight-heavy); line-height: 1; user-select: none; }
.ifn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifn-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ifn-avatar--md { width: 44px; height: 44px; font-size: 17px; }
.ifn-avatar--lg { width: 72px; height: 72px; font-size: 28px; }
.ifn-avatar--guest { color: var(--ifn-text-2); }
.ifn-avatar--guest svg { width: 72%; height: 72%; }

/* ---------------------------------------------------------------- dropdown, listbox, sheets */
.ifn-dropdown {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ifn-space-2); width: 100%; min-width: 0; min-height: var(--ifn-tap);
  padding: 0 var(--ifn-space-3) 0 var(--ifn-space-4); border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); background: var(--ifn-surface-2);
  color: var(--ifn-text); text-align: left; cursor: pointer; touch-action: manipulation; user-select: none;
}
.ifn-dropdown[aria-expanded="true"] { border-color: var(--accent-primary); }
.ifn-dropdown:disabled { opacity: 0.5; cursor: default; }
.ifn-dropdown-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--ifn-space-2); }
.ifn-dropdown-value--placeholder { color: var(--ifn-text-3); }
.ifn-dropdown-chevron { transition: transform var(--ifn-dur-fast); }
.ifn-dropdown[aria-expanded="true"] .ifn-dropdown-chevron { transform: rotate(180deg); }
.ifn-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ifn-listbox {
  position: fixed; z-index: var(--ifn-z-popup); overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: var(--ifn-overlay-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-overlay-blur, none); backdrop-filter: var(--ifn-overlay-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-overlay-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-md); box-shadow: var(--ifn-shadow); max-width: calc(100vw - 16px);
}
.ifn-option {
  display: flex; align-items: center; gap: var(--ifn-space-2); min-height: var(--ifn-tap); padding: 0 var(--ifn-space-3); border-radius: var(--ifn-radius-sm);
  cursor: pointer; color: var(--ifn-text); touch-action: manipulation; user-select: none;
}
.ifn-option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ifn-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifn-option-hint { color: var(--ifn-text-3); font-size: var(--ifn-text-sm); }
.ifn-option--active { background: var(--ifn-surface-3); }
.ifn-option[aria-selected="true"] { color: var(--ifn-accent-text); font-weight: var(--ifn-weight-bold); }
.ifn-option[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.ifn-sheet-backdrop { position: fixed; inset: 0; z-index: var(--ifn-z-popup); display: flex; align-items: flex-end; justify-content: center; background: var(--ifn-scrim); animation: ifn-fade var(--ifn-dur-base) var(--ifn-ease) both; }
.ifn-sheet {
  width: 100%; max-width: 100%; max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--ifn-space-2) var(--ifn-space-3) calc(var(--ifn-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border-top: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0; box-shadow: var(--ifn-shadow);
  animation: ifn-sheet-in var(--ifn-dur-slow) var(--ifn-ease) both;
}
.ifn-sheet .ifn-option, .ifn-sheet .ifn-menuitem { min-height: calc(var(--ifn-tap) + 4px); font-size: var(--ifn-text-lg); }
.ifn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ifn-space-2); padding: var(--ifn-space-1) var(--ifn-space-1) var(--ifn-space-2) var(--ifn-space-3); }
.ifn-sheet-title { font-size: var(--ifn-text-sm); font-weight: var(--ifn-weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ifn-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifn-sheet-body { color: var(--ifn-text-2); padding: 0 var(--ifn-space-3) var(--ifn-space-3); overflow-wrap: anywhere; }
@keyframes ifn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ifn-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ifn-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ifn-rise { from { transform: translateY(8px); } to { transform: none; } }

/* ---------------------------------------------------------------- context menu */
.ifn-menu {
  position: fixed; z-index: var(--ifn-z-popup); width: 240px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: var(--ifn-overlay-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-overlay-blur, none); backdrop-filter: var(--ifn-overlay-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-overlay-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-md); box-shadow: var(--ifn-shadow); user-select: none;
  animation: ifn-pop var(--ifn-dur-fast) var(--ifn-ease) both;
}
.ifn-menu-title { padding: var(--ifn-space-2) var(--ifn-space-3) var(--ifn-space-1); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ifn-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifn-menu-person { display: flex; align-items: center; gap: var(--ifn-space-3); margin-bottom: 4px; padding: var(--ifn-space-3); border-radius: calc(var(--ifn-radius-md) - 4px); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 10%, transparent), transparent); }
.ifn-menu-person-text { display: grid; gap: 2px; min-width: 0; }
.ifn-menu-person-text b { font-weight: var(--ifn-weight-bold); color: var(--ifn-text); overflow-wrap: anywhere; }
.ifn-menu-person-text span { font-size: var(--ifn-text-xs); color: var(--ifn-text-2); overflow-wrap: anywhere; }
.ifn-sheet .ifn-menu-person { margin: 0 var(--ifn-space-1) var(--ifn-space-2); }
.ifn-menuitem {
  display: flex; align-items: center; gap: var(--ifn-space-2); width: 100%; min-height: var(--ifn-tap); padding: var(--ifn-space-1) var(--ifn-space-3);
  border: 0; border-radius: var(--ifn-radius-sm); background: transparent; color: var(--ifn-text); text-align: left; cursor: pointer; touch-action: manipulation;
}
.ifn-menuitem:disabled { color: var(--ifn-text-3); cursor: default; }
.ifn-menuitem--danger { color: var(--ifn-danger-text); }
.ifn-menuitem-text { display: flex; flex-direction: column; min-width: 0; }
.ifn-menuitem-detail { font-size: var(--ifn-text-sm); color: var(--ifn-text-3); }
.ifn-menu-sep { height: 2px; margin: 4px 6px; background: var(--ifn-line); }

/* ---------------------------------------------------------------- tooltip */
.ifn-tip {
  position: fixed; z-index: var(--ifn-z-popup); max-width: min(20em, calc(100vw - 16px)); padding: var(--ifn-space-2) var(--ifn-space-3);
  border-radius: var(--ifn-radius-sm); background: var(--ifn-text); color: var(--ifn-bg); font-size: var(--ifn-text-sm); font-weight: var(--ifn-weight-bold);
  box-shadow: var(--ifn-shadow); pointer-events: none; animation: ifn-fade var(--ifn-dur-fast) both; overflow-wrap: anywhere;
}
.ifn-tip-arrow { position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.ifn-tip-trigger { display: inline-flex; max-width: 100%; }

/* ---------------------------------------------------------------- toasts */
/* while touch is in use, toasts sit above the joystick and action-pad zones (inputmode.ts writes --ifn-tz-*) */
.ifn-toaster {
  position: fixed; z-index: var(--ifn-z-toast); right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + var(--ifn-tz-height, 0px) + var(--ifn-tz-strip, 0px));
  width: min(23em, calc(100vw - 28px)); height: 0; pointer-events: none;
}
.ifn-toast {
  position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--ifn-space-2); width: 100%; min-height: var(--ifn-tap);
  padding: var(--ifn-space-2) var(--ifn-space-3); border-radius: var(--ifn-radius-md); background: var(--ifn-overlay-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-overlay-blur, none); backdrop-filter: var(--ifn-overlay-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-overlay-edge, var(--ifn-line-2));
  border-left: 4px solid var(--ifn-info); box-shadow: var(--ifn-shadow); overflow: hidden; will-change: transform, opacity; transform: translateX(120%);
}
.ifn-toast--success { border-left-color: var(--ifn-success); }
.ifn-toast--warning { border-left-color: var(--ifn-warning); }
.ifn-toast--error { border-left-color: var(--ifn-danger); }
.ifn-toast--accent { border-left-color: var(--accent-primary); }
.ifn-toast-icon { flex: none; width: 1.5em; height: 1.5em; display: grid; place-items: center; color: var(--ifn-info); }
.ifn-toast--success .ifn-toast-icon { color: var(--ifn-success); }
.ifn-toast--warning .ifn-toast-icon { color: var(--ifn-warning); }
.ifn-toast--error .ifn-toast-icon { color: var(--ifn-danger); }
.ifn-toast--accent .ifn-toast-icon { color: var(--ifn-accent-text); }
.ifn-toast-text { flex: 1; min-width: 0; font-weight: var(--ifn-weight-bold); overflow-wrap: anywhere; }
.ifn-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ifn-surface-3); }
.ifn-toast-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; background: var(--accent-primary); }
.ifn-toast-fill--sweep { width: 30%; animation: ifn-sweep calc(1100ms * max(var(--ifn-motion), 0.001)) linear infinite; }
.ifn-toast--bump { animation: ifn-bump var(--ifn-dur-base) var(--ifn-spring); }
@keyframes ifn-bump { 50% { scale: 1.04; } }
/* a stack that grows downward from a top anchor (a phone's default; a game asks for it with anchor="down") */
.ifn-toaster--down { bottom: auto; top: calc(max(10px, env(safe-area-inset-top, 0px)) + 4px); }
.ifn-toaster--down .ifn-toast { bottom: auto; top: 0; }
@media (max-width: 599px), (max-height: 499px) {
  .ifn-toaster--down { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); width: auto; }
}

/* ---------------------------------------------------------------- modal dialog (a sheet on phones) */
.ifn-modal {
  position: fixed; inset: 0; z-index: var(--ifn-z-modal); display: grid; place-items: center; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
  background: var(--ifn-scrim); -webkit-backdrop-filter: var(--ifn-scrim-filter, blur(4px)); backdrop-filter: var(--ifn-scrim-filter, blur(4px)); animation: ifn-fade var(--ifn-dur-base) var(--ifn-ease) both;
}
.ifn-modal-card {
  display: flex; flex-direction: column; gap: var(--ifn-space-3); width: min(32em, 100%); max-width: 100%; max-height: 100%; overflow: hidden; padding: var(--ifn-space-5);
  border-radius: var(--ifn-radius-lg); background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); box-shadow: var(--ifn-shadow); animation: var(--ifn-enter, ifn-pop var(--ifn-dur-base) var(--ifn-spring) both);
}
.ifn-modal-card--wide { width: min(58em, 100%); height: min(46em, 100%); }
.ifn-modal-head { display: flex; align-items: center; gap: var(--ifn-space-3); min-width: 0; }
.ifn-modal-title { flex: 1; min-width: 0; margin: 0; font-size: var(--ifn-text-xl); font-weight: var(--ifn-weight-heavy); overflow-wrap: anywhere; }
.ifn-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; color: var(--ifn-text-2); overflow-wrap: anywhere; }
.ifn-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ifn-space-2); }
.ifn-sheet-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ifn-z-modal); display: flex; flex-direction: column; gap: var(--ifn-space-3);
  max-height: 88vh; max-height: 88dvh; overflow: hidden; padding: var(--ifn-space-3) var(--ifn-space-4) calc(var(--ifn-space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border-top: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0; box-shadow: var(--ifn-shadow);
  animation: ifn-sheet-in var(--ifn-dur-slow) var(--ifn-ease) both;
}
@media (max-width: 599px), (max-height: 499px) {
  .ifn-modal { place-items: end stretch; padding: 0; }
  .ifn-modal-card, .ifn-modal-card--wide {
    width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0; border-width: var(--ifn-edge-w, 2px) 0 0;
    padding: var(--ifn-space-4) var(--ifn-space-4) calc(var(--ifn-space-4) + env(safe-area-inset-bottom, 0px)); animation: ifn-sheet-in var(--ifn-dur-slow) var(--ifn-ease) both;
  }
  .ifn-modal-card--wide { height: 92vh; height: 92dvh; }
  .ifn-modal-actions { flex-direction: column-reverse; }
  .ifn-modal-actions .ifn-btn { width: 100%; }
}

/* ---------------------------------------------------------------- floating window (a sheet on phones) */
.ifn-window {
  position: fixed; z-index: var(--ifn-z-panel); display: flex; flex-direction: column; min-width: 0; overflow: visible;
  background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-md); box-shadow: var(--ifn-shadow);
}
.ifn-window[data-shut] { display: none; }
.ifn-window-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--ifn-space-2); min-height: var(--ifn-tap); padding: 0 4px 0 var(--ifn-space-3); cursor: move; touch-action: none; user-select: none; border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
/* (the bar above the resize handles: on touch the corner handles are a tap wide and reached over the title and the close button - a tap on
   the close button began a resize; they still take a drag on their half outside the window) */
.ifn-window-title { flex: 1; min-width: 0; font-weight: var(--ifn-weight-heavy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifn-window-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.ifn-window-tools:empty { display: none; }
.ifn-window-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; border-radius: 0 0 var(--ifn-radius-md) var(--ifn-radius-md); }
.ifn-window-handle { position: absolute; z-index: 1; touch-action: none; }
.ifn-window-handle[data-handle="n"], .ifn-window-handle[data-handle="s"] { left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.ifn-window-handle[data-handle="e"], .ifn-window-handle[data-handle="w"] { top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.ifn-window-handle[data-handle="n"] { top: -5px; } .ifn-window-handle[data-handle="s"] { bottom: -5px; }
.ifn-window-handle[data-handle="e"] { right: -5px; } .ifn-window-handle[data-handle="w"] { left: -5px; }
.ifn-window-handle[data-handle="ne"], .ifn-window-handle[data-handle="nw"], .ifn-window-handle[data-handle="se"], .ifn-window-handle[data-handle="sw"] { width: 18px; height: 18px; }
.ifn-window-handle[data-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; } .ifn-window-handle[data-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.ifn-window-handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; } .ifn-window-handle[data-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
@media (pointer: coarse) {
  .ifn-window-handle[data-handle="n"], .ifn-window-handle[data-handle="s"] { height: var(--ifn-tap); }
  .ifn-window-handle[data-handle="e"], .ifn-window-handle[data-handle="w"] { width: var(--ifn-tap); }
  .ifn-window-handle[data-handle="n"] { top: calc(var(--ifn-tap) / -2); } .ifn-window-handle[data-handle="s"] { bottom: calc(var(--ifn-tap) / -2); }
  .ifn-window-handle[data-handle="e"] { right: calc(var(--ifn-tap) / -2); } .ifn-window-handle[data-handle="w"] { left: calc(var(--ifn-tap) / -2); }
  .ifn-window-handle[data-handle="ne"], .ifn-window-handle[data-handle="nw"], .ifn-window-handle[data-handle="se"], .ifn-window-handle[data-handle="sw"] { width: var(--ifn-tap); height: var(--ifn-tap); }
}
.ifn-window--sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important; height: auto !important; max-height: 88vh; max-height: 88dvh;
  border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0; border-width: var(--ifn-edge-w, 2px) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ifn-window--sheet .ifn-window-bar { cursor: default; }
/* the bookmarks hung off a window's edge (WindowEdgeTabs): square tiles joined to the frame, the chosen one lit and standing out a little */
.ifn-window-edge { position: absolute; z-index: 2; top: calc(var(--ifn-tap) + var(--ifn-space-4)); left: 100%; }
.ifn-window-edge[data-side="left"] { left: auto; right: 100%; }
.ifn-window-edge:empty { display: none; }
.ifn-edge-tabs { gap: 6px; }
.ifn-edge-tabs .ifn-tip-trigger { display: flex; }
.ifn-tab--icon { justify-content: center; padding: 0; }
.ifn-edge-tabs .ifn-tab {
  width: 48px; height: 48px; border-radius: 0 var(--ifn-radius-md) var(--ifn-radius-md) 0; border: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-left: 0;
  box-shadow: var(--ifn-shadow); transition: transform var(--ifn-dur-fast) var(--ifn-ease), color var(--ifn-dur-fast) var(--ifn-ease);
}
/* (only the unchosen tiles take the panel's fill here: the chosen one keeps the theme's selected tab, so a game's skin lights it its own way) */
.ifn-edge-tabs .ifn-tab:not([aria-selected="true"]) { background: var(--ifn-panel-bg, var(--ifn-surface)); color: var(--ifn-text-2); }
.ifn-window-edge[data-side="left"] .ifn-edge-tabs .ifn-tab { border-radius: var(--ifn-radius-md) 0 0 var(--ifn-radius-md); border-left: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-right: 0; }
.ifn-edge-tabs .ifn-tab .ifn-ico { width: 24px; height: 24px; }
.ifn-edge-tabs .ifn-tab[aria-selected="true"] { transform: translateX(3px); }
.ifn-window-edge[data-side="left"] .ifn-edge-tabs .ifn-tab[aria-selected="true"] { transform: translateX(-3px); }
.ifn-edge-tabs-inline { flex: none; margin-bottom: var(--ifn-space-2); }

/* ---------------------------------------------------------------- page with tabs (the Esc menu pattern) */
.ifn-page { position: fixed; inset: 0; z-index: var(--ifn-z-panel); display: grid; place-items: center; overflow: hidden; }
.ifn-page-back { position: absolute; inset: 0; background: var(--ifn-scrim); -webkit-backdrop-filter: var(--ifn-scrim-filter, blur(6px)); backdrop-filter: var(--ifn-scrim-filter, blur(6px)); }
.ifn-page-panel {
  position: relative; display: grid; width: min(1180px, 94vw); height: min(820px, 90vh); height: min(820px, 90dvh); overflow: hidden;
  grid-template-columns: minmax(200px, 16em) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tabs head" "tabs body" "tabs foot";
  background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg); box-shadow: var(--ifn-shadow); animation: var(--ifn-enter, ifn-pop var(--ifn-dur-base) var(--ifn-ease) both);
}
.ifn-page-head { grid-area: head; display: flex; align-items: center; gap: var(--ifn-space-3); min-width: 0; padding: var(--ifn-space-3) var(--ifn-space-3) var(--ifn-space-3) var(--ifn-space-5); border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
.ifn-page-titles { flex: 1; min-width: 0; }
.ifn-page-title { margin: 0; font-size: var(--ifn-text-xl); font-weight: var(--ifn-weight-heavy); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifn-page-sub { display: flex; flex-wrap: wrap; gap: 2px var(--ifn-space-3); margin-top: 2px; color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-page-actions { display: flex; gap: var(--ifn-space-2); flex: none; }
.ifn-page-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: 4px; padding: var(--ifn-space-3) var(--ifn-space-2); min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--ifn-bg); border-right: var(--ifn-edge-w, 2px) solid var(--ifn-line); scrollbar-width: none; }
.ifn-page-brand { display: flex; align-items: center; gap: var(--ifn-space-2); padding: var(--ifn-space-1) var(--ifn-space-3) var(--ifn-space-3); font-weight: var(--ifn-weight-heavy); font-size: var(--ifn-text-lg); }
.ifn-page-tab {
  display: flex; align-items: center; gap: var(--ifn-space-3); flex: none; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-3); border: var(--ifn-edge-w, 2px) solid transparent;
  border-radius: var(--ifn-radius-md); background: transparent; color: var(--ifn-text-2); font-weight: var(--ifn-weight-heavy); text-align: left; cursor: pointer; touch-action: manipulation;
}
.ifn-page-tab .ifn-ico { width: 1.4em; height: 1.4em; }
.ifn-page-tab[aria-selected="true"] { color: var(--ifn-text); background: var(--ifn-surface-2); border-color: var(--accent-primary); }
.ifn-page-tab[aria-selected="true"] .ifn-ico { color: var(--ifn-accent-text); }
.ifn-page-tab--end { margin-top: auto; }
.ifn-page-body { grid-area: body; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.ifn-page-body--has-side { grid-template-columns: minmax(0, 1fr) min(23em, 40%); }
.ifn-page-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ifn-space-4) var(--ifn-space-5); }
.ifn-page-side { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ifn-space-4); border-left: var(--ifn-edge-w, 2px) solid var(--ifn-line); background: var(--ifn-bg); }
.ifn-page-side-close { display: none; }
.ifn-page-foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px var(--ifn-space-4); padding: var(--ifn-space-2) var(--ifn-space-4); border-top: var(--ifn-edge-w, 2px) solid var(--ifn-line); color: var(--ifn-text-3); font-size: var(--ifn-text-sm); }
.ifn-page-foot > span { display: inline-flex; align-items: center; gap: var(--ifn-space-1); }
html.ifn-touch .ifn-page-foot { display: none; }
@media (max-width: 1023px), (max-height: 499px) {
  .ifn-page-panel { width: 96vw; height: 94vh; height: 94dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "tabs" "body" "foot"; }
  .ifn-page-tabs { flex-direction: row; gap: 4px; padding: var(--ifn-space-2); border-right: 0; border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .ifn-page-brand { display: none; }
  .ifn-page-tab { flex-direction: column; justify-content: center; gap: 2px; min-width: 5.2em; padding: 4px var(--ifn-space-2); font-size: var(--ifn-text-sm); text-align: center; }
  .ifn-page-tab--end { margin: 0; }
  .ifn-page-body--has-side { grid-template-columns: minmax(0, 1fr); }
  .ifn-page-side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 84%; padding: var(--ifn-space-3) var(--ifn-space-4) calc(var(--ifn-space-4) + env(safe-area-inset-bottom, 0px));
    border-left: 0; border-top: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0; background: var(--ifn-panel-solid, var(--ifn-surface)); box-shadow: var(--ifn-shadow);
    transform: translateY(105%); visibility: hidden; transition: transform var(--ifn-dur-slow) var(--ifn-ease), visibility 0s linear var(--ifn-dur-slow);
  }
  .ifn-page-side--open { transform: none; visibility: visible; transition: transform var(--ifn-dur-slow) var(--ifn-ease); }
  .ifn-page-side-close { display: flex; justify-content: center; margin-bottom: var(--ifn-space-2); }
}
@media (max-width: 599px), (max-height: 499px) {
  .ifn-page-panel { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .ifn-page-head { padding: var(--ifn-space-2) var(--ifn-space-2) var(--ifn-space-2) var(--ifn-space-4); }
  .ifn-page-title { font-size: var(--ifn-text-lg); }
  /* header buttons show their icon only; the label stays for screen readers */
  .ifn-page-actions .ifn-btn { padding: 0; width: var(--ifn-tap); }
  .ifn-page-actions .ifn-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ifn-page-main { padding: var(--ifn-space-3); }
  .ifn-page-foot { display: none; }
}

/* ---------------------------------------------------------------- settings screen */
.ifn-settings { display: flex; flex-direction: column; gap: var(--ifn-space-3); min-width: 0; min-height: 0; height: 100%; }
.ifn-settings-sections { flex: none; }
.ifn-settings-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--ifn-space-3); padding-bottom: var(--ifn-space-4); container-type: inline-size; }
.ifn-set-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ifn-space-3); flex-wrap: wrap; }
.ifn-set-head--embedded { justify-content: flex-end; }
.ifn-settings--embedded { height: auto; }
.ifn-settings--embedded .ifn-settings-body { overflow: visible; padding-bottom: 0; }
.ifn-set-title { margin: 0; font-size: var(--ifn-text-lg); font-weight: var(--ifn-weight-heavy); text-wrap: balance; overflow-wrap: anywhere; }
/* a tab's head: the icon in a lit well, the title and its line, what changed and the reset, the tab's filter */
.ifn-set-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "well text end" "filter filter filter"; align-items: center; gap: var(--ifn-space-3);
  padding: var(--ifn-space-3) var(--ifn-space-4); border-radius: var(--ifn-radius-lg); border: var(--ifn-edge-w, 2px) solid var(--ifn-line);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 62%), var(--ifn-surface-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ifn-text) 8%, transparent);
}
.ifn-set-well {
  grid-area: well; display: grid; place-items: center; width: calc(var(--ifn-tap) + 8px); aspect-ratio: 1; border-radius: var(--ifn-radius-md); color: var(--ifn-accent-text); background: var(--ifn-bg);
  background-image: radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--accent-primary) 30%, transparent), transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent), 0 0 24px -12px var(--accent-primary);
}
.ifn-set-well .ifn-ico { width: 1.5em; height: 1.5em; }
.ifn-set-hero-text { grid-area: text; min-width: 0; }
.ifn-set-about { margin: 2px 0 0; color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-set-hero-end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: var(--ifn-space-2); flex-wrap: wrap; }
.ifn-set-hero .ifn-badge { font-variant-numeric: tabular-nums; }
.ifn-set-filter { grid-area: filter; }
@container (max-width: 520px) {
  .ifn-set-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "well text" "end end" "filter filter"; }
  .ifn-set-hero-end { justify-content: flex-start; }
}
.ifn-set-parts { flex: none; }
.ifn-set-tools { display: flex; flex-direction: column; gap: var(--ifn-space-2); min-width: 0; }
/* a group: one subject in a titled box */
.ifn-set-group {
  display: flex; flex-direction: column; min-width: 0; padding: var(--ifn-space-1) var(--ifn-space-4); border-radius: var(--ifn-radius-lg);
  border: var(--ifn-edge-w, 2px) solid var(--ifn-line); background: var(--ifn-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ifn-text) 6%, transparent);
}
.ifn-set-group-title {
  display: flex; align-items: center; gap: var(--ifn-space-2); margin: var(--ifn-space-3) 0 var(--ifn-space-1); color: var(--ifn-text-3);
  font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-bold); letter-spacing: 0.1em; text-transform: uppercase;
}
.ifn-set-group-title::after { content: ''; flex: 1; height: 1px; background: var(--ifn-line); }
.ifn-set-group-count { font-variant-numeric: tabular-nums; color: var(--ifn-accent-text); letter-spacing: 0; }
.ifn-set-group > .ifn-set-row:last-child, .ifn-set-group > .ifn-set-keys:last-child .ifn-set-row:last-child { border-bottom: 0; }
.ifn-set-preview {
  margin: var(--ifn-space-2) 0; padding: var(--ifn-space-3); border-radius: var(--ifn-radius-md); background: var(--ifn-bg);
  background-image: radial-gradient(60% 50% at 50% 92%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 30%, transparent), inset 0 0 32px color-mix(in srgb, var(--ifn-bg) 40%, var(--ifn-scrim));
}
.ifn-set-keys { display: flex; flex-direction: column; }
.ifn-set-keys > * { padding: var(--ifn-space-2) 0; border-top: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
.ifn-set-row { display: flex; flex-direction: column; gap: var(--ifn-space-1); padding: var(--ifn-space-2) 0; border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); min-width: 0; }
.ifn-set-main { display: flex; align-items: center; gap: var(--ifn-space-2); min-width: 0; }
.ifn-set-main > :first-child { flex: 1 1 auto; min-width: 0; }
.ifn-set-reset-one { flex: none; }
.ifn-set-row--locked { opacity: 0.85; }
.ifn-set-row--changed { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 9%, transparent), transparent 45%); }
.ifn-set-row--under { position: relative; padding-left: calc(var(--ifn-set-depth, 1) * var(--ifn-space-5)); }
.ifn-set-row--under::before { content: ''; position: absolute; top: var(--ifn-space-2); bottom: var(--ifn-space-2); left: calc(var(--ifn-set-depth, 1) * var(--ifn-space-5) - var(--ifn-space-3)); width: 2px; border-radius: 1px; background: var(--ifn-line-2); }
.ifn-set-row--inactive .ifn-set-main { opacity: 0.5; }
.ifn-set-meta { display: flex; flex-wrap: wrap; gap: var(--ifn-space-1) var(--ifn-space-3); font-size: var(--ifn-text-sm); }
.ifn-set-lock, .ifn-set-note, .ifn-set-inactive { display: inline-flex; align-items: center; gap: var(--ifn-space-1); color: var(--ifn-text-2); }
.ifn-set-note, .ifn-set-inactive { color: var(--ifn-warning); }
.ifn-set-chosen { flex-basis: 100%; color: var(--ifn-text-2); }
.ifn-set-choice { display: flex; flex-direction: column; gap: var(--ifn-space-1); }
.ifn-set-advanced { border-radius: var(--ifn-radius-lg); border: var(--ifn-edge-w, 2px) dashed var(--ifn-line); padding: 0 var(--ifn-space-3) var(--ifn-space-1); }
.ifn-set-advanced[open] { padding-bottom: var(--ifn-space-3); }
.ifn-set-advanced > .ifn-set-group { margin-top: var(--ifn-space-2); }
.ifn-set-advanced-head {
  display: flex; align-items: center; gap: var(--ifn-space-2); min-height: var(--ifn-tap); cursor: pointer; list-style: none; color: var(--ifn-text-2);
  font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-bold); letter-spacing: 0.1em; text-transform: uppercase;
}
.ifn-set-advanced-head::-webkit-details-marker { display: none; }
.ifn-set-advanced-head .ifn-ico { margin-left: auto; transition: transform var(--ifn-dur-base) var(--ifn-ease); }
.ifn-set-advanced[open] > .ifn-set-advanced-head .ifn-ico { transform: rotate(180deg); }
.ifn-set-empty { margin: var(--ifn-space-5) 0; text-align: center; color: var(--ifn-text-2); }
/* the window: the kit's tab page, the search in its head */
.ifn-settings-window .ifn-page-main { container-type: inline-size; display: flex; flex-direction: column; gap: var(--ifn-space-3); }
.ifn-set-search { width: min(22em, 40vw); }
@media (max-width: 599px), (max-height: 499px) { .ifn-set-search { width: 100%; } .ifn-settings-window .ifn-page-head { flex-wrap: wrap; } .ifn-settings-window .ifn-page-actions { order: 3; flex: 1 1 100%; } }
.ifn-page-close { flex: none; }
.ifn-set-page { min-width: 0; }
.ifn-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9em, 100%), 1fr)); gap: var(--ifn-space-2); }
.ifn-preset {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: calc(var(--ifn-tap) + 12px); padding: var(--ifn-space-2) var(--ifn-space-3);
  border-radius: var(--ifn-radius-md); border: var(--ifn-edge-w, 2px) solid var(--ifn-line-2); background: var(--ifn-surface-2); color: var(--ifn-text); text-align: left; cursor: pointer; touch-action: manipulation;
}
.ifn-preset-label { font-weight: var(--ifn-weight-heavy); }
.ifn-preset-note { color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-preset[aria-checked="true"] { border-color: var(--accent-primary); background: var(--ifn-surface-3); }
.ifn-custom-note { display: flex; align-items: center; gap: var(--ifn-space-2); color: var(--ifn-warning); font-size: var(--ifn-text-sm); font-weight: var(--ifn-weight-bold); }

/* ---------------------------------------------------------------- virtual list and grid */
.ifn-vlist, .ifn-vgrid { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.ifn-vlist-inner { position: relative; }
.ifn-vrow { box-sizing: border-box; overflow: hidden; }
.ifn-vgrid-row { display: flex; box-sizing: border-box; }
.ifn-vtile { flex: 1 1 0; min-width: 0; }
.ifn-vgrid[data-tile] .ifn-vtile { flex: none; width: var(--ifn-tile); }
.ifn-vlist[aria-activedescendant]:focus-visible .ifn-vrow--active, .ifn-vgrid:focus-visible .ifn-vtile--active { outline: 2px solid var(--ifn-focus); outline-offset: -2px; border-radius: var(--ifn-radius-sm); }

/* ---------------------------------------------------------------- staff panel shell */
.ifn-staff { position: fixed; inset: 0; z-index: var(--ifn-z-panel); display: grid; place-items: center; background: var(--ifn-scrim); -webkit-backdrop-filter: var(--ifn-scrim-filter, blur(7px)); backdrop-filter: var(--ifn-scrim-filter, blur(7px)); }
.ifn-staff-modal {
  display: grid; width: min(1200px, 80vw); height: 80vh; height: 80dvh; overflow: hidden;
  grid-template-columns: 14em minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "rail head" "rail body" "rail foot";
  background: var(--ifn-panel-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-panel-blur, none); backdrop-filter: var(--ifn-panel-blur, none); border: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg); box-shadow: var(--ifn-shadow);
}
.ifn-staff-rail { grid-area: rail; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: var(--ifn-space-2); background: var(--ifn-bg); border-right: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
.ifn-staff-rail-title { padding: var(--ifn-space-3) var(--ifn-space-3) var(--ifn-space-1); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-heavy); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ifn-accent-text); }
.ifn-staff-search { margin: var(--ifn-space-1) var(--ifn-space-2) var(--ifn-space-2); width: auto; }
.ifn-staff-tab {
  display: flex; align-items: center; gap: var(--ifn-space-2); flex: none; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-3); border: 0; border-left: 3px solid transparent;
  background: transparent; color: var(--ifn-text-2); text-align: left; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.ifn-staff-tab[aria-selected="true"] { color: var(--ifn-text); background: var(--ifn-surface-2); border-left-color: var(--accent-primary); }
.ifn-staff-dot { width: 0.7em; height: 0.7em; border-radius: 50%; flex: none; }
.ifn-staff-note { margin-left: auto; font-size: var(--ifn-text-xs); color: var(--ifn-text-3); }
.ifn-staff-head { grid-area: head; display: flex; align-items: center; gap: var(--ifn-space-2); min-width: 0; padding: var(--ifn-space-2) var(--ifn-space-2) var(--ifn-space-2) var(--ifn-space-4); border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); background: var(--ifn-surface-2); }
.ifn-staff-title { font-size: var(--ifn-text-sm); font-weight: var(--ifn-weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ifn-accent-text); }
.ifn-staff-spacer { flex: 1 1 auto; }
.ifn-staff-body { grid-area: body; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ifn-staff-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifn-space-2); min-height: calc(var(--ifn-tap) + 12px); padding: var(--ifn-space-1) var(--ifn-space-3); border-top: var(--ifn-edge-w, 2px) solid var(--ifn-line); background: var(--ifn-surface-2); }
.ifn-staff-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ifn-space-1); height: 100%; padding: var(--ifn-space-6); color: var(--ifn-text-2); text-align: center; }
.ifn-staff-empty-title { font-size: var(--ifn-text-lg); font-weight: var(--ifn-weight-heavy); color: var(--ifn-text); }
@media (max-width: 1023px), (max-height: 499px) { .ifn-staff-modal { width: 94vw; height: 90vh; height: 90dvh; grid-template-columns: 11.5em minmax(0, 1fr); } }
@media (max-width: 599px), (max-height: 499px) {
  .ifn-staff-modal { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "rail" "head" "body" "foot"; }
  .ifn-staff-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; border-right: 0; border-bottom: var(--ifn-edge-w, 2px) solid var(--ifn-line); }
  .ifn-staff-rail-title, .ifn-staff-search { display: none; }
  .ifn-staff-tab { border-left: 0; border-bottom: 3px solid transparent; }
  .ifn-staff-tab[aria-selected="true"] { border-bottom-color: var(--accent-primary); }
}

/* ---------------------------------------------------------------- unit frames (unitframe.ts) and the overhead layer (overhead.ts) */
/* Sized in em, so a host's UI scale (font-size on its root) scales every frame; a flat card fill, never blurred (there can be dozens on
   screen); the unit's reaction colour is the accent (--uf-accent, set by the view); state is a ring or a filter, never a blink. */
.ifn-oh-host { position: absolute; inset: 0; z-index: var(--ifn-z-overhead); overflow: hidden; pointer-events: none; }
.ifn-uf-pin { position: absolute; left: 0; top: 0; will-change: transform, opacity; contain: layout style; }
.ifn-uf-pin--front { z-index: 1; }
.ifn-uf {
  --uf-accent: var(--ifn-line-2); --uf-hp: var(--uf-accent);
  position: relative; display: flex; align-items: stretch; gap: 0.5em; min-width: 0; margin: 0; padding: 0.4em;
  border: 1px solid var(--ifn-line); border-radius: var(--ifn-radius-md); background: color-mix(in srgb, var(--ifn-overlay-solid) 88%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uf-accent) 38%, transparent);
  color: var(--ifn-text); font: inherit; font-size: 1em; line-height: 1.2; text-align: left; white-space: nowrap; pointer-events: none;
}
.ifn-uf[hidden], .ifn-uf [hidden] { display: none; }
button.ifn-uf { pointer-events: auto; cursor: pointer; touch-action: manipulation; user-select: none; }
.ifn-uf-face { position: relative; flex: none; align-self: center; z-index: 1; }
.ifn-uf-portrait { --uf-rim: var(--uf-accent); display: grid; place-items: center; width: var(--uf-ps, 2.4em); height: var(--uf-ps, 2.4em); overflow: hidden; border-radius: var(--ifn-radius-sm);
  border: 1px solid color-mix(in srgb, var(--uf-rim) 70%, transparent); background: color-mix(in srgb, var(--uf-rim) 14%, var(--ifn-overlay-solid)); color: var(--uf-rim); }
.ifn-uf-glyph { display: grid; place-items: center; width: 62%; height: 62%; }
.ifn-uf-glyph svg, .ifn-uf-mark svg { display: block; width: 100%; height: 100%; }
.ifn-uf-portrait--image { background: var(--ifn-overlay-solid); }
.ifn-uf-lv { flex: none; display: grid; place-items: center; min-width: 1.55em; height: 1.55em; padding: 0 0.3em; border-radius: 999px; border: 1px solid currentColor;
  background: var(--ifn-overlay-solid); font-size: 0.78em; font-weight: var(--ifn-weight-heavy); font-variant-numeric: tabular-nums; color: var(--ifn-text); }
.ifn-uf-body { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 0.15em; }
.ifn-uf-top { display: flex; align-items: center; gap: 0.35em; min-width: 0; }
.ifn-uf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em; font-weight: var(--ifn-weight-heavy); color: var(--uf-accent); }
.ifn-uf-marks { flex: none; display: inline-flex; align-items: center; gap: 0.2em; }
.ifn-uf-mark { display: grid; flex: none; width: 1.05em; height: 1.05em; }
.ifn-uf-mark--count { display: inline-flex; align-items: center; gap: 0.15em; width: auto; }
.ifn-uf-mark--count svg { flex: none; width: 1.05em; height: 1.05em; }
.ifn-uf-mark-n { font-size: 0.82em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ifn-uf-state { flex: none; font-size: 0.9em; font-weight: var(--ifn-weight-heavy); color: var(--ifn-warning); }
.ifn-uf-far { flex: none; margin-left: auto; font-size: 0.8em; font-weight: var(--ifn-weight-bold); color: var(--ifn-text-3); font-variant-numeric: tabular-nums; }
.ifn-uf-state:empty, .ifn-uf-far:empty { display: none; }
.ifn-uf-sub { display: block; min-width: 0; min-height: 1.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7em; font-weight: var(--ifn-weight-bold); color: var(--ifn-text-3); line-height: 1.15; }
.ifn-uf-subpart { display: inline; margin-right: 0.3em; }
.ifn-uf-bars { display: grid; row-gap: 0.2em; min-width: 0; }
.ifn-uf-bar { position: relative; height: 0.95em; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ifn-text) 14%, transparent); }
.ifn-uf-bar > i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.ifn-uf-fill { background: var(--uf-fill, var(--uf-hp)); transition: transform var(--ifn-dur-base) var(--ifn-ease); }
.ifn-uf-trail { background: color-mix(in srgb, var(--ifn-text) 50%, transparent); transition: transform var(--ifn-dur-slow) var(--ifn-ease) var(--ifn-dur-base); }
.ifn-uf-bartext { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.68em; font-weight: var(--ifn-weight-bold); line-height: 1; color: var(--ifn-world-text); font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px var(--ifn-world-shade); }
.ifn-uf-bar--res { height: 0.6em; }
.ifn-uf-res { display: flex; align-items: center; gap: 0.3em; min-width: 0; }
.ifn-uf-res .ifn-uf-bar { flex: 1 1 0; min-width: 0; }
.ifn-uf-extra:empty { display: none; }
.ifn-uf-pips { display: flex; flex: none; gap: 0.25em; }
.ifn-uf-pip { width: 0.7em; height: 0.7em; border-radius: 50%; background: color-mix(in srgb, var(--ifn-text) 16%, transparent); }
.ifn-uf-pip.on { background: var(--uf-pip, var(--ifn-warning)); }
.ifn-uf-cast { position: relative; display: none; height: 1.35em; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ifn-text) 14%, transparent); }
.ifn-uf-cast--on, .ifn-uf-cast--stopped { display: block; }
.ifn-uf-castfill { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--school, var(--accent-primary)); opacity: 0.88; }
.ifn-uf-cast--stopped .ifn-uf-castfill { background: var(--ifn-danger); }
.ifn-uf-castname { position: relative; display: block; padding: 0 0.5em; overflow: hidden; text-overflow: ellipsis; font-size: 0.78em; line-height: 1.75; font-weight: var(--ifn-weight-bold); color: var(--ifn-world-text); }
.ifn-uf-under { position: absolute; left: 0; right: 0; top: calc(100% + 0.3em); display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; pointer-events: none; }
.ifn-uf-strip { display: flex; align-items: center; gap: 0.22em; }
.ifn-uf-more { font-size: 0.85em; font-weight: var(--ifn-weight-heavy); color: var(--ifn-text-2); }
.ifn-aura { --school: var(--ifn-danger); position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box; width: var(--aura-size, 1.9em); height: var(--aura-size, 1.9em); margin: 0; padding: 0;
  overflow: hidden; border-radius: 0.3em; border: 1px solid color-mix(in srgb, var(--school) 65%, transparent); background: color-mix(in srgb, var(--ifn-overlay-solid) 92%, transparent); color: inherit; font: inherit; }
button.ifn-aura { cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.ifn-aura--mine { border-color: color-mix(in srgb, var(--school) 35%, var(--ifn-text)); }
.ifn-aura-sweep { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(var(--ifn-world-shade) calc(var(--cd, 0) * 360deg), transparent 0); }
.ifn-aura-n { position: absolute; right: 0.12em; top: -0.05em; font-size: 0.7em; font-weight: var(--ifn-weight-heavy); line-height: 1.2; pointer-events: none; font-variant-numeric: tabular-nums; }
.ifn-aura-n:empty { display: none; }
.ifn-aura--buff { border-color: color-mix(in srgb, var(--ifn-success) 70%, transparent); }
.ifn-aura--buff.ifn-aura--mine { border-color: color-mix(in srgb, var(--ifn-success) 55%, var(--ifn-text)); }
/* the time left on the square's face (auraTime), over its picture and sweep; red, steady, in its last seconds */
.ifn-aura-t { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.66em; font-weight: var(--ifn-weight-heavy); line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums; color: var(--ifn-world-text); text-shadow: 0 1px 0 var(--ifn-world-shade), 0 0 2px var(--ifn-world-shade), 0 0 2px var(--ifn-world-shade); }
.ifn-aura-t:empty { display: none; }
.ifn-aura--ending .ifn-aura-t { color: var(--ifn-danger); }
/* sizes: only the size and the portrait differ, never the rules */
.ifn-uf--plate { flex-direction: column; align-items: center; gap: 0.15em; max-width: 13em; padding: 0.2em 0.55em 0.3em; }
.ifn-uf--plate .ifn-uf-body { justify-items: center; }
/* (a centred grid item is as wide as its words: held to the plate's width, so a long name ends in an ellipsis inside the frame) */
.ifn-uf--plate .ifn-uf-top { justify-content: center; max-width: 100%; }
.ifn-uf--plate .ifn-uf-sub { text-align: center; }
.ifn-uf--plate .ifn-uf-bars { width: 6.4em; }
.ifn-uf--plate .ifn-uf-bar { height: 0.46em; }
.ifn-uf--plate .ifn-uf-under { align-items: center; }
.ifn-uf--plate .ifn-uf-cast { width: 8.4em; }
.ifn-uf--card { --uf-ps: calc(var(--uf-h, 5.2em) - 1em); width: var(--uf-w, 15.6em); height: var(--uf-h, 5.2em); }
.ifn-uf--card .ifn-uf-lv { position: absolute; left: -0.35em; bottom: -0.3em; }
.ifn-uf--card .ifn-uf-body { grid-template-rows: auto auto auto; align-content: space-between; }
.ifn-uf--card .ifn-uf-sub, .ifn-uf--card .ifn-uf-cast { grid-row: 2; grid-column: 1; }
.ifn-uf--card .ifn-uf-bars { grid-row: 3; grid-column: 1; }
.ifn-uf--card .ifn-uf-bar { height: 1em; }
.ifn-uf--card .ifn-uf-bar--res { height: 0.6em; }
.ifn-uf--card .ifn-uf-body:has(.ifn-uf-cast--on, .ifn-uf-cast--stopped) .ifn-uf-sub { visibility: hidden; }
.ifn-uf--small { --uf-ps: 2.2em; width: var(--uf-sw, 10.8em); min-height: max(3em, var(--ifn-tap)); padding: 0.3em; gap: 0.4em; }
.ifn-uf--small .ifn-uf-name { font-size: 0.8em; }
.ifn-uf--small .ifn-uf-bar { height: 0.55em; }
.ifn-uf--small .ifn-uf-sub { display: none; }
.ifn-uf--row { --uf-ps: 2.6em; width: 100%; padding: 0.35em; }
.ifn-uf--row .ifn-uf-bar { height: 0.7em; }
.ifn-uf--boss { flex-direction: column; justify-content: center; width: 100%; min-height: var(--ifn-tap); padding: 0.3em 0.6em; }
.ifn-uf--boss .ifn-uf-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6em; }
.ifn-uf--boss .ifn-uf-sub { grid-row: 1; grid-column: 2; font-size: 0.8em; }
.ifn-uf--boss .ifn-uf-bars { grid-row: 2; grid-column: 1 / -1; }
/* state: a ring or a filter, never a blink or a pulse */
.ifn-uf--target { box-shadow: inset 0 0 0 2px var(--uf-accent), 0 0 0 1px color-mix(in srgb, var(--ifn-text) 55%, transparent); }
.ifn-uf--aggro { border-color: var(--ifn-danger); box-shadow: inset 0 0 0 2px var(--ifn-danger); }
.ifn-uf--aggro.ifn-uf--target { box-shadow: inset 0 0 0 2px var(--ifn-danger), 0 0 0 1px color-mix(in srgb, var(--ifn-text) 55%, transparent); }
.ifn-uf--aggro .ifn-uf-state { color: var(--ifn-danger-text); }
.ifn-uf--party { border-color: color-mix(in srgb, var(--accent-primary) 70%, transparent); }
.ifn-uf--asleep { filter: saturate(0.6) brightness(0.9); }
.ifn-uf--evade { filter: saturate(0.7); }
.ifn-uf--evade .ifn-uf-state { font-size: 0.75em; font-style: italic; }
.ifn-uf--down { filter: saturate(0.15) brightness(0.85); }
.ifn-uf--off { filter: saturate(0.3) brightness(0.7); }
.ifn-uf--low .ifn-uf-fill { background: var(--ifn-danger); }
.ifn-uf--attacking { border-color: var(--ifn-danger); }
/* ---------------------------------------------------------------- money */
.ifn-money { display: inline-flex; align-items: baseline; gap: 0.45em; font-variant-numeric: tabular-nums; font-weight: var(--ifn-weight-bold); white-space: nowrap; }
.ifn-money-sign { color: var(--ifn-text-2); }
.ifn-coin { display: inline-flex; align-items: baseline; gap: 1px; }
.ifn-coin-u { font-size: 0.85em; font-weight: var(--ifn-weight-heavy); color: var(--ifn-coin-3); }
.ifn-coin[data-metal="1"] .ifn-coin-u { color: var(--ifn-coin-1); }
.ifn-coin[data-metal="2"] .ifn-coin-u { color: var(--ifn-coin-2); }
.ifn-money[data-tone="short"] .ifn-coin-n { color: var(--ifn-danger-text); }

/* ---------------------------------------------------------------- pictures, slots */
.ifn-pic { position: relative; display: block; border-radius: var(--ifn-radius-sm); }
.ifn-pic--wait { background: color-mix(in srgb, var(--ifn-text) 7%, transparent); }
.ifn-pic img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.ifn-slot {
  --ifn-ring: var(--ifn-line-2); --ifn-ring-w: 1px;
  position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; padding: 0; border: 0;
  width: var(--ifn-slot, 52px); height: var(--ifn-slot, 52px); min-width: var(--ifn-tap); min-height: var(--ifn-tap);
  border-radius: var(--ifn-radius-sm); background: var(--ifn-card-bg, var(--ifn-surface-2)); color: var(--ifn-text);
  box-shadow: inset 0 0 0 var(--ifn-ring-w) var(--ifn-ring); cursor: pointer; touch-action: manipulation; user-select: none;
}
.ifn-slot .ifn-pic, .ifn-slot .ifn-slot-pic { position: absolute; inset: 4px; }
.ifn-slot[data-rarity] { --ifn-ring-w: 2px; }
.ifn-slot[data-rarity="common"] { --ifn-ring: var(--ifn-rarity-common); --ifn-ring-w: 1px; }
.ifn-slot[data-rarity="uncommon"] { --ifn-ring: var(--ifn-rarity-uncommon); }
.ifn-slot[data-rarity="rare"] { --ifn-ring: var(--ifn-rarity-rare); }
.ifn-slot[data-rarity="epic"] { --ifn-ring: var(--ifn-rarity-epic); }
.ifn-slot[data-rarity="legendary"] { --ifn-ring: var(--ifn-rarity-legendary); }
.ifn-slot[data-empty] { background: transparent; --ifn-ring: var(--ifn-line); cursor: default; }
.ifn-slot[data-locked] { opacity: 0.55; }
.ifn-slot[data-short]::after { content: ""; position: absolute; inset: 0; background: var(--ifn-danger); opacity: 0.28; pointer-events: none; }
.ifn-slot[data-selected] { --ifn-ring: var(--accent-primary); --ifn-ring-w: 2px; }
.ifn-slot[data-fresh] { --ifn-ring: var(--ifn-warning); --ifn-ring-w: 2px; }
.ifn-slot[data-dim] { opacity: 0.28; filter: grayscale(0.85); }
.ifn-slot[data-dragging] { opacity: 0.4; }
.ifn-slot[data-drop="ok"] { --ifn-ring: var(--ifn-success); --ifn-ring-w: 2px; }
.ifn-slot[data-drop="no"] { --ifn-ring: var(--ifn-danger); --ifn-ring-w: 2px; }
.ifn-slot-count, .ifn-slot-key { position: absolute; padding: 0 3px; border-radius: 4px; background: var(--ifn-scrim); font-size: var(--ifn-text-xs); line-height: 1.35; pointer-events: none; }
.ifn-slot-count { right: 3px; bottom: 3px; color: var(--ifn-text); font-weight: var(--ifn-weight-bold); font-variant-numeric: tabular-nums; }
.ifn-slot-key { left: 3px; top: 3px; color: var(--ifn-text-2); }
.ifn-slot-cd { position: absolute; inset: 0; background: var(--ifn-scrim); transform-origin: 50% 100%; animation: ifn-cd var(--cd-dur) linear var(--cd-delay) forwards; pointer-events: none; }
@keyframes ifn-cd { from { transform: scaleY(1); } to { transform: scaleY(0); } }
/* a cooldown is information, not decoration: reduced motion keeps its length (the sweep still shows how long is left) */
:root[data-reduced-motion] .ifn-slot-cd { animation-duration: var(--cd-dur) !important; animation-iteration-count: 1 !important; }
.ifn-slotgrid { display: grid; justify-content: start; gap: 6px; }
.ifn-slotgrid--windowed { display: block; }
.ifn-drag-ghost { position: fixed; left: 0; top: 0; z-index: var(--ifn-z-toast); width: var(--ifn-slot, 52px); height: var(--ifn-slot, 52px); pointer-events: none; opacity: 0.92; }
.ifn-drag-ghost[hidden] { display: none; }
/* a copy of the source (no face): its own size, lifted off the page */
.ifn-drag-ghost[data-copy] { width: auto; height: auto; opacity: 0.96; filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.45)); }
.ifn-drag-ghost[data-copy] > * { margin: 0; }
.ifn-spin { animation: ifn-spin calc(900ms * max(var(--ifn-motion), 0.001)) linear infinite; }
@keyframes ifn-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the card (an overlay: denser tint, blur behind it) */
.ifn-cards, .ifn-windows { display: contents; }
.ifn-card {
  position: fixed; left: 0; top: 0; z-index: var(--ifn-z-popup); width: max-content; max-width: min(22em, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  display: flex; flex-direction: column; overflow: hidden; padding: var(--ifn-space-3); border-radius: var(--ifn-radius-md); pointer-events: none; will-change: transform;
  background: var(--ifn-overlay-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-overlay-blur, none); backdrop-filter: var(--ifn-overlay-blur, none);
  border: var(--ifn-edge-w, 2px) solid var(--ifn-overlay-edge, var(--ifn-line-2)); box-shadow: var(--ifn-shadow); color: var(--ifn-text);
}
.ifn-card--pinned { pointer-events: auto; }
/* (a card cut to the room above or below its thing scrolls its body; a pinned card's action row stays in view under it) */
.ifn-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ifn-card-actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--ifn-space-2); margin-top: var(--ifn-space-3); padding-top: var(--ifn-space-3); border-top: 1px solid var(--ifn-line); }
.ifn-card-actions .ifn-btn { flex: 1 1 auto; }
.ifn-wl-title { display: inline-flex; align-items: center; gap: var(--ifn-space-2); min-width: 0; }

/* ---------------------------------------------------------------- screen, stack, cluster (layout an author never writes) */
.ifn-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.ifn-screen-head { flex: none; display: flex; flex-direction: column; gap: var(--ifn-space-2); padding: var(--ifn-space-3) var(--ifn-space-3) 0; }
.ifn-screen-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--ifn-space-3); }
.ifn-screen-body[data-fill-body] { overflow: hidden; }
.ifn-screen > .ifn-foot { flex: none; }
/* a column whose children keep their size, except the ones marked fill, which take (and give back) the room left */
:is(.ifn-screen-body, .ifn-md-list, .ifn-md-body, .ifn-table, .ifn-section-body) { display: flex; flex-direction: column; min-width: 0; }
:is(.ifn-screen-body, .ifn-md-list, .ifn-md-body, .ifn-table, .ifn-section-body) > * { flex: none; }
:is(.ifn-window-body, .ifn-screen-body, .ifn-md-list, .ifn-md-body, .ifn-table, .ifn-section-body) > [data-fill] { flex: 1 1 auto; min-height: 0; }
.ifn-screen-body, .ifn-md-list, .ifn-md-body { gap: var(--ifn-space-2); }
.ifn-stack { display: flex; flex-direction: column; gap: var(--ifn-space-2); min-width: 0; }
.ifn-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifn-space-2); min-width: 0; }
.ifn-stack[data-gap="1"], .ifn-cluster[data-gap="1"] { gap: var(--ifn-space-1); }
.ifn-stack[data-gap="3"], .ifn-cluster[data-gap="3"] { gap: var(--ifn-space-3); }
.ifn-stack[data-gap="4"], .ifn-cluster[data-gap="4"] { gap: var(--ifn-space-4); }
.ifn-stack[data-gap="5"], .ifn-cluster[data-gap="5"] { gap: var(--ifn-space-5); }
.ifn-stack[data-gap="6"], .ifn-cluster[data-gap="6"] { gap: var(--ifn-space-6); }
.ifn-title { margin: 0; font-size: var(--ifn-text-lg); font-weight: var(--ifn-weight-bold); overflow-wrap: anywhere; }
.ifn-note { margin: 0; color: var(--ifn-text-2); }
.ifn-cluster[data-align="center"] { justify-content: center; } .ifn-cluster[data-align="end"] { justify-content: flex-end; } .ifn-cluster[data-align="between"] { justify-content: space-between; }

/* ---------------------------------------------------------------- master and detail */
.ifn-md { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--ifn-md-detail, 24em), 42%)); grid-template-rows: minmax(0, 1fr); gap: var(--ifn-space-4); height: 100%; min-height: 0; overflow: hidden; }
.ifn-md-list { min-width: 0; min-height: 0; overflow: auto; }
.ifn-md-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--ifn-line); padding-left: var(--ifn-space-4); }
.ifn-md-body { flex: 1; min-height: 0; overflow: auto; }
.ifn-md-bar { display: none; align-items: center; gap: var(--ifn-space-2); min-height: var(--ifn-tap); margin-bottom: var(--ifn-space-2); border-bottom: 1px solid var(--ifn-line); }
.ifn-md-bar-title { font-weight: var(--ifn-weight-bold); }
@media (max-width: 1023px), (max-height: 499px) {
  .ifn-md { grid-template-columns: minmax(0, 1fr); }
  .ifn-md-detail {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 84%; padding: var(--ifn-space-3) var(--ifn-space-4) calc(var(--ifn-space-4) + env(safe-area-inset-bottom, 0px));
    border-left: 0; border-top: var(--ifn-edge-w, 2px) solid var(--ifn-panel-edge, var(--ifn-line-2)); border-radius: var(--ifn-radius-lg) var(--ifn-radius-lg) 0 0;
    background: var(--ifn-panel-solid, var(--ifn-surface)); box-shadow: var(--ifn-shadow);
    transform: translateY(105%); visibility: hidden; transition: transform var(--ifn-dur-slow) var(--ifn-ease), visibility 0s linear var(--ifn-dur-slow);
  }
  .ifn-md[data-open] .ifn-md-detail { transform: none; visibility: visible; transition: transform var(--ifn-dur-slow) var(--ifn-ease); }
  .ifn-md-bar { display: flex; }
}
@media (max-width: 599px), (max-height: 499px) { .ifn-md-detail { top: 0; max-height: none; border-radius: 0; } }

/* ---------------------------------------------------------------- sections, stats, empty, foot, quantity */
.ifn-section { display: flex; flex-direction: column; min-height: 0; }
.ifn-section > .ifn-section-head { flex: none; }
.ifn-section[data-fill] > .ifn-section-body { flex: 1 1 auto; min-height: 0; }
.ifn-section-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ifn-space-2); width: 100%; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-2); border: 0; border-radius: var(--ifn-radius-sm); background: transparent;
  color: var(--ifn-text-2); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.ifn-section-title { flex: 1 1 auto; min-width: 0; }   /* (its own width first: a long aside wraps under it instead of squeezing it to nothing) */
.ifn-section-aside { flex: 0 1 auto; min-width: 0; max-width: 100%; color: var(--ifn-text-3); font-weight: var(--ifn-weight-regular); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.ifn-section-body { padding: 0 var(--ifn-space-2) var(--ifn-space-3); }
.ifn-stats { display: flex; flex-direction: column; margin: 0; }
.ifn-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ifn-space-3); min-height: 32px; padding: 4px var(--ifn-space-2); border-radius: var(--ifn-radius-sm); }
html.ifn-touch .ifn-stat[data-card-anchor] { min-height: var(--ifn-tap); align-items: center; }
.ifn-stat-label { margin: 0; color: var(--ifn-text-2); }
.ifn-stat-value { margin: 0; text-align: right; font-weight: var(--ifn-weight-bold); font-variant-numeric: tabular-nums; }
.ifn-stat[data-tone="good"] .ifn-stat-value { color: var(--ifn-success); }
.ifn-stat[data-tone="bad"] .ifn-stat-value { color: var(--ifn-danger-text); }
.ifn-stat-hint { display: block; color: var(--ifn-text-3); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-regular); }
.ifn-empty { display: grid; justify-items: center; gap: var(--ifn-space-2); padding: var(--ifn-space-6) var(--ifn-space-4); text-align: center; color: var(--ifn-text-2); }
.ifn-empty-title { color: var(--ifn-text); font-weight: var(--ifn-weight-bold); }
.ifn-empty-text { margin: 0; max-width: 28em; }
.ifn-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifn-space-3); padding: var(--ifn-space-3) var(--ifn-space-4) calc(var(--ifn-space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ifn-line); background: var(--ifn-card-bg, var(--ifn-surface-2));
}
.ifn-foot-status { flex: 1; min-width: 8em; color: var(--ifn-text-2); }
.ifn-foot-actions { display: flex; flex-wrap: wrap; gap: var(--ifn-space-2); margin-left: auto; }
.ifn-qty { display: inline-flex; align-items: center; gap: var(--ifn-space-2); }
.ifn-qty-input {
  width: 5em; min-height: var(--ifn-tap); padding: 0 var(--ifn-space-2); text-align: center; font-variant-numeric: tabular-nums; border-radius: var(--ifn-radius-sm); color: var(--ifn-text);
  border: var(--ifn-edge-w, 2px) solid var(--ifn-control-edge, var(--ifn-line-2)); background: var(--ifn-control-bg, var(--ifn-surface-2));
}

/* ---------------------------------------------------------------- offers, tables, filters */
.ifn-offers { display: flex; flex-direction: column; min-width: 0; }
.ifn-offer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "pic text price act"; align-items: center; gap: var(--ifn-space-3);
  min-height: 64px; padding: var(--ifn-space-2) var(--ifn-space-3); border-bottom: 1px solid var(--ifn-line);
}
.ifn-offer > .ifn-slot { grid-area: pic; }
.ifn-offer-text { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.ifn-offer-price { grid-area: price; }
.ifn-offer-act { grid-area: act; }
.ifn-offer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ifn-weight-bold); }
.ifn-offer[data-state="locked"] .ifn-offer-name { color: var(--ifn-text-3); }
.ifn-offer-count { color: var(--ifn-text-2); font-weight: var(--ifn-weight-regular); }
.ifn-offer-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-offer-note { color: var(--ifn-warning); font-size: var(--ifn-text-sm); }
.ifn-offer[data-state="short"] .ifn-offer-note { color: var(--ifn-danger-text); }
.ifn-offers-h { padding: var(--ifn-space-4) var(--ifn-space-3) var(--ifn-space-1); color: var(--ifn-text-3); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
/* (in a windowed list every row is one height: the header sits at the foot of its row, next to the offer it begins) */
.ifn-offers--windowed .ifn-offers-h { display: flex; align-items: flex-end; height: 100%; box-sizing: border-box; padding-top: 0; }
@media (max-width: 599px), (max-height: 499px) {
  .ifn-offer { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic text act" "pic price act"; row-gap: 2px; }
}
.ifn-table { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ifn-table-head { position: sticky; top: 0; z-index: 1; display: grid; gap: var(--ifn-space-3); padding: 0 var(--ifn-space-3); border-bottom: 1px solid var(--ifn-line-2); background: var(--ifn-panel-solid, var(--ifn-surface)); }
.ifn-table-th { display: flex; align-items: center; min-height: var(--ifn-tap); color: var(--ifn-text-2); font-size: var(--ifn-text-xs); font-weight: var(--ifn-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.ifn-table-th--end { justify-content: flex-end; text-align: right; }
.ifn-table-th--end .ifn-table-sort { justify-content: flex-end; }
.ifn-table-sort { display: inline-flex; align-items: center; gap: 4px; min-width: var(--ifn-tap); min-height: var(--ifn-tap); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ifn-table-row { display: grid; align-items: center; gap: var(--ifn-space-3); min-height: var(--ifn-tap); padding: 0 var(--ifn-space-3); border-bottom: 1px solid var(--ifn-line); cursor: pointer; }
.ifn-table-row[data-selected] { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); }
.ifn-table-td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ifn-table-td--end { text-align: right; }
.ifn-table[data-cards] .ifn-table-row { display: block; padding: var(--ifn-space-2) var(--ifn-space-3); }
.ifn-table[data-cards] .ifn-table-td { display: flex; align-items: center; justify-content: space-between; gap: var(--ifn-space-3); white-space: normal; }
.ifn-table[data-cards] .ifn-table-td::before { content: attr(data-label); color: var(--ifn-text-3); font-size: var(--ifn-text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.ifn-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifn-space-2); padding: var(--ifn-space-2) 0; }
.ifn-filter-search { flex: 1 1 14em; min-width: 10em; }
.ifn-filterbar > .ifn-dropdown, .ifn-filterbar > .ifn-tip-trigger { width: auto; flex: 0 1 12em; min-width: 9em; }   /* (a dropdown may sit in its tip's trigger) */
.ifn-filter-summary { margin-left: auto; color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-filter-sheet { display: flex; flex-direction: column; gap: var(--ifn-space-3); }

/* ---------------------------------------------------------------- asks (timed questions) */
.ifn-asks { display: flex; flex-direction: column; gap: var(--ifn-space-2); width: min(24em, calc(100vw - 16px)); }
.ifn-ask {
  position: relative; display: flex; flex-direction: column; gap: var(--ifn-space-2); overflow: hidden; padding: var(--ifn-space-3); border-radius: var(--ifn-radius-md); color: var(--ifn-text);
  background: var(--ifn-overlay-bg, var(--ifn-surface)); -webkit-backdrop-filter: var(--ifn-overlay-blur, none); backdrop-filter: var(--ifn-overlay-blur, none);
  border: var(--ifn-edge-w, 2px) solid var(--ifn-overlay-edge, var(--ifn-line-2)); box-shadow: var(--ifn-shadow);
}
.ifn-ask-head { display: flex; align-items: center; gap: var(--ifn-space-3); }
.ifn-ask-text { display: flex; flex-direction: column; min-width: 0; }
.ifn-ask-title { overflow-wrap: anywhere; font-weight: var(--ifn-weight-bold); }
.ifn-ask-sub { color: var(--ifn-text-2); font-size: var(--ifn-text-sm); }
.ifn-ask-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ifn-surface-3); }
.ifn-ask-bar > i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--accent-primary); animation: ifn-ask var(--ask-dur) linear var(--ask-delay) forwards; }
@keyframes ifn-ask { from { transform: scaleX(1); } to { transform: scaleX(0); } }
:root[data-reduced-motion] .ifn-ask-bar > i { animation-duration: var(--ask-dur) !important; animation-iteration-count: 1 !important; }
.ifn-ask-actions { display: flex; gap: var(--ifn-space-2); }
.ifn-ask-btn { flex: 1 1 0; }
.ifn-ask-why { margin: 0; color: var(--ifn-text-3); font-size: var(--ifn-text-xs); }
.ifn-ask-done { color: var(--ifn-text-2); }
@media (max-width: 599px), (max-height: 499px) {
  .ifn-asks { flex-direction: row; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .ifn-ask { flex: 0 0 84vw; scroll-snap-align: center; }
}
.ifn-cost { border-collapse: collapse; font-size: var(--ifn-text-xs); font-variant-numeric: tabular-nums; }
.ifn-cost th, .ifn-cost td { padding: 2px 8px; text-align: right; border-bottom: 1px solid var(--ifn-line); }
.ifn-cost th:first-child, .ifn-cost tbody th { text-align: left; }