/*
 * HUWAT AI — the design system, as the supplied design defines it.
 *
 * COLOUR CLASSIFIES, IT NEVER DECORATES. Every value below is sampled from the design's own
 * swatches (figure 1a) or quoted from its stylesheet. There are no gradients, no glows and no
 * colour that means "nice"; a colour on this page is a claim about what kind of statement you are
 * reading. Two backgrounds per screen, and no more.
 *
 * FOUR-PIXEL GRID, HAIRLINES, AND DASHED MEANS PROVISIONAL. A solid one-pixel border is a card the
 * register stands behind. A dashed border means provisional or unlinked, and it is used on nothing
 * else.
 *
 * NO MOTION. The design's state inventory is explicit: loading is a static skeleton, never a
 * shimmer. Absence is content, not a gap to be smoothed over.
 */

/* ---------------------------------------------------------------- fonts (self-hosted) */

@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Tajawal-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Tajawal-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Tajawal-700-latin.woff2') format('woff2'); }

@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ChakraPetch-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ChakraPetch-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ChakraPetch-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ChakraPetch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* identity and action */
  --brand-primary: #1070b8;
  --brand-link: #1272b9;
  --brand-deep: #0d5a93;

  /* edges only — never a page background outside the chrome */
  --surface-chrome: #0b1c2c;
  --surface-chrome-deep: #041424;

  /* what kind of statement this is */
  --class-scientific-fg: #085048;
  --class-scientific-bg: #e6f4f0;
  --class-editorial-fg: #68501c;
  --class-editorial-bg: #fbf3e2;
  --class-derived-fg: #4a3f8c;
  --class-derived-bg: #efecf9;
  --action-danger: #a83028;
  --action-danger-bg: #fbeceb;
  --state-review-fg: #1a5a86;
  --state-review-bg: #e7f0f8;

  /* surfaces and text */
  --surface-card: #ffffff;
  --surface-page: #eef2f6;
  --surface-sunken: #f5f8fa;
  --ink: #0f2231;
  --muted: #5a6b7b;
  --line: #d5dde5;
  --line-strong: #b9c7d4;

  --grid: 4px;
  --radius: 6px;
  --radius-sm: 4px;

  --font-ar: 'Tajawal', system-ui, sans-serif;
  --font-en: 'Chakra Petch', ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 15px;
  line-height: 1.7;
}

[lang="en"] body, body[data-locale="en"] { font-family: var(--font-en); }

a { color: var(--brand-link); text-decoration: none; }
a:hover { color: var(--brand-deep); }

/*
 * LATIN INSIDE ARABIC STAYS LATIN. Scientific names, register codes, DOIs and coordinates are
 * isolated so a right-to-left paragraph cannot reorder them. The design calls this LTR isolation and
 * it is the difference between a citation you can check and one you cannot.
 */
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-en); }
.sci { direction: ltr; unicode-bidi: isolate; font-family: var(--font-en); font-style: italic; }
.mono { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-size: 0.86em;
        letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- app frame */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.rail {
  background: var(--surface-chrome); color: #fff; display: flex; flex-direction: column;
  padding: 20px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail__brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 22px; }
.rail__brand img { height: 26px; filter: brightness(0) invert(1); }
.rail__brand span { font-family: var(--font-en); font-size: 15px; color: #5fb3ea; font-weight: 600; }
.rail__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.rail__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); color: #cfdae4; font-size: 14px;
}
.rail__nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.rail__nav a[aria-current="page"] { background: rgba(255,255,255,0.10); color: #fff; }
.rail__nav em { font-family: var(--font-en); font-style: normal; font-size: 11px; color: #7f93a6;
                direction: ltr; }
.rail__foot { margin-top: auto; padding: 18px 20px 0; border-top: 1px solid rgba(255,255,255,0.10);
              color: #8fa3b5; font-size: 12px; }
.rail__foot b { display: block; font: 600 10px var(--font-en); letter-spacing: 0.12em;
                color: #6f8498; margin-bottom: 4px; direction: ltr; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px; background: var(--surface-card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 4;
}
.topbar__right { display: flex; align-items: center; gap: 10px; }

.page { padding: 28px; max-width: 1180px; width: 100%; }
.page--wide { max-width: none; }

/* ---------------------------------------------------------------- demo banner */

/*
 * THE DEMO BANNER IS NOT DECORATION. Every figure this shell renders is a fixture. The banner says
 * so on every page, in both languages, and it is not dismissible: a demo that can be mistaken for
 * the register is worse than no demo.
 */
.demobar {
  background: var(--class-editorial-bg); color: var(--class-editorial-fg);
  border-bottom: 1px solid #e3d5b0; padding: 8px 28px; font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.demobar b { font: 600 11px var(--font-en); letter-spacing: 0.1em; direction: ltr;
             border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; }

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card);
  font-size: 12.5px; line-height: 1.6; color: var(--ink); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
                flex: none; }
