/* ============================================================
   Microcessor Design System — Bootstrap Overrides
   ============================================================
   Brand: #320F3D (plum) / --bs-primary #320F3D (violet)
   Text:  #414244 (dark gray)
   BG:    #F7F6F3 (warm off-white)
   ============================================================ */

/* Carton — the default theme. Warm paper tones: deeper warm background,
   soft off-white surfaces, warm-tinted borders and text. */
:root, [data-theme="carton"] {
  /* Brand overrides for Bootstrap */
  --bs-primary: #320F3D;
  --bs-primary-rgb: 50, 15, 61;
  --bs-body-bg: #ECEAE5;
  --bs-body-color: #38372F;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-border-color: #D8D4C8;

  /* Custom tokens */
  --brand: #320F3D;
  --brand-dark: #26092F;
  --brand-darker: #1A0821;
  --plum: #320F3D;
  --ink: #1F1B1E;
  --ink-on: #FFFFFF;
  --brand-light: #6B3A78;
  --brand-subtle: #EDE2E9;
  --coral: #FF6B5B;
  --coral-dark: #F5564A;
  --focus: #5D9288;
  --focus-dark: #4A7A70;
  --focus-subtle: #DFE9E4;
  --danger: #C0392B;
  --danger-dark: #A93226;
  --danger-subtle: #F2DDD8;
  --warning: #A8761B;
  --warning-subtle: #F0E4CB;
  --text-primary: #38372F;
  --text-secondary: #625F53;
  --text-muted: #6A6658;
  --bg: #ECEAE5;
  --bg-sunken: #E2DFD4;
  --surface: #F8F7F3;
  --bg-hover: #E6E3D9;
  --surface-hover: rgba(85, 60, 8, 0.05);
  --veil: rgba(185, 182, 175, 0.45);
  color-scheme: light;
}

[data-theme="light"] {
  /* Brand overrides for Bootstrap */
  --bs-primary: #320F3D;
  --bs-primary-rgb: 50, 15, 61;
  --bs-body-bg: #F7F6F3;
  --bs-body-color: #414244;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-border-color: #E2E0DB;

  /* Custom tokens */
  --brand: #320F3D;
  --brand-dark: #26092F;
  --brand-darker: #1A0821;
  --brand-light: #6B3A78;
  --brand-subtle: #F2E6EF;
  --coral: #FF6B5B;
  --coral-dark: #F5564A;
  --focus: #5D9288;
  --focus-dark: #4A7A70;
  --focus-subtle: #E8F2EF;
  --danger: #C0392B;
  --danger-dark: #A93226;
  --danger-subtle: #FADBD8;
  --warning: #B7791F;
  --warning-subtle: #FCEFD4;
  --text-primary: #414244;
  --text-secondary: #6B6D6F;
  --text-muted: #6D6F72;
  --bg: #F7F6F3;
  --bg-sunken: #EFEEE9;
  --surface: #fff;
  --bg-hover: #f1f3f5;
  --surface-hover: rgba(0, 0, 0, 0.03);
  --veil: rgba(176, 174, 168, 0.4);
  color-scheme: light;
}

[data-theme="dark"] {
  --ink: #8A5484;
  --ink-on: #FFFFFF;
  --bs-primary: #A876A2;
  --bs-primary-rgb: 168, 118, 162;
  --bs-body-bg: #1A1B1E;
  --bs-body-color: #E0DED9;
  --bs-border-color: #2E3035;

  --brand: #A876A2;
  --brand-dark: #8A5484;
  --brand-darker: #6E3969;
  --brand-light: #C49BBC;
  --brand-subtle: #2C2229;
  --focus: #7DB0A5;
  --focus-dark: #5D9288;
  --focus-subtle: #1E2C29;
  --danger: #E74C3C;
  --danger-dark: #C0392B;
  --danger-subtle: #3B1C1A;
  --warning: #E0A33E;
  --warning-subtle: #372C15;
  --text-primary: #E0DED9;
  --text-secondary: #A3A1A0;
  --text-muted: #8A8C8F;
  --bg: #1A1B1E;
  --bg-sunken: #141517;
  --surface: #232529;
  --bg-hover: #2a2c30;
  --surface-hover: rgba(255, 255, 255, 0.04);
  --veil: rgba(8, 9, 11, 0.55);
  color-scheme: dark;
}

/* Geometry, not palette: the same in every theme, so it is declared once. */
:root {
  /* One corner for the whole product (PL-273). Before this every sheet chose
     its own: 8px, 10px, 12px, 14px, 16px and stranger, roughly 900 of them,
     so two cards sitting side by side in different apps wore different
     corners. Four rungs, and a container reads one rather than picking a
     number:

       sm  tiny chrome, a swatch, a bar, a tag inside a row
       --  every in-page container: cards, panels, sections, menus, wells
       lg  a surface that floats above the page: dropdown, popover, toast
       xl  a surface that covers the page: drawer, modal, mobile sheet

     Nothing meant to be round reads these. A circle stays 50%, a pill stays
     999px, and the app-icon squircles keep their proportional corner.
     Bootstrap's own radius variables are pointed at these below, so a
     Bootstrap card and one of ours cannot drift apart. */
  --border-radius-sm: 3px;
  --border-radius: 5px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  /* The platform navbar's height, measured: 8px padding top and bottom, a 1px
     bottom border, border-box, which renders at 49px. Everything sticky BELOW
     the navbar offsets itself by this, so it is published here rather than
     repeated. It was undeclared for a long time and every one of those rules
     fell back to a guessed 56px, which is where the 7px strip of background
     under the Micron console's admin bar came from. .navbar reads it too, so
     the bar and the offsets cannot drift apart again. */
  --nav-height: 49px;

  /* One height and one radius for every single-line control, buttons and
     inputs alike (PL-250). Before this a button was 33.5px, a small button
     28px and an input 38.9px, so a button standing beside an input sat short
     and the gap split above and below it. The number is the input's: the
     button came UP to meet it, rather than the field coming down, because
     the shorter control read as cramped once the whole product wore it.
     A control does not set its own height or its own corner: it reads these.
     Radius came down anyway, because the 10px and 11px inputs read as too
     round beside a 6px button. Height and corner are separate decisions,
     which is why this stays its own name, but the number is no longer its
     own: it reads the scale above, so a button and the card it sits on
     cannot disagree about what a corner is. */
  --control-h: 38px;
  --control-radius: var(--border-radius);
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--bg);
  color: var(--text-primary);
}

/* --- Alpine.js: hide elements until initialized --- */
[x-cloak] { display: none !important; }

/* --- Bootstrap radius conformance (PL-273) --- */
/* Bootstrap's own ladder is 0.25, 0.375, 0.5, 1 and 2rem, and every component
   derives its corner from it, so pointing the ladder at our tokens carries
   cards, alerts, badges, buttons, list groups, accordions, progress bars,
   tooltips and toasts over in one place. This sheet loads after Bootstrap and
   the selector matches its own, so ours wins. The pill is left alone, being a
   shape rather than a corner. A dropdown is re-pointed on its own because
   Bootstrap derives it from the base rung, and a panel that floats above the
   page wears the softer corner. */
:root {
  --bs-border-radius-sm: var(--border-radius-sm);
  --bs-border-radius: var(--border-radius);
  --bs-border-radius-lg: var(--border-radius-lg);
  --bs-border-radius-xl: var(--border-radius-xl);
  --bs-border-radius-xxl: var(--border-radius-xl);
}

.dropdown-menu {
  --bs-dropdown-border-radius: var(--border-radius-lg);
  --bs-dropdown-inner-border-radius: calc(var(--border-radius-lg) - var(--bs-border-width));
}

/* --- Bootstrap button override --- */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger-dark);
  --bs-btn-active-border-color: var(--danger-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
}

/* --- Links --- */
a {
  color: var(--brand);
}
a:hover {
  color: var(--brand-dark);
}

/* --- Navbar --- */
.navbar {
  /* border-box, so this 49px includes the padding and the bottom border and is
     the same number the sticky offsets below are reading. */
  height: var(--nav-height);
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bs-border-color);
}

/* --- Dark mode: surface colors --- */
[data-theme="dark"] .card,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text { background-color: var(--surface); color: var(--text-primary); border-color: var(--bs-border-color); }
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); }
/* Bootstrap 5.3 ships cool greys for its neutral text utilities: .text-secondary
   resolves to #6C757D and .text-muted to a translucent near-black. Both read
   cold against the warm stone ground, and .text-secondary measured 3.9:1 on it,
   under the 4.5:1 floor. Point both at the warm ramp, which is themed. */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
[data-theme="dark"] .table {
  --bs-table-color: var(--text-primary);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-active-color: var(--text-primary);
  --bs-table-hover-color: var(--text-primary);
}
[data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top { border-color: var(--bs-border-color) !important; }
[data-theme="dark"] .form-nested-overlay { background: rgba(0, 0, 0, 0.88); }

/* --- Form inputs — upgraded polish ---
   Shared visual DNA for .form-control, .form-select, .msel-trigger, .mdate-trigger.
   Any native <input>, <select>, or custom trigger inherits the same look. */
.form-control,
.form-select {
  border: 2px solid var(--bs-border-color);
  border-radius: var(--control-radius);
  color: var(--text-primary);
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
  min-height: var(--control-h);
  padding: 4px 12px;
  font-size: 0.875rem;
  line-height: 1.35;
}
.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--brand-light);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent),
    0 1px 2px rgba(16, 24, 40, 0.05);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--bg-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
textarea.form-control,
textarea.form-control-sm {
  min-height: 72px;
  line-height: 1.5;
}

/* Native <select> visual parity — keep Bootstrap's chevron but push it in
   so it sits at the same inset as the msel/mdate triggers. */
.form-select {
  padding-left: 36px;
  background-position: left 12px center;
  background-size: 14px 10px;
}

/* --- Labels — assertive, spaced --- */
.form-label,
.form-group .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.005em;
  margin-bottom: 0;
  line-height: 1.3;
}
.form-group .form-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Form switch / checkbox brand color */
.form-check-input {
  border-color: var(--bs-border-color);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* --- Cards --- */
.card {
  border-color: var(--bs-border-color);
  border-radius: var(--border-radius);
  background: var(--surface);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* --- Brand helpers --- */
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }
.bg-brand-subtle { background-color: var(--brand-subtle) !important; }
.border-brand { border-color: var(--brand) !important; }

/* --- Badge overrides --- */
.badge.bg-brand-subtle {
  color: var(--brand-dark);
}

/* --- Custom: app icon box --- */
.app-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
  border-radius: 0.5rem;
}

