/* PRID, Minimal Luxury.
   Navy, muted gold, paper background, white cards, critical red. No gloss,
   no glass, no 3D, no green. Colour never carries meaning on its own, so
   every coloured element also has a number, a word and a mark count.

   Tonal depth: by the owner's decree for this patch, restrained gradients
   are allowed when they add depth or guide attention, and every stop must be
   a tonal step of the declared palette. The tones below are derived only
   from the five declared colours. Nothing outside the palette enters.

   Fonts: Yekan Bakh FA, supplied by the repository owner. Five weights are
   subset to the characters this interface actually uses and served locally as
   woff2. Nothing is fetched from another host and, by owner decree, no
   substitute Persian family exists in the stack. See web/fonts/NOTICE.md. */

@font-face {
  font-family: "Yekan Bakh FA";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/yekan-bakh-thin.woff2") format("woff2");
}
@font-face {
  font-family: "Yekan Bakh FA";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/yekan-bakh-light.woff2") format("woff2");
}
@font-face {
  font-family: "Yekan Bakh FA";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/yekan-bakh-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Yekan Bakh FA";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/yekan-bakh-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Yekan Bakh FA";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/yekan-bakh-bold.woff2") format("woff2");
}

:root {
  --navy: #0B132B;
  --navy-deep: #070D1F;      /* navy, darker step */
  --navy-lift: #16224A;      /* navy, lighter step */
  --navy-wash: #E8EAF1;      /* navy at a whisper, for quiet fills */
  --gold: #C9A227;
  --gold-deep: #9C7D1D;      /* gold, darker step */
  --gold-muted: #B9A45C;
  --gold-wash: #F6EFDA;      /* gold at a whisper */
  --paper: #F4F5F7;
  --card: #FFFFFF;
  --critical: #B42318;
  --critical-deep: #8C1B12;  /* critical, darker step */
  --neutral: #8A8F98;
  --line: #E3E5E9;
  --ink: #0B132B;
  --ink-soft: #4A505C;
  --radius: 12px;
  --gap: 16px;
  --shadow-soft: 0 1px 2px rgba(11, 19, 43, 0.06), 0 6px 24px rgba(11, 19, 43, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* The reading field: warm layered depth. A gold whisper under the header,
     settling into paper, so the page is never a flat grey sheet. */
  background:
    radial-gradient(120% 220px at 50% 0%, var(--gold-wash) 0%, var(--paper) 78%),
    linear-gradient(180deg, var(--card) 0%, var(--paper) 420px);
  background-color: var(--paper);
  color: var(--ink);
  /* Owner decree: only the supplied Yekan Bakh FA renders Persian. No
     substitute Persian family is listed. The generic keyword remains as the
     terminal fallback required by CSS, and the loader gate in the review run
     halts if any weight fails to load. */
  font-family: "Yekan Bakh FA", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
}

body { padding: 0 0 96px; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

header.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  padding: 14px 16px;
  /* The structural anchor: a quiet navy ramp, dark to lifted. */
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-lift) 100%);
  color: var(--paper);
  border-bottom: 2px solid var(--gold);
}

header.bar .mark { font-weight: 700; letter-spacing: 0.02em; }

/* The living shell: five quiet chips, never interactive. The chip touched by
   the newest answer stirs briefly; with reduced motion it simply updates. */
#context-preview[hidden] { display: none; }
#context-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 10px auto 0;
  padding: 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
#context-preview .chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  padding: 4px 12px;
  white-space: nowrap;
}
#context-preview .chip.free {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--card) 0%, var(--gold-wash) 100%);
  color: var(--ink);
  font-weight: 500;
}
#context-preview .chip.stir {
  border-color: var(--navy);
  transition: border-color 600ms ease;
}
@media (prefers-reduced-motion: reduce) {
  #context-preview .chip.stir { transition: none; }
}

/* The complete lockup, exactly twice: the entrance, and the quiet signature
   that closes the dashboard. Never beside a personal number. */
.brand {
  display: block;
  width: 200px;
  max-width: 62%;
  height: auto;
  margin: 4px auto 20px;
}
.scene[hidden] { display: none; }
h1:focus, h2:focus { outline: none; }
h1:focus-visible, h2:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.scene-nav button { text-align: right; }

.card.inner { box-shadow: none; margin-bottom: 12px; }

.reveal { border-inline-start: 4px solid var(--gold); }

details.why { margin: 4px 0 12px; }
details.why summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 15px;
}

.signature {
  display: flex;
  justify-content: center;
  padding: 26px 16px 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.signature img { display: block; width: 150px; height: auto; opacity: 0.92; }
header.bar .state { font-size: 14px; color: #C9CDD6; }

h1 { font-size: 22px; line-height: 1.6; margin: 0 0 12px; font-weight: 700; }
h1 .lead { font-weight: 500; }
h2 { font-size: 18px; margin: 28px 0 10px; font-weight: 700; }
.card > h2 { margin-top: 0; padding-top: 2px; }
.card > h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-muted));
  margin-bottom: 10px;
}
.card.lead > h1::before { content: none; }
h3 { font-size: 16px; margin: 0 0 6px; font-weight: 700; }
p { margin: 0 0 12px; }
.soft { color: var(--ink-soft); font-size: 15px; font-weight: 300; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 0 0 14px;
  box-shadow: var(--shadow-soft);
}

