/* The staff shell's one stylesheet (D8 §2.2), in the new site's look (ق-واجهة٢٠ (1); the model is
   the site's «الحلّة الجديدة» mock-up): a white ground and a light green-tinted surface, the four
   locked colours with tints by opacity only, cards at radius 16 and controls at 8, the site's
   heading scale. Arabic measured (no letter-spacing, no weight under 400), logical directions only,
   gold as metal (rules, borders, the focus ring) never as text. No dark mode: the site's model has none.

   Faces (ق-واجهة٢١): the body text stays Alexandria; headings are «Hacen Tunisia» (400) and the
   short labels «Hacen Tunisia Bold» (700), served as the Bar's original TTF bytes from this page's
   own origin (no subsetting, no WOFF2, no renaming). One weight per file, declared as that weight
   only, and no synthesized bold (font-synthesis-weight on html), as the site does. */

@font-face {
  font-family: "Alexandria";
  src: url("alexandria.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Hacen Tunisia";
  src: url("hacen-tunisia.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hacen Tunisia Bold";
  src: url("hacen-tunisia-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #0E2D1E;
  --gold: #A9874D;
  --gold-on-light: #7A5F2E;
  --gold-on-dark: #C9A863;
  --black: #000000;
  --white: #FFFFFF;
  /* The site's tokens: ink is the black; its muted step and every surface and line are tints of
     the black or the green by opacity (no new hue). --error is the shell's one state colour
     (refusals, the alarm row), kept from before (an open question to the owner). */
  --ink: #000000;
  --ink-muted: rgba(0, 0, 0, 0.72);
  --surface-2: rgba(14, 45, 30, 0.04);
  --line: rgba(14, 45, 30, 0.14);
  --line-strong: rgba(14, 45, 30, 0.55);   /* fields and quiet buttons: 3.6:1 on white (WCAG 1.4.11) */
  --error: #8A1F1F;
  --radius: 16px;
  /* Sizes. Radii: --radius 16 for cards (and the bar, the banners, the statement), --radius-sm 8
     for controls and the boxes inside a card, --radius-xs 4. Spacing --s-1..--s-9 = 4, 8, 12, 16,
     20, 24, 32, 40, 48 (WO-A1). Type, from the site's model (ق-واجهة٢٠ (1)): body 16 under 1024 px
     and 18 from 1024 px, line height 1.75; headings h1 28, h2 24 (28 from 1024 px), h3 22, h4 20,
     h5 at the field's 18, line height 1.3; fields stay 18. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-field: 18px;
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h2-wide: 28px;
  --fs-h3: 22px;
  --fs-h4: 20px;
  --font-body: "Alexandria", system-ui, sans-serif;
  --font-display: "Hacen Tunisia", "Alexandria", system-ui, sans-serif;
  --font-label: "Hacen Tunisia Bold", "Alexandria", system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(14, 45, 30, 0.08);
}

* { box-sizing: border-box; }

html { direction: rtl; font-synthesis-weight: none; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  font-weight: 400;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.3; font-weight: 400; margin-block: 0 8px; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-block-start: 24px; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-field); }

@media (min-width: 1024px) {
  body { font-size: var(--fs-body); }
  h2 { font-size: var(--fs-h2-wide); }
}

#root { max-inline-size: 1100px; margin-inline: auto; padding: 16px; }

.bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--green); color: var(--white);
  padding-block: 12px; padding-inline: 16px;
  border-block-end: 1px solid var(--gold-on-dark);
  border-radius: var(--radius);
}
.bar .brand { display: flex; flex-direction: column; }
.bar .brand strong { font-family: var(--font-label); font-weight: 700; line-height: 1.5; }
.bar :focus-visible { outline-color: var(--gold-on-dark); }
.bar .who { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bar .btn-quiet { color: var(--white); border-color: var(--gold-on-dark); }
.countdown { font-variant-numeric: tabular-nums; }

nav { display: flex; gap: 8px; margin-block: 16px; }
.tab {
  min-block-size: 48px; display: inline-flex; align-items: center; padding-inline: 16px;
  color: var(--ink); text-decoration: none; border-block-end: 2px solid transparent;
}
.tab[aria-current="page"] { border-block-end-color: var(--gold-on-light); font-weight: 600; }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-block: 12px;
}
.card.narrow { max-inline-size: 420px; margin-inline: auto; margin-block-start: 48px; border-block-start: 2px solid var(--gold-on-light); }

.field { display: flex; flex-direction: column; margin-block: 12px; }
.field label { font-size: 15px; line-height: 1.4; color: var(--ink-muted); margin-block-end: 4px; }
input, select, textarea {
  font: inherit; font-size: 18px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding-block: 10px; padding-inline: 12px;
  min-block-size: 52px;
}
textarea { min-block-size: 80px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; min-block-size: 48px; }
.check input { min-block-size: 24px; inline-size: 24px; }

.btn {
  font: inherit; font-size: 18px; min-block-size: 48px; padding-inline: 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--green); background: var(--white); color: var(--green);
  cursor: pointer;
}
.btn-primary { background: var(--green); color: var(--white); min-block-size: 56px; }
.btn-danger { border-color: var(--error); color: var(--error); }
.btn-danger.btn-primary, form .btn-danger[type="submit"] { background: var(--error); color: var(--white); }
.btn-quiet { background: transparent; border-color: var(--line-strong); }
.btn:disabled { opacity: 0.6; cursor: progress; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; align-items: flex-start; }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-inline-start: 2px solid var(--gold-on-light); border-radius: var(--radius-sm); padding: 12px; inline-size: 100%; }
.action { display: contents; }
.action > .panel { flex-basis: 100%; }

.value { font-size: 20px; font-weight: 600; margin-block: 4px; }
.meta { color: var(--ink-muted); font-size: 16px; margin-block: 4px; }
.meta-warn { color: var(--error); }
.effect { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 16px; margin-block: 8px; }
.effect dt { color: var(--ink-muted); }
.effect dd { margin: 0; }

.asof { display: flex; gap: 12px; align-items: center; justify-content: space-between; color: var(--ink-muted); font-size: 16px; }

.state { color: var(--ink-muted); }
.state-error, .outcome-error { color: var(--error); }
.outcome-ok { color: var(--green); font-weight: 600; }
.notice { background: var(--surface-2); border-inline-start: 2px solid var(--gold-on-light); padding: 8px 12px; }
.banner { border-radius: var(--radius); padding: 12px 16px; margin-block: 12px; }
.banner-warn { background: var(--white); color: var(--error); border: 2px solid var(--error); }
.banner-alert { background: var(--white); border: 2px solid var(--gold-on-light); }
.banner-alert summary { cursor: pointer; min-block-size: 48px; display: flex; align-items: center; font-weight: 600; }
.alerts-list { list-style: none; padding: 0; margin: 0; }
.alerts-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-block-start: 1px solid var(--line); padding-block: 8px; }

.rules, .steps { list-style: none; padding: 0; margin-block: 4px; font-size: 16px; }
.rule-met { color: var(--green); }
.rule-met::before { content: "✓ "; }
.rule-missing { color: var(--error); }
.rule-missing::before { content: "• "; }

.secret { border: 2px solid var(--green); border-radius: var(--radius-sm); padding: 12px; margin-block: 12px; background: var(--surface-2); }
.secret-value { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 600; user-select: all; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.people .card { margin: 0; }

/* «التجديد» (D11 §4): the tab strip, the queue, a request's facts, the
   registry rows and the in-memory document viewer. */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px 12px; }
.subtabs .tab { font: inherit; background: transparent; border: 0; border-block-end: 2px solid transparent; cursor: pointer; }
.subtabs .tab[aria-pressed="true"] { border-block-end-color: var(--gold-on-light); font-weight: 600; }
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.queue .card { margin: 0; }
.detail-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.detail-top h3 { margin: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin-block: 12px; }
.facts dt { color: var(--ink-muted); font-size: 16px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.docs { list-style: none; padding: 0; margin: 0; }
.docs li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-block-start: 1px solid var(--line); padding-block: 8px; }
.viewer { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.viewer img { max-inline-size: 100%; max-block-size: 70vh; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.rows { inline-size: 100%; border-collapse: collapse; font-size: 16px; margin-block: 8px; }
.rows th, .rows td { text-align: start; padding-block: 6px; padding-inline: 8px; border-block-end: 1px solid var(--line); }
.rows th { color: var(--ink-muted); font-weight: 600; }
/* S3's amount lines (D11 v14 §5.12): a list, the name above its figure when the
   box is narrow (320 px at 200 % text). Never a two-column name and figure
   grid, which squeezed the names to one letter a line on the web face (21/10). */
.lines { list-style: none; padding: 0; margin-block: 8px; }
.lines li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding-block: 6px; border-block-end: 1px solid var(--line); }
.lines .line-name { flex: 1 1 14em; min-inline-size: 0; overflow-wrap: anywhere; }
.lines .line-figure { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.proposal-slot { min-block-size: 0; }
.kinds { border: 1px solid var(--line); border-radius: var(--radius-sm); padding-block: 8px; padding-inline: 12px; margin-block: 8px; min-inline-size: 0; }
.kinds legend { padding-inline: 4px; }

/* «كشف الرسائل» (D14 §3.3): the statement prints in English, left to right,
   in the affiliation statement's family (intima-portal billing page): Arial,
   the title then the org line, one Period · Generated line over a rule, full
   gridded tables with a shaded head, a bold Total. Colours are the locked
   palette's (W8): --line for the grid on screen, --ink-muted on paper. */
.period { display: flex; flex-wrap: wrap; gap: 16px; }
.period .field { min-inline-size: 0; }
.statement-area { margin-block: 16px; }
.print-area { direction: ltr; text-align: start; }
.statement { font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.statement h2, .statement h4 { font-family: inherit; line-height: 1.4; }
.statement-head { border-block-end: 2px solid var(--ink); padding-block-end: 8px; margin-block-end: 8px; }
.statement h2 { margin-block: 0 4px; font-size: 20px; font-weight: 700; }
.statement h4 { margin-block: 16px 4px; font-size: 16px; }
.statement p { margin-block: 2px; font-size: 15px; color: var(--ink); }
.table-wrap { overflow-x: auto; max-inline-size: 100%; }
.statement table { inline-size: 100%; border-collapse: collapse; font-size: 15px; margin-block-start: 6px; }
.statement th, .statement td { text-align: start; padding-block: 6px; padding-inline: 8px; border: 1px solid var(--line); }
.statement thead th { background: var(--surface-2); font-weight: 600; }
.statement tr.total th, .statement tr.total td { font-weight: 700; background: var(--surface-2); }
.statement td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-note { font-size: 14px; color: var(--ink); margin-block: 8px 0; }
.rate-card .rate-now { font-size: 18px; }
.rates-next { padding-inline-start: 20px; margin-block: 4px; }
.confirm-text { font-weight: 600; }

/* One sheet size wherever it is printed, as the affiliation's. */
@page { size: A4; margin: 14mm 12mm 16mm; }

@media print {
  .bar, nav, .alerts, .no-print { display: none !important; }
  body, #root { background: var(--white); padding: 0; }
  .statement { border: 0; padding: 0; }
  .statement, .statement p, .statement th, .statement td, .statement-note { color: var(--black); }
  .statement th, .statement td { border-color: var(--ink-muted); }
  .print-area { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* The sheet's name on every page, from the attribute the statement writes. */
  .print-area[data-doc-title]::before { content: attr(data-doc-title); position: fixed; top: -10mm; inset-inline: 0; text-align: center; font-size: 11px; color: var(--ink-muted); }
  .table-wrap { overflow: visible; }
  .statement thead { display: table-header-group; }
  .statement tr { break-inside: avoid; }
}

@media (max-width: 480px) {
  #root { padding: 8px; }
  .people { grid-template-columns: 1fr; }
  .effect { grid-template-columns: 1fr; }
  .queue { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Goal step 20 (D11 §4.6, §4.8, §4.9): the counter strip, the claim marks, the head and S9. */
.counts { margin-block: 8px; }
.counts-head { font-size: 16px; color: var(--ink-muted); margin-block: 4px; }
.counts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.count-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding-block: 6px; padding-inline: 10px; background: var(--white); }
.count-tab { color: var(--ink-muted); }
.count-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.count-age { color: var(--ink-muted); font-size: 16px; }
.count-alarm { border-color: var(--error); border-inline-start-width: 4px; color: var(--error); }
.count-alarm .count-tab, .count-alarm .count-age { color: var(--error); }
.queue-head { border-inline-start: 4px solid var(--gold-on-light); }
/* Gold is metal, never ink: the text stays ink, the gold is the bar beside it (DESIGN.md §1). */
.badge-back { color: var(--ink); border-inline-start: 2px solid var(--gold-on-light); padding-inline-start: 8px; font-weight: 600; }
.badge-claimed { color: var(--error); font-weight: 600; }
.badge-mine { color: var(--green); font-weight: 600; }
.claim-note { border: 1px solid var(--error); border-radius: var(--radius-sm); padding: 12px; margin-block: 12px; }
.claim-release { margin-block-start: 12px; }
.queue-more { margin-block: 12px; }
.daily-mark { margin-block: 12px; }
.standby { border-block-start: 1px solid var(--line); padding-block: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }