@import url("../../base.css");

/* ==========================================================================
   D2 — سفرة (command surface)
   The inverse of D1 in every decision that matters: dark, tight, dense, monospaced
   where a value is machine-readable, and built around a persistent command rail that
   sits on the INLINE-START edge (the right edge, because the document is RTL).
   No serif, no paper, no marginal apparatus: a terminal and a ledger.
   ========================================================================== */

:root {
  --bg: #101315;
  --bg-2: #171b1e;
  --bg-3: #1f2428;
  --line: #2c3338;
  --line-2: #3d474e;
  --fg: #e8e6e1;
  --fg-2: #a8b0b6;
  --fg-3: #7e888f;
  --accent: #7fd1c1;      /* verified / interactive */
  --warn: #e0b25c;
  --bad: #ef7d6a;
  --ok: #7fd1c1;

  --sans: "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", "Noto Sans Mono", monospace;

  --rail: 19rem;
  --scroll-thumb: #3d474e;
  --scroll-track: #171b1e;
}

body.d2 {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
}

.app {
  display: grid;
  /* RTL: grid column 1 is the RIGHTMOST column, so the rail (first in the DOM) lands on the
     inline-start edge, which is the right edge. Verified by geometry, not assumed: an earlier
     version used `grid-column: 2` + `order: -1`, which physically pinned the rail to the LEFT and
     produced a half-mirrored page. */
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-block-size: 100vh;
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the rail ---------- */
.rail {
  grid-column: 1;
  background: var(--bg-2);
  border-inline-end: 1px solid var(--line);   /* the seam faces the content, i.e. is on the left */
  padding: 1.1rem 1rem 2rem;
  position: sticky;
  inset-block-start: 0;
  max-block-size: 100vh;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .rail { position: static; max-block-size: none; border-inline-end: 0; border-block-end: 1px solid var(--line); }
}
.rail-brand {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.3;
}
.rail-brand-sub { display: block; font-size: .8rem; color: var(--fg-3); font-weight: 400; }
.rail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .7rem;
  margin-block: .9rem;
  padding-block: .7rem;
  border-block: 1px solid var(--line);
  font-size: .9rem;
}
.rail-nav a { color: var(--fg-2); text-decoration: none; }
.rail-nav a:hover { color: var(--accent); }
.rail-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.rail-h {
  font-size: .78rem;
  color: var(--fg-3);
  margin-block: 1rem .5rem;
  font-weight: 400;
}
.rail-list { display: grid; gap: .7rem; }
.rail-label { display: block; font-size: .8rem; color: var(--fg-3); margin-block-end: .15rem; }
.rail-cmd {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .4rem .5rem;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--accent);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.rail-note { font-size: .78rem; color: var(--fg-3); margin-block-start: 1.2rem; border-block-start: 1px solid var(--line); padding-block-start: .8rem; }

/* ---------- pane ---------- */
.pane { grid-column: 2; display: flex; flex-direction: column; min-inline-size: 0; }
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.25rem;
  border-block-end: 1px solid var(--line);
  background: var(--bg-2);
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
}
.bar-search { display: flex; align-items: center; gap: .4rem; flex: 1 1 16rem; min-inline-size: 0; }
.bar-prompt { font-family: var(--mono); color: var(--accent); }
.bar-search input {
  flex: 1 1 auto;
  min-inline-size: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: .35rem .6rem;
  font-size: .9rem;
}
.bar-search input::placeholder { color: var(--fg-3); }
.bar-meta { font-family: var(--mono); font-size: .78rem; color: var(--fg-3); }

.pane-main { padding: 1.5rem 1.5rem 3rem; max-inline-size: 78rem; }
@media (max-width: 900px) { .pane-main { padding: 1.1rem .9rem 2rem; } }

h1 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.4; }
.sub { color: var(--fg-2); max-inline-size: 68ch; margin-block: .5rem 1rem; }
.mono { font-family: var(--mono); font-size: .84rem; }

.sec { margin-block-start: 2.25rem; }
.sec-h {
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg-3);
  border-block-end: 1px solid var(--line);
  padding-block-end: .35rem;
  margin-block-end: .9rem;
}
.sec-h--sm { font-size: .8rem; margin-block-start: 1.5rem; }

/* ---------- terminal ---------- */
.term {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent);
  padding: .8rem 1rem;
  margin-block: .6rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.8;
  white-space: pre;
  color: var(--fg);
}
.term code { background: none; border: 0; padding: 0; font-size: 1em; color: inherit; }
.term-out { color: var(--fg-3); }
.term-warn { color: var(--warn); }
.term-err { color: var(--bad); }

