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

/* ==========================================================================
   D1 — حاشية (margin note / colophon)
   A critical edition of a manuscript. One text column, one apparatus column,
   ruled lines instead of pills, rubrication (red ochre) as the ONLY chromatic
   accent — exactly the way a scribe used a second ink to mark what mattered.
   Everything else is paper and ink.
   ========================================================================== */

:root {
  --paper: #f7f3ea;
  --paper-deep: #efe8da;
  --ink: #1c1917;
  --ink-soft: #57534e;
  --ink-faint: #6b6259;    /* 5.39:1 on paper — faint must still be readable, not decorative */
  --rule: #d6cdbb;
  --rule-strong: #b3a794;
  --rubric: #8c2f16;      /* the second ink */
  --rubric-soft: #9c4025;  /* 5.2:1 — the soft ink is for small text, so it must pass too */
  --ok: #2f5d3a;
  --warn: #7a5a12;
  --bad: #8c2f16;

  --serif: "SF Arabic", "Geeza Pro", "Al Bayan", "Noto Naskh Arabic", "Traditional Arabic",
           "Segoe UI", "Noto Sans Arabic", system-ui, sans-serif;
  --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;

  --measure: 68ch;
  --scroll-thumb: #b3a794;
  --scroll-track: #efe8da;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
}

/* Paper grain without an image: two very low-contrast repeating gradients. No network asset. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,105,80,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,105,80,.025) 0 1px, transparent 1px 4px);
}
body > * { position: relative; z-index: 1; }

.wrap { max-inline-size: 1220px; margin-inline: auto; padding-inline: 1.25rem; }

/* ---------- masthead ---------- */
.masthead {
  border-block-end: 2px solid var(--ink);
  background: var(--paper);
  padding-block: 1rem 0;
}
.masthead-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
  padding-block-end: .75rem;
}
.wordmark { text-decoration: none; color: inherit; display: block; }
.wordmark-ar {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}
.wordmark-sub {
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
  border-block-start: 1px solid var(--rule);
  padding-block-start: .3rem;
  margin-block-start: .2rem;
}
.search { display: flex; gap: .4rem; align-items: stretch; flex-wrap: wrap; max-inline-size: 100%; }
.search input {
  flex: 1 1 12rem;
  min-inline-size: 0;           /* flex items refuse to shrink below their intrinsic size without this */
  padding: .5rem .75rem;
  border: 1px solid var(--rule-strong);
  background: #fffdf8;
  border-radius: 0;             /* squared: this is a printed page, not an app */
  font-size: .95rem;
}
.search button {
  padding: .5rem 1.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  cursor: pointer;
  font-size: .95rem;
}
.search button:hover { background: var(--rubric); border-color: var(--rubric); }

.masthead-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: baseline;
  border-block-start: 1px solid var(--rule);
  padding-block: .5rem;
  font-size: .95rem;
}
.masthead-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  padding-block-end: .15rem;
}
.masthead-nav a:hover { color: var(--rubric); border-block-end-color: var(--rubric-soft); }
.masthead-nav a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--rubric); font-weight: 600; }
.masthead-count { margin-inline-start: auto; color: var(--ink-faint); font-size: .85rem; }

/* ---------- two-column edition layout ---------- */
main { padding-block: 2.5rem 4rem; }
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 20rem);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .columns { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.col-main { max-inline-size: var(--measure); }

/* ---------- the apparatus ---------- */
.hashiya {
  position: sticky;
  inset-block-start: 1rem;
  max-block-size: calc(100vh - 2rem);
  overflow-y: auto;
  border-inline-start: 1px solid var(--rule-strong);
  padding-inline-start: 1.25rem;
  font-size: .9rem;
}
.hashiya-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--rubric);
  border-block-end: 1px solid var(--rule);
  padding-block-end: .35rem;
  margin-block-end: .75rem;
}
.notes { display: grid; gap: .9rem; counter-reset: none; }
.notes li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 .55rem; align-items: baseline; }
/* RTL order: the number leads (right edge), then the rule, then the text column. */
.note-n {
  grid-row: span 3;
  grid-column: 1;
  font-size: .78rem;
  font-weight: 600;
  color: currentColor;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border-inline-start: 1px solid var(--rule-strong);
  padding-inline-start: .45rem;
  align-self: start;
}
.notes li.tone-good .note-n { color: var(--ok); }
.notes li.tone-warn .note-n { color: var(--warn); }
.notes li.tone-bad .note-n { color: var(--bad); }
.notes li.tone-muted .note-n { color: var(--ink-faint); }
.notes li > *:not(.note-n) { grid-column: 2; }
.note-label { font-weight: 600; font-size: .88rem; }
.note-value { color: var(--ink); }
.note-detail { color: var(--ink-soft); font-size: .85rem; line-height: 1.8; }

/* ---------- trust block (the honest badge) ---------- */
.hashiya-block {
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid currentColor;
  background: #fffdf8;
  padding: 1rem 1.2rem;
  margin-block: 1.25rem 1.75rem;
}
.hashiya-block-h { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.hashiya-means { margin-block-start: .4rem; }
.hashiya-not { margin-block-start: .5rem; font-size: .92rem; color: var(--ink-soft); }
.hashiya-not strong { color: var(--bad); }
.hashiya-block.tone-warn .hashiya-not strong { color: var(--warn); }
.hashiya-block.tone-muted .hashiya-not strong { color: var(--ink-soft); }
.hashiya-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .3rem 1.5rem;
  margin-block-start: .9rem;
  border-block-start: 1px solid var(--rule);
  padding-block-start: .7rem;
  font-size: .88rem;
}
.hashiya-fact { display: flex; gap: .5rem; align-items: baseline; }
.hashiya-fact dt { color: var(--ink-faint); min-inline-size: 7.5rem; }
.hashiya-fact dd { margin: 0; }

/* ---------- copy affordance ---------- */
.copy-line { display: flex; align-items: center; gap: .6rem; margin-block: .5rem; }
.btn-copy {
  padding: .3rem .8rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-deep);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  font-size: .85rem;
}
.btn-copy:hover { border-color: var(--rubric); color: var(--rubric); }
.copy-note { font-size: .85rem; color: var(--ink-faint); }

/* ---------- prose ---------- */
.kicker { font-size: .82rem; color: var(--rubric); letter-spacing: 0; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-block: .4rem .8rem; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-inline-size: 58ch; }
.rule-h {
  font-size: 1rem;
  border-block-end: 1px solid var(--rule-strong);
  padding-block-end: .35rem;
  margin-block: 2.5rem 1rem;
  color: var(--rubric);
}
.block { margin-block-start: 1.5rem; }
.block-note { color: var(--ink-soft); margin-block-start: .6rem; font-size: .95rem; }
.muted { color: var(--ink-faint); }
em { font-style: normal; border-block-end: 1px solid var(--rubric-soft); }

/* ---------- trust as a ruled line, not a pill ---------- */
.tier-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-block: .75rem;
  font-size: .95rem;
}
/* the ruled mark: a short rule used as a status flag */
.rubric { inline-size: 1.6rem; block-size: 2px; background: currentColor; display: inline-block; }
.tier-line--lg { font-size: 1.05rem; }
.tier-line--lg .rubric { inline-size: 2.6rem; block-size: 3px; }
.tier-name { font-weight: 700; }
.tier-note { color: var(--ink-soft); }
.tier-sep { color: var(--ink-faint); }
.tone-good { color: var(--ok); }        /* verified: green ink, never red */
.tone-warn { color: var(--warn); }
.tone-bad { color: var(--bad); }
.tone-muted { color: var(--ink-faint); }
.tier-note, .tier-sep { color: var(--ink-soft); }

