/* ============================================================================
   Sanam Platform — the INTEGRATED ACCESS HUB skin, on the "Dusk" brand system.

   ONE Sanam, premium + calm: the single front door that makes the four fronts
   read as one product, not a pile of links. The hub now wears the SAME dark
   Dusk system as the operator portal (operator_dusk.css) + the decks — so the
   front door visually belongs with the rest of the platform.

   The Dusk system (shared with the operator portal):
     * dark charcoal/oud ground (--d-bg #1A130D) + copper #CC9248 / saffron
       #E6AE45 glow; warm depth, faint grain.
     * Marcellus (display) + Hanken Grotesk (UI) + Noto Naskh Arabic (Arabic).
     * the living-horizon line motif; copper top-accent on cards + hover lift.
     * financial-loss-in-amber (never red); AA contrast on the dark ground.

   Design law kept: everything is SCOPED under body.dusk so the shared :root in
   platform.css is untouched and the OTHER fronts that load platform.css are not
   affected. The --d-* tokens are declared HERE (self-contained — the hub does
   NOT load the operator-scoped operator_dusk.css). Logical CSS properties
   throughout (one sheet serves LTR + RTL). The four front cards sit in a
   responsive grid with generous, OVERLAP-FREE spacing.
   ========================================================================== */

/* ---- the Dusk palette, scoped to the hub front door ------------------------- */
body.dusk {
  --d-bg: #1A130D; --d-bg2: #231910; --d-panel: #241A12; --d-card: #2E2218;
  --d-card-2: #352719; --d-card-3: #291E14;
  --d-line: #3A2B1E; --d-line-2: #4A3727; --d-line-3: #58402A;
  --d-cream: #F4EDE2; --d-tan: #C7AE8C; --d-ink: #B49679; --d-ink-2: #C0A284;
  --d-copper: #CC9248; --d-copper-2: #B87333; --d-copper-press: #E0A55C;
  --d-saff: #E6AE45; --d-green: #94AB83; --d-sea: #5E9AA0;
  --d-loss: #E0A07A;
  --d-shadow: 0 18px 40px rgba(0,0,0,.42);
  --d-shadow-2: 0 30px 56px rgba(0,0,0,.5);

  background: var(--d-bg);
  color: var(--d-cream);
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* dark native form chrome (the dev switcher's <select> dropdowns). */
  color-scheme: dark;
}
[dir="rtl"] body.dusk { font-family: "Noto Naskh Arabic", "Amiri", serif; }

/* display headings on the dark ground (Marcellus in LTR; Naskh carries RTL). */
body.dusk h1, body.dusk h2, body.dusk h3, body.dusk h4 { color: var(--d-cream); }
[dir="rtl"] body.dusk h1, [dir="rtl"] body.dusk h2,
[dir="rtl"] body.dusk h3, [dir="rtl"] body.dusk h4 {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
}
body.dusk .muted { color: var(--d-tan); }
body.dusk .faint { color: var(--d-ink); }
body.dusk a { color: var(--d-saff); }
body.dusk ::selection { background: #CC924855; }

/* very faint grain for warmth/depth (matches the operator portal). */
body.dusk::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .4; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(230,174,69,.05) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* high-contrast saffron focus ring on the dark ground (AA for UI/non-text). */
body.dusk :focus-visible { box-shadow: 0 0 0 3px var(--d-saff); outline: none; }

/* the skip-link, re-skinned to copper (it inherits the F2 copper otherwise). */
body.dusk .skip-link { background: var(--d-copper-2); color: #1A130D; }

/* ---- the hub ground (the living copper/saffron horizon glow) --------------- */
.hub {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* twin copper + saffron glows at the top — the Dusk "living horizon" feel,
     no motion. Sits over the dark oud ground. */
  background:
    radial-gradient(1100px 460px at 16% -160px, rgba(204,146,72,.22), transparent 62%),
    radial-gradient(820px 360px at 92% -120px, rgba(230,174,69,.12), transparent 58%),
    linear-gradient(180deg, #241A11, var(--d-bg) 60%);
}

/* ---- ONE shared identity header (mirrors the shell topbar pattern) --------- */
.hub-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 32px; border-bottom: 1px solid var(--d-line);
  background: rgba(31,22,14,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hub-top .brand { padding: 0; display: flex; align-items: center; gap: 10px; }
/* the wordmark on the dark ground — Marcellus cream, copper hump + Arabic. */
.hub-top .brand-text { font-family: "Marcellus", serif; font-size: 1.15rem; color: var(--d-cream); }
.hub-top .brand-text .ar { font-family: "Noto Naskh Arabic", "Amiri", serif; color: var(--d-copper); }
.hub-top .hump {
  background: var(--d-copper);
  box-shadow: 0 0 9px rgba(204,146,72,.45), inset 0 -2px 0 rgba(0,0,0,.25);
}
.hub-top .spacer { flex: 1; }
.hub-top-tag {
  font-size: .78rem; color: var(--d-saff);
  background: #3B2E14; border: 1px solid var(--d-line-2);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}

/* the locale toggle on the dark ground */
.hub-top .locale-toggle { border-color: var(--d-line-2); }
.hub-top .locale-toggle button { background: #2B2017; color: var(--d-ink); }
.hub-top .locale-toggle button.on { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #1A130D; }

/* "Register your business" CTA — a quiet copper-outline pill on the dark ground */
.hub-register {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--d-cream); border: 1px solid var(--d-line-2); background: #2B2017;
  transition: border-color .2s var(--ease, ease), background .2s var(--ease, ease), color .2s var(--ease, ease);
}
.hub-register:hover { border-color: var(--d-copper); background: #2F2216; color: var(--d-cream); text-decoration: none; }

/* ---- Hero (the one-platform story) ---------------------------------------- */
.hub-main {
  flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 56px 24px 24px; position: relative; z-index: 1;
}
#hub-main:focus { outline: none; }
.hub-hero { max-width: 760px; }
.hub-kicker {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--d-saff); margin: 0 0 12px;
}
.hub-kicker .ar { letter-spacing: 0; text-transform: none; color: var(--d-copper); }
.hub-hero h1 {
  font-family: "Marcellus", serif;
  font-size: 2.6rem; line-height: 1.1; max-width: 18ch; margin: 0 0 16px;
  color: var(--d-cream);
}
[dir="rtl"] .hub-hero h1 { font-family: "Noto Naskh Arabic", "Amiri", serif; }
.hub-lead { font-size: 1.1rem; color: var(--d-tan); max-width: 56ch; margin: 0 0 20px; line-height: 1.6; }

/* the one-spine chips (List -> Book -> Settle -> Comply) */
.spine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.spine-step {
  display: inline-flex; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--d-cream);
  background: #2B2017; border: 1px solid var(--d-line-2);
  border-radius: 999px; padding: 6px 15px;
}
.spine-arrow { color: var(--d-copper); font-size: 1rem; }
[dir="rtl"] .spine-arrow { transform: scaleX(-1); }

/* ---- The access grid (all four fronts) ------------------------------------ */
.hub-grid-wrap { margin-top: 40px; }
.hub-grid-title {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--d-ink); margin: 0 0 18px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.front-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px; min-height: 200px; position: relative; overflow: hidden;
  border: 1px solid var(--d-line-2); border-radius: 20px;
  background: linear-gradient(180deg, rgba(48,35,23,.92), rgba(42,31,21,.92));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 16px 38px rgba(0,0,0,.40); color: var(--d-cream);
  cursor: pointer; text-align: start; font: inherit; width: 100%;
  transition: border-color .25s var(--ease, ease), box-shadow .25s var(--ease, ease), transform .25s var(--ease, ease);
}
/* the copper top-accent bar — the Dusk card signature (matches the stat tiles) */
.front-card::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
  background: linear-gradient(90deg, var(--d-copper), var(--d-saff));
}
.front-card:hover {
  border-color: var(--d-line-3); box-shadow: var(--d-shadow-2), 0 0 30px rgba(204,146,72,.18);
  text-decoration: none; transform: translateY(-4px);
}
.front-card:focus-visible { border-color: var(--d-copper); }

.fc-top { display: flex; align-items: center; gap: 12px; }
.fc-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: #3B2E14;
  display: inline-flex; align-items: center; justify-content: center;
}
.fc-ico svg { width: 24px; height: 24px; stroke: var(--d-saff); }
.fc-audience {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--d-ink);
}
.front-card h3 { margin: 6px 0 0; font-size: 1.25rem; color: var(--d-cream); }
.fc-desc { color: var(--d-tan); font-size: .92rem; margin: 0; flex: 1; line-height: 1.55; }
.fc-go {
  margin-top: auto; color: var(--d-saff); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; padding-top: 6px;
}
.fc-go svg { width: 16px; height: 16px; stroke: var(--d-saff); }
[dir="rtl"] .fc-go svg { transform: scaleX(-1); }

/* the "you're here" / role marker chip on a card (prod role-scoping + the dev
   acting-as preview). Sits top-end, never overlapping the icon. */
.fc-mark {
  margin-inline-start: auto;
  font-size: .68rem; color: var(--d-tan);
  background: #2B2017; border: 1px solid var(--d-line-2);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
/* a front the current (prod) role does NOT grant: shown calm + non-clickable */
.front-card.locked { opacity: .5; cursor: not-allowed; }
.front-card.locked:hover { transform: none; border-color: var(--d-line-2); box-shadow: 0 16px 38px rgba(0,0,0,.40); }
.fc-lock { display: inline-flex; align-items: center; gap: 5px; }
.fc-lock svg { width: 13px; height: 13px; stroke: var(--d-ink); }

/* ---- DEV persona / org switcher ------------------------------------------- */
.hub-switch {
  margin-top: 40px; padding: 24px;
  border: 1px solid var(--d-line-2); border-radius: 20px;
  background: linear-gradient(180deg, rgba(48,35,23,.92), rgba(42,31,21,.92));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 16px 38px rgba(0,0,0,.40);
}
.hub-switch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-switch-head h2 { margin: 0; font-size: 1.15rem; color: var(--d-cream); }
.hub-switch-head .pill-illustrative {
  letter-spacing: .06em; background: #2B2017; color: var(--d-ink);
  border: 1px dashed var(--d-line-2); border-radius: 999px; padding: 3px 10px; font-size: .72rem;
}
.hub-switch-sub { width: 100%; margin: 6px 0 0; font-size: .88rem; color: var(--d-ink); }
.hub-switch-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px;
  align-items: end; margin-top: 18px;
}
.hub-switch-field { margin-bottom: 0; }
.hub-switch-field .lbl { display: block; margin-bottom: 6px; font-size: .82rem; color: var(--d-tan); }
.hub-switch-field select {
  width: 100%; background: #20160E; border: 1px solid var(--d-line-2);
  border-radius: 12px; color: var(--d-cream); padding: 11px 13px; font: inherit; min-height: 44px;
}
.hub-switch-field select:focus { outline: none; border-color: var(--d-copper); }
.hub-switch-field select option { background: #2B2017; color: var(--d-cream); }
.hub-switch-go { display: flex; align-items: stretch; }
.hub-switch-go .btn { width: 100%; }
.hub-switch-status { margin: 12px 0 0; min-height: 1.1em; color: var(--d-ink); }

/* the primary "Enter front" button — the Dusk copper gradient */
.hub-switch .btn-primary {
  background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2));
  border: 1px solid var(--d-copper-2); color: #1A130D; font-weight: 600;
  border-radius: 12px; padding: 12px 18px; min-height: 44px; cursor: pointer;
  box-shadow: 0 8px 26px rgba(204,146,72,.40);
  transition: background .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.hub-switch .btn-primary:hover {
  background: linear-gradient(135deg, var(--d-copper-press), var(--d-copper));
  box-shadow: 0 12px 34px rgba(204,146,72,.55);
}

/* ---- Footer / trust strip ------------------------------------------------- */
.hub-foot { border-top: 1px solid var(--d-line); position: relative; z-index: 1; }
.hub-foot .trust-strip {
  border-top: 0; padding: 18px 32px 30px; max-width: 1080px; margin: 0 auto;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  color: var(--d-tan); font-size: .86rem;
}
.hub-foot .trust-strip .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--d-line-3); }
.hub-foot .trust-strip .pill-illustrative {
  background: #2B2017; color: var(--d-ink); border: 1px dashed var(--d-line-2);
  border-radius: 999px; padding: 3px 11px; font-size: .72rem;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 940px) {
  .hub-switch-row { grid-template-columns: 1fr 1fr; }
  .hub-switch-go { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-switch-row { grid-template-columns: 1fr; }
  .hub-main { padding: 36px 18px 18px; }
  .hub-top { padding: 14px 18px; }
  .hub-hero h1 { font-size: 1.95rem; }
}

/* ---- A5: the hub account bar (return-to-Sanam + sign-out) ------------------ */
.hub-account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(230,174,69,.18); }
.hub-account-who { display: inline-flex; align-items: center; gap: 6px; color: var(--d-ink-2, #c9bca6); font-size: .86rem; margin-inline-end: auto; }
.hub-account-who svg { width: 16px; height: 16px; stroke: currentColor; }
.hub-account .btn svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---- prefers-reduced-motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .front-card { transition: none; }
}