/* Tiber Lake PMS design system: "Emerald console".

   Four stylesheets, each with one owner:
   - pms.css (this file): the tokens, the fonts, every shared component, the app layer the staff
     console and the portals share (body.ws), and the brand pages (landing, entrances and sign-in,
     errors, offline) in one marked section. Every page loads it.
   - workspace.css: the staff console only (body.ws-staff): its shell and its working density.
   - portal.css: the portals only (body.ws-portal): their shell and their sizes.
   - brand/theme.css: the operator's three colours, loaded last (empty in the product, so the
     defaults below apply). Its comment holds the contrast rules for operator colours.
   A shell file changes a shared component only by overriding it under its own body class, never
   by editing it here, so the console and the portals cannot restyle each other.

   - White label: three colours, --brand, --brand-ink and --accent. Every other brand tone, tint and
     gradient derives from them with color-mix(); no brand colour is written out anywhere else.
   - Status colours carry meaning, not brand: one meaning per hue, fixed (see Status).
   - Inter for all text, with tabular figures wherever money, counts and dates line up. IBM Plex Mono
     only for real codes and identifiers (.mono: cheque, invoice, receipt and repair numbers,
     DEWA, Ejari and permit numbers, Wi-Fi passwords, door codes). Eyebrows, breadcrumbs, labels and
     captions are sentence-case Inter, never mono capitals.
   - WCAG 2.2 AA: text 4.5:1 or more, control borders and focus rings 3:1 or more, visible focus on
     everything interactive, logical properties so RTL mirrors, motion off under
     prefers-reduced-motion, forced colours and print handled. */

/* ---------- Fonts (self-hosted: the CSP allows fonts from 'self' only) ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.79936b18df9f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.b1c8a895f5fd.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Operator theme: the three colours an agency changes (in brand/theme.css) ---- */
  --brand: #0E3B2E;        /* Tiber Lake emerald */
  --brand-ink: #072019;    /* emerald ink */
  --accent: #C9A24B;       /* Tiber Lake gold */

  /* ---- Derived from the theme ---- */
  --brand-deep: color-mix(in srgb, var(--brand), var(--brand-ink) 53%);   /* #0A2D23 */
  --brand-glow: color-mix(in srgb, var(--brand), #fff 9%);                 /* the lit side of a gradient */
  --accent-soft: color-mix(in srgb, var(--accent), #fff 32%);              /* gold-soft */
  --brand-hover: color-mix(in srgb, var(--brand) 82%, var(--brand-ink));
  --brand-tint: color-mix(in srgb, var(--brand) 6%, #fff);
  --brand-tint-2: color-mix(in srgb, var(--brand) 11%, #fff);
  --brand-line: color-mix(in srgb, var(--brand) 18%, #fff);
  --brand-ring: color-mix(in srgb, var(--brand) 16%, transparent);
  --on-brand: #FFFFFF;

  /* ---- Neutrals (warm, from the website) ---- */
  --paper: #FBFAF6;
  --canvas: #F7F5EF;
  --surface: #FFFFFF;
  --surface-2: #F9F8F4;
  --surface-3: #F2F0E9;
  --heading: #0F201B;
  --text: #1E2A27;          /* ink, 14.8:1 on white */
  --text-2: #4E5B57;        /* ink-2, 7.1:1 on white, 6.5:1 on the canvas */
  --text-3: #5F6B66;        /* 5.5:1 on white, 5.1:1 on the canvas */
  --line: #E6E2D8;          /* card hairline */
  --line-soft: #EEEBE3;     /* rows inside a card */
  --line-strong: #D6D1C5;
  --control: #858F8B;       /* field and control borders: 3.3:1 on white, 3.1:1 on the canvas */

  /* ---- On dark grounds (sidebar, entrance, hero cards) ---- */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.74);   /* 7.5:1 or more on every emerald */
  --on-dark-3: rgba(255, 255, 255, 0.66);   /* 7.2:1 or more */
  --on-dark-line: rgba(255, 255, 255, 0.12);

  /* ---- Status: one meaning per hue, fixed (never the operator's colours) ----
     ok green: done, paid, in force. warn amber: needs attention. bad red: overdue, failed,
     refused. held teal: in our custody and nothing else (a cheque in the safe, a key out).
     quiet grey: inactive, ended. black: under way with nothing to do (booked, scheduled, open,
     on site), the quiet ground with an ink dot and no hue of its own. turn emerald: your turn,
     the next step is the viewer's. ok is a leaf green and held the website's teal, far enough
     apart to tell at a glance (CIEDE2000: fills 6.6, text 16.9, dots 19.6). Every text pair is
     5.8:1 or more. */
  --ok: #458846;   --ok-bg: #E8F4E5;   --ok-tx: #30602F;   --ok-line: #C9E0C4;
  --warn: #C98A1A; --warn-bg: #FBF0D9; --warn-tx: #744E0C; --warn-line: #F0DDB2; --warn-ink: #2B1A00;
  --bad: #C9473C;  --bad-bg: #FBE8E5;  --bad-tx: #962A22;  --bad-line: #F2CBC5; --bad-strong: #B3362C;
  --bad-border: #BE6259;   /* 4.1:1 on white */
  --held: #037C76; --held-bg: #D9F3F0; --held-tx: #006661; --held-line: #B0DBD7;
  --quiet: #9AA39F; --quiet-bg: #F0EEE8; --quiet-tx: #4E5B57;

  /* ---- Type ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --num: var(--font);

  /* ---- Shape and depth ---- */
  --r-s: 8px;
  --r: 12px;
  --r-l: 16px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 1px rgba(15, 32, 27, 0.04);
  --shadow-1: 0 1px 2px rgba(15, 32, 27, 0.05), 0 2px 6px -2px rgba(15, 32, 27, 0.05);
  --shadow-2: 0 1px 2px rgba(15, 32, 27, 0.05), 0 8px 20px -8px rgba(15, 32, 27, 0.14);
  --shadow-3: 0 2px 6px rgba(7, 32, 25, 0.06), 0 24px 48px -16px rgba(7, 32, 25, 0.24);
  --shadow-btn: 0 1px 2px rgba(7, 32, 25, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-brand: 0 1px 2px rgba(7, 32, 25, 0.2), 0 20px 40px -20px rgba(7, 32, 25, 0.6);

  /* ---- Layout and motion ---- */
  --max: 1240px;
  --gutter: 20px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
  --control-h: 44px;       /* fields and buttons; the console sets 38px, phones keep 44px */
  --tap: 44px;             /* the smallest touch target on a phone */
  --focus: var(--brand);
  --focus-dark: var(--accent-soft);

  /* ---- Glyphs (the CSP allows data: URIs); drawn with mask so they take the text colour ---- */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75l4.5 4.5 4.5-4.5' fill='none' stroke='%234E5B57' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glyph-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E");
  --glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --glyph-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --glyph-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.2M12 17.1v.1'/%3E%3C/svg%3E");
  --glyph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --glyph-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.2'/%3E%3C/svg%3E");
}
/* Where the browser can, the lit side of a gradient keeps the brand's hue and gains a little
   chroma instead of fading to grey. */
@supports (color: oklch(from red l c h)) {
  :root { --brand-glow: oklch(from var(--brand) calc(l + 0.06) calc(c * 1.25) h); }
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--heading); }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
/* A headline is one weight. The portals and the brand pages make the <b> the key fact (portal.css
   and the brand section); the console never does. */
h1 b, h2 b, h3 b, h1 strong, h2 strong, .h1 b, .h2 b { font-weight: inherit; }
h1, .h1 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.024em; }
h3, .h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; inset-inline-start: 12px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-weight: 600; font-size: 0.875rem; text-decoration: none;
}
.skip:focus { top: 12px; outline: 2px solid var(--accent-soft); outline-offset: 2px; box-shadow: var(--shadow-3); }

/* ---------- Type helpers ---------- */
.lede { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; color: var(--text-2); max-width: 38em; }
/* The eyebrow: a sentence-case label above a headline (it may hold breadcrumb links). With .mark
   it becomes the website's kicker: a dot in a soft halo before the words. */
.eyebrow {
  display: block; margin: 0 0 12px; color: var(--text-2);
  font: 600 0.9375rem/1.4 var(--font); letter-spacing: 0; text-transform: none;
}
.eyebrow a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.eyebrow a:hover { color: var(--brand); text-decoration-color: currentColor; }
.mark::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline: 3px 12px; vertical-align: 0.12em; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3.5px color-mix(in srgb, currentColor 22%, transparent);
}
.muted { color: var(--text-2); }
.small { font-size: 0.875rem; }
.xs { font-size: 0.8125rem; }
.strong { font-weight: 600; color: var(--heading); }
/* Real codes and identifiers only. */
.mono { font-family: var(--mono); font-size: 0.875em; font-weight: 400; letter-spacing: 0; }
/* A reference, a date or a unit's name and number (.keep, from the |refs and |keep filters, which
   keep a long unit name to its last word and number) must never break across lines, not even at
   a hyphen. They stay inline, so a comma or a full stop after them never starts a line. */
