/* The face's one stylesheet (D12 §14.4), in the new site's look (ق-واجهة٢٠ (١), 2/11/2026: the model is the site's
   docs/الحلة-الجديدة/index.html): a white ground and a light green-tinted surface; the four colours (green, gold,
   black, white) and tints of them by opacity only, no fifth colour — the error red alone kept as the state colour
   it is; gold as metal (rules, borders, the focus ring), never as text on white; radius 16 for cards and 8 for
   controls; the site's heading scale. Faces (ق-واجهة٢١): Hacen Tunisia (400) for headings, Hacen Tunisia Bold (700)
   for short labels only (the tabs, the legends, the stage names), the original TTF bytes served from this origin;
   the body stays Alexandria, bundled. Night as before, on the same tokens. Right to left with logical directions
   only; body 18 / 1.85 and never under 16 anywhere; 48 px touch targets, 56 for the primary action. Sizes in rem,
   so the browser's own text size scales the page, and every row wraps so nothing scrolls sideways at 200 % on a
   320 px screen. */

@font-face {
  font-family: "Alexandria";
  src: url("alexandria.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
/* The Bar's identity faces, byte-equal to the identity folder's «omni .ttf» and «mazin sal .ttf» (sha256 c0e9e40c…22fa7
   and 218230b1…c3d3be): no subsetting, no conversion, the internal family names kept. One weight per file, as the site
   declares them, so a heading is never a faked bold of the regular face. */
@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 {
  /* The four colours (W8's locked palette). */
  --green: #0E2D1E;
  --gold: #A9874D;
  --gold-on-dark: #C9A863;
  --black: #000000;
  --white: #FFFFFF;
  /* The site's tints, opacity of the four only: secondary ink, the green-tinted surface, the hairline, a field's edge. */
  --ink-2: rgba(0, 0, 0, 0.72);
  --tint: rgba(14, 45, 30, 0.04);
  --hairline: rgba(14, 45, 30, 0.14);
  --field-line: rgba(14, 45, 30, 0.55);   /* 3.6:1 on white, 3.3:1 on the tint (WCAG 1.4.11) */
  /* The state colour: what went wrong or needs the lawyer. */
  --error: #8A1F1F;
  /* Night (the page keeps it; the site's model has none). */
  --night: #07110B;
  --night-ink: #F1EFE8;
  --night-ink-muted: #B8C2BB;
  --night-hairline: #274536;
  --night-field-line: rgba(241, 239, 232, 0.45);   /* night ink at 45%: 3.8:1 on the green card */
  --night-error: #F2A3A3;
  --shadow: 0 1px 2px rgba(14, 45, 30, 0.08);
  /* The faces: the site's display face for headings, its bold face for short labels only; the body unchanged. */
  --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;
  /* Radii: 16 for cards (the site's .card), 8 for controls (its buttons and fields), 4 for small marks. */
  --radius: 16px;
  /* WO-A1 (Direction B): size scales. Spacing --s-1..--s-9 = 4, 8, 12, 16, 20, 24, 32, 40, 48 px, in rem as the page's
     sizes are. The type scale is the site's model: body 18 (its desktop body; the web never goes under 16), body small
     16, heading 28 (its page titles), display 30 (the same titles on a wide screen), headline 24 (its section heads),
     title 20 (its card heads); headings at the display face's one weight, 400. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.5rem;
  --s-9: 3rem;
  --fs-body: 1.125rem;
  --fs-body-sm: 1rem;
  --fs-field: 1.125rem;
  --fs-title: 1.25rem;
  --fs-headline: 1.5rem;
  --fs-heading: 1.75rem;
  --fs-display: 1.875rem;
  --fw-heading: 400;
}

html {
  color-scheme: light dark;
  direction: rtl;
  font-size: 100%;
  --surface: var(--white);
  --surface-2: var(--tint);
  --card: var(--white);
  --text: var(--black);
  --muted: var(--ink-2);
  --line: var(--hairline);
  --field-edge: var(--field-line);
  --err: var(--error);
  --ring: var(--gold);
  --rule: var(--gold);
  --bar: var(--green);
  --on-bar: var(--white);
  --bar-sub: var(--gold-on-dark);
  --bar-rule: var(--gold);
  --bar-ring: var(--gold-on-dark);
  --primary-bg: var(--green);
  --primary-fg: var(--white);
  --link: var(--green);
  background: var(--surface);
}

@media (prefers-color-scheme: dark) {
  html {
    --surface: var(--night);
    --surface-2: var(--night);
    --card: var(--green);
    --text: var(--night-ink);
    --muted: var(--night-ink-muted);
    --line: var(--night-hairline);
    --field-edge: var(--night-field-line);
    --err: var(--night-error);
    --ring: var(--gold-on-dark);
    --rule: var(--gold-on-dark);
    --bar: var(--black);
    --on-bar: var(--night-ink);
    --bar-rule: var(--gold-on-dark);
    --primary-bg: var(--night-ink);
    --primary-fg: var(--green);
    --link: var(--night-ink);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-block-size: 100vh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.85;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Headings in the display face at its one weight (never synthesised bold), on the site's scale. */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--fw-heading); font-synthesis-weight: none;
  line-height: 1.35; margin-block: 0 0.5rem;
}
h1 { font-size: var(--fs-heading); }
h2 { font-size: var(--fs-headline); margin-block-start: 1.5rem; }
h3 { font-size: var(--fs-title); }
@media (min-width: 64rem) {
  h1 { font-size: var(--fs-display); }
}
p { margin-block: 0.5rem; }

/* The bar runs edge to edge (the page's threshold); the tabs, the page and the foot keep one 44rem column. */
#root { padding-block-end: 1rem; }
#root > nav, #root > main, #root > .foot { max-inline-size: 44rem; margin-inline: auto; padding-inline: 1rem; }
main { display: block; min-inline-size: 0; }

/* The threshold: green (black at night) from edge to edge, the gold thread of 1 px under it (the site's header). */
.bar {
  background: var(--bar); color: var(--on-bar);
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--bar-rule);
  border-radius: 0;
}
.bar-inner {
  max-inline-size: 44rem; margin-inline: auto; padding-inline: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.bar .brand { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; min-inline-size: 0; }
.bar .brand-name { display: flex; flex-direction: column; min-inline-size: 0; }
/* The shield: 44 px high, whole, never mirrored, never partly transparent, no filter. */
.bar img { block-size: 44px; inline-size: auto; flex: none; opacity: 1; }
/* The name shrinks to fit at 200 % on 320 px, never under 16 px. */
.bar .brand strong { font-size: clamp(1rem, 4.2vw + 0.35rem, 1.125rem); line-height: 1.35; }
/* The service's name under it in the light gold, on the bar only (the site's brand line; gold is never text on white). */
.bar .brand span { font-size: 1rem; line-height: 1.35; color: var(--bar-sub); }

/* The five tabs: one row where they fit; on a phone they wrap to a second row (below), so a tab is whole or on
   the next row, never cut at the edge (DESIGN.md «لا قصَّ لنصٍّ عربيّ»). The row's own scroll is the backstop only. */
nav {
  display: flex; flex-wrap: nowrap; gap: 0.25rem; margin-block: 0.75rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 1rem;
  padding-block: 0.375rem; border-block-end: 1px solid var(--line);
}
.tab {
  min-block-size: 48px; display: inline-flex; align-items: center; padding-inline: 0.5rem;
  flex: none; white-space: nowrap; scroll-snap-align: start;
  color: var(--muted); text-decoration: none; border-block-end: 2px solid transparent;
  font-family: var(--font-label); font-weight: 700; font-synthesis-weight: none; font-size: var(--fs-body-sm);
}
/* The label face has one weight: the page's tab is told by its ink and the gold rule under it. */
.tab[aria-current="page"] { border-block-end-color: var(--rule); color: var(--text); }

/* The site's card: white on the white ground, a hairline, radius 16, the small shadow; the gold rule on top kept. */
.card {
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem; margin-block: 0.75rem;
  border-block-start: 2px solid var(--rule);
}
.card.narrow { max-inline-size: 28rem; margin-inline: auto; margin-block-start: 1.5rem; }

.field { display: flex; flex-direction: column; margin-block: 0.75rem; min-inline-size: 0; }
.field label { font-size: 1rem; line-height: 1.4; color: var(--muted); margin-block-end: 0.25rem; }
input, select, textarea {
  font: inherit; font-size: 1.125rem; color: var(--text); background: var(--card);
  border: 1px solid var(--field-edge); border-radius: var(--radius-sm); padding-block: 0.625rem; padding-inline: 0.75rem;
  min-block-size: 52px; inline-size: 100%; max-inline-size: 100%;
}
input[dir="ltr"] { text-align: end; }
fieldset.group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; margin-block: 0.75rem; min-inline-size: 0; }
/* A group's name is a short label: the label face. */
legend { font-family: var(--font-label); font-weight: 700; font-synthesis-weight: none; font-size: var(--fs-body-sm); color: var(--muted); padding-inline: 0.25rem; }
.check { display: flex; gap: 0.5rem; align-items: center; min-block-size: 48px; }
.check input { min-block-size: 24px; inline-size: 24px; flex: none; }
/* The years and the receiving choice in the palette's green (the night ink at night), as the primary button: no fifth colour. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary-bg); margin: 0; cursor: pointer; }
/* The request's year in bold only when the server's answer marks it (renewal_offered_years `current`), never a guess. */
.check.year-now { font-weight: 600; }
/* A missed year's fine under its box: the label at the start, the dinars at the end, as the amount's rows. */
.fine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; margin-block: 0 0.5rem; padding-inline-start: 2rem; color: var(--muted); font-size: 1rem; }
.fine dt { margin: 0; }
.fine dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

