/*
 * Keystra UI: the design system shared by the Keystra Digital Portal (agencies) and the Keystra Factory Admin (our team).
 * Calm, structured and professional: one accent, hairline borders, soft shadows, compact controls. Specification and
 * rules: packages/ui/README.md. Each app adds its own page styles in its app.css; never restyle these tokens there.
 */

/* ── Fonts (self-hosted; SIL Open Font Licence, see fonts/) ── */
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-latin.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-latin-ext.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-display: swap; font-weight: 160 700; src: url(fonts/readex-pro-arabic.woff2) format("woff2-variations"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ── Tokens ── */
:root {
  /* Neutrals: a cool slate scale; each step has one job. */
  --gray-0: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f5f7f9;   /* page */
  --gray-100: #eef1f4;  /* subtle fill, hover */
  --gray-150: #e4e8ec;  /* hairline */
  --gray-200: #d5dbe2;  /* control border */
  --gray-300: #b6bfca;
  --gray-400: #8b96a3;  /* icons, placeholder */
  --gray-500: #636e7b;  /* muted text: at least 4.5:1 on every surface, the grey panels (gray-100) included */
  --gray-600: #4d5864;  /* secondary text */
  --gray-700: #36404b;
  --gray-800: #232c36;
  --gray-900: #131b24;  /* ink */
  /* One accent: Keystra blue. */
  --blue-50: #eef4fc;
  --blue-100: #dce8f8;
  --blue-200: #b9d1f0;
  --blue-500: #2b6cb8;
  --blue-600: #1d5fa8;
  --blue-700: #174d8a;
  --blue-800: #123d6e;
  /* Status (text, fill, border). Never the only signal: always with a word or an icon. */
  --green-50: #ecf7f0; --green-200: #bde3ca; --green-600: #17713f; --green-700: #135d34;
  --amber-50: #fff6e6; --amber-200: #f3d79f; --amber-600: #8f5406; --amber-700: #774505;
  --red-50: #fef2f1;   --red-200: #f4c4bf;   --red-600: #b42318;   --red-700: #931d14;

  /* Roles */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-hover: var(--gray-100);
  --border: var(--gray-150);
  --border-strong: var(--gray-200);
  --control-border: #7c8794; /* form fields: 3.6:1 on white, 3.4:1 on the page (WCAG 1.4.11) */
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-soft: var(--blue-50);
  --accent-border: var(--blue-200);
  --accent-text: var(--blue-700);
  --on-accent: #ffffff;
  --focus: var(--blue-500);

  /* Type: Geist for Latin, Readex Pro for Arabic. */
  --font-sans: "Geist", "Readex Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --leading: 1.5;

  /* Space: a 4px scale. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Shape and depth */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(19, 27, 36, 0.05);
  --shadow-sm: 0 1px 2px rgba(19, 27, 36, 0.06), 0 1px 3px rgba(19, 27, 36, 0.04);
  --shadow-lg: 0 16px 40px rgba(19, 27, 36, 0.16), 0 2px 8px rgba(19, 27, 36, 0.06);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 150ms;

  /* Layout */
  --sidebar-w: 244px;
  --topbar-h: 56px;
  --content-max: 1160px;
  --control-h: 36px;

  /* Names the page styles of both apps still use (kept so a page reads the same tokens). */
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --paper: var(--surface);
  --ground: var(--surface-sunken);
  --accent-ink: var(--on-accent);
  --ok: var(--green-600);
  --warn: var(--amber-600);
  --bad: var(--red-600);
  --radius: var(--r-md);
  --shadow: var(--shadow-xs);

  color-scheme: light;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root:lang(ar) { --font-sans: "Readex Pro", "Geist", ui-sans-serif, system-ui, "Noto Sans Arabic", "Geeza Pro", sans-serif; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-h) + var(--s-2)); }
