/* The pay page's one stylesheet, cloned from the web face (the app's
   docs/DESIGN.md and lib/design/tokens.dart): the four locked colours and
   their named derivatives, light and night, through variables only;
   Alexandria, bundled; 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; gold as metal, never as text; a focus ring that is not the gold. */

@font-face {
  font-family: "Alexandria";
  src: url("alexandria.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --green: #0E2D1E;
  --gold: #A9874D;
  --gold-on-light: #7A5F2E;
  --gold-on-dark: #C9A863;
  --black: #000000;
  --white: #FFFFFF;
  --ink: #0C1710;
  --ink-muted: #45514A;
  --paper: #F7F6F2;
  --hairline: #DDD8CC;
  --error: #8A1F1F;
  --focus: #0B57D0;
  --night: #07110B;
  --night-ink: #F1EFE8;
  --night-ink-muted: #B8C2BB;
  --night-hairline: #274536;
  --night-error: #F2A3A3;
  --focus-on-dark: #FFE08A;
  --shadow: 0 1px 3px rgba(14, 45, 30, 0.10);
  --radius: 12px;
}

html {
  color-scheme: light dark;
  direction: rtl;
  font-size: 100%;
  --surface: var(--paper);
  --card: var(--white);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --line: var(--hairline);
  --err: var(--error);
  --ring: var(--focus);
  --rule: var(--gold-on-light);
  --bar: var(--green);
  --on-bar: var(--white);
  --bar-rule: 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);
    --card: var(--green);
    --text: var(--night-ink);
    --muted: var(--night-ink-muted);
    --line: var(--night-hairline);
    --err: var(--night-error);
    --ring: var(--focus-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: "Alexandria", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.85;
  font-weight: 400;
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.4; font-weight: 600; margin-block: 0 0.5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; margin-block-start: 1.5rem; }
h3 { font-size: 1.125rem; }
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 light gold thread of 1 px under it (DESIGN.md). */
.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; }
.bar .brand span { font-size: 1rem; line-height: 1.35; }

/* The five tabs: one row; under the column's width it slides within itself, never the page. */
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(--text); text-decoration: none; border-block-end: 2px solid transparent;
}
.tab[aria-current="page"] { border-block-end-color: var(--rule); font-weight: 600; }

.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(--line); border-radius: 8px; 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: 8px; padding: 0.75rem; margin-block: 0.75rem; min-inline-size: 0; }
legend { font-size: 1rem; 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; }
.check.year-now { font-weight: 600; }
.fine { margin-block: 0 0.5rem; padding-inline-start: 2rem; }

.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: 8px; 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 one: 3:1 against the bar in both modes. */
.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; }

: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(--focus-on-dark); }

.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; }
.panel { border: 1px solid var(--line); border-inline-start: 2px solid var(--rule); border-radius: 8px; 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 { 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; }
.stages li { position: relative; display: flex; align-items: center; gap: 0.75rem; min-block-size: 48px; color: var(--muted); }
.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; }
.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). */
.amount { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0.25rem 0.75rem; 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; text-align: end; font-variant-numeric: tabular-nums; }
.amount .total { font-weight: 600; color: var(--text); font-size: 1.125rem; border-block-start: 1px solid var(--line); padding-block-start: 0.25rem; }

.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 primary action takes the row on a phone; the sign-out drops under the name, full width. */
  .row-actions .btn-primary { flex: 1 1 100%; }
  .bar .btn-on-bar { flex-basis: 100%; }
}

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

/* The pay page's own rules (M11): the consent box is a full 48 px row; the
   provider's form, when one is ever mounted, sits in a card of its own. */
.consent { display: flex; gap: 0.75rem; align-items: flex-start; min-block-size: 48px; margin-block: 1rem; }
.consent input { min-block-size: 24px; inline-size: 24px; flex: none; margin-block-start: 0.4rem; }
.widget { margin-block-start: 1rem; min-inline-size: 0; }