/* @iqobi/sdk — the design system every app inherits.
   Tokens first; components only through tokens. Light + dark. */

/* The system's two typefaces, self-hosted beside this sheet: FF Milo
   (sans) for everything you operate, FF Milo Serif for titles and headings
   (founder direction, Stéphane 2026-07-26 — licensed web font kit, see
   fonts/README.md). Self-hosted on the platform origin, which the app
   CSP's `font-src {sdk} data: https://fonts.gstatic.com` allows — a look's
   own face travels inline or names a Google Fonts family (ADR-0018);
   Google's CDN is the only third-party host an app page can reach, and
   only for font files.
   woff2 only: every browser that
   can run the SDK supports it.
   `swap` so text is readable immediately and never invisible while the
   face loads; the fallback stack is metric-adjacent so the swap is quiet. */
@font-face {
  font-family: "Milo";
  font-style: normal;
  font-weight: 400 650;
  font-display: swap;
  src: url("./fonts/MiloW01Text.woff2") format("woff2");
}
@font-face {
  font-family: "Milo";
  font-style: italic;
  font-weight: 400 650;
  font-display: swap;
  src: url("./fonts/MiloW01TextItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Milo";
  font-style: normal;
  font-weight: 651 900;
  font-display: swap;
  src: url("./fonts/MiloW01Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Milo";
  font-style: italic;
  font-weight: 651 900;
  font-display: swap;
  src: url("./fonts/MiloW01BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Milo Serif";
  font-style: normal;
  font-weight: 400 650;
  font-display: swap;
  src: url("./fonts/MiloSerifW01Text.woff2") format("woff2");
}
@font-face {
  font-family: "Milo Serif";
  font-style: italic;
  font-weight: 400 650;
  font-display: swap;
  src: url("./fonts/MiloSerifW01TextItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Milo Serif";
  font-style: normal;
  font-weight: 651 900;
  font-display: swap;
  src: url("./fonts/MiloSerifW01Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Milo Serif";
  font-style: italic;
  font-weight: 651 900;
  font-display: swap;
  src: url("./fonts/MiloSerifW01BoldItalic.woff2") format("woff2");
}

/* Default look: Dieter Rams, Braun, Vitsœ, Apple. Off-white housing,
   one blue key (the person can pick another in Settings), hairline
   modules, Milo for what you operate and Milo Serif for titles. Less,
   but better. Dark is graphite. */
:root {
  /* Accent blues clear 4.5:1 as text on every tinted state fill
     (accent-soft washes, the stepper well) — check-look-state-contrast.mjs
     gates this; #0c60f6 sat at ~4.0 there. Values match the "blue" palette
     in looks/accent.go. */
  --iq-accent: #0b57e0;
  --iq-accent-strong: #0a4dc5;
  --iq-accent-soft: rgba(11, 87, 224, 0.10);
  --iq-accent-ink: #ffffff;
  --iq-danger: #a31f1f;
  --iq-danger-ink: #ffffff;
  --iq-good: #2f5d45;
  --iq-warn: #5a4508;
  --iq-chart-1: #0b57e0;
  --iq-chart-2: #2f5d45;
  --iq-chart-3: #1f3a5c;
  --iq-chart-4: #7a5c0a;
  --iq-chart-5: #6b5344;
  --iq-chart-6: #3d5c5c;
  --iq-bg: #f2f0ea;
  --iq-surface: #ffffff;
  --iq-ink: #1a1a1a;
  --iq-ink-soft: #4a4a4a;
  --iq-ink-faint: #7a7a7a;
  --iq-line: #d8d6d0;
  --iq-radius: 8px;
  --iq-radius-sm: 4px;
  --iq-shadow: 0 1px 0 rgb(26 26 26 / 0.04);
  /* One visual box for default fields and buttons, in every look.
     Looks may restyle color, border, and inline padding. They must not
     give a field a different block size than a default button. */
  --iq-control-height: 2rem;
  /* Phone (and /ds phone canvas) raises this to 2.75rem so operable
     controls paint a 44px box. Desktop stays field-height. */
  --iq-touch-min: 0px;
  /* Two roles: --iq-font is what you read and operate; --iq-font-display
     is the serif that carries titles and headings. */
  --iq-font:
    "Milo", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Helvetica, Arial, sans-serif;
  --iq-font-display: "Milo Serif", ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark accent lightens (not darkens) so it reads as text on graphite
       washes, and "strong" is lighter than accent: press states brighten
       in dark, keeping the near-black accent ink readable on them. */
    --iq-accent: #609af9;
    --iq-accent-strong: #7dacfa;
    --iq-accent-soft: rgba(96, 154, 249, 0.08);
    --iq-accent-ink: #1a1208;
    --iq-danger: #f07a7a;
    --iq-danger-ink: #3a0a0a;
    --iq-good: #8fca9a;
    --iq-warn: #d4b56a;
    --iq-chart-1: #609af9;
    --iq-chart-2: #7dba90;
    --iq-chart-3: #8eb0d0;
    --iq-chart-4: #d4b56a;
    --iq-chart-5: #c4a090;
    --iq-chart-6: #8aa8a8;
    --iq-bg: #1c1c1c;
    --iq-surface: #262626;
    --iq-ink: #f2f0ea;
    --iq-ink-soft: #b0aea8;
    --iq-ink-faint: #7a7872;
    --iq-line: #3a3a3a;
    --iq-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
  }
}

/* Phone paints a 44px visual box. /ds Phone is a canvas attribute,
   not a viewport, so media queries never fire there. Drive the same
   tokens from the canvas, the preview pin, and a sheet opened from
   that canvas (the sheet portals to body). */
@media (max-width: 699px) {
  :root {
    --iq-control-height: 2.75rem;
    --iq-touch-min: 2.75rem;
  }
}
html[data-iq-preview-width="390"],
.ds-canvas[data-width="phone"],
.iq-sheet[data-width="phone"] {
  --iq-control-height: 2.75rem;
  --iq-touch-min: 2.75rem;
}

* { box-sizing: border-box; }

/* `hidden` means hidden. Components set `display: flex` on classes that
   are also toggled with the attribute, and the class was winning — an
   empty error box or a stray toolbar would sit on the page looking like a
   bug, because it was one. */
[hidden] { display: none !important; }

/* Squircles: superellipse corners wherever a radius applies (CSS
   corner-shape — progressive; unsupported browsers keep round corners). */
@supports (corner-shape: squircle) {
  *, ::before, ::after, ::backdrop { corner-shape: squircle; }
}

body {
  margin: 0;
  /* The body box is the positioning area for look backgrounds (starfields,
     nebulas anchored at -10%/110%). On short pages a content-height body
     bunches that geometry into the top of the screen and ends it with a
     visible seam, so the box always fills the viewport. */
  min-height: 100vh;
  min-height: 100dvh;
  /* A page never scrolls sideways (founder rule): anything wide scrolls
     inside its own container (tables, pager tracks). clip, not hidden —
     hidden would make body a scroll container and break sticky children. */
  overflow-x: clip;
  background: var(--iq-bg);
  color: var(--iq-ink);
  font-family: var(--iq-font);
  /* 16px body (founder call) with tight leading. Components size in
     rem-relative units, so this one number scales the whole system —
     the Linear-grade *proportions* stay, the reading size doesn't. */
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- layout */

.iq-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4.5rem; /* bottom room for the badge bar */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Width follows shape (HIG: the content decides): a comfortable reading
   column by default; desktop-class spines earn desktop width. Overlays
   mount on body, outside this subtree, so they never widen the page. Keep
   this list in sync with WIDE_SPINES in ui.ts. */
.iq-page:has(.iq-split, .iq-masterdetail, .iq-tabs[data-wide], .iq-board, .iq-map, .iq-canvas, .iq-table-wrap, .iq-data-grid, .iq-shelf, .iq-heatmap, .iq-grid[data-columns="dashboard"], .iq-media-grid, .iq-index-list, .iq-cal[data-kind="agenda"]) {
  max-width: 76rem;
}
@media (min-width: 700px) {
  .iq-page { padding: 1.5rem 2rem 4.5rem; }
}
/* A docked toolbar needs its own clearance, like the bottom tab bar does —
   without this the last content row hides behind the pill/bar. */
.iq-page:has(.iq-toolbar) { padding-bottom: 8rem; }
.iq-page:has(.iq-fab) { padding-bottom: 8rem; }

[data-iqobi-selected="true"] {
  outline: 3px solid Highlight !important;
  outline-offset: 3px;
}

.iq-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid var(--iq-line);
  padding-bottom: 0.55rem;
}

.iq-header:has(.iq-header-dot),
.iq-header:has(.iq-header-trail),
.iq-header:has(.iq-header-action),
.iq-header:has(.iq-header-leading) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}

.iq-header:has(.iq-header-dot) .iq-title,
.iq-header:has(.iq-header-trail) .iq-title,
.iq-header:has(.iq-header-action) .iq-title,
.iq-header:has(.iq-header-leading) .iq-title { flex: 0 1 auto; min-width: 0; }

.iq-header-leading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.iq-header-trail {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.iq-header-action {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.iq-header-action .iq-button {
  /* inherit beats look .iq-button so ink does not sit on a navy or steel plate. */
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-block-size: var(--iq-control-height);
  padding: 0 0.55rem;
}

.iq-header-trail .iq-chip {
  background: var(--iq-accent);
  color: var(--iq-accent-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
}

.iq-header .iq-title,
.iq-header .iq-subtitle {
  /* Looks that paint .iq-header set color on the bar. inherit stays
     above sdk .iq-subtitle ink-soft when that sheet loads last. */
  color: inherit;
}

.iq-header .iq-subtitle { flex: 1 0 100%; }

.iq-header-dot,
.iq-tile-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--iq-ink-faint);
  flex: 0 0 auto;
}

.iq-header-dot[data-tone="good"], .iq-tile-dot[data-tone="good"],
.iq-tile-legend-item[data-tone="good"] .iq-tile-legend-swatch { background: #3d9a5f; }
.iq-header-dot[data-tone="warn"], .iq-tile-dot[data-tone="warn"],
.iq-tile-legend-item[data-tone="warn"] .iq-tile-legend-swatch { background: #c47b12; }
.iq-header-dot[data-tone="danger"], .iq-tile-dot[data-tone="danger"],
.iq-tile-legend-item[data-tone="danger"] .iq-tile-legend-swatch { background: var(--iq-danger); }
.iq-header-dot[data-tone="info"], .iq-tile-dot[data-tone="info"],
.iq-tile-legend-item[data-tone="info"] .iq-tile-legend-swatch { background: #2a6fdb; }
.iq-header-dot[data-tone="neutral"], .iq-tile-dot[data-tone="neutral"] { background: var(--iq-ink-faint); }

.iq-title {
  font-family: var(--iq-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.iq-subtitle { margin: 0; color: var(--iq-ink-soft); }

.iq-section { display: flex; flex-direction: column; gap: 0.45rem; }

.iq-section-title {
  font-family: var(--iq-font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--iq-ink);
}

.iq-text { margin: 0; color: var(--iq-ink-soft); }

.iq-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------- cards */

.iq-card {
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  box-shadow: none;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.iq-card:has(> .iq-stat) {
  align-items: flex-start;
  gap: 1rem 1.4rem;
  padding: 0.7rem 0.9rem;
}

.iq-card > .iq-stat {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  flex: 1 1 7rem;
  min-width: 6.5rem;
}

.iq-card:has(> .iq-chart) {
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem 0.85rem;
}

.iq-card:has(> .iq-chart) > .iq-row:has(.iq-segmented) {
  justify-content: flex-end;
}

.iq-card:has(> .iq-chart) > .iq-row:has(> .iq-stat) {
  align-items: flex-start;
  gap: 1rem 1.4rem;
}

.iq-card:has(> .iq-chart) .iq-stat {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  flex: 1 1 6.5rem;
  min-width: 5.5rem;
}

.iq-movie {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  max-width: 22rem;
}

.iq-movie-poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--iq-bg);
}

.iq-movie-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.iq-movie-title {
  margin: 0;
  font: 600 1.1rem/1.25 var(--iq-font-display);
  color: var(--iq-ink);
}

.iq-movie-year {
  margin: 0;
  color: var(--iq-ink-soft);
}

.iq-movie-credit {
  margin: 0.45rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--iq-ink-soft);
}

.iq-movie-logo {
  width: 1.15rem;
  height: auto;
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.iq-food {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.7rem 0.9rem;
  max-width: 22rem;
}

.iq-food-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.iq-food-name {
  margin: 0;
  font: 600 1.1rem/1.25 var(--iq-font-display);
  color: var(--iq-ink);
}

.iq-food-brand,
.iq-food-serving {
  margin: 0;
  color: var(--iq-ink-soft);
}

.iq-food-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0.45rem 0 0;
}

.iq-food-stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 3.5rem;
}

.iq-food-stat-value {
  font: 600 1rem/1.2 var(--iq-font-display);
  color: var(--iq-ink);
}

.iq-food-stat-label {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--iq-ink-soft);
}

.iq-food-credit {
  margin: 0.45rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--iq-ink-soft);
}

/* Dashboard tiles: dense metric cards, not padded marketing cards. */
button.iq-tile {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.iq-tile {
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius-sm);
  box-shadow: none;
  padding: 0.7rem 0.85rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 11.5rem;
  min-width: 0;
}

.iq-tile:hover { background-color: color-mix(in srgb, var(--iq-ink) 3%, var(--iq-surface)); }
.iq-tile:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-tile-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.iq-tile-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.iq-tile-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.6rem;
}

.iq-tile-hero {
  font-family: var(--iq-font);
  font-size: 2.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.iq-tile-viz {
  flex: 1 1 7rem;
  min-width: 6rem;
  max-width: 55%;
  align-self: stretch;
}

.iq-tile-viz:empty {
  min-height: 2.4rem;
  background-image: linear-gradient(to right, var(--iq-line) 1px, transparent 1px);
  background-position: center;
  background-repeat: repeat-x;
  background-size: 4px 1px;
}

.iq-tile-viz .iq-chart-plot { height: 3.4rem; }
.iq-tile-viz .iq-spark { min-width: 0; }
.iq-tile-viz .iq-spark svg { height: 2.4rem; }

.iq-tile-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
}

.iq-tile-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: var(--iq-ink-soft);
  font-size: 0.7rem;
}

.iq-tile-legend-swatch {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: currentColor;
}

.iq-tile-legend-item[data-series] { color: inherit; }
.iq-tile-legend-item[data-series="0"] .iq-tile-legend-swatch { background: var(--iq-chart-1); }
.iq-tile-legend-item[data-series="1"] .iq-tile-legend-swatch { background: var(--iq-chart-2); }
.iq-tile-legend-item[data-series="2"] .iq-tile-legend-swatch { background: var(--iq-chart-3); }
.iq-tile-legend-item[data-series="3"] .iq-tile-legend-swatch { background: var(--iq-chart-4); }
.iq-tile-legend-item[data-series="4"] .iq-tile-legend-swatch { background: var(--iq-chart-5); }
.iq-tile-legend-item[data-series="5"] .iq-tile-legend-swatch { background: var(--iq-chart-6); }

.iq-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--iq-line);
  color: var(--iq-ink-soft);
  font-size: 0.72rem;
}

