/* Modern Partners document system: the interface's one stylesheet.

   The screens follow a letterhead: paper-white sheets on a cool desk, ink in the company's main
   colour, and its accent used as the letterhead uses it, for rules and marks, never for body text
   (text that must read in the accent uses --accent-ink). Every text/background pair below meets
   WCAG AA (4.5:1, or 3:1 for large text and controls).

   The two colours are the working company's (T36): its theme (/theme/<code>.<hash>.css, after
   this file) sets the brand tokens below from its palette, worked out and checked by
   app/domain/palette.py. The values here are the neutral palette of that module, for the pages
   that name no company (tests/test_theme.py holds them equal).

   Arabic first: the layout is written in logical properties (inline-start is the right edge in
   Arabic), so a left-to-right page needs no second stylesheet. */

/* ── Fonts ────────────────────────────────────────────────────────────────────
   Self-hosted and cut to their script (scripts/build_brand_assets.py UI_FACES): Arabic text in
   Noto Sans Arabic, headings in Noto Naskh Arabic (the documents' own face), Latin and figures in
   Inter. The unicode-range means a page fetches only the faces its characters need. */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/NotoSansArabic-Regular.woff2?v=b4eb46e14f19') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/NotoSansArabic-SemiBold.woff2?v=0a1be972e5b6') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/NotoNaskhArabic-Bold.woff2?v=9f249e103c78') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2?v=c7628415b4ba') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2?v=d9b8bc721f00') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  /* Brand: the neutral palette (app/domain/palette.py NEUTRAL); a company's theme sets its own */
  --main: #334155;          /* ink: headings, primary actions, the letterhead band */
  --main-hover: #40526b;
  --main-pressed: #242d3b;
  --main-wash: #f0f2f4;     /* selected and hovered rows, quiet fills */
  --main-line: #ccd0d6;     /* borders; text on the main colour (at least 4.5:1) */
  --main-rgb: 51 65 85;     /* for shadows and veils: rgb(var(--main-rgb) / 0.1) */
  --accent: #64748b;        /* rules, marks, focus rings (at least 3:1 on white: non-text only) */
  --accent-ink: #4a596e;    /* accent-coloured text on white and the washes: at least 4.5:1 */
  --accent-wash: #ebeef2;
  --accent-on-main: #a4b0c1; /* marks on the main colour: at least 4.5:1 */
  --accent-rgb: 100 116 139;
  --rail-line: #4e6382;     /* dividers on the rail, filled in the main colour (T46) */
  --rail-current: #64748b;  /* the current page on the rail: the accent, white text at least 4.5:1 */

  /* The action: the main buttons, the same in every company (owner, 2026-10-04, T46): the
     neutral palette's main colour and its shades, never a company's. A company is told apart by
     its rail, band and marks. */
  --action: #334155;
  --action-hover: #40526b;
  --action-pressed: #242d3b;
  --action-mark: #a4b0c1;   /* an icon on the action colour: at least 4.5:1 */

  /* Surfaces and text */
  --desk: #f3f5f8;          /* the page behind the sheets */
  --paper: #ffffff;
  --line: #dfe3ea;
  --line-strong: #c3cad6;
  --text: #1f2a3d;          /* 14.4:1 on paper */
  --text-muted: #5b6577;    /* 5.9:1 on paper, 5.4:1 on the desk */

  /* Status: text on its own wash, each at least 5.7:1 */
  --success: #1f6b45;
  --success-wash: #e6f4ec;
  --success-line: #a7d3bb;
  --warning: #8a5300;
  --warning-wash: #fdf3e1;
  --warning-line: #ecd09a;
  --danger: #9b2c2c;
  --danger-hover: #822424;
  --danger-wash: #fbeaea;
  --danger-line: #e9b4b4;

  /* Type */
  --font-text: 'Inter', 'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-heading: 'Noto Naskh Arabic', 'Inter', 'Noto Sans Arabic', serif;

  /* Space (4 px steps) and shape: controls are tighter than sheets, badges are pills */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 6px;
  --radius-sheet: 10px;
  --shadow-sheet: 0 1px 2px rgb(var(--main-rgb) / 0.06);
  --shadow-raised: 0 18px 48px rgb(var(--main-rgb) / 0.22);

  --rail-width: 248px;
  --band: 4px;              /* the letterhead's band, in the main colour */
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  font-synthesis-weight: none;
}

body {
  font-family: var(--font-text);
  line-height: 1.65;
  color: var(--text);
  background: var(--desk);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--main);
  line-height: 1.4;
}
h1 { font-size: 1.95rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

strong, b, th, label, legend { font-weight: 600; }
img, svg { display: block; max-width: 100%; }
a { color: var(--main); text-underline-offset: 3px; }
a:hover { color: var(--main-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-wash); color: var(--main); }

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}
/* Arrows point the way the page reads. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* English beside Arabic: the secondary line of a bilingual label. Ordered by its own words, so
   its punctuation stays at its end ("Co." not ".Co"), while spacing and alignment follow the
   Arabic page around it. */
