/* Ideal OS — base + responsive shell */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root,
html[data-theme="light"] {
  /* IDEALOS tokens — same values as apps/mobile/brand.json + tokens.ts.
     Primary actions are ink, not accent. Accent marks state. */
  --bg: #F7F8F8;
  --bg-card: #ffffff;
  --bg-soft: #F7F8F8;
  --ink: #000000;
  --on-ink: #ffffff;
  --muted: #4B5563;
  --muted-2: #6B7280;
  --border: #E5E7EB;
  --border-soft: #F1F2F4;
  --accent: #00F5F0;
  --on-accent: #000000;
  --accent-pressed: #00D2CE;
  --accent-tint: #E0FEFD;
  --danger: #DC2626;
  --danger-pressed: #B91C1C;
  --danger-tint: #FDECEC;
  --warning: #D97706;
  --warning-tint: #FEF4E7;
  --success: #16A34A;
  --success-tint: #E8F6EC;
  --info: #2563EB;
  --info-tint: #E8EEFD;
  --live: #4ADE80;
  --warning-ink: #9A5300;
  --chip-bg: #F1F2F4;
  --shadow: rgba(0, 0, 0, 0.08);
  /* Type. A template swaps these; Classic is Montserrat throughout. */
  --font-text: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --font-display: 'Montserrat', sans-serif;
  /* Shape (docs/04-ui-ux-brand/04.12-enterprise-template-pack.md §4): read only by
     templates/_layouts/_shared/shape.css, which non-Classic layouts load. 1 and
     999px are today's corners, so Classic and Editorial look as they always did. */
  --radius-scale: 1;
  --radius-pill: 999px;
  color-scheme: light;
}
html[data-theme="dark"] {
  /* Same mapping as mobile darkColors. Accent stays electric turquoise. */
  --bg: #101314;
  --bg-card: #181C1D;
  --bg-soft: #202527;
  --ink: #E8EAEA;
  --on-ink: #101314;
  --muted: #A2AAAF;
  --muted-2: #7A8288;
  --border: #2C3234;
  --border-soft: #232829;
  --accent: #00F5F0;
  --on-accent: #000000;
  --accent-pressed: #00D2CE;
  --accent-tint: #0A2E2D;
  --danger: #F87171;
  --danger-pressed: #DC2626;
  --danger-tint: #33191A;
  --warning: #F0A741;
  --warning-tint: #2E2313;
  --success: #4ADE80;
  --success-tint: #12301F;
  --info: #7FA9F5;
  --info-tint: #182236;
  --live: #15803D;
  --warning-ink: #F2B45C;
  --chip-bg: #20262A;
  --hover: #202527;
  --input-bg: #202527;
  --shadow: rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

/*
 * Role tokens — docs/04-ui-ux-brand/04.10-site-templates-and-brand-kit.md, T0.
 * Generated by tools/codemod_inline_colors.py --css; edit TOKENS there, not here.
 * The colours views used to hard-code. Light values are exactly the old
 * literals, so Classic looks the same; a template restyles a page by
 * redefining these. In dark mode the neutrals take the values the
 * [style*="…"] remaps below gave, fills turn light under dark text,
 * tone inks lighten and washes and rules tint the dark surfaces.
 */
:root,
html[data-theme="light"] {
  --text-1: #17171A;
  --text-2: #3A3A36;
  --text-3: #5C5C58;
  --text-4: #6B6B66;
  --text-5: #77776F;
  --text-6: #7A7A74;
  --text-7: #8A8A84;
  --text-8: #9A9A94;
  --text-9: #A0A09B;
  --text-10: #AEAEA8;
  --on-fill: #FFFFFF;
  --on-dark: #FFFFFF;
  --fill-strong: #17171A;
  --surface-1: #FAFAF8;
  --surface-2: #F7F7F4;
  --surface-3: #F4F4F1;
  --surface-4: #F0F0EC;
  --surface-5: #E7E7E3;
  --line-1: #E4E4DF;
  --line-2: #E7E7E3;
  --line-3: #E0E0DB;
  --line-4: #EFEFEA;
  --line-5: #F0F0EC;
  --line-6: #EAEAE6;
  --line-7: #F4F4F1;
  --line-strong: #C8C8C0;
  --danger-ink-bright: #DC2626;
  --danger-ink: #C21C1C;
  --danger-ink-deep: #A11B1B;
  --danger-wash: #FDECEC;
  --danger-line: #F0D0D0;
  --danger-line-2: #F5C2C2;
  --success-ink: #1E7A3D;
  --success-ink-alt: #1E8E5A;
  --success-wash-2: #E8F6EC;
  --success-wash: #EAF8F0;
  --info-ink-bright: #2563EB;
  --info-ink: #245BBF;
  --info-ink-alt: #1A5FB4;
  --info-wash: #EAF1FB;
  --info-line: #CFE0F5;
  --amber-ink: #B45309;
  --amber-ink-2: #9A6700;
  --amber-ink-3: #A9700F;
  --amber-ink-4: #8A5A00;
  --amber-wash-3: #FEF4E7;
  --amber-wash: #FDF3E3;
  --amber-wash-2: #FFF8E6;
  --amber-line: #F0D9A8;
  --orange-ink: #E85D04;
  --orange-ink-2: #C45C12;
  --grey-13: #1D2125;
  --grey-16: #2A2A28;
  --grey-28: #4A4A46;
  --grey-64: #A6A6A0;
  --grey-76: #C4C4BE;
  --grey-78: #C8C8C2;
  --grey-80: #D0D0CA;
  --grey-83: #D6D6D1;
  --grey-84: #D8D8D2;
  --danger-ink-2: #B42318;
  --danger-ink-3: #B3261E;
  --danger-ink-4: #8C1D18;
  --danger-wash-2: #F8E9E9;
  --danger-wash-3: #FFF5F5;
  --danger-line-3: #F0B0B0;
  --success-ink-2: #1F6F43;
  --success-ink-3: #16A34A;
  --success-ink-4: #186A3B;
  --success-ink-5: #1F9D55;
  --success-line: #CDE9D6;
  --info-ink-2: #1A56A0;
  --info-ink-3: #1A73E8;
  --info-ink-4: #2A6FDB;
  --info-ink-5: #1A6BB5;
  --info-ink-6: #1E4A8A;
  --info-wash-2: #E8F1FF;
  --info-wash-3: #F3F8FF;
  --info-line-2: #C5D9F5;
  --navy-ink: #1C3D5A;
  --teal-ink: #0F766E;
  --teal-ink-2: #0F7A73;
  --teal-ink-3: #0D9488;
  --teal-ink-4: #3E8EA0;
  --violet-ink: #5B21B6;
  --violet-ink-2: #5B4B8A;
  --amber-ink-5: #C7871F;
  --amber-ink-6: #B75E00;
  --amber-ink-7: #C98A00;
  --amber-ink-8: #7A5200;
  --amber-ink-9: #9A4A00;
  --amber-ink-10: #8A6A00;
  --amber-wash-4: #FEF3C7;
  --amber-wash-5: #FFFBF0;
  --amber-wash-6: #FFF4DC;
  --amber-wash-7: #FFF8EE;
  --amber-line-2: #F3DFA8;
  --amber-line-3: #E8B86D;
  --orange-ink-3: #C45C26;
  --orange-ink-4: #C26A1C;
  --orange-ink-5: #92400E;
  --orange-ink-6: #854D0E;
  --orange-wash: #FFF4EC;
  --orange-wash-2: #FFF8F2;
  --orange-wash-3: #FFF6EE;
}
html[data-theme="dark"] {
  --text-1: var(--ink);
  --text-2: var(--ink);
  --text-3: var(--muted);
  --text-4: var(--muted);
  --text-5: var(--muted);
  --text-6: var(--muted);
  --text-7: var(--muted);
  --on-fill: var(--on-ink);
  --fill-strong: var(--ink);
  --surface-1: var(--bg-soft);
  --surface-2: var(--bg-soft);
  --surface-3: var(--bg-soft);
  --surface-4: var(--bg-soft);
  --surface-5: var(--bg-soft);
  --line-1: var(--border);
  --line-2: var(--border);
  --line-3: var(--border);
  --line-4: var(--border);
  --line-5: var(--border);
  --line-6: var(--border);
  --line-7: var(--border);
  --line-strong: var(--border);
  --danger-ink-bright: #E66363;
  --danger-ink: #D76969;
  --danger-ink-deep: #C77676;
  --danger-wash: #371C1D;
  --danger-line: #68292A;
  --danger-line-2: #68292A;
  --success-ink: #5D9F73;
  --success-ink-alt: #42A074;
  --success-wash-2: #192D23;
  --success-wash: #192D23;
  --info-ink-bright: #5E8CF0;
  --info-ink: #6A8FD3;
  --info-ink-alt: #6392CC;
  --info-wash: #1A273A;
  --info-line: #29426C;
  --amber-ink: #C88049;
  --amber-ink-2: #B28B3D;
  --amber-ink-3: #B78735;
  --amber-ink-4: #AD8C4C;
  --amber-wash-3: #342619;
  --amber-wash: #342619;
  --amber-wash-2: #342619;
  --amber-line: #623F23;
  --orange-ink: #EB7022;
  --orange-ink-2: #D18046;
  --grey-13: var(--ink);
  --grey-16: var(--ink);
  --grey-28: var(--muted);
  --grey-64: var(--muted-2);
  --grey-76: #596166;
  --grey-78: #596166;
  --grey-80: var(--border);
  --grey-83: var(--border);
  --grey-84: var(--border);
  --danger-ink-2: #CF726B;
  --danger-ink-3: #CD706A;
  --danger-ink-4: #BC7C79;
  --danger-wash-2: #371C1D;
  --danger-wash-3: #371C1D;
  --danger-line-3: #68292A;
  --success-ink-2: #679D7F;
  --success-ink-3: #1BA54E;
  --success-ink-4: #679D7E;
  --success-ink-5: #2CA35F;
  --success-line: #264F38;
  --info-ink-2: #688FC0;
  --info-ink-3: #488FED;
  --info-ink-4: #598FE3;
  --info-ink-5: #5691C8;
  --info-ink-6: #748FB6;
  --info-wash-2: #1A273A;
  --info-wash-3: #1A273A;
  --info-line-2: #29426C;
  --navy-ink: #7B8E9F;
  --teal-ink: #499791;
  --teal-ink-2: #499A95;
  --teal-ink-3: #209D92;
  --teal-ink-4: #4A95A6;
  --violet-ink: #9D7AD3;
  --violet-ink-2: #8F85AF;
  --amber-ink-5: #C7871F;
  --amber-ink-6: #C78138;
  --amber-ink-7: #C98A00;
  --amber-ink-8: #A78D57;
  --amber-ink-9: #BA8452;
  --amber-ink-10: #A68E3D;
  --amber-wash-4: #342619;
  --amber-wash-5: #342619;
  --amber-wash-6: #342619;
  --amber-wash-7: #342619;
  --amber-line-2: #623F23;
  --amber-line-3: #623F23;
  --orange-ink-3: #D18056;
  --orange-ink-4: #CC8240;
  --orange-ink-5: #BB896A;
  --orange-ink-6: #B18D65;
  --orange-wash: #3D2818;
  --orange-wash-2: #3D2818;
  --orange-wash-3: #3D2818;
}
/* End of role tokens. */

body {
  font-family: var(--font-text);
  font-weight: 500;
  /* subpixel on light UI — antialiased thins strokes and looks blurry on Windows */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--bg);
}
input, button, select, textarea { font-family: inherit; color: inherit; }
input[type=number]::-webkit-inner-spin-button { opacity: 0; }
select { appearance: none; -webkit-appearance: none; }

.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
}

mark.search-hl {
  background: #FFE566;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  font: inherit;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Hover/focus utilities */
.hv-soft:hover   { background: var(--chip-bg) !important; }
.hv-row:hover    { background: var(--bg-soft) !important; }
.hv-btn:hover    { background: var(--surface-2) !important; }
.hv-mid:hover    { background: var(--surface-4) !important; }
.hv-black:hover  { background: #000 !important; }
/* Destructive confirm only. Primary actions use .btn-pri. */
.hv-red:hover    { background: var(--danger-pressed) !important; }
.hv-soft2:hover  { background: #E9E9E4 !important; }
.hv-text-red:hover { color: var(--danger) !important; }
.btn-pri {
  background: var(--ink) !important;
  color: var(--on-ink) !important;
  border-color: var(--ink);
}
.btn-pri:hover,
.btn-pri:active {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent);
}
.btn-pri .ms { color: inherit !important; }
.btn-pri:disabled { cursor: not-allowed; }
.hv-dim:hover    { filter: brightness(0.97); }
.hv-bright:hover { filter: brightness(1.05); }
.hv-card:hover   { border-color: var(--grey-83) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.04); }
.hv-line:hover   { border-color: var(--line-2) !important; }

.fc-red:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---- Dark mode chrome (VS Code Dark+) ---- */
html[data-theme="dark"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"] mark.search-hl {
  background: #613214;
  color: #f0c674;
}
html[data-theme="dark"] .hv-soft:hover { background: var(--hover) !important; }
html[data-theme="dark"] .hv-row:hover { background: var(--hover) !important; }
html[data-theme="dark"] .hv-btn:hover,
html[data-theme="dark"] .hv-mid:hover,
html[data-theme="dark"] .hv-soft2:hover { background: var(--hover) !important; }
html[data-theme="dark"] .hv-black:hover { background: #000 !important; color: #fff !important; }
html[data-theme="dark"] .hv-red:hover { background: var(--danger-pressed) !important; }
html[data-theme="dark"] .hv-card:hover {
  border-color: #505050 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .hv-line:hover { border-color: #505050 !important; }
html[data-theme="dark"] .fc-red:focus { border-color: var(--accent) !important; }
html[data-theme="dark"] .fc-red-bg:focus {
  border-color: var(--accent) !important;
  background: var(--input-bg) !important;
}

html[data-theme="dark"] .shell-menu-btn {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink);
}
html[data-theme="dark"] .nav-item { color: var(--muted); }
html[data-theme="dark"] .nav-item .ms { color: var(--muted-2); }
html[data-theme="dark"] .nav-item.is-active {
  color: var(--ink);
  background: var(--chip-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="dark"] .nav-item.is-active .ms { color: var(--accent); }

html[data-theme="dark"] .desktop-topnav__brand:hover { background: var(--hover); }
html[data-theme="dark"] .desktop-topnav__field-tag {
  color: var(--ink);
  background: var(--accent-tint);
}
html[data-theme="dark"] .desktop-topnav__mode {
  background: #1e4d34;
  color: #8fe3b0;
}
html[data-theme="dark"] .desktop-topnav__mode[data-mode="dev"] {
  background: var(--warning-tint);
  color: var(--warning);
}
html[data-theme="dark"] .top-nav__btn { color: var(--muted); }
html[data-theme="dark"] .top-nav__btn:hover {
  color: var(--ink);
  background: var(--hover);
}
html[data-theme="dark"] .top-nav__cat.is-active .top-nav__btn { color: var(--ink); }
html[data-theme="dark"] .top-nav__cat.is-active .top-nav__btn::after { background: var(--accent); }
html[data-theme="dark"] .top-nav__cat.is-open .top-nav__btn {
  color: var(--ink);
  background: var(--chip-bg);
}
html[data-theme="dark"] .top-nav__caret { color: var(--muted-2); }
html[data-theme="dark"] .top-nav-panel {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .top-nav-mega__heading { color: var(--muted-2); }
html[data-theme="dark"] .top-nav-me__head { border-bottom-color: var(--border); }
html[data-theme="dark"] .top-nav-me__name { color: var(--ink); }
html[data-theme="dark"] .top-nav-me__role { color: var(--muted-2); }
html[data-theme="dark"] .top-nav-me__sep { background: var(--border); }
html[data-theme="dark"] .top-nav-dd__item--danger { color: var(--muted); }
html[data-theme="dark"] .top-nav-dd__item--danger .ms { color: var(--muted-2); }
html[data-theme="dark"] .desktop-topnav__me.is-open .desktop-topnav__profile { background: var(--chip-bg); }
html[data-theme="dark"] .top-nav-dd__item { color: var(--ink); }
html[data-theme="dark"] .top-nav-dd__item .ms { color: var(--muted); }
html[data-theme="dark"] .top-nav-dd__item:hover { background: var(--hover); }
html[data-theme="dark"] .top-nav-dd__item.is-active {
  background: var(--accent-tint);
  color: var(--ink);
}
html[data-theme="dark"] .top-nav-dd__item.is-active .ms { color: var(--accent); }
html[data-theme="dark"] .top-nav-dd__item--soon { color: var(--muted); }
html[data-theme="dark"] .top-nav-mode__row {
  background: var(--bg-soft);
  border-color: var(--border);
}
html[data-theme="dark"] .top-nav-mode-btn { color: var(--muted); }
html[data-theme="dark"] .top-nav-mode-btn.is-on.is-prod {
  background: #0e639c;
  color: #fff;
}
html[data-theme="dark"] .desktop-topnav__clock {
  color: var(--muted);
  background: var(--chip-bg);
  border-color: var(--border);
}
html[data-theme="dark"] .desktop-topnav__clock.is-in {
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}
html[data-theme="dark"] .desktop-topnav__icon-btn { color: var(--muted); }
html[data-theme="dark"] .desktop-topnav__icon-btn:hover { background: var(--hover); }
html[data-theme="dark"] .desktop-topnav__badge {
  background: var(--accent);
  border-color: var(--bg-card);
}
html[data-theme="dark"] .desktop-topnav__profile:hover { background: var(--hover); }
html[data-theme="dark"] .desktop-topnav__profile-name { color: var(--ink); }
html[data-theme="dark"] .desktop-topnav__icon-btn.is-on { color: var(--accent); }

html[data-theme="dark"] .list-icon-btn {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .list-icon-btn--danger {
  border-color: var(--danger);
  color: var(--danger);
}
html[data-theme="dark"] .list-icon-btn--primary {
  border-color: var(--border);
  color: var(--accent);
}
html[data-theme="dark"] .list-icon-btn--accent {
  border-color: #2a3f5c;
  color: #9cdcfe;
}
html[data-theme="dark"] .list-icon-btn--ok {
  border-color: #2a6b48;
  color: #8fe3b0;
}

/* Form controls: avoid blinding white fields on dark pages */
html[data-theme="dark"] .shell-scroll select,
html[data-theme="dark"] .shell-scroll input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="dark"] .shell-scroll textarea {
  background-color: var(--input-bg);
  color: var(--ink);
  border-color: var(--border);
}
html[data-theme="dark"] .shell-scroll select option {
  background: var(--bg-card);
  color: var(--ink);
}
html[data-theme="dark"] .shell-scroll ::placeholder {
  color: var(--muted-2);
}

/*
 * Inline light panels (many views still hardcode #fff). Remap the common
 * patterns so Clients/tables/cards match IDE surfaces without a JS rewrite.
 */
html[data-theme="dark"] .shell-scroll [style*="background:#fff"],
html[data-theme="dark"] .shell-scroll [style*="background: #fff"],
html[data-theme="dark"] .shell-scroll [style*="background:#ffffff"],
html[data-theme="dark"] .shell-scroll [style*="background:#FFFFFF"],
html[data-theme="dark"] .shell-scroll [style*="background:#FFF"] {
  background: var(--bg-card) !important;
}
html[data-theme="dark"] .shell-scroll [style*="background:#F4F4F1"],
html[data-theme="dark"] .shell-scroll [style*="background:#FAFAF8"],
html[data-theme="dark"] .shell-scroll [style*="background:#F7F7F4"],
html[data-theme="dark"] .shell-scroll [style*="background:#F5F5F3"],
html[data-theme="dark"] .shell-scroll [style*="background:#F7F7F5"],
html[data-theme="dark"] .shell-scroll [style*="background:#F0F0EC"],
html[data-theme="dark"] .shell-scroll [style*="background:#EDEDE9"],
html[data-theme="dark"] .shell-scroll [style*="background:#EEEEEA"],
html[data-theme="dark"] .shell-scroll [style*="background:#F1F1EF"],
html[data-theme="dark"] .shell-scroll [style*="background:#ECECE7"],
html[data-theme="dark"] .shell-scroll [style*="background:#F6F6F3"],
html[data-theme="dark"] .shell-scroll [style*="background:#FCFCFB"],
html[data-theme="dark"] .shell-scroll [style*="background:#E7E7E3"] {
  background: var(--bg-soft) !important;
}
html[data-theme="dark"] .shell-scroll [style*="color:#17171A"],
html[data-theme="dark"] .shell-scroll [style*="color: #17171A"],
html[data-theme="dark"] .shell-scroll [style*="color:#3A3A36"],
html[data-theme="dark"] .shell-scroll [style*="color:#2A2A28"],
html[data-theme="dark"] .shell-scroll [style*="color:#3C3C39"],
html[data-theme="dark"] .shell-scroll [style*="color:#4A4A46"],
html[data-theme="dark"] .shell-scroll [style*="color:#33332F"],
html[data-theme="dark"] .shell-scroll [style*="color:#1C1C1A"] {
  color: var(--ink) !important;
}
html[data-theme="dark"] .shell-scroll [style*="color:#5A5A56"],
html[data-theme="dark"] .shell-scroll [style*="color:#5C5C58"],
html[data-theme="dark"] .shell-scroll [style*="color:#6B6B66"],
html[data-theme="dark"] .shell-scroll [style*="color:#6A6A66"],
html[data-theme="dark"] .shell-scroll [style*="color:#5F5F5A"],
html[data-theme="dark"] .shell-scroll [style*="color:#77776F"],
html[data-theme="dark"] .shell-scroll [style*="color:#6B6B67"],
html[data-theme="dark"] .shell-scroll [style*="color:#8A8A84"],
html[data-theme="dark"] .shell-scroll [style*="color:#757570"],
html[data-theme="dark"] .shell-scroll [style*="color:#7A7A74"] {
  color: var(--muted) !important;
}
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #E7E7E3"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #E4E4DF"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #E0E0DB"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #EAEAE6"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #C8C8C0"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #EFEFEA"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #E8E8E3"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #ECECE8"],
html[data-theme="dark"] .shell-scroll [style*="border:1px solid #EDEDEA"],
html[data-theme="dark"] .shell-scroll [style*="border:1px dashed #E4E4DF"],
html[data-theme="dark"] .shell-scroll [style*="border:1px dashed #E0E0DB"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #F4F4F1"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #F0F0EC"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #EAEAE6"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #EDEDEA"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #E7E7E3"],
html[data-theme="dark"] .shell-scroll [style*="border-bottom:1px solid #E4E4DF"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #F0F0EC"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #EAEAE6"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #E7E7E3"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #F1F1ED"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #EFEFEB"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #EFEFEA"],
html[data-theme="dark"] .shell-scroll [style*="border-top:1px solid #EEEEEA"] {
  border-color: var(--border) !important;
}
html[data-theme="dark"] .type-chip {
  background: color-mix(in srgb, var(--type-tone, #9d9d9d) 22%, #1e1e1e) !important;
  color: color-mix(in srgb, var(--type-tone, #cccccc) 75%, #fff) !important;
}

/* ---- Brand: wordmark (desktop) + square mark (phone / PWA) ---- */
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.brand-logo {
  width: auto;
  height: 52px;
  max-width: 100%;
  display: block;
}
.brand-logo--dark { display: none; }
html[data-theme="dark"] .brand-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark { display: block; }
/* The company's name as the wordmark, when it has no logo image (or chose text). */
.brand-wordmark-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.desktop-topnav__brand .brand-wordmark-text {
  max-width: 240px;
}
.brand-mark {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 0;
  flex-shrink: 0;
}
.brand-mark-row {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-mark-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
}
.brand-mark-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-1);
}
.brand-mark-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.02em;
}
.brand-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .brand-logo { display: none !important; }
  .brand-mark-row { display: flex !important; }
  .brand-mark { display: block !important; }
  .brand-meta { display: none !important; }
  .nav-item.is-active,
  html[data-theme="dark"] .nav-item.is-active {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
  }
}
/* Phone drawer only. A field user on a desktop browser still gets the desktop lockup. */
@media (max-width: 900px) {
  .shell--field .brand-logo { display: none !important; }
  .shell--field .brand-mark-row { display: flex !important; }
  .shell--field .brand-mark { display: block !important; }
  .shell--field .brand-meta { display: none !important; }
}
.fc-red-bg:focus { border-color: var(--accent) !important; background: var(--bg-card) !important; outline: none; }

/* ---------- App shell ---------- */
.shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
.shell-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: visible;
}
.shell-update-banner {
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}
.shell-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.shell-backdrop {
  display: none;
}
.shell-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 40;
}
.shell-topbar {
  height: 70px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 24px;
}
.shell-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 44px;
  height: 44px;
  margin-left: -8px;
  padding: 0 6px 0 0;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 10px;
}
.shell-back .ms { font-size: 28px; line-height: 1; margin-left: -4px; }
.shell-back__label {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 400px) {
  .shell-back__label { display: inline; }
}
.shell-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-1);
  padding: 0;
}
.shell-menu-btn .ms { font-size: 22px; }
.topbar-title { min-width: 0; flex: 1; }
.topbar-title__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbar-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink);
}
.topbar-help {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}
.topbar-help__btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.topbar-help__btn::-webkit-details-marker { display: none; }
.topbar-help__btn::marker { content: ''; }
.topbar-help__btn .ms { font-size: 16px; line-height: 1; }
.topbar-help__btn:hover,
.topbar-help[open] > .topbar-help__btn {
  color: var(--accent);
  background: var(--hover);
}
.topbar-help__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 10px 28px rgba(23, 23, 26, 0.14);
  text-align: left;
  line-height: 1.45;
  /* Escape the topbar subtitle's nowrap/ellipsis — help body is a <p> inside
     .topbar-title, and that rule was clipping every sentence mid-word. */
  white-space: normal;
  overflow: visible;
}
.topbar-help__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.topbar-help__body {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
}
.topbar-help__body + .topbar-help__body { margin-top: 8px; }
/* Direct subtitle only — not help-panel paragraphs nested under the title. */
.topbar-title > p {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar-clock-label { white-space: nowrap; }
.topbar-cta-text { white-space: nowrap; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--grey-28);
  background: transparent;
  margin-bottom: 2px;
  min-height: 44px;
}
.nav-item .ms { font-size: 20px; color: var(--text-3); }
.nav-item.is-active {
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface-3);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item.is-active .ms { color: var(--accent); }
.nav-item--soon {
  opacity: 0.55;
  cursor: default;
  font-weight: 500;
  color: var(--text-3);
}
.nav-item__soon {
  font-size: 10px;
  color: var(--text-6);
  font-weight: 600;
}
.nav-item__badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 20px;
  padding: 1px 7px;
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Desktop Admin top category nav ---------- */
.desktop-topnav {
  display: none;
}
.desktop-topnav__scrim {
  display: none;
}

@media (min-width: 901px) {
  .shell--topnav .shell-sidebar {
    display: none;
  }
  .shell--topnav .desktop-topnav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    min-height: 76px;
    padding: 0 16px 0 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 200;
    overflow: visible;
  }
  .shell--topnav .desktop-topnav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    top: 76px;
    z-index: 190;
    background: transparent;
  }
  .shell--topnav .shell-topbar--admin-desk,
  .shell--topnav .shell-topbar--desk-chrome {
    position: relative;
    z-index: 1;
  }
  .shell--topnav .shell-topbar--admin-desk,
  .shell--topnav .shell-topbar--desk-chrome {
    height: 52px;
    padding: 0 24px;
  }
  .shell--topnav .shell-topbar--admin-desk .shell-menu-btn,
  .shell--topnav .shell-topbar--desk-chrome .shell-menu-btn {
    display: none !important;
  }
  .shell--topnav .topbar-actions--mobile-admin,
  .shell--topnav .topbar-actions--mobile-desk {
    display: none !important;
  }
  .shell--topnav .shell-topbar--admin-desk .topbar-title h1,
  .shell--topnav .shell-topbar--desk-chrome .topbar-title h1 {
    font-size: 17px;
  }
  /* Field: dock is phone-only; topnav is the primary desktop chrome */
  .shell--topnav.shell--field .field-dock {
    display: none !important;
  }
}

.desktop-topnav__field-tag {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent-tint);
  border-radius: 6px;
  padding: 3px 7px;
  line-height: 1;
}

.desktop-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px 10px 8px 4px;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 8px;
}
.desktop-topnav__brand:hover { background: var(--surface-2); }
.desktop-topnav__logo {
  height: 52px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
}
.desktop-topnav__logo.brand-logo--dark { display: none; }
html[data-theme="dark"] .desktop-topnav__logo.brand-logo--light { display: none; }
html[data-theme="dark"] .desktop-topnav__logo.brand-logo--dark { display: block; }
.desktop-topnav__mode {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--success-wash-2);
  color: var(--success-ink);
}
.desktop-topnav__mode[data-mode="dev"] {
  background: var(--warning-tint);
  color: var(--warning);
}
.desktop-topnav__cats {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  /* Must stay visible — overflow-x:auto clips dropdown panels (CSS overflow pairing) */
  overflow: visible;
}
.top-nav__cat {
  position: relative;
  display: flex;
  align-items: stretch;
}
.top-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 0;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.top-nav__btn:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.top-nav__cat.is-active .top-nav__btn {
  color: var(--ink);
}
.top-nav__cat.is-active .top-nav__btn::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.top-nav__cat.is-open .top-nav__btn {
  color: var(--text-1);
  background: var(--surface-3);
}
.top-nav__icon { font-size: 18px; color: inherit; }
.top-nav__caret {
  font-size: 16px;
  color: #757570;
  transition: transform 0.18s ease;
}
.top-nav__cat.is-open .top-nav__caret { transform: rotate(180deg); }

.top-nav-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 36px rgba(23, 23, 26, 0.12);
  padding: 8px;
  z-index: 90;
  animation: top-nav-in 0.16s ease;
}
.top-nav-panel--mega {
  display: grid;
  /* --mega-cols comes from the category's visible group count (layout.js) */
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(160px, 1fr));
  gap: 4px 12px;
  min-width: min(calc(var(--mega-cols, 4) * 190px), 78vw);
  padding: 14px 16px 16px;
  border-radius: 0 0 14px 14px;
}
.top-nav-panel--end {
  left: auto;
  right: 0;
}
@keyframes top-nav-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.top-nav-mega__heading {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 6px 10px 8px;
}
.top-nav-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-16);
  transition: background 0.12s ease;
}
.top-nav-dd__item .ms { font-size: 18px; color: var(--text-4); }
.top-nav-dd__item:hover { background: var(--surface-3); }
.top-nav-dd__item.is-active {
  background: var(--accent-tint);
  color: var(--ink);
}
.top-nav-dd__item.is-active .ms { color: var(--accent); }
.top-nav-dd__item--soon {
  opacity: 0.55;
  cursor: default;
  color: var(--text-3);
}
.top-nav-dd__soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-6);
}
.top-nav-dd__toggle { padding: 6px 4px 2px; }

