/* ==========================================================================
   Specification document styles
   Display: IBM Plex Serif · Body: IBM Plex Sans Arabic · Data: IBM Plex Mono
   Palette: petrol accent (workshop/technical), amber signal (escalation)
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   Plex Sans Arabic carries Latin AND Arabic in one family, which matters:
   this document switches script mid-sentence constantly.                    */

@font-face {
  font-family: "Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  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 Sans Arabic"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Plex Sans Arabic"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  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 Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Plex Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  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 Serif"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Serif"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  --paper:        #F4F6F4;
  --surface:      #FFFFFF;
  --surface-2:    #EAEEEB;
  --ink:          #131B19;
  --ink-2:        #46534F;
  --ink-3:        #6E7C77;
  --rule:         #D3DAD6;
  --rule-soft:    #E3E8E5;
  --petrol:       #0D6E62;
  --petrol-deep:  #0A544B;
  --petrol-wash:  #E4F0ED;
  --signal:       #A2650A;
  --signal-wash:  #FAF0DC;
  --critical:     #9E3025;
  --critical-wash:#FAE9E6;

  --code-key:     #0A6055;
  --code-str:     #8A5B12;
  --code-num:     #7A3E86;
  --code-com:     #7F8D88;
  --code-type:    #1F5E86;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.375rem;

  --measure:  46rem;
  --wide:     64rem;
  --rail:     18rem;

  --sans: "Plex Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif: "Plex Serif", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0D1412;
    --surface:      #131C19;
    --surface-2:    #18231F;
    --ink:          #DEE6E2;
    --ink-2:        #A0ADA8;
    --ink-3:        #74827D;
    --rule:         #24322D;
    --rule-soft:    #1B2723;
    --petrol:       #48C7B4;
    --petrol-deep:  #6FDCCA;
    --petrol-wash:  #0F2F2A;
    --signal:       #E0AA46;
    --signal-wash:  #2C2211;
    --critical:     #E88A78;
    --critical-wash:#331A15;

    --code-key:     #55C9B5;
    --code-str:     #D9A85E;
    --code-num:     #C79BD4;
    --code-com:     #6B7975;
    --code-type:    #7FB6DC;

    color-scheme: dark;
  }
}

/* Explicit toggle must beat the media query in BOTH directions. */
:root[data-theme="dark"] {
  --paper:        #0D1412;
  --surface:      #131C19;
  --surface-2:    #18231F;
  --ink:          #DEE6E2;
  --ink-2:        #A0ADA8;
  --ink-3:        #74827D;
  --rule:         #24322D;
  --rule-soft:    #1B2723;
  --petrol:       #48C7B4;
  --petrol-deep:  #6FDCCA;
  --petrol-wash:  #0F2F2A;
  --signal:       #E0AA46;
  --signal-wash:  #2C2211;
  --critical:     #E88A78;
  --critical-wash:#331A15;
  --code-key:     #55C9B5;
  --code-str:     #D9A85E;
  --code-num:     #C79BD4;
  --code-com:     #6B7975;
  --code-type:    #7FB6DC;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper:        #F4F6F4;
  --surface:      #FFFFFF;
  --surface-2:    #EAEEEB;
  --ink:          #131B19;
  --ink-2:        #46534F;
  --ink-3:        #6E7C77;
  --rule:         #D3DAD6;
  --rule-soft:    #E3E8E5;
  --petrol:       #0D6E62;
  --petrol-deep:  #0A544B;
  --petrol-wash:  #E4F0ED;
  --signal:       #A2650A;
  --signal-wash:  #FAF0DC;
  --critical:     #9E3025;
  --critical-wash:#FAE9E6;
  --code-key:     #0A6055;
  --code-str:     #8A5B12;
  --code-num:     #7A3E86;
  --code-com:     #7F8D88;
  --code-type:    #1F5E86;
  color-scheme: light;
}

/* ---- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* No smooth scrolling: this document is ~32,000px tall, and animating a jump
   from the nav to §12 takes seconds and loses the reader's place. Anchors
   should land, not travel. */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-deep); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 2px; }

