/* =====================================================================
   مرسال — MRSAL · design foundation
   ---------------------------------------------------------------------
   Arabic-only, right-to-left, dark-only. One token layer shared by the
   console, the API reference and the contacts portal.

   Identity: warm paper surfaces, #0A7C5A as the single brand
   colour (with a 50–900 family), IBM Plex Sans Arabic for every text
   run in either language. Monospace stays Latin and
   left-to-right for code, tokens and phone numbers.
   ===================================================================== */

/* ── 1. Fonts — IBM Plex, served locally ─────────────────────────── */

/* IBM Plex Sans Arabic — one family for Arabic and Latin.
   Arabic faces are unicode-ranged so Latin-only pages never fetch them. */
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:800 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:100 300;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("./fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:100 300;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("./fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("./fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── 2. Tokens — light only, built on #0A7C5A ────────────────────── */

:root {
  color-scheme: light;

  /* Canvas + surfaces — warm paper, never a flat #fff page */
  --canvas:        #FBFAF7;
  --canvas-deep:   #F4F2ED;
  --canvas-raised: #FFFFFF;

  --surface:       #FFFFFF;
  --surface-2:     #FAF9F6;
  --surface-3:     #F4F2ED;
  --surface-sunk:  #F2F0EA;

  --solid-1: #FFFFFF;
  --solid-2: #FAF9F6;
  --solid-3: #F4F2ED;

  --glass-0: rgba(22, 24, 27, 0.016);
  --glass-1: rgba(22, 24, 27, 0.030);
  --glass-2: rgba(22, 24, 27, 0.045);
  --glass-3: rgba(22, 24, 27, 0.065);
  --glass-4: rgba(22, 24, 27, 0.090);

  --border:        #E4E1DA;
  --border-strong: #CBC7BD;
  --border-soft:   #EFEDE7;
  --hairline:      #EAE7E0;
  --rim: var(--border); --rim-soft: var(--border-soft); --rim-strong: var(--border-strong);
  --specular:    rgba(255, 255, 255, 0.80);
  --specular-hi: rgba(255, 255, 255, 1);

  /* Ink — contrast verified on --surface (#FFFFFF) */
  --text:   #16181B;   /* 15.8 : 1 */
  --text-2: #3C4147;   /*  9.6 : 1 */
  --text-3: #5D636A;   /*  6.3 : 1 */
  --text-4: #7C838A;   /*  4.6 : 1 */
  --text-on-accent: #FFFFFF;

  /* Brand — deep green #0A7C5A and its family */
  --brand-50:  #EDF6F2;
  --brand-100: #D6EBE1;
  --brand-200: #AEd7c6;
  --brand-300: #78BFA5;
  --brand-400: #349B76;
  --brand-500: #0A7C5A;
  --brand-600: #086A4D;
  --brand-700: #075740;
  --brand-800: #054533;
  --brand-900: #043326;

  --accent:        var(--brand-500);
  --accent-hi:     #0C8E67;
  --accent-press:  var(--brand-700);
  --accent-lum:    var(--brand-600);
  --accent-ink:    var(--brand-700);
  --accent-wash:   rgba(10, 124, 90, 0.08);
  --accent-wash-2: rgba(10, 124, 90, 0.14);
  --accent-rim:    rgba(10, 124, 90, 0.26);
  --accent-ring:   rgba(10, 124, 90, 0.45);
  --accent-glow:   0 0 0 3px rgba(10, 124, 90, 0.18);
  --accent-grad:   linear-gradient(135deg, #0C8E67 0%, #0A7C5A 60%, #075740 100%);
  --link:          var(--brand-600);

  /* Semantic — readable on paper, no neon */
  --green:  #0A7C5A;  --green-ink:  #075740;  --green-wash: rgba(10, 124, 90, 0.10);  --green-rim: rgba(10, 124, 90, 0.28);
  --orange: #B26A00;  --orange-ink: #8A5200;  --orange-wash: rgba(178, 106, 0, 0.10); --orange-rim: rgba(178, 106, 0, 0.28);
  --red:    #C0392B;  --red-ink:    #97281D;  --red-wash:   rgba(192, 57, 43, 0.09);  --red-rim:   rgba(192, 57, 43, 0.26);
  --violet: #5B4BC4;  --violet-wash: rgba(91, 75, 196, 0.10);

  /* The secondary tones now sit inside the green family, so a single
     colour carries the brand and nothing competes with it. */
  --teal-300:  #78BFA5;
  --teal-400:  #0A7C5A;
  --teal-500:  #086A4D;
  --teal-600:  #075740;
  --teal:      var(--teal-400);
  --teal-ink:  var(--brand-700);
  --teal-wash: rgba(10, 124, 90, 0.09);
  --teal-wash-2: rgba(10, 124, 90, 0.16);
  --teal-rim:  rgba(10, 124, 90, 0.26);
  --teal-glow: 0 8px 22px -14px rgba(10, 124, 90, 0.45);
  --sand-400:  #B26A00;
  --sand-wash: rgba(178, 106, 0, 0.10);
  --sand-rim:  rgba(178, 106, 0, 0.28);

  --grad-brand-teal: linear-gradient(135deg, #0C8E67 0%, #0A7C5A 60%, #075740 100%);

  /* Chart order — distinguishable on paper, colour-blind safe pairs first */
  --chart-1: #0A7C5A; --chart-2: #2F6FED; --chart-3: #B26A00;
  --chart-4: #7A4FD1; --chart-5: #0E7490; --chart-6: #C0392B;
  --neutral-wash: rgba(22, 24, 27, 0.04);
  --neutral-rim:  rgba(22, 24, 27, 0.10);

  /* Type — IBM Plex Sans Arabic carries Arabic and Latin in one family */
  --sans: "Plex Arabic", "SF Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --display: var(--sans);
  --arabic: var(--sans);
  --mono: "Plex Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — Arabic needs generous leading and zero tracking.
     Weights top out at 700: Plex has no 900, and heavy display weights
     are part of what made the old page feel machine-made. */
  --t-display:   700 clamp(34px, 5vw, 56px)/1.28 var(--display);
  --t-hero:      700 clamp(30px, 4.4vw, 48px)/1.3 var(--display);
  --t-title-xl:  700 clamp(23px, 2.9vw, 33px)/1.38 var(--display);
  --t-title-1:   700 23px/1.42 var(--sans);
  --t-title-2:   600 19px/1.45 var(--sans);
  --t-title-3:   600 16px/1.5 var(--sans);
  --t-headline:  500 15px/1.55 var(--sans);
  --t-body:      400 15px/1.78 var(--sans);
  --t-callout:   400 14.5px/1.72 var(--sans);
  --t-footnote:  400 13.5px/1.68 var(--sans);
  --t-caption:   500 12.5px/1.55 var(--sans);

  --tr-display: 0; --tr-hero: 0; --tr-title-xl: 0; --tr-title-1: 0; --tr-title-2: 0;
  --tr-title-3: 0; --tr-headline: 0; --tr-body: 0; --tr-callout: 0; --tr-footnote: 0; --tr-caption: 0;

  /* Space — 4pt rhythm */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-9: 40px;  --sp-10: 44px; --sp-11: 48px; --sp-12: 56px;
  --sp-13: 72px; --sp-14: 80px; --sp-15: 96px; --sp-16: 128px;

  /* Radius */
  --r-xs:    6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-chip: 999px;

  /* Layout */
  --page-max:   1560px;
  --column-max:  760px;
  --nav-h:        60px;
  --rail-w:      248px;
  --list-w:      304px;
  --section-gap: clamp(56px, 7vw, 96px);

  /* Motion */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --spring:    cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast:  0.15s;
  --dur:       0.2s;
  --dur-slow:  0.32s;
  --dur-enter: 0.55s;

  /* Elevation — deep, brand-tinted */
  --lift-1: 0 1px 2px rgba(22, 24, 27, 0.05);
  --lift-2: 0 2px 6px -2px rgba(22, 24, 27, 0.08);
  --lift-3: 0 1px 2px rgba(22, 24, 27, 0.05), 0 12px 28px -20px rgba(22, 24, 27, 0.25);
  --lift-4: 0 1px 2px rgba(22, 24, 27, 0.05), 0 24px 48px -30px rgba(22, 24, 27, 0.3);
  --glow-brand: none;

  --edge:        inset 0 0 0 1px var(--border);
  --edge-soft:   inset 0 0 0 1px var(--border-soft);
  --edge-strong: inset 0 0 0 1px var(--border-strong);

  --blur:      saturate(160%) blur(22px);
  --blur-deep: saturate(170%) blur(34px);
  --blur-thin: saturate(150%) blur(14px);
}

/* ── 3. Reset + canvas ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100svh;
  font: var(--t-body);
  letter-spacing: var(--tr-body);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    none;
}

[hidden] { display: none !important; }

::selection { background: var(--accent-wash-2); color: var(--text); }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-700); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg, video { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); }
p { margin: 0; }
ul, ol { margin: 0; }

/* ── 4. Focus — one universal, visible ring ──────────────────────── */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible, .pill:focus-visible, .chip:focus-visible,
.seg-btn:focus-visible { border-radius: var(--r-pill); }
.card:focus-visible { border-radius: var(--r-card); }

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: 999;
  padding: 10px var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font: var(--t-headline);
  box-shadow: var(--lift-3);
  transition: inset-block-start var(--dur) var(--ease);
}
.skip-link:focus-visible { inset-block-start: var(--sp-4); text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── 5. Primitives ───────────────────────────────────────────────── */

/* Panels. One level of elevation only — never a raised card inside a
   raised card. Nested groupings use --surface-2 and a hairline. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
.card-tight { padding: var(--sp-5); }
.card-flush { padding: 0; overflow: hidden; }
.glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.glass-quiet { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.glass-raised { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--lift-2); }

.sec-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-9) 0 var(--sp-4);
  font: var(--t-title-3); letter-spacing: var(--tr-title-3);
  color: var(--text);
}
.sec-head:first-child { margin-block-start: 0; }
.sec-head .ic { width: 17px; height: 17px; color: var(--text-3); }
.sec-note {
  margin-block-start: var(--sp-3);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--text-3); max-width: 72ch;
}

.t-display  { font: var(--t-display);  letter-spacing: var(--tr-display); }
.t-hero     { font: var(--t-hero);     letter-spacing: var(--tr-hero); }
.t-title-xl { font: var(--t-title-xl); letter-spacing: var(--tr-title-xl); }
.t-title-1  { font: var(--t-title-1);  letter-spacing: var(--tr-title-1); }
.t-title-2  { font: var(--t-title-2);  letter-spacing: var(--tr-title-2); }
.t-title-3  { font: var(--t-title-3);  letter-spacing: var(--tr-title-3); }
.t-body     { font: var(--t-body);     letter-spacing: var(--tr-body); }
.t-callout  { font: var(--t-callout);  letter-spacing: var(--tr-callout); }
.t-caption  { font: var(--t-caption);  letter-spacing: var(--tr-caption); }
.muted      { color: var(--text-3); }

/* Monospace is for identifiers, paths and code — never body copy. */
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}

.ic { width: 20px; height: 20px; flex: none; }

/* Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font: var(--t-headline); font-weight: 500; letter-spacing: 0;
  font-family: var(--sans);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.97); }
.btn .ic { width: 16px; height: 16px; }

.btn-solid { background: var(--accent); color: var(--text-on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--lift-2); }
.btn-solid:hover { background: var(--accent-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--glow-brand); transform: translateY(-1px); }
.btn-solid:active { background: var(--accent-press); }

.btn-line { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn-line:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-line:active { background: var(--surface-sunk); }

.btn-glass { background: var(--surface-3); color: var(--text-2); }
.btn-glass:hover { background: var(--glass-3); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-quiet { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-rim); }
.btn-teal { background: var(--brand-500); color: #fff; box-shadow: none; }
.btn-teal:hover { background: var(--teal-400); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--teal-glow); transform: translateY(-1px); }
.btn-teal:active { background: var(--teal-600); }
.btn-quiet:hover { background: var(--accent-wash-2); color: #fff; }

.btn-danger { background: var(--red-wash); color: var(--red-ink); border-color: var(--red-rim); }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.btn-lg  { min-height: 46px; padding: 0 var(--sp-6); font-size: 15px; }
.btn-sm  { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.btn-sm .ic { width: 14px; height: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
  box-shadow: none;
}
.btn.is-pending { pointer-events: none; opacity: 0.85; }
.btn.is-pending .btn-label { opacity: 0.7; }

/* Icon controls ---------------------------------------------------- */
.icon-btn, .copy-btn, .icon-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.icon-btn:hover, .copy-btn:hover, .icon-toggle:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .ic, .copy-btn .ic, .icon-toggle .ic { width: 17px; height: 17px; }
.icon-btn.is-copied, .copy-btn.is-copied { color: var(--green-ink); background: var(--green-wash); }
.icon-toggle[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-wash); }

.copy-btn-labeled {
  width: auto; height: 30px; gap: 6px; padding: 0 10px;
  border-radius: var(--r-xs);
  background: var(--surface); border-color: var(--border);
  font: var(--t-caption); font-family: var(--sans); color: var(--text-3);
}
.copy-btn-labeled:hover { background: var(--surface-3); color: var(--text); }
.copy-btn-labeled .ic { width: 13px; height: 13px; }

.text-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  font-family: var(--sans);
  color: var(--text-3); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.text-link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.text-link .ic { width: 15px; height: 15px; }

/* Fields ----------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); min-width: 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > .field-label,
label:not(.switch-row):not(.seg-label) > .field-label {
  font: var(--t-caption); letter-spacing: var(--tr-caption);
  font-weight: 600; color: var(--text-2);
}

input[type="text"], input[type="tel"], input[type="url"], input[type="email"],
input[type="password"], input[type="search"], input[type="number"],
input[type="datetime-local"], input:not([type]), textarea, select {
  width: 100%; min-height: 40px;
  padding: 9px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  font: var(--t-callout); letter-spacing: var(--tr-callout);
  font-family: var(--sans);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
textarea { resize: vertical; line-height: 1.55; min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--text-4); }
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface-3); color: var(--text-4); cursor: not-allowed;
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-wash);
}
input.mono, textarea.mono, code, pre, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
input[dir="ltr"], textarea[dir="ltr"] { text-align: right; }
input[dir="ltr"]::placeholder { text-align: right; }
[dir="rtl"] .ic-flip { transform: scaleX(-1); }

select {
  appearance: none;
  padding-inline-end: var(--sp-3);
  padding-inline-start: var(--sp-8);
  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='%239ca0cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--sp-3) center;
}
select option { background: var(--surface); color: var(--text); }

.field-note {
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--text-3);
}
.field-error {
  display: flex; align-items: center; gap: 5px;
  font: var(--t-footnote); font-weight: 500; color: var(--red-ink);
}
.field-error .ic { width: 13px; height: 13px; }

.form-duo {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Switch row — a settings row, not a card */
.switch-row {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0; max-width: 100%;
  cursor: pointer;
}
.switch-row > span { display: block; min-width: 0; flex: 1 1 0%; overflow-wrap: anywhere; }
.switch-row b {
  display: block;
  font: var(--t-headline); letter-spacing: var(--tr-headline);
  font-weight: 600; color: var(--text);
}
.switch-row small {
  display: block; margin-block-start: 2px;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--text-3);
}
.switch-row input[type="checkbox"] {
  appearance: none;
  width: 42px; min-width: 42px; max-width: 42px; height: 25px; min-height: 0;
  flex: 0 0 42px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  cursor: pointer; position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch-row input[type="checkbox"]::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: var(--lift-1);
  transition: transform var(--dur-slow) var(--spring);
}
.switch-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(-17px); }
:root[dir="ltr"] .switch-row input[type="checkbox"]:checked::after { transform: translateX(17px); }
.switch-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Segmented control — pills only for the selected compact item */
.seg {
  display: inline-flex; gap: 2px; padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  font: var(--t-footnote); font-weight: 600; font-family: var(--sans);
  color: var(--text-3); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg-btn .ic { width: 15px; height: 15px; }
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-selected="true"], .seg-btn.active,
.seg-btn[aria-checked="true"] {
  background: var(--accent); color: #fff;
  box-shadow: var(--glow-brand);
}