.top-nav-mode__row {
  display: flex;
  gap: 4px;
  background: var(--surface-3);
  border-radius: 10px;
  padding: 3px;
  border: 1px solid var(--line-6);
}
.top-nav-mode-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 36px;
  background: transparent;
  color: var(--text-3);
}
.top-nav-mode-btn.is-on.is-prod { background: var(--fill-strong); color: var(--on-fill); }
.top-nav-mode-btn.is-on.is-dev { background: var(--warning); color: #000; }
.top-nav-mode__hint {
  font-size: 10.5px;
  color: var(--text-6);
  padding: 7px 2px 0;
  line-height: 1.35;
}

.desktop-topnav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.desktop-topnav__clock {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--line-6);
}
.desktop-topnav__clock.is-in {
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}
.desktop-topnav__clock.is-in .ms { color: var(--live); }
.desktop-topnav__clock .ms { font-size: 16px; }
.desktop-topnav__icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.desktop-topnav__icon-btn .ms { font-size: 21px; }
.desktop-topnav__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--on-fill);
}
.desktop-topnav__profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
}
.desktop-topnav__profile:hover { background: var(--surface-3); }
.desktop-topnav__profile.is-on { background: var(--accent-tint); }
.desktop-topnav__profile .top-nav__caret { font-size: 15px; }
.desktop-topnav__me {
  position: relative;
  display: flex;
  align-items: center;
}
.desktop-topnav__me.is-open .desktop-topnav__profile { background: var(--surface-3); }
.desktop-topnav__me.is-open .top-nav__caret { transform: rotate(180deg); }
.top-nav-panel--me {
  top: calc(100% + 6px);
  min-width: 250px;
  border-radius: 12px;
  padding: 6px;
}
.top-nav-me__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-5);
}
.top-nav-me__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.top-nav-me__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-nav-me__role { font-size: 11px; color: var(--text-4); }
.top-nav-me__sep {
  height: 1px;
  background: var(--surface-4);
  margin: 5px 8px;
}
.top-nav-dd__item--danger { color: var(--text-4); }
.top-nav-dd__item--danger .ms { color: var(--text-7); }
.desktop-topnav__profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .top-nav__label { font-size: 12.5px; }
  .desktop-topnav__clock-label { display: none; }
  .desktop-topnav__profile-name { display: none; }
  .top-nav-panel--mega {
    grid-template-columns: repeat(min(var(--mega-cols, 2), 2), minmax(150px, 1fr));
    min-width: min(420px, 85vw);
  }
}

@media (max-width: 900px) {
  .shell--topnav .desktop-topnav,
  .shell--topnav .desktop-topnav__scrim {
    display: none !important;
  }
  .shell--topnav .topbar-actions--mobile-admin {
    display: flex !important;
  }
  .shell--topnav .topbar-admin-mobile-only {
    display: flex !important;
  }
}

/* ---------- Page / grid utilities ---------- */
.page {
  padding: 28px 32px 48px;
  max-width: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.page-narrow { max-width: 880px; }
.page-mid { max-width: 1100px; }
.page-form { max-width: 640px; }

/* New Claim steps — the label on the left, the controls on the right.
   The screen runs the full width of the window; a single column would leave
   every select stretched across the card with its label stranded at the far
   end of it. The left column is wide enough for a step's explanation to sit on
   two lines rather than four. */
.pc-new-step {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.pc-new-step__body { min-width: 0; }

@media (max-width: 900px) {
  .pc-new-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Line the controls up under the step's title rather than its number. */
  .pc-new-step__body { padding-left: 38px; }
}

@media (max-width: 640px) {
  .pc-new-step__body { padding-left: 0; }
}

/* Send-claim attachments table. Four columns of fixed-ish width do not fit a
   phone: the header labels collide and the filename is left wrapping in a
   sliver. Narrow, the two meta columns fold into the name cell, where the same
   words fit on one line. */
.pc-attach-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 120px 96px;
  gap: 8px;
}

@media (max-width: 760px) {
  .pc-attach-row { grid-template-columns: 26px minmax(0, 1fr); }
  .pc-attach-row__meta { display: none; }
  .pc-attach-row__inline { display: block !important; }
}

/* Money cells in the claim grid.
   The native spinners are wrong for money twice over: they step by 1, which is
   meaningless on a $50,000 line, and they sit half-visible inside a
   right-aligned cell looking like a rendering fault. Typing is the only way
   these are ever filled in. */
.pc-money-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.pc-money-input::-webkit-outer-spin-button,
.pc-money-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Over the row's remaining value. Red while it is wrong, and the reason sits
   under the cell rather than in a banner at the top of the page. */
.pc-money-input.is-invalid {
  border-color: var(--danger) !important;
  background: var(--danger-tint);
}
.pc-bf-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; color: var(--muted); counter-reset: bf; }
.pc-bf-steps li { display: inline-flex; align-items: center; gap: 5px; counter-increment: bf; }
.pc-bf-steps li::before { content: counter(bf) "."; font-weight: 700; }
.pc-bf-steps .ms { font-size: 16px; }
.pc-bf-steps li.is-done { color: var(--ink); }
.pc-bf-steps li.is-done .ms { color: var(--success-ink-5, #1a7f45); }
.pc-bf-fix { margin-top: 8px; }
.pc-bf-fix summary { cursor: pointer; font-weight: 700; }
.pc-bf-fix ol { margin: 6px 0 6px 18px; padding: 0; }
.pc-bf-fix li { margin: 3px 0; }
.pc-ip-guide { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
  background: var(--bg-soft); border: 1px solid var(--border); }
.pc-ip-guide.is-carried { background: #FFF8E8; border-color: #F0D4A8; color: var(--amber-ink); }
.pc-bf-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--muted);
  font-weight: 500; text-transform: none; letter-spacing: 0; }

/* A long row description: its first six lines, opening whole in a window. */
.pc-desc-preview {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  cursor: pointer;
}
/* Clamped inside the padding, so a seventh line never shows through it. */
.pc-desc-preview__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.pc-desc-preview.is-editable {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-card);
}
.pc-desc-preview:hover { border-color: var(--ink); }
.pc-desc-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pc-desc-more .ms { font-size: 13px; }
.pc-desc-more:hover { border-color: var(--ink); background: var(--bg-card); }

/* Quick fills under Amount this claim — 25% / 50% / 75% / Max. Compact so the
   money column does not grow into the description. */
.pc-amt-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  min-width: 0;
}
.pc-amt-utils {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.pc-amt-util {
  margin: 0;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.4;
}
.pc-amt-util:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-card);
}
.pc-cell-error-row > td {
  padding: 0 10px 9px;
  border-bottom: 1px solid var(--border-soft);
}
.pc-cell-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--danger);
  white-space: normal;
}
.pc-cell-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--on-fill);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Claim rows — alternate stripes so a twenty-row section can be read across
   without a ruler. Mixed from ink rather than a fixed grey so the same rule
   works in both themes. The stripe is counted per section in JS, not with
   :nth-child: the error row markCell() inserts would flip every stripe below
   it. */
.pc-row > td,
.pc-cell-error-row > td { transition: background-color .12s ease; }
.pc-row--alt > td,
.pc-reg-row.pc-row--alt { background: color-mix(in srgb, var(--ink) 3.5%, var(--bg-card)); }
/* The row somebody is typing in. */
.pc-row:focus-within > td,
.pc-row:focus-within + .pc-cell-error-row > td,
.pc-reg-row:focus-within { background: color-mix(in srgb, var(--info) 7%, var(--bg-card)); }
/* A row with an error under it: the rule belongs under the message. */
.pc-row:has(+ .pc-cell-error-row) > td { border-bottom-color: transparent !important; }
.pc-cell-error-row > td { border-bottom-color: var(--border); }

/* A section inside Section A — Building 2, Building 9. A band across the table
   with the name on the left and the section's own subtotal in the money
   columns, so each building can be checked on its own. */
.pc-subsection > td {
  background: color-mix(in srgb, var(--info) 9%, var(--bg-card));
  border-top: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--info) 30%, var(--border)) !important;
  vertical-align: middle !important;
}
.pc-subsection > td:first-child { box-shadow: inset 4px 0 0 var(--info); }
.pc-subsection__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-subsection__name {
  flex: 0 1 320px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--info);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
input.pc-subsection__name:hover { border-color: color-mix(in srgb, var(--info) 35%, var(--border)); }
input.pc-subsection__name:focus { outline: none; border-color: var(--info); background: var(--bg-card); text-transform: none; }
.pc-subsection__count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pc-subsection__tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pc-subsection__tools .list-icon-btn { width: 26px; height: 26px; }
.pc-subsection__add {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--info) 40%, var(--border));
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--info);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.pc-subsection__add:hover { border-color: var(--info); }
/* A part split into sections lists them; each row opens its section. */
.pc-sec-row { cursor: pointer; }
.pc-sec-row > td { vertical-align: middle !important; }
.pc-sec-row:hover > td { background: color-mix(in srgb, var(--info) 6%, var(--bg-card)); }
.pc-sec-row__name { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--info);
  letter-spacing: 0.03em; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sec-row__name.is-loose { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 700; }
.pc-sec-row__go { font-size: 18px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.pc-sec-row .pc-subsection__tools + .pc-sec-row__go { margin-left: 0; }
.pc-sec-detail__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
  border-bottom: 1px solid var(--border); }
.pc-sec-detail__letter { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--on-dark); }
.pc-sec-detail__crumb { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--muted); }
.pc-sec-detail__name { flex: 0 1 360px; }
.pc-sec-foot > td { background: var(--bg-soft); }
.pc-reg-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: color-mix(in srgb, var(--info) 9%, var(--bg-card));
  border-top: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  box-shadow: inset 4px 0 0 var(--info);
}
/* Under the description: the row's section, then its note. */
/* The signed sheet behind an hourly row — opened in place, not in a new window. */
.pc-sdb-chip {
  display: flex; align-items: center; gap: 3px; margin-top: 6px; padding: 3px 7px 3px 5px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card);
  color: var(--danger-ink); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pc-sdb-chip .ms { font-size: 15px; }
.pc-sdb-chip:hover { background: var(--bg-soft); border-color: var(--danger-ink); }
.pc-sdb-chip.is-open { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--on-fill); }
.pc-row.is-sheet-open > td { background: var(--accent-tint); }
.pc-sdb-sheet {
  /* Above the desktop top bar (200), as .modal-backdrop is. */
  position: fixed; z-index: 205; top: 16px; bottom: 16px; right: 16px; left: var(--pc-sdb-left, 16px);
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
  background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.pc-sdb-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-sdb-sheet__frame {
  display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-soft);
}
@media (max-width: 900px) { .pc-sdb-sheet { left: 8px; right: 8px; top: 8px; bottom: 8px; } }
.pc-sdb-sheet__wait { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
/* Hours on a Sites daily hours row, under the value they price. */
.pc-hours { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.pc-hours__input {
  width: 78px; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-card); color: var(--ink); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums;
}
.pc-hours__input.is-invalid { border-color: var(--danger); }
.pc-hours__ro { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-hours__unit { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pc-hours__adj {
  margin-top: 4px; font-size: 10.5px; line-height: 1.35; color: var(--amber-ink-3); text-align: right;
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* Payment reconciliation on the Draft tab: a claim's sub-line, and certified
   counted from the claim because no schedule came back. */
.pc-recon__sub { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.pc-recon__deemed { font-style: italic; color: var(--muted); }

/* Claim → Audit: Versions and Sent history, open side by side. */
.pc-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .pc-audit-grid { grid-template-columns: 1fr; } }
.pc-audit { padding: 0; overflow: hidden; }
.pc-audit__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-4);
}
.pc-audit__h { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.pc-audit__count {
  min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; line-height: 17px;
}
.pc-audit__sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pc-audit__row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-4); }
.pc-audit__head + .pc-audit__row { border-top: 0; }
.pc-audit__main { flex: 1; min-width: 0; }
.pc-audit__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pc-audit__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.pc-audit__tag { font-size: 10.5px; font-weight: 700; color: var(--success-ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-audit__tag--bad { color: var(--danger-ink); }
.pc-audit__empty { padding: 14px 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pc-audit__foot { padding: 8px 16px 12px; border-top: 1px solid var(--line-4); font-size: 11px; color: var(--muted); }

/* The Paid column — status, amount, and the button that records it. */
.pc-paid { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 4px; }
.pc-paid__badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.pc-paid--unpaid { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); }
.pc-paid--part { background: color-mix(in srgb, var(--amber-ink-3) 14%, transparent); color: var(--amber-ink-3); }
.pc-paid--paid { background: var(--success-tint); color: var(--success-ink); }
.pc-paid__sum { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-paid__btn {
  padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg-card);
  color: var(--ink); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.pc-paid__btn:hover { background: var(--bg-soft); }
.pc-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pc-row-meta > input { flex: 1 1 100%; }
/* Which section a row sits in — small, under the description. */
.pc-row-section {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Section A's heading — the job's own title and detail under it. */
.pc-seca-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-line;
}
.pc-seca-form {
  display: grid;
  gap: 10px;
  padding: 12px 16px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.pc-seca-field { display: grid; gap: 5px; }
.pc-seca-field > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pc-seca-field em { font-style: normal; font-weight: 400; }
.pc-seca-title-row { display: flex; align-items: center; gap: 6px; }
.pc-seca-title-row b { font-family: var(--font-display); font-size: 13.5px; }
.pc-seca-form input,
.pc-seca-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.pc-seca-form textarea { resize: vertical; line-height: 1.45; }
.pc-seca-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-seca-hint { font-size: 11.5px; color: var(--muted); }
/* Brought forward — claims made before Ideal OS (Draft tab, above the grid). */
.pc-bf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-bf-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.pc-bf-field > span { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.03em; }
.pc-bf-field > b { padding: 7px 0; }
.pc-bf-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted); }
.pc-bf-warn { margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4;
  background: color-mix(in srgb, #E8A317 12%, var(--bg-card)); color: var(--ink);
  border: 1px solid color-mix(in srgb, #E8A317 45%, var(--border)); }
.pc-bf-hist__scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.pc-bf-hist__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pc-bf-hist__table th { background: var(--bg-soft); color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em; text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--border);
  white-space: nowrap; }
.pc-bf-hist__table td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.pc-bf-hist__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-bf-hist__table tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--border); padding: 7px 6px; }
.pc-bf-hist__derived { color: var(--muted); }
.pc-bf-off { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 7px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12px; color: var(--muted); }
.pc-bf-off > span:nth-child(2) { flex: 1; min-width: 220px; }

/* Compact claim workspace header / totals / banners */
.pc-claim-page { --pc-gap: 10px; }
.pc-claim-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--pc-gap);
}
.pc-claim-head__main { min-width: 0; flex: 1; }
.pc-claim-back {
  border: 0; background: transparent; color: var(--muted); font-size: 15px;
  font-weight: 700; cursor: pointer; padding: 6px 10px 6px 0; margin: -6px 0 2px;
  min-height: 32px;
}
.pc-claim-back:hover { color: var(--ink); }
.pc-claim-title { margin: 0; font-size: 18px; line-height: 1.25; }
.pc-claim-meta {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.pc-claim-meta__num { font-family: ui-monospace, monospace; font-weight: 700; color: var(--ink); }
.pc-claim-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-claim-summary-row { margin-bottom: 4px; }
.pc-claim-tabs { flex-wrap: wrap; margin-bottom: 12px !important; }
.pc-flash {
  padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; font-size: 12.5px;
  border-left: 3px solid transparent;
}
.pc-flash--err { border-left-color: var(--danger-ink); background: var(--danger-wash); }
.pc-flash--ok { border-left-color: var(--success-ink-5); background: var(--success-wash-2); }
.pc-totals-strip {
  display: flex; flex-wrap: wrap; gap: 18px 22px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
  margin-bottom: var(--pc-gap);
}
.pc-totals-tile__label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pc-totals-tile__value { font-size: 15px; font-weight: 800; margin-top: 1px; }
.pc-totals-tile__note { font-size: 11px; color: var(--muted); }
.pc-banner {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px;
  border-radius: 9px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.4;
}
.pc-banner .ms { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.pc-banner__body { flex: 1; min-width: 0; }
.pc-banner__title { display: block; font-size: 12.5px; font-weight: 700; }
.pc-banner__text { display: block; font-size: 12px; margin-top: 1px; }
.pc-banner__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.pc-banner__row .pc-banner__title { flex: 1; min-width: 140px; font-weight: 650; }
.pc-banner--warn { background: #FFF8E8; color: var(--amber-ink); }
.pc-banner--block { background: var(--amber-wash); color: var(--amber-ink); }
.pc-banner--ok { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--success-ink-5); }
.pc-banner .leave-btn { font-size: 12px; padding: 4px 10px; flex-shrink: 0;
  border-color: #F0D4A8; color: var(--amber-ink); background: var(--bg-card); }
/* Payment claim Draft: Project and Subject on one row; stacked on a phone. */
.pc-doc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .pc-doc-fields { grid-template-columns: minmax(0, 1fr); } }

.pc-orient {
  display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--bg-card);
}
.pc-orient__label {
  font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0 8px; border-right: 1px solid var(--border);
}
.pc-orient__btn {
  border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650;
  padding: 6px 10px; cursor: pointer; line-height: 1.2;
}
.pc-orient__btn + .pc-orient__btn { border-left: 1px solid var(--border); }
.pc-orient__btn.is-on { background: var(--ink); color: var(--on-fill); }
.pc-orient__btn:hover:not(.is-on) { background: var(--bg-soft); color: var(--ink); }
.pc-draft-foot {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;
}

/* Create Payment Ledger — scope from the awarded tender. */
.pc-imp-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pc-imp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; }
.pc-imp-head > span:not(.ms):not(.pc-bf-chip) { color: var(--muted); }
.pc-imp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-imp-mode { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; background: var(--bg-card); }
.pc-imp-mode.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
.pc-imp-mode input { margin-top: 2px; flex-shrink: 0; }
.pc-imp-mode b { display: block; font-size: 13px; }
.pc-imp-mode b + span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.pc-imp-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.pc-imp-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pc-imp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.pc-imp-table tfoot td { font-weight: 700; border-bottom: 0; }
.pc-imp-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .pc-imp-modes { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pc-bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Settings cards — full content width (no 640px gutters) */
.settings-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-2));
  border-radius: 12px;
  padding: 18px 20px;
}

/* Settings — section rail on the left, one tab's cards on the right; a scrolling pill row on phones */
.settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.settings-layout--single { grid-template-columns: minmax(0, 1fr); }
.settings-nav {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-2));
  border-radius: 12px;
  padding: 6px;
}
.settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, var(--text-1));
  text-align: left;
  cursor: pointer;
}
.settings-nav__item .ms { font-size: 18px; color: var(--muted-2, var(--text-4)); }
.settings-nav__item:hover { background: var(--border-soft, var(--surface-3)); }
.settings-nav__item.is-active { background: var(--fill-strong); color: var(--on-fill); }
.settings-nav__item.is-active .ms { color: var(--on-fill); }
html[data-theme="dark"] .settings-nav__item.is-active,
html[data-theme="dark"] .settings-nav__item.is-active .ms { background: #0e639c; color: var(--on-dark); }
.settings-body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.settings-body__title { font-size: 18px; font-weight: 800; color: var(--ink, var(--text-1)); }
.settings-body__lead { font-size: 12.5px; color: var(--muted, var(--text-3)); margin-top: 2px; line-height: 1.45; }
.settings-nav__group {
  padding: 12px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2, var(--text-4));
}
/* A module shown as a Settings tab brings its own .page — the Settings page already pads it. */
.settings-embed { min-width: 0; }
.settings-embed > .page { padding: 0 !important; max-width: none; }
@media (max-width: 900px) {
  .settings-nav__group { display: none; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav__item { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

/* Desktop Admin (top nav): use full content width — no centered max-width gutters */
@media (min-width: 901px) {
  .shell--topnav .page,
  .shell--topnav .page-narrow,
  .shell--topnav .page-mid,
  .shell--topnav .page-form,
  .shell--topnav .fb-page {
    max-width: none;
    width: 100%;
  }
}

.r-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.r-kpi__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 0;
  color: var(--ink);
  position: relative;
}
.r-kpi__card--accent {
  border-width: 2px;
  border-color: var(--kpi-accent);
  box-shadow: none;
}
.r-kpi__card--accent .r-kpi__value {
  color: var(--kpi-accent);
}
.r-kpi__card--accent .r-kpi__sub {
  color: var(--kpi-accent);
}
/* A tile's own colour is chosen for light paper; on a dark card lift it toward white. */
html[data-theme="dark"] .r-kpi__card--accent .r-kpi__value,
html[data-theme="dark"] .r-kpi__card--accent .r-kpi__sub {
  color: color-mix(in srgb, var(--kpi-accent) 55%, var(--on-dark));
}
.r-kpi__drag {
  position: absolute;
  top: 10px;
  left: 8px;
  font-size: 18px;
  color: var(--muted-2);
  cursor: grab;
  line-height: 1;
}
.r-kpi__card--edit {
  cursor: grab;
  padding-left: 28px;
  padding-right: 56px;
  user-select: none;
}
.r-kpi__card--edit.is-dragging {
  opacity: 0.45;
}
.r-kpi__card--edit.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.r-kpi__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.r-kpi__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  margin: 8px 0 6px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.r-kpi__sub {
  font-size: 12px;
  font-weight: 600;
}
.r-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.r-2-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}
.r-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.r-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

/* Dashboard personalisation */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dash-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.dash-toolbar__btn--primary {
  background: var(--ink);
  color: var(--bg-card);
  border-color: var(--ink);
}
html[data-theme="dark"] .dash-toolbar__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dash-toolbar__hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.dash-section {
  margin-bottom: 24px;
}
.dash-section--edit {
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  padding: 8px;
  background: var(--bg-soft);
}
.dash-section--edit.is-dragging { opacity: 0.55; }
.dash-section--edit.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.dash-section__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
}
.dash-section__handle {
  color: var(--muted-2);
  cursor: grab;
  font-size: 20px;
}
.dash-section__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}
.dash-section__moves { display: flex; gap: 4px; }
.dash-section__move {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-section--hidden .dash-section__body {
  opacity: 0.42;
  filter: grayscale(0.25);
}
/* Customise on Payment Claims and KPI Tenders: the box stays visible, but a
   click must not open a ledger or a tender while the person is rearranging. */
.pc-layout .dash-section--edit .dash-section__body,
.tdr-kpi-layout .dash-section--edit .dash-section__body {
  pointer-events: none;
}
.dash-presets {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.dash-presets__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dash-presets__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-presets__count { font-size: 12px; color: var(--muted); }
.dash-presets__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.dash-preset.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg-card);
}
.dash-preset__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.dash-preset.is-on .dash-preset__tag { color: inherit; opacity: 0.75; }
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.dash-pair .dash-card { margin-bottom: 0; height: 100%; }

/* Dashboard — Active projects as a table (docs/04-ui-ux-brand/04.10-site-templates-and-brand-kit.md §6.9). */
.dash-projects { overflow-x: auto; border-top: 1px solid var(--border-soft); }
.dash-projects__table { min-width: 760px; }
.dash-projects__table th { background: var(--bg-soft); }
.dash-projects__table td { vertical-align: top; }
.dash-projects__job { width: 1%; white-space: nowrap; }
.dash-projects__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.dash-projects__site { color: var(--muted); font-size: 12.5px; }
.dash-projects__num { text-align: right; white-space: nowrap; }
.dash-projects__num b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); }
.dash-projects__num b.is-zero { font-weight: 500; color: var(--muted-2); }
.dash-projects__num .dash-chip { margin-top: 4px; }
.dash-projects__when { text-align: right; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.dash-projects__pm { margin-top: 3px; font-weight: 500; color: var(--muted); }
.dash-projects__none { color: var(--muted-2); }
@media (min-width: 901px) {
  .dash-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
  }
  .dash-pair .dash-section {
    margin-bottom: 0;
    min-width: 0;
  }
}
.dash-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  gap: 12px;
}
.dash-card__head--wrap { flex-wrap: wrap; }
.dash-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.dash-card__hint,
.dash-card__row-sub {
  font-size: 12.5px;
  color: var(--muted);
}
.dash-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
}
.dash-card__ico { font-size: 22px; color: var(--muted); }
.dash-card__ico--bad { color: var(--danger-ink); }
.dash-card__ico--warn { color: var(--amber-ink-3); }
.dash-card__ico--ok { color: var(--success-ink); }
html[data-theme="dark"] .dash-card__ico--bad { color: #F48771; }
html[data-theme="dark"] .dash-card__ico--warn { color: #E8C47A; }
html[data-theme="dark"] .dash-card__ico--ok { color: #89D185; }
.dash-card__chev { color: var(--muted-2); }
.dash-card__row .dash-chip { flex-shrink: 0; white-space: nowrap; }
.dash-card__main { flex: 1; min-width: 0; }
.dash-card__row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-link {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

/* Projects hub — Dashboard-aligned list */
.projects-hub-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.projects-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.projects-hub-filter {
  margin-bottom: 0;
}
.projects-hub-count {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.projects-card-grid {
  margin-bottom: 8px;
}
.projects-job-tile {
  position: relative;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
.projects-job-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.projects-job-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--on-dark) !important;
  flex-shrink: 0;
}
.projects-job-tile__icon .ms { font-size: 20px; }
.projects-job-tile__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-width: 0;
}
.projects-job-tile__new {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--on-dark);
  background: #C45C3E;
  border-radius: 20px;
  padding: 3px 7px;
}
.projects-job-tile__status {
  flex-shrink: 0;
  align-self: flex-start;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 20px;
  padding: 3px 10px;
  display: inline-block;
  white-space: nowrap;
}
.projects-job-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.25;
}
.projects-job-tile__metrics {
  font-size: 11.5px;
  color: var(--text-7);
  font-weight: 600;
}
.projects-job-tile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  width: 100%;
}
/* Column counts live after .field-app-grid — that rule is later in the file
   and would otherwise pin every projects grid back to two columns. */

/* Super Admin — App release (views/appRelease.js) */
.app-release__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .app-release__grid { grid-template-columns: 1fr 1fr; } }
.app-release__body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.app-release__devices { background: var(--surface-2); border: 1px solid #ECECE7; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.app-release__devices .is-warn { color: #9A5300; }
.app-release__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.app-release__chip { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--success-wash-2); color: var(--success-ink); }
.app-release__chip.is-old { background: #FEF4E7; color: #9A5300; }
.app-release__field { display: block; }
.app-release__label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.app-release__hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.app-release__check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.app-release__check input { accent-color: var(--accent); }
.app-release__req { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--danger-wash); color: var(--danger-ink-2); }
.app-release__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.app-release__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-3); background: var(--bg-card); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 42px; }
.app-release__btn--pri { background: var(--accent); color: var(--on-fill); border-color: transparent; flex: 1; justify-content: center; }
.app-release__btn:disabled { opacity: .55; cursor: default; }
.app-release__msg { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: #F1F7FF; color: #1D4E89; margin-bottom: 12px; }
.app-release__history { padding: 0 18px 14px; display: flex; flex-direction: column; }
.app-release__hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line-5); font-size: 13px; }

/* Super Admin — Home layout defaults */
.home-layout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 18px;
}
.home-layout-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
}
.home-layout-row__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-7);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.home-layout-row__ico {
  display: inline-flex;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
  cursor: default;
}
.home-layout-row__ico .field-app-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.home-layout-row__ico .field-app-tile__icon .ms { font-size: 22px; }
.home-layout-row__main { flex: 1; min-width: 0; }
.home-layout-row__label {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text-1);
}
.home-layout-row__hint {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 2px;
}
.home-layout-row__moves {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.home-layout-row__moves .list-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.projects-hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.projects-hub-tab .ms { font-size: 16px; }
.projects-hub-tab.is-active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(17, 17, 18, 0.06);
}
.projects-hub-row .projects-hub-meta {
  flex-shrink: 0;
  align-self: flex-start;
  min-width: 120px;
}
@media (max-width: 720px) {
  .projects-hub-row {
    flex-direction: column;
    align-items: stretch;
  }
  .projects-hub-row .projects-hub-meta {
    width: 100%;
    min-width: 0;
  }
  .projects-hub-row .projects-hub-meta .dash-card__row-sub {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .projects-hub-actions {
    justify-content: flex-start !important;
  }
}
.dash-feedback-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 18px;
}
.dash-pill {
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 10px;
  background: var(--chip-bg);
  color: var(--ink);
}
.dash-pill__n {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px;
}