.tier-mini {
  display: inline-block;
  border-block-end: 2px solid currentColor;
  font-weight: 600;
  font-size: .88rem;
}
.tier-legend { margin-block-start: 1rem; }

/* ---------- toc ---------- */
.toc { display: grid; gap: .1rem; margin-block-start: .5rem; }
.toc a {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding-block: .7rem;
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.toc a:hover .toc-t { color: var(--rubric); }
.toc-t { font-weight: 600; font-size: 1.05rem; }
.toc-d { color: var(--ink-soft); font-size: .92rem; }

/* ---------- index list ---------- */
.page-head { margin-block-end: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 1.5rem; }
.filters fieldset { border: 1px solid var(--rule); padding: .6rem .8rem; min-inline-size: 12rem; }
.filters legend { font-size: .8rem; color: var(--rubric); padding-inline: .3rem; }
.filters label {
  /* The label is the click target, not the 13px checkbox inside it. 2.2rem ≈ 35px keeps the
     filter lists scannable while clearing the WCAG 2.5.8 minimum with room to spare. */
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  min-block-size: 2.2rem;
  padding-block: .2rem;
}
.result-count { color: var(--ink-soft); font-size: .9rem; border-block-end: 1px solid var(--rule); padding-block-end: .5rem; }

.index-list { display: grid; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: .5rem 2rem;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--rule);
  border-inline-start: 3px solid transparent;
  padding-inline-start: .8rem;
}
.row.tone-good { border-inline-start-color: var(--ok); }
.row.tone-warn { border-inline-start-color: var(--warn); }
.row.tone-bad { border-inline-start-color: var(--bad); }
.row-title { font-size: 1.12rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.row-title:hover { color: var(--rubric); text-decoration: underline; }
.row-summary { color: var(--ink-soft); font-size: .93rem; margin-block-start: .25rem; max-inline-size: 46ch; }
.row-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; font-size: .85rem; }
.row-meta div { display: flex; gap: .4rem; align-items: baseline; }
.row-meta dt { color: var(--ink-faint); }
.row-meta dd { margin: 0; }
@media (max-width: 780px) {
  .row { grid-template-columns: minmax(0, 1fr); }
}

.pager { display: flex; gap: 1rem; align-items: baseline; margin-block-start: 1.5rem; font-size: .9rem; }
.pager a { color: var(--rubric); }
.pager a.is-disabled { color: var(--ink-faint); pointer-events: none; }
.pager-current { margin-inline-end: auto; color: var(--ink-soft); }

/* ---------- skill detail ---------- */
.breadcrumb { font-size: .85rem; color: var(--ink-faint); margin-block-end: 1rem; }
.breadcrumb a { color: var(--ink-soft); }
.latin-name { font-family: var(--sans); font-size: .9rem; color: var(--ink-faint); }

.snippet {
  background: #fffdf8;
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--ink);
  padding: .8rem 1rem;
  margin-block: .6rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.7;
  white-space: pre;
}
.snippet code { background: none; padding: 0; }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--paper-deep);
  padding: .05rem .3rem;
  border: 1px solid var(--rule);
}

.perms { display: grid; gap: .3rem; }
.perms li { padding-inline-start: 1.1rem; position: relative; }
.perms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .75em;
  inline-size: .5rem;
  block-size: 1px;
  background: var(--rubric);
}

.versions { inline-size: 100%; border-collapse: collapse; margin-block-start: .5rem; font-size: .9rem; }
.versions caption { text-align: start; color: var(--ink-soft); font-size: .85rem; padding-block-end: .4rem; }
.versions th, .versions td { text-align: start; padding: .5rem .6rem; border-block-end: 1px solid var(--rule); vertical-align: top; }
.versions thead th { color: var(--rubric); font-size: .82rem; border-block-end: 1px solid var(--rule-strong); }
.versions tbody tr.tone-bad { background: rgba(140,47,22,.05); }