.btn {
  font: inherit; font-size: 1.125rem; min-block-size: 48px; padding-inline: 1rem; padding-block: 0.375rem;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  border-radius: var(--radius-sm); border: 1px solid var(--primary-bg); background: var(--card); color: var(--link);
  cursor: pointer; max-inline-size: 100%;
}
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); min-block-size: 56px; font-weight: 600; }
.btn-danger { border-color: var(--err); color: var(--err); }
.btn-danger.btn-primary { background: var(--err); color: var(--card); }
.btn-quiet { background: transparent; border-color: var(--line); }
/* A danger action that is not the page's primary: red words on a hairline, never a red frame beside the primary. */
.btn-quiet.btn-danger { border-color: var(--line); color: var(--err); }
.btn-on-bar { background: transparent; color: var(--on-bar); border-color: var(--bar-rule); white-space: nowrap; padding-inline: 0.75rem; min-block-size: 48px; }
/* On the bar (green in light, black at night) the ring is the light gold (the site's dark focus): over 6:1 against the bar. */
.btn:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }
.file-label { position: relative; }
/* The native file control is out of sight but still focusable: its browser text («No file chosen», left to right) is never shown; the label is the button, and the line under it says the state in Arabic (T-M4). */
.file-label input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.file-label.is-busy { opacity: .6; cursor: not-allowed; }
.file-label:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }

/* The site's ring: gold, off the edge by a gap of the ground (3.3:1 on white and on the tint; the light gold at night). */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* The ring is for what the keyboard reaches: a region focused by the page (for the reader) shows none. */
main:focus-visible, h1[tabindex="-1"]:focus-visible, p[tabindex="-1"]:focus-visible { outline: none; }
.bar :focus-visible { outline-color: var(--bar-ring); }

.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; align-items: center; }
.row-danger { margin-block-start: 0.25rem; }
/* A question inside a card sits on the green-tinted surface (the site's field card). */
.panel { background: var(--surface-2); border: 1px solid var(--line); border-inline-start: 2px solid var(--rule); border-radius: var(--radius-sm); padding: 0.75rem; inline-size: 100%; }
.action { display: contents; }

.link { color: var(--link); text-underline-offset: 0.2em; display: inline-flex; align-items: center; min-block-size: 48px; }
.value { font-size: 1.25rem; font-weight: 600; margin-block: 0.25rem; }
.meta { color: var(--muted); font-size: 1rem; margin-block: 0.25rem; }
.meta-warn { color: var(--err); }
.state { color: var(--muted); }
.state-error, .outcome-error { color: var(--err); }
.outcome-ok { font-weight: 600; }
/* The quiet notice: under the body (16, muted), a 1 px gold rule at its start. */
.notice { background: var(--surface-2); border-inline-start: 1px solid var(--rule); padding-block: 0.25rem; padding-inline: 0.75rem; margin-block: 0.75rem; font-size: 1rem; color: var(--muted); }
.asof { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: space-between; color: var(--muted); font-size: 1rem; margin-block-start: 1rem; }
/* The date, the time and the full stop move to a new line together rather than part; never a nowrap run, which at
   320 px with 200 % text is wider than the card and pushed the page sideways (run 39516810499): it wraps inside itself. */