.en {
  unicode-bidi: plaintext;
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
[dir="rtl"] .en { text-align: right; }

/* Figures, codes and numbers read left to right inside Arabic text, in even-width digits. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc-number {
  font-weight: 600;
  color: var(--main);
}
.muted { color: var(--text-muted); }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--main);
  color: #fff;
  border-radius: var(--radius-control);
}
.skip-link:focus { inset-block-start: var(--space-3); color: #fff; }

/* ── Layout ─────────────────────────────────────────────────────────────────
   Desktop: the letterhead rail at inline-start, the work beside it. Below 1024 px the rail
   becomes a top bar with the navigation as a scrolling strip, so no menu needs opening. */
.app {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* The letterhead band: the main colour across the top of every screen, the accent's hairline
   right beneath it: no paper between them (T48), which read as a gap at the top of the page. */
.app::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  block-size: calc(var(--band) + 1px);
  background: linear-gradient(var(--main) 0 var(--band), var(--accent) var(--band));
  pointer-events: none;
}

.rail {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: calc(var(--band) + var(--space-6)) var(--space-4) var(--space-5);
  background: var(--main);
  color: #fff;
  border-inline-end: 1px solid var(--main);
  overflow-y: auto;
}
/* On the rail, the English line and quiet text are the main colour's light shade (at least
   4.5:1 on it, app/domain/palette.py). */
.rail .en { color: var(--main-line); }

/* Attached to the band above the rail: a header block in the accent, its lower edge cut on the
   slant of the logo's tower, the one ornament the screens carry. */
.rail::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 14px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 30%);
}
[dir="ltr"] .rail::before { clip-path: polygon(0 0, 100% 0, 100% 30%, 88% 100%, 0 100%); }

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--rail-line);
  text-decoration: none;
  text-align: center;
}
/* The logo is drawn for light backgrounds: on the rail's main colour it sits on a paper plate
   (T46), drawn by a shadow so the logo keeps its box. */
.brand-logo {
  inline-size: 132px;
  block-size: auto;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 var(--space-2) var(--paper);
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #fff;
}
.brand-name .en { margin-block-start: 2px; }

/* The owner's switcher (T34): one button per company, the working one marked. */
.switcher {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--rail-line);
}
.switcher-title {
  margin: 0 0 var(--space-1);
  padding-inline: var(--space-3);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--main-line);
}
.switcher-title .en { display: inline; margin-inline-start: var(--space-2); font-size: 0.74rem; }
/* Each company stacked (T48): its logo on top, its name beneath, the tick in a corner. */
.switcher-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-2) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
.switcher-choice:hover { background: var(--main-hover); color: #fff; }
.switcher-choice[aria-current="true"] {
  border-color: var(--rail-line);
  background: var(--main-hover);
  color: #fff;
  cursor: default;
}
/* The quiet shade reads on the main colour only: on the hover's, its text is white. */
.switcher-choice:hover .en, .switcher-choice[aria-current="true"] .en { color: #fff; }
/* Each company's logo (T46) on a paper tile, whatever it was drawn for; its code's tile until it
   has one. */
.switcher-logo {
  flex: none;
  inline-size: 80px;
  block-size: 56px;
  padding: 6px;
  border-radius: var(--radius-control);
  background: var(--paper);
  object-fit: contain;
}
.switcher-monogram {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--main);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.switcher-name { min-inline-size: 0; inline-size: 100%; }
.switcher-name .en { font-size: 0.74rem; }
.switcher-current {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  color: #fff;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}
.nav-link .icon { color: var(--main-line); }
.nav-link .en { font-size: 0.74rem; }
.nav-link:hover { background: var(--main-hover); color: #fff; }
.nav-link:hover .icon, .nav-link:hover .en { color: #fff; }
/* The current page in the company's accent, darkened until white reads on it. */
.nav-link[aria-current="page"] {
  background: var(--rail-current);
  color: #fff;
  /* A white edge marks it whatever the accent: an accent may be as dark as the main colour. */
  box-shadow: inset 3px 0 0 #fff;
}
[dir="rtl"] .nav-link[aria-current="page"] { box-shadow: inset -3px 0 0 #fff; }
.nav-link[aria-current="page"] .icon, .nav-link[aria-current="page"] .en { color: #fff; }

.account {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rail-line);
}
.account-name { font-weight: 600; line-height: 1.3; }
.account-role { font-size: 0.8rem; color: var(--main-line); }
.rail .btn-quiet { color: #fff; }
.rail .btn-quiet:hover, .rail .btn-quiet[aria-current="page"] { background: var(--main-hover); color: #fff; }
.rail :focus-visible { outline-color: #fff; }
.account-who { min-inline-size: 0; flex: 1; }
.account form { flex: none; }

.workspace {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

/* The issue confirmation's issuer: the company's logo, name and number prefix (T34). */
.issuer-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--main-line);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--main-wash);
}
.issuer-logo { flex: none; inline-size: 64px; block-size: auto; }
.issuer-logo.switcher-monogram { block-size: 48px; font-size: 0.95rem; }
.issuer-name { font-family: var(--font-heading); font-weight: 700; color: var(--main); }
.issuer-number { margin-block-start: var(--space-1); font-size: 0.9rem; }

/* The number the next approval takes, and its change (T67), in a draft's approve box. */
.numbering-box {
  margin-block: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--main-line);
  border-radius: var(--radius-control);
  background: var(--main-wash);
  text-align: start;
}
.numbering-next { font-weight: 600; }
.numbering-next .doc-number { font-size: 1.15rem; color: var(--main); }
.numbering-last { margin-block-start: var(--space-1); font-size: 0.85rem; }
.numbering-change { margin-block-start: var(--space-2); }
.numbering-change summary { cursor: pointer; color: var(--main); font-size: 0.9rem; }
.numbering-form { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); }
.numbering-form input[name="next_number"] { max-inline-size: 10rem; }
.numbering-preview, .numbering-note { font-size: 0.85rem; }
/* A number never breaks at its hyphens. */
.numbering-box .num, .issuer-number .num { white-space: nowrap; }
.numbering-form .btn { justify-self: start; }

/* The company settings page's logos and seal (T35): one card each, side by side when wide. */
.brand-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}
.brand-file {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.brand-file h3 { margin: 0; font-size: 1rem; }
.brand-file form { display: grid; gap: var(--space-2); justify-items: start; }
.brand-file .input { inline-size: 100%; }
.brand-file-preview {
  display: grid;
  place-items: center;
  block-size: 112px;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--desk);
}
/* The dark-background logo is looked at on a dark background. */
.brand-file-preview-dark { background: var(--main); }
.brand-file-preview img { max-inline-size: 100%; max-block-size: 80px; }

/* A client's logo (T44): on its page beside its upload, and on the offer form by its client. */
.client-logo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: start;
}
.client-logo-current, .client-logo-actions { display: grid; gap: var(--space-3); align-content: start; }
.client-logo-actions form { display: grid; gap: var(--space-2); justify-items: start; }
.client-logo-actions .input { inline-size: 100%; }
.logo-preview {
  display: grid;
  place-items: center;
  block-size: 136px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
}
.logo-preview img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100px; }
.client-card-logo {
  display: inline-grid;
  place-items: center;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-block-size: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
}
.client-card-logo[hidden] { display: none; }
/* The choice to print it on the cover (T45), under it. */
.client-logo-choice { margin-block-start: var(--space-2); padding-inline: 0; }
.client-logo-choice[hidden] { display: none; }
.client-card-logo img { inline-size: auto; block-size: auto; max-inline-size: 200px; max-block-size: 48px; }

/* The saved colours on the settings page (T36), drawn by the theme's own tokens. */
.palette-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-3);
}
.palette-swatch {
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
}
.palette-swatch-main { background: var(--main); }
.palette-swatch-accent { background: var(--accent); }
.brand-file-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.88rem; }
.fingerprint { font-size: 0.85rem; }
.alert-body ul { margin: var(--space-1) 0 var(--space-2); padding-inline-start: var(--space-5); }