/* Below 620px four columns cannot be read at once, so the table stops being a table: each row
   becomes a labelled block. A squeezed table is worse than a stacked list. */
@media (max-width: 620px) {
  .versions thead { display: none; }
  .versions, .versions tbody, .versions tr, .versions td { display: block; inline-size: 100%; }
  .versions tr { border-block-end: 1px solid var(--rule); padding-block: .6rem; }
  .versions td { border: 0; padding: .1rem 0; }
  .versions td::before {
    content: attr(data-label);
    display: inline-block;
    min-inline-size: 7rem;
    color: var(--ink-faint);
    font-size: .82rem;
  }
}

.colophon { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .4rem 2rem; font-size: .9rem; }
.colophon div { display: flex; gap: .5rem; align-items: baseline; border-block-end: 1px dotted var(--rule-strong); padding-block: .35rem; }
.colophon dt { color: var(--ink-faint); min-inline-size: 8rem; }
.colophon dd { margin: 0; }

/* ---------- review console ---------- */
.console-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-block-start: 1.25rem;
  border-block: 1px solid var(--rule-strong);
  padding-block: .8rem;
}
.console-stats dt { font-size: .8rem; color: var(--ink-faint); }
.console-stats dd { margin: 0; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.queue { display: grid; }
.q-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem auto;
  gap: .5rem 1.5rem;
  align-items: start;
  padding-block: 1rem;
  border-block-end: 1px solid var(--rule);
}
.q-sub { color: var(--ink-soft); font-size: .88rem; margin-block-start: .2rem; }
.q-flags { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-block-start: .4rem; font-size: .82rem; color: var(--bad); }
.q-flags li { border-inline-start: 2px solid currentColor; padding-inline-start: .4rem; }
.q-flags li.none { color: var(--ink-faint); }
.q-score { text-align: center; display: grid; gap: .1rem; }
.score-n { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.score-of { font-size: .75rem; color: var(--ink-faint); }
.score-sla { font-size: .78rem; }
.q-open { align-self: center; color: var(--rubric); font-size: .9rem; }
.first-mark {
  display: inline-block;
  font-size: .78rem;
  color: var(--rubric);
  border: 1px solid var(--rubric-soft);
  padding: 0 .35rem;
  margin-inline-start: .4rem;
}
@media (max-width: 700px) { .q-row { grid-template-columns: minmax(0, 1fr); } .q-score { text-align: start; } }

.rubric-table { inline-size: 100%; border-collapse: collapse; margin-block: 1rem; font-size: .9rem; }
.rubric-table caption { text-align: start; color: var(--ink-soft); padding-block-end: .5rem; }
.rubric-table th, .rubric-table td { text-align: start; padding: .55rem .6rem; border-block-end: 1px solid var(--rule); vertical-align: top; }
.rubric-table thead th { color: var(--rubric); font-size: .82rem; border-block-end: 1px solid var(--rule-strong); }
.rubric-table tbody th { font-weight: 600; }
.rub-w { font-variant-numeric: tabular-nums; white-space: nowrap; }

.decision { border: 1px solid var(--rule-strong); border-inline-start: 3px solid var(--rubric); padding: 1.1rem 1.25rem; margin-block-start: 1.5rem; background: #fffdf8; }
.decision h3 { font-size: 1rem; margin-block-end: .5rem; color: var(--rubric); }
.human-only { display: grid; gap: .25rem; font-size: .9rem; }
.human-only li { padding-inline-start: 1.2rem; position: relative; }
.human-only li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--rubric); }
.decision-why { font-size: .92rem; color: var(--ink-soft); margin-block: .8rem; border-inline-start: 2px solid var(--rule-strong); padding-inline-start: .7rem; }
.decision-form fieldset { border: 0; padding: 0; margin-block-end: 1rem; }
.decision-form legend { font-size: .82rem; color: var(--rubric); }
.decision-form label { display: flex; align-items: center; gap: .4rem; font-size: .92rem; min-block-size: 2.2rem; }
.field { display: block; margin-block-end: 1rem; }
.field > span { display: block; font-size: .88rem; margin-block-end: .3rem; }
.field small { display: block; color: var(--ink-faint); font-size: .8rem; margin-block-start: .25rem; }
.field textarea, .field input[type="text"], .field input[type="url"] {
  inline-size: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--rule-strong);
  background: #fffdf8;
  border-radius: 0;
  font-size: .92rem;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.field-inline { display: flex; gap: .5rem; align-items: center; font-size: .88rem; color: var(--ink-soft); min-block-size: 2.2rem; }