/* Status pills ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 22px; padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: var(--t-caption); letter-spacing: 0; font-weight: 600;
  white-space: nowrap;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill-ok      { background: var(--green-wash);  border-color: var(--green-rim);  color: var(--green-ink); }
.pill-warn    { background: var(--orange-wash); border-color: var(--orange-rim); color: var(--orange-ink); }
.pill-bad     { background: var(--red-wash);    border-color: var(--red-rim);    color: var(--red-ink); }
.pill-off,
.pill-neutral { background: var(--neutral-wash); border-color: var(--neutral-rim); color: var(--text-3); }
.pill-accent  { background: var(--accent-wash);  border-color: var(--accent-rim); color: var(--accent-ink); }
.pill-teal    { background: var(--teal-wash);    border-color: var(--teal-rim);   color: var(--teal-ink); }
.pill-sand    { background: var(--sand-wash);    border-color: var(--sand-rim);   color: var(--sand-400); }
.pill-plain::before { display: none; }

.presence {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px var(--surface);
}
.presence-ok   { background: var(--green); animation: mrsal-pulse 2.4s var(--ease-out) infinite; }
.presence-warn { background: var(--orange); }
.presence-bad  { background: var(--red); }
.presence-neutral { background: var(--text-4); }

/* Method badges ---------------------------------------------------- */
.method-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 22px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase;
}
.method-get     { background: var(--green-wash);  border-color: var(--green-rim);  color: var(--green-ink); }
.method-post    { background: var(--accent-wash); border-color: var(--accent-rim); color: var(--accent-ink); }
.method-put,
.method-patch   { background: var(--orange-wash); border-color: var(--orange-rim); color: var(--orange-ink); }
.method-delete  { background: var(--red-wash);    border-color: var(--red-rim);    color: var(--red-ink); }

