/* ============================================================
   شمس حلب — ui.css · the component system
   One voice for every page. Loads last, after the page sheets, and
   decides what a button, a field, a panel, a row and a table look like.
   Legacy class names from the older sheets are aliased here so the
   nineteen tool pages and the shared scripts keep working unchanged.

   Rules:
     1. One column, one scale, 4pt spacing. No value invented per page.
     2. Surfaces are white on near-white with a 1px line; no gradients,
        no glow, a shadow only on things that float (sheets, menus).
     3. Orange is the primary action, the active tab, the brand mark and
        chart fills. Nothing else is orange.
     4. Every control is at least 44px tall and says what it does.
   ============================================================ */

/* ── Ground and measure ─────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page-bg);
  background-image: none;
  color: var(--text);
  font-family: var(--font-app);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
body.deck-page { background-image: none; }
.container { width: min(100% - 2 * var(--gutter), 1040px); margin-inline: auto; padding-inline: 0; }
.container-narrow { max-width: 720px; }
.container-xs { max-width: 560px; }
.section { padding-block: var(--s-6); }
.section-sm { padding-block: var(--s-4); }
.section--tinted { background: transparent; }
main#main { padding-block-end: var(--s-8); }

/* ── Type ───────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1, .page-title { font-size: var(--t-title); line-height: var(--lh-tight); }
h2, .sub-head, .deck-heading, .section-header h2, .hub-group-title, .pg-sec-head h2, .dcard-head h2 { font-size: var(--t-headline); line-height: var(--lh-snug); }
h3, .sub-head--tight, .compare-card h3, .tip-card h3, .verdict-title, .alert-title { font-size: var(--t-body); font-weight: 700; line-height: var(--lh-snug); }
p { margin: 0; }
p + p { margin-block-start: var(--s-3); }
.lede, .page-lede, .section-header p, .hub-group-sub, .pg-sec-lead, .deck-plain { color: var(--text-muted); font-size: var(--t-body); max-width: 62ch; }
.note, .note-sm, .note-xs, .note-x, .assumption, .footer-fine, .hint, .checklist-why, .deck-source, .deck-foot, .stamp, .compare-note, .danger-note { color: var(--text-muted); font-size: var(--t-caption); line-height: 1.5; }
.assumption { max-width: 62ch; margin-block-start: var(--s-6); }
strong, b { font-weight: 700; }
a { color: var(--brand-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
::selection { background: #FEE8C8; color: var(--text); }
:root[data-theme="night"] ::selection { background: #4A3212; color: #FFF; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
/* Headings take focus only so a screen reader announces them; no ring for a programmatic move. */
[tabindex="-1"]:focus:not(:focus-visible), .wizard-panel-title[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ─────────────────────────────────────────────────── */
.navbar, .deck-page .navbar, .deck-page .navbar.is-stuck {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; box-shadow: none;
}
.navbar.is-stuck, .deck-page .navbar.is-stuck { border-bottom-color: var(--line); background: var(--nav-bg); }
.navbar-content { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.navbar-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 44px; }
.navbar-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.navbar-logo .icon { width: 20px; height: 20px; }
.navbar-title, .navbar-title b, .deck-page .navbar-title b { font-size: var(--t-body); font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.navbar-subtitle, .deck-page .navbar-subtitle { display: block; font-size: var(--t-caption); color: var(--text-muted); line-height: 1.2; }
@media (max-width: 460px) { .navbar-subtitle { display: none; } }

/* ── Tab bar ────────────────────────────────────────────────── */
.tabbar { background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: none; }
:root[data-theme="night"] .tabbar { box-shadow: none; }
.tab { color: var(--text-muted); font-weight: 500; }
.tab .icon { width: 36px; height: 36px; padding: 6px; border-radius: 10px; background: transparent; }
.tab.is-on { color: var(--brand-ink); font-weight: 700; }
.tab.is-on .icon { background: var(--brand-soft); color: var(--brand-ink); }
.tab:active .icon { transform: none; }
@media (min-width: 900px) { .tabbar { border-radius: 12px 12px 0 0; border: 1px solid var(--line); border-bottom: 0; } }

/* ── Buttons ─────────────────────────────────────────────────
   primary   the one main action           (orange, white text)
   secondary a supporting action           (white, 1px line)
   ghost     a low-priority action          (no box)
   destructive a dangerous action           (red text, red line)
   One height, one radius, one type size. */
.btn, .btn-x, .deck-primary, .preset-chip, .side-btn, .pg-edit, .onboard-close, .btn-ondark, .btn-whatsapp, .btn-outline, .btn-ghost, .btn-secondary,
#alert-go, #alert-no, .rnd, .qty-btn, .hub-clear, .link-btn, .stepper-btn, .seg button, .segmented-btn, .pager button, .obstacle-tool {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-control);
  font: inherit; font-size: var(--t-body); font-weight: 600; line-height: 1.2;
  color: var(--text); background: transparent;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon, .btn-x .icon, .deck-primary .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.btn:active, .btn-x:active, .deck-primary:active { transform: translateY(1px); }
.btn:disabled, .btn-x:disabled, [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary, .btn-x:not(.btn-x--quiet), .deck-primary, .btn-ondark, #alert-go.is-go {
  background: var(--brand-ink); border-color: var(--brand-ink); color: #FFFFFF;
}
.btn-primary:hover, .btn-x:not(.btn-x--quiet):hover, .deck-primary:hover, .btn-ondark:hover { background: var(--orange-800); border-color: var(--orange-800); color: #FFF; }
:root[data-theme="night"] .btn-primary, :root[data-theme="night"] .btn-x:not(.btn-x--quiet), :root[data-theme="night"] .deck-primary, :root[data-theme="night"] #alert-go.is-go { background: var(--orange-400); border-color: var(--orange-400); color: #17130F; }
:root[data-theme="night"] .btn-primary:hover, :root[data-theme="night"] .btn-x:not(.btn-x--quiet):hover, :root[data-theme="night"] .deck-primary:hover { background: #FB923C; border-color: #FB923C; color: #17130F; }

.btn-secondary, .btn-outline, .btn-whatsapp, .btn-x--quiet, .preset-chip, .side-btn, .pager button, .rnd, .qty-btn, .obstacle-tool, #alert-no, .onboard-close {
  background: var(--surface-raised); border-color: var(--line-strong); color: var(--text);
}
.btn-secondary:hover, .btn-outline:hover, .btn-whatsapp:hover, .btn-x--quiet:hover, .preset-chip:hover, .side-btn:hover, .pager button:hover:not(:disabled), .rnd:hover, .qty-btn:hover, .obstacle-tool:hover, #alert-no:hover { background: var(--surface-alt); border-color: var(--line-strong); }
.preset-chip.is-active, .side-btn.is-active, .obstacle-tool.is-active { border-color: var(--brand-ink); color: var(--brand-ink); background: var(--brand-soft); }

.btn-ghost, .link-btn, .pg-edit, .hub-clear { color: var(--brand-ink); background: transparent; border-color: transparent; padding-inline: var(--s-3); }
.btn-ghost:hover, .link-btn:hover, .pg-edit:hover { background: var(--brand-soft); text-decoration: none; }
.link-btn { display: inline-flex; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }

.btn-danger, .btn-destructive, #alert-go.is-danger, .rw--danger { color: var(--bad); }
.btn-danger, .btn-destructive, #alert-go.is-danger { background: var(--surface-raised); border-color: var(--red-300); }
.btn-danger:hover, .btn-destructive:hover, #alert-go.is-danger:hover { background: var(--bad-bg); }

.btn-lg, .deck-primary { min-height: 52px; padding-inline: var(--s-6); }
.btn-sm, .pg-edit, .preset-chip { min-height: 40px; font-size: var(--t-caption); }
.btn-block { width: 100%; }
.btn-x .btn-spin { display: none; }
.btn-x.is-loading .btn-label { opacity: 0.6; }
.deck-primary { flex-direction: row; text-align: start; }
.deck-primary-text { display: flex; flex-direction: column; align-items: flex-start; }
.deck-primary-title { font-size: var(--t-body); font-weight: 700; }
.deck-primary-sub { font-size: var(--t-caption); font-weight: 500; opacity: 0.9; }
.qty-btn, .rnd, .pager button { width: 44px; min-width: 44px; padding: 0; border-radius: var(--r-control); }
.rnd--plain { border-color: transparent; }
.share-row, .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ── Fields ─────────────────────────────────────────────────── */
.form-group, .field-x { margin-block-end: var(--s-5); }
.form-group--flush { margin-block-end: 0; }
.form-label, .field-x label, fieldset.form-group > legend, .group-label, .settings-label, .preset-title {
  display: block; margin-block-end: var(--s-2);
  font-size: var(--t-caption); font-weight: 600; color: var(--text); line-height: 1.3;
}
.group-label span { display: block; font-weight: 400; color: var(--text-muted); }
.form-input, .form-textarea, .input-x, .hub-search-input, select, input[type="text"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"], textarea {
  width: 100%; min-height: 48px; padding: 10px var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface-raised); color: var(--text);
  font: inherit; font-size: var(--t-body); line-height: 1.4;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
textarea, .form-textarea { min-height: 96px; resize: vertical; }
.form-input:focus, .form-textarea:focus, .input-x:focus, .hub-search-input:focus, select:focus, input:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.18); }
.form-input::placeholder, .input-x::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.8; }
.is-error .input-x, .form-input[aria-invalid="true"], .input-x[aria-invalid="true"] { border-color: var(--bad); }
.field-error, .wizard-error, #req-error { display: flex; align-items: flex-start; gap: 8px; margin-block-start: var(--s-2); color: var(--bad); font-size: var(--t-caption); font-weight: 600; }
.hint, .form-hint { margin-block-start: var(--s-2); }
.hub-search { position: relative; margin-block-end: var(--s-4); }
.hub-search-icon { position: absolute; inset-inline-start: var(--s-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.hub-search-input { padding-inline-start: 44px; }
.hub-search-count { margin-block: 0 var(--s-3); }

/* Checkbox rows */
.check-row { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0; cursor: pointer; font-size: var(--t-body); }
.check-box, input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand-ink); flex: 0 0 auto; }

