/* Citadel product surface — citadel.advisy.com (login + dashboard).
   The DESIGN.md system, ported to a DARK-FIRST product surface.

   citadel.advisy.com is a separate origin and cannot <link> advisy.com's
   stylesheets, so the tokens are carried over here verbatim (advisy.css:4-9).
   The one deliberate divergence: advisy.css:10 sets a LIGHT --paper body for the
   marketing page. A dashboard is a product surface, so it goes dark on
   ink/surface with round product radii — matching the brand's own in-page
   product mockups (the voice modal, the console) rather than the marketing
   page's light-body rhythm. See DESIGN.md "Overview" and "Sharp-vs-Round".

   EVERY rule the pages need lives in THIS file. No page carries a <style> block
   and no element carries a style="..." attribute, which is what lets Plan 05-09
   ship a Content-Security-Policy with no 'unsafe-inline' in style-src.
   (The per-agent chip accents do NOT force it: el.style.setProperty() is a CSSOM
   assignment, which CSP does not govern.)

   Mobile-first throughout: the base rules ARE the phone case; breakpoints widen. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  /* Brand tokens — copied VERBATIM from public/assets/advisy.css:4-9. */
  --ink: #101E26; --surface: #16242e; --line: rgba(238,243,246,0.12);
  --cyan: #00BFE3; --cyan-d: #0094C2; --blue-d: #0061A0;
  --paper: #F1F5F8; --paper2: #E2EBF0; --mute: rgba(238,243,246,0.72);
  --body: #3a4b57; --body2: #48555f;

  /* The ten council accents (DESIGN.md colors:). These ARE the category /
     knowledge-source palette for chips — do not invent new category colors. */
  --agent-athena: #C6A35A;
  --agent-mars: #C53735;
  --agent-metis: #16A19A;
  --agent-atlas: #4A83D1;
  --agent-mercury: #102E72;
  --agent-midas: #C6A35A;
  --agent-apollo: #D99522;
  --agent-iris: #7E4EB0;
  --agent-venus: #C84E88;
  --agent-sol: #E4D2A6;

  /* Semantic tokens the dashboard needs (DESIGN.md "Semantic"). */
  --success: #19C37D;
  --pending: #E4C24A;
  --live-red: #C53735;
  --chip-text: #EAFBFF;
}

/* Dark-first body — the deliberate divergence from advisy.css:10. */
body {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cyan); color: var(--ink); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; width: 100%; }
.serif { font-family: 'Newsreader', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }

/* The brand's single most identifiable move: exactly ONE italic-cyan accent
   word per headline. Never the whole line. */
.em { font-style: italic; color: var(--cyan); }

/* !important is load-bearing, not laziness. .hidden is a single-class selector, and so
   are .empty-state (display:flex) and .dash (display:flex) below it. Same specificity,
   later rule wins — so without this, an element carrying BOTH classes renders anyway.
   That bug shows a populated dashboard the "the council hasn't met you yet" panel at the
   same time, and it is invisible to every source-level gate. */
.hidden { display: none !important; }

/* ---------- chrome: sticky header, workspace switcher, footer ---------- */

.cit-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,30,38,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.cit-headrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 14px; padding-bottom: 14px;
}
.cit-logo { display: flex; align-items: center; gap: 11px; color: var(--paper); }
.cit-logo img { object-fit: contain; }
.cit-logo span { font-size: 19px; font-weight: 600; letter-spacing: 0.02em; }

/* Workspace switcher — D-01's "switch between workspaces" affordance. Same
   Advisy account, separate sign-in per origin; this is the link that carries
   the user across. citadel.html:51 already cross-links CoPilot from the header
   bar, so this is an established pattern, not a novel one. */
.cit-ws { display: flex; align-items: center; gap: 8px; }
.cit-ws-label {
  display: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(238,243,246,0.5);
}
.cit-ws-cur {
  font-size: 14px; font-weight: 600; color: var(--chip-text);
  background: rgba(0,191,227,0.16); border: 1px solid rgba(0,191,227,0.45);
  padding: 8px 15px; border-radius: 100px;
}
.cit-ws-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 15px; font-weight: 500; color: var(--mute);
}
.cit-ws-link:hover { color: var(--paper); }

.cit-nav { display: none; align-items: center; gap: 20px; }
.cit-navlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 500; color: var(--mute);
}
.cit-navlink:hover { color: var(--paper); }

/* A list, not a lone link, so Phase 6 can add "Memos" as a sibling item without a
   rewrite. Cyan is the brand's active state — no second hue. */
.cit-navlist { display: flex; align-items: center; gap: 18px; list-style: none; }
.cit-navlink.is-active { color: var(--cyan); font-weight: 600; }

.cit-signout {
  min-height: 44px; padding: 10px 18px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--paper);
  background: transparent; border: 1px solid rgba(238,243,246,0.3);
  border-radius: 10px;
}
.cit-signout:hover { border-color: var(--cyan); color: var(--cyan); }

.cit-navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 8px; line-height: 0; cursor: pointer;
  background: none; border: 0; color: var(--paper);
}
.cit-mobnav {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: rgba(16,30,38,0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 8px 0 14px;
}
.cit-mobnav.open { display: block; }
.cit-mobnav a, .cit-mobnav button {
  display: flex; align-items: center; width: 100%; min-height: 52px;
  padding: 14px 18px; text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 500; color: var(--paper);
  background: none; border: 0; border-bottom: 1px solid rgba(238,243,246,0.06);
}

.cit-main { flex: 1; padding: 34px 0 56px; }

.cit-footer {
  background: var(--ink); border-top: 1px solid var(--line);
  color: rgba(238,243,246,0.66); padding: 34px 0;
}
.cit-footrow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; font-size: 14px;
}
.cit-footrow a { color: rgba(238,243,246,0.66); }
.cit-footrow a:hover { color: var(--cyan); }

/* ---------- product components: round radii, never the sharp 3px CTA ---------- */

/* The section card. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 20px;
}

/* Ported from citadel-voice.css:52 (.cv-guide) — the dark inset panel. Carries
   the session cards and the "what the council learned" bodies. */
.card-inset {
  background: rgba(16,30,38,0.45); border: 1px solid rgba(238,243,246,0.13);
  border-radius: 14px; padding: 16px 18px 15px; text-align: left;
}

/* The ten-accent source chip. JS sets --acc per chip (el.style.setProperty),
   CSS derives the tint. The #00BFE3 fallback is what renders for an unmapped
   agent id — always keep it. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  padding: 8px 15px; border-radius: 100px;
  color: var(--chip-text);
  background: color-mix(in srgb, var(--acc, #00BFE3) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, #00BFE3) 45%, transparent);
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--acc, #00BFE3) 80%, transparent);
}

/* Chat bubbles — lifted verbatim from public/index.html:50-53, where they were
   trapped in a page-local style block. The session/transcript pattern. */
.bub-in {
  align-self: flex-start; max-width: 82%;
  background: rgba(238,243,246,0.07);
  border-radius: 12px 12px 12px 3px; padding: 11px 14px;
}
.bub-out {
  align-self: flex-end; max-width: 84%;
  background: rgba(0,191,227,0.16); border: 1px solid rgba(0,191,227,0.3);
  border-radius: 12px 12px 3px 12px; padding: 11px 14px;
}
.bub-meta { font-size: 11px; color: rgba(238,243,246,0.5); margin-bottom: 3px; }
.bub-txt { font-size: 14px; color: var(--paper); line-height: 1.45; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(238,243,246,0.66);
}
.input-dark {
  width: 100%; min-height: 44px;
  font-size: 16px; line-height: 1.5; color: var(--paper);
  background: rgba(238,243,246,0.06); border: 1px solid rgba(0,191,227,0.35);
  border-radius: 6px; padding: 15px 16px;
}
.input-dark::placeholder { color: rgba(238,243,246,0.45); }
.input-dark:focus { outline: none; border-color: var(--cyan); }
.input-dark:disabled { opacity: 0.55; }