/* --- Custom: numbered steps --- */
.step-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Custom: code block --- */
.code-block {
  background: #1E1E2E;
  color: #CDD6F4;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}
.code-block .comment { color: #6C7086; }
.code-block .keyword { color: #CBA6F7; }
.code-block .string { color: #A6E3A1; }
.code-block .function { color: #89B4FA; }
.code-block .punctuation { color: #9399B2; }

/* --- Custom: CTA banner --- */
.cta-banner {
  background: var(--brand);
  border-radius: var(--border-radius);
  color: #fff;
}
.cta-banner h2 { color: #fff; }
/* 80% white on the brand fill measured 3.9:1. Every alpha that clears AA on
   this mauve is within a few percent of solid white, so the paragraph goes
   white and the size difference carries the hierarchy. */
.cta-banner p { color: #fff; }

.btn-white {
  background: var(--surface);
  color: var(--brand);
  border: none;
  font-weight: 600;
}
.btn-white:hover {
  background: var(--bg);
  color: var(--brand-dark);
}

/* ============================================================
   Form Drawer System
   ============================================================ */

/* --- Backdrop: translucent glass blur --- */
.form-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  cursor: pointer;
}

/* --- Right-side drawer --- */
.form-drawer {
  position: fixed;
  border-right: 1px solid var(--bs-border-color);
  z-index: 1050;
  display: flex;
  flex-direction: column;
}

.form-drawer-header {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.form-drawer-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

/* Parent crumb — a pill button that closes this layer back to the parent */
.form-crumb-parent {
  border: 1px solid var(--bs-border-color);
  background: var(--surface-hover);
}

/* A form layer = backdrop + drawer. Top-level layers paint at the backdrop/
   drawer's own z-index; a nested layer establishes its own stacking context
   above the parent so its backdrop dims the parent drawer underneath. */
.form-panel-layer-nested {
  position: relative;
  z-index: 1070;
}

.form-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
}

.form-drawer-close {
  align-items: center;
  justify-content: center;
  padding: 0;
}
.form-drawer-close:hover {
  background: var(--surface-hover);
}

/* ============================================================
   Form Modal — centered sibling of the form drawer (forms/modal.html)
   Same fields + submit as the drawer, rendered as a wide centered card.
   Reuses .form-backdrop for the overlay.

   Centered via a flex positioner, NOT a transform on the card: a
   transformed ancestor becomes the containing block for the select
   dropdown's position:fixed, which mispositions it and causes a
   focus/scroll reposition loop (violent flicker). The positioner is
   click-through (pointer-events:none) so clicks outside the card reach
   the backdrop and close it; the card re-enables pointer events.
   ============================================================ */
.form-modal-positioner {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.form-modal {
  pointer-events: auto;
  border: 2px solid var(--brand);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 768px) {
  .form-modal {
    border-width: 0;
  }
}

.form-modal-header {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.form-modal-title {
  margin: 0;
}

.form-modal-close {
  align-items: center;
  justify-content: center;
  padding: 0;
}
.form-modal-close:hover { background: var(--surface-hover); }

.form-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.form-modal-footer {
  flex-shrink: 0;
}

/* Inline chips field (Chips descriptor) — toggle pills syncing an array */

.form-chip {
  border: 1px solid var(--bs-border-color);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.form-chip:hover { border-color: var(--brand-light); }
.form-chip.is-on {
  background: var(--brand-subtle);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 500;
}

/* ============================================================
   Drawer System — platform-level slide-out panel
   Usage: overlay → drawer container → header / body
   Width: default (65vw, min 480px), .drawer-lg (70vw)

   The silhouette matches the form drawer: the panel floats off
   every viewport edge with a real radius and shadow. Interiors
   keep their existing --surface plane; only the shell changed.
   ============================================================ */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 1040;
  background: var(--veil);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
  animation: drawer-fade-in 0.28s ease both;
  cursor: pointer;
}
@keyframes drawer-fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 14px; left: 14px; bottom: 14px;
  width: 65vw; min-width: 480px; max-width: calc(100vw - 28px);
  z-index: 1050;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow:
    0 48px 90px -24px rgba(20, 18, 16, 0.42),
    0 8px 24px -12px rgba(20, 18, 16, 0.22);
  display: flex; flex-direction: column;
  animation: drawer-slide-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
[data-theme="dark"] .drawer {
  box-shadow:
    0 48px 90px -24px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
.drawer-lg { width: 70vw; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
.drawer-title {
  margin: 0; font-size: 0.9375rem; font-weight: 600;
  color: var(--text-primary);
}
.drawer-close {
  background: none; border: none; font-size: 1.25rem;
  color: var(--text-muted); cursor: pointer;
  padding: 0.25rem; line-height: 1; border-radius: var(--border-radius);
}
.drawer-close:hover { background: var(--bg-sunken); color: var(--text-primary); }

.drawer-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.drawer-body::-webkit-scrollbar { display: none; }

.version-update-changes { scrollbar-width: none; -ms-overflow-style: none; }
.version-update-changes::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .drawer { top: 0; left: 0; bottom: 0; width: 100vw; min-width: 0; border: none; border-radius: 0; }
}

/* ============================================================
   Nested Form (Level 2) — form inside an existing drawer
   Usage: overlay covers the drawer body, toolbar + card on top
   ============================================================ */

.form-nested-overlay {
  position: fixed;
  top: 14px;
  left: 14px;
  bottom: 14px;
  width: 65vw;
  min-width: 480px;
  max-width: calc(100vw - 28px);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  z-index: 1060;
  /* No backdrop-filter/filter/transform here: any of those makes this overlay
     the containing block for position:fixed descendants, which throws the
     microSelect dropdown (currency, pay frequency) off-screen. Opacity is
     raised to keep the drawer behind obscured without the blur. */
  background: rgba(255, 255, 255, 0.74);
  display: flex;
  flex-direction: column;
  animation: drawer-fade-in 0.15s ease;
}

/* Inside the wider detail card the level-2 overlay matches its geometry,
   so the card behind is fully covered rather than peeking out. */
.dv-card .form-nested-overlay { width: min(1080px, 86vw); }

@media (max-width: 768px) {
  .form-nested-overlay {
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    min-width: 0;
    border-radius: 0;
  }
}

.form-nested-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 9rem;
  margin-top: 9rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.form-nested-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: none;
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.form-nested-close:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}
.form-nested-close .material-symbols-outlined { font-size: 16px; }

.form-nested-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: none;
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--focus) 10%, transparent);
  color: var(--focus);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.form-nested-save:hover {
  background: color-mix(in srgb, var(--focus) 18%, transparent);
}
.form-nested-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-nested-save .material-symbols-outlined { font-size: 16px; }

.form-nested-card {
  margin: 0 9rem 9rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-nested-card .alert { margin: 0; }

/* ============================================================
   Centered Modal — shared across all apps
   Usage: .pf-modal-backdrop > .pf-modal > header / body / footer
   ============================================================ */

.pf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--veil);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1040;
}

/* The picker opens from inside a drawer, a nested form or a detail card, so
   it sits above all three (the nested form layer is the highest at 1070). */
.pf-modal-backdrop:has(> .pf-picker) { z-index: 1080; }

.pf-modal {
  background: var(--surface);
  border-radius: var(--border-radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: pf-modal-in 0.15s ease;
}

.pf-modal-sm { max-width: 400px; }
.pf-modal-md { max-width: 700px; }

/* The size a record is read at, rather than the size a question is asked at.
   A variant beside its pictures, a document beside its facts. Two columns via
   .pf-modal-split on the body; on its own it is simply a wider card. */
.pf-modal-lg {
  max-width: 960px;
  width: calc(100vw - 3rem);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-modal-lg > .pf-modal-body { overflow-y: auto; min-height: 0; }

/* Not a step on the ladder: a modifier for a viewer whose content already has
   a natural size, an image or a PDF. The card shrinks to what is inside it and
   stops just short of the viewport, so a thumbnail does not get a wall around
   it. The body goes flush, because a viewer frames its content rather than
   padding it. */
.pf-modal-fit {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
}

.pf-modal-fit > .pf-modal-body { padding: 0; overflow: auto; }

/* --- Site window --- */
.pf-site-actions { display: flex; align-items: center; gap: 8px; }
.pf-site-body { flex: 1 1 auto; min-height: 0; padding: 0; gap: 0; }
.pf-site-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pf-site-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2rem;
  color: var(--text-secondary);
  text-align: center;
}
.pf-site-state > .material-symbols-outlined { font-size: 40px; color: var(--text-muted); }
.pf-site-state-title { font-weight: 600; color: var(--text-primary); }
.pf-site-state p { margin: 0; font-size: 0.8125rem; }

/* A full workbench, for a surface that is an application in a box rather than
   a record: the platform calendar is the one that needs it. It carries its own
   fixed height on purpose, because a workbench that resizes with its content
   is not one. Lived in platform-calendar.css until it was the only large size
   anyone had, which is how two apps ended up inlining their own max-width. */
.pf-modal-xl {
  max-width: 1400px;
  width: 95vw;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--border-radius-xl);
  position: relative;
}

@media (max-width: 768px) {
  .pf-modal-xl {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    border-radius: 0;
  }
}

@keyframes pf-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.pf-modal-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.pf-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.pf-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.pf-modal-close .material-symbols-outlined { font-size: 20px; }

.pf-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pf-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}

/* The two-column body of a .pf-modal-lg. Replaces the body's own padding, so
   each column pads itself and the rule between them runs the full height.
   Both columns scroll on their own; minmax(0, ...) is what stops a wide image
   or a long SKU from pushing the other column out of the card. */
.pf-modal-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.pf-modal-split > * {
  padding: 1.25rem;
  overflow-y: auto;
  min-height: 0;
}

.pf-modal-split > * + * { border-inline-start: 1px solid var(--bs-border-color); }

/* --- The picker ---
   A .pf-modal-lg whose job is to CHOOSE something and hand it back to the
   surface underneath, then get out of the way.

   This is the one documented exception to "a modal that needs a list is a
   page". A picker cannot be a page: it is opened from inside a document you
   are editing, and navigating away to choose a picture would abandon what you
   were writing. Google Docs and Word both resolve it the same way, with an
   in-place overlay that searches and browses without leaving the document.
   The exception is narrow and holds only while all three are true:

     1. It is opened from an editing surface that cannot be navigated away from.
     2. It ends in a selection that is handed back, never in navigation.
     3. It owns no records. It cannot create, rename or delete anything.

   A surface that browses for its own sake is still a page. Files itself is a
   page; choosing a file from inside a document is this. */
.pf-picker {
  height: min(640px, 88vh);
}

.pf-picker > .pf-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* The search strip IS the field: flush across the card, the answer to the
   scale question. At ten thousand rows you do not scroll, you search. */
.pf-picker-search {
  flex: none;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  background: var(--surface);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-primary);
}
.pf-picker-search::placeholder { color: var(--text-muted); }
.pf-picker-search:focus { outline: none; background: var(--bg); }

/* Where you are, and the way back up. Empty at the root. */
.pf-picker-crumbs {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem 1rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  border-block-end: 1px solid var(--bs-border-color);
}

.pf-picker-crumb {
  background: none;
  border: 0;
  padding: .1rem .25rem;
  color: var(--text-secondary);
  border-radius: var(--border-radius-sm, 6px);
  cursor: pointer;
}

.pf-picker-crumb:hover { color: var(--text-primary); background: var(--bs-tertiary-bg); }
.pf-picker-crumb[aria-current="page"] { color: var(--text-primary); font-weight: 600; cursor: default; }

/* The results area scrolls, nothing else does. Results are the Files app's
   own cards (.files-grid / .files-card below), minus rename and the menu. */
.pf-picker-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.pf-picker-results .files-card { width: 100%; font: inherit; }
.pf-picker-results .files-card[aria-selected="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-subtle);
}

/* --- File and folder cards, shared by the Files app and the picker --- */
.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  position: relative;
}

.files-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.files-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}

.files-card-icon {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.files-card-icon svg { display: block; }
.files-card-icon .material-symbols-outlined { font-size: 32px; }

.files-card-info {
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.files-card-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-card-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.files-card-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--border-radius);
  border: 1px solid var(--bs-border-color);
}

/* Loading, empty, denied and not-installed all land here. A picker that says
   nothing when it has nothing to show reads as broken. */
.pf-picker-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}

.pf-picker-state .material-symbols-outlined { font-size: 2.25rem; opacity: .65; }
.pf-picker-state-title { font-weight: 600; color: var(--text-primary); }
.pf-picker-state-body { font-size: .8125rem; max-width: 42ch; }

.pf-picker-tabs {
  flex: none; display: flex; gap: 2px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bg);
}
.pf-picker-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  padding: 9px 12px 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-picker-tab .material-symbols-outlined { font-size: 17px; }
.pf-picker-tab:hover { color: var(--text-primary); }
.pf-picker-tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
[data-theme="dark"] .pf-picker-tab.is-active { color: var(--brand-light); }
.pf-picker-tab:disabled { opacity: .45; cursor: not-allowed; }
.pf-picker-tab:disabled:hover { color: var(--text-muted); }
.pf-picker-results .files-card:disabled { cursor: progress; }
.pf-picker-results .files-card.is-blocked { opacity: .45; cursor: not-allowed; }
.files-card-app-icon { width: 36px; height: 36px; object-fit: contain; }
.pf-picker-foot {
  flex: none; display: flex; flex-direction: column; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bg);
}
.pf-picker-foot-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pf-picker-foot-name {
  flex: 1 1 auto; min-width: 0;
  font-size: .8125rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-picker-foot-label { flex: none; font-size: .75rem; color: var(--text-muted); }

.pf-picker-upload { flex: 1 1 auto; min-height: 0; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; }
.pf-picker-upload .file-upload-zone { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 2rem 1rem; }
.pf-picker-upload-limits { font-size: 11.5px; color: var(--text-muted); }
.pf-picker-upload-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  font-size: 12.5px;
}
.pf-picker-upload-item.is-failed { border-color: var(--danger); }
.pf-picker-upload-item.is-failed .file-upload-item-icon { color: var(--danger); }
.pf-picker-upload-error { font-size: 11.5px; color: var(--danger); white-space: nowrap; }
.file-upload-from-files { margin-top: 8px; align-self: flex-start; width: auto; }
.file-upload-item-origin {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 10%, transparent);
  padding: 2px 6px; border-radius: 99px; white-space: nowrap;
}
[data-theme="dark"] .file-upload-item-origin { color: var(--brand-light); }


/* One column on a phone, media first: the thing you opened it to look at does
   not belong below the fold. */
@media (max-width: 860px) {
  .pf-modal-lg { width: calc(100vw - 1.5rem); max-height: 92vh; }
  .pf-modal-split { grid-template-columns: minmax(0, 1fr); }
  .pf-modal-split > * + * {
    border-inline-start: 0;
    border-block-start: 1px solid var(--bs-border-color);
  }
}