.iq-tile-kind, .iq-tile-never, .iq-tile-foot .iq-time { color: inherit; }

.iq-tile[data-kind="add"] {
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-style: dashed;
  color: var(--iq-ink-soft);
  min-height: 11.5rem;
}

.iq-tile[data-kind="add"]:hover { background-color: color-mix(in srgb, var(--iq-ink) 4%, var(--iq-surface)); }

.iq-tile-plus {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

.iq-tile-add-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iq-kicker {
  margin: 0;
  color: var(--iq-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iq-heatmap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
}

.iq-heatmap-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.iq-heatmap-label {
  margin: 0;
  color: var(--iq-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iq-heatmap-hint {
  margin: 0;
  color: var(--iq-ink-soft);
  font-size: 0.75rem;
}

.iq-heatmap-months {
  display: grid;
  grid-template-columns: repeat(53, 0.65rem);
  gap: 2px;
  margin-left: calc(0.9rem + 0.35rem);
  color: var(--iq-ink-soft);
  font-size: 0.65rem;
}

.iq-heatmap-month {
  grid-column: auto;
  white-space: nowrap;
  overflow: visible;
  z-index: 1;
}

.iq-heatmap-plot {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.iq-heatmap-dows {
  display: grid;
  grid-template-rows: repeat(7, 0.65rem);
  gap: 2px;
  color: var(--iq-ink-soft);
  font-size: 0.6rem;
  line-height: 0.65rem;
}

.iq-heatmap-weeks {
  display: grid;
  grid-template-columns: repeat(53, 0.65rem);
  gap: 2px;
}

.iq-heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, 0.65rem);
  gap: 2px;
}

.iq-heatmap-day {
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--iq-line);
  cursor: pointer;
}

.iq-heatmap-day[data-level="1"] { background: color-mix(in srgb, #3d9a5f 32%, var(--iq-surface)); }
.iq-heatmap-day[data-level="2"] { background: color-mix(in srgb, #3d9a5f 55%, var(--iq-surface)); }
.iq-heatmap-day[data-level="3"] { background: #3d9a5f; }
.iq-heatmap-day[data-level="4"] { background: #2a6b42; }
.iq-heatmap-day[aria-pressed="true"] { outline: 2px solid var(--iq-ink); outline-offset: 1px; }
.iq-heatmap-day[aria-current="date"]:not([aria-pressed="true"]) { box-shadow: none; }
.iq-heatmap-day:disabled { cursor: default; opacity: 0.35; }
.iq-heatmap-day:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 1px; }

.iq-list { display: flex; flex-direction: column; gap: 0.3rem; }

/* --------------------------------------------------------------- buttons */

/* Flat system buttons: a quiet ink-alpha fill that deepens on hover
   and press. No chrome. The accent key is the only loud control. */
.iq-button {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  border: none;
  background: color-mix(in srgb, var(--iq-ink) 7%, transparent);
  color: var(--iq-ink);
  border-radius: var(--iq-radius-sm);
  padding: 0 0.65rem;
  cursor: pointer;
  transition: background 0.12s ease;
  /* Buttons stand as tall as a field, no taller (founder direction,
     Stéphane 2026-08-01). The 44px touch minimum lives in the invisible
     extension below, not the visual box. Anchors that wear this class
     must be inline-flex or min-block-size is ignored. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  block-size: var(--iq-control-height);
  min-block-size: var(--iq-control-height);
  max-block-size: var(--iq-control-height);
  position: relative;
  text-decoration: none;
  vertical-align: middle;
}

.iq-button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 2.75rem);
  transform: translateY(-50%);
}

/* State rules set background-color, never the background shorthand: a look
   may paint the resting component with a background-image (gradient), and
   the shorthand would erase it on hover/press, dropping the look's contrast
   pairing (a wash over a dark page under look-colored glyphs is unreadable). */
.iq-button:hover { background-color: color-mix(in srgb, var(--iq-ink) 11%, transparent); }
.iq-button:active { background-color: color-mix(in srgb, var(--iq-ink) 16%, transparent); }
.iq-button:focus-visible,
.iq-input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--iq-accent);
  outline-offset: 2px;
}

/* The key-color fill; hover/press go darker, Apple's rollover direction. */
.iq-button-primary {
  background: var(--iq-accent);
  color: var(--iq-accent-ink);
}
/* Hover leans toward the ink, so it darkens in light and brightens in dark:
   mixing toward black in dark pushed the fill under its near-black ink. */
.iq-button-primary:hover { background-color: color-mix(in srgb, var(--iq-accent) 88%, var(--iq-ink)); }
.iq-button-primary:active { background-color: var(--iq-accent-strong); }

/* Danger is a filled key, same model as primary. Quiet red text on a
   tinted wash missed 4.5:1 on graphite. */
/* Toggle state (aria-pressed): the action that is currently "on". */
.iq-button-pressed,
.iq-button-pressed:hover { background-color: var(--iq-accent-soft); color: var(--iq-accent); }
.iq-button-danger {
  color: var(--iq-danger-ink);
  background: var(--iq-danger);
}
.iq-button-danger:hover { background-color: var(--iq-danger); }
.iq-button-danger:active { background-color: var(--iq-danger); }

.iq-button-plain {
  background: transparent;
  color: var(--iq-accent);
  border: none;
}
.iq-button-plain:hover { background-color: var(--iq-accent-soft); }
.iq-button-ghost {
  background: transparent;
  color: var(--iq-ink);
  border: 1px solid var(--iq-line);
}
.iq-button-ghost:hover { background-color: color-mix(in srgb, var(--iq-ink) 8%, transparent); }

/* Disabled is still text. Opacity fades miss 4.5:1 in every light look. */
.iq-button:disabled,
.iq-button-primary:disabled,
.iq-button-danger:disabled,
.iq-button-plain:disabled,
.iq-button-ghost:disabled,
.iq-button-pressed:disabled {
  opacity: 1;
  color: var(--iq-ink-soft);
  background: var(--iq-surface);
  background-image: none;
  border: 1px solid var(--iq-line);
  cursor: default;
}

/* ---------------------------------------------------------------- inputs */

/* Fields are flat quaternary fills, like the Apple Music search field. */
.iq-input {
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  background: color-mix(in srgb, var(--iq-ink) 5%, transparent);
  color: var(--iq-ink);
  border: none;
  border-radius: var(--iq-radius-sm);
  padding: 0 0.55rem;
  min-width: 0;
  flex: 1;
}

/* Default fields share the button box. Textareas grow. File picks and
   the inner tags input keep their own shape. Native date chrome is the
   usual extra-height source: pin the box, then flatten the UA extras. */
.iq-input:not(.iq-textarea):not(.iq-tags-input):not([type="file"]):not([type="hidden"]) {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  block-size: var(--iq-control-height);
  min-block-size: var(--iq-control-height);
  max-block-size: var(--iq-control-height);
  vertical-align: middle;
}

select.iq-input,
.iq-input[type="date"],
.iq-input[type="time"],
.iq-input[type="month"],
.iq-input[type="week"],
.iq-input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
}

.iq-input::-webkit-date-and-time-value {
  margin: 0;
  min-block-size: 0;
}

.iq-input::-webkit-datetime-edit,
.iq-input::-webkit-datetime-edit-fields-wrapper,
.iq-input::-webkit-datetime-edit-text,
.iq-input::-webkit-datetime-edit-month-field,
.iq-input::-webkit-datetime-edit-day-field,
.iq-input::-webkit-datetime-edit-year-field,
.iq-input::-webkit-datetime-edit-hour-field,
.iq-input::-webkit-datetime-edit-minute-field,
.iq-input::-webkit-datetime-edit-second-field,
.iq-input::-webkit-datetime-edit-ampm-field {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.iq-input::-webkit-inner-spin-button,
.iq-input::-webkit-clear-button {
  display: none;
}

.iq-input::-webkit-calendar-picker-indicator {
  block-size: 1rem;
  inline-size: 1rem;
  padding: 0;
  margin-inline-start: auto;
  cursor: pointer;
}

/* Placeholders are text. ink-faint misses 4.5:1 on --iq-surface. */
.iq-input::placeholder, .iq-textarea::placeholder { color: var(--iq-ink-soft); }
.iq-input:disabled, .iq-textarea:disabled {
  opacity: 1;
  color: var(--iq-ink-soft);
  background: var(--iq-surface);
}

.iq-photo {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
}
.iq-photo > .iq-input[type="file"] { flex: 1 1 100%; min-width: 0; }

.iq-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; }
.iq-row:has(> .iq-field) { align-items: flex-end; }

/* ----------------------------------------------------------------- chips */

.iq-chip {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.08rem 0.5rem;
  border-radius: var(--iq-radius-sm);
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--iq-touch-min, 0px);
  min-inline-size: var(--iq-touch-min, 0px);
}
.iq-chip.iq-chip-good {
  background: color-mix(in srgb, var(--iq-good) 16%, var(--iq-surface));
  color: var(--iq-good);
}
.iq-chip.iq-chip-warn {
  background: color-mix(in srgb, var(--iq-warn) 16%, var(--iq-surface));
  color: var(--iq-warn);
}
.iq-chip.iq-chip-neutral {
  background: var(--iq-surface);
  color: var(--iq-ink-soft);
  box-shadow: inset 0 0 0 1px var(--iq-line);
}
.iq-chip.iq-chip-danger {
  background: var(--iq-danger);
  color: var(--iq-danger-ink);
}

/* ---------------------------------------------------------------- states */

.iq-state {
  color: var(--iq-ink-soft);
  text-align: center;
  padding: 1rem 0.8rem;
  border: 1px dashed var(--iq-line);
  border-radius: var(--iq-radius);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.iq-state-error { color: var(--iq-danger); border-color: currentColor; }

/* Orbs — the system loading indicator. Three token-colored orbs whose
   motion names the activity (data-state). CSS only: looks restyle them,
   reduced-motion stills them. */
.iq-orbs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.1rem;
}
.iq-orbs[data-size="small"] { gap: 0.22rem; min-height: 0.7rem; }

.iq-orb-canvas { display: block; }

/* Library icons (ui.icon) — sized in em so they ride the text they sit in. */
.iq-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  flex-shrink: 0;
}
.iq-icon[data-size="small"] { width: 1em; height: 1em; vertical-align: -0.15em; }
.iq-icon[data-size="large"] { width: 2.2em; height: 2.2em; vertical-align: -0.5em; }

.iq-orbs-label { margin-left: 0.3rem; color: var(--iq-ink-soft); font-size: 1rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .iq-button { transition: none; }
}

/* ----------------------------------------------------------------- chart */

.iq-chart { display: flex; flex-direction: column; gap: 0.45rem; }

.iq-chart-row {
  display: grid;
  grid-template-columns: minmax(90px, 30%) 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.iq-chart-label { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iq-chart-bar {
  height: 0.85rem;
  border-radius: 999px;
  background: var(--iq-accent-soft);
  position: relative;
  overflow: hidden;
}

.iq-chart-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--iq-bar, 0%);
  background: var(--iq-accent);
  border-radius: inherit;
}

.iq-chart-value {
  font-variant-numeric: tabular-nums;
  color: var(--iq-ink-soft);
  font-weight: 650;
}

.iq-chart-series { gap: 0; }
.iq-chart-figure { margin: 0; min-width: 0; }
.iq-chart-summary { margin-bottom: 0.45rem; color: var(--iq-ink-soft); font-size: 0.9rem; }
.iq-chart-plot { display: block; width: 100%; height: auto; overflow: visible; }
.iq-chart-grid { stroke: var(--iq-line); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.iq-chart-axis-label { fill: var(--iq-ink); font: 12px var(--iq-font); }
.iq-chart-mark[data-series="0"], .iq-chart-key[data-series="0"] { color: var(--iq-chart-1); }
.iq-chart-mark[data-series="1"], .iq-chart-key[data-series="1"] { color: var(--iq-chart-2); }
.iq-chart-mark[data-series="2"], .iq-chart-key[data-series="2"] { color: var(--iq-chart-3); }
.iq-chart-mark[data-series="3"], .iq-chart-key[data-series="3"] { color: var(--iq-chart-4); }
.iq-chart-mark[data-series="4"], .iq-chart-key[data-series="4"] { color: var(--iq-chart-5); }
.iq-chart-mark[data-series="5"], .iq-chart-key[data-series="5"] { color: var(--iq-chart-6); }
.iq-chart-bar-mark { fill: currentColor; stroke: var(--iq-bg); stroke-width: 0.75; }
.iq-chart-line-mark { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iq-chart-line-mark[data-series="0"] { stroke-dasharray: none; }
.iq-chart-line-mark[data-series="1"] { stroke-dasharray: 7 3; }
.iq-chart-line-mark[data-series="2"] { stroke-dasharray: 2 3; }
.iq-chart-line-mark[data-series="3"] { stroke-dasharray: 9 2 2 2; }
.iq-chart-line-mark[data-series="4"] { stroke-dasharray: 1 2; stroke-width: 3; }
.iq-chart-line-mark[data-series="5"] { stroke-dasharray: 5 2 1 2; stroke-width: 3; }
.iq-chart-point-mark { fill: var(--iq-surface); stroke: currentColor; stroke-width: 2; }
.iq-chart-point-mark[data-series="3"], .iq-chart-point-mark[data-series="4"], .iq-chart-point-mark[data-series="5"] { stroke-dasharray: 2 1; stroke-width: 3; }
.iq-chart-target-line { stroke: var(--iq-accent); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.iq-chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; color: var(--iq-ink); font-size: 0.85rem; }
.iq-chart-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.iq-chart-key { display: inline-block; width: 0.8rem; height: 0.8rem; border: 2px solid currentColor; border-radius: 50%; }
.iq-chart-key[data-series="1"] { border-radius: 2px; }
.iq-chart-key[data-series="2"] { transform: rotate(45deg); border-radius: 1px; }
.iq-chart-key[data-series="3"] { border-style: dashed; }
.iq-chart-key[data-series="4"] { border-radius: 2px; border-style: dotted; border-width: 3px; }
.iq-chart-key[data-series="5"] { transform: rotate(45deg); border-style: dashed; border-radius: 1px; }
.iq-chart-target-key { display: inline-block; width: 1rem; border-top: 2px dashed var(--iq-ink-soft); }
.iq-chart-data {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.iq-chart[data-compact] .iq-chart-summary,
.iq-chart[data-compact] .iq-chart-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.iq-chart[data-compact] .iq-chart-plot { height: 3.5rem; }
.iq-chart[data-compact] .iq-chart-grid { stroke-opacity: 0.35; }

.iq-chart-canvas {
  min-height: 16rem;
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
}
.iq-chart[data-engine="community"] .iq-chart-row,
.iq-chart[data-engine="community"] .iq-chart-plot,
.iq-chart[data-engine="community"] .iq-chart-legend {
  display: none;
}
.iq-chart .ag-watermark,
.iq-data-grid .ag-watermark {
  display: none;
}

/* ---------------------------------------------------------------- dialog */

.iq-dialog {
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
  color: var(--iq-ink);
  box-shadow: 0 16px 48px rgb(20 20 19 / 0.22);
  padding: 1.25rem;
  max-width: 420px;
  width: calc(100vw - 2rem);
}

.iq-dialog { max-height: min(80vh, 80dvh); overflow-y: auto; }
.iq-dialog::backdrop { background: rgb(0 0 0 / 0.35); backdrop-filter: blur(2px); }
/* Every titled dialog breathes between its title and its content. */
.iq-dialog > .iq-section-title { margin-bottom: 0.9rem; }

/* ----------------------------------------------------------------- toast */

.iq-toast {
  position: fixed;
  left: 50%;
  bottom: 4.2rem;
  transform: translate(-50%, 1rem);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  background: var(--iq-ink);
  color: var(--iq-bg);
  font-weight: 650;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--iq-shadow);
  max-width: min(90vw, 480px);
  z-index: 60;
}

.iq-toast-in { transform: translate(-50%, 0); opacity: 1; }
.iq-toast-error { background: var(--iq-danger); color: var(--iq-danger-ink); }

/* The forgiveness affordance: "Deleted — Undo" rides the toast. */
.iq-toast-action {
  font: inherit;
  font-weight: 750;
  border: none;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin-left: 0.6rem;
  padding: 0;
}
.iq-toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --------------------------------------------------------------- sign-in */

.iq-signin {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1rem;
  background: var(--iq-accent-soft);
  border-radius: var(--iq-radius);
}

.iq-gate {
  display: contents;
}

/* -------------------------------------------------------- the trust badge */

.iq-badge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.9rem;
  background: color-mix(in srgb, var(--iq-surface) 82%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--iq-line);
  font-size: 1rem;
  /* Never --iq-font: a look can retoken that, and a data: @font-face
     could then rewrite "iqobi" into another brand. The badge names the
     platform, so it renders in the platform's own faces — which looks
     cannot redefine either (lookcss reserves these family names). */
  font-family: "Milo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.iq-badge-app {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--iq-ink);
  text-decoration: none;
  min-width: 0;
}

img.iq-badge-icon { width: 1.1rem; height: 1.1rem; display: block; flex-shrink: 0; }
.iq-badge-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-badge-on { color: var(--iq-ink-soft); }
.iq-badge-on strong { color: var(--iq-accent); }

.iq-badge-actions { display: flex; gap: 0.9rem; flex-shrink: 0; }

.iq-badge-link { color: var(--iq-ink-soft); text-decoration: none; font-weight: 650; }
.iq-badge-link:hover { color: var(--iq-accent); }
.iq-badge-report:hover { color: var(--iq-danger); }

/* ------------------------------------------------------------ W1 controls */

.iq-button-small {
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.14rem 0.5rem;
  block-size: auto;
  min-block-size: var(--iq-touch-min, 0px);
  min-inline-size: var(--iq-touch-min, 0px);
  max-block-size: none;
}
.iq-button-icon {
  padding: 0;
  inline-size: var(--iq-control-height);
  line-height: 1;
}

.iq-toggle, .iq-checkbox { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }

.iq-toggle-input, .iq-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* The iOS switch, flat: alpha track, white thumb with a soft drop. */
.iq-toggle-track {
  width: 1.8rem;
  height: 1.05rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--iq-ink) 16%, transparent);
  padding: 0.15rem;
  display: inline-flex;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.iq-toggle-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform 0.15s ease;
}

.iq-toggle-input:checked ~ .iq-toggle-track { background-color: var(--iq-accent); }
.iq-toggle-input:checked ~ .iq-toggle-track .iq-toggle-thumb { transform: translateX(0.75rem); }
.iq-toggle-input:focus-visible ~ .iq-toggle-track,
.iq-checkbox-input:focus-visible ~ .iq-checkbox-box {
  outline: 2px solid var(--iq-accent);
  outline-offset: 2px;
}
.iq-toggle-input:disabled ~ *,
.iq-checkbox-input:disabled ~ * {
  color: var(--iq-ink-soft);
}

.iq-checkbox-box {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--iq-line);
  border-radius: 5px;
  background: var(--iq-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.iq-checkbox-input:checked ~ .iq-checkbox-box {
  background: var(--iq-accent);
  border-color: var(--iq-accent);
}

.iq-checkbox-input:checked ~ .iq-checkbox-box::after {
  content: "✓";
  color: var(--iq-accent-ink);
  font-size: 1rem;
  font-weight: 700;
}
.iq-checkbox[data-swatch="1"] .iq-checkbox-box { border-color: var(--iq-chart-1); }
.iq-checkbox[data-swatch="2"] .iq-checkbox-box { border-color: var(--iq-chart-2); }
.iq-checkbox[data-swatch="3"] .iq-checkbox-box { border-color: var(--iq-chart-3); }
.iq-checkbox[data-swatch="4"] .iq-checkbox-box { border-color: var(--iq-chart-4); }
.iq-checkbox[data-swatch="5"] .iq-checkbox-box { border-color: var(--iq-chart-5); }
.iq-checkbox[data-swatch="6"] .iq-checkbox-box { border-color: var(--iq-chart-6); }
.iq-checkbox[data-swatch="1"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-1); border-color: var(--iq-chart-1); }
.iq-checkbox[data-swatch="2"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-2); border-color: var(--iq-chart-2); }
.iq-checkbox[data-swatch="3"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-3); border-color: var(--iq-chart-3); }
.iq-checkbox[data-swatch="4"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-4); border-color: var(--iq-chart-4); }
.iq-checkbox[data-swatch="5"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-5); border-color: var(--iq-chart-5); }
.iq-checkbox[data-swatch="6"] .iq-checkbox-input:checked ~ .iq-checkbox-box { background: var(--iq-chart-6); border-color: var(--iq-chart-6); }
.iq-checkbox[data-swatch] .iq-checkbox-input:checked ~ .iq-checkbox-box::after { color: var(--iq-bg); }

