@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-arabic-wght-normal.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Departures board: warm charcoal, one amber. Same in light and dark. */
  --ground: #161513;
  --surface: #1f1d1a;
  --well: #0d0c0b;
  --ink: #f2ede3;
  --muted: #8e877b;
  --line: #34312c;
  --amber: #ffb21e;
  --flap: #0a0a09;
  --flap-ink: #ffb21e;
  --display: "Big Shoulders Display", "Hanken Grotesk", "Readex Pro", system-ui, sans-serif;
  --ui: "Hanken Grotesk", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Readex Pro", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; background: var(--ground); color: var(--ink); font: 400 14.5px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; padding: 12px 20px 8px; }
.brand { margin: 0; font: 800 26px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.brand i { font-style: normal; color: var(--amber); }
.bar-meta { color: var(--muted); font-size: 12.5px; }
.tagline { flex-basis: 100%; margin: 2px 0 0; font-size: 15px; font-weight: 500; }

.stack { display: grid; gap: 10px; padding: 0 20px 16px; min-height: 0; }

/* Editors */
.editors { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; position: relative; min-height: 0; }
.editor { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-top: 3px solid var(--amber); border-radius: 0; padding: 8px 10px 10px; }
.editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; min-height: 22px; }
.editor-head label { display: inline-flex; align-items: center; font: 700 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.step { display: inline-grid; place-items: center; width: 20px; height: 22px; margin-inline-end: 8px; border-radius: 2px; background: var(--flap); color: var(--amber); font: 800 14px var(--display); letter-spacing: 0; }
.err { color: var(--amber); font: 600 12px var(--mono); text-align: end; }
.editors textarea {
  flex: 1; min-height: 110px; width: 100%; resize: none; padding: 10px 12px;
  border: 0; border-radius: 2px; background: var(--well); color: var(--ink); caret-color: var(--amber);
  font: 400 12px/1.65 var(--mono); tab-size: 2;
}
.editors textarea::placeholder { color: var(--muted); font-family: var(--ui); font-size: 14px; }
.editors textarea:focus-visible { outline: 1px solid var(--amber); outline-offset: 0; }
.editor.bad { box-shadow: inset 0 0 0 1px var(--amber); }
.tools { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; justify-content: flex-end; margin-top: -4px; }
.primary { font: 700 13px/1 var(--ui); padding: 9px 14px; border: 0; border-radius: 2px; background: var(--amber); color: var(--flap); cursor: pointer; }
.primary:hover { opacity: 0.85; }

.link { font: 600 12.5px/1 var(--ui); background: none; border: 0; padding: 6px 2px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer; }
.link:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Board: the whole point of the tool, as a number */
.board { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 36px; padding: 10px 12px; background: var(--flap); }
.label { font: 700 13px/1.1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.noise { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.noise-num { font: 800 clamp(40px, 5.6vw, 66px)/0.9 var(--display); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 0.07em; text-decoration-color: var(--amber); }
.real { display: flex; align-items: center; gap: 14px; }
.flaps { display: flex; gap: 6px; }
.flap {
  position: relative; display: grid; place-items: center; width: clamp(34px, 4.2vw, 50px); height: clamp(50px, 6vw, 72px);
  border-radius: 3px; background: #1d1c19; color: var(--flap-ink);
  font: 800 clamp(40px, 5vw, 60px)/1 var(--display); font-variant-numeric: tabular-nums;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--flap); }
.flap > span { transform: translateY(0.02em); }
.flaps.idle .flap { opacity: 0.35; }
.warn { flex-basis: 100%; margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }
.warn b { font-family: var(--mono); font-weight: 600; color: var(--amber); }

@media (prefers-reduced-motion: no-preference) {
  .flap.flip { animation: flip 0.42s cubic-bezier(0.3, 0.8, 0.3, 1); }
  @keyframes flip { 0% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
}

/* Results */
.results { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-radius: 0; padding: 10px 14px 4px; }
.results-head { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding-bottom: 8px; }
.results-title { margin: 0; display: inline-flex; align-items: center; font: 800 17px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.filters { display: inline-flex; gap: 2px; padding: 3px; border-radius: 2px; background: var(--well); }
.filters button { font: 600 12.5px/1 var(--ui); padding: 8px 11px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; }
.filters button b { font: 600 11.5px var(--mono); margin-inline-start: 4px; }
.filters button:hover { color: var(--ink); }
.filters button:disabled { opacity: 0.45; cursor: default; }
.filters button:disabled:hover { color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--amber); color: var(--flap); }
.toggle { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-weight: 600; font-size: 13px; cursor: pointer; }
.toggle input { accent-color: var(--amber); width: 16px; height: 16px; }

.changes { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); column-gap: 28px; align-content: start; }
.changes li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.tag { font: 700 12px/1.6 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.tag { color: var(--amber); }
.path { font: 600 12.5px/1.5 var(--mono); word-break: break-all; }
.vals { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 400 12px/1.5 var(--mono); }
.vals code { font: inherit; padding: 1px 6px; border-radius: 2px; word-break: break-all; }
.vals .old { background: var(--well); color: var(--muted); text-decoration: line-through; }
.vals .new { background: var(--well); color: var(--amber); font-weight: 600; }
.vals .arrow { color: var(--muted); }
.changes:empty { display: none; }
.empty { margin: 0; padding: 22px 0; text-align: center; color: var(--muted); }
.empty strong { color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: 24px; margin: 0; padding: 10px 16px; border-radius: 2px;
  background: var(--amber); color: var(--flap); font: 600 13px var(--ui);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* One screen on desktop-sized windows */
@media (min-width: 900px) and (min-height: 640px) {
  .app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .stack { grid-template-rows: minmax(0, 1fr) auto minmax(220px, 40%); }
  .editors textarea { min-height: 56px; }
}
@media (max-width: 899px), (max-height: 639px) {
  .changes { overflow: visible; }
  .editors textarea { min-height: 150px; }
}
@media (max-width: 700px) {
  .bar, .stack { padding-inline: 14px; }
  .editors { grid-template-columns: 1fr; }
  .toggle { margin-inline-start: 0; }
  .changes li { grid-template-columns: 1fr; }
  .vals { grid-column: 1; }
}

/* Questions under the tool: for people who scroll, and for search engines */
.faq { max-width: 920px; margin: 0 auto; padding: 56px 20px 64px; }
.faq h2 { margin: 0 0 20px; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 32px; }
.faq h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.faq p { margin: 0; color: var(--muted); line-height: 1.6; }

/* Arabic page: letter spacing breaks the joins between Arabic letters. JSON stays left to right. */
:lang(ar) :is(.label, .editor-head label, .results-title, .tag, .faq h2) { letter-spacing: 0; }
.path, .vals code { direction: ltr; unicode-bidi: isolate; }
.flaps { direction: ltr; } /* digit tiles read 05, not 50 */
[dir="rtl"] .path { text-align: right; }
[dir="rtl"] .editors textarea::placeholder { direction: rtl; text-align: right; }
.lang { margin-inline-start: 10px; font-weight: 600; color: var(--ink); unicode-bidi: isolate; }