.ref, .nowrap, .keep { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.num { font-family: var(--num); font-weight: 650; letter-spacing: -0.03em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.num-xl { font-size: clamp(4rem, 2.6rem + 5vw, 7rem); letter-spacing: -0.05em; }
.num-l { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); letter-spacing: -0.04em; }
.num-s { font-size: 1.375rem; letter-spacing: -0.02em; }
.right { text-align: end; }
.mt { margin-top: 20px; }
.mt-l { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }

/* Icons: the Lucide sprite. */
.i { display: inline-block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i-s { width: 16px; height: 16px; }
.i-l { width: 24px; height: 24px; stroke-width: 1.5; }
/* Arrows and chevrons point the reading way */
[dir="rtl"] .i:has(use[href$="#arrow-right"], use[href$="#arrow-left"], use[href$="#chevron-right"], use[href$="#chevron-left"]) { transform: scaleX(-1); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cols { display: grid; gap: 40px 48px; }
.cols > * { min-width: 0; }
@media (min-width: 1024px) {
  .cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cols-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.section { margin-top: 56px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem); }

/* ---------- Section links: navigation reads as navigation ----------
   A section's own link ("All 25", "All repairs", "Details") and any .link-next carry a trailing
   chevron that nudges forward on hover. */
.section-head > a:not(.btn), .link-next {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 4px;
  color: var(--brand); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.section-head > a:not(.btn)::after, .link-next::after {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--glyph-next) center / contain no-repeat; mask: var(--glyph-next) center / contain no-repeat;
  transition: transform 200ms var(--ease);
}
.section-head > a:not(.btn):hover, .link-next:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-head > a:not(.btn):hover::after, .link-next:hover::after { transform: translateX(2px); }
[dir="rtl"] .section-head > a:not(.btn)::after, [dir="rtl"] .link-next::after { transform: scaleX(-1); }
[dir="rtl"] .section-head > a:not(.btn):hover::after, [dir="rtl"] .link-next:hover::after { transform: scaleX(-1) translateX(2px); }

/* ---------- Buttons and links ---------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: var(--on-brand); --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--btn-bd); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 0.9375rem/1.2 var(--font); letter-spacing: -0.005em; text-align: center; text-decoration: none;
  cursor: pointer; box-shadow: var(--shadow-btn); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--brand-hover); --btn-bd: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost { --btn-bg: var(--surface); --btn-fg: var(--heading); --btn-bd: var(--control); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { --btn-bg: var(--surface-2); --btn-bd: var(--text-2); }
.btn-danger { --btn-bg: var(--surface); --btn-fg: var(--bad-tx); --btn-bd: var(--bad-border); box-shadow: var(--shadow-xs); }
.btn-danger:hover { --btn-bg: var(--bad-bg); --btn-bd: var(--bad-tx); }
.btn-block { width: 100%; }
.btn-s { min-height: 38px; padding: 0 14px; font-size: 0.8125rem; gap: 6px; }
.btn .i { width: 16px; height: 16px; stroke-width: 2; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
details[open] > summary .i:has(use[href$="#chevron-down"]) { transform: rotate(180deg); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.go {
  display: inline-flex; align-items: center; gap: 6px; color: var(--brand);
  font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
.go .i { width: 16px; height: 16px; stroke-width: 2; transition: transform 200ms var(--ease); }
.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.go:hover .i:has(use[href$="#arrow-right"]) { transform: translateX(3px); }
[dir="rtl"] .go:hover .i:has(use[href$="#arrow-right"]) { transform: scaleX(-1) translateX(3px); }
summary.go { list-style: none; }
summary.go::-webkit-details-marker { display: none; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Inline links get a softly rounded focus ring */
.go, .linkbtn, .eyebrow a, .table td a, .kv a, .item__meta a, p a { border-radius: 4px; }

/* ---------- Status: a tinted pill with a dot, always beside its word ----------
   .status-ok, -warn, -bad, -held (custody only) and -quiet are tints, and .status-black (under
   way) is the quiet tint with an ink dot. .status-turn (your turn) is filled with the brand,
   .status-urgent (priority: urgent) is filled amber and .status-emergency filled red, so they read
   louder than any tint. */
.status {
  --s-bg: var(--quiet-bg); --s-tx: var(--quiet-tx); --s-dot: var(--quiet); --s-ring: color-mix(in srgb, var(--s-dot) 16%, transparent);
  display: inline-flex; align-items: center; gap: 6px; padding-block: 2px; padding-inline: 8px 10px;
  border-radius: 999px; background: var(--s-bg); color: var(--s-tx);
  font: 600 0.75rem/1.45 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--s-ring);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-dot); flex: none; }
/* Two states of one thing side by side (a lease and its Ejari), one under the other when narrow */
.statuses { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.status-ok { --s-bg: var(--ok-bg); --s-tx: var(--ok-tx); --s-dot: var(--ok); }
.status-warn { --s-bg: var(--warn-bg); --s-tx: var(--warn-tx); --s-dot: var(--warn); }
.status-bad { --s-bg: var(--bad-bg); --s-tx: var(--bad-tx); --s-dot: var(--bad); }
.status-held { --s-bg: var(--held-bg); --s-tx: var(--held-tx); --s-dot: var(--held); --s-ring: var(--held-line); }
.status-black { --s-tx: var(--text); --s-dot: var(--text); }
.status-quiet { --s-bg: var(--quiet-bg); --s-tx: var(--quiet-tx); --s-dot: var(--quiet); }
.status-turn { --s-bg: var(--brand); --s-tx: var(--on-brand); --s-dot: var(--accent-soft); --s-ring: transparent; }
.status-urgent { --s-bg: var(--warn); --s-tx: var(--warn-ink); --s-dot: var(--warn-ink); --s-ring: transparent; }
.status-emergency { --s-bg: var(--bad-strong); --s-tx: #fff; --s-dot: #fff; --s-ring: transparent; }
/* On an emerald hero card a status keeps its dot colour on a glass pill; the filled ones stay filled */
.feature--hero .status { --s-bg: rgba(255, 255, 255, 0.1); --s-tx: #fff; --s-ring: rgba(255, 255, 255, 0.16); }
.feature--hero .status-ok { --s-dot: #99D593; }
.feature--hero .status-warn { --s-dot: #F2C46B; }
.feature--hero .status-bad { --s-dot: #F59A90; }
.feature--hero .status-held { --s-dot: #78D6CF; }
.feature--hero .status-black { --s-dot: #fff; }
.feature--hero .status-quiet { --s-dot: rgba(255, 255, 255, 0.6); }
.feature--hero .status-turn { --s-bg: var(--accent-soft); --s-tx: var(--brand-ink); --s-dot: var(--brand-ink); }
.feature--hero .status-urgent { --s-bg: var(--warn); --s-tx: var(--warn-ink); --s-dot: var(--warn-ink); --s-ring: transparent; }
.feature--hero .status-emergency { --s-bg: var(--bad-strong); --s-dot: #fff; --s-ring: transparent; }

/* ---------- Stat strip: one panel, hairline dividers, big tabular figures ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.stat { min-width: 0; padding: 16px 16px 18px; box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
[dir="rtl"] .stat { box-shadow: -1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.stats-3 > .stat:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-3 > .stat:first-child { grid-column: auto; }
  .stat { padding: 20px 22px 22px; }
}
.stat__label { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); line-height: 1.35; }
.stat__value {
  margin: 8px 0 6px; color: var(--heading); font: 650 clamp(1.6rem, 1.3rem + 1vw, 2.125rem)/1.05 var(--num);
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat__value small { font-size: 0.55em; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); margin-inline-start: 2px; }
.stat__note { font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; }
/* The one figure on a strip that matters most today */
.stat-key .stat__value { color: var(--brand); }
.stat-key { box-shadow: inset 0 3px 0 var(--accent), 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }

/* ---------- Lists of rows on a card ---------- */
.list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.list > li + li { border-top: 1px solid var(--line-soft); }
.list-quiet { box-shadow: none; }
.item {
  --lead-w: 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 14px 18px; color: inherit; text-decoration: none;
}
.item-lead { grid-template-columns: var(--lead-w) minmax(0, 1fr) auto; }
.item-lead > img { inline-size: var(--lead-w); block-size: 46px; object-fit: cover; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); }
.item__title { font-weight: 600; color: var(--heading); font-size: 0.9375rem; line-height: 1.4; overflow-wrap: break-word; }
.item__meta { font-size: 0.8125rem; color: var(--text-2); margin-top: 2px; line-height: 1.5; overflow-wrap: break-word; text-wrap: pretty; }
.item__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; }
.item__aside:empty { display: none; }
.item__amount { font-weight: 650; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }
a.item { transition: background-color var(--dur) var(--ease); }
a.item:hover { background: var(--surface-2); }
a.item:focus-visible { outline-offset: -2px; border-radius: var(--r); }
a.item .chev { display: inline-grid; color: var(--text-3); transition: transform 200ms var(--ease), color var(--dur) var(--ease); }
a.item:hover .chev { color: var(--brand); transform: translateX(2px); }
[dir="rtl"] a.item:hover .chev { transform: translateX(-2px); }
/* A row that carries a form or a note under it */
.list > li:not(.item) > :not(.item):not(a) { margin-inline: 18px; }
.list > li:not(.item) > form { padding-bottom: 16px; }
.list > li:not(.item) > .mt:empty { display: none; }
@media (max-width: 560px) {
  .item { --lead-w: 56px; padding: 14px 16px; }
  .item:has(> .item__aside) { grid-template-columns: minmax(0, 1fr); }
  .item-lead:has(> .item__aside) { grid-template-columns: var(--lead-w) minmax(0, 1fr); }
  .item-lead > .item__aside { grid-column: 2; }
  .item__aside { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: start; gap: 8px 12px; margin-top: 4px; }
  .item-lead > .item__lead, .item-lead > img { align-self: start; margin-top: 2px; }
  .list > li:not(.item) > :not(.item):not(a) { margin-inline: 16px; }
}

/* ---------- Date tiles (the lead of a row: a day, a time or a count with its caption) ----------
   Neutral by default. A row that is overdue or an emergency (.is-overdue on the row, or on the
   tile) gets the red tint; nothing else does. The caption is sentence-case Inter and may wrap at
   a space ("3 Nov / 2026"), never edge to edge. The portals fill the tile (portal.css). */
.item__lead {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-block-size: 50px; padding: 7px 4px 6px; border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--heading); font: 650 1.0625rem/1 var(--num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: center;
}
.item__lead small {
  display: block; max-inline-size: 100%; color: var(--text-2);
  font: 500 0.65625rem/1.15 var(--font); letter-spacing: -0.005em; text-transform: none; text-wrap: balance;
}
.is-overdue > .item__lead, .item__lead.is-overdue {
  background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); color: var(--bad-tx);
}
.is-overdue > .item__lead small, .item__lead.is-overdue small { color: var(--bad-tx); }

/* ---------- Key and value pairs ---------- */
.kv {
  display: grid; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.kv dt, .kv dd { margin: 0; padding: 12px 18px; font-size: 0.875rem; line-height: 1.5; border-top: 1px solid var(--line-soft); }
.kv dt:first-of-type, .kv dd:first-of-type { border-top: 0; }
.kv dt { color: var(--text-2); padding-inline-end: 12px; }
.kv dd { color: var(--heading); font-weight: 500; padding-inline-start: 0; overflow-wrap: anywhere; }
.kv dd .status { vertical-align: 1px; }
.kv dd > div { margin-top: 6px; }
@media (max-width: 560px) {
  .kv { grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); }
  .kv dt, .kv dd { padding-block: 10px; }
  .kv dt { padding-inline: 16px 10px; }
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
}
/* Tabular figures only where figures line up (amounts, totals, .tabular cells): Inter's tabular
   hyphen is a digit wide, so a reference in a text cell ("INV-2026-00003") keeps its own hyphens. */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.table :is(td.r, th.r, .amount, .tabular), .table tfoot td, .table tr.is-total > td { font-variant-numeric: tabular-nums; }
.table th {
  padding: 10px 16px; text-align: start; vertical-align: bottom; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  color: var(--text-2); font: 500 0.75rem/1.3 var(--font); letter-spacing: 0.01em;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text); }
.table tbody tr:last-child > td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur) var(--ease); }
.table tbody tr:hover > td { background: var(--surface-2); }
.table .r { text-align: end; }
/* Money in a table: tabular, right-aligned and a step heavier than the row around it */
.table td.r, .table .amount { font-weight: 500; color: var(--heading); white-space: nowrap; }
.table .t, .table .t a { color: var(--heading); font-weight: 600; }
.table td a:not(.btn) { color: var(--heading); font-weight: 600; text-decoration: none; }
.table td a:not(.btn):hover { color: var(--brand); text-decoration: underline; }
/* A code is IBM Plex Mono a step smaller; a code cell (td.mono) and a .ref stay on one line. Longer
   mono text inside a cell (an audit entry's data, .payload) wraps where it must. */
.table .mono { font-size: 0.8125rem; }
.table td.mono, .table .ref { white-space: nowrap; }
.table .payload { white-space: normal; overflow-wrap: anywhere; }
.table-empty { padding: 28px 16px; color: var(--text-2); text-align: center; }
.table tbody tr:hover > td.table-empty { background: none; }
/* A total row (tfoot, or tr.is-total) closes a money table in semibold */
.table tfoot td, .table tr.is-total > td { border-top: 1px solid var(--line); border-bottom: 0; color: var(--heading); font-weight: 600; background: var(--surface-2); }
/* Money breakdowns that sit one after another (a statement's sections) share one set of columns,
   so their figures line up from table to table: .table-money with Date, Detail, Property, AED and
   Ledger. */
.table-money { table-layout: fixed; }
.table-money th:nth-child(1) { width: 128px; }
.table-money th:nth-child(3) { width: 22%; }
.table-money th:nth-child(4) { width: 132px; }
.table-money th:nth-child(5) { width: 96px; }
/* Tables stacked on one page that share their last columns (.table-cols: a lease's schedule and
   its cheques): fixed widths for a code, a status, a date and an amount, so the dates and the
   amounts sit in one line from table to table. */
.table-cols { table-layout: fixed; }
.table-cols .col-code { width: 116px; }
.table-cols .col-status { width: 120px; }
.table-cols .col-date { width: 120px; }
.table-cols .col-amount { width: 140px; }
@media (max-width: 700px) {
  .table-stack.table-cols { table-layout: auto; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack.table-money { table-layout: auto; }
  .table-stack tr { padding: 12px 16px 14px; border-bottom: 1px solid var(--line-soft); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack tbody tr:hover > td { background: none; }
  /* Each cell becomes a two-column row: the label, then everything the cell holds in one column. */
  .table-stack td { display: table; table-layout: fixed; padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  .table-stack td.r { text-align: start; }
  /* Long mono text wraps here; a reference (.ref) still never breaks at its hyphen */
  .table-stack td.mono, .table-stack .mono:not(.ref) { white-space: normal; }
  /* A cell with nothing in it (td.is-empty) is left out, so no label stands alone */
  .table-stack td.is-empty { display: none; }
  .table-stack td::before {
    content: attr(data-label); display: table-cell; width: 112px; padding: 2px 0 0; padding-inline: 0 12px; vertical-align: top;
    color: var(--text-2); font: 500 0.75rem/1.5 var(--font); letter-spacing: 0; text-transform: none;
  }
  .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { display: none; }
  .table-stack td.table-empty { display: block; text-align: center; padding: 16px 0; }
}

/* ---------- Notices and messages: a tinted note with its sign ---------- */
.notice, .messages li {
  --n-bg: var(--brand-tint); --n-tx: var(--heading); --n-bd: var(--brand-line); --n-ic: var(--brand); --n-glyph: var(--glyph-info);
  position: relative; display: block; margin: 0 0 20px; padding: 11px 14px; padding-inline-start: 40px;
  border: 1px solid var(--n-bd); border-radius: 10px; background: var(--n-bg); color: var(--n-tx);
  font-size: 0.875rem; line-height: 1.5;
}
.notice::before, .messages li::before {
  content: ""; position: absolute; inset-inline-start: 14px; top: 13px; width: 16px; height: 16px; background: var(--n-ic);
  -webkit-mask: var(--n-glyph) center / contain no-repeat; mask: var(--n-glyph) center / contain no-repeat;
}
.notice-ok, .messages li.success { --n-bg: var(--ok-bg); --n-tx: var(--ok-tx); --n-bd: var(--ok-line); --n-ic: var(--ok); --n-glyph: var(--glyph-ok); }
.notice-warn, .messages li.warning { --n-bg: var(--warn-bg); --n-tx: var(--warn-tx); --n-bd: var(--warn-line); --n-ic: var(--warn); --n-glyph: var(--glyph-alert); }
.notice-bad, .messages li.error { --n-bg: var(--bad-bg); --n-tx: var(--bad-tx); --n-bd: var(--bad-line); --n-ic: var(--bad); --n-glyph: var(--glyph-alert); }
/* An official record (a statement published, a document signed): a gold rule at its start */
.notice-record { --n-bg: var(--surface); --n-bd: var(--line); border-inline-start: 3px solid var(--accent); }
.messages { list-style: none; margin: 0 0 24px; padding: 0; }
.messages li { margin-bottom: 10px; }

/* Progress: an SVG bar sized by attributes (CSP: no inline styles) */
.bar { display: block; width: 100%; height: 6px; border-radius: 999px; overflow: hidden; }
.bar .track { fill: var(--surface-3); }
.bar .fill { fill: var(--brand); }

/* ---------- Forms ---------- */
label, .label { display: block; margin: 0 0 6px; color: var(--heading); font: 600 0.8125rem/1.4 var(--font); letter-spacing: 0; text-transform: none; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
input[type="search"], input[type="date"], input[type="url"], input[type="datetime-local"], input[type="time"], input[type="month"],
select, textarea {
  display: block; width: 100%; min-height: var(--control-h); padding: 10px 14px;
  border: 1px solid var(--control); border-radius: 10px; background-color: var(--surface); color: var(--heading);
  font: 400 1rem/1.4 var(--font); letter-spacing: 0; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { font-variant-numeric: tabular-nums; }
select { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 40px; cursor: pointer; }
[dir="rtl"] select { background-position: left 14px center; }
textarea { min-height: 112px; line-height: 1.5; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--text-2); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid transparent; outline-offset: 0; border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px var(--brand-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-inline-start: 8px; cursor: pointer; background: var(--text-3);
  -webkit-mask: var(--glyph-x) center / 12px no-repeat; mask: var(--glyph-x) center / 12px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--heading); }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--brand); width: 18px; height: 18px; margin: 0; margin-inline-end: 10px; vertical-align: -3px; flex: none; cursor: pointer;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
input[type="file"] { display: block; width: 100%; padding: 6px 0; font: inherit; font-size: 0.875rem; color: var(--text-2); }
input[type="file"]::file-selector-button {
  min-height: 38px; margin-inline-end: 12px; padding: 8px 14px; border: 1px solid var(--control); border-radius: 8px;
  background: var(--surface); color: var(--heading); font: 600 0.8125rem/1.2 var(--font); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
.field { margin: 0 0 18px; }
.help { display: block; margin-top: 6px; color: var(--text-2); font-size: 0.8125rem; line-height: 1.45; }
.errorlist { list-style: none; margin: 0 0 8px; padding: 0; color: var(--bad-tx); font-size: 0.8125rem; font-weight: 500; }
.errorlist li::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; background: var(--bad);
  -webkit-mask: var(--glyph-alert) center / contain no-repeat; mask: var(--glyph-alert) center / contain no-repeat;
}
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad-border); }
.check-row { display: flex; align-items: center; gap: 0; min-height: 28px; }
.check-row + .check-row { margin-top: 4px; }
.check-row label { margin: 0; color: var(--text); font-size: 0.9rem; font-weight: 400; cursor: pointer; }
.form-narrow { max-width: 640px; }

/* ---------- Page head ----------
   .pagehead-split: the text block (eyebrow, title, lede) and its actions. The text block's
   children join the head's grid, so the actions sit on the title line, at the end, whatever is
   above or below the title; the reading order stays the order of the page. The title keeps at
   least 24rem (or 55%), so a long row of actions wraps rather than squeeze it, and the title and
   the actions share their first baseline, so a second row of actions grows downwards and the
   title stays under its eyebrow. On phones the actions drop under the head as an equal-width grid
   of 44 px buttons, two to a row; a head whose labels are too long for half the screen
   (.actions-stack) gives each button a whole row. */
.pagehead { margin-bottom: 32px; }
.pagehead .lede { margin-top: 10px; font-size: 1rem; }
.pagehead-split { display: grid; grid-template-columns: minmax(min(55%, 24rem), 1fr) auto; grid-auto-flow: row dense; column-gap: 24px; row-gap: 0; align-items: baseline; }
.pagehead-split > :first-child { display: contents; }
.pagehead-split > :first-child > * { grid-column: 1 / -1; }
.pagehead-split > :first-child > :is(h1, .h1) { grid-column: 1; }
.pagehead-split > :not(:first-child) { grid-column: 2; justify-self: end; max-width: 100%; }
.pagehead-split > .actions { justify-content: flex-end; }
.pagehead-split > .actions > form { margin: 0; }
@media (max-width: 700px) {
  .pagehead-split { display: block; }
  .pagehead-split > :not(:first-child) { margin-top: 16px; justify-self: normal; }
  .pagehead div.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pagehead div.actions > form { display: contents; }
  .pagehead div.actions .btn { width: 100%; min-height: var(--tap); padding-inline: 10px; }
  .pagehead div.actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pagehead div.actions.actions-stack { grid-template-columns: minmax(0, 1fr); }
  .pagehead div.actions > :not(.btn, form) { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Page tabs and filter chips: two components that never look alike ----------
   Page tabs (nav.actions: a module's own pages, links styled .btn) are underline tabs on a
   hairline; the page you are on is heading-coloured with a brand underline.
   Filter chips (nav.chips: the values one list can be filtered by) are filled pills; the chosen
   one is filled with the brand. */
/* The row scrolls when it runs on; its last 40 px fade out (empty when the row fits) but its
   hairline does not (the second mask layer keeps the bottom pixel), and its end padding lets the
   last tab scroll clear of the fade. */
nav.actions {
  --tabs-fade: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  display: flex; flex-wrap: nowrap; gap: 0 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 4px 0 24px;
  padding-inline-end: 40px;
  -webkit-mask: var(--tabs-fade), linear-gradient(#000 0 0) left bottom / 100% 1px no-repeat;
  mask: var(--tabs-fade), linear-gradient(#000 0 0) left bottom / 100% 1px no-repeat;
}
[dir="rtl"] nav.actions { --tabs-fade: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
nav.actions::-webkit-scrollbar { display: none; }
nav.actions > a.btn {
  --btn-bg: transparent; --btn-bd: transparent; position: relative; flex: none; min-height: 40px; padding: 10px 12px 12px;
  border: 0; border-radius: 0; box-shadow: none; color: var(--text-2); font: 500 0.875rem/1.2 var(--font); white-space: nowrap; transform: none;
}
nav.actions > a.btn:first-child { margin-inline-start: -12px; }
nav.actions > a.btn:hover { color: var(--heading); }
nav.actions > a.btn[aria-current="page"] { color: var(--heading); font-weight: 600; }
nav.actions > a.btn[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); }
nav.actions > a.btn:focus-visible { outline-offset: -4px; border-radius: 8px; }
@media (max-width: 700px) { nav.actions > a.btn { min-height: var(--tap); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 2px; }
.chips > a, .chips > a.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text-2); --btn-bd: transparent;
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--control);
  font: 500 0.8125rem/1.2 var(--font); text-decoration: none; white-space: nowrap; transform: none;
}
.chips > a:hover { background: var(--surface-2); color: var(--heading); box-shadow: inset 0 0 0 1px var(--text-2); }
.chips > a[aria-current="page"], .chips > a[aria-current="true"] { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: none; }
.chips > a:focus-visible { outline-offset: 2px; border-radius: 999px; }
@media (max-width: 700px), (pointer: coarse) { .chips > a, .chips > a.btn { min-height: var(--tap); padding-inline: 16px; } }

/* ---------- Pager ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pager .btn { min-height: 38px; }
@media (max-width: 700px) { .pager .btn { min-height: var(--tap); } }

/* ---------- Empty state ---------- */
.empty { padding: 40px 28px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); text-align: center; }
.empty__title { margin: 0 0 4px; color: var(--heading); font-size: 0.9375rem; font-weight: 650; }
.empty p { max-width: 36em; margin: 0 auto; color: var(--text-2); font-size: 0.875rem; }
.empty .actions { justify-content: center; margin-top: 16px; }

/* ---------- Feature cards ---------- */
/* A feature card: one figure or fact with its context. */
.feature {
  position: relative; padding: 20px 22px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.feature > .eyebrow { margin-bottom: 8px; color: var(--brand); }
.feature .num-l { margin: 6px 0 10px; }
.feature > h2 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); }
.feature > .status { margin-top: 2px; }
.feature > p.muted { max-width: 46em; }
.feature > .go, .feature > p > .go { margin-top: 4px; }
.feature > details { margin-top: 14px; }

/* The hero card (.feature--hero): the one figure that matters most on a home (the next payment,
   the door code, the latest statement). Emerald with depth, its eyebrow in gold, a faint gold
   skyline along its foot. Every colour comes from the theme. The skyline is the seamless tile
   (art/skyline-tile.webp: no ground line, no end strokes), never taller than the card's bottom
   padding, so it stays under the last line. */
.feature--hero {
  --hero-sky: 34px;
  isolation: isolate; overflow: hidden; padding: 22px 22px calc(var(--hero-sky) + 6px); border: 0; border-radius: 20px; color: var(--on-dark-2);
  background: radial-gradient(90% 120% at 100% 0%, var(--brand-glow) 0%, transparent 62%),
    linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 55%, var(--brand-ink) 100%);
  box-shadow: var(--shadow-brand), inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 14%, transparent);
}
.feature--hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; z-index: -1; height: var(--hero-sky); pointer-events: none;
  background: var(--accent-soft); opacity: 0.22;
  -webkit-mask: url("../art/skyline-tile.404c670c5035.webp") -48px 100% / auto 100% repeat-x;
  mask: url("../art/skyline-tile.404c670c5035.webp") -48px 100% / auto 100% repeat-x;
}
.feature--hero > .eyebrow { color: var(--accent-soft); }
.feature--hero .num, .feature--hero h2 { color: #fff; }
.feature--hero .muted, .feature--hero p { color: var(--on-dark-2); }
.feature--hero .go, .feature--hero .link-next { color: #fff; }
.feature--hero .go .i { color: var(--accent-soft); }
.feature--hero :focus-visible { outline-color: var(--focus-dark); }
@media (min-width: 900px) { .feature--hero { --hero-sky: 42px; padding: 28px 32px calc(var(--hero-sky) + 6px); } }

/* ---------- Quick links: a grid of tiles ---------- */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick a {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
  color: var(--heading); font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quick a:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.quick .i { box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 10px; background: var(--brand-tint-2); color: var(--brand); stroke-width: 1.75; }
@media (min-width: 900px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* ---------- Photos, steps, checks, toggle ---------- */
.photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-s); background: var(--surface-3); color: var(--text-3); overflow: hidden; }
.photo .i { width: 26px; height: 26px; stroke-width: 1.5; }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 18px; }
.steps li + li { border-top: 1px solid var(--line-soft); }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2); font: 600 0.8125rem/1 var(--font); font-variant-numeric: tabular-nums;
}
.steps li.done::before { background: var(--brand); color: var(--on-brand); }
.check { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--control); border-radius: 7px; color: #fff; }
.check-on { background: var(--brand); border-color: var(--brand); }
.check .i { width: 14px; height: 14px; stroke-width: 2.6; }
.toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--control); }
.toggle span { padding: 6px 12px; border-radius: 8px; color: var(--text-2); font-size: 0.8125rem; font-weight: 600; }
.toggle .on { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-btn); }