.iq-slider-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 180px; }
.iq-slider { flex: 1; accent-color: var(--iq-accent); }
.iq-slider-label { font-weight: 650; }
.iq-slider-value {
  font-variant-numeric: tabular-nums;
  color: var(--iq-ink-soft);
  font-weight: 650;
  min-width: 2ch;
  text-align: right;
}

.iq-stepper {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: var(--iq-radius-sm);
  background: color-mix(in srgb, var(--iq-ink) 7%, transparent);
  overflow: hidden;
}

.iq-stepper-down, .iq-stepper-up {
  font: inherit;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--iq-accent);
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  box-sizing: border-box;
  min-block-size: var(--iq-touch-min, 0px);
  min-inline-size: var(--iq-touch-min, 0px);
}
.iq-stepper-down:hover, .iq-stepper-up:hover {
  background-color: var(--iq-accent-soft);
  color: var(--iq-ink);
}
.iq-stepper-down:focus-visible, .iq-stepper-up:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }

.iq-stepper-value {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  min-width: 2.2ch;
  text-align: center;
  padding: 0 0.3rem;
}

.iq-segmented {
  display: inline-flex;
  background: color-mix(in srgb, var(--iq-ink) 8%, transparent);
  border-radius: var(--iq-radius-sm);
  padding: 0.15rem;
  gap: 0.15rem;
}