/* Choice cards — one tap, one selected; a real border change, not colour alone */
.choices, .method-grid { display: grid; gap: var(--s-2); }
/* One column on a phone: two long Arabic labels side by side overflowed 320 px at the largest text size. */
.method-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .method-grid.method-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice, .method-card, .chip-x {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 56px;
  padding: var(--s-3) var(--s-4); text-align: start;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-raised); color: var(--text);
  font: inherit; font-size: var(--t-body); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.method-card { flex-direction: column; align-items: flex-start; gap: 2px; }
.method-card-title { font-weight: 700; }
.method-card-desc { font-size: var(--t-caption); color: var(--text-muted); }
.choice:hover, .method-card:hover, .chip-x:hover { background: var(--surface-alt); }
.choice[aria-checked="true"], .method-card.is-active, .chip-x[aria-checked="true"] { border-color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-ink); background: var(--surface-raised); }
.choice-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-alt); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.choice[aria-checked="true"] .choice-ic { background: var(--brand-soft); color: var(--brand-ink); }
.choice-tx { display: flex; flex-direction: column; min-width: 0; }
.choice-tx b { font-weight: 700; }
.choice-tx span { font-size: var(--t-caption); color: var(--text-muted); }
.choice-tick, .chip-mark { margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: transparent; flex: 0 0 auto; }
.choice[aria-checked="true"] .choice-tick, .chip-x[aria-checked="true"] .chip-mark { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
/* Small glyphs (tick, plus, minus) are single-colour: the duotone square behind them read as a box inside a box. */
.choice-tick .icon, .chip-mark .icon, .qty-btn .icon, .stepper-btn .icon { --icon-duo-o: 0; }
/* Night: the fill is amber, so the tick is dark, like the night primary button. */
:root[data-theme="night"] .choice[aria-checked="true"] .choice-tick, :root[data-theme="night"] .chip-x[aria-checked="true"] .chip-mark { color: #17130F; }
.method-card.is-active::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-ink); }
.chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.chip-x { flex-wrap: wrap; }
.chip-x b { flex: 1 1 auto; }
.chip-w { font-size: var(--t-caption); color: var(--text-muted); }
.chip-qty { display: none; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 6px; padding-block-start: 6px; border-top: 1px solid var(--line); }
.chip-x[aria-checked="true"] .chip-qty { display: flex; }
.qty-n { font-weight: 700; }

/* Segmented control / tabs */
.seg, .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-control); background: var(--surface-alt); }
.seg button, .segmented-btn { min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: var(--t-caption); font-weight: 600; }
.seg button[aria-pressed="true"], .segmented-btn.is-active, .segmented-btn[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 2px rgba(28,25,23,0.10); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); }
.pager-label { text-align: center; font-weight: 700; font-size: var(--t-body); }
.pager-label small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--t-caption); }

/* ── Badges, chips, alerts ──────────────────────────────────── */
.badge, .pill-x, .flag-mark, .tool-card-badge, .wx-chip, .stamp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-alt);
  color: var(--text); font-size: var(--t-caption); font-weight: 600; line-height: 1.2; box-shadow: none;
}
.badge-success, .badge-ok, .pill-ok, .tool-card-badge { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.badge-warn, .badge-warning, .badge-amber, .pill-warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.badge-danger, .pill-bad { border-color: transparent; background: var(--bad-bg); color: var(--bad); }
.badge-info { border-color: transparent; background: #E0F2FE; color: var(--sky-900); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }

.alert, .verdict, .card-x, .conn, .state-x.is-bad {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-raised); color: var(--text); box-shadow: none;
}
.alert-icon, .verdict-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--text-muted); font-weight: 700; }
.alert-clean, .verdict--info, .alert-light { border-color: var(--line); }
.alert-clean .alert-icon, .verdict--info .verdict-mark { background: var(--ok-bg); color: var(--ok); }
.alert-storm, .verdict--danger { border-color: var(--red-300); }
.alert-storm .alert-icon, .verdict--danger .verdict-mark { background: var(--bad-bg); color: var(--bad); }
.verdict--warning .verdict-mark, .alert-light .alert-icon { background: var(--warn-bg); color: var(--warn); }
.alert p, .verdict-body { color: var(--text-muted); font-size: var(--t-body); }
.conn { align-items: center; margin: 0 var(--gutter) var(--s-4); }