.when { display: inline-block; max-inline-size: 100%; }
/* «حدِّث»: a secondary action on the line, not a third button. */
.asof .btn-quiet { border-color: transparent; padding-inline: 0.5rem; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }

/* Where the request stands (v14): five quiet steps, green and gold only, no motion. */
.stage-now { margin-block-start: 0.5rem; }
.stages { list-style: none; padding: 0; margin-block: 0.25rem 0.75rem; }
/* The step names are short labels: the label face, its one weight; the step now is told by its ink and its mark. */
.stages li { position: relative; display: flex; align-items: center; gap: 0.75rem; min-block-size: 48px; color: var(--muted);
  font-family: var(--font-label); font-weight: 700; font-synthesis-weight: none; font-size: var(--fs-body-sm); }
.stages li::before {
  content: ""; flex: none; inline-size: 12px; block-size: 12px; border-radius: 50%;
  border: 2px solid var(--rule); background: var(--card); position: relative; z-index: 1;
}
.stages li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 5.5px; inline-size: 1px;
  inset-block-start: calc(50% + 6px); block-size: calc(100% - 12px); background: var(--rule);
}
.stages li.done { color: var(--text); }
.stages li.done::before { background: var(--rule); }
.stages li.now { color: var(--text); font-weight: 600; }
/* Stopped where it is (returned, held, a clearer picture asked; the phone's pass 06): the error mark at the step now,
   a mark and a line, never a fill. */
.stages li.stopped::before {
  content: "!"; border-color: var(--err); color: var(--err); font-size: 9px; font-weight: 700; line-height: 8px;
  text-align: center;
}
/* A card that asks the lawyer to act: the error token's 2 px frame on the card white, never a red fill. */
.card.attention { border: 2px solid var(--err); }
.companion { font-weight: 600; margin-block: 0.25rem; }

