/* AlameinGo's shared design tokens (2026-10-30, the approved palette) and the look of every page except the home page.
   The tokens are the single source for these colours; the internal pages map the older design-system variables
   (styles.css :root) onto them, so buttons, links, borders, text and section bands follow without per-page rules.
   Dark colours stay in the header; the page body is white with very light gray sections. Everything below the token
   block is scoped to body[data-route]:not([data-route="home"]), so the home page keeps its own design (home.css), and
   nothing applies before app.js has set the route (no flash of the dark header over the home photo). */
:root{
  --ag-header:#243C50;        /* header background */
  --ag-header-end:#314B60;    /* header gradient end */
  --ag-gold:#C9A45D;          /* gold logo accent */
  --ag-surface:#FFFFFF;       /* page and card backgrounds */
  --ag-section:#F5F6F7;       /* very light gray sections */
  --ag-border:#E5E7EB;        /* borders and dividers */
  --ag-heading:#172B4D;       /* headings and primary text */
  --ag-text-2:#596579;        /* secondary text */
  --ag-primary:#17658A;       /* primary buttons, links, selected checkboxes and sliders */
  --ag-primary-hover:#124F6D; /* primary button hover */
  --ag-selected:#243C50;      /* selected secondary controls */
  --ag-on-dark:#FFFFFF;       /* text on dark backgrounds and buttons */
  --ag-primary-soft:#E8F1F5;  /* tint of the primary, for selected rows and chips */
}

body[data-route]:not([data-route="home"]){
  --ink:var(--ag-selected);--ink-deep:var(--ag-primary-hover);--ink-soft:var(--ag-primary-soft);
  --accent:var(--ag-primary);--accent-soft:var(--ag-primary-soft);--accent-text:var(--ag-primary-hover);
  --gold:var(--ag-gold);
  --bg:var(--ag-surface);--card:var(--ag-surface);--stone:var(--ag-section);--sand:var(--ag-section);
  --line:var(--ag-border);--line-strong:#D1D5DB;
  --text:var(--ag-heading);--muted:var(--ag-text-2);
  background:var(--ag-surface);color:var(--ag-heading);accent-color:var(--ag-primary)
}
/* low specificity on purpose: components that set their own heading or link colour (the assistant's dark panel) keep it */
:where(body[data-route]:not([data-route="home"])) h1,:where(body[data-route]:not([data-route="home"])) h2,:where(body[data-route]:not([data-route="home"])) h3,:where(body[data-route]:not([data-route="home"])) h4{color:var(--ag-heading)}
:where(body[data-route]:not([data-route="home"])) main a:where(:not(.btn,.logo)),:where(body[data-route]:not([data-route="home"])) .link-btn{color:var(--ag-primary)}
body[data-route]:not([data-route="home"]) .btn-ink{background:var(--ag-primary);color:var(--ag-on-dark);border-color:var(--ag-primary)}
body[data-route]:not([data-route="home"]) .btn-ink:hover{background:var(--ag-primary-hover);border-color:var(--ag-primary-hover)}
body[data-route]:not([data-route="home"]) .btn-ghost:hover{border-color:var(--ag-selected);background:var(--ag-section)}
body[data-route]:not([data-route="home"]) .chip[aria-pressed="true"],body[data-route]:not([data-route="home"]) .chip.on{background:var(--ag-selected);border-color:var(--ag-selected);color:var(--ag-on-dark)}
body[data-route]:not([data-route="home"]) input[type="checkbox"],body[data-route]:not([data-route="home"]) input[type="radio"],body[data-route]:not([data-route="home"]) input[type="range"]{accent-color:var(--ag-primary)}
body[data-route]:not([data-route="home"]) :focus-visible{outline-color:var(--ag-primary)}

