/*
  The Diwan surfaces — registers, correspondence, documents.

  Direction: an administrative REGISTER, not a dashboard. The people using this have kept
  incoming and outgoing books on paper, and the interface earns trust faster by resembling that
  than by resembling a analytics product. So: ruled rows rather than floating cards, a registry
  number set like a stamp, and urgency shown with the same coloured cards the regulation already
  attaches to a physical file.

  Everything is logical-property based (inline-start/end), so one dir attribute flips it.
*/

/* ─────────────────────────────────────────────────────────────────────────────
   Page frame
   ───────────────────────────────────────────────────────────────────────────── */

.acorr-page,
.acorr-form-page,
.acorr-detail {
  max-inline-size: var(--content-max);
  padding: var(--space-5) var(--space-6) var(--space-8);
  margin-inline: auto;
}

.acorr-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-4);

  /* A double rule, thin over thick. The masthead of a ledger page — cheap to render, and it
     does the work a heavy card border would otherwise be asked to do. */
  border-block-end: 3px solid var(--rule);
  box-shadow: 0 -5px 0 -4px var(--rule) inset;
}

.acorr-head__titles { min-inline-size: 0; }

/* An eyebrow over the title. The page is one book out of several the product keeps, and on a
   screen where the only other clue is which sidebar row is lit, saying so costs one line. */
.acorr-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.acorr-head__actions { display: flex; align-items: center; gap: var(--space-2); }

.acorr-head h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
}

/* The count sits with the title rather than in a badge: it is context, not a notification. */
.acorr-head__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-inline-start: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   The register table
   ───────────────────────────────────────────────────────────────────────────── */

/* The wrapper's whole job is to keep a wide register inside its own box, and it was doing that
   only below 48rem — so between a phone and a laptop a table wider than the content column pushed
   the PAGE sideways instead, which is the failure the wrapper exists to prevent. The width at
   which a register outgrows its column depends on the register, not on the device. */
.acorr-table-wrap { overflow-x: auto; }

.acorr-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.acorr-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  text-align: start;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface-page);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border-strong);
  white-space: nowrap;
}

.acorr-table tbody td {
  padding: var(--space-3);
  border-block-end: 1px solid var(--border);
  vertical-align: baseline;
}

/* Ruled, not striped. Zebra banding fights the confidentiality colour, and on a register the
   row that should stand out is the classified one, not every second one. */
.acorr-row {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.acorr-row:hover,
.acorr-row:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.acorr-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* A column that asks for 100% squeezes every other one down to its longest word. In the register
   that is right — the subject IS the row. In an admin table it left "كل الصلاحيات بحكم الملكية"
   stacked four words deep in a 90px column with half the table empty beside it. Naming the
   columns that hold a phrase gives them a floor. */
.acorr-roles { min-inline-size: 14rem; }

/* The row of role checkboxes under a member. It was a div with class="row" — undefined here —
   carrying inline gap and flex-wrap, neither of which does anything to a block box. So the
   checkboxes stacked one per line and a member with six roles took six rows inside one table cell. */
.acorr-rolepicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.acorr-subject {
  inline-size: 100%;
  color: var(--ink-strong);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Registry number — the stamp
   ───────────────────────────────────────────────────────────────────────────── */

/*
  This is the single most-referenced value in the product: it is what one office quotes to
  another over the phone. It gets monospace, tabular figures and letter-spacing so digits line
  up down the column and cannot be misread, and a box because in the paper original it is
  literally stamped.
*/
.acorr-regnum {
  display: inline-block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-strong);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  direction: ltr;
}

.acorr-regnum--pending {
  color: var(--ink-faint);
  border-style: dashed;
  background: none;
  letter-spacing: normal;
}

/* Direction, as a glyph and its word. Used where a row can hold either book. */
.acorr-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* A date. Mono and tabular so a column of them lines up digit under digit, LTR because a
   timestamp is a Latin-numeral string even in Arabic text, and NOWRAP because "2026-09-03 14:49"
   has no place a break belongs: allowed to wrap in a narrow column it becomes three stacked
   fragments that read as three separate values. */
.acorr-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  direction: ltr;
}