/* The company this page is (T34): on every signed-in page, above the work. */
.company-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: calc(var(--band) + var(--space-3)) var(--space-6) var(--space-3);
  background: var(--main-wash);
  border-block-end: 1px solid var(--main-line);
  border-inline-start: 4px solid var(--accent);
}
.company-band-label { font-size: 0.85rem; color: var(--text-muted); }
.company-band-label .en, .company-band-name .en { display: inline; margin-inline-start: var(--space-2); }
.company-band-name { font-family: var(--font-heading); color: var(--main); }
.company-band-code {
  padding: 1px var(--space-2);
  border-radius: var(--radius-control);
  background: var(--main);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.company-band + .page { padding-block-start: var(--space-6); }

.page {
  flex: 1;
  inline-size: 100%;
  max-inline-size: 1240px;
  margin-inline: auto;
  padding: calc(var(--band) + var(--space-6)) var(--space-6) var(--space-7);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  max-inline-size: 1240px;
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-block-start: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  margin-block-end: var(--space-6);
}
.page-title h1 + .en { font-size: 0.85rem; margin-block-start: 2px; }
/* The short accent rule under a page title, as under the letterhead's name. */
.page-title::after {
  content: "";
  display: block;
  inline-size: 44px;
  block-size: 2px;
  margin-block-start: var(--space-3);
  background: var(--accent);
}
.page-lede {
  margin-block-start: var(--space-3);
  max-inline-size: 70ch;
  color: var(--text-muted);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Sheets (cards) ───────────────────────────────────────────────────────── */
.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}
.sheet + .sheet, .stats + .sheet, .section-gap { margin-block-start: var(--space-5); }
.sheet-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--line);
}
.sheet-header h2 { font-size: 1.12rem; }
.sheet-header .en { display: inline; margin-inline-start: var(--space-2); }
.sheet-body { padding: var(--space-5); }
.sheet-footer {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--line);
  background: var(--desk);
  border-end-start-radius: var(--radius-sheet);
  border-end-end-radius: var(--radius-sheet);
}
.sheet-count { font-size: 0.85rem; color: var(--text-muted); }
.sheet-narrow { max-inline-size: 920px; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack { display: grid; gap: var(--space-4); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4) var(--space-5);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn .icon { inline-size: 1.15em; block-size: 1.15em; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); color: #fff; }
.btn-primary:active { background: var(--action-pressed); }
.btn-primary .icon { color: var(--action-mark); }
.btn-secondary { background: var(--paper); border-color: var(--line-strong); color: var(--main); }
.btn-secondary:hover { background: var(--main-wash); border-color: var(--main-line); color: var(--main); }
.btn-quiet { background: transparent; color: var(--main); }
.btn-quiet:hover { background: var(--main-wash); color: var(--main); }
.btn-danger { background: var(--paper); border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); color: var(--danger); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: var(--danger-hover); color: #fff; }
.btn-sm { min-block-size: 32px; padding: 4px var(--space-3); font-size: 0.9rem; }
.btn-lg { min-block-size: 48px; padding: var(--space-3) var(--space-5); font-size: 1.05rem; }
.btn-block { display: flex; inline-size: 100%; }
.btn-icon { min-inline-size: 32px; padding-inline: 6px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Busy: set by app.js while a submitted form waits for the server. */
.btn[aria-busy="true"] { cursor: progress; opacity: 1; }
/* Said under a button while its form is being sent (a finalize makes the PDF first). */
.busy-note { display: none; margin-block-start: var(--space-2); font-size: 0.88rem; color: var(--text-muted); }
form[data-submitting="yes"] .busy-note { display: block; }
.btn[aria-busy="true"] .icon { display: none; }
.btn[aria-busy="true"]::before {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--main-wash);
  color: var(--main);
}
.badge::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-draft { background: var(--warning-wash); color: var(--warning); }
.badge-finalized, .badge-active { background: var(--success-wash); color: var(--success); }
.badge-voided, .badge-inactive { background: var(--danger-wash); color: var(--danger); }
/* A chain's current version, and the version on screen in its versions panel (T43). */
.badge-current { background: var(--success-wash); color: var(--success); }
.badge-on-screen { background: var(--main-wash); color: var(--main); }
.badge .en { display: inline; margin-inline-start: 4px; font-size: 0.72rem; color: inherit; opacity: 0.8; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
/* position: a visually hidden label inside must scroll with the table, not widen the page. */
.table-scroll { position: relative; overflow-x: auto; }
.table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.table th {
  padding: var(--space-3);
  background: var(--desk);
  border-block-end: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: start;
  vertical-align: bottom;
  white-space: nowrap;
}
.table th .en { font-size: 0.72rem; font-weight: 400; }
.table th:first-child, .table td:first-child { padding-inline-start: var(--space-5); }
.table th:last-child, .table td:last-child { padding-inline-end: var(--space-5); }
.table td {
  padding: var(--space-3);
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background: #fafbfd; }
.table .col-amount { text-align: end; white-space: nowrap; }
.table .col-actions { inline-size: 1%; white-space: nowrap; text-align: end; }
.table .cell-sub { display: block; font-size: 0.8rem; color: var(--text-muted); }
.table .cell-clip {
  max-inline-size: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-muted td { color: var(--text-muted); background: var(--desk); }
/* The first cell names the row and opens it. */
.row-link { font-weight: 600; color: var(--main); text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.table .cell-name { min-inline-size: 150px; }
/* A heading that sorts the register by its column; the chevron shows the direction. Plain
   headings sit the same way. */
.th-label { display: inline-flex; align-items: center; gap: 4px; }
.sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--main); }
.sort-link .en, .th-label .en { margin-inline-start: 4px; }
.sort-mark { inline-size: 14px; block-size: 14px; color: var(--main); }
[aria-sort="ascending"], [aria-sort="descending"] { color: var(--main); }
.revision-link a { color: var(--accent-ink); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.field-label { font-size: 0.93rem; color: var(--text); }
.field-label .en { display: inline; margin-inline-start: 6px; }
.required { color: var(--danger); margin-inline-start: 2px; }
.field-hint { font-size: 0.82rem; color: var(--text-muted); }
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--danger);
}
/* A field's messages (components/ui.html field_errors): one under the other. */
.field-error-list { flex-direction: column; align-items: stretch; gap: 2px; }

.input {
  inline-size: 100%;
  min-block-size: 42px;
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: #7d8697; }
.input:hover { border-color: var(--main-line); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { resize: vertical; min-block-size: 88px; }
select.input { cursor: pointer; }
.input-ltr { direction: ltr; text-align: left; }
.input-number { text-align: center; font-variant-numeric: tabular-nums; }

.input-search { position: relative; }
.input-search .icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.input-search .input { padding-inline-start: 40px; }

.form-section + .form-section {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}
/* A legend normally sits on its fieldset's border; floated full width it is an ordinary heading. */
.form-section-title {
  float: inline-start;
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  font-size: 1.08rem;
}
.form-section-title .icon { color: var(--accent); }
.form-section-title + * { clear: both; }
.form-section-title .en { display: inline; margin-inline-start: var(--space-2); }
.form-section-lede { margin-block: calc(-1 * var(--space-2)) var(--space-4); color: var(--text-muted); font-size: 0.9rem; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}
/* The offer form's line saying a copy is kept in this browser (app.js, ADR 0014). */
.form-draft-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  margin-inline-end: auto; /* at the line's start, the buttons at its end */
  font-size: 0.82rem;
  color: var(--text-muted);
}
.form-draft-status .icon { color: var(--success); }
.form-draft-status .en { display: block; }
.draft-restore-actions { margin-block-start: var(--space-3); }

.checklist {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  background: var(--desk);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  font-weight: 400;
  cursor: pointer;
}
.check:hover { background: var(--paper); }
.check input {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 3px;
  accent-color: var(--main);
}
.check-strong { font-weight: 600; color: var(--main); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.filters .field { flex: 1 1 180px; }
.filters .field-grow { flex: 3 1 260px; }
.filters .cluster { flex: none; }
.filters .filters-check { flex: none; align-self: center; margin-block-start: var(--space-4); }
/* The register's search and client filter share the first row; the client filter's search box
   sits beside its list, so the row is one line high. */
.filters .filter-wide { flex: 1 1 calc(50% - var(--space-3)); min-inline-size: min(100%, 260px); }
.filter-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-picker > * { flex: 1 1 160px; min-inline-size: 0; }

/* ── A revision chain's versions (the document page, T43) ─────────────────────── */
.versions { margin: 0; padding: 0; list-style: none; }
.version {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--line);
  border-inline-start: 3px solid transparent;
}
.version:last-child { border-block-end: 0; }
.version.is-current { border-inline-start-color: var(--success); }
.version.is-on-screen { background: var(--desk); }
.version-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin: 0; }
.version-code { font-weight: 700; color: var(--main); }
.version-number { font-weight: 600; overflow-wrap: anywhere; }
.version-marks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; }
.version-meta { margin: var(--space-1) 0 0; font-size: 0.82rem; color: var(--text-muted); }
.version-superseded { color: var(--text-muted); }

/* ── A record's history (the client page) ───────────────────────────────────── */
.history { margin: 0; padding: 0; list-style: none; }
.history-item { padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.history-item:last-child { border-block-end: 0; }
.history-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.history-change { margin-block-start: var(--space-1); font-size: 0.88rem; }
.shared-registration-list { margin-block: var(--space-2); padding-inline-start: var(--space-5); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-inline-start-width: 4px;
  border-radius: var(--radius-control);
  background: var(--paper);
}
.alert > .icon { margin-block-start: 3px; }
.alert-body { flex: 1; }
.password-company { margin: var(--space-2) 0 0; }
.alert-title { display: block; }
.alert-success { border-color: var(--success-line); background: var(--success-wash); color: var(--success); }
.alert-danger { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger); }
.alert-warning { border-color: var(--warning-line); background: var(--warning-wash); color: var(--warning); }
.alert-info { border-color: var(--main-line); background: var(--main-wash); color: var(--main); }
/* A void reason keeps the lines it was typed with (its <bdi> keeps its own direction). */
.void-reason { white-space: pre-line; }
.alert-dismiss {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.alert-dismiss:hover { background: rgb(var(--main-rgb) / 0.08); }

/* ── Dialog ───────────────────────────────────────────────────────────────── */
.dialog {
  inline-size: min(100% - 2 * var(--space-4), 480px);
  margin: auto;
  padding: 0;
  border: 0;
  border-block-start: var(--band) solid var(--main);
  border-radius: var(--radius-sheet);
  background: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-raised);
}
.dialog::backdrop { background: rgb(var(--main-rgb) / 0.6); }
.dialog[open] { animation: dialog-in 0.18s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } }
.dialog-body { padding: var(--space-5) var(--space-5) var(--space-4); }
.dialog-body h2 { margin-block-end: var(--space-3); }
.dialog-body p + p, .dialog-body p + .facts, .dialog-body .facts + p { margin-block-start: var(--space-3); }
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--desk);
  border-end-start-radius: var(--radius-sheet);
  border-end-end-radius: var(--radius-sheet);
}