/* Ideal Pulse */
.pulse-page { max-width: 1440px; }
.pulse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  min-width: 0;
}
.pulse-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.pulse-toolbar__refresh { flex: 0 0 auto; }
.pulse-tab {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 1 auto;
}
.pulse-tab.is-on {
  background: var(--fill-strong);
  color: var(--on-fill);
  border-color: var(--fill-strong);
}
@media (max-width: 900px) {
  .pulse-toolbar { flex-wrap: wrap; }
  .pulse-tabs { gap: 6px; flex: 1 1 100%; }
  .pulse-toolbar__refresh { margin-left: auto; }
  .pulse-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 6px;
    font-size: 12px;
    text-align: center;
  }
}
.pulse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pulse-btn:disabled { opacity: 0.5; cursor: default; }
.pulse-board { padding: 8px 0 12px; }
.pulse-summary {
  display: flex;
  gap: 18px;
  padding: 8px 22px 16px;
  flex-wrap: wrap;
}
.pulse-summary--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.pulse-stat__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  line-height: 1.1;
}
.pulse-stat__l {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pulse-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-soft);
}
.pulse-row__avatar {
  position: relative;
  flex-shrink: 0;
}
.pulse-row__avatar .person-avatar,
.pulse-row__avatar .person-avatar img {
  display: block;
}
.person-avatar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.person-avatar img {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}
.pulse-row__avatar .pulse-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
}
.pulse-row__main { flex: 1; min-width: 0; }
.pulse-row__name {
  font-weight: 650;
  font-size: 14px;
  color: var(--ink);
}
.pulse-row__sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.pulse-row__mod {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.pulse-row__plat {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.pulse-insight--compact {
  padding: 0 22px 12px;
}
.pulse-mod-pill--plat {
  border-color: #BFDBFE;
  background: #EFF6FF;
  color: #1D4ED8;
}
.pulse-mod-pill--ver {
  border-color: #E9D5FF;
  background: #FAF5FF;
  color: #7E22CE;
}
.pulse-mod-pill__ver {
  font-weight: 500;
  opacity: 0.9;
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  display: inline-block;
  background: #A3A39C;
}
.pulse-dot--live { background: var(--success-ink-3); }
.pulse-dot--idling { background: #CA8A04; }
.pulse-dot--inactive { background: #A3A39C; }
.pulse-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 22px 14px;
  align-items: center;
}
.pulse-input, .pulse-select {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 160px;
}
.pulse-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.pulse-empty {
  padding: 18px 22px;
  color: var(--muted);
  font-size: 13px;
}
.pulse-err {
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 13px;
}
.pulse-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 22px 16px;
}
.pulse-insight {
  padding: 0 22px 18px;
}
.pulse-insight__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.pulse-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 52px;
}
.pulse-spark--empty {
  color: var(--muted);
  font-size: 13px;
  min-height: auto;
}
.pulse-spark__bar {
  width: 10px;
  border-radius: 4px 4px 2px 2px;
  display: inline-block;
}
.pulse-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pulse-mod-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--bg);
}
.pulse-mod-pill b { margin-left: 4px; }
.pulse-dash-body { padding: 0 22px 18px; }
.pulse-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pulse-avatar {
  position: relative;
  width: 40px;
  height: 40px;
}
.pulse-avatar .pulse-dot {
  position: absolute;
  right: 0;
  bottom: 0;
}
.pulse-avatar-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.pulse-lastseen { margin-top: 14px; }
.pulse-lastseen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.pulse-lastseen-item {
  font-size: 12.5px;
  color: var(--muted);
}
.pulse-stat--link { cursor: pointer; }
.pulse-stat--link:hover .pulse-stat__n { color: var(--info-ink-alt); }
.pulse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.pulse-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 3px 8px;
}
.pulse-chip--ok { color: #166534; background: #DCFCE7; }
.pulse-chip--warn { color: var(--orange-ink-6); background: var(--amber-wash-4); }
.pulse-chip--bad { color: #9F1239; background: #FCE7F3; }
.pulse-chip--wfh { color: #1E40AF; background: #DBEAFE; }
.pulse-chip--app { color: #6B21A8; background: #F3E8FF; }
.pulse-chip__dot {
  position: static;
  width: 7px;
  height: 7px;
  border: 0;
  margin-right: 5px;
}
.pulse-clock-row { align-items: flex-start; }
.pulse-chip--status { font-weight: 700; }
.pulse-row__meta { margin-top: 4px; font-size: 11.5px; color: var(--muted-2); }
.pulse-row__note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pulse-row__note .ms { font-size: 15px; color: var(--muted, var(--text-4)); margin-top: 1px; }
.pulse-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.pulse-row__action { flex-shrink: 0; align-self: center; padding: 6px 10px; font-size: 12px; }
.pulse-btn--danger { color: #B91C1C; border-color: #FCA5A5; }
.pulse-btn--danger:hover { background: #FEF2F2; }
.pulse-sec { margin-top: 8px; }
.pulse-sec .pulse-insight__title { padding: 4px 22px 0; }
.pulse-jobs {
  display: grid;
  gap: 8px;
}
.pulse-job {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pulse-job__name { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.pulse-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .pulse-job { flex-direction: column; gap: 4px; }
}

/* Pulse — staffing (on site vs rostered now) */
.pulse-staff--full { --staff: var(--success); --staff-tint: var(--success-tint); --staff-ink: var(--success); }
.pulse-staff--short { --staff: var(--warning); --staff-tint: var(--warning-tint); --staff-ink: var(--warning-ink); }
.pulse-staff--critical { --staff: var(--danger); --staff-tint: var(--danger-tint); --staff-ink: var(--danger); }
.pulse-staff--none { --staff: var(--muted-2); --staff-tint: var(--chip-bg); --staff-ink: var(--muted); }
.pulse-staff-text--short { color: var(--warning-ink); }
.pulse-staff-text--critical { color: var(--danger); }
.pulse-staff-text--full { color: var(--success); }
.pulse-stat__n small { font-size: 16px; color: var(--muted); font-weight: 600; }
.pulse-staff-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--staff-ink);
  background: var(--staff-tint);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.pulse-staff-badge b { font-size: 12.5px; font-weight: 750; }
.pulse-staff-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--chip-bg);
  overflow: hidden;
}
.pulse-staff-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--staff);
}
.pulse-staff-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 8px 22px 14px;
  padding: 14px 16px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--staff);
  background: var(--bg);
}
.pulse-staff-hero__n {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 34px;
  line-height: 1;
  color: var(--staff-ink);
}
.pulse-staff-hero__n span { font-size: 20px; color: var(--muted); font-weight: 650; }
.pulse-staff-hero__l {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pulse-staff-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pulse-staff-hero__note { font-size: 12.5px; color: var(--muted); text-align: right; }
.pulse-staff-hero .pulse-staff-bar { flex-basis: 100%; }
.pulse-job__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Pulse — site cards + two columns on desktop */
.pulse-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Site cards: CSS columns pack short sites under each other (grid left a tall
   gap when one site was much taller than its neighbour in the same row). */
.pulse-cols--sites {
  display: block;
  column-count: 1;
  column-gap: 12px;
  padding: 4px 22px 8px;
}
.pulse-site {
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--staff);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  min-width: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  vertical-align: top;
}
.pulse-site__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 8px;
}
.pulse-site__name { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.pulse-site__name span { color: var(--muted); font-weight: 600; }
.pulse-site > .pulse-staff-bar { margin: 0 16px 8px; }
.pulse-site__gaps { margin: 0 16px 10px; }
.pulse-site__sub {
  padding: 10px 16px 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border-soft);
}
.pulse-site .pulse-row { padding: 10px 16px; }
@media (min-width: 1100px) {
  .pulse-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-cols--rows { column-gap: 0; }
  .pulse-cols--rows > .pulse-row:nth-child(odd) { border-right: 1px solid var(--border-soft); }
  .pulse-cols > .pulse-sec { min-width: 0; }
  .pulse-cols > .pulse-sec:nth-child(odd) { border-right: 1px solid var(--border-soft); }
  .pulse-cols--sites { column-count: 2; }
}
@media (max-width: 600px) {
  .pulse-staff-hero, .pulse-cols--sites { margin-left: 12px; margin-right: 12px; }
  .pulse-cols--sites { padding: 4px 0 8px; }
  .pulse-staff-hero__side { align-items: flex-start; }
  .pulse-staff-hero__note { text-align: left; }
}
.dash-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--muted-2);
}
.dash-job-code {
  display: inline-block;
  max-width: 140px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--on-dark);
  border-radius: 8px;
  padding: 6px 8px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.dash-empty {
  padding: 28px 22px;
  color: var(--muted-2);
  font-size: 13px;
}
.dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dash-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--chip-bg);
  border-radius: 20px;
  padding: 2px 8px;
}
.dash-chip--warn { color: var(--amber-ink-3); background: var(--amber-wash-3); }
.dash-chip--ok { color: var(--success-ink); background: var(--success-wash-2); }
.dash-chip--bad { color: var(--danger-ink); background: var(--danger-wash); }
.dash-chip--blue { color: var(--info-ink); background: var(--info-wash); }
.dash-chip--draft { color: #6B5B2A; background: #FFF8E8; }
html[data-theme="dark"] .dash-chip--warn { color: #E8C47A; background: #3A3420; }
html[data-theme="dark"] .dash-chip--ok { color: #89D185; background: #1E3A28; }
html[data-theme="dark"] .dash-chip--bad { color: #F48771; background: #4B2220; }
html[data-theme="dark"] .dash-chip--blue { color: #9CDCFE; background: #1C3A52; }
html[data-theme="dark"] .dash-chip--draft { color: #DCDCAA; background: #3A3420; }
.dash-job-meta {
  text-align: right;
  flex-shrink: 0;
  max-width: 120px;
}
.dash-kpi-swatch {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.dash-kpi-hide {
  position: absolute;
  top: 8px;
  right: 34px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.dash-kpi-hide:hover {
  background: var(--hover, var(--bg-soft));
  color: var(--ink);
}
.dash-kpi-hide .ms { font-size: 18px; }
.r-kpi__card--hidden {
  opacity: 0.42;
  filter: grayscale(0.25);
}
.r-kpi__hidden-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}
.dash-kpi-palette {
  position: absolute;
  top: 34px;
  right: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 196px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
}
.dash-kpi-palette__swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.dash-kpi-palette__swatch.is-on { border-color: var(--ink); }
.dash-kpi-palette__reset {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.dash-kpi-palette__reset.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.dash-return {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-bottom: 2px;
}
.dash-return .ms { font-size: 16px; }

.r-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > * {
  min-width: 640px;
}

/* Responsive data tables — card layout on phones */
.data-table {
  width: 100%;
}
.data-table__head {
  display: grid;
  align-items: center;
}
.data-table__row {
  display: grid;
  align-items: center;
}
.data-table__cell {
  min-width: 0;
}
.data-table__cell--primary {
  min-width: 0;
}
.data-table__cell--actions {
  text-align: right;
  white-space: nowrap;
}
.projects-table .data-table__cell--actions {
  min-width: 0;
}
.data-table__cell--meta {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

/* Staff / Users table — tighter columns than generic data-table */
.users-table__grid {
  display: grid;
  grid-template-columns:
    minmax(200px, 1.05fr)
    minmax(88px, 0.75fr)
    minmax(96px, 0.8fr)
    minmax(78px, 0.6fr)
    minmax(68px, 0.55fr)
    minmax(80px, 0.68fr)
    minmax(108px, 0.82fr)
    92px
    minmax(210px, auto);
  align-items: center;
  padding: 12px 18px;
  column-gap: 10px;
}
.users-table__head.users-table__grid {
  padding: 11px 18px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-6);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
}
.users-table__row.users-table__grid {
  border-bottom: 1px solid var(--line-7);
}
.users-table__user-inner {
  min-width: 0;
  max-width: 260px;
}
.users-table__user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.users-table__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.users-table__status-blocked {
  font-size: 10px;
  font-weight: 800;
  color: #C45A00;
  line-height: 1.2;
  white-space: nowrap;
}
.users-table__actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.list-edit-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  color: var(--ink);
}
.list-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.list-icon-btn .ms { font-size: 18px; line-height: 1; }
.list-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.list-icon-btn--danger {
  border-color: var(--danger-line);
  color: var(--danger-ink);
}
.list-icon-btn--primary {
  border-color: var(--border);
  color: var(--accent);
}
.list-icon-btn--accent {
  border-color: #D0DCEC;
  color: #2F5FAF;
}
.list-icon-btn--ok {
  border-color: var(--success-line);
  color: var(--success-ink);
}
.page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-actions__lead {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
.page-actions__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.clock-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.desk-only { display: initial; }
.mobile-only { display: none !important; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
  .r-kpi { grid-template-columns: repeat(3, 1fr) !important; }
  .r-split { grid-template-columns: 1fr !important; }
  .r-board {
    display: flex !important;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .r-board > * {
    flex: 0 0 min(280px, 82vw);
    min-width: 240px;
  }
}

@media (max-width: 900px) {
  .shell-menu-btn { display: inline-flex; }
  .shell-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 26, 0.42);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .shell.is-nav-open .shell-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .shell-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(288px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12);
    border-right: none;
  }
  .shell.is-nav-open .shell-sidebar {
    transform: translateX(0);
  }
  .shell-topbar {
    height: 60px;
    padding: 0 12px 0 12px;
    gap: 10px;
  }
  .topbar-title h1 { font-size: 17px; }
  .topbar-title > p { display: none; }
  .topbar-clock-label,
  .topbar-cta-text { display: none; }
  .page {
    padding: 16px 14px 36px !important;
  }
  .r-2,
  .r-2-hero,
  .r-3 {
    grid-template-columns: 1fr !important;
  }
  .desk-only { display: none !important; }
  /* Prefer flex/block from component rules — `initial` breaks .qa-bottom-bar flex */
  .mobile-only { display: revert !important; }
  button.mobile-only { display: inline-flex !important; }
  .qa-bottom-bar.mobile-only { display: flex !important; }
  .qa-fab.mobile-only { display: flex !important; }
  .clock-row {
    flex-wrap: wrap;
  }
  .clock-row > button {
    width: 100%;
    justify-content: center;
  }
  .table-scroll > * {
    min-width: 700px;
  }
  .table-scroll > .data-table,
  .table-scroll > div.data-table {
    min-width: 0 !important;
    overflow: visible;
  }
  .table-scroll {
    overflow-x: visible;
  }
  .data-table__head {
    display: none !important;
  }
  .data-table__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    grid-template-columns: none !important;
  }
  .data-table__cell {
    width: 100% !important;
    text-align: left !important;
  }
  .data-table__cell[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-4);
    margin-bottom: 4px;
  }
  .data-table__cell--primary::before {
    display: none !important;
  }
  .data-table__cell--primary {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .data-table__cell--actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--line-5);
  }
  .data-table__cell--actions::before {
    width: 100%;
    margin-bottom: 2px;
  }
  .data-table__cell--actions[data-label=""]::before {
    display: none !important;
  }
  .data-table__cell--meta::before {
    display: none !important;
  }
  .data-table__row--compact {
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .data-table__row--compact .data-table__cell--actions {
    padding-top: 6px;
    margin-top: 0;
    border-top: 1px solid var(--line-5);
  }
  .projects-table .data-table__cell--actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .page-actions__buttons {
    width: 100%;
  }
  .page-actions__buttons > button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  /* Keep icon controls compact — don't stretch to half-width rows */
  .page-actions__buttons > .list-icon-btn,
  .page-actions__buttons > .sch-icon-btn,
  .page-actions__buttons > .mys-icon-btn {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
  }
  .mobile-stack-table {
    min-width: 0 !important;
    display: block;
  }
  .mobile-stack-table thead {
    display: none;
  }
  .mobile-stack-table tbody tr {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--line-5);
  }
  .mobile-stack-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0 !important;
    border: none;
    white-space: normal !important;
  }
  .mobile-stack-table tbody td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-4);
    flex-shrink: 0;
    min-width: 72px;
    padding-top: 2px;
  }
  .mobile-stack-table tbody td[colspan]::before {
    display: none;
  }
}

@media (max-width: 720px) {
  .r-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .r-kpi__card { padding: 14px 12px; }
  .r-kpi__label { font-size: 11px; }
  .r-kpi__value { font-size: 22px; margin: 6px 0 4px; }
  .r-kpi__sub { font-size: 11px; }
}

@media (max-width: 560px) {
  .shell-topbar { padding: 0 10px; }
  .topbar-actions .hv-soft { display: none; }
  /* An admin keeps five icons on a phone: tighten them so the title keeps its
     column instead of running under them (the buttons set width inline). */
  .topbar-actions { gap: 2px; }
  .topbar-actions > .hv-soft { width: 34px !important; }
  .topbar-title__row { gap: 2px; }
  .topbar-title h1 { min-width: 0; overflow-wrap: break-word; }
}

/* Soften dense module headers / takeoff toolbars on small screens */
@media (max-width: 900px) {
  .shell-scroll > div > div[style*="padding:18px 32px"],
  .shell-scroll > div > div[style*="padding:12px 32px"],
  .shell-scroll > div > div[style*="padding:16px 32px"],
  .shell-scroll > div > div[style*="padding:14px 32px"],
  .shell-scroll > div > div[style*="padding:20px 32px"],
  .shell-scroll > div > div[style*="padding:22px 32px"],
  .shell-scroll > div > div[style*="padding:26px 32px"],
  .shell-scroll > div[style*="padding:26px 32px"],
  .shell-scroll > div[style*="padding:22px 32px"],
  .shell-scroll > div[style*="padding:20px 32px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---- QA field mode (mobile inspections) ---- */
.qa-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 46;
  cursor: pointer;
}
.qa-fab .ms { font-size: 26px; }
.qa-fab:hover, .qa-fab:active { background: var(--accent); color: var(--on-accent); }

/* Phone: red FAB is the Add photo control — hide duplicate in bottom bar */
.qa-bottom-bar .qa-bottom-add-photo {
  display: none !important;
}
/* Field shell hides FAB and uses dock/bottom actions — show bar Add photo again */
.shell--field .qa-bottom-bar .qa-bottom-add-photo {
  display: flex !important;
}

/* Compose / detail content must clear the fixed Cancel·Confirm bar */
.qa-compose,
.qa-issue-detail,
.qa-audit-wrap {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.qa-compose__body {
  padding-bottom: 8px;
}

.qa-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  z-index: 45;
}
.qa-bottom-bar button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  min-height: 48px;
}
.qa-bottom-bar button.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
html[data-theme="dark"] .qa-bottom-bar button.primary {
  background: #0e639c;
  border-color: #0e639c;
  color: #fff;
}
.qa-bottom-bar button .ms { font-size: 18px; }

/* Field dock covers bottom:0 — lift QA action bars above it */
.shell--field .qa-bottom-bar {
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 10px;
  z-index: 45;
}
.shell--field .qa-fab {
  /* Dock already has Add photo in the bottom bar — hide duplicate FAB */
  display: none !important;
}
.shell--field .qa-compose,
.shell--field .qa-audit-wrap,
.shell--field .qa-issue-detail {
  /* Scroll room for field dock + action bar */
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

.qa-compose .qa-camera-btn:active {
  background: var(--surface-4);
}

/* Back nav: large field target on mobile; compact breadcrumb on desktop */
.qa-back-btn {
  display: none;
}
.qa-back-trail {
  display: none;
}
.qa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-4);
  margin-bottom: 10px;
}
.qa-breadcrumb__current {
  color: var(--text-1);
  font-weight: 600;
}
.qa-breadcrumb__sep {
  color: var(--grey-78);
}

