/* AryaTech Portal — shell and base components. Brand v2: every colour, radius, space and type style comes from
   ../brand/brand-tokens.css (docs/BRAND_V2.md). Fonts are hosted locally (CSP font-src 'self'), never from a CDN. */
/* brand-tokens.css is linked just before this file by templates/portal/_head.html (and public/offline.html). */

/* Every face carries a unicode-range, so each character has exactly one font whatever the order of the family:
   Montserrat draws Latin letters, digits and Latin punctuation; Alexandria (headings) and Noto Kufi Arabic (text) draw
   Arabic and Urdu, plus the space between Arabic words on right-to-left pages. A face is downloaded only when a page
   really uses one of its characters. */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400.e7198b2dcb57.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500.f96e8aab37e8.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600.9e606da1cbeb.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700.1c0792ac34ef.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/noto-kufi-arabic-400.20fb38d522c0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/noto-kufi-arabic-700.bd18b7a9da0a.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-arabic-500.68f6691d1e43.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-arabic-600.ca6a94b049eb.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-arabic-700.281446647726.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* IBM Plex Mono: the approved exception, for sensitive literal values only (.mono). No preload: it is fetched only by a
   page that shows such a value. */
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400.79936b18df9f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-600.5a2ce7798732.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arya Dots 2: the brand's own LED font. Defined for a future single touch; no rule uses it today (the StatTile number
   was tried and removed: too faint to read), so the file is never downloaded. Digits and Latin only. */
@font-face { font-family: "Arya Dots 2"; src: url("../fonts/arya-dots-2-400.69bd14f5ea45.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E; }

:root {
  --t: 180ms; --top-h: 56px; --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--t-body); min-width: 320px; }
button, input, select, textarea { font-family: var(--font-body); }
img, svg { max-width: 100%; }
input[type="file"] { max-width: 100%; min-width: 0; }
a { color: var(--mint-ink); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 var(--space-2); }
h1 { font: var(--t-h1); } h2 { font: var(--t-h2); } h3 { font: 600 18px/28px var(--font-heading); }
strong, b { font-weight: 700; }
p { margin: 0 0 12px; }
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }
/* Digits are Latin everywhere and drawn with Montserrat (unicode-range, whatever the family order). Aligned columns:
   tabular figures. */
.num, .money-amt, .literal, .table, .cal, .matrix, .report-table, .money, .price-lines, .kv-list, input { font-variant-numeric: tabular-nums lining-nums; }
/* The company number 22200046: Montserrat bold, wide spacing (brand rule). */
.brand-phone { font-family: var(--font-latin); font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
bdi.num { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.muted { color: var(--ink-muted); }
.small { font-size: 15px; line-height: 22px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--navy); color: var(--on-navy); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { top: 8px; }

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

.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 20px; height: 20px; }
[dir="rtl"] .flip { transform: scaleX(-1); }

/* ── Shell ───────────────────────────────────────────────────────── */
.demo-strip { background: var(--mint-soft); color: var(--navy); font-size: 13px; text-align: center; padding: 2px 16px; }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 4px;
  padding: 0 8px; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.topbar .slot { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; }
.topbar .title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* Phone: the title may take two short lines (Alexandria is wide and the client bar has four buttons). */
.topbar .title h1 { font: 600 15px/20px var(--font-heading); margin: 0; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
@media (min-width: 480px) { .topbar .title h1 { display: block; font: 700 18px/28px var(--font-heading); white-space: nowrap; text-overflow: ellipsis; } }
.topbar .logo { height: 32px; width: auto; display: block; }
.icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
  background: transparent; border: 0; color: var(--navy); cursor: pointer; text-decoration: none; position: relative; }
.icon-btn:hover { background: var(--mint-soft); }
.badge-dot { position: absolute; top: 10px; inset-inline-end: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }

main { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + var(--safe-b) + 24px); }
.portal-manage main { max-width: 1200px; }
main.no-nav { padding-bottom: 32px; }

.bottomnav { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; background: var(--surface-raised); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b); }
.bottomnav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 760px; }
.bottomnav li { flex: 1; min-width: 0; }
.bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); padding: 4px 0; color: var(--ink-muted); text-decoration: none; font: 500 12px/15px var(--font-heading); text-align: center; }
@media (max-width: 359px) { .bottomnav a { font-size: 11px; } }
/* Five sections share 320 px: a long label («هذا الأسبوع») takes two lines instead of being cut. */
.bottomnav a span { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bottomnav a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; inset-inline: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--mint); }