.iq-segment {
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  border: none;
  background: none;
  color: var(--iq-ink-soft);
  border-radius: calc(var(--iq-radius-sm) - 2px);
  padding: 0.16rem 0.6rem;
  cursor: pointer;
}
.iq-segment:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }

.iq-segment-active {
  background: var(--iq-bg);
  color: var(--iq-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.iq-segmented[data-variant="links"] {
  background: transparent;
  padding: 0;
  gap: 0.85rem;
}

.iq-segmented[data-variant="links"] .iq-segment {
  padding: 0;
  color: var(--iq-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.iq-segmented[data-variant="links"] .iq-segment-active {
  background: transparent;
  color: var(--iq-accent);
  box-shadow: none;
}

.iq-textarea { resize: vertical; width: 100%; }

/* Fields are borderless, so border-color alone would never paint: invalid
   draws an inset ring and a whisper of danger fill instead. */
.iq-input:user-invalid {
  box-shadow: inset 0 0 0 1.5px var(--iq-danger);
  background: color-mix(in srgb, var(--iq-danger) 6%, transparent);
}

.iq-colorwell { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.iq-colorwell input[type="color"] {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius-sm);
  background: var(--iq-surface);
  padding: 0.15rem;
  cursor: pointer;
}

.iq-search { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

/* --------------------------------------------- W2 structure & data display */

.iq-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.iq-grid[data-columns="compact"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.iq-grid[data-columns="dashboard"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 699px) {
  .iq-grid[data-columns="dashboard"] { grid-template-columns: 1fr; }
}

/* Browse shelf: one horizontal snap row that never wraps (the media-library
   idiom — recents, featured, collections). */
.iq-shelf {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.1rem 0.1rem 0.4rem; /* room for card shadows and the scrollbar */
  scrollbar-width: thin;
}
.iq-shelf-item {
  flex: 0 0 min(15rem, 74vw);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}
.iq-shelf-item > * { flex: 1; min-width: 0; }
.iq-shelf > .iq-state { flex: 1; }

.iq-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* A visible label, not a hint: ink-faint misses 4.5:1 on the page. */
  color: var(--iq-ink-soft);
  font-size: 1rem;
  font-weight: 700;
}
.iq-divider::before, .iq-divider::after { content: ""; flex: 1; border-top: 1px solid var(--iq-line); }

.iq-kv { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.iq-kv-row { display: grid; grid-template-columns: minmax(90px, 35%) 1fr; gap: 0.6rem; }
.iq-kv-key { font-weight: 650; color: var(--iq-ink-soft); }
.iq-kv-value { margin: 0; }

.iq-accordion {
  border: none;
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
}
.iq-accordion-title {
  font-weight: 700;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.iq-accordion-title::-webkit-details-marker { display: none; }
.iq-accordion-title::after { content: "›"; float: right; color: var(--iq-ink-soft); transition: transform 0.15s ease; }
.iq-accordion[open] .iq-accordion-title::after { transform: rotate(90deg); }
.iq-accordion-body { padding: 0 0.8rem 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }

.iq-item {
  position: relative;
  background: var(--iq-surface);
  border: none;
  border-radius: var(--iq-radius);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  transition: transform 0.15s ease;
}
/* Horizontal swipe reveals actions; the page keeps vertical scrolling. */
.iq-item:has(> .iq-item-actions) { touch-action: pan-y; }
.iq-item-select {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.32rem 0.6rem;
  min-block-size: 2.75rem;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.iq-item:not(:has(.iq-item-select)) { padding: 0.32rem 0.6rem; }
/* Trailing sits beside the select button (never inside it), so a selectable
   row can carry a live control; keep it on the padding rhythm. */
.iq-item:has(.iq-item-select) > .iq-item-trailing { padding-right: 0.6rem; }
.iq-item-select:hover { background-color: color-mix(in srgb, var(--iq-ink) 9%, transparent); }
.iq-item-select:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }

/* An item used as navigation — a link wearing .iq-item in a splitView
   sidebar. `aria-current` is the selected room, and it has to read as
   selected without hovering: vertical nav is the pattern behind a mail
   sidebar, a settings list, a folder tree. */
a.iq-item { text-decoration: none; color: inherit; min-block-size: 2.75rem; }
a.iq-item:hover { background-color: color-mix(in srgb, var(--iq-ink) 9%, transparent); }
.iq-item[aria-current] { background-color: var(--iq-accent-soft); }
.iq-item[aria-current] .iq-item-title { color: var(--iq-accent); }

.iq-item-leading { flex-shrink: 0; }
.iq-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.iq-item-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-item-subtitle { color: var(--iq-ink-soft); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-item-meta { color: var(--iq-ink-soft); font-size: 0.8125rem; }
.iq-item-chevron { color: var(--iq-ink-soft); font-size: 1.1rem; }
.iq-item-lock {
  width: 0.7rem;
  height: 0.85rem;
  border: 1.5px solid var(--iq-ink-soft);
  border-radius: 0.15rem 0.15rem 0.2rem 0.2rem;
  position: relative;
}
.iq-item-lock::before {
  content: "";
  position: absolute;
  left: 0.12rem;
  right: 0.12rem;
  top: -0.35rem;
  height: 0.4rem;
  border: 1.5px solid var(--iq-ink-soft);
  border-bottom: none;
  border-radius: 0.4rem 0.4rem 0 0;
}
.iq-item[aria-current="true"] { background: var(--iq-accent-soft); border-radius: var(--iq-radius); }
.iq-item[data-swatch="1"] { border-inline-start: 3px solid var(--iq-chart-1); }
.iq-item[data-swatch="2"] { border-inline-start: 3px solid var(--iq-chart-2); }
.iq-item[data-swatch="3"] { border-inline-start: 3px solid var(--iq-chart-3); }
.iq-item[data-swatch="4"] { border-inline-start: 3px solid var(--iq-chart-4); }
.iq-item[data-swatch="5"] { border-inline-start: 3px solid var(--iq-chart-5); }
.iq-item[data-swatch="6"] { border-inline-start: 3px solid var(--iq-chart-6); }
.iq-item-trailing { flex-shrink: 0; color: var(--iq-ink-soft); display: inline-flex; align-items: center; gap: 0.4rem; }

.iq-item-actions {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  transform: translateX(100%);
  transition: transform 0.15s ease;
}
.iq-item[data-swiped] .iq-item-actions { transform: translateX(0); }

.iq-action {
  font: inherit;
  font-weight: 650;
  border: none;
  background: var(--iq-accent);
  color: var(--iq-accent-ink);
  padding: 0 1rem;
  cursor: pointer;
  min-block-size: 2.75rem;
}
.iq-action-danger { color: var(--iq-danger-ink); background: var(--iq-danger); }

.iq-list-section { display: flex; flex-direction: column; gap: 0.6rem; }
.iq-list-section-title {
  font-family: var(--iq-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iq-ink-soft);
  margin: 0;
}
.iq-list-section[data-kind="day"] > .iq-list-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--iq-ink);
}
.iq-list-section-day {
  font-family: var(--iq-font-display);
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1;
}
.iq-list-section-caption {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--iq-ink-soft);
}

.iq-refresh { display: flex; justify-content: center; padding: 0.2rem; }

.iq-table-wrap { overflow-x: auto; border: none; border-radius: var(--iq-radius); background: var(--iq-surface); }
.iq-table { border-collapse: collapse; width: 100%; }
.iq-table-header {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iq-ink-soft);
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--iq-line);
}
.iq-table-cell { padding: 0.28rem 0.6rem; border-bottom: 1px solid var(--iq-line); }
.iq-table-row:last-child .iq-table-cell { border-bottom: none; }
.iq-table-row:hover .iq-table-cell { background-color: var(--iq-accent-soft); }

.iq-data-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.15rem 0;
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
  color: var(--iq-ink);
  font-family: var(--iq-font);
}
.iq-data-grid-toolbar { display: flex; justify-content: flex-end; }
.iq-data-grid-canvas {
  min-height: 16rem;
  height: min(32rem, 70vh);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  overflow: auto;
}
.iq-data-grid-canvas[data-engine="community"] { overflow: hidden; }
.iq-data-grid-table { border-collapse: collapse; width: 100%; }
.iq-data-grid-header {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iq-ink);
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--iq-line);
  background: var(--iq-bg);
}
.iq-data-grid-cell { padding: 0.28rem 0.6rem; border-bottom: 1px solid var(--iq-line); }
.iq-data-grid-row:hover .iq-data-grid-cell { background-color: var(--iq-accent-soft); }

.iq-cal { display: flex; flex-direction: column; gap: 0.4rem; max-width: 22rem; }
.iq-cal[data-kind="agenda"] { max-width: none; }
.iq-cal-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; }
.iq-cal-month { font-weight: 700; }
.iq-cal-views { display: flex; gap: 0.25rem; }
.iq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
.iq-cal[data-view="week"] .iq-cal-grid { gap: 0.45rem; }
.iq-cal[data-view="day"] .iq-cal-grid { grid-template-columns: 1fr; }
.iq-cal-cell, .iq-cal-weekcol {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-height: 4.5rem;
  padding: 0.2rem;
  border-radius: var(--iq-radius-sm);
  background: color-mix(in srgb, var(--iq-ink) 4%, transparent);
}
.iq-cal-cell .iq-cal-day, .iq-cal-weekcol .iq-cal-day {
  aspect-ratio: auto;
  width: 1.85rem;
  height: 1.85rem;
  align-self: flex-end;
}
.iq-cal-event {
  font: inherit;
  font-size: 0.75rem;
  text-align: start;
  border: none;
  border-radius: var(--iq-radius-sm);
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iq-cal-event[data-allday] { font-weight: 700; }
.iq-cal-event[data-swatch="1"] { background: color-mix(in srgb, var(--iq-chart-1) 22%, transparent); color: var(--iq-ink); }
.iq-cal-event[data-swatch="2"] { background: color-mix(in srgb, var(--iq-chart-2) 22%, transparent); color: var(--iq-ink); }
.iq-cal-event[data-swatch="3"] { background: color-mix(in srgb, var(--iq-chart-3) 22%, transparent); color: var(--iq-ink); }
.iq-cal-event[data-swatch="4"] { background: color-mix(in srgb, var(--iq-chart-4) 22%, transparent); color: var(--iq-ink); }
.iq-cal-event[data-swatch="5"] { background: color-mix(in srgb, var(--iq-chart-5) 22%, transparent); color: var(--iq-ink); }
.iq-cal-event[data-swatch="6"] { background: color-mix(in srgb, var(--iq-chart-6) 22%, transparent); color: var(--iq-ink); }
.iq-cal-more { font-size: 0.75rem; color: var(--iq-ink-soft); }
.iq-cal-agenda { display: flex; flex-direction: column; gap: 0.4rem; }
.iq-cal-daylist { display: flex; flex-direction: column; gap: 0.25rem; }
.iq-cal-event-time { margin-inline-end: 0.25rem; color: var(--iq-ink-soft); }
.iq-cal-today-btn { margin-inline-start: auto; }
.iq-cal-weekday { text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--iq-ink-soft); }
.iq-cal-day {
  font: inherit;
  font-variant-numeric: tabular-nums;
  border: none;
  background: none;
  color: var(--iq-ink);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.iq-cal-day:hover { background-color: var(--iq-accent-soft); }
.iq-cal-day:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }
.iq-cal-day[data-outside] { color: var(--iq-ink-soft); }
.iq-cal-today { font-weight: 800; color: var(--iq-accent); }
.iq-cal-selected { background: var(--iq-accent); color: var(--iq-accent-ink); font-weight: 700; }
.iq-cal-selected:hover { background-color: var(--iq-accent-strong); }
.iq-cal-marked::after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
}