/* ── Facts (label and value lists) ───────────────────────────────────────── */
.facts { display: grid; gap: var(--space-4); }
.facts-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.facts dt { font-size: 0.82rem; color: var(--text-muted); font-weight: 400; }
.facts dd { font-weight: 600; color: var(--main); overflow-wrap: anywhere; }
.facts dd .en, .facts dd .cell-sub { font-weight: 400; }
.facts-line { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text); }
.facts-line .icon { color: var(--text-muted); }

/* ── Money summary ────────────────────────────────────────────────────────── */
.money {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 2px solid var(--accent);
  border-radius: var(--radius-control);
}
.money-row { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--text-muted); }
.money-row strong { color: var(--text); }
.money-total {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
  color: var(--main);
  font-weight: 600;
}
.money-total strong { font-size: 1.3rem; color: var(--main); }
.money-aside { max-inline-size: 420px; margin-inline-start: auto; }
/* Amounts outside the total (optional services): dashed, so they never read as part of it. */
.money-outside { border-style: dashed; }
.money-outside-title { font-weight: 600; color: var(--accent-ink); font-size: 0.9rem; }

/* ── Dashboard figures ────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}
.stat {
  padding: var(--space-4) var(--space-5);
  border-inline-start: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s;
}
a.stat:hover { background: var(--desk); color: var(--text); }
.stat:first-child { border-inline-start: 0; }
.stat-value {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--main);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.9rem; color: var(--text); }
.stat-label .en { font-size: 0.75rem; }
.stat-draft .stat-value { color: var(--warning); }
.stat-finalized .stat-value { color: var(--success); }
.stat-voided .stat-value { color: var(--danger); }

/* ── The dashboard's work lists: my drafts, recently finalized ────────────── */
.queue { margin: 0; padding: 0; list-style: none; }
.queue-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--line);
}
.queue-item:last-child { border-block-end: 0; }
.queue-main { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.queue-main .row-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta { font-size: 0.82rem; color: var(--text-muted); }
.queue-item .btn { flex: none; }

/* ── Template tiles and cards ─────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}
.tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background-color 0.15s;
}
.tile:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.04); color: var(--text); }
.tile-mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-control);
  background: var(--main-wash);
  color: var(--main);
}
.tile-mark .icon { inline-size: 22px; block-size: 22px; }
.tile-title { font-weight: 600; color: var(--main); line-height: 1.4; }
.tile-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.template-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-5);
}
.template-card { display: flex; flex-direction: column; }
.template-card .sheet-body { flex: 1; }
.template-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}
.template-card-head h2 { font-size: 1.15rem; line-height: 1.45; }
.template-card-head .badge { margin-inline-start: auto; }
.template-card .tile-mark { inline-size: 48px; block-size: 48px; }
.template-card .tile-mark .icon { inline-size: 26px; block-size: 26px; }
.highlights {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.highlights li { display: flex; gap: var(--space-2); }
.highlights .icon { color: var(--accent); margin-block-start: 3px; inline-size: 1.05em; block-size: 1.05em; }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.empty-mark {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--space-2);
  border-radius: 50%;
  background: var(--main-wash);
  color: var(--main);
}
.empty-mark .icon { inline-size: 26px; block-size: 26px; }
.empty p { max-inline-size: 52ch; color: var(--text-muted); }
.empty .btn { margin-block-start: var(--space-3); }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--main-wash) 25%, #f7f8fb 50%, var(--main-wash) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-start: 1px solid var(--line);
}
.pagination-status { font-size: 0.88rem; color: var(--text-muted); }

/* ── Document preview ─────────────────────────────────────────────────────── */
/* The summary sits above the preview, so the A4 page (794 px) shows whole; side by side only
   where both fit. */
.preview-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
.preview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1680px) {
  .preview-layout { grid-template-columns: 340px minmax(0, 1fr); }
  .preview-summary { grid-template-columns: minmax(0, 1fr); }
}
.preview-frame-wrap { padding: var(--space-5); background: #5d6472; border-end-start-radius: var(--radius-sheet); border-end-end-radius: var(--radius-sheet); }
.preview-frame {
  display: block;
  inline-size: 100%;
  max-inline-size: 820px;
  block-size: 78vh;
  min-block-size: 560px;
  margin-inline: auto;
  border: 0;
  background: var(--paper);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.state-box { text-align: center; }
.state-box .empty-mark { margin-inline: auto; }
.state-box > .btn-danger { margin-block-start: var(--space-2); }
.state-box .dialog { text-align: start; }
.state-box > p { font-size: 0.88rem; color: var(--text-muted); margin-block: var(--space-2) var(--space-4); }

/* ── Line items (document form) ───────────────────────────────────────────── */
.line-items td { padding: var(--space-2); }
.line-items th { padding-inline: var(--space-2); }
.line-items .col-description { inline-size: 50%; }
.line-items .col-qty { inline-size: 12%; }
.line-items .col-price { inline-size: 18%; }
.line-items .col-total { inline-size: 16%; text-align: end; }
.line-items .item-total { font-weight: 600; color: var(--main); }
.line-items-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

/* ── The offer form: choices, checklists, repeated rows ────────────────────── */
.choice-row, .choice-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); }
.choice {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--main);
  font-weight: 600;
  text-decoration: none;
}
.choice .en { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.choice:hover { background: var(--main-wash); }
.choice.is-current { background: var(--main); border-color: var(--main); color: #fff; }
.choice.is-current .en { color: var(--main-line); }
.offer-start { margin-block-end: var(--space-5); }
.field-static { min-block-size: 42px; padding-block: var(--space-2); font-weight: 600; color: var(--main); }
.error-summary { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.error-summary a { color: inherit; font-weight: 600; }

.picks-list {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  background: var(--desk);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.picks > .btn, .picks > .field-hint { margin-block-start: var(--space-3); }
.picks > .field-hint { display: block; }
.pick { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--desk); }
.pick:hover, .pick:focus-within { background: var(--paper); }
.pick:has(.pick-box:checked) { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .pick:has(.pick-box:checked) { box-shadow: inset -3px 0 0 var(--accent); }
.pick-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.pick-box { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 4px; accent-color: var(--main); }
.pick-text { flex: 1; min-inline-size: 0; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
div.pick-text { cursor: default; }
.pick-title { font-weight: 600; color: var(--main); }
.pick-head .input-phase { flex: none; inline-size: auto; min-block-size: 32px; padding-block: 2px; font-size: 0.85rem; }
.pick-head textarea { flex: 1; }
/* An unticked item is one line: its phase and its edit box appear once it is ticked (an edit
   box already holding text stays, so nothing typed is hidden). */
.pick[data-pick]:not(:has(.pick-box:checked)) .input-phase { visibility: hidden; }
.pick[data-pick]:not(:has(.pick-box:checked)):not(.is-edited) .pick-edit { display: none; }
.pick-own-label { flex: 1; font-weight: 600; color: var(--accent-ink); }
.pick.is-unavailable .pick-text { color: var(--text-muted); cursor: not-allowed; }
.pick-edit { margin-block-start: var(--space-2); margin-inline-start: calc(18px + var(--space-3)); }
.pick-edit summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}
.pick-edit summary .icon { inline-size: 14px; block-size: 14px; }
.pick-edit[open] summary { margin-block-end: var(--space-2); }
.pick-edit .field-hint { display: block; margin-block-start: 4px; }
.pick-fields { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); }
.pick-own .pick-fields { margin-inline-start: 0; }
.badge-edited { display: none; background: var(--accent-wash); color: var(--accent-ink); }
.is-edited .badge-edited { display: inline-flex; }
.badge-muted { background: var(--desk); color: var(--text-muted); }
.badge-warning { background: var(--warning-wash); color: var(--warning); }
.badge-edited::before, .badge-muted::before { display: none; }
.clause-figure {
  display: inline-block;
  inline-size: 7.5em;
  min-block-size: 30px;
  margin-inline: 4px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.clause-unit, .clause-words { font-size: 0.85rem; color: var(--accent-ink); }

.phase-titles { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); }
.row-table td { padding: var(--space-2); }
.row-table th { padding-inline: var(--space-2); }
.row-table .col-unit { inline-size: 16%; }
.row-table .col-price, .row-table .col-share, .row-table .col-days { inline-size: 16%; }
.row-table .col-total { inline-size: 18%; text-align: end; }
.row-table tfoot th, .row-table tfoot td { padding: var(--space-2); border-block-start: 1px solid var(--line-strong); font-weight: 600; color: var(--main); }
.schedule-presets { margin-block-end: var(--space-3); }

/* An optional service (T27): a card of its own, marked as outside the offer's total. */
.service-cards { display: grid; gap: var(--space-4); }
.service-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than the screen, whatever it holds */
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sheet);
}
.service-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.service-card-head .badge { white-space: normal; }
.service-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-3); }
.service-fields .service-name { grid-column: 1 / -1; }
.service-duration { display: flex; gap: var(--space-2); }
.service-duration .input-number { inline-size: 5.5em; flex: none; }
.service-duration select { flex: 1 1 auto; min-inline-size: 0; }
.service-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.service-pick select { flex: 1 1 12em; min-inline-size: 0; }
[data-behavior~="rows"] > [data-add-row] { margin-block-start: var(--space-3); }