body { margin: 0; min-height: 100vh; font: inherit; }
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
img, svg { vertical-align: middle; }
a { color: var(--accent-text); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--blue-100); }
h1, h2, h3, h4 { color: var(--text); margin: 0; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); margin-bottom: var(--s-3); letter-spacing: -0.008em; }
h3 { font-size: var(--text-md); margin: var(--s-5) 0 var(--s-1); }
p { margin: 0 0 var(--s-3); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.icon { flex: none; stroke-width: 1.75; }
[dir="rtl"] .icon.flip { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--s-2); top: var(--s-2); background: var(--surface); padding: var(--s-2) var(--s-3); z-index: 60; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.loading { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Shell: sidebar, top bar, content ── */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--gray-25) calc(var(--sidebar-w) - 1px), var(--border) calc(var(--sidebar-w) - 1px) var(--sidebar-w), transparent var(--sidebar-w)); }
[dir="rtl"] .app { background: linear-gradient(270deg, var(--gray-25) calc(var(--sidebar-w) - 1px), var(--border) calc(var(--sidebar-w) - 1px) var(--sidebar-w), transparent var(--sidebar-w)); }
.app.signed-out { background: none; }
.app.signed-out { display: block; }
.app.signed-out .sidebar, .app.signed-out .top { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--gray-25); border-inline-end: 1px solid var(--border); padding: var(--s-3); overflow-y: auto; z-index: 40; }
.brand { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--r-sm); }
.brand:hover { color: var(--text); }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.brand-mark svg { width: 14px; height: 14px; }
.brand-name { font-weight: 650; }
.brand-rest { font-weight: 450; color: var(--text-muted); }
.nav { display: grid; gap: 2px; margin-top: var(--s-4); }
.nav-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); padding: var(--s-4) var(--s-2) var(--s-1); }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a .icon { color: var(--text-faint); }
.nav a:hover { background: var(--surface-hover); color: var(--text); }
.nav a[aria-current] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav a[aria-current] .icon { color: var(--accent); }
@media (forced-colors: active) { .nav a[aria-current] { outline: 2px solid CanvasText; outline-offset: -2px; } }
.sidebar-head { display: flex; align-items: center; gap: var(--s-2); }
.sidebar-head .brand { flex: 1; min-width: 0; }
.sidebar .drawer-close { display: none; }
.nav .count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; padding: var(--s-3) var(--s-2) var(--s-1); font-size: var(--text-xs); color: var(--text-muted); }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.top-title { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: var(--text-sm); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .icon { color: var(--text-faint); }
.crumbs [aria-current] { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); color: var(--text-muted); font-size: var(--text-sm); }
.who-email { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-switch { width: auto; height: 32px; min-height: 32px; padding-block: 0; padding-inline: var(--s-2) 28px; font-size: var(--text-sm); }
.top .menu-btn { display: none; }
.banner { display: flex; gap: var(--s-2); align-items: center; padding: 10px var(--s-6); background: var(--accent-soft); border-bottom: 1px solid var(--accent-border); color: var(--accent-text); font-size: var(--text-sm); }
.banner.warn { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); }
main { width: 100%; max-width: calc(var(--content-max) + 2 * var(--s-8)); margin: 0 auto; padding: var(--s-8) var(--s-8) var(--s-12); }
main:focus { outline: none; }
.scrim { position: fixed; inset: 0; background: rgba(19, 27, 36, 0.38); z-index: 35; }

/* Below 960px the sidebar becomes a drawer opened from the top bar. */
@media (max-width: 959px) {
  .app { display: block; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 300px); height: 100dvh; box-shadow: var(--shadow-lg); transform: translateX(-100%); visibility: hidden; transition: transform 200ms var(--ease), visibility 0s linear 200ms; background: var(--surface); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: none; visibility: visible; transition: transform 200ms var(--ease); }
  .sidebar { overscroll-behavior: contain; }
  .sidebar .drawer-close { display: inline-flex; }
  .app, [dir="rtl"] .app { background: none; }
  .top .menu-btn { display: inline-flex; }
  .top { padding: 0 var(--s-3); }
  .who-email { display: none; }
  main { padding: var(--s-5) var(--s-4) var(--s-12); }
}