/* ── Panels ─────────────────────────────────────────────────
   One surface for everything that groups: white, one line, 12px.
   Never inside another panel. */
.card, .dcard, .chart-x, .compare-card, .quote-card, .tip-card, .stat-card, .result-tile, .mini-stat, .partnership-card, .deck-card, .deck-today, .est-gauge-card, .est-flow-card, .state-x, .pg-head, .kpi, .rows .rw, .faq-item, .agreement, .onboard, .profile-bar, .fairness-box, .picker-shell, .calculator-shell, .tool-aside > *, .sign-box, .spec-tile {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: none; padding: var(--s-5);
}
.card + .card, .dcard + .dcard { margin-block-start: var(--s-4); }
.card .card, .card .dcard, .dcard .card, .card .tip-card, .card .stat-card { border: 0; padding: 0; background: transparent; border-radius: 0; }
.dcard { margin: 0 0 var(--s-4); }
.dcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.pg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-8) 0 var(--s-3); }
.data-page, .data-page .kpi-grid, .rows, .chart-x, .pg-sec .rows, .est-gauge-card, .est-flow-card { margin-inline: 0; }
.data-page { padding-block: var(--s-4) var(--s-8); }
.plant { margin: 0 0 var(--s-5); }
.plant .btn-x { width: auto; }
.tile-grid, .deck-grid, .kpi-grid, .grid { display: grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Stat blocks: label, value, comparison — inside ONE panel with dividers */
.kpi-grid, .data-page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); overflow: hidden; margin-block-end: var(--s-4); }
@media (min-width: 760px) { .kpi-grid, .data-page .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi, .data-page .kpi, .kpi--lead { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: var(--s-4); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kpi:nth-child(2n) { border-inline-start: 1px solid var(--line); }
.kpi:nth-child(n+3) { border-block-start: 1px solid var(--line); }
@media (min-width: 760px) { .kpi:nth-child(n+2) { border-inline-start: 1px solid var(--line); } .kpi:nth-child(n+3) { border-block-start: 0; } }
.kpi-l, .data-page .kpi-l { flex-direction: row; align-items: center; gap: 8px; font-size: var(--t-caption); font-weight: 500; color: var(--text-muted); }
.kpi-ic { display: none; }
.kpi-l .icon { width: 18px; height: 18px; color: var(--text-muted); }
.kpi-v, .data-page .kpi-v, .kpi--lead .kpi-v { font-size: var(--t-title); font-weight: 700; line-height: 1.1; color: var(--text); margin: 0; align-self: auto; }
.kpi-v small { font-size: var(--t-caption); font-weight: 500; color: var(--text-muted); }
.kpi-d { font-size: var(--t-caption); color: var(--text-muted); white-space: normal; }
.kpi-d.is-up { color: var(--ok); } .kpi-d.is-down { color: var(--bad); }

/* Key–value rows: the tiles become quiet rows — label, note, value */
.rows { display: block; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); overflow: hidden; box-shadow: none; }
.rows .rw, .rw { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tx end"; align-items: center; gap: var(--s-2) var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-4); border: 0; border-radius: 0; background: transparent; box-shadow: none; width: 100%; text-align: start; font: inherit; color: var(--text); }
.rows .rw + .rw { border-top: 1px solid var(--line); }
.rows .rw-ic { display: none; }
.rows .rw-tx { grid-area: tx; order: 0; min-width: 0; }
.rows .rw-tx b { display: block; font-size: var(--t-body); font-weight: 500; color: var(--text); line-height: 1.3; }
.rows .rw-tx span { display: block; font-size: var(--t-caption); color: var(--text-muted); line-height: 1.4; -webkit-line-clamp: unset; overflow: visible; }
.rows .rw-end { grid-area: end; order: 0; margin: 0; display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; text-align: end; white-space: nowrap; }
.rows .rw-val { font-size: var(--t-body); font-weight: 700; color: var(--text); line-height: 1.2; }
.rows .rw-go { display: inline-flex; color: var(--text-muted); }
.rows button.rw:hover, .rows a.rw:hover { background: var(--surface-alt); }
.rows .rw--danger .rw-tx b { color: var(--bad); }
.rows .rw:last-child:nth-child(odd), .rows .rw--wide { grid-column: auto; }
.rows .rw:last-child:nth-child(odd) .rw-tx span, .rows .rw--wide .rw-tx span { -webkit-line-clamp: unset; }
@media (max-width: 380px) { .rows .rw { grid-template-columns: 1fr; grid-template-areas: "tx" "end"; } .rows .rw-end { justify-content: flex-start; } }

/* Chart panels */
.chart-x { padding: var(--s-5); margin-block-end: var(--s-4); }
.chart-x > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-3); margin-block-end: var(--s-3); }
.chart-x > header b { font-size: var(--t-body); font-weight: 700; }
.chart-x > header span { font-size: var(--t-caption); color: var(--text-muted); }
.chart-plot, .rep-plot { height: 200px; }
.chart-plot canvas, .rep-plot canvas { width: 100%; height: 100%; display: block; }
.chart-keys { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); margin-block-start: var(--s-3); font-size: var(--t-caption); color: var(--text-muted); }
.chart-keys i, .rep-stat i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; background: var(--chart-fill); }
.chart-keys .k-line { background: var(--bad); height: 3px; border-radius: 2px; }
.chart-summary { margin-block-start: var(--s-3); color: var(--text-muted); font-size: var(--t-body); }
.chart-data { margin-block-start: var(--s-2); }
.chart-data > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--brand-ink); font-weight: 600; font-size: var(--t-caption); cursor: pointer; list-style: none; }
.chart-data > summary::-webkit-details-marker { display: none; }
.chart-nodata { display: flex; align-items: center; gap: var(--s-3); min-height: 120px; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-control); color: var(--text-muted); }
.rep-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-top: 1px solid var(--line); }
.rep-stat b { display: block; font-size: var(--t-body); font-weight: 700; }
.rep-stat span { display: block; font-size: var(--t-caption); color: var(--text-muted); }