/* A number that is content rather than metadata — a file size, a page count. Same alignment
   discipline as a date, but in the ink of something you are meant to read. */
.acorr-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
}

/* A short value with no place a line break belongs: a MIME type, a fixed status label. Not a
   number and not a date, so it keeps the table's own type — it only refuses to be split. */
.acorr-atom { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   Confidentiality
   ───────────────────────────────────────────────────────────────────────────── */

/*
  Shown on every row. It was missing from the register entirely, which meant the one dimension
  that decides who may open a letter was invisible in the list of letters.

  The two lower levels are quiet; سري and سري للغاية get weight and a leading marker, because
  the cost of overlooking them is not symmetric with the cost of over-noticing them.
*/
.conf {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.conf--0 { color: var(--conf-0-ink); background: var(--conf-0-bg); }
.conf--1 { color: var(--conf-1-ink); background: var(--conf-1-bg); }
.conf--2 { color: var(--conf-2-ink); background: var(--conf-2-bg); font-weight: 600; }
.conf--3 { color: var(--conf-3-ink); background: var(--conf-3-bg); font-weight: 700; }

/* Marker rather than an icon font: it survives with no network, no sprite, and no CSP grant. */
.conf--2::before,
.conf--3::before {
  content: "●";
  font-size: 0.7em;
  line-height: 1;
}

.conf--3::before { content: "●●"; letter-spacing: -0.15em; }

/* ─────────────────────────────────────────────────────────────────────────────
   Urgency — the regulatory cards
   ───────────────────────────────────────────────────────────────────────────── */

/*
  عادي carries no card in the paper system, so it carries none here: plain muted text. The three
  urgent grades each get the card, drawn as a coloured stripe at the row's start edge — the same
  place the physical card is clipped to the file.
*/
.urg {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--ink-muted);
}

.urg::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.85rem;
  border-radius: 1px;
  background: currentColor;
}

.urg--normal { color: var(--urgency-normal); }
.urg--normal::before { display: none; }

.urg--urgent { color: var(--urgency-urgent); font-weight: 600; }
.urg--very { color: var(--urgency-very); font-weight: 600; }
.urg--immediate { color: var(--urgency-immediate); font-weight: 700; }

/* Every row reserves the stripe's width so text does not shift between a marked row and a plain
   one. Declared FIRST: it is deliberately the weaker rule, and the coloured ones below override
   it. Written after, it would win on order and every stripe would be invisible. */
.acorr-table tbody td:first-child { border-inline-start: 3px solid transparent; }

/* Row-level stripe for anything above عادي, so an urgent letter is found while scanning the
   column of subjects rather than only when the eye reaches the urgency column.

   border-inline-start, not an inset box-shadow: a shadow offset is physical, so in RTL it landed
   on the inner edge of the first cell — a stripe floating mid-row instead of marking its start.
   The border follows writing direction, so one rule serves both. */
.acorr-table .acorr-row--urgent td:first-child { border-inline-start-color: var(--urgency-urgent); }
.acorr-table .acorr-row--very td:first-child { border-inline-start-color: var(--urgency-very); }
.acorr-table .acorr-row--immediate td:first-child { border-inline-start-color: var(--urgency-immediate); }

.acorr-important {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--urgency-very);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 0 0.35rem;
  margin-inline-start: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Lifecycle state
   ───────────────────────────────────────────────────────────────────────────── */

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  color: var(--ink);
  white-space: nowrap;
}

.state::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.state--draft { color: var(--state-draft); }
.state--registered { color: var(--state-registered); }
.state--inprogress { color: var(--state-inprogress); }
.state--approved { color: var(--state-approved); }
.state--archived { color: var(--state-archived); }
.state--cancelled { color: var(--state-cancelled); }

/* Cancelled is struck through as well as greyed: colour alone would leave a monochrome print,
   or a colour-blind reader, unable to tell a cancelled letter from a live one. */