/* Annotate stage: full uncropped photo; scroll if taller than viewport */
.qa-ann-stage {
  width: 100%;
}
.qa-ann-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Annotate toolbar: compact + scrollable on narrow viewports */
@media (max-width: 900px) {
  .qa-ann-stage {
    /* Leave room for toolbar, thumbs, footer, and bottom action bar */
    max-height: calc(100dvh - 260px) !important;
  }
  .qa-ann-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 2px;
  }
  .qa-ann-tools,
  .qa-ann-colors {
    flex-shrink: 0;
  }
  .qa-ann-tools .hv-mid {
    padding: 8px 10px !important;
    min-width: 40px;
    justify-content: center;
  }
  .qa-ann-footer {
    margin-bottom: 4px;
  }
  .qa-ann-footer .hv-btn {
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Full-width ← Back row — primary escape hatch on site */
  .qa-back-nav {
    margin-bottom: 12px;
  }
  .qa-back-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  .qa-back-btn .ms {
    font-size: 22px;
    flex-shrink: 0;
  }
  .qa-back-btn:active {
    background: var(--danger-wash);
  }
  .qa-back-trail {
    display: block;
    font-size: 12px;
    color: var(--text-4);
    margin: 8px 2px 0;
    line-height: 1.35;
  }
  .qa-breadcrumb {
    display: none !important;
  }

  /* Project header actions */
  .qa-project-hero {
    padding: 16px !important;
  }
  .qa-project-actions {
    width: 100%;
    gap: 10px !important;
  }
  .qa-project-actions .qa-add-issue {
    flex: 1 1 100%;
    display: flex !important;
  }
  .qa-add-issue__main {
    flex: 1;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    border-radius: 10px 0 0 10px !important;
  }
  .qa-add-issue__main .ms {
    font-size: 20px !important;
  }
  .qa-add-issue__more {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 10px !important;
    justify-content: center;
    border-radius: 0 10px 10px 0 !important;
  }
  .qa-icon-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }
  .qa-icon-btn .ms {
    font-size: 22px !important;
  }

  /* Action tiles: stack on narrow phones; 2-col from ~560px */
  .qa-action-tiles {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .qa-action-tile {
    min-height: 64px;
    padding: 14px 16px !important;
  }

  /* Recent issues: single column, taller tap rows */
  .qa-recent-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .qa-recent-card {
    padding: 16px !important;
    min-height: 88px;
  }

  /* Tabs + filters — larger hit areas */
  .qa-tab {
    padding: 12px 10px !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    min-height: 44px;
    white-space: nowrap;
  }
  .qa-chip {
    min-height: 40px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    align-items: center;
  }
  .qa-soft-btn {
    min-height: 40px;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
  .qa-search-input {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px 10px 36px !important;
  }
  .qa-issue-row {
    padding: 16px !important;
    min-height: 72px;
    gap: 12px !important;
  }
  .qa-issue-thumb {
    width: 56px !important;
    height: 56px !important;
  }

  /* Report / share CTAs */
  .qa-report-actions > * {
    flex: 1 1 calc(50% - 6px);
  }
  .qa-cta-btn,
  .qa-report-actions .hv-btn {
    min-height: 44px;
    justify-content: center;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
  }
  .qa-audit-header {
    padding: 14px 14px 16px !important;
  }
  .qa-filter-chips .qa-chip {
    min-height: 40px;
  }
}

@media (min-width: 560px) and (max-width: 900px) {
  .qa-action-tiles {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (min-width: 901px) {
  .qa-fab { display: none !important; }
}

/* ---- Forms (Governance Form Builder) ---- */
.forms-page {
  padding-bottom: 96px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.forms-lead { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; }
.forms-label { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.forms-opt { text-transform: none; font-weight: 500; color: var(--muted-2); }
.forms-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 15px; min-height: 48px; background: var(--bg-card); color: var(--ink); outline: none; box-sizing: border-box; }
.forms-input--sm { min-height: 40px; padding: 8px 10px; font-size: 13px; }
textarea.forms-input { min-height: 88px; resize: vertical; }
.forms-field { margin-bottom: 16px; }
/* Templates that set `width` on fields: short fields share a line. */
.forms-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; }
.forms-cell { grid-column: span 6; min-width: 0; }
.forms-cell--half { grid-column: span 3; }
.forms-cell--third { grid-column: span 2; }
.forms-cell .forms-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "optional" on its own line would push one of a pair out of line. */
.forms-cell--half .forms-opt, .forms-cell--third .forms-opt { display: none; }
/* A lone "+ Save sample" on a short side-by-side field costs a line and knocks
   the pair out of line; samples that exist still show. */
.forms-cell--half .forms-snip-row:has(> .forms-snip--save:only-child),
.forms-cell--third .forms-snip-row:has(> .forms-snip--save:only-child) { display: none; }
@media (max-width: 340px) {
  .forms-cell--half, .forms-cell--third { grid-column: span 6; }
}
.forms-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.forms-seg-btn { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.forms-seg-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.forms-seg-btn:disabled { cursor: default; opacity: 0.7; }
.forms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); border-radius: 20px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 40px; }
.forms-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.forms-chips--selected { margin-top: 8px; min-height: 0; }
.forms-chip--pick { display: inline-flex; align-items: center; gap: 4px; }
.forms-chip-x { font-size: 15px; line-height: 1; opacity: 0.75; font-weight: 700; }
.forms-select-multi { margin-bottom: 0; }
.forms-user-pick { margin-top: 8px; }
.forms-chips--picklist { margin-top: 10px; }
.forms-chips--picklist .forms-chip { font-weight: 600; }
.forms-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 2px 7px;
}
.forms-status--draft { background: color-mix(in srgb, #CA8A04 18%, var(--bg-card)); color: #CA8A04; }
.forms-status--submitted, .forms-status--locked { background: color-mix(in srgb, var(--success-ink-alt) 18%, var(--bg-card)); color: #3DCE7A; }
.forms-status--client_signed { background: color-mix(in srgb, var(--info-ink) 18%, var(--bg-card)); color: #6BA3F5; }
html[data-theme="light"] .forms-status--draft { background: var(--amber-wash-3); color: #A67C00; }
html[data-theme="light"] .forms-status--submitted,
html[data-theme="light"] .forms-status--locked { background: var(--success-wash-2); color: var(--success-ink); }
html[data-theme="light"] .forms-status--client_signed { background: var(--info-wash); color: var(--info-ink); }
.forms-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.forms-pill { border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 40px; }
.forms-pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.forms-check-row { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.forms-signoff-cell--client { min-width: 120px; }
.forms-day-tr--locked td {
  background: var(--bg-soft);
}
.forms-day-locked-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6BA3F5;
  background: color-mix(in srgb, var(--info-ink) 18%, var(--bg-card));
  vertical-align: middle;
}
html[data-theme="light"] .forms-day-locked-badge { color: var(--info-ink); background: var(--info-wash); }
.forms-signoff-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.forms-signon-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.forms-signon-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}
.forms-signon-chip .forms-row-sig {
  max-height: 28px;
  margin: 0;
}
.forms-signon-x {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--danger-ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.forms-signoff-cell--multi {
  text-align: left !important;
  min-width: 10rem;
}
.forms-signoff-actions .forms-btn-sec--sm,
.forms-btn-sec--sm {
  padding: 4px 8px;
  min-height: 32px;
  font-size: 12px;
}
.forms-snip--on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.forms-pill--ok.on { background: var(--success-ink); border-color: var(--success-ink); color: var(--on-fill); }
.forms-pill--warn.on { background: var(--amber-ink-5); border-color: var(--amber-ink-5); color: var(--on-fill); }
.forms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.forms-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.forms-table th, .forms-table td { border: 1px solid var(--border); padding: 6px; vertical-align: top; }
.forms-table th { background: var(--chip-bg); text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.forms-table--hours { min-width: 720px; width: 100%; table-layout: fixed; }
.forms-table--hours .forms-th-desc,
.forms-table--hours .forms-desc-cell { width: 46%; min-width: 220px; }
.forms-table--hours .forms-day-lab,
.forms-table--hours .forms-th-date { width: 7.5rem; }
.forms-table--hours .forms-hours-cell { width: 5.5rem; }
.forms-table--sites { min-width: 960px; width: 100%; table-layout: fixed; }
.forms-table--sites .forms-th-date,
.forms-table--sites .forms-date-cell {
  width: 9.75rem;
  min-width: 9.5rem;
  vertical-align: middle !important;
}
.forms-table--sites .forms-th-desc,
.forms-table--sites .forms-desc-cell {
  width: auto;
  min-width: 200px;
}
.forms-table--sites .forms-th-hours,
.forms-table--sites .forms-hours-cell--labour { width: 13.5rem; min-width: 12rem; }
.forms-table--sites .forms-th-signoff,
.forms-table--sites .forms-signoff-cell { width: 9.5rem; min-width: 8rem; }
.forms-date-cell .forms-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.forms-signoff-cell {
  vertical-align: top !important;
  text-align: center;
}
.forms-row-sig {
  display: block;
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto 4px;
  object-fit: contain;
}
.forms-row-sig-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.forms-row-sig-typed {
  font-family: 'Segoe Script', 'Brush Script MT', 'Apple Chancery', cursive;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--ink);
}
.forms-signoff-all {
  margin-top: 6px;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: none;
  min-height: 32px;
  padding: 4px 6px !important;
}
.forms-hours-cell--labour {
  vertical-align: top !important;
  background: var(--bg-soft);
}
.forms-labour-total {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 4px;
  color: var(--ink);
}
.forms-labour-break-note {
  font-size: 10.5px;
  color: var(--muted);
  margin: 0 0 6px;
  line-height: 1.3;
}
.forms-labour-seg {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.forms-worker-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg-card);
}
.forms-worker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.forms-row3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.forms-mini {
  display: block;
  margin: 0;
}
.forms-mini > span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.forms-static-panel {
  background: color-mix(in srgb, var(--muted) 8%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  white-space: normal;
}
.forms-field--static .forms-label { margin-bottom: 8px; }
.forms-labour-break {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--amber-ink-3);
  font-weight: 600;
  margin-top: 1px;
}
.forms-note--award {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, #CA8A04 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #CA8A04 30%, var(--border));
  border-radius: 8px;
  padding: 8px 10px;
}
html[data-theme="light"] .forms-note--award {
  background: #FFF8E8;
  border-color: #F0E0B8;
  color: var(--text-3);
}
.forms-labour-people {
  width: 2.6rem !important;
  min-width: 2.6rem;
  padding: 4px 2px !important;
  text-align: center;
  font-weight: 700;
}
.forms-labour-time {
  width: 5.2rem !important;
  min-width: 4.8rem;
  padding: 4px 2px !important;
  font-size: 11.5px !important;
}
.forms-labour-x,
.forms-labour-dash {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.forms-labour-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.forms-labour-add:hover { border-color: var(--ink); background: var(--chip-bg); }
.forms-labour-rm {
  border: none;
  background: transparent;
  color: var(--danger-ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.forms-sec--hours > h3 {
  color: #8B0000;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.forms-desc-area {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.4;
  font-size: 13.5px;
  white-space: pre-wrap;
}
.forms-day-lab { white-space: nowrap; min-width: 5.5rem; vertical-align: middle !important; }
.forms-hours-cell { min-width: 5.5rem; vertical-align: middle !important; }
.forms-hours-combo {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 7.5rem;
}
.forms-hours-combo .forms-hours-input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.forms-hours-pick {
  flex: 0 0 2rem;
  width: 2rem;
  min-height: 40px;
  padding: 0 2px;
  border: 1px solid var(--grey-84);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.forms-hours-pick:focus {
  outline: none;
  border-color: #C9A84A;
  background: #FFF9EB;
}
.forms-day-mobile-tools { display: none; }
.forms-input--focused {
  border-color: #C9A84A;
  box-shadow: 0 0 0 2px rgba(201, 168, 74, 0.25);
}
.forms-btn-pri { background: var(--ink); color: var(--on-ink); border: none; border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 48px; }
.forms-btn-pri:hover, .forms-btn-pri:active { background: var(--accent); color: var(--on-accent); }
.forms-btn-sec { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; }
.forms-btn-ghost { background: transparent; border: none; color: var(--muted); font-weight: 600; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.forms-btn-sm { padding: 10px 12px; font-size: 13px; min-height: 40px; }
.forms-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; }
.forms-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.forms-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0;
  padding: 14px 12px 14px 14px;
  overflow: hidden;
  min-height: 72px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  box-sizing: border-box;
}
.forms-card:hover {
  border-color: var(--border);
  background: var(--bg-soft);
}
.forms-card:active {
  background: var(--chip-bg);
}
.forms-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--forms-icon-tone, var(--muted)) 14%, var(--bg-card));
  color: var(--forms-icon-tone, var(--muted));
}
.forms-card-icon .ms { font-size: 24px; line-height: 1; }
.forms-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.forms-card-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.forms-card-desc {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forms-card-chevron {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--muted-2);
}
.forms-card-acts { display: none; }
.forms-new-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: #6BA3F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.forms-new-icon .ms { font-size: 22px; line-height: 1; font-weight: 600; }
.forms-new-icon:hover:not(:disabled) {
  background: color-mix(in srgb, var(--info-ink) 18%, var(--bg-card));
  border-color: var(--info-ink);
  color: #6BA3F5;
}
html[data-theme="light"] .forms-new-icon { color: var(--info-ink); }
html[data-theme="light"] .forms-new-icon:hover:not(:disabled) {
  background: #EAF0FA;
  color: #1A4494;
}
.forms-new-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.forms-card-new { min-width: 72px; min-height: 44px; padding: 10px 16px; }
.forms-cat-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 18px 0 8px; }
.forms-muted { font-size: 12.5px; color: var(--muted); }
.forms-empty { padding: 28px; text-align: center; color: var(--muted-2); }
.forms-msg { color: var(--danger); font-size: 13px; margin-bottom: 10px; }
.forms-hist-actions { margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.forms-hist-new {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.forms-hist-new .ms { font-size: 20px; }
.forms-hist-new:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.forms-due { background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.forms-due--full { background: var(--bg-card); border-color: var(--border); }
.forms-due-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.forms-due-total { font-weight: 700; color: var(--muted); white-space: nowrap; }
.forms-due-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 10px;
  background: var(--bg-card);
  color: #6BA3F5;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.forms-due-viewall .ms { font-size: 18px; }
.forms-due-viewall:hover { background: color-mix(in srgb, var(--info-ink) 14%, var(--bg-card)); border-color: var(--info-ink); }
html[data-theme="light"] .forms-due-viewall { color: var(--info-ink); }
html[data-theme="light"] .forms-due-viewall:hover { background: #F5F8FE; }
.forms-due-item { display: block; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 13px; cursor: pointer; color: var(--ink); }
.forms-due-item.warn { border-color: color-mix(in srgb, #CA8A04 40%, var(--border)); background: color-mix(in srgb, #CA8A04 14%, var(--bg-card)); color: #CA8A04; font-weight: 600; cursor: default; }
html[data-theme="light"] .forms-due-item.warn { border-color: #E8D090; background: var(--amber-wash-3); color: #A67C00; }
.forms-admin {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}
.forms-admin__head { margin-bottom: 10px; color: var(--ink); }
.forms-admin__cat { margin-top: 12px; }
.forms-admin__cat-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.forms-admin__row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.forms-admin__meta { flex: 1; min-width: 0; }
.forms-admin__name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.forms-admin__desc {
  font-size: 12px;
  margin-top: 2px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forms-admin__toggle {
  flex-shrink: 0;
  min-width: 56px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.forms-admin__toggle.is-on {
  background: color-mix(in srgb, var(--success-ink-alt) 18%, var(--bg-card));
  border-color: color-mix(in srgb, var(--success-ink-alt) 40%, var(--border));
  color: #3DCE7A;
}
html[data-theme="light"] .forms-admin__toggle.is-on {
  background: var(--success-wash);
  border-color: #B7E2C5;
  color: var(--success-ink-alt);
}
.forms-admin__toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.forms-due-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; cursor: default; }
.forms-due-main { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 6px 8px; font-size: 13px; cursor: pointer; color: inherit; }
.forms-hist-row { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px 8px 4px; margin-bottom: 8px; min-height: 56px; }
.forms-hist-main { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 6px 8px; cursor: pointer; color: inherit; }
.forms-hist-copy { flex-shrink: 0; }
.forms-card-count { margin-top: 2px; font-weight: 700; color: var(--muted); font-size: 12px; }
.forms-back-nav { margin-bottom: 10px; }
.forms-hist-top { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 2; }
.forms-hist-back { flex-shrink: 0; width: 40px; height: 40px; border: none; background: transparent; border-radius: 10px; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.forms-hist-back .ms { font-size: 28px; line-height: 1; }
.forms-hist-back:hover { background: rgba(224, 27, 27, 0.08); }
.forms-hist-title-wrap { flex: 1; min-width: 0; }
.forms-hist-new-sm { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.forms-hist-new-sm .ms { font-size: 18px; }
.forms-hist-new-sm:disabled { opacity: 0.45; cursor: not-allowed; }
.forms-hist-tabs { display: flex; gap: 4px; padding: 3px; margin: 4px 0 10px; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 12px; }
.forms-hist-tab { flex: 1; min-height: 38px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.forms-hist-tab span { font-weight: 600; opacity: 0.75; margin-left: 2px; }
.forms-hist-tab.on { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.forms-hist-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.forms-hist-filters .forms-hist-search { flex: 1 1 220px; min-width: 0; margin: 0; }
.forms-hist-filters .forms-hist-range { flex: 0 0 auto; width: auto; margin: 0; }
.forms-hist-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.forms-hist-chip span { color: var(--danger-ink); margin-left: 2px; }
.forms-hist-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.forms-hist-chip.on span { color: inherit; }
.forms-hist-group { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 2px 6px; }
.forms-hist-group:first-child { margin-top: 2px; }
.forms-hist-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.forms-hist-facts { font-size: 13px; color: var(--ink); margin-top: 3px; }
.forms-hist-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.forms-review { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.forms-review--open { background: color-mix(in srgb, var(--danger) 16%, var(--bg-card)); color: var(--danger-ink); }
.forms-review--reviewed { background: color-mix(in srgb, var(--info-ink) 16%, var(--bg-card)); color: var(--info-ink); }
.forms-review--closed { background: color-mix(in srgb, var(--success-ink) 16%, var(--bg-card)); color: var(--success-ink); }
.forms-review-bar { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: var(--bg-card); }
.forms-review-bar--open { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.forms-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.forms-review-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.forms-review-hist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.forms-review-hist li { padding: 4px 0; border-top: 1px solid var(--border); }
.forms-review-hist li div { color: var(--ink); margin-top: 2px; white-space: pre-wrap; }
.forms-card-badge { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }
.forms-hub-hint { margin: 2px 0 -6px; }
.forms-drafts-bar { margin: 14px 0; }
.forms-drafts-mine { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 4px; margin-bottom: 8px; }
.forms-drafts-link { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 12px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.forms-drafts-link span:nth-child(2) { flex: 1; }
.forms-drafts-link:hover { color: var(--ink); border-color: var(--muted); }

@media (min-width: 720px) {
  .forms-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .forms-hist-new {
    width: auto;
    min-width: 160px;
  }
}
.forms-fill-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; }
.forms-fill-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }

/* Mobile: stack Daily / Sites hours rows as cards (no clipped columns) */
@media (max-width: 720px) {
  .forms-fill-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .forms-fill-top > div:first-child {
    flex: 1 1 100%;
  }
  .forms-fill-title {
    font-size: 15px;
    line-height: 1.25;
  }
  .forms-day-mobile-tools {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .forms-table-wrap--hours {
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
  .forms-table--hours,
  .forms-table--sites {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  .forms-table--hours thead {
    display: none;
  }
  .forms-table--hours tbody {
    display: block;
  }
  .forms-table--hours tr.forms-day-tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 12px 12px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  .forms-table--hours tr.forms-day-tr td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: none;
    border-bottom: 1px solid var(--line-5);
    padding: 10px 0;
    text-align: left !important;
  }
  .forms-table--hours tr.forms-day-tr td:last-child {
    border-bottom: none;
  }
  .forms-table--hours tr.forms-day-tr td.forms-day-lab,
  .forms-table--hours tr.forms-day-tr td.forms-date-cell {
    padding-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 2px;
  }
  .forms-table--hours tr.forms-day-tr td.forms-day-lab strong {
    font-size: 15px;
    letter-spacing: 0.01em;
  }
  .forms-table--hours tr.forms-day-tr td:not(.forms-day-lab):not(.forms-date-cell)::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-4);
    margin-bottom: 6px;
  }
  .forms-table--hours .forms-th-desc,
  .forms-table--hours .forms-desc-cell,
  .forms-table--hours .forms-hours-cell,
  .forms-table--hours .forms-th-date,
  .forms-table--hours .forms-date-cell,
  .forms-table--sites .forms-hours-cell--labour,
  .forms-table--sites .forms-signoff-cell {
    width: auto !important;
    min-width: 0 !important;
  }
  .forms-hours-combo {
    max-width: none;
    width: 100%;
  }
  .forms-hours-combo .forms-hours-input {
    flex: 1;
    min-height: 44px;
  }
  .forms-hours-pick {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    min-height: 44px;
  }
  .forms-signoff-cell {
    text-align: left !important;
  }
  .forms-row-sig {
    margin: 0 0 8px;
  }
  .forms-labour-seg {
    gap: 6px;
  }
  .forms-labour-people,
  .forms-labour-time {
    min-height: 40px;
  }
  .forms-labour-time {
    width: auto !important;
    min-width: 5.5rem;
    flex: 1 1 auto;
  }
  .forms-desc-area {
    min-height: 5.5rem;
  }
  .forms-row2 {
    grid-template-columns: 1fr;
  }
}
.forms-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; color: var(--ink); }
.forms-sec h3 { margin: 0 0 12px; font-size: 15px; font-family: var(--font-display); color: var(--ink); }
.forms-fill-foot { margin-top: 8px; padding: 20px 0 28px; }
.forms-fill-foot .forms-btn-pri { width: 100%; }
.forms-disc { background: color-mix(in srgb, #CA8A04 14%, var(--bg-card)); border: 1px solid color-mix(in srgb, #CA8A04 35%, var(--border)); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--muted); margin: 0 0 12px; }
html[data-theme="light"] .forms-disc { background: var(--amber-wash-3); border-color: #E8D090; color: var(--text-3); }
.forms-note { font-size: 12.5px; color: var(--muted); background: var(--chip-bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }

.forms-date-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.forms-date-time .forms-input { flex: 1 1 140px; min-width: 0; }
.forms-date-time .forms-input--time { flex: 0 1 130px; }
.forms-btn-sec--sm { padding: 8px 10px; font-size: 12.5px; min-height: 40px; }

.forms-sig { border: 1px dashed var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.forms-sig-done { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 18px; margin: 6px 0; }
.forms-sig-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.forms-sig-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg-soft);
}
.forms-sig-row-name { flex: 1; min-width: 120px; font-weight: 600; font-size: 14px; color: var(--ink); }
.forms-sig-row-status { font-size: 12.5px; color: var(--muted); }
.forms-sig-row-status.signed { color: #3DCE7A; font-weight: 600; }
html[data-theme="light"] .forms-sig-row-status.signed { color: var(--success-ink); }
.forms-sig-row .forms-sig-done { margin: 0; font-size: 16px; }
.forms-photos { display: grid; gap: 10px; }
.forms-photo { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg-soft); }
.forms-submitted-banner {
  background: color-mix(in srgb, var(--success-ink-alt) 16%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--success-ink-alt) 35%, var(--border));
  color: #3DCE7A;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
html[data-theme="light"] .forms-submitted-banner {
  background: var(--success-wash-2);
  border-color: var(--success-line);
  color: var(--success-ink);
}
.forms-preview-doc {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px;
  background: var(--bg-soft);
}

/* Forms HTML preview — shell-root overlay above topbar / bell / clock */
.forms-html-preview {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 17, 18, 0.88);
  display: flex;
  flex-direction: column;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
  pointer-events: auto;
}
.forms-html-preview__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--fill-strong);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
  pointer-events: auto;
}
.forms-html-preview__icon {
  color: var(--on-fill);
  font-size: 22px;
  flex-shrink: 0;
}
.forms-html-preview__titles {
  flex: 1;
  min-width: 0;
}
.forms-html-preview__title {
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forms-html-preview__sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forms-html-preview__newtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-fill);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.forms-html-preview__newtab .ms { font-size: 18px; }
.forms-html-preview__close {
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-fill);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.forms-html-preview__close .ms { font-size: 22px; line-height: 1; pointer-events: none; }
.forms-html-preview__body {
  flex: 1;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  background: var(--fill-strong);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.forms-html-preview__frame {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 0;
  background: var(--bg-card);
}

/* Sign QR modal (client / supervisor link) */
.forms-sign-qr {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(17, 17, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.forms-sign-qr__card {
  background: var(--bg-card);
  border-radius: 16px;
  width: min(420px, 100%);
  box-shadow: 0 18px 50px var(--shadow);
  overflow: hidden;
  color: var(--ink);
}
.forms-sign-qr__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px 0;
}
.forms-sign-qr__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.forms-sign-qr__hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}
.forms-sign-qr__x {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.forms-sign-qr__x .ms { font-size: 22px; color: var(--muted); }
.forms-sign-qr__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.forms-sign-qr__img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 8px;
}
.forms-sign-qr__url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  text-align: center;
  line-height: 1.4;
  max-width: 100%;
}
.forms-sign-qr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 18px;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .forms-html-preview__newtab span:not(.ms) { display: none; }
  .forms-html-preview__newtab {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
  }
}
.forms-preview-doc .forms-sec {
  margin-bottom: 8px;
}
.forms-preview-doc .forms-sec:last-child {
  margin-bottom: 0;
}
.forms-msg {
  font-size: 13px;
  margin-bottom: 10px;
}
.forms-snip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.forms-snip-lab {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.forms-snip {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 16px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 32px;
}
.forms-snip:active { background: var(--chip-bg); }
.forms-snip--mine { border-color: color-mix(in srgb, var(--success-ink-alt) 40%, var(--border)); background: color-mix(in srgb, var(--success-ink-alt) 16%, var(--bg-card)); color: #3DCE7A; }
.forms-snip--save { border-style: dashed; color: var(--muted); font-weight: 600; }
.forms-snip--ai {
  border-color: color-mix(in srgb, #2F6FED 35%, var(--border));
  background: color-mix(in srgb, #2F6FED 10%, var(--bg-card));
  color: #2F6FED;
}
.forms-snip--ai-btn {
  border-color: #2F6FED;
  background: #2F6FED;
  color: var(--on-fill);
}
.forms-snip--ai-btn:disabled { opacity: 0.65; cursor: default; }
html[data-theme="light"] .forms-snip--ai {
  border-color: #C5D8F7;
  background: #EEF4FF;
  color: #2F5FAF;
}
.forms-topic-ai { margin-bottom: 8px; }
.forms-topic-ai__kw { max-width: 280px; }

.forms-field--ai { margin-top: 4px; }
.forms-ai-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.forms-ai-mic {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.forms-ai-mic .ms { font-size: 22px; }
.forms-ai-mic.is-recording {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-fill);
  animation: forms-ai-pulse 1.2s ease-in-out infinite;
}
.forms-ai-mic.is-busy { opacity: 0.65; }
.forms-ai-mic:disabled { opacity: 0.55; cursor: default; }
@keyframes forms-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 27, 27, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(224, 27, 27, 0); }
}
.forms-ai-polish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.forms-ai-polish .ms { font-size: 16px; color: var(--accent); }
.forms-ai-polish:disabled { opacity: 0.55; cursor: default; }
.forms-ai-undo {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
}
.forms-ai-status {
  flex: 1 1 140px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.forms-input--ai { min-height: 88px; }
html[data-theme="light"] .forms-snip--mine { border-color: var(--success-line); background: var(--success-wash-2); color: var(--success-ink); }
.forms-snip-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--success-ink-alt) 40%, var(--border));
  background: color-mix(in srgb, var(--success-ink-alt) 16%, var(--bg-card));
}
html[data-theme="light"] .forms-snip-wrap {
  border-color: var(--success-line);
  background: var(--success-wash-2);
}
.forms-snip-wrap .forms-snip--mine {
  border: none;
  border-radius: 0;
  background: transparent;
}
.forms-snip-edit {
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--success-ink-alt) 40%, var(--border));
  background: transparent;
  color: #3DCE7A;
  padding: 0 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
html[data-theme="light"] .forms-snip-edit {
  border-left-color: var(--success-line);
  color: var(--success-ink);
}

/* Profile signature stamp */
.profile-sig-block {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
}
.profile-sig-block__label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.profile-sig-block__help {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.profile-sig-block__preview {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.profile-sig-block__preview img {
  max-height: 64px;
  max-width: 100%;
  display: block;
}
.profile-sig-block__empty {
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
}
.profile-sig-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-sig-block__upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0;
}
.profile-sig-block__actions .forms-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
}
.profile-sig-block__actions .ms { font-size: 18px; }

.profile-sig-pad {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(17, 17, 18, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.profile-sig-pad__card {
  background: var(--bg-card);
  border-radius: 16px;
  width: min(520px, 100%);
  padding: 16px;
  box-shadow: 0 18px 50px var(--shadow);
  color: var(--ink);
}
.profile-sig-pad__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.profile-sig-pad__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.profile-sig-pad__hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.profile-sig-pad__x {
  margin-left: auto;
  border: none;
  background: var(--chip-bg);
  color: var(--muted);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-sig-pad__x .ms { font-size: 22px; color: var(--muted); }
.profile-sig-pad__canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: crosshair;
}
.profile-sig-pad__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.profile-sig-pad__actions .forms-btn-sec,
.profile-sig-pad__actions .forms-btn-pri {
  min-height: 44px;
}
@media (min-width: 700px) {
  .profile-sig-pad {
    align-items: center;
  }
}

/* Profile hero + "Your face" sheet — mirrors Ideal Field's ProfileScreen. */
.profile-hero {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-hero__face { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.profile-hero__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: var(--ink);
  color: var(--on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.profile-hero__badge:hover { background: var(--accent); color: var(--on-accent); }
.profile-hero__badge .ms { font-size: 15px; color: inherit; }
.profile-hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-hero__meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-face__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--chip-bg);
  border-radius: 12px;
  margin-bottom: 14px;
}
.profile-face__seg-btn {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.profile-face__seg-btn.is-active { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.profile-face__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.profile-face__styles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.profile-face__chip {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.profile-face__chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.profile-face__chip:disabled { opacity: 0.6; cursor: wait; }
.profile-face__seed { display: flex; gap: 8px; align-items: center; }
.profile-face__seed input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--bg-soft);
  color: var(--ink);
}
.profile-face__redraw {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.profile-face__redraw .ms { font-size: 20px; color: inherit; }
.profile-face__hint { font-size: 13px; color: var(--muted-2); margin-bottom: 12px; }
.profile-face__actions { display: flex; flex-direction: column; gap: 8px; }
.profile-face__actions .forms-btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.profile-face__actions .forms-btn-sec.is-disabled { opacity: 0.6; pointer-events: none; }
.profile-face__actions .ms { font-size: 18px; }
.profile-face__spin { animation: profile-face-spin 0.9s linear infinite; }
@keyframes profile-face-spin { to { transform: rotate(360deg); } }

.qa-sig-current {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.qa-sig-current img {
  max-height: 56px;
  display: block;
}

.qa-hub-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 3px;
}
.qa-hub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.qa-hub-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink, var(--text-1));
}
.qa-hub-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.qa-hub-head__btn {
  border: 1px solid var(--line-3);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.qa-hub-head__btn--primary {
  background: var(--fill-strong);
  color: var(--on-fill);
  border: none;
}
.qa-hub-tab {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.qa-hub-tab.is-active {
  background: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] .qa-hub-tab.is-active {
  background: #0e639c;
  color: #fff;
}

.qa-tl-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.qa-tl-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
}
.qa-tl-card:hover {
  border-color: var(--border);
  box-shadow: 0 6px 18px var(--shadow);
}
.qa-tl-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 0;
}
.qa-tl-head-text { flex: 1; min-width: 0; }
.qa-tl-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qa-tl-avatar .ms { font-size: 20px; }
.qa-tl-line {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.35;
}
.qa-tl-sum { color: var(--muted); font-weight: 500; margin-left: 4px; }
.qa-tl-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 10px 14px 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.qa-tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.qa-tl-media {
  width: 100%;
  background: #111;
  line-height: 0;
}
.qa-tl-media img {
  width: 100%;
  height: auto;
  max-height: min(72vh, 720px);
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}
.qa-tl-media--sig {
  background: var(--bg-soft);
  padding: 20px 16px;
}
.qa-tl-media--sig img {
  max-height: 120px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}
.qa-tl-foot {
  padding: 10px 14px 12px;
  font-size: 12px;
  color: var(--muted);
}
.qa-tl-type { text-transform: capitalize; }
.qa-project-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  min-height: 52px;
}
.qa-project-jump:hover,
.qa-project-jump:active {
  border-color: var(--border);
  background: var(--chip-bg);
}
.qa-project-jump__icon {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.qa-project-jump__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qa-project-jump__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}
.qa-project-jump__hint {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.qa-project-jump__chev {
  font-size: 22px;
  color: var(--muted-2);
  flex-shrink: 0;
}
.qa-tl-empty,
.qa-tl-loading {
  padding: 36px 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: 14px;
}

@media (max-width: 900px) {
  .qa-hub-head {
    gap: 8px;
  }
  .qa-hub-head__actions {
    order: 1;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
  }
  .qa-hub-head__btn {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 10px 8px;
  }
  .qa-hub-tabs {
    order: 2;
    width: 100%;
  }
  .qa-hub-tab {
    flex: 1;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .qa-tl-feed { max-width: none; }
  .qa-tl-media img { max-height: 70vh; }
}


/* —— Field Forms shell (Leading Hand mobile home) —— */
.shell--field .shell-scroll {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.field-dock {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  gap: 4px;
}
.field-dock__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 52px;
  border-radius: 10px;
  color: var(--muted);
  font-family: inherit;
}
.field-dock__item.is-on {
  color: var(--accent);
  background: transparent;
}
.field-dock__icon { font-size: 22px; }
.field-dock__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .shell--field .field-dock { display: flex; }
  .shell--field .shell-menu-btn--field { display: none; }

  /* Chat gets the screen to itself: the dock and the floating button are both
     navigation, and the only thing they can take room from is the
     conversation. Declared here, next to the rule that shows the dock, so the
     two always cover the same range. */
  .shell--chat .field-dock { display: none; }
  .shell--chat .onebox-fab { display: none; }
  /* Later in the file than `.shell--field .shell-scroll`, which reserves a
     dock-sized strip that is no longer there. */
  .shell--chat .shell-scroll { padding-bottom: 0; }
  .shell--chat .chat-page { padding-bottom: 0; }
}

.field-home__hero { margin-bottom: 10px; }
.field-home__date {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.field-home__hello {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-top: 2px;
  color: var(--ink);
  line-height: 1.15;
}
.field-home__role {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.field-home__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.field-home__ath {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-3);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
}
.field-home__ath .ms { font-size: 18px; }
.field-home__msg {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--success-ink);
  font-weight: 600;
}
/* Get started — Home's first-run checklist (02.12 §3.3), companies other than Ideal. */
.get-started {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.get-started__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.get-started__title { font-size: 15px; font-weight: 800; color: var(--text-1); }
.get-started__sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.get-started__hide {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
}
.get-started__hide:hover { color: var(--text-1); }
.get-started__bar { height: 6px; border-radius: 999px; background: var(--fill, var(--surface-2)); margin: 12px 0 6px; overflow: hidden; }
.get-started__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.get-started__list { list-style: none; margin: 0; padding: 0; }
.get-started__step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line-1, var(--border));
}
.get-started__step:first-child { border-top: none; }
.get-started__tick { font-size: 20px; color: var(--text-4, var(--muted)); }
.get-started__step.is-done .get-started__tick { color: var(--success-ink); }
.get-started__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.get-started__text b { font-size: 13.5px; font-weight: 700; color: var(--text-1); }
.get-started__step.is-done .get-started__text b { color: var(--text-3); }
.get-started__text small { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.get-started__btn {
  flex-shrink: 0; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-1);
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 36px;
}
.get-started__btn:hover { background: var(--fill, var(--surface-2)); }
.get-started__state { font-size: 12px; font-weight: 700; color: var(--success-ink); }
.field-home__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 10px;
}
.field-home__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 10px;
}
.field-home__section-head .field-home__section-label { margin: 0; }
.field-home__section-note {
  display: none;
  font-size: 12px;
  color: var(--muted);
}
.field-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
/* Projects hub: denser than the home launcher. Desktop is four jobs a row. */
@media (min-width: 900px) {
  .field-app-grid.projects-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (min-width: 1200px) {
  .field-app-grid.projects-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.projects-hub-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.projects-hub-search-wrap .ms {
  font-size: 20px;
  color: var(--muted);
  flex-shrink: 0;
}
.projects-hub-search {
  flex: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}
.projects-hub-search:focus { outline: none; }
.projects-hub-search-wrap:focus-within { border-color: var(--ink); }
.projects-job-tile {
  min-height: 0;
  padding: 12px 12px 10px;
  gap: 4px;
}
.projects-job-tile .field-app-tile__hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.field-app-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px 14px 12px;
  cursor: pointer;
  font-family: inherit;
  min-height: 118px;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.field-app-tile { position: relative; }
.field-app-tile__star {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: var(--muted-2);
}
.field-app-tile__star.is-on { color: #CA8A04; }
.field-app-tile--star-edit { border-style: dashed; }
.field-app-tile--star-edit[aria-pressed="true"] { border-style: solid; border-color: #CA8A04; }
.field-home__section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-home__star-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.field-home__star-btn .ms { font-size: 16px; color: #CA8A04; }
.field-home__star-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-card);
}
.field-home__star-btn.is-on .ms { color: inherit; }
.field-home__star-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.field-app-tile:hover {
  border-color: var(--grey-84);
  box-shadow: 0 4px 14px rgba(23, 23, 26, 0.06);
}
.field-app-tile:active {
  transform: scale(0.98);
  border-color: var(--accent);
}
/* Desktop launcher: sized icon wells, one tone per module. */
.field-app-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--fill-strong);
  color: var(--on-fill);
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-app-tile__icon .ms { font-size: 28px; }
.field-app-tile--tone-red .field-app-tile__icon { background: var(--accent-tint); color: var(--ink); }
.field-app-tile--tone-coral .field-app-tile__icon { background: #FCEFEA; color: #C45C3E; }
.field-app-tile--tone-amber .field-app-tile__icon { background: var(--amber-wash-3); color: var(--amber-ink-6); }
.field-app-tile--tone-copper .field-app-tile__icon { background: #F5EDE6; color: var(--amber-ink-4); }
.field-app-tile--tone-green .field-app-tile__icon { background: var(--success-wash-2); color: var(--success-ink); }
.field-app-tile--tone-wa .field-app-tile__icon { background: #E8F6EE; color: #128C7E; }
.field-app-tile--tone-teal .field-app-tile__icon { background: #E6F5F3; color: var(--teal-ink-2); }
.field-app-tile--tone-cyan .field-app-tile__icon { background: #E8F6F8; color: #0E7490; }
.field-app-tile--tone-sky .field-app-tile__icon { background: #EAF3FB; color: #2F5FAF; }
.field-app-tile--tone-blue .field-app-tile__icon { background: var(--info-wash); color: var(--info-ink); }
.field-app-tile--tone-navy .field-app-tile__icon { background: #E9EEF6; color: #1E3A5F; }
.field-app-tile--tone-steel .field-app-tile__icon { background: #EEF1F4; color: #3D4F63; }
.field-app-tile--tone-slate .field-app-tile__icon { background: #F0F1F3; color: #4A5568; }
.field-app-tile--tone-ink .field-app-tile__icon { background: var(--surface-4); color: var(--text-2); }
.field-app-tile--accent .field-app-tile__icon {
  background: var(--accent);
  color: var(--on-accent);
}
/* Homepage buttons: mobile's solid turquoise, desktop tile size. */
.app-home .field-app-tile__icon,
.app-home .field-app-tile[class*="field-app-tile--tone-"] .field-app-tile__icon,
.app-home .field-app-tile--accent .field-app-tile__icon {
  background: transparent;
  color: var(--accent);
}
.field-app-tile__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Projects cards are smaller than home tiles — these beat the launcher sizes above. */
.field-app-tile.projects-job-tile {
  min-height: 0;
  padding: 12px 12px 10px;
  gap: 4px;
}
.projects-job-tile .field-app-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.projects-job-tile .field-app-tile__icon .ms { font-size: 20px; }
.projects-job-tile .field-app-tile__label { font-size: 14.5px; }
.field-app-tile__hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.field-home__foot {
  font-size: 12.5px;
  color: var(--text-4);
  line-height: 1.45;
  margin: 0;
}

/* Shared Home (Admin + Field) — fluid on desktop; keep 2-col icon tiles on mobile */
.app-home {
  max-width: none;
  width: 100%;
}
.app-home .field-app-grid {
  /* Mobile / tablet: always 2 columns (old icon launcher) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .app-home.page,
  .app-home {
    padding-top: 12px;
    padding-bottom: 28px;
  }
  .app-home .field-home__hero {
    margin-bottom: 8px;
  }
  .app-home .field-home__hello {
    font-size: 22px;
  }
  .app-home .field-app-tile {
    min-height: 112px;
    padding: 14px 12px 12px;
    border-radius: 16px;
  }
  /* Phone web: same solid turquoise, smaller than the desktop tile. */
  .app-home .field-app-tile__icon,
  .app-home .field-app-tile[class*="field-app-tile--tone-"] .field-app-tile__icon,
  .app-home .field-app-tile--accent .field-app-tile__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
  }
  .app-home .field-app-tile__icon .ms {
    font-size: 22px;
  }
  .app-home .field-app-tile__label {
    font-size: 13.5px;
  }
  .app-home .field-home__section-note { display: block; }
  .app-home .field-home__section-label {
    margin: 2px 0 8px;
  }
}
@media (min-width: 901px) {
  .shell--topnav .shell-scroll > .page,
  .shell--topnav .shell-scroll .app-home.page {
    padding-left: 16px;
    padding-right: 16px;
    max-width: none;
    width: 100%;
  }
  .app-home .field-home__hello {
    font-size: 28px;
  }
  .app-home .field-app-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  .app-home .field-app-tile {
    min-height: 128px;
    padding: 16px 16px 14px;
  }
  .app-home .field-app-tile__icon,
  .app-home .field-app-tile[class*="field-app-tile--tone-"] .field-app-tile__icon,
  .app-home .field-app-tile--accent .field-app-tile__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .app-home .field-app-tile__icon .ms { font-size: 28px; }
  .app-home .field-app-tile__label { font-size: 18px; }
}
@media (min-width: 1400px) {
  .app-home .field-app-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Download-page card in the User Guide — replaced the Add to Home Screen
   banner when the native apps went to the stores. The QR keeps a white plate
   of its own in the image, so it stays readable on a dark background. */
.get-app-card {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.get-app-card__qr {
  width: 132px;
  height: 132px;
  border-radius: 10px;
  background: var(--bg-card);
  padding: 6px;
  flex-shrink: 0;
}
.get-app-card__copy { flex: 1; min-width: 220px; }
.get-app-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.get-app-card__hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 12px;
}
.get-app-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.get-app-card__link:hover { text-decoration: underline; }
.get-app-card__link .ms { font-size: 17px; }

@media (max-width: 520px) {
  .get-app-card { flex-direction: column; align-items: center; text-align: center; }
  .get-app-card__copy { min-width: 0; width: 100%; }
  .get-app-card__link { justify-content: center; }
}

.field-install-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.field-install-banner__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.field-install-banner__icon .ms { font-size: 22px; }
.field-install-banner__copy { flex: 1; min-width: 180px; }
.field-install-banner__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.field-install-banner__hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.field-install-banner__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.field-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--on-ink);
  border: none;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
}
.field-install-btn:hover, .field-install-btn:active { background: var(--accent); color: var(--on-accent); }
.field-install-btn .ms { font-size: 18px; }
.field-install-btn--block { width: 100%; justify-content: center; margin-top: 18px; }
.field-install-dismiss {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
}
.field-install-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(17, 17, 18, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.field-install-sheet {
  background: var(--bg-card);
  border-radius: 16px 16px 14px 14px;
  width: min(440px, 100%);
  padding: 22px 20px 18px;
  box-shadow: 0 18px 50px var(--shadow);
  color: var(--ink);
}
.field-install-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.field-install-sheet__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.field-install-sheet__sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.field-install-sheet__close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
}
.field-install-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
}
.field-install-steps li { margin-bottom: 8px; }

/* ---------- Access cards (mobile) ---------- */
.access-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.access-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--ink);
}
.access-card__head { margin-bottom: 12px; }
.access-card__qa {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.access-iam-proj-list {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;
  margin-bottom: 12px;
}
.access-iam-proj {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-5);
  cursor: pointer;
  font-size: 13px;
}
.access-iam-proj:last-child { border-bottom: none; }
.access-iam-proj input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
.access-iam-proj-list--exclude {
  border-color: color-mix(in srgb, var(--danger-ink) 22%, var(--border));
  background: color-mix(in srgb, var(--danger-ink) 4%, var(--bg-card, var(--bg-card)));
}
.access-iam-proj--exclude input:checked + span {
  color: #8A2A2A;
}
.access-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
}

/* ---------- EOD feed ---------- */
.sdb-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(17, 17, 18, 0.48);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  box-sizing: border-box;
}
.sdb-modal__panel {
  background: var(--bg-card, var(--bg-card));
  color: var(--ink, var(--text-1));
  border-radius: 16px;
  padding: 20px 22px;
  width: min(560px, 100%);
  max-height: calc(100vh - 24px);
  min-height: 0;
  overflow: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  margin: auto;
  box-sizing: border-box;
}
.sdb-modal__grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 901px) {
  .sdb-modal {
    padding: 28px 40px;
  }
  .sdb-modal__panel {
    width: min(980px, calc(100vw - 80px));
    max-height: calc(100vh - 56px);
    padding: 28px 32px 32px;
  }
  .sdb-modal__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-top: 20px;
  }
}

.eod-feed__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.eod-feed__intro {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--text-4);
}
.eod-feed__intro strong { color: var(--text-2); }
.eod-feed__toolbar-main {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.eod-feed__filter-label {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 5px;
}
.eod-feed__project-select,
.eod-feed__date-input,
.eod-feed__search {
  border: 1px solid var(--line-1);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  outline: none;
  min-height: 44px;
  background: var(--bg-card, var(--bg-card));
  box-sizing: border-box;
  font-family: inherit;
  color: var(--ink, var(--text-1));
}
.eod-feed__project-select {
  min-width: min(220px, 70vw);
  cursor: pointer;
}
.eod-feed__search {
  min-width: min(220px, 70vw);
  width: 100%;
}
.eod-feed__search-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: min(220px, 100%);
}
.eod-feed__search-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
}
.eod-feed__search-close .ms { font-size: 20px; }
.eod-feed__date-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.eod-feed__date-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}
.eod-feed__toolbar-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.eod-feed__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.eod-feed__icon-btn .ms { font-size: 20px; }
.eod-feed__icon-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] .eod-feed__icon-btn.is-active {
  background: #0e639c;
  border-color: #0e639c;
  color: #fff;
}
.eod-feed__icon-btn--wa {
  background: color-mix(in srgb, var(--success-ink-alt) 16%, var(--bg-card));
  border-color: color-mix(in srgb, var(--success-ink-alt) 35%, var(--border));
  color: #3DCE7A;
}
html[data-theme="light"] .eod-feed__icon-btn--wa {
  background: #EAF7EE;
  border-color: var(--success-line);
  color: var(--success-ink);
}
.eod-feed__icon-btn--gen {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.eod-feed__icon-btn--gen:hover,
.eod-feed__icon-btn--gen:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.eod-feed__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  color: var(--ink);
}
.eod-feed__card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 12px;
}
.eod-feed__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  width: 100%;
  margin-top: 2px;
}
.eod-feed__card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
  width: 100%;
}
.eod-feed__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  justify-content: flex-start;
}
.eod-feed__card-actions .list-icon-btn {
  min-width: 36px;
  width: auto;
  padding: 0 8px;
  gap: 3px;
}
.eod-feed__day {
  margin-bottom: 10px;
}
.eod-feed__day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 2px 10px;
  cursor: pointer;
  text-align: left;
}
.eod-feed__day-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.eod-feed__day-count {
  font-size: 12px;
  color: var(--muted);
}
.eod-feed__banner {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.eod-feed__status {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.eod-feed__card .ptl-collage {
  margin-top: 12px;
  max-height: none;
}
.eod-feed__card .ptl-collage--1 .ptl-collage__cell {
  aspect-ratio: 16 / 9;
  max-height: 280px;
}
.eod-feed__card .ptl-collage--2 .ptl-collage__cell {
  aspect-ratio: 4 / 3;
  max-height: 220px;
}
.eod-feed__card .ptl-collage--3,
.eod-feed__card .ptl-collage--4 {
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 340px;
}
.eod-feed__card .ptl-collage__cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.eod-feed__card .ptl-collage__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.eod-crew-list {
  border: 1px solid var(--line-6);
  border-radius: 10px;
  overflow: hidden;
}
.eod-crew-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-5);
}
.eod-crew-row:last-child { border-bottom: none; }
.eod-crew-row__name { font-weight: 600; font-size: 13px; }
.eod-crew-row__alias { font-size: 11px; color: var(--text-4); }
.eod-crew-row__hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
}
.eod-crew-row__tasks { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.eod-crew-total {
  padding: 10px 12px;
  background: var(--surface-1);
  font-size: 12.5px;
  font-weight: 700;
  border-top: 1px solid var(--line-6);
}

/* EOD compose — crew hours (responsive) */
.eod-compose-crew-head,
.eod-compose-crew-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr) minmax(0, 0.75fr) auto;
  gap: 6px;
  align-items: center;
}
.eod-compose-crew-head {
  font-size: 11px;
  color: var(--text-7);
  margin-bottom: 10px;
  font-weight: 700;
}
.eod-compose-crew-row {
  margin-bottom: 8px;
}
.eod-compose-crew-lbl {
  display: none;
}
.eod-compose-crew-cell {
  min-width: 0;
}
.eod-compose-crew-cell input {
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.eod-compose-crew-cell input[type="time"] {
  padding: 8px 6px;
}
.eod-compose-crew-paid {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
  min-width: 48px;
  text-align: right;
  white-space: nowrap;
}
.eod-compose-crew-remove {
  grid-column: 1 / -1;
  justify-self: start;
  border: none;
  background: none;
  color: var(--danger-ink-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .eod-compose-crew-head {
    display: none;
  }
  .eod-compose-crew-row {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "name name name"
      "start end paid"
      "remove remove remove";
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--surface-1);
    align-items: end;
  }
  .eod-compose-crew-cell--name { grid-area: name; }
  .eod-compose-crew-cell--start { grid-area: start; }
  .eod-compose-crew-cell--end { grid-area: end; }
  .eod-compose-crew-cell--paid { grid-area: paid; }
  .eod-compose-crew-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-7);
    margin-bottom: 4px;
  }
  .eod-compose-crew-paid {
    text-align: left;
    padding-bottom: 8px;
  }
  .eod-compose-crew-remove {
    margin-top: 4px;
  }
}

/* ---------- Email send log ---------- */
.email-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.email-log-card {
  border-bottom: 1px solid var(--line-7);
  cursor: pointer;
}
.email-log-card__main {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.4fr) minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
}
.email-log-card__subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.35;
}
.email-log-card__when { font-size: 12px; color: var(--text-4); }
.email-log-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-4);
  margin-right: 6px;
}