/* Delivery receipts ------------------------------------------------ */
.receipt { font-size: 12px; letter-spacing: -0.06em; color: var(--text-4); flex: none; }
.receipt-read { color: var(--accent); }
.receipt-ok   { color: var(--text-3); }
.receipt-bad  { color: var(--red-ink); font-weight: 700; }
.receipt-warn { color: var(--orange-ink); }

/* Code ------------------------------------------------------------- */
.code-block, pre code {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: #1C1F23;
  border: 1px solid #1C1F23;
  text-align: left;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: #E6E8EA;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.code-block::-webkit-scrollbar, pre code::-webkit-scrollbar { height: 9px; }
.code-block::-webkit-scrollbar-thumb, pre code::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22); border-radius: 999px;
}
.code-block::-webkit-scrollbar-track, pre code::-webkit-scrollbar-track { background: transparent; }

code { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.inline-code, p code, li code, td code, dd code {
  padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--brand-50);
  border: 1px solid var(--accent-rim);
  font-family: var(--mono); font-size: 0.84em; letter-spacing: 0;
  color: var(--brand-700);
  overflow-wrap: anywhere;
  direction: ltr; unicode-bidi: isolate;
}

/* Notices ---------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  color: var(--text-2);
}
.notice .ic { width: 17px; height: 17px; margin-block-start: 1px; color: var(--text-3); }
.notice strong { color: var(--text); font-weight: 600; }
.notice > div > strong:first-child { display: block; margin-block-end: 2px; }
.notice-info { background: var(--accent-wash); border-color: var(--accent-rim); }
.notice-info .ic { color: var(--accent-ink); }
.notice-warn { background: var(--orange-wash); border-color: var(--orange-rim); }
.notice-warn .ic { color: var(--orange-ink); }
.notice-bad  { background: var(--red-wash); border-color: var(--red-rim); }
.notice-bad .ic { color: var(--red-ink); }
.notice-ok   { background: var(--green-wash); border-color: var(--green-rim); }
.notice-ok .ic { color: var(--green-ink); }

/* Loading ---------------------------------------------------------- */
.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mrsal-spin 0.7s linear infinite;
}
.btn-solid .spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
.spinner-lg { width: 26px; height: 26px; border-width: 2.5px; }
@keyframes mrsal-spin { to { transform: rotate(360deg); } }

.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-sunk) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: mrsal-shimmer 1.4s ease-in-out infinite;
}
@keyframes mrsal-shimmer {
  from { background-position: 0 50%; }
  to   { background-position: 100% 50%; }
}
.skeleton-line { height: 12px; margin-block-end: 10px; }
.skeleton-line:last-child { margin-block-end: 0; width: 62%; }

@keyframes mrsal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mrsal-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes mrsal-pop  { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mrsal-slide-in { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mrsal-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 124, 90, .35); } 100% { box-shadow: 0 0 0 7px rgba(10, 124, 90, 0); } }
@keyframes mrsal-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 124, 90, 0), var(--lift-3); } 50% { box-shadow: 0 0 0 10px rgba(10, 124, 90, .10), var(--lift-3); } }
@keyframes mrsal-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } }

/* ── 6. Motion + accessibility ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .aurora i, .presence-ok, .conn-chip i, .qr-shell { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .spinner { animation: none; border-top-color: var(--accent); }
  .skeleton { animation: none; background: var(--surface-3); }
}

@media (forced-colors: active) {
  .card, .glass, .notice, .pill, .btn, input, textarea, select { border: 1px solid CanvasText; }
  .pill::before { forced-color-adjust: none; }
}