/* Drawer menu */
.backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.drawer { position: fixed; z-index: 41; top: 0; bottom: 0; inset-inline-end: 0; width: min(320px, 86vw); background: var(--surface-raised);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; padding: 8px 16px calc(16px + var(--safe-b));
  overflow-y: auto; transition: transform var(--t) ease; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.drawer .who { padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.drawer .who strong { display: block; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list a, .menu-list button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px;
  color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; border-radius: var(--radius-md); text-align: start; }
.menu-list a:hover, .menu-list button:hover { background: var(--mint-soft); }
.lang-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.lang-form button { min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-raised); font: var(--t-label);
  color: var(--navy); cursor: pointer; }
.lang-form button[aria-pressed="true"] { border-color: var(--navy); background: var(--mint-soft); font-weight: 600; }

/* ── Components ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; font: var(--t-label); cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--t) ease, opacity var(--t) ease; }
/* Primary: mint with navy text (on-mint), never white. Secondary: navy with white text. */
.btn-primary { background: var(--mint); color: var(--on-mint); }
.btn-primary:hover { background: var(--mint-hover); }
.btn-secondary { background: var(--navy); color: var(--on-navy); }
.btn-secondary:hover { background: var(--navy-hover); }
.btn-ghost { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--mint-soft); }
.btn-danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.btn .spinner { display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.actions form { margin: 0; }

.field { margin-bottom: 16px; }
.field label, .field .label { display: block; font: var(--t-label); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 8px 14px; font: inherit; color: var(--ink); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.field textarea { min-height: 96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field .help { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.field input[dir="ltr"] { text-align: left; }
.check { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.check input { width: 22px; height: 22px; }
.pin-input { letter-spacing: .5em; font-size: 24px !important; text-align: center !important; max-width: 220px; }

.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3);
  box-shadow: var(--shadow-card); }
.card > :last-child { margin-bottom: 0; }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--t) ease; }
a.card:hover { border-color: var(--mint); }
.card-title { display: flex; align-items: center; gap: 8px; font: 600 17px/28px var(--font-heading); margin-bottom: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.fact { background: var(--surface); border-radius: var(--radius-md); padding: 10px 12px; }
.fact .k { font-size: 13px; color: var(--ink-muted); }
.fact .v { font-weight: 600; }

.list { list-style: none; margin: 0 0 16px; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.list > li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
a.row:hover { background: var(--mint-soft); }
.row .main { flex: 1; min-width: 0; }
.row .main strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.row .sub { display: block; font-size: 15px; color: var(--ink-muted); overflow-wrap: anywhere; }
.row .end { flex: 0 1 auto; min-width: 0; max-width: 60%; flex-wrap: wrap; justify-content: flex-end; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 15px; }
.row.highlight { background: var(--mint-soft); }

/* Badge: radius-sm (brand). A long badge wraps inside its box instead of widening the page. */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 13px; line-height: 20px;
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--navy); max-width: 100%; overflow-wrap: anywhere; }
.chip.ok { color: var(--mint-ink); border-color: var(--mint-line); background: var(--mint-soft); }
.chip.warn { color: var(--warning); border-color: var(--warning-line); background: var(--warning-soft); }
.chip.err { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
/* Journey 8: the «demo» mark next to a demo record's name (management portal). Small, never wraps the name. */
.chip.demo { padding: 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); border: 1px dashed var(--border-strong); background: var(--surface);
  vertical-align: middle; margin-inline-start: 6px; font-weight: 400; }
.topbar h1 .chip.demo { font-size: 13px; }
.demo-act { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-act .switch-line { align-items: flex-start; }
.empty-start { color: var(--ink); }
.empty-start .actions { justify-content: center; }
.empty-start .actions form { margin: 0; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid; }
.alert-error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.alert-info { background: var(--mint-soft); border-color: var(--mint-line); color: var(--navy); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.alert-success { background: var(--mint-soft); border-color: var(--mint-line); color: var(--mint-ink); }

.state { text-align: center; padding: 32px 16px; color: var(--ink-muted); background: var(--surface-raised); border: 1px dashed var(--line); border-radius: var(--radius-lg); margin-bottom: 16px; }
.state .icon { width: 40px; height: 40px; color: var(--mint-ink); margin-bottom: 8px; }
.state h2 { color: var(--navy); font-size: 18px; }
.skeleton { height: 16px; border-radius: var(--radius-sm); background: var(--line); animation: pulse 1.2s ease-in-out infinite; margin: 8px 0; }
@keyframes pulse { 50% { opacity: .5; } }

.offline { position: fixed; z-index: 35; top: calc(var(--top-h) + 4px); inset-inline: 16px; }
.toast { position: fixed; z-index: 50; inset-inline: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); margin: 0 auto; max-width: 420px;
  background: var(--navy); color: var(--on-navy); border-radius: var(--radius-md); padding: 12px 16px; text-align: center; }

.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row .value { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; padding: 8px 12px; background: var(--surface); border-radius: var(--radius-md); }
.secret-value { font-size: 22px; letter-spacing: .04em; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0 8px; }
.section-title h2 { margin: 0; font-size: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-raised);
  color: var(--navy); text-decoration: none; font: var(--t-label); }
.tabs a[aria-current="page"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; }
.filters .field { margin-bottom: 8px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0; }
.kv { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.qr svg { width: 200px; height: 200px; background: var(--surface-raised); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.codes li { background: var(--surface); padding: 8px; border-radius: var(--radius-sm); text-align: center; font-weight: 600; }

/* Auth pages */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 40px; }
.auth { padding-top: 32px; }
.auth .panel .brand { margin: -4px -4px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.auth .panel .brand img { width: 240px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.home-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 4px auto 16px; }
.auth .panel { width: 100%; max-width: 420px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6) 20px;
  box-shadow: var(--shadow-card); }
.auth .panel h1 { font: 700 22px/32px var(--font-heading); }
.auth-back { width: 100%; max-width: 420px; margin-bottom: 8px; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none; margin-bottom: 10px; background: var(--surface-raised); }
.choice:hover { border-color: var(--mint); background: var(--mint-soft); }
/* IconCircle: a line icon in a mint circle. The guide draws it white; white on mint is 2.3:1, so the icon is navy (6:1). */
.choice .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--mint); color: var(--on-mint); }
.choice strong { font: 600 17px/26px var(--font-heading); }
.choice strong { display: block; }
.choice .sub { display: block; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.auth-foot { width: 100%; max-width: 420px; margin-top: 16px; }

.contact-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

/* ── Journey 1: client pages ─────────────────────────────────────── */
.portal-client .row .sub, .portal-client .small { font-size: 15px; }
.hello { font: 700 20px/30px var(--font-heading); color: var(--navy); margin: 0 0 12px; }
.eyebrow { font-size: 15px; color: var(--ink-muted); margin: 8px 0 0; }
.stage-now { font: var(--t-h2); font-weight: 700; margin: 0 0 4px; color: var(--navy); }

/* Stage path: dots and a line on one row; done = mint, coming = grey, no coloured line after the current stage.
   Up to 7 stages share one row at 320 px (dots 24 px, connectors stretch between them); more stages are split by the
   template into rows (portal/client/_track.html), and a row never ends with a dangling connector. */
.track { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; padding: 0; margin: 14px 0 4px; min-width: 0; }
.track + .track { margin-top: 10px; }
.track li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.track li.last { flex: 0 0 auto; }
.track .dot { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--surface-raised); display: inline-flex;
  align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--ink-muted); position: relative; }