/* ---------- A set-up link, shown once (templates/_setup_link.html) ---------- */
.setup-link { margin: 0 0 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--brand-line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.setup-link__title { margin: 0 0 4px; font-weight: 650; color: var(--heading); }
.setup-link__text { margin: 0 0 12px; color: var(--text-2); font-size: 0.875rem; }
.setup-link__row { display: flex; gap: 8px; align-items: center; }
.setup-link__row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8125rem; }
.setup-link__row .btn.is-copied { --btn-bg: var(--ok-bg); --btn-fg: var(--ok-tx); --btn-bd: var(--ok-line); }

/* ---------- The environment ribbon (templates/base.html: any install that is not production) ---------- */
.env-ribbon {
  padding: 6px 12px; background: var(--warn-tx); color: #fff; text-align: center;
  font: 600 0.75rem/1.4 var(--font); letter-spacing: 0.01em;
}

/* ======================================================================
   The app layer: what the staff console and the portals share (body.ws).
   workspace.css (.ws-staff) and portal.css (.ws-portal) size things on top.
   ====================================================================== */
.ws { background: var(--canvas); color: var(--text); line-height: 1.5; }
.ws a { text-underline-offset: 3px; }
.ws .lede { font-size: 0.9375rem; color: var(--text-2); max-width: 62em; }
.ws .eyebrow { margin: 0 0 8px; font-size: 0.8125rem; }
.ws .pagehead { margin-bottom: 24px; }
.ws .pagehead .lede { margin-top: 6px; font-size: 0.9375rem; }
.ws .pagehead .notice { display: inline-block; margin: 12px 0 0; }
.ws .pagehead > .actions.mt { margin-top: 14px; }
.ws .section { margin-top: 32px; }
.ws .section:first-child { margin-top: 0; }
.ws .section-head { align-items: center; margin-bottom: 10px; min-height: 28px; }
.ws .section-head > .item__amount { font-size: 0.9375rem; }
.ws .cols { gap: 28px 28px; }
.ws .mt { margin-top: 16px; }
.ws .mt-l { margin-top: 28px; }
.ws .mb-0, .ws .field.mb-0 { margin-bottom: 0; }
.ws .small { font-size: 0.8125rem; }
.ws .xs { font-size: 0.75rem; }
.ws .status { font-size: 0.75rem; }
.ws .linkbtn { color: var(--text-2); }
.ws details > form.mt { margin-top: 14px; padding: 16px 16px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.ws details > form.mt > .btn { margin-bottom: 14px; }

/* == Brand pages == */
/* The landing, the entrances (every sign-in and account page; allauth's second-factor pages render
   through entrance.html too), the error and offline covers, and the public share pages built on
   them. Owned with templates/landing.html, entrance.html, account/, allauth/, errors/ and
   offline.html. Every colour comes from the theme tokens.
   - One motif, used with restraint: a faint gold lattice (the mashrabiya) on the quiet side of an
     emerald panel, and one gold skyline line along the panel's foot. No rings, no glows, no grids.
   - On an emerald panel the main action is a gold pill with no glow; form buttons are emerald.
   - Titles open light and land on their key fact in bold (the title's <b>): the landing's display
     and section titles, the entrance and cover titles. allauth's titles have no <b> and stay solid
     (templates/allauth/elements/h1.html marks them .title-solid).
   - Sign-in: on wide screens an inset emerald panel beside the form; on phones a short emerald
     header and the form on a white, round-topped sheet, so the fields, the button and both help
     lines fit on the first screen.
   - --shell-top: the height of a bar that stays above the page (none in the product, so 0; the
     live demo's bar, static/css/demo.css). The sticky sign-in panel and the full-height pages
     leave it room. */

:root {
  /* One diamond with a dot at its centre, tiled through a mask so it takes the accent colour */
  --bp-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 0 36 18 18 36 0 18Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.5'/%3E%3C/svg%3E");
  --bp-light: 400;   /* where a title opens */
  --bp-bold: 680;    /* its key fact */
}

.display {
  margin: 0; color: var(--heading); font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.25rem);
  line-height: 1; letter-spacing: -0.045em; text-wrap: balance;
}
.site-head .logo, .entrance__art .logo, .entrance__foot a, .site-foot a { border-radius: 4px; }