/* --- Form groups ---
   (label / text styles live with the form inputs block above for cohesion.) */
/* A field frozen for THIS caller by a permission they do not hold. A real
   <fieldset disabled>, so every control inside is genuinely inert rather than
   merely looking it; this only removes the browser's own fieldset chrome and
   mutes the contents so the state is visible. The field stays readable and
   carries its reason as a tooltip: greyed, never hidden. */
.form-field-disabled {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  opacity: 0.62;
  cursor: not-allowed;
}
.form-field-disabled .form-label { cursor: not-allowed; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* --- Sections --- */
.form-section {
  border: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-section-label {
  margin-bottom: 0;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--bg-sunken);
}

.form-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-section-chevron {
  font-size: 0.625rem;
}

.form-section-chevron.expanded {
  transform: rotate(-180deg);
}

/* --- Radio cards --- */
.radio-cards {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.radio-card {
  flex: 1;
  min-width: 100px;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--control-radius);
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: var(--surface);
}

.radio-card:hover {
  border-color: var(--brand-light);
}

.radio-card.active {
  border-color: var(--brand);
  background: var(--brand-subtle);
}

/* --- Lookup field --- */

.lookup-clear {
  padding: 0 0.25rem;
}

.lookup-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius-lg);
  margin-top: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.lookup-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.lookup-option:hover,
.lookup-option.active {
  background: var(--brand-subtle);
  color: var(--brand-dark);
}

.lookup-avatar {
  flex-shrink: 0;
}

.lookup-initials {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.lookup-option-icon {
  flex-shrink: 0;
}

.lookup-status {
  text-align: center;
}

/* Inline "create new" affordance inside a lookup dropdown */

.lookup-create-trigger:hover {
  background: var(--brand-subtle);
}

.lookup-chip {
  background: var(--brand-subtle);
  line-height: 1.5;
}

/* --- File upload zone --- */
.file-upload-zone {
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.file-upload-zone:hover,
.file-upload-zone.drag-over {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.file-upload-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--surface-hover);
  border-radius: var(--border-radius);
  font-size: 0.8125rem;
  position: relative;
}
.file-upload-item-name {
  flex: 1;
  min-width: 0;
}
.file-upload-item-size {
  white-space: nowrap;
}
.file-upload-item-progress {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

/* --- Line grid (repeating rows field) --- */
.line-grid .line-grid-table-wrap {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  overflow-x: auto;
}
.line-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.line-grid-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: right;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.line-grid-table td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--bs-border-color);
  vertical-align: middle;
}
.line-grid-table tbody tr:last-child td {
  border-bottom: none;
}
.line-grid-table th.num,
.line-grid-table td.num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.line-grid-table input,
.line-grid-table select {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  border-radius: var(--border-radius);
}
.line-grid-table input.num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.line-grid-table input:focus,
.line-grid-table select:focus {
  border-color: var(--brand);
  background: var(--surface);
  outline: none;
}
.line-grid-table tfoot td {
  border-top: 2px solid var(--bs-border-color);
  border-bottom: none;
}
.line-grid-table .row-actions {
  width: 32px;
  text-align: center;
}
.line-grid-table .row-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.125rem;
  display: inline-flex;
}
.line-grid-table .row-actions button:hover {
  color: var(--danger);
}
.line-grid-table .row-actions .material-symbols-outlined {
  font-size: 18px;
}
.line-grid-balance.is-balanced {
  background: color-mix(in srgb, var(--focus) 12%, transparent);
}
.line-grid-balance.is-unbalanced {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* --- Hero specifics --- */
.hero-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* ============================================================
   is-loading — universal button spinner
   Works on circle, square, pill, or any shaped button.
   Dims the button and replaces content with a CSS spinner.
   ============================================================ */

.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 0.65;
}

.is-loading > * {
  visibility: hidden;
}

.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em -0.5em 0 0;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  animation: spin-loading 0.6s linear infinite;
  opacity: 1;
  color: var(--text-muted);
}

/* White spinner on brand-colored buttons */
.is-loading[class*="btn-primary"]::after,
.is-loading.chat-send-btn::after,
.is-loading.chat-create-btn::after {
  color: #fff;
}

@keyframes spin-loading {
  to { transform: rotate(-360deg); }
}

/* ------------------------------------------------------------
   In-flight HTMX buttons borrow the same spinner.

   HTMX puts .htmx-request on the element that fired the request and takes it
   off once the response has swapped in, so a button that opens a form panel
   shows feedback for exactly as long as the fetch takes, with no per-trigger
   wiring and nothing to clear by hand. pointer-events are dropped for the
   duration, which also kills the double-click that opens two panels.

   .pf-btn is named alongside the tag and the Bootstrap class because the
   platform button system (platform.css, PL-250) is worn by anchors as well as
   buttons: a download link, a deep link into another app, a row action that is
   a real href for middle-click. `button.htmx-request` cannot see those, and an
   anchor that fires hx-get with no feedback is a control the user clicks twice.
   ------------------------------------------------------------ */
button.htmx-request,
.pf-btn.htmx-request,
.btn.htmx-request {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 0.65;
}

button.htmx-request > *,
.pf-btn.htmx-request > *,
.btn.htmx-request > * {
  visibility: hidden;
}

button.htmx-request::after,
.pf-btn.htmx-request::after,
.btn.htmx-request::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em -0.5em 0 0;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  animation: spin-loading 0.6s linear infinite;
  opacity: 1;
  color: var(--text-muted);
}

button.htmx-request[class*="btn-primary"]::after,
.pf-btn.htmx-request[class*="btn-primary"]::after,
.btn.htmx-request[class*="btn-primary"]::after {
  color: #fff;
}

/* Triggers that are not buttons (a clickable card or table row) cannot blank
   their content for a spinner without looking broken, so they just go quiet
   and busy instead. Opt in with .hx-busy; plain .htmx-request is left alone so
   containers that load their own content are unaffected. */
.hx-busy.htmx-request {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* --- Section backgrounds --- */
.bg-white-section {
  background: var(--surface);
}

/* --- Footer --- */
footer h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
footer a {
  color: var(--text-secondary);
}
footer a:hover {
  color: var(--text-primary);
}

/* ============================================================
   Form System, "Showroom"

   The visual layer for core/forms (panel.html, modal.html,
   partials/fields.html). Appended last so it refines the base
   rules above; every colour comes from a platform token, so
   carton / light / dark follow automatically.

   Two ideas carry the whole skin:

     1. The panel floats. It sits off every viewport edge with a
        real radius and shadow instead of welding to the side.
     2. Controls are sunken, then lift. An input is filled with
        --bg-sunken and rises to --surface with a brand ring on
        focus, which is what lets a section card (also --surface)
        sit on the body without the two planes blurring together.

   Input rules stay scoped to .form-drawer-body / .form-modal-body
   on purpose: microselect and microdate are used app-wide (filter
   bars, toolbars, tables) and must keep their own look out there.
   ============================================================ */

/* --- Backdrop --- */
.form-backdrop {
  background: var(--veil);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
  animation: form-veil-in 0.28s ease both;
}
@keyframes form-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Drawer: floats off every edge --- */
.form-drawer {
  top: 14px;
  left: 14px;
  bottom: 14px;
  width: min(760px, 72vw);
  min-width: 0;
  max-width: none;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-right: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow:
    0 48px 90px -24px rgba(20, 18, 16, 0.42),
    0 8px 24px -12px rgba(20, 18, 16, 0.22);
  animation: drawer-slide-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
[data-theme="dark"] .form-drawer {
  box-shadow:
    0 48px 90px -24px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
@keyframes drawer-slide-in {
  from { transform: translateX(calc(-1*(100% + 24px))); }
  to   { transform: none; }
}

/* A nested form sits slightly inside its parent, so the layer underneath
   stays visible at the edges and the stack reads as depth, not a redraw. */
.form-panel-layer-nested .form-drawer {
  top: 30px;
  bottom: 30px;
  left: 30px;
}

@media (max-width: 820px) {
  .form-drawer,
  .form-panel-layer-nested .form-drawer {
    top: 0; left: 0; bottom: 0; right: 0;
    width: auto;
    border: none;
    border-radius: 0;
  }
}

/* --- Header: brand wash with a light source in the top left --- */
.form-modal-header,
.form-drawer-header {
  position: relative;
  flex: none;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 18px;
  border-bottom: none;
  background:
    radial-gradient(130% 150% at 6% -30%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%),
    linear-gradient(-135deg,
      color-mix(in srgb, var(--brand) 13%, var(--surface)),
      color-mix(in srgb, var(--brand-light) 5%, var(--surface)));
}

.form-head-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--border-radius-lg);
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand) 55%, var(--brand-dark));
  box-shadow:
    0 12px 24px -8px color-mix(in srgb, var(--brand) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.form-head-icon .material-symbols-outlined { font-size: 24px; }

.form-head-titles {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1; padding-top: 2px;
}
.form-modal-title,
.form-drawer-title,
.form-crumb-current {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--text-primary);
}
.form-head-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Live completion readout next to the title */
.form-head-meta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .form-head-meta { color: var(--brand-light); }

/* Breadcrumbs on a nested form */
.form-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.form-crumb { font: inherit; white-space: nowrap; }
.form-crumb-current { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.form-crumb-parent {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--bs-border-color));
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}
.form-crumb-parent:hover { color: var(--text-primary); border-color: var(--brand); }
.form-crumb-sep { font-size: 17px; color: var(--text-muted); flex-shrink: 0; }

.form-modal-close,
.form-drawer-close {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.form-modal-close:hover,
.form-drawer-close:hover {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--text-primary);
}
.form-modal-close .material-symbols-outlined,
.form-drawer-close .material-symbols-outlined { font-size: 20px; }

/* --- Completion rail: doubles as the header rule --- */
.form-progress {
  flex: none;
  height: 3px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, var(--bs-border-color));
}
.form-progress-bar {
  height: 3px; width: 0;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(-90deg, var(--brand-light), var(--brand));
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 65%, transparent);
  transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- Error summary: pinned, so it never scrolls out of sight --- */
.form-error-summary {
  flex: none;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--danger-subtle) 75%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger-dark);
  font-size: 12.5px; line-height: 1.45;
  animation: form-drop-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}
[data-theme="dark"] .form-error-summary { color: #F5A79E; }
.form-error-summary .material-symbols-outlined { font-size: 19px; flex: none; margin-top: -1px; }
.form-error-summary b { display: block; font-weight: 700; margin-bottom: 1px; }
@keyframes form-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Bodies --- */
.form-modal-body,
.form-drawer-body {
  padding: 18px;
  gap: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}

/* The body is the ONE scroll container in a form. Its children keep their full
   natural height: in a column flex box a child would otherwise shrink to fit,
   squashing a tall section and cutting off its last row of fields. */
.form-modal-body > *,
.form-drawer-body > * { flex-shrink: 0; }
.form-modal-body::-webkit-scrollbar,
.form-drawer-body::-webkit-scrollbar { display: none; }

/* Two-column bodies: only loose top-level fields sit side by side, every
   section card spans the full width and runs its own internal grid. */
.form-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
  align-content: start;
}
.form-body-grid > .form-section,
.form-body-grid > .line-grid,
.form-body-grid > .form-group:has(textarea),
.form-body-grid > .form-group:has(.file-upload-zone),
.form-body-grid > .form-group:has(.avatar-upload),
.form-body-grid > .form-group:has(.tag-input),
.form-body-grid > .form-group:has(.toggle-list),
.form-body-grid > .form-group:has(.color-swatches),
.form-body-grid > .form-group:has(.form-chips),
.form-body-grid > .form-group:has(.lookup-multi-chips),
.form-body-grid > .form-group:has(.line-grid-table),
.form-body-grid > .form-group:has(.form-richtext),
.form-body-grid > .form-group:has(.radio-cards:not(.radio-segmented)),
.form-body-grid > .form-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-body-grid { grid-template-columns: 1fr; } }

/* --- Section: an elevated card with its own header --- */
.form-modal-body .form-section,
.form-drawer-body .form-section,
.form-body-grid .form-section {
  margin: 0; padding: 0; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  /* Never clip and never scroll: a section grows to hold every field it has,
     and the form body is the only thing that scrolls. Nothing inside a section
     paints to its edge, so the rounded corners need no clipping, and leaving
     overflow visible also lets a lookup dropdown escape the card. */
  overflow: visible;
  box-shadow:
    0 1px 2px rgba(20, 18, 16, 0.04),
    0 14px 30px -22px rgba(20, 18, 16, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: form-section-rise 0.55s cubic-bezier(0.32, 0.72, 0, 1) backwards;
  animation-delay: calc(var(--sec-i, 0) * 70ms + 120ms);
}
@keyframes form-section-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.form-section.has-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--bs-border-color));
  box-shadow:
    0 1px 2px rgba(20, 18, 16, 0.04),
    0 14px 30px -22px color-mix(in srgb, var(--danger) 60%, transparent);
}