.state--cancelled { text-decoration: line-through; }

/* ─────────────────────────────────────────────────────────────────────────────
   Search and toolbar
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   The toolbar

   A register is worked by narrowing, not by reading. The page offered one search
   box floating alone above the table and nothing else: to find the urgent letters
   you read the urgency column, and to find the classified ones you read the
   confidentiality column — down two hundred rows. The three dimensions the
   product is actually built around are the three it would not let you filter by.
   ───────────────────────────────────────────────────────────────────────────── */

.acorr-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}

.acorr-search {
  position: relative;
  flex: 1 1 18rem;
  max-inline-size: 26rem;
}

/* The glyph is inside the field, in the padding reserved for it. A magnifier beside a box is a
   decoration; inside it, it is what tells you the box searches. */
.acorr-search .ico {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-3);
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.acorr-search input {
  inline-size: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  padding-inline-start: calc(var(--space-3) + 1.4rem);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.acorr-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.acorr-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* A filter is off, or it is on. Two states, one shape — a chip that fills when it is doing
   something, so the set of active filters is readable without reading any of the labels. */
.acorr-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast),
              color var(--duration-fast);
}

.acorr-filter:hover { color: var(--ink-strong); border-color: var(--ink-faint); }

.acorr-filter[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

/* The urgency filters carry the card colour they filter for, so the control and the rows it
   reveals are recognisably the same thing. */
.acorr-filter--urgent[aria-pressed="true"] {
  color: var(--urgency-urgent);
  border-color: var(--urgency-urgent);
  background: oklch(from var(--urgency-urgent) 96% 0.03 h);
}

.acorr-filter--secret[aria-pressed="true"] {
  color: var(--conf-2-ink);
  border-color: var(--conf-2-ink);
  background: var(--conf-2-bg);
}

.acorr-filter--clear {
  border-style: dashed;
  color: var(--ink-faint);
}

/* How many rows the table is showing, and out of how many. Without it a filtered register looks
   exactly like an empty one that happens to have a chip lit somewhere above it. */
.acorr-shown {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-inline-start: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.acorr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--ink-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.acorr-btn:hover { background: var(--surface-sunken); border-color: var(--ink-faint); }
.acorr-btn:active { transform: translateY(1px); }

.acorr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent);
}

.acorr-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.acorr-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.acorr-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.acorr-btn-danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────────────────────── */

/* ── The form as a sheet ─────────────────────────────────────────────────────
   A registration form is a document being filled in, and it read as a stack of
   controls on the page background: the masthead rule ran the full width of the
   window while the fields stopped at 44rem, so the heading and the thing it
   headed did not share an edge, and nothing said where the form began or ended.

   On a card, with its fields grouped and its actions on a bar at the foot, the
   page has a subject. The measure comes down to match. */
.acorr-form-page { max-inline-size: 58rem; }

.acorr-form {
  display: grid;
  gap: var(--space-5);
  max-inline-size: 100%;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* A named group of fields. Five controls in one run is a list to get through; three groups of
   two is a form with a shape, and the shape is what tells someone how far along they are. */
.acorr-fieldset {
  display: grid;
  gap: var(--space-4);
  border: 0;
  margin: 0;
  padding: 0;
}

.acorr-fieldset + .acorr-fieldset {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
}

.acorr-fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.acorr-fieldset__legend .ico { color: var(--ink-faint); }

/* A required field says so once, quietly, next to its own label — not in a legend at the top of
   the form that has scrolled away by the time anyone needs it. */
.acorr-req {
  color: var(--danger);
  font-weight: 400;
  margin-inline-start: 2px;
}

/* The subject is the one field worth the full measure — it is what the whole record is about. */
.acorr-form label textarea { min-block-size: 4.5rem; }

/* Short fields share a line. A form where every control is the same full width reads as a
   wireframe, and it makes a two-word answer look as consequential as the subject line. */
.acorr-form-row,
.acorr-form-row--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  align-items: end;
}