/* ---------- Titles: light, then the key fact in bold ---------- */
.display, .block-head h2, .band h2, .entrance__art .h1, .entrance__panel h1, .cover__body h1 { font-weight: var(--bp-light); }
.display b, .block-head h2 b, .band h2 b, .entrance__art .h1 b, .entrance__panel h1 b, .cover__body h1 b { font-weight: var(--bp-bold); }
.display, .entrance__art .h1, .cover__body h1 { --bp-light: 360; }
.entrance__panel h1.title-solid { margin-bottom: 16px; font-weight: 650; }

/* ---------- The emerald panel: the landing's stage and band, the entrance panel, the covers ----------
   Depth from one gradient with its lit side up and away from the words. contain: paint keeps the
   lattice and the skyline inside the panel. */
.hero, .band, .entrance__art, .cover__body {
  --bp-ground: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--brand-glow) 80%, transparent) 0%, transparent 72%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 52%, var(--brand-ink) 100%);
  position: relative; isolation: isolate; overflow: hidden; contain: paint;
  background: var(--bp-ground); color: var(--on-dark-2);
}
[dir="rtl"] :is(.hero, .band, .entrance__art, .cover__body) {
  --bp-ground: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--brand-glow) 80%, transparent) 0%, transparent 72%),
    linear-gradient(200deg, var(--brand) 0%, var(--brand-deep) 52%, var(--brand-ink) 100%);
}
:is(.hero, .band, .entrance__art, .cover__body) :focus-visible { outline-color: var(--focus-dark); }
:is(.hero, .band, .entrance__art, .cover__body) .eyebrow { color: var(--accent-soft); }
:is(.hero, .band, .entrance__art, .cover__body) :is(h1, h2, .h1, .display) { color: #fff; }
:is(.hero, .band, .entrance__art, .cover__body) :is(h1, h2, .h1, .display) b { color: var(--accent-soft); }

/* The lattice: each panel places it on its quiet side; it fades out before it reaches the words. */
.hero::before, .band::before, .entrance__art::before, .cover__body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--accent-soft); opacity: 0.2;
  -webkit-mask: var(--bp-lattice) 0 0 / 36px 36px repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: var(--bp-lattice) 0 0 / 36px 36px repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-composite: intersect;
  inset-block-start: -150px; inset-inline-end: -140px; width: 300px; height: 300px;   /* phones: the top corner */
}