.track .dot::after { content: ""; position: absolute; inset: -10px -3px; }     /* 44 px tall touch target */
.track .dot .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.track .st-done .dot { background: var(--mint); border-color: var(--mint); color: var(--navy); }
.track .st-current .dot { border-color: var(--navy); color: var(--navy); box-shadow: 0 0 0 4px var(--mint-soft); }
.track .st-current .dot .icon { fill: var(--navy); }
.track .ln { flex: 1 1 auto; min-width: 6px; height: 3px; border-radius: 2px; background: var(--line); margin: 0 3px; }
.track .st-done .ln { background: var(--mint); }
.track .st-current .ln, .track .st-upcoming .ln { background: var(--line); }
@media (min-width: 600px) { .track .dot { width: 30px; height: 30px; } .track .dot .icon { width: 16px; height: 16px; } }
.track-note:empty { display: none; }
.where { margin: 14px 0 0; display: grid; gap: 10px; }
.where > div { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 4px 12px; align-items: start; }
.where dt { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 15px; }
.where dd { margin: 0; }
.mini-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; min-height: 48px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; }
.mini-row span { flex: 1; min-width: 0; }
.mini-row:hover { background: var(--mint-soft); }
.facts.big { margin: 0 0 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }   /* 140: «12,345.500 KD» fits a tile on a 375px phone (two tiles a row) */
.facts.big .v .money-amt .cur { font-size: .7em; }
/* StatTile: the big figures of the client's project (number-md; digits in Montserrat). */
.facts.big .fact { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); }
.facts.big .v { font: var(--t-number-md); font-family: var(--font-body); color: var(--navy); }   /* body family (Arabic words of the tile stay in Kufi) */
.list.big-rows .row { min-height: 60px; }
.all-stages summary, details > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--mint-ink); }
.stage-list { list-style: none; padding: 0; margin: 8px 0 12px; }
.stage-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.stage-list .nm { flex: 1; }
.stage-list .stt { font-size: 15px; color: var(--ink-muted); }
.stage-list .st-done .icon { color: var(--mint-ink); }
.stage-list .st-current { font-weight: 600; }
.stage-list .st-current .icon { color: var(--navy); fill: var(--navy); }
.stage-list .st-upcoming { color: var(--ink-muted); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0 0 16px; position: relative; }
.timeline > li { position: relative; padding: 0 0 16px; padding-inline-start: 36px; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.timeline > li.st-done::before { background: var(--mint); }
.timeline > li:last-child::before { display: none; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; }
.tl-ic { position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--surface-raised); border: 2px solid var(--line); color: var(--ink-muted); }
.st-done > .tl-head .tl-ic, .st-done .tl-ic { background: var(--mint); border-color: var(--mint); color: var(--navy); }
.st-current > .tl-head .tl-ic, .st-current .tl-ic { border-color: var(--navy); color: var(--navy); }
.stage-edit .tl-ic, .stage-head .tl-ic { position: static; }
.tl-visits { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.tl-visits > li { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.visit-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink); text-decoration: none; min-height: 56px; }
.visit-row .main { flex: 1; min-width: 0; }
.visit-row strong { display: block; }
.visit-row .sub { display: block; color: var(--ink-muted); font-size: 15px; overflow-wrap: anywhere; }
.visit-row:hover { background: var(--mint-soft); }
.thumbs { display: flex; gap: 6px; padding: 0 14px 12px; flex-wrap: wrap; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); display: block; }