@media (max-width: 900px) {
  .access-cards.mobile-only {
    display: flex !important;
  }
  .access-intro {
    font-size: 12.5px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .eod-feed__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
  }
  .eod-feed__toolbar-main {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .eod-feed__filter--project {
    width: 100%;
  }
  .eod-feed__project-select {
    width: 100%;
    min-width: 0;
  }
  .eod-feed__toolbar-icons {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .eod-feed__toolbar-icons::-webkit-scrollbar { display: none; }
  .eod-feed__icon-btn__label { display: none; }
  .eod-feed__icon-btn { padding: 0; width: 44px; flex-shrink: 0; }
  label.eod-feed__date-btn.mobile-only { display: inline-flex !important; }
  .eod-feed__search-wrap {
    display: none;
    width: 100%;
    min-width: 0;
    align-items: center;
  }
  .eod-feed__search-wrap.is-open {
    display: flex;
  }
  .eod-feed__search-close {
    display: inline-flex;
  }
  .eod-feed__status {
    font-size: 12px;
    line-height: 1.35;
  }
  /* Facebook-style full-bleed feed cards on phone */
  .page.eod-feed {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .eod-feed__banner,
  .eod-feed__status,
  .eod-sa-tools,
  .eod-feed__day-head {
    margin-left: 14px;
    margin-right: 14px;
  }
  .eod-feed__day-head {
    margin-left: 0;
    margin-right: 0;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 14px;
    padding-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
  }
  .eod-feed__day {
    margin-bottom: 4px;
  }
  .eod-feed__card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-color: var(--line-2);
    padding: 14px 14px 16px;
    margin: 0 0 8px;
  }
  .eod-feed__card-title {
    font-size: 15px;
  }
  .eod-feed__card-actions {
    margin-top: 10px;
    padding-top: 8px;
    gap: 6px;
  }
  .eod-feed__card-actions .list-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
  }
  .eod-crew-table { display: none !important; }
  .email-log-card__main {
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px;
  }
  .email-log-card__when-desk,
  .email-log-card__recipients-desk,
  .email-log-head { display: none !important; }
  .email-log-card__subject {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .email-log-card__status { grid-column: 2; grid-row: 1; justify-self: end; }
  .email-log-card__meta {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.4;
  }
}
@media (min-width: 901px) {
  .eod-crew-list { display: none !important; }
}

/* Help & Feedback */
.desktop-topnav__icon-btn.is-on { color: var(--accent); }
.fb-page { max-width: none; width: 100%; }
.fb-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.fb-cta-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .fb-cta-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fb-cta-grid { grid-template-columns: 1fr; }
}
.fb-cta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
}
.fb-cta .ms { font-size: 28px; color: var(--accent); margin-top: 2px; }
.fb-cta--idea .ms { color: var(--amber-ink-5); }
.fb-cta strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.fb-cta span:last-child { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.fb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.fb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.fb-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--bg-soft);
  color: var(--ink);
  outline: none;
}
.fb-input:focus { border-color: var(--accent); background: var(--bg-card); }
.fb-textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.fb-msg {
  background: var(--success-wash);
  color: var(--success-ink);
  border: 1px solid var(--success-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-item {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
}
.fb-item.is-open { border-color: var(--border); box-shadow: 0 1px 0 var(--shadow); }
.fb-item .fb-row {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
}
.fb-item__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-soft);
  margin-top: -2px;
  padding-top: 14px;
}
.fb-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 14px;
  font-size: 13.5px;
}
.fb-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  text-transform: capitalize;
}
.fb-type {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  background: var(--chip-bg);
  color: var(--muted);
}
.fb-type--fault { background: var(--danger-wash); color: var(--danger-ink); }
.fb-type--improvement { background: var(--amber-wash-2); color: var(--amber-ink-5); }
.fb-platform {
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  background: #EEF2FF;
  color: #4338CA;
}
.fb-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fb-thumb-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}
.fb-thumb {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: block;
  padding: 0;
  background: var(--surface-3);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fb-thumb-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: var(--bg-card);
  color: var(--danger-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.fb-thumb-del .ms { font-size: 14px; }
.fb-thumb-del:hover { background: var(--danger-wash); }
.fb-attach-names {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, var(--grey-16));
  line-height: 1.35;
  word-break: break-word;
}
.fb-attach-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, var(--text-7));
}
.fb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(17, 17, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.fb-lightbox__img {
  max-width: 95vw;
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.fb-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-fill);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-lightbox__close .ms { font-size: 22px; }
.fb-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-fill);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.fb-lightbox__nav .ms { font-size: 28px; }
.fb-lightbox__nav--prev { left: 12px; }
.fb-lightbox__nav--next { right: 12px; }
.fb-lightbox__count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.fb-admin-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.fb-admin-btn--ok { background: var(--success-ink-alt); color: var(--on-fill); border-color: var(--success-ink-alt); }
.fb-admin-btn--danger { color: var(--danger-ink); }
.fb-admin-btn--mute { color: var(--text-3); }

/* Public issues board */
.fb-board-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-2));
  border-radius: 12px;
}
.fb-board-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--muted, var(--text-3));
  cursor: pointer;
}
.fb-board-tab strong { font-weight: 800; color: var(--ink, var(--text-1)); }
.fb-board-tab.is-active {
  background: var(--success-wash);
  border-color: #B7E0C7;
  color: var(--success-ink-alt);
}
.fb-board-tab.is-active strong { color: var(--success-ink-alt); }
.fb-board-meta {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted, var(--text-3));
}
.fb-board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
}
.fb-issue-list {
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-2));
  border-radius: 12px;
  overflow: hidden;
}
.fb-issue-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--border, var(--line-5));
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.fb-issue-row:last-child { border-bottom: none; }
.fb-issue-row.is-active { background: #F7FAFF; }
.fb-issue-status { font-size: 20px; margin-top: 1px; }
.fb-issue-status.is-open { color: var(--success-ink-alt); }
.fb-issue-status.is-closed { color: #8A5AC8; }
.fb-issue-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink, var(--text-1));
  line-height: 1.35;
}
.fb-issue-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, var(--text-4));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fb-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  color: var(--ink, var(--grey-16));
}
.fb-author__name {
  font-size: inherit;
  font-weight: 700;
  color: inherit;
}
.fb-issue-meta .fb-author__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, var(--grey-16));
}
.fb-drawer__author {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted, var(--text-4));
}
.fb-drawer__when { color: var(--muted, var(--text-4)); }
.fb-triage-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fb-comments { margin-top: 8px; }
.fb-comment {
  padding: 12px 0;
  border-bottom: 1px solid var(--border, var(--line-5));
}
.fb-comment__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted, var(--text-4));
  margin-bottom: 8px;
}
.fb-comment__head .fb-author__name { font-size: 13px; }
.fb-comment__when { color: var(--muted, var(--text-4)); }
.fb-comment__del {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--danger-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.fb-comment__body {
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--ink, var(--grey-16));
  margin-left: 36px;
}
.fb-comment__body.is-html,
.fb-comment__body.md {
  white-space: normal;
}
.fb-comment__body.is-html ul,
.fb-comment__body.is-html ol {
  margin: 0 0 8px;
  padding-left: 1.4em;
}
.fb-comment__body.is-html a { color: var(--info-ink); }
.fb-comment__body.is-html p { margin: 0 0 0.6em; }
.fb-comment__body.is-html p:last-child { margin-bottom: 0; }
.fb-comment__thumbs {
  margin-top: 8px;
}
.fb-comment__thumbs .fb-thumb-wrap,
.fb-comment__thumbs .fb-thumb {
  width: 140px;
  height: 140px;
}
.fb-wysiwyg {
  border: 1px solid var(--line-1);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-card);
}
.fb-wysiwyg__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--line-5);
  background: var(--surface-1);
}
.fb-wysiwyg__btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-1);
  background: var(--bg-card);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.fb-wysiwyg__btn:hover { background: var(--surface-2); }
#fb-comment-editor {
  min-height: 120px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  outline: none;
  color: var(--text-1);
  -webkit-user-select: text;
  user-select: text;
}
#fb-comment-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-10);
  pointer-events: none;
}
#fb-comment-editor ul,
#fb-comment-editor ol { margin: 0 0 8px; padding-left: 1.4em; }
#fb-comment-editor a { color: var(--info-ink); }
#fb-comment-editor p { margin: 0 0 0.6em; }
/* Paste from Docs, Word, or a dark app often arrives as white text. Force ink
   so it cannot disappear on the white comment box. */
#fb-comment-editor,
#fb-comment-editor * {
  color: var(--text-1) !important;
  -webkit-text-fill-color: #17171A !important;
  background: transparent !important;
  background-color: transparent !important;
}
#fb-comment-editor a,
#fb-comment-editor a * {
  color: var(--info-ink) !important;
  -webkit-text-fill-color: #245BBF !important;
}
#fb-comment-editor:empty:before {
  color: var(--text-10) !important;
  -webkit-text-fill-color: #B0B0AA !important;
  background: transparent !important;
}
/* Shared WYSIWYG (Tendering document copy, etc.) */
.wysiwyg {
  border: 1px solid var(--border, var(--line-1));
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-card, var(--bg-card));
}
.wysiwyg__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--line-5);
  background: var(--surface-1);
}
.wysiwyg__btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-1);
  background: var(--bg-card);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.wysiwyg__btn:hover { background: var(--surface-2); }
.wysiwyg__editor {
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  outline: none;
  color: var(--ink, var(--text-1));
  -webkit-user-select: text;
  user-select: text;
}
.wysiwyg__editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-10);
  pointer-events: none;
}
.wysiwyg__editor ul,
.wysiwyg__editor ol { margin: 0 0 8px; padding-left: 1.4em; }
.wysiwyg__editor a { color: var(--info-ink); }
.wysiwyg__editor p { margin: 0 0 0.6em; }
.wysiwyg__editor p:last-child { margin-bottom: 0; }
.fb-comment__body strong {
  font-weight: 700;
  color: inherit;
}
.fb-issue-eng {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted, var(--text-4));
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
}
.fb-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, var(--text-4));
  margin: 18px 0 8px;
}
.fb-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fb-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.35);
  /* Above the desktop top bar (z-index 200), or the title and close sit under it. */
  z-index: 240;
  display: flex;
  justify-content: flex-end;
}
.fb-drawer {
  width: min(840px, 100%);
  height: 100%;
  background: var(--bg-card, var(--bg-card));
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-drawer__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border, var(--line-4));
}
.fb-drawer__head-main {
  min-width: 0;
  flex: 1;
  padding-right: 44px;
}
.fb-drawer__close {
  flex-shrink: 0;
  border: none;
  background: var(--surface-3);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, var(--text-1));
}
.fb-drawer__close .ms { font-size: 20px; }
.fb-drawer__body {
  padding: 16px 20px 28px;
  overflow: auto;
  flex: 1;
  -webkit-overflow-scrolling: auto;
}
@media (max-width: 900px) {
  .fb-drawer-backdrop { z-index: 240; }
  .fb-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card, var(--bg-card));
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-right: 16px;
  }
  .fb-drawer__head-main { padding-right: 48px; }
  .fb-drawer__close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: 14px;
    width: 40px;
    height: 40px;
    background: var(--bg-soft, var(--surface-3));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
}
@media (max-width: 720px) {
  .fb-board-meta { width: 100%; margin-left: 0; }
  .fb-thumb-wrap,
  .fb-thumb {
    width: 132px;
    height: 132px;
  }
  .fb-comment__thumbs .fb-thumb-wrap,
  .fb-comment__thumbs .fb-thumb {
    width: 160px;
    height: 160px;
  }
  .fb-thumb-del {
    width: 36px;
    height: 36px;
    top: 6px;
    right: 6px;
  }
}

.fb-leaderboard {
  margin-top: 10px;
}
.fb-me-badges {
  margin-top: 12px;
}
.fb-me-badges,
.fb-leaderboard {
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-2));
  border-radius: 12px;
  padding: 12px 14px;
}
.fb-me-badges__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fb-me-badges__title,
.fb-leaderboard__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, var(--text-1));
}
.fb-leaderboard__title {
  margin-bottom: 8px;
}
.fb-me-badges__title .ms,
.fb-leaderboard__title .ms {
  font-size: 18px;
}
.fb-me-badges__stats {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, var(--text-4));
}
.fb-me-badges__row,
.fb-leaderboard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-me-badges__empty {
  font-size: 12.5px;
  color: var(--muted, var(--text-4));
}
.fb-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F3F1EA;
  border: 1px solid #E4DFD2;
  color: #5C5346;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}
.fb-badge--mine {
  background: #EEF5FF;
  border-color: #C9DBF5;
  color: #2F5FAF;
}
.fb-leaderboard__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb-leaderboard__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.fb-leaderboard__rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-4);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fb-leaderboard__person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fb-leaderboard__main {
  min-width: 0;
}
.fb-leaderboard__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, var(--text-1));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-leaderboard__main strong {
  font-size: 13px;
  color: var(--ink, var(--text-1));
}
.fb-leaderboard__score {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, var(--text-4));
  white-space: nowrap;
}
.fb-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 2px;
  font-size: 12.5px;
  color: var(--muted, var(--text-4));
}
.fb-pager__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fb-pager__btn {
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border, var(--line-1));
  border-radius: 8px;
  background: var(--bg-card, var(--bg-card));
  color: var(--ink, var(--text-1));
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.fb-pager__btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.fb-pager__btn.is-active {
  background: var(--fill-strong);
  border-color: var(--fill-strong);
  color: var(--on-fill);
}

/* Schedule crew pool — crisp selected avatar ring (avoid jagged box-shadow rings) */
.sch-crew-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 56px;
  cursor: grab;
  user-select: none;
  position: relative;
}
.sch-crew-chip__name {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--on-fill) 85%, transparent);
  text-align: center;
  line-height: 1.15;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-crew-av {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sch-crew-av__face {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.sch-crew-av__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.sch-crew-av__face > .person-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  overflow: hidden;
}
.sch-crew-av__face > .person-avatar img {
  width: 100%;
  height: 100%;
}
/* Initials circle (personAvatarHtml) — restore flex after any inline width/height */
.sch-crew-av__face > div.person-avatar--initials,
.sch-crew-av__face > div {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  box-sizing: border-box;
  /* Optical center — Montserrat caps sit high in the em-box */
  padding-top: 1px;
}
.sch-crew-av.is-selected .sch-crew-av__face {
  box-shadow: inset 0 0 0 1.5px var(--fill-strong);
}
.sch-crew-av__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--orange-ink);
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  box-sizing: border-box;
}
.sch-crew-av__check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--orange-ink);
  color: var(--on-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--fill-strong);
  box-sizing: border-box;
  transform: translateZ(0);
}

/* Schedule / My Schedule hover detail tip */
.sch-hover-host {
  position: relative;
}
.sch-tip {
  position: fixed;
  z-index: 240;
  width: min(320px, calc(100vw - 20px));
  padding: 12px 14px;
  border-radius: 12px;
  background: #1B2430;
  color: #F2F4F7;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: auto;
}
.sch-tip[hidden] { display: none !important; }
.sch-tip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.sch-tip__pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.2;
}
.sch-tip__pill--muted {
  background: #3A4656;
  color: #E8ECF1;
}
.sch-tip__pill--gold {
  background: #5C4A18;
  color: #F5D76E;
}
.sch-tip__pill--ok {
  background: #1E4D34;
  color: #8FE3B0;
}
.sch-tip__pill--warn {
  background: #5C3D12;
  color: #F0C27A;
}
.sch-tip__pill--bad {
  background: #5C2222;
  color: #F2A0A0;
}
.sch-tip__pill--wfh {
  background: var(--navy-ink);
  color: #BFD7F2;
}
.sch-tip__title {
  font-weight: 700;
  font-size: 13.5px;
  margin: 0 0 8px;
  color: var(--on-dark);
}
.sch-tip__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 7px;
  color: #D7DCE3;
}
.sch-tip__row--desc {
  white-space: pre-wrap;
  color: #C5CBD4;
}
.sch-tip__ico {
  font-size: 16px;
  line-height: 1.2;
  color: #9AA3AF;
  flex-shrink: 0;
}
.sch-tip__time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #243041;
  border-left: 3px solid #E8C547;
  color: #F2F4F7;
  font-weight: 600;
}
.sch-tip__time-range {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  flex: 1;
  min-width: 0;
}
.sch-tip__dur {
  font-size: 11.5px;
  font-weight: 700;
  color: #C5CBD4;
  white-space: nowrap;
}

/* Unified dark calendar day headers (Schedule Project/Crew + My schedule) */
.sch-cal-dayhead-wrap {
  background: var(--fill-strong);
  color: var(--on-fill);
}
.sch-cal-dayhead-wrap.is-today {
  background: var(--orange-ink);
}
.sch-cal-dayhead {
  background: var(--fill-strong);
  color: var(--on-fill);
  padding: 10px 8px;
  text-align: left;
  cursor: pointer;
}
.sch-cal-dayhead.is-today,
.sch-cal-dayhead-wrap.is-today .sch-cal-dayhead {
  background: var(--orange-ink);
}
.sch-cal-dayhead-wrap .sch-cal-dayhead {
  background: transparent;
}
.sch-cal-dayhead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.sch-cal-dayhead__label {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.sch-cal-dayhead__count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
  flex-shrink: 0;
}
.sch-cal-dayhead__btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 8px;
  font: inherit;
}
.sch-timed-bar,
.sch-cal-bar__title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-shadow: none;
}
.sch-timed-bar {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.2;
}
.sch-cal-bar__title {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Crew week sticky dayheads — align with unified dark header */
.sch-crew-week-dayhead.sch-cal-dayhead {
  background: var(--fill-strong);
  color: var(--on-fill);
  padding: 0;
}
.sch-crew-week-dayhead.sch-cal-dayhead.is-today {
  background: var(--orange-ink);
}
.sch-crew-week-dayhead .sch-cal-dayhead__label {
  color: var(--on-fill);
}

.sch-crew-week {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.sch-crew-week-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sch-crew-week-table th,
.sch-crew-week-table td {
  box-sizing: border-box;
}
.sch-crew-week-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
  min-width: 176px;
  max-width: 200px;
}
.sch-crew-week-sticky--head {
  top: 0;
  z-index: 3;
  background: var(--fill-strong);
  color: var(--on-fill);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-16);
}
.sch-crew-week-dayhead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fill-strong);
  color: var(--on-fill);
  text-align: left;
  padding: 8px;
  font-weight: 700;
  border-bottom: 1px solid var(--grey-16);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.sch-crew-week-dayhead.is-today {
  background: var(--orange-ink);
}
.sch-crew-week-rulerhead {
  top: auto;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sch-crew-week-daybtn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.sch-crew-week-dow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.sch-crew-week-dom {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  margin-top: 2px;
}
.sch-crew-week-cell {
  vertical-align: top;
  padding: 5px 6px 8px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border-soft);
}
.sch-crew-week-empty {
  min-height: 40px;
  border: 1.5px dashed transparent;
  border-radius: 6px;
}
.sch-crew-week-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sch-crew-week-person__meta {
  min-width: 0;
}
.sch-crew-week-person__name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-crew-week-person__ini {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}
.sch-crew-week-row.is-selected .sch-crew-week-sticky {
  box-shadow: inset 3px 0 0 var(--success-ink);
}
.sch-crew-week-block {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  color: var(--on-dark) !important;
  text-shadow: none;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.2;
}
.sch-crew-week-block__site {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  opacity: 1 !important;
  color: var(--on-dark) !important;
}
.sch-crew-week-block__sub {
  font-size: 10px;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  opacity: 0.95;
  color: var(--on-dark) !important;
}
.sch-crew-week-block__time {
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 2px;
  opacity: 1 !important;
  color: var(--on-dark) !important;
}
.sch-crew-week-cell {
  padding-left: 4px;
  padding-right: 4px;
}
@media (max-width: 900px) {
  .sch-crew-week {
    max-height: none;
  }
}

/* Schedule Crew Map */
.sch-map-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: min(62vh, 640px);
  height: calc(100vh - 260px);
  max-height: 720px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background: #E8EEE8;
}
.sch-map-canvas-wrap:fullscreen,
.sch-map-canvas-wrap:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 100%;
  border: none;
  border-radius: 0;
  background: #E8EEE8;
}
.sch-map-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--text-1);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sch-map-fs-btn:hover,
.sch-map-fs-btn:focus-visible {
  background: #F3F3EE;
  border-color: #A8A8A0;
  outline: none;
}
.sch-map-fs-btn[aria-pressed="true"] {
  background: var(--fill-strong);
  border-color: var(--fill-strong);
  color: var(--on-fill);
}
.sch-map-fs-btn .ms {
  font-size: 18px;
  line-height: 1;
}
.sch-map-canvas-wrap .sch-tip {
  z-index: 1200;
}
.sch-map-canvas {
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Hours map — contain Leaflet panes so they don't steal clicks from nav/toolbar */
.page--hours-map .hours-map-toolbar {
  position: relative;
  z-index: 2;
}
.hours-map-wrap {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: min(70vh, 560px);
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: #E8EEF5;
  overflow: hidden;
}
.hours-map-canvas {
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sch-map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  z-index: 2;
}
.sch-map-overlay--soft {
  background: rgba(250, 250, 247, 0.82);
}
.sch-map-marker {
  background: transparent !important;
  border: none !important;
}
.sch-map-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2.5px solid var(--on-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: default;
  box-sizing: border-box;
  color: var(--on-fill);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  user-select: none;
}
.sch-map-bubble__count {
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.sch-map-unpinned {
  background: var(--bg-card);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 12px;
}
.sch-map-unpinned__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.sch-map-unpinned__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sch-map-unpinned__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #D4D4CC;
  border-radius: 8px;
  background: var(--surface-1);
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text-1);
}
.sch-map-unpinned__item:hover {
  border-color: var(--orange-ink);
  background: var(--orange-wash);
}
.sch-map-unpinned__name {
  font-size: 12.5px;
  font-weight: 700;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-map-unpinned__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
@media (max-width: 900px) {
  .sch-layout--map {
    grid-template-columns: 1fr !important;
  }
  .sch-map-canvas-wrap {
    height: min(55vh, 480px);
    min-height: 320px;
  }
}

/* QA square thumbs + uncropped hover preview */
.qa-sq-thumb {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-4);
  flex-shrink: 0;
  box-sizing: border-box;
}
.qa-sq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--surface-4);
}
.qa-finding-media__inner {
  width: 100%;
  height: 100%;
}
.qa-finding-media__inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--surface-4);
}
.qa-img-tip {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(23, 23, 26, 0.18);
  line-height: 0;
  max-width: min(420px, 92vw);
  max-height: min(70vh, 520px);
}
.qa-img-tip img {
  display: block;
  max-width: min(400px, calc(92vw - 12px));
  max-height: min(65vh, 500px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* Project Detail — Facebook-style timeline */
.ptl {
  max-width: 680px;
  margin: 0 auto;
}
.ptl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ptl-toolbar__hint {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  color: var(--text-4);
}
.ptl-toolbar__spacer {
  flex: 1;
  min-width: 0;
}
.ptl-toolbar__main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.ptl-toolbar__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ptl-toolbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border, var(--line-3));
  border-radius: 10px;
  background: var(--bg-card, var(--bg-card));
  color: var(--ink, var(--text-1));
  cursor: pointer;
  flex-shrink: 0;
}
.ptl-toolbar__icon-btn .ms { font-size: 20px; }
.ptl-toolbar__icon-btn.is-active {
  background: var(--ink, var(--fill-strong));
  border-color: var(--ink, var(--fill-strong));
  color: var(--bg, var(--on-fill));
}
html[data-theme="dark"] .ptl-toolbar__icon-btn.is-active {
  background: #0e639c;
  border-color: #0e639c;
  color: #fff;
}
.ptl-date-btn {
  position: relative;
  overflow: hidden;
}
.ptl-filter-date-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}
.ptl-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: min(220px, 100%);
}
.ptl-search-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border, var(--line-3));
  border-radius: 10px;
  background: var(--bg-card, var(--bg-card));
  color: var(--ink, var(--text-1));
  cursor: pointer;
}
.ptl-search-close .ms { font-size: 20px; }
.ptl-filter-date {
  border: 1px solid var(--line-3);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text-1);
  min-height: 36px;
}
.ptl-filter-q {
  border: 1px solid var(--line-3);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-1);
  min-width: 160px;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}
.ptl-filter-q:focus,
.ptl-filter-date:focus {
  outline: none;
  border-color: #B8B8B0;
}
@media (max-width: 900px) {
  .ptl-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }
  .ptl-toolbar__spacer,
  .ptl-toolbar__hint {
    display: none;
  }
  .ptl-toolbar__main {
    width: 100%;
    justify-content: flex-end;
  }
  .ptl-toolbar__icons {
    width: 100%;
    justify-content: flex-end;
  }
  label.ptl-toolbar__icon-btn.mobile-only {
    display: inline-flex !important;
  }
  .ptl-search-wrap {
    display: none;
    width: 100%;
    min-width: 0;
  }
  .ptl-search-wrap.is-open {
    display: flex;
  }
  .ptl-search-close {
    display: inline-flex;
  }
}
.ptl-day {
  margin-bottom: 22px;
}
.ptl-day__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin: 0 0 12px 4px;
}
.ptl-day__feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ptl-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 14px 16px 16px;
}
.ptl-card__rail {
  display: none;
}
.ptl-card__dot {
  display: none;
}
.ptl-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ptl-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.ptl-card__head-text {
  flex: 1;
  min-width: 0;
}
.ptl-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-1);
}
.ptl-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
}
.ptl-card__when {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 2px;
}
.ptl-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-top: 10px;
  line-height: 1.35;
}
.ptl-card__text {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 6px;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ptl-card__footer {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 10px;
}
.ptl-card__project {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--ptl-proj, var(--fill-strong)) 22%, var(--line-2));
  background: color-mix(in srgb, var(--ptl-proj, var(--fill-strong)) 8%, var(--bg-card));
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  max-width: 100%;
}
.ptl-card__project-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--on-fill);
  background: var(--ptl-proj, var(--fill-strong));
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.ptl-card__project-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptl-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ptl-avatar-stack > * {
  margin-left: -10px;
  border: 2px solid var(--on-dark);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ptl-avatar-stack > *:first-child {
  margin-left: 0;
}
.ptl-avatar-stack__more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.ptl-people {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ptl-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--line-4);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
}
.ptl-person__detail {
  color: var(--text-4);
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  white-space: nowrap;
}
.ptl-person__wfh {
  font-size: 10px;
  font-weight: 800;
  color: #7E22CE;
  background: #F3E8FF;
  border-radius: 6px;
  padding: 1px 6px;
}
.ptl-collage {
  margin-top: 12px;
  display: grid;
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-5);
  max-height: 420px;
}
.ptl-collage--1 {
  grid-template-columns: 1fr;
}
.ptl-collage--1 .ptl-collage__cell {
  aspect-ratio: 16 / 10;
  max-height: 420px;
}
.ptl-collage--2 {
  grid-template-columns: 1fr 1fr;
}
.ptl-collage--2 .ptl-collage__cell {
  aspect-ratio: 1 / 1;
  max-height: 280px;
}
.ptl-collage--3 {
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: min(360px, 52vw);
}
.ptl-collage--3 .ptl-collage__cell:first-child {
  grid-row: 1 / 3;
}
.ptl-collage--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: min(360px, 56vw);
}
.ptl-collage__cell {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  margin: 0;
  background: var(--surface-4);
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}
.ptl-collage__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ptl-collage__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 26, 0.48);
  color: var(--on-fill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.02em;
}
.ptl-empty {
  background: var(--bg-card);
  border: 1px dashed var(--line-3);
  border-radius: 14px;
  padding: 40px 22px;
  text-align: center;
  color: var(--text-4);
  font-size: 13.5px;
}
.ptl-lightbox {
  position: fixed;
  inset: 0;
  /* Above desktop top nav (200); same band as Photos / Chat lightboxes. */
  z-index: 210;
  background: rgba(17, 17, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.ptl-lightbox__img {
  max-width: 95vw;
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.ptl-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-fill);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptl-lightbox__close .ms { font-size: 22px; }
.ptl-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-fill);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.ptl-lightbox__nav .ms { font-size: 28px; }
.ptl-lightbox__nav--prev { left: 12px; }
.ptl-lightbox__nav--next { right: 12px; }
.ptl-lightbox__count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
  .ptl { max-width: none; }
  .ptl-collage--3,
  .ptl-collage--4 {
    height: 280px;
  }
  .ptl-collage__more { font-size: 22px; }
}