/* The skyline: one gold line along the panel's foot. The drawing is 2400 by 293 and is drawn at its
   own proportions, always wider than the panel, so neither of its ends shows. */
.skyline, .hero::after, .cover__body::after {
  display: block; height: var(--bp-sky, 96px); pointer-events: none;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent) 50%, var(--accent-soft)); opacity: 0.6;
  -webkit-mask: url("../art/skyline-line.6d452082b1ad.webp") center bottom / auto 100% no-repeat;
  mask: url("../art/skyline-line.6d452082b1ad.webp") center bottom / auto 100% no-repeat;
}
.hero::after, .cover__body::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; z-index: -1; }
.hero + .skyline, .cover > .skyline { display: none; }   /* the panels draw their own */

/* On an emerald panel: a gold pill for the main action (no glow), a light outline for the other */
:is(.hero, .cover__body) .btn:not(.btn-ghost) {
  --btn-bg: var(--accent); --btn-fg: var(--brand-ink); --btn-bd: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}
:is(.hero, .cover__body) .btn:not(.btn-ghost):hover { --btn-bg: var(--accent-soft); --btn-bd: var(--accent-soft); }
:is(.hero, .cover__body) .btn-ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.42); box-shadow: none; }
:is(.hero, .cover__body) .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-bd: rgba(255, 255, 255, 0.72); }