/* My devices: compact rows on the phone (one open at a time), a light table on the computer */
.dev-search { display: flex; gap: 8px; margin-bottom: 10px; }
.search-box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.search-box .icon { position: absolute; inset-inline-start: 12px; color: var(--ink-muted); pointer-events: none; }
.search-box input { width: 100%; min-height: 48px; padding: 8px 12px; padding-inline-start: 44px; font: inherit; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); }
.search-box input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.tabs a .num { font-weight: 600; margin-inline-start: 4px; }
.devlist { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.dev-head { display: none; }
.dev + .dev { border-top: 1px solid var(--line); }
.dev > summary { list-style: none; display: grid; grid-template-columns: 40px 1fr 20px; grid-template-areas: "ic name chev" "ic model chev";
  align-items: center; gap: 0 10px; padding: 12px 14px; cursor: pointer; min-height: 64px; color: var(--ink); font-weight: 400; }
.dev > summary::-webkit-details-marker { display: none; }
.dev > summary:hover { background: var(--mint-soft); }
.dev-ic { grid-area: ic; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--on-mint); display: inline-flex; align-items: center; justify-content: center; }
.dev-name { grid-area: name; min-width: 0; }
.dev-name strong { font-weight: 600; }
.dev-loc { color: var(--ink-muted); }
.dev-loc::before { content: " · "; }
.dev-model { grid-area: model; color: var(--ink-muted); font-size: 15px; overflow-wrap: anywhere; }
.dev-sys, .dev-place { display: none; }
.dev .chev { grid-area: chev; color: var(--ink-muted); transition: transform var(--t) ease; }
.dev[open] .chev { transform: rotate(180deg); }
.dev[open] > summary { background: var(--mint-soft); }
.dev-body { padding: 8px 14px 16px; }
.kv-list { margin: 0; display: grid; gap: 8px; }
.kv-list > div { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; gap: 2px 12px; align-items: center; }
.kv-list dt { color: var(--ink-muted); font-size: 15px; }
.kv-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv-list.compact > div { grid-template-columns: fit-content(52%) minmax(0, 1fr); }
.kv-list .copy-row .value { padding: 4px 10px; font-weight: 600; font-size: 15px; line-height: 24px; overflow-wrap: break-word; word-break: normal; }
.kv-list .copy-row { gap: 6px; }
.kv-list .copy-row .btn-sm { width: 48px; padding: 0; flex: none; }
.btn-sm { min-height: 48px; padding: 0 12px; font-size: 15px; }
.cred { margin-top: 12px; }
.cred .kv-list { margin-top: 8px; }
.cred-edit { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 4px; }
.cred-edit form { margin-top: 8px; }
.dev-photo { margin: 12px 0 0; }
.dev-photo img { max-width: 260px; width: 100%; border-radius: var(--radius-md); display: block; }
.mt-sm { margin-top: 8px; }
.money { display: grid; gap: 6px; margin: 8px 0; }
.money > div { display: flex; justify-content: space-between; gap: 12px; }
.money dt { color: var(--ink-muted); }
.money dd { margin: 0; font-weight: 600; }
.pay-list { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--line); }
.pay-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 15px; }
.pay-list li span:first-of-type { flex: 1; }
.pay-list .icon { color: var(--mint-ink); }
.preview-strip { display: flex; gap: 10px; align-items: flex-start; background: var(--warning-soft); border: 1px dashed var(--warning); color: var(--navy);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 16px; }
.checks { border: 0; padding: 0; margin: 0 0 12px; }
.checks legend { font: var(--t-label); margin-bottom: 4px; }
.member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 12px; }
.member-actions details { flex-basis: 100%; }
.member-actions form { margin: 0; }

/* ── Journey 1: office pages ─────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .grow { flex: 1 1 240px; }
.form-narrow { max-width: 640px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.seg { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.seg legend { font: var(--t-label); width: 100%; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form select { min-height: 48px; padding: 8px 12px; font: inherit; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); max-width: 100%; }
.inline-form > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { flex: 1 1 140px; min-width: 0; min-height: 48px; padding: 8px 14px; font: inherit;
  color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.plain { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.plain li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stage-edit { list-style: none; padding: 0; margin: 0 0 16px; }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stage-edit .st-skipped { opacity: .7; }
.stage-form { margin-top: 8px; }
.switches { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.switches li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font: var(--t-label); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--border-strong); position: relative; flex: none; transition: background var(--t) ease; }
.switch .sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-raised);
  transition: inset-inline-start var(--t) ease; }
.switch input:checked + .sw { background: var(--navy); }
.switch input:checked + .sw::after { inset-inline-start: 21px; }
.switch input:focus-visible + .sw { outline: 3px solid var(--focus); outline-offset: 2px; }
.table-wrap { overflow-x: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.table th, .table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-weight: 600; color: var(--ink-muted); font-size: 15px; background: var(--surface); }
.table tr:last-child td { border-bottom: 0; }
.versions .row { align-items: flex-start; }
.secret-inline { font-weight: 600; }

@media (max-width: 599px) {
  .table { font-size: 17px; line-height: 28px; }
  .table thead { display: none; }
  .table tr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .table td { display: block; padding: 2px 0; border: 0; }
  .table td[data-l]::before { content: attr(data-l) ": "; color: var(--ink-muted); font-size: 13px; }
  .table-wrap { overflow-x: visible; }
}
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .portal-client main { max-width: 1000px; }
  .dev-head { display: grid; grid-template-columns: 40px 1.4fr 1fr 1fr .7fr 20px; gap: 0 12px; padding: 8px 14px; background: var(--surface);
    color: var(--ink-muted); font-size: 15px; border-bottom: 1px solid var(--line); }
  .dev-head span:first-child { grid-column: 2; }
  .dev > summary { grid-template-columns: 40px 1.4fr 1fr 1fr .7fr 20px; grid-template-areas: none; gap: 0 12px; min-height: 56px; }
  .devlist .dev > summary > * { grid-row: 1; }
  .dev-ic { grid-column: 1; }
  .dev-loc { display: none; }
  .dev-name { grid-column: 2; }
  .dev > summary .dev-place { display: block; grid-column: 3; color: var(--ink); font-size: 15px; }
  .dev > summary .dev-model { grid-column: 4; }
  .dev > summary .dev-sys { display: block; grid-column: 5; color: var(--ink-muted); font-size: 15px; }
  .dev > summary .chev { grid-column: 6; }
  .dev-body { padding-inline-start: 66px; max-width: 760px; }
}

@media (min-width: 900px) {
  main { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mt { margin-top: 16px; }
.mb0 { margin-bottom: 0; }

/* ── Journey 2: money ────────────────────────────────────────────── */
.money-amt { white-space: nowrap; unicode-bidi: isolate; }
/* Owner decision 2026-10-19 (like the Arya website): the fils are smaller, «KD» is Montserrat and a little smaller. */
.fils { font-size: .78em; }
.money-amt .cur { font-family: var(--font-latin); font-size: .85em; }