/* ---- Leave Management ---- */
.leave-page { max-width: 1200px; }
.leave-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.leave-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.leave-tab.is-active {
  background: var(--fill-strong);
  border-color: var(--fill-strong);
  color: var(--on-fill);
}
html[data-theme="dark"] .leave-tab.is-active {
  background: #0e639c;
  border-color: #0e639c;
  color: var(--on-dark);
}
.leave-tab .ms { font-size: 16px; }
.leave-banner {
  background: color-mix(in srgb, var(--info-ink) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--info-ink) 28%, var(--bg-card));
  color: var(--info-ink);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
}
html[data-theme="dark"] .leave-banner { color: #9cc3f0; }
.leave-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.leave-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.leave-filter select,
.leave-search,
.leave-field select,
.leave-field input,
.leave-field textarea {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--ink);
}
.leave-search { min-width: 180px; }
.leave-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.leave-btn .ms { font-size: 16px; }
.leave-btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.leave-btn--primary:hover, .leave-btn--primary:active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.leave-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--ink); }
.leave-btn--ok { background: var(--success-ink-alt); color: var(--on-fill); }
.leave-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.leave-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: auto;
}
/* The global `select { appearance: none }` clips this menu on macOS: the open
   list stops after the first line, so "All tenders" hides the projects under it. */
.tdr-native-select {
  appearance: auto;
  -webkit-appearance: menulist;
  line-height: normal;
}
.tdr-proj-filter {
  appearance: auto;
  -webkit-appearance: menulist;
  width: 320px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 13px;
  line-height: normal;
}
.tdr-sent-total td { background: var(--bg-soft); }
/* Tender rating on the list. Same ladder as a game tier list: S gold, then purple, blue, green, stone. */
.tdr-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
}
.tdr-tier--s { background: #F5C451; color: #3A2A00; }
.tdr-tier--a { background: #7C3AED; color: #fff; }
.tdr-tier--b { background: #2563EB; color: #fff; }
.tdr-tier--c { background: #059669; color: #fff; }
.tdr-tier--d { background: #78716C; color: #fff; }
.tdr-tier--na { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); }
.tdr-sent-est-pick {
  appearance: auto;
  -webkit-appearance: menulist;
  width: 100%;
  max-width: 200px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: normal;
}
.leave-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.leave-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Tender list, Tender Intelligence and Follow-ups. --bg-soft is the page colour,
   so muted titles disappeared into it. Ink on the chip fill, with a stronger
   rule underneath. The :root .shell form beats a template's table-header rule. */
.tdr-list thead th,
.ti-table thead th,
.sf-table thead th,
:root .shell .tdr-list thead th,
:root .shell .ti-table thead th,
:root .shell .sf-table thead th {
  color: var(--ink);
  background: var(--chip-bg);
  border-bottom: 1px solid var(--line-strong, var(--border));
}
.leave-table th.leave-th--sortable {
  cursor: pointer;
  user-select: none;
}
.leave-table th.leave-th--sortable:hover {
  color: var(--ink);
}
.leave-sort-mark {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.45;
  font-weight: 700;
}
.leave-sort-mark--active {
  opacity: 1;
  color: var(--ink);
}
.leave-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.leave-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.leave-cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: color-mix(in srgb, var(--lc, #E8A87C) 22%, var(--bg-card));
  border-radius: 999px;
  padding: 3px 9px;
}
.leave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.leave-table tbody tr.leave-row--clickable {
  cursor: pointer;
}
.leave-table tbody tr.leave-row--clickable:hover {
  background: var(--bg-soft);
}
.leave-empty {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.leave-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.leave-cal-scroll {
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.leave-cal {
  border-collapse: collapse;
  min-width: 900px;
  width: 100%;
  font-size: 11px;
}
.leave-cal th,
.leave-cal td {
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  min-width: 28px;
  height: 36px;
  text-align: center;
  padding: 0;
}
.leave-cal th.is-weekend,
.leave-cal td.is-weekend { background: var(--chip-bg); }
.leave-cal__sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  min-width: 180px !important;
  text-align: left !important;
  padding: 6px 10px !important;
  border-right: 1px solid var(--border) !important;
}
.leave-cal__sticky.leave-cal__name { font-weight: 600; }
.leave-cal thead .leave-cal__sticky { background: var(--bg-soft); z-index: 3; }
.leave-cal__d { font-weight: 700; color: var(--ink); }
.leave-cal__wd { font-size: 9px; color: var(--muted-2); text-transform: uppercase; }
.leave-cal__bar {
  height: 18px;
  margin: 0 1px;
  border-radius: 4px;
}
.leave-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.leave-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
/* Generic modal — Tendering dialogs and the Subbie Pack document preview.
   The older .leave-modal-* pair below is kept for the Leave screen.

   Sizes (use one modifier on .modal-card):
     --sm  440px   loading, compact forms
     (base) 680px  default / medium
     --lg  1080px  mapping tables, wide pickers
     --xl  1280px  previews, multi-column data

   Modifiers: --flex (column body scroll), --flush (no padding, clip overflow) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.45);
  /* Above the desktop top bar (z-index 200), which otherwise cuts the head off
     any modal tall enough to reach it — the ABN lookup with a long match list
     lost its title and close button behind the nav. Below the signature pad and
     photo lightbox (210), which open from inside a modal, and below toasts
     (260) and the confirm dialog (270), which have to be readable over one. */
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}
.modal-card {
  --modal-width: 680px;
  width: min(var(--modal-width), 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  padding: 20px 22px;
}
.modal-card--sm { --modal-width: 440px; max-height: min(88vh, 720px); }
.modal-card--md { --modal-width: 680px; }
.modal-card--lg {
  --modal-width: 1080px;
  width: min(var(--modal-width), 96vw);
  max-height: min(88vh, 920px);
}
.modal-card--xl {
  --modal-width: 1280px;
  width: min(var(--modal-width), 97vw);
  max-height: min(92vh, 960px);
}
.modal-card--flex {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-card--flush {
  padding: 0;
  overflow: hidden;
}
@media (max-width: 620px) {
  .modal-backdrop { padding: 8px; align-items: flex-start; }
  .modal-card { padding: 16px; max-height: 94vh; }
  .modal-card--lg,
  .modal-card--xl { width: 100%; }
}
/* New / Edit form (core/editModal.js) — Users, CRM accounts, Projects.
   The .list-edit-panel inside keeps its markup; here it sits flat in the card. */
.edit-modal { position: relative; }
.edit-modal .list-edit-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.edit-modal .list-edit-panel > div:first-child { padding-right: 44px; font-size: 17px !important; }
.edit-modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--chip-bg);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.edit-modal__x:hover { color: var(--ink); }
.edit-modal__x .ms { font-size: 20px; }
/* Save / Cancel stay in reach on a long form. */
.edit-modal__foot {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  margin: 16px -22px -20px !important;
  padding: 12px 22px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 620px) {
  .edit-modal__foot { bottom: -16px; margin: 16px -16px -16px !important; padding: 12px 16px 14px; }
}

.leave-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.45);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.leave-modal {
  width: min(760px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
.leave-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.leave-modal__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}
.leave-modal__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 16px;
  padding: 16px 18px;
}
@media (max-width: 720px) {
  .leave-modal__grid { grid-template-columns: 1fr; }
}
.leave-field {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.leave-field > span { display: block; margin-bottom: 5px; }
.leave-field select,
.leave-field input,
.leave-field textarea { width: 100%; box-sizing: border-box; font-weight: 500; color: var(--ink); }
.leave-field__static {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 600;
}
.leave-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.leave-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.leave-doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed var(--border);
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.leave-doc-btn:hover { border-color: var(--muted-2); }
.leave-doc-btn .ms { font-size: 17px; }
.leave-doc-hint { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; }
.leave-doc-hint--ask { color: var(--amber-ink-5); }
.leave-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.leave-files--cell { margin: 0; max-width: 260px; }
.leave-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--ink);
}
.leave-file .ms { font-size: 15px; color: var(--muted); }
.leave-file__link { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.leave-file__link:hover .leave-file__name { text-decoration: underline; }
.leave-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.leave-file__size { color: var(--muted-2); font-size: 11px; }
.leave-file__x { border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; }
.leave-file__x .ms { font-size: 14px; }
.leave-file--new { border-style: dashed; }
.leave-file--missing { background: var(--amber-wash-2); border-color: #F3D9A6; color: var(--amber-ink-5); font-weight: 600; }
.leave-file--add { cursor: pointer; border-style: dashed; font-weight: 600; }
.leave-file--add:hover { border-color: var(--muted-2); }
.leave-modal__msg { margin-top: 10px; color: var(--danger-ink); font-size: 12.5px; }
.leave-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-soft);
}
.leave-balance-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg-soft);
  align-self: start;
}
.leave-balance-card__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  margin-bottom: 12px;
}
.leave-balance-card__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.leave-balance-card__meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}
.leave-balance-card__btn {
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.leave-balance-card__hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted-2);
  line-height: 1.35;
}

/* ---- One Box — single entry point (views/onebox.js) ---- */

.home-onebox { margin: 4px 0 18px; }
.home-onebox--dash { margin: 0 0 14px; }
.onebox-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: text;
  text-align: left;
  box-shadow: 0 1px 3px var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onebox-trigger:hover { border-color: var(--muted-2); box-shadow: 0 3px 10px var(--shadow); }
.onebox-trigger__icon { font-size: 20px; color: var(--muted-2); }
.onebox-trigger__ph { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.onebox-trigger__kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--bg-soft);
}
@media (max-width: 900px) {
  .onebox-trigger__kbd { display: none; }
}

.onebox-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(17, 17, 18, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 16px;
}
.onebox-panel {
  width: 100%;
  max-width: 620px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 78vh;
}
@media (max-width: 720px) {
  .onebox-overlay { padding: 4vh 10px 10px; }
  .onebox-panel { max-height: 86vh; }
}
.onebox-inputrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.onebox-inputrow__icon { font-size: 22px; color: var(--muted-2); flex-shrink: 0; }
.onebox-inputrow input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.onebox-inputrow__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.onebox-inputrow__close {
  width: 34px; height: 34px;
  border: none; border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.onebox-inputrow__close:hover { background: var(--bg-soft); }
.onebox-body { padding: 14px 16px 18px; overflow-y: auto; }
.onebox-section-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 4px 2px 8px;
}
.onebox-section-label + .onebox-section-label { margin-top: 12px; }
.onebox-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.onebox-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.onebox-chip:hover, .onebox-chip.is-first { border-color: var(--accent); background: var(--bg-card); }
.onebox-chip__icon { font-size: 21px; color: var(--accent); flex-shrink: 0; }
.onebox-chip__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.onebox-chip__label { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onebox-chip__hint { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onebox-muted { font-size: 13px; color: var(--muted); padding: 6px 2px 12px; }
.onebox-results { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.onebox-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.onebox-result:hover { background: var(--bg-soft); }
.onebox-result__icon { font-size: 19px; color: var(--muted); flex-shrink: 0; }
.onebox-result__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.onebox-result__title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onebox-result__sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.onebox-idea { display: flex; flex-direction: column; gap: 10px; }
.onebox-idea__types { display: flex; gap: 8px; }
.onebox-idea__type {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.onebox-idea__type .ms { font-size: 16px; }
.onebox-idea__type.is-on { border-color: var(--accent); color: var(--accent); background: var(--bg-card); }
.onebox-idea__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  background: var(--bg-soft);
  color: var(--ink);
}
.onebox-idea__input:focus { outline: none; border-color: var(--accent); }
.onebox-idea__desc { resize: vertical; min-height: 72px; line-height: 1.45; }
.onebox-idea__err { font-size: 12.5px; font-weight: 600; color: var(--danger-ink); }
.onebox-idea__row { display: flex; justify-content: flex-end; gap: 8px; }
.onebox-idea__btn {
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  min-height: 42px;
}
.onebox-idea__btn--ghost { background: var(--bg-card); color: var(--muted); border: 1px solid var(--border); }
.onebox-idea__btn--primary { background: var(--accent); color: var(--on-fill); }
.onebox-idea__btn--primary[disabled] { opacity: 0.6; cursor: default; }

.onebox-photos { display: flex; flex-direction: column; gap: 10px; }
.onebox-photos__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.onebox-photos__select { cursor: pointer; }
.onebox-photos__drop {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 12px;
}
.onebox-photos__cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  box-sizing: border-box;
}
.onebox-photos__cta .ms { font-size: 36px; color: var(--accent); }
.onebox-photos__cta-title { font-size: 15px; font-weight: 800; }
.onebox-photos__cta-sub { font-size: 12.5px; color: var(--muted); }
.onebox-photos__split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 8px 8px;
}
.onebox-photos__split--after {
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.onebox-photos__cam {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  box-sizing: border-box;
}
.onebox-photos__cam .ms { font-size: 16px; color: var(--accent); }
.onebox-photos__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.onebox-photos__thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}
.onebox-photos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.onebox-photos__rm {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: var(--on-fill);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.onebox-photos__rm .ms { font-size: 14px; }
.onebox-photos__addmore {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--bg-card);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.onebox-photos__addmore .ms { font-size: 22px; }
.onebox-photos__count {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.onebox-fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 22px;
  /* Above the Field dock (40) and the QA bottom bar (45/46), below every modal
     backdrop (70+). At 120 it floated on top of open dialogs. */
  z-index: 60;
  width: 56px; height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-fill);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(224, 27, 27, 0.38);
}
.onebox-fab .ms { font-size: 28px; }
@media (max-width: 900px) {
  .onebox-fab { display: flex; }
  /* Sit above the Field bottom dock */
  .shell--field .onebox-fab { bottom: 84px; }
}

/* ---- Ideal Ask ChatGPT composer (Phase 0) ---- */
.onebox-overlay--ask {
  align-items: flex-end;
  justify-content: center;
  padding: 8vh 16px max(16px, env(safe-area-inset-bottom));
}
@media (max-width: 720px) {
  body.onebox-open {
    overflow: hidden;
    touch-action: none;
  }
  .onebox-overlay--ask {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    top: var(--onebox-vv-top, 0);
    height: var(--onebox-vv-height, 100%);
    bottom: auto;
  }
  .onebox-panel--ask {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .onebox-body--ask {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .onebox-thread {
    max-height: none;
    flex: 1;
    min-height: 0;
  }
  #onebox-composer-host {
    flex-shrink: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .onebox-composer {
    margin: 0 12px 0;
  }
  .onebox-composer input {
    font-size: 16px;
  }
}
.onebox-panel--ask {
  width: min(720px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.onebox-ask-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.onebox-ask-close:hover { background: var(--bg-soft); color: var(--ink); }
.onebox-body--ask {
  flex: 1;
  min-height: 120px;
  padding: 28px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onebox-hero {
  text-align: center;
  font-size: 22px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  padding: 28px 12px 8px;
}
.onebox-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 48vh;
  padding: 4px 2px 8px;
}
.onebox-msg { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.onebox-msg--user { align-self: flex-end; }
.onebox-msg--assistant { align-self: flex-start; }
.onebox-msg__bubble {
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}
.onebox-msg--user .onebox-msg__bubble {
  background: var(--accent);
  color: var(--on-fill);
  border-bottom-right-radius: 6px;
}
.onebox-msg--assistant .onebox-msg__bubble {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.onebox-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.onebox-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.onebox-cite .ms { font-size: 14px; color: var(--accent); }
.onebox-cite__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.onebox-suggest { margin-top: 4px; }
.onebox-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 14px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--bg-card);
  box-shadow: 0 4px 18px var(--shadow);
}
.onebox-composer__plus,
.onebox-composer__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.onebox-composer__plus { background: transparent; color: var(--ink); }
.onebox-composer__plus.is-on,
.onebox-composer__plus:hover { background: var(--bg-soft); }
.onebox-composer__think {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 650;
}
.onebox-composer__think .ms { font-size: 18px; }
.onebox-composer__think.is-on { color: var(--accent); background: var(--bg-soft); }
.onebox-composer__think-label { display: none; }
@media (min-width: 520px) {
  .onebox-composer__think-label { display: inline; }
}
.onebox-composer__mic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  color: var(--ink);
}
.onebox-composer__mic.is-on { color: var(--on-fill); background: var(--accent); }
.onebox-composer__mic:hover { background: var(--bg-soft); }
.onebox-composer__send { background: var(--accent); color: var(--on-fill); }
.onebox-composer__send[disabled] { opacity: 0.45; cursor: default; }
.onebox-composer__voice { background: var(--accent); }
.onebox-voice {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.onebox-voice__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.onebox-voice__close:hover { background: var(--bg-soft); color: var(--ink); }
.onebox-voice__orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px var(--shadow);
}
.onebox-voice__orb .ms { font-size: 36px; }
.onebox-voice__orb--listening {
  animation: onebox-voice-pulse 1.2s ease-in-out infinite;
}
.onebox-voice__orb--speaking {
  animation: onebox-voice-pulse 0.9s ease-in-out infinite;
}
@keyframes onebox-voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.onebox-voice__status {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}
.onebox-voice__hint { font-size: 12px; color: var(--muted); }
.onebox-composer input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  min-width: 0;
  padding: 8px 4px;
}
.onebox-plus {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 8px 28px var(--shadow);
  overflow: hidden;
  max-height: 42vh;
  overflow-y: auto;
  margin: 0 4px;
}
.onebox-plus__row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-height: 44px;
}
.onebox-plus__row:hover { background: var(--bg-soft); }
.onebox-plus__icon { font-size: 22px; color: var(--ink); margin-top: 1px; }
.onebox-plus__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onebox-plus__label { font-size: 14px; font-weight: 650; color: var(--ink); }
.onebox-plus__hint { font-size: 12px; color: var(--muted); }
.onebox-plus__filter {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 13px;
  outline: none;
  background: var(--bg-card);
  color: var(--ink);
}
.onebox-proposals { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.onebox-proposal {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onebox-proposal__name { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.onebox-proposal__sub { font-size: 12px; color: var(--muted); }
.onebox-proposal__row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Toast (core/toast.js) ---- */

.ideal-toast-host {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 260;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.ideal-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fill-strong);
  color: var(--on-fill);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.ideal-toast.is-in { opacity: 1; transform: translateY(0); }
.ideal-toast__icon { font-size: 19px; color: #7ED09A; flex-shrink: 0; }
.ideal-toast__msg { max-width: 60vw; }
.ideal-toast__action {
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-fill);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.ideal-toast__close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  flex-shrink: 0;
}
.ideal-toast__close .ms { font-size: 17px; }
@media (max-width: 720px) {
  /* Clear the FAB / Field dock */
  .ideal-toast-host { bottom: 100px; }
}

/* ---- Project Photos (views/projectPhotos.js) ---- */

.photo-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.photo-folder-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.photo-folder-card:hover { border-color: var(--accent); }
.photo-folder-card.is-archived { opacity: 0.72; }
.photo-folder-card__cover {
  height: 120px;
  background: var(--bg-soft) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
}
.photo-folder-card__cover .ms { font-size: 36px; }
.photo-folder-card__body { padding: 12px 14px 14px; }
.photo-folder-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-folder-card__meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.photo-folder-card__desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.photo-grid__wrap { position: relative; }
.photo-grid__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
  aspect-ratio: 1;
  position: relative;
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-grid__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-dark);
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-grid__del {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(17,17,18,0.65);
  color: var(--on-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-grid__del .ms { font-size: 16px; }
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(10,10,12,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.photo-lightbox__stage {
  max-width: min(920px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.photo-lightbox__stage img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}
.photo-lightbox__meta { color: var(--on-dark); font-size: 13.5px; font-weight: 600; text-align: center; }
.photo-lightbox__sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7); margin-top: 4px; }
.photo-lightbox__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: var(--on-fill);
  cursor: pointer;
}
.photo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: var(--on-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox__nav .ms { font-size: 28px; }
.photo-lightbox__nav--prev { left: 16px; }
.photo-lightbox__nav--next { right: 16px; }

/* ---- Document Control (views/documentControl.js) ---- */

.dc-page { max-width: 1100px; }
.dc-intro { margin-bottom: 16px; }
.dc-intro__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
}
.dc-intro__sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; max-width: 560px; line-height: 1.45; }
.dc-search {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  background: var(--bg-card);
  color: var(--ink);
  margin-top: 12px;
}
.dc-search--jobs { max-width: 480px; }
.dc-backfill {
  display: inline-flex;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.dc-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.dc-err { color: var(--danger-ink); font-size: 12.5px; font-weight: 600; margin: 8px 0; }
.dc-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.dc-job-card {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  cursor: pointer;
  color: inherit;
}
.dc-job-card:hover { border-color: var(--accent); }
.dc-job-card__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
}
.dc-job-card__name { font-size: 15px; font-weight: 700; margin-top: 4px; color: var(--ink); }
.dc-job-card__meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dc-job-card__when { font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.dc-job-head { margin-bottom: 14px; }
.dc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}
.dc-job-head__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.dc-job-head__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
}
.dc-job-head__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dc-toolbar { margin-bottom: 12px; }
.dc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 800px) {
  .dc-layout { grid-template-columns: 1fr; }
}
.dc-buckets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
}
.dc-bucket {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.dc-bucket:hover { background: var(--bg-soft); }
.dc-bucket.is-on { background: var(--accent); color: var(--on-fill); }
.dc-bucket.is-future { opacity: 0.55; }
.dc-bucket__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.85;
}
.dc-main { min-width: 0; }
.dc-upload {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.dc-upload__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.dc-upload__row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 720px) {
  .dc-upload__row { grid-template-columns: 1fr; }
}
.dc-upload__row select,
.dc-upload__row input {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 13px;
  background: var(--bg-soft);
  color: var(--ink);
}
.dc-upload__row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fill-strong);
  color: var(--on-fill);
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.dc-docs {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.dc-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.dc-doc.is-superseded { opacity: 0.65; }
.dc-doc__main { flex: 1; min-width: 0; }
.dc-doc__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.dc-doc__ver {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
}
.dc-doc__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dc-doc__badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--chip-bg);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--muted);
}
.dc-doc__acts { display: flex; gap: 4px; flex-shrink: 0; }
.dc-super-toggle {
  margin: 10px 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.dc-unfiled {
  margin: 16px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.dc-unfiled__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-unfiled__n {
  font-size: 11px;
  font-weight: 800;
  background: var(--accent);
  color: var(--on-fill);
  border-radius: 999px;
  padding: 1px 8px;
}
.dc-unfiled__sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  max-width: 560px;
}
.dc-unfiled__list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dc-unfiled__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.dc-unfiled__subj { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dc-unfiled__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dc-unfiled__acts {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.dc-unfiled__acts button {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.dc-unfiled__acts button:hover { border-color: var(--accent); }
.dc-unfiled__ghost { opacity: 0.75; }
.dc-unfiled__code {
  width: 110px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Project Documents — Drive home (folders + suggested files, list/grid) */
.drive-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 10px;
}
.drive-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}
.drive-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.drive-view-toggle button {
  width: 36px;
  height: 32px;
  border: none;
  background: var(--bg-card);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.drive-view-toggle button + button { border-left: 1px solid var(--border); }
.drive-view-toggle button .ms { font-size: 20px; }
.drive-view-toggle button.is-on {
  background: var(--info-wash);
  color: var(--info-ink-3);
}
html[data-theme="dark"] .drive-view-toggle button.is-on {
  background: #2a3a52;
  color: #8ab4f8;
}
.drive-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.drive-folder-card {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: pointer;
}
.drive-folder-card:hover { border-color: #C9C9C2; }
.drive-folder-card__icon { font-size: 28px; display: block; }
.drive-folder-card__name {
  font-weight: 700;
  font-size: 13.5px;
  margin-top: 8px;
  word-break: break-word;
  color: var(--ink);
}
.drive-folder-card__meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.drive-file-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.drive-file-row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(140px, 1.4fr) minmax(110px, 0.9fr) minmax(110px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.drive-file-row:last-child { border-bottom: none; }
.drive-file-list--simple .drive-file-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr) auto;
}
.drive-file-row--head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 8px 16px;
}
.drive-file-row__name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: inherit;
  font: inherit;
}
.drive-file-row--head .drive-file-row__name { cursor: default; font-weight: 600; }
.drive-file-row__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drive-file-row__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-file-row__sub { display: none; font-size: 12px; color: var(--muted); }
.drive-file-row__reason,
.drive-file-row__meta {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-file-row__owner { min-width: 0; }
.drive-file-row__loc { min-width: 0; }
.drive-file-row__acts { display: flex; gap: 6px; justify-content: flex-end; }
.drive-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drive-file-icon .ms { font-size: 22px; }
.drive-owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.drive-owner__av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--info-ink-3);
  color: var(--on-fill);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drive-owner__name {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-file-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.drive-file-loc .ms { font-size: 18px; color: var(--info-ink-alt); }
.drive-file-loc:hover { color: var(--ink); }
.drive-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.drive-file-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.drive-file-card:hover { border-color: #C9C9C2; }
.drive-file-card__hit {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.drive-file-card__name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  word-break: break-word;
}
.drive-file-card__reason { font-size: 12px; color: var(--muted); }
.drive-file-card__acts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
}
.drive-view-more {
  border: none;
  background: none;
  color: var(--info-ink-3);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 4px 4px;
}
.drive-view-more:hover { text-decoration: underline; }

/* Supplier Invoices — full-width page, ERP tokens */
.sinv-page { width: 100%; max-width: none; }
.sinv-tabs { margin-bottom: 16px; }
.sinv-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.sinv-banner.is-ok { background: var(--success-wash-2); color: var(--success-ink); }
.sinv-banner.is-err { background: var(--danger-wash); color: var(--danger-ink); }
html[data-theme="dark"] .sinv-banner.is-ok {
  background: color-mix(in srgb, #1E7A3D 18%, var(--bg-card));
  color: #8fd4a8;
}
html[data-theme="dark"] .sinv-banner.is-err {
  background: color-mix(in srgb, #C21C1C 18%, var(--bg-card));
  color: #f0a0a0;
}
.sinv-dash { display: flex; flex-direction: column; gap: 16px; }
.sinv-dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sinv-dash-scope { font-size: 13px; font-weight: 700; color: var(--ink); }
.sinv-dash-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--ink);
}
.sinv-page .r-kpi.sinv-dash-kpis {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
.sinv-page .sinv-dash-kpis .r-kpi__value { font-size: 22px; margin: 6px 0 0; }
.sinv-dash-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.sinv-dash-rail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  position: sticky;
  top: 12px;
}
.sinv-dash-rail__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px 6px;
}
.sinv-dash-rail__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.sinv-dash-rail__item.is-on {
  background: var(--bg-soft);
  box-shadow: inset 3px 0 0 var(--ink);
}
html[data-theme="dark"] .sinv-dash-rail__item.is-on { background: var(--hover); }
.sinv-dash-rail__name { font-size: 13px; font-weight: 700; min-width: 0; }
.sinv-dash-rail__meta { font-size: 11px; color: var(--muted); text-align: right; line-height: 1.35; flex-shrink: 0; }
.sinv-dash-hint {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.sinv-dash-empty, .sinv-dash-month__empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.sinv-dash-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
}
.sinv-dash-month__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sinv-dash-month__head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  border: none;
  background: var(--bg-card);
  color: var(--ink);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
}
.sinv-dash-month__label { font-weight: 800; font-size: 15px; }
.sinv-dash-month__stats { flex: 1; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sinv-dash-month__over { color: var(--orange-ink-2); font-weight: 800; }
.sinv-dash-month__chev { margin-left: auto; color: var(--muted); }
.sinv-dash-month__pdf {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--orange-ink-2);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.sinv-dash-month__pdf:hover:not(:disabled) { background: #FDF4EC; }
.sinv-dash-month__pdf:disabled { opacity: 0.35; cursor: default; color: var(--muted); }
.sinv-dash-month__pdf .ms { font-size: 18px; }
.sinv-dash-month__body { padding: 0 12px 14px; }
.sinv-dash-table-wrap { overflow: auto; }
.sinv-dash-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.sinv-dash-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.sinv-dash-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sinv-dash-link {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.sinv-dash-strong { font-weight: 700; }
.sinv-dash-muted { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; word-break: break-word; }
.sinv-dash-job {
  background: var(--success-wash-2);
  color: var(--success-ink);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
}
html[data-theme="dark"] .sinv-dash-job {
  background: color-mix(in srgb, #1E7A3D 22%, var(--bg-card));
  color: #8fd4a8;
}
.sinv-dash-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.sinv-dash-pager button {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
}
.sinv-dash-pager button:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 1400px) {
  .sinv-page .r-kpi.sinv-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sinv-page .r-kpi.sinv-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .sinv-dash-body { grid-template-columns: 1fr; }
  select.sinv-dash-select.mobile-only { display: block !important; width: 100%; }
  .sinv-page .r-kpi.sinv-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
  .drive-file-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .drive-file-row__reason,
  .drive-file-row__owner,
  .drive-file-row__loc,
  .drive-file-row--head { display: none; }
  .drive-file-row__sub { display: block; }
  .drive-file-row__meta { display: none; }
}



/* Company credentials — Estimating → Subbie Pack (plan §16.3) */
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  white-space: nowrap;
}
html[data-theme="dark"] .cred-chip {
  background: color-mix(in srgb, var(--chip-fg) 22%, var(--bg-card));
  color: color-mix(in srgb, var(--chip-fg) 65%, #ffffff);
}
.cred-chip--ignored {
  opacity: 0.55;
}
.cred-cand {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  min-width: 190px;
}
.cred-cand.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cred-table {
  min-width: 0;
  overflow-x: auto;
}
.cred-table__head,
.cred-table__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(72px, 100px) minmax(0, 1.3fr) minmax(96px, 140px) max-content;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
}
.cred-table__head {
  padding: 11px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cred-table__row {
  border-bottom: 1px solid var(--border-soft);
}
.cred-table__row--clickable {
  cursor: pointer;
}
.cred-table__row--clickable:hover {
  background: var(--bg-soft);
}
.cred-table .data-table__cell--actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  white-space: normal;
  min-width: 0;
}
.cred-table__btn {
  padding: 6px 10px;
  flex-shrink: 0;
}
.cred-table .cred-chip {
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
}

/* ── Subbie Pack → Business Portfolios (matches cred-table layout) ─────── */
.bp-table {
  min-width: 0;
  overflow-x: auto;
}
.bp-table__head,
.bp-table__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(120px, 160px) minmax(0, 1.2fr) max-content;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
}
.bp-table__head {
  padding: 11px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.bp-table__row {
  border-bottom: 1px solid var(--border-soft);
}
.bp-table__row--clickable {
  cursor: pointer;
}
.bp-table__row--clickable:hover {
  background: var(--bg-soft);
}
.bp-table .data-table__cell--actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  white-space: normal;
  min-width: 0;
}
.bp-table--drag {
  outline: 2px dashed var(--ink);
  outline-offset: -2px;
  background: var(--bg-soft);
}

/* ── Tendering → Clause library ─────────────────────────────────────────── */
.tdr-clause-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tdr-clause-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.tdr-clause-head__title { font-size: 16px; font-weight: 800; }
.tdr-clause-head__sub { font-size: 12.5px; color: var(--muted, var(--text-4)); margin-top: 2px; }
.tdr-clause-head__toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; cursor: pointer; color: var(--muted, var(--text-4));
}

.tdr-clause-header {
  border: 1px solid var(--border, var(--line-1)); border-radius: 12px;
  background: var(--bg-card, var(--bg-card)); margin-bottom: 12px; overflow: hidden;
}
.tdr-clause-header.is-drop-target { border-color: var(--accent); }
.tdr-clause-header__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--bg-soft, var(--surface-3));
  border-bottom: 1px solid var(--border, var(--line-1));
}
.tdr-clause-header__name { font-size: 13.5px; font-weight: 800; }
.tdr-clause-header__badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted, var(--text-4)); background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--border, var(--line-1)); border-radius: 999px; padding: 2px 8px;
}
.tdr-clause-header__count {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--success-ink-4); background: #E7F6EC; border-radius: 999px; padding: 2px 9px;
}
.tdr-clause-hint { font-size: 11.5px; color: var(--muted, var(--text-4)); padding: 8px 12px 0; }