/* Password field + its show/hide control. */
.pw-wrap { position: relative; display: flex; }
.pw-wrap .input-dark { padding-right: 74px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  min-height: 40px; padding: 0 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan);
  background: none; border: 0; border-radius: 6px;
}
.pw-toggle:hover { color: var(--paper); }

/* THE primary action. Elevation Level 3 (the cyan glow) is reserved by DESIGN.md
   for the ONE primary action in a view — this is the only rule that carries it. */
.btn-product {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 15px 34px; cursor: pointer;
  font-size: 16.5px; font-weight: 700; line-height: 1.2;
  color: var(--ink); background: var(--cyan);
  border: 0; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,191,227,0.28);
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.btn-product:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,191,227,0.4); }
.btn-product:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 14px 28px; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.2;
  color: var(--paper); background: transparent;
  border: 1px solid rgba(238,243,246,0.3); border-radius: 12px;
  transition: border-color .2s, background .2s, opacity .2s;
}
.btn-ghost:hover { border-color: rgba(238,243,246,0.55); background: rgba(238,243,246,0.05); }
.btn-ghost:disabled { opacity: 0.6; cursor: default; }
.btn-ghost svg { width: 18px; height: 18px; flex: none; }

/* The destructive affordance (DESIGN.md button-product-live). */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 15px 34px; cursor: pointer;
  font-size: 16.5px; font-weight: 700; line-height: 1.2;
  color: var(--paper); background: transparent;
  border: 1px solid var(--live-red); border-radius: 12px;
  transition: background .2s;
}
.btn-danger:hover { background: rgba(197,55,53,0.14); }

.btn-block { width: 100%; }

/* ---------- login ---------- */

.auth-main {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 0 56px;
}

/* Built on DESIGN.md's `modal` component. */
.auth-card {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid rgba(0,191,227,0.35);
  border-radius: 16px; padding: 30px 26px 22px;
}
.auth-head { font-size: 34px; line-height: 1.1; }
.auth-sub {
  margin-top: 11px; margin-bottom: 22px;
  font-size: 16px; line-height: 1.5; color: rgba(238,243,246,0.72);
}
.auth-actions { margin-top: 20px; }

.auth-div {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0; font-size: 12.5px; color: rgba(238,243,246,0.45);
}
.auth-div::before, .auth-div::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: rgba(238,243,246,0.66);
}
.auth-foot a { color: var(--cyan); font-weight: 600; }

/* A quiet error strip. Copy that lands here stays calm and declarative — no
   exclamation points (DESIGN.md "Voice & Tone"). */
.banner-error {
  margin-bottom: 18px; padding: 12px 14px;
  font-size: 14px; line-height: 1.45; color: var(--paper);
  background: rgba(197,55,53,0.12); border: 1px solid var(--live-red);
  border-radius: 10px;
}

/* ---------- dashboard (Plan 05-07) ----------
   Every rule the dashboard needs lives here, because home.html carries no <style>
   block and no style="..." attribute. The ONE thing JS sets on an element is the
   --acc custom property on a chip (el.style.setProperty), which is a CSSOM write,
   not an inline style attribute — CSP does not govern it. */

.load-line {
  padding: 40px 0;
  font-size: 16px; color: rgba(238,243,246,0.5);
}

.dash { display: flex; flex-direction: column; gap: 20px; }

/* Serif headlines, each carrying exactly one italic-cyan .em phrase. */
.sec-head { font-size: 28px; line-height: 1.1; }
.sec-lead {
  margin-top: 10px;
  font-size: 15px; line-height: 1.55; color: rgba(238,243,246,0.66);
  max-width: 68ch;
}

/* The lead: the council's synthesized read on the business. */
.profile-text {
  margin-top: 18px;
  font-size: 17px; line-height: 1.6; color: var(--paper);
  max-width: 72ch;
}

.meta { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: rgba(238,243,246,0.5); }
.meta:empty { display: none; }
.muted { color: rgba(238,243,246,0.5); }