/* Tiles laid side by side in a row are peers: same height (stretch to the
   tallest) and an even share of the width — a hint line on one must not
   make its neighbors shorter. */
.iq-row > .iq-stat,
.iq-row > .iq-card {
  align-self: stretch;
  flex: 1;
  min-width: 140px;
}

.iq-stat {
  display: flex;
  flex-direction: column;
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  box-shadow: none;
  padding: 0.45rem 0.65rem;
}
.iq-stat-label { font-size: 0.8125rem; font-weight: 700; color: var(--iq-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.iq-stat-label:empty { display: none; }
.iq-stat-value { font-family: var(--iq-font-display); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.iq-stat-hint { color: var(--iq-ink-soft); font-size: 1rem; }
.iq-stat[data-size="plain"] {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.iq-stat[data-size="hero"] .iq-stat-value {
  font-family: var(--iq-font);
  font-size: 2.5rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
}
.iq-stat[data-size="plain"] .iq-stat-value { font-family: var(--iq-font); }

.iq-avatar {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iq-avatar[data-size="small"] { width: 1.15rem; height: 1.15rem; font-size: 0.65rem; }
.iq-avatar[data-size="large"] { width: 3rem; height: 3rem; font-size: 1.1rem; }
.iq-avatar[data-swatch="1"] { background: color-mix(in srgb, var(--iq-chart-1) 28%, transparent); color: var(--iq-ink); }
.iq-avatar[data-swatch="2"] { background: color-mix(in srgb, var(--iq-chart-2) 28%, transparent); color: var(--iq-ink); }
.iq-avatar[data-swatch="3"] { background: color-mix(in srgb, var(--iq-chart-3) 28%, transparent); color: var(--iq-ink); }
.iq-avatar[data-swatch="4"] { background: color-mix(in srgb, var(--iq-chart-4) 28%, transparent); color: var(--iq-ink); }
.iq-avatar[data-swatch="5"] { background: color-mix(in srgb, var(--iq-chart-5) 28%, transparent); color: var(--iq-ink); }
.iq-avatar[data-swatch="6"] { background: color-mix(in srgb, var(--iq-chart-6) 28%, transparent); color: var(--iq-ink); }

.iq-rating { display: inline-flex; gap: 0.1rem; }
.iq-rating-star {
  font: inherit;
  font-size: 1.1rem;
  border: none;
  background: none;
  color: var(--iq-line);
  cursor: pointer;
  padding: 0.05rem;
  transition: color 0.1s ease;
}
.iq-rating-on { color: var(--iq-accent); }
.iq-rating-star:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 1px; border-radius: 4px; }

.iq-progress {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--iq-accent-soft);
  overflow: hidden;
  flex: 1;
  min-width: 120px;
}
.iq-progress-fill {
  height: 100%;
  width: var(--iq-fill);
  border-radius: inherit;
  background: var(--iq-accent);
  transition: width 0.25s ease;
}
.iq-progress[data-style="ring"] {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  flex: 0 0 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(var(--iq-accent) var(--iq-fill), var(--iq-line) 0);
}
.iq-progress[data-style="ring"] > .iq-progress-fill { width: 0; height: 0; }
.iq-progress { position: relative; }
.iq-progress-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--iq-ink-soft);
  margin-top: 0.3rem;
}
.iq-progress:has(.iq-progress-label) {
  height: auto;
  overflow: visible;
  background: transparent;
}
.iq-progress:has(.iq-progress-label) .iq-progress-fill {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--iq-accent);
  box-shadow: 0 0 0 9999px inset transparent;
}
.iq-progress:has(.iq-progress-label)::before {
  content: "";
  display: block;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--iq-accent-soft);
}
.iq-progress:has(.iq-progress-label) .iq-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.6rem;
}
.iq-progress[data-style="ring"]:has(.iq-progress-label) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 1.75rem;
  background: none;
  overflow: visible;
}
.iq-progress[data-style="ring"]:has(.iq-progress-label)::before { display: none; }
.iq-progress[data-style="ring"]:has(.iq-progress-label) .iq-progress-fill { position: static; width: 0; height: 0; }
.iq-progress[data-style="ring"]:has(.iq-progress-label)::after {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: conic-gradient(var(--iq-accent) var(--iq-fill), var(--iq-line) 0);
  order: -1;
}

.iq-banner {
  border-radius: var(--iq-radius);
  padding: 0.45rem 0.75rem;
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.iq-banner-text { margin: 0; font-weight: 650; }
.iq-banner[data-tone="success"] { background: rgba(31, 122, 74, 0.14); color: #1e6b41; }
.iq-banner[data-tone="warn"] { background: rgba(185, 140, 29, 0.18); color: #7d5d08; }
.iq-banner[data-tone="error"] { background: color-mix(in srgb, var(--iq-danger) 12%, transparent); color: var(--iq-danger); }

@media (prefers-color-scheme: dark) {
  .iq-banner[data-tone="success"] { color: #4ade80; }
  .iq-banner[data-tone="warn"] { color: #fbbf24; }
}

.iq-skeleton {
  height: 1.9rem;
  border-radius: var(--iq-radius);
  background: linear-gradient(100deg, var(--iq-line) 40%, var(--iq-surface) 50%, var(--iq-line) 60%);
  background-size: 200% 100%;
  animation: iq-shimmer 1.2s linear infinite;
}

@keyframes iq-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .iq-skeleton { animation: none; background: var(--iq-line); }
}

.iq-prose { max-width: 65ch; }
.iq-prose h2 { font-family: var(--iq-font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 1.2em 0 0.4em; }
.iq-prose h3 { font-family: var(--iq-font-display); font-size: 1.1rem; font-weight: 700; margin: 1.1em 0 0.35em; }
.iq-prose p { margin: 0 0 0.85em; color: var(--iq-ink); }
.iq-prose ul, .iq-prose ol { margin: 0 0 0.85em; padding-left: 1.4em; }
.iq-prose blockquote {
  font-family: var(--iq-font-display);
  font-style: italic;
  margin: 0 0 0.85em;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--iq-accent);
  color: var(--iq-ink-soft);
}
.iq-prose hr { border: none; border-top: 1px solid var(--iq-line); margin: 1.2em 0; }
.iq-prose a { color: var(--iq-accent); }
.iq-prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1em;
  background: var(--iq-accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}

/* ------------------------------------------------------------ W3 overlays */

.iq-dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.9rem; }

.iq-actionsheet {
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius) var(--iq-radius) 0 0;
  background: var(--iq-surface);
  color: var(--iq-ink);
  padding: 0.6rem;
  width: min(100vw, 480px);
  margin: auto auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.iq-actionsheet::backdrop { background: rgb(0 0 0 / 0.35); }
.iq-actionsheet-title { margin: 0.3rem 0; text-align: center; color: var(--iq-ink-soft); font-size: 1rem; font-weight: 650; }
.iq-actionsheet .iq-action {
  background: none;
  color: var(--iq-accent);
  border-radius: var(--iq-radius-sm);
  padding: 0.7rem;
  font-size: 1rem;
}
.iq-actionsheet .iq-action:hover { background-color: var(--iq-accent-soft); }
.iq-actionsheet .iq-action-danger { color: var(--iq-danger); }
.iq-actionsheet .iq-action-danger:hover {
  color: var(--iq-danger);
  background-color: color-mix(in srgb, var(--iq-danger) 12%, transparent);
}
.iq-actionsheet .iq-action-cancel { font-weight: 750; border-top: 1px solid var(--iq-line); border-radius: 0; }

.iq-sheet {
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius) var(--iq-radius) 0 0;
  background: var(--iq-surface);
  color: var(--iq-ink);
  box-shadow: 0 -8px 40px rgb(20 20 19 / 0.2);
  padding: 0.6rem 1.25rem 1.25rem;
  width: min(100vw, 560px);
  margin: auto auto 0;
  max-height: 55vh;
  overflow-y: auto;
}
.iq-sheet[data-detent="large"] { max-height: 88vh; }
.iq-sheet::backdrop { background: rgb(0 0 0 / 0.35); backdrop-filter: blur(2px); }
/* A real control now: tapping it closes the sheet (phones have no Escape).
   The pill look stays; the padding buys a 44px-wide thumb target. */
.iq-sheet-grabber {
  appearance: none;
  border: 0;
  display: block;
  width: 2.4rem;
  height: 0.3rem;
  box-sizing: content-box;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--iq-line);
  background-clip: content-box;
  margin: -0.15rem auto 0.45rem;
  cursor: pointer;
}
.iq-sheet-grabber:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-sheet-title { font-family: var(--iq-font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.7rem; }
.iq-sheet-body { display: flex; flex-direction: column; gap: 0.75rem; }

.iq-panel {
  border: none;
  border-left: 1px solid var(--iq-line);
  border-radius: 0;
  background: var(--iq-surface);
  color: var(--iq-ink);
  box-shadow: 0 0 48px rgb(20 20 19 / 0.25);
  padding: 1.25rem;
  width: min(85vw, 360px);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
}
.iq-panel::backdrop { background: rgb(0 0 0 / 0.35); }
.iq-panel-title { font-family: var(--iq-font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.7rem; }
.iq-panel-body { display: flex; flex-direction: column; gap: 0.75rem; }

.iq-popover, .iq-menu {
  position: fixed;
  inset: auto;
  display: none;
  background: var(--iq-surface);
  color: var(--iq-ink);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  box-shadow: 0 12px 32px rgb(20 20 19 / 0.18);
  padding: 0.5rem;
  z-index: 70;
  min-width: 180px;
  max-width: min(90vw, 320px);
}
.iq-popover-open { display: flex; flex-direction: column; gap: 0.3rem; }

.iq-menu-item {
  font: inherit;
  font-weight: 650;
  text-align: left;
  border: none;
  background: none;
  color: var(--iq-ink);
  border-radius: var(--iq-radius-sm);
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  /* Field-height, like buttons (founder direction, Stéphane 2026-08-01).
     Stacked commands cannot each claim a 44px stripe without spilling onto
     their neighbors — Delete sits right below Rename — so the invisible
     extension fills the menu's gaps exactly instead. */
  min-block-size: var(--iq-control-height);
  position: relative;
}
/* The same menu serves touch: comfortable rows there, field-height on fine
   pointers per the founder direction above. */
@media (pointer: coarse) {
  .iq-menu-item { min-block-size: 2.75rem; }
}

.iq-menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(100% + 0.3rem);
  transform: translateY(-50%);
}
.iq-menu-item:hover { background-color: var(--iq-accent-soft); }
.iq-menu-item:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }
.iq-menu-item-danger { color: var(--iq-danger); }
.iq-menu-item-danger:hover {
  color: var(--iq-danger);
  background-color: color-mix(in srgb, var(--iq-danger) 12%, transparent);
}
/* ---------------------------------------------------------- W4 navigation */

.iq-tabs { display: flex; flex-direction: column; gap: 1rem; }

.iq-tabbar {
  display: flex;
  gap: 0.15rem;
  background: var(--iq-line);
  border-radius: var(--iq-radius-sm);
  padding: 0.15rem;
  overflow-x: auto;
}

.iq-tab {
  font: inherit;
  font-weight: 650;
  border: none;
  background: none;
  color: var(--iq-ink-soft);
  border-radius: calc(var(--iq-radius-sm) - 2px);
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--iq-touch-min, 0px);
}
.iq-tab:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }
.iq-tab[aria-selected="true"] { background-color: var(--iq-surface); color: var(--iq-ink); box-shadow: var(--iq-shadow); }
.iq-tab > .iq-icon { width: 1.1em; height: 1.1em; flex: none; }