/* ── Journey 2: technician portal ────────────────────────────────── */
.day-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.actions.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.actions.two .btn, .day-switch .btn { padding: 6px 10px; }
.actions.two form { margin: 0; }
.visit-head { padding: 12px 14px; }
.next-step { margin: 4px 0 16px; text-align: center; }
.step-count { margin: 0 0 6px; font-size: 15px; color: var(--ink-muted); }
.step-dots { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.step-dots li { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.step-dots li.done { background: var(--mint); }
.step-dots li.now { background: var(--navy); box-shadow: 0 0 0 3px var(--mint-soft); }
.big-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 128px;
  padding: 16px; border-radius: var(--radius-lg); border: 2px solid transparent; font: 700 22px/30px var(--font-heading); cursor: pointer; text-decoration: none; transition: transform var(--t) ease, background var(--t) ease; }
.big-btn .icon { width: 44px; height: 44px; stroke-width: 2; }
.big-btn:active { transform: scale(.98); }
.big-btn.compact { min-height: 88px; font-size: 18px; }
.big-btn.compact .icon { width: 32px; height: 32px; }
.big-btn.go, .big-btn.send { background: var(--mint); color: var(--on-mint); }
.big-btn.photo, .big-btn.video { background: var(--navy); color: var(--on-navy); }
.big-btn.voice { background: var(--mint-soft); color: var(--navy); border-color: var(--mint); }
.big-btn.voice.recording { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.big-btn.leave { background: var(--warning-soft); color: var(--navy); border-color: var(--warning-line); }
.big-btn[aria-busy="true"], .big-btn[disabled] { opacity: .6; cursor: progress; }
label.big-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.rec-time { font-size: 18px; font-weight: 600; }
.done-state .icon { color: var(--mint-ink); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.tile, .tile-form .tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 76px; padding: 8px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--navy);
  text-decoration: none; font: inherit; font-size: 15px; line-height: 1.3; text-align: center; cursor: pointer; width: 100%; }
.tile:hover { border-color: var(--mint); background: var(--mint-soft); }
.tile span { overflow-wrap: anywhere; }
.tile b { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface);
  color: var(--navy); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.tile b.ok { background: var(--mint); }
.tile-form { margin: 0; display: flex; }
details.more summary { font-weight: 600; }
details.more h3 { margin-top: 12px; font-size: 17px; }
.sync-box { position: sticky; top: var(--top-h); z-index: 25; background: var(--warning-soft); border-bottom: 1px solid var(--warning-line); padding: 8px 16px; }
.sync-head { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; }
.sync-head span { flex: 1; }
.sync-list { list-style: none; margin: 4px auto 0; padding: 0; max-width: 760px; font-size: 15px; }
.sync-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; }
.sync-err { color: var(--danger); }
.checklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.checklist form { margin: 0; }
.check-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-raised); font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.check-btn .box { flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); border: 2px solid var(--border-strong); display: inline-flex;
  align-items: center; justify-content: center; color: var(--navy); background: var(--surface-raised); }
.check-btn .lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.is-done .check-btn { background: var(--mint-soft); border-color: var(--mint-line); }
.is-done .check-btn .box { background: var(--mint); border-color: var(--mint); }
.check-btn.needs-photo .box { border-style: dashed; }
label.check-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dev-checks .dev-check { padding: 10px 14px; }
.dc-name { display: flex; flex-direction: column; margin-bottom: 8px; }
.state-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sb { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-raised); color: var(--navy); font: inherit; font-size: 15px; cursor: pointer; }
.sb[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.sb-problem[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); }
.qty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.qty-row { display: grid; grid-template-columns: 96px 1fr; gap: 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.voice-note audio, .voice-office audio { width: 100%; margin: 6px 0; }
.photo-grid video, .pick-media video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--charcoal); }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick-grid form { margin: 0; }
.pick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); font: inherit; color: var(--navy); cursor: pointer; text-align: start; }
.crew-row .inline-form input { flex: 1 1 140px; min-width: 0; min-height: 48px; padding: 6px 10px; font: inherit; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.sign-pad { display: block; width: 100%; height: 220px; border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); touch-action: none; }
.label { font: var(--t-label); margin-bottom: 6px; }