.chip--verified   { color: var(--class-scientific-fg); background: var(--class-scientific-bg);
                    border-color: #b6ded4; }
.chip--review     { color: var(--state-review-fg);     background: var(--state-review-bg);
                    border-color: #c3d8ea; }
.chip--asserted   { color: var(--brand-deep);          background: #e8f1f9; border-color: #c4dcef; }
.chip--derived    { color: var(--class-derived-fg);    background: var(--class-derived-bg);
                    border-color: #cfc7ea; }
.chip--conflict   { color: var(--action-danger);       background: var(--action-danger-bg);
                    border-color: #eec4c0; }
.chip--insufficient { color: var(--muted); background: transparent; border-style: dashed; }
.chip--insufficient::before { background: transparent; border: 1px solid currentColor; }

/* source-system chips carry a Latin code, so they are typeset as one */
.chip--system { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.06em;
                border-radius: var(--radius-sm); direction: ltr; padding: 3px 8px; }
.chip--system::before { display: none; }
.chip--ksafish { color: var(--class-scientific-fg); border-color: #b6ded4;
                 background: var(--class-scientific-bg); }
.chip--market  { color: var(--muted); }
.chip--ops     { color: var(--muted); }
.chip--analytics { color: var(--class-derived-fg); border-color: #cfc7ea;
                   background: var(--class-derived-bg); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.card--provisional { border-style: dashed; background: transparent; }
.card__kicker { font: 500 11px var(--font-en); letter-spacing: 0.1em; color: var(--muted);
                direction: ltr; unicode-bidi: isolate; display: block; margin-bottom: 6px; }
.card__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.card__body { color: var(--muted); font-size: 14px; }
.card__foot { margin-top: 12px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ---------------------------------------------------------------- answer anatomy */

/*
 * SEVEN PARTS, ALWAYS IN THIS ORDER. The design fixes the order so that a reader learns one shape
 * and then reads every answer with it: answer, evidence, market data, derived analysis, citations,
 * print/export, source provenance.
 */
.answer { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); }
.answer__part { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.answer__part:last-child { border-bottom: 0; }
.answer__part--provenance { background: var(--surface-sunken); }
.answer__label { font: 500 11px var(--font-en); letter-spacing: 0.1em; color: var(--muted);
                 direction: ltr; unicode-bidi: isolate; display: block; margin-bottom: 8px; }
.answer__text { font-size: 15px; line-height: 1.9; }
.answer__hint { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* the four knowledge layers, each with the colour of what it is */
.layer { border-inline-start: 3px solid var(--line); padding-inline-start: 16px; margin-bottom: 22px; }
.layer--scientific { border-inline-start-color: var(--class-scientific-fg); }
.layer--market     { border-inline-start-color: var(--line-strong); }
.layer--operations { border-inline-start-color: var(--line-strong); }
.layer--derived    { border-inline-start-color: var(--class-derived-fg); }
.layer__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
/* Both tags: a layer heading on the page is an h2, while the same block reused inside the
   reserved answer area sits under that area's own h2, so there it is correctly an h3. */
.layer__head h2, .layer__head h3 { font-size: 17px; font-weight: 700; }
.layer__kicker { font: 500 11px var(--font-en); letter-spacing: 0.1em; color: var(--muted);
                 direction: ltr; unicode-bidi: isolate; }
.layer__note { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }

/* provenance table */
.prov { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prov th, .prov td { padding: 7px 0; border-bottom: 1px dashed var(--line); text-align: start;
                     vertical-align: top; }
.prov th { font-weight: 500; color: var(--muted); width: 38%; }
.prov td { color: var(--ink); }
.prov tr:last-child th, .prov tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- evidence drawer */

.evidence { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-card); }
.evidence + .evidence { margin-top: 10px; }
.evidence > summary {
  list-style: none; cursor: pointer; padding: 12px 16px; display: flex; gap: 12px;
  align-items: center; justify-content: space-between;
}
.evidence > summary::-webkit-details-marker { display: none; }
.evidence > summary:hover { background: var(--surface-sunken); }
.evidence__open { font: 500 11px var(--font-en); color: var(--muted); direction: ltr; }
.evidence__body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.evidence__body .prov { margin-top: 12px; }

/* an artefact that exists and may not be shown */
.withheld {
  border: 1px dashed #eec4c0; background: var(--action-danger-bg); color: var(--action-danger);
  border-radius: var(--radius); padding: 14px 16px; font-size: 13.5px;
}
.withheld b { display: block; font-size: 14px; margin-bottom: 4px; }

/* ---------------------------------------------------------------- system states */

.state { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
         background: var(--surface-card); }
.state__code { font: 600 11px var(--font-en); letter-spacing: 0.08em; direction: ltr;
               unicode-bidi: isolate; display: block; margin-bottom: 6px; }
.state__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.state__note { color: var(--muted); font-size: 13px; }
.state--amber   { background: var(--class-editorial-bg); border-color: #e7d9b8;
                  color: var(--class-editorial-fg); }
.state--red     { background: var(--action-danger-bg); border-color: #eec4c0;
                  color: var(--action-danger); }
.state--blue    { background: var(--state-review-bg); border-color: #c3d8ea;
                  color: var(--state-review-fg); }
.state--amber .state__note, .state--red .state__note, .state--blue .state__note { color: inherit;
                  opacity: 0.85; }

/* LOADING — static skeleton, deliberately without animation */
.skeleton { height: 10px; border-radius: 3px; background: #e3e9ef; margin-bottom: 8px; }
.skeleton--60 { width: 60%; } .skeleton--80 { width: 80%; } .skeleton--40 { width: 40%; }

/* ---------------------------------------------------------------- ask box */

.ask { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 14px 16px; }
.ask__row { display: flex; gap: 10px; align-items: center; }
.ask__input {
  flex: 1; border: 0; font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; padding: 6px 2px;
}
.ask__input::placeholder { color: #93a4b3; }
.ask__scope { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px;
              padding-top: 12px; border-top: 1px solid var(--line); }
.ask__scope > span { font-size: 12px; color: var(--muted); }
.ask__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
             margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ask__foot b { font: 600 11px var(--font-en); letter-spacing: 0.08em; color: var(--muted);
               direction: ltr; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  background: var(--surface-card); color: var(--ink); border-radius: var(--radius-sm);
  padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
}
.btn:hover { border-color: var(--line-strong); }
.btn--primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn--ghost { background: transparent; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.suggestions a { border: 1px solid var(--line); background: var(--surface-card);
                 border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px;
                 color: var(--ink); }
.suggestions a:hover { border-color: var(--line-strong); }

/* ---------------------------------------------------------------- hero (landing) */

.hero {
  background: var(--surface-chrome);
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  color: #fff; padding: 56px 28px 64px; text-align: center;
}
.hero__lockup { display: flex; align-items: center; justify-content: center; gap: 12px;
                margin: 18px 0 6px; }
.hero__lockup img { height: 60px; filter: brightness(0) invert(1); }
.hero__lockup span { font: 600 26px var(--font-en); color: #5fb3ea; direction: ltr; }
.hero__tag { color: #b9c7d4; font-size: 15px; }
.hero h1 { font-size: 30px; font-weight: 700; margin: 26px auto 8px; max-width: 22ch; line-height: 1.5; }
.hero__sub { color: #b9c7d4; font: 400 14px var(--font-en); direction: ltr; unicode-bidi: isolate; }
.hero__ask { max-width: 760px; margin: 28px auto 0; text-align: start; }
.hero .ask { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.hero .ask__input { color: #fff; }
.hero .ask__input::placeholder { color: #8fa3b5; }
.hero .ask__scope { border-top-color: rgba(255,255,255,0.14); }
.hero .ask__scope > span, .hero .ask__foot, .hero .ask__foot b { color: #b9c7d4; }
.hero .chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: #dce6ee; }
.hero__scope { color: #8fa3b5; font-size: 13px; margin-top: 18px; }
.hero .suggestions { justify-content: center; }
.hero .suggestions a { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16);
                       color: #dce6ee; }

/* ---------------------------------------------------------------- misc */

.section { margin-bottom: 28px; }
.section__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section__head h2 { font-size: 20px; font-weight: 700; }
.section__head small { font: 400 12px var(--font-en); color: var(--muted); direction: ltr;
                       unicode-bidi: isolate; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
        margin-bottom: 20px; }
.tabs a { padding: 9px 13px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent;
          margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand-primary);
                               font-weight: 500; }

.question {
  background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 18px; font-size: 15px;
}

.summary {
  background: var(--class-derived-bg); border: 1px solid #cfc7ea; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 8px;
}
.summary b { display: block; margin-bottom: 6px; color: var(--class-derived-fg); }

.context { font-size: 13.5px; }
/*
 * THE VALUE COLUMN MUST BE ABLE TO BREAK. These values are identifiers - a contract version, a
 * register code, a digest - and an auto-sized column takes its width from the longest unbreakable
 * one, which pushed the whole page 32px wider than the viewport the first time the contract version
 * was printed here. minmax(0, …) lets the column shrink and overflow-wrap lets the token break.
 */
.context dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 6px 12px; }
.context dt { color: var(--muted); }
.context dd { font-family: var(--font-en); font-size: 12px; direction: ltr; unicode-bidi: isolate;
              text-align: end; overflow-wrap: anywhere; min-width: 0; }

.sidebar { display: flex; flex-direction: column; gap: 20px; }
.split { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }

.subject { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.subject__name { font-size: 20px; font-weight: 700; }

.locale-switch { display: flex; gap: 4px; }
.locale-switch a { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px;
                   font: 500 12px var(--font-en); color: var(--muted); direction: ltr; }
.locale-switch a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.footer { padding: 24px 28px 40px; color: var(--muted); font-size: 12.5px; }

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

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center;
          gap: 12px; padding: 10px 16px; overflow-x: auto; }
  .rail__brand { padding: 0 8px 0 0; }
  .rail__nav { flex-direction: row; padding: 0; }
  .rail__nav a { padding: 7px 10px; }
  .rail__nav em { display: none; }
  .rail__foot { display: none; }
  .split { grid-template-columns: 1fr; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .page, .topbar, .demobar { padding-inline: 16px; }
  /* the design's mobile rule: one column, 44px targets, no dashboards */
  .btn, .rail__nav a, .tabs a { min-height: 44px; }
  .hero { padding: 36px 16px 40px; }
  .hero h1 { font-size: 24px; }
}

@media print {
  .rail, .topbar, .ask, .suggestions, .locale-switch { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; }
  .answer, .card { break-inside: avoid; }
}

/* ---------------------------------------------------------------- utilities
 *
 * WHY THESE EXIST AT ALL. The content policy this site is served with says `style-src 'self'` and
 * means it, so an inline `style` attribute is not applied - it is dropped, silently, and the first
 * build of this shell rendered a logo at its natural size because of exactly that. Spacing therefore
 * lives here, in classes, and the policy stays strict instead of gaining an `'unsafe-inline'` that
 * would make it decorative.
 */

.u-row { display: flex; align-items: center; gap: 10px; }
.u-center { justify-content: center; }
.u-muted { color: var(--muted); }

.u-mt-0 { margin-top: 0; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-28 { margin-top: 28px; }
.u-mt-32 { margin-top: 32px; }

.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-22 { margin-bottom: 22px; }

.u-my-12 { margin: 12px 0; }
.u-head-gap { margin: 18px 0 12px; }

.brand-mark { height: 22px; }
.brand-ai { font-family: var(--font-en); color: var(--brand-primary); }

.card--conflict { border-color: #eec4c0; }

/* A map surface that is drawn rather than claimed — see the species view. */
.map-placeholder {
    height: 180px; border-radius: 4px; margin: 10px 0;
    background: repeating-linear-gradient(45deg, #f2f6f9, #f2f6f9 12px, #eaf0f5 12px, #eaf0f5 24px);
}

/* ---------------------------------------------------------------- overflow discipline
 *
 * A GRID CHILD DEFAULTS TO min-width:auto, WHICH IS HOW A PHONE ENDS UP SCROLLING SIDEWAYS. The
 * rail becomes a horizontal strip below 900px and its own content is wider than the screen; without
 * `min-width: 0` it pushes the whole document wider instead of scrolling inside itself, and in a
 * right-to-left page the result is a body that starts off-screen. The long identifiers - register
 * codes, loci, digests - are the other half: they are unbreakable strings by nature, so they are
 * told explicitly where they may break.
 */
.app > * { min-width: 0; }
.card, .answer, .layer, .evidence, .state, .question, .summary { min-width: 0; }
.mono, .ltr, .sci { overflow-wrap: anywhere; }
.prov th, .prov td { word-break: break-word; }
.evidence > summary { flex-wrap: wrap; }

@media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .rail { min-width: 0; max-width: 100vw; }
    .topbar { flex-wrap: wrap; row-gap: 8px; }
    .topbar__right { flex-wrap: wrap; }
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .subject { row-gap: 6px; }
}

/*
 * The topbar heading is the document's h1.
 *
 * It looks like a topbar title and it IS the page's name, which is what a screen reader needs; the
 * app pages previously started at h2 and left the document unnamed. Sized here rather than left at
 * the browser's 2em, which would turn the chrome into a banner.
 */
.topbar__title { font-size: 16px; font-weight: 700; line-height: 1.4; }

/* A counterpart headline in the other language, isolated so it is announced and shaped correctly. */
.hero__sub[lang] { unicode-bidi: isolate; }

/*
 * FOCUS IS VISIBLE. There was no focus rule at all before this, and the ask input actively removed
 * its outline, so a reader navigating by keyboard could not tell where they were.
 *
 * :focus-visible rather than :focus, so a mouse click does not draw a ring the design never asked
 * for. Two pixels of the brand colour reads as classification rather than decoration, and at 5.21:1
 * against a card it clears the 3:1 WCAG expects of a non-text indicator.
 */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; }

/* The ask box is one control to the eye, so it answers for the input inside it as well. */
.ask:focus-within { border-color: var(--brand-primary); }

/*
 * A way past the rail.
 *
 * CLIPPED RATHER THAN MOVED OFF-CANVAS. The usual `inset-inline-start: -9999px` is wrong here: in an
 * RTL document the inline start IS the right edge, so a negative offset throws the link thousands of
 * pixels to the RIGHT of the viewport instead of hiding it. The audit caught it sitting at x=10262.
 * Clipping to a single pixel hides it with no off-canvas geometry in either direction, and unlike
 * display:none it stays in the tab order, which is the whole point of the control.
 */
.skip {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 10;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--surface-card); color: var(--brand-primary); border: 1px solid var(--brand-primary);
  border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }