/* Bathrat al-Taqadum — projects system.
   Black canvas (after the Sui identity), brand navy surfaces, and the logo's sky cyan used as light:
   it only appears where something is charged — finished steps, the active page, the main action, focus.
   Logical properties throughout so Arabic (RTL) and English (LTR) both work. */

:root {
  color-scheme: dark;
  --night: #0B1621;          /* page: deep night blue rather than black */
  --deep: #102030;          /* panels */
  --deep-2: #15283A;        /* hover, table heads */
  --navy: #243545;          /* brand navy */
  --line: #1A2C3D;          /* hairline dividers (decorative) */
  --line-2: #24394E;        /* container borders */
  --line-3: #3A5268;        /* container hover */
  --control: #5C7590;       /* input, chip and button borders: 3.4:1 on panels (WCAG non-text) */
  --control-hover: #7891AA;
  --sky: #4AC0E8;           /* brand sky */
  --sky-soft: #93D9F2;
  --sky-deep: #1A6E97;
  --frost: #E6EFF5;
  --text-2: #AEBBC7;       /* labels, table headers: 9.6:1 on panels */
  --mist: #92A3B3;          /* secondary text: 5.8:1 even on hover rows */
  --haze: #8494A4;          /* tertiary text (dates, units): 4.8:1 even on hover rows */
  --disabled-fg: #6E7C89;
  --on-accent: #03131C;     /* text on sky */
  --sky-hover: #6CCDEE;
  --track: #1A2B3B;         /* empty part of bars and meters */
  --sunk: #08121B;          /* save bar, calculator well */
  --sun: #F2B544;           /* the dashboard sun and the cells it lights */
  --on-sun: #1A1204;
  --sun-band: #0E1D2B;      /* the dashboard header */
  --sun-cell: linear-gradient(0deg, #FFE0A0 0%, #F2B544 38%, #C98A12 100%);
  /* The night over the band: the moon (lit face, seas, unlit side, rim, halo, its path so far) and the stars. */
  --moon-0: #F7FAFC; --moon-1: #E3EBF2; --moon-2: #C3D0DC; --moon-sea: #8D9FB1; --moon-sea-a: .42;
  --moon-dark: #142739; --moon-rim: rgba(195, 213, 228, .16); --moon-halo: #D6E4F0; --moon-path: #5F7386;
  --star: #DCE6EF; --star-max: 1;
  --amber: #F2B544;
  --coral: #F0645A;
  --mint: #58D69B;
  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;

  /* Type scale (one set for the whole app; print sheets keep their own sizes). */
  --fs-xs: 12px;   /* units, timestamps */
  --fs-sm: 13px;   /* helper text, table headers, badges */
  --fs-ui: 14px;   /* labels, table cells, small buttons */
  --fs-md: 15px;   /* body, inputs, buttons */
  --fs-lg: 17px;   /* card titles, h3 */
  --fs-xl: 20px;   /* h2 */
  --fs-2xl: 24px;  /* figures */
  --fs-3xl: 30px;  /* h1, headline figures */
  --fs-4xl: 40px;  /* the dashboard horizon */

  /* Spacing (4-pt steps). */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --font: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --st-progress: var(--sky);   --st-progress-bg: rgba(74, 192, 232, .13);  --st-progress-fg: #93D9F2;
  --st-buying: var(--amber);   --st-buying-bg: rgba(242, 181, 68, .13);    --st-buying-fg: #F6CB79;
  --st-collecting: #E58AD6;    --st-collecting-bg: rgba(229, 138, 214, .14); --st-collecting-fg: #F2BDE9;
  --st-stopped: #A88CF5;       --st-stopped-bg: rgba(168, 140, 245, .15);  --st-stopped-fg: #CDBDFF;
  --st-canceled: var(--coral); --st-canceled-bg: rgba(240, 100, 90, .14);  --st-canceled-fg: #F6A29B;
  --st-done: var(--mint);      --st-done-bg: rgba(88, 214, 155, .13);      --st-done-fg: #93E4BE;

  /* The lit panel cell — light rising from the bottom edge. */
  --cell-lit: linear-gradient(0deg, #8FDCF5 0%, #4AC0E8 22%, #1A6E97 64%, #123B54 100%);

  /* Colours that differ between the dark and light themes. */
  --on-frost: #0B1621;      /* text on a pressed chip or the toast (frost background) */
  --on-frost-2: #35414C;
  --cell-off: #15283A; --cell-line: #22384B;
  --stripe-a: #0A1520; --stripe-b: #0D1A26; --stripe-faint: rgba(255, 255, 255, .012);
  --row-hover: rgba(255, 255, 255, .025);
  --link-underline: rgba(147, 217, 242, .4);
  --danger-hover-fg: #FFC2BD; --danger-on: #1A0503; --danger-hover-bg: #F37F76;
  --shadow: rgba(0, 0, 0, .55);
  --horizon-auth: radial-gradient(ellipse 52% 115% at 50% -38%, #F2FBFE 0%, #BFEBFA 18%, #4AC0E8 38%, rgba(26, 110, 151, .85) 53%, rgba(36, 53, 69, .45) 65%, rgba(0, 0, 0, 0) 78%);
}

/* Light theme: the same brand sky on daylight paper. Chosen from the top bar and remembered on this device. */
:root[data-theme="light"] {
  color-scheme: light;
  --night: #F3F6F9; --deep: #FFFFFF; --deep-2: #EDF2F6; --navy: #DCE6EE;
  --line: #E1E8EE; --line-2: #CCD7E0; --line-3: #A9B9C7;
  --control: #7A8C9E; --control-hover: #566A7E;
  --sky: #0B7BAA; --sky-soft: #075F86; --sky-deep: #075F86; --sky-hover: #0A8DC3;
  --frost: #0F1B27; --text-2: #3C4C5C; --mist: #536373; --haze: #5E6E7E; --disabled-fg: #8794A1;
  --on-accent: #FFFFFF; --track: #E2E9EF; --sunk: #EEF3F7;
  --sun: #E9A21F; --sun-band: #E6EFF6; --sun-cell: linear-gradient(0deg, #FFD27A 0%, #F2B544 40%, #D99418 100%);
  --moon-0: #FFFFFF; --moon-1: #FAFCFD; --moon-2: #E8EEF3; --moon-sea: #8FA2B4; --moon-sea-a: .22;
  --moon-dark: #D6E1EA; --moon-rim: rgba(83, 107, 130, .14); --moon-halo: #FFFFFF; --moon-path: #A3B3C2;
  --star: #7D90A3; --star-max: .55;
  --amber: #C98A12; --coral: #D4463B; --mint: #1E9A62;
  --st-progress-bg: rgba(11, 123, 170, .10); --st-progress-fg: #075F86;
  --st-buying-bg: rgba(201, 138, 18, .13);   --st-buying-fg: #7E5300;
  --st-collecting: #B23C9F; --st-collecting-bg: rgba(178, 60, 159, .10); --st-collecting-fg: #82206F;
  --st-stopped: #7B5BE0; --st-stopped-bg: rgba(123, 91, 224, .11); --st-stopped-fg: #4F33B3;
  --st-canceled-bg: rgba(212, 70, 59, .10);  --st-canceled-fg: #A8261C;
  --st-done-bg: rgba(30, 154, 98, .11);      --st-done-fg: #146B44;
  --on-frost: #FFFFFF; --on-frost-2: #C7D3DD;
  --cell-off: #E4EBF1; --cell-line: #CFDAE3;
  --stripe-a: #EEF2F5; --stripe-b: #E5EBF0; --stripe-faint: rgba(15, 27, 39, .025);
  --row-hover: rgba(11, 123, 170, .045);
  --link-underline: rgba(7, 95, 134, .35);
  --danger-hover-fg: #8E1D15; --danger-on: #FFFFFF; --danger-hover-bg: #B8362C;
  --shadow: rgba(16, 38, 58, .16);
  --horizon-auth: radial-gradient(ellipse 52% 115% at 50% -38%, #FFFFFF 0%, #E3F6FD 22%, #A8E2F6 40%, rgba(74, 192, 232, .3) 58%, rgba(74, 192, 232, 0) 78%);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--frost); }
body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.65;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:lang(en) body, body:lang(en) { line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--sky-soft); text-decoration-color: var(--link-underline); text-underline-offset: 3px; }
a:hover { color: var(--frost); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
::selection { background: rgba(74, 192, 232, .35); }
img { max-width: 100%; }

.boot { display: grid; place-items: center; min-height: 70vh; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.muted { color: var(--mist); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.bold { font-weight: 500; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- Top bar ---------- */
.topbar { background: var(--night); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar-in { max-width: 1320px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--frost); text-decoration: none; padding: 8px 0; }
.brand img { width: 34px; height: 34px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-size: var(--fs-md); font-weight: 500; }
.brand-app { font-size: var(--fs-xs); color: var(--mist); }
.nav { display: flex; gap: 4px; align-self: stretch; }
.nav a { display: flex; align-items: center; color: var(--mist); text-decoration: none; padding: 0 12px; font-size: var(--fs-md); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.nav a:hover { color: var(--frost); }
.nav a[aria-current="page"] { color: var(--frost); border-bottom-color: var(--sky); }
.top-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; padding: 8px 0; }
.user-chip { display: flex; flex-direction: column; line-height: 1.25; text-decoration: none; color: var(--frost); font-size: var(--fs-ui); padding-inline-end: 6px; }
.user-chip small { color: var(--mist); font-size: var(--fs-xs); }
.btn-quiet { background: transparent; color: var(--frost); border: 1px solid var(--control); border-radius: var(--r-s); padding: 0 12px; min-height: 36px; font-size: var(--fs-ui); }
.btn-quiet:hover { border-color: var(--control-hover); background: var(--deep-2); }
/* Quiet buttons and links centre what they hold (an icon alone sat a few pixels high, the settings link at the top). */
.btn-quiet:not(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }

/* ---------- Page ---------- */
.page { max-width: 1320px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) 120px; display: flex; flex-direction: column; gap: var(--sp-6); }
h1 { margin: 0; font-size: var(--fs-3xl); font-weight: 400; line-height: 1.25; }
h2 { margin: 0; font-size: var(--fs-xl); font-weight: 400; line-height: 1.3; }
h3 { margin: 0; font-size: var(--fs-lg); font-weight: 500; line-height: 1.4; }
:lang(en) h1 { letter-spacing: -0.02em; }
:lang(en) h2 { letter-spacing: -0.01em; }
.sub { margin: 4px 0 0; color: var(--mist); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-ui); color: var(--mist); }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: var(--frost); }
.crumbs .sep { color: var(--line-3); }
.card { background: var(--deep); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: var(--sp-6); }
.split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.split > .main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.split > .side { flex: 1 1 280px; min-width: 0; }

/* ---------- Dashboard header: today's sun over Baghdad and the panel it charges (the one bold moment) ---------- */
.hero { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); margin-top: -24px; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--sun-band); }
.hero-in { position: relative; max-width: 1320px; margin: 0 auto; padding: 28px 24px 0; }
.hero-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hero-date { margin: 6px 0 0; color: var(--mist); font-size: var(--fs-md); }
.hero-date .sep, .sun-set .sep { color: var(--line-3); margin-inline: 8px; }
.hero-date .num { color: var(--frost); }
.hero .btn-sun { background: var(--sun); border-color: var(--sun); color: var(--on-sun); font-weight: 600; min-height: 46px; padding-inline: 20px; }
.hero .btn-sun:hover { background: color-mix(in srgb, var(--sun) 85%, #FFFFFF); border-color: transparent; color: var(--on-sun); }
/* Wide screens: the title and the button sit in the band's top corners, where the arc is low, and the panel stands
   under the arc between them. */
@media (min-width: 1080px) {
  .hero-head { position: absolute; inset-inline: 24px; top: 28px; z-index: 2; pointer-events: none; }
  .hero-head > * { pointer-events: auto; }
}
.sun { position: relative; container-type: inline-size; }
.sun svg { display: block; width: 100%; height: auto; overflow: visible; }
.sun-arc { fill: none; stroke: var(--line-3); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sun-done { fill: none; stroke: var(--sun); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sun-horizon { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sun-disc { fill: var(--sun); }
.sun-stop { stop-color: var(--sun); }
/* At night: the stars, and the moon on the arc with its path since moonrise, quieter than the sun's. */
.sun-stars { fill: var(--star); opacity: var(--star-max); }
.moon-done { fill: none; stroke: var(--moon-path); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.moon-stop { stop-color: var(--moon-halo); }
.moon-dark { fill: var(--moon-dark); }
.moon-rim { fill: none; stroke: var(--moon-rim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.moon-face-0 { stop-color: var(--moon-0); }
.moon-face-1 { stop-color: var(--moon-1); }
.moon-face-2 { stop-color: var(--moon-2); }
.moon-maria { fill: var(--moon-sea); opacity: var(--moon-sea-a); }
/* Night falling while the dashboard is open: the sky comes in over a second (never under reduced motion). */
.night-in { animation: night-in 1.2s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes night-in { from { opacity: 0; } }
/* Under the horizon: sunrise at the reading start, sunset at the end, and the panel's caption between them. */
.sun-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 16px; font-size: var(--fs-sm); color: var(--mist); padding: 6px 0 12px; min-height: 48px; }
.sun-rise { grid-column: 1; justify-self: start; }
.sun-set { grid-column: 3; justify-self: end; }
.hero h1 { font-size: var(--fs-4xl); font-weight: 300; }
:lang(en) .hero h1 { letter-spacing: -0.03em; }

/* ---------- The panel under the sun (drawn by scripts/panel-figure/build.mjs; anatomy kit styles, MIT) ----------
   Monochrome night tones; the only colour is the light: the cells take on Logo Sky as the sun climbs (they are
   charged), and the sun's reflection crosses the glass during the day. */
.pfig { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
  --anatomy-paper: var(--sun-band); --anatomy-face: #16293B; --anatomy-top: #142739;
  --anatomy-shade-0: #0A1520; --anatomy-shade-1: #0C1925; --anatomy-shade-2: #0F1E2C; --anatomy-shade-3: #122434;
  --anatomy-lit-top: #1B3449; --anatomy-lit-shade: #152C40;
  --anatomy-hi: #A3B6C6; --anatomy-mid: #567089; --anatomy-lo: #344A5E; --anatomy-faint: #1F3346; --anatomy-lit: var(--sky-soft);
  --anatomy-halo: #02070C; --anatomy-halo-opacity: .7; --anatomy-dot: var(--frost); --anatomy-weight: .6px;
  --pf-hi-dim: #6F8496; --pf-mid-dim: #3B5166; --pf-on-mid: #7FA6C2;
  --pf-cell: #0C2033; --pf-cell-on: #11304B; --pf-cell-edge: #2A4560; --pf-bus: #8EA4B8; --pf-glass: 147, 217, 242; --pf-film: 230, 239, 245;
  --pf-backsheet: #1C3347; --pf-void: #040A10; --pf-label: #C3D1DD; --pf-label-ink: #0B1621; --pf-sheen: #FFF1CF; --pf-sheen-max: 1; --pf-moonlit: #DCE9F4;
  --pf-lit-0: #3A8FB3; --pf-lit-1: #2C77A0; --pf-lit-2: #175274; --pf-lit-3: #12354B;
  --pf-wave: #8FDCF5; --pf-wave-max: .42; }
:root[data-theme="light"] .pfig {
  --anatomy-face: #FFFFFF; --anatomy-top: #F6F9FB;
  --anatomy-shade-0: #CFDBE5; --anatomy-shade-1: #D9E3EB; --anatomy-shade-2: #E2EAF0; --anatomy-shade-3: #EBF1F5;
  --anatomy-lit-top: #FFFFFF; --anatomy-lit-shade: #E6F1F8;
  --anatomy-hi: #2B3C4D; --anatomy-mid: #7A8DA0; --anatomy-lo: #A7B6C4; --anatomy-faint: #C9D5DF; --anatomy-lit: var(--sky);
  --anatomy-halo: #5E7488; --anatomy-halo-opacity: .22; --anatomy-dot: #2B3C4D;
  --pf-hi-dim: #6C7F92; --pf-mid-dim: #A9B7C4; --pf-on-mid: #3F7597;
  --pf-cell: #1B3A58; --pf-cell-on: #164C73; --pf-cell-edge: #36556F; --pf-bus: #C6D2DC; --pf-glass: 11, 123, 170; --pf-film: 15, 27, 39;
  --pf-backsheet: #FFFFFF; --pf-void: #2C3E50; --pf-label: #FFFFFF; --pf-label-ink: #15202B; --pf-sheen: #FFFFFF; --pf-sheen-max: .85; --pf-moonlit: #FFFFFF;
  --pf-lit-0: #8FDCF5; --pf-lit-1: #4AC0E8; --pf-lit-2: #1A6E97; --pf-lit-3: #123B54;
  --pf-wave: #FFFFFF; --pf-wave-max: .5; }
.pfig-stage { position: relative; display: block; border-radius: var(--r-l); cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
/* The panel's blurred shadow on the ground sits in its own layer behind the moving parts, promoted once, so the
   hovering sheets never make the browser redraw the blur. */
.pfig-back { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
/* While the panel rests apart, each sheet hovers in a layer of its own on a composited transform (panel-figure.js),
   promoted only then. The layer box lets pointers through; the sheet's own shapes still take them. */
.pfig-sheet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pfig-sheet .it { pointer-events: visiblePainted; }
.pfig-stage.layered .pfig-sheet { will-change: transform; }
.pfig-stage:focus-visible { outline-offset: 4px; }
.pfig-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; } /* positioned, so the shadow layer behind and the sheet layers above stack in document order */
.pfig-svg path, .pfig-svg circle { vector-effect: non-scaling-stroke; }
.pfig .iso-fill { fill: var(--anatomy-paper); stroke: none; }
.pfig .iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.pfig .iso-shade, .pfig .iso-top { stroke: none; }
.pfig .iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
.pfig .iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
.pfig .iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
.pfig .iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
.pfig .iso-top { fill: var(--anatomy-top); }
.pfig .iso-solid[data-seamless] > .iso-shade, .pfig .iso-solid[data-seamless] > .iso-top { stroke-width: .4; stroke-linejoin: round; }
.pfig .iso-solid[data-seamless] > .iso-shade[data-shade="0"] { stroke: var(--anatomy-shade-0); }
.pfig .iso-solid[data-seamless] > .iso-shade[data-shade="1"] { stroke: var(--anatomy-shade-1); }
.pfig .iso-solid[data-seamless] > .iso-shade[data-shade="2"] { stroke: var(--anatomy-shade-2); }
.pfig .iso-solid[data-seamless] > .iso-shade[data-shade="3"] { stroke: var(--anatomy-shade-3); }
.pfig .iso-solid[data-seamless] > .iso-top { stroke: var(--anatomy-top); }
.pfig .iso-halo { fill: var(--anatomy-halo); stroke: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.pfig .iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
.pfig .iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
.pfig .iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
.pfig .iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
.pfig .iso-line[data-tone="lit"] { stroke: var(--anatomy-lit); }
.pfig .iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: .32; }
.pfig .iso-dots[data-tone="hi"] circle { opacity: .85; }
.pfig .iso-dots[data-tone="mid"] circle { opacity: .45; }
.pfig .iso-dots[data-tone="lo"] circle { opacity: .22; }
.pfig .tb-body { fill: var(--anatomy-shade-2); stroke: none; }
.pfig .tb-shine { fill: var(--anatomy-top); stroke: none; }
.pfig .tb-shade { fill: var(--anatomy-shade-0); stroke: none; }
.pfig .tb-ring { fill: none; stroke: var(--anatomy-lo); stroke-width: .45; }
/* The layers: clear glass, milky EVA, dark cells with silver busbars, an opaque backsheet. */
.pfig .pf-glass > .iso-fill, .pfig .pf-glass > .iso-top { fill: rgba(var(--pf-glass), .06); }
.pfig .pf-glass > .iso-shade { fill: rgba(var(--pf-glass), .2); }
.pfig .pf-eva > .iso-fill, .pfig .pf-eva > .iso-top { fill: rgba(var(--pf-film), .04); }
.pfig .pf-eva > .iso-shade { fill: rgba(var(--pf-film), .12); }
.pfig .pf-glass, .pfig .pf-eva, .pfig .pf-sheen { pointer-events: visibleStroke; }
.pfig .pf-sheen { fill: url(#pf-sheen); opacity: calc(var(--sheen, 0) * var(--pf-sheen-max)); }
.pfig .pf-sheen-stop { stop-color: var(--pf-sheen); }
.pfig-stage[data-moon] { --pf-sheen: var(--pf-moonlit); } /* moonlight on the glass: cooler than the sun's */
/* The cells charge as one surface: a single glow across all of them, brightest on the sun's side and fading without a
   seam, as strong as the sun is high (--charge), so the panel never reads as a lit panel beside a dark one. On the
   first visit it comes up slowly. */
.pfig .pf-cell { fill: var(--pf-cell); }
.pfig .pf-charge { fill: url(#pf-cell-lit); opacity: var(--charge, 0); pointer-events: none; }
.pfig-stage[data-sweep] .pf-charge { transition: opacity 1.6s cubic-bezier(.23, 1, .32, 1) .3s; }
.pfig .pf-lit-0 { stop-color: var(--pf-lit-0); }
.pfig .pf-lit-1 { stop-color: var(--pf-lit-1); }
.pfig .pf-lit-2 { stop-color: var(--pf-lit-2); }
.pfig .pf-lit-3 { stop-color: var(--pf-lit-3); }
/* The charge wave: light, never a glow (no blur, no halo), and at its crest no brighter than the table's lit cells. */
.pfig .pf-wave { fill: url(#pf-wave); opacity: var(--pf-wave-max); pointer-events: none; }
.pfig .pf-wave-stop { stop-color: var(--pf-wave); }
.pfig .pf-cell-edge { fill: none; stroke: var(--pf-cell-edge); stroke-width: .4; }
.pfig .pf-bus { stroke: var(--pf-bus); opacity: .5; }
.pfig .pf-ribbon > .iso-fill { fill: var(--pf-bus); }
.pfig .pf-backsheet > .iso-fill, .pfig .pf-backsheet > .iso-top { fill: var(--pf-backsheet); }
.pfig .pf-void { fill: var(--pf-void); }
.pfig .pf-label { fill: var(--pf-label); stroke: var(--anatomy-lo); stroke-width: .4; }
.pfig .pf-barcode { stroke: var(--pf-label-ink); }
/* The named layer is the one lit part; every other part steps down a tone while one is named. */
.pfig path { transition: fill .24s ease, stroke .24s ease; }
.pfig-stage[data-focus] .it:not([data-on]):not([data-piece="ground"]) { --anatomy-hi: var(--pf-hi-dim); --anatomy-mid: var(--pf-mid-dim); }
.pfig .it[data-on] { --anatomy-hi: var(--anatomy-lit); --anatomy-mid: var(--pf-on-mid); }
.pfig .it[data-on] .iso-top, .pfig .it[data-on] .tb-shine { fill: var(--anatomy-lit-top); }
.pfig .it[data-on] .iso-shade, .pfig .it[data-on] .tb-body { fill: var(--anatomy-lit-shade); }
.pfig .it[data-on] .pf-cell { fill: var(--pf-cell-on); }
.pfig .it[data-on] .pf-glass > .iso-top { fill: rgba(var(--pf-glass), .14); }
.pfig .it[data-on] .pf-eva > .iso-top { fill: rgba(var(--pf-film), .1); }
.pfig .it[data-on] .pf-backsheet > .iso-top { fill: var(--anatomy-lit-top); }
/* The names, while the panel is apart, as on any exploded drawing: each part's name beside the panel (on wider
   screens with a few words under it), a short hairline from a dot on the part's outer corner. Each sheet's name is
   on the other side from its neighbour's, so they never crowd. They come in once the sheets have nearly arrived, top
   to bottom, and go at once when the panel closes. The named part's name lights and rides up with its sheet. */
.pf-name { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0;
  transition: opacity .1s ease-out, translate .4s cubic-bezier(.23, 1, .32, 1); }
.pfig-stage[data-apart] .pf-name { opacity: 1;
  transition: opacity .24s cubic-bezier(.23, 1, .32, 1) calc(.3s + var(--n) * 60ms), translate .4s cubic-bezier(.23, 1, .32, 1); }
.pf-name::before { content: ''; position: absolute; top: -.5px; width: 14px; height: 1px; background: var(--anatomy-mid); }
.pf-name::after { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--anatomy-hi); }
.pf-name[data-side="left"]::before { right: 0; }
.pf-name[data-side="right"]::before { left: 0; }
/* No box behind the words: a soft halo of the sky's colour hugs the letters, so they stay clear over the sun's path
   and its glow without cutting a dark rectangle into the light when the sun passes behind them. */
.pf-name-text { position: absolute; top: 0; translate: 0 -50%; width: max-content; max-width: 200px; padding: 1px 4px; line-height: 1.35;
  text-shadow: 0 0 1px var(--sun-band), 0 0 3px var(--sun-band), 0 0 6px var(--sun-band), 0 0 12px var(--sun-band); }
.pf-name[data-side="left"] .pf-name-text { right: 14px; text-align: right; }
.pf-name[data-side="right"] .pf-name-text { left: 14px; text-align: left; }
.pf-name b { display: block; color: var(--frost); font-size: var(--fs-sm); font-weight: 500; transition: color .2s ease; }
.pf-name span { display: block; color: var(--mist); font-size: var(--fs-xs); }
.pf-name[data-on] b { color: var(--anatomy-lit); }
.pf-name[data-on]::before, .pf-name[data-on]::after { background: var(--anatomy-lit); }
.pf-name[data-on][data-lifts] { translate: 0 calc(-1 * var(--pf-lift, 0px)); }
/* Phones: the name alone, a step smaller, on a shorter hairline. */
@media (max-width: 720px) {
  .pf-name span { display: none; }
  .pf-name b { font-size: var(--fs-xs); }
  .pf-name::before { width: 9px; }
  .pf-name[data-side="left"] .pf-name-text { right: 9px; }
  .pf-name[data-side="right"] .pf-name-text { left: 9px; }
}
@media (prefers-reduced-motion: reduce) { .pf-name, .pfig-stage[data-apart] .pf-name { transition: none; } }

/* ---------- Figures (one row, hairline separated — not boxes) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); }
.kpi { padding: 16px 18px 18px; border-inline-start: 1px solid var(--line); min-width: 0; }
.kpi:first-child { border-inline-start: 0; padding-inline-start: 0; }
.kpi .v { font-size: var(--fs-3xl); font-weight: 300; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v.money { font-size: var(--fs-xl); font-weight: 400; line-height: 1.6; }
.kpi .v.small-v { font-size: var(--fs-2xl); line-height: 1.4; }
.kpi .l { font-size: var(--fs-ui); color: var(--frost); margin-top: 6px; }
.kpi .s { font-size: var(--fs-xs); color: var(--haze); }
.hero .kpis { border-top: 0; display: flex; flex-wrap: wrap; }
.hero .kpi { padding-inline: 32px; }
.hero .kpi:first-child { padding-inline-start: 0; }
.hero .kpi .v.money { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.4; }

/* ---------- Buttons ----------
   Primary (filled sky) = the main action of an area; one per area.
   Secondary (outlined) = other actions. Link = low-emphasis. Danger = destructive (outlined; filled inside a confirm dialog). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-s); padding: 0 18px; min-height: 44px; font-weight: 500; font-size: var(--fs-md); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
/* Password box with a show / hide eye at its end. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 50px; }
.pw-wrap .input::-ms-reveal { display: none; }
.pw-eye { position: absolute; inset-inline-end: 3px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--mist); cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--frost); }
.pw-eye:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.btn-primary, .btn-sun { background: var(--sky); color: var(--on-accent); border-color: var(--sky); }
.btn-primary:hover, .btn-sun:hover { background: var(--sky-hover); border-color: var(--sky-hover); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--frost); border-color: var(--control); }
.btn-secondary:hover { border-color: var(--control-hover); background: var(--deep-2); color: var(--frost); }
.btn-danger { background: transparent; color: var(--st-canceled-fg); border-color: rgba(240, 100, 90, .55); }
.btn-danger:hover { border-color: var(--coral); background: var(--st-canceled-bg); color: var(--danger-hover-fg); }
.modal .btn-danger { background: var(--coral); border-color: var(--coral); color: var(--danger-on); }
.modal .btn-danger:hover { background: var(--danger-hover-bg); border-color: var(--danger-hover-bg); color: var(--danger-on); }
.btn-link { background: none; border: 0; color: var(--sky-soft); padding: 4px 0; min-height: 0; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(147, 217, 242, .35); text-underline-offset: 4px; }
.btn-link:hover { color: var(--frost); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-ui); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"], .btn-quiet:disabled, .chip:disabled {
  background: var(--deep-2); color: var(--disabled-fg); border-color: var(--line-2); cursor: not-allowed; }
.btn-link:disabled { background: none; color: var(--disabled-fg); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-5) var(--sp-6); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label, .field > .label { font-size: var(--fs-ui); color: var(--text-2); line-height: 1.4; }
/* Required fields: a red asterisk after the label (the input's own required attribute tells screen readers). */
.field:has(> .input:required, > .select:required, > .textarea:required, > .pw-wrap > .input:required) > label::after { content: ' *' / ''; color: var(--st-canceled-fg); }
.hint, .field > .small.muted { font-size: var(--fs-sm); color: var(--mist); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--control); border-radius: var(--r-s); padding: 9px 12px; background: var(--night); color: var(--frost); min-height: 44px; font-size: var(--fs-md); }
.input::placeholder, .textarea::placeholder { color: var(--haze); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--control-hover); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(74, 192, 232, .4); }
/* Invalid only after the person has interacted, so empty forms don't start red. */
.input:user-invalid, .select:user-invalid, .textarea:user-invalid, .input[aria-invalid="true"] { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background: var(--deep-2); color: var(--disabled-fg); border-color: var(--line-2); cursor: not-allowed; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.select option { background: var(--deep); }
.readonly-value { padding: 4px 0; white-space: pre-wrap; word-break: break-word; }
.readonly-value.empty { color: var(--haze); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--sky); }
.error { color: var(--st-canceled-fg); font-size: var(--fs-ui); }
/* Block messages (form and page errors) get a tinted panel and a rule on the reading-start side. */
div.error, p.error { background: var(--st-canceled-bg); border: 1px solid rgba(240, 100, 90, .35); border-inline-start: 3px solid var(--coral); border-radius: var(--r-s); padding: 10px 14px; margin: 0; }
.ok-text { color: var(--st-done-fg); font-size: var(--fs-ui); }
.note { font-size: var(--fs-ui); color: var(--mist); border-inline-start: 2px solid var(--line-3); padding-inline-start: 12px; margin: 0; border-radius: 0; }

/* ---------- Filters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 0 14px; font-size: var(--fs-ui); border: 1px solid var(--control); background: transparent; color: var(--text-2); min-height: 36px; }
.chip:hover { color: var(--frost); border-color: var(--control-hover); }
.chip .n { color: var(--haze); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--frost); border-color: var(--frost); color: var(--on-frost); }
.chip[aria-pressed="true"] .n { color: var(--on-frost-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.search { flex: 0 1 300px; min-width: 200px; }

/* ---------- Status pills & badges ----------
   One shape for both. Status pills always carry a dot + the word, never colour alone. */
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; min-height: 24px; font-size: var(--fs-sm); line-height: 1.4; white-space: nowrap; font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }
.pill .dot { width: 7px; height: 7px; }
.st-progress { background: var(--st-progress-bg); color: var(--st-progress-fg); } .st-progress .dot { background: var(--st-progress); }
.st-buying { background: var(--st-buying-bg); color: var(--st-buying-fg); } .st-buying .dot { background: var(--st-buying); }
.st-collecting { background: var(--st-collecting-bg); color: var(--st-collecting-fg); } .st-collecting .dot { background: var(--st-collecting); }
.st-stopped { background: var(--st-stopped-bg); color: var(--st-stopped-fg); } .st-stopped .dot { background: var(--st-stopped); }
.st-canceled { background: var(--st-canceled-bg); color: var(--st-canceled-fg); } .st-canceled .dot { background: var(--st-canceled); }
.st-done { background: var(--st-done-bg); color: var(--st-done-fg); } .st-done .dot { background: var(--st-done); }
.badge-red { background: var(--st-canceled-bg); color: var(--st-canceled-fg); }
.badge-quiet { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--control); font-weight: 400; }
.badge-teal { background: var(--st-done-bg); color: var(--st-done-fg); }
.badge-gray { background: rgba(135, 150, 164, .14); color: var(--text-2); }
.badge-sky { background: var(--st-progress-bg); color: var(--st-progress-fg); }

/* ---------- Panel cells: the progress signature ---------- */
.cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cells i { height: 14px; border-radius: 2px; background: var(--cell-off); box-shadow: inset 0 0 0 1px var(--cell-line); }
.cells i.lit { background: var(--cell-lit); box-shadow: none; }
table.pt .cells i.lit { background: var(--sun-cell); } /* the dashboard's cells are lit by its sun */
.cells i.now { background: color-mix(in srgb, var(--cur, var(--sky)) 28%, var(--deep)); box-shadow: inset 0 0 0 1px var(--cur, var(--sky)); }
.cells.halted i.now { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cur) 50%, transparent) 0 2px, transparent 2px 6px), var(--deep); }
.stepper.halted .cell-btn.now { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cur) 16%, transparent) 0 1px, transparent 1px 9px), var(--deep); }

.note-box { font-size: var(--fs-sm); border-radius: var(--r-s); padding: 6px 10px; }
.bar { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--sky); }

/* ---------- Project table: every project on one dense list, read row by row ----------
   Raised header, hairline rows, a row opens in place for its details. Hover is colour only, and only where a mouse is. */
:root { --row-open: rgba(255, 255, 255, .02); --ease-out: cubic-bezier(.23, 1, .32, 1); }
:root[data-theme="light"] { --row-open: rgba(11, 123, 170, .035); }
.pt-wrap { background: var(--deep); border-color: var(--line-2); }
table.pt { font-size: var(--fs-ui); }
table.pt th { padding: 9px 14px; }
table.pt td { padding: 10px 14px; }
table.pt tbody tr:hover td { background: none; }
table.pt tbody td { transition: background-color .12s ease; }
table.pt tr.r { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  table.pt tbody tr.r:hover td { background: var(--row-hover); }
  table.pt tbody tr.r:hover .row-x { color: var(--frost); }
}
table.pt tr.r.open td, table.pt tr.more.open td { background: var(--row-open); }
.th-sort { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; margin: -2px 0; color: inherit; font: inherit; border-radius: 2px; white-space: nowrap; }
.th-sort svg { color: var(--haze); opacity: .6; transition: transform .2s var(--ease-out), opacity .12s ease, color .12s ease; }
.th-sort.on { color: var(--frost); }
.th-sort.on svg { color: var(--sky); opacity: 1; }
.th-sort.on[data-dir="asc"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .th-sort:hover { color: var(--frost); } .th-sort:hover svg { opacity: 1; } }
.pt .c-name { width: 30%; min-width: 200px; }
.p-name { color: var(--frost); font-size: var(--fs-md); font-weight: 500; text-decoration: none; }
.p-name:hover { color: var(--frost); text-decoration: underline; text-decoration-color: var(--line-3); }
.p-sub { display: block; font-size: var(--fs-sm); color: var(--mist); line-height: 1.4; }
.pt .c-status { width: 1%; white-space: nowrap; }
.pt .c-step { width: 160px; }
.pt .c-step .cells { width: 126px; gap: 2px; }
.pt .c-step .cells i { height: 10px; }
.step-l { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; font-size: var(--fs-sm); color: var(--mist); white-space: nowrap; }
.step-l b { color: var(--frost); font-weight: 400; }
.pt .c-price { text-align: end; white-space: nowrap; }
.pt .c-price .amt { color: var(--frost); }
.pt th.c-price { text-align: end; }
.pt .c-paid { width: 150px; }
.paid-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt .c-paid .bar { margin-top: 6px; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--st-canceled-fg); white-space: nowrap; }
.flag .dot { width: 6px; height: 6px; background: var(--coral); }
.flag-over { color: var(--st-buying-fg); }
.flag-over .dot { background: var(--st-buying-fg); }
.mat-low { margin-top: 3px; font-size: var(--fs-xs); color: var(--st-buying-fg); white-space: nowrap; }
.mat-low-note { margin: 0; color: var(--st-buying-fg); }
.warn-note { border-color: var(--st-buying-fg); color: var(--st-buying-fg); }
.pt .c-load, .pt .c-when { white-space: nowrap; }
.pt .c-when { color: var(--text-2); }
.pt .c-x { width: 52px; padding-inline: 4px 10px; text-align: end; }
.row-x { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-s); border: 1px solid transparent; background: transparent; color: var(--mist);
  transition: color .12s ease, border-color .12s ease, transform .16s var(--ease-out); }
.row-x svg { transition: transform .24s var(--ease-out); }
.row-x:active { transform: scale(.94); }
tr.open .row-x { color: var(--frost); border-color: var(--line-2); }
tr.open .row-x svg { transform: rotate(180deg); }
@media (pointer: coarse) { .row-x { width: 40px; height: 40px; } }
/* A row's details open in place: the height comes from a grid row going from 0fr to 1fr, so it can be interrupted,
   and closes faster than it opens. */
table.pt tr.more td { padding: 0; border-top: 0; }
.more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .16s var(--ease-out); }
tr.more.open .more-wrap { grid-template-rows: 1fr; transition-duration: .24s; }
.more-in { min-height: 0; overflow: hidden; }
.more-grid { display: grid; gap: 12px; padding: 2px 14px 16px; opacity: 0; transform: translateY(-4px);
  transition: opacity .1s ease, transform .16s var(--ease-out); }
tr.more.open .more-grid { opacity: 1; transform: none; transition: opacity .2s ease .04s, transform .24s var(--ease-out); }
tbody.kb .more-wrap, tbody.kb .more-grid, tbody.kb .row-x svg { transition: none !important; }
.more-grid > p { margin: 0; justify-self: start; }
.more-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.more-facts .nw { white-space: nowrap; }
.more-facts > div { min-width: 0; }
.more-facts dt { font-size: var(--fs-xs); color: var(--haze); }
.more-facts dd { margin: 2px 0 0; color: var(--frost); }
.more-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
/* Loading rows hold the table's shape while the list arrives. */
.sk-bar { display: block; height: 10px; border-radius: 3px; background: var(--deep-2); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-bar.thin { height: 8px; margin-top: 8px; }
.kpi .sk-bar { height: 20px; margin-block: 8px 6px; }
tr.sk td { padding-block: 17px; }
@keyframes sk-pulse { 50% { opacity: .45; } }
tr.t-empty td { padding: 32px 14px; text-align: center; color: var(--mist); }
tr.t-empty p { margin: 0 0 12px; }
/* Phones: each project is a compact block of two lines (three with money): name, status and the toggle; the cells,
   the step and the last change; the price and how much is paid. */
@media (max-width: 720px) {
  .sun-ends { grid-template-columns: auto minmax(0, 1fr); font-size: var(--fs-xs); padding-bottom: 14px; }
  .sun-set { grid-column: 2; text-align: end; }
  .tool-end { flex-wrap: wrap; }
  .tool-end .search { flex: 1 1 100%; }
  .tool-end .sort-pick { position: relative; flex: 1 1 0; min-width: 0; }
  .sort-pick .k { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--haze); font-size: var(--fs-sm); pointer-events: none; }
  .sort-pick .select { padding-inline-start: 4em; }
  .tool-end .log-btn { flex: none; }
  table.pt tr.r.open { background: var(--row-open); }
  table.pt tr.r.open td, table.pt tr.more.open td { background: none; }
  table.pt tr.more.open { background: var(--row-open); }
  .more-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-facts .wide { grid-column: 1 / -1; }
  .pt-wrap { margin-inline: -14px; border-width: 1px 0; border-radius: 0; overflow: visible; }
  table.pt, table.pt tbody { display: block; }
  table.pt thead { display: none; }
  table.pt tr.r { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 40px; grid-template-areas: "name status x" "step when when";
    align-items: center; gap: 8px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
  table.pt.money tr.r { grid-template-areas: "name status x" "step when when" "price paid paid"; }
  table.pt tbody > tr.r:first-child { border-top: 0; }
  table.pt tr.r td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .pt .c-name { grid-area: name; }
  .pt .c-status { grid-area: status; justify-self: end; }
  .pt .c-x { grid-area: x; padding: 0; }
  .pt .c-step { grid-area: step; }
  .pt .c-when { grid-area: when; justify-self: end; text-align: end; }
  .pt .c-price { grid-area: price; text-align: start; }
  .pt .c-paid { grid-area: paid; width: auto; }
  table.pt tr.r td.c-load { display: none; }
  table.pt tr.more, table.pt tr.more td, table.pt tr.t-empty, table.pt tr.t-empty td { display: block; }
  .more-grid { padding: 0 14px 14px; }
  table.pt tr.sk { display: block; padding: 14px; border-top: 1px solid var(--line); }
  table.pt tr.sk td { display: none; }
  table.pt tr.sk td:first-child { display: block; padding: 0; border: 0; }
}
/* Press feedback on the dashboard's controls: they give a little under the finger. */
.toolbar .chip, .hero .btn, .pt .btn { transition: background-color .12s, border-color .12s, color .12s, transform .16s var(--ease-out); }
.toolbar .chip:active, .hero .btn:active, .pt .btn:active { transform: scale(.97); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.toolbar .chips { flex: 1 1 auto; }
.tool-end { display: flex; gap: 8px; align-items: center; }
.log-btn { position: relative; }
.log-btn .new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); flex: none; }

/* ---------- Activity log ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 71; width: min(400px, 100vw); background: var(--deep); border-inline-start: 1px solid var(--line-2); display: flex; flex-direction: column; animation: drawer-in .22s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .drawer { animation-name: drawer-in-rtl; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes drawer-in-rtl { from { transform: translateX(-24px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-lg); font-weight: 500; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 20px 24px; }
.drawer-body .log-list { margin: 0; border-top: 0; }
.log h2 { font-size: var(--fs-lg); font-weight: 500; }
.log-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.log-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.log-list li.fresh .what::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); margin-inline-end: 8px; vertical-align: middle; }
.log-list .what { font-size: var(--fs-ui); }
.log-list .what b { font-weight: 500; }
.log-list .meta { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: var(--haze); }
.log-list .meta a { color: var(--mist); text-decoration: none; }
.log-list .meta a:hover { color: var(--frost); }

/* ---------- Project header & stepper ---------- */
.proj-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 32px; padding-bottom: 6px; }
.proj-head h1 { font-size: var(--fs-3xl); font-weight: 300; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 0; }
.facts div { display: flex; flex-direction: column; line-height: 1.35; }
.facts dt { font-size: var(--fs-xs); color: var(--haze); }
.facts dd { margin: 0; font-size: var(--fs-md); }
.proj-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cell-btn { width: 100%; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; text-align: start; padding: 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--deep); color: var(--frost); }
.cell-btn:hover:not(:disabled) { border-color: var(--line-3); }
.cell-btn .n { font-size: var(--fs-2xl); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; align-items: center; }
.cell-btn .label-wrap { display: flex; flex-direction: column; }
.cell-btn .name { font-size: var(--fs-ui); line-height: 1.35; }
.cell-btn .state { font-size: var(--fs-xs); color: var(--mist); }
.cell-btn.lit { background: var(--cell-lit); border-color: transparent; }
.cell-btn.lit .state { color: #CDEFFA; }
.cell-btn.now { border-color: var(--cur, var(--sky)); box-shadow: inset 0 0 0 1px var(--cur, var(--sky)); background: color-mix(in srgb, var(--cur, var(--sky)) 12%, var(--deep)); }
.cell-btn.locked { background: repeating-linear-gradient(135deg, var(--stripe-a) 0 7px, var(--stripe-b) 7px 14px); color: var(--haze); border-color: var(--line); }
.cell-btn.locked .state { color: var(--haze); }
.cell-btn[aria-current="step"] { outline: 2px solid var(--frost); outline-offset: 2px; }

/* ---------- Step panel ---------- */
.step-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.step-head .k { font-size: var(--fs-sm); color: var(--mist); }
.step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: var(--fs-ui); color: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.section-title { font-size: var(--fs-lg); font-weight: 500; color: var(--frost); line-height: 1.4; }
.locked-box { display: flex; gap: 16px; align-items: flex-start; border: 1px dashed var(--line-2); border-radius: var(--r-m); padding: 22px; background: repeating-linear-gradient(135deg, var(--stripe-faint) 0 7px, transparent 7px 14px); }
.locked-box > svg { color: var(--mist); flex: none; margin-top: 2px; }
.subpanel { border: 1px solid var(--line-2); border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.checklist label { border-bottom: 1px solid var(--line); padding: 4px 2px; }
.ck-when { display: flex; flex-direction: column; align-items: flex-end; text-align: end; font-size: var(--fs-sm); line-height: 1.35; }
.ck-when .ck-who { color: var(--mist); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .checklist label.check { flex-wrap: wrap; row-gap: 0; }
  .checklist .ck-when { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: start; padding-inline-start: 30px; margin-top: -2px; padding-bottom: 8px; }
}

/* ---------- Tables ----------
   Headers are readable (not faint), numbers line up at the end of the column in tabular figures. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-m); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.45; }
table.t th { text-align: start; background: var(--deep-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
table.t td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
table.t tbody tr:first-child td { border-top: 0; }
table.t tbody tr:hover td { background: var(--row-hover); }
table.t td.end, table.t th.end, table.t td.num, table.t th.num { text-align: end; }
table.t td.num, table.t th.num, table.t td.end { font-variant-numeric: tabular-nums; }
table.t tfoot td, table.t tfoot th { background: var(--deep-2); border-top: 1px solid var(--line-2); font-weight: 500; color: var(--frost); padding: 11px 14px; }
table.t .input, table.t .select { min-height: 38px; padding: 6px 10px; }
table.t .select { min-width: 150px; } /* scroll the table sideways rather than crush a dropdown */

/* ---------- Media ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--deep); padding: 0; text-align: start; display: flex; flex-direction: column; color: var(--frost); }
.tile:hover { border-color: var(--line-3); }
.tile .thumb { aspect-ratio: 4 / 3; background: var(--deep-2); display: flex; align-items: center; justify-content: center; color: var(--haze); position: relative; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .play { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; color: #fff; }
.tile .cap { padding: 8px 10px; font-size: var(--fs-xs); line-height: 1.45; }
.tile .pc-badge { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-s); background: rgba(8, 18, 27, .78); color: var(--frost); font-size: var(--fs-xs); line-height: 1.6; }
.tile .cap .when { color: var(--haze); display: flex; align-items: center; gap: 4px; }
.uploads { display: flex; flex-direction: column; gap: 6px; }
.upload-row { display: flex; align-items: center; gap: 12px; font-size: var(--fs-ui); background: var(--deep-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; }
.progress { flex: 1; height: 3px; background: var(--track); border-radius: 2px; overflow: hidden; min-width: 60px; }
.progress > span { display: block; height: 100%; background: var(--sky); transition: width .2s; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--deep); border: 1px solid var(--line-3); border-radius: var(--r-l); padding: var(--sp-6); width: min(520px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.lightbox { position: fixed; inset: 0; background: #000; z-index: 60; display: flex; flex-direction: column; color: var(--frost); }
.lightbox .lb-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.lightbox .lb-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 8px; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .lb-info { padding: 12px 18px 20px; font-size: var(--fs-sm); color: var(--mist); border-top: 1px solid var(--line); }
.lb-caption { color: var(--frost); font-weight: 500; font-size: var(--fs-md); margin-bottom: 4px; }
.lb-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lb-saved { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; color: var(--frost); overflow-wrap: anywhere; }
.lb-meta a { color: var(--sky-soft); }
.lb-btn { background: rgba(255, 255, 255, .08); color: var(--frost); border: 0; border-radius: var(--r-s); min-width: 44px; min-height: 44px; padding: 0 12px; }
.lb-btn:hover { background: rgba(255, 255, 255, .14); }
.toast { position: fixed; inset-inline: 0; bottom: 20px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); background: var(--frost); color: var(--on-frost); padding: 10px 18px; border-radius: var(--r-s); z-index: 90; font-size: var(--fs-ui); }

/* ---------- Sticky save bar ---------- */
.savebar { position: sticky; bottom: 0; z-index: 10; background: var(--sunk); border-top: 1px solid var(--line-3); margin: 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)); padding: var(--sp-3) var(--sp-6); border-radius: 0 0 var(--r-l) var(--r-l); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Login ---------- */
.auth { min-height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; padding: 0 20px 40px; }
.auth::before {
  content: ''; position: absolute; inset-inline: -20%; top: 0; height: 52vh; pointer-events: none;
  background: var(--horizon-auth);
}
.auth-in { position: relative; width: min(420px, 100%); padding-top: max(30vh, 210px); display: flex; flex-direction: column; gap: 28px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-brand { display: flex; align-items: center; gap: 16px; }
.auth-brand img { width: 64px; height: 64px; }
.auth-brand .company { font-size: var(--fs-2xl); font-weight: 400; line-height: 1.25; }
.auth-brand .company-sub { font-size: var(--fs-sm); color: var(--mist); }
.auth-card { background: var(--deep); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { font-size: var(--fs-xl); font-weight: 400; }

/* ---------- Team / settings ---------- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.role-box { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.meter { height: 8px; background: var(--track); border-radius: 2px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--cell-lit); }

/* ---------- Sizing calculator (step 3, design role) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc { border: 1px solid var(--line-2); border-radius: var(--r-l); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); background: var(--sunk); }
.calc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.calc-bar h3 { font-size: var(--fs-lg); font-weight: 500; }
.calc-dirty { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--st-buying-fg); }
.calc-dirty::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.calc-grid { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 26px; align-items: start; }
.calc-inputs { display: flex; flex-direction: column; gap: 18px; }
.calc-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-group > legend, .calc-group > summary { font-size: var(--fs-ui); font-weight: 500; color: var(--sky-soft); padding: 0; margin-bottom: 10px; }
details.calc-group > summary { cursor: pointer; list-style-position: inside; }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
.calc-fields.one { grid-template-columns: minmax(0, 1fr); }
.calc-fields .field > label { font-size: var(--fs-sm); }
.calc-fields .input, .calc-fields .select { min-height: 40px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--control); border-radius: var(--r-s); overflow: hidden; }
.seg button { background: transparent; border: 0; border-inline-start: 1px solid var(--control); color: var(--text-2); min-height: 40px; font-size: var(--fs-ui); padding: 0 6px; }
.seg button:first-child { border-inline-start: 0; }
.seg button[aria-checked="true"] { background: var(--frost); color: var(--on-frost); }
.seg button:disabled { cursor: default; }
/* Step 3 discount: the amount box with a dinar / percent switch at its end. */
.disc-in { display: flex; gap: 8px; align-items: stretch; }
.disc-in .input { flex: 1; min-width: 0; }
.disc-in .seg { grid-template-columns: repeat(2, minmax(44px, auto)); flex: none; }
.disc-in .seg button { min-height: 0; font-weight: 600; }
.disc-in .seg button[aria-pressed="true"] { background: var(--frost); color: var(--on-frost); }
.calc-results { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.calc-errors { border: 1px solid rgba(240, 100, 90, .35); background: var(--st-canceled-bg); color: var(--st-canceled-fg); border-radius: var(--r-m); padding: 12px 14px; }
.calc-errors p { margin: 0; }
.calc-price { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.calc-price .k { font-size: var(--fs-sm); color: var(--mist); }
.calc-price .v { font-size: var(--fs-3xl); font-weight: 300; line-height: 1.25; }
.calc-price .s { font-size: var(--fs-sm); color: var(--mist); margin-top: 4px; }
.calc-price .sep { display: inline-block; width: 1px; height: 12px; background: var(--line-3); margin-inline: 10px; vertical-align: middle; }
.calc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; margin: 0; }
.calc-facts dt { font-size: var(--fs-xs); color: var(--haze); }
.calc-facts dd { margin: 2px 0 0; font-size: var(--fs-ui); }
.calc-facts dd .xs { display: block; margin-top: 2px; }
.calc-facts dd b { font-weight: 500; }
.layout { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.layout figcaption { font-size: var(--fs-sm); color: var(--sky-soft); margin-bottom: 10px; }
.layout-invs { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.layout-inv-name { font-size: var(--fs-xs); color: var(--mist); margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; }
.layout-total { color: var(--frost); font-weight: 500; font-size: var(--fs-sm); }
.layout-n { min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--deep-2); border: 1px solid var(--line-2); color: var(--frost); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.layout-str { display: flex; align-items: center; gap: 10px; margin-top: 5px; min-width: 0; flex-wrap: wrap; }
.layout-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 15px; gap: 3px; }
.layout-cells i { height: 24px; border-radius: 2px; background: var(--cell-lit); }
.layout-cells i.cut { background: repeating-linear-gradient(135deg, rgba(240, 100, 90, .45) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--coral); }
.layout-v { font-size: var(--fs-xs); color: var(--mist); white-space: nowrap; }
.layout-str.over .layout-v { color: var(--st-canceled-fg); }
.calc-warn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calc-warn li { border-inline-start: 2px solid var(--amber); background: rgba(242, 181, 68, .07); color: var(--st-buying-fg); padding: 7px 12px; font-size: var(--fs-sm); border-radius: 0 var(--r-s) var(--r-s) 0; }
[dir="rtl"] .calc-warn li { border-radius: var(--r-s) 0 0 var(--r-s); }
table.calc-t { font-size: var(--fs-ui); }
table.calc-t td, table.calc-t th { padding: 8px 12px; }
table.calc-t tfoot td, table.calc-t tfoot th { border-top: 1px solid var(--line-2); color: var(--frost); font-weight: 500; }
table.calc-t tr.zero td { color: var(--haze); }
table.calc-t tr.chosen td { background: rgba(74, 192, 232, .06); }
.calc-more > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--sky-soft); display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.calc-more > summary .num { color: var(--frost); }
.calc-more[open] > summary { margin-bottom: 10px; }
.calc-more > .table-wrap + .table-wrap { margin-top: 10px; }
.calc-sum { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--line-2); font-size: var(--fs-md); }
.calc-hist { margin-top: 0; }
.calc-hist .what .muted { font-size: var(--fs-sm); }
.calc-hist .meta a { color: var(--sky-soft); margin-inline-start: 10px; }
.acc-t .qty-in { width: 72px; min-height: 34px; padding: 4px 8px; display: inline-block; }
.acc-t .acc-extra { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 10px; color: var(--mist); font-size: var(--fs-sm); }
.acc-t .acc-reset { display: block; margin-top: 2px; color: var(--st-buying-fg); }
/* Unit prices typed for one quotation: amber like any value typed over the automatic one */
.calc-t .price-in { width: 118px; min-height: 34px; padding: 4px 8px; display: inline-block; text-align: end; }
.calc-t .price-cell.is-set .price-in { border-color: color-mix(in srgb, var(--amber) 70%, transparent); color: var(--st-buying-fg); }
.calc-t .price-reset { display: block; margin-top: 2px; margin-inline-start: auto; color: var(--st-buying-fg); white-space: nowrap; }
.price-hint { margin: 0; }
@media (max-width: 640px) { .calc-t .price-in { width: 92px; } .acc-t .qty-in { width: 58px; } }
.price-hint b { color: var(--st-buying-fg); font-weight: 500; }
.acc-x { background: transparent; border: 1px solid var(--control); color: var(--text-2); border-radius: var(--r-s); width: 32px; height: 32px; display: inline-grid; place-items: center; }
.acc-x:hover { color: var(--st-canceled-fg); border-color: rgba(240, 100, 90, .45); }
.acc-removed td { font-size: var(--fs-sm); color: var(--mist); font-weight: 400 !important; }
.chip-sm { min-height: 28px; padding: 0 10px; font-size: var(--fs-sm); margin-inline-start: 6px; gap: 4px; }
.people-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.people-pick .chip[aria-pressed="true"] { background: var(--frost); color: var(--on-frost); border-color: var(--frost); }
.row-hidden td { opacity: .55; }
.item-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sig-preview { background: #fff; color: #333; border-radius: var(--r-m); min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 14px; max-width: 420px; }
.sig-preview img { max-height: 110px; max-width: 100%; }

/* ---------- Paper: printable report and project summary ---------- */
.print-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.paper { background: #fff; color: #15202B; width: min(210mm, 100%); margin: 0 auto; padding: 12mm 12mm 14mm; border-radius: 4px; font-size: 11.5px; line-height: 1.45; overflow-x: auto; }
.paper a { color: inherit; }
.adv-all { gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--line-3); border-radius: var(--r-m); }
.paper .muted { color: #5B6875; }
.paper-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 4px double #3AA6D8; margin-bottom: 10px; }
.ph-word { height: 46px; justify-self: start; }
.ph-mark { height: 76px; }
.ph-ar { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.ph-ar b { font-size: 17px; font-weight: 500; color: #15202B; }
.ph-ar span { font-size: 11.5px; color: #2D97CC; }
.report .rep-title { font-size: 12px; font-weight: 600; text-align: center; margin: 0 0 4px; }
.report table { border-collapse: collapse; }
.report th, .report td { border: 1px solid #222; padding: 1px 8px; text-align: center; font-size: 11px; height: 17px; }
.rep-kv { width: 70%; }
.rep-kv th { width: 50%; font-weight: 600; }
.rep-kv tr.sec th { background: #D9D9D9; border-width: 2px; }
.rep-kv tr.sec td { border: 0; }
.rep-acc { width: 90%; margin-top: 0; }
.rep-acc .first { width: 38.9%; background: #D9D9D9; font-weight: 400; }
.rep-acc thead th { font-weight: 600; background: #fff; }
.rep-acc thead th.first { background: #D9D9D9; }
.rep-acc tfoot th { text-align: start; font-weight: 600; font-size: 10.5px; }
.report .hl { background: #FFFF00; text-align: end; font-weight: 400; }
.rep-boq { width: 100%; margin-top: 0; }
.rep-boq caption { caption-side: top; text-align: start; font-weight: 600; font-size: 11px; padding: 2px 0; width: 38.9%; background: #D9D9D9; border: 1px solid #222; border-bottom: 0; }
.rep-boq thead th { font-weight: 600; }
.rep-boq tfoot th { text-align: start; font-weight: 600; background: #D9D9D9; }
.rep-boq tfoot tr.rep-final th, .rep-boq tfoot tr.rep-final td { font-weight: 700; font-size: 12px; }
.rep-note { font-size: 11px; margin: 12px 0 8px; }
.rep-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.rep-sign div { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.rep-sign span { font-size: 11px; white-space: nowrap; }
.rep-sign img { max-height: 46px; max-width: 150px; }
.rep-sign small { font-size: 9.5px; color: #5B6875; }
.summary h1 { font-size: 19px; font-weight: 500; margin: 0; }
.summary h2 { font-size: 15px; font-weight: 400; margin: 2px 0 0; }
.summary h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid #C9D3DC; color: #1D3A52; }
.summary h4 { font-size: 12px; font-weight: 600; margin: 8px 0 4px; }
.summary section { margin-top: 14px; break-inside: auto; }
.summary h3, .summary h4 { break-after: avoid; }
.sum-title { margin-bottom: 6px; }
.sum-title p { margin: 4px 0 0; color: #5B6875; font-size: 11px; }
.summary table { border-collapse: collapse; width: 100%; }
.summary table.kv th { text-align: start; font-weight: 500; color: #44515E; width: 17%; padding: 3px 8px 3px 0; vertical-align: top; }
.summary table.kv.one th { width: 30%; }
.summary table.kv td { padding: 3px 12px 3px 0; vertical-align: top; }
[dir="rtl"] .summary table.kv th { padding: 3px 0 3px 8px; }
[dir="rtl"] .summary table.kv td { padding: 3px 0 3px 12px; }
.summary table.grid th, .summary table.grid td { border: 1px solid #C9D3DC; padding: 3px 7px; text-align: start; vertical-align: top; }
.summary table.grid thead th { background: #EEF3F7; font-weight: 500; }
.summary table.grid tfoot th, .summary table.grid tfoot td { background: #F6F8FA; }
.summary table.grid tr { break-inside: avoid; }
.summary .nowrap { white-space: nowrap; }
.summary .changes { margin: 2px 0 0; padding-inline-start: 16px; color: #44515E; font-size: 10.5px; }
.summary .ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 6px 0; }
.summary .ticks li::before { content: '○'; margin-inline-end: 6px; color: #8796A4; }
.summary .ticks li.on::before { content: '✓'; color: #1F8A5B; }
.summary .thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.summary .thumbs figure { margin: 0; break-inside: avoid; }
.summary .thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; display: block; background: #EEF3F7; }
.summary .thumbs figcaption { font-size: 9px; color: #5B6875; margin-top: 2px; }
.summary .docs { margin: 6px 0 0; padding-inline-start: 18px; }
.summary .calc-print { margin-top: 6px; }
.summary .calc-print table + table { margin-top: 6px; }
.summary .warn { color: #8A5A00; margin: 6px 0 0; padding-inline-start: 18px; }
.summary .sum-step.locked p { margin: 0; }
.summary .hist td:first-child { width: 22%; }
.summary .hist td:nth-child(2) { width: 18%; }

@media (max-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .calc { padding: 14px; margin-inline: -4px; }
  .hide-sm { display: none; }
  .calc-price .v { font-size: var(--fs-2xl); }
  .paper { padding: 16px; font-size: 11px; }
  .summary .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  /* No page margin, so the browser has no room for its own header and footer (date, page title, web address,
     page number) when "Headers and footers" is ticked. The 9 mm margin is inside each document instead,
     and repeats at the top and bottom of every page a long document runs onto. */
  @page { size: A4; margin: 0; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .print-tools, .toast { display: none !important; }
  .page { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .paper { width: auto; padding: 9mm; border-radius: 0; overflow: visible; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* The sizing report fits on one page, like the Excel's print setup. */
  .report { font-size: 10px; }
  .report .paper-head { padding-bottom: 5px; margin-bottom: 6px; }
  .report .ph-word { height: 34px; }
  .report .ph-mark { height: 56px; }
  .report .ph-ar b { font-size: 14px; }
  .report .ph-ar span { font-size: 10px; }
  .report th, .report td { height: auto; padding: 0 6px; font-size: 9.6px; line-height: 1.38; }
  .report .rep-boq caption { font-size: 9.6px; padding: 0 6px; }
  .report .rep-title { font-size: 11px; margin-bottom: 2px; }
  .report .rep-note { font-size: 9.6px; margin: 8px 0 4px; }
}

/* ---------- Map picker ---------- */
.map-box { height: min(52vh, 420px); border-radius: var(--r-m); border: 1px solid var(--line-2); overflow: hidden; background: #DDE6EC; }
.map-search { gap: 8px; }
.map-foot { gap: 8px; flex-wrap: wrap; }
.map-pin span { position: absolute; left: 3px; top: 0; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #E8A317; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.map-pin span::after { content: ''; position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.leaflet-container { font: inherit; }

/* ---------- Maintenance (step 6) ---------- */
.cust-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--deep-2); }
.cust-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-card .k { font-size: var(--fs-xs); color: var(--mist); }
.cust-card .v { font-size: var(--fs-md); overflow-wrap: anywhere; }
.cust-card a { color: var(--sky-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.visits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: visit; }
.visits li { counter-increment: visit; position: relative; padding: 10px 12px; padding-inline-start: 42px; border: 1px solid var(--line-2); border-radius: var(--r-m); display: flex; flex-direction: column; gap: 8px; }
.visits li::before { content: counter(visit); position: absolute; inset-inline-start: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--deep-2); color: var(--mist); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.visit-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.visit-row .input { max-width: 200px; }
.visit-text { min-height: 64px; }
.visit-date { font-weight: 500; }
.visit-note { white-space: pre-wrap; }
.visit-all b { color: var(--frost); margin-inline-start: 4px; }
.visit-exp { display: flex; flex-direction: column; gap: 6px; }
.visit-exp-h { color: var(--mist); }
.visit-exp-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 6px; align-items: center; }
.visit-exp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.visit-exp-foot b, .visit-exp-sum b { margin-inline-start: 4px; }
.visit-exp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.visit-exp ul li { display: flex; gap: 12px; padding: 4px 0; border-top: 1px dashed var(--line-2); font-size: var(--fs-ui); }
.visit-exp-sum { text-align: end; color: var(--mist); }
.visit-exp-sum b { color: var(--frost); }
@media (max-width: 640px) { .visit-exp-row { grid-template-columns: minmax(0, 1fr) 104px auto; } }
.sum-exp { display: flex; justify-content: space-between; gap: 10px; }
.sum-exp-t { border-top: 1px solid #C9D3DC; margin-top: 2px; padding-top: 2px; }

/* ---------- Customer price offer (A4, typed over on screen) ---------- */
.of-tools { position: sticky; top: 64px; z-index: 6; background: var(--night); padding: 8px 0; }
.of-stage { overflow: hidden; }
.of-pages { width: 210mm; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; transform-origin: top left; }
[dir="rtl"] .of-pages { transform-origin: top right; }
.offer-page { width: 210mm; max-width: none; min-height: 297mm; padding: 9mm; display: flex; flex-direction: column; font-size: 12px; line-height: 1.5; color: #1A2430; overflow: visible; }
.of-pages .report { width: 210mm; }
.of-p3-note { margin: 4px 0 -6px; color: var(--mist); }
.of-p2-body { font-size: 13px; line-height: 1.75; margin-top: 6px; }
.of-p2-body .of-sub-title { margin-top: 14px; }
.of-p2-body .of-bul { margin-top: 4px; }
.offer-page[data-fit="1"] .of-p2-body { font-size: 12px; line-height: 1.6; }
.offer-page[data-fit="2"] .of-p2-body { font-size: 11.5px; line-height: 1.5; }
.offer-page[data-fit="3"] .of-p2-body { font-size: 10.5px; line-height: 1.4; }
.of-p4-title { font-size: 17px; font-weight: 700; text-align: center; margin: 6px 0 8px; color: #1E4E8C; }
.of-p4-ref { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; margin-bottom: 6px; background: #F8D5C6; border: 1.5px solid #C8613F; font-size: 12.5px; }
.of-mat { width: 100%; }
.of-mat tbody td { padding: 5px 6px; }
.of-m-no { width: 7%; position: relative; }
.of-m-name { text-align: start !important; }
.of-m-qty { width: 17%; }
.of-m-price { width: 17%; }
.of-m-total { width: 18%; }
.of-mat .of-unit { font-size: .9em; color: #5B6875; margin-inline-start: 4px; }
.of-mat tr.of-total td { text-align: center; }
.of-p4-note { margin-top: 10px; }
.of-p4-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
/* Pages 5 and 6: the work completion letter (تأييد انجاز عمل) and the system details, laid out like the company's own form. */
.of-c { display: flex; flex-direction: column; font-size: 14px; line-height: 1.85; }
.of-c-meta { align-self: flex-end; display: flex; flex-direction: column; gap: 10px; margin: 8mm 12mm 0 0; font-weight: 700; font-size: 12.5px; }
.of-c-to { text-align: center; font-weight: 700; font-size: 15px; margin: 18mm 0 0; }
.of-c-subj { text-align: center; font-weight: 700; font-size: 15px; margin: 6mm 0 0; }
.of-c-greet { font-weight: 600; margin: 8mm 0 0; }
.of-c-body { text-align: justify; text-indent: 2.2em; font-size: 14.5px; margin: 3mm 0 0; }
.of-c-body b { font-weight: 700; }
.of-c-thanks { text-align: center; font-size: 15px; margin: 22mm 0 0; }
.of-c-sig { align-self: flex-end; display: flex; flex-direction: column; align-items: center; gap: 4mm; margin: 38mm 20mm 0 0; font-size: 14px; min-width: 60mm; }
.of-c-sig .of-c-names { font-weight: 400; }
.of-c-facts { margin: 16mm 0 0; padding-inline-start: 22mm; font-size: 15px; line-height: 1.9; }
.of-c-sys { font-weight: 700; font-size: 15px; text-decoration: underline; margin: 12mm 0 6mm; padding-inline-start: 12mm; }
.of-c-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.of-c-table th, .of-c-table td { border: 1px solid #1A1A1A; padding: 5px 8px; text-align: center; vertical-align: middle; }
.of-c-table thead th { background: #FFFF00; font-weight: 500; }
.of-c-table .of-c-t-mat { width: 32%; }
.of-c-table .of-c-t-qty { width: 15%; }
.of-c-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 22mm 10mm; margin: 26mm 6mm 0; font-size: 15px; line-height: 1.5; }
.of-c-signs > div { display: flex; flex-direction: column; align-items: flex-start; }
.of-c-signs > div:nth-child(2) { justify-self: end; }
.of-c-signs .of-c-ben { grid-column: 2; justify-self: end; }
/* The letter's texts flow as one paragraph (the typed-over boxes elsewhere on the offer sit as blocks). */
.offer-page .of-c .ed, .offer-page .of-c-facts li > .ed { display: inline; }
.of-closing { text-align: center; font-weight: 700; margin: 22px 0 8px; }
.of-sign { width: 70mm; margin: 10px auto 0 4mm; display: flex; flex-direction: column; align-items: center; }
.of-stamp { width: 62mm; min-height: 38mm; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: #5B6875; font: inherit; }
.of-stamp img { max-width: 62mm; max-height: 46mm; object-fit: contain; display: block; }
.of-signer { text-align: center; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; align-items: center; }
.of-warn { border-color: #E8A317; }
.of-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 5px double #2F6DB5; margin-bottom: 12px; }
.of-en { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; color: #1E4E8C; font-size: 12px; }
.of-en img { height: 44px; margin-bottom: 2px; }
.of-en span:last-child { color: #2D97CC; }
.of-mark { height: 80px; }
.of-ar { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 3px; }
.of-ar b { font-size: 18px; font-weight: 500; color: #1E4E8C; }
.of-ar span { font-size: 11.5px; color: #2D97CC; }
.of-info { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
.of-info th, .of-info td { background: #F8D5C6; border: 1.5px solid #C8613F; padding: 3px 8px; text-align: start; font-weight: 400; font-size: 12.5px; vertical-align: middle; }
.of-info th { width: 17%; }
.of-info .of-val { width: 31%; }
.of-info .of-date { width: 26%; }
.of-info .of-date .ed + .ed { margin-inline-start: 3px; }
.of-info .of-no { text-align: end; }
.of-info tr.of-gap td { background: transparent; border-inline: 1.5px solid #C8613F; padding: 0; height: 7px; }
.of-intro { margin: 4px 0 8px; font-weight: 600; font-size: 12.5px; }
.of-items { width: 94%; margin: 0 auto; border-collapse: collapse; table-layout: fixed; }
.of-items th, .of-items td { border: 1px solid #2B2B2B; padding: 3px 6px; text-align: center; vertical-align: middle; font-size: 12px; }
.of-items thead th { background: #E8EAED; font-weight: 500; font-size: 12.5px; }
.of-c-no { width: 7%; position: relative; }
.of-c-name { width: 23%; }
.of-c-desc { width: 26%; }
.of-c-qty { width: 12%; }
.of-c-pic { width: 32%; padding: 2px !important; }
.of-items tbody tr.of-row-pic { height: 27mm; }
.offer-page[data-fit="1"] .of-items tbody tr.of-row-pic { height: 22mm; }
.offer-page[data-fit="2"] .of-items tbody tr.of-row-pic { height: 18mm; }
.offer-page[data-fit="3"] .of-items tbody tr.of-row-pic { height: 14mm; }
.offer-page[data-fit="2"], .offer-page[data-fit="3"] { font-size: 11px; }
.offer-page[data-fit="3"] .of-bul, .offer-page[data-fit="3"] .of-intro { margin-top: 2px; margin-bottom: 2px; }
.of-pic { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 12mm; background: none; border: 0; padding: 0; cursor: pointer; color: #5B6875; font: inherit; }
.of-pic img { max-width: 92%; max-height: 24mm; object-fit: contain; display: block; }
.offer-page[data-fit="1"] .of-pic img { max-height: 19.5mm; }
.offer-page[data-fit="2"] .of-pic img { max-height: 15.5mm; }
.offer-page[data-fit="3"] .of-pic img { max-height: 12mm; }
.of-dash { color: #1A2430; }
.of-items tfoot th, .of-items tfoot td { font-weight: 600; }
.of-items tr.of-total th, .of-items tr.of-total td { background: #F4E46A; font-size: 13px; }
.of-items tr.of-total td { text-align: start; }
.of-items tr.of-sub td { text-align: start; }
.of-bul { margin: 10px 0 4px; padding-inline-start: 22px; }
.of-bul li { margin: 2px 0; }
.offer-page li > .ed { display: block; } /* the bullet stays on the first line of a long note */
.of-sub-title { margin: 6px 0 2px; font-weight: 700; }
.of-bul-block > div { position: relative; padding-inline-start: 22px; margin: 2px 0; }
.of-bul-block > div::before { content: '•'; position: absolute; inset-inline-start: 8px; }
.of-foot { margin-top: auto; padding-top: 6px; border-top: 3px double #2F6DB5; display: grid; grid-template-columns: 1fr 1.1fr 1.6fr; gap: 10px; align-items: start; font-size: 10.5px; line-height: 1.6; }
.of-mail { text-align: left; }
.of-tel { text-align: center; }
.of-addr { text-align: right; }
.of-rows-tools { display: flex; gap: 16px; width: 94%; margin: 4px auto 0; }
.offer-page .btn-link { color: #1C6E98; }
@media screen {
  .offer-page .ed { outline: none; border-radius: 2px; min-width: 1.2em; display: inline-block; cursor: text; transition: background-color .12s; }
  .offer-page div.ed { display: block; }
  .offer-page .ed:hover { background: rgba(58, 166, 216, .1); box-shadow: 0 0 0 1px rgba(58, 166, 216, .4); }
  .offer-page .ed:focus { background: #EAF6FC; box-shadow: 0 0 0 2px #3AA6D8; }
  .offer-page .ed-changed { box-shadow: inset 0 -2px 0 #E8A317; }
  .offer-page .ed-empty { min-width: 3em; min-height: 1.4em; vertical-align: middle; box-shadow: inset 0 -1px 0 #9AA5B1; }
  .of-del { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #C9D1D9; background: #fff; color: #8A3B2E; display: none; align-items: center; justify-content: center; cursor: pointer; }
  .of-items tbody tr:hover .of-del, .of-del:focus-visible { display: inline-flex; }
  .of-pic:hover { background: rgba(58, 166, 216, .08); }
  .of-pic-empty { min-height: 9mm; border: 1px dashed #B7C2CC; border-radius: 4px; font-size: 10.5px; }
  .of-stamp-empty { border: 1px dashed #B7C2CC; border-radius: 4px; font-size: 11px; }
  .of-stamp:hover { background: rgba(58, 166, 216, .08); }
  .offer-page .of-extra.ed-empty { display: block; min-height: 1.6em; box-shadow: none; }
  .offer-page .of-extra.ed-empty:not(:focus)::before { content: attr(data-ph); color: #1C6E98; font-size: 11px; padding-inline-start: 22px; }
  .of-pic-tag { position: absolute; bottom: 2px; inset-inline-start: 2px; font-size: 9.5px; background: #FFF4D6; color: #7A5300; border: 1px solid #F0C36A; border-radius: 3px; padding: 0 4px; }
}
.of-pic-opts .btn { justify-content: center; }
@media print {
  .no-print, .of-tools { display: none !important; }
  .of-stage { height: auto !important; overflow: visible; }
  .of-pages { width: auto; display: block; transform: none !important; }
  .of-pages > article { break-after: page; }
  .of-pages > article:last-of-type { break-after: auto; }
  .of-pages .report { width: auto; }
  .offer-page .ed-multi.ed-empty { display: none; }
  .offer-page { width: auto; min-height: 295mm; padding: 9mm; transform: none !important; }
  .offer-page li:has(> .ed-empty) { display: none; }
  .of-pic { cursor: default; }
}

@media (max-width: 720px) {
  .page { padding: 16px 14px 110px; gap: 18px; }
  .topbar-in { padding: 0 14px; gap: 0 14px; }
  .brand-app, .user-chip { display: none; }
  .nav { order: 3; width: 100%; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none;
    mask-image: linear-gradient(to var(--fade-to, left), #000 85%, transparent); }
  [dir="rtl"] .nav { --fade-to: left; } [dir="ltr"] .nav { --fade-to: right; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 10px 12px; }
  .hero { margin-top: -16px; }
  .hero-in { padding: 22px 14px 0; }
  .sun-now b { font-size: var(--fs-sm); }
  .sun-now span { font-size: var(--fs-xs); }
  .hero h1 { font-size: var(--fs-3xl); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 0 16px; border-inline-start: 0; }
  .kpi:nth-child(even) { border-inline-start: 1px solid var(--line); padding-inline-start: 14px; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi .v { font-size: var(--fs-2xl); }
  .kpi .v.money { font-size: var(--fs-lg); }
  .hero .kpis { display: grid; }
  .hero .kpi { padding-inline: 0; }
  .hero .kpi:nth-child(even) { padding-inline-start: 14px; }
  .hero .kpi .v.money { font-size: var(--fs-xl); }
  .card { padding: var(--sp-4); }
  .savebar { margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: 10px var(--sp-4); }
  h1 { font-size: var(--fs-2xl); }
  .input, .select, .textarea { font-size: 16px; } /* 16px stops iOS from zooming into fields */
  .proj-head h1 { font-size: var(--fs-2xl); }
  .proj-actions { align-items: flex-start; }
  .stepper { gap: 3px; }
  .cell-btn { min-height: 58px; padding: 8px 6px; align-items: center; justify-content: center; }
  .cell-btn .label-wrap { display: none; }
  .cell-btn .n { font-size: var(--fs-lg); justify-content: center; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .tool-end { width: 100%; }
  .search { flex: 1 1 auto; min-width: 0; }
}

@media (pointer: coarse) {
  .acc-x, .copy-one { width: 40px; height: 40px; }
  .btn-sm { min-height: 40px; }
}

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

/* ---------- Moving between pages: a short cross-fade while the top bar holds still (app.js starts it) ---------- */
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar), ::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
::view-transition-old(root) { animation: vt-out .12s ease-out both; }
::view-transition-new(root) { animation: vt-in .24s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Storage: list (right) · search (middle) · new item (left) ---- */
.store { display: grid; gap: 16px; grid-template-columns: minmax(0, 2.6fr) minmax(280px, 1fr); align-items: start; }
/* Search and the "new item" button stay in view while the list scrolls. */
.store-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.store-new { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; font: inherit; color: var(--frost); cursor: pointer;
  background: var(--deep); border: 1px dashed var(--control); border-radius: var(--r-l); padding: 14px 16px; }
.store-new:hover { border-color: var(--sky); background: var(--deep-2); }
.store-new:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.store-new .grow { display: flex; flex-direction: column; gap: 2px; }
.store-new b { font-weight: 600; font-size: var(--fs-md); }
.store-new-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-m); background: var(--frost); color: var(--on-frost); flex: none; }
.store-search { display: flex; flex-direction: column; gap: 14px; border-color: var(--line-3); }
.store-q { position: relative; display: flex; align-items: center; }
.store-q svg { position: absolute; inset-inline-start: 14px; color: var(--mist); pointer-events: none; }
.store-q .input { font-size: var(--fs-xl); min-height: 58px; padding-inline: 46px 42px; border-color: var(--line-3); }
.store-q .input:focus { border-color: var(--sky); }
.store-q .input::-webkit-search-cancel-button { display: none; }
.store-clear { position: absolute; inset-inline-end: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--mist); border-radius: var(--r-s); }
.store-clear:hover { color: var(--frost); background: var(--deep-2); }
.store-count { display: flex; align-items: baseline; gap: 10px; color: var(--mist); }
.store-count .n { font-size: var(--fs-4xl); font-weight: 300; line-height: 1; color: var(--frost); letter-spacing: -.02em; }
.store-value { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.store-search .chip[aria-pressed="true"] { background: var(--frost); color: var(--on-frost); border-color: var(--frost); }
.store-search .chip[aria-pressed="true"] .muted { color: var(--on-frost-2); }
/* Step 6 price against cost */
.profit { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 12px; }
.profit-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profit-sum > div { border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.profit-sum .k { color: var(--text-2); font-size: var(--fs-sm); }
.profit-sum .v { font-size: var(--fs-xl); color: var(--frost); font-weight: 500; }
.profit-sum .is-pos { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.profit-sum .is-pos .v, .profit-sum .is-pos .xs { color: var(--st-done-fg); }
.profit-sum .is-neg { border-color: color-mix(in srgb, var(--coral) 50%, transparent); }
.profit-sum .is-neg .v, .profit-sum .is-neg .xs { color: var(--st-canceled-fg); }
.profit-warn { margin: 0; color: var(--st-buying-fg); }
.profit-parts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.profit-parts div { display: flex; gap: 8px; }
.profit-parts dt { color: var(--text-2); }
.profit-parts dd { margin: 0; }
.profit-t td.pos { color: var(--st-done-fg); }
.profit-t td.neg { color: var(--st-canceled-fg); }
.profit-t tr.zero td:not(:first-child) { color: var(--haze); }
@media (max-width: 640px) { .profit-sum { grid-template-columns: 1fr; } }
/* Step 4 shopping list */
.shop { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 8px; }
.shop > .section-title { margin: 0; }
.shop-t td.std-sale { color: var(--text-2); }
.shop-t .price-in { width: 116px; min-height: 34px; padding: 4px 8px; display: inline-block; }
.shop-t td b { color: var(--frost); font-weight: 600; }
.shop-t .unit { color: var(--text-2); font-size: var(--fs-xs); }
.shop-t .qty-in { width: 84px; min-height: 34px; padding: 4px 8px; display: inline-block; }
.shop-t tr.zero td { color: var(--haze); }
.shop-ok, .shop-done { color: var(--st-done-fg); }
.shop-done { display: flex; align-items: center; gap: 8px; margin: 0; }
@media (max-width: 640px) { table.shop-t td, table.shop-t th { padding-inline: 8px; } .shop-t .price-in { width: 96px; } .shop-t .qty-in { width: 64px; } }
/* Category filters above the three columns (the old price list tabs) */
.store-kinds { margin: var(--sp-5) 0 var(--sp-5); }
.store-kinds .chip svg { color: var(--text-2); }
.store-kinds .chip[aria-pressed="true"] svg { color: var(--on-frost); }
/* Under an item's name: category, model, the numbers the calculator uses, and flags */
.st-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-2); }
.st-facts .st-kind { color: var(--sky-soft); }
.st-facts .badge { min-height: 20px; padding: 0 8px; font-size: var(--fs-xs); }
/* Technical details in the add form and the item window */
fieldset.tech-wrap { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.tech-wrap:disabled .input, fieldset.tech-wrap:disabled .select { opacity: .75; }
fieldset.tech { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--line-2); border-radius: var(--r-s); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
fieldset.tech legend { padding: 0 6px; font-size: var(--fs-sm); color: var(--text-2); }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px; }
.tech-grid .wide { grid-column: 1 / -1; }
.store-add .tech-grid { grid-template-columns: 1fr 1fr; }
.store-add .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-t tbody tr { cursor: pointer; }
.store-t tbody tr:hover td { background: var(--deep-2); }
.store-t tr.out .num:not(:last-child), .store-t tr.out td:nth-child(2) .num { color: var(--st-canceled-fg); }
.store-t tr.fresh td { background: var(--st-progress-bg); }
.row-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
mark { background: rgba(74, 192, 232, .2); color: var(--sky-soft); border-radius: 2px; }
.unit { color: var(--mist); font-size: var(--fs-sm); }
.unit-sm { display: none; }
.moves { max-height: 320px; overflow: auto; }
.moves .neg { color: var(--st-canceled-fg); }
.moves .pos { color: var(--st-done-fg); }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-line; }
@media (max-width: 1080px) {
  .store { grid-template-columns: minmax(0, 1fr); }
  .store-side { order: -1; position: static; }
}

/* ---- Step 3: final price after discount ---- */
.price-final { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 14px 16px; background: var(--deep-2); }
.price-final .v { font-size: var(--fs-2xl); font-weight: 500; margin-top: 2px; }

/* ---- Step 5: materials vs. storage ---- */
.mat-t .qty-in { width: 84px; min-height: 34px; padding: 4px 8px; display: inline-block; }
.diff-short { color: var(--st-canceled-fg); font-size: var(--fs-ui); }
.diff-over { color: var(--st-buying-fg); font-size: var(--fs-ui); }
.mat-pick { position: relative; display: flex; align-items: center; max-width: 460px; }
.mat-pick > svg { position: absolute; inset-inline-start: 12px; color: var(--mist); pointer-events: none; }
.mat-pick .input { padding-inline-start: 38px; }
.mat-menu { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 20; background: var(--deep); border: 1px solid var(--line-3); border-radius: var(--r-m); max-height: 320px; overflow: auto; box-shadow: 0 12px 30px var(--shadow); }
.mat-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--frost); padding: 10px 12px; font: inherit; cursor: pointer; }
.mat-opt:hover, .mat-opt:focus-visible { background: var(--deep-2); }
.mat-oneoff { color: var(--sky-soft); border-bottom: 0; }
@media print { .mat-pick, .acc-x { display: none; } }

/* ---- Storage: quantity edited in place ---- */
.ltr-cell { direction: ltr; unicode-bidi: isolate; text-align: start; }
.qty-cell { display: inline-flex; align-items: center; gap: 8px; }
.qty-box { width: 92px; min-height: 36px; padding: 4px 10px; text-align: end; border-color: var(--line-3); }
.qty-box.low { color: var(--st-canceled-fg); }
.qty-box:focus { border-color: var(--sky); }
.qty-state { width: 14px; display: inline-grid; place-items: center; color: var(--st-done-fg); font-weight: 700; }
.qty-state.error { color: var(--st-canceled-fg); }
.store-t td.st-name { user-select: text; }
.store-t .acc-x { opacity: .7; }
.store-t tr:hover .acc-x { opacity: 1; }
@media (max-width: 640px) { .qty-cell .unit { display: none; } .unit-sm { display: block; margin-top: 2px; } .qty-box { width: 64px; padding: 4px 8px; } .qty-cell { gap: 5px; } .store-t td, .store-t th { padding-inline: 8px; } }
.st-name-in { display: flex; align-items: center; gap: 6px; }
.st-name-in bdi.grow { flex: 0 1 auto; }
.copy-one { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--haze); border-radius: var(--r-s); cursor: pointer; }
.copy-one:hover, .copy-one:focus-visible { color: var(--frost); background: var(--deep-2); }
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.log-filters .select { flex: 1; min-width: 140px; min-height: 38px; padding-block: 6px; font-size: var(--fs-ui); }
.log-who, .log-step { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.log-who { font-weight: 500; }
.log-who:hover, .log-step:hover { color: var(--sky-soft); text-decoration: underline; text-underline-offset: 3px; }
.log-step { color: var(--haze); margin-inline-start: 8px; font-size: var(--fs-xs); }
.log-changes { list-style: none; margin: 4px 0 2px; padding: 0 10px; border-inline-start: 2px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--mist); }
.log-changes li { padding: 0; border: 0; }
.paste-add { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.paste-add summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--sky-soft); font-size: var(--fs-ui); list-style: none; }
.paste-add summary::-webkit-details-marker { display: none; }
.paste-add .textarea { min-height: 110px; font-size: var(--fs-sm); }
.paste-prev { margin-top: 10px; max-height: 260px; overflow: auto; }
.paste-prev .t td, .paste-prev .t th { padding: 6px 8px; font-size: var(--fs-sm); }

/* ---- Step 4: receipts (made for a phone) ---- */
.pur-new { min-height: 52px; font-size: var(--fs-md); align-self: flex-start; padding-inline: 22px; }
.rform { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line-3); border-radius: var(--r-m); background: var(--deep-2); }
.rform-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rform-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 500; }
.rform-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rlines { display: flex; flex-direction: column; gap: 10px; }
.rline { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--deep); }
.rline-top { display: flex; align-items: center; gap: 8px; }
.rline-n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--line-2); font-size: var(--fs-xs); color: var(--mist); }
.rline-nums { display: flex; align-items: center; gap: 8px; }
.qty-step { display: flex; align-items: stretch; flex: none; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.qty-step button { width: 40px; background: var(--deep-2); border: 0; color: var(--frost); font-size: var(--fs-xl); line-height: 1; }
.qty-step button:active { background: var(--line-2); }
.qty-step .input { width: 58px; border: 0; border-radius: 0; text-align: center; padding-inline: 4px; }
.rline-price { flex: 1; min-width: 0; }
.rline-total { flex: none; min-width: 74px; text-align: end; color: var(--mist); font-size: var(--fs-ui); }
.rform-more { align-self: flex-start; }
.rform-extra summary { cursor: pointer; color: var(--sky-soft); font-size: var(--fs-ui); }
.rform-extra[open] summary { margin-bottom: 10px; }
.rform-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 2px; background: var(--deep-2); border-top: 1px solid var(--line-2); }
.rform-save .btn { min-height: 48px; padding-inline: 22px; font-size: var(--fs-md); }
.pur-group { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.pur-group.waiting > .row .bold:first-child { color: var(--st-buying-fg); }
.rcpts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rcpt { border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--deep); }
.rcpt.on { border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky) inset; }
.waiting .rcpt { border-style: dashed; }
.rcpt header { display: flex; align-items: flex-start; gap: 10px; }
.rcpt-pick { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.rcpt-pick input { width: 20px; height: 20px; accent-color: var(--sky); }
.rcpt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rcpt li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: var(--fs-ui); }
.rcpt li .acc-x { width: 26px; height: 26px; }
.rcpt .btn-link { align-self: flex-start; }
.assign-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--sky); border-radius: var(--r-m); background: var(--deep); box-shadow: 0 10px 30px var(--shadow); }
.assign-bar .input { flex: 1; min-width: 120px; }
@media (max-width: 640px) {
  .pur .input, .pur .select { font-size: 16px; }
  .pur-new { align-self: stretch; }
  .rcpts { grid-template-columns: 1fr; }
  .rform { margin-inline: -6px; padding: 12px 10px; }
  .rline-nums { flex-wrap: wrap; row-gap: 4px; }
  .rline-total { flex-basis: 100%; }
  .qty-step button { width: 38px; }
  .qty-step .input { width: 48px; }
}

/* ---- Advance settlement sheet (simple) ---- */
.adv-title { font-size: 18px; font-weight: 600; margin: 0 0 10px; color: #1D3A52; }
.advance table.adv-facts { width: auto; min-width: 55%; border-collapse: collapse; margin-bottom: 14px; font-size: 12.5px; }
.advance table.adv-facts th { text-align: start; font-weight: 500; color: #44515E; padding: 4px 16px 4px 0; white-space: nowrap; }
[dir="rtl"] .advance table.adv-facts th { padding: 4px 0 4px 16px; }
.advance table.adv-facts td { padding: 4px 0; border-bottom: 1px solid #C9D3DC; min-width: 180px; }
.advance table.grid .c { text-align: center; }
.advance table.grid tfoot th { background: #EEF3F7; text-align: start; }
.rcpt-note { margin: 0; color: var(--text-2); border-inline-start: 2px solid var(--line-3); padding-inline-start: 8px; }
.rcpt-note-edit .input { min-width: 0; }
.rcpt header .num, .rcpt li .num { white-space: nowrap; }

/* ---- Phones: the materials table becomes one card per item (labels come from data-label) ---- */
@media (max-width: 640px) {
  .mat .table-wrap { border: 0; overflow: visible; }
  .mat-t thead { display: none; }
  .mat-t, .mat-t tbody, .mat-t tr, .mat-t td { display: block; width: 100%; }
  .mat-t tbody tr { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 10px; background: var(--deep); }
  table.mat-t td { border: 0; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; }
  table.mat-t td:first-child { font-weight: 500; padding-inline-end: 44px; padding-bottom: 8px; }
  .mat-t td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--text-2); font-size: var(--fs-sm); }
  table.mat-t td:last-child:not([data-label]) { position: absolute; top: 6px; inset-inline-end: 6px; width: auto; padding: 0; }
  .mat-t .qty-in { width: 96px; }
}

/* ---- Phones: each storage item on two lines — name, then quantity and price ---- */
@media (max-width: 640px) {
  .store-list .table-wrap { overflow: visible; }
  .store-t thead { display: none; }
  .store-t, .store-t tbody { display: block; }
  .store-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .store-t tbody tr:first-child { border-top: 0; }
  table.store-t td { display: block; padding: 0; border: 0; background: none; }
  table.store-t td.hide-sm { display: none; }
  table.store-t tbody tr:hover td { background: none; }
  .store-t tbody tr:hover { background: var(--row-hover); }
  .store-t td.st-name { grid-column: 1 / -1; }
  table.store-t td[data-label] { display: flex; flex-direction: column; gap: 2px; }
  .store-t td[data-label]::before { content: attr(data-label); color: var(--text-2); font-size: var(--fs-xs); }
  .store-t td.end[data-label] { align-items: flex-end; }
  .store-t .qty-box { width: 96px; }
}

/* ---- Calculator: equipment choice + count ---- */
.calc-equip { display: flex; flex-direction: column; gap: var(--sp-3); }
.calc-equip-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: var(--sp-2); align-items: start; }
.count-in .input { text-align: end; }
.count-in .input::placeholder { color: var(--mist); }

/* ---- Advance details (screen only) ---- */
.adv-edit { width: min(210mm, 100%); margin: 0 auto; }
.adv-edit h2 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--sp-3); }
@media print { .adv-edit { display: none !important; } }

/* ---- Step 4: same-receipt shortcut and advance numbers ---- */
.rcpt-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: 10px 12px; border: 1px solid rgba(88, 214, 155, .4); background: var(--st-done-bg); border-radius: var(--r-m); color: var(--st-done-fg); }
.rcpt-saved svg { vertical-align: -3px; }
.rform-join { margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--sky); background: var(--st-progress-bg); color: var(--st-progress-fg); border-radius: var(--r-s); }
.rcpt-adv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adv-inline .input { flex: 1 1 140px; min-width: 0; }
.adv-inline .xs { flex-basis: 100%; }
.rform input[readonly] { color: var(--text-2); }
@media (max-width: 640px) { .rcpt-saved .btn { flex: 1 1 100%; } }
/* Advance sheet: facts on the reading-start side, the settlement date at the other end; wider notes. */
.adv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.adv-top .adv-facts { margin-bottom: 0; }
.adv-date { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid #C9D3DC; border-radius: 4px; padding: 6px 14px; font-size: 12px; white-space: nowrap; }
.adv-date span { color: #5B6875; font-size: 11px; }
.advance table.adv-t col.c-seq { width: 5%; }
.advance table.adv-t col.c-notes { width: 26%; }
.advance table.grid tfoot tr.adv-left th { background: #fff; border-top: 2px solid #1D3A52; font-size: 12.5px; }
.advance table.grid tfoot tr.adv-left.neg .num { color: #B3261E; }
.advance table.grid tfoot .adv-left-note { font-weight: 400; color: #5B6875; }
.advance table.adv-sum { margin-top: 14px; }
.advance table.adv-sum td.neg, .advance table.adv-sum tr.neg .num { color: #B3261E; }
.advance p.adv-left-note { margin: 6px 0 0; color: #5B6875; }
/* The items sheet: one table per advance, a shaded line per receipt with its items under it. */
.advance .adv-block { margin-top: 14px; }
.advance .adv-block + .adv-block { margin-top: 22px; }
.advance h2.adv-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #1D3A52; font-size: 12.5px; font-weight: 400; color: #15202B; break-after: avoid; }
.advance h2.adv-h .adv-h-no { font-size: 14px; font-weight: 600; color: #1D3A52; }
.advance h2.adv-h small { font-size: 11px; color: #5B6875; }
.advance table.adv-items { table-layout: fixed; }
.advance table.adv-items col.c-qty { width: 11%; }
.advance table.adv-items col.c-price { width: 19%; }
.advance table.adv-items col.c-total { width: 19%; }
.advance table.adv-items tbody { break-inside: avoid; }
.advance table.adv-items td.num, .advance table.adv-items th.num { text-align: end; }
.advance table.adv-items thead th:not(:first-child) { text-align: end; }
.advance table.adv-items tr.adv-rc td { background: #F3F6F9; border-top: 1.5px solid #9FB0BF; padding-top: 4px; padding-bottom: 4px; }
.adv-rc-in { display: flex; align-items: baseline; gap: 10px; }
.adv-rc-n { flex: none; min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; background: #1D3A52; color: #fff; font-size: 10.5px; }
.adv-rc-what { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.adv-rc-what > span { color: #44515E; }
.adv-rc-note { flex-basis: 100%; font-size: 10.5px; color: #5B6875 !important; }
.adv-rc-sum { flex: none; color: #44515E; }
.adv-rc-sum b { color: #15202B; margin-inline-start: 4px; }
.advance table.adv-items tfoot th:last-child { text-align: end; }
.advance table.adv-items .adv-left-note, .advance table.adv-sum .adv-left-note { font-weight: 400; color: #5B6875; }
.advance table.adv-sum td.num, .advance table.adv-sum th.num { text-align: end; }
.advance .adv-all-sum { break-inside: avoid; }
/* Step 5 materials report */
.mat-report table.adv-t tr.mr-bad td { background: #FFF6E5; }
.mat-report .mr-tag { font-size: 10px; color: #5B6875; border: 1px solid #C9D3DC; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.mr-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
.mr-sign div { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.mr-sign span { font-weight: 600; }
.mr-sign i { display: block; height: 40px; border-bottom: 1px solid #44515E; }
.mr-sign small { color: #5B6875; font-size: 10.5px; }
.mat-ro { color: var(--text-2); }
.sm-tab .sm-pick { max-width: 560px; }
.sm-tab .sm-meta { gap: 6px 14px; }
.sm-tab .mat { margin-top: 0; }
.store-kinds .chip-match { border-color: var(--sky); }
.mat-who { color: var(--text-2); }

/* ---------- Theme switch and the السلفة page ---------- */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.rcp-page { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Form on the start side (right in Arabic), receipts on the end side (left); stacked on phones. */
.rcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.rcp-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.rcp-field { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-2); }
.rcp-field.rcp-picked { flex-direction: row; align-items: center; gap: var(--sp-3); }
.rcp-side { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; min-width: 0; }
.rcp-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.rcp-side-head h2 { margin: 0; }
.rcp-proj { width: auto; min-width: 170px; max-width: 100%; }
.rcp-receipts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rcp-r { border-top: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.rcp-r:first-child { border-top: 0; }
.rcp-r-top { display: flex; align-items: flex-start; gap: 10px; }
.rcp-check { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--sky); flex: none; }
.rcp-r summary { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; list-style: none; }
.rcp-r summary::-webkit-details-marker { display: none; }
.rcp-r-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rcp-r-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rcp-r details[open] summary { margin-bottom: 8px; }
.rcp-r details > a { display: inline-block; margin-top: 6px; }
.rcp-lines { font-size: var(--fs-sm); }
.rcp-lines td, .rcp-lines th { padding: 4px 8px; }
.rcp-adv { display: flex; flex-wrap: wrap; gap: 6px; padding-inline-start: 28px; }
.rcp-adv .input { max-width: 170px; min-height: 36px; }
.rcp-adv-btn { align-self: flex-start; margin-inline-start: 28px; }
.badge-warn-soft { background: var(--st-buying-bg); color: var(--st-buying-fg); }
.rcp-side .assign-bar { bottom: 0; }
@media (max-width: 900px) { .rcp-grid { grid-template-columns: minmax(0, 1fr); } .rcp-side { position: static; max-height: none; } }
.rcp-pname { font-size: var(--fs-lg); font-weight: 500; color: var(--frost); }
.rcp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rcp-opt { width: 100%; display: flex; align-items: center; gap: var(--sp-3); text-align: start; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: var(--r-m); background: var(--deep); color: inherit; min-height: 50px; }
.rcp-field .rcp-opt { padding: 8px 12px; }
.rcp-opt:hover { border-color: var(--line-3); background: var(--deep-2); }
.rcp-opt .grow { display: flex; flex-direction: column; min-width: 0; }
.rcp-page > .rform { margin-inline: 0; }
.rcp-field .store-q .input { font-size: var(--fs-md); min-height: 48px; }

/* The project dropdown on the السلف page */
.rcp-field { position: relative; }
.rcp-dd { width: 100%; display: flex; align-items: center; text-align: start; min-height: 48px; cursor: pointer; }
.rcp-dd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-pop { position: absolute; top: calc(100% - 6px); inset-inline: 0; z-index: 25; background: var(--deep); border: 1px solid var(--line-3);
  border-radius: var(--r-m); box-shadow: 0 12px 30px var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rcp-pop .store-q .input { min-height: 42px; font-size: var(--fs-md); }
.rcp-dd-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.rcp-dd-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; color: inherit;
  text-align: start; border-radius: var(--r-s); font-size: var(--fs-ui); }
.rcp-dd-opt.rcp-store { border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; }
.rcp-dd-opt.rcp-store bdi { font-weight: 600; }
.rcp-dd-opt.rcp-store svg { color: var(--st-buying-fg); flex: none; }
.rcp-dd-opt.hi, .rcp-dd-opt:hover { background: var(--deep-2); }
.rcp-dd-opt[aria-selected="true"] bdi { color: var(--sky-soft); font-weight: 500; }
/* Team: one role at a time */
.role-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.role-pick .field { flex: 1 1 260px; max-width: 420px; }

/* ---------- Notifications ---------- */
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.bell-n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sun, #F2B544); color: #1A1204; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--night); }
.drawer.notices .drawer-head h2 { margin-inline-end: auto; }
.drawer.notices .log-list li { padding: 0; }
.nt-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; margin: 0 -8px; color: inherit; text-decoration: none; border-radius: var(--r-s); }
.nt-item:hover { background: var(--deep-2); }
.nt-item .log-changes { margin: 2px 0 0; }
.nt-prefs { margin-top: 20px; max-width: 640px; }
.nt-group { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--line-2); border-radius: var(--r-s); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nt-group legend { padding: 0 6px; font-size: var(--fs-sm); color: var(--text-2); }
.nt-group:disabled { opacity: .5; }
.nt-quick { gap: 16px; }
.nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 16px; }
.nt-grid .check { min-height: 40px; }
.nt-device { border-top: 1px solid var(--line); padding-top: 14px; gap: 10px; }
.nt-device h3 { font-size: var(--fs-md); }
.nt-on { display: flex; align-items: center; gap: 8px; color: var(--st-done-fg); font-size: var(--fs-ui); }
.nt-note { max-width: 60ch; }

/* ---------- Receipts and storage ---------- */
.rline-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 6px; padding-inline-start: 30px; }
.rline-stock.ok { color: var(--st-done-fg); }
.rline-stock.new { color: var(--amber, #E8A317); }
.rline-stock .muted { color: var(--mist); }
.rline-upd { color: var(--sky-soft); }
.rc-ask { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-ask li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-s); }
.danger-link { color: var(--st-canceled-fg) !important; text-decoration-color: currentColor; }
.rcp-r-acts { gap: 6px 16px; margin-top: 8px; flex-wrap: wrap; }
.rcp-editing { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--deep-2); }
.layout-more { align-self: center; font-size: var(--fs-xs); color: var(--st-canceled-fg); white-space: nowrap; padding-inline-start: 4px; }

/* ---------- A storage item's history: what changed its quantity, who and when ---------- */
.hist { display: flex; flex-direction: column; gap: 12px; }
.hist-now { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-ui); }
.hist-now b { font-size: var(--fs-2xl); font-weight: 400; color: var(--frost); }
.hist-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; border-top: 1px solid var(--line); }
.hist-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hist-q { font-size: var(--fs-lg); line-height: 1.3; text-align: end; font-variant-numeric: tabular-nums; }
.hist-q.pos { color: var(--st-done-fg); } .hist-q.neg { color: var(--st-canceled-fg); }
.hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-what { font-size: var(--fs-ui); }
.hist-by { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-sm); color: var(--mist); }
.hist-by b { color: var(--frost); font-weight: 500; }
.hist-after { white-space: nowrap; padding-top: 3px; }
@media (max-width: 640px) {
  .hist-list li { grid-template-columns: 52px minmax(0, 1fr); }
  .hist-after { grid-column: 2; padding-top: 0; }
}

/* ---------- My account: how dates are written ---------- */
.ds-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-opt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot name" "dot sample"; align-items: center; column-gap: 12px; min-width: 220px; flex: 1 1 220px;
  padding: 12px 16px; border: 1px solid var(--control); border-radius: var(--r-m); cursor: pointer; }
.ds-opt:hover { border-color: var(--control-hover); }
.ds-opt.on { border-color: var(--sky); background: var(--st-progress-bg); }
.ds-opt input { grid-area: dot; width: 18px; height: 18px; accent-color: var(--sky); margin: 0; }
.ds-name { grid-area: name; font-weight: 500; }
.ds-sample { grid-area: sample; }

/* ---------- The السلف page: each advance's settlement sheet ---------- */
.rcp-advs { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.rcp-advs h3 { margin: 0; font-size: var(--fs-ui); font-weight: 500; }
.rcp-advs ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.rcp-advs li { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.rcp-adv-row { display: flex; align-items: center; gap: 10px; }
.rcp-advs-q { margin-top: 4px; }
.rcp-advs-q .input { font-size: var(--fs-ui); min-height: 40px; padding-inline: 40px 12px; }
.rcp-advs-q svg { inset-inline-start: 13px; }
.rcp-adv-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; padding-bottom: 2px; }
.rcp-adv-opt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--deep); color: var(--frost); text-decoration: none; }
.rcp-adv-opt:hover { border-color: var(--sky); }
.rcp-adv-opt svg { flex: none; margin-top: 2px; color: var(--sky-soft); }
.rcp-adv-opt span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rcp-adv-opt b { font-weight: 500; font-size: var(--fs-ui); }
.rcp-adv-opt small { color: var(--mist); font-size: var(--fs-xs); }
.rcp-advs li + li { border-top: 1px solid var(--line); }
.rcp-adv-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.rcp-adv-info .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-advs .btn-sm { flex: none; }
.acc-t .acc-note { width: 180px; min-height: 34px; padding: 4px 8px; display: inline-block; margin-inline-start: 10px; font-size: var(--fs-sm); }
@media (max-width: 640px) { .acc-t .acc-note { width: 120px; } }
/* Step 4 purchases report */
.pur-report table.pr-items col.c-seq { width: 6%; }
.pur-report table.pr-items col.c-qty { width: 12%; }
.pur-report table.pr-items col.c-price, .pur-report table.pr-items col.c-total { width: 20%; }
.pur-report table.pr-items col.c-qty-wide { width: 24%; }
.pur-report table.pr-items tfoot th { background: #fff; border-top: 2px solid #1D3A52; font-size: 12.5px; }
.pur-report .pr-unit { color: #5B6875; font-size: 10px; }
/* Storage page materials check: by person, by day */
.sm-actions { gap: 8px 10px; }
.sm-days { display: flex; flex-direction: column; gap: 8px; }
.sm-day { border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--deep); }
.sm-day-head { width: 100%; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 14px; border: 0; background: none;
  color: inherit; text-align: start; cursor: pointer; border-radius: var(--r-m); }
.sm-day-head:hover { background: var(--deep-2); }
.sm-day-head > svg { color: var(--mist); flex: none; transition: transform .15s; }
.sm-day.on .sm-day-head > svg { transform: rotate(180deg); }
.sm-day-date { display: flex; flex-direction: column; min-width: 150px; }
.sm-day-sum { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sm-day-out { color: var(--frost); font-weight: 500; }
.sm-day-back { color: var(--st-done-fg); }
.sm-day .table-wrap { margin: 0 10px; }
.sm-day-note { margin: 6px 14px 12px; }
.sm-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line-3); border-radius: var(--r-m); background: var(--deep); }
.sm-form-head { gap: 8px 14px; flex-wrap: wrap; }
.sm-form-head h2 { margin: 0; }
.sm-trip-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--deep-2);
  border: 1px solid var(--line-3); font-size: var(--fs-sm); }
[dir="rtl"] .sm-chip { padding: 4px 12px 4px 6px; }
.sm-chip button { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--mist); cursor: pointer; }
.sm-chip button:hover { background: var(--line-2); color: var(--frost); }
.sm-add-project { flex: 1 1 220px; max-width: 360px; }
.sm-add-project .rcp-field { padding-bottom: 0; border-bottom: 0; }
.sm-add-project .rcp-dd { min-height: 40px; }
.sm-t .sm-group td { background: var(--deep-2); font-weight: 600; font-size: var(--fs-sm); color: var(--frost); }
.sm-t .qty-in { width: 84px; }
.sm-filter { max-width: 360px; }
.sm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sm-add .mat-pick { flex: 1 1 260px; }
.sm-add-to { display: flex; align-items: center; gap: 8px; }
.sm-add-to .select { width: auto; min-height: 42px; }
@media (prefers-reduced-motion: reduce) { .sm-day-head > svg { transition: none; } }
@media (max-width: 640px) {
  .sm-t tbody tr.sm-group { padding: 6px 12px; margin-bottom: 6px; background: var(--deep-2); }
  .sm-day .table-wrap { margin: 0 8px; }
  .sm-form { padding: 10px; }
}
.st-view-only { vertical-align: middle; margin-inline-start: 10px; font-size: var(--fs-sm); }
.store-t .qty-ro { font-weight: 500; }
.store-t .qty-ro.low { color: var(--st-canceled-fg); }
.sm-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sm-range label { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.sm-range .input { width: auto; min-height: 36px; padding: 4px 8px; }
.sm-day-people { color: var(--text-2); }
.sm-form-person { max-width: 420px; }
.sm-form-person .rcp-field { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 640px) { .sm-range { width: 100%; } .sm-range label { flex: 1 1 140px; } .sm-range .input { flex: 1; min-width: 0; } }
.sm-t .sm-person td { background: color-mix(in srgb, var(--sky) 12%, var(--deep-2)); border-top: 1px solid color-mix(in srgb, var(--sky) 35%, transparent); }
.sm-person-in { display: inline-flex; align-items: center; gap: 8px; color: var(--frost); font-weight: 600; }
.sm-person-in svg { color: var(--sky); flex: none; }
.sm-person-in .xs { font-weight: 400; }
@media (max-width: 640px) { .sm-t tbody tr.sm-person { background: color-mix(in srgb, var(--sky) 12%, var(--deep-2)); } }
/* On phones the materials table turns into cards; a group heading row (a project, a person) is a plain full-width line. */
@media (max-width: 640px) {
  table.mat-t tr.sm-group td, table.mat-t tr.sm-group td:last-child:not([data-label]) { position: static; width: 100%; padding: 0; display: block; background: none; border: 0; }
  .sm-t tbody tr.sm-group { padding: 8px 12px; margin: 10px 0 6px; }
}
/* السلف page: one search, the receipts waiting for a number, and each advance opening to its receipts */
.rcp-group { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line-2)); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--amber) 6%, transparent); }
.rcp-group-head { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.rcp-group .rcp-receipts .rcp-r:first-child { border-top: 0; }
.rcp-adv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rcp-adv-g { border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--deep); }
.rcp-adv-g.on { border-color: color-mix(in srgb, var(--mint) 45%, var(--line-2)); }
.rcp-adv-g .rcp-adv-row { padding: 4px 8px 4px 4px; }
[dir="rtl"] .rcp-adv-g .rcp-adv-row { padding: 4px 4px 4px 8px; }
.rcp-adv-toggle { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 6px; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; border-radius: var(--r-s); }
.rcp-adv-toggle:hover { background: var(--deep-2); }
.rcp-adv-toggle > svg { flex: none; color: var(--mist); transition: transform .15s; }
.rcp-adv-g.on .rcp-adv-toggle > svg { transform: rotate(180deg); color: var(--st-done-fg); }
.rcp-adv-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rcp-adv-g.on .rcp-adv-info b { color: var(--st-done-fg); }
.rcp-adv-total { flex: none; }
.rcp-adv-body { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 8px; border-top: 1px solid color-mix(in srgb, var(--mint) 30%, var(--line)); background: color-mix(in srgb, var(--mint) 6%, transparent); border-radius: 0 0 var(--r-m) var(--r-m); }
.rcp-adv-body .rcp-receipts .rcp-r:first-child { border-top: 0; }
.rcp-pdf { position: relative; flex: none; }
.rcp-pdf-pop { position: absolute; z-index: 20; top: calc(100% + 4px); inset-inline-end: 0; width: 260px; grid-template-columns: 1fr; padding: 6px; background: var(--deep); border: 1px solid var(--line-3); border-radius: var(--r-m); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .rcp-adv-toggle > svg { transition: none; } }