/* A fieldset of options: the label is the click target, so give it a real height. */
.field label { display: flex; align-items: center; gap: .45rem; min-block-size: 2.2rem; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1rem; align-items: center; }
.btn-primary {
  padding: .55rem 1.3rem;
  border: 1px solid var(--rubric);
  background: var(--rubric);
  color: var(--paper);
  cursor: pointer;
  border-radius: 0;
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-quiet {
  padding: .55rem 1.1rem;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
}
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn-quiet[disabled] { color: var(--ink-faint); cursor: not-allowed; border-style: dashed; }

/* ---------- submission ---------- */
.steps { display: grid; gap: .8rem; }
.steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.step-n {
  font-size: 1.1rem;
  color: var(--rubric);
  font-variant-numeric: tabular-nums;
  border-block-end: 1px solid var(--rule-strong);
  text-align: center;
}
.steps h3 { font-size: 1rem; }
.steps p { color: var(--ink-soft); font-size: .92rem; }

.errs { display: grid; gap: .8rem; }
.errs li { display: grid; gap: .15rem; border-inline-start: 3px solid var(--bad); padding-inline-start: .8rem; }
.err-title { font-weight: 600; }
.err-verdict { font-size: .85rem; color: var(--bad); }
.err-ev { font-size: .85rem; color: var(--ink-soft); }

/* ---------- non-happy states ---------- */
.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.state { border: 1px solid var(--rule); padding: .9rem 1rem; background: #fffdf8; }
.state.tone-bad { border-inline-start: 3px solid var(--bad); }
.state.tone-warn { border-inline-start: 3px solid var(--warn); }
.state.tone-muted { border-inline-start: 3px solid var(--rule-strong); }
.state-h { font-size: .85rem; color: var(--rubric); margin-block-end: .2rem; }
.state-d { font-size: .88rem; color: var(--ink-soft); margin-block-end: .5rem; }
.state-body { font-size: .9rem; }
.empty { color: var(--ink-soft); font-style: italic; }
.empty-hint { font-size: .85rem; margin-block-start: .4rem; }
.empty-hint a { color: var(--rubric); }
.skeleton { display: grid; gap: .5rem; margin-block-end: .5rem; }
.sk-line { display: block; block-size: .8rem; background: var(--paper-deep); border: 1px solid var(--rule); }
.sk-line.short { inline-size: 55%; }
.state-live { font-size: .85rem; color: var(--ink-soft); }
.err-line { color: var(--bad); font-weight: 600; font-size: .92rem; }
.err-meta { font-size: .82rem; color: var(--ink-faint); margin-block: .3rem .6rem; }

/* ---------- site colophon ---------- */
.colophon-site { border-block-start: 2px solid var(--ink); padding-block: 1.25rem; background: var(--paper-deep); }
.colophon-site-line { font-size: .9rem; color: var(--ink-soft); }
.colophon-site-meta { font-size: .82rem; color: var(--ink-faint); display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .4rem; }
.colophon-site-meta a { color: var(--rubric); }

/* ---------- print: this direction is literally a document ---------- */
@media print {
  body::before { display: none; }
  .masthead-nav, .search, .skip-link, .actions { display: none; }
  .hashiya { position: static; }
}

/* ---------- 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, .snippet, .snippet code { white-space: pre-wrap; overflow-wrap: anywhere; }
}