/* ── Page header ── */
.page-head { display: flex; gap: var(--s-4) var(--s-6); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head h1 { margin-bottom: var(--s-1); }
.page-head .lead { max-width: 64ch; margin: 0; }
.lead { color: var(--text-secondary); margin: 0 0 var(--s-6); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); color: var(--text-muted); font-size: var(--text-sm); }
.meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); margin-inline-end: var(--s-3); vertical-align: middle; }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s-3); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }

/* ── Buttons ── */
.btn { font: inherit; font-size: var(--text-base); font-weight: 550; line-height: 1; min-height: var(--control-h); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(0.5px); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--text); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
.btn.quiet:hover { background: var(--surface-hover); color: var(--text); }
.btn.danger { background: var(--surface); color: var(--red-600); border-color: var(--red-200); }
.btn.danger:hover { background: var(--red-50); color: var(--red-700); }
.btn.small { min-height: 28px; padding: 0 10px; font-size: var(--text-sm); }
.btn.icon-only { width: var(--control-h); padding: 0; }
.btn.small.icon-only { width: 28px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost:disabled:hover { background: var(--surface); border-color: var(--border-strong); }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ── Forms ── */
label { display: block; font-weight: 550; font-size: var(--text-sm); color: var(--text); margin-bottom: 6px; }
.field { margin-bottom: var(--s-4); }
.hint { color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; margin: var(--s-1) 0 0; }
input, select, textarea { font: inherit; font-size: var(--text-base); width: 100%; min-height: var(--control-h); padding: 7px 10px; border: 1px solid var(--control-border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--gray-600); }
/* The ring replaces the outline; the transparent outline still shows in forced-colours mode. */
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 95, 168, 0.22); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunken); color: var(--text-muted); box-shadow: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red-600); }
select { appearance: none; padding-inline-end: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636e7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
[dir="rtl"] select { background-position: left 8px center; }
textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type="color"] { width: 52px; height: var(--control-h); padding: 2px; }
input[type="file"] { padding: 5px; font-size: var(--text-sm); }
.fields { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inline { display: flex; gap: var(--s-2) var(--s-3); align-items: end; flex-wrap: wrap; }
.inline .field { margin-bottom: 0; }
.choices { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; }
.choices legend { padding: 0; margin-bottom: 6px; font-weight: 550; font-size: var(--text-sm); }
.switch { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 400; font-size: var(--text-base); margin: 0; cursor: pointer; }
.lang-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-xs); padding: 0 5px; margin-inline-end: 6px; line-height: 16px; }
/* 16px on phones, or iPhones zoom in when a field is tapped. */
/* An on/off setting that takes effect at once: a checkbox drawn as a switch (still a checkbox to every tool). */
/* No border (inputs get one): the thumb is placed from the track's edge, centred by auto margins, never by a fixed offset. */
input[type="checkbox"].toggle { appearance: none; position: relative; box-sizing: border-box; width: 34px; height: 20px; padding: 0; border: 0; flex: none; border-radius: 10px; background: var(--control-border); cursor: pointer; transition: background var(--dur) var(--ease); }
input[type="checkbox"].toggle::before { content: ""; position: absolute; inset-block: 0; margin-block: auto; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(19, 27, 36, 0.3); transition: transform var(--dur) var(--ease); }
input[type="checkbox"].toggle:checked { background: var(--accent); }
input[type="checkbox"].toggle:checked::before { transform: translateX(14px); }
[dir="rtl"] input[type="checkbox"].toggle:checked::before { transform: translateX(-14px); }
input[type="checkbox"].toggle:disabled { opacity: 0.5; cursor: not-allowed; }
@media (forced-colors: active) { input[type="checkbox"].toggle { border: 1px solid CanvasText; } input[type="checkbox"].toggle::before { background: CanvasText; } }
/* A file input inside a label drawn as a button: the input stays reachable by keyboard (class "sr"), the label shows its focus. */
.file-pick { position: relative; }
.file-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A text written in every site language: its name once, then one line per language, with how many are written. */
.ml { display: grid; gap: var(--s-2); }
.ml + .ml { margin-top: var(--s-5); }
.ml-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-height: 22px; }
.ml-label { font-weight: 550; font-size: var(--text-sm); color: var(--text); }
.ml-head .badge { margin-inline-end: 0; }
.ml-head > .btn { margin-inline-start: auto; }
.ml-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.ml-row > label { margin: 0; padding-top: 9px; }
.ml-row > label .lang-tag { margin: 0; }
.ml-row textarea { min-height: 60px; }
/* Items that open to their languages (rental conditions, questions): the state of each is shown closed. */
.ml-item { border-top: 1px solid var(--border); }
.ml-item:last-of-type { border-bottom: 1px solid var(--border); }
.ml-item > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) 0; margin: 0; list-style: none; cursor: pointer; font-size: var(--text-base); font-weight: 550; color: var(--text); }
.ml-item > summary::-webkit-details-marker { display: none; }
.ml-item > summary > .icon { color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.ml-item[open] > summary > .icon { transform: rotate(90deg); }
.ml-item > summary > .badge { margin-inline: auto 0; }
.ml-item > .ml { padding: var(--s-1) 0 var(--s-4); }
/* Save bar: at the end of a long form; once the form has unsaved changes, kept in view at the bottom of the screen. */
.save-bar { position: static; z-index: 20; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); }
.card .save-bar { background: var(--surface); margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-6); margin-bottom: calc(-1 * var(--s-5)); border-radius: 0 0 var(--r-md) var(--r-md); }
.save-state { margin-inline-end: auto; color: var(--text-muted); font-size: var(--text-sm); }
form:not([data-dirty]) .save-bar.when-changed { display: none; }
form[data-dirty] .save-bar { position: sticky; bottom: 0; box-shadow: 0 -6px 12px -10px rgba(19, 27, 36, 0.25); }
form[data-dirty] .save-state { color: var(--amber-700); }
/* 16px on phones, or iPhones zoom in when a field is tapped. */
@media (max-width: 639px) {
  input, select, textarea, .lang-switch { font-size: 16px; }
  .card .save-bar { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); margin-bottom: calc(-1 * var(--s-4)); }
}

