/* ---------------------------------------------------------------------------
   Theme: the AstroSelf scheme - deep navy, gold and warm paper - in light and
   dark, for the application screens.

   Loaded after app.css (and public.css on the open pages) by the screen
   layouts only. The printed and downloaded proposal documents link app.css on
   its own, so they keep the company letterhead colours and never turn dark.

   The chart colours (--sun, --battery, --grid, --load, --genset) are left
   alone: they carry meaning across every chart and report.

   Headings ask for Playfair Display and body text for Noto Sans, falling back
   to fonts every system has. Nothing is fetched from a CDN, so a machine
   without them still renders cleanly.
   --------------------------------------------------------------------------- */

:root {
  --navy: #14223d;
  --navy-2: #22365c;
  --gold: #d4b46e;
  --gold-ink: #7a5a1f;
  --gold-soft: #efe2c4;
  --rose-ink: #8a4634;
  --rose-soft: #f6e4dc;

  --bg: #f6f1e7;
  --surface: #fffdf8;
  --surface-2: #faf6ee;
  --border: #e4dac6;
  --border-strong: #cdbf9f;
  --text: #14223d;
  --muted: #59606f;
  --faint: #857f72;

  --brand: #14223d;
  --brand-dark: #0c1528;
  --brand-light: #efe2c4;

  --ok: #1f7a52;
  --ok-light: #e2f1e8;
  --warn: #8f5f00;
  --warn-light: #f7ebcf;
  --bad: #b42318;
  --bad-light: #fbe7e4;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,34,61,.05), 0 2px 6px rgba(20,34,61,.04);
  --shadow-lg: 0 6px 24px rgba(20,34,61,.10);

  --serif: "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The public pages' own tokens, mapped onto the same scheme. */
  --pub-ink: #14223d;
  --pub-body: #4b5262;
  --pub-soft: #7c7769;
  --pub-page: #f6f1e7;
  --pub-card: #fffdf8;
  --pub-line: #e4dac6;
  --pub-line-soft: #efe7d6;

  color-scheme: light;
}

/* Dark: chosen explicitly, or following the system when nothing was chosen. */
:root[data-theme="dark"] {
  --bg: #0c1528;
  --surface: #142139;
  --surface-2: #101b31;
  --border: #26365a;
  --border-strong: #34486f;
  --text: #f3ede0;
  --muted: #aeb6c6;
  --faint: #8590a6;
  --brand: #d4b46e;
  --brand-dark: #e6c27a;
  --brand-light: #2f2a1f;
  --gold-ink: #d4b46e;
  --gold-soft: #2f2a1f;
  --rose-ink: #e3a58f;
  --rose-soft: #3a241e;
  --ok: #6fd3a2;
  --ok-light: #12392b;
  --warn: #e6c27a;
  --warn-light: #3a2e12;
  --bad: #ff8a7a;
  --bad-light: #3d1d1a;
  --sun-light: #3a2e12;
  --grid-light: #1b2b52;
  --battery-light: #3a241e;
  --genset-light: #1e2a3d;
  --pub-ink: #f3ede0;
  --pub-body: #c9cfdb;
  --pub-soft: #8f99ad;
  --pub-page: #0c1528;
  --pub-card: #142139;
  --pub-line: #26365a;
  --pub-line-soft: #1b2b48;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1528;
    --surface: #142139;
    --surface-2: #101b31;
    --border: #26365a;
    --border-strong: #34486f;
    --text: #f3ede0;
    --muted: #aeb6c6;
    --faint: #8590a6;
    --brand: #d4b46e;
    --brand-dark: #e6c27a;
    --brand-light: #2f2a1f;
    --gold-ink: #d4b46e;
    --gold-soft: #2f2a1f;
    --rose-ink: #e3a58f;
    --rose-soft: #3a241e;
    --ok: #6fd3a2;
    --ok-light: #12392b;
    --warn: #e6c27a;
    --warn-light: #3a2e12;
    --bad: #ff8a7a;
    --bad-light: #3d1d1a;
    --sun-light: #3a2e12;
    --grid-light: #1b2b52;
    --battery-light: #3a241e;
    --genset-light: #1e2a3d;
    --pub-ink: #f3ede0;
    --pub-body: #c9cfdb;
    --pub-soft: #8f99ad;
    --pub-page: #0c1528;
    --pub-card: #142139;
    --pub-line: #26365a;
    --pub-line-soft: #1b2b48;
    color-scheme: dark;
  }
}

/* ---- Type ------------------------------------------------------------- */

body { font-family: var(--sans); background: var(--bg); color: var(--text); }
h1, h2, .topbar h1, .pub h1, .pub h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 1.6rem; }
a { color: var(--brand); }
/* Plain links turn gold in dark mode. :where() keeps this at the weight of a
   bare "a" rule, so buttons and menu items that set their own colour keep it. */
:where(:root[data-theme="dark"]) a:where(:not(.btn)) { color: var(--gold); }

/* ---- Chrome: navy sidebar and bar, gold for what is active -------------- */