/* ── Tables ─────────────────────────────────────────────────── */
.table-container, .pg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); }
.table, .pg-table, .chart-data table, .alloc-table, .fc-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th, .pg-table th, .chart-data th, .alloc-table th, .fc-table th { text-align: start; padding: 12px var(--s-4); font-size: var(--t-caption); font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.table td, .pg-table td, .chart-data td, .alloc-table td, .fc-table td { padding: 12px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td, .pg-table tr:last-child td, .chart-data tr:last-child td, .fc-table tr:last-child td { border-bottom: 0; }
.chart-data td.num, .chart-data th.num, .fc-table td.num, .pg-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.pg-table caption, .fc-table caption { text-align: start; padding: 12px var(--s-4) 0; font-weight: 700; }
.chart-data table { border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; margin-block-start: var(--s-2); }

/* ── Accordion (FAQ, explanations) ──────────────────────────── */
.faq-item { padding: 0; margin-block-end: var(--s-2); }
.faq-question { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-3) var(--s-4); border: 0; background: none; font: inherit; font-size: var(--t-body); font-weight: 600; color: var(--text); text-align: start; cursor: pointer; }
.faq-question:hover { background: var(--surface-alt); }
.faq-chevron { margin-inline-start: auto; width: 20px; height: 20px; color: var(--text-muted); transition: transform var(--fast) var(--ease); flex: 0 0 auto; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-answer-inner { padding: 0 var(--s-4); color: var(--text-muted); font-size: var(--t-body); max-width: 62ch; }
.faq-item.is-open .faq-answer-inner { padding-block-end: var(--s-4); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); margin-block-end: var(--s-2); }
.faq details summary { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); font-weight: 600; cursor: pointer; list-style: none; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary .icon { margin-inline-start: auto; color: var(--text-muted); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 var(--s-4) var(--s-4); color: var(--text-muted); }

/* ── Page header (tool pages) ───────────────────────────────── */
.page-head { background: transparent; padding: var(--s-6) 0 var(--s-2); }
.page-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-muted); text-decoration: none; font-size: var(--t-caption); font-weight: 600; margin-block-end: var(--s-2); }
.page-back:hover { color: var(--text); }
.page-lede { margin-block-start: var(--s-2); }

/* ── The empty state, skeletons, toast ──────────────────────── */
.state-x { display: block; text-align: center; padding: var(--s-8) var(--s-5); }
.state-x h2, .state-x h3 { margin-block-end: var(--s-2); }
.state-x p { color: var(--text-muted); max-width: 44ch; margin-inline: auto; margin-block-end: var(--s-5); }
.state-x .btn-x { margin-inline: auto; }
.state-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); display: inline-flex; align-items: center; justify-content: center; margin-block-end: var(--s-3); }
.sk { background: var(--surface-alt); border-radius: 6px; animation: sk 1.2s ease-in-out infinite; }
.sk-line { height: 16px; margin-block-end: 10px; } .sk-w40 { width: 40%; } .sk-block { height: 140px; }
@keyframes sk { 50% { opacity: 0.55; } }
.toast-x, .sh-toast { position: fixed; inset-inline: var(--s-4); inset-block-end: calc(var(--tabbar-h) + var(--s-4)); z-index: 60; margin-inline: auto; width: max-content; max-width: calc(100% - 2 * var(--s-4)); padding: 12px var(--s-4); border-radius: var(--r-control); background: var(--text); color: var(--surface-raised); font-weight: 600; box-shadow: var(--shadow-md); }

/* ── Sheets and dialogs ─────────────────────────────────────── */
.sheet-scrim, .alert-scrim { background: rgba(28, 25, 23, 0.45); }
.sheet-card, .sh-sheet-card, .alert-card { background: var(--surface-raised); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.alert-card { border-radius: var(--r-card); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: var(--t-body); }
.sh-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; }
/* The grab strip is a tall invisible touch target; only its ::before pill is drawn. */
.sheet-grab { width: 100%; height: auto; background: transparent; margin: 0; }
.sheet-grab::before { background: var(--line-strong); width: 40px; height: 4px; }
.step-rail { padding: var(--s-3) var(--s-4) 0; }
.step-count { font-size: var(--t-caption); color: var(--text-muted); font-weight: 600; margin-block-end: 6px; }
.step-bar { display: flex; gap: 4px; }
.step-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.step-bar i.on { background: var(--brand-ink); }
.flow-q { padding-block-start: var(--s-4); }
.flow-q h3 { font-size: var(--t-headline); margin-block-end: var(--s-2); }
.rnd .icon, .sheet-head .icon { --icon-duo-o: 0; }
.flow-q p { color: var(--text-muted); margin-block-end: var(--s-4); }
.flow-tally { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); margin-block: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-alt); }
.step-foot { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface-raised); }
.step-foot .btn-x { flex: 1; }
.alert-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-4); }
.alert-body { padding: var(--s-5) var(--s-5) 0; }
.settings-group { margin-block-end: var(--s-5); }
.settings-hint { color: var(--text-muted); font-size: var(--t-caption); margin-block-start: var(--s-2); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); margin-block-start: var(--s-8); padding-block: var(--s-6); background: transparent; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.footer-title { display: none; }
.footer-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-muted); text-decoration: none; font-size: var(--t-caption); font-weight: 600; margin-inline-end: var(--s-4); }
.footer-link:hover { color: var(--text); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand-name { font-weight: 700; display: block; }
.footer-brand-sub, .footer-tagline { display: none; }
.footer-bottom { margin-block-start: var(--s-4); }
.footer-legal { font-size: var(--t-caption); color: var(--text-muted); }

/* ── The launcher list (home) ───────────────────────────────── */
.launch { padding-block: var(--s-8) 0; }
.launch-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.launch .hub-group { margin-block-end: var(--s-6); }
.launch .hub-group-head { margin-block-end: var(--s-2); }
.launch .hub-group-title { font-size: var(--t-body); font-weight: 700; }
.launch .hub-group-sub { font-size: var(--t-caption); }
.tile-grid { display: block; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); overflow: hidden; }
.tile-grid .tool-card { display: flex; flex-direction: row; align-items: center; gap: var(--s-3); min-height: 60px; padding: var(--s-3) var(--s-4); border: 0; border-radius: 0; background: transparent; box-shadow: none; text-decoration: none; color: var(--text); grid-template-areas: none; }
.tile-grid .tool-card + .tool-card { border-top: 1px solid var(--line); }
.tile-grid .tool-card:hover { background: var(--surface-alt); box-shadow: none; transform: none; }
.tile-grid .tool-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-alt); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tile-grid .tool-card-icon .icon { width: 22px; height: 22px; }
.tile-grid .tool-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tile-grid .tool-card-title { font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.tile-grid .tool-card-desc { font-size: var(--t-caption); color: var(--text-muted); display: block; -webkit-line-clamp: unset; overflow: visible; }
.tile-grid .tool-card-go { display: inline-flex; color: var(--text-muted); margin-inline-start: auto; }
.tile-grid .tool-card-badge { position: static; margin-inline-start: auto; }
.hub-empty { padding: var(--s-6) 0; color: var(--text-muted); }

/* ── Home opening ───────────────────────────────────────────── */
.hero-min { padding-block: var(--s-8) var(--s-6); }
.hero-min .context { color: var(--text-muted); font-size: var(--t-caption); font-weight: 600; margin-block-end: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.hero-min h1 { font-size: var(--t-large); margin-block-end: var(--s-3); max-width: 20ch; }
.hero-min .lede { margin-block-end: var(--s-5); }
.hero-min .lede strong { color: var(--text); }
.hero-min .figure { font-size: var(--t-display); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--brand-ink); margin-block-end: var(--s-2); }
.hero-min .figure small { font-size: var(--t-body); font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-inline-start: 6px; }
.hero-min .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-3); }
.deck-page .deck, .deck-inner { padding: 0; }

