@import url("base.css");

/* ==========================================================================
   Direction-neutral pages: design/naming.html and design/directions.html.
   These deliberately use NO direction's visual voice — a comparison page that borrows
   one candidate's aesthetic is a rigged comparison. Neutral ground, one accent, and the
   data carries the page.
   ========================================================================== */

:root {
  --bg: #f4f4f2;
  --surface: #fff;
  --ink: #14161a;
  --ink-2: #4b4f57;
  --ink-3: #6b7079;
  --rule: #dcdcd6;
  --rule-2: #b9bab4;
  --accent: #1c4f6b;
  --ok: #1f4d3d;
  --no: #8a2318;
  --scroll-thumb: #b9bab4;
  --scroll-track: #fff;

  --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;
}

body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; }
.wrap { max-inline-size: 1180px; margin-inline: auto; padding-inline: 1.25rem; }

.mast { background: var(--surface); border-block-end: 1px solid var(--rule-2); padding: 2rem 1.25rem 1.5rem; }
.mast > * { max-inline-size: 72ch; }
.kicker { font-size: .8rem; color: var(--accent); }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.4; margin-block: .3rem .7rem; }
h2 { font-size: 1.15rem; margin-block-end: .8rem; }
h3.h3 { font-size: 1rem; margin-block: 1.6rem .4rem; }
.lede { font-size: 1.05rem; color: var(--ink-2); }
.note { color: var(--ink-2); font-size: .93rem; margin-block-start: .7rem; max-inline-size: 72ch; }
.mast-links { margin-block-start: 1rem; font-size: .92rem; }
.mast-links a { color: var(--accent); }
.sec { margin-block-start: 2.75rem; }

code { font-family: var(--mono); font-size: .86em; background: #eceae2; border: 1px solid var(--rule); padding: .03rem .3rem; }
em { font-style: normal; border-block-end: 1px solid var(--accent); }

/* ---------- recommendation ---------- */
.recommend {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-inline-start: 4px solid var(--accent);
  padding: 1.2rem 1.4rem;
}
.rec-name { font-size: 1.3rem; font-weight: 700; margin-block-end: .5rem; }
.rec-ar { color: var(--ink-3); font-weight: 400; font-size: 1.05rem; }
.recommend p { margin-block-end: .7rem; color: var(--ink-2); max-inline-size: 74ch; }
.recommend p:last-child { margin-block-end: 0; }
.rec-cost { border-block-start: 1px solid var(--rule); padding-block-start: .7rem; }
.rec-cost strong { color: var(--no); }

.drops, .caveats, .musts, .questions { display: grid; gap: .55rem; color: var(--ink-2); max-inline-size: 78ch; }
.drops li, .caveats li, .musts li, .questions li { padding-inline-start: 1.4rem; position: relative; }
.drops li::before { content: "✕"; position: absolute; inset-inline-start: 0; color: var(--no); font-family: var(--mono); }
.caveats li::before { content: "!"; position: absolute; inset-inline-start: .2rem; color: #6a4a08; font-family: var(--mono); }
.musts li::before { content: "•"; position: absolute; inset-inline-start: .3rem; color: var(--accent); }
.questions li::before { content: "?"; position: absolute; inset-inline-start: .2rem; color: var(--accent); font-family: var(--mono); }
.musts { counter-reset: m; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.names, .cmp { inline-size: 100%; border-collapse: collapse; font-size: .86rem; }
.names caption, .cmp caption { text-align: start; color: var(--ink-3); font-size: .82rem; padding: .7rem .8rem; }
.names th, .names td, .cmp th, .cmp td {
  text-align: start; padding: .55rem .6rem; border-block-end: 1px solid var(--rule); vertical-align: top;
}
.names thead th, .cmp thead th {
  font-size: .78rem; color: var(--ink-3); font-weight: 400;
  border-block-end: 1px solid var(--rule-2); white-space: nowrap; background: #fafaf8;
}
.names tbody tr:hover, .cmp tbody tr:hover { background: #fbfbf9; }
.names tbody tr.v-shortlist { background: #f2f7f4; }
.names tbody tr.v-drop { color: var(--ink-2); }
.names tbody tr.v-watch { background: #fdfaf1; }
.cmp { min-inline-size: 44rem; }
.cmp tbody th { font-weight: 600; white-space: nowrap; }
.cmp td { min-inline-size: 9rem; }

.n-name { min-inline-size: 8rem; }
.n-ar { display: block; font-weight: 600; font-size: .98rem; }
.n-lat { display: block; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.cell { min-inline-size: 7.5rem; }
.cell-mark { font-family: var(--mono); font-weight: 700; margin-inline-end: .35rem; }
.cell--free .cell-mark { color: var(--ok); }
.cell--taken .cell-mark { color: var(--no); }
.cell-v { font-size: .85rem; }
.cell--free .cell-v { color: var(--ok); }
.cell--taken .cell-v { color: var(--no); }
.cell-d { display: block; font-size: .74rem; color: var(--ink-3); line-height: 1.6; }
.n-note { min-inline-size: 20rem; max-inline-size: 34rem; color: var(--ink-2); font-size: .85rem; }

/* ---------- methods ---------- */
.methods { display: grid; gap: 1rem; max-inline-size: 78ch; }
/* Grid items default to min-inline-size:auto (= min-content). A `white-space: pre` command inside
   has a min-content width equal to its longest line, so the track — and the page — stretched to
   591px on a 360px screen. min-inline-size:0 on the item lets the scroller below actually scroll. */
.methods li { min-inline-size: 0; }
.methods h3 { font-size: .95rem; }
.methods code {
  display: block;
  margin-block: .25rem;
  max-inline-size: 100%;
  overflow-x: auto;
  white-space: pre;
}
.methods p { color: var(--ink-2); font-size: .9rem; }

/* ---------- direction cards ---------- */
.dcards { display: grid; gap: 1.2rem; }
.dcard { background: var(--surface); border: 1px solid var(--rule); padding: 1.2rem 1.4rem; }
.dc-h { font-size: 1.2rem; }
.dc-h a { color: var(--ink); text-decoration: none; }
.dc-h a:hover { color: var(--accent); text-decoration: underline; }
.dc-sub { color: var(--ink-3); font-size: .9rem; margin-block-end: .8rem; }
.dc { display: grid; gap: .5rem; max-inline-size: 80ch; }
.dc div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; }
.dc dt { color: var(--ink-3); font-size: .85rem; }
.dc dd { margin: 0; font-size: .93rem; }
.dc .tone-good { color: var(--ok); }
.dc .tone-bad { color: var(--no); }
.dc-links { margin-block-start: .9rem; padding-block-start: .7rem; border-block-start: 1px solid var(--rule); font-size: .88rem; }
.dc-links a { color: var(--accent); }

/* ---------- footer ---------- */
.foot { border-block-start: 1px solid var(--rule-2); background: var(--surface); padding: 1.2rem 1.25rem; margin-block-start: 3rem; }
.foot p { font-size: .85rem; color: var(--ink-3); }

@media (max-width: 700px) {
  .dc div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

@media (max-width: 620px) {
  .methods code { white-space: pre-wrap; overflow-wrap: anywhere; }
}