.sidebar {
  background: radial-gradient(120% 140% at 80% 0%, var(--navy-2) 0%, var(--navy) 60%);
  color: rgba(255,255,255,.82);
}
.sidebar-logo { background: #fffdf8; border-radius: 0 0 12px 12px; }
.sidebar-brand span, .sidebar-foot .role, .locale-picker label { color: rgba(212,180,110,.85); }
.sidebar nav .group { color: var(--gold); opacity: .85; }
.sidebar nav a { color: rgba(255,255,255,.82); border-radius: 999px; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.active { background: var(--gold); color: var(--navy); font-weight: 600; }
.sidebar-legal a { color: rgba(255,255,255,.5); }

.topbar {
  background: radial-gradient(120% 140% at 80% 0%, var(--navy-2) 0%, var(--navy) 60%);
  color: #fff;
  border-bottom: 1px solid rgba(212,180,110,.25);
}
.topbar h1 { color: #fff; }
.topbar .crumbs, .topbar .crumbs a { color: rgba(212,180,110,.9); }
.topbar .actions .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.topbar .actions .btn:hover { background: rgba(255,255,255,.16); }
.topbar .actions .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.nav-toggle span { background: #fff; }

/* ---- Surfaces --------------------------------------------------------- */

.card, .stat, table, .table-wrap, .pagination a, .pagination span,
input, select, textarea, .btn.danger { background-color: var(--surface); color: var(--text); }
.card { border-radius: var(--radius); }
.locale-picker select option { background: var(--surface); color: var(--text); }
.sv-face { fill: var(--surface); }

/* ---- Buttons: gold primary, quiet outline otherwise -------------------- */

.btn { border-radius: 999px; background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn.primary:hover { background: #c9a75c; border-color: #c9a75c; }
.pagination .active span { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* Alerts and badges keep their meaning; dark mode needs their text lifted. */
:root[data-theme="dark"] .alert.ok, :root[data-theme="dark"] .alert.bad,
:root[data-theme="dark"] .alert.warn, :root[data-theme="dark"] .alert.info { color: var(--text); border-color: var(--border); }
/* --brand is gold in dark mode, so what sits on it needs navy text. */
:root[data-theme="dark"] .bot-launch, :root[data-theme="dark"] .bot.is-open .bot-launch { color: var(--navy); }
:root[data-theme="dark"] .link-danger { color: #f08a7e; }
/* Text that sits on colours which change in dark mode: selected chips and
   step numbers (on --pub-ink, pale in dark), numbered tabs, and badges whose
   text colours are fixed dark shades. */
:root[data-theme="dark"] .pub-chip:has(input:checked), :root[data-theme="dark"] .est-n { background: var(--gold); border-color: var(--gold); color: var(--navy); }
:root[data-theme="dark"] .tabs a.active .tab-n { color: var(--navy); }
:root[data-theme="dark"] .badge.sun { color: #f2c46b; }
:root[data-theme="dark"] .badge.info, :root[data-theme="dark"] .temp-cold { color: #9cc2ff; }
:root[data-theme="dark"] .bot-msg.is-user .bot-bubble, :root[data-theme="dark"] .bot-form button { color: var(--navy); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) a:where(:not(.btn)) { color: var(--gold); }
  :root:not([data-theme="light"]) .alert.ok, :root:not([data-theme="light"]) .alert.bad,
  :root:not([data-theme="light"]) .alert.warn, :root:not([data-theme="light"]) .alert.info { color: var(--text); border-color: var(--border); }
  :root:not([data-theme="light"]) .bot-launch, :root:not([data-theme="light"]) .bot.is-open .bot-launch { color: var(--navy); }
  :root:not([data-theme="light"]) .link-danger { color: #f08a7e; }
  /* Text that sits on colours which change in dark mode: selected chips and
     step numbers (on --pub-ink, pale in dark), numbered tabs, and badges whose
     text colours are fixed dark shades. */
  :root:not([data-theme="light"]) .pub-chip:has(input:checked), :root:not([data-theme="light"]) .est-n { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  :root:not([data-theme="light"]) .tabs a.active .tab-n { color: var(--navy); }
  :root:not([data-theme="light"]) .badge.sun { color: #f2c46b; }
  :root:not([data-theme="light"]) .badge.info, :root:not([data-theme="light"]) .temp-cold { color: #9cc2ff; }
  :root:not([data-theme="light"]) .bot-msg.is-user .bot-bubble, :root:not([data-theme="light"]) .bot-form button { color: var(--navy); }
}

/* ---- Colour where it helps: a gold rule under each card heading -------- */

.card-head, .card > h2:first-child { border-bottom: 2px solid var(--gold-soft); }

/* ---- Theme switch: Light / Dark / System, as on AstroSelf -------------- */

.theme-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
}
.theme-switch button {
  border: 0; background: transparent; color: rgba(255,255,255,.75);
  width: 28px; height: 26px; border-radius: 999px; cursor: pointer; font-size: .85rem; line-height: 1;
}
.theme-switch button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.pub .theme-switch { background: var(--pub-card); border-color: var(--pub-line); }
.pub .theme-switch button { color: var(--pub-body); }
.pub .theme-switch button[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }

/* ---- Public pages ------------------------------------------------------ */

.pub-head { background: radial-gradient(120% 140% at 80% 0%, var(--navy-2) 0%, var(--navy) 60%); border-bottom-color: rgba(212,180,110,.25); }
.pub-head .pub-nav a { color: rgba(255,255,255,.85); }
/* public.css gives hovered and current links the pale card colour; on the navy
   bar that sits under gold text, so use a light wash instead. */
.pub-head .pub-nav a.on, .pub-head .pub-nav a:hover { background: rgba(255,255,255,.12); color: var(--gold); }
.pub-head .pub-nav a.pub-cta, .pub-head .pub-nav a.pub-start { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pub-head .pub-nav a.pub-cta:hover, .pub-head .pub-nav a.pub-start:hover { background: #fffdf8; color: var(--navy); }
.pub-brand strong { color: #fff; font-family: var(--serif); }
.pub-brand img { background: #fffdf8; border-radius: 8px; padding: 4px 8px; }
.pub-btn { background: var(--gold); color: var(--navy); border-radius: 999px; }
.pub-btn:hover { background: #c9a75c; }
.pub .theme-switch { margin-left: 4px; }
.pub-head .theme-switch { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.pub-head .theme-switch button { color: rgba(255,255,255,.75); }
.pub-head .theme-switch button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }

/* Numbered workflow tabs: dark figures on the pale and orange discs. */
.tabs a .tab-n { color: var(--text); }
.tabs a.done .tab-n { color: var(--navy); }
.tabs a.active .tab-n { color: #fff; }

/* The small heading above public page titles, in the theme's gold ink. */
.pub-eyebrow { color: var(--gold-ink); }

/* The tick on a chosen photo card sits on a white disc in both themes. */
.est-pick-tick { color: var(--navy); }

/* The cookie note is always a navy bar; --pub-ink turns pale in dark mode. */
.pub-cookie { background: var(--navy); }

/* Pipeline cards stay readable in both themes. */
.board .card-mini { background: var(--surface); color: var(--text); }

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: .5rem; }
  .topbar h1 { font-size: 1.15rem; }
  .topbar .actions { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: .4rem; }
  .theme-switch button { width: 32px; height: 30px; }
  .btn { min-height: 40px; }
  input, select, textarea { font-size: 16px; } /* stops iOS zooming into a field */
}

/* Links inside the page read as links: gold ink, in both themes. */
.content a:not(.btn):not(.badge) { color: var(--gold-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 2px; }
.content table a:not(.btn) { text-decoration: none; }

/* ---- Search or ask AI -------------------------------------------------- */

.search { position: relative; }
.search-launch {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  height: 34px; padding: 0 .75rem; border-radius: 999px; font: inherit; font-size: .85rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85);
}
.search-launch:hover { background: rgba(255,255,255,.12); }
.search-launch svg { width: 16px; height: 16px; }
.search-kbd { font: inherit; font-size: .7rem; padding: .05rem .4rem; border-radius: 6px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.search-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(12,21,40,.28); overflow: hidden;
}
.search-box { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.search-box svg { width: 18px; height: 18px; color: var(--gold-ink); flex: none; }
.search-box input { flex: 1; border: 0; background: transparent; font-size: 1rem; padding: .3rem 0; outline: none; box-shadow: none; }
.search-box button { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 6px; font-size: .7rem; padding: .15rem .45rem; cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: .35rem; max-height: min(60vh, 420px); overflow-y: auto; }
.search-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-ink); padding: .6rem .6rem .25rem; }
.search-row { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .65rem; border-radius: 10px; cursor: pointer; }
.search-row.is-active { background: var(--gold-soft); }
.search-row.is-ai .search-title { color: var(--gold-ink); font-weight: 600; }
.search-title { font-size: .9rem; }
.search-detail { font-size: .75rem; color: var(--muted); }
.search-empty { padding: .8rem .65rem; color: var(--muted); font-size: .85rem; }
.search-foot { margin: 0; padding: .45rem .9rem; border-top: 1px solid var(--border); font-size: .7rem; color: var(--faint); }

@media (max-width: 760px) {
  .search-label, .search-kbd { display: none; }
  .search-launch { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .search-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ---- Back / Save / Next bar -------------------------------------------- */

.workflow-nav {
  position: sticky; bottom: 0; z-index: 15;
  margin: 1.5rem -1.5rem -1.5rem; padding: .75rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--gold-soft);
}
/* Three equal columns, so Back, Save and Next sit in the same places on
   every page: Back at the left edge, Save in the centre, Next at the right. */
.workflow-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.workflow-nav > div:first-child { justify-self: start; margin: 0; }
.workflow-nav > div:last-child { justify-self: end; margin: 0; }
.workflow-nav-mid { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.workflow-nav-mid .tiny { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .workflow-nav { margin: 1rem -.85rem -1rem; padding: .6rem .85rem; gap: .5rem; flex-wrap: nowrap; }
  .workflow-nav .nav-text, .workflow-nav-mid .tiny { display: none; }
  .workflow-nav .btn { padding-inline: .9rem; }
}

/* ---- Admin console and reports: colour tiles ------------------------- */

.console-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .console-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .console-tiles { grid-template-columns: 1fr; } }
.tile {
  display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: var(--radius);
  color: #fff !important; text-decoration: none !important; box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; opacity: .85; }
.tile-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; }
.tile-value small { font-size: 1rem; opacity: .75; }
.tile-sub { font-size: .8rem; opacity: .85; }
.tile-gold { background: linear-gradient(135deg, #d4b46e, #a8843d); color: #14223d !important; }
.tile-navy { background: radial-gradient(120% 140% at 80% 0%, #22365c 0%, #14223d 60%); }
.tile-green { background: linear-gradient(135deg, #2c8a62, #1f6a4b); }
.tile-rose { background: linear-gradient(135deg, #b0614b, #8a4634); }
.tile-blue { background: linear-gradient(135deg, #3d5fae, #2a4687); }
.tile-amber { background: linear-gradient(135deg, #f0a43a, #c97d1c); color: #14223d !important; }

.checklist { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.checklist li { display: flex; align-items: center; gap: .6rem; }
.checklist .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700; flex: none; }
.checklist .is-ok .dot { background: var(--ok-light); color: var(--ok); }
.checklist .is-todo .dot { background: var(--warn-light); color: var(--warn); }

.meter-row { margin-bottom: .8rem; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-top: .3rem; }
.meter span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.meter span.warm { background: var(--gold); }
.meter span.hot { background: var(--bad); }

.console-links { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.console-links a {
  display: flex; flex-direction: column; gap: .15rem; padding: .75rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); text-decoration: none !important; color: var(--text) !important;
  border-left: 4px solid var(--gold);
}
.console-links a:hover { border-color: var(--gold); }
.console-links span { font-size: .78rem; color: var(--muted); }

/* ---- Two-factor setup -------------------------------------------------- */

.setup-steps { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: 1.1rem; }
.qr { background: #fff; display: block; width: max-content; padding: 10px; border-radius: 12px; border: 1px solid var(--border); margin: .6rem 0; }
.qr svg { display: block; width: 200px; height: 200px; }
.secret { font-size: 1rem; letter-spacing: .08em; padding: .4rem .6rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 8px; display: inline-block; margin-top: .25rem; word-break: break-all; }
.recovery-codes { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.recovery-codes li { padding: .35rem .6rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; text-align: center; }
.sidebar-security { display: block; margin: .35rem 0 .2rem; font-size: .75rem; color: var(--gold) !important; text-decoration: none; }
.sidebar-security:hover { text-decoration: underline; }

/* ---- Reports ------------------------------------------------------------ */

.report-filters { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-filters .field { margin: 0; }
@media (max-width: 760px) { .report-filters { grid-template-columns: 1fr 1fr; } }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 1rem; margin-bottom: .6rem; }
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar-stack { width: 100%; max-width: 34px; background: var(--grid); border-radius: 6px 6px 2px 2px; display: flex; align-items: flex-end; min-height: 2px; overflow: hidden; }
.bar-won { display: block; width: 100%; background: var(--ok); }
.bar-num { font-size: .68rem; color: var(--muted); position: absolute; top: -1rem; }
.bar-label { font-size: .65rem; color: var(--faint); margin-top: .25rem; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: .3rem; }
.key-sent { background: var(--grid); }
.key-won { background: var(--ok); }
.hbar { display: grid; grid-template-columns: 9rem 1fr 2.5rem; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: .85rem; }
.hbar-track { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.hbar-track span { display: block; height: 100%; border-radius: 999px; }
.hbar-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .hbar { grid-template-columns: 6.5rem 1fr 2rem; font-size: .78rem; } }

/* Form fields follow the theme (app.css paints them white by type). */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], input[type=search], select, textarea {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
::placeholder { color: var(--faint); opacity: 1; }
.search-box input[type=search] { background: transparent; border: 0; box-shadow: none; }

/* A crowded bar keeps its heading: the search shrinks to an icon first. */
.topbar > div:first-of-type { flex: 1 1 auto; min-width: 8rem; }
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { display: none; }
.search-launch { white-space: nowrap; }
@media (max-width: 1280px) {
  .search-label { display: none; }
}
.wording-group { font-family: var(--serif); font-size: .95rem; color: var(--gold-ink); margin: 1.1rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--gold-soft); }
.wording-group:first-of-type { margin-top: 0; }

/* ---- Kanban boards (deals, tasks) ------------------------------------- */

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 160px; }
.kanban-head { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-bottom: 3px solid var(--col, var(--gold)); }
.kanban-head h3 { margin: 0; font-size: .88rem; }
.kanban-head .sum { margin-left: auto; font-size: .72rem; color: var(--muted); text-align: right; }
.kanban-count { font-size: .7rem; background: var(--gold-soft); color: var(--gold-ink); border-radius: 999px; padding: 0 .45rem; }
.kanban-list { padding: .55rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 80px; border-radius: 0 0 var(--radius) var(--radius); }
.kanban-list.is-over { background: var(--gold-soft); }
.kcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--col, var(--gold)); border-radius: 10px; padding: .6rem .7rem; box-shadow: var(--shadow); cursor: grab; }
.kcard.is-dragging { opacity: .5; }
.kcard.is-saving { opacity: .7; }
.kcard-title { font-weight: 600; font-size: .88rem; margin-bottom: .2rem; display: block; }
.kcard-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .74rem; color: var(--muted); }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .45rem; }
.kcard-foot select { width: auto; font-size: .72rem; padding: .15rem .3rem; min-height: 0; }
.kcard .amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.kcard .overdue { color: var(--bad); font-weight: 600; }
.prio-urgent { --col: var(--bad); }
.prio-high { --col: #e07a2f; }
.prio-normal { --col: var(--grid); }
.prio-low { --col: var(--faint); }
.col-qualification { --col: #8a97a6; }
.col-site_survey { --col: #3d5fae; }
.col-proposal { --col: #d4b46e; }
.col-negotiation { --col: #e07a2f; }
.col-won { --col: var(--ok); }
.col-lost { --col: var(--bad); }
.col-todo { --col: #8a97a6; }
.col-in_progress { --col: #3d5fae; }
.col-review { --col: #d4b46e; }
.col-done { --col: var(--ok); }
@media (max-width: 760px) {
  .kanban { grid-auto-flow: row; grid-auto-columns: auto; }
  .kcard { cursor: default; }
}

.temp { display: inline-block; font-size: .7rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.temp-hot { background: var(--bad-light); color: var(--bad); }
.temp-warm { background: var(--warn-light); color: var(--warn); }
.temp-cold { background: var(--grid-light); color: var(--grid); }
.inline-form { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; }
.inline-form .field { margin: 0; }
.inline-form .wide { grid-column: 1 / -1; }

.subtabs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.subtabs a { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text) !important; text-decoration: none !important; font-size: .85rem; }
.subtabs a.active { background: var(--gold); border-color: var(--gold); color: var(--navy) !important; font-weight: 600; }
.subtasks { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .78rem; }
.subtasks li { display: flex; align-items: center; gap: .3rem; }
.subtasks li.done { color: var(--faint); text-decoration: line-through; }
.subtasks form { display: inline; }
.subtasks button { border: 0; background: none; padding: 0; cursor: pointer; font-size: .95rem; color: var(--gold-ink); }
.bad { color: var(--bad); }
.week-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; }
.week-strip > div { display: flex; flex-direction: column; align-items: center; padding: .45rem .2rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: .72rem; color: var(--muted); }
.week-strip strong { font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.week-strip .today { border-color: var(--gold); }
.week-strip .part { background: var(--gold-soft); }
.week-strip .full { background: var(--ok-light); }
.week-strip .total { background: var(--navy); color: rgba(255,255,255,.8); border-color: var(--navy); }
.week-strip .total strong { color: var(--gold); }
@media (max-width: 480px) { .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Snags and commissioning ------------------------------------------ */

details.snag { border-top: 1px solid var(--border); padding: 0 1rem; border-left: 4px solid var(--sev, var(--faint)); }
details.snag summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .65rem 0; cursor: pointer; list-style: none; }
details.snag summary::-webkit-details-marker { display: none; }
details.snag .sev { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--sev) 16%, transparent); color: var(--sev); }
.sev-critical { --sev: var(--bad); }
.sev-high { --sev: #e07a2f; }
.sev-medium { --sev: #c99a2e; }
.sev-low { --sev: var(--grid); }
.snag-photo { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.commission-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; margin-bottom: .25rem; border-left: 4px solid var(--res, var(--border)); background: var(--surface-2); }
.commission-row input, .commission-row select { font-size: .78rem; padding: .25rem .35rem; }
.check-label { font-size: .84rem; }
.res-pass { --res: var(--ok); }
.res-fail { --res: var(--bad); background: var(--bad-light); }
.res-na { --res: var(--faint); }
.res-pending { --res: var(--gold); }
/* The checklist sits in the narrow side column: the label takes its own line,
   the reading and the result share the one below. */
.commission-row .check-label { grid-column: 1 / -1; }
.commission-row input, .commission-row select { width: 100%; min-width: 0; }

/* ---- Gantt and workload ---------------------------------------------- */

.gantt-wrap { overflow-x: auto; }
.gantt { min-width: 760px; }
.g-head, .g-row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--border); }
.g-head { position: sticky; top: 0; background: var(--surface-2); font-size: .72rem; color: var(--muted); }
.g-name { padding: .45rem .8rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.g-title { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; min-height: 2.6rem; }
.g-head .g-track { min-height: 1.8rem; }
.g-week { position: absolute; top: .45rem; padding-left: .25rem; white-space: nowrap; }
.g-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--border); }
.g-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--gold); z-index: 2; }
.g-bar { position: absolute; top: .7rem; height: 1.15rem; border-radius: 6px; background: #8a97a6; z-index: 1; }
.g-bar.st-in_progress { background: #3d5fae; }
.g-bar.st-review { background: #d4b46e; }
.g-bar.st-done { background: var(--ok); }
.g-bar.critical { box-shadow: 0 0 0 2px var(--bad) inset; }
.g-bar.critical::after { content: ""; position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.g-bar.late { outline: 2px solid var(--bad); outline-offset: 1px; }
.g-diamond { position: absolute; top: .75rem; width: 12px; height: 12px; margin-left: -6px; background: var(--gold); transform: rotate(45deg); z-index: 2; }
.g-diamond.done { background: var(--ok); }
.g-milestones .g-track { min-height: 2.2rem; }
@media (max-width: 700px) { .g-head, .g-row { grid-template-columns: 150px 1fr; } }

.workload td.load { font-variant-numeric: tabular-nums; }
.workload td.ok { background: var(--ok-light); }
.workload td.busy { background: var(--warn-light); font-weight: 600; }
.workload td.over { background: var(--bad-light); color: var(--bad); font-weight: 700; }
.waiting { display: inline-block; font-size: .7rem; color: var(--warn); background: var(--warn-light); border-radius: 999px; padding: 0 .45rem; margin-top: .2rem; }

/* ---- Calendar ------------------------------------------------------------ */

.cal-bar { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; }
.cal-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); border-left: 4px solid var(--tone); cursor: pointer; margin: 0; color: var(--text); }
.cal-chip input { width: auto; margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.cal-dow { padding: .45rem .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-ink); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-day { min-height: 7.2rem; padding: .3rem .35rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: var(--surface-2); opacity: .55; }
.cal-day.weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-day.today .cal-num { background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0 .4rem; }
.cal-num { font-size: .75rem; font-weight: 600; color: var(--muted); align-self: flex-start; }
.cal-ev { display: block; font-size: .7rem; line-height: 1.3; padding: .12rem .35rem; border-radius: 5px; background: color-mix(in srgb, var(--tone) 16%, transparent); border-left: 3px solid var(--tone); color: var(--text) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { background: color-mix(in srgb, var(--tone) 28%, transparent); }
.cal-line { white-space: normal; font-size: .85rem; padding: .5rem .8rem; border-radius: 0; border-top: 1px solid var(--border); }
.tone-meeting { --tone: #3d5fae; }
.tone-visit { --tone: #7a4fb0; }
.tone-task { --tone: #8a97a6; }
.tone-late { --tone: var(--bad); }
.tone-milestone { --tone: var(--gold); }
.tone-follow { --tone: #b0614b; }
.tone-snag { --tone: #e07a2f; }
.tone-deal { --tone: var(--ok); }
.cal-agenda { display: none; }
@media (max-width: 760px) {
  .cal-grid { display: none; }
  .cal-agenda { display: block; }
}

/* The menu button sits on the navy bar in both themes. */
.topbar .nav-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.topbar .nav-toggle:hover { background: rgba(255,255,255,.16); }

/* ---- Logo at 60% of the sidebar width ----------------------------------- */
.sidebar-logo { text-align: center; }
.sidebar-logo img { width: 60% !important; margin: 0 auto; }

/* ---- Language and account menu on the top bar -------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-locale { display: inline-flex; align-items: center; gap: .25rem; height: 34px; padding: 0 .3rem 0 .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); font-size: .8rem; }
.top-locale select { background: transparent !important; border: 0 !important; color: #fff !important; width: auto; padding: 0 .2rem; font-size: .8rem; box-shadow: none !important; }
.top-locale select option { color: var(--text); background: var(--surface); }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; height: 34px; padding: 0 .55rem 0 .25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: .82rem; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); display: inline-grid; place-items: center; font-weight: 700; font-size: .72rem; }
.user-menu .caret { font-size: .65rem; opacity: .75; }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 240px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(12,21,40,.28); padding: .4rem; display: flex; flex-direction: column; }
.user-head { display: flex; flex-direction: column; padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.user-pop a, .user-pop .signout { display: block; padding: .5rem .6rem; border-radius: 8px; color: var(--text) !important; text-decoration: none !important; font-size: .86rem; text-align: left; background: none; border: 0; width: 100%; cursor: pointer; font: inherit; }
.user-pop a:hover, .user-pop .signout:hover { background: var(--gold-soft); }
.user-pop form { margin: 0; border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .3rem; }
.user-pop .signout { color: var(--bad) !important; font-weight: 600; }
@media (max-width: 960px) {
  .user-name, .user-menu .caret { display: none; }
  .user-menu summary { padding: 0 .25rem; }
  .top-locale select { max-width: 3.2rem; }
}

/* ---- Plans link, currency and help on the top bar ---------------------- */
.top-link, .top-menu summary, .top-currency { display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff !important; font-size: .82rem; text-decoration: none !important; white-space: nowrap; }
.top-link:hover, .top-menu summary:hover { background: rgba(255,255,255,.14); }
.top-link.on, .top-menu.on summary { border-color: var(--gold); color: var(--gold) !important; }
.top-menu { position: relative; }
.top-menu summary { list-style: none; cursor: pointer; }
.top-menu summary::-webkit-details-marker { display: none; }
.top-menu .caret { font-size: .65rem; opacity: .75; }
.top-menu .badge { margin-left: .1rem; }
.top-currency { padding: 0 .3rem 0 .45rem; }
.top-currency select { background: transparent !important; border: 0 !important; color: #fff !important; width: auto; padding: 0 .2rem; font-size: .8rem; font-weight: 600; box-shadow: none !important; }
.top-currency select option { color: var(--text); background: var(--surface); }
.pub-head .top-currency { margin-left: 4px; }
@media (max-width: 960px) {
  .top-menu-label { display: none; }
  .top-link, .top-menu summary { padding: 0 .55rem; }
}

/* ---- Plans, billing, account pending --------------------------------- */

.plan-cycle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border, var(--pub-line)); background: var(--surface-2, var(--pub-card)); margin: 0 auto 1.2rem; }
.pub .plan-cycle { display: flex; width: max-content; }
.plan-cycle button { border: 0; background: transparent; padding: .4rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .85rem; color: inherit; }
.plan-cycle button[aria-pressed="true"] { background: var(--gold); color: var(--navy); font-weight: 600; }
.plan-cycle .save { font-size: .7rem; color: var(--ok); margin-left: .2rem; }
.plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.2rem; border-radius: 16px; border: 1px solid var(--border, var(--pub-line)); background: var(--surface, var(--pub-card)); }
.plan-card.featured { border: 2px solid var(--gold); box-shadow: 0 12px 36px rgba(20,34,61,.12); }
.plan-card.current { outline: 3px solid var(--ok); }
.plan-flag { position: absolute; top: -.7rem; left: 1.2rem; background: var(--gold); color: var(--navy); font-size: .7rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.plan-card h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.plan-tag { min-height: 2.4em; margin: 0; }
.plan-price strong { font-family: var(--serif); font-size: 2rem; }
.plan-price span { color: var(--muted, var(--pub-soft)); font-size: .85rem; margin-left: .25rem; }
.plan-features { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: .35rem; flex: 1; }
.plan-features li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: .45rem; }
.plan-features li.off { color: var(--faint, var(--pub-soft)); text-decoration: line-through; }
.plan-features li.off::before { content: "–"; color: var(--faint); }
.plan-pay { display: grid; gap: .4rem; }
.plan-admin { display: grid; gap: 1rem; }

.pending-hero { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.5rem; }
.pending-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: var(--gold-soft); flex: none; }
.pending-icon.state-suspended { background: var(--bad-light); }
.pending-icon.state-trial, .pending-icon.state-active { background: var(--ok-light); }
.steps-track { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: s; }
.steps-track li { position: relative; padding: .55rem 0 .55rem 2.6rem; display: flex; flex-direction: column; counter-increment: s; }
.steps-track li::before { content: counter(s); position: absolute; left: 0; top: .5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); border: 2px solid var(--border); color: var(--muted); }
.steps-track li.done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: #fff; }
.steps-track li.current::before { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.steps-track li.bad::before { content: "!"; background: var(--bad); border-color: var(--bad); color: #fff; }
.steps-track span { font-size: .8rem; color: var(--muted); }
.inv-head { width: 100%; }
.inv-head td { vertical-align: top; }
.invoice-sheet table.bank td:first-child { width: 40%; color: var(--muted); }
@media print { .invoice-sheet { box-shadow: none; border: 0; } }

/* ---- Site location picker ---------------------------------------------- */
.loc-picker { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; background: var(--surface-2); position: relative; }
.loc-search { display: flex; gap: .4rem; flex-wrap: wrap; }
.loc-search input { flex: 1 1 260px; }
.loc-results { list-style: none; margin: .4rem 0 0; padding: .3rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-height: 220px; overflow: auto; position: relative; z-index: 500; }
.loc-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .55rem; border-radius: 7px; cursor: pointer; font: inherit; font-size: .84rem; color: var(--text); }
.loc-results button:hover { background: var(--gold-soft); }
.loc-tools p { margin-top: .4rem; }
.loc-map { height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); margin-top: .6rem; z-index: 0; }
@media (max-width: 700px) { .loc-map { height: 260px; } }

/* The top bar carries a lot; keep it within the window at every width. */
.top-locale select { max-width: 3.4rem; text-overflow: clip; }
.topbar { min-width: 0; }
.topbar > * { flex-shrink: 0; }
.topbar > div:first-of-type { flex-shrink: 1; }
@media (max-width: 1400px) {
  .user-name, .user-menu .caret { display: none; }
  .user-menu summary { padding: 0 .25rem; }
}
@media (max-width: 1180px) {
  .theme-switch button { width: 24px; }
  .bot-launch span { display: none; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
}

/* ---- Logo: a small rounded card instead of a full-width white band ----- */
.sidebar-brand { padding-top: .9rem; }
.sidebar-logo {
  background: transparent !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 auto .55rem !important; width: max-content; max-width: 92.5%; /* 15% up again, from 80.5% */
}
.sidebar-logo img {
  width: auto !important; max-width: 100%; max-height: 74px; display: block; /* 15% up again, from 64px */
  background: #fffdf8; border-radius: 10px; padding: 5px 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* The tagline, centred under the mark in running handwriting, as written.
   System script faces only: no font is fetched from another site. */
.sidebar-brand > span {
  text-align: center; text-transform: none; font-style: normal; letter-spacing: 0;
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", "Apple Chancery", "URW Chancery L", cursive;
  font-size: 1.3rem !important; line-height: 1.2; padding-top: .15rem;
}

/* ---- Import ---------------------------------------------------------------- */
.lede { font-size: .95rem; max-width: 62ch; }
.import-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.import-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.import-card.ai { background: linear-gradient(160deg, var(--surface) 60%, var(--gold-soft)); }
.import-card header { display: flex; gap: .8rem; align-items: flex-start; }
.import-card h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.import-card p { margin: 0; }
.import-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.15rem; background: var(--navy); color: var(--gold); }
.import-templates { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text) !important; text-decoration: none !important; }
.chip:hover { border-color: var(--gold); background: var(--gold-soft); }
.import-drop label { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem; border: 2px dashed var(--border-strong); border-radius: 12px; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; margin: 0; }
.import-drop label:hover, .import-drop.is-over label { border-color: var(--gold); background: var(--gold-soft); }
.import-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-main { font-weight: 600; color: var(--text); font-size: .9rem; }
.import-counts { display: flex; gap: 1rem; flex-wrap: wrap; font-weight: 600; }
.import-counts .ok { color: var(--ok); } .import-counts .info { color: var(--grid); } .import-counts .bad { color: var(--bad); }
.import-table th { min-width: 150px; vertical-align: bottom; }
.import-table th.mapped { border-bottom: 3px solid var(--ok); }
.import-table th.unmapped { border-bottom: 3px solid var(--border); }
.import-table th select { font-size: .78rem; padding: .2rem .3rem; margin-top: .2rem; }
.import-table td.ignored { background: var(--surface-2); }
.import-table .sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 70px; white-space: nowrap; }
.import-table tr.has-errors td { background: color-mix(in srgb, var(--bad-light) 55%, transparent); }
.import-table tr.error-line td { font-size: .76rem; color: var(--bad); padding-top: 0; border-top: 0; }
.row-status { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .7rem; font-weight: 700; }
.row-status.ok { background: var(--ok-light); color: var(--ok); }
.row-status.bad { background: var(--bad-light); color: var(--bad); }
input.is-empty { border-style: dashed; }

/* ===========================================================================
   Layout and finish
   =========================================================================== */

/* ---- The bar: tools only, search given room ----------------------------- */
.topbar { gap: .6rem; }
.topbar .spacer { display: block; flex: 1; }
.topbar .search { flex: 0 1 420px; min-width: 0; }
.search-launch { width: 100%; justify-content: flex-start; }
.search-launch .search-kbd { margin-left: auto; }
@media (max-width: 1280px) { .search-label { display: inline; } }
@media (max-width: 760px) {
  .topbar .search { flex: 0 0 auto; }
  .search-launch { width: 38px; }
  .search-label { display: none; }
}

/* ---- Page header band --------------------------------------------------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem;
  margin: -.25rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
  position: relative;
}
.page-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--gold); border-radius: 2px; }
.page-title { min-width: 0; }
.page-head h1 { font-family: var(--serif); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); font-weight: 600; line-height: 1.15; margin: 0; color: var(--text); letter-spacing: -.01em; }
.page-head .crumbs { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-ink); margin-bottom: .3rem; white-space: normal; }
.page-head .crumbs a { color: var(--gold-ink) !important; text-decoration: none !important; }
.page-head .crumbs a:hover { text-decoration: underline !important; }
/* Page buttons sit on the right, level with the title, also when there are
   enough of them to wrap under it. */
.page-head .actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: flex-end; margin-left: auto; }
.page-head .actions > .btn-row, .page-head .actions form { display: contents; }
@media (max-width: 700px) { .page-head { margin-bottom: 1rem; } .page-head .actions { width: 100%; } }

/* ---- Body and type ------------------------------------------------------ */
body { font-size: 14.5px; line-height: 1.55; }
.content { padding-top: 1.6rem; }
h2 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
h3 { font-weight: 650; }
.muted { color: var(--muted); }

/* ---- Cards -------------------------------------------------------------- */
.card { border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(20,34,61,.04), 0 6px 22px -14px rgba(20,34,61,.18); overflow: hidden; }
.card + .card { margin-top: 0; }
.card-head { padding: .95rem 1.15rem; gap: .6rem; }
.card-head h2 { font-size: 1.12rem; }
.card-body { padding: 1.1rem 1.15rem; }
.card-foot { background: var(--surface-2); border-top: 1px solid var(--border); }

/* ---- Figures ------------------------------------------------------------ */
.stat { border-radius: 16px; padding: 1rem 1.15rem; box-shadow: 0 1px 2px rgba(20,34,61,.04), 0 6px 22px -14px rgba(20,34,61,.18); }
.stat .label { font-size: .7rem; letter-spacing: .09em; color: var(--gold-ink); }
.stat .value { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; letter-spacing: -.01em; }

/* ---- Tables ------------------------------------------------------------- */
.content table { border-collapse: separate; border-spacing: 0; width: 100%; }
.content table th { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); padding: .6rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.content table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.content table tbody tr:last-child td { border-bottom: 0; }
.content table tbody tr { transition: background .12s; }
.content table tbody tr:hover td { background: color-mix(in srgb, var(--gold-soft) 35%, transparent); }
/* References and codes stay on one line. */
.content td.mono, .content td .mono, .content td:first-child > a:only-child { white-space: nowrap; }
/* A wide table scrolls inside its card rather than squeezing every cell. */
.scroll-x > table { min-width: 680px; }
.content .num { font-variant-numeric: tabular-nums; }

/* ---- Forms -------------------------------------------------------------- */
label { font-weight: 600; font-size: .78rem; letter-spacing: .01em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=url], input[type=search], input[type=datetime-local], select, textarea { border-radius: 10px; padding: .55rem .7rem; }
.field { margin-bottom: 1rem; }
.help { font-size: .76rem; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; font-weight: 550; padding: .5rem 1rem; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #ddc07e, var(--gold)); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 12px -6px rgba(168,132,61,.7); }
.btn.primary:hover { background: linear-gradient(180deg, #d4b46e, #c9a75c); }
.btn.small { padding: .3rem .7rem; }

/* ---- Alerts ------------------------------------------------------------- */
.alert { border-radius: 12px; padding: .8rem 1rem; border-left-width: 4px; }

/* ---- Badges ------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

/* ---- Sidebar finish ----------------------------------------------------- */
.sidebar nav a { padding-top: .42rem; padding-bottom: .42rem; margin: 1px .5rem; }
.sidebar nav .group { margin-top: .4rem; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }
/* Grid columns may shrink below their content, so wide tables scroll inside
   their card instead of pushing the page sideways. */
.grid > *, .console-tiles > *, .import-grid > * { min-width: 0; }
/* Phones: the bar's tools on one row. */
@media (max-width: 760px) {
  .topbar { flex-wrap: nowrap; gap: .3rem; padding-left: .6rem; padding-right: .6rem; }
  .topbar .spacer { min-width: 0; }
  .theme-switch button { width: 24px; height: 28px; }
  .top-locale > span[aria-hidden] { display: none; }
  .top-locale { padding: 0 .1rem 0 .35rem; }
  .top-locale select { max-width: 2.7rem; }
  .search-launch, .bot-launch { width: 34px; height: 34px; }
}
.user-theme { display: none; padding: .3rem .6rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.user-theme .theme-switch { background: var(--surface-2); border-color: var(--border); }
.user-theme .theme-switch button { color: var(--muted); }
.user-theme .theme-switch button[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); }
@media (max-width: 760px) {
  .topbar > .theme-switch { display: none; }
  .user-theme { display: block; }
}

/* ---- Ranked solutions ------------------------------------------------------ */
.solution-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.solution-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem; min-width: 0; }
.solution-card.is-best { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow); }
.solution-head { display: flex; gap: .75rem; align-items: center; }
.solution-head h2 { font-size: 1.1rem; margin: 0; }
.solution-rank { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; background: var(--navy); color: var(--gold); }
.is-best .solution-rank { background: var(--gold); color: var(--navy); }
.solution-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.solution-figures { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .75rem; margin: 0; }
.solution-figures div { min-width: 0; }
.solution-figures dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.solution-figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.solution-bom { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.solution-bom li { margin: .15rem 0; }
.solution-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }

/* ---- PVsyst-style balance and loss diagram --------------------------------- */
.pvsyst-table th { white-space: nowrap; }
.pvsyst-table tr.total td { border-top: 2px solid var(--border-strong); }
.loss-diagram { max-width: 560px; }
.loss-diagram tr.level td { background: var(--surface-2); }
.loss-diagram tr.loss td:last-child { color: var(--bad); }
.loss-diagram tr.gain td:last-child, .loss-diagram tr.info td:last-child { color: #2f7a4d; }

/* ---- 3D model ---------------------------------------------------------------- */
.model-card { overflow: hidden; }
.model-stage { position: relative; width: 100%; background: #dfe8f1; }
.model-stage canvas { display: block; touch-action: none; }
.model-hud { position: absolute; left: .6rem; bottom: .6rem; right: .6rem; padding: .35rem .6rem; border-radius: 8px; background: rgba(20,34,61,.78); color: #f6f1e7; pointer-events: none; }
.model-controls { display: grid; gap: .6rem; }
.model-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.model-field { display: grid; gap: .2rem; margin: 0; }
.model-time { flex: 1 1 240px; }
.model-time input { width: 100%; }
.model-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.model-frames figure { margin: 0; }
.model-frames img { width: 100%; border-radius: 8px; display: block; }

/* ---- Design copilot ---------------------------------------------------------- */
.copilot-log { max-height: 320px; overflow-y: auto; display: grid; gap: .4rem; margin-bottom: .6rem; }
.copilot-msg { margin: 0; padding: .45rem .6rem; border-radius: 10px; white-space: pre-wrap; }
.copilot-msg.me { background: var(--navy); color: #f6f1e7; justify-self: end; max-width: 85%; }
.copilot-msg.bot { background: var(--surface-2); border: 1px solid var(--border); }
.copilot-msg.actions, .copilot-msg.wait { color: var(--muted); padding: 0 .2rem; }
.copilot-msg.error { color: var(--bad); }
.copilot-form textarea { width: 100%; margin-bottom: .4rem; }

/* ---- PPA options ------------------------------------------------------------- */
.ppa-table td.good { color: #2f7a4d; }
.ppa-table td.bad { color: var(--bad); }
.ppa-table tr.lead td { background: var(--surface-2); }
.ppa-table tr.sep td { border-top: 2px solid var(--border-strong); }
.ppa-bars { width: 100%; max-width: 640px; height: auto; display: block; color: var(--text); }
.ppa-inputs .field { margin: 0; }
.grid.c5 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ppa-table td.num { white-space: nowrap; }

/* ---- Document checklist ------------------------------------------------------ */
.checklist-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.checklist-table td { vertical-align: top; }
.checklist-table tr.is-confirmed td { background: color-mix(in srgb, #2f7a4d 7%, transparent); }
.checklist-note { min-width: 140px; width: 100%; }

/* ---- Guide ------------------------------------------------------------------- */
.guide-tabs { flex-wrap: wrap; }
.guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.guide-step { display: flex; gap: 1rem; padding: 1rem 1.1rem; align-items: flex-start; }
.guide-step-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--navy); color: var(--gold); }
.guide-step-body h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.guide-step-body ul { margin: .5rem 0 .3rem; padding-left: 1.1rem; }
.guide-step-body li { margin: .2rem 0; }
.guide-tip { margin: .3rem 0 0; padding: .35rem .6rem; border-left: 3px solid var(--gold); background: var(--surface-2); }
.nav-row { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.nav-row:last-child { border-bottom: 0; }
.nav-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; background: var(--navy); color: var(--gold); margin-right: .3rem; }
.nav-steps { margin: 0; padding-left: 1.2rem; }
.nav-steps li { margin: .3rem 0; }
@media print { .inputs-table input { display: none; } .keep-together { break-inside: avoid; } }

/* Billing currency beside the monthly / yearly switch. */
.plan-bar { display: flex; justify-content: center; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.plan-bar .plan-cycle { margin: 0; }
.plan-currency { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border, var(--pub-line)); background: var(--surface-2, var(--pub-card)); margin: 0; }
.plan-currency button { border: 0; background: transparent; padding: .4rem .8rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: inherit; }
.plan-currency button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.plan-fx { display: block; width: 100%; margin-top: .2rem; font-weight: 400; }

/* The free trial line and the annual figures under each price. */
.plan-trial-note { text-align: center; max-width: 46rem; margin: 0 auto 1rem; padding: .6rem 1rem; border-radius: 12px; background: var(--gold-soft, rgba(212,180,110,.15)); font-size: .9rem; }
.plan-annual { display: block; width: 100%; margin-top: .25rem; font-weight: 500; color: var(--muted, var(--pub-dim)); }
.plan-annual[hidden] { display: none; }
.plan-pay-cycle { display: block; text-align: center; margin-bottom: .35rem; }
.plan-coupon { display: grid; gap: .2rem; margin-bottom: .35rem; }
.plan-coupon input { width: 100%; text-transform: uppercase; letter-spacing: .04em; }

/* ---- The bar on a phone ------------------------------------------------
   Everything on it has to fit 360 px: search becomes its icon, the currency
   its code, and the language moves into the account menu. */
.user-pop .pop-locale { display: none; }
@media (max-width: 760px) {
  .topbar { gap: .35rem; }
  .topbar .search, .topbar > div:first-of-type { flex: 0 0 auto; min-width: 0; }
}
@media (max-width: 600px) {
  .top-locale { display: none; }
  .user-pop .pop-locale { display: block; padding: .4rem .6rem .5rem; border-top: 0; margin-top: 0; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
  .user-pop .pop-locale select { width: 100%; }
  .top-currency { padding: 0 .1rem 0 .25rem; }
  .top-currency select { max-width: 4.4rem; padding: 0; }
  .top-link, .top-menu summary { padding: 0 .45rem; }
  .top-menu .caret { display: none; }
}

/* ---- A catalogue product's datasheet ---------------------------------- */
.product-sheet-table { width: 100%; font-size: .8rem; margin-bottom: .6rem; }
.product-sheet-table th { width: 42%; text-align: left; font-weight: 600; color: var(--muted); vertical-align: top; padding: .3rem .5rem .3rem 0; }
.product-sheet-table td { padding: .3rem 0; }
.product-sheet-features { margin: .2rem 0 .6rem; padding-left: 1.1rem; }

/* Map controls sit on Leaflet's own white buttons in both themes; keep their
   links navy, ahead of the gold link colour used in .content. */
.leaflet-container .leaflet-bar a, .content .leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-control-attribution a, .content .leaflet-container .leaflet-control-attribution a { color: var(--navy); }
.field-error { color: var(--bad, #b23a2e); font-size: .8rem; margin-top: .3rem; }

/* ---- Design checks and readiness lists ---------------------------------
   The mark sits in a small tinted disc, the label and its explanation read
   as one block beside it. */
.check-row { align-items: flex-start; gap: .75rem; padding: .65rem .1rem; }
.check-row .mark {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .72rem; line-height: 1; margin-top: .05rem;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.check-row .body { flex: 1 1 auto; min-width: 0; }
.check-row .body strong { font-size: .86rem; margin-bottom: .05rem; }
.check-row .body span { line-height: 1.45; }
.check-row .body a { margin-left: .25rem; font-weight: 600; }

/* ---- Figures that do not fit -----------------------------------------
   A large currency total ("NGN 205,480,033") shrinks with its card instead
   of breaking over two lines. */
.stat { container-type: inline-size; min-width: 0; }
.stat .value { font-size: clamp(1.15rem, 10cqi, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; }
.stat .value .cur { font-family: var(--sans); font-size: .55em; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-right: .15em; }

/* Numbers in a table keep their unit beside them. */
.content td.num { white-space: nowrap; }

/* A product's key figures in the catalogue list, as small labelled chips. */
.spec-list { display: flex; flex-wrap: wrap; gap: .25rem .3rem; max-width: 30rem; }
.spec { display: inline-flex; gap: .3em; align-items: baseline; padding: .1rem .45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: .72rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec > span { font-weight: 500; color: var(--muted); }

/* ---- The project stage strip ------------------------------------------
   Tabs are navigation, not prose links: no underline. On a phone the strip
   stays one row and scrolls sideways instead of stacking three deep. */
.content .tabs a { text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a.tab-aside { margin-left: .5rem; }
  /* A page's own actions sit in a compact row rather than three tall ones. */
  .page-head .actions .btn { padding: .35rem .75rem; font-size: .8rem; }
}

/* Dark mode turns links gold; the active menu item is itself gold, so its
   label has to stay navy or it vanishes into the pill. */
:root .sidebar nav a.active:not(.btn) { color: var(--navy); }

/* Step numbers: an outlined disc for a step still ahead, gold for one done,
   solid for the step you are on. Readable in light and dark alike. */
.tabs a .tab-n { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.tabs a.done .tab-n { background: var(--gold); color: var(--navy); box-shadow: none; }
.tabs a.active .tab-n { background: var(--text); color: var(--bg); box-shadow: none; }

/* Chart and plan ink. The SVGs carry a fixed dark fill so the PDFs print
   them correctly; on screen the ink follows the theme, so a donut's centre
   figure and a plan's north arrow stay visible in dark mode. */
.content svg text[fill="#17212b"], .content svg text[fill="#14223d"],
.content svg polygon[fill="#14223d"], .content svg rect[fill="#14223d"] { fill: var(--text); }

/* A cold lead's tag: the grid blue is too dark to read on the dark tint. */
:root[data-theme="dark"] .temp-cold { color: #a9c1ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .temp-cold { color: #a9c1ec; } }

/* =========================================================================
   One system, every screen size.

   The same few measures everywhere - one card radius and shadow, one control
   height, one gap - so a page built last month looks like a page built today.
   Then the phone: fields big enough not to make iOS zoom, buttons big enough
   to tap, list tables read as cards (public/js/responsive.js labels the
   cells), and anything else wide scrolls inside its own box.
   ========================================================================= */

:root {
  --radius-lg: 16px;
  --radius: 14px;
  --radius-sm: 10px;
  --card-shadow: 0 1px 2px rgba(20,34,61,.04), 0 6px 22px -14px rgba(20,34,61,.18);
  --control-h: 38px;
  --control-h-sm: 30px;
  --gap: 1rem;
  --pad-x: 1.5rem;            /* the page's side padding; full-bleed bars use it too */
}
:root[data-theme="dark"] { --card-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -14px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -14px rgba(0,0,0,.6); } }

/* Surfaces share one shape. */
.card, .stat { border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.alert { border-radius: var(--radius); }
.grid { gap: var(--gap); }

/* Controls share one height, so a field, its select and the button beside it
   line up wherever they sit. */
.btn { min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: .35rem; line-height: 1.2; }
.btn.small { min-height: var(--control-h-sm); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel],
input[type=url], input[type=search], input[type=datetime-local], input[type=time], input[type=month], select {
  min-height: var(--control-h); border-radius: var(--radius-sm);
}
textarea { border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* A table that is wider than its card scrolls inside it, never the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.stackable .cv { min-width: 0; }

.content { padding-inline: var(--pad-x); }
.workflow-nav { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); }

/* ---- Tablet ----------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --pad-x: 1.15rem; }
  /* The stage strip stays one row and scrolls, as on a phone. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a.tab-aside { margin-left: .5rem; }
}
@media (max-width: 900px) {
  /* The step header: title and lede first, the currency and progress below. */
  .step-head { flex-direction: column; gap: .6rem; }
  .step-head-side { flex: 1 1 auto; width: 100%; }
}

/* ---- Phone ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --control-h: 44px; --control-h-sm: 36px; --gap: .75rem; --pad-x: .85rem; }

  /* 16 px or iOS zooms into the field and leaves the page zoomed. Important,
     because compact grids (monthly weather, commissioning) set their own. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }

  /* A form laid out in a row wraps, and its select gives way first. */
  .content form.flex { flex-wrap: wrap; max-width: 100%; }
  .content form.flex select, .card-head select { min-width: 0; max-width: 100%; flex: 1 1 8rem; width: auto !important; }
  .card-head form { flex: 1 1 100%; }

  /* A table that stays a grid takes the width its content needs. */
  .scroll-x > table:not(.stackable) { min-width: 0; }

  .content { padding-top: .9rem; }
  .card-head { padding: .8rem .9rem; flex-wrap: wrap; }
  .card-body { padding: .9rem; }
  .card-head .hint { flex-basis: 100%; }

  /* Headline figures sit two to a row rather than one huge card each. */
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem; }
  .stat { padding: .75rem .8rem; }
  .stat .label { font-size: .62rem; letter-spacing: .07em; }
  .stat .value { font-size: clamp(1rem, 12cqi, 1.45rem); }
  .stat .sub { font-size: .72rem; }

  /* Page title above, its actions in one wrapping row below. */
  .page-head { align-items: stretch; }
  .page-head .actions { justify-content: flex-start; margin-left: 0; }
  .page-head .actions select { flex: 1 1 10rem; min-width: 0; }

  /* Forms: one field per row; a button fills its row. */
  .form-row, .grid.c2.form, .fields { grid-template-columns: 1fr !important; }
  form .btn.primary[type=submit]:only-child { width: 100%; }

  /* The sticky save bar clears the phone's home indicator. */
  .save-bar { padding-bottom: max(.7rem, env(safe-area-inset-bottom)); }

  /* Topbar controls are fingers' width apart. */
  .theme-switch button { width: 34px; height: 32px; }

  /* Inline layout grids written into a view collapse too. */
  .content [style*="grid-template-columns"]:not(svg *) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)) !important; }
}

/* ---- List tables as cards (phone) -------------------------------------- */
@media (max-width: 640px) {
  .content table.stackable { min-width: 0 !important; width: 100%; border: 0; background: transparent; box-shadow: none; }
  .scroll-x:has(> table.stackable), .table-scroll:has(> table.stackable) { overflow: visible; }
  table.stackable thead { display: none; }
  table.stackable, table.stackable tbody, table.stackable tfoot, table.stackable tr { display: block; }
  table.stackable tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .45rem .8rem; margin: 0 0 .55rem; box-shadow: 0 1px 2px rgba(20,34,61,.04);
  }
  table.stackable tbody tr:hover td { background: transparent; }
  .content table.stackable td, .content table.stackable th {
    display: flex; align-items: baseline; justify-content: space-between; gap: .9rem;
    padding: .32rem 0 !important; border: 0 !important; border-bottom: 1px dashed var(--border) !important;
    text-align: right; white-space: normal; background: transparent !important;
  }
  .content table.stackable tr > :last-child { border-bottom: 0 !important; }
  table.stackable td::before {
    content: attr(data-label); flex: 0 0 38%; text-align: left;
    font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  table.stackable td .cv { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  /* An unlabelled cell (actions) and an empty one. */
  table.stackable td[data-label=""]::before { display: none; }
  table.stackable td[data-label=""] { justify-content: flex-end; }
  table.stackable td[data-label=""] .cv { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
  table.stackable td:has(> .cv:empty) { display: none; }
  /* The first cell names the row: it leads the card, unlabelled and bold. */
  table.stackable tr > td:first-child { justify-content: flex-start; text-align: left; font-weight: 600; font-size: .95rem; }
  table.stackable tr > td:first-child::before { display: none; }
  table.stackable tr > td:first-child .cv { justify-content: flex-start; }
  /* Group headings and "nothing yet" rows read as plain headings. */
  table.stackable tr.row-group { background: transparent; border: 0; box-shadow: none; padding: .5rem .1rem .15rem; margin: 0; }
  table.stackable tr.row-group > td { display: block; text-align: left; border: 0 !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-ink); }
  table.stackable tr.row-group > td.empty { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .88rem; }
  table.stackable tfoot tr { background: var(--surface-2); }
  table.stackable .spec-list { justify-content: flex-end; margin-left: auto; }
}

/* ---- The notification bell -------------------------------------------- */
.bell-menu summary { position: relative; }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--battery); color: #fff; font-size: .64rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(360px, calc(100vw - 24px)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(12,21,40,.28); padding: .4rem; display: flex; flex-direction: column; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem .55rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.bell-head form { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold-ink); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; }
.bell-item { display: grid; gap: .1rem; padding: .55rem .6rem; border-radius: 10px; color: var(--text) !important; text-decoration: none !important; }
.bell-item:hover { background: var(--gold-soft); }
.bell-item.unread { background: color-mix(in srgb, var(--gold-soft) 55%, transparent); }
.bell-item.unread .bell-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--battery); margin-right: .4rem; vertical-align: 1px; }
.bell-title { font-size: .86rem; font-weight: 600; }
.bell-body { font-size: .78rem; color: var(--muted); }
.bell-time { font-size: .7rem; color: var(--faint); }
.bell-empty { margin: 0; padding: .8rem .6rem; font-size: .84rem; color: var(--muted); }
.bell-all { display: block; text-align: center; padding: .55rem; margin-top: .2rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--gold-ink) !important; }
@media (max-width: 600px) { .bell-pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }

/* A small form that opens from a row's button (record a payment, log a reading). */
.inline-pop { position: relative; }
.inline-pop > summary { list-style: none; cursor: pointer; }
.inline-pop > summary::-webkit-details-marker { display: none; }
.inline-pop .pop-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(300px, calc(100vw - 32px)); display: grid; gap: .55rem; padding: .85rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(12,21,40,.22); }
.inline-pop .pop-form label { display: grid; gap: .2rem; font-size: .74rem; }
@media (max-width: 640px) { .inline-pop .pop-form { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; } }
.cash-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-bottom: .6rem; }
.cash-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.cash-bar span { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--navy))); }
.cash-bar em { font-style: normal; font-size: .64rem; color: var(--muted); }
.bad-text { color: var(--bad); font-weight: 600; }
.ok-text { color: var(--ok); font-weight: 600; }

/* Generation against forecast: a pale bar for the forecast, the real month in front. */
.gen-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-bottom: .5rem; }
.gen-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gen-pair { flex: 1; width: 100%; position: relative; }
.gen-pair span { position: absolute; bottom: 0; border-radius: 5px 5px 2px 2px; }
.gen-pair .exp { left: 0; right: 0; background: color-mix(in srgb, var(--sun) 28%, transparent); border: 1px dashed color-mix(in srgb, var(--sun) 70%, transparent); }
.gen-pair .act { left: 22%; right: 22%; background: var(--ok); }
.gen-pair .act.watch { background: var(--sun); }
.gen-pair .act.poor { background: var(--bad); }
.gen-bar em { font-style: normal; font-size: .62rem; color: var(--muted); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.key.exp { background: color-mix(in srgb, var(--sun) 35%, transparent); border: 1px dashed var(--sun); }
.key.act { background: var(--ok); }

/* ---- Right to left (Arabic) --------------------------------------------
   Flex rows and text already follow the page direction; these are the
   places that were written with a fixed left or right. */
[dir="rtl"] body { font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, var(--sans); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .page-head h1 { font-family: "Noto Naskh Arabic", "Geeza Pro", var(--serif); letter-spacing: 0; }
[dir="rtl"] .badge.count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .page-head::after { left: auto; right: 0; }
[dir="rtl"] .page-head .actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tabs a.tab-aside { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tabs a .tab-n { margin-right: 0; margin-left: .45rem; }
[dir="rtl"] .user-pop, [dir="rtl"] .bell-pop { right: auto; left: 0; }
[dir="rtl"] .stat.accent-sun, [dir="rtl"] .stat.accent-grid, [dir="rtl"] .stat.accent-brand, [dir="rtl"] .stat.accent-battery { border-left-width: 1px; border-left-color: var(--border); border-right-width: 3px; border-right-style: solid; }
[dir="rtl"] .stat.accent-sun { border-right-color: var(--sun); }
[dir="rtl"] .stat.accent-grid { border-right-color: var(--grid); }
[dir="rtl"] .stat.accent-brand { border-right-color: var(--brand); }
[dir="rtl"] .stat.accent-battery { border-right-color: var(--battery); }
[dir="rtl"] table.stackable td::before { text-align: right; }
[dir="rtl"] table.stackable td, [dir="rtl"] table.stackable th { text-align: left; }
[dir="rtl"] table.stackable tr > td:first-child { text-align: right; }
@media (max-width: 960px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .shell.nav-open .sidebar { transform: none; }
}

/* The offline bar: what is waiting to be sent. */
.offline-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 90; width: min(640px, calc(100vw - 24px));
  display: flex; gap: .7rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-radius: 14px;
  background: var(--navy); color: #fff; box-shadow: 0 18px 50px rgba(12,21,40,.35); font-size: .86rem; }
.offline-bar.ok { background: var(--ok); }
.offline-bar button { flex: 0 0 auto; min-height: 36px; padding: 0 .9rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--navy); font-weight: 600; cursor: pointer; }