/* Sidebar-adaptable navigation (HIG sidebarAdaptable): the same tab group
   wears a leading rail on wide screens and the bottom tab bar on narrow
   ones — one spine, two presentations. Extra destinations (`groups`) live
   in the sidebar only. */
.iq-tabs-groups { display: none; }
@media (min-width: 700px) {
  .iq-tabs[data-nav="sidebar"] {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
  .iq-tabs[data-nav="sidebar"] > .iq-tabbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    background: none;
    padding: 0 1rem 0 0;
    border-radius: 0;
    border-right: 1px solid var(--iq-line);
    position: sticky;
    top: 0.8rem;
    overflow: visible;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
  .iq-tabs[data-nav="sidebar"] .iq-tab {
    flex: none;
    justify-content: flex-start;
    text-align: left;
    gap: 0.55rem;
    padding: 0.34rem 0.6rem;
  }
  .iq-tabs[data-nav="sidebar"] .iq-tab[aria-selected="true"] {
    background-color: var(--iq-accent-soft);
    color: var(--iq-accent);
    box-shadow: none;
  }
  .iq-tabs[data-nav="sidebar"] .iq-tab > .iq-chip { margin-left: auto; }
  .iq-tabs[data-nav="sidebar"] .iq-tabs-groups {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--iq-line);
  }
  .iq-tabs[data-nav="sidebar"] .iq-tabs-groups .iq-accordion {
    border: none;
    background: none;
    padding: 0;
    box-shadow: none;
  }
  .iq-tabs[data-nav="sidebar"] .iq-tabs-groups .iq-accordion-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--iq-ink-soft);
    padding: 0.2rem 0.6rem;
  }
  .iq-tabs[data-nav="sidebar"] .iq-tabs-groups .iq-accordion-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0;
  }
}

.iq-screens { display: flex; flex-direction: column; gap: 1rem; }
.iq-screenbar { display: flex; align-items: center; gap: 0.6rem; min-height: 2.4rem; }

/* Breadcrumb trail: wide screens swap the Back button for the clickable
   path (narrow screens keep Back — a trail cannot share a phone bar). */
.iq-crumbs { display: none; align-items: center; gap: 0.15rem; flex-wrap: wrap; min-width: 0; }
@media (min-width: 700px) {
  .iq-crumbs { display: flex; }
  .iq-screenbar > .iq-back { display: none; }
  /* The trail's last crumb is the current screen; the big title beside it
     would say the same thing twice. */
  .iq-screens:not([data-depth="1"]) > .iq-screenbar > .iq-screen-title { display: none; }
}
.iq-crumb {
  font: inherit;
  font-weight: 650;
  border: none;
  background: none;
  color: var(--iq-ink-soft);
  border-radius: var(--iq-radius-sm);
  padding: 0.1rem 0.35rem;
}
button.iq-crumb { cursor: pointer; }
button.iq-crumb:hover { background-color: var(--iq-accent-soft); color: var(--iq-accent); }
.iq-crumb:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }
.iq-crumb-current { color: var(--iq-ink); font-weight: 700; }
.iq-crumb-sep { color: var(--iq-ink-soft); }
.iq-screen-title { font-family: var(--iq-font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; flex: 1; }
.iq-screen-actions { display: flex; gap: 0.4rem; }
.iq-screen { display: flex; flex-direction: column; gap: 1rem; }

/* Pane proportions follow the HIG: a sidebar keeps a steady rail width and
   the content/detail panes take the room — at desktop width the fr split
   would balloon the sidebar instead. */
.iq-split { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.iq-split:has(.iq-split-detail) { grid-template-columns: minmax(9rem, 13rem) minmax(13rem, 21rem) minmax(0, 1.5fr); }
.iq-split-sidebar, .iq-split-content, .iq-split-detail { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

/* The split reads as a split: pane hairlines, story-rail style. Stacked
   panes (collapsed or narrow) swap to horizontal hairlines. */
.iq-split-sidebar { border-inline-end: 1px solid var(--iq-line); padding-inline-end: 1rem; }
.iq-split-detail { border-inline-start: 1px solid var(--iq-line); padding-inline-start: 1rem; }

.iq-split[data-collapsed] { grid-template-columns: 1fr; }
.iq-split[data-collapsed] .iq-split-sidebar {
  border-inline-end: none;
  padding-inline-end: 0;
  border-block-end: 1px solid var(--iq-line);
  padding-block-end: 0.75rem;
}
.iq-split[data-collapsed] .iq-split-detail {
  border-inline-start: none;
  padding-inline-start: 0;
  border-block-start: 1px solid var(--iq-line);
  padding-block-start: 0.75rem;
}
@media (max-width: 700px) {
  .iq-split, .iq-split:has(.iq-split-detail) { grid-template-columns: 1fr; }
  .iq-split .iq-split-sidebar {
    border-inline-end: none;
    padding-inline-end: 0;
    border-block-end: 1px solid var(--iq-line);
    padding-block-end: 0.75rem;
  }
  .iq-split .iq-split-detail {
    border-inline-start: none;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--iq-line);
    padding-block-start: 0.75rem;
  }
}

.iq-pager { display: flex; flex-direction: column; gap: 0.6rem; }
.iq-pager-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 0.6rem;
}
.iq-pager-item { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.iq-pagedots { display: flex; justify-content: center; gap: 0.4rem; }
.iq-pagedot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: var(--iq-line);
  cursor: pointer;
  padding: 0;
}
.iq-pagedot-active { background: var(--iq-accent); }
.iq-pagedot:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

/* Story — the case-file paradigm: numbered exhibits along a scroll with a
   pinned chapter rail that tracks reading position. */
.iq-story { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }

.iq-story-rail {
  position: sticky;
  top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.55rem;
  border-right: 1px solid var(--iq-line);
}

.iq-story-dot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--iq-ink-soft);
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  padding: 0.1rem 0.2rem;
  border-radius: var(--iq-radius-sm);
}
.iq-story-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--iq-line);
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.iq-story-dot[aria-current] { color: var(--iq-ink); }
.iq-story-dot[aria-current]::before { background-color: var(--iq-accent); transform: scale(1.25); }
.iq-story-dot:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-story-dot-label { white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }

.iq-story-flow { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }

.iq-exhibit { display: flex; flex-direction: column; gap: 0.55rem; scroll-margin-top: 1rem; }
.iq-exhibit + .iq-exhibit { border-top: 1px solid var(--iq-line); padding-top: 1.5rem; }
.iq-exhibit-title { font-family: var(--iq-font-display); font-size: 1.05rem; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.iq-exhibit-num {
  font-variant-numeric: tabular-nums;
  color: var(--iq-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.iq-exhibit-body { display: flex; flex-direction: column; gap: 0.6rem; }

@media (max-width: 700px) {
  .iq-story { grid-template-columns: 1fr; }
  .iq-story-rail {
    top: 0;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--iq-line);
    background: color-mix(in srgb, var(--iq-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    z-index: 5;
    padding: 0.3rem 0;
  }
  .iq-story-dot-label { max-width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .iq-story-dot::before { transition: none; }
}

/* Board — the pinboard paradigm: regions on a pannable paper-grid plane;
   drag to wander, legend to fly, zoom to survey. */
.iq-board { display: flex; flex-direction: column; gap: 0.5rem; }

.iq-board-view {
  position: relative;
  overflow: hidden;
  height: 340px;
  border-radius: var(--iq-radius);
  background-color: var(--iq-surface);
  background-image: radial-gradient(color-mix(in srgb, var(--iq-ink) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  touch-action: none;
  cursor: grab;
}
.iq-board-view[data-dragging] { cursor: grabbing; }

.iq-board-plane { position: absolute; inset: 0; will-change: transform; }

.iq-board-region {
  position: absolute;
  width: 15rem;
  background: var(--iq-bg);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.iq-board-region-title { font-family: var(--iq-font-display); font-size: 1rem; font-weight: 700; margin: 0; }
.iq-board-region-body { display: flex; flex-direction: column; gap: 0.4rem; }

.iq-board-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.iq-board-legend { display: flex; gap: 0.3rem; overflow-x: auto; }

.iq-board-jump {
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  border: none;
  background: color-mix(in srgb, var(--iq-ink) 7%, transparent);
  color: var(--iq-ink-soft);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.iq-board-jump:hover { background-color: color-mix(in srgb, var(--iq-ink) 11%, transparent); }
.iq-board-jump[aria-current] { background-color: var(--iq-accent); color: var(--iq-accent-ink); }
.iq-board-jump:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-board-controls { display: flex; gap: 0.3rem; flex-shrink: 0; }

/* Map: a geographic outline, connected route, and one selected detail. */
.iq-canvas {
  display: block;
  width: 100%;
  min-width: 0;
}
.iq-canvas-surface {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
  touch-action: none;
  cursor: crosshair;
}
.iq-canvas-surface[aria-readonly="true"] { cursor: default; }

.iq-map { display: flex; flex-direction: column; gap: 0.65rem; }

.iq-map-view {
  position: relative;
  overflow: hidden;
  width: 100%; /* fills its pane — Apple Maps gives the map the room */
  height: 34rem;
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  background: color-mix(in srgb, var(--iq-chart-1) 12%, var(--iq-surface));
  box-shadow: var(--iq-shadow);
}

.iq-map-canvas, .iq-map-markers { position: absolute; inset: 0; width: 100%; height: 100%; }
.iq-map-land {
  fill: color-mix(in srgb, var(--iq-accent) 22%, var(--iq-bg));
  stroke: color-mix(in srgb, var(--iq-accent-strong) 68%, var(--iq-ink));
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}
.iq-map-route {
  fill: none;
  stroke: var(--iq-accent-strong);
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 1.25;
  vector-effect: non-scaling-stroke;
}
.iq-map-markers { pointer-events: none; }
.iq-map-view[data-iqobi-map-live] .iq-map-markers { visibility: hidden; }
.iq-map-status {
  padding: 0.55rem 0.7rem;
  border-radius: var(--iq-radius-sm);
  background: color-mix(in srgb, var(--iq-accent) 15%, var(--iq-surface));
  color: var(--iq-ink-soft);
  font-size: 0.9rem;
}

.iq-map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
  border: 2px solid var(--iq-bg);
  border-radius: 999px;
  background: var(--iq-accent-strong);
  color: var(--iq-accent-ink);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.24);
  font: 700 0.8rem/1 var(--iq-font);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease;
}
.iq-map-marker::before { content: ""; position: absolute; width: 2.75rem; height: 2.75rem; }
.iq-map-marker:hover, .iq-map-marker[aria-current] { transform: translate(-50%, -50%) scale(1.16); }
.iq-map-marker:focus-visible { outline: 3px solid var(--iq-ink); outline-offset: 2px; }

.iq-map-legend { display: flex; gap: 0.3rem; overflow-x: auto; padding-block: 0.1rem; }
.iq-map-jump {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--iq-ink) 7%, transparent);
  color: var(--iq-ink-soft);
  padding: 0.25rem 0.65rem;
  font: 650 0.9rem/1.35 var(--iq-font);
  cursor: pointer;
}
.iq-map-jump[aria-current] { background: var(--iq-accent); color: var(--iq-accent-ink); }
.iq-map-jump[data-location-unavailable] { text-decoration: underline dotted; }
.iq-map-jump:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-map-detail { min-width: 0; }

@media (max-width: 699px) {
  .iq-map-view { height: min(66vh, 36rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .iq-map-marker { transition: none; }
}

.iq-toolbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  z-index: 55;
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  background: color-mix(in srgb, var(--iq-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--iq-line);
  border-radius: 999px;
  box-shadow: var(--iq-shadow);
}
.iq-toolbar[data-align="start"] { left: 1rem; transform: none; }
.iq-toolbar[data-align="end"] { left: auto; right: 1rem; transform: none; }
.iq-toolbar[data-align="split"] {
  justify-content: space-between;
  width: min(36rem, calc(100vw - 2rem));
}

@media (prefers-reduced-motion: reduce) {
  .iq-toggle-track, .iq-toggle-thumb, .iq-item, .iq-item-actions, .iq-progress-fill, .iq-rating-star { transition: none; }
}

/* ------------------------------------------- W5 fields, data & adaptation */

/* Field anatomy: a real label above the control, help beneath, and a home
   for the native validation message (placeholder-as-label was the
   antipattern this retires). */
.iq-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.iq-field-label { font-size: 0.8125rem; font-weight: 700; color: var(--iq-ink-soft); }
/* Required fields announce themselves on the label; the control's own
   `required` attribute is the single source of truth. */
.iq-field:has(:required) > .iq-field-label::after { content: " *"; color: var(--iq-danger); }
.iq-field-help { font-size: 0.8125rem; color: var(--iq-ink-soft); }
.iq-field-error { font-size: 0.8125rem; font-weight: 650; color: var(--iq-danger); }
.iq-field-help:empty, .iq-field-error:empty { display: none; }

/* Vertical single-choice list — where segmented runs out of room. */
.iq-radiolist { display: flex; flex-direction: column; gap: 0.4rem; }
.iq-radio { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.iq-radio-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.iq-radio-dot {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--iq-line);
  border-radius: 50%;
  background: var(--iq-surface);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.iq-radio-input:checked ~ .iq-radio-dot { border-color: var(--iq-accent); }
.iq-radio-input:checked ~ .iq-radio-dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--iq-accent);
}
.iq-radio-input:focus-visible ~ .iq-radio-dot { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-radio-input:disabled ~ * { color: var(--iq-ink-soft); }

/* Typeahead: an input wearing a suggestion listbox. */
.iq-combobox { position: relative; display: flex; flex: 1; min-width: 0; }
.iq-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  box-shadow: 0 12px 32px rgb(20 20 19 / 0.18);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 14rem;
  overflow-y: auto;
}
.iq-combobox-option {
  font: inherit;
  text-align: left;
  border: none;
  background: none;
  color: var(--iq-ink);
  border-radius: var(--iq-radius-sm);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
}
.iq-combobox-option:hover, .iq-combobox-option[aria-selected="true"] { background-color: var(--iq-accent-soft); }
.iq-combobox-option:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }

/* Multi-select tokens in a field-shaped well. */
.iq-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  background: color-mix(in srgb, var(--iq-ink) 5%, transparent);
  border-radius: var(--iq-radius-sm);
  padding: 0.2rem 0.3rem;
  flex: 1;
  min-width: 0;
}
.iq-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 650;
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
  border-radius: 999px;
  padding: 0.08rem 0.3rem 0.08rem 0.55rem;
}
.iq-tag-remove {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0 0.2rem;
  border-radius: 50%;
}
.iq-tag-remove:hover { background-color: color-mix(in srgb, currentColor 18%, transparent); }
.iq-tag-remove:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 1px; }
.iq-tags .iq-tags-input { background: none; flex: 1; min-width: 6ch; }

.iq-time { color: var(--iq-ink-soft); }
/* A look may paint .iq-stat on a well that is not --iq-surface
   (Tape LCD). Inherit the value pairing so timer text stays ≥4.5:1. */
.iq-stat-value .iq-time { color: inherit; }

/* Trend line; looks restyle the stroke through the class. */
.iq-spark { display: block; min-width: 80px; }
.iq-spark svg { display: block; width: 100%; height: 1.75rem; }
.iq-spark-line { fill: none; stroke: var(--iq-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.iq-skeleton[data-shape="circle"] { width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.iq-skeleton[data-shape="card"] { height: 5.5rem; }

/* Supplementary hint; never the sole carrier of meaning. Hover reveals it on
   fine pointers; focus reveals it everywhere, so keyboards and touch (via a
   focusable target) are not shut out. */
.iq-hint { position: relative; display: inline-flex; }
.iq-hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--iq-ink);
  color: var(--iq-bg);
  font-size: 0.8125rem;
  font-weight: 650;
  padding: 0.2rem 0.55rem;
  border-radius: var(--iq-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.25s;
  z-index: 40;
}
.iq-hint:focus-within::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .iq-hint:hover::after { opacity: 1; }
}

/* An armed long-press must not fight text selection or the iOS callout. */
[data-press-armed] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Reorder: grab the handle, the row lifts and follows. */
.iq-item-handle {
  flex-shrink: 0;
  color: var(--iq-ink-soft);
  cursor: grab;
  padding: 0 0.2rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.iq-item[data-lifted] { opacity: 0.85; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); z-index: 20; }

/* Master–detail wears the split or the screens markup, never its own. */
.iq-masterdetail { display: block; }

/* ---- pointer/viewport adaptations: same meaning, native idiom ---------- */

/* Swipe reveals actions on touch; pointers get hover/focus reveal. */
@media (hover: hover) and (pointer: fine) {
  .iq-item:hover .iq-item-actions,
  .iq-item:focus-within .iq-item-actions { transform: translateX(0); }
}

/* Tables collapse to labeled cards on narrow screens. */
@media (max-width: 700px) {
  .iq-table thead { display: none; }
  .iq-table, .iq-table tbody { display: block; }
  .iq-table-row { display: block; padding: 0.45rem 0.65rem; }
  .iq-table-row + .iq-table-row { border-top: 1px solid var(--iq-line); }
  .iq-table-cell {
    display: grid;
    grid-template-columns: minmax(90px, 35%) 1fr;
    gap: 0.6rem;
    border: none;
    padding: 0.12rem 0;
  }
  .iq-table-cell::before { content: attr(data-label); font-weight: 650; color: var(--iq-ink-soft); }
  .iq-table-row:hover .iq-table-cell { background: none; }
}

/* Opt-in bottom tab bar: thumb-reachable on narrow screens, on the app
   floor. Signed-in live chrome (HUD) is reserved outside this frame, so
   the bar no longer sits on top of a badge overlay. Sidebar placement
   collapses into the same bar (HIG adaptable). */
@media (max-width: 700px) {
  .iq-tabbar[data-placement="bottom"],
  .iq-tabbar[data-placement="sidebar"] {
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 45;
    box-shadow: var(--iq-shadow);
  }
  .iq-tabs:has(.iq-tabbar[data-placement="bottom"]),
  .iq-tabs:has(.iq-tabbar[data-placement="sidebar"]) { padding-bottom: 4.2rem; }
  /* Icon tabs go glyph-over-label (HIG compact); the badge chip rides the
     corner instead of stretching the column. */
  .iq-tabbar[data-placement="bottom"] .iq-tab,
  .iq-tabbar[data-placement="sidebar"] .iq-tab { position: relative; }
  .iq-tabbar[data-placement="bottom"] .iq-tab:has(.iq-icon),
  .iq-tabbar[data-placement="sidebar"] .iq-tab:has(.iq-icon) {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.28rem 0.4rem;
    font-size: 0.72rem;
  }
  .iq-tabbar[data-placement="bottom"] .iq-tab:has(.iq-icon) > .iq-icon,
  .iq-tabbar[data-placement="sidebar"] .iq-tab:has(.iq-icon) > .iq-icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  .iq-tabbar[data-placement="bottom"] .iq-tab:has(.iq-icon) > .iq-chip,
  .iq-tabbar[data-placement="sidebar"] .iq-tab:has(.iq-icon) > .iq-chip {
    position: absolute;
    top: 0.1rem;
    left: calc(50% + 0.5rem);
  }
}

/* The floating toolbar pill docks into a full-width bar on narrow screens. */
@media (max-width: 700px) {
  .iq-toolbar {
    left: 0;
    right: 0;
    bottom: 2.4rem;
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    justify-content: center;
  }
}

/* ---- form layouts: quick-add stays a row; real forms read downward ---- */

/* Field widths in row layouts: dates and numbers stay small, prose runs. */
.iq-input[data-size="s"] { flex: 0 1 9rem; }
.iq-input[data-size="m"] { flex: 0 1 16rem; }
.iq-input[data-size="l"] { flex: 1 1 100%; }

/* Stacked form: labeled fields on a six-column grid; sizes pick spans
   (s=2, m=3, l=full). ui.form chooses this by itself for anything past a
   quick-add row. */
.iq-form[data-layout="stacked"],
.iq-fieldset-body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem 0.8rem;
  align-items: start;
}
.iq-form[data-layout="stacked"] > .iq-field,
.iq-fieldset-body > .iq-field { grid-column: span 3; }
.iq-form[data-layout="stacked"] > .iq-field[data-size="s"],
.iq-fieldset-body > .iq-field[data-size="s"] { grid-column: span 2; }
.iq-form[data-layout="stacked"] > .iq-field[data-size="l"],
.iq-fieldset-body > .iq-field[data-size="l"],
.iq-form[data-layout="stacked"] > .iq-fieldset { grid-column: 1 / -1; }
.iq-form[data-layout="stacked"] > .iq-button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) {
  .iq-form[data-layout="stacked"] > .iq-field,
  .iq-fieldset-body > .iq-field,
  .iq-form[data-layout="stacked"] > .iq-field[data-size="s"],
  .iq-fieldset-body > .iq-field[data-size="s"] { grid-column: 1 / -1; }
}

.iq-fieldset {
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  padding: 0.7rem 0.8rem 0.8rem;
  margin: 0;
  min-width: 0;
}
.iq-fieldset-legend { font-family: var(--iq-font-display); font-weight: 700; padding: 0 0.35rem; }

/* A sheet on a wide pointer screen presents as a centered dialog. */
.iq-sheet[data-presentation="center"] {
  margin: auto;
  border-radius: var(--iq-radius);
  box-shadow: 0 16px 48px rgb(20 20 19 / 0.22);
  width: min(92vw, 480px);
  max-height: 72vh;
}
.iq-sheet[data-presentation="center"] .iq-sheet-grabber { display: none; }

.iq-panel[data-presentation="sheet"] {
  width: min(100vw, 560px);
  height: auto;
  max-height: 55vh;
  margin: auto auto 0;
  border-left: none;
  border-radius: var(--iq-radius) var(--iq-radius) 0 0;
  box-shadow: 0 -8px 40px rgb(20 20 19 / 0.2);
}

.iq-popover[data-presentation="sheet"] {
  inset: auto 8px 4.5rem;
  top: auto;
  left: 8px;
  right: 8px;
  bottom: 4.5rem;
  max-width: none;
  width: auto;
  border-radius: var(--iq-radius) var(--iq-radius) 0 0;
  padding: 0.85rem 1rem 1.1rem;
}

.iq-glance {
  position: relative;
  background: var(--iq-surface);
  color: var(--iq-ink);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  padding: 0.85rem 1rem 1rem;
  box-shadow: var(--iq-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.iq-glance-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.iq-glance-icon { flex-shrink: 0; display: flex; }
.iq-glance-title {
  font-family: var(--iq-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.iq-glance-head > .iq-chip { margin-inline-start: auto; }
.iq-glance-body { display: flex; flex-direction: column; gap: 0.45rem; }
.iq-glance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
}
.iq-glance-row[role="button"] { cursor: pointer; }
.iq-glance-row-title { font-weight: 650; }
.iq-glance-row-sub { color: var(--iq-ink-soft); font-size: 0.875rem; }
.iq-glance-time { color: var(--iq-accent); font-weight: 650; font-size: 0.875rem; min-width: 4.5rem; }
.iq-glance-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}
.iq-glance-check > .iq-checkbox-input {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1.5px solid var(--iq-line);
  border-radius: 999px;
  background: var(--iq-surface);
  flex-shrink: 0;
}
.iq-glance-check > .iq-checkbox-input:checked {
  background: var(--iq-accent);
  border-color: var(--iq-accent);
}
.iq-glance-check[data-done] { color: var(--iq-ink-soft); }
.iq-glance-hero { font-family: var(--iq-font-display); font-size: 1.35rem; font-weight: 750; }
.iq-glance-add {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 999px;
  background: var(--iq-accent);
  color: var(--iq-accent-ink);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.iq-glance-add:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 54;
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  border-radius: 999px;
  background: var(--iq-accent);
  color: var(--iq-accent-ink);
  box-shadow: var(--iq-shadow);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.iq-fab:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .iq-page:has(.iq-tabbar) .iq-fab { bottom: 5.2rem; }
}
.iq-calendar-view,
.iq-gmail-view {
  min-height: 18rem;
  position: relative;
  overflow: hidden;
}

/* ---- named kit pieces (Carbon / Base UI gaps) ---- */

.iq-stack { display: flex; flex-direction: column; min-width: 0; }
.iq-stack[data-gap="s"] { gap: 0.35rem; }
.iq-stack[data-gap="m"], .iq-stack:not([data-gap]) { gap: 0.75rem; }
.iq-stack[data-gap="l"] { gap: 1.25rem; }
.iq-stack[data-align="start"] { align-items: flex-start; }
.iq-stack[data-align="center"] { align-items: center; }
.iq-stack[data-align="end"] { align-items: flex-end; }
.iq-stack[data-align="stretch"] { align-items: stretch; }
.iq-stack[data-justify="start"] { justify-content: flex-start; }
.iq-stack[data-justify="center"] { justify-content: center; }
.iq-stack[data-justify="end"] { justify-content: flex-end; }
.iq-stack[data-justify="between"] { justify-content: space-between; }

.iq-scroll {
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.iq-scroll[data-height="full"] { flex: 1; max-height: 100%; }

.iq-aspect {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.iq-aspect[data-ratio="1"] { aspect-ratio: 1; }
.iq-aspect[data-ratio="4/3"] { aspect-ratio: 4 / 3; }
.iq-aspect[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.iq-aspect[data-ratio="3/4"] { aspect-ratio: 3 / 4; }
.iq-aspect[data-ratio="2/3"] { aspect-ratio: 2 / 3; }
.iq-aspect > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.iq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  min-width: 0;
}

.iq-tree { list-style: none; margin: 0; padding: 0; }
.iq-tree-kids { list-style: none; margin: 0; padding: 0; }
.iq-tree-branch, .iq-tree-node { margin: 0; padding: 0; }
.iq-tree-summary { list-style: none; cursor: pointer; }
.iq-tree-summary::-webkit-details-marker { display: none; }
.iq-tree-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline-start: calc(0.4rem + (var(--iq-tree-depth, 0) * 0.9rem));
}
.iq-tree-label {
  font: inherit;
  font-weight: 650;
  border: none;
  background: none;
  color: inherit;
  text-align: start;
  padding: 0.28rem 0.4rem;
  border-radius: var(--iq-radius-sm);
  cursor: pointer;
  min-block-size: 2.75rem;
  flex: 1;
}
.iq-tree-label:hover { background-color: color-mix(in srgb, var(--iq-ink) 8%, transparent); }
.iq-tree-label:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: -2px; }
.iq-tree-current .iq-tree-label, .iq-tree-label[aria-selected="true"] {
  background: var(--iq-accent-soft);
  color: var(--iq-accent);
}
.iq-tree-summary::before {
  content: "▸";
  color: var(--iq-ink-soft);
  display: inline-block;
  width: 0.9rem;
}
.iq-tree-node[open] > .iq-tree-summary::before { content: "▾"; }
.iq-tree-node[data-leaf] .iq-tree-summary::before { content: ""; }
.iq-tree-row[data-swatch="1"] { border-inline-start: 3px solid var(--iq-chart-1); }
.iq-tree-row[data-swatch="2"] { border-inline-start: 3px solid var(--iq-chart-2); }
.iq-tree-row[data-swatch="3"] { border-inline-start: 3px solid var(--iq-chart-3); }
.iq-tree-row[data-swatch="4"] { border-inline-start: 3px solid var(--iq-chart-4); }
.iq-tree-row[data-swatch="5"] { border-inline-start: 3px solid var(--iq-chart-5); }
.iq-tree-row[data-swatch="6"] { border-inline-start: 3px solid var(--iq-chart-6); }

.iq-menubar { display: flex; flex-wrap: wrap; gap: 0.15rem; }

.iq-navlist { display: flex; flex-direction: column; gap: 0.15rem; }

.iq-overflow::before { content: "⋯"; }

.iq-pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.iq-page-btn {
  font: inherit;
  font-weight: 650;
  border: none;
  background: color-mix(in srgb, var(--iq-ink) 6%, transparent);
  color: var(--iq-ink);
  border-radius: var(--iq-radius-sm);
  padding: 0 0.7rem;
  min-block-size: var(--iq-control-height);
  cursor: pointer;
}
.iq-page-btn[aria-current="page"] { background: var(--iq-accent); color: var(--iq-accent-ink); }
.iq-page-btn:disabled {
  opacity: 1;
  color: var(--iq-ink-soft);
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  cursor: default;
}
.iq-page-btn:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-steps {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.iq-step { display: flex; align-items: center; gap: 0.4rem; color: var(--iq-ink-soft); }
.iq-step-index {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--iq-ink) 8%, transparent);
}
.iq-step[data-status="current"] { color: var(--iq-ink); font-weight: 700; }
.iq-step[data-status="current"] .iq-step-index { background: var(--iq-accent); color: var(--iq-accent-ink); }
.iq-step[data-status="complete"] .iq-step-index { background: var(--iq-accent-soft); color: var(--iq-accent); }

.iq-skeleton-group { display: flex; flex-direction: column; gap: 0.45rem; }

.iq-snippet {
  margin: 0;
  background: color-mix(in srgb, var(--iq-ink) 5%, transparent);
  border-radius: var(--iq-radius);
  overflow: auto;
}
.iq-snippet-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--iq-ink-soft);
  padding: 0.4rem 0.7rem 0;
}
.iq-snippet-body { margin: 0; padding: 0.7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.iq-snippet-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--iq-ink) 8%, transparent);
  border-radius: var(--iq-radius-sm);
  padding: 0.05em 0.35em;
}