code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: .05rem .3rem;
  color: var(--accent);
}

/* ---------- ledger grid ---------- */
.grid { inline-size: 100%; border-collapse: collapse; font-size: .86rem; }
/* A ledger wider than the phone scrolls INSIDE its own box. The page must never scroll
   sideways: on a 360px screen a sideways page hides the status column, which is the one
   column that matters. */
@media (max-width: 900px) {
  .grid { display: block; overflow-x: auto; max-inline-size: 100%; }
  .grid::-webkit-scrollbar { block-size: 8px; }
  .grid::-webkit-scrollbar-thumb { background: var(--line-2); }
  .grid thead, .grid tbody { display: table; inline-size: 100%; min-inline-size: 34rem; }
}
.grid caption { text-align: start; color: var(--fg-3); font-size: .8rem; padding-block-end: .5rem; }
.grid th, .grid td {
  text-align: start;
  padding: .45rem .6rem;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
.grid thead th {
  color: var(--fg-3);
  font-weight: 400;
  font-size: .78rem;
  border-block-end: 1px solid var(--line-2);
  white-space: nowrap;
}
.grid tbody tr:hover { background: var(--bg-2); }
.grid .num { text-align: end; }
.grid--narrow { max-inline-size: 34rem; }
.grid--skeleton td { padding-block: .9rem; }
.sk { background: var(--bg-3); }
.row-en { display: block; color: var(--fg-3); font-size: .78rem; }
/* A link inside the ledger must be styled explicitly: the UA default (blue) is unreadable on a
   dark surface, and relying on `color: inherit` leaves it at 2:1. Measured, not assumed. */
.grid a { color: var(--fg); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.grid a:hover { color: var(--accent); text-decoration-color: currentColor; }

.pill {
  display: inline-block;
  font-size: .76rem;
  padding: .05rem .45rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill.tone-good { color: var(--ok); }
.pill.tone-warn { color: var(--warn); }
.pill.tone-bad { color: var(--bad); }
.pill.tone-muted { color: var(--fg-3); }

/* ---------- verification pipeline ---------- */
.pipeline { display: grid; gap: .1rem; border: 1px solid var(--line); background: var(--bg-2); }
.stage {
  display: grid;
  grid-template-columns: 1.6rem 11rem 1fr 1.4fr;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: .6rem .8rem;
  border-block-end: 1px solid var(--line);
}
.stage:last-child { border-block-end: 0; }
.stage-mark { font-family: var(--mono); font-weight: 700; text-align: center; }
.stage-label { font-weight: 600; font-size: .88rem; }
.stage-value { font-family: var(--mono); font-size: .84rem; }
.stage-detail { color: var(--fg-3); font-size: .8rem; }
.stage.tone-good { color: var(--ok); }
.stage.tone-good .stage-label, .stage.tone-good .stage-value { color: var(--fg); }
.stage.tone-warn { color: var(--warn); }
.stage.tone-warn .stage-label, .stage.tone-warn .stage-value { color: var(--warn); }
.stage.tone-bad { color: var(--bad); }
.stage.tone-bad .stage-label, .stage.tone-bad .stage-value { color: var(--bad); }
.stage.tone-muted { color: var(--fg-3); }
.stage.tone-muted .stage-label, .stage.tone-muted .stage-value { color: var(--fg-3); }
@media (max-width: 800px) {
  .stage { grid-template-columns: 1.4rem 1fr; }
  .stage-value, .stage-detail { grid-column: 2; }
}

/* ---------- filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  margin-block: .9rem;
  font-size: .85rem;
}
.filters label { display: flex; gap: .35rem; align-items: center; color: var(--fg-2); min-block-size: 2rem; }
.filters-sep { color: var(--fg-3); }

/* ---------- key/value ---------- */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .3rem 1.5rem; font-size: .86rem; }
.kv div { display: flex; gap: .5rem; align-items: baseline; border-block-end: 1px solid var(--line); padding-block: .35rem; }
.kv dt { color: var(--fg-3); min-inline-size: 7rem; }
.kv dd { margin: 0; }

/* ---------- forms ---------- */
.human { display: grid; gap: .2rem; font-size: .85rem; color: var(--fg-2); }
.human li { padding-inline-start: 1rem; position: relative; }
.human li::before { content: "!"; position: absolute; inset-inline-start: 0; color: var(--warn); font-family: var(--mono); }

.decide, .form { border: 1px solid var(--line); background: var(--bg-2); padding: 1rem; margin-block-start: 1rem; }
.decide fieldset, .form fieldset { border: 0; padding: 0; margin-block-end: .9rem; }
.decide legend, .form legend { font-size: .8rem; color: var(--fg-3); }
.decide label, .form label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; min-block-size: 2rem; }
.fld { display: block; margin-block-end: .9rem; }
.fld > span { display: block; font-size: .82rem; color: var(--fg-2); margin-block-end: .25rem; }
.fld small { display: block; color: var(--fg-3); font-size: .78rem; margin-block-start: .2rem; }
.fld textarea, .fld input[type="text"], .fld input[type="url"] {
  inline-size: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: .4rem .55rem;
  font-size: .88rem;
}
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.fld-inline { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--fg-2); min-block-size: 2rem; }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-start: .8rem; }
.btn {
  padding: .45rem 1.1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0b1113;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: #a3e2d5; }
.btn--ghost { background: transparent; color: var(--fg-2); border-color: var(--line-2); font-weight: 400; }
.btn--ghost:hover { color: var(--fg); border-color: var(--fg-3); background: transparent; }

/* ---------- steps / tiles ---------- */
.steps { display: grid; gap: .7rem; }
.steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .7rem; align-items: start; }
.step-n { color: var(--accent); font-weight: 700; text-align: center; }
.steps h3 { font-size: .92rem; }
.steps p { color: var(--fg-2); font-size: .85rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; }
.tiles a {
  display: block;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: .8rem .9rem;
  text-decoration: none;
  color: inherit;
}
.tiles a:hover { border-color: var(--accent); }
.tile-t { display: block; font-weight: 600; font-size: .95rem; }
.tile-d { display: block; color: var(--fg-3); font-size: .82rem; margin-block-start: .2rem; }