.tdr-clause-drop { min-height: 12px; }
.tdr-clause-drop.is-drop-target { background: rgba(224, 27, 27, 0.05); }
.tdr-clause-row {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--border-soft, var(--line-4));
}
.tdr-clause-row:last-child { border-bottom: 0; }
.tdr-clause-row.is-drop-target { border-top: 2px solid var(--accent); }
.tdr-clause-grip { font-size: 17px; color: #B9B9B3; cursor: grab; flex: none; }
.tdr-clause-tick {
  flex: none; width: 22px; height: 22px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, var(--line-1)); background: var(--bg-card, var(--bg-card)); color: #B9B9B3;
}
.tdr-clause-tick .ms { font-size: 15px; }
.tdr-clause-tick.is-on { background: #E7F6EC; border-color: #BFE4CB; color: var(--success-ink-4); }
.tdr-clause-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.tdr-clause-body.is-off { color: var(--muted, var(--text-4)); text-decoration: line-through; }
.tdr-clause-flag {
  margin-left: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #8A6D00; background: #FFF6DA; border-radius: 999px; padding: 1px 7px;
}
.tdr-clause-tools { display: flex; gap: 2px; flex: none; }
.tdr-icon-btn {
  border: 0; background: transparent; color: var(--muted, var(--text-4));
  cursor: pointer; padding: 4px; border-radius: 7px; line-height: 1;
}
.tdr-icon-btn:hover { background: var(--bg-soft, var(--surface-3)); color: var(--ink, var(--text-1)); }
.tdr-icon-btn .ms { font-size: 17px; }
.tdr-clause-move {
  flex-basis: 100%; display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  padding: 8px 0 2px 32px;
}
.tdr-clause-move__lab { font-size: 11.5px; font-weight: 700; color: var(--muted, var(--text-4)); }
.tdr-clause-empty { font-size: 12.5px; color: var(--muted, var(--text-4)); padding: 12px; }
.tdr-clause-add {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border: 0; border-top: 1px solid var(--border-soft, var(--line-4)); background: transparent;
  color: var(--info-ink-bright); font-size: 12.5px; font-weight: 650; cursor: pointer; padding: 9px 12px;
}
.tdr-clause-add:hover { background: var(--bg-soft, var(--surface-3)); }


/* Estimate grid number cells ------------------------------------------------
   The native spinner is hidden rather than restyled: its arrows are drawn by
   the browser in a grey that vanishes into both of this app's palettes, it only
   appears on hover, and it eats the width the digits needed. `.tdr-step` is the
   replacement — real markup, so it takes the theme's colours. */
.tdr-num { position: relative; display: block; }
.tdr-num > input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}
/* The right padding that keeps digits clear of the arrows is set inline in
   cellInput, not here: `inputStyle` is an inline `padding` shorthand and would
   override this rule. */
.tdr-num > input[type="number"]::-webkit-outer-spin-button,
.tdr-num > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tdr-step {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tdr-step button {
  display: block;
  width: 17px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 7px;
  line-height: 10px;
  text-align: center;
  cursor: pointer;
}
.tdr-step button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover, var(--border-soft));
}
.tdr-step button:disabled { opacity: 0.35; cursor: default; }


/* Chat shell -----------------------------------------------------------------
   These live here rather than in a `style` attribute for one reason: an inline
   declaration beats a stylesheet rule, so a media query cannot undo one. The
   two-column layout has to collapse on a phone, therefore it cannot be inline. */
.chat-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  /* A first guess; `sizeConversation()` measures the real one. Height, not
     min-height: the pane is a frame, and a frame that grows with its contents
     takes the composer off the bottom of the screen. */
  height: calc(100vh - 210px);
  min-height: 420px;
}
.chat-pane { min-width: 0; min-height: 0; }
.chat-pane--list { overflow-y: auto; height: 100%; }
.chat-pane--convo {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  overflow: hidden;
  height: 100%;
}

/* One row: the tabs on the left, the two buttons on the right. The app bar
   already says what module this is and what it is for; the page said it again
   underneath, at the cost of about 190px of a laptop screen. */
.chat-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chat-head-row__tabs { margin: 0; }

/* Full-size chat photo — must sit above the desktop top nav (z-index 200) or
   the close control is covered and unreachable. Same band as project Photos. */
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.chat-lightbox__img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.chat-lightbox__loading {
  color: var(--on-dark);
  font-size: 13px;
}
.chat-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-lightbox__close .ms { font-size: 22px; }

/* Shown only when the panes are stacked. */
.chat-back { display: none; }

/* ── Message actions ─────────────────────────────────────────────────────
   More / Reply / React sit beside the bubble and stay out of the way until
   they are wanted: hover on a pointer device, long-press on a touch one.
   They keep their space reserved so a message never shifts when they appear —
   a row that jumps as the mouse crosses it is impossible to click. */
.chat-msg__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.chat-msg:hover .chat-msg__actions,
.chat-msg:focus-within .chat-msg__actions,
.chat-msg--acting .chat-msg__actions {
  opacity: 1;
  pointer-events: auto;
}
.chat-msg__act {
  font: inherit;
  line-height: 1;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chat-msg__act:hover { color: var(--ink); background: var(--bg-soft); }

.chat-emoji-palette {
  width: min(236px, calc(100vw - 24px));
  box-sizing: border-box;
}
.chat-emoji-palette__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.chat-msg__menu {
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

/* A finger has no hover, so the cluster only appears after a long press —
   and while it is up, the pressed message is marked so it is obvious which
   one the buttons belong to. */
@media (hover: none) {
  .chat-msg__actions { opacity: 0; }
  .chat-msg--acting .chat-msg__actions { opacity: 1; pointer-events: auto; }
  .chat-msg--acting .chat-msg__bubble { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
}

/* Long-press should select the message, not the page's text. */
.chat-msg__bubble { -webkit-user-select: none; user-select: none; }
@media (hover: hover) {
  /* With a mouse there is no long press, so text stays selectable. */
  .chat-msg__bubble { -webkit-user-select: text; user-select: text; }
}

/* Swipe right to reply. The row follows the finger (set inline by the press
   handler); `pan-y` keeps vertical scrolling native while handing horizontal
   moves to the page, or the browser cancels the gesture as a pan. */
#chat-scroll { overflow-x: hidden; }
.chat-msg { touch-action: pan-y; position: relative; }
.chat-msg--swiping { transition: none; }
.chat-msg:not(.chat-msg--swiping) { transition: transform 0.18s ease; }
.chat-msg--swiping::before {
  content: 'reply';
  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', sans-serif;
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  font-size: 20px;
  color: var(--muted);
  opacity: 0.5;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.chat-msg--swipe-ready::before { transform: translateY(-50%) scale(1); opacity: 1; color: var(--ink); }
.chat-msg--flash .chat-msg__bubble { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28); transition: box-shadow 0.2s ease; }

/* The quoted message inside a reply bubble — tap to jump to it. */
.chat-quote {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: none;
  border: none;
  border-left: 3px solid currentColor;
  opacity: 0.72;
  padding: 0 0 0 8px;
  margin: 0 0 5px;
  cursor: pointer;
}
.chat-quote__who { display: block; font-weight: 700; }
.chat-quote__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  /* One pane at a time: the list, then the conversation with a way back. A
     240px column plus a gap leaves about forty pixels for the conversation on a
     390px phone, which is where "Pick a project" was rendering one letter per
     line. */
  .chat-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .chat-pane--list {
    max-height: none;
    overflow-y: visible;
  }
  .chat-pane--convo { display: none; }
  .chat-shell--open .chat-pane--list { display: none; }
  .chat-shell--open .chat-pane--convo {
    display: block;
    /* `dvh` tracks the viewport as the mobile address bar hides and shows;
       `vh` does not, and a composer measured against the tall value sits under
       the browser chrome. The `vh` line first, as the fallback. */
    height: calc(100vh - 190px);
    height: calc(100dvh - 190px);
    min-height: 340px;
  }
  .chat-back { display: inline-flex; align-items: center; }
  /* Labels off, icons on — four labelled buttons do not fit a phone header. */
  .chat-head-btn__text { display: none; }

  /* New message / New group become icons on the title's own line. */
  .chat-new-btn__text { display: none; }
  .chat-new-btn { min-width: 40px; justify-content: center; }

  /* With a conversation open the module heading, the two buttons and the admin
     tabs are all navigation for a screen the user has already left. Same class
     trick as `.chat-intro--busy`: they sit before the conversation in the
     document and CSS cannot select backwards. */
  .chat-topbar--busy { display: none !important; }

  /* Exporting a transcript is a desk job. */
  .chat-head-btn--desk { display: none; }

  /* Reclaim what the hidden chrome was using. The 190px allowed for the
     heading, the buttons and the dock; with a conversation open only the app
     bar and the page padding are left. */

  /* The field grows with what is in it, to a point. It used to jump to 84px on
     focus, which with a keyboard up left almost nothing of the conversation. */
  .chat-composer:focus-within #chat-composer { max-height: 28dvh; }

  /* A first guess only: `sizeConversation()` overwrites this with the measured
     height as soon as the view renders. `svh` — the *short* viewport — because
     being briefly too small is recoverable and being too tall puts the composer
     under the browser bar. */
  .shell--chat-open .chat-shell--open .chat-pane--convo {
    height: calc(100vh - 150px);
    height: calc(100svh - 150px);
  }

  /* With the module heading hidden there is nothing left in the wrappers, and
     their padding was the empty band above the conversation. */
  .shell--chat-open .chat-page,
  .shell--chat-open .chat-body { padding: 0 !important; }

  /* Edge to edge, the way a phone messenger looks. */
  .shell--chat-open .chat-shell--open .chat-pane--convo {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}


/* ==========================================================================
   Gallery — the company archive
   ========================================================================== */

.gal-page { padding-bottom: 32px; }

.gal-hero {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.gal-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.gal-hero__sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.gal-notice {
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--ink);
}
.gal-notice--bad { background: var(--danger-wash); color: var(--danger-ink); }

.gal-back {
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0 0 12px;
  cursor: pointer;
  color: var(--muted);
}

.gal-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 16px; }
.gal-head__title { margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 24px; letter-spacing: -0.01em; }
.gal-head__meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.gal-head__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gal-danger { color: var(--danger-ink); border-color: #E8C9C9; }

/* ---- the album wall ---- */

.gal-albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.gal-album {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.gal-album__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  /* The lift is the whole "fancy": a still frame that reacts when you reach
     for it, and nothing else moving on the page. */
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.gal-album:hover .gal-album__frame,
.gal-album:focus-visible .gal-album__frame {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}
.gal-album__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-album__empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 40px; color: var(--border);
}
.gal-album__badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(20, 20, 24, 0.62);
  color: var(--on-fill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
}
.gal-album__name { font-size: 14px; font-weight: 800; }
.gal-album__meta { font-size: 11.5px; color: var(--muted); }

/* ---- the tile grid ---- */

/* Even tiles. The old grid gave every seventh one a double-width span, which
   reads as rhythm across a wall of photos and as a mistake in an album holding
   three. The shape is on the tile rather than on the row, so a short album does
   not leave half-height gaps. */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
@media (max-width: 520px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
}
.gal-tile { margin: 0; }
.gal-tile__open {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}
.gal-tile__media {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 220ms ease;
}
.gal-tile__open:hover .gal-tile__media { transform: scale(1.04); }
.gal-tile__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  color: var(--on-dark);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.gal-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 10px 7px;
  font-size: 11.5px;
  color: var(--on-dark);
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 46px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.gal-empty__icon { font-size: 38px; display: block; margin-bottom: 8px; color: var(--border); }
.gal-empty__hint { font-size: 12px; margin-top: 5px; }

/* ---- the viewer ---- */

.gal-viewer {
  position: fixed;
  inset: 0;
  /* Above every modal backdrop: this one IS the modal, and the tile grid
     behind it should be nothing but dark. */
  z-index: 140;
  background: rgba(10, 10, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal-viewer__stage {
  max-width: min(1400px, 94vw);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal-viewer__media {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.gal-viewer__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  color: var(--on-fill);
}
.gal-viewer__text { flex: 1; min-width: 0; }
.gal-viewer__cap { font-size: 13.5px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gal-viewer__sub { font-size: 11.5px; opacity: 0.75; margin-top: 2px; }
.gal-viewer__btn,
.gal-viewer__nav,
.gal-viewer__close {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-fill);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}
.gal-viewer__btn:hover,
.gal-viewer__nav:hover,
.gal-viewer__close:hover { background: rgba(255, 255, 255, 0.26); }
.gal-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
}
.gal-viewer__nav--prev { left: 14px; }
.gal-viewer__nav--next { right: 14px; }
.gal-viewer__close { position: absolute; top: 14px; right: 14px; border-radius: 50%; }
@media (max-width: 720px) {
  /* On a phone the arrows sit under the thumb rather than at the edges. */
  .gal-viewer__nav { top: auto; bottom: 78px; transform: none; }
  .gal-viewer__stage { max-height: 70vh; }
  .gal-viewer__media { max-height: 70vh; }
  .gal-hero__title { font-size: 24px; }
}


/* ---- Event cover ------------------------------------------------------- */

/* A declared ratio plus an image told to fill it. The old markup set a width
   and clamped the height, which leaves the box at a ratio the picture does not
   have and makes the crop depend on the browser. */
.ev-cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-soft);
  cursor: pointer;
  overflow: hidden;
}
.ev-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The hero on the detail page keeps the picture's own shape.
   Forcing a 21:9 box on a poster cropped the top off it, and stretching that
   box across a 1900px window made a 340px band out of an invitation. Bounded
   by a height and a width instead, so a wide banner stays a strip and a tall
   poster stays a poster. */
/* The band the picture sits in: centred, with the picture's own colours blurred
   behind it so the space either side is not bare page. */
.ev-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 16px;
  background: var(--bg-soft);
  isolation: isolate;
}
.ev-hero__wash {
  position: absolute;
  /* Overscanned: a blur samples past its own edge, and without the bleed the
     border shows a pale rim where there was nothing left to sample. */
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.25);
  transform: scale(1.08);
  opacity: 0.9;
  z-index: -1;
}
:root:not([data-theme="light"]) .ev-hero__wash { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .ev-hero__wash { will-change: auto; }
}

.ev-cover--hero {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: min(100%, 620px);
  border-radius: 10px;
  line-height: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.ev-cover--hero .ev-cover__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
}

/* ---- the list: a grid of cards ---------------------------------------- */

.ev-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
.ev-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.ev-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10); }

/* Inset, the way the reference has it: the picture reads as part of the card
   rather than as its lid. */
.ev-card__media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ev-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-soft);
}
.ev-card__img--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
}
.ev-card__img--none .ms { font-size: 34px; }
.ev-card__tags {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.ev-card__body { padding: 12px 14px 4px; flex: 1; }
.ev-card__date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.ev-card__date .ms { font-size: 15px; }
.ev-card__soon { color: #1D4ED8; font-weight: 700; }
.ev-card__title { margin: 6px 0 0; font-size: 15.5px; line-height: 1.3; }
.ev-card__title button {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  /* Two lines, then an ellipsis: a long name must not push every card in the
     row taller than the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.ev-card__where {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.ev-card__where .ms { font-size: 15px; }
.ev-card__desc {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.ev-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-top: 10px;
  border-top: 1px solid var(--border-soft, var(--border));
  font-size: 12px;
  color: var(--muted);
}
.ev-card__count { display: flex; align-items: center; gap: 5px; }
.ev-card__count .ms { font-size: 16px; }
.ev-card__rsvp { display: flex; gap: 6px; padding: 0 14px 14px; }
.ev-card__rsvp > div { display: flex; gap: 6px; width: 100%; }

.ev-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--on-fill);
}
.ev-tag--draft { background: var(--amber-ink); }
.ev-tag--off { background: var(--danger-ink); }

@media (max-width: 720px) {
  /* One across, and the hero goes full width again — 21:9 over 390px is a
     167px strip. */
  .ev-feed { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* No ratio here either — the picture keeps its own. Shorter than desktop
     so the name and the date are on screen without scrolling. */
  .ev-cover--hero { max-width: 100%; }
  .ev-cover--hero .ev-cover__img { max-height: 210px; }
}

.ev-lightbox {
  position: fixed;
  inset: 0;
  /* Above desktop top nav (200); same band as Photos / Chat lightboxes. */
  z-index: 210;
  background: rgba(10, 10, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.ev-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}
.ev-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   Chat composer — at rest, and while writing
   ========================================================================== */

.chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.chat-composer__tools { display: flex; gap: 2px; }

.chat-tool,
.chat-composer__more,
.chat-send {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.chat-tool .ms,
.chat-composer__more .ms,
.chat-send .ms { font-size: 21px; }
.chat-tool:hover,
.chat-composer__more:hover { background: var(--bg-soft); }
.chat-tool:disabled,
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-tool--rec { color: var(--danger-ink); }

/* Folded away until you are writing. */
.chat-composer__more { display: none; }

.chat-composer__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 7px 14px;
}
.chat-composer__field:focus-within { border-color: var(--border); }
#chat-composer {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  outline: none;
  max-height: 140px;
}

/* Word suggestions — a strip riding just above the composer. The slot takes
   no room in the flex row; the strip hangs off the (sticky) composer. */
.chat-suggest-slot { display: contents; }
.chat-suggest {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 100%;
  margin-bottom: 6px;
  z-index: 25;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: none;
}
.chat-suggest::-webkit-scrollbar { display: none; }
.chat-suggest__chip {
  pointer-events: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.chat-suggest__chip:first-child { border-color: var(--accent); }
.chat-suggest__chip:hover { background: var(--bg-soft); }
.chat-suggest__chip .ms { font-size: 15px; color: var(--accent); }
.chat-suggest__chip--fix { font-style: italic; }
.chat-edit-hint { font-size: 11px; color: var(--muted); }
/* Inside your own (inked) bubble the buttons would inherit its light text. */
.chat-edit-btn { color: var(--ink); background: var(--bg-card); }
.chat-msg__bubble--mine .chat-edit-hint { color: inherit; opacity: 0.7; }

.chat-mention,
.chat-mention-link {
  font: inherit;
  font-weight: 700;
  border-radius: 5px;
  padding: 0 3px;
}
.chat-mention {
  background: rgba(37, 99, 235, 0.14);
  color: var(--info-ink-bright);
}
.chat-mention-link {
  cursor: pointer;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-msg__bubble--other .chat-mention,
.chat-msg__bubble--other .chat-mention-link {
  background: rgba(37, 99, 235, 0.14);
  color: var(--info-ink-bright);
}
.chat-msg__bubble--mine .chat-mention,
.chat-msg__bubble--mine .chat-mention-link {
  background: rgba(255, 255, 255, 0.18);
  color: #BFDBFE;
}
.chat-mention-link:hover { filter: brightness(1.08); }

.chat-send { background: var(--accent); color: var(--on-fill); }
.chat-send:hover { filter: brightness(1.06); }
.chat-send__wait { font-size: 15px; color: var(--on-dark); }

/* ---- writing ---------------------------------------------------------- */

/* The icons fold into one chevron and the field takes the width. Pressing the
   chevron returns them: it carries `data-keep-focus`, so the press does not
   move focus, and the field keeps the keyboard while the row changes back. */
@media (max-width: 900px) {
  .chat-composer:focus-within .chat-composer__tools { display: none; }
  .chat-composer:focus-within .chat-composer__more { display: flex; }
}

/* A header, not a toolbar: the three housekeeping buttons are icons with
   tooltips. The AI ones keep their words — nobody finds "summarise this
   conversation" behind an icon they have never pressed. */
.chat-head-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
.chat-head-btn--icon .ms { font-size: 18px; }


/* ---- Tendering: specification rows ------------------------------------- */

.tdr-spec-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft, var(--border));
  border-radius: 6px;
}
.tdr-spec-row.is-dragging { opacity: 0.45; }
/* The line the row will land on. A border rather than a background: the row
   under the cursor should look like a destination, not like a selection. */
.tdr-spec-row.is-drop-target {
  box-shadow: 0 -2px 0 0 var(--accent) inset;
  background: var(--bg-soft);
}
.tdr-spec-row__grip {
  font-size: 18px;
  color: var(--muted);
  cursor: grab;
  margin-top: 2px;
  flex: 0 0 auto;
}
.tdr-spec-row:active .tdr-spec-row__grip { cursor: grabbing; }

/* The arrows are the fallback where there is no drag: HTML5 drag and drop does
   not fire on touch, and a phone with neither would have no way to reorder. */
.tdr-spec-row__arrows { display: none; flex-direction: column; gap: 2px; }
@media (hover: none) {
  .tdr-spec-row__grip { display: none; }
  .tdr-spec-row__arrows { display: flex; }
}

.tdr-spec-row__own {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber-wash);
  border-radius: 5px;
  padding: 1px 5px;
  vertical-align: 1px;
}

/* ---- Tendering: Add existing inclusions/exclusions picker -------------- */

.tdr-agree-picker {
  --modal-width: 1080px;
  width: min(var(--modal-width), 96vw);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding-bottom: 68px;
}
.tdr-agree-picker__head {
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.tdr-agree-picker__search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 4px;
}
.tdr-agree-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}
.tdr-agree-picker__done {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
@media (max-width: 620px) {
  .tdr-agree-picker {
    width: 100%;
    max-height: 94vh;
    padding-bottom: 64px;
  }
  .tdr-agree-picker__done {
    right: 14px;
    bottom: 12px;
  }
}

/* ---- Release Notes — mobile installs ---- */
.rn-os-hub {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.rn-os-hub .rn-os-grid {
  margin-top: 0;
}
.rn-os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.rn-os-pane {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface-1);
}
.rn-os-pane h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rn-os-qr {
  width: 112px;
  height: 112px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  display: block;
}
.rn-os-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.rn-os-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  word-break: break-all;
  margin-top: 8px;
}
.rn-os-queue {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.rn-os-settings {
  border-color: var(--grey-84);
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--bg-card) 48px);
}
/* Global `select { appearance: none }` removes the native caret; without a
   replacement the control can look like a clipped/broken glyph next to the
   label. Give waitlist filters their own chevron and a clear UI font. */
.rn-os-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-1);
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C5C58' d='M1.2 1.4L6 6.2l4.8-4.8 1.1 1.1L6 8.4.1 2.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--line-3);
  border-radius: 10px;
  min-width: 148px;
  max-width: 100%;
  cursor: pointer;
}
.rn-os-select:focus {
  outline: none;
  border-color: #00F5F0;
  box-shadow: 0 0 0 2px rgba(0, 245, 240, 0.28);
}
.rn-os-queue table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rn-os-queue th,
.rn-os-queue td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-5);
  vertical-align: middle;
}
.rn-os-queue th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-4);
}
@media (max-width: 720px) {
  .rn-os-grid { grid-template-columns: 1fr; }
}