.iq-link {
  font: inherit;
  font-weight: 650;
  color: var(--iq-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.iq-link:hover { color: var(--iq-accent-strong); }
.iq-link:disabled {
  opacity: 1;
  color: var(--iq-ink-soft);
  cursor: default;
}
.iq-link:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-meter { display: flex; flex-direction: column; gap: 0.3rem; min-width: 8rem; }
.iq-meter-label, .iq-meter-hint { font-size: 0.8125rem; color: var(--iq-ink-soft); }
.iq-meter-track {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--iq-accent-soft);
  overflow: hidden;
}
.iq-meter-fill {
  height: 100%;
  width: var(--iq-fill);
  border-radius: inherit;
  background: var(--iq-accent);
}

/* text-align centers words. align-items centers flex children, including an
   inline-flex wordmark that would otherwise sit on the start edge. */
.iq-empty { text-align: center; padding: 1.5rem 0.75rem; align-items: center; }
.iq-empty-title { margin: 0 0 0.35rem; font-weight: 700; }
.iq-empty-body { margin: 0; color: var(--iq-ink-soft); }
.iq-empty-action { margin-top: 0.75rem; }

.iq-callout {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: start;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--iq-surface);
  border: 1px solid var(--iq-line);
  border-radius: var(--iq-radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--iq-shadow);
}
button.iq-callout { cursor: pointer; }
.iq-callout:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-callout-title { margin: 0; font-weight: 700; }
.iq-callout-body { margin: 0; color: var(--iq-ink-soft); }
.iq-callout[data-tone="info"] { background: var(--iq-accent-soft); border-color: transparent; }
.iq-callout[data-tone="warn"] { background: rgba(185, 140, 29, 0.18); }
.iq-callout[data-tone="success"] { background: rgba(31, 122, 74, 0.14); }
@media (prefers-color-scheme: dark) {
  .iq-callout[data-tone="warn"] { color: #fbbf24; }
  .iq-callout[data-tone="success"] { color: #4ade80; }
}

.iq-status { font-size: 0.8125rem; color: var(--iq-ink-soft); }
.iq-status[data-tone="good"] { color: #1e6b41; }
.iq-status[data-tone="warn"] { color: #7d5d08; }
.iq-status[data-tone="danger"] { color: var(--iq-danger); }
.iq-status[data-tone="info"] { color: var(--iq-accent); }
@media (prefers-color-scheme: dark) {
  .iq-status[data-tone="good"] { color: #4ade80; }
  .iq-status[data-tone="warn"] { color: #fbbf24; }
}

.iq-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: none;
  padding: 0;
  border-radius: var(--iq-radius);
  background: var(--iq-surface);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.iq-cover-media, .iq-cover-image { width: 100%; height: 100%; object-fit: cover; }
.iq-cover-body {
  position: absolute;
  inset: auto 0 0;
  padding: 1.1rem 0.85rem 0.85rem;
  background: linear-gradient(transparent, rgb(20 20 19 / 0.72));
  color: #fff;
}
.iq-cover-title { margin: 0; font-family: var(--iq-font-display); font-size: 1.15rem; }
.iq-cover-sub { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.9; }
.iq-cover:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-media { display: flex; flex-direction: column; gap: 0.6rem; }
.iq-media-zoom { max-width: 16rem; }
.iq-media-grid {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, 1fr);
}
.iq-media-grid[data-size="1"] { grid-template-columns: repeat(8, 1fr); }
.iq-media-grid[data-size="2"] { grid-template-columns: repeat(6, 1fr); }
.iq-media-grid[data-size="3"] { grid-template-columns: repeat(4, 1fr); }
.iq-media-grid[data-size="4"] { grid-template-columns: repeat(3, 1fr); }
.iq-media-grid[data-size="5"] { grid-template-columns: repeat(2, 1fr); }
.iq-media-cell {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--iq-ink) 6%, transparent);
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}
.iq-media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.iq-media-duration {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: rgb(20 20 19 / 0.65);
  border-radius: var(--iq-radius-sm);
  padding: 0.05rem 0.3rem;
}
.iq-media-cell:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }

.iq-index-list { display: grid; grid-template-columns: 1fr 1.5rem; gap: 0.4rem; align-items: start; }
.iq-index-body { min-width: 0; }
.iq-index-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0.5rem;
}
.iq-index-letter {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--iq-accent);
  background: none;
  border: none;
  padding: 0.05rem;
  cursor: pointer;
}
.iq-index-letter:focus-visible { outline: 2px solid var(--iq-accent); }

.iq-preview-card { max-width: 18rem; }

.iq-thread { display: flex; flex-direction: column; gap: 0.55rem; }
.iq-message {
  max-width: 36rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--iq-radius);
  background: color-mix(in srgb, var(--iq-ink) 6%, transparent);
}
.iq-message[data-mine] { align-self: flex-end; background: var(--iq-accent-soft); }
.iq-message-from { margin: 0 0 0.15rem; font-size: 0.8125rem; font-weight: 700; }
.iq-message-text { margin: 0; }
.iq-message-time { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--iq-ink-soft); }

.iq-composer { display: flex; flex-direction: column; gap: 0.45rem; }
.iq-composer-tools { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.iq-feed {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--iq-line);
}
.iq-feed-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; }
.iq-feed-author { font-weight: 700; }
.iq-feed-handle, .iq-feed-time { color: var(--iq-ink-soft); font-size: 0.9rem; }
.iq-feed-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.iq-feed-stat {
  font: inherit;
  font-size: 0.85rem;
  color: var(--iq-ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.iq-feed-stat:disabled { cursor: default; }
.iq-feed-stat:focus-visible { outline: 2px solid var(--iq-accent); }
.iq-feed-count { margin-inline-start: 0.25rem; font-weight: 700; color: var(--iq-ink); }

.iq-checklist { display: flex; flex-direction: column; }

.iq-settings { max-width: min(46rem, calc(100vw - 2rem)); width: 46rem; }
.iq-settings-split { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; min-height: 18rem; }
.iq-settings-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.iq-settings-tab {
  font: inherit;
  text-align: start;
  border: none;
  background: none;
  color: inherit;
  padding: 0.45rem 0.65rem;
  border-radius: var(--iq-radius-sm);
  cursor: pointer;
}
.iq-settings-tab[aria-selected="true"] { background: color-mix(in srgb, var(--iq-ink) 8%, transparent); font-weight: 700; }
.iq-settings-tab:focus-visible { outline: 2px solid var(--iq-accent); }
.iq-settings-body { min-width: 0; }

@media (max-width: 699px) {
  .iq-settings-split { grid-template-columns: 1fr; }
  .iq-index-list { grid-template-columns: 1fr; }
  .iq-index-rail { flex-direction: row; flex-wrap: wrap; position: static; }
}