.form-section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
/* Hand-rolled forms outside the DSL have no collapse state to toggle. */
.form-section-head.is-static { cursor: default; }
.form-section-head:hover .form-section-label { color: var(--brand-dark); }
.form-section-head.is-static:hover .form-section-label { color: var(--text-primary); }
[data-theme="dark"] .form-section-head:hover .form-section-label { color: var(--brand-light); }

.form-section-chip {
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  color: var(--brand-dark);
  background: linear-gradient(-150deg,
    color-mix(in srgb, var(--brand) 24%, var(--surface)),
    color-mix(in srgb, var(--brand) 9%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
[data-theme="dark"] .form-section-chip { color: var(--brand-light); }
.form-section-chip .material-symbols-outlined { font-size: 19px; }

.form-section-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.form-section-label {
  margin: 0; padding: 0;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-primary);
  transition: color 0.15s;
}
.form-section-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

.form-section-count {
  flex: none;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--bg-sunken);
  padding: 3px 9px;
  border-radius: 999px;
}
.form-section-count.done { background: var(--focus-subtle); color: var(--focus-dark); }
[data-theme="dark"] .form-section-count.done { color: var(--focus); }

.form-section-chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.form-section-chevron .material-symbols-outlined { font-size: 20px; display: block; }
.form-section.is-collapsed .form-section-chevron { transform: rotate(90deg); }

.form-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px;
  padding: 2px 16px 16px;
  overflow: visible;
  min-height: 0;
}
.form-section-body > .form-group:has(textarea),
.form-section-body > .form-group:has(.file-upload-zone),
.form-section-body > .form-group:has(.avatar-upload),
.form-section-body > .form-group:has(.tag-input),
.form-section-body > .form-group:has(.toggle-list),
.form-section-body > .form-group:has(.color-swatches),
.form-section-body > .form-group:has(.form-chips),
.form-section-body > .form-group:has(.lookup-multi-chips),
.form-section-body > .form-group:has(.line-grid-table),
.form-section-body > .form-group:has(.form-slider),
.form-section-body > .form-group:has(.form-richtext),
.form-section-body > .form-group:has(.radio-cards:not(.radio-segmented)),
.form-section-body > .form-section,
.form-section-body > .line-grid,
.form-section-body > .form-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-section-body { grid-template-columns: 1fr; } }

/* --- Field group --- */
.form-modal-body .form-group,
.form-drawer-body .form-group,
.form-nested-card .form-group {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 0; min-width: 0;
}
.form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.form-modal-body .form-label,
.form-drawer-body .form-label,
.form-nested-card .form-label {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.004em; line-height: 1.3;
  margin-bottom: 0;
}
.form-modal-body .form-text,
.form-drawer-body .form-text {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  margin: 0;
}

/* --- Server-driven advice notes (core.forms Form.advice) ---
   Injected into .form-group by formShell, so they sit under whatever control
   the group holds. Help reads like help text; the warning is advisory only and
   deliberately stops short of .field-error's red so it never reads as a block. */
.form-advice-help {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  margin-top: 4px;
}
.form-advice-warn {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 11.5px; line-height: 1.45; color: var(--warning);
  background: var(--warning-subtle);
  border-radius: var(--border-radius);
  padding: 5px 8px;
  margin-top: 5px;
}
.form-advice-warn .material-symbols-outlined {
  font-size: 14px; flex: none; margin-top: 1px;
}
.form-charcount {
  font-family: var(--gr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Controls: sunken, then lift on focus --- */
.form-modal-body .form-control, .form-drawer-body .form-control, .form-nested-card .form-control,
.form-modal-body .form-select, .form-drawer-body .form-select,
.form-modal-body .msel-trigger, .form-drawer-body .msel-trigger, .form-nested-card .msel-trigger,
.form-modal-body .mdate-trigger, .form-drawer-body .mdate-trigger, .form-nested-card .mdate-trigger {
  width: 100%;
  min-height: var(--control-h);
  padding: 4px 13px;
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-sunken);
  border: 1.5px solid transparent;
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.05);
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.form-modal-body .form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-drawer-body .form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-modal-body .form-select:hover:not(:focus), .form-drawer-body .form-select:hover:not(:focus),
.form-modal-body .msel-trigger:hover, .form-drawer-body .msel-trigger:hover,
.form-modal-body .mdate-trigger:hover, .form-drawer-body .mdate-trigger:hover {
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.05);
}
.form-modal-body .form-control:focus, .form-drawer-body .form-control:focus, .form-nested-card .form-control:focus,
.form-modal-body .form-select:focus, .form-drawer-body .form-select:focus,
.form-modal-body .msel-trigger:focus-within, .form-drawer-body .msel-trigger:focus-within,
.form-modal-body .msel-trigger.is-open, .form-drawer-body .msel-trigger.is-open, .form-nested-card .msel-trigger.is-open,
.form-modal-body .mdate-trigger:focus-within, .form-drawer-body .mdate-trigger:focus-within {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow:
    0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent),
    0 3px 10px -4px color-mix(in srgb, var(--brand) 45%, transparent);
}
.form-modal-body textarea.form-control,
.form-drawer-body textarea.form-control {
  min-height: 88px; line-height: 1.55; padding-block: 11px; resize: vertical;
}
.form-modal-body .form-control:disabled, .form-drawer-body .form-control:disabled,
.form-modal-body .form-control[readonly], .form-drawer-body .form-control[readonly] {
  background: color-mix(in srgb, var(--bg-sunken) 60%, transparent);
  color: var(--text-muted);
  box-shadow: none;
}

/* Leading icon inside a control, plus the trailing state glyph */
.form-input-wrap { position: relative; display: flex; align-items: center; }
.form-input-wrap.has-icon .form-control { padding-right: 39px; }
.form-input-icon {
  position: absolute; right: 12px; pointer-events: none;
  font-size: 19px; color: var(--text-muted);
  transition: color 0.16s;
}
.form-control:focus ~ .form-input-icon { color: var(--brand); }
.form-input-trail {
  position: absolute; left: 12px; pointer-events: none;
  font-size: 19px;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Valid / invalid */
.form-group.is-valid .form-control { border-color: color-mix(in srgb, var(--focus) 50%, transparent); }
.form-group.is-valid .form-control:not(:focus) { padding-left: 38px; }
.form-group.is-valid .form-input-trail { opacity: 1; transform: none; color: var(--focus-dark); }
[data-theme="dark"] .form-group.is-valid .form-input-trail { color: var(--focus); }
.form-group.is-invalid .form-control,
.form-group.is-invalid .msel-trigger,
.form-group.is-invalid .mdate-trigger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-subtle) 55%, var(--bg-sunken));
}
.form-group.is-invalid .form-control:focus {
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--danger) 16%, transparent);
}
.form-group.is-invalid .form-input-trail { opacity: 1; transform: none; color: var(--danger); }
.form-group.is-invalid .form-input-icon { color: var(--danger); }
.field-error {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; line-height: 1.4;
  color: var(--danger-dark);
  animation: form-drop-in 0.22s ease both;
}
[data-theme="dark"] .field-error { color: #F5A79E; }
.field-error .material-symbols-outlined { font-size: 15px; flex: none; }

/* --- Radio cards --- */
.form-modal-body .radio-cards,
.form-drawer-body .radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px;
}
.form-modal-body .radio-card,
.form-drawer-body .radio-card {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
  padding: 11px 12px;
  cursor: pointer;
  background: var(--bg-sunken);
  border: 1.5px solid transparent;
  border-radius: var(--control-radius);
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.form-modal-body .radio-card:hover,
.form-drawer-body .radio-card:hover { border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
.radio-card-icon { width: 19px; height: 19px; color: var(--text-muted); margin-bottom: 1px; transition: color 0.16s; }
.radio-card-label { font-size: 12.5px; font-weight: 650; color: var(--text-primary); }
.radio-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.form-modal-body .radio-card.active,
.form-drawer-body .radio-card.active {
  border-color: var(--brand);
  background: linear-gradient(-150deg,
    color-mix(in srgb, var(--brand) 15%, var(--surface)),
    color-mix(in srgb, var(--brand) 6%, var(--surface)));
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--brand) 90%, transparent);
}
.radio-card.active .radio-card-icon { color: var(--brand); }
.radio-card-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Segmented variant */
.form-modal-body .radio-cards.radio-segmented,
.form-drawer-body .radio-cards.radio-segmented {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--bg-sunken);
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.05);
  min-height: 42px;
}
.radio-segmented .radio-card {
  flex: 1; min-width: 88px;
  padding: 7px 15px;
  border: none; background: transparent; box-shadow: none;
  border-radius: var(--border-radius);
  align-items: center; justify-content: center; gap: 0;
}
.radio-segmented .radio-card .radio-card-icon,
.radio-segmented .radio-card .radio-card-desc { display: none; }
.form-modal-body .radio-segmented .radio-card.active,
.form-drawer-body .radio-segmented .radio-card.active {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.10), 0 4px 10px -6px rgba(20, 18, 16, 0.4);
}
.radio-segmented .radio-card.active .radio-card-label { color: var(--brand-dark); }
[data-theme="dark"] .radio-segmented .radio-card.active .radio-card-label { color: var(--brand-light); }

/* --- Checkbox / switch field --- */
/* Bootstrap floats the switch and pulls it back with a negative margin, which
   a flex row would render as a stray overhang. Reset both, then lay it out. */
.form-modal-body .form-check.form-switch,
.form-drawer-body .form-check.form-switch {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--control-h); padding: 5px 13px;
  background: var(--bg-sunken);
  border: 1.5px solid transparent;
  border-radius: var(--control-radius);
  margin: 0;
}
.form-modal-body .form-check.form-switch .form-check-input,
.form-drawer-body .form-check.form-switch .form-check-input {
  float: none;
  margin: 0;
  flex: none;
}
.form-modal-body .form-check.form-switch:hover,
.form-drawer-body .form-check.form-switch:hover { border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.form-modal-body .form-check-label,
.form-drawer-body .form-check-label { font-size: 13px; font-weight: 600; cursor: pointer; }

/* --- Lookup --- */
.lookup-wrapper { position: relative; }
.form-modal-body .lookup-dropdown,
.form-drawer-body .lookup-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 20;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 44px -16px rgba(20, 18, 16, 0.45);
  padding: 5px;
  max-height: 250px; overflow-y: auto;
  animation: form-drop-in 0.18s ease both;
}
.form-modal-body .lookup-option,
.form-drawer-body .lookup-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 13px;
}
.form-modal-body .lookup-option:hover, .form-drawer-body .lookup-option:hover,
.form-modal-body .lookup-option.active, .form-drawer-body .lookup-option.active {
  background: var(--brand-subtle);
}
.lookup-avatar, .lookup-initials {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  object-fit: cover;
  color: #fff; font-size: 10px; font-weight: 700;
}
.lookup-option-icon { font-size: 19px; color: var(--text-muted); }
.lookup-status { padding: 10px; font-size: 12.5px; color: var(--text-muted); }
.lookup-create-trigger {
  display: flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 9px;
  border-top: 1px solid var(--bs-border-color);
  color: var(--brand-dark);
  font-size: 12.5px; font-weight: 650;
  cursor: pointer;
}
[data-theme="dark"] .lookup-create-trigger { color: var(--brand-light); }
.lookup-create-trigger .material-symbols-outlined { font-size: 17px; }
.lookup-clear {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 2;
  border: none; background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--border-radius);
  font-size: 17px; line-height: 1;
}
.lookup-clear:hover { background: var(--surface-hover); color: var(--text-primary); }
.lookup-multi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.lookup-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px 0 5px;
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  color: var(--brand-darker);
  border-radius: 999px;
  font-size: 12px; font-weight: 650;
}
[data-theme="dark"] .lookup-chip { color: var(--brand-light); }
.lookup-chip-remove {
  border: none; background: none; color: inherit; cursor: pointer;
  padding: 0; width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%; opacity: 0.65; font-size: 15px; line-height: 1;
}
.lookup-chip-remove:hover { opacity: 1; background: rgba(20, 18, 16, 0.12); }

/* --- Chips --- */
.form-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.form-modal-body .form-chip,
.form-drawer-body .form-chip {
  border: 1.5px solid var(--bs-border-color);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.form-modal-body .form-chip:hover,
.form-drawer-body .form-chip:hover { border-color: var(--brand-light); color: var(--text-primary); }
.form-modal-body .form-chip.is-on,
.form-drawer-body .form-chip.is-on {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand));
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand) 90%, transparent);
}