/* ── Journey 2: office ───────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 600px) { .grid-3 { grid-template-columns: 1.3fr 1fr 1fr; } }
.switch-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 48px; margin-inline-end: 12px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.switch-line input { width: 20px; height: 20px; }
.original { background: var(--surface); border-radius: var(--radius-md); padding: 8px 12px; margin: 0 0 6px; font-size: 15px; }
.pick-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pm { display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--border-strong); border-radius: var(--radius-md); padding: 6px; cursor: pointer; }
.pm img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); display: block; }
.pm input { width: 22px; height: 22px; }
.pm:has(input:checked) { border-color: var(--navy); background: var(--mint-soft); }
.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); background: var(--surface); padding: 8px 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; }
.legend { display: inline-flex; gap: 6px; margin-inline-start: 8px; }
.cal-wrap { display: none; }
.cal-days { display: block; }
.cal-day h2 { font-size: 17px; margin: 16px 0 6px; }
.cal-day.is-today h2 { color: var(--navy); }
.board { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.board .card { margin: 0; }
@media (min-width: 900px) {
  .cal-wrap { display: block; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
  .cal-days { display: none; }
  .cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
  .cal th, .cal td { border: 1px solid var(--line); padding: 6px; vertical-align: top; text-align: start; }
  .cal thead th { background: var(--surface); font-weight: 600; color: var(--ink-muted); }
  .cal thead th:first-child, .cal tbody th { width: 130px; }
  .cal tbody th { background: var(--surface); font-weight: 600; }
  .cal .is-today { background: var(--mint-soft); }
  .cal-cell { min-height: 72px; height: 72px; }
  .cal-cell.drop-ok { outline: 3px dashed var(--focus); outline-offset: -3px; background: var(--mint-soft); }
  .cal-task { display: block; margin-bottom: 4px; padding: 6px 8px; border-radius: var(--radius-md); border: 1px solid var(--mint-line); background: var(--mint-soft);
    color: var(--navy); text-decoration: none; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
  .cal-task[draggable="true"] { cursor: grab; }
  .cal-task .sub { display: block; color: var(--ink-muted); font-size: 13px; }
  .cal-task.unconfirmed { background: var(--warning-soft); border-color: var(--warning-line); border-style: dashed; }
  .cal-task.clash { border: 2px solid var(--danger); }
  .cal-task.as-crew { opacity: .75; }
  .cal-task.dragging { opacity: .4; }
}

/* ── Journey 3: devices on site, guides, sharing, imports ─────────── */
.dev-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.dev-card .dc-name { flex: 1; min-width: 0; margin: 0; }
.dev-card .dc-go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--mint); color: var(--navy); font-weight: 600; }
.dev-card.done .dc-go { background: var(--mint-soft); }
.dev-check > a.small { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; min-height: 48px; }
.reg-step { margin: 0 0 20px; }
.reg-step h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--navy); color: var(--on-navy); font: 700 15px/1 var(--font-latin); }
.read-values { margin-top: 12px; }
.field input.big-value { font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.scanner { margin-top: 10px; }
.scanner video { display: block; width: 100%; max-height: 52vh; object-fit: cover; border-radius: var(--radius-md); background: var(--navy); }
.tag-group { border: 0; padding: 0; margin: 0 0 12px; }
.tag-group legend { font-weight: 600; margin-bottom: 6px; }
.tag-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .tag-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tag-btn { position: relative; display: block; }
.tag-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-btn span { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 8px; border: 2px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--navy); font-weight: 600; text-align: center; line-height: 1.3; cursor: pointer;
  overflow-wrap: anywhere; transition: background var(--t) ease, border-color var(--t) ease; }
.tag-btn.own span { border-style: dashed; }
.tag-btn input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.tag-btn input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.reg .big-btn.send { margin-top: 8px; }
.serial-box { border-color: var(--warning-line); background: var(--warning-soft); }
.serial-box h2 { display: flex; gap: 8px; align-items: center; font-size: 18px; }
.ph { display: flex; flex-direction: column; gap: 4px; }
form.inline { display: inline; margin: 0; }
.warn-row td { background: var(--warning-soft); }
.import-table tr.group th { background: var(--mint-soft); color: var(--navy); text-align: start; }
.import-table .sub, .table .sub { display: block; }
.bulk-wrap { margin-bottom: 8px; }
.table.bulk { min-width: 1280px; }
.table.bulk td { padding: 4px; }
.table.bulk input, .table.bulk select { width: 100%; min-width: 72px; min-height: 40px; padding: 4px 6px; font: inherit; font-size: 15px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); }
.month-nav { justify-content: center; }
.totals .card { margin-bottom: 12px; }
.row-details > summary { list-style: none; cursor: pointer; }
.row-details > summary::-webkit-details-marker { display: none; }
.row-details[open] .chev { transform: rotate(180deg); }
.inline-edit { display: inline-block; }
.inline-edit > summary { list-style: none; }
.inline-edit[open] form { position: absolute; z-index: 10; inset-inline-end: 16px; margin-top: 6px; background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 12px; min-width: 240px; box-shadow: var(--shadow-card); }
.dev-guides { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.dev-guides p { width: 100%; margin: 0; }
.try-first, .share-box { margin-top: 12px; }
.try-first summary, .share-box summary { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 600; cursor: pointer; }
.try-steps { margin: 6px 0 10px; padding-inline-start: 22px; }
.try-steps li { margin-bottom: 6px; }
.guide { text-align: center; padding: 8px 0 4px; }
.guide-art { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin: 8px auto 16px; border-radius: 50%;
  background: var(--mint-soft); color: var(--navy); }
.guide-art .icon { width: 56px; height: 56px; stroke-width: 1.6; }
.guide h2 { font-size: 22px; }
.guide-body { font-size: 18px; line-height: 1.8; max-width: 34em; margin-inline: auto; }
.app-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.app-links p { width: 100%; margin: 0; }
.guide-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.guide-nav .btn { min-width: 132px; }
.help-btns { margin-top: 6px; }
.sticker-sheet { display: flex; justify-content: center; padding: 8px 0 16px; }
.sticker { width: 70mm; margin: 0; padding: 6mm; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); text-align: center; }
.sticker-logo { width: 46mm; height: auto; margin: 0 auto 3mm; display: block; }
.sticker-code svg { width: 52mm; height: 52mm; display: block; margin: 0 auto; }
.sticker-code svg path { fill: var(--navy); }
.sticker figcaption { display: flex; flex-direction: column; gap: 1mm; margin-top: 3mm; color: var(--navy); font-size: 13px; line-height: 1.4; }
@media print {
  .topbar, .bottomnav, .drawer, .backdrop, .demo-strip, .no-print, .skip, #offline, .sync-box, .toast { display: none !important; }
  body { background: var(--surface-raised); }
  main { padding: 0 !important; }
  .sticker { border: 1px dashed var(--border-strong); }
}
@media (prefers-reduced-motion: reduce) { .tag-btn span { transition: none; } }