/* ── The library screens (T17g) ───────────────────────────────────────────── */
.library-tabs { margin-block-end: var(--space-4); }
.library-tabs .choice { display: inline-flex; align-items: center; gap: var(--space-2); }
.library-badges { margin-block-start: var(--space-1); gap: var(--space-1); }
.library-templates { margin-block: var(--space-2); padding-inline-start: calc(18px + var(--space-3)); }
.library-uses { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }
.library-parameters .input { min-inline-size: 90px; }
.library-parameters select.input { min-inline-size: 170px; }
/* An English line under its Arabic one lines up with it, on the right. */
.library-table .cell-sub { text-align: end; }
.input-short { inline-size: auto; min-inline-size: 120px; }
/* The up/down buttons: two small forms side by side, one per move. */
.col-order { inline-size: 1%; white-space: nowrap; }
.inline-form { display: inline; }
.package-kind { margin-block-start: var(--space-4); }
.package-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
}
.package-row:hover, .package-row:focus-within { background: var(--desk); }
.package-row:has(.pick-box:checked) { box-shadow: inset -3px 0 0 var(--accent); }
[dir="ltr"] .package-row:has(.pick-box:checked) { box-shadow: inset 3px 0 0 var(--accent); }
.package-row.is-unavailable .pick-text { color: var(--text-muted); }
/* As on the offer form: an unticked item is one line; its phase and order appear once ticked. */
.package-row:not(:has(.pick-box:checked)) .package-row-fields { display: none; }
.package-row-fields { display: flex; flex: none; gap: var(--space-2); }
.package-row-fields .input { min-block-size: 32px; padding-block: 2px; font-size: 0.85rem; inline-size: auto; }
.package-row-fields .input-order { inline-size: 88px; }
.history { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
/* Scope items and their deliverables (T63): what a row is linked to, in a line of its own. */
/* A deliverable's scope items on the offer form (T65): ticking one ticks it. */
.link-with { margin: var(--space-1) 0 0; font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.link-with .link-off-form { opacity: 0.7; }
.pick.is-brought .pick-text { font-weight: 600; }
.link-note { margin: var(--space-1) 0 0; font-size: 0.85rem; color: var(--warning); overflow-wrap: anywhere; }
.phase-counts { font-variant-numeric: tabular-nums; }
.link-names, .link-also { display: block; margin-block-start: var(--space-1); font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.link-names-label { font-weight: 600; }
/* A long title is cut to one short line in the list; the whole of it shows on hover. */
.link-name { display: inline-block; max-inline-size: min(28ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.links-heading { margin-block: var(--space-4) var(--space-2); font-size: 0.95rem; color: var(--main); }
.links-heading .sheet-count { margin-inline-start: var(--space-2); }
/* A long list scrolls inside the form, so the save button stays near. */
.link-list { max-block-size: 26rem; overflow-y: auto; overscroll-behavior: contain; }
.link-filter { margin-block-end: var(--space-2); }
.new-deliverable { margin-block-end: var(--space-3); }
.history-entry { padding-block-end: var(--space-3); border-block-end: 1px solid var(--line); }
.history-entry:last-child { border-block-end: 0; padding-block-end: 0; }
.history-head { margin: 0; }
.history-changes { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; }
.history-changes dt { font-size: 0.85rem; font-weight: 600; color: var(--main); }
.history-changes dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); overflow-wrap: anywhere; }
.history-before { color: var(--text-muted); text-decoration: line-through; }
.history-arrow { color: var(--accent-ink); }

/* ── Sign-in ──────────────────────────────────────────────────────────────── */
.signin {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: var(--space-6) var(--space-4);
}
.signin-sheet {
  position: relative;
  inline-size: 100%;
  max-inline-size: 440px;
  padding: var(--space-7) var(--space-6) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: 0 10px 40px rgb(var(--main-rgb) / 0.1);
  overflow: hidden;
}
/* The letterhead: the main colour's band with the accent's hairline, cut on a slant at one corner. */
.signin-sheet::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 12px;
  background: var(--main);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 18% 0);
}
[dir="ltr"] .signin-sheet::before { clip-path: polygon(0 0, 100% 0, 82% 0, 78% 100%, 0 100%); }
.signin-sheet::after {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to left, var(--accent) 0 78%, transparent 78%);
}
[dir="ltr"] .signin-sheet::after { background: linear-gradient(to right, var(--accent) 0 78%, transparent 78%); }
.signin-brand { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.signin-brand h1 { font-size: 1.3rem; }
.signin-rule { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; margin-block: var(--space-5) var(--space-5); color: var(--text-muted); font-size: 0.85rem; }
.signin-rule::before, .signin-rule::after { content: ""; flex: 1; block-size: 1px; background: var(--accent); }
.signin-form { display: grid; gap: var(--space-4); }
.signin-form .btn { margin-block-start: var(--space-2); }

/* ── Error page ───────────────────────────────────────────────────────────── */
.error-page { max-inline-size: 640px; margin: var(--space-6) auto; text-align: center; }
.error-page .sheet-body { padding: var(--space-7) var(--space-6); }
.error-code {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.error-page h1 { margin-block: var(--space-3); font-size: 1.5rem; }
.error-page p { color: var(--text-muted); }
.error-detail { margin-block-start: var(--space-3); font-size: 0.9rem; }
.error-page .btn { margin-block-start: var(--space-5); }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky;
    z-index: 10;
    block-size: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand account" "switcher switcher" "nav nav";
    gap: 0;
    padding: calc(var(--band) + var(--space-3)) var(--space-4) 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--main);
    overflow: visible;
  }
  .rail::before { block-size: 10px; clip-path: none; }
  .brand {
    grid-area: brand;
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    text-align: start;
  }
  .brand-logo { inline-size: 52px; }
  .brand-name { font-size: 0.92rem; }
  .brand-name .en { display: none; }
  .account { grid-area: account; margin: 0; padding: 0; border: 0; }
  .account-who { display: none; }
  .nav {
    grid-area: nav;
    flex-direction: row;
    gap: var(--space-1);
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-link { flex: none; padding: 6px var(--space-3); }
  .nav-link .en { display: none; }
  .page { padding: var(--space-5) var(--space-5) var(--space-6); }
  .company-band { padding: var(--space-2) var(--space-5); }
  .company-band + .page { padding-block-start: var(--space-5); }
  .switcher {
    grid-area: switcher;
    flex-direction: row;
    padding-block: 0 var(--space-2);
    border: 0;
  }
  .switcher-title { display: none; }
  /* The companies side by side, equal; each still its logo over its name. */
  .switcher > form { flex: 1 1 0; min-inline-size: 0; display: flex; }
  .switcher-choice { gap: var(--space-1); padding: var(--space-2) var(--space-5); }
  .switcher-logo { inline-size: 56px; block-size: 40px; padding: 4px; }
  .switcher-monogram { font-size: 0.85rem; }
  .switcher-name .en { display: none; }
  .site-footer { padding-inline: var(--space-5); }
}