/* The markup wraps each control inside its label, so the label is the stack. Matched at any depth
   now that the fields live inside named groups — as a direct-child selector this rule stopped
   applying the moment a <fieldset> came between, and every label in the form fell back to
   inline text with its control beside it. */
.acorr-form label,
.acorr-form-row > label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

.acorr-form-row > span:first-child {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

/* A checkbox label is a row, not a stack, and it sits on the baseline of the controls beside it
   rather than floating at the top of its cell. */
.acorr-form-row > label.acorr-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
}

/*
  Matched by what a control IS rather than by an attribute it might carry. The external-reference
  field is written `<input @bind="…">` with no type at all, so a type="text" selector skipped it —
  leaving one field mid-form with browser-default styling and its own idea of width.
*/
.acorr-form input:not([type="checkbox"]):not([type="radio"]),
.acorr-form textarea,
.acorr-form select {
  font: inherit;
  font-size: var(--text-sm);
  inline-size: 100%;
  color: var(--ink-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.acorr-form input:focus,
.acorr-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The action bar belongs to the sheet, so it spans it: negative margins pull it out to the card's
   own edges and the padding puts the buttons back where the fields are. Without that it is a row
   of buttons floating inside a box, which reads as one more field. */
.acorr-form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-1) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border);
  background: var(--surface-sunken);
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

/* Cancel goes to the far end, away from the button that commits — a register number is reserved
   the moment the primary is pressed, and two same-sized buttons side by side is how the wrong one
   gets pressed. */
.acorr-form-actions > :last-child { margin-inline-start: auto; }

.acorr-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.acorr-hint { font-size: var(--text-xs); color: var(--ink-muted); }
.acorr-error { color: var(--danger); font-size: var(--text-sm); }

/* ─────────────────────────────────────────────────────────────────────────────
   Detail view
   ───────────────────────────────────────────────────────────────────────────── */

.acorr-panel {
  background: var(--surface-card);
  max-inline-size: 58rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block-end: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* A part of a detail page — the files, the routing log, the enclosures — and nothing more than
   that.

   It was written as a small-caps LABEL: 12px, muted, letter-spaced, text-transform: uppercase.
   No element in the product ever used it that way. Every use in the markup is a <section> WRAPPING
   content, and all five of those properties inherit — so the file names, the MIME types, the
   member names and the headings inside every section on both detail pages were rendered in
   capitals and in the muted ink meant for a caption. Invisible in Arabic, which has no case, and
   the reason it survived a redesign: the product's first language cannot show this bug. In English
   it turned "application/pdf" into "APPLICATION/PDF" on every row.

   The heading treatment those properties wanted already exists, on the h2 inside. */
.acorr-section { margin-block: var(--space-6) 0; }

.acorr-section:first-child { margin-block-start: 0; }

/* The controls a section offers, on their own line under whatever explains them. Wrapping, so a
   pair of buttons on a narrow screen stacks rather than pushing the second one off the edge. */
.acorr-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.acorr-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}

.acorr-meta dt { font-size: var(--text-xs); color: var(--ink-muted); margin-block-end: 0.15rem; }
.acorr-meta dd { margin: 0; color: var(--ink-strong); }

/* ─────────────────────────────────────────────────────────────────────────────
   States
   ───────────────────────────────────────────────────────────────────────────── */

/*
  An empty register is the normal first-day state, not an error. It says what the page is for
  and offers the action, rather than apologising.
*/
/* A dashed rectangle is the convention for a drop target or a placeholder that has not been
   built yet. An empty register on day one is neither — it is the normal state of a new book, and
   drawing it as an unfinished box tells the customer their product is unfinished. */
.acorr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.acorr-empty__mark {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--space-2);
  color: var(--ink-faint);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}