/* ---- the header: navy with a subtle gradient, the white-and-gold wordmark, white navigation ---- */
body[data-route]:not([data-route="home"]) header.top{background:linear-gradient(90deg,var(--ag-header),var(--ag-header-end));border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body[data-route]:not([data-route="home"]) header.top.is-scrolled{box-shadow:0 4px 18px rgba(23,43,77,.18)}
body[data-route]:not([data-route="home"]) header.top .logo{background:none;box-shadow:none}
body[data-route]:not([data-route="home"]) header.top .logo img.logo-mark:not(.logo-mark-light){display:none}
body[data-route]:not([data-route="home"]) header.top .logo img.logo-mark.logo-mark-light{display:block}
body[data-route]:not([data-route="home"]) header.top .logo .logo-tag{display:none}
body[data-route]:not([data-route="home"]) header.top .navlinks a{color:var(--ag-on-dark)}
body[data-route]:not([data-route="home"]) header.top .navlinks a:hover{color:#fff;opacity:.88}
body[data-route]:not([data-route="home"]) header.top .navlinks a::after{background:var(--ag-gold)}
body[data-route]:not([data-route="home"]) header.top .nav .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:var(--ag-on-dark)}
body[data-route]:not([data-route="home"]) header.top .nav .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
body[data-route]:not([data-route="home"]) header.top .nav .btn-ink{background:var(--ag-on-dark);border-color:var(--ag-on-dark);color:var(--ag-header)}
body[data-route]:not([data-route="home"]) header.top .nav .btn-ink:hover{background:#EEF1F4;border-color:#EEF1F4}
body[data-route]:not([data-route="home"]) header.top .nav .avatar-sm{background:#fff}
/* the dropdowns opened from the header stay white cards with dark text */
body[data-route]:not([data-route="home"]) header.top .menu-list{color:var(--ag-heading)}
body[data-route]:not([data-route="home"]) header.top .menu-list .btn-ghost{background:transparent;border-color:var(--ag-border);color:var(--ag-heading)}

/* ---- the body: white, with very light gray bands and white cards ---- */
body[data-route]:not([data-route="home"]) .site-footer{background:var(--ag-section);border-top:1px solid var(--ag-border);color:var(--ag-text-2)}
:where(body[data-route]:not([data-route="home"])) .muted,:where(body[data-route]:not([data-route="home"])) .sub{color:var(--ag-text-2)}

/* the assistant keeps its navy panel and face; its light side follows the page palette */
body[data-route]:not([data-route="home"]) .as-shell{--as-ivory:var(--ag-section);--as-line:var(--ag-border);--as-text:var(--ag-text-2);--as-ocean:var(--ag-primary)}

/* Passwordless email sign-in with a 6-digit code (app.js showCodeStep): the "or" divider and mode switch in the login
   dialog, and the code step that replaces the form right after the code is sent. Logical properties only, so Arabic
   mirrors; the code field itself stays left-to-right (digits). */
.ml-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:14px 0 12px}
.ml-or[hidden]{display:none}
.ml-or::before,.ml-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ml-mode-btn{width:100%;justify-content:center;padding:12px;font-weight:600}
.ml-email{display:inline-block;max-width:100%;color:var(--ag-heading);font-weight:700;unicode-bidi:isolate;overflow-wrap:anywhere}
.ec-step{text-align:center;padding-top:4px}
.ec-step[hidden]{display:none}
.ec-illus{width:120px;height:90px;margin:0 auto 4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cellipse cx='80' cy='110' rx='54' ry='6' fill='%23172B4D' opacity='.08'/%3E%3Crect x='44' y='12' width='72' height='52' rx='6' fill='%23FFF8EA' stroke='%23E5E7EB'/%3E%3Crect x='54' y='22' width='52' height='14' rx='4' fill='%23C9A45D'/%3E%3Crect x='54' y='42' width='40' height='4' rx='2' fill='%23D1D5DB'/%3E%3Cpath d='M22 40 80 76 138 40V94a10 10 0 0 1-10 10H32a10 10 0 0 1-10-10Z' fill='%23243C50'/%3E%3Cpath d='M22 40 80 76 138 40' fill='none' stroke='%23C9A45D' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M22 98 64 66M138 98 96 66' stroke='%23314B60' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.ec-title{margin:8px 0 8px;font-size:1.35rem;color:var(--ag-heading)}
.ec-text{color:var(--ag-text-2);font-size:.95rem;line-height:1.6;margin:0 0 16px}
.ec-label{display:block;font-weight:600;font-size:.88rem;color:var(--ag-heading);margin-bottom:6px}
#loginCodeStep .ec-code{display:block;width:100%;max-width:280px;margin:0 auto;padding:12px 10px;border:1.5px solid var(--line-strong);border-radius:12px;
  font:700 1.9rem/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.42em;text-indent:.42em;text-align:center;color:var(--ag-heading);background:#fff}
#loginCodeStep .ec-code:focus{outline:none;border-color:var(--ag-primary);box-shadow:0 0 0 3px var(--ag-primary-soft)}
#loginCodeStep .ec-code::placeholder{color:#C4C9D2}
.ec-note{margin:10px 0 0;color:var(--ag-text-2);font-size:.85rem}
.ec-notice{color:#1E7A46;font-size:.88rem;font-weight:600;margin-top:10px}
.ec-notice:empty,.ec-step .err:empty{display:none}
.ec-step .err{margin-top:10px}
.ec-btn{width:100%;justify-content:center;padding:13px;margin-top:16px;min-height:48px}
.ec-row{display:flex;gap:10px;margin-top:10px}
.ec-row .btn{flex:1;justify-content:center;padding:11px 8px;min-height:44px;font-size:.9rem}
.ec-row .btn:disabled{opacity:.6;cursor:default}
.ec-hint{color:var(--ag-text-2);font-size:.82rem;margin:14px 0 0}
.ec-dev{font-size:.8rem;color:var(--ag-text-2);margin:8px 0 0}
#loginFooterLines[hidden]{display:none}
@media (max-width:420px){.ec-row{flex-direction:column}#loginCodeStep .ec-code{font-size:1.7rem}}