/* Supporting sections sit on a toned surface so the page breathes between
   white evidence cards instead of stacking identical sheets. */
.card.tone {
  background: linear-gradient(180deg, var(--card) 0%, var(--navy-wash) 130%);
  border-color: var(--navy-wash);
}

/* The lead card carries the one personal fact. It gets the page's only
   strong emphasis: a navy field with a gold hairline, so the dominant fact
   is dominant before any text is read. */
.card.lead {
  background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 62%, var(--navy-lift) 100%);
  border: 1px solid var(--navy-lift);
  border-inline-start: 4px solid var(--gold);
  color: var(--paper);
}
.card.lead h1 { color: var(--card); font-size: 26px; }
.card.lead .soft { color: var(--navy-wash); }
.card.lead .progress, .card.lead .progress b { color: var(--navy-wash); }
.card.lead .progress b { color: var(--card); }
.card.lead button { border-color: var(--navy-wash); background: transparent; color: var(--card); }
.card.lead button[aria-pressed="true"] { border-color: var(--gold); }

/* Controls. Every target is at least 44px on its short side. */
button, .btn {
  font: inherit;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
  text-align: right;
  width: 100%;
  margin: 0 0 10px;
}

button.primary {
  background: linear-gradient(180deg, var(--navy-lift) 0%, var(--navy) 70%);
  border-color: var(--navy-deep);
  color: var(--paper);
}
button.primary:hover { background: var(--navy-lift); }
button.quiet { border-color: var(--line); color: var(--ink-soft); }
button[aria-pressed="true"] {
  border-color: var(--gold);
  border-width: 2px;
  background: linear-gradient(180deg, var(--card) 0%, var(--gold-wash) 100%);
  font-weight: 700;
  color: var(--ink);
}

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row button { width: auto; flex: 1 1 auto; min-width: 44px; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

input[type="text"], textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

textarea { resize: vertical; }

#internal-notice {
  background: var(--navy);
  color: var(--card);
  text-align: center;
  font-size: 14px;
  padding: 8px 16px;
}

.freetext label { display: block; margin: 8px 0 4px; }

.ft-candidate {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 8px 0;
}
.ft-candidate .row { margin-top: 8px; }

.err { color: var(--critical); font-size: 15px; margin: 6px 0 0; }

/* Pressure bars. The number, the band word and the marks all carry the
   meaning, so a reader who sees no colour loses nothing. */
.bar { border-bottom: 1px solid var(--line); padding: 12px 0; }
.bar:last-child { border-bottom: 0; }
.bar .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bar .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar .marks { letter-spacing: 2px; color: var(--ink-soft); font-size: 14px; }
.bar .track {
  position: relative;
  height: 14px;
  margin: 8px 0 6px;
  background: var(--navy-wash);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
/* Each band fill is a tonal ramp of its own palette colour: depth, not decor. */
.bar .fill { height: 100%; background: linear-gradient(180deg, var(--navy-lift), var(--navy)); }
.bar .fill.watch { background: linear-gradient(180deg, var(--gold-muted), var(--gold-deep)); }
.bar .fill.high { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.bar .fill.critical { background: linear-gradient(180deg, var(--critical), var(--critical-deep)); }
.bar .track.unknown { border-style: dashed; border-color: var(--neutral); background: transparent; }
.bar .why { font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }
.bar .gap { font-size: 15px; color: var(--ink-soft); }

/* The conditional first break. Both branches are one shape, one weight. */
.branches { display: grid; gap: 10px; }
.branch {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  /* Both branches share one surface, one weight. Neither is the default. */
  background: linear-gradient(180deg, var(--card) 0%, var(--navy-wash) 100%);
}
.branch h3 { font-size: 15px; }
.no-default { color: var(--ink-soft); font-size: 15px; }

.timeline { display: grid; gap: 8px; }
.tl { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--line); padding-bottom: 6px; }
.tl .open { color: var(--neutral); }
.tl .key { border-inline-start: 3px solid var(--gold); padding-inline-start: 8px; background: var(--gold-wash); }
.tl-note { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }

.graph { width: 100%; height: auto; }
.graph text { font-size: 11px; fill: var(--ink); direction: rtl; unicode-bidi: isolate; }
.graph .edge { stroke: var(--line); stroke-width: 1.5; }
.graph .box { fill: var(--card); stroke: var(--navy); stroke-width: 1; }
.graph .box.open { stroke: var(--neutral); stroke-dasharray: 4 3; }

.progress { display: flex; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--ink-soft); }
.progress b { color: var(--ink); }

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

@media (min-width: 700px) {
  body { font-size: 18px; }
  .wrap { padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}