/* Staff passport (views/staffPassport.js) — People Profiles and My profile. */
.sp-card { background: var(--bg-card, var(--bg-card)); border: 1px solid var(--border, var(--line-2)); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
/* Light card, like Ideal Field's Profile hero: status is a small pill, not a black band. */
.sp-hero { background: var(--bg-card); color: var(--ink); }
.sp-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.sp-ready { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.sp-ready__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-ready--ok { background: var(--ink); color: var(--on-ink); }
.sp-ready--ok .sp-ready__dot { background: #10B981; }
.sp-ready--no { background: var(--danger-tint); border-color: #FEE2E2; color: var(--danger); }
.sp-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid #00F5F0; }
.sp-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border, var(--line-4)); }
.sp-row:first-of-type { border-top: 0; }
.sp-link { border: 0; background: none; padding: 0; font-size: 12px; color: var(--ink, var(--text-1)); text-decoration: underline; text-decoration-color: #00F5F0; text-underline-offset: 3px; cursor: pointer; }
.sp-link--strong { font-weight: 700; }
.sp-btn { border: 1px solid var(--border, var(--line-1)); background: var(--bg-card, var(--bg-card)); color: var(--ink, var(--text-1)); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 38px; }
.sp-btn--dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sp-btn--brand { background: #00F5F0; color: #000; border-color: #00F5F0; }
.sp-btn--ghost { background: transparent; color: var(--on-dark); border-color: #3A3A36; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; }
.sp-grid > :first-child { grid-column: 1 / -1; }
.sp-lab { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, var(--text-3)); }
.sp-input { border: 1px solid var(--border, var(--line-1)); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; background: var(--bg-card, var(--bg-card)); color: var(--ink, var(--text-1)); width: 100%; box-sizing: border-box; }

.forms-album { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-album__img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); }

/* CRM client flags (core/crmFlags.js) — chips on lists, the warning box on forms. */
.crm-chip { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; padding:2px 7px 2px 5px; border-radius:20px; background:var(--chip-bg); color:var(--muted); white-space:nowrap; }
.crm-chip .ms { font-size:13px; }
.crm-banner { border:1px solid; border-radius:10px; padding:9px 11px; margin-top:8px; font-size:12.5px; line-height:1.45; }
.crm-banner__head { display:flex; align-items:center; gap:6px; font-weight:700; flex-wrap:wrap; }
.crm-banner__head .ms { font-size:17px; }
.crm-banner__btn { margin-left:auto; background:var(--bg-card); color:var(--ink); border:1px solid currentColor; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; }
.crm-banner__row { display:flex; gap:6px; margin-top:6px; color:var(--ink); }
.crm-banner__row .ms { font-size:16px; margin-top:1px; }
.crm-banner__meta { display:block; font-size:11px; color:var(--muted-2); }
html[data-theme="dark"] .crm-banner { background:var(--bg-soft) !important; }

/* ---------- EOD Reports → Calendar tab ---------- */
/* Toolbar: month · Today · project · type checkboxes — one row, 40px controls. */
.eod-cal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.eod-cal__monthnav {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
.eod-cal__navbtn,
.eod-cal__monthbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}
.eod-cal__navbtn { width: 38px; }
.eod-cal__navbtn .ms { font-size: 20px; }
.eod-cal__monthbtn {
  gap: 2px;
  min-width: 158px;
  padding: 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.eod-cal__monthbtn .ms { font-size: 18px; color: var(--muted-2); }
.eod-cal__navbtn:hover,
.eod-cal__monthbtn:hover { background: var(--bg-soft); }
/* Kept in the layout (not display:none) so showPicker() can anchor to it. */
.eod-cal__monthinput {
  position: absolute;
  left: 38px;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}
.eod-cal__project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  width: 260px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.eod-cal__project .ms { font-size: 18px; color: var(--muted-2); flex: none; }
.eod-cal__project select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.eod-cal__project:focus-within { border-color: var(--ink); }
.eod-cal__types {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  min-inline-size: 0;
}
.eod-cal__types legend {
  float: left; /* keeps the legend inside the box, on the same line */
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eod-cal__type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.eod-cal__type input { width: 15px; height: 15px; margin: 0; accent-color: var(--text-1); cursor: pointer; }

/* Summary line: numbers left, legend right. */
.eod-cal__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.eod-cal__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.eod-cal__stat strong { color: var(--ink); font-weight: 700; }
.eod-cal__stat.is-bad, .eod-cal__stat.is-bad strong { color: var(--danger-ink-3); font-weight: 600; }
.eod-cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--muted);
}
.eod-cal__legend > span { display: inline-flex; align-items: center; gap: 5px; }
.eod-cal__hint { color: var(--muted-2); }
.eod-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}
/* Weekday header: a solid dark bar so the columns read at a glance. */
.eod-cal__wd {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-fill);
  background: var(--fill-strong);
  border-radius: 8px;
  padding: 8px 6px;
}
.eod-cal__wd.is-weekend { background: #5A5A56; color: #F2F2EE; }
.eod-cal__cell {
  background: var(--bg-card);
  border: 1px solid var(--line-6);
  border-radius: 10px;
  min-height: 108px;
  padding: 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eod-cal__cell--pad { background: transparent; border-color: transparent; }
.eod-cal__cell.is-weekend { background: var(--surface-1); }
.eod-cal__cell.is-future { opacity: 0.55; }
.eod-cal__cell.is-missing { background: #FDF3F2; border-color: #F2CFCB; }
.eod-cal__cell.is-today { border-color: var(--fill-strong); box-shadow: inset 0 0 0 1px var(--fill-strong); }
.eod-cal__day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  border: none;
  background: none;
  padding: 0 2px 2px;
  cursor: pointer;
  text-align: left;
}
.eod-cal__num { font-weight: 800; font-size: 13px; color: var(--ink); }
.eod-cal__count { font-size: 10.5px; font-weight: 700; color: var(--info-ink); white-space: nowrap; }
.eod-cal__count--none { color: var(--danger-ink-3); }
.eod-cal__count--ok { color: var(--success-ink); }
.eod-cal__count--muted { color: var(--text-4); font-weight: 600; }
.eod-cal__counts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; }
.eod-cal__cell.is-complete { border-color: #CFE8D6; }
.eod-cal__flag {
  font-size: 9.5px;
  font-weight: 700;
  color: #8A6D1F;
  background: #FFF6DB;
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
}
.eod-cal__items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eod-cal__item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--surface-3);
  cursor: default;
}
.eod-cal__item:hover { background: var(--info-wash); }
.eod-cal__text {
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.eod-cal__site { font-weight: 700; color: var(--ink); }
.eod-cal__who { color: var(--text-4); }
.eod-cal__src {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 1px 4px;
}
.eod-cal__item--wa .eod-cal__src, .eod-cal__src--wa { background: #DCF5E3; color: var(--success-ink); }
.eod-cal__item--miss { background: var(--bg-card); border: 1px dashed #E7A9A3; }
.eod-cal__item--miss:hover { background: #FDF3F2; }
.eod-cal__mark { flex: none; font-size: 14px; line-height: 1; margin-top: 0; }
.eod-cal__item--miss .eod-cal__mark, .eod-cal__mark--miss { color: var(--danger-ink-3); }
.eod-cal__item--miss .eod-cal__site { color: var(--danger-ink-4); }
.eod-cal__item--due { background: var(--bg-card); border: 1px dashed #D6D6D0; }
.eod-cal__item--due:hover { background: var(--surface-2); }
.eod-cal__item--due .eod-cal__mark { color: var(--text-7); }
.eod-cal__item--due .eod-cal__site { color: var(--text-3); font-weight: 600; }
.eod-cal__item--os .eod-cal__src, .eod-cal__src--os { background: var(--orange-wash); color: var(--orange-ink); }

.eod-cal-tip {
  position: fixed;
  z-index: 240;
  width: min(640px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line-1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
.eod-cal-tip[hidden] { display: none !important; }
.eod-cal-tip .eod-feed__card { margin: 0; border: none; box-shadow: none; }
/* Read-only preview: its buttons live outside #app, where actions aren't delegated. */
.eod-cal-tip .eod-feed__card-actions { display: none; }
.eod-cal-tip button { pointer-events: none; }
.eod-cal-tip__msg { padding: 16px 18px; font-size: 13px; color: var(--text-3); }

@media (max-width: 760px) {
  .eod-cal__monthnav, .eod-cal__project, .eod-cal__types { height: 44px; }
  .eod-cal__monthnav { flex: 1; }
  .eod-cal__monthbtn { flex: 1; min-width: 0; }
  .eod-cal__navbtn { width: 44px; }
  .eod-cal__project { width: 100%; }
  .eod-cal__types { width: 100%; justify-content: space-between; overflow-x: auto; }
  .eod-cal__grid { gap: 2px; }
  .eod-cal__cell { min-height: 64px; padding: 4px 3px; }
  .eod-cal__wd { padding: 2px; font-size: 9.5px; letter-spacing: 0.02em; }
  .eod-cal__count--muted { display: none; }
  .eod-cal__count { font-size: 9.5px; }
  .eod-cal__flag { display: none; }
  .eod-cal__mark { font-size: 12px; }
  .eod-cal__who { display: none; }
  .eod-cal__text { -webkit-line-clamp: 3; }
  .eod-cal__item { font-size: 9.5px; padding: 2px 3px; }
  .eod-cal__src { display: none; }
  .eod-cal__item--wa { box-shadow: inset 2px 0 0 var(--success-ink); }
  .eod-cal__item--os { box-shadow: inset 2px 0 0 var(--orange-ink); }
}

/* Settings → Company account (SaaS): billing, web address, email sending, modules, data export, activity.
   docs/02-saas-platform/02.15. */
.ca-card { display: flex; flex-direction: column; gap: 12px; }
.ca-h { font-weight: 800; font-size: 15px; }
.ca-muted { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ca-fine { font-size: 12px; }
.ca-bad { color: var(--danger-ink); font-size: 12.5px; }
.ca-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.ca-break { word-break: break-all; }
.ca-nowrap { white-space: nowrap; }
.ca-num { text-align: right; white-space: nowrap; }
.ca-msg { font-size: 12.5px; color: var(--success-ink); background: var(--success-wash-2); border-radius: 9px; padding: 9px 12px; }
.ca-msg.is-bad { color: var(--danger-ink); background: var(--danger-wash); }
.ca-note { font-size: 12.5px; line-height: 1.5; background: var(--info-wash); color: var(--info-ink); border-radius: 9px; padding: 10px 12px; }
.ca-note--warn { background: var(--warning-tint); color: var(--warning-ink); }
.ca-btn { border: none; border-radius: 9px; padding: 9px 15px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--fill-strong); color: var(--on-fill); white-space: nowrap; }
.ca-btn:disabled { opacity: .6; cursor: default; }
.ca-btn--ghost { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); }
.ca-btn--danger { background: var(--bg-card); color: var(--danger-ink); border: 1px solid var(--danger-line, var(--border)); }
.ca-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ca-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ca-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; font-size: 12px; font-weight: 650; color: var(--muted); }
.ca-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 13px;
  background: var(--bg-card); color: var(--ink); min-width: 0; }
.ca-slug { display: flex; align-items: stretch; }
.ca-slug .ca-input { border-radius: 8px 0 0 8px; }
.ca-slug > span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-left: 0;
  border-radius: 0 8px 8px 0; background: var(--bg-soft); color: var(--muted); font-size: 12.5px; white-space: nowrap; font-weight: 500; }
.ca-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  background: var(--bg-soft); color: var(--muted); }
.ca-pill--ok { background: var(--success-wash-2); color: var(--success-ink); }
.ca-pill--info { background: var(--info-wash); color: var(--info-ink); }
.ca-pill--warn { background: var(--warning-tint); color: var(--warning-ink); }
.ca-pill--bad { background: var(--danger-wash); color: var(--danger-ink); }
.ca-billhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ca-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ca-big { font-size: 22px; font-weight: 800; margin: 2px 0 4px; }
.ca-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ca-kpis > div { border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-kpis span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ca-kpis b { font-size: 18px; font-weight: 800; }
.ca-kpis small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ca-scroll { overflow-x: auto; }
.ca-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ca-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ca-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ca-table tfoot td { font-weight: 800; border-bottom: 0; font-size: 13.5px; }
.ca-table--calc td:last-child { width: 1%; }
.ca-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ca-plan { border: 1px solid var(--border); border-radius: 12px; padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.ca-plan.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ca-plan__name { font-weight: 800; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca-plan ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.ca-plan__price { font-weight: 700; font-size: 12.5px; margin-top: auto; }
.ca-plan .ca-btn { align-self: flex-start; }
.ca-dom { border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; }
.ca-dom__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ca-dom__end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ca-guide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.55; }
.ca-copy { border: 0; background: transparent; cursor: pointer; padding: 0 2px; color: var(--muted); vertical-align: middle; }
.ca-copy .ms { font-size: 15px; }
.ca-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ca-mod { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.ca-mod b { display: block; font-size: 13px; }
.ca-mod small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ca-mod.is-locked { opacity: .55; cursor: default; }
.ca-mod input { margin-top: 2px; }
@media (max-width: 760px) { .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ca-dom__end { margin-left: 0; } }

/* ── Contract notices (docs/06-site-operations/06.15) ─────────────────────── */
.cn-wrap { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.cn-draft { display: flex; flex-direction: column; gap: 14px; }
.cn-draft__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cn-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.cn-h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 2px 0 4px; }
.cn-h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.cn-meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cn-actions { display: flex; gap: 8px; align-items: center; }
.cn-actions--wrap { flex-wrap: wrap; }
.cn-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cn-card--flat { background: var(--bg-soft); border-radius: 10px; padding: 12px; }
.cn-card--internal { border-style: dashed; background: var(--bg-soft); }
.cn-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cn-section-title .ms { font-size: 16px; }
.cn-row { display: flex; flex-direction: column; gap: 6px; }
.cn-rowlabel { font-weight: 700; font-size: 13px; }
.cn-rowfields--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cn-field { display: flex; flex-direction: column; gap: 4px; }
.cn-field--err .cn-input { border-color: var(--danger); }
.cn-label { font-size: 13px; font-weight: 600; }
.cn-req { color: var(--danger); }
.cn-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px; font-size: 14px; background: var(--bg-card); color: var(--ink); font-family: inherit; min-height: 42px; }
textarea.cn-input { resize: vertical; line-height: 1.45; }
.cn-input[readonly] { background: var(--bg-soft); }
.cn-hint { font-size: 12px; color: var(--muted); }
.cn-err { font-size: 12px; color: var(--danger); font-weight: 600; }
.cn-fixed { font-size: 12.5px; color: var(--muted); margin: 0; font-style: italic; }
.cn-suffix { display: flex; align-items: center; gap: 6px; }
.cn-suffix span { font-size: 12.5px; color: var(--muted); }
.cn-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; min-height: 36px; cursor: pointer; }
.cn-check input { width: 18px; height: 18px; }
.cn-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.cn-mini > span:first-child { color: var(--muted); }
.cn-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cn-rows { display: flex; flex-direction: column; gap: 8px; }
.cn-rowcard { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cn-rowcard__head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.cn-rowgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cn-rowgrid--recip { grid-template-columns: 1fr 1fr 1.4fr 80px auto; align-items: center; }
.cn-link { background: none; border: 0; padding: 4px 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.cn-seg { display: inline-flex; gap: 4px; background: var(--chip-bg); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.cn-seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; min-height: 36px; }
.cn-seg button.is-on { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 2px var(--shadow); }
.cn-seg--sm button { padding: 6px 10px; font-size: 12.5px; }
.cn-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--chip-bg); color: var(--ink); }
.cn-chip--ok { background: var(--success-tint); color: var(--success-ink, var(--success)); }
.cn-chip--bad { background: var(--danger-tint); color: var(--danger); }
.cn-chip--warn { background: var(--warning-tint); color: var(--warning-ink, var(--warning)); }
.cn-banner { border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--info-tint); }
.cn-banner ul { margin: 6px 0 0; padding-left: 18px; }
.cn-banner--warn { background: var(--warning-tint); color: var(--warning-ink, var(--ink)); }
.cn-banner--bad { background: var(--danger-tint); color: var(--danger); }
.cn-quote { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--border); font-style: italic; white-space: pre-wrap; }
.cn-progress { height: 6px; background: var(--chip-bg); border-radius: 999px; overflow: hidden; }
.cn-progress__bar { height: 100%; background: var(--accent); transition: width 0.2s; }
.cn-progress__steps { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.cn-progress__steps .is-done { color: var(--success-ink, var(--success)); font-weight: 700; }
.cn-empty, .cn-empty-sm { color: var(--muted); font-size: 13px; padding: 18px; text-align: center; }
.cn-empty-sm { padding: 8px 0; text-align: left; }
.cn-listrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; color: var(--ink); margin-bottom: 6px; flex-wrap: wrap; }
.cn-listrow:hover { border-color: var(--ink); }
.cn-listrow__ref { display: flex; flex-direction: column; min-width: 90px; }
.cn-listrow__main { display: flex; flex-direction: column; flex: 1; min-width: 180px; gap: 2px; }
.cn-listrow__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cn-evlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cn-evlist li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 10px; flex-wrap: wrap; }
.cn-evlist__main { flex: 1; min-width: 160px; }
.cn-bottom { display: flex; justify-content: flex-end; }
.cn-review { border: 2px solid var(--ink); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); }
.cn-review__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.cn-review__pdf iframe { width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.cn-review__mail { display: flex; flex-direction: column; gap: 10px; }
.cn-dl { display: grid; grid-template-columns: 80px 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.cn-dl dt { color: var(--muted); font-weight: 600; }
.cn-dl dd { margin: 0; word-break: break-word; }
.cn-sender-edit { margin-top: 12px; border-top: 1px solid var(--line-1); padding-top: 12px; }
.cn-body { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: var(--bg-soft); border-radius: 9px; padding: 10px; margin: 0; max-height: 360px; overflow: auto; }
.cn-att, .cn-checklist, .cn-recips, .cn-history { margin: 0; padding-left: 0; list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.cn-att li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cn-checklist li::before { content: "☐ "; }
.cn-send { align-self: stretch; justify-content: center; min-height: 48px; font-size: 14px; }
.cn-disp, .cn-resp, .cn-log { border-top: 1px solid var(--border-soft); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cn-disp__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cn-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cn-type { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--ink); cursor: pointer; min-height: 72px; }
.cn-type:hover { border-color: var(--ink); }
.cn-type span { font-size: 12px; color: var(--muted); }
.cn-picklist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; margin-top: 10px; }
.cn-pick { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--bg-card); color: var(--ink); cursor: pointer; }
.cn-pick img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.cn-pick > span:last-child { display: flex; flex-direction: column; }
.cn-methods { display: flex; gap: 14px; flex-wrap: wrap; }
.cn-modal { display: flex; flex-direction: column; gap: 10px; }
/* Notice deadlines (06.15 §5.6) */
.cn-deadline { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--bg-card); display: flex; flex-direction: column; gap: 6px; }
.cn-deadline--overdue, .cn-deadline--issued_late { border-color: var(--danger); background: var(--danger-tint); }
.cn-deadline--unverified, .cn-deadline--needs_trigger, .cn-deadline--due_today, .cn-deadline--due_soon { border-color: var(--warning); background: var(--warning-tint); }
.cn-deadline__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cn-deadline__head b { font-size: 14px; }
.cn-deadline details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.cn-steps { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.cn-internal-target { color: var(--muted); font-size: 12.5px; border-top: 1px dashed var(--border); padding-top: 6px; }
.cn-fu-group { display: flex; flex-direction: column; gap: 6px; }
.cn-fu-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-card); }
.cn-fu-row__main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cn-fu-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cn-fu-count { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-card); display: flex; flex-direction: column; }
.cn-fu-count b { font-size: 20px; }
.cn-fu-count--bad b { color: var(--danger); }
.cn-ev-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
@media (max-width: 760px) {
  .cn-review__grid { grid-template-columns: 1fr; }
  .cn-review__pdf iframe { height: 60vh; }
  .cn-rowgrid--recip { grid-template-columns: 1fr 1fr; }
  .cn-actions { flex-wrap: wrap; }
  .cn-card { padding: 14px; }
}

/* Contract notices — pick instead of type (06.15 §14) */
.cn-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cn-pick-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 30px; }
.cn-pick-btn .ms { font-size: 15px; }
.cn-pick-btn:hover { border-color: var(--ink); }
.cn-pick--opt { cursor: pointer; align-items: flex-start; }
.cn-pick--opt input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.cn-pick--opt > span { display: flex; flex-direction: column; gap: 2px; }
.cn-picklist--sm { max-height: 26vh; }

/* Contract notices — talk to create notice (06.15 §16) */
.cn-voice { border: 2px solid var(--accent); }
.cn-voice__log { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.cn-voice__turn { display: flex; }
.cn-voice__turn span { padding: 8px 11px; border-radius: 12px; font-size: 13.5px; max-width: 85%; white-space: pre-wrap; }
.cn-voice__turn--assistant span { background: var(--bg-soft); }
.cn-voice__turn--pm { justify-content: flex-end; }
.cn-voice__turn--pm span { background: var(--ink); color: var(--on-ink); }
.cn-voice__controls { display: flex; flex-direction: column; gap: 8px; }
.cn-voice__mic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; }
.cn-voice__mic.is-on { background: var(--danger); color: #fff; border-color: var(--danger); }
.cn-voice__type { display: flex; gap: 8px; }
.cn-voice__type .cn-input { flex: 1; }

/* ── Video tutorials (views/tutorials.js, core/tutorialPlayer.js, docs/02-saas-platform/02.19) ── */
html.tut-lock, html.tut-lock body { overflow: hidden; }
.tut-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8, 12, 18, 0.72); backdrop-filter: blur(3px);
}
.tut-card {
  width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: flex; flex-direction: column;
  background: var(--bg-card); color: var(--text-1); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.tut-head { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px 14px; }
.tut-titles { flex: 1; min-width: 0; }
.tut-kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; }
.tut-kicker .ms { font-size: 18px; }
.tut-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-top: 4px; line-height: 1.25; }
.tut-desc { font-size: 13.5px; color: var(--text-3); margin-top: 4px; line-height: 1.45; }
.tut-x {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-card); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.tut-stage { background: #000; aspect-ratio: 16 / 9; width: 100%; min-width: 0; }
.tut-video { display: block; width: 100%; height: 100%; background: #000; border: 0; }
.tut-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px 18px; }
.tut-tick { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tut-tick input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.tut-hint { font-size: 12.5px; color: var(--text-4); flex: 1; min-width: 200px; }
.tut-done {
  margin-left: auto; border: none; border-radius: 10px; padding: 11px 20px; font-size: 14px; font-weight: 700;
  background: var(--text-1); color: var(--bg-card); cursor: pointer; min-height: 44px;
}

/* Player body: the video, with the chapter list beside it on wide screens. */
.tut-body { display: grid; grid-template-columns: minmax(0, 1fr); background: #000; }
.tut-card--chapters { width: min(1240px, 100%); }
.tut-card--chapters .tut-body { grid-template-columns: minmax(0, 1fr) 300px; }
.tut-chapters { background: var(--bg-card); border-left: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; }
.tut-chapters-head { padding: 14px 16px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
.tut-chapters ol { list-style: none; margin: 0; padding: 0 8px 10px; overflow: auto; flex: 1; }
.tut-chapters button {
  display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 8px; border-radius: 10px; font: inherit; color: var(--text-2); cursor: pointer;
}
.tut-chapters button:hover { background: var(--surface-3); }
.tut-chapters button.is-on { background: var(--surface-4); color: var(--text-1); }
.tut-chapters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tut-chapter-at { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--accent-ink, var(--text-3)); }
.tut-chapter-title { font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.tut-kicker-dot { margin: 0 2px; }

/* Library: thumbnails */
.tut-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0c1a24 center / cover no-repeat;
}
.tut-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); }
.tut-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); color: #101316;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform .18s ease, background .18s ease;
}
.tut-play .ms { font-size: 32px; margin-left: 2px; }
.tut-thumb--big .tut-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--accent); color: var(--on-accent, #101316); }
.tut-thumb--big .tut-play .ms { font-size: 44px; }
.tut-dur {
  position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  background: rgba(0, 0, 0, 0.78); color: #fff; font-variant-numeric: tabular-nums;
}

/* Library: the "Start here" video */
.tut-feature {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin-bottom: 26px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.tut-feature-media {
  display: flex; align-items: center; padding: 0; border: 0; background: #0c1a24; cursor: pointer; min-width: 0;
}
/* Always 16:9, like the video: never stretched to the card's height (that blurred the still). */
.tut-feature-media .tut-thumb { width: 100%; aspect-ratio: 16 / 9; }
.tut-feature-media:hover .tut-play { transform: scale(1.06); }
.tut-feature-media:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tut-feature-body { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; min-width: 0; }
.tut-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-4); color: var(--text-2);
}
.tut-badge .ms { font-size: 15px; }
.tut-feature-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--text-1); }
.tut-feature-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.tut-points { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.tut-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.tut-points .ms { font-size: 18px; color: var(--success-ink, var(--accent)); flex-shrink: 0; margin-top: 0; }
.tut-feature-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.tut-watch {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px 0 14px; border: 0; border-radius: 999px;
  background: var(--text-1); color: var(--bg-card); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tut-watch .ms { font-size: 22px; }
.tut-watch:hover { opacity: .9; }
.tut-meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-4); font-weight: 600; }
.tut-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.tut-meta .ms { font-size: 16px; }

/* Library: the other videos */
.tut-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.tut-section-head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-1); }
.tut-section-head span { font-size: 12.5px; color: var(--text-4); }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tut-tile {
  display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line-2);
  border-radius: 16px; background: var(--bg-card); color: var(--text-1); cursor: pointer; overflow: hidden; font: inherit;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tut-tile:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); transform: translateY(-2px); border-color: var(--line-3, var(--line-2)); }
.tut-tile:hover .tut-play { transform: scale(1.08); }
.tut-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tut-tile-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.tut-tile-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.tut-tile-desc {
  font-size: 13px; color: var(--text-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tut-tile .tut-meta { margin-top: auto; padding-top: 4px; }
.tut-tile--compact .tut-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.tut-tile--compact .tut-play .ms { font-size: 28px; }
.tut-tile--compact .tut-tile-text { padding: 12px 14px 14px; }
.tut-tile--compact .tut-tile-title { font-size: 14px; }
.tut-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 200px; padding: 20px; border: 1.5px dashed var(--line-3, var(--line-2)); border-radius: 16px; color: var(--text-4); font-size: 13px;
}
.tut-soon .ms { font-size: 32px; color: var(--text-10, var(--text-4)); }
.tut-soon b { color: var(--text-2); font-size: 14px; }

.tut-strip { background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.tut-strip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tut-strip-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.tut-strip-sub { font-size: 13px; color: var(--text-4); margin-top: 3px; }
.tut-strip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tut-link {
  display: inline-flex; align-items: center; gap: 2px; border: none; background: none; padding: 0;
  color: var(--info-ink-5, var(--text-2)); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tut-link .ms { font-size: 18px; }

.tut-empty { padding: 40px 12px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.tut-empty .ms { display: block; font-size: 36px; color: var(--text-10); margin-bottom: 8px; }
.tut-msg { font-size: 13px; color: var(--danger-ink); margin-bottom: 12px; }
.tut-hidden-note { margin-top: 22px; font-size: 13px; color: var(--text-4); display: flex; flex-direction: column; gap: 6px; }
.tut-hidden-note > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tut-hidden-note .ms { font-size: 17px; }

@media (max-width: 980px) {
  .tut-card--chapters .tut-body { grid-template-columns: minmax(0, 1fr); }
  .tut-chapters { border-left: 0; border-top: 1px solid var(--line-2); max-height: 220px; }
  .tut-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tut-overlay { padding: 0; align-items: stretch; }
  .tut-card { border-radius: 0; max-height: none; height: 100%; justify-content: flex-start; }
  .tut-strip-row { grid-template-columns: 1fr; }
  .tut-title { font-size: 17px; }
  .tut-hint { min-width: 0; }
  .tut-feature-body { padding: 18px; }
  .tut-feature-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-tile, .tut-play { transition: none; }
  .tut-tile:hover { transform: none; }
}


/* Ideal Sales Follow Ups — same page frame, table and buttons as Tendering. */
.sales-follow-ups { font-size:13px; line-height:1.5; color:var(--ink); min-width:0; }
.sales-follow-ups h3, .sales-mail-settings h3 { font-size:15px; margin:0 0 12px; color:var(--ink); }
.sales-follow-ups .sf-card,
.sales-mail-settings.sf-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; margin-bottom:14px;
}
.sales-follow-ups .sf-grid { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.sales-follow-ups .sf-field { display:grid; gap:4px; flex:1 1 180px; min-width:160px; margin-bottom:0; font-size:11.5px; font-weight:700; color:var(--muted); }
.sales-follow-ups .sf-grid > .leave-btn { flex:0 0 auto; align-self:flex-end; margin-bottom:0; }
.sales-follow-ups .sf-field input,
.sales-follow-ups .sf-field select,
.sales-follow-ups .sf-field textarea { width:100%; box-sizing:border-box; }
.sales-follow-ups .sf-field textarea { resize:vertical; min-height:88px; }
.sales-follow-ups .sf-note { margin:0 0 12px; color:var(--muted); font-size:13px; }
.sales-follow-ups .sf-board { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0 0 14px; }
.sales-follow-ups button.sf-kpi { appearance:none; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.sales-follow-ups button.sf-kpi:hover { border-color:var(--ink); }
.sales-follow-ups .sf-kpi--bad .r-kpi__value { color:var(--danger-ink); }
.sales-follow-ups .sf-owners { display:grid; gap:8px; margin-top:10px; }
.sales-follow-ups .sf-owners div { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.sales-follow-ups .sf-owners strong { font-weight:750; }
.sales-follow-ups .sf-detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
@media (max-width: 900px) {
  .sales-follow-ups .sf-board { grid-template-columns:1fr; }
}
.sales-follow-ups .sf-detail-actions .leave-btn { flex:0 0 auto; }
.sales-follow-ups .sf-back { display:block; border:0; background:transparent; color:var(--muted); font-size:12.5px; font-weight:650; cursor:pointer; padding:0 0 8px; }
.sales-follow-ups .sf-back:hover { color:var(--accent); }
.sales-follow-ups .sf-textbtn {
  border:0; background:transparent; padding:0; font:inherit; font-weight:700;
  color:var(--ink); cursor:pointer; text-align:left; text-decoration:none;
}
.sales-follow-ups .sf-textbtn:hover { color:var(--accent); }
.sales-follow-ups .sf-info__extra { display:block; margin-top:2px; color:var(--muted); font-size:12px; white-space:nowrap; }
.sales-follow-ups .sf-due + .sf-due { margin-top: 6px; }
.sales-follow-ups .sf-due--missed {
  display: block;
  width: fit-content;
  color: var(--danger-ink, var(--danger));
  font-weight: 700;
  background: var(--danger-wash);
  border-radius: 6px;
  padding: 2px 6px;
}
/* Dates inside one tender stay a list. The row break is a page-coloured gutter,
   wider than that list, so the next tender reads as a separate block. */
.sales-follow-ups .sf-table tbody td {
  border-bottom: 12px solid var(--bg);
  padding-top: 16px;
  padding-bottom: 16px;
}
.sales-follow-ups .sf-table tbody tr:last-child td { border-bottom-width: 0; }
.sales-follow-ups .sf-comm { padding:14px 0; border-bottom:1px solid var(--border-soft); }
.sales-follow-ups .sf-summary {
  display:block; width:100%; margin:8px 0 0; padding:0; border:0; background:transparent;
  font:inherit; font-weight:700; line-height:1.45; color:var(--ink); text-align:left; cursor:pointer;
}
.sales-follow-ups .sf-summary:hover { color:var(--accent); }
.sales-follow-ups .sf-row--overdue td { background:var(--danger-wash); }
.sales-follow-ups .sf-table tbody tr:not(.sf-row--overdue) td { background: var(--bg-card); }
.sales-follow-ups .leave-table td { vertical-align:top; }
.sales-follow-ups .leave-actions { justify-content:flex-start; }
.sales-follow-ups details { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.sales-follow-ups summary { cursor:pointer; color:var(--ink); font-weight:700; }
.sales-follow-ups .sf-method {
  width:100%; min-width:124px; box-sizing:border-box;
  border:1px solid var(--border); border-radius:8px; padding:6px 8px;
  font-size:13px; font-weight:600; background:var(--bg-card); color:var(--ink);
}
.sales-follow-ups .sf-stage {
  display:inline-flex; align-items:center; margin-top:6px; border-radius:999px;
  padding:2px 8px; font-size:11px; font-weight:700; letter-spacing:0.01em;
}
.sales-follow-ups .sf-stage--in_progress { background:var(--amber-wash); color:var(--amber-ink); }
.sales-follow-ups .sf-stage--sent { background:var(--info-wash-2); color:var(--info-ink-alt); }
.sales-follow-ups .sf-stage--won { background:var(--success-wash-2); color:var(--success-ink); }
.sales-follow-ups .sf-stage--lost { background:var(--danger-wash); color:var(--danger-ink); }
.sales-follow-ups .sf-stage--unknown { background:var(--surface-3); color:var(--text-4); }
.sales-follow-ups .sf-track { display:block; margin-top:6px; max-width:280px; font-size:12px; font-weight:600; color:var(--ink); }
.sales-follow-ups .sf-card > .sf-track { max-width:none; }
.sales-follow-ups .sf-track--confirm { color:var(--danger-ink); }
.sales-follow-ups .sf-track__note { display:block; margin-top:2px; font-weight:500; color:var(--muted); }
.sales-follow-ups .sf-track .sf-textbtn { display:inline-block; margin-top:4px; }
.sf-mail-read { padding-right: 36px; }
.sf-mail-read__subject { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.sf-mail-read__who { margin: 0 0 4px; font-size: 13px; overflow-wrap: anywhere; }
.sf-mail-read__who span { display: inline-block; width: 42px; color: var(--muted); }
.sf-mail-read__summary { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--chip-bg); }
.sf-mail-read__body { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.sales-follow-ups .sf-history-open { margin-top:8px; }
.sf-history-modal { display:grid; gap:0; margin-top:8px; }
.sf-history-modal__item { padding:14px 0; border-top:1px solid var(--border-soft); }
.sf-history-modal__item:first-child { border-top:0; padding-top:4px; }
.sf-history-modal__section .sf-history-modal__item:first-of-type { border-top:0; padding-top:4px; }
.sf-history-modal__meta { font-size:12.5px; color:var(--muted); font-weight:600; }
.sf-history-modal__what { margin-top:2px; font-weight:700; }
.sf-history-modal__line { display:grid; grid-template-columns:minmax(120px, 180px) 1fr; gap:8px 16px; margin-top:8px; font-size:14px; }
.sf-history-modal__line span { color:var(--muted); font-weight:600; }
.sf-history-modal__line strong { font-weight:600; overflow-wrap:anywhere; }
.sf-history-modal__section { margin-top:18px; }
.sf-history-modal__section h4 { margin:0 0 4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.sf-history-modal__section .sf-summary { margin-top:4px; }
@media (max-width: 620px) {
  .sf-history-modal__line { grid-template-columns:1fr; gap:2px; }
}
.sales-follow-ups .sf-history__item { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-soft); }
.sales-follow-ups .sf-history__meta { margin-bottom:2px; font-weight:600; }
.sales-follow-ups .sf-history .sf-history__what { color:var(--ink); font-weight:700; }
.sales-follow-ups .sf-history .sf-history__line { color:var(--ink); font-weight:500; }
.sales-follow-ups .sf-history__line span { color:var(--muted); font-weight:600; }
.sales-follow-ups .sf-history__line span::after { content:': '; }
.sales-mail-settings .sf-check {
  display:flex; align-items:center; gap:8px; min-height:38px; margin:0;
  font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.et-tabs {
  display:inline-flex; align-items:center; gap:4px; margin-bottom:16px;
  background:var(--chip-bg); border:1px solid var(--border); border-radius:11px; padding:3px;
}
.et-tab {
  border:0; background:transparent; border-radius:8px; padding:7px 12px;
  font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer;
}
.et-tab.is-active { background:var(--ink); color:var(--bg); }
html[data-theme="dark"] .et-tab.is-active { background:#0e639c; color:#fff; }
.sales-mail-settings .sf-mail-progress { display:grid; gap:12px; margin:0 0 18px; }
.sales-mail-settings .sf-mail-progress__box {
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg);
}
.sales-mail-settings .sf-mail-progress__box h4 { margin:0; font-size:14px; }
.sales-mail-settings .sf-mail-progress__headline { margin:4px 0 0; font-size:13px; font-weight:700; }
.sales-mail-settings .sf-mail-progress__box--ok .sf-mail-progress__headline { color:var(--success-ink); }
.sales-mail-settings .sf-mail-progress__box--wait .sf-mail-progress__headline { color:var(--amber-ink); }
.sales-mail-settings .sf-mail-progress__box--bad .sf-mail-progress__headline { color:var(--danger-ink); }
.sales-mail-settings .sf-mail-progress__error { margin:10px 0 0; color:var(--danger-ink); font-size:12.5px; }
.sales-mail-settings .sf-mail-facts {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px 16px; margin:12px 0 0;
}
.sales-mail-settings .sf-mail-facts div { display:grid; gap:2px; }
.sales-mail-settings .sf-mail-facts dt { font-size:11px; font-weight:700; color:var(--muted); }
.sales-mail-settings .sf-mail-facts dd { margin:0; font-size:13px; font-weight:650; color:var(--ink); }
.sales-mail-settings .sf-mail-progress__next { margin:8px 0 0; font-size:13px; font-weight:600; }
.sales-mail-settings .sf-mail-steps { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.sales-mail-settings .sf-mail-steps__item { display:grid; gap:2px; padding-left:12px; border-left:3px solid var(--border); }
.sales-mail-settings .sf-mail-steps__item strong { font-size:13px; }
.sales-mail-settings .sf-mail-steps__item span { color:var(--muted); font-size:12.5px; }
.sales-mail-settings .sf-mail-steps__item--current { border-left-color:var(--amber-ink); }
.sales-mail-settings .sf-mail-steps__item--done { border-left-color:var(--success-ink); }
.sales-mail-settings .sf-mail-steps__item--wait { border-left-color:var(--border); }
.sales-mail-settings .sf-mail-bar { height:8px; margin-top:12px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.sales-mail-settings .sf-mail-bar span { display:block; height:100%; background:var(--success-ink); }
.sales-mail-settings .sf-mail-issues { margin-top:16px; }
.sales-mail-settings .sf-mail-issues__causes,
.sales-mail-settings .sf-mail-issues__detail { margin:8px 0 12px; padding-left:18px; }
.sales-mail-settings .sf-mail-issues__detail li { margin:8px 0; }
.sales-mail-settings .sf-mail-add,
.sales-mail-settings .sf-mail-flags,
.sales-mail-settings .sf-mail-meta,
.sales-mail-settings .sf-mail-actions {
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
}
.sales-mail-settings .sf-mail-add { margin-bottom:14px; }
.sales-mail-settings .sf-mail-add .sf-field { flex:1 1 280px; margin-bottom:0; }
.sales-mail-settings .sf-mail-add .leave-btn,
.sales-mail-settings .sf-mail-actions .leave-btn,
.sales-mail-settings .sf-mail-row .leave-btn { flex:0 0 auto; align-self:flex-end; }
.sales-mail-settings .sf-mail-row {
  display:grid; gap:12px; align-items:end;
  grid-template-columns:minmax(180px,1.4fr) minmax(160px,1.2fr) minmax(150px,1fr) 158px auto auto;
  padding:12px 0; border-top:1px solid var(--border);
}
.sales-mail-settings .sf-mail-row .sf-field { margin-bottom:0; min-width:0; }
.sales-mail-settings .sf-mail-row .sf-check,
.sales-mail-settings .sf-mail-row .leave-btn { width:max-content; justify-self:start; }
.sales-mail-settings .sf-mail-flags { align-items:center; margin-top:16px; }
.sales-mail-settings .sf-mail-meta { margin-top:14px; }
.sales-mail-settings .sf-mail-meta .sf-field { flex:1 1 280px; max-width:420px; margin-bottom:0; }
.sales-mail-settings .sf-mail-meta .sf-field--narrow { flex:0 1 180px; max-width:180px; }
.sales-mail-settings .sf-mail-actions { align-items:center; margin-top:14px; }
@media (max-width: 1100px) {
  .sales-mail-settings .sf-mail-row { grid-template-columns:1fr 1fr; }
  .sales-mail-settings .sf-mail-meta .sf-field,
  .sales-mail-settings .sf-mail-meta .sf-field--narrow { max-width:none; flex:1 1 100%; }
}