/* The amount once set: its named lines by year, then the total; read only (the pay step is 12c-2). */
/* No column gap: the dd's own start padding is the space, so the total's rule runs unbroken under both cells. */
.amount { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0.25rem 0; margin-block: 0.75rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--line); }
.amount dt { color: var(--muted); font-size: 1rem; }
.amount dd { margin: 0; padding-inline-start: 0.75rem; text-align: end; font-variant-numeric: tabular-nums; }
/* The web has no pay step until 12c-2: the fact under the amount, quiet, never a button. */
.pay-not-here { margin-block-start: 0.25rem; }
/* The pay step (12c-2, D12 §6): its line is the status's own weight, under the amount; a final line closes with the rule. */
.pay-line { font-weight: 600; margin-block: 0.5rem 0.25rem; }
.pay-final { border-inline-start: 2px solid var(--rule); padding-inline-start: 0.75rem; }
/* A server time inside a sentence: its own isolated run (digits left to right), free to wrap with the sentence at 200 %. */
.pay-time { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* The sale terms as the server wrote them, beside their box: a bordered block that reads as the thing agreed to;
   the box at the start edge of the first line, the text wrapping under itself, the whole row the touch target. */
.consent { align-items: flex-start; gap: 0.75rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem;
  margin-block: 0.75rem 0; font-size: 1rem; line-height: 1.7; cursor: pointer; min-inline-size: 0; }
.consent input { margin-block-start: 0.2rem; }
.consent span { min-inline-size: 0; overflow-wrap: anywhere; }
/* The leaving state: one quiet sentence with the gold rule, no control and no motion (nothing animates on this page). */
.pay-leaving { border-inline-start: 2px solid var(--rule); padding-inline-start: 0.75rem; color: var(--muted); margin-block: 0.75rem; }
.pay-said:empty { display: none; }
.amount .total { font-weight: 600; color: var(--text); font-size: 1.125rem; border-block-start: 1px solid var(--line); padding-block-start: 0.25rem; }
/* A narrow box (320 px at 200 % text measured 21,920 px tall: the names squeezed to one letter a line beside the
   figures) stacks each line: its name, then its figure at the end edge; the total keeps one rule above its name. */
.amount-box { container-type: inline-size; }
/* Scoped through the box (0,2,0) so the phone rule's later `.amount` columns (max-width: 30rem) do not win. */
@container (max-width: 17em) {
  .amount-box .amount { grid-template-columns: minmax(0, 1fr); }
  .amount-box .amount dd { padding-inline-start: 0; margin-block-end: 0.25rem; }
  .amount-box .amount dd.total { border-block-start: 0; padding-block-start: 0; }
}

.summary { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0.25rem 0.75rem; }
.summary dt { color: var(--muted); font-size: 1rem; }
.summary dd { margin: 0; }
.kinds, .docs, .messages, .addresses { list-style: none; padding: 0; margin: 0; }
.kinds li, .docs li, .messages li, .addresses li { border-block-start: 1px solid var(--line); padding-block: 0.75rem; }
.docs li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; }
.kind-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; align-items: baseline; }
.message-open { inline-size: 100%; justify-content: flex-start; text-align: start; font-weight: 600; }
.message-unread { border-inline-start: 2px solid var(--rule); padding-inline-start: 0.5rem; }

/* The foot: the Bar's site at the start edge, the build mark at the end, both 16 and muted. */
.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; color: var(--muted); font-size: 1rem; margin-block-start: 1.5rem; }
.foot a { color: var(--link); min-block-size: 48px; display: inline-flex; align-items: center; }

@media (max-width: 30rem) {
  #root > nav, #root > main, #root > .foot, .bar-inner { padding-inline: 0.5rem; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  /* At 200 % on 320 px the total (36 px, weight 600) and the gap can pass the card's width: the figure may wrap
     before «د.ع» rather than push the page; at any wider size it is the one line it was. */
  .amount { grid-template-columns: minmax(0, 1fr) auto; }
  .summary dt { margin-block-start: 0.25rem; }
  .summary dd { font-weight: 500; }
  /* The tabs wrap to a second row; a tab wider than the row wraps its own words rather than run past the edge. */
  nav { flex-wrap: wrap; }
  .tab { white-space: normal; max-inline-size: 100%; }
  /* The primary action takes the row on a phone; the sign-out keeps its own width at the end of the bar's row,
     never the largest control on the page. At 200 % on 320 px the name may take two lines: the 16 px floor holds. */
  .row-actions .btn-primary { flex: 1 1 100%; }
  .bar .btn-on-bar { flex-basis: auto; margin-inline-start: auto; }
}

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