/* ---------- Public site ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: max(14px, env(safe-area-inset-top)) 14px; }
.site-head .logo { display: inline-flex; }
.site-head .logo img { height: 40px; width: auto; }
.site-head .btn { min-height: var(--tap); padding-inline: 18px; }
@media (min-width: 768px) {
  .site-head { padding-block: 22px; }
  .site-head .logo img { height: 50px; }
  .site-head .btn { min-height: 40px; }
}

/* The stage: an emerald card that sits on the page's gutter on phones and spreads wider than the
   text column from tablets up, with the text aligned to the column. */
.hero {
  --bp-sky: clamp(96px, 16vw, 168px);
  width: calc(100% - 2 * var(--gutter)); margin-top: 4px;
  padding-block: 40px calc(var(--bp-sky) + 28px); padding-inline: 22px;
  border-radius: 24px; box-shadow: var(--shadow-brand);
}
.hero .eyebrow { margin-bottom: 16px; }
.hero .display { max-width: 11.5em; }
.hero .lede { margin-top: 20px; color: var(--on-dark-2); }
.hero .actions { margin-top: 28px; gap: 10px; }
@media (max-width: 420px) { .hero .actions .btn { padding-inline: 18px; } }
@media (min-width: 768px) {
  .hero { width: calc(100% - 48px); padding-block: 80px calc(var(--bp-sky) + 36px); padding-inline: var(--gutter); border-radius: var(--r-xl); }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero .lede { margin-top: 28px; }
  .hero .actions { margin-top: 40px; }
}
@media (min-width: 1000px) {
  .hero::before { inset-block: 0 72px; inset-inline-end: 0; width: min(40%, 540px); height: auto; }
}
@media (min-width: 1280px) { .hero { --bp-sky: 196px; padding-block: 96px calc(var(--bp-sky) + 44px); } }