/* ---------- states ---------- */
.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .7rem; }
.state { border: 1px solid var(--line); background: var(--bg-2); padding: .8rem .9rem; }
.state.tone-bad { border-inline-start: 2px solid var(--bad); }
.state.tone-warn { border-inline-start: 2px solid var(--warn); }
.state.tone-muted { border-inline-start: 2px solid var(--line-2); }
.state-h { font-size: .82rem; color: var(--fg-3); }
.state-d { font-size: .84rem; color: var(--fg-2); margin-block: .2rem .5rem; }
.state-body .term { margin-block: 0; font-size: .78rem; }
.state-live { font-size: .82rem; color: var(--fg-3); }

/* ---------- footer ---------- */
.pane-foot {
  border-block-start: 1px solid var(--line);
  padding: 1rem 1.5rem 2rem;
  color: var(--fg-3);
  font-size: .8rem;
}
.pane-foot a { color: var(--fg-2); }

/* ---------- pipeline legend ----------
   The marks are only learnable if the vocabulary is shown next to the table, not explained in a
   paragraph underneath it. */
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; color: var(--fg-2); margin-block: .5rem; }
.legend li { display: flex; gap: .4rem; align-items: baseline; }
.legend-mark { font-family: var(--mono); font-weight: 700; inline-size: 1.2rem; text-align: center; }
.legend-mark.tone-good { color: var(--ok); }
.legend-mark.tone-warn { color: var(--warn); }
.legend-mark.tone-bad { color: var(--bad); }
.legend-mark.tone-muted { color: var(--fg-3); }

/* ---------- copy affordance ---------- */
.cmd { position: relative; }
.cmd-copy {
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-end: .4rem;   /* inline-end: on the left in RTL, away from the terminal's own edge */
  font-family: var(--mono);
  font-size: .72rem;
  padding: .15rem .5rem;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  cursor: pointer;
}
.cmd-copy:hover { color: var(--accent); border-color: var(--accent); }
.cmd .term { padding-inline-end: 4.5rem; }

/* ---------- narrow screens: wrap, never clip ----------
   A command that is clipped is a command the user cannot read, and a scrollbar is not a reliable
   affordance (overlay scrollbars only appear on interaction, and they never appear in a screenshot).
   `white-space: pre-wrap` adds soft line breaks without inserting any character, so the text and
   everything copied from it are byte-identical to what the author wrote. `overflow-wrap: anywhere`
   lets a long URL break rather than overflow. */
@media (max-width: 620px) {
  pre, pre code, .term, .term code { white-space: pre-wrap; overflow-wrap: anywhere; }
}