@media (max-width: 640px) {
  html { font-size: 14.5px; }
  h1 { font-size: 1.6rem; }
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .page-header { align-items: stretch; }
  .page-actions, .page-actions .btn { inline-size: 100%; }
  .sheet-body, .tiles { padding: var(--space-4); }
  .sheet-header { padding: var(--space-3) var(--space-4); }
  .queue-item { flex-wrap: wrap; padding-inline: var(--space-4); }
  .filters { padding: var(--space-4); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .stat:nth-child(-n + 2) { border-block-start: 0; }
  .stat:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .stat-value { font-size: 1.7rem; }
  /* A table keeps readable columns and scrolls sideways rather than squeezing them. */
  .table-scroll .table { inline-size: max(100%, 640px); }
  .signin-sheet { padding-inline: var(--space-5); }
  /* A ticked package item's phase and order move under its text. */
  .package-row { flex-wrap: wrap; }
  .package-row-fields { inline-size: 100%; padding-inline-start: calc(18px + var(--space-3)); }
  .preview-frame-wrap { padding: var(--space-2); }
  .preview-frame { min-block-size: 480px; }
}

/* ── The People pages (T60) ─────────────────────────────────────────────────── */
/* A person's companies: a box to grant each, a choice of home; the boxes centred under them. */
.access-table td:not(.cell-name), .access-table th:not(:first-child) { text-align: center; inline-size: 7rem; }
.access-table .check { display: inline-flex; justify-content: center; padding: var(--space-1); }
/* A generated password, shown once: large, spaced, in Latin figures, easy to read out. */
.password-shown {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4);
  background: var(--desk);
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  text-align: center;
}
.password-shown code {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print: the page's content on plain paper, without the screen's chrome ─── */
@media print {
  @page { margin: 16mm 14mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .app { display: block; }
  .app::before, .rail, .company-band, .site-footer, .page-actions, .filters, .pagination, .alert-dismiss,
  .col-actions, .skip-link, .btn, .dialog, .preview-frame-wrap { display: none !important; }
  .page { padding: 0; max-inline-size: none; }
  .sheet, .stats { border-color: #bbb; box-shadow: none; break-inside: avoid; }
  .table th { background: none; color: #000; }
  .table tbody tr:hover { background: none; }
  a { color: inherit; text-decoration: none; }
  .preview-layout { display: block; }
}