.block { padding-top: 72px; }
@media (min-width: 1024px) { .block { padding-top: 120px; } }
.block-head { max-width: 760px; }
.block-head .eyebrow { color: var(--brand); }
.block-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.08; }
.block-head h2 b { color: var(--brand); }

.relations { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .relations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .relations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.relations a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t a" "n d a";
  align-items: start; align-content: start; gap: 0 14px; height: 100%; padding: 18px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.relations a:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.relations .n {
  grid-area: n; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px;
  background: var(--brand-tint-2); color: var(--brand); font: 600 0.8125rem/1 var(--font); font-variant-numeric: tabular-nums;
}
.relations .t { grid-area: t; align-self: center; min-height: 34px; display: flex; align-items: center; color: var(--heading); font-size: clamp(1.1rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.relations .d { grid-area: d; margin-top: 2px; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.relations .a {
  grid-area: a; align-self: center; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--brand); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 220ms var(--ease);
}
.relations .a .i { width: 18px; height: 18px; stroke-width: 2; }
.relations a:hover .a { background: var(--brand); color: var(--on-brand); box-shadow: none; transform: translateX(2px); }
[dir="rtl"] .relations a:hover .a { transform: translateX(-2px); }
.relations a:focus-visible { outline-offset: 3px; }
@media (min-width: 700px) {
  .relations a { grid-template-areas: "n . a" "t t t" "d d d"; padding: 22px 22px 24px; }
  .relations .t { min-height: 0; margin-top: 22px; }
  .relations .d { margin-top: 6px; font-size: 0.9375rem; }
  .relations .a { align-self: start; }
}

.caps {
  display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden;
}
@media (min-width: 700px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 20px 18px 22px; box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
[dir="rtl"] .cap { box-shadow: -1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.cap > .i { grid-row: 1 / span 2; }
.cap .i {
  box-sizing: content-box; width: 20px; height: 20px; padding: 10px; margin-bottom: 0; border-radius: 12px;
  background: var(--brand-tint-2); color: var(--brand); stroke-width: 1.75;
}
.cap h3 { margin-bottom: 4px; font-size: 1rem; align-self: center; }
.cap p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.55; }
@media (min-width: 700px) { .cap { display: block; padding: 26px 24px 28px; } .cap .i { margin-bottom: 18px; } }

/* The band: a full-width emerald strip, its words on one side and the lattice on the other
   (wide screens only: on a phone the words fill it). */
.band { margin-top: 96px; padding: 64px 0 72px; }
.band::before { display: none; }
@media (min-width: 1024px) {
  .band { margin-top: 136px; padding: 104px 0; }
  .band::before { display: block; inset-block: 0; inset-inline-end: 0; width: 50%; height: auto; }
}
.band h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.08; }
.band p { color: var(--on-dark-2); max-width: 34em; }
.band-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }

.points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.points li {
  position: relative; padding: 22px 24px 24px; padding-inline-start: 68px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.points li::before {
  content: ""; position: absolute; inset-inline-start: 22px; top: 22px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint-2);
}
.points li::after {
  content: ""; position: absolute; inset-inline-start: 30px; top: 30px; width: 14px; height: 14px; background: var(--brand);
  -webkit-mask: var(--glyph-check) center / contain no-repeat; mask: var(--glyph-check) center / contain no-repeat;
}
.points h3 { margin-bottom: 6px; font-size: 1.0625rem; }
.points p { margin: 0; color: var(--text-2); font-size: 0.9375rem; }

.site-foot { margin-top: 112px; border-top: 1px solid var(--line); background: var(--paper); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 28px max(44px, env(safe-area-inset-bottom)); color: var(--text-2); font-size: 0.8125rem; }
.site-foot img { height: 32px; width: auto; }
.site-foot a { color: var(--brand); font-weight: 600; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

/* ---------- Entrance (every sign-in and account page) ----------
   Phones and tablets: a short emerald header, then the form on a white sheet whose round top
   overlaps it (--bp-sheet), the skyline standing on the sheet. From 960 px: the emerald panel inset
   beside the form, which sits on the page itself. */
.entrance { --bp-sheet: 24px; min-height: calc(100vh - var(--shell-top, 0px)); min-height: calc(100dvh - var(--shell-top, 0px)); display: grid; grid-template-rows: auto 1fr; background: var(--surface); }
.entrance__art {
  --bp-sky: clamp(56px, 13vw, 120px);
  display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) var(--bp-sheet);
}
.entrance__art .logo { display: inline-flex; align-self: flex-start; }
.entrance__art .logo img { height: 32px; width: auto; }
.entrance__art .copy { margin: 16px 0 10px; max-width: 34em; }
.entrance__art .eyebrow { margin-bottom: 8px; }
.entrance__art .h1 { margin: 0; font-size: 1.5625rem; line-height: 1.12; letter-spacing: -0.03em; }
.entrance__art .h1 b { display: block; text-wrap: balance; }
.entrance__art .copy > p:not(.eyebrow):not(.h1) { margin: 8px 0 0; color: var(--on-dark-2); font-size: 0.9375rem; line-height: 1.5; }
.entrance__art .skyline { flex: none; margin-inline: calc(-1 * var(--gutter)); }
.entrance__form {
  position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center;
  margin-top: calc(-1 * var(--bp-sheet)); padding: 22px var(--gutter) max(40px, env(safe-area-inset-bottom));
  background: var(--surface); border-radius: var(--bp-sheet) var(--bp-sheet) 0 0;
  box-shadow: 0 -14px 32px -22px rgba(7, 32, 25, 0.6);
}
.entrance__panel { width: 100%; max-width: 440px; }
@media (min-width: 600px) {
  .entrance { --bp-sheet: 28px; }
  .entrance__art .logo img { height: 38px; }
  .entrance__art .copy { margin: 36px 0 20px; }
  .entrance__art .h1 { font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.035em; }
  .entrance__art .copy > p:not(.eyebrow):not(.h1) { margin-top: 12px; font-size: 1rem; }
  .entrance__form { padding-top: 40px; }
}
@media (min-width: 960px) {
  .entrance { grid-template-columns: minmax(420px, 44%) minmax(0, 1fr); grid-template-rows: none; background: var(--paper); }
  .entrance__art {
    --bp-sky: 150px;
    position: sticky; top: calc(16px + var(--shell-top, 0px));
    height: calc(100vh - 32px - var(--shell-top, 0px)); height: calc(100dvh - 32px - var(--shell-top, 0px));
    margin-block: 16px; margin-inline: 16px 0; padding: 40px 48px 0;
    border-radius: 24px; box-shadow: var(--shadow-brand); justify-content: space-between;
  }
  .entrance__art::before { inset-block-start: -40px; inset-inline-end: -60px; width: 80%; height: 64%; }
  .entrance__art .logo img { height: 48px; }
  .entrance__art .copy { margin: auto 0 36px; }
  .entrance__art .h1 { font-size: clamp(2.25rem, 1.1rem + 1.9vw, 3.25rem); line-height: 1.05; letter-spacing: -0.04em; }
  .entrance__art .copy > p:not(.eyebrow):not(.h1) { margin-top: 16px; font-size: 1.0625rem; max-width: 30em; }
  .entrance__art .skyline { margin-inline: -48px; }
  .entrance__form { align-items: center; margin: 0; padding: 56px 48px; background: none; border-radius: 0; box-shadow: none; }
  .entrance__panel { max-width: 400px; }
}

/* The form side */
.entrance__panel .eyebrow { margin-bottom: 8px; color: var(--brand); }
.entrance__panel h1 { margin-bottom: 10px; font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.entrance__panel h1 b { color: var(--brand); }
.entrance__panel .lede { margin-bottom: 20px; font-size: 0.96875rem; line-height: 1.55; }
.entrance__panel .field { margin-bottom: 16px; }
.entrance__panel :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]) { min-height: 46px; }
.entrance__panel .btn[type="submit"] { min-height: 48px; margin-top: 4px; }
.entrance__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 0.8125rem; line-height: 1.55; }
.entrance__foot p + p { margin-top: 6px; }
.entrance__foot a { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.entrance__foot a:hover { text-decoration: underline; }
.list + .entrance__foot { border-top: 0; padding-top: 0; }

/* allauth's element templates render inside the entrance panel */
.entrance__panel > p:not([class]) { color: var(--text-2); font-size: 0.96875rem; line-height: 1.55; }
.entrance__panel form { margin: 0; }
.entrance__panel form p { margin: 0 0 16px; }
.entrance__panel form p > span { display: block; margin-top: 6px; color: var(--text-2); font-size: 0.8125rem; line-height: 1.45; }
.entrance__panel h2 { margin-bottom: 8px; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.entrance__panel hr { margin: 26px 0 22px; border-top-color: var(--line-soft); }
.entrance__panel section + section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.entrance__panel img[src^="data:"] { width: 196px; height: 196px; margin: 8px 0 20px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
/* Codes are codes: the authenticator secret, the one-time code and the recovery codes */
.entrance__panel :is(#authenticator_secret, #recovery_codes, input[autocomplete="one-time-code"]) { font-family: var(--mono); letter-spacing: 0.02em; }
.entrance__panel .btn + .btn, .entrance__panel .btn-row { margin-top: 10px; }
.entrance__panel .btn-row > .btn { margin-top: 0; }
.entrance__panel .stack > * + * { margin-top: 12px; }
@media (max-width: 700px) { .entrance__panel .btn-s { min-height: var(--tap); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.providers { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* ---------- Covers (errors, offline, document share links): one message on an emerald stage ---------- */
.cover { min-height: calc(100vh - var(--shell-top, 0px)); min-height: calc(100dvh - var(--shell-top, 0px)); display: grid; grid-template-rows: auto 1fr; background: var(--paper); }
.cover__body {
  --bp-sky: clamp(96px, 16vw, 168px);
  display: flex; flex-direction: column; justify-content: center;
  width: calc(100% - 2 * var(--gutter)); margin-top: 4px; margin-bottom: var(--gutter);
  padding-block: 44px calc(var(--bp-sky) + 32px); padding-inline: 22px;
  border-radius: 24px; box-shadow: var(--shadow-brand);
}
.cover__body > * { max-width: 40rem; }
.cover__body h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -0.035em; }
.cover__body .lede { color: var(--on-dark-2); }
.cover__body .muted { color: var(--on-dark-3); }
.cover__body .eyebrow { margin-bottom: 16px; }
.cover .num-xl { margin: 0 0 18px; color: var(--accent-soft); font-weight: 300; letter-spacing: -0.04em; }
@media (min-width: 768px) {
  .cover__body { width: calc(100% - 48px); margin-bottom: 24px; padding-block: 72px calc(var(--bp-sky) + 40px); padding-inline: var(--gutter); border-radius: var(--r-xl); }
}
@media (min-width: 1000px) {
  .cover__body::before { inset-block: 0 72px; inset-inline-end: 0; width: min(40%, 540px); height: auto; }
}
@media (min-width: 1280px) { .cover__body { --bp-sky: 196px; } }

/* Forced colours: the panels become plain system surfaces; the lattice and skyline go. */
@media (forced-colors: active) {
  .hero, .band, .entrance__art, .cover__body { background: Canvas; border: 1px solid CanvasText; }
  .hero::before, .hero::after, .band::before, .entrance__art::before, .cover__body::before, .cover__body::after, .skyline { display: none; }
  /* The light logo keeps a small emerald tile, so it shows on a light system canvas too */
  .entrance__art .logo { forced-color-adjust: none; padding: 6px 8px; border-radius: 8px; background: var(--brand-ink); }
}
/* Print: dark text on white paper; no panels, no artwork. */
@media print {
  .hero, .band, .entrance__art, .cover__body { background: none; color: var(--text); box-shadow: none; border-radius: 0; }
  .hero::before, .hero::after, .band::before, .entrance__art::before, .cover__body::before, .cover__body::after, .entrance__art .logo { display: none; }
  /* Light-on-emerald text turns dark on the paper (!important: it outranks every panel rule) */
  :is(.hero, .band, .entrance__art, .cover__body) :is(p, li, span, a) { color: var(--text-2) !important; }
  :is(.hero, .band, .entrance__art, .cover__body) :is(h1, h2, .h1, .display, .eyebrow, .num) { color: var(--heading) !important; }
  :is(.hero, .band, .entrance__art, .cover__body) :is(h1, h2, .h1, .display) b { color: var(--brand) !important; }
  .entrance { display: block; }
  .entrance__art { position: static; height: auto; margin: 0; padding: 0 0 16px; }
  .entrance__form { margin: 0; padding: 0; box-shadow: none; }
}
/* == End brand pages == */

/* ---------- Behaviour ---------- */
/* Busy: a pressed button shows it is working and cannot be pressed twice (ui.js). */
.btn[aria-busy="true"] { opacity: 0.75; pointer-events: none; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pms-spin 700ms linear infinite; }
@keyframes pms-spin { to { transform: rotate(360deg); } }

/* Messages arrive softly; a success note leaves by itself (ui.js), a problem stays. */
.messages li { animation: pms-in 220ms var(--ease) both; transition: opacity 400ms var(--ease); }
.messages li.is-leaving { opacity: 0; }
@keyframes pms-in { from { opacity: 0; transform: translateY(-4px); } }

/* Moving between pages: a short cross-fade where the browser supports it. The sidebar and the
   portal bars do not move, so only the work area changes. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: var(--ease); }
.side { view-transition-name: pms-side; }
.p-head { view-transition-name: pms-head; }
.p-bottom { view-transition-name: pms-bottom; }
::view-transition-old(pms-side), ::view-transition-new(pms-side),
::view-transition-old(pms-head), ::view-transition-new(pms-head),
::view-transition-old(pms-bottom), ::view-transition-new(pms-bottom) { animation: none; }

/* htmx: indicator styles live here (htmx's own injected <style> is disabled for the CSP). */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; }
  .relations a:hover, .quick a:hover, .btn:active { transform: none; }
}
@media (forced-colors: active) {
  .btn, .status, .stats, .list, .kv, .table-wrap, .feature, .relations a, .points li, .entrance__panel, .item__lead, .chips > a { border: 1px solid CanvasText; }
  .status::before, .chips > a[aria-current="page"], nav.actions > a.btn[aria-current="page"]::after { background: CanvasText; forced-color-adjust: none; }
  .chips > a[aria-current="page"] { color: Canvas; }
  .section-head > a:not(.btn)::after, .link-next::after { background: LinkText; forced-color-adjust: none; }
}
@media print {
  .side, .p-head, .p-bottom, .env-ribbon, .site-head, .skyline, .topbar, .skip { display: none !important; }
  body, .ws { background: #fff; }
  .list, .kv, .table-wrap, .stats, .feature { box-shadow: none; }
  .feature--hero { background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
  .feature--hero::after { display: none; }
  /* !important: it outranks every rule that lights the card's words for the emerald */
  .feature--hero :is(p, .muted, .help, label, .label, .go, .link-next, .notice, .notice a, li, span, dd, dt) { color: var(--text-2) !important; }
  .feature--hero :is(.num, h2, h2 b, .eyebrow, strong, b) { color: var(--heading) !important; }
  .feature--hero .status { --s-bg: var(--quiet-bg); --s-tx: var(--quiet-tx); --s-ring: var(--line-strong); }
  .feature--hero .status, .feature--hero .status * { color: var(--quiet-tx) !important; }
  .feature--hero .go .i { color: var(--text-2) !important; }
}