/*
  dev-radar dashboard.

  The page has one job: help you pick a topic to write about today. So the
  scores are the hero, not decoration. Every topic row carries a seven-segment
  meter showing the components of its score, because "82" tells you nothing
  about whether the topic is fresh, arguable, or teachable — and that is the
  distinction you actually decide on.

  No web fonts: this is an offline-first tool, so type personality comes from
  heavy use of the system monospace for every label, number and tag, set
  against a plain sans for prose. The system Arabic face is picked up from the
  same stack, so switching to Arabic needs no download.

  RTL is done with CSS logical properties throughout — `margin-inline-start`
  rather than `margin-left`, `text-align: start` rather than `left`, `inset-
  inline-end` rather than `right`. The layout then mirrors itself from the
  `dir` attribute alone, and there is no second stylesheet to keep in sync.

  The two things logical properties do not cover are handled explicitly at the
  bottom of this file: the score meter always fills bottom-up and reads
  left-to-right (it is a chart, not prose), and the row hover nudge moves
  towards the reader's start edge rather than always to the right.
*/

:root {
  --paper:      #eceff3;
  --surface:    #ffffff;
  --surface-2:  #f6f8fa;
  --ink:        #0c1116;
  --ink-2:      #3d4852;
  --muted:      #66727e;
  --line:       #d5dce3;
  --line-soft:  #e5eaef;

  /* Signal = how strongly this scored. Heat = how much people will argue. */
  --signal:     #4d7c0f;
  --signal-dim: #4d7c0f26;
  --heat:       #a21caf;
  --warn:       #b45309;
  --bad:        #b42318;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rail-w: 232px;
  --panel-w: 520px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, kbd { font-family: var(--mono); font-size: 0.86em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

.shell { display: flex; min-height: 100vh; }

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

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--ink);
  color: #cfd6dd;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail-mark-name {
  display: block;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.rail-mark-name span { color: var(--signal); }

.rail-mark-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d8b98;
}

/* ------------------------------------------------------ language switch */

.lang-switch {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 3px;
  background: #ffffff10;
  border-radius: 5px;
}