/* ── Motion ─────────────────────────────────────────────────── */
.sheet-x .sheet-card, .sh-sheet-card { transition: transform var(--normal) var(--ease-out); }
.faq-answer { transition-duration: var(--fast); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .navbar, .tabbar, .footer, .no-print, .btn, .btn-x { display: none !important; }
  body { background: #fff; padding: 0; }
  .card, .dcard, .rows, .chart-x { border-color: #999; break-inside: avoid; }
}

/* ── pass 2 ─────────────────────────────────────────────────── */
.hero-min .figure small { display: block; margin: 6px 0 0; }
.plant { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.plant .btn, .plant .btn-x { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 420px) { .plant { flex-direction: column; } .plant .btn { align-self: stretch; } }
.fc-table th, .fc-table td { padding: 10px 12px; }
.fc-table th { white-space: nowrap; }
.fc-table td.num { white-space: nowrap; }
/* Floors: nothing interactive under 44px, even "small" buttons and inline links. */
.btn-sm, .pg-edit, .preset-chip, .seg button, .segmented-btn { min-height: 44px; }
.footer-legal a, .checklist-item a, .note a, .lede a, .page-lede a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 360px) { .seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .rep-stats { grid-template-columns: 1fr 1fr; } }
/* The partner block is a quiet section now, not a dark band. */
.partnership { background: transparent; color: var(--text); padding-block: var(--s-8) 0; }
.partnership-name, .partnership-title { color: var(--text); }
.partnership-lede, .partnership-desc { color: var(--text-muted); }
.partnership-icon { color: var(--brand-ink); }
.partnership-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .partnership-grid { grid-template-columns: 1fr; } }
/* The entry sheet lived inside a fixed app shell; on a scrolling page it must be fixed itself. */
.sheet-x { position: fixed; inset: 0; z-index: 80; }
.sheet-card { max-height: 92vh; }
.alert-x { position: fixed; inset: 0; z-index: 90; }
/* Appliance tiles (26 Sep 2026, same language as the home grid): the
   appliance's own icon on top, name and watts under it, a tick in the corner
   when chosen, and the − n + stepper inside the tile once it is chosen. */
.chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 560px) { .chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root[data-text="xl"] .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip-x {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px;
  min-height: 136px; padding: var(--s-4) var(--s-2) var(--s-3); text-align: center; transform: none;
}
.chip-x:active { transform: none; }
.chip-ic {
  width: 52px; height: 52px; border-radius: 14px; margin-block-end: var(--s-1);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-ink); flex: 0 0 auto;
}
.chip-ic .icon { width: 28px; height: 28px; }
.chip-x > b { flex: 0 0 auto; font-weight: 600; padding: 0; line-height: 1.3; }
.chip-x .chip-mark { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; margin: 0; opacity: 1; transform: none; }
.chip-x .chip-qty { position: static; display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: var(--s-2) 0 0; margin-block-start: auto; border: 0; border-top: 1px solid var(--line); }
.chip-x[aria-checked="true"] .chip-qty { display: flex; }
.chip-x .qty-btn { position: static; width: 44px; height: 44px; min-width: 44px; border-radius: var(--r-control); transform: none; }
.chip-x .qty-n { min-width: 24px; text-align: center; font-weight: 700; }
.chip-x[aria-checked="true"] .chip-ic { background: var(--brand-ink); color: #fff; --icon-duo: #fff; --icon-duo-o: .3; }
:root[data-theme="night"] .chip-x[aria-checked="true"] .chip-ic { color: #17130F; --icon-duo: #17130F; }

/* On a wide screen the sheet is a centred panel, not a strip across the whole window. */
@media (min-width: 768px) {
  .sheet-x { align-items: center; padding: var(--s-6); }
  .sheet-card { max-width: 720px; max-height: min(88vh, 900px); border-radius: 20px; transform: translateY(24px); opacity: 0;
    transition: transform var(--panel) var(--spring), opacity var(--panel) var(--out); }
  .sheet-x.is-open .sheet-card { transform: none; opacity: 1; }
  .sheet-grab { display: none; }
}

/* The appliance breakdown is one bar, not a plot: give it the height it uses. */
#card-uses .chart-plot { height: 84px; }

/* ── Review round 1 ─────────────────────────────────────────── */
/* Orange budget: links and quiet actions are ink, underlined when they are links. */
a { color: var(--text); }
.btn-ghost, .link-btn, .pg-edit, .hub-clear, .chart-data > summary { color: var(--text-muted); }
.btn-ghost:hover, .link-btn:hover, .pg-edit:hover, .chart-data > summary:hover { color: var(--text); background: var(--surface-alt); }
.pg-edit { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.tile-grid .tool-card-icon, .tip-icon, .choice-ic { color: var(--text-muted); }
.tile-grid .tool-card-badge { background: transparent; border: 0; padding: 0; color: var(--ok); font-weight: 600; }
.footer-legal a { color: var(--text-muted); }
/* One container, never two: a rows-list, a table or a stat inside a panel loses its own frame. */
.card .rows, .dcard .rows, .card .table-container, .dcard .table-container, .tool-aside .mini-stat, .card .mini-stat, .mini-stats .mini-stat, .card .result-tile, .card .compare-tile, .card .stat-card, .card .kpi-grid, .card .choice, .card .method-card {
  border-radius: 0; border: 0; box-shadow: none; padding-inline: 0; background: transparent;
}
.card .choice, .card .method-card { border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: var(--s-3) var(--s-4); }
.dcard .rows .rw, .card .rows .rw { padding-inline: 0; }
.mini-stats { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); overflow: hidden; }
.mini-stats .mini-stat { padding: var(--s-4); }
.mini-stats .mini-stat + .mini-stat { border-top: 1px solid var(--line); }
form.card#fq, .card#my-cases { border: 0; padding: 0; background: transparent; }
.tip-card { display: flex; gap: var(--s-3); align-items: flex-start; }
.tip-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0; }
/* The closing action is the page's one primary button. */
.next-step { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-raised); }
.next-step .btn { align-self: flex-start; }
/* Section jump-list: details on request. */
.jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--text); text-decoration: none; font-size: var(--t-caption); font-weight: 600; }
.jump a:hover { background: var(--surface-alt); }
.pg-sec { scroll-margin-block-start: 76px; }
/* Desktop: the data page centres like every other page and uses its width. */
.container.data-page { margin-inline: auto; max-width: 780px; }
@media (min-width: 1024px) {
  /* One reading column on desktop too — the settings-page rhythm of the
     references; two auto-balanced columns left empty wells beside short
     sections. The stat panel alone goes four-up. */
  .container.data-page { max-width: 820px; }
  .kpi-grid, .data-page .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-sec-head { padding-block-start: var(--s-6); }
}
.hero-min .context.note { margin: var(--s-3) 0 var(--s-2); font-weight: 500; }
.fc-table td, .fc-table th { white-space: nowrap; }