/* --- Tag input --- */
.tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  min-height: var(--control-h); padding: 4px 9px;
  background: var(--bg-sunken);
  border: 1.5px solid transparent;
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.05);
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.tag-input:focus-within {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent);
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px 0 5px;
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  color: var(--brand-darker);
  border-radius: 999px;
  font-size: 12px; font-weight: 650;
}
[data-theme="dark"] .tag-chip { color: var(--brand-light); }
.tag-chip-x {
  border: none; background: none; color: inherit; cursor: pointer;
  padding: 0; width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 15px; line-height: 1; opacity: 0.65;
}
.tag-chip-x:hover { opacity: 1; background: rgba(20, 18, 16, 0.12); }
.tag-input-field {
  flex: 1; min-width: 110px;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--text-primary);
}

/* --- Toggles --- */
.toggle-list { display: flex; flex-direction: column; gap: 2px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; }
.toggle-row + .toggle-row { border-top: 1px solid var(--bs-border-color); }
.toggle-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.toggle-row-label { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.toggle-row-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.toggle-switch {
  flex: none; width: 44px; height: 25px;
  border-radius: 999px; border: none; cursor: pointer; padding: 0;
  background: var(--bs-border-color);
  position: relative;
  transition: background 0.2s;
}
.toggle-switch.is-on {
  background: linear-gradient(-150deg, var(--brand-light), var(--brand));
  box-shadow: 0 5px 12px -6px color-mix(in srgb, var(--brand) 95%, transparent);
}
.toggle-knob {
  position: absolute; top: 3px; right: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 18, 16, 0.35);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.toggle-switch.is-on .toggle-knob { transform: translateX(-19px); }

/* --- Colour swatches --- */
.color-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.color-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; padding: 0; border: none;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.1);
  transition: transform 0.16s, box-shadow 0.16s;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch-check {
  font-size: 17px;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.color-swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.color-swatch.is-on .color-swatch-check { opacity: 1; transform: none; }

/* --- Slider --- */
.form-slider-bubble {
  font-size: 12px; font-weight: 700;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  padding: 2px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .form-slider-bubble { color: var(--brand-light); }
.form-slider {
  width: 100%; height: 6px; border-radius: 99px;
  appearance: none; -webkit-appearance: none;
  background: var(--bg-sunken);
  outline: none; cursor: pointer;
  margin: 8px 0 2px;
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.08);
}
.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand));
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--brand) 90%, transparent);
  cursor: pointer;
}
.form-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px -2px rgba(20, 18, 16, 0.4);
  cursor: pointer;
}

/* --- Rating (numbers / stars / smileys) --- */
.form-rating {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  min-height: var(--control-h);
}
.form-rating-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; padding: 0;
}

/* Numbers: bordered pills, single active value */
.form-rating-numbers .form-rating-btn {
  width: 38px; height: var(--control-h);
  border: 2px solid var(--bs-border-color); border-radius: var(--control-radius);
  background: var(--surface);
  font-size: 13px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.form-rating-numbers .form-rating-btn.is-hover {
  border-color: var(--brand-light); color: var(--text-primary);
}
.form-rating-numbers .form-rating-btn.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* Stars: cumulative fill up to the value, hover previews the fill */
.form-rating-stars { gap: 2px; }
.form-rating-stars .form-rating-btn .material-symbols-outlined {
  font-size: 26px;
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  transition: color 0.12s, transform 0.12s;
}
.form-rating-stars .form-rating-btn.is-fill .material-symbols-outlined {
  color: var(--brand);
  font-variation-settings: 'FILL' 1;
}
.form-rating-stars .form-rating-btn:active .material-symbols-outlined {
  transform: scale(0.88);
}

/* Smileys: five faces, single active value */
.form-rating-smileys { gap: 4px; }
.form-rating-smileys .form-rating-btn .material-symbols-outlined {
  font-size: 26px;
  color: color-mix(in srgb, var(--text-muted) 65%, transparent);
  transition: color 0.12s, transform 0.12s;
}
.form-rating-smileys .form-rating-btn.is-hover .material-symbols-outlined {
  color: var(--text-primary);
}
.form-rating-smileys .form-rating-btn.is-on .material-symbols-outlined {
  color: var(--brand);
  font-variation-settings: 'FILL' 1;
  transform: scale(1.12);
}

/* --- Avatar upload --- */
.avatar-upload { display: flex; align-items: center; gap: 15px; }
.avatar-upload-btn {
  width: 74px; height: 74px; flex: none;
  border-radius: 50%; cursor: pointer; padding: 0; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg-sunken);
  border: 1.5px dashed color-mix(in srgb, var(--brand) 35%, var(--bs-border-color));
  transition: border-color 0.16s, box-shadow 0.16s;
}
.avatar-upload-btn:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.avatar-upload-btn.is-uploading { opacity: 0.6; }
.avatar-upload-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-ph { font-size: 25px; color: var(--text-muted); }
.avatar-upload-side { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.avatar-upload-remove {
  border: none; background: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 0;
}
.avatar-upload-remove:hover { color: var(--danger); }

/* --- File upload --- */
.form-modal-body .file-upload-zone,
.form-drawer-body .file-upload-zone {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 22px; cursor: pointer; text-align: center;
  background: var(--bg-sunken);
  border: 1.5px dashed color-mix(in srgb, var(--brand) 28%, var(--bs-border-color));
  border-radius: var(--border-radius);
  transition: border-color 0.16s, background-color 0.16s, color 0.16s;
}
.form-modal-body .file-upload-zone:hover, .form-drawer-body .file-upload-zone:hover,
.form-modal-body .file-upload-zone.drag-over, .form-drawer-body .file-upload-zone.drag-over {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--bg-sunken));
}
.file-upload-icon { font-size: 24px; color: var(--brand); }
.file-upload-text { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.file-upload-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.form-modal-body .file-upload-item,
.form-drawer-body .file-upload-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  font-size: 12.5px;
}
.file-upload-item-icon { color: var(--brand); font-size: 19px; }
.file-upload-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-item-size { margin-right: auto; font-size: 11px; color: var(--text-muted); }
.file-upload-item-progress {
  width: 70px; height: 4px; border-radius: 99px;
  background: var(--bg-sunken); overflow: hidden;
}
.file-upload-item-bar {
  height: 100%;
  background: linear-gradient(-90deg, var(--brand-light), var(--brand));
  transition: width 0.2s ease;
}
.file-upload-item-remove {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; padding: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--border-radius); font-size: 16px; line-height: 1;
}
.file-upload-item-remove:hover { background: var(--danger-subtle); color: var(--danger); }