.lang-option {
  flex: 1;
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 5px 8px;
  color: #a8b4c0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.lang-option:hover { background: #ffffff14; color: #fff; }
.lang-option.is-active { background: var(--signal); color: #fff; }
/* Arabic needs a touch more room than "EN" and no letter-spacing. */
.lang-option[lang="ar"] { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; }

.rail-nav {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  flex: 1;
}
.rail-nav li { margin-bottom: 2px; }

.rail-link {
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  color: #a8b4c0;
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rail-link:hover { background: #ffffff12; color: #fff; }
.rail-link.is-active {
  background: var(--signal);
  color: #fff;
}

.rail-foot { border-top: 1px solid #ffffff1c; padding-top: 16px; }
.rail-note {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: #7d8b98;
}

/* ----------------------------------------------------------------- main */

.main {
  flex: 1;
  min-width: 0;
  padding: 40px 44px 80px;
  max-width: 1100px;
}

.view { display: none; }
.view.is-active { display: block; }

.view-head { margin-bottom: 28px; }

.eyebrow {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 640;
}

h2 {
  margin: 34px 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.lede { margin: 10px 0 0; color: var(--ink-2); max-width: 62ch; }

.filters {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.filters label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.filters input, .filters select {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  text-transform: none;
}

/* ------------------------------------------------------------ explainer */

/*
  "I don't understand some things in it" is a UI problem, not a docs problem.
  The answer lives on the screen, collapses once read, and stays one click away.
*/
.explain {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.explain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.explain-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.explain-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.explain-toggle:hover { border-color: var(--ink-2); color: var(--ink-2); }

.explain-intro { margin: 14px 0 0; color: var(--ink-2); font-size: 13.5px; }

.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 24px;
  margin-top: 14px;
}
.explain-item h3 {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.explain-item p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------- top pick */

/*
  Prose on one side, the three numbers on the other. As a single text column
  the panel left roughly half its width empty at desktop size, which is the
  "why is there so much white space" complaint in its most visible form.
*/
.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 26px;
}
.pick-body { min-width: 0; }
.pick .eyebrow { color: var(--signal); }
.pick h3 {
  margin: 4px 0 10px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 620;
}
.pick p { margin: 0 0 6px; color: #b9c4cf; font-size: 14px; max-width: 68ch; }
.pick .pick-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

.pick-numbers {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px 22px;
  padding-inline-start: 26px;
  border-inline-start: 1px solid #ffffff1f;
  font-family: var(--mono);
}
.pick-figure { text-align: start; }
.pick-figure b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.pick-figure span {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b98a5;
}
.pick-reach {
  grid-column: 1 / -1;
  margin: 8px 0 0 !important;
  font-size: 10.5px;
  color: #8b98a5 !important;
}

/* ---------------------------------------------------------- topic rows */

.topic-list { list-style: none; margin: 0; padding: 0; }

/*
  Three columns: the numbers, the substance, the chart.

  The middle column used to stretch against a short headline and leave a wide
  empty band before the meter — roughly 200px of nothing on every row at
  desktop width. It now carries the audience evidence line, so the space is
  filled with the thing you actually need in order to choose: what the score is
  made of. Nothing was made narrower; the emptiness was given a job.
*/
.topic {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 14px 16px;
  margin-bottom: 7px;
  text-align: start;
  width: 100%;
  transition: border-color .12s ease, transform .12s ease;
}
.topic:hover { border-color: var(--signal); transform: translateX(2px); }
/* minmax(0,…) above plus this stops a long unbroken headline or URL from
   forcing the whole row wider than the viewport. */
.topic-main { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- scores */

.topic-scores { font-family: var(--mono); line-height: 1; }

.score-main b {
  display: block;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.score-main small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  margin-top: 4px;
}

.score-split {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.score-split b { color: var(--ink-2); font-weight: 700; font-size: 11px; }

.topic-title {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.topic-why { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------- interest */

/*
  The audience strip. Band and score first because that is the decision, then
  the estimated reach, then the measured facts that produced it. The evidence
  is the reason this is trustworthy: "interest 87" means nothing on its own,
  "480 upvotes and 320 comments on Hacker News" is checkable.
*/
.topic-interest {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
}

.interest-band {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.interest-score { font-weight: 700; font-size: 12px; color: var(--ink-2); }
.interest-reach { color: var(--muted); }
.interest-evidence {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.topic-interest.is-niche   .interest-band { color: var(--muted); }
.topic-interest.is-growing .interest-band { color: #2563eb; }
.topic-interest.is-broad   .interest-band { color: var(--signal); }
.topic-interest.is-major   .interest-band { color: var(--heat); }

.topic-interest--none { color: var(--muted); font-size: 10.5px; font-family: var(--mono); }

.topic-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.tag--primary { border-color: var(--signal); color: var(--signal); }
.tag--warn { border-color: var(--warn); color: var(--warn); }
.tag--bad { border-color: var(--bad); color: var(--bad); }
.tag--heat { border-color: var(--heat); color: var(--heat); }

/*
  The signature element: seven bars, one per score component, in the same
  order everywhere. Reading left to right you can tell a fresh-but-crowded
  news item from a quiet evergreen explainer without opening either.
*/
.meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.meter-bar {
  width: 7px;
  background: var(--signal-dim);
  border-radius: 1px;
  position: relative;
  height: 100%;
}
.meter-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--signal);
  border-radius: 1px;
}
/* Mirrors .meter exactly, so each initial sits under its own bar. */
.meter-legend {
  display: flex;
  gap: 3px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}
.meter-legend span { width: 7px; text-align: center; }

.dials { display: flex; gap: 14px; margin-top: 10px; justify-content: flex-end; }
.dial { text-align: end; font-family: var(--mono); }
.dial b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.dial span {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- panel */

.panel {
  width: var(--panel-w);
  flex: 0 0 var(--panel-w);
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}
.panel-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}
.panel-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-body { padding: 22px 24px 60px; }
.panel-body h2:first-child { margin-top: 0; }
.panel-body h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 620;
}

.kv {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 4px;
}
.kv b { color: var(--ink-2); font-weight: 600; }

.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--line-soft);
  padding: 3px 0;
}

.fact {
  border-inline-start: 3px solid var(--line);
  padding: 6px 0;
  padding-inline-start: 12px;
  margin-bottom: 10px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.fact--verified { border-inline-start-color: var(--signal); }
.fact--single-source { border-inline-start-color: var(--warn); }
.fact--unverified { border-inline-start-color: var(--bad); }
.fact-note {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.angle-group { display: grid; gap: 8px; margin-bottom: 4px; }

/* Buttons, so reset the browser chrome and re-establish a card. */
.angle {
  display: block;
  width: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.angle:hover { border-color: var(--line); }
.angle.is-selected {
  border-color: var(--signal);
  background: #4d7c0f0f;
  border-inline-start-width: 3px;
}
.angle h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.angle p { margin: 0; font-size: 12.5px; color: var(--muted); }
.angle .kv { margin-top: 6px; }
.angle.is-selected .kv { color: var(--signal); }

/* -------------------------------------------- content language chooser */

.lang-choice {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.lang-choice-option {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--sans);
}
.lang-choice-option:hover { border-color: var(--ink-2); }
.lang-choice-option.is-selected {
  border-color: var(--signal);
  background: #4d7c0f12;
  color: #33520a;
  font-weight: 600;
}

/* ------------------------------------------------------------- drafts */

.draft {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
}

.draft-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.draft-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}
.draft-head .kv { margin: 0; }

/*
  The complete draft, always. No max-height, no fade, no "show more": the
  whole point of generating it is to read it and copy it, and a container that
  clips an article is a container that hides the part you were about to check.

  `unicode-bidi: plaintext` gives every line its own direction, inferred from
  its own first strong character. Without it an Arabic article's markdown
  markers get pushed to the wrong end of the line — `# عنوان` renders with the
  hash trailing — and a fenced English code block inside Arabic prose is laid
  out right-to-left. The copied string is unaffected either way; this is what
  the preview looks like.
*/
.draft-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 14px 16px;
}

.btn-copy.is-copied {
  border-color: var(--signal);
  background: #4d7c0f12;
  color: #33520a;
}

.draft-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  overflow-wrap: anywhere;
}
.draft-meta ul { margin: 6px 0 0; padding-inline-start: 16px; }

/* -------------------------------------------------------------- tables */

/* A table cannot reflow, so on a narrow screen it scrolls inside its own box
   rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.grid th {
  text-align: start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  white-space: nowrap;
}
.grid td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.grid tr:last-child td { border-bottom: 0; }
.grid .num { font-family: var(--mono); }
.source-status { max-width: 40ch; }
.source-status.is-error { color: var(--bad); }

/* ------------------------------------------------------------- buttons */

.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
  width: 100%;
}
.btn-primary:hover { background: #3f6a0b; border-color: #3f6a0b; }
.btn-ghost { background: transparent; border-color: #ffffff3d; color: #fff; }
.btn-ghost:hover { border-color: #fff; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

/* ------------------------------------------------------- AI settings */

.ai-settings { margin-bottom: 26px; }
.ai-settings .setting { grid-template-columns: minmax(0, 160px) minmax(0, 280px) minmax(0, 1fr); }
.ai-settings select {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.hint--warn { color: var(--warn); }
.ai-privacy {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--signal);
  text-decoration: underline;
  cursor: pointer;
}

.panel-note { line-height: 1.6; }

/* ------------------------------------------------------------ callouts */

/*
  Feedback for an action taken in the detail panel. It lives here rather than
  only in the flash bar because the two are on opposite sides of a wide screen
  — measured 640px apart — and a reply you cannot see reads as no reply.
*/
.panel-status:empty { display: none; }

.callout {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-inline-start-width: 3px;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
}
.callout p { margin: 0; flex: 1 1 220px; }

.callout--ok { border-inline-start-color: var(--signal); }
.callout--warn { border-inline-start-color: var(--warn); color: var(--warn); }
.callout--error {
  border-color: var(--bad);
  border-inline-start-color: var(--bad);
  background: #b4231810;
  color: var(--bad);
}
.callout--action {
  border-inline-start-color: var(--signal);
  background: #4d7c0f0f;
}

.btn-solid {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
  white-space: nowrap;
}
.btn-solid:hover { background: #3f6a0b; border-color: #3f6a0b; }

/* --------------------------------------------------------- static mode */

.mode-banner {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.mode-banner strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin-inline-end: 6px;
}

/* --------------------------------------------------------------- flash */

.flash {
  border-radius: 6px;
  padding: 11px 15px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--signal);
  background: #4d7c0f12;
  color: #33520a;
}
.flash[data-kind="error"] { border-color: var(--bad); background: #b4231810; color: var(--bad); }
.flash[data-kind="warn"] { border-color: var(--warn); background: #b4530910; color: var(--warn); }

.empty {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.empty code { background: var(--surface); padding: 2px 6px; border-radius: 3px; }

/* ------------------------------------------------------------ settings */

.setting {
  display: grid;
  grid-template-columns: minmax(0, 240px) 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.setting label { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.setting input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  min-width: 0;
}
.setting .hint { font-size: 12px; color: var(--muted); }

/* Shown, not hidden: a setting that does nothing yet should say so. */
.setting.is-unsupported label { color: var(--muted); text-decoration: line-through; }
.setting.is-unsupported .hint { color: var(--warn); }

/* ---------------------------------------------------------------- RTL */

/*
  Everything above is direction-agnostic. These are the deliberate exceptions.

  The score meter is a chart. Its bars fill from the bottom and its seven
  components are always in the documented order, so it must not mirror — a
  reader comparing two rows needs the freshness bar in the same place in both
  languages, and the legend under it is written to match.
*/
[dir="rtl"] .meter,
[dir="rtl"] .meter-legend,
[dir="rtl"] .dials {
  direction: ltr;
}
/* The legend takes no alignment of its own: it has to start exactly where the
   bars start, or the initials label the wrong components. */
[dir="rtl"] .dials { justify-content: flex-end; }
[dir="rtl"] .dial { text-align: right; }

/* The hover nudge follows the reading direction rather than always going right. */
[dir="rtl"] .topic:hover { transform: translateX(-2px); }

/* Latin-script identifiers keep their own direction inside Arabic prose. */
[dir="ltr"] { direction: ltr; }

/* --------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .panel {
    position: fixed;
    inset-inline-end: 0;
    top: 0;
    box-shadow: 0 0 40px #0c111624;
    z-index: 10;
  }
}

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    padding: 16px;
  }
  .rail-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; }
  .rail-nav li { margin: 0; }
  .rail-foot { border-top: 0; padding-top: 0; }
  .lang-switch { max-width: 220px; }
  .main { padding: 24px 18px 60px; }
  .panel { width: 100%; flex: none; }
  .panel-body { padding: 18px 16px 60px; }
  .topic { grid-template-columns: 64px minmax(0, 1fr); }
  .topic > :nth-child(3) { grid-column: 1 / -1; }
  /* The scorecard stacks under the prose rather than squeezing it. */
  .pick { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pick-numbers {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid #ffffff1f;
    padding-top: 16px;
  }
  .setting { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  h1 { font-size: 25px; }
  .draft-text { padding: 12px; }
}

@media (max-width: 420px) {
  .main { padding: 20px 12px 48px; }
  .topic { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .topic-score { display: flex; align-items: baseline; gap: 8px; }
  .topic-score small { margin-top: 0; }
  .btn { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .topic:hover { transform: none; }
  [dir="rtl"] .topic:hover { transform: none; }
}