/* ── Cards and sections ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5); }
.card > h2:first-child, .card-head h2 { font-size: var(--text-md); }
.card > h2:first-child + .hint { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.card-head h2 { margin: 0; }
.card-head .hint { margin: 2px 0 0; }
.card-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
/* A table in a card lines its text up with the card's; in an unpadded card, with the card's header. */
.card > .table-wrap { margin: 0 calc(-1 * var(--s-3)); }
.card.flush > .table-wrap { margin: 0; }
.card.flush table.list :is(th, td):first-child { padding-inline-start: var(--s-5); }
.card.flush table.list :is(th, td):last-child { padding-inline-end: var(--s-5); }
.sub-title { font-size: var(--text-md); margin: var(--s-6) 0 var(--s-2); }
.col { min-width: 0; }
.cell-actions { text-align: end; white-space: nowrap; }
.cell-actions > .btn + .btn { margin-inline-start: var(--s-2); }
@media (max-width: 639px) { .card { padding: var(--s-4); } .card > .table-wrap { margin-inline: 0; } }
.card.flush > .card-head { padding: var(--s-4) var(--s-5); margin: 0; border-bottom: 1px solid var(--border); }
.list-title { font-size: var(--text-sm); font-weight: 550; color: var(--text-secondary); letter-spacing: 0; margin: 0; }
.section-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: none; margin: 0 0 var(--s-2); letter-spacing: 0.01em; }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.grow { flex: 1 1 240px; min-width: 0; }
.split { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1099px) { .split { grid-template-columns: minmax(0, 1fr); } }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }

/* ── Badges (status) ── */
.tag, .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; max-width: 100%; padding: 2px 8px; font-size: var(--text-xs); font-weight: 550; line-height: 1.25; border-radius: var(--r-xs); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); vertical-align: middle; margin-inline-end: 6px; }
.tag .icon, .badge .icon { width: 13px; height: 13px; }
.tag.ok, .badge.ok { color: var(--green-600); background: var(--green-50); border-color: var(--green-200); }
.tag.warn, .badge.warn { color: var(--amber-600); background: var(--amber-50); border-color: var(--amber-200); }
.tag.bad, .badge.bad { color: var(--red-600); background: var(--red-50); border-color: var(--red-200); }
.tag.info, .badge.info { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-border); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ── Callouts ── */
.notice, .callout { border: 1px solid var(--amber-200); background: var(--amber-50); color: var(--amber-700); border-radius: var(--r-sm); padding: 10px var(--s-3); margin-bottom: var(--s-4); font-size: var(--text-sm); }
/* With an icon, the icon sits beside the text (a notice without one keeps its text and links in one flow). */
.callout, .notice:has(> .icon) { display: flex; gap: var(--s-3); align-items: flex-start; }
.callout > .icon, .notice > .icon { margin-top: 2px; }
p.callout { margin-top: 0; }
.callout.info { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.callout.ok { border-color: var(--green-200); background: var(--green-50); color: var(--green-700); }
.callout.bad { border-color: var(--red-200); background: var(--red-50); color: var(--red-700); }
.errors { border: 1px solid var(--red-200); background: var(--red-50); color: var(--red-700); border-radius: var(--r-sm); padding: 10px var(--s-3); margin-bottom: var(--s-4); font-size: var(--text-sm); }
.errors ul { margin: var(--s-1) 0 0; padding-inline-start: 18px; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.list th { text-align: start; color: var(--text-muted); font-size: var(--text-xs); font-weight: 550; border-bottom: 1px solid var(--border); padding: var(--s-2) var(--s-3); white-space: nowrap; }
table.list td { border-bottom: 1px solid var(--border); padding: 10px var(--s-3); vertical-align: middle; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tr.clickable { cursor: pointer; }
table.list tr.clickable:hover td, table.list tbody tr:hover td { background: var(--gray-25); }
.card > table.list { margin: 0 calc(-1 * var(--s-3)); width: calc(100% + 2 * var(--s-3)); }

/* Tables that become stacked rows on a phone: each cell shows its column name (data-label). */
@media (max-width: 639px) {
  table.list.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.list.stack tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  table.list.stack tbody tr:last-child { border-bottom: 0; }
  table.list.stack td { display: block; border: 0; padding: 0; }
  table.list.stack td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); font-size: var(--text-xs); margin-inline-end: var(--s-1); }
  table.list.stack td:nth-child(3) { grid-column: 1 / -1; }
  table.list.stack td.cell-actions { grid-column: 1 / -1; text-align: start; white-space: normal; }
}

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); margin: 0 0 var(--s-5); overflow: hidden; }
.stats > div { padding: var(--s-4) var(--s-5); border-inline-start: 1px solid var(--border); margin-inline-start: -1px; }
.stats dt { color: var(--text-muted); font-size: var(--text-sm); }
.stats dd { margin: 2px 0 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stats dd small { font-size: var(--text-sm); font-weight: 450; color: var(--text-muted); }
.stats dd.note { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--text-muted); }