/* --- Line grid --- */
.form-modal-body .line-grid-table-wrap,
.form-drawer-body .line-grid-table-wrap {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--surface);
}
.form-modal-body .line-grid-table th,
.form-drawer-body .line-grid-table th {
  padding: 9px 11px;
  background: var(--bg-sunken);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.form-modal-body .line-grid-table td,
.form-drawer-body .line-grid-table td { padding: 5px 7px; }
.form-modal-body .line-grid-table input,
.form-drawer-body .line-grid-table input,
.form-modal-body .line-grid-table select,
.form-drawer-body .line-grid-table select {
  width: 100%;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: var(--border-radius);
  padding: 7px 8px;
  font: inherit; font-size: 12.5px;
  color: var(--text-primary);
}
.form-modal-body .line-grid-table input:focus, .form-drawer-body .line-grid-table input:focus,
.form-modal-body .line-grid-table select:focus, .form-drawer-body .line-grid-table select:focus {
  outline: none;
  background: var(--bg-sunken);
  border-color: var(--brand);
}
.line-grid-table tfoot td {
  padding: 9px 11px; font-weight: 700;
  background: var(--bg-sunken);
  font-variant-numeric: tabular-nums;
}
.line-grid-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 10px; }
.line-grid-balance { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.line-grid-balance.is-balanced { background: var(--focus-subtle); color: var(--focus-dark); }
.line-grid-balance.is-unbalanced { background: var(--danger-subtle); color: var(--danger-dark); }
[data-theme="dark"] .line-grid-balance.is-balanced { color: var(--focus); }
[data-theme="dark"] .line-grid-balance.is-unbalanced { color: #F5A79E; }

/* --- Footer: sticky glass --- */
.form-modal-footer,
.form-drawer-footer {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  margin-top: 0;
  justify-content: flex-start;
  border-top: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.form-footer-actions { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.form-kbd-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.form-kbd-hint kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 700;
  background: var(--bg-sunken);
  border: 1px solid var(--bs-border-color);
  border-bottom-width: 2px;
  border-radius: var(--border-radius);
  padding: 2px 6px;
  color: var(--text-secondary);
}
@media (max-width: 640px) { .form-kbd-hint { display: none; } }

/* Buttons inside a form panel */
.form-modal-footer .btn,
.form-drawer-footer .btn {
  border-radius: var(--border-radius);
  padding: 10px 17px;
  font-size: 13.5px; font-weight: 650;
  border-width: 1.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 0.14s, box-shadow 0.2s, background 0.16s, color 0.16s, border-color 0.16s;
}
.form-submit-inner { display: inline-flex; align-items: center; gap: 6px; }
.form-submit-inner .material-symbols-outlined { font-size: 18px; }
.btn.form-submit-btn {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand) 58%, var(--brand-dark));
  box-shadow:
    0 10px 22px -10px color-mix(in srgb, var(--brand) 95%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.form-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px -12px color-mix(in srgb, var(--brand) 95%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.btn.form-submit-btn:active:not(:disabled) { transform: translateY(0) scale(0.988); }
.btn.form-submit-btn:disabled { opacity: 0.75; }
.form-modal-footer .form-cancel-btn,
.form-drawer-footer .form-cancel-btn {
  background: transparent;
  border-color: var(--bs-border-color);
  color: var(--text-secondary);
}
.form-modal-footer .form-cancel-btn:hover,
.form-drawer-footer .form-cancel-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.form-danger {
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--danger-subtle);
  border-radius: var(--border-radius);
  background: var(--surface);
}
.form-danger-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 4px;
}
.form-danger-text { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 10px; }
.form-danger-confirm { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.form-danger-confirm .form-danger-text { margin: 0; }
.form-danger-actions { display: flex; gap: 8px; }
.form-danger-error { font-size: 0.75rem; color: var(--danger); margin: 0; }

/* Unsaved-changes guard, replacing the footer contents in place */
.form-drawer-footer.is-guarding,
.form-modal-footer.is-guarding {
  background: color-mix(in srgb, var(--danger-subtle) 55%, var(--surface));
  border-top-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.form-guard { display: flex; align-items: center; gap: 12px; width: 100%; animation: form-drop-in 0.2s ease both; }
.form-guard-text { font-size: 12.5px; font-weight: 600; color: var(--danger-dark); line-height: 1.35; }
[data-theme="dark"] .form-guard-text { color: #F5A79E; }
.form-guard-text span { display: block; font-weight: 400; color: var(--text-secondary); font-size: 11.5px; }
.form-guard .btn { margin-right: auto; }
.form-guard .btn + .btn { margin-right: 0; }

/* --- Modal: the centered sibling of the drawer --- */
.form-modal {
  width: min(1240px, 78vw);
  min-width: 0;
  height: min(820px, 94vh);
  max-height: none;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-radius: var(--border-radius-xl);
  box-shadow:
    0 48px 90px -24px rgba(20, 18, 16, 0.42),
    0 8px 24px -12px rgba(20, 18, 16, 0.22);
  animation: form-modal-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
[data-theme="dark"] .form-modal {
  box-shadow:
    0 48px 90px -24px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
.form-modal-lg { width: min(1340px, 86vw); }
@keyframes form-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 820px) {
  .form-modal, .form-modal-lg {
    width: 100vw; height: 100%; max-height: none;
    border-radius: 0; border: none;
  }
}

.form-modal { position: relative; }
.form-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-radius: inherit;
  overflow: hidden;
  animation: form-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
.form-sheet-body { flex: 1; min-height: 0; overflow-y: auto; }
.form-sheet-pager { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.form-sheet-pager + .form-drawer-close,
.form-sheet-pager + .form-modal-close { margin-right: 6px; }
.form-sheet-pager button:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
@keyframes form-sheet-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.question-cards, .question-options { display: flex; flex-direction: column; gap: 6px; }
.question-card, .question-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.question-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--bs-border-color)); }
.question-card.is-confirming {
  background: color-mix(in srgb, var(--danger-subtle) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.question-card-num {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
  font-size: 11px; font-weight: 700;
}
.question-card-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  border: none; background: none; padding: 0;
  text-align: start; cursor: pointer; color: inherit;
}
.question-card-text {
  font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.question-card-meta { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.question-card-actions, .question-card-confirm { flex: none; display: flex; align-items: center; gap: 2px; }
.question-card-confirm { gap: 8px; font-size: 12px; font-weight: 600; color: var(--danger-dark); }
[data-theme="dark"] .question-card-confirm { color: #F5A79E; }
.question-card-btn {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; padding: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--border-radius);
}
.question-card-btn .material-symbols-outlined { font-size: 17px; }
.question-card-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.question-card-btn.is-danger:hover { background: var(--danger-subtle); color: var(--danger); }
.question-card-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.question-option-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.question-option-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.question-option-add .form-control { flex: 1; }
.question-empty {
  padding: 14px;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--border-radius);
  font-size: 12.5px; color: var(--text-muted); text-align: center;
}

/* Motion is decoration here: keep every state, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .form-sheet { animation: none !important; }
  .form-drawer, .form-modal, .form-backdrop, .form-section,
  .form-error-summary, .field-error, .lookup-dropdown, .form-guard {
    animation: none !important;
  }
  .form-progress-bar, .toggle-knob, .btn.form-submit-btn { transition: none !important; }
}

.pf-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.6rem 0.2rem 0;
}
.pf-pager-count { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-pager-controls { display: flex; align-items: center; gap: 0.2rem; }
.pf-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--border-radius);
  background: none; border: 1px solid var(--bs-border-color);
  color: var(--text-secondary); cursor: pointer;
}
.pf-pager-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.pf-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pf-pager-btn .material-symbols-outlined { font-size: 1.05rem; }

/* ============================================================
   Sheet - spreadsheet skin for plain server-rendered tables.

   The static counterpart of the MicroTable grid (public/js/microtable.css):
   same gridlines, same header fill, same row height, no JS. Add `sheet` to
   any <table> that lists or reports data but cannot be a MicroTable:
   hierarchical reports, ledgers with running balances, subtotal and totals
   rows, editable line-item grids. Keep the two skins in step.

   Child combinators keep nested tables out of it. Selectors carry a
   :last-child where an app rule (finance's .finance-table) already claims
   that slot, so the grid wins without the app stylesheet having to change.
   ============================================================ */
table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

table.sheet > thead > tr > th,
table.sheet > tbody > tr > th,
table.sheet > tbody > tr > td,
table.sheet > tfoot > tr > th,
table.sheet > tfoot > tr > td {
  border-left: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

/* The last column already ends at the table edge; a rule there doubles up. */
table.sheet > thead > tr > th:last-child,
table.sheet > tbody > tr > th:last-child,
table.sheet > tbody > tr > td:last-child,
table.sheet > tfoot > tr > th:last-child,
table.sheet > tfoot > tr > td:last-child {
  border-left: none;
}

/* Close the grid on the final row (app styles tend to strip this border). */
table.sheet > tbody > tr:last-child > td,
table.sheet > tbody > tr:last-child > th {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Type and spacing here mirror .mtbl-table th exactly, so a static sheet and a
   MicroTable sitting on the same page read as the same component. */
table.sheet > thead > tr > th {
  padding: 0.5rem 0.75rem;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  border-bottom: 2px solid var(--bs-border-color);
}

/* A floor, not a cap: cells with taller content still grow. */
table.sheet > tbody > tr > td,
table.sheet > tbody > tr > th {
  height: 2.25rem;
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

table.sheet > tbody > tr:hover {
  background: var(--surface-hover);
}

/* Totals sit under a heavier rule, the way a sheet closes a column. The rule
   belongs above the totals stack as a whole, not above each row inside it. */
table.sheet > tfoot > tr > td,
table.sheet > tfoot > tr > th {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}
table.sheet > tfoot > tr:first-child > td,
table.sheet > tfoot > tr:first-child > th {
  border-top: 2px solid var(--bs-border-color);
}

/* ---------------------------------------------------------------------------
   Break glass — admin mode (core/elevation.py)

   The ring is deliberately loud. An admin needs to know, at a glance and
   without looking for it, that they are currently able to change anything in
   the workspace. Colour alone would fail colourblind users and anyone
   heads-down in a tab, so the state also carries a shield glyph and a text
   countdown in the avatar menu.
--------------------------------------------------------------------------- */
.pf-elevated .pf-avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger);
  animation: pf-elev-pulse 2.2s ease-in-out infinite;
}

@keyframes pf-elev-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }
  50%      { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, var(--danger) 55%, transparent); }
}

/* Respect a stated preference for less motion: keep the ring, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .pf-elevated .pf-avatar { animation: none; }
}

.pf-elev-item { display: flex; align-items: center; gap: 8px; }
.pf-elev-item-on { color: var(--danger); font-weight: 600; }
.pf-elev-exit { margin-right: auto; font-size: 0.75rem; opacity: 0.7; }

/* Teleported to body (see navbar.html): the navbar is a containing block, so a
   fixed child of it covers the header strip instead of the viewport. Matches
   .pf-modal-backdrop's veil, blur and z-index family so it sits in the same
   stacking order as every other modal. */
.pf-elev-backdrop {
  position: fixed;
  inset: 0;
  background: var(--veil);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1050;
}

.pf-elev-modal {
  background: var(--surface);
  border-radius: var(--border-radius);
  padding: 22px;
  width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.pf-elev-modal-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.pf-elev-modal-head .material-symbols-outlined { color: var(--danger); font-size: 28px; }
.pf-elev-modal-title { font-weight: 650; font-size: 1rem; }
.pf-elev-modal-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.pf-elev-label { display: block; font-size: 0.78rem; font-weight: 600; margin: 12px 0 4px; }
.pf-elev-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.pf-elev-error { color: var(--danger); font-size: 0.8rem; margin-top: 10px; }
.pf-elev-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* The exact permission behind a denial. A 403 that does not say what is
   missing reads as the product being broken rather than as something the
   person can go and ask an admin for. */
.access-wall-missing {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.access-wall-missing code {
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--border-radius);
  font-size: 0.78rem;
}

/* ============================================================
   Detail View System, "Showroom" counterpart

   The viewing sibling of the form skin (core/details renders
   through it; hand-rolled detail drawers use the same classes).
   Same two ideas as the form:

     1. The panel floats, wider than the form. Creating is a
        corridor (760px); viewing is a room: min(1080px, 86vw).
     2. Twin panes. Prose lives on elevated section cards in a
        scrolling main column; the facts live on a full-height
        rail card that stays fixed while the story scrolls (each
        pane scrolls internally; the body itself never does).
        Rail rows are sunken-then-lift, the form's input grammar:
        a row that lifts on hover says "click me to edit".
   ============================================================ */

/* --- Backdrop: identical to the form veil --- */
.dv-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: var(--veil);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
  animation: dv-veil-in 0.28s ease both;
  cursor: pointer;
}
@keyframes dv-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* --- The card: floats off every edge, wider than the form --- */
.dv-card {
  position: fixed; top: 14px; left: 14px; bottom: 14px; z-index: 1050;
  width: min(1080px, 86vw);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow:
    0 48px 90px -24px rgba(20, 18, 16, 0.42),
    0 8px 24px -12px rgba(20, 18, 16, 0.22);
  animation: dv-slide-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
[data-theme="dark"] .dv-card {
  box-shadow:
    0 48px 90px -24px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
@keyframes dv-slide-in {
  from { transform: translateX(calc(-1*(100% + 24px))); }
  to   { transform: none; }
}
@media (max-width: 820px) {
  .dv-card { top: 0; left: 0; bottom: 0; right: 0; width: auto; border: none; border-radius: 0; }
}

/* --- Header: same brand wash, light source top-left --- */
.dv-header {
  position: relative; flex: none;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 16px;
  background:
    radial-gradient(130% 150% at 6% -30%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%),
    linear-gradient(-135deg,
      color-mix(in srgb, var(--brand) 13%, var(--surface)),
      color-mix(in srgb, var(--brand-light) 5%, var(--surface)));
}
.dv-head-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--border-radius-lg);
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand) 55%, var(--brand-dark));
  box-shadow:
    0 12px 24px -8px color-mix(in srgb, var(--brand) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.dv-head-icon .material-symbols-outlined { font-size: 24px; }

.dv-head-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; padding-top: 1px; }
.dv-head-topline { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.dv-key {
  flex: none;
  font-family: var(--gr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--bs-border-color));
  padding: 2px 8px; border-radius: var(--border-radius);
}
[data-theme="dark"] .dv-key { color: var(--brand-light); }

/* Status: the one loud fact, an interactive pill in the wash */
.dv-status {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: none; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  padding: 3px 10px 3px 6px; border-radius: 999px;
  transition: background 0.15s;
}
.dv-status:hover { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.dv-status .material-symbols-outlined { font-size: 16px; }
[data-theme="dark"] .dv-status { color: var(--brand-light); }
.dv-status-static { cursor: default; padding-left: 10px; }
.dv-status-static:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }

/* The title is the record's name: bigger than the form's, editable when wired */
.dv-title {
  font-size: 19px; font-weight: 800; letter-spacing: -0.022em; line-height: 1.25;
  color: var(--text-primary);
  border: none; background: transparent; padding: 0; margin: 0; width: 100%;
  border-radius: var(--border-radius);
  transition: box-shadow 0.15s;
}
input.dv-title:hover { background: transparent; }
input.dv-title:focus { outline: none; background: transparent; box-shadow: none; }
.dv-head-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

.dv-head-actions { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 2px; }
.dv-head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--bs-border-color));
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dv-head-btn:hover { color: var(--text-primary); border-color: var(--brand); }
.dv-head-btn:disabled { opacity: 0.55; cursor: default; }
.dv-head-btn .material-symbols-outlined { font-size: 16px; }
.dv-head-btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(-150deg, var(--brand-light), var(--brand) 60%, var(--brand-dark));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.dv-close {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; border-radius: var(--border-radius);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dv-close:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text-primary); }
.dv-close .material-symbols-outlined { font-size: 20px; }

/* --- The rail under the header carries real data in view mode --- */
.dv-progress {
  flex: none; height: 3px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, var(--bs-border-color));
}
.dv-progress-bar {
  height: 3px; width: 0;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(-90deg, var(--brand-light), var(--brand));
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 65%, transparent);
  transition: width 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- View switch (Details / Wiki style tabs), sits under the progress rail --- */
.dv-tabs {
  flex: none; display: flex; gap: 2px;
  padding: 8px 18px 0;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bg);
}
.dv-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  padding: 7px 12px 9px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.dv-tab:hover { color: var(--text-primary); }
.dv-tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
[data-theme="dark"] .dv-tab.is-active { color: var(--brand-light); }

/* --- Body: twin panes. The body itself never scrolls; each column
       does, so the rail card's height is the padded body area by
       construction, no measurement, no resize handling. --- */
.dv-body {
  padding: .5em;
  gap: .5em;
  flex: 1; min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
}
/* Rail-less detail views collapse to a single column */
.dv-body.no-rail { grid-template-columns: minmax(0, 1fr); }
.dv-body.is-tabbed .dv-main { overflow: hidden; }
.dv-body.is-tabbed .dv-main > .dv-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: none; }
.dv-body.is-tabbed .dv-section-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dv-main {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.dv-main::-webkit-scrollbar { display: none; }
.dv-main > * { flex-shrink: 0; }

/* --- Single-column mode: facts as a compact meta strip --- */
.dv-facts-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px;
  padding: 4px 6px 0;
}
.dv-strip-fact {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-primary); min-width: 0;
}
.dv-strip-fact .material-symbols-outlined { font-size: 15px; color: var(--brand); }
.dv-strip-fact .dv-avatar { width: 20px; height: 20px; font-size: 8.5px; }
.dv-strip-fact .muted { color: var(--text-muted); }
.dv-strip-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}