/* An empty SECTION inside a page that is not itself empty — no routing entries yet on a letter
   that has a number, a subject and a file.

   The card above is a page's whole answer: 3rem of padding, a mark, a heading and a next step. On
   a detail page with three such sections it would be three of those stacked down the screen, each
   one shouting a blank. Redesigning .acorr-empty into a card silently promoted eight existing
   one-line states into full cards, and for three of them that was the wrong size of statement.

   This is what those three had before, said deliberately: one quiet line, in the space a row
   would have taken. */
.acorr-empty--quiet {
  display: block;
  padding: var(--space-4) 0;
  text-align: start;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.acorr-empty strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink-strong);
  margin-block-end: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Page prose and section headings

   Four of these pages open with a paragraph explaining what the screen is for —
   clearances, delegations, the approval route. Each ran the full 78rem of the
   page, which at this size is about 160 characters a line: past roughly 75 the
   eye loses its place returning to the start of the next one, and the paragraph
   that was meant to make the screen understandable is the part people skip.
   ───────────────────────────────────────────────────────────────────────────── */

.acorr-head + .acorr-hint,
.acorr-page > .acorr-hint {
  max-inline-size: 72ch;
  margin-block-end: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-muted);
}

/* A section heading inside a page. Left to the browser these were 1.5em of whatever the body
   font is — bigger than the text under them and otherwise undesigned, so a page with three of
   them read as three unrelated fragments rather than as one document with parts. */
.acorr-page h2,
.acorr-detail h2,
.acorr-subhead {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin-block: var(--space-6) var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--border);
}

/* ── Picking a file ───────────────────────────────────────────────────────────
   A native file input is unstyleable across browsers and draws its own text in the operating
   system's language, so the label is the control and the input hides behind it. Hidden by size,
   never by display:none: that would remove it from the tab order too, and the label would then be
   a button nobody could reach without a mouse. */
.acorr-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.acorr-upload__pick {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.acorr-upload__pick:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.acorr-upload input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.acorr-upload__hint { font-size: var(--text-xs); color: var(--ink-muted); }

.acorr-upload__msg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.acorr-upload__msg--ok { color: var(--state-approved); }
.acorr-upload__msg--error { color: var(--danger); }

/* The preview frame.

   An <iframe> with no CSS is 300×150 — the HTML default, and a size no document has ever been
   read at. Tall enough here to hold a page of A4 at a usable width, and capped against the
   viewport so the frame and the metadata above it stay on one screen on a laptop.

   display: block, because an iframe is inline by default and sits on a text baseline: a
   four-pixel gap under it that reads as a rendering fault in the document rather than as the
   descender space it is. */
.acorr-viewer {
  display: block;
  inline-size: 100%;
  block-size: min(80vh, 46rem);
  margin-block: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.acorr-loading {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  padding: var(--space-6);
  text-align: center;
}

.acorr-confirm {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Narrow screens
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
  .acorr-page,
  .acorr-form-page,
  .acorr-detail { padding: var(--space-4) var(--space-3) var(--space-6); }

  /* The register keeps every column but scrolls, rather than dropping any. Hiding a column on a
     small screen would hide confidentiality or the registry number, and both are the reason
     someone opened the register. */
  .acorr-table-wrap {
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--space-3) * -1);
    padding-inline: var(--space-3);
  }

  .acorr-table { min-inline-size: 40rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acorr-btn,
  .acorr-row,
  .acorr-search input { transition: none; }
  .acorr-btn:active { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Detail view — the letter itself
   ───────────────────────────────────────────────────────────────────────────── */

/* The subject is the letter's identity, so it is set as prose rather than as a field value.
   Capped in width because a line that runs the full page is measurably harder to read back. */
.acorr-subject-lg {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-strong);
  max-inline-size: 52ch;
  margin: 0;
}

.acorr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--ink);
  white-space: nowrap;
}

.acorr-status { border-color: var(--border-strong); font-weight: 600; }

.acorr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
}