/* ── Checklist rows (status, what, how to fix) ── */
.checks-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; container-type: inline-size; }
.check-row { display: grid; grid-template-columns: 20px minmax(12rem, 1fr) fit-content(45%); gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); background: var(--surface); }
.check-row + .check-row { border-top: 1px solid var(--border); }
.check-row > .icon { margin-top: 2px; }
.check-row.block > .icon { color: var(--red-600); }
.check-row.warn > .icon { color: var(--amber-600); }
.check-row.ok > .icon { color: var(--green-600); }
.check-row .what { font-weight: 550; }
.check-row .why { color: var(--text-secondary); font-size: var(--text-sm); margin: 2px 0 0; }
.check-row .how { color: var(--text-muted); font-size: var(--text-sm); margin: 2px 0 0; }
.check-row .fix { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.check-row .fix .btn { white-space: normal; text-align: start; line-height: 1.25; padding-block: 4px; }
.check-row details { grid-column: 2 / -1; font-size: var(--text-sm); color: var(--text-secondary); }
.check-row details summary { font-weight: 500; font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.check-row details ul { margin: var(--s-2) 0 0; padding-inline-start: 18px; display: grid; gap: 2px; }
@container (max-width: 639px) {
  .check-row { grid-template-columns: 20px minmax(0, 1fr); }
  .check-row .fix { grid-column: 2; justify-content: flex-start; }
  .check-row .fix > .btn.quiet:first-child { margin-inline-start: -10px; } /* its text lines up with the reason above */
}
@media (max-width: 639px) {
  .card .checks-list { margin-inline: calc(-1 * var(--s-4)); border-radius: 0; border-inline: 0; }
  .meta > * + *::before { display: none; }
  .top .who .btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Steps (a procedure: done, now, next) ── */
.steps { list-style: none; margin: var(--s-3) 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.steps li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text-muted); }
.steps li > .icon { margin-top: 2px; color: var(--text-faint); }
.steps li.done { color: var(--text-secondary); }
.steps li.done > .icon { color: var(--green-600); }
.steps li.now { color: var(--text); font-weight: 550; }
.steps li.now > .icon { color: var(--amber-600); }

/* ── Feed (recent activity) ── */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed .by { color: var(--text-muted); }

/* ── Empty states and skeletons ── */
.empty { text-align: center; padding: var(--s-10) var(--s-6); color: var(--text-muted); }
.empty .icon { color: var(--text-faint); margin-bottom: var(--s-2); }
.empty strong { display: block; color: var(--text); font-weight: 600; margin-bottom: var(--s-1); }
.skeleton { display: block; border-radius: var(--r-sm); background: var(--gray-100); animation: fade 1.4s ease-in-out infinite; }
@keyframes fade { 50% { opacity: 0.55; } }
/* Sizes as classes: the security policy refuses inline styles. */
.skeleton.sk-title { height: 20px; width: 30%; }
.skeleton.sk-text { height: 14px; width: 70%; margin-top: var(--s-3); }
.skeleton.sk-block { height: 120px; margin-top: var(--s-5); }
.spin { animation: spin 0.9s linear 6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Disclosure ── */
details summary { cursor: pointer; font-weight: 550; font-size: var(--text-sm); margin-bottom: var(--s-2); color: var(--text-secondary); }
details summary:hover { color: var(--text); }

/* ── Dialogs ── */
dialog { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; width: min(760px, calc(100vw - 32px)); color: var(--text); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(19, 27, 36, 0.4); }
.dlg-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); }
.dlg-head h2 { margin: 0; flex: 1; font-size: var(--text-lg); }
.dlg-body { padding: var(--s-5) var(--s-6); max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--border); background: var(--gray-25); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* A question before an action (ask.js): small and centred at every size. */
dialog.ask { width: min(440px, calc(100vw - 32px)); }
dialog.ask .dlg-body { padding-bottom: var(--s-4); }
dialog.ask h2 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
dialog.ask p { margin: 0; color: var(--text-secondary); }
dialog.ask .ask-typed { margin-top: var(--s-4); }
.btn.destructive { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.btn.destructive:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }
/* On a phone a dialog fills the screen: its title and its buttons stay in view, the middle scrolls. */
@media (max-width: 639px) {
  dialog:not(.ask) { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  dialog:not(.ask)[open], dialog:not(.ask)[open] > form { display: flex; flex-direction: column; }
  dialog:not(.ask)[open] > form { flex: 1; min-height: 0; }
  dialog:not(.ask) .dlg-head { padding: var(--s-3) var(--s-4); }
  dialog:not(.ask) .dlg-body { flex: 1; max-height: none; padding: var(--s-4); }
  dialog:not(.ask) .dlg-foot { border-radius: 0; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Toast ── */
.toast { position: fixed; bottom: var(--s-6); left: 50%; transform: translate(-50%, 8px); z-index: 70; background: var(--gray-900); color: #fff; padding: 10px var(--s-4); border-radius: var(--r-sm); font-size: var(--text-sm); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── Sign-in ── */
.signin { max-width: 400px; margin: 12vh auto; padding: 0 var(--s-4); }
.signin .brand { padding: 0; margin-bottom: var(--s-6); }
.signin h1 { font-size: var(--text-xl); margin-bottom: var(--s-2); }
.signin .lead { margin-bottom: var(--s-6); }
.signin-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-8); }
.signin-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
/* A password that can be shown: the button sits inside the field. */
.password { position: relative; }
.password input { padding-inline-end: 84px; }
.password .btn { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); }
.btn.wide { width: 100%; }

/* ── Command palette (palette.js): pages, records and safe actions, from the header or Ctrl+K / ⌘K ── */
.search-trigger { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 34px; min-width: 15rem; padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.search-trigger:hover { border-color: var(--control-border); color: var(--text-secondary); }
.search-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.search-trigger .label { flex: 1; text-align: start; }
.search-trigger kbd, .palette-keys kbd { font: inherit; font-size: 11px; font-weight: 550; padding: 1px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--gray-25); color: var(--text-secondary); }
@media (max-width: 959px) {
  .search-trigger { min-width: 0; min-height: 44px; width: 44px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
  .search-trigger .label, .search-trigger kbd { display: none; }
}
dialog.palette { width: min(640px, calc(100vw - 32px)); margin-top: 12vh; max-height: min(72vh, 640px); padding: 0; display: none; flex-direction: column; overflow: hidden; }
dialog.palette[open] { display: flex; }
.palette-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-muted); }
.palette-input { flex: 1; min-width: 0; border: 0; box-shadow: none; padding: var(--s-3) 0; font-size: var(--text-lg); background: transparent; }
.palette-input:focus { outline: none; box-shadow: none; }
.palette-list { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2); flex: 1; }
.palette-group { margin: var(--s-2) var(--s-2) var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.palette-option { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 6px var(--s-3); border-radius: var(--r-sm); cursor: pointer; color: var(--text); }
.palette-option > .icon { flex: none; color: var(--text-faint); }
.palette-option:hover { background: var(--surface-hover); }
.palette-option[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .palette-option[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--accent); }
.palette-option[aria-selected="true"] > .icon { color: var(--accent-text); }
.palette-text { display: grid; min-width: 0; flex: 1; }
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-label mark { background: transparent; color: var(--accent-text); font-weight: 650; }
.palette-hint { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-ext { flex: none; color: var(--text-faint); }
.palette-loading, .palette-empty { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) var(--s-3); color: var(--text-muted); font-size: var(--text-sm); }
.palette-empty { justify-content: center; padding: var(--s-8) 0; }
.palette-keys { display: flex; gap: var(--s-4); margin: 0; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); }
@media (max-width: 639px) {
  dialog.palette { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .palette-keys { display: none; }
}
@media (forced-colors: active) { .palette-option[aria-selected="true"] { outline: 2px solid Highlight; } }
/* The section a search result opened: shown for a moment. */
.palette-target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); transition: outline-color 0.6s var(--ease); }
/* The staging copy (docs/staging.md): a strip above every page. */
.env-banner { background: var(--amber-50); color: var(--amber-700); border-bottom: 1px solid var(--amber-200); padding: 6px var(--s-4); font-size: var(--text-sm); text-align: center; }