/* ---- Shell --------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }

/* ---- Navigation rail ----------------------------------------------------- */

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  padding: 1.75rem 0 3rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.rail-head { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rail-mark {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol);
}
.rail-title { font-family: var(--serif); font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.rail-sub { font-size: var(--fs-xs); color: var(--ink-3); }

.rail-nav { display: flex; flex-direction: column; }
.rail-nav a {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.35rem;
  padding: 0.3rem 1.5rem; font-size: var(--fs-sm); line-height: 1.4;
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -0px;
}
.rail-nav a .n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail-nav a:hover { color: var(--ink); background: var(--surface-2); }
.rail-nav a.is-active { color: var(--petrol); border-left-color: var(--petrol); background: var(--petrol-wash); font-weight: 500; }
.rail-nav a.is-active .n { color: var(--petrol); }
.rail-nav a.sub { font-size: var(--fs-xs); padding-top: 0.15rem; padding-bottom: 0.15rem; color: var(--ink-3); }
.rail-nav a.sub .n { font-size: 0.6875rem; }
.rail-nav a.sub + a:not(.sub) { margin-top: 0.5rem; }

.rail-foot { padding: 0 1.5rem; margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.theme-btn {
  font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 0.5rem 0.7rem; cursor: pointer; text-align: left;
}
.theme-btn:hover { color: var(--ink); border-color: var(--petrol); }

/* ---- Main / masthead ----------------------------------------------------- */

.main { padding: 0 3rem 8rem; min-width: 0; }

.masthead {
  max-width: var(--wide); margin: 0 auto; padding: 4.5rem 0 2.25rem;
  border-bottom: 2px solid var(--ink);
}
.masthead .eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol);
  margin: 0 0 1rem;
}
.masthead h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-2xl);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.5rem; text-wrap: balance;
}
.masthead .deck {
  font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 2rem;
  max-width: 42rem; text-wrap: pretty;
}
.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.25rem 1.5rem;
}
.meta-grid div { display: flex; flex-direction: column; gap: 0.2rem; }
.meta-grid dt, .meta-grid .k {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.meta-grid .v { font-size: var(--fs-sm); font-weight: 500; }
.meta-grid .v.flag { color: var(--signal); }

/* ---- Document flow ------------------------------------------------------- */

.doc { padding-top: 1rem; }
.doc > * { max-width: var(--measure); margin-inline: auto; }
.doc > .tbl, .doc > pre, .doc > .diagram { max-width: var(--wide); }

.doc h2 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-xl);
  line-height: 1.2; letter-spacing: -0.01em;
  margin: 4rem 0 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule); text-wrap: balance;
  scroll-margin-top: 1.5rem;
}
.doc h2:first-of-type { border-top: none; }
.doc h3 {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-lg);
  line-height: 1.3; margin: 2.75rem 0 0.9rem; text-wrap: balance;
  scroll-margin-top: 1.5rem;
}
.doc h4 {
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  margin: 2rem 0 0.6rem;
}
.doc p { margin: 0 0 1.1rem; text-wrap: pretty; }
.doc strong { font-weight: 600; }
.doc hr { border: none; border-top: 1px solid var(--rule); margin: 3rem auto; }

.doc ul, .doc ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.doc li { margin-bottom: 0.4rem; unicode-bidi: plaintext; }
.doc li::marker { color: var(--ink-3); }
.doc ul ul, .doc ol ol { margin-top: 0.4rem; margin-bottom: 0.4rem; }

/* Task-list checkboxes in the delivery backlog */
.doc li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.35rem; padding-left: 1.7rem; position: relative; }
.doc li > input[type="checkbox"] { position: absolute; left: 0; top: 0.45em; accent-color: var(--petrol); }

/* ---- Inline code & chips ------------------------------------------------- */

.doc code {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--surface-2); color: var(--ink);
  padding: 0.1em 0.34em; border-radius: 3px;
  border: 1px solid var(--rule-soft);
  word-break: break-word;
}
.doc a code { color: var(--petrol); }
/* font-family MUST inherit: marked emits <pre><code>, and letting the inner
   <code> keep the mono face pushes Arabic onto a monospace fallback, which
   stretches the letter joins into kashidas. */
.doc pre code {
  background: none; border: none; padding: 0;
  font-size: inherit; font-family: inherit; word-break: normal;
}

/* Requirement / task identifiers get a mono chip — they are referenced
   by number in meetings, so they need to be findable at a glance. */
.chip {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
  padding: 0.15rem 0.4rem; border-radius: 3px;
  background: var(--petrol-wash); color: var(--petrol-deep);
  border: 1px solid color-mix(in srgb, var(--petrol) 25%, transparent);
}
.chip.flag { background: var(--signal-wash); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 30%, transparent); }