.acorr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.acorr-list > li {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Routing timeline — the تعقيب trail
   ───────────────────────────────────────────────────────────────────────────── */

/*
  The heart of a Diwan: who sent this where, when, and with what instruction. It is drawn as a
  spine with dots rather than as rows, because the question people bring to it is "where did this
  go and is it still moving" — a sequence, not a table.

  The spine is an inline-start border on the list, so it flips with direction and needs no
  mirrored rule.
*/
.acorr-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.acorr-timeline > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* The dot sits ON the spine. Offset by half its own size plus the border, so it stays centred
   whichever direction the page runs. */
.acorr-timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc((var(--space-5) + 0.3rem) * -1);
  inset-block-start: 0.35em;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface-page);
}

.acorr-tl-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

.acorr-tl-action { font-weight: 600; color: var(--ink-strong); }

/* The directive — اتخاذ اللازم, للعلم, مطلوب رد — is what the recipient is actually being asked
   to do, so it is boxed rather than left as another word in the line. */
.acorr-tl-directive {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
}

/* The note breaks to its own line: it is free text of unpredictable length, and letting it sit
   inline pushes the timestamp and action apart differently on every row. */
.acorr-tl-note {
  flex-basis: 100%;
  color: var(--ink);
  line-height: 1.6;
}

/* The number and the state, read as one line. */
.acorr-titleline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
}

/* On the detail page the registry number is the headline, not a table cell, so it is set at
   heading size while keeping the stamped treatment. */
.acorr-titleline .acorr-regnum {
  font-size: var(--text-xl);
  padding: 0.2rem 0.6rem;
  margin: 0;
}

/* An action that lives inside a row or a panel — grant access, add a metadata value — rather
   than on its own page. Laid out horizontally so it reads as one gesture, and allowed to wrap so
   a long field does not push the button off the edge. */
.acorr-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block: var(--space-3);
}

.acorr-inline-form label { display: grid; gap: var(--space-1); font-size: var(--text-sm); }

.acorr-inline-form input:not([type="checkbox"]),
.acorr-inline-form select,
.acorr-inline-form textarea {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-inline-size: 12rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   The register on a phone

   Six columns do not fit in 390px, and nothing told them not to try: the wrapper
   scrolls sideways, so the table simply squeezed every column to its longest word
   and set the subject one word per line, eleven lines deep. A register read that
   way is not a register.

   Three columns fit: the number that identifies the letter, what it is about, and
   how secret it is. Urgency does not disappear with its column — it is already on
   the row as a coloured edge, which is the whole reason that edge exists. State
   and date move to the letter itself, one tap away.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .acorr-page,
  .acorr-form-page,
  .acorr-detail { padding-inline: var(--space-4); }

  .acorr-table th:nth-child(4),
  .acorr-table td:nth-child(4),
  .acorr-table th:nth-child(5),
  .acorr-table td:nth-child(5),
  .acorr-table th:nth-child(6),
  .acorr-table td:nth-child(6) {
    display: none;
  }

  /* The registry number is a stamp, and a stamp that wraps is unreadable — so it keeps its line
     and gives up size instead. At the desktop scale it is 165px of a 390px screen, which leaves
     the subject too little to hold a sentence and the row scrolls to read the thing it is about. */
  .acorr-table td:first-child { white-space: nowrap; }

  .acorr-regnum {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    padding-inline: 0.3rem;
  }

  /* The subject takes what is left and breaks wherever it must — a long ministry name has no
     spaces to break at, and the alternative is a row that scrolls sideways. */
  .acorr-subject {
    inline-size: auto;
    overflow-wrap: anywhere;
  }

  /* The toolbar's chips wrap onto their own line rather than shrinking the search box below the
     width of the words it is meant to hold. */
  .acorr-search { flex-basis: 100%; max-inline-size: none; }

  /* Title and its action on separate lines: side by side at this width the action is squeezed to
     an icon and the title is truncated to two words. */
  .acorr-head { flex-direction: column; align-items: stretch; }
  .acorr-head__actions .acorr-btn { inline-size: 100%; justify-content: center; }

  /* A form sheet at 390px spends a quarter of the screen on its own padding. */
  .acorr-form { padding: var(--space-4); }
  .acorr-form-actions {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
}