.method-card-title .icon, .method-card .icon { color: var(--text-muted); }
.pg-sec-lead a, .lede a, .note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── Paid services ──────────────────────────────────────────── */
.choice-price { margin-inline-start: auto; font-weight: 700; font-size: var(--t-body); color: var(--text); white-space: nowrap; padding-inline-start: var(--s-3); }
.choice[aria-checked="true"] .choice-price { color: var(--brand-ink); }
.fee { margin-block: var(--s-5); padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-alt); }
.fee-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-2); }
.fee-name { font-weight: 700; }
.fee-price { font-size: var(--t-headline); font-weight: 700; }
.fee .note { margin-block-end: var(--s-2); }
.fee .check-row { margin-block-start: var(--s-2); padding-block-start: var(--s-3); border-top: 1px solid var(--line); }
/* Status page */
.status-steps { list-style: none; margin: 0; padding: 0; }
.status-steps li { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; color: var(--text-muted); }
.status-steps li + li { border-top: 1px solid var(--line); }
.status-steps .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.status-steps li.is-done { color: var(--text); }
.status-steps li.is-done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.status-steps li.is-now { color: var(--text); font-weight: 700; }
.status-steps li.is-now .dot { border-color: var(--brand-ink); box-shadow: inset 0 0 0 4px var(--surface-raised); background: var(--brand-ink); }
.stars { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.stars label { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-raised); font-weight: 700; cursor: pointer; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars input:checked + span { color: var(--brand-ink); }
.stars label:has(input:checked) { border-color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-ink); }
.stars label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Disclosure summaries are controls: full target height. */
details > summary.note-sm, details > summary.note { display: flex; align-items: center; min-height: 44px; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   The original orange (user decision, 10 Sep 2026)
   Every screen opens on the gradient of the first design, with white text
   and glass cards on it, exactly as sun.amanhalab.com does. The content
   below stays white and calm.
   ═══════════════════════════════════════════════════════════════ */
:root { --icon-duo: var(--orange-500); --icon-duo-o: 0.28; --band-glass: rgba(255, 255, 255, 0.16); --band-glass-line: rgba(255, 255, 255, 0.34); }

/* The brand mark: an orange circle with a white sun, as the original. */
.navbar-logo { border-radius: 50%; background: var(--sun-grad); }
.navbar-logo .icon { --icon-duo: #fff; --icon-duo-o: .35; }

/* Primary: the brand orange, white bold text. */
.btn-primary, .btn-x:not(.btn-x--quiet), .deck-primary, #alert-go.is-go { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; font-weight: 700; }
.btn-primary:hover, .btn-x:not(.btn-x--quiet):hover, .deck-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn-primary .icon, .btn-x:not(.btn-x--quiet) .icon, .tab.is-on .icon { --icon-duo: currentColor; --icon-duo-o: .3; }
.tab.is-on .icon { background: var(--brand-soft); color: var(--btn-primary); }
.tab.is-on { color: var(--btn-primary); }

/* ── The band ───────────────────────────────────────────────── */
.band-sun, .page-head.band-sun {
  background: var(--sun-grad);
  color: var(--on-sun);
  padding-block: var(--s-6) var(--s-8);
  margin: 0;
}
.band-sun h1, .band-sun h2, .band-sun h3, .band-sun .page-title, .band-sun p, .band-sun .page-lede, .band-sun .lede,
.band-sun .note, .band-sun .stamp, .band-sun .page-back, .band-sun .plant-sub, .band-sun b, .band-sun strong, .band-sun a:not(.btn) {
  color: var(--on-sun);
  text-shadow: 0 1px 2px rgba(124, 45, 18, 0.28);
}
.band-sun .page-title, .band-sun h1 { font-weight: 800; }
.band-sun .page-lede, .band-sun .lede, .band-sun p { font-weight: 600; }
.band-sun .page-back { opacity: 1; font-weight: 700; }
.band-sun .page-back:hover { text-decoration: underline; }
.band-sun .icon { --icon-duo: #fff; --icon-duo-o: .35; }
.band-sun a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.band-sun .live-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* The glass card of the original. */
.glass, .band-sun .state-x {
  background: var(--band-glass);
  border: 1px solid var(--band-glass-line);
  border-radius: 16px;
  padding: var(--s-5);
  color: var(--on-sun);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.band-sun .state-x h2, .band-sun .state-x h3, .band-sun .state-x p { color: var(--on-sun); }

/* The white button with orange text, and the glass ghost — the two buttons of the original hero. */
.btn-on-sun, .band-sun .btn-primary, .band-sun .btn-x:not(.btn-x--quiet) {
  background: #fff; border-color: #fff; color: var(--btn-primary); font-weight: 800; text-shadow: none;
  box-shadow: 0 4px 14px rgba(124, 45, 18, 0.18);
}
.btn-on-sun:hover, .band-sun .btn-primary:hover, .band-sun .btn-x:not(.btn-x--quiet):hover { background: #FFF7ED; border-color: #FFF7ED; color: var(--btn-primary-hover); }
.btn-on-sun .icon { --icon-duo: var(--btn-primary); }
.btn-glass, .band-sun .btn-secondary, .band-sun .btn-x--quiet {
  background: var(--band-glass); border-color: var(--band-glass-line); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(124,45,18,.28);
}
.btn-glass:hover, .band-sun .btn-secondary:hover, .band-sun .btn-x--quiet:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); }

/* The sun ring from the first design: orange ring, white centre, the number. */
.sun-ring {
  --p: 0;
  position: relative; flex: 0 0 auto;
  width: 132px; height: 132px; border-radius: 50%;
  background: conic-gradient(var(--btn-primary) calc(var(--p) * 1%), rgba(255,255,255,.45) 0);
  display: grid; place-items: center;
}
.sun-ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.sun-ring > span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sun-ring b { font-size: 34px; font-weight: 800; color: var(--btn-primary); text-shadow: none; font-variant-numeric: tabular-nums; }
.sun-ring small { font-size: 16px; font-weight: 700; color: var(--btn-primary); text-shadow: none; margin-block-start: 2px; }

/* Home */
.band-home { padding-block: var(--s-6) var(--s-10); }
.band-home h1 { font-size: var(--t-large); line-height: var(--lh-tight); margin-block: var(--s-2) var(--s-5); max-width: 20ch; }
.band-date { font-size: var(--t-caption); font-weight: 700; margin: 0; }
.hero-glass { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-block-end: var(--s-5); }
.hero-glass .glass-body { flex: 1 1 200px; min-width: 0; }
.hero-glass .glass-label { display: flex; align-items: center; gap: 8px; font-size: var(--t-body); font-weight: 700; margin: 0 0 var(--s-2); }
.hero-glass .glass-figure { font-size: var(--t-display); font-weight: 800; line-height: 1; margin: 0; letter-spacing: -0.02em; }
.hero-glass .glass-figure small { display: block; font-size: var(--t-body); font-weight: 700; letter-spacing: 0; margin-block-start: 6px; }
.hero-glass .glass-body p + p { margin-block-start: var(--s-2); }
.band-home .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-end: var(--s-4); }
.band-home .actions .btn { flex: 1 1 200px; }
.band-home .note { font-weight: 600; }
@media (max-width: 420px) { .hero-glass { flex-direction: column; align-items: stretch; text-align: center; } .sun-ring { margin-inline: auto; } .hero-glass .glass-label { justify-content: center; } }

/* بياناتي on the band: the four stats in glass. */
.band-data { padding-block: var(--s-5) var(--s-6); }
.band-data .plant { margin: 0 0 var(--s-3); }
.band-data .plant h1 { font-size: var(--t-title); }
.band-data .stamp { margin: 0 0 var(--s-4); }
.band-data .stamp span { color: #fff; }
.band-sun .kpi-grid { background: var(--band-glass); border-color: var(--band-glass-line); margin: 0; }
.band-sun .kpi { border-color: var(--band-glass-line) !important; }
.band-sun .kpi-l, .band-sun .kpi-v, .band-sun .kpi-v small, .band-sun .kpi-d, .band-sun .kpi-d.is-up, .band-sun .kpi-d.is-down, .band-sun .kpi--lead .kpi-v { color: #fff; text-shadow: 0 1px 2px rgba(124,45,18,.28); }
.band-sun .kpi-l .icon { color: #fff; }
.data-page { padding-block-start: var(--s-5); }

/* Tool pages: back link, title and lede on the band. */
.page-head.band-sun { padding-block: var(--s-4) var(--s-8); }
.page-head.band-sun + .section { padding-block-start: var(--s-6); }

/* Night: the ember gradient, same structure. */
:root[data-theme="night"] .sun-ring::before { background: #1A1816; }
:root[data-theme="night"] .btn-on-sun, :root[data-theme="night"] .band-sun .btn-primary { background: #1A1816; border-color: #1A1816; color: #FB923C; }

.container.data-band { max-width: 780px; margin-inline: auto; }
@media (min-width: 1024px) { .container.data-band { max-width: 820px; } }
.band-data .state-x .btn-x { margin-inline: auto; }
.band-home h1 { margin-block: var(--s-2) var(--s-1); }
.band-lede { font-size: var(--t-headline); font-weight: 700; line-height: var(--lh-snug); margin: 0 0 var(--s-5); }

.hub-search .hub-search-input { padding-inline-start: 48px; }
/* White on #EA580C is 3.56 : 1 — large text only. So the orange buttons set
   their label at 19px bold (WCAG large text), and the active tab's word uses
   the text-safe orange. */
.btn-primary, .btn-x:not(.btn-x--quiet), .deck-primary, #alert-go.is-go { font-size: max(19px, var(--t-body)); font-weight: 700; }
.tab.is-on { color: var(--brand-ink); }

/* #EA580C on white is also 3.56 : 1 — the white band button is large text too. */
.btn-on-sun, .band-sun .btn-primary, .band-sun .btn-x:not(.btn-x--quiet) { font-size: max(19px, var(--t-body)); font-weight: 700; }
/* The ring follows the reader's text size. */
.sun-ring { width: calc(132px * var(--type-scale)); height: calc(132px * var(--type-scale)); }
.sun-ring::before { inset: calc(16px * var(--type-scale)); }
.sun-ring b { font-size: calc(34px * var(--type-scale)); }
.sun-ring small { font-size: var(--t-caption); }
.band-sun .page-title, .band-sun h1 { font-weight: 700; }

/* ═══════════════ Home v3 — the Alipay-style launcher (25 Sep 2026) ═══════════════
   Owner brief: organised, icon ABOVE its word (not in a row beside it), the
   four main jobs on the orange band, everything else one tap away in a grid.
   Floors kept: 16 px type minimum, targets ≥ 48 px, icon always with its word. */

.band-home { padding-block: var(--s-4) calc(var(--s-10) + var(--s-4)); }
.band-home .band-date { margin: 0; font-size: var(--t-caption); }
.band-home h1 { font-size: var(--t-title); margin-block: var(--s-1) var(--s-5); max-width: none; }

/* The four big jobs: glass square, white icon, white word under it. */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  min-height: 96px; padding: var(--s-2) 2px; border-radius: 16px;
  color: #fff; text-decoration: none !important; text-align: center;
  transition: background-color var(--fast) var(--ease);
}
.quick-item:hover { background: rgba(255, 255, 255, 0.12); }
.quick-item:active { background: rgba(255, 255, 255, 0.2); }
.quick-item:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.quick-ic {
  width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--band-glass); border: 1px solid var(--band-glass-line);
}
.quick-ic .icon { width: 34px; height: 34px; color: #fff; --icon-duo: #fff; --icon-duo-o: .3; }
.quick-label { font-size: var(--t-caption); font-weight: 700; line-height: 1.25; color: #fff; text-shadow: 0 1px 2px rgba(124, 45, 18, 0.35); }

/* The body rises over the band's lower edge, like a sheet. */
.home-body { position: relative; margin-block-start: calc(-1 * var(--s-10)); padding-block-end: var(--s-8); }

.today-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(124, 45, 18, 0.10);
  color: var(--text); text-decoration: none;
}
.today-card:hover { border-color: var(--line-strong); }
.today-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.today-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.today-tx b { font-size: var(--t-body); font-weight: 700; }
.today-tx > span { font-size: var(--t-caption); color: var(--text-muted); }
.today-tx .num[dir="ltr"] { color: var(--text); font-weight: 700; }
.today-go { color: var(--text-muted); display: inline-flex; flex: 0 0 auto; }

/* Search: one clear field, icon inside. */
.launch { padding-block: var(--s-5) 0; }
.launch .hub-search { position: relative; margin-block: 0 var(--s-4); }
.launch .hub-search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: inline-flex; pointer-events: none; }
.launch .hub-search-input { width: 100%; min-height: 52px; padding-inline: 46px 14px; border-radius: 14px; font-size: var(--t-body); }
.hub-ready-note { display: flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--text-muted); margin-block: 0 var(--s-3); }
.hub-ready-note .icon { color: var(--ok); --icon-duo-o: 0; }

/* Each group is one white card: title, then the grid. */
.app-group {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--s-4) var(--s-2) var(--s-2); margin-block-end: var(--s-4);
}
.app-group .hub-group-title { font-size: var(--t-body); font-weight: 700; margin: 0 var(--s-2) var(--s-2); }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }

/* A tile: icon square on top, the word under it, centred. */
.app-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--s-2);
  min-height: 104px; padding: var(--s-3) 2px var(--s-2); border-radius: 14px;
  color: var(--text); text-decoration: none; text-align: center;
  transition: background-color var(--fast) var(--ease);
}
.app-grid .app-tile { border: 0; box-shadow: none; background: transparent; transform: none; }
.app-grid .app-tile:hover { background: var(--surface-alt); border: 0; box-shadow: none; transform: none; }
.app-grid .app-tile:active { background: var(--brand-soft); transform: none; }
.app-ic {
  position: relative; width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-ink); flex: 0 0 auto;
}
.app-ic .icon { width: 30px; height: 30px; }
.app-label { font-size: var(--t-caption); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

/* «جاهز»: a green tick on the icon's corner, spoken as a word. */
.app-tile .tool-card-badge {
  position: absolute; inset-block-start: 6px; inset-inline-end: calc(50% - 38px);
  width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--surface-raised);
  background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.app-tile .tool-card-badge .icon { width: 12px; height: 12px; --icon-duo-o: 0; }

.home-foot { font-size: var(--t-caption); color: var(--text-muted); margin-block-start: var(--s-6); max-width: 62ch; }

/* Narrow phones and big text: three across, so no word is squeezed. */
@media (max-width: 359px) {
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-ic { width: 56px; height: 56px; }
}
:root[data-text="l"] .app-grid, :root[data-text="xl"] .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-text="xl"] .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-text="xl"] .quick-item { flex-direction: row; justify-content: flex-start; min-height: 72px; padding-inline: var(--s-2); text-align: start; }
@media (min-width: 640px) { .app-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

:root[data-theme="night"] .today-card { box-shadow: none; }
:root[data-theme="night"] .app-tile .tool-card-badge { color: #17130F; }

/* Sheet steps 2–3: the question labels line up with the fields and cards under
   them, and on a wide panel the answer cards sit two across so the tick stays
   next to its words instead of 600 px away. */
.sheet-x .group-label { margin-inline: var(--gutter); margin-block-start: var(--s-5); }
@media (min-width: 560px) { .sheet-x .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root[data-text="xl"] .sheet-x .choices { grid-template-columns: 1fr; }

/* ═══════════════ Home v4 — one screen, no page scroll (owner, 26 Sep 2026) ═══════════════
   The body is exactly the viewport. Header and band keep their height; the
   tool grid takes whatever is left above the tab bar and stretches its rows
   to fill it. If a phone is too short (or the text is XL) only <main>
   scrolls — nothing is ever clipped or shrunk under the 16 px floor. */
body.is-home {
  height: 100vh; height: 100dvh; padding-block-end: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.is-home > .navbar { flex: 0 0 auto; }
body.is-home > .footer { display: none; }
body.is-home > main, body.is-home > main#main {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body.is-home .band-home { flex: 0 0 auto; padding-block: var(--s-3) var(--s-3); }
.home-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); }
body.is-home .band-home h1 { font-size: var(--t-headline); margin: 0; }
body.is-home .band-home .band-date { margin: 0; font-size: var(--t-caption); opacity: .95; white-space: nowrap; }
body.is-home .quick-item { min-height: 0; padding-block: var(--s-1); }
body.is-home .quick-ic { width: 56px; height: 56px; border-radius: 18px; }
body.is-home .quick-ic .icon { width: 30px; height: 30px; }

.today-pill {
  display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3);
  min-height: 48px; padding: var(--s-2) var(--s-3); border-radius: 14px;
  background: var(--band-glass); border: 1px solid var(--band-glass-line);
  color: #fff; font-size: var(--t-caption); font-weight: 700; line-height: 1.35;
  text-decoration: none !important; text-shadow: 0 1px 2px rgba(124, 45, 18, 0.35);
}
.today-pill .icon { flex: 0 0 auto; width: 22px; height: 22px; }
.today-pill .today-a { flex: 1 1 auto; min-width: 0; }
.today-pill .today-b { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
/* Phones: the slogan row goes (the brand is in the header; the h1 stays for screen readers). */
@media (max-width: 599px) {
  body.is-home .home-top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.is-home .home-top { display: none; }
}
@media (max-height: 700px) { body.is-home .today-pill { display: none; } }
.today-pill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

body.is-home .home-body {
  flex: 1 1 auto; min-height: auto; display: flex; flex-direction: column;
  margin: 0 auto; padding-block: var(--s-3) var(--s-2); width: 100%;
}
body.is-home .launch .hub-search { flex: 0 0 auto; margin-block-end: var(--s-2); }
body.is-home .launch .hub-search-input { min-height: 48px; }
.app-flat { flex: 1 1 auto; display: flex; }
body.is-home .app-grid {
  flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(68px, 1fr); gap: 2px var(--s-1); align-content: start;
}
body.is-home .app-tile { min-height: 68px; justify-content: center; gap: 4px; padding: 4px 0; }
body.is-home .app-ic { width: 44px; height: 44px; border-radius: 13px; }
body.is-home .app-ic .icon { width: 26px; height: 26px; }
body.is-home .app-label { white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
body.is-home .app-tile .tool-card-badge { inset-block-start: 2px; inset-inline-end: calc(50% - 32px); width: 20px; height: 20px; }
@media (min-width: 640px) { body.is-home .app-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(68px, 120px); } }
/* Tall phones: the rows share the spare height, but never balloon. */
body.is-home .app-grid { max-height: 620px; }
@media (min-width: 1024px) { body.is-home .app-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-height: 760px) {
  body.is-home .app-grid { grid-auto-rows: minmax(62px, 1fr); }
  body.is-home .app-tile { min-height: 62px; }
  body.is-home .app-ic { width: 40px; height: 40px; }
}
/* Short screens: drop the title row (the brand is in the header), keep everything else. */
@media (max-height: 700px) {
  body.is-home .home-top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.is-home .home-top { margin-block-end: var(--s-2); }
  body.is-home .quick-ic { width: 50px; height: 50px; }
}
/* Large text: labels may need two lines and three columns. */
:root[data-text="xl"] body.is-home .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-text="xl"] body.is-home .app-label { white-space: normal; }

/* ═══════════════ Feel: instant, smooth, calm ═══════════════ */
html { -webkit-tap-highlight-color: transparent; }
body { touch-action: manipulation; }
.app-ic, .quick-ic, .tab .icon { transition: transform 140ms var(--ease), background-color 140ms var(--ease); will-change: transform; }
.app-tile:active .app-ic, .quick-item:active .quick-ic { transform: scale(0.92); }
@media (hover: hover) {
  .app-tile:hover .app-ic { transform: translateY(-2px); }
}
/* Page-to-page: a short cross-fade instead of a white flash; the header and
   tab bar stay put while the content changes (Chrome/Edge/Safari 18+). */
@view-transition { navigation: auto; }
.navbar { view-transition-name: site-header; }
.tabbar { view-transition-name: site-tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .app-tile:active .app-ic, .quick-item:active .quick-ic, .app-tile:hover .app-ic { transform: none; }
}

/* Home v4 — order-sensitive overrides (must stay last). */
@media (min-width: 900px) { body.is-home .app-grid { grid-auto-rows: minmax(68px, 100px); } }
@media (max-height: 760px) and (max-width: 599px) {
  body.is-home .app-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  body.is-home .app-tile { padding: 2px 0; gap: 3px; }
}
:root[data-text="xl"] body.is-home .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-text="l"] body.is-home .app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root[data-text="l"] body.is-home .app-tile { padding: 1px 0; gap: 2px; }
:root[data-text="l"] body.is-home .app-grid { gap: 0 var(--s-1); }
body.is-home .launch .hub-search { width: 100%; max-width: none; }
body.is-home .launch .hub-search-input { width: 100%; max-width: none; }