/* ── Journey 5: support, maintenance, requests, referrals, handover, rating ─────────────────────────────────── */
.msgs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.msg { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; max-width: 92%; }
.msg p { margin: 0 0 4px; overflow-wrap: anywhere; }
.msg.office { background: var(--mint-soft); border-color: var(--mint-line); margin-inline-start: auto; }
.msg.internal { background: var(--warning-soft); border: 1px dashed var(--warning-line); }
.price-lines { margin: 8px 0; display: grid; gap: 4px; }
.price-lines > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.price-lines dt { color: var(--ink-muted); }
.price-lines dd { margin: 0; font-weight: 600; }
.price-lines .disc dd { color: var(--mint-ink); }
.price-lines .total { border-top: 1px solid var(--line); padding-top: 4px; }
.discount-banner { font-weight: 700; }
.stars-form { display: flex; flex-wrap: wrap; gap: 6px; }
.star-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 48px; min-height: 52px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--navy); cursor: pointer; font: inherit; font-size: 13px; }
.star-btn:hover, .star-btn:focus-visible { background: var(--mint-soft); }
.star-btn .icon { width: 22px; height: 22px; }
.stars .icon { width: 20px; height: 20px; color: var(--line); }
.stars .icon.on { color: var(--mint-ink); fill: var(--mint); }
.preview-box { background: var(--surface); border-radius: var(--radius-md); padding: 8px 12px; margin: 4px 0 16px; }
.preview-table td, .preview-table th { padding: 6px 8px; }
.sub-line { padding-inline-start: 22px; }
.ack { white-space: normal; line-height: 1.8; background: var(--surface); border-radius: var(--radius-md); padding: 10px 12px; }
.handover-card { display: block; text-decoration: none; color: inherit; border-color: var(--mint); }
.qty-row label { align-self: center; }
@media (max-width: 380px) { .qty-grid { grid-template-columns: 1fr; } }
.table input:not([type="checkbox"]) { width: 100%; min-width: 0; }
[data-care-price] .qty-grid { gap: 8px 16px; margin-bottom: 8px; }
[data-care-price] .qty-row { grid-template-columns: 1fr 88px; align-items: center; }
[data-care-price] .qty-row input { min-height: 48px; width: 100%; text-align: center; }
@media (max-width: 420px) { [data-care-price] .qty-grid { grid-template-columns: 1fr; } }

/* Literal values (passwords, usernames, serials, MAC, IP, codes): always one isolated left-to-right unit, whatever
   the page language; no ligatures; a little spacing so similar characters stay apart. */