/* ---- Tables -------------------------------------------------------------- */

.tbl { overflow-x: auto; margin: 0 auto 1.75rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.doc thead th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2);
  padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.doc tbody td {
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; unicode-bidi: plaintext; line-height: 1.55;
}
.doc tbody tr:last-child td { border-bottom: none; }
.doc tbody td:first-child { min-width: 7rem; }
/* Wide matrices already scroll their container — give the row-label column
   room so it doesn't wrap to one word per line while doing so. */
.doc table:has(thead th:nth-child(6)) thead th:first-child,
.doc table:has(thead th:nth-child(6)) tbody td:first-child { min-width: 10.5rem; }
.doc tbody tr:hover { background: var(--surface-2); }
.doc td[align="center"], .doc th[align="center"] { text-align: center; }
.doc table code { font-size: 0.85em; }

/* ---- Callouts ------------------------------------------------------------ */

.doc blockquote {
  margin: 0 auto 1.75rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--petrol); background: var(--petrol-wash);
  border-radius: 0 4px 4px 0; color: var(--ink);
}
.doc blockquote > *:last-child { margin-bottom: 0; }
/* Quoted source is Arabic, the gloss beneath it is English. Let each
   paragraph pick its own direction instead of forcing one on both. */
.doc blockquote p { unicode-bidi: plaintext; }
.doc blockquote p + p { margin-top: -0.4rem; }
.doc blockquote.warn { border-left-color: var(--signal); background: var(--signal-wash); }
.doc blockquote.stop { border-left-color: var(--critical); background: var(--critical-wash); }

/* ---- Code blocks --------------------------------------------------------- */

.doc pre {
  margin: 0 auto 1.75rem; padding: 1.15rem 1.35rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  overflow-x: auto; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.6;
  tab-size: 2;
}
.doc pre.rtl-block { direction: rtl; text-align: right; font-family: var(--sans); line-height: 1.9; }

.hljs-keyword, .hljs-literal { color: var(--code-key); font-weight: 500; }
.hljs-string { color: var(--code-str); }
.hljs-number { color: var(--code-num); }
.hljs-comment { color: var(--code-com); font-style: italic; }
.hljs-type, .hljs-built_in, .hljs-title { color: var(--code-type); }
.hljs-operator, .hljs-punctuation { color: var(--ink-2); }
.hljs-attr, .hljs-variable { color: var(--ink); }

/* ---- Diagrams ------------------------------------------------------------ */

.diagram {
  margin: 0 auto 2rem; padding: 1.5rem 1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  overflow-x: auto; text-align: center;
}
.diagram svg { max-width: 100%; height: auto; }
.diagram .mermaid { display: inline-block; min-width: min-content; }

/* ---- Responsive ---------------------------------------------------------- */

.rail-toggle { display: none; }

@media (max-width: 60rem) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--rule); padding: 1.25rem 0 1rem;
    /* Collapsed, the nav is a zero-height flex item — the parent gap would
       otherwise leave ~120px of dead space above the fold. */
    gap: 0.75rem;
  }
  .rail-nav { max-height: 0; overflow: hidden; }
  .rail:not(.is-open) .rail-nav { display: none; }
  .rail-toggle { margin-top: 0.25rem; }
  .rail.is-open .rail-nav { max-height: none; overflow: visible; }
  .rail-toggle {
    display: block; margin: 0.75rem 1.5rem 0; align-self: flex-start;
    font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule);
    border-radius: 3px; padding: 0.5rem 0.7rem; cursor: pointer;
  }
  .rail-foot { margin-top: 1rem; }
  .main { padding: 0 1.25rem 5rem; }
  .masthead { padding-top: 2.5rem; }
  .masthead h1 { font-size: 1.875rem; }
}

/* ---- Print --------------------------------------------------------------- */

@media print {
  :root { --paper: #fff; --surface: #fff; --surface-2: #fff; }
  .rail, .rail-toggle, .theme-btn { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .doc > *, .doc > .tbl, .doc > pre, .doc > .diagram, .masthead { max-width: none; }
  .doc h2 { break-after: avoid; page-break-after: avoid; }
  .doc h3, .doc h4 { break-after: avoid; }
  .tbl, .doc pre, .diagram, .doc blockquote { break-inside: avoid; page-break-inside: avoid; }
  body { font-size: 10pt; }
  a { color: inherit; text-decoration: none; }
}