/* --- Section card: the form's anatomy, verbatim --- */
.dv-section {
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius);
  overflow: visible;
  animation: dv-rise 0.55s cubic-bezier(0.32, 0.72, 0, 1) backwards;
  animation-delay: calc(var(--sec-i, 0) * 70ms + 120ms);
}
@keyframes dv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.dv-section-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.dv-section-chip {
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--brand-dark);
  background: linear-gradient(-150deg,
    color-mix(in srgb, var(--brand) 24%, var(--surface)),
    color-mix(in srgb, var(--brand) 9%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
[data-theme="dark"] .dv-section-chip { color: var(--brand-light); }
.dv-section-chip .material-symbols-outlined { font-size: 19px; }
.dv-section-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dv-section-label { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.dv-section-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.dv-section-count {
  flex: none; font-size: 11px; font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  background: var(--bg-sunken); padding: 3px 9px; border-radius: 999px;
}
.dv-section-count.done { background: var(--focus-subtle); color: var(--focus-dark); }
[data-theme="dark"] .dv-section-count.done { color: var(--focus); }
.dv-section-body { padding: 2px 16px 16px; }
.dv-section-action {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--bs-border-color);
  background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary);
  border-radius: 999px; padding: 3px 10px;
  transition: color 0.15s, border-color 0.15s;
}
.dv-section-action:hover { color: var(--text-primary); border-color: var(--brand); }
.dv-section-action:disabled { opacity: 0.55; cursor: default; }
.dv-section-action .material-symbols-outlined { font-size: 14px; }

/* Prose inside a section card */
.dv-prose { font-size: 13.5px; line-height: 1.65; color: var(--text-primary); }
.dv-prose p { margin: 0 0 10px; }
.dv-prose ul, .dv-prose ol { margin: 0 0 10px; padding-right: 20px; }
.dv-prose li { margin-bottom: 4px; }
.dv-prose :last-child { margin-bottom: 0; }

/* Rows sections */
.dv-rows { display: flex; flex-direction: column; gap: 4px; }
.dv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.dv-row-main, .dv-row-aside { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-row-aside { flex: none; }
.dv-row-icon { font-size: 1rem; color: var(--text-muted); }
.dv-row-text { font-size: 0.8125rem; color: var(--text-primary); }
.dv-row-meta { font-size: 0.75rem; color: var(--text-muted); }
.dv-row-badge {
  font-size: 0.68rem; font-weight: 500; padding: 0.15rem 0.5rem;
  border-radius: var(--border-radius); background: var(--bg-sunken); color: var(--text-secondary);
  white-space: nowrap;
}

/* Checklist rows */
.dv-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--border-radius); transition: background 0.15s; margin-bottom: 0; }
.dv-check:hover { background: var(--surface-hover); }
.dv-check input[type="checkbox"] {
  appearance: none; width: 17px; height: 17px; flex: none; cursor: pointer;
  border: 1.5px solid var(--bs-border-color); border-radius: var(--border-radius);
  background: var(--bg-sunken);
  display: grid; place-items: center;
  transition: background 0.15s, border-color 0.15s;
  margin: 0;
}
.dv-check input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.dv-check input[type="checkbox"]:checked::after {
  content: 'check'; font-family: 'Material Symbols Outlined';
  font-size: 13px; color: #fff; line-height: 1;
}
.dv-check-label { font-size: 13px; color: var(--text-primary); flex: 1; min-width: 0; }
.dv-check input[type="checkbox"]:checked ~ .dv-check-label { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.dv-check-who { font-size: 11px; color: var(--text-muted); flex: none; }

/* File rows */
.dv-file { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--border-radius); transition: background 0.15s; }
.dv-file:hover { background: var(--surface-hover); }
.dv-file-icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--border-radius-lg);
  display: grid; place-items: center;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
}
[data-theme="dark"] .dv-file-icon { color: var(--brand-light); }
.dv-file-icon .material-symbols-outlined { font-size: 17px; }
.dv-file-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.dv-file-name:hover { color: var(--brand-dark); }
.dv-file-size { font-size: 11px; color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
.dv-file-remove {
  flex: none; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: var(--border-radius);
}
.dv-file-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.dv-file-name.is-unavailable { color: var(--text-muted); cursor: not-allowed; }
.dv-file-origin {
  flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 10%, transparent);
  padding: 1px 6px; border-radius: 99px;
}
[data-theme="dark"] .dv-file-origin { color: var(--brand-light); }

/* Comments with avatars, composer sunken-then-lift */
.dv-comment { display: flex; gap: 10px; padding: 6px 0; }
.dv-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  object-fit: cover;
}
.dv-avatar.sm { width: 22px; height: 22px; font-size: 9px; }
.dv-comment-body { min-width: 0; flex: 1; }
.dv-comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.dv-comment-author { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.dv-comment-when { font-size: 11px; color: var(--text-muted); }
.dv-comment-text { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.dv-comment-text p { margin: 0 0 6px; }
.dv-comment-text :last-child { margin-bottom: 0; }
.dv-composer,
textarea.dv-composer {
  width: 100%; min-height: 42px; 
  font-size: 13.5px; color: var(--text-primary);
  background: var(--bg-sunken);
  border: 1.5px solid transparent; border-radius: var(--control-radius);
  box-shadow: inset 0 1px 2px rgba(20, 18, 16, 0.05);
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  resize: none;
}
.dv-composer:hover { border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.dv-composer:focus, .dv-composer:focus-within {
  outline: none; background: var(--surface); border-color: var(--brand);
  box-shadow:
    0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent),
    0 3px 10px -4px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* --- The meta rail: a full-height section card, facts that stay put --- */
.dv-railcol { min-height: 0; }
.dv-rail {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 3px;
}
.dv-rail::-webkit-scrollbar { display: none; }
.dv-rail > * { flex-shrink: 0; }
.dv-rail-caption {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 10px 5px;
}
.dv-rail-caption:first-child { padding-top: 2px; }

/* A fact row: sunken by default, lifts on hover = "editable here" */
.dv-fact {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: right;
  border: 1.5px solid transparent; border-radius: var(--border-radius);
  background: transparent; cursor: pointer;
  padding: 7px 10px;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.dv-fact:hover, .dv-fact:focus-within {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--brand) 30%, transparent);
}
.dv-fact:hover .dv-fact-caret { opacity: 1; }
.dv-fact.readonly { cursor: default; }
.dv-fact.readonly:hover { background: transparent; border-color: transparent; box-shadow: none; }
.dv-fact-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); width: 74px; flex: none; }
.dv-fact-value { font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.dv-fact-value .muted { color: var(--text-muted); font-weight: 500; }
.dv-fact-value input {
  border: none; background: transparent; padding: 0; width: 100%;
  font: inherit; color: inherit;
}
.dv-fact-value input:focus { outline: none; }
.dv-fact-caret { margin-right: auto; flex: none; color: var(--text-muted); opacity: 0; transition: opacity 0.15s; }
.dv-fact-caret .material-symbols-outlined { font-size: 16px; display: block; }
.dv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dv-chipset { display: flex; flex-wrap: wrap; gap: 4px; }
.dv-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  padding: 2px 8px; border-radius: 999px;
}
[data-theme="dark"] .dv-chip { color: var(--brand-light); }
.dv-chip-remove {
  border: none; background: transparent; cursor: pointer;
  color: inherit; font-size: 12px; line-height: 1; padding: 0;
  opacity: 0.7;
}
.dv-chip-remove:hover { opacity: 1; }

/* Fact rows hosting a picker dropdown need an anchor */
.dv-fact-anchor { position: relative; }

/* The rail's picker dropdown: same plane as the member picker, reusable */
.dv-picker-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 30;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 18px 40px -18px rgba(20, 18, 16, 0.5);
  overflow: hidden;
}
.dv-picker-search {
  width: 100%; border: none; border-bottom: 1px solid var(--bs-border-color);
  background: transparent; padding: 9px 12px;
  font-size: 12.5px; color: var(--text-primary);
}
.dv-picker-search:focus { outline: none; }
.dv-picker-results { max-height: 240px; overflow-y: auto; scrollbar-width: none; padding: 4px; }
.dv-picker-results::-webkit-scrollbar { display: none; }
.dv-picker-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: right; border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; color: var(--text-primary);
  padding: 7px 9px; border-radius: var(--border-radius);
}
.dv-picker-item:hover { background: var(--surface-hover); }
.dv-picker-item .muted { color: var(--text-muted); font-size: 11px; }

/* Time block on the rail: numbers plus a mini bar */
.dv-time { padding: 7px 10px; }
.dv-time-nums { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.dv-time-big { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dv-time-big span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.dv-time-pct { font-size: 11px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .dv-time-pct { color: var(--brand-light); }
.dv-time-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 14%, transparent); overflow: hidden; }
.dv-time-fill { height: 100%; border-radius: var(--border-radius-sm); background: linear-gradient(-90deg, var(--brand-light), var(--brand)); }

.dv-rail-sep { height: 1px; background: var(--bs-border-color); margin: 10px 6px; }

/* Rail-scoped skins for the shared widgets so microdate/microselect
   triggers read as fact rows (sunken, then lift) */
.dv-rail .mdate-trigger,
.dv-rail .msel-trigger {
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: var(--control-radius);
  font-size: 12.5px; font-weight: 600;
  min-height: 0; padding: 7px 10px;
  box-shadow: none;
}
.dv-rail .mdate-trigger:hover, .dv-rail .mdate-trigger:focus-within,
.dv-rail .msel-trigger:hover, .dv-rail .msel-trigger.is-open {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* --- Footer: quiet provenance, danger stays out of the content --- */
.dv-footer {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--bs-border-color);
  background: var(--surface);
}
.dv-footer-meta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.dv-footer-meta .material-symbols-outlined { font-size: 15px; }
.dv-footer-spacer { flex: 1; }
.dv-danger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); cursor: pointer;
  font-size: 12px; font-weight: 600;
  border-radius: var(--border-radius); padding: 5px 11px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dv-danger-btn:hover, .dv-danger-btn.armed {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.dv-danger-btn .material-symbols-outlined { font-size: 16px; }
.dv-footer-confirm { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--danger); }

@media (max-width: 820px) {
  /* One column: back to a single scroll surface, rail card in flow */
  .dv-body { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; scrollbar-width: none; }
  .dv-body::-webkit-scrollbar { display: none; }
  .dv-main { overflow: visible; }
  .dv-rail { height: auto; overflow: visible; }
}

/* --- Flush editors: Microtext hugging its container edge to edge --- */

/* A section card whose body IS the editor (task description): the toolbar
   runs the full card width and the editable area ends at the card's edge. */
.dv-section-body.dv-flush { padding: 0; }
.dv-section-body.dv-flush .mt-wrap {
  border: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.dv-section-body.dv-flush .mt-toolbar {
  border-top: 1px solid var(--bs-border-color);
  border-radius: 0;
}

/* A full-bleed editor pane (task wiki): no body padding, the toolbar spans
   the card and the editable area fills every pixel down to the footer. */
.dv-body.dv-body-flush { padding: 0; gap: 0; }
.dv-body-flush .dv-main { gap: 0; }
.dv-editor-fill {
  flex: 1 0 auto;
  display: flex; flex-direction: column;
}
.dv-editor-fill .mt-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  border: none; border-radius: 0;
}
.dv-editor-fill .mt-toolbar { flex: none; }
.dv-editor-fill .mt-wrap > [data-content] {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.dv-editor-fill .mt-editor { flex: 1; }

/* --- In-page detail (.dv-page): the dv vocabulary on a scrolling page.
       No overlay and no bounded panes (nested fixed-height scroll under a
       sticky header causes scroll-chaining jank in the shell): the hero is
       a card, section cards stack, and the facts rail sticks while the
       page scrolls. --- */
/* The hero pins below the (also sticky) board header; the page scrolls
   under it. --te-sticky-top is measured as board-header height PLUS the
   page's own top padding, i.e. the hero's natural resting offset, so the
   hero never travels before pinning (zero wiggle). No shadow: a pinned
   wash card needs no lift. */
/* No overflow clip here, deliberately. .dv-card needs one for its 20px radius;
   this hero is border-radius: 0 and has no corners to clip, and a clip would
   cut off the status picker that opens out of .dv-header past the hero's
   bottom edge. Do not re-add it. */
/* Stays UNDER the app's own sticky header (the board header composites at 10,
   and it owns the tab strip plus the "More" overflow button and dropdown; that
   dropdown's z-index is clamped inside the header's stacking context, so it
   never escapes 10). The hero only has to outrank the page content scrolling
   beneath it, which is z-index auto. Raising this above the app header hides
   the tab controls. */
.dv-page-hero {
  flex: none;
  position: sticky;
  top: var(--te-sticky-top, 0px);
  z-index: 8;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--bs-border-color));
  border-radius: 0;
}
.dv-page .dv-body {
  overflow: visible;
  grid-template-rows: none;
  padding: 0;
}
.dv-page .dv-main { overflow: visible; }
/* In-page cards sit flat: the border does the framing, no shadow */
.dv-page .dv-section { box-shadow: none; }
.dv-page .dv-railcol { min-height: 0; }
/* The rail sticks below the pinned hero (--te-hero-h is measured live) */
.dv-page .dv-rail {
  position: sticky;
  top: calc(var(--te-sticky-top, 0px) + var(--te-hero-h, 0px) + 22px);
  height: auto;
  max-height: calc(100vh - var(--te-sticky-top, 0px) - var(--te-hero-h, 0px) - 32px);
}
.dv-page .dv-tabs {
  background: transparent;
  padding: 4px 4px 0;
  flex: none;
}