.literal { direction: ltr; unicode-bidi: isolate; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: .03em; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Sensitive literal values — password, username, serial, MAC, one-time codes and keys — and nothing else: the one
   monospace (l, I, 1, | and 0, O, o are all different). Never smaller than body text; a long value wraps inside its box. */
.mono, .field input.mono, .kv-list .copy-row .value.mono { font-family: var(--font-literal); letter-spacing: 0; font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0; overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
bdi.mono, span.mono, .kv-list .copy-row .value.mono { font-size: max(1em, 17px); line-height: 28px; }

/* ── Journey 6: rules, templates, notifications, installable app ─────────────────────────────────────────────── */
.link-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.link-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--navy); text-decoration: none; }
.link-tabs a[aria-current] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rule-row > .row { flex: 1 1 240px; min-width: 0; }
.rule-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rule-line select, .rule-line input { flex: 1 1 120px; min-width: 0; min-height: 48px; padding: 8px 10px; font: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.rule-action { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; margin: 0 0 12px; min-width: 0; }
.rule-action legend { padding: 0 6px; font-weight: 600; color: var(--navy); }
.field > .label { display: block; margin-bottom: 4px; color: var(--ink-muted); }
.msg-preview { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin: 8px 0; background: var(--surface-raised); overflow-wrap: anywhere; }
.msg-preview p { margin: 4px 0 0; }
.trial-action { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.pref-list { list-style: none; margin: 0 0 16px; padding: 0; }
.pref-list > li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pref-switches { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.notif-img, .person-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.person-photo { width: 96px; height: 96px; display: block; margin-bottom: 8px; }
.nav-badge { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--danger); color: var(--on-navy); font: 700 11px/18px var(--font-latin); text-align: center; }
.bottomnav a { position: relative; }
.big-btn.way { background: var(--mint-soft); color: var(--navy); border-color: var(--mint); margin-bottom: 4px; }
.way-done { margin: 0 0 8px; }
.pwa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 16px; }
.pwa-bar .main { flex: 1 1 200px; }
.actions-inline { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.sheet { background: var(--surface-raised); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-head h2 { margin: 0; font-size: 18px; }
.guide-steps { margin: 12px 0 16px; padding: 0; list-style: none; counter-reset: g; }
.guide-steps li { counter-increment: g; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.guide-steps li span::before { content: counter(g) ". "; font-weight: 600; color: var(--navy); }
.guide-art { width: 96px; height: 64px; }
.guide-icon { width: 64px; height: 64px; border-radius: var(--radius-md); border: 1px solid var(--line); justify-self: center; }
.offline-page main { max-width: 560px; margin: 32px auto; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { .sheet-backdrop { transition: none; } }
.notif-list .row { flex-wrap: wrap; }
.notif-list .row .main { flex: 1 1 200px; }
.notif-list .row .end { flex-basis: 100%; padding-inline-start: 36px; }

/* Journey 7: unified office search */
.global-search { position: relative; margin: 0 0 12px; }
.gs-live { position: absolute; z-index: 25; inset-inline: 0; top: calc(100% + 4px); max-height: 70vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-card); }
.gs-live .list { margin-bottom: 8px; }
.gs-live h2, #search-page-results h2 { display: flex; align-items: center; gap: 6px; margin: 8px 4px 6px; font-size: 15px; }
.gs-live .state { margin: 0; padding: 16px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: start; vertical-align: middle; }
.matrix td select { min-height: 40px; max-width: 100%; }
.table-wrap { overflow-x: auto; max-width: 100%; position: relative; }   /* relative: hidden labels inside a wide table stay inside the scroller */
.report-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.report-table th, .report-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: start; }
.report-table td.n, .report-table th.n { text-align: end; font-variant-numeric: tabular-nums; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.inline-form .field { margin-bottom: 0; flex: 1 1 140px; min-width: 0; }
.chips-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips-list li { display: inline-flex; align-items: center; gap: 2px; }

/* Phone fields: Kuwaiti numbers only — the country code is shown, never typed (the server strips a typed +965 anyway). */
.phone-wrap { display: flex; align-items: stretch; direction: ltr; }
.phone-wrap .phone-prefix { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface); color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.phone-wrap input { flex: 1; min-width: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }

/* ── Brand v2: identity elements, used sparingly (the portal is a work tool) ─────────────────────────────────────── */
/* DotGrid: LED dots fading from one corner of the sign-in pages only. A local SVG, behind the panel, never over text. */
.auth { position: relative; overflow: hidden; }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .auth::before { content: ""; position: absolute; top: 0; right: 0; width: 264px; height: 264px; background: var(--gray-shape);
    -webkit-mask: url("../brand/dotgrid.e7ac73a4b916.svg") no-repeat top right / 264px 264px; mask: url("../brand/dotgrid.e7ac73a4b916.svg") no-repeat top right / 264px 264px;
    pointer-events: none; z-index: 0; }
  [dir="rtl"] .auth::before { right: auto; left: 0; transform: scaleX(-1); }
}
.auth > * { position: relative; z-index: 1; }
/* Drawings of the iPhone guide: colours from the tokens, none written in the template. */
.ga-line { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ga-thin { stroke-width: 2; }
.ga-navy { fill: var(--navy); } .ga-mint { fill: var(--mint); }
.ga-box { fill: var(--surface); stroke: var(--line); } .ga-card { fill: var(--surface-raised); stroke: var(--line); stroke-width: 2; }

/* Motion (brand): the page content enters once, 0.4 s; Arabic and Urdu from the right, English from the left.
   Buttons, menus and lists keep their instant feedback (--t, 180 ms). Reduced motion: switched off above. */
@keyframes enter-from-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes enter-from-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
main { animation: enter-from-left .4s cubic-bezier(.2, .7, .2, 1) 1 backwards; }
[dir="rtl"] main { animation-name: enter-from-right; }

/* Tidy-up after the brand v2 walk (office pages on a phone). */
/* The actions of a filter form sit in one wrapping row under the fields, not stacked one per line. */
.filters .toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
/* A long hint in a search field ends with «…» instead of being cut mid-word. */
input[type="search"], .global-search input { text-overflow: ellipsis; }
input::placeholder { text-overflow: ellipsis; }
/* On a phone, a list row whose end column carries status chips puts them on their own line under the text, so the
   title is not squeezed into one word per line. Rows that end with a time or an arrow only stay on one line. */
@media (max-width: 520px) {
  .row:has(> .end .chip) { flex-wrap: wrap; }
  .row:has(> .end .chip) > .main { flex: 1 1 200px; }
  .row:has(> .end .chip) > .end { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-inline-start: 36px; }
  /* Office lists (tasks, reports to approve…): the date and time go under the title too — the office reads long
     titles; the client's and technician's rows keep their short end column on the line. */
  .portal-manage .row:has(> .end bdi) { flex-wrap: wrap; }
  .portal-manage .row:has(> .end bdi) > .main { flex: 1 1 200px; }
  .portal-manage .row:has(> .end bdi) > .end { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-inline-start: 36px; }
}

/* Items and devices (settings): under the heading line of a row, its suggestion, the fields and the two buttons. */
.item-row > .row { padding-bottom: 4px; }
.item-body { padding: 0 16px 14px; }
.item-body p { margin: 0 0 6px; overflow-wrap: anywhere; }
.item-body .sub-reason { display: block; margin-top: 2px; }
.item-body form { margin: 0; }
.item-body .row-details > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; overflow-wrap: anywhere; }
.item-body .actions.two { margin-top: 4px; }
.item-bulk { align-items: center; }
.item-bulk .switch-line { flex-wrap: nowrap; margin: 0; }
.item-bulk .switch-line input { flex: none; }

/* ── Referrals and the balance ledger (docs/DELIVERY_REFERRALS.md) ── */
.balance-big { margin: 0 0 4px; font: var(--t-number-md); font-family: var(--font-body); color: var(--navy); }
.item-row { padding-bottom: 12px; }
.item-row .actions { padding: 0 16px; margin-top: 0; }
.how-list { margin: 0; padding-inline-start: 20px; }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.how-list li + li { margin-top: 4px; }