/* ---------- knowledge base ---------- */

.cat-group { margin-top: 22px; }
.cat-head {
  margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(238,243,246,0.66);
}

/* Mobile-first: 1-up. Widens to 2-up, then 3-up (DESIGN.md "Responsive Strategy" —
   step down one column count per breakpoint, never jump straight to 1-up). */
.fact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fact-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.fact-text { font-size: 15px; line-height: 1.5; color: var(--paper); }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-foot .meta { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head .meta { margin-top: 0; margin-left: auto; }

.role-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(238,243,246,0.5);
}

/* ---------- per-agent notes (TRANS-01) ---------- */

.note-strip { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.note-card { display: flex; flex-direction: column; }
.note-text { font-size: 15px; line-height: 1.55; color: var(--paper); }

/* ---------- what each call taught them ---------- */

.feed { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.feed-facts { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feed-facts li { display: flex; flex-direction: column; gap: 3px; }
.feed-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(238,243,246,0.5);
}
.feed-text { font-size: 15px; line-height: 1.5; color: var(--paper); }

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

.sessions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.session-card .bub-in { max-width: 100%; }

/* ---------- empty state (Plan 05-07's "the council hasn't met you yet") ---------- */

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 56px 20px; text-align: center;
}
.empty-state h2 { font-size: 30px; line-height: 1.1; }
.empty-state p {
  max-width: 460px;
  font-size: 16px; line-height: 1.55; color: rgba(238,243,246,0.66);
}
.empty-state .btn-product { margin-top: 10px; }

/* ---------- TRANS-02: the write surface (Plan 05-09) ----------
   Every rule the edit / delete / delete-everything controls need lives HERE, for the same
   reason the rest of this file does: home.html carries no <style> block and no style="..."
   attribute, which is what lets the CSP ship with no 'unsafe-inline' in style-src. */

/* The affirmative result of a write. .banner-error (above) is its counterpart, and
   citadel-transparency.js swaps the modifier class rather than the element. */
.banner {
  margin-bottom: 18px; padding: 12px 14px;
  font-size: 14px; line-height: 1.45; color: var(--paper);
  border-radius: 10px;
}
.banner-ok { background: rgba(25,195,125,0.11); border: 1px solid var(--success); }

/* Quiet per-card affordances. DESIGN.md reserves the saturated cyan fill for the ONE
   primary action in a view, so neither of these is filled — a red button on every card
   would make deleting look like the thing the page wants you to do. */
.fact-actions { display: flex; gap: 8px; }
.btn-mini {
  min-height: 34px; padding: 7px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: rgba(238,243,246,0.8); background: transparent;
  border: 1px solid rgba(238,243,246,0.22); border-radius: 8px;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-mini:hover { color: var(--paper); border-color: rgba(238,243,246,0.5); background: rgba(238,243,246,0.05); }
.btn-mini-danger { color: rgba(238,243,246,0.8); border-color: rgba(197,55,53,0.5); }
.btn-mini-danger:hover { color: var(--paper); border-color: var(--live-red); background: rgba(197,55,53,0.14); }
.btn-mini:disabled { opacity: 0.55; cursor: default; }

/* The compact variants used inside a card and inside the modal. box-shadow: none is the
   load-bearing part — Elevation Level 3 (the cyan glow) belongs to a page's single primary
   action, not to a Save button sitting inside a fact card. */
.btn-sm {
  min-height: 38px; padding: 9px 20px;
  font-size: 14.5px; border-radius: 9px;
}
.btn-product.btn-sm { box-shadow: none; }
.btn-product.btn-sm:hover { transform: none; box-shadow: 0 8px 20px rgba(0,191,227,0.28); }

/* While a card is being edited or is asking to be deleted, its read-only face steps aside.
   Same specificity trap as .hidden — these are two-class selectors beating the single-class
   .fact-text / .card-foot / .fact-actions rules above, so they win on specificity, not on
   source order. */
.fact-card.is-editing .fact-text,
.fact-card.is-editing .card-foot,
.fact-card.is-editing .fact-actions,
.fact-card.is-confirming .fact-actions { display: none; }

.fact-editor { display: flex; flex-direction: column; }
.fact-editor .field:last-of-type { margin-bottom: 12px; }
.fact-input { min-height: 96px; resize: vertical; font-size: 15px; padding: 12px 13px; }
.fact-category { padding: 10px 12px; min-height: 42px; }

.char-count { font-size: 12px; color: rgba(238,243,246,0.5); }
.char-count.over { color: var(--live-red); font-weight: 600; }

.edit-error { margin-bottom: 12px; }

.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* One inline step, not a modal. A modal on every single fact deletion is friction that
   teaches people to click straight through the modal that actually matters. */
.fact-confirm { display: flex; flex-direction: column; gap: 12px; }
.confirm-text { font-size: 14px; line-height: 1.45; color: var(--paper); }

/* The danger zone: a real section of the page, below everything else, not a hidden switch. */
.panel-danger { border-color: rgba(197,55,53,0.4); }
.panel-danger .btn-danger { margin-top: 20px; }

/* ---------- the delete-everything dialog ---------- */

/* Built on DESIGN.md's `modal` component, same as .auth-card. .hidden's !important is what
   beats this display:flex — see the note on .hidden above. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 16px; overflow-y: auto;
  background: rgba(16,30,38,0.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.is-modal { overflow: hidden; }

.modal-card {
  width: 100%; max-width: 560px; margin: auto;
  background: var(--surface); border: 1px solid rgba(197,55,53,0.5);
  border-radius: 16px; padding: 28px 24px 22px;
}
.modal-head { font-size: 30px; line-height: 1.1; }

.wipe-sub {
  margin-top: 22px; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(238,243,246,0.66);
}

.wipe-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.wipe-list li {
  position: relative; padding-left: 16px;
  font-size: 14.5px; line-height: 1.5; color: var(--paper);
}
.wipe-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--live-red);
}
/* What we KEEP is not a threat, and it should not read like one. */
.wipe-keep li::before { background: var(--success); }
.wipe-keep li { color: rgba(238,243,246,0.8); }

.wipe-warn {
  margin: 20px 0; padding: 11px 13px;
  font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--paper);
  background: rgba(197,55,53,0.12); border: 1px solid rgba(197,55,53,0.45);
  border-radius: 10px;
}

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-actions .btn-danger:disabled { opacity: 0.45; cursor: default; }

/* ---------- breakpoints: widen from the phone case ---------- */

/* The nav row collapses to logo + menu button below 561px, following
   advisy.css's .mobnav pattern. Above it, the full row shows and the
   mobile sheet is force-closed (the .open override has to be beaten here,
   or a menu left open on a phone stays open after a rotate to landscape). */
@media (min-width: 561px) {
  .wrap { padding: 0 26px; }
  .cit-nav { display: flex; }
  .cit-navtoggle { display: none; }
  .cit-mobnav, .cit-mobnav.open { display: none; }
  .auth-main { align-items: center; padding: 56px 0 72px; }
  .auth-head { font-size: 40px; }
  .panel { padding: 26px 24px; }
  .sec-head { font-size: 32px; }
  .fact-grid, .note-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 961px) {
  .wrap { padding: 0 48px; }
  .cit-headrow { padding-top: 18px; padding-bottom: 18px; }
  .cit-ws-label { display: inline; }
  .cit-main { padding: 48px 0 64px; }
  .cit-footer { padding: 52px 0; }
  .dash { gap: 24px; }
  .sec-head { font-size: 38px; }
}

@media (min-width: 1200px) {
  .fact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Below 561px the auth card goes edge-to-edge within the 18px gutter. */
@media (max-width: 560px) {
  .auth-card { max-width: none; padding: 26px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-product, .btn-ghost, .btn-danger { transition: none; }
  .btn-product:hover { transform: none; }
}

h1 { text-wrap: balance; }
h2, h3 { text-wrap: pretty; }