/* ============================================================
   Language switcher (anonymous surfaces: marketing + auth)
   Signed-in members use the pills in the account dropdown instead.
   Logical properties throughout so the menu mirrors under dir="rtl".
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.5rem; border: 1px solid transparent;
  border-radius: var(--border-radius); background: transparent;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.lang-switch-btn:hover,
.lang-switch-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text-primary); }
.lang-switch-globe { flex: none; }
.lang-switch-code { letter-spacing: 0.03em; }
.lang-switch-menu {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0;
  min-width: 160px; padding: 0.25rem; z-index: 1050;
  background: var(--surface); border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
/* Footer placement opens upward: set lang_switch_up before including the partial. */
.lang-switch-up .lang-switch-menu {
  inset-block-start: auto; inset-block-end: calc(100% + 4px);
}
.lang-switch-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.4rem 0.6rem; border-radius: var(--border-radius);
  font-size: 0.8125rem; color: var(--text-primary); text-decoration: none;
}
.lang-switch-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.lang-switch-item-on { font-weight: 600; }
.lang-switch-tag {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.lang-switch-item-on .lang-switch-tag { color: var(--brand); }
.currency-switch .lang-switch-menu {
  right: 50%; left: auto; transform: translateX(50%);
  width: min(520px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: 0.5rem; text-align: start;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 480px) {
  .currency-switch .lang-switch-menu { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Arabic UI type. Noto Sans Arabic is vendored (SIL OFL, see
   public/vendor/fonts/noto-sans-arabic/OFL.txt); the unicode-range
   keeps the files from ever downloading on Latin-only pages, and
   Latin glyphs inside an RTL page keep falling through to the
   regular stack.
   ============================================================ */
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/public/vendor/fonts/noto-sans-arabic/NotoSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/public/vendor/fonts/noto-sans-arabic/NotoSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', var(--bs-font-sans-serif);
}

/* Typed content decides its own direction under an RTL page: an email
   address, URL or English name entered in an Arabic form stays legible
   LTR, while Arabic text stays RTL. Applies only under [dir="rtl"], so
   LTR pages are untouched. */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[dir="rtl"] textarea,
[dir="rtl"] [contenteditable="true"] {
  unicode-bidi: plaintext;
}

.filter-strip {
    display: flex; align-items: center; gap: 8px;
    min-height: var(--control-h); padding: 4px 16px 4px 8px;
    border-bottom: 1px solid var(--bs-border-color);
}
.filter-strip-icon { flex: none; font-size: 18px; color: var(--text-muted); }
.filter-strip-input {
    flex: 1; min-width: 120px; padding: 6px 0;
    border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: var(--text-primary);
}
.filter-strip-input::placeholder { color: var(--text-muted); }
.filter-strip-chips { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mfilter .filter-strip-chip { gap: 6px; padding: 0.3rem 0.55rem 0.3rem 0.4rem; max-width: 220px; }
.mfilter .filter-strip-chip .mtbl-filter-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-strip-menu-wrap { position: relative; flex: none; }
.filter-strip-btn.is-active { background: var(--brand-subtle); color: var(--brand); }
.mfilter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mfilter-card {
    position: absolute; top: 100%; left: 0; z-index: 130; margin-top: 4px;
    display: flex; flex-direction: column; width: 300px; height: 340px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mfilter-field {
    display: flex; align-items: center; gap: 8px; flex: none;
    min-height: var(--control-h); padding: 4px 12px 4px 8px; cursor: pointer;
}
.mfilter-field .filter-strip-chip { min-width: 0; }
.mfilter-placeholder { flex: 1; font-size: 0.85rem; color: var(--text-muted); }
.mfilter-chip-close { cursor: pointer; }
.mfilter-caret { margin-right: auto; font-size: 18px; color: var(--text-muted); }
.mfilter-search {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding: 0 12px; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);
}
.mfilter-search .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }
.mfilter-search input {
    flex: 1; min-width: 0; padding: 8px 0; border: none; outline: none; background: transparent;
    font-size: 0.85rem; color: var(--text-primary);
}
.mfilter-search input:disabled { cursor: not-allowed; }
.mfilter-results { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.mfilter-empty { padding: 1.25rem 0.75rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.mfilter-option {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
    border: none; border-radius: var(--border-radius); background: transparent;
    font-size: 0.8125rem; color: var(--text-primary); text-align: start; cursor: pointer;
}
.mfilter-option:hover { background: var(--bg-sunken); }
.mfilter-option .material-symbols-outlined { flex: none; font-size: 18px; color: var(--text-muted); }
.mfilter-option.is-picked .material-symbols-outlined { color: var(--brand); }
.mfilter-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfilter-more { width: 100%; justify-content: center; margin-top: 4px; }
.mfilter-overlay {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 4px; overflow-y: auto;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
}
.mfilter-overlay-head {
    display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Auth pages: sign-in, sign-up and the flows around them.

   Scoped to .auth-wrapper, which every auth template already carries, so none
   of this reaches the rest of the product. It replaces three inconsistent
   focus treatments (the browser default outline on some controls, a grey
   Bootstrap shadow on others, a brand ring on inputs) with one, and lifts the
   controls to a 44px touch target.
   --------------------------------------------------------------------------- */
.auth-wrapper .btn:not(.btn-link) { min-height: 44px; }
.auth-wrapper .form-control,
.auth-wrapper .form-select { min-height: 44px; }

/* A disabled control must not offer a cursor that promises a click. */
.auth-wrapper .btn:disabled,
.auth-wrapper .btn[disabled] { cursor: not-allowed; }

/* The consent checkbox gates the sign-up button, so it needs to be hittable.
   Its label carries the rest of the target, being tied to it with `for`. */
.auth-wrapper .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.auth-wrapper .form-check { padding-block: 0.35rem; }
.auth-wrapper .form-check-label { cursor: pointer; }

/* Focus rings are defined once, globally, at the end of this file. The rule
   that used to live here only reached inside .auth-wrapper, which is why the
   navbar buttons on the same page fell back to Bootstrap's blue glow. */
.auth-wrapper .form-control:focus,
.auth-wrapper .form-control:focus-visible,
.auth-wrapper .form-select:focus,
.auth-wrapper .form-select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}


/* ---------------------------------------------------------------------------
   Auth pages, second pass: quiet fields, one loud action, weighted layout.

   Ported from the hand-written workstation sign-in, which reads calmer for
   three reasons that have nothing to do with its flow: the fields are filled
   rather than outlined so they recede, exactly one element on the page is
   dark, and the illustration carries more width than the form so the page
   reads as a composition instead of two equal halves.
   --------------------------------------------------------------------------- */

/* Fields recede. No outline, a filled surface, and the border only appears
   when the field has focus. */
.auth-wrapper .form-control,
.auth-wrapper .form-select {
  background-color: var(--surface);
  border-color: var(--surface);
  box-shadow: none;
}
.auth-wrapper .form-control:hover,
.auth-wrapper .form-select:hover { border-color: var(--bs-border-color); }
.auth-wrapper .form-control::placeholder { color: var(--text-muted); }

/* One loud action. Full width, near-black, no border, so nothing on the page
   competes with the thing you came here to press.

   This is its own class rather than an override of .btn-primary by ancestor.
   The navbar on these same pages carries a real .btn-primary, so redefining
   the shared class by context meant one class name rendered two different
   colours on one screen.

   The radius stays small rather than square: the form sits in a rounded
   container and a hard corner inside a soft one reads as a mistake. */
.btn-ink {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ink-on);
  border-radius: var(--border-radius);
  font-weight: 600;
  width: 100%;
}
.btn-ink:hover,
.btn-ink:focus-visible {
  background-color: var(--brand-darker);
  border-color: var(--brand-darker);
  color: #fff;
}
.btn-ink:disabled,
.btn-ink[disabled] {
  background-color: var(--ink);
  border-color: var(--ink);
}

/* Weighted split. The illustration is the wider half and the form sits at the
   start of its column with room around it, rather than floating dead centre
   in an equal one. align-items follows the writing direction, so this mirrors
   correctly in Arabic without a second rule. */
@media (min-width: 992px) {
  /* Half the page to the illustration, roughly a third to the form, and the
     rest deliberately empty at the trailing edge. That trailing gap is what
     makes the pair read as a composition rather than two columns filling a
     row, and it is the proportion the workstation page uses. */
  .auth-wrapper .auth-illustration { flex: 0 0 50%; max-width: 50%; }
  .auth-wrapper .auth-form-side {
    flex: 0 0 36%;
    max-width: 36%;
    align-items: flex-start;
    justify-content: center;
    padding-inline: 2rem;
  }
  /* The form fills its column rather than sitting as a small block inside a
     wide one, which is what made it read as adrift. */
  .auth-wrapper .auth-form-side .auth-form-container { max-width: 440px; }
  .auth-wrapper .auth-illustration img { width: min(100%, 440px); height: auto; }
}


/* The alternate action beside the loud one. Bootstrap's stock outline-secondary
   is a cool grey that does not belong in this palette. */
.auth-wrapper .btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}


/* ---------------------------------------------------------------------------
   Marketing footer: tap targets.

   The footer links render as a 17px line box with an 8px gap, so the column is
   a 25px pitch of small targets stacked on each other. That is fine to click
   and genuinely hard to tap.

   Only touch pointers and narrow screens get the 44px target: on a mouse the
   extra height buys nothing and makes the footer a third taller. The list gap
   collapses because the target height now provides the rhythm.

   Shared by landing.html, pricing.html and marketing/base.html, which all use
   this same footer.
   --------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 991.98px) {
  footer.border-top a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  footer.border-top ul.list-unstyled.gap-2 { gap: 0 !important; }
}


/* ---------------------------------------------------------------------------
   Focus: one ring, brand coloured, on every page.

   Bootstrap draws its own focus treatment through --bs-btn-focus-box-shadow
   and --bs-focus-ring-color, both of them blue. An outline added on top does
   not replace that glow, it stacks with it: the sign-in button rendered a
   mauve outline wrapped in a blue halo, and the navbar buttons rendered only
   the blue one because the outline rule was scoped to the auth form. Retire
   Bootstrap's blue at the variable level, then draw a single outline.

   Fields are deliberately absent from the list below. They carry a border and
   a soft ring of their own, and a shared outline on top of that draws a second
   ring around the first.
   --------------------------------------------------------------------------- */
:root {
  --bs-focus-ring-color: rgba(50, 15, 61, 0.35);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(50, 15, 61, 0.35);
}
[data-theme="dark"] {
  --bs-focus-ring-color: rgba(176, 127, 166, 0.4);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(176, 127, 166, 0.4);
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:not(.form-control):not(.form-select):not([contenteditable]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}
/* Bootstrap puts the glow on :focus, not :focus-visible, for buttons, so a
   mouse click leaves the halo behind after the outline has gone. */
.btn:focus:not(:focus-visible) { box-shadow: none; }


/* --------------------------------------------------------------------------
   Icon picker (core/forms)
   --------------------------------------------------------------------------
   A searchable grid of Material Symbols. Shared, because the second surface
   that needs an icon should reach for this rather than build a second one.
   -------------------------------------------------------------------------- */

.icon-pick-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.35rem; }
.icon-pick-current {
    flex: 0 0 auto; width: 52px; height: 52px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-border-color); border-radius: var(--border-radius);
    background: var(--surface); color: var(--text-muted);
}
.icon-pick-current .material-symbols-outlined { font-size: 1.6rem; }
.icon-pick-current:hover { border-color: var(--brand); color: var(--brand); }
.icon-pick-meta { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.icon-pick-name { font-size: 0.75rem; color: var(--text-muted); font-family: ui-monospace, monospace; }
.icon-pick-actions { display: flex; gap: 0.35rem; }

.icon-pick-panel {
    margin-top: 0.6rem; border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg); background: var(--surface); overflow: hidden;
}
.icon-pick-search {
    width: 100%; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.8125rem;
    border: none; border-bottom: 1px solid var(--bs-border-color);
    background: transparent; color: inherit;
}
.icon-pick-search:focus { outline: none; }
/* Bounded. Ninety-odd icons in an unbounded panel would push the drawer's own
   save button off the bottom of the screen. */
.icon-pick-scroll { max-height: 260px; overflow-y: auto; padding: 0.6rem 0.75rem 0.8rem; }
.icon-pick-group + .icon-pick-group { margin-top: 0.8rem; }
.icon-pick-group-label {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.4rem;
}
.icon-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 0.25rem; }
.icon-pick-cell {
    aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--border-radius); cursor: pointer;
    background: none; color: inherit; padding: 0;
}
.icon-pick-cell:hover { background: var(--surface-hover); }
.icon-pick-cell.is-chosen { border-color: var(--brand); color: var(--brand); }
.icon-pick-cell .material-symbols-outlined { font-size: 1.25rem; }
.icon-pick-empty { font-size: 0.75rem; color: var(--text-muted); margin: 0.4rem 0 0; }