:root {
  color-scheme: light;
  --bg: #eaf1f7;
  --bg-soft: #f7fafc;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --text: #142132;
  --muted: #5f7288;
  --line: #cbd8e6;
  --accent: #2563eb;
  --on-accent: #ffffff;
  --accent-contrast: var(--on-accent);
  --accent-surface: color-mix(in srgb, var(--accent), var(--panel-solid) 18%);
  --on-accent-surface: var(--text);
  --danger: #b91c1c;
  --on-danger: #ffffff;
  --success: #047857;
  --on-success: #ffffff;
  --warning: #b45309;
  --on-warning: #ffffff;
  --action-primary-bg: var(--accent);
  --action-primary-fg: var(--on-accent);
  --action-primary-border: var(--accent);
  --action-secondary-bg: color-mix(in srgb, var(--panel-solid), var(--bg) 12%);
  --action-secondary-fg: var(--accent);
  --action-secondary-border: var(--line);
  --action-danger-bg: var(--danger);
  --action-danger-fg: var(--on-danger);
  --action-danger-border: var(--danger);
  --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.1);
  --shadow-card: 0 16px 34px rgba(15, 23, 42, 0.09);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09111d;
  --bg-soft: #0d1726;
  --panel: rgba(18, 28, 43, 0.84);
  --panel-solid: #121d2c;
  --text: #f3f7fb;
  --muted: #9fb1c8;
  --line: rgba(112, 137, 170, 0.28);
  --accent: #74b0ff;
  --on-accent: #07111f;
  --danger: #fca5a5;
  --on-danger: #3b0b13;
  --success: #6ee7b7;
  --on-success: #06271f;
  --warning: #fbbf24;
  --on-warning: #332200;
  --shadow-soft: 0 22px 52px rgba(1, 6, 14, 0.5);
  --shadow-card: 0 14px 32px rgba(1, 6, 14, 0.42);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 26rem),
    radial-gradient(circle at 85% 10%, rgba(15, 118, 110, 0.1), transparent 23rem),
    radial-gradient(circle at 50% 100%, rgba(251, 191, 36, 0.05), transparent 30rem),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #132235;
  --bg-soft: #1a2d43;
  --panel: rgba(30, 47, 67, 0.9);
  --panel-solid: #20364d;
  --text: #f3f7fb;
  --muted: #b3c2d3;
  --line: rgba(165, 184, 209, 0.32);
  --accent: #f09a58;
  --on-accent: #07111f;
  --danger: #fca5a5;
  --on-danger: #3b0b13;
  --success: #6ee7b7;
  --on-success: #06271f;
  --warning: #fbbf24;
  --on-warning: #332200;
  --shadow-soft: 0 20px 46px rgba(6, 14, 24, 0.4);
  --shadow-card: 0 12px 28px rgba(6, 14, 24, 0.34);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root:not([data-theme="dark"]):not([data-theme="night"]) body.brand-nookfox {
  --bg: #f1f1f1;
  --bg-soft: #f4e7d0;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #ffffff;
  --text: #102d46;
  --muted: #5c6e7d;
  --line: rgba(0, 48, 88, 0.2);
  --accent: #bf5328;
  --warning: #de7d2f;
  background:
    radial-gradient(circle at top left, rgba(222, 125, 47, 0.16), transparent 27rem),
    radial-gradient(circle at 88% 8%, rgba(0, 48, 88, 0.11), transparent 24rem),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
}

:root[data-theme="dark"] body.brand-nookfox {
  --bg: #061522;
  --bg-soft: #0a2740;
  --panel: rgba(9, 35, 55, 0.94);
  --panel-solid: #0d2b44;
  --text: #fffaf2;
  --muted: #bfd0df;
  --line: rgba(181, 205, 225, 0.28);
  --accent: #de7d2f;
  --warning: #f4b45f;
  background:
    radial-gradient(circle at top left, rgba(222, 125, 47, 0.18), transparent 27rem),
    radial-gradient(circle at 88% 8%, rgba(244, 231, 208, 0.08), transparent 24rem),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
}

:root[data-theme="night"] body.brand-nookfox {
  --bg: #132235;
  --bg-soft: #1a2d43;
  --panel: rgba(30, 47, 67, 0.92);
  --panel-solid: #20364d;
  --text: #fffaf2;
  --muted: #c3cfda;
  --line: rgba(181, 205, 225, 0.32);
  --accent: #f09a58;
  --warning: #f4b45f;
  background:
    radial-gradient(circle at top left, rgba(240, 154, 88, 0.16), transparent 27rem),
    radial-gradient(circle at 88% 8%, rgba(168, 196, 218, 0.1), transparent 24rem),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
}

:root[data-color-scheme] body.brand-nookfox {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent), transparent 84%), transparent 27rem),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--scheme-secondary, var(--text)), transparent 89%), transparent 24rem),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
}

:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="ocean"] body.brand-nookfox { --bg:#e8f5fb;--bg-soft:#dff2fb;--panel:rgba(255,255,255,.88);--panel-solid:#fff;--text:#0b2940;--muted:#526f82;--line:rgba(3,105,161,.22);--accent:#0369a1;--scheme-secondary:#0891b2; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="forest"] body.brand-nookfox { --bg:#edf7ee;--bg-soft:#dff0e1;--panel:rgba(255,255,255,.88);--panel-solid:#fff;--text:#173322;--muted:#5b7363;--line:rgba(21,128,61,.22);--accent:#15803d;--scheme-secondary:#65a30d; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="plum"] body.brand-nookfox { --bg:#f6effb;--bg-soft:#eee1f8;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#321645;--muted:#765f83;--line:rgba(126,34,206,.2);--accent:#7e22ce;--scheme-secondary:#be185d; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="slate"] body.brand-nookfox { --bg:#edf1f5;--bg-soft:#e2e8f0;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#1e293b;--muted:#64748b;--line:rgba(71,85,105,.23);--accent:#475569;--scheme-secondary:#0f766e; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="sunrise"] body.brand-nookfox { --bg:#fff4e6;--bg-soft:#ffead2;--panel:rgba(255,253,249,.9);--panel-solid:#fffdf9;--text:#431b0b;--muted:#815f4e;--line:rgba(194,65,12,.22);--accent:#c2410c;--scheme-secondary:#ca8a04; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="rose"] body.brand-nookfox { --bg:#fff0f6;--bg-soft:#fce2ee;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#43152a;--muted:#815f70;--line:rgba(190,24,93,.2);--accent:#be185d;--scheme-secondary:#9333ea; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="indigo"] body.brand-nookfox { --bg:#eff0ff;--bg-soft:#e3e5fb;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#20234f;--muted:#64688d;--line:rgba(79,70,229,.22);--accent:#4f46e5;--scheme-secondary:#7c3aed; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="teal"] body.brand-nookfox { --bg:#e8faf6;--bg-soft:#d9f2ed;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#123b38;--muted:#577a76;--line:rgba(15,118,110,.22);--accent:#0f766e;--scheme-secondary:#0284c7; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="cherry"] body.brand-nookfox { --bg:#fff0f0;--bg-soft:#fee2e2;--panel:rgba(255,250,250,.92);--panel-solid:#fffafa;--text:#451a1a;--muted:#866060;--line:rgba(185,28,28,.22);--accent:#b91c1c;--scheme-secondary:#be185d; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="gold"] body.brand-nookfox { --bg:#fff9e8;--bg-soft:#fef1c2;--panel:rgba(255,253,245,.92);--panel-solid:#fffdf5;--text:#3d2b08;--muted:#7e704f;--line:rgba(161,98,7,.23);--accent:#a16207;--scheme-secondary:#c2410c; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="evergreen"] body.brand-nookfox { --bg:#eaf8ef;--bg-soft:#daf3e2;--panel:rgba(251,255,252,.92);--panel-solid:#fbfffc;--text:#12351f;--muted:#567562;--line:rgba(22,101,52,.23);--accent:#166534;--scheme-secondary:#0f766e; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="midnight"] body.brand-nookfox { --bg:#e7edf4;--bg-soft:#d9e2ec;--panel:rgba(248,250,252,.92);--panel-solid:#f8fafc;--text:#172033;--muted:#5e6c80;--line:rgba(51,65,85,.24);--accent:#334155;--scheme-secondary:#2563eb; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="lavender"] body.brand-nookfox { --bg:#f2efff;--bg-soft:#e8e2fc;--panel:rgba(255,255,255,.9);--panel-solid:#fff;--text:#2d2050;--muted:#70648e;--line:rgba(109,40,217,.21);--accent:#6d28d9;--scheme-secondary:#be185d; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-color-scheme="coral"] body.brand-nookfox { --bg:#fff0f2;--bg-soft:#ffe1e5;--panel:rgba(255,250,250,.92);--panel-solid:#fffafa;--text:#421d25;--muted:#82636a;--line:rgba(194,65,93,.22);--accent:#c2415d;--scheme-secondary:#c2410c; }

:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme] body.brand-nookfox { --bg:#132235;--bg-soft:#1a2d43;--panel:rgba(30,47,67,.92);--panel-solid:#20364d;--text:#f4f7fb;--muted:#b3c2d3;--line:rgba(165,184,209,.32); }
:root[data-theme="dark"][data-color-scheme] body.brand-nookfox { --bg:#09131f;--bg-soft:#0d1b2a;--panel:rgba(17,29,44,.94);--panel-solid:#122033;--muted:#a8b5c7;--line:rgba(165,184,209,.27); }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="ocean"] body.brand-nookfox { --accent:#67c7f2;--scheme-secondary:#22d3ee; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="forest"] body.brand-nookfox { --accent:#76d991;--scheme-secondary:#a3e635; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="plum"] body.brand-nookfox { --accent:#d8a4ff;--scheme-secondary:#f9a8d4; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="slate"] body.brand-nookfox { --accent:#b8c5d6;--scheme-secondary:#5eead4; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="sunrise"] body.brand-nookfox { --accent:#fb9b66;--scheme-secondary:#facc15; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="rose"] body.brand-nookfox { --accent:#f7a3c7;--scheme-secondary:#d8b4fe; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="indigo"] body.brand-nookfox { --accent:#a5b4fc;--scheme-secondary:#c4b5fd; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="teal"] body.brand-nookfox { --accent:#5eead4;--scheme-secondary:#7dd3fc; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="cherry"] body.brand-nookfox { --accent:#fca5a5;--scheme-secondary:#f9a8d4; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="gold"] body.brand-nookfox { --accent:#facc15;--scheme-secondary:#fb923c; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="evergreen"] body.brand-nookfox { --accent:#86efac;--scheme-secondary:#5eead4; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="midnight"] body.brand-nookfox { --accent:#cbd5e1;--scheme-secondary:#93c5fd; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="lavender"] body.brand-nookfox { --accent:#c4b5fd;--scheme-secondary:#f0abfc; }
:root:is([data-theme="dark"],[data-theme="night"])[data-color-scheme="coral"] body.brand-nookfox { --accent:#fda4af;--scheme-secondary:#fdba74; }

:root[data-color-scheme="custom"][data-color-scheme] body.brand-nookfox { --accent:var(--custom-accent,#bf5328);--bg:var(--custom-background,#f1f1f1);--bg-soft:var(--custom-background,#f1f1f1);--panel:var(--custom-surface,#fff);--panel-solid:var(--custom-surface,#fff);--text:var(--custom-text,#102d46);--muted:color-mix(in srgb,var(--custom-text,#102d46),transparent 35%);--line:color-mix(in srgb,var(--custom-text,#102d46),transparent 76%);--scheme-secondary:var(--custom-accent,#bf5328); }
:root[data-color-scheme="custom"][data-color-scheme] body.brand-nookfox { --on-accent:var(--custom-on-accent,var(--text)); }

a {
  color: var(--accent);
}

.page {
  max-width: none;
  margin: 0 auto;
  padding: 18px 16px 26px;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.nav-row,
.app-bar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.app-bar {
  background:
    linear-gradient(90deg, var(--accent) 0 6px, transparent 6px),
    color-mix(in srgb, var(--panel), var(--bg) 16%);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 68%);
  border-radius: 18px;
  box-shadow: var(--glass-highlight), var(--shadow-card);
  padding: 10px 12px 10px 16px;
  position: relative;
  width: 100%;
  z-index: 240;
}

.main-nav {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
}

.app-home-title {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 5px 4px;
  text-decoration: none;
  white-space: nowrap;
}

.home-switcher {
  flex: 0 0 auto;
  position: relative;
}

.home-switcher-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--panel-solid), var(--accent) 7%);
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 55%);
  border-radius: 11px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  height: 38px;
  justify-content: center;
  padding: 0;
  width: 38px;
}

.home-switcher-toggle span {
  background: var(--accent);
  border-radius: 999px;
  display: block;
  height: 2px;
  transition: transform .18s ease, width .18s ease;
  width: 18px;
}

.home-switcher-toggle span:nth-child(2) { width: 13px; }
.home-switcher-toggle[aria-expanded="true"] span:nth-child(2) { width: 18px; }

.home-switcher-menu {
  background: var(--panel-solid);
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%);
  border-radius: 15px;
  box-shadow: 0 18px 48px rgba(10, 31, 49, .24);
  display: grid;
  gap: 10px;
  left: 0;
  max-height: min(680px, calc(100vh - 92px));
  min-width: 0;
  overflow-y: auto;
  padding: 14px;
  position: absolute;
  top: calc(100% + 9px);
  width: min(370px, calc(100vw - 24px));
  z-index: 520;
}

.home-switcher-menu[hidden] { display: none; }
.home-switcher-heading { align-items: center; display: flex; justify-content: space-between; }
.home-switcher-heading small, .home-switcher-theme-note, .home-switcher-limit { color: var(--muted); font-size: .76rem; }
.home-switcher-menu nav { display: grid; gap: 5px; }
.home-switcher-row { align-items: center; border: 1px solid transparent; border-radius: 10px; display: grid; gap: 4px; grid-template-columns: 26px minmax(0, 1fr) auto; padding: 2px; position: relative; }
.home-switcher-row:hover, .home-switcher-row.is-current { background: color-mix(in srgb, var(--accent), var(--panel-solid) 92%); border-color: color-mix(in srgb, var(--accent), var(--line) 58%); }
.home-switcher-row.is-dragging { opacity: .55; }
.home-switcher-choice { align-items: center; color: var(--text); display: flex; justify-content: space-between; min-width: 0; padding: 9px 4px; text-decoration: none; }
.home-switcher-choice small { color: var(--accent); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.home-drag-handle, .home-row-lock { align-items: center; background: transparent; border: 0; color: var(--muted); cursor: grab; display: flex; font-size: .78rem; justify-content: center; min-height: 32px; padding: 0; }
.home-row-lock { cursor: default; }
.home-row-settings-toggle { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; display: flex; height: 30px; justify-content: center; padding: 0; width: 30px; }
.home-row-settings-toggle:hover, .home-row-settings-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent); }
.home-row-settings-panel { background: color-mix(in srgb, var(--panel-solid), var(--bg) 5%); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 11px; grid-column: 1 / -1; margin: 2px; padding: 11px; }
.home-row-settings-panel[hidden] { display: none; }
.home-row-settings-heading { align-items: baseline; display: flex; justify-content: space-between; }
.home-row-settings-heading small, .home-row-settings-panel small { color: var(--muted); font-size: .72rem; }
.home-row-settings-panel form { border-top: 1px solid var(--line); display: grid; gap: 7px; padding-top: 10px; }
.home-row-settings-panel label { font-size: .75rem; font-weight: 700; }
.home-row-settings-panel label > span { display: block; margin-bottom: 4px; }
.home-compact-form { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
.home-compact-form button { min-height: 42px; }
.home-appearance-fields { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.home-appearance-form button, .home-share-form button { justify-self: start; }
.home-share-form label { align-items: center; display: flex; gap: 7px; }
.home-remove-button { background: transparent; border: 0; color: var(--danger); justify-self: start; padding: 2px 0; text-decoration: underline; }
.home-remove-button:hover { background: transparent; color: color-mix(in srgb, var(--danger), #000 18%); }
.home-shared-by { color: var(--muted); font-size: .68rem; max-width: 72px; overflow: hidden; padding-right: 7px; text-overflow: ellipsis; white-space: nowrap; }
.shared-home-readonly .page-home .home-widget-store-button,
.shared-home-readonly .page-home .home-widget-grid button,
.shared-home-readonly .page-home .home-widget-grid form,
.shared-home-readonly .page-home .home-ai-row { display: none !important; }
.shared-home-readonly .page-home .grid-stack-item-content { cursor: default !important; }
.home-switcher-create { border-top: 1px solid var(--line); display: grid; gap: 7px; margin-top: 2px; padding-top: 12px; }
.home-switcher-create label { font-size: .82rem; font-weight: 800; }
.home-switcher-create div { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; }
.home-switcher-create input { min-width: 0; width: 100%; }
.home-switcher-theme-note, .home-switcher-limit { margin: 0; }

.app-brand-mark {
  background: #f4e7d0;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%);
  border-radius: 10px;
  display: inline-block;
  flex: 0 0 auto;
  height: 34px;
  overflow: hidden;
  position: relative;
  width: 34px;
}

.app-brand-mark img {
  left: -31px;
  max-width: none;
  position: absolute;
  top: -10px;
  width: 96px;
  mix-blend-mode: multiply;
}

.page-home .topbar {
  display: none;
}

.nav-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.header-search {
  align-items: center;
  display: flex;
  flex: 1 1 320px;
  gap: 6px;
  justify-content: center;
  max-width: none;
  min-width: 220px;
}

.header-search[hidden] {
  display: none !important;
}

.header-search input {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 10%);
  margin: 0;
  min-width: 0;
  padding: 8px 10px;
}

.header-search button {
  padding: 8px 11px;
  white-space: nowrap;
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.nav-actions form {
  margin: 0;
}

.notification-bell,
.global-settings-gear {
  align-items: center;
  background: var(--panel-solid);
  border-color: color-mix(in srgb, var(--accent), var(--line) 70%);
  color: var(--text);
  display: inline-flex;
  justify-content: center;
  min-width: 38px;
  padding: 8px 10px;
  position: relative;
  white-space: nowrap;
}

.notification-bell:hover,
.global-settings-gear:hover {
  background: color-mix(in srgb, var(--accent), var(--panel-solid) 86%);
  color: var(--accent);
}

.notification-bell span[aria-hidden="true"],
.global-settings-gear {
  font-size: 1rem;
}

.notification-bell.is-empty {
  opacity: 0.72;
}

.notification-wrap {
  position: relative;
}

.account-wrap {
  position: relative;
}

.notification-dropdown,
.account-menu {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  min-width: 240px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 260;
}

.widget-menu {
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  min-width: 240px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}

.notification-dropdown[hidden],
.widget-menu[hidden],
.account-menu[hidden],
.swatch-grid[hidden],
.widget-color-popout[hidden],
.bookmark-section-menu[hidden],
.bookmark-section-colors[hidden] {
  display: none !important;
}

.account-menu {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.account-menu-row {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  display: grid;
  gap: 9px;
  grid-template-columns: 22px 1fr auto;
  margin: 0;
  padding: 8px 10px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.account-menu-row:hover {
  background: color-mix(in srgb, var(--accent), var(--panel) 91%);
  border-color: color-mix(in srgb, var(--accent), var(--line) 70%);
  color: var(--text);
}

.account-menu-form {
  margin: 0;
}

.account-menu-form button {
  font: inherit;
}

.menu-icon {
  color: var(--accent);
  text-align: center;
}

.theme-menu-row input {
  margin: 0;
  width: auto;
}

.notification-dropdown h3 {
  margin: 0 0 8px;
}

.notification-dropdown {
  isolation: isolate;
  max-height: min(78vh, 760px);
  overflow: auto;
  width: min(440px, calc(100vw - 32px));
}

.notification-dropdown-header p {
  margin: 0 0 10px;
}

.decision-section + .decision-section {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.decision-section h4 {
  margin: 0 0 8px;
}

.decision-card-list {
  display: grid;
  gap: 10px;
}

.decision-card {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 12px;
  padding: 10px 12px;
}

.decision-card p {
  margin: 6px 0 0;
}

.decision-card-header {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.decision-card-header strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.decision-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.decision-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.decision-card-actions > * {
  flex: 0 0 auto;
}

.decision-action-form {
  display: inline-flex;
  margin: 0;
}

.decision-snooze-form {
  align-items: stretch;
  gap: 6px;
}

.decision-snooze-form select {
  max-width: 120px;
  min-width: 0;
  padding: 8px 10px;
}

.notification-dropdown .decision-card-actions > a,
.notification-dropdown .decision-card-actions button,
.notification-dropdown .decision-snooze-form select {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
}

.decision-card-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.decision-persistence-note {
  margin: 0 0 10px;
}

.decision-sync-status p {
  margin: 6px 0 0;
}

.global-toast {
  align-items: center;
  background: color-mix(in srgb, var(--panel), var(--bg) 8%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 10px;
  margin: 0 auto 14px;
  max-width: min(820px, calc(100vw - 32px));
  padding: 12px 14px;
}

.global-toast.is-success {
  border-color: color-mix(in srgb, var(--success), var(--line) 48%);
}

.global-toast.is-error {
  border-color: color-mix(in srgb, var(--warning), var(--line) 48%);
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-list li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding: 8px 0;
}

.notification-list span {
  color: var(--muted);
  font-size: 0.82rem;
}

.alert-badge {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
  margin-left: 4px;
}

.main-nav a {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.main-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.main-nav a:active {
  transform: translateY(1px);
}

.main-nav a.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-topbar {
  margin-top: 28px;
  margin-bottom: 22px;
}

.topbar.is-workstream {
  margin-bottom: 10px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-actions form {
  margin: 0;
}

.panel {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--glass-highlight), var(--shadow-card);
  padding: 20px;
  margin-bottom: 18px;
}

.panel-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.section-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-heading h2,
.section-heading p {
  margin-top: 0;
}

.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.admin-panel-compact {
  padding-top: 16px;
}

.admin-section-intro {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 8%);
}

.admin-section-intro h2,
.admin-panel-compact h2 {
  margin-top: 0;
}

.sub-nav a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding: 8px 12px;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.sub-nav a:hover,
.sub-nav a.active {
  border-color: var(--accent);
  color: var(--accent);
}

.sub-nav a.active {
  background: color-mix(in srgb, var(--accent), var(--panel) 90%);
}

.workstream-tabs-bar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: -1px;
  position: relative;
  z-index: 3;
}

.sub-nav.sub-nav-tabs {
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0;
  overflow-x: auto;
  padding-inline: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sub-nav.sub-nav-tabs::-webkit-scrollbar {
  display: none;
  height: 0;
}

.sub-nav.sub-nav-tabs a {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 6%), color-mix(in srgb, var(--panel), var(--bg) 22%));
  border: 1px solid color-mix(in srgb, var(--line), transparent 4%);
  border-bottom-color: color-mix(in srgb, var(--line), transparent 16%);
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 84%);
  color: var(--muted);
  margin-right: 6px;
  min-height: 42px;
  padding: 10px 15px 11px;
  position: relative;
  transform: translateY(0);
  white-space: nowrap;
}

.sub-nav.sub-nav-tabs a:hover {
  border-color: color-mix(in srgb, var(--accent), var(--line) 52%);
  color: var(--text);
  transform: translateY(-1px);
}

.sub-nav.sub-nav-tabs a.active {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 2%);
  border-color: color-mix(in srgb, var(--accent), var(--line) 46%);
  border-bottom-color: color-mix(in srgb, var(--panel-solid), transparent 0%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 78%), 0 10px 22px rgba(15, 23, 42, 0.08);
  color: var(--text);
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

.sub-nav.sub-nav-tabs a.active::after {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 2%);
  bottom: -4px;
  content: "";
  height: 5px;
  left: -1px;
  position: absolute;
  right: -1px;
}

.workstream-tab-actions {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
}



.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 0.8fr);
  gap: 16px;
}

.home-widget-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.home-widget-grid.grid-stack {
  align-items: stretch;
  display: block;
  min-height: 360px;
}

.page.page-home {
  max-width: none;
  width: 100%;
}

.header-weather {
  align-items: center;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  display: flex;
  gap: 7px;
  justify-content: center;
  flex: 0 0 84px;
  height: 40px;
  min-width: 84px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
.header-weather.is-unavailable { color: var(--muted); }
.header-weather > span:first-child { display: grid; line-height: 1; place-items: center; }
.header-weather > span:last-child { display: grid; line-height: 1.05; }
.header-weather small { color: var(--muted); font-size: .66rem; font-weight: 600; }

.home-ai-row {
  background: var(--panel-solid);
  margin-bottom: 14px;
  padding: 0;
}

.home-ai-row > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 12px 16px;
}

.home-ai-row > summary::-webkit-details-marker { display: none; }
.home-ai-row > summary > span:first-child { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.home-ai-row[open] .home-ai-chevron { transform: rotate(180deg); }
.home-ai-row-body { border-top: 1px solid var(--line); padding: 12px 16px 14px; }
.home-ai-row .quick-add-form { align-items: stretch; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.home-ai-row .quick-add-form textarea { min-height: 96px; resize: vertical; }
.home-ai-row .quick-add-actions { align-items: center; display: flex; }

.home-widget-toolbar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 4px 0 10px;
}
.home-widget-toolbar h2, .home-widget-toolbar p { margin: 0; }
.home-widget-store-button { white-space: nowrap; }
.home-widget-load-status {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  gap: 8px 18px;
  margin: -2px 0 10px;
}
.home-widget-load-status span::before {
  background: var(--accent);
  border-radius: 999px;
  content: '';
  display: inline-block;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  width: 7px;
}
.home-widget-load-status span.is-error { color: var(--danger); }
.home-widget-load-status span.is-error::before { background: var(--danger); }
.home-widget-placeholder .widget-header,
.home-widget-placeholder .widget-body { pointer-events: none; }
.home-widget-placeholder .widget-body { min-height: 128px; }
.home-widget-placeholder .dashboard-route-loading-secondary span { height: 58px; }
.home-widget-load-failure { align-content: start; display: grid; gap: 10px; }
.home-widget-load-failure p { color: var(--muted); margin: 0; }

.widget-store-modal { width: min(680px, calc(100vw - 28px)); }
.widget-store-search { display: grid; gap: 6px; margin: 14px 0; }
.widget-store-grid { display: grid; gap: 9px; max-height: min(58vh, 560px); overflow: auto; padding-right: 4px; }
.widget-store-card { align-items: center; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 14px; justify-content: space-between; padding: 12px 14px; }
.widget-store-card > div { display: grid; gap: 2px; }
.widget-store-card form { margin: 0; }
.widget-store-card.is-coming { opacity: .76; }
.widget-remove-button { color: var(--danger); }
.home-weather-chip { font-size: .68rem; margin-left: 4px; padding: 2px 6px; }

.home-command-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.home-command-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 2%), color-mix(in srgb, var(--panel-solid), var(--bg) 14%));
  border: 1px solid color-mix(in srgb, var(--line), transparent 4%);
  border-radius: 18px;
  box-shadow: var(--glass-highlight), var(--shadow-card);
  min-width: 0;
  padding: 14px 16px;
  position: relative;
}

.home-command-card::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 72%), transparent);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 16px;
  position: absolute;
  right: 16px;
  top: 0;
}

.home-command-card strong {
  display: block;
  font-size: 1.55rem;
  line-height: 1.1;
  margin-bottom: 2px;
}

.home-command-card span {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
}

.home-command-card p:last-child {
  margin-bottom: 0;
}

.home-widget-grid[data-grid-fallback="true"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.home-widget-grid[data-plan-tier="free"][data-grid-fallback="true"] {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.home-widget-grid[data-plan-tier="free"][data-grid-fallback="true"] > [data-widget-key="rss"] {
  grid-column: 1 / -1;
}

.home-widget-grid[data-grid-fallback="true"] > .grid-stack-item {
  height: auto !important;
  left: auto !important;
  margin-bottom: 16px;
  position: relative !important;
  top: auto !important;
  width: auto !important;
}

.home-widget-grid[data-grid-fallback="true"] > .grid-stack-item > .grid-stack-item-content {
  inset: auto !important;
  position: relative !important;
}

@media (max-width: 760px) {
  .home-widget-grid[data-plan-tier="free"][data-grid-fallback="true"] {
    grid-template-columns: 1fr;
  }

  .home-widget-grid[data-plan-tier="free"][data-grid-fallback="true"] > [data-widget-key="rss"] {
    grid-column: auto;
  }
}

.widget-panel {
  --widget-accent: var(--accent);
  --widget-dark-tint: #172554;
  --widget-tint: #eff6ff;
  background:
    linear-gradient(90deg, var(--widget-accent) 0 6px, transparent 6px),
    linear-gradient(180deg, color-mix(in srgb, var(--widget-tint), var(--panel-solid) 20%), color-mix(in srgb, var(--widget-tint), var(--panel-solid) 48%));
  border-color: color-mix(in srgb, var(--widget-accent), var(--line) 68%);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  order: var(--widget-order, 100);
  padding: 0;
  width: 100%;
}

.grid-stack > .widget-panel > .grid-stack-item-content {
  border: 1px solid color-mix(in srgb, var(--widget-accent), var(--line) 65%);
  border-radius: 18px;
  box-shadow: var(--glass-highlight), var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:root:is([data-theme="dark"],[data-theme="night"]) .widget-panel {
  background:
    linear-gradient(90deg, var(--widget-accent) 0 6px, transparent 6px),
    color-mix(in srgb, var(--widget-dark-tint), var(--panel) 58%);
}

.quick-links-widget {
  --widget-accent: #2563eb;
}

.executive-widget {
  --widget-accent: #0f766e;
}

.weather-card {
  --widget-accent: var(--warning);
}

.widget-panel[data-widget-key="upcoming"] {
  --widget-accent: #7c3aed;
}

.widget-panel[data-widget-key="watch_items"] {
  --widget-accent: #047857;
}

.widget-header {
  align-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--widget-accent), var(--panel) 96%), color-mix(in srgb, var(--widget-accent), var(--panel) 90%));
  border-bottom: 1px solid color-mix(in srgb, var(--widget-accent), var(--line) 62%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 76%), 0 1px 0 rgba(15, 23, 42, 0.04);
  cursor: move;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  min-height: 42px;
  padding: 8px 11px 8px 14px;
  position: relative;
}

.widget-header h2 {
  font-size: 0.91rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-actions {
  align-items: center;
  display: flex;
  gap: 5px;
  position: relative;
}

.widget-menu {
  display: grid;
  gap: 6px;
  min-width: 180px;
  top: 100%;
}

.widget-body {
  max-height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  overflow: auto;
  padding: 12px 14px 14px;
  scrollbar-gutter: stable;
}

.grid-stack-ready .widget-body {
  height: calc(100% - 42px);
  max-height: none;
}

.widget-body > :first-child {
  margin-top: 0;
}

.widget-body > :last-child {
  margin-bottom: 0;
}

.widget-menu form {
  margin: 0;
}

.widget-menu-settings-form {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 7px;
  padding-bottom: 8px;
}

.widget-menu-settings-form label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  margin: 0;
}

.widget-menu-settings-form input,
.widget-menu-settings-form select {
  margin: 0;
  min-width: 0;
  width: 100%;
}

.widget-menu:has(.widget-menu-settings-form) {
  width: min(360px, calc(100vw - 32px));
}

.widget-menu-settings-form [data-rss-custom-fields] {
  display: grid;
  gap: 7px;
}

.widget-menu-settings-form [data-rss-custom-fields][hidden] {
  display: none;
}

.widget-menu-settings-form .muted,
.widget-menu-pro-note {
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0;
}

.widget-menu-pro-note {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  padding: 2px 0 8px;
}

.toggle-row.is-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-preview-banner {
  align-items: center;
  background: #fff7ed;
  border: 2px solid #bf5328;
  border-radius: 12px;
  color: #003058;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 10px 14px;
  position: sticky;
  top: 8px;
  z-index: 300;
}

.admin-preview-banner strong,
.admin-preview-banner span {
  display: block;
}

.admin-preview-banner span {
  font-size: 0.78rem;
  margin-top: 2px;
}

.admin-preview .widget-header,
.admin-preview .bookmark-group-header {
  cursor: default;
}

.diagnostic-filter-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.diagnostic-filter-grid label,
.diagnostic-filter-grid select {
  margin: 0;
}

.diagnostic-table-wrap td small,
.table-wrap td small {
  color: var(--muted);
  display: block;
  font-size: 0.68rem;
  margin-top: 2px;
}

.widget-menu-heading {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 4px;
  padding-top: 8px;
  text-transform: uppercase;
}

.widget-menu button,
.widget-menu a {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  text-decoration: none;
}

.widget-color-toggle {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  white-space: nowrap;
}

.widget-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.widget-gear {
  border-color: color-mix(in srgb, var(--widget-accent, var(--accent)), var(--line) 50%);
  color: var(--widget-accent, var(--accent));
}

.widget-control {
  border-radius: 999px;
  font-size: 0.76rem;
  line-height: 1;
  min-width: 24px;
  padding: 4px 6px;
}

.swatch-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.widget-color-popout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  max-width: calc(100vw - 32px);
  padding: 10px;
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  width: 266px;
  z-index: 22;
}

.widget-color-popout::after {
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  content: "";
  height: 10px;
  position: absolute;
  right: -6px;
  top: 16px;
  transform: rotate(45deg);
  width: 10px;
}

.swatch-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: 4px 3px;
  width: 100%;
}

.swatch-button:hover {
  border-color: var(--widget-accent, var(--accent));
}

.swatch-sample {
  background:
    linear-gradient(90deg, var(--swatch-accent) 0 35%, transparent 35%),
    linear-gradient(135deg, var(--swatch-tint) 0 50%, var(--swatch-dark) 50%);
  border-radius: 4px;
  display: block;
  height: 16px;
  width: 30px;
}

.swatch-label {
  color: var(--text);
  font-size: 0.62rem;
  line-height: 1.1;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-menu-result {
  border-top: 1px solid var(--line);
  color: var(--success);
  font-size: 0.82rem;
  margin-top: 4px;
  padding-top: 8px;
}

.widget-menu-result.is-error {
  color: var(--danger);
}

.is-widget-collapsed .widget-body {
  display: none;
}

.is-widget-collapsed {
  min-height: 48px;
}

.grid-stack-ready > .is-widget-collapsed {
  min-height: 0;
}

.is-grid-save-error {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.grid-stack-placeholder > .placeholder-content {
  background: color-mix(in srgb, var(--accent), transparent 82%) !important;
  border: 2px dashed var(--accent);
  border-radius: 8px;
}

.grid-stack > .grid-stack-item > .ui-resizable-se {
  bottom: 4px;
  height: 14px;
  right: 4px;
  width: 14px;
  z-index: 8;
}

.home-hero {
  border-left: 5px solid var(--accent);
}

.summary-grid,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
}

.summary-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.summary-grid div,
.metric-grid div,
.soft-panel {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 24%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 72%);
  padding: 10px 12px;
}

.summary-grid strong,
.metric-grid strong {
  display: block;
  font-size: 1.4rem;
}

.summary-grid span,
.metric-grid span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.placeholder-metric {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  padding: 18px;
  text-align: center;
}

.dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.link-grid,
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.bookmark-grid > .bookmark-group {
  background: transparent;
  border: 0;
  box-shadow: none;
  grid-column: span 6;
  padding: 0;
}
.bookmark-grid > .bookmark-group.bookmark-width-compact { grid-column: span 4; }
.bookmark-grid > .bookmark-group.bookmark-width-full { grid-column: 1 / -1; }

.bookmark-group-content {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 8%), color-mix(in srgb, var(--panel-solid), var(--bg) 20%));
  border: 1px solid color-mix(in srgb, var(--bookmark-accent), var(--line) 75%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 76%), 0 8px 22px rgba(15, 23, 42, 0.08);
  overflow: auto;
  min-width: 0;
  padding: 11px;
}

.bookmark-group {
  --bookmark-accent: var(--widget-accent, var(--accent));
  --bookmark-dark: var(--widget-dark-tint, #172554);
  --bookmark-tint: var(--widget-tint, #eff6ff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 8%), color-mix(in srgb, var(--panel), var(--bg) 32%));
  border: 1px solid color-mix(in srgb, var(--bookmark-accent), var(--line) 88%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 76%), 0 8px 22px rgba(15, 23, 42, 0.08);
  min-width: 0;
  padding: 11px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.bookmark-group:hover {
  border-color: color-mix(in srgb, var(--bookmark-accent), var(--line) 42%);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.bookmark-group-header {
  align-items: center;
  background:
    linear-gradient(90deg, var(--bookmark-accent) 0 4px, transparent 4px),
    color-mix(in srgb, var(--bookmark-tint), var(--panel) 52%);
  border-bottom: 1px solid color-mix(in srgb, var(--bookmark-accent), var(--line) 72%);
  border-radius: 12px 12px 0 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: -11px -11px 10px;
  min-height: 28px;
  padding: 7px 9px 7px 11px;
}

.bookmark-group h3 {
  font-size: 0.82rem;
  line-height: 1.15;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-group-heading {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.bookmark-group-count {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bookmark-section-gear {
  background: transparent;
  border-color: transparent;
  color: color-mix(in srgb, var(--bookmark-accent), var(--text) 28%);
  font-size: 0.7rem;
  min-width: 22px;
  padding: 2px 4px;
}

.bookmark-section-add {
  background: transparent;
  border-color: transparent;
  color: color-mix(in srgb, var(--bookmark-accent), var(--text) 28%);
  font-size: 0.85rem;
  min-width: 22px;
  padding: 2px 5px;
}

.bookmark-section-gear:hover {
  background: color-mix(in srgb, var(--bookmark-accent), var(--panel) 86%);
  border-color: color-mix(in srgb, var(--bookmark-accent), var(--line) 55%);
}

.bookmark-section-actions {
  align-items: center;
  display: flex;
  gap: 3px;
  position: relative;
}

.bookmark-section-menu {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 5px;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 18;
}

.bookmark-section-menu button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  text-align: left;
}

.bookmark-section-menu form {
  margin: 0;
}

.bookmark-section-menu form button {
  width: 100%;
}

.bookmark-section-layout-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  padding-top: 6px;
}

.bookmark-section-layout-form > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bookmark-section-width-options {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}

.bookmark-section-width-options button {
  font-size: 0.72rem;
  padding-inline: 5px;
  text-align: center;
}

.bookmark-section-width-options button[aria-current="true"] {
  background: color-mix(in srgb, var(--bookmark-accent), var(--panel) 84%);
  border-color: var(--bookmark-accent);
  font-weight: 800;
}

.bookmark-section-width-options button:disabled {
  cursor: default;
  opacity: 0.42;
}

.bookmark-section-colors {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 3px;
}

.bookmark-color-button {
  justify-items: center;
  min-width: 0;
  padding: 4px;
}

.bookmark-color-button .swatch-sample {
  height: 16px;
  width: 28px;
}

:root:is([data-theme="dark"],[data-theme="night"]) .bookmark-group-header {
  background:
    linear-gradient(90deg, var(--bookmark-accent) 0 4px, transparent 4px),
    color-mix(in srgb, var(--bookmark-dark), var(--panel) 62%);
}

.bookmark-list {
  display: grid;
  gap: 6px;
}

.bookmark-row {
  align-items: center;
  display: grid;
  gap: 6px;
  cursor: grab;
  grid-template-columns: 1fr;
}

.bookmark-row.is-dragging {
  cursor: grabbing;
  opacity: 0.48;
}

.bookmark-list.is-order-save-error {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}

.bookmark-row a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.bookmark-row a:hover {
  background: color-mix(in srgb, var(--accent), var(--panel) 92%);
  border-color: color-mix(in srgb, var(--accent), var(--line) 70%);
  transform: translateY(-1px);
}

.bookmark-row img {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 6%);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 78%);
  height: 18px;
  padding: 2px;
  width: 18px;
}

.bookmark-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-list.is-icon-view {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.bookmark-list.is-icon-view .bookmark-row a {
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-height: 86px;
  text-align: center;
}

.bookmark-list.is-icon-view .bookmark-row img {
  height: 34px;
  width: 34px;
}

.bookmark-list.is-icon-view .bookmark-row span {
  max-width: 100%;
}

.link-create-hint {
  font-size: 0.82rem;
  margin: 8px 0;
}

.link-create-limit {
  font-size: 0.76rem;
  margin: -2px 0 10px;
}

.widget-usage-chip {
  font-size: 0.62rem;
  font-weight: 750;
  margin-left: 5px;
  vertical-align: middle;
}

.form-result {
  border-radius: 8px;
  color: var(--muted);
  margin: 8px 0;
}

.link-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.link-group h3 {
  margin-top: 0;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.board-shell {
    margin-top: 0;
    padding-top: 14px;
    position: relative;
}

.workstream-tab-panel {
    border-top-left-radius: 0;
}

.board-shell-summary {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 8px 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.board-summary-text {
  color: var(--text);
  font-weight: 700;
}

.board-summary-muted {
  opacity: 0.9;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.muted {
  color: var(--muted);
}

.status-ok {
  color: var(--success);
  font-weight: 700;
}

.status-error {
  color: var(--danger);
  font-weight: 700;
}

.status-warning {
  color: var(--warning);
  font-weight: 700;
}

label {
  display: block;
  margin: 0 0 12px;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 8%);
  color: var(--text);
  font: inherit;
}

textarea {
  resize: vertical;
}

.login-card {
  margin: 48px auto;
  max-width: 440px;
  padding-bottom: 54px;
  position: relative;
}

.login-card.signup-card {
  max-width: 920px;
  width: calc(100% - 32px);
}

/* v0.25 private Helpdesk */
.helpdesk-page,.admin-helpdesk-page{display:grid;gap:18px;width:100%;max-width:none}.helpdesk-heading,.helpdesk-thread-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.helpdesk-heading h1,.helpdesk-heading p,.helpdesk-thread-heading h2,.helpdesk-thread-heading p{margin:.15rem 0}.helpdesk-workspace{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:18px;align-items:start}.helpdesk-ticket-list{display:grid;gap:8px;align-content:start;max-height:calc(100vh - 190px);overflow:auto}.helpdesk-ticket-list h2{margin:.1rem 0 .6rem}.helpdesk-ticket-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none}.helpdesk-ticket-row:hover,.helpdesk-ticket-row.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent),var(--panel-solid) 94%)}.helpdesk-ticket-row span:first-child{display:grid;gap:4px;min-width:0}.helpdesk-ticket-row small{color:var(--muted);overflow-wrap:anywhere}.helpdesk-thread{display:grid;gap:16px;min-width:0}.helpdesk-empty{padding:40px 20px;text-align:center}.helpdesk-message-list{display:grid;gap:12px;max-height:56vh;overflow:auto;padding-right:4px}.helpdesk-message{display:grid;gap:8px;max-width:min(82%,760px);padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 8%)}.helpdesk-message.is-user{justify-self:end;border-color:color-mix(in srgb,var(--accent),var(--line) 55%)}.helpdesk-message.is-admin,.helpdesk-message.is-support{justify-self:start}.helpdesk-message.is-internal{max-width:100%;border-style:dashed;background:color-mix(in srgb,var(--warning),var(--panel-solid) 94%)}.helpdesk-message header{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.78rem}.helpdesk-message p{margin:0;overflow-wrap:anywhere;line-height:1.55}.helpdesk-message details{border-top:1px solid var(--line);padding-top:8px}.helpdesk-message details summary{cursor:pointer;color:var(--danger);font-size:.78rem;font-weight:800}.helpdesk-message details form{display:flex;gap:8px;margin-top:8px}.helpdesk-message details label{flex:1}.helpdesk-reply-form{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}.helpdesk-new-ticket-modal{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}.helpdesk-new-ticket-modal form{display:grid;gap:13px}.helpdesk-admin-settings,.helpdesk-admin-workspace,.helpdesk-inbound-log{margin:0}.helpdesk-setting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.helpdesk-setting-grid .toggle-row{margin:0;padding:12px;border:1px solid var(--line);border-radius:12px}.helpdesk-setting-grid small{display:block;color:var(--muted)}.helpdesk-filters{display:grid;grid-template-columns:minmax(260px,1fr) 220px auto;gap:10px;align-items:end;margin-bottom:16px}.helpdesk-admin-grid{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:18px}.helpdesk-admin-grid>.helpdesk-ticket-list{padding-right:8px}.helpdesk-purge-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--danger);border-radius:10px}@media(max-width:980px){.helpdesk-workspace,.helpdesk-admin-grid{grid-template-columns:1fr}.helpdesk-ticket-list{max-height:420px}.helpdesk-setting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.helpdesk-heading,.helpdesk-thread-heading{align-items:stretch;flex-direction:column}.helpdesk-setting-grid,.helpdesk-filters,.helpdesk-purge-form{grid-template-columns:1fr}.helpdesk-message{max-width:100%}}
.helpdesk-filters{grid-template-columns:minmax(220px,1fr) 150px 150px 150px 140px auto}
/* v0.29.0 Helpdesk triage, pages, and delivery line */
.helpdesk-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}.helpdesk-pager a{font-weight:800;color:var(--accent);text-decoration:none}.helpdesk-pager a:last-child{text-align:right}.helpdesk-pager span:only-child,.helpdesk-pager>span:nth-child(2){text-align:center;font-variant-numeric:tabular-nums}
.helpdesk-triage-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 5%)}.helpdesk-triage-form label{flex:1 1 150px;min-width:0;margin:0}.helpdesk-triage-form label:nth-child(3){flex-basis:200px}.helpdesk-triage-form button{flex:0 0 auto}
.helpdesk-priority{display:inline-block;padding:0 6px;border-radius:999px;font-weight:900;font-style:normal;color:#fff;background:var(--warning)}.helpdesk-priority.is-urgent{background:var(--danger)}
.helpdesk-delivery-line{margin:0 0 12px}
/* v0.29.1 Helpdesk queue polish: folder counts, waiting age, history, saved replies */
.helpdesk-folder-count{display:inline-block;min-width:1.4em;margin-left:4px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--text),transparent 88%);color:inherit;font-size:.72rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}.helpdesk-folder-tabs a.is-active .helpdesk-folder-count{background:color-mix(in srgb,var(--accent-contrast),transparent 78%)}
.helpdesk-waiting{display:inline-block;padding:0 6px;border-radius:999px;font-weight:900;font-style:normal;color:var(--accent-contrast);background:var(--accent)}
.helpdesk-history{padding:10px 14px;border:1px solid var(--line);border-radius:12px}.helpdesk-history summary{cursor:pointer;font-weight:800}.helpdesk-history ol{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}.helpdesk-history li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:.82rem}.helpdesk-history time,.helpdesk-history small{color:var(--muted);font-size:.74rem}
.helpdesk-saved-replies-form{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.helpdesk-saved-replies-form label{margin:0}.helpdesk-saved-replies-form small{display:block;margin:4px 0 6px}.helpdesk-saved-replies-form textarea{font-family:inherit}.helpdesk-saved-replies-form button{justify-self:start}
.helpdesk-saved-reply-pick{margin:0}.helpdesk-saved-reply-pick select{max-width:360px}
@media(max-width:650px){.helpdesk-history li{grid-template-columns:1fr}}
/* v0.31.4 install panel and Coming with Plus */
.install-app-panel button[data-install-app]{margin-top:6px}.install-app-action{display:grid;gap:8px;margin-top:6px}.install-app-action[hidden]{display:none}.install-app-action p{margin:0}.plus-additions-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 18px;margin:8px 0 0;padding-left:18px}.plus-additions-list li{line-height:1.45}
/* v0.31.3 one tab design (folder tabs on a baseline) for To-Do, the workstream boards, and the Calendar */
.nf-tabs{display:flex;align-items:flex-end;gap:4px;width:100%;margin:0;padding:0 6px;border-bottom:2px solid var(--line);background:none}
.nf-tabs .nf-tab,.nf-tabs .nf-tab.button-secondary{position:relative;margin:0 0 -2px;padding:10px 18px;border:1px solid transparent;border-bottom:2px solid transparent;border-radius:12px 12px 0 0;background:none;color:var(--muted);font:inherit;font-size:.92rem;font-weight:800;line-height:1.1;text-decoration:none;cursor:pointer;min-height:0;box-shadow:none}
.nf-tabs .nf-tab:hover{color:var(--text);background:color-mix(in srgb,var(--panel-solid),var(--text) 5%)}
.nf-tabs .nf-tab.is-active,.nf-tabs .nf-tab.button-secondary.is-active{border-color:var(--line);border-bottom-color:var(--panel-solid);background:var(--panel-solid);color:var(--accent)}
.nf-tabs .nf-tab.is-active::after{content:"";position:absolute;left:12px;right:12px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.nf-tabs-end{display:inline-flex;gap:4px;margin-left:auto}.nf-tabs .nf-tab-small{padding:8px 14px;font-size:.84rem}
.master-todo-header{display:grid;gap:12px}.master-todo-tabs-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}.master-todo-tabs-row .nf-tabs{width:auto;flex:1 1 220px}
.master-todo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:6px}.master-todo-title h2{margin:.2rem 0 .3rem}.master-todo-title p{margin:0}
.task-view-toggle.nf-tabs{justify-content:flex-start;width:min(100%,1280px);margin:0 auto 10px}
.nf-tabs.calendar-view-switch{margin-bottom:.9rem}.nf-tabs.calendar-view-switch a{border-radius:12px 12px 0 0}
.calendar-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.calendar-add-actions{display:inline-flex;gap:8px}
.important-date-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.important-date-title{grid-column:1 / -1}.important-date-modal .modal-header>div p{margin:0}
.home-new-widget-tip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent),var(--line) 50%);border-radius:12px;background:color-mix(in srgb,var(--accent),var(--panel-solid) 92%)}.home-new-widget-tip[hidden]{display:none}
@media(max-width:760px){.important-date-grid{grid-template-columns:1fr 1fr}.master-todo-actions{width:100%}.nf-tabs .nf-tab{padding:9px 12px}.nf-tabs-end{margin-left:0}}
/* v0.29.4 clock words, sound row, backdrop row */
.clock-word{appearance:none;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-decoration:none}.clock-word:hover,.clock-word:focus-visible{text-decoration:underline;outline:none}.clock-sound-row{align-items:end}.clock-sound-row label{flex:1 1 180px}
.theme-backdrop-row{display:grid;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.theme-backdrop-row label{margin:0}.theme-backdrop-row p{margin:0}
/* v0.29.3.1 Plus feature page inside the shell */
.plus-feature-page{display:grid;gap:16px;width:100%}.plus-feature-panel{max-width:720px}.plus-feature-panel h1{margin:.2rem 0 .6rem}.plus-feature-panel .button-row{margin-top:14px}
/* v0.29.2 Roles screen */
.admin-roles-page{display:grid;gap:16px}.role-card{display:grid;gap:12px}.role-form{display:grid;gap:12px}.role-card-heading>div{display:grid;grid-template-columns:minmax(180px,.6fr) minmax(220px,1.4fr);gap:10px 14px;align-items:end}.role-card-heading .panel-kicker{grid-column:1 / -1;margin:0}.role-card-heading label{margin:0}.role-card-heading label small{display:block;margin-top:4px}.role-permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.role-permission{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;align-items:flex-start}.role-permission small{display:block;color:var(--muted)}.role-permission input:disabled+span{opacity:.72}.role-owner-only{margin-left:6px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--warning),var(--panel-solid) 70%);font-size:.68rem;font-style:normal;font-weight:900}.role-delete-form{justify-self:start}.role-picker-row{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:10px 18px;align-items:start}.role-picker-row label{margin:0}.role-picker-row p{margin:0}.role-permission.is-granted{border-color:color-mix(in srgb,var(--accent),var(--line) 40%);background:color-mix(in srgb,var(--accent),var(--panel-solid) 94%)}.role-card .button-row a.button-secondary{display:inline-flex;align-items:center}@media(max-width:760px){.role-picker-row{grid-template-columns:1fr}}.role-pill{background:color-mix(in srgb,var(--accent),var(--panel-solid) 82%)}
@media(max-width:980px){.role-permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.role-permission-grid,.role-card-heading>div{grid-template-columns:1fr}}
.helpdesk-subject-redaction{padding:10px 12px;border:1px dashed var(--danger);border-radius:10px}.helpdesk-subject-redaction summary{cursor:pointer;color:var(--danger);font-weight:800}.helpdesk-subject-redaction form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end;margin-top:10px}
@media(max-width:980px){.helpdesk-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.helpdesk-filters,.helpdesk-subject-redaction form{grid-template-columns:1fr}}

/* v0.25.1 Helpdesk mailbox and live notification polish */
.helpdesk-mailbox{padding:0;overflow:hidden}.helpdesk-folder-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel-solid),var(--bg) 8%)}.helpdesk-folder-tabs a{padding:8px 14px;border-radius:999px;color:var(--text);font-weight:800;text-decoration:none}.helpdesk-folder-tabs a:hover,.helpdesk-folder-tabs a.is-active{background:var(--accent);color:var(--accent-contrast)}.helpdesk-mail-filters{display:grid;grid-template-columns:minmax(240px,1fr) 190px auto;gap:10px;align-items:end;padding:12px 14px;border-bottom:1px solid var(--line)}.helpdesk-mail-filters label{margin:0}.helpdesk-mailbox .helpdesk-workspace{grid-template-columns:minmax(430px,44%) minmax(0,1fr);gap:0}.helpdesk-mailbox .helpdesk-ticket-list,.helpdesk-admin-grid>.helpdesk-ticket-list{padding:0;max-height:calc(100vh - 250px);border-right:1px solid var(--line)}.helpdesk-mail-head,.helpdesk-mail-row{display:grid;grid-template-columns:minmax(100px,.38fr) minmax(240px,1fr) 128px;gap:12px;align-items:center}.helpdesk-mail-head{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.helpdesk-mail-row{padding:11px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--text);text-decoration:none;background:var(--panel-solid)}.helpdesk-mail-row:hover,.helpdesk-mail-row.is-active{background:color-mix(in srgb,var(--accent),var(--panel-solid) 92%)}.helpdesk-mail-row.is-unread{box-shadow:inset 4px 0 0 var(--accent);background:color-mix(in srgb,var(--accent),var(--panel-solid) 88%)}.helpdesk-mail-row.is-unread .helpdesk-mail-from,.helpdesk-mail-row.is-unread .helpdesk-mail-summary strong{font-weight:950}.helpdesk-mail-from{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.helpdesk-mail-summary{display:grid;min-width:0;gap:2px}.helpdesk-mail-summary strong,.helpdesk-mail-summary small,.helpdesk-mail-summary em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.helpdesk-mail-summary small{color:var(--muted)}.helpdesk-mail-summary em{color:var(--muted);font-size:.7rem;font-style:normal}.helpdesk-mail-row time{color:var(--muted);font-size:.74rem;text-align:right}.helpdesk-empty-list{padding:24px 14px}.helpdesk-mailbox .helpdesk-thread,.helpdesk-admin-workspace .helpdesk-thread{padding:18px;min-height:420px}.helpdesk-admin-settings>summary,.helpdesk-inbound-log>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between}.helpdesk-admin-settings>summary span,.helpdesk-inbound-log>summary span{display:grid;gap:2px}.helpdesk-admin-settings[open]>summary,.helpdesk-inbound-log[open]>summary{margin-bottom:12px}.helpdesk-admin-grid{grid-template-columns:minmax(480px,46%) minmax(0,1fr);gap:0}.helpdesk-conversation-pane{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 5%)}.helpdesk-conversation-pane>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px}.helpdesk-conversation-pane>header h3,.helpdesk-conversation-pane>header p{margin:0}.helpdesk-conversation-pane>header>span{color:var(--muted);font-size:.75rem}.helpdesk-internal-pane{border-style:dashed;border-color:var(--warning);background:color-mix(in srgb,var(--warning),var(--panel-solid) 96%)}.helpdesk-public-conversation .helpdesk-message.is-user{justify-self:end;background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.helpdesk-public-conversation .helpdesk-message.is-user header{color:inherit;opacity:.82}.helpdesk-public-conversation .helpdesk-message.is-user a{color:inherit}.helpdesk-public-conversation .helpdesk-message.is-admin,.helpdesk-public-conversation .helpdesk-message.is-support{justify-self:start;background:#fff;color:#132a42;border-color:#c8d4df}.helpdesk-public-conversation .helpdesk-message.is-admin header,.helpdesk-public-conversation .helpdesk-message.is-support header{color:#53687b}.field-with-counter{position:relative}.field-with-counter input,.field-with-counter textarea{padding-bottom:28px}.character-counter{position:absolute;right:10px;bottom:8px;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--panel-solid),transparent 12%);color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums;pointer-events:none}.character-counter.is-near-limit{color:var(--danger);font-weight:900}.notification-bell.has-alert{border-color:#d2202f!important;background:#d2202f!important;color:#fff!important}.notification-bell.is-ringing{animation:helpdesk-bell-ring .65s ease-in-out infinite,helpdesk-alert-glow 1.2s ease-in-out infinite}.notification-sound-control{display:grid;grid-template-columns:auto minmax(100px,1fr);align-items:center;gap:8px;margin-top:10px;color:var(--muted);font-size:.75rem}.notification-sound-control select{min-height:32px;padding:4px 8px}@keyframes helpdesk-bell-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}@keyframes helpdesk-alert-glow{0%,100%{box-shadow:0 0 0 0 rgba(210,32,47,.25)}50%{box-shadow:0 0 0 7px rgba(210,32,47,0)}}
@media(max-width:1180px){.helpdesk-mailbox .helpdesk-workspace,.helpdesk-admin-grid{grid-template-columns:1fr}.helpdesk-mailbox .helpdesk-ticket-list,.helpdesk-admin-grid>.helpdesk-ticket-list{max-height:430px;border-right:0;border-bottom:1px solid var(--line)}}
.notification-bell.has-alert{border-color:var(--danger)!important;background:var(--action-secondary-bg)!important;color:var(--danger)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger),transparent 55%)}
.notification-bell.has-alert .alert-badge{min-width:22px;padding:4px 6px;background:var(--danger);border-color:color-mix(in srgb,var(--danger),#000 18%);color:var(--on-danger)}
.notification-bell.is-ringing{animation:helpdesk-alert-glow 1.2s ease-in-out infinite}
.notification-bell.is-ringing>span[aria-hidden="true"]{display:inline-block;animation:helpdesk-bell-ring .65s ease-in-out infinite}
.notification-dropdown{border-top:3px solid var(--accent)}
.notification-dropdown-header{padding-bottom:9px;border-bottom:1px solid var(--line)}
@media(max-width:720px){.helpdesk-mail-filters{grid-template-columns:1fr}.helpdesk-mail-head{display:none}.helpdesk-mail-row{grid-template-columns:minmax(90px,.35fr) minmax(0,1fr)}.helpdesk-mail-row time{grid-column:2;text-align:left}.helpdesk-folder-tabs{overflow:auto}.helpdesk-conversation-pane>header{display:grid}}

.signup-card form,
.signup-card > .alert {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.login-brand-lockup {
  background: #ffffff;
  height: 96px;
  margin: -8px 0 6px;
  max-width: 330px;
  overflow: hidden;
  position: relative;
}

.login-brand-lockup img {
  left: -70px;
  max-width: none;
  position: absolute;
  top: -82px;
  width: 455px;
}

.auth-checkbox-row {
  align-items: start;
  display: flex;
  gap: 10px;
  font-weight: 700;
}

.auth-checkbox-row input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: auto;
}

.auth-checkbox-row small {
  color: var(--muted);
  display: block;
  font-weight: 500;
  margin-top: 2px;
}

.login-settings-wrap {
  bottom: 14px;
  position: absolute;
  right: 14px;
}

.login-settings-button {
  min-width: 36px;
  padding: 7px 9px;
}

.login-settings-menu {
  bottom: calc(100% + 8px);
  top: auto;
}

button,
.button {
  display: inline-block;
  border: 1px solid var(--action-primary-border);
  border-radius: 6px;
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
}

button:hover,
.button:hover {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
  filter: brightness(1.04);
}

button:active,
.button:active {
  transform: translateY(1px);
}

button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

.is-loading button[type="submit"],
button[aria-busy="true"],
.button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.62;
}

.hard-delete-panel button:disabled {
  cursor: not-allowed;
}

.button-secondary {
  align-items: center;
  background: var(--action-secondary-bg);
  border: 1px solid var(--action-secondary-border);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--action-secondary-fg);
}

.button-danger {
  background: var(--action-danger-bg);
  border-color: var(--action-danger-border);
  color: var(--action-danger-fg);
}

.button-success {
  background: var(--success);
  border-color: color-mix(in srgb, var(--success), #0f5132 28%);
  color: var(--on-success);
}

.button-pill {
  border-radius: 999px;
  font-weight: 700;
  min-height: 42px;
  min-width: 122px;
  padding: 10px 18px;
}

.button-pill-outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--line), transparent 5%);
  color: var(--muted);
}

.button-pill-compact {
  min-height: 36px;
  min-width: 0;
  padding: 8px 14px;
}

:root:is([data-theme="dark"],[data-theme="night"]) .notification-dropdown a.button-secondary {
  background: transparent;
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-fg);
}

:root:is([data-theme="dark"],[data-theme="night"]) input,
:root:is([data-theme="dark"],[data-theme="night"]) select,
:root:is([data-theme="dark"],[data-theme="night"]) textarea {
  background: #0b3554;
  border-color: #52708a;
  color: var(--text);
}

:root:is([data-theme="dark"],[data-theme="night"]) .panel,
:root:is([data-theme="dark"],[data-theme="night"]) .app-bar,
:root:is([data-theme="dark"],[data-theme="night"]) .notification-dropdown,
:root:is([data-theme="dark"],[data-theme="night"]) .account-menu {
  background-color: var(--panel-solid);
  box-shadow: 0 16px 34px rgba(0, 8, 18, 0.34);
}

:root:is([data-theme="dark"],[data-theme="night"]) .notification-dropdown,
:root:is([data-theme="dark"],[data-theme="night"]) .account-menu,
:root:is([data-theme="dark"],[data-theme="night"]) .decision-card {
  border-color: #52708a;
}

:root:is([data-theme="dark"],[data-theme="night"]) .decision-card {
  background: #0a304d;
}

:root:is([data-theme="dark"],[data-theme="night"]) table tbody tr:hover {
  background: rgba(242, 164, 95, 0.08);
}

.icon-button {
  min-width: 44px;
  text-align: center;
}

.alert {
  border-left: 4px solid var(--danger);
  background: #fff5f5;
  padding: 12px;
  margin-bottom: 14px;
}

.dashboard-notice {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
}

.dashboard-notice.is-success {
  background: color-mix(in srgb, var(--success), var(--panel) 90%);
  border-left-color: var(--success);
}

.dashboard-notice.is-error {
  background: color-mix(in srgb, var(--danger), var(--panel) 90%);
  border-left-color: var(--danger);
}

.dashboard-route-shell {
  display: grid;
  gap: 16px;
}

.dashboard-route-shell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-route-shell-actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.dashboard-route-shell-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft), var(--panel) 32%);
}

.dashboard-route-shell-status.is-error {
  border-color: color-mix(in srgb, var(--danger), transparent 78%);
  background: color-mix(in srgb, var(--danger), var(--panel) 92%);
}

.dashboard-route-shell-content {
  min-height: 220px;
  min-width: 0;
}

.dashboard-route-loading {
  display: grid;
  gap: 12px;
}

.dashboard-route-loading span,
.dashboard-route-error,
.dashboard-route-empty {
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
}

.dashboard-route-loading span {
  height: 82px;
  background-image: linear-gradient(90deg, rgba(226, 232, 240, 0.86), rgba(239, 246, 255, 0.96), rgba(226, 232, 240, 0.86));
  background-size: 200% 100%;
  animation: dashboard-shell-shimmer 1.2s ease-in-out infinite;
}

.dashboard-route-error,
.dashboard-route-empty {
  padding: 18px;
}

@keyframes dashboard-shell-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.decision-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 12px 0;
}

.decision-detail-grid div {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 10%);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  padding: 10px 12px;
}

.decision-detail-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.decision-detail-grid strong {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-life-os-panel,
.home-life-os-grid .panel {
  overflow: hidden;
}

.home-life-os-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0;
}

.quick-add-form,
.quick-add-preview {
  display: grid;
  gap: 12px;
}

.quick-add-status-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

.quick-add-status-line {
  color: var(--muted);
  margin: 0;
}

.quick-add-status-line.is-ready {
  color: var(--text);
  font-weight: 700;
}

.quick-add-actions,
.quick-add-apply-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-add-preview {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 12%);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 12px;
  padding: 14px;
}

.modal.quick-add-modal {
  background: var(--panel-solid);
  box-sizing: border-box;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  max-width: min(900px, calc(100vw - 48px));
  overflow: hidden;
  width: min(900px, calc(100vw - 48px));
}

.quick-add-modal[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.quick-add-close-form {
  display: none;
}

.quick-add-edit-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: calc(100vh - 102px);
  max-height: calc(100dvh - 102px);
  min-height: 0;
}

.quick-add-modal-body {
  background: var(--panel-solid);
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
  scrollbar-gutter: stable;
}

/* v0.33.0.1 Quick Add Review: essentials first, the rest under More options. */
.quick-add-more { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.quick-add-more > summary { cursor: pointer; font-weight: 700; color: var(--muted); list-style: none; }
.quick-add-more > summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform .15s ease; }
.quick-add-more[open] > summary::before { transform: rotate(90deg); }
.quick-add-more > summary::-webkit-details-marker { display: none; }
.quick-add-essentials label { min-width: 0; }

.quick-add-ai-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 100%;
  overflow: visible;
  padding: 12px;
}

.quick-add-ai-details[open] {
  max-height: none;
}

.quick-add-ai-details summary {
  cursor: pointer;
  font-weight: 700;
}

.quick-add-blockers {
  margin: 0;
  padding-left: 18px;
}

.quick-add-discard-form {
  margin: 0;
}

.quick-add-modal .task-modal-action-bar {
  border-top: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%);
  justify-content: flex-end;
  padding: 11px 20px 13px;
}



.quick-add-modal .task-save-button {
  white-space: nowrap;
}

.home-secondary-tool {
  margin-top: 18px;
}

.dashboard-route-shell-secondary {
  margin-top: 16px;
}

.dashboard-route-loading-secondary span {
  height: 64px;
}

.app-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 24px;
  padding-top: 14px;
  text-align: center;
}

.app-footer-primary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
}

/* v0.31.8.1 veteran credit in the app footer, with a small US flag drawn inline (Windows has no flag emoji) */
.us-flag { display: inline-block; width: 19px; height: 10px; margin-left: 7px; vertical-align: -1px; border-radius: 1.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Crect width='19' height='10' fill='%23fff'/%3E%3Cpath fill='%23B22234' d='M0 0h19v.77H0zM0 1.54h19v.77H0zM0 3.08h19v.77H0zM0 4.62h19v.77H0zM0 6.15h19v.77H0zM0 7.69h19v.77H0zM0 9.23h19V10H0z'/%3E%3Crect width='7.6' height='5.38' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='.9' cy='.7' r='.3'/%3E%3Ccircle cx='2.2' cy='.7' r='.3'/%3E%3Ccircle cx='3.5' cy='.7' r='.3'/%3E%3Ccircle cx='4.8' cy='.7' r='.3'/%3E%3Ccircle cx='6.1' cy='.7' r='.3'/%3E%3Ccircle cx='1.55' cy='1.7' r='.3'/%3E%3Ccircle cx='2.85' cy='1.7' r='.3'/%3E%3Ccircle cx='4.15' cy='1.7' r='.3'/%3E%3Ccircle cx='5.45' cy='1.7' r='.3'/%3E%3Ccircle cx='.9' cy='2.7' r='.3'/%3E%3Ccircle cx='2.2' cy='2.7' r='.3'/%3E%3Ccircle cx='3.5' cy='2.7' r='.3'/%3E%3Ccircle cx='4.8' cy='2.7' r='.3'/%3E%3Ccircle cx='6.1' cy='2.7' r='.3'/%3E%3Ccircle cx='1.55' cy='3.7' r='.3'/%3E%3Ccircle cx='2.85' cy='3.7' r='.3'/%3E%3Ccircle cx='4.15' cy='3.7' r='.3'/%3E%3Ccircle cx='5.45' cy='3.7' r='.3'/%3E%3Ccircle cx='.9' cy='4.7' r='.3'/%3E%3Ccircle cx='2.2' cy='4.7' r='.3'/%3E%3Ccircle cx='3.5' cy='4.7' r='.3'/%3E%3Ccircle cx='4.8' cy='4.7' r='.3'/%3E%3Ccircle cx='6.1' cy='4.7' r='.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* S32 (v0.32.2.0): package card carrier check line and Check now. */
.package-check-note.is-error { color: var(--danger); }
.package-check-form { display: inline; }

/* S33 Admin > Marketing Mail (v0.33.1.0): reuses the Shipping card layout. */
.marketing-webhook-url { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--panel-muted, rgba(0, 0, 0, 0.05)); font-size: 0.82rem; word-break: break-all; user-select: all; }
.marketing-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; }
.marketing-events li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* v0.33.7.0 email builder: blocks on the left, the server-rendered preview on the right. */
.shipping-carrier-body.marketing-compose-body { grid-template-columns: 1fr; }
.mail-template-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mail-template-row label > select, .mail-template-row label > input { min-height: 46px; box-sizing: border-box; }

.mail-template-row label { display: grid; gap: 4px; flex: 1 1 260px; }
.mail-template-row label > span { font-size: 0.85rem; color: var(--muted); }
/* v0.33.10.1: the account menu is grouped with headings and a name line at the top. */
.account-menu { min-width: 268px; }
.account-menu-identity { display: grid; gap: 2px; padding: 4px 10px 10px; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
.account-menu-identity strong { font-size: 0.95rem; }
.account-menu-identity span { font-size: 0.78rem; color: var(--muted); word-break: break-all; }
.account-menu-group + .account-menu-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.account-menu-heading { margin: 2px 0 4px; padding: 0 10px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.account-menu-group-exit .account-menu-row { color: var(--muted); }
.mail-relationship-toggle { flex: 0 1 auto; }
.mail-relationship-toggle .news-email-switch { min-height: 42px; }
.mail-schedule-row { padding-top: 10px; border-top: 1px solid var(--line); }
.mail-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 6px 0; }
.mail-editor-column { min-width: 0; }
.mail-editor-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-editor-blocks { display: grid; gap: 10px; }
.mail-editor-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.mail-block { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 6%); }
.mail-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.mail-block-actions { display: inline-flex; gap: 4px; }
.mail-block-body { display: grid; gap: 8px; padding: 10px; }
.mail-block-field { display: grid; gap: 4px; }
.mail-block-field > span { font-size: 0.8rem; color: var(--muted); }
.mail-block-upload { display: flex; align-items: center; gap: 10px; }
.mail-block-upload label { cursor: pointer; }
.mail-text-toolbar { display: flex; gap: 4px; flex-wrap: wrap; }
.mail-text-toolbar button { min-height: 28px; padding: 2px 9px; font-size: 0.8rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-solid); color: inherit; cursor: pointer; }
.mail-text-editor { min-height: 110px; padding: 10px 12px; border: 1px solid var(--border, rgba(0, 0, 0, 0.15)); border-radius: 10px; background: var(--panel, #fff); color: inherit; line-height: 1.55; outline: none; }
.mail-text-editor:focus { border-color: var(--accent); }
.mail-text-editor p { margin: 0 0 10px; }
.mail-editor-preview { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 12px; background: #f3f5f7; }
.mail-editor-preview-subject { margin: 0 0 8px; font-size: 0.9rem; }
@media (max-width: 1100px) { .mail-editor { grid-template-columns: 1fr; } }
/* v0.33.2.2: the news email panel is one row (copy left, switch and Save right) and the unsubscribe page is a centred card. */
.news-email-panel { align-self: start; }
.news-email-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.news-email-copy { flex: 1 1 380px; max-width: 640px; }
.news-email-copy h2 { margin: 2px 0 6px; }
.news-email-copy p { margin: 0; }
.news-email-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news-email-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; position: relative; }
.news-email-switch input { position: absolute; left: 0; top: 0; width: 46px; height: 26px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.news-email-track { width: 46px; height: 26px; border-radius: 13px; background: var(--muted, #9aa5ad); position: relative; flex: 0 0 auto; transition: background .15s ease; }
.news-email-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left .15s ease; }
.news-email-switch input:checked + .news-email-track { background: var(--success, #2f855a); }
.news-email-switch input:checked + .news-email-track::after { left: 23px; }
.news-email-switch input:focus-visible + .news-email-track { outline: 2px solid var(--accent, #2b6cb0); outline-offset: 2px; }
/* 33.14 Web Push: the device panel on Account Information. */
.push-panel { align-self: start; }
.push-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-width: 220px; }
.push-actions button[hidden] { display: none; }
.push-devices { margin-top: 12px; }
.push-devices p { margin: 0 0 6px; }
.push-device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.push-device-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border, #d9dee3); border-radius: 8px; }
.push-device-list .inline-form { margin: 0; }
.button-small { padding: 4px 10px; font-size: 0.85rem; }
.news-email-label strong { margin-left: 4px; }
.news-email-switches { display: grid; gap: 10px; }
/* v0.33.5.0 Admin icon rail: a fixed 76px rail of group icons; the page list is an overlay flyout, so the content never moves. */
.settings-shell.admin-rail-shell { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; } /* v0.35.5.9: the rail is 92px wide; the column follows it so the page heading is not covered */
.admin-rail { position: sticky; top: 82px; align-self: start; width: 76px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 8%); z-index: 30; }
.admin-rail-nav { display: grid; gap: 4px; }
.admin-rail-group { position: relative; }
.admin-rail-button { display: grid; justify-items: center; gap: 3px; width: 100%; min-height: 58px; padding: 8px 2px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.admin-rail-button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-rail-label { font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; line-height: 1; text-align: center; }
.admin-rail-button:hover, .admin-rail-group.is-open > .admin-rail-button { color: var(--text); background: color-mix(in srgb, var(--accent), var(--panel-solid) 93%); border-color: color-mix(in srgb, var(--accent), var(--line) 48%); }
.admin-rail-group.is-active > .admin-rail-button { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.admin-flyout { position: absolute; left: calc(100% + 10px); top: 0; width: 290px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); z-index: 40; }
.admin-flyout::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }
.admin-flyout-title { margin: 2px 10px 8px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-flyout .settings-nav-items { display: grid; gap: 4px; }
@media (max-width: 760px) {
  .settings-shell.admin-rail-shell { grid-template-columns: 1fr; }
  .admin-rail { position: static; width: auto; padding: 6px; }
  .admin-rail-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-rail-group { flex: 1 1 60px; }
  .admin-flyout { left: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 40px)); }
}

/* v0.33.11.0 vendor logins */
.vendor-list { display: grid; gap: 8px; margin: 10px 0; }
.vendor-card { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 6%); }
.vendor-card > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; list-style: none; }
.vendor-card > summary::-webkit-details-marker { display: none; }
.vendor-card > summary .button-secondary { margin-left: auto; }
.vendor-card-body { padding: 4px 12px 12px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.vendor-form { gap: 8px; }
.vendor-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vendor-secret { padding: 8px 10px; border-radius: 8px; background: var(--panel-muted, rgba(0, 0, 0, 0.05)); font-size: 0.9rem; user-select: all; }
.vendor-login-line { margin: 6px 0 0; font-size: 0.85rem; }
/* v0.33.4.0 Admin > Company */
.company-address-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.company-address-row label { display: grid; gap: 4px; }
.company-address-row label > span { font-size: 0.85rem; color: var(--muted); }
.company-form textarea { width: 100%; font: inherit; line-height: 1.5; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, rgba(0, 0, 0, 0.15)); background: var(--panel, #fff); color: inherit; resize: vertical; box-sizing: border-box; }
.company-doc-list li { justify-content: flex-start; }
.company-doc-list .inline-form { margin-left: auto; }
.unsubscribe-card { text-align: center; max-width: 540px; padding-bottom: 26px; }
.unsubscribe-card .login-brand-lockup { margin: -8px auto 12px; }
.unsubscribe-card .panel-kicker { margin-bottom: 4px; }
.unsubscribe-card h1 { margin: 0 0 10px; font-size: 1.6rem; }
.unsubscribe-card p { margin: 0 0 14px; }
.unsubscribe-form { display: grid; gap: 14px; justify-items: center; margin-top: 6px; }
.unsubscribe-agree { display: inline-flex; align-items: flex-start; gap: 10px; text-align: left; font-weight: 600; max-width: 420px; }
.unsubscribe-agree input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.unsubscribe-footer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border, rgba(0, 0, 0, 0.12)); display: grid; gap: 12px; justify-items: center; font-size: 0.84rem; color: var(--muted); }
.unsubscribe-footer .button-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* S32 Admin > Shipping (v0.32.1.0): carrier cards with steps on the left and keys on the right.
   v0.33.2.0: each card is a <details>; the summary shows the name and the state pill, and a working card starts folded. */
details.shipping-carrier > summary { list-style: none; cursor: pointer; }
details.shipping-carrier > summary::-webkit-details-marker { display: none; }
details.shipping-carrier > summary > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
details.shipping-carrier > summary > div::before { content: '\25B8'; font-size: 0.9rem; color: var(--muted); }
details.shipping-carrier[open] > summary > div::before { content: '\25BE'; }
details.shipping-carrier > summary .panel-kicker { margin: 0; }
details.shipping-carrier > summary h2 { margin: 0; font-size: 1.05rem; }
details.shipping-carrier:not([open]) { padding-top: 12px; padding-bottom: 12px; }
.shipping-carrier-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shipping-carrier-heading h2 { margin: 2px 0 6px; }
.shipping-carrier-heading .inline-pill { margin-top: 6px; white-space: nowrap; }
.shipping-carrier-heading .inline-pill.is-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.shipping-carrier-heading .inline-pill.is-warning { background: color-mix(in srgb, #b7791f 18%, transparent); color: #b7791f; }
.shipping-carrier-heading .inline-pill.is-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.shipping-carrier-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 32px; margin-top: 14px; }
.shipping-carrier-body h3 { margin: 0 0 8px; font-size: 0.95rem; }
.shipping-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.shipping-keys { display: grid; gap: 18px; align-content: start; }
.shipping-key-form, .shipping-test-form { display: grid; gap: 10px; }
.shipping-key-form label, .shipping-test-form label { display: grid; gap: 4px; }
.shipping-key-form label > span, .shipping-test-form label > span { font-size: 0.85rem; color: var(--muted); }
.shipping-key-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.shipping-last-test { margin: 0; font-size: 0.9rem; }
@media (max-width: 900px) { .shipping-carrier-body { grid-template-columns: 1fr; } }

.app-footer-performance {
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  gap: 6px 14px;
  justify-content: center;
  margin-top: 6px;
}

.app-footer-performance span::before {
  background: var(--success);
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 6px;
  margin-right: 6px;
  width: 6px;
}

.app-footer-performance span.is-error { color: var(--danger); }
.app-footer-performance span.is-error::before { background: var(--danger); }

.log-list {
  margin: 0;
  padding-left: 18px;
}

.task-list {
  display: grid;
  gap: 12px;
}

.todo-list {
  display: grid;
  gap: 10px;
}

.summary-item {
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 14%);
  padding: 10px 0 0;
}

.widget-section-heading {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  margin: 2px 0 0;
  text-transform: uppercase;
}

.widget-empty-state {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 20%);
  border: 1px dashed color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 14px;
  margin: 0;
  padding: 11px 12px;
}

.quick-links-widget .widget-empty-state,
.executive-widget .widget-empty-state,
.widget-panel[data-widget-key="upcoming"] .widget-empty-state,
.widget-panel[data-widget-key="watch_items"] .widget-empty-state {
  min-height: 84px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.form-actions {
  align-items: end;
  display: flex;
  gap: 10px;
}

.task-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.task-item h3 {
  margin: 0 0 6px;
}

.task-item p {
  margin: 0 0 6px;
}

.task-meta {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.task-edit {
  margin-top: 10px;
}

.task-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.board-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.board-column {
  --lane-accent: #64748b;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 8%), color-mix(in srgb, var(--panel), var(--bg) 28%));
  border: 1px solid color-mix(in srgb, var(--lane-accent), var(--line) 78%);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 82%), 0 10px 26px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
  padding: 12px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.board-column[data-lane="inbox"] {
  --lane-accent: #64748b;
}

.board-column[data-lane="in_progress"],
.board-column[data-lane="next"] {
  --lane-accent: #2563eb;
}

.board-column[data-lane="blocked"],
.board-column[data-lane="waiting"] {
  --lane-accent: #d97706;
}

.board-column[data-lane="done"],
.board-column[data-lane="scheduled"] {
  --lane-accent: #6366f1;
}

.board-column.is-drag-over {
  border-color: color-mix(in srgb, var(--lane-accent), var(--line) 34%);
  background: color-mix(in srgb, var(--lane-accent), var(--panel) 94%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane-accent), transparent 60%), 0 10px 28px rgba(15, 23, 42, 0.12);
}

.board-column-header {
  align-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lane-accent), var(--panel) 96%), color-mix(in srgb, var(--lane-accent), var(--panel) 88%));
  border: 1px solid color-mix(in srgb, var(--lane-accent), var(--line) 68%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 78%);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: -2px 0 4px;
  padding: 10px 10px 10px 12px;
  position: relative;
}

.board-column h3 {
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.board-column-title-group,
.board-column-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.board-column-title-group {
  min-width: 0;
}

.board-column-controls {
  opacity: 0;
  transition: opacity 120ms ease;
}

.board-column:hover .board-column-controls,
.board-column:focus-within .board-column-controls {
  opacity: 1;
}

.board-column-menu-toggle {
  background: color-mix(in srgb, var(--panel-solid), transparent 8%);
  border-color: color-mix(in srgb, var(--lane-accent), var(--line) 55%);
  color: color-mix(in srgb, var(--lane-accent), var(--text) 25%);
  min-width: 38px;
  padding: 5px 8px;
}

.board-column-menu {
  background: var(--panel-solid);
  border: 1px solid color-mix(in srgb, var(--lane-accent), var(--line) 56%);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
  padding: 10px;
  position: absolute;
  right: 8px;
  top: calc(100% + 8px);
  width: 190px;
  z-index: 5;
}

.board-column-menu button {
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.board-column-color-picks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
}

.board-column-color-button {
  background: var(--lane-swatch);
  border: 1px solid color-mix(in srgb, var(--lane-swatch), black 18%);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  min-height: 28px;
  min-width: 28px;
  padding: 0;
}

.board-lane-dot {
  background: color-mix(in srgb, var(--lane-accent), white 18%);
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lane-accent), transparent 84%);
  height: 9px;
  width: 9px;
}

.task-card {
  --task-lane-accent: #64748b;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--task-lane-accent), transparent 92%), color-mix(in srgb, var(--task-lane-accent), transparent 100%) 12px),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 4%), color-mix(in srgb, var(--panel-solid), var(--bg) 16%));
  border: 1px solid color-mix(in srgb, var(--line), transparent 6%);
  border-left: 1px solid color-mix(in srgb, var(--line), transparent 12%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 82%), 0 6px 18px rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
  padding: 12px 12px 11px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
}

.task-card[data-lane="inbox"] {
  --task-lane-accent: #64748b;
}

.task-card[data-lane="in_progress"],
.task-card[data-lane="next"] {
  --task-lane-accent: #2563eb;
}

.task-card[data-lane="blocked"],
.task-card[data-lane="waiting"] {
  --task-lane-accent: #d97706;
}

.task-card[data-lane="done"],
.task-card[data-lane="scheduled"] {
  --task-lane-accent: #6366f1;
}

.todo-card {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.task-card:hover,
.task-item:hover {
  border-color: color-mix(in srgb, var(--task-lane-accent), var(--line) 72%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.task-card h4 {
  font-size: 0.98rem;
  line-height: 1.35;
  margin: 0 0 4px;
}

.task-title-row {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.task-title-row h4 {
  min-width: 0;
}

.task-public-code {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 20%);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.9;
  padding: 4px 8px;
  text-transform: uppercase;
}

.task-card.is-watch {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--success), transparent 72%),
    inset 0 1px 0 color-mix(in srgb, white, transparent 82%),
    0 6px 18px rgba(15, 23, 42, 0.08);
}

.task-card.is-dragging,
.task-card.is-loading-card {
  opacity: 0.64;
}

.history-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.history-row.closed-fresh {
  border-left: 4px solid var(--success);
  padding-left: 10px;
}

.history-row.closing-soon {
  border-left: 4px solid var(--warning);
  padding-left: 10px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-connections-actions {
    align-items: center;
}

.settings-connections-actions .status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
}

.dead-letter-bulk-actions { margin: 0 0 10px; }
.finding-list { display: grid; gap: 10px; }
.finding { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.finding.is-attention { border-color: color-mix(in srgb, #d64545, var(--line) 45%); }
.finding.is-fix { border-color: color-mix(in srgb, var(--accent), var(--line) 45%); }
.finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.finding-head h3 { margin: 0; font-size: 1rem; }
.finding p { margin: 4px 0; }
.finding .button-row { margin-top: 8px; }
.finding-details { margin-top: 8px; }
.finding-details pre { white-space: pre-wrap; font-size: .78rem; margin: 6px 0 0; }
.finding-dismissed { margin-top: 12px; }
.finding-dismissed ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.finding-dismissed li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eye-field { display: flex; align-items: center; gap: 6px; }
.eye-field input { flex: 1 1 auto; min-width: 0; }
.eye-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.eye-button:hover, .eye-button.is-on { color: var(--accent); border-color: var(--accent); }
.eye-field .vendor-secret { margin-left: 6px; }

.button-row form {
  margin: 0;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.database-health-summary-grid,
.database-group-grid,
.database-quality-grid,
.database-maintenance-grid,
.database-group-details {
  display: grid;
  gap: 16px;
}

.weather-location-picker {
  display: block;
  position: relative;
}

.weather-location-results {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
  left: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}

.weather-location-option,
.weather-location-message {
  background: var(--panel-solid);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  display: block;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.weather-location-option:last-child,
.weather-location-message:last-child {
  border-bottom: 0;
}

.weather-location-option:hover,
.weather-location-option.is-active {
  background: color-mix(in srgb, var(--accent), var(--panel-solid) 90%);
}

.weather-location-option strong,
.weather-location-option small {
  display: block;
}

.weather-location-option small,
.weather-location-message {
  color: var(--muted);
  font-size: 0.78rem;
}

.database-health-center {
  display: grid;
  gap: 8px;
}

.database-health-center > .panel,
.database-health-center > details.panel {
  margin: 0;
  padding: 10px 12px;
}

.database-health-center h2,
.database-health-center h3,
.database-health-center p {
  margin-top: 0;
}

.database-health-center .admin-section-intro p,
.database-health-center .database-feature-header p {
  margin-bottom: 0;
}

.database-health-center .database-health-summary-grid,
.database-health-center .database-quality-grid,
.database-health-center .database-group-grid,
.database-health-center .database-maintenance-grid,
.database-health-center .database-group-details {
  gap: 8px;
}

.database-health-center .database-health-card {
  min-height: 0;
  padding: 9px 11px;
}

.database-health-center .database-health-card strong {
  margin: 2px 0 3px;
}

.database-health-center .summary-grid.compact {
  gap: 6px;
}

.database-health-center .summary-grid.compact > div {
  min-height: 0;
  padding: 8px 10px;
}

.database-attention-panel {
  border-color: color-mix(in srgb, var(--warning, #d68a16) 55%, var(--line));
}

.database-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.database-table-inventory {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.database-table-inventory th,
.database-table-inventory td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.database-table-inventory th {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.database-review-items {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.user-billing-cell {
  display: grid;
  gap: 0.18rem;
  min-width: 11rem;
}

.user-billing-cell span {
  color: var(--muted);
  font-size: 0.82rem;
}

.user-edit-billing-summary {
  margin-top: 1rem;
}

.user-account-history {
  margin-top: 0.5rem;
  max-width: 18rem;
}

.user-account-history summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
}

.user-account-history ol {
  display: grid;
  gap: 0.55rem;
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
}

.user-account-history li,
.user-account-history li span {
  display: block;
  font-size: 0.76rem;
}

.account-billing-summary,
.account-history-panel {
  min-width: 0;
}

.account-history-table td,
.account-history-table th {
  vertical-align: top;
}

.account-history-table td:first-child {
  min-width: 10rem;
}

.database-health-summary-grid,
.database-quality-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.database-group-grid,
.database-maintenance-grid,
.database-group-details {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.database-health-card strong {
  display: block;
  font-size: 1.05rem;
  margin: 6px 0 8px;
}

.database-health-card p,
.database-group-card summary p {
  margin: 0;
}

.database-group-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.database-group-card summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, max-content);
  list-style: none;
  padding: 14px 16px;
}

.database-group-card summary > div:first-child,
.database-group-card summary strong,
.database-group-card summary p,
.database-group-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.database-group-card summary::-webkit-details-marker {
  display: none;
}

.database-group-card[open] summary {
  border-bottom: 1px solid var(--line);
}

.database-group-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
  align-content: start;
}

.database-group-details {
  padding: 14px 16px 16px;
}

.database-quality-card,
.database-maintenance-grid > .soft-panel,
.database-maintenance-grid > .hard-delete-panel {
  border-radius: 12px;
}

.database-quality-grid {
  grid-template-columns: 1fr;
}

.database-quality-detail {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.database-quality-detail summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.database-lane-repair-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 12px 0;
}

.database-lane-repair-summary > div {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 16%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.database-lane-repair-summary strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.database-repair-block {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.database-repair-block h3,
.database-task-fix-copy p {
  margin-top: 0;
}

.database-priority-panel h2,
.database-repair-block h3,
.database-bulk-action h4 {
  margin-bottom: 8px;
}

.database-repair-block form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.database-task-fix-form {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 18%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.database-task-fix-copy {
  min-width: 0;
}

.database-task-fix-copy p {
  overflow-wrap: anywhere;
}

.database-fix-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.database-fix-card {
  align-items: start;
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 18%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.database-fix-card-form {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto;
}

.database-fix-copy {
  min-width: 0;
}

.database-fix-copy strong {
  display: block;
  margin-bottom: 6px;
}

.database-fix-copy p {
  margin: 0;
  overflow-wrap: anywhere;
}

.database-inline-action {
  align-self: center;
  margin: 0;
}

.database-inline-action button,
.database-fix-card-form button {
  min-width: 140px;
  white-space: nowrap;
}

.database-fix-card label {
  margin: 0;
}

.database-fix-card select {
  margin-top: 4px;
}

.database-bulk-action {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 12%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 14px;
  margin-top: 14px;
  padding: 14px 16px;
}

.database-bulk-action p:last-of-type,
.database-priority-panel .muted:last-child {
  margin-bottom: 0;
}

.database-priority-panel code,
.database-fix-card code,
.database-bulk-action code {
  font-size: 0.92em;
}

.database-detail-list li {
  align-items: start;
}

.database-detail-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.database-quality-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.database-metric-list {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(130px, 1fr) auto;
  margin: 0 0 12px;
}

.database-metric-list dt {
  color: var(--muted);
  margin: 0;
}

.database-metric-list dd {
  margin: 0;
  text-align: right;
}

.database-maintenance-grid form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.database-maintenance-grid label span {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.database-health-topbar,
.database-feature-toggle,
.database-feature-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.database-health-topbar,
.database-feature-header {
  flex-wrap: wrap;
}

.database-feature-header {
  align-items: end;
}

.database-feature-filter {
  display: grid;
  gap: 5px;
  min-width: min(360px, 100%);
}

.database-feature-filter label {
  font-size: 0.8rem;
  font-weight: 800;
}

.database-feature-filter input {
  min-height: 42px;
}

.database-feature-filter-status {
  color: var(--muted);
  font-size: 0.75rem;
  min-height: 1em;
}

.database-health-refresh-form,
.database-health-refresh-form button {
  margin: 0;
}

.database-feature-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.database-feature-row {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: filter 140ms ease, opacity 140ms ease;
}

.database-feature-row.is-filter-muted {
  filter: grayscale(1);
  opacity: 0.24;
}

.database-feature-row.is-filter-match {
  filter: none;
  opacity: 1;
}

.database-feature-toggle {
  align-content: start;
  background: var(--panel-solid);
  border: 0;
  border-radius: inherit;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 12px;
  height: 100%;
  min-width: 0;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.database-feature-toggle:hover,
.database-feature-toggle:focus-visible {
  background: color-mix(in srgb, var(--panel-solid), var(--accent) 4%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 58%);
  filter: none;
}

.database-feature-main,
.database-feature-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.database-feature-main .muted,
.database-feature-meta span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.database-feature-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: flex-start;
  text-align: left;
}

.database-feature-meta .status-ok,
.database-feature-meta .status-warning,
.database-feature-meta .status-error {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 800;
  padding: 2px 8px;
}

.database-feature-meta .status-ok {
  color: var(--success);
}

.database-feature-meta .status-warning {
  color: var(--warning);
}

.database-feature-meta .status-error {
  color: var(--danger);
}

.database-feature-modal {
  max-height: min(88vh, 900px);
  overflow: hidden;
  padding: 0;
  width: min(980px, calc(100vw - 28px));
}

.database-feature-modal .modal-header {
  background: var(--panel-solid);
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.database-feature-modal-body {
  background: var(--panel-solid);
  color: var(--text);
  max-height: calc(min(88vh, 900px) - 76px);
  overflow: auto;
  padding: 16px;
}

.database-feature-loading,
.database-feature-error {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px;
}

.database-feature-error {
  border-color: color-mix(in srgb, var(--danger), var(--line) 35%);
}

.database-feature-detail-grid,
.database-inline-action-stack {
  display: grid;
  gap: 14px;
}

.database-feature-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 14px;
}

.database-feature-quality-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
}

.database-inline-action-stack .database-fix-card,
.database-inline-action-stack .database-fix-card-form,
.database-inline-action-stack .database-bulk-action {
  margin: 0;
}

@media (max-width: 720px) {
  .database-group-card summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .database-group-meta {
    justify-items: start;
    text-align: left;
  }

  .database-feature-list {
    grid-template-columns: 1fr;
  }
}

.admin-test-result {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.admin-test-result h3 {
  margin-bottom: 6px;
}

.admin-test-result p {
  margin: 6px 0;
}

.database-maintenance-result-list {
  margin-top: 12px;
}

.database-quality-action {
  display: grid;
  gap: 12px;
}

.database-quality-action form {
  margin: 0;
}

.database-quality-action .button-secondary {
  width: 100%;
}

.debug-detail-viewer {
  min-width: min(28rem, 100%);
}

.debug-detail-viewer summary {
  color: var(--accent);
  font-weight: 600;
}

.debug-detail-list {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  margin: 12px 0 0;
}

.debug-detail-list dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.debug-detail-list dd {
  margin: 0;
}

.debug-detail-list pre {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.info-list.compact {
  grid-template-columns: minmax(100px, 150px) 1fr;
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-list li {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
}

.link-edit-button {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  padding: 5px 8px;
}

.weather-location {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 20%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 16px;
  padding: 10px 11px;
}

.weather-card .widget-body > .muted:last-child {
  font-size: 0.78rem;
}

.weather-head {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.weather-current {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin: 5px 0;
  text-decoration: none;
}

.weather-current strong {
  font-size: 1.95rem;
}

.forecast-strip {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  margin: 6px 0;
}

.forecast-strip div {
  background: color-mix(in srgb, var(--panel), var(--bg) 42%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 4px;
  text-align: center;
}

.forecast-icon {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
  margin: 2px 0;
}

.weather-card .widget-body {
  gap: 8px;
  padding-bottom: 6px;
}

.weather-widget-footer {
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  color: var(--muted);
  display: grid;
  font-size: 0.66rem;
  gap: 1px;
  line-height: 1.2;
  margin-top: auto;
  padding: 5px 2px 0;
}

.weather-widget-footer small {
  font-size: 0.62rem;
}

.weather-background-refresh {
  display: none;
}

.weather-about-modal {
  width: min(560px, calc(100vw - 28px));
}

.weather-cache-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.weather-cache-list div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
}

.weather-cache-list dt {
  font-weight: 700;
}

.weather-cache-list dd {
  color: var(--muted);
  margin: 0;
}

.reminder-snooze-control {
  position: relative;
}

.reminder-snooze-control > summary {
  cursor: pointer;
  list-style: none;
}

.reminder-snooze-control > summary::-webkit-details-marker {
  display: none;
}

.reminder-snooze-control form {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
  display: grid;
  gap: 8px;
  left: 0;
  min-width: 210px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 5px);
  z-index: 18;
}

.reminder-snooze-control label {
  color: var(--muted);
  display: grid;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 4px;
  margin: 0;
}

.reminder-snooze-control select {
  margin: 0;
}

.new-task-modal {
  max-height: min(88vh, 900px);
  overflow: auto;
  padding: 18px;
  width: min(640px, calc(100vw - 28px));
}

.new-task-modal::backdrop {
  backdrop-filter: blur(5px);
  background: color-mix(in srgb, var(--bg), transparent 34%);
}

.new-task-modal form,
.new-task-primary-fields,
.new-task-advanced-drawer {
  display: grid;
  gap: 11px;
}

.new-task-primary-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(110px, 0.65fr);
}

.field-optional {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.task-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
}

.task-date-shortcuts button {
  border-radius: 999px;
  font-size: 0.74rem;
  padding: 5px 10px;
}

.new-task-advanced-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--accent);
  display: inline-flex;
  font-weight: 700;
  gap: 7px;
  justify-self: start;
  padding: 4px 0;
}

.new-task-advanced-toggle span {
  font-size: 1.15rem;
}

.new-task-advanced-drawer {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 15%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
}

.new-task-advanced-drawer[hidden] {
  display: none;
}

.new-task-advanced-drawer section {
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  display: grid;
  gap: 8px;
  padding-bottom: 11px;
}

.new-task-advanced-drawer section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.new-task-advanced-drawer h3 {
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  margin: 0;
  text-transform: uppercase;
}

.task-assignee-fieldset,
.task-visibility-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.task-assignee-fieldset legend,
.task-visibility-fieldset legend {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.task-assignee-pills,
.task-segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-assignee-pills label,
.task-segmented-control label {
  cursor: pointer;
  margin: 0;
}

.task-assignee-pills input,
.task-segmented-control input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.task-assignee-pills span,
.task-segmented-control span {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-block;
  font-size: 0.78rem;
  padding: 6px 10px;
}

.task-assignee-pills input:checked + span,
.task-segmented-control input:checked + span {
  background: color-mix(in srgb, var(--accent), var(--panel-solid) 82%);
  border-color: var(--accent);
  color: var(--text);
}

.task-assignee-pills input:focus-visible + span,
.task-segmented-control input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent), transparent 55%);
  outline-offset: 2px;
}

.task-money-row {
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
}

.new-task-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 12px;
}

.new-task-footer .toggle-row {
  margin: 0;
}

.new-task-footer-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 720px) {
  .new-task-primary-grid,
  .task-money-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .new-task-primary-grid,
  .task-money-row {
    grid-template-columns: 1fr;
  }

  .new-task-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .new-task-footer-actions > * {
    flex: 1;
  }
}

.rss-source-form {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
}

.rss-source-form label {
  grid-column: 1 / -1;
  margin: 0;
}

.rss-source-form select,
.rss-source-form button {
  margin: 0;
}

.rss-headline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rss-headline-list li {
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  display: grid;
  gap: 2px;
  padding: 8px 2px;
}

.rss-headline-list a {
  font-weight: 720;
  line-height: 1.28;
}

.rss-headline-list time,
.rss-widget-footer {
  color: var(--muted);
  font-size: 0.68rem;
}

.widget-title-detail {
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 500;
}

.notes-widget {
  --widget-accent: #7c3aed;
}

.notes-workspace,
.notes-editor {
  display: grid;
  gap: 0;
}

.note-file-shell {
  position: relative;
}

.notes-titlebar {
  align-items: flex-end;
  align-self: stretch;
  display: flex;
  gap: 10px;
}

.notes-titlebar h2 {
  margin: 0;
}

.note-file-button {
  align-self: flex-end;
  background: var(--panel-solid);
  border-bottom-color: var(--panel-solid);
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  min-width: 52px;
  padding-inline: 12px;
}

.notes-widget .widget-header {
  padding-bottom: 0;
}

.notes-widget .widget-header > .widget-actions,
.notes-titlebar > h2 {
  padding-bottom: 8px;
}

.note-file-menu {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  display: grid;
  left: 0;
  min-width: 210px;
  overflow: hidden;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 45;
}

.note-file-menu[hidden] {
  display: none;
}

.note-file-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 35%);
  border-radius: 0;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.note-file-menu button:last-child {
  border-bottom: 0;
}

.note-file-menu button:hover:not(:disabled),
.note-file-menu button:focus-visible {
  background: color-mix(in srgb, var(--widget-accent), transparent 90%);
}

.note-file-menu button span {
  color: var(--muted);
  font-size: .72rem;
}

.notes-document-title {
  background: color-mix(in srgb, var(--panel-solid), var(--widget-tint) 20%);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 760;
  padding: 12px 14px;
}

.notes-document-body {
  background: var(--panel-solid);
  border: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .91rem;
  line-height: 1.5;
  min-height: 230px;
  padding: 14px;
  resize: vertical;
  tab-size: 4;
}

.notes-document-title:focus,
.notes-document-body:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--widget-accent), transparent 35%);
  outline: 0;
}

.notes-statusbar {
  align-items: center;
  background: color-mix(in srgb, var(--panel-solid), var(--widget-tint) 18%);
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .7rem;
  gap: 5px 14px;
  padding: 6px 12px;
}

.notes-statusbar [data-note-library-usage] {
  margin-left: auto;
}

.notes-statusbar .is-over-limit {
  color: var(--danger);
  font-weight: 750;
}

.notes-workspace.is-loading {
  cursor: progress;
  opacity: .78;
}

.notes-result {
  margin: 0 12px 10px;
}

.notes-library-modal {
  width: min(680px, calc(100vw - 28px));
}

.notes-library-modal section,
.notes-archive-drawer {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.notes-library-modal h3 {
  margin: 0 0 8px;
}

.notes-library-list {
  display: grid;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
}

.notes-library-list article {
  align-items: center;
  background: color-mix(in srgb, var(--panel-solid), var(--widget-tint) 16%);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 10px;
}

.notes-library-list article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notes-library-list article strong,
.notes-library-list article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-archive-drawer summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 750;
  gap: 7px;
}

@media (max-width: 680px) {
  .notes-statusbar [data-note-library-usage] {
    margin-left: 0;
    width: 100%;
  }
}

.rss-widget-footer {
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}

.forecast-strip span,
.forecast-strip small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
}

.inline-form {
  margin: 8px 0 0;
}

.compact-form {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.pill {
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning);
  display: inline-block;
  font-size: 0.78rem;
  margin-left: 6px;
  padding: 2px 7px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.chip,
.count-badge {
  align-items: center;
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 10%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 14%);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.71rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
}

.count-badge {
  background: color-mix(in srgb, var(--lane-accent, var(--accent)), var(--panel) 92%);
  color: color-mix(in srgb, var(--lane-accent, var(--accent)), var(--text) 24%);
  margin-left: 0;
  min-width: 32px;
  justify-content: center;
}

.workstream-chip {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 12%);
  border-color: color-mix(in srgb, var(--line), transparent 8%);
  color: var(--muted);
  text-decoration: none;
}

.workstream-chip:hover {
  border-color: color-mix(in srgb, var(--accent), var(--line) 54%);
  color: var(--text);
}

.chip.priority-high {
  background: color-mix(in srgb, #d97706, var(--panel) 92%);
  border-color: color-mix(in srgb, #d97706, transparent 52%);
  color: color-mix(in srgb, #d97706, var(--text) 28%);
}

.chip.priority-normal {
  background: color-mix(in srgb, #64748b, var(--panel) 92%);
  border-color: color-mix(in srgb, #64748b, transparent 50%);
  color: color-mix(in srgb, #64748b, var(--text) 28%);
}

.chip.priority-low {
  background: color-mix(in srgb, var(--muted), var(--panel) 90%);
  border-color: color-mix(in srgb, var(--muted), transparent 52%);
  color: color-mix(in srgb, var(--muted), var(--text) 34%);
}

.due-chip,
.status-dismissed {
  background: color-mix(in srgb, var(--warning), var(--panel) 94%);
  border-color: color-mix(in srgb, var(--warning), transparent 54%);
  color: color-mix(in srgb, var(--warning), var(--text) 32%);
}

.follow-chip,
.watch-chip {
  background: color-mix(in srgb, var(--success), var(--panel) 95%);
  border-color: color-mix(in srgb, var(--success), transparent 56%);
  color: color-mix(in srgb, var(--success), var(--text) 30%);
}

.status-completed {
  background: color-mix(in srgb, var(--success), var(--panel) 94%);
  border-color: color-mix(in srgb, var(--success), transparent 56%);
  color: color-mix(in srgb, var(--success), var(--text) 30%);
}

.due-chip.is-overdue {
  background: color-mix(in srgb, var(--danger), var(--panel) 88%);
  border-color: color-mix(in srgb, var(--danger), transparent 40%);
  color: color-mix(in srgb, var(--danger), var(--text) 18%);
}

.due-chip.is-due-today {
  background: color-mix(in srgb, var(--warning), var(--panel) 88%);
  border-color: color-mix(in srgb, var(--warning), transparent 42%);
  color: color-mix(in srgb, var(--warning), var(--text) 18%);
}

.task-meta-row {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 8px 12px;
  justify-content: space-between;
  margin-top: 8px;
}

.task-context-meta,
.task-date-meta {
  opacity: 0.95;
}

.task-card p {
  margin-bottom: 0;
}

.task-complete-button {
  font-size: 0.78rem;
}

.task-complete-button:hover {
  border-color: color-mix(in srgb, var(--danger), black 16%);
  color: #f8fffb;
}

.task-restore-button {
  font-size: 0.78rem;
  padding: 6px 10px;
}

.membership-panel {
  padding: clamp(18px, 2.5vw, 30px);
}

.modal {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);
  color: var(--text);
  max-width: min(760px, calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  margin:auto;
  overflow:auto;
  position:fixed;
  inset:0;
  padding: 18px;
  width: 760px;
}

dialog.admin-user-modal[open] {
  bottom: auto;
  left: 50%;
  margin: 0;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 28px));
}

.home-command-strip[hidden],
.home-command-picture[hidden] {
  display: none !important;
}

[data-dashboard-shell][data-snapshot-group="home"],
.dashboard-route-shell-secondary {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

[data-dashboard-shell][data-snapshot-group="home"] > .dashboard-route-shell-header,
[data-dashboard-shell][data-snapshot-group="home"] > .dashboard-route-shell-status,
[data-home-secondary-status] {
  display: none;
}

.modal form,
.task-window-modal,
.task-window-modal .quick-add-modal-body {
  background: var(--panel-solid);
}

.checkbox-label {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.checkbox-label input { width: auto; }

@media (max-width: 720px) {
  .home-ai-row .quick-add-form { grid-template-columns: 1fr; }
  .home-widget-toolbar { align-items: flex-start; flex-direction: column; }
  .home-widget-store-button { width: 100%; }
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-header h2 {
  margin: 0;
}

.panel-header-shaded {
  align-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--panel) 95%), color-mix(in srgb, var(--accent), var(--panel) 88%));
  border-bottom: 1px solid color-mix(in srgb, var(--accent), var(--line) 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 78%);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: -18px -18px 16px;
  padding: 14px 18px;
}

.panel-header-copy h2,
.panel-header-copy .panel-kicker {
  margin: 0;
}

.panel-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-window-modal {
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  padding: 0;
}

.task-window-modal .modal-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--panel) 94%), color-mix(in srgb, var(--accent), var(--panel) 86%));
  border-bottom: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 78%), inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  margin: 0;
  padding: 12px 16px;
}

.task-window-modal .modal-header h2 {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
}

.task-modal-header-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.task-archive-form {
  display: inline-flex;
  margin: 0;
}

.task-archive-button {
  color: color-mix(in srgb, var(--danger), var(--text) 28%);
  font-size: 1rem;
}

.task-archive-button:hover,
.task-archive-button:focus-visible {
  background: color-mix(in srgb, var(--danger), var(--panel) 90%);
  border-color: color-mix(in srgb, var(--danger), var(--line) 45%);
  color: var(--danger);
}

.task-window-modal form[data-task-edit-form] {
  display: grid;
  gap: 8px;
  padding: 12px 16px 0;
}

.task-window-modal .modal-actions {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--panel) 95%), color-mix(in srgb, var(--accent), var(--panel) 88%));
  margin: 0;
  padding: 9px 16px 10px;
}

.hard-delete-panel {
  background: color-mix(in srgb, var(--danger), var(--panel) 94%);
  border-top: 1px solid color-mix(in srgb, var(--danger), var(--line) 52%);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 16px 16px;
}

.hard-delete-panel strong {
  color: var(--danger);
}

.hard-delete-panel p {
  margin: 4px 0 0;
}

.hard-delete-panel label {
  margin: 0;
}

.hard-delete-panel code {
  font-weight: 800;
}

.task-modal-action-bar {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.task-modal-action-bar button {
  flex: 0 1 148px;
  min-width: 132px;
  width: auto;
}

.task-due-datetime {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.task-due-datetime > span {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.task-due-datetime input {
  min-width: 0;
  width: 100%;
}

.task-history-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-history-grid > .panel {
  margin: 0;
}

.archive-retention-note {
  font-size: 0.78rem;
  margin: 10px 0 2px;
}

.archived-row {
  border-left: 4px solid color-mix(in srgb, var(--muted), var(--line) 45%);
  padding-left: 10px;
}

.task-reminder-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--panel) 95%), color-mix(in srgb, var(--accent), var(--panel) 88%));
  border-top: 1px solid color-mix(in srgb, var(--accent), var(--line) 58%);
  justify-content: center;
  padding-top: 8px;
}

.task-modal-public-code {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 16%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 28px;
  padding: 6px 10px;
  text-transform: uppercase;
}

.task-modal-public-code:empty::before {
  content: "Assigned after save";
}

.task-identity-warning {
  color: var(--warning);
  font-size: 0.75rem;
  font-weight: 700;
}

.modal-actions {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
}

.snooze-form {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(240px, auto) auto;
  gap: 8px 10px;
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
}

.snooze-form label {
  margin: 0;
}

.reminder-time-field {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(180px, 1fr);
}

.reminder-time-field span {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-followup-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) auto;
}

.task-watch-toggle {
  align-self: center;
  margin: 0;
  min-height: 38px;
  white-space: nowrap;
}

.modal-close-compact {
  min-height: 28px;
  min-width: 28px;
  padding: 2px 6px;
}

.task-modal-topbar {
  align-items: center;
  min-height: 48px;
  padding: 9px 14px;
}

.task-modal-topbar h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.task-modal-header-actions {
  flex: 0 0 auto;
}

.task-window-modal label {
  font-size: 0.84rem;
  margin-bottom: 0;
}

.task-window-modal input,
.task-window-modal select,
.task-window-modal textarea {
  margin-top: 4px;
}

.task-window-modal textarea {
  min-height: 74px;
}

.task-form-grid {
  gap: 10px 12px;
}

.task-form-grid.task-form-grid-meta,
.task-form-grid.task-form-grid-schedule {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-save-button {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent), #163f9f 22%);
  color: var(--on-accent);
}

.package-history-note {
  margin: 10px 0 0;
}

.modal-inline-actions {
  align-items: center;
  justify-content: flex-start;
}

.package-guidance {
  margin-top: 0;
}

.package-card,
.travel-trip-card {
  position: relative;
}

.package-edit-trigger {
  flex: 0 0 auto;
}

.is-overdue-package {
  border-color: color-mix(in srgb, var(--danger), var(--line) 48%);
}

.is-closed-package {
  opacity: 0.92;
}

.package-history-list {
  margin-top: 12px;
}

.package-timeline {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.package-timeline summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.package-timeline ol {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.package-timeline li {
  padding-left: 4px;
}

.package-timeline time,
.package-timeline span {
  display: block;
}

.package-timeline time {
  color: var(--muted);
  font-size: .78rem;
}

.package-modal .modal-header {
  margin-bottom: 16px;
}

.travel-planner-panel {
  overflow: hidden;
}

.travel-trip-grid {
  display: grid;
  gap: 14px;
}

.travel-plan-menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.travel-plan-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.travel-plan-card {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 22%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 14px;
  padding: 12px;
}

.import-result {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.copy-field {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 18%);
  border: 1px solid color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 16px;
  padding: 14px;
}

.export-empty-card h4 {
  margin: 0 0 6px;
}

.copy-field-prominent {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--panel) 96%), color-mix(in srgb, var(--accent), var(--panel) 91%));
  border-color: color-mix(in srgb, var(--accent), var(--line) 54%);
}

.copy-field-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.copy-field-header label {
  margin: 0;
}

.copy-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.copy-feedback {
  min-height: 1.2em;
  margin: 8px 0 0;
}

.copy-feedback.is-success {
  color: var(--success);
}

.copy-feedback.is-error {
  color: var(--warning);
}

.user-name-cell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-pill {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 8px;
}

.password-helper {
  color: var(--muted);
  margin: 0 0 10px;
}

.password-field {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.password-field input {
  margin: 0;
}

.password-toggle {
  min-width: 68px;
  padding: 8px 10px;
}

.code-textarea.code-textarea-wrap {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.is-helper-prompt {
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 20rem;
}

.is-reference-textarea {
  min-height: 15rem;
}

.is-snapshot-textarea {
  min-height: 20rem;
}

.import-result.is-error,
.import-error {
  border-color: color-mix(in srgb, var(--danger), var(--line) 35%);
}

.import-error {
  background: color-mix(in srgb, var(--danger), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--danger), var(--line) 35%);
  border-radius: 8px;
  margin: 12px 0;
  padding: 12px;
}

.code-textarea {
  font-family: "Consolas", "Courier New", monospace;
  line-height: 1.45;
  white-space: pre;
}

.quick-links-widget .widget-body,
.executive-widget .widget-body,
.weather-card .widget-body,
.widget-panel[data-widget-key="upcoming"] .widget-body,
.widget-panel[data-widget-key="watch_items"] .widget-body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), transparent 18%), transparent 22%);
}

.field-change-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.field-change-row strong {
  min-width: 110px;
}

.import-soft-panel {
  margin-top: 12px;
}

.import-progress {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 24%);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
  padding: 12px;
}

.progress-bar {
  background: color-mix(in srgb, var(--line), transparent 55%);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.progress-bar span {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent), #ffffff 32%));
  display: block;
  height: 100%;
  transition: width 180ms ease;
  width: 0;
}

.progress-steps {
  color: var(--muted);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 10px 0 0;
  padding-left: 20px;
}

.progress-steps li.is-active {
  color: var(--text);
  font-weight: 700;
}

.progress-steps li.is-complete {
  color: var(--success);
  font-weight: 700;
}

.import-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  padding: 10px 12px;
}

.import-group summary {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.developer-panel {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.task-actions form,
.task-item form {
  margin: 0;
}

details summary {
  cursor: pointer;
  font-weight: 700;
}

.info-list {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 8px 16px;
}

.info-list dt {
  color: var(--muted);
  font-weight: 700;
}

.info-list dd {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.diagnostic-table-wrap td:last-child {
  min-width: 220px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.user-row td[data-label]::before {
  content: none;
}

.changelog-text {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
}

th,
td {
  border-top: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-row input {
  width: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .home-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-life-os-grid {
    grid-template-columns: 1fr;
  }

  .quick-links-widget {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .topbar,
  .section-heading,
  .todo-card,
  .task-item,
  .task-actions {
    display: block;
  }

  .topbar-actions,
  .section-heading button,
  .task-actions form,
  .task-item form {
    margin-top: 8px;
  }

  .home-dashboard {
    grid-template-columns: 1fr;
  }

  .home-widget-grid {
    grid-template-columns: 1fr;
  }

  .home-command-strip {
    grid-template-columns: 1fr;
  }

  .quick-add-actions,
  .quick-add-apply-form {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-add-actions button,
  .quick-add-apply-form button {
    width: 100%;
  }

  .copy-field-header {
    display: block;
  }

  .copy-button {
    margin-top: 8px;
  }

  .quick-links-widget {
    grid-column: span 1;
  }

  .main-nav,
  .sub-nav,
  .nav-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-row {
    align-items: stretch;
    display: block;
  }

  .nav-actions {
    margin: 0;
  }

  .header-search {
    justify-content: stretch;
    margin: 0;
    max-width: none;
    min-width: 0;
  }

  .app-home-title > span:last-child {
    display: none;
  }

  .account-menu,
  .notification-dropdown {
    left: 0;
    right: auto;
  }

  .widget-color-popout {
    right: 0;
    top: calc(100% + 8px);
  }

  .widget-color-popout::after {
    display: none;
  }

  .main-nav a,
  .sub-nav a {
    flex: 0 0 auto;
  }

  .info-list {
    display: block;
  }

  .info-list dt {
    margin-top: 8px;
  }

  .user-table-wrap {
    overflow-x: visible;
  }

  .user-table-wrap table,
  .user-table-wrap thead,
  .user-table-wrap tbody,
  .user-table-wrap tr,
  .user-table-wrap th,
  .user-table-wrap td {
    display: block;
    width: 100%;
  }

  .user-table-wrap thead {
    display: none;
  }

  .user-table-wrap .user-row {
    background: color-mix(in srgb, var(--panel), var(--bg) 12%);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--glass-highlight);
    margin-bottom: 12px;
    overflow: hidden;
  }

  .user-table-wrap .user-row td {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
  }

  .user-table-wrap .user-row td:first-child {
    border-top: 0;
  }

  .user-table-wrap .user-row td[data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  .user-table-wrap .user-row .button-row {
    align-items: start;
    justify-items: start;
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-table-wrap .user-row .button-row form,
  .user-table-wrap .user-row .button-row .muted {
    width: 100%;
  }

  .user-name-cell {
    align-items: flex-start;
    flex-direction: column;
  }

  .debug-detail-list {
    grid-template-columns: 1fr;
  }

  .diagnostic-table-wrap table,
  .diagnostic-table-wrap thead,
  .diagnostic-table-wrap tbody,
  .diagnostic-table-wrap tr,
  .diagnostic-table-wrap th,
  .diagnostic-table-wrap td {
    display: block;
    width: 100%;
  }

  .diagnostic-table-wrap thead {
    display: none;
  }

  .diagnostic-table-wrap tr {
    background: color-mix(in srgb, var(--panel), var(--bg) 12%);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .diagnostic-table-wrap td {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
  }

  .diagnostic-table-wrap td:first-child {
    border-top: 0;
  }

  .diagnostic-table-wrap td::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  .board-preview {
    display: flex;
    overflow-x: auto;
  }

  .board-column {
    min-width: 82vw;
  }

  .history-row {
    align-items: flex-start;
    display: block;
  }

  .snooze-form {
    display: block;
  }

  .reminder-time-field {
    display: block;
  }

  .task-modal-action-bar,
  .task-followup-row {
    grid-template-columns: 1fr;
  }

  .task-modal-action-bar {
    display: grid;
    justify-content: stretch;
  }

  .task-modal-action-bar button {
    min-width: 0;
    width: 100%;
  }

  .task-form-grid.task-form-grid-meta,
  .task-form-grid.task-form-grid-schedule {
    grid-template-columns: 1fr;
  }

  .panel-header-shaded,
  .task-title-row {
    align-items: flex-start;
    display: block;
  }

  .panel-header-actions,
  .travel-plan-menu {
    margin-top: 10px;
  }

  .database-group-card summary,
  .database-fix-card,
  .database-fix-card-form {
    grid-template-columns: 1fr;
  }

  .database-group-meta {
    justify-items: start;
    text-align: left;
  }

  .board-column-controls {
    opacity: 1;
  }
}
.home-diagnostic-panel {
  margin-bottom: 1rem;
}

.home-diagnostic-panel summary {
  cursor: pointer;
  font-weight: 600;
}

.home-diagnostic-grid {
  margin-top: 0.75rem;
}
.signup-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.signup-provider-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
}

.signup-plan-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0;
}

.signup-plan-card {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 8%);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
  padding: 12px;
}

.signup-plan-card.is-featured {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

.signup-plan-card p {
  margin: 8px 0;
}

.signup-plan-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.beta-launch-callout {
  align-items: flex-start;
  background: color-mix(in srgb, var(--accent), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 45%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 12px 0;
  padding: 10px 12px;
}

.signup-provider-list button {
  width: 100%;
}

.signup-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.signup-provider-status {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.signup-provider-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: 12px;
}

.signup-provider-card {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 10%);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
  padding: 14px;
}

.signup-provider-card-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.signup-provider-card code {
  overflow-wrap: anywhere;
}

.signup-mode-form,
.signup-test-link-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}

.signup-plan-switches {
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 8px 12px 10px;
}

.signup-plan-switches legend {
  font-weight: 700;
  padding: 0 5px;
}

.signup-plan-switches .toggle-row {
  margin: 0;
}

.signup-mode-form label,
.signup-test-link-form label {
  min-width: 180px;
  margin: 0;
}

.signup-metrics {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .signup-plan-grid,
  .signup-plan-switches {
    grid-template-columns: 1fr;
  }

  .signup-mode-form > *,
  .signup-test-link-form > * {
    width: 100%;
  }
}
/* Unified Inbox */
.inbox-page{display:grid;gap:16px;width:100%;max-width:none}.inbox-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px;border:1px solid var(--border,#cbd5e1);border-radius:18px;background:var(--surface,#fff)}.inbox-hero h1{margin:.2rem 0 .35rem}.inbox-hero p{margin:0;max-width:880px;color:var(--muted,#64748b)}.inbox-intake{min-width:min(460px,100%)}.inbox-intake>summary{cursor:pointer;list-style:none;border:1px solid var(--accent,#bf5328);border-radius:10px;padding:10px 14px;text-align:center;color:var(--accent,#bf5328);font-weight:700}.inbox-intake[open]>summary{margin-bottom:14px}.inbox-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.inbox-form-grid label{display:grid;gap:5px;font-weight:700}.inbox-form-grid input,.inbox-form-grid select,.inbox-form-grid textarea,.inbox-filters select{width:100%}.inbox-form-grid .span-2{grid-column:1/-1}.inbox-form-action{display:flex;align-items:end}.inbox-summary{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:10px}.inbox-summary a{display:flex;align-items:center;gap:10px;padding:13px 15px;border:1px solid var(--border,#cbd5e1);border-radius:14px;background:var(--surface,#fff);color:inherit;text-decoration:none}.inbox-summary a.active{border-color:var(--accent,#bf5328);box-shadow:inset 0 0 0 1px var(--accent,#bf5328)}.inbox-summary strong{font-size:1.45rem}.inbox-summary span{color:var(--muted,#64748b)}.inbox-filters{display:flex;align-items:end;gap:10px;padding:12px 14px;border:1px solid var(--border,#cbd5e1);border-radius:14px;background:var(--surface,#fff)}.inbox-filters label{display:grid;gap:4px;min-width:180px;font-weight:700}.inbox-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:14px}.inbox-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:17px;border:1px solid var(--border,#cbd5e1);border-left:5px solid #2563eb;border-radius:16px;background:var(--surface,#fff)}.inbox-card.inbox-status-applied{border-left-color:#047857}.inbox-card.inbox-status-dismissed{border-left-color:#94a3b8}.inbox-card.inbox-status-error{border-left-color:#b91c1c}.inbox-card h2{margin:8px 0;font-size:1.08rem}.inbox-card p{margin:6px 0;color:var(--muted,#64748b)}.inbox-card-meta,.inbox-card-facts{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.inbox-card-meta time,.inbox-card-facts{font-size:.78rem;color:var(--muted,#64748b)}.inbox-source-badge,.inbox-status-badge{display:inline-flex;padding:3px 8px;border:1px solid var(--border,#cbd5e1);border-radius:999px;font-size:.72rem;font-weight:700}.inbox-card-actions{display:flex;align-items:flex-start;gap:7px}.inbox-review{grid-column:1/-1;border-top:1px solid var(--border,#cbd5e1);padding-top:10px}.inbox-review>summary{cursor:pointer;font-weight:700;color:var(--accent,#bf5328)}.inbox-review form{margin-top:12px}.inbox-error{padding:8px 10px;border-radius:8px;background:#fef2f2!important;color:#991b1b!important}.inbox-empty,.inbox-migration-callout{padding:30px;text-align:center;border:1px dashed var(--border,#cbd5e1);border-radius:16px;background:var(--surface,#fff)}.inbox-connector-note{text-align:center;color:var(--muted,#64748b);font-size:.85rem}
.inbox-hero,.inbox-summary a,.inbox-filters,.inbox-card,.inbox-empty,.inbox-migration-callout{background:var(--panel-solid,#fff);border-color:var(--line,#cbd5e1);color:var(--text,#142132)}
.inbox-card{border-left-color:#2563eb}.inbox-card.inbox-status-applied{border-left-color:#047857}.inbox-card.inbox-status-dismissed{border-left-color:#94a3b8}.inbox-card.inbox-status-error{border-left-color:#b91c1c}
.inbox-source-badge,.inbox-status-badge,.inbox-review{border-color:var(--line,#cbd5e1)}
.inbox-hero h1,.inbox-empty h2,.inbox-migration-callout h2,.inbox-card h2,.inbox-filters label{color:var(--text,#142132)}
.inbox-hero-copy{min-width:0}.inbox-hero-copy p{max-width:none;white-space:nowrap}.inbox-add-button{flex:0 0 min(460px,38vw)}
.inbox-intake-modal{width:min(760px,calc(100vw - 28px))}.inbox-intake-modal>p{margin:0 0 14px}.inbox-intake-modal .inbox-form-action{align-items:center;gap:10px}

.settings-regional-form{align-items:end;grid-template-columns:repeat(3,minmax(180px,1fr)) auto}.settings-regional-form label{margin:0}.settings-regional-form select{height:var(--control-h,40px);min-height:var(--control-h,40px)}.settings-regional-form .form-actions{align-self:end;display:flex;margin:0}
@media(max-width:1200px){.inbox-hero-copy p{white-space:normal}.inbox-add-button{flex-basis:auto;min-width:min(360px,100%)}}
@media(max-width:900px){.inbox-hero{flex-direction:column}.inbox-intake{width:100%}.inbox-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.inbox-card{grid-template-columns:1fr}.inbox-card-actions{grid-row:auto}.inbox-review{grid-column:1}.inbox-filters{flex-wrap:wrap}}
@media(max-width:900px){.settings-regional-form{grid-template-columns:1fr 1fr}.settings-regional-form .form-actions{align-self:end}}
@media(max-width:560px){.inbox-form-grid{grid-template-columns:1fr}.inbox-form-grid .span-2{grid-column:1}.inbox-summary{grid-template-columns:1fr}.inbox-filters label{min-width:100%;width:100%}.inbox-filters button{width:100%}.inbox-card-actions{flex-wrap:wrap}.settings-regional-form{grid-template-columns:1fr}.settings-regional-form .form-actions,.settings-regional-form button{width:100%}}

/* Intelligent Inbox provider setup */
.inbound-email-heading{align-items:flex-start}.inbound-readiness{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:.8rem;font-weight:800;white-space:nowrap}.inbound-readiness.is-ready{border-color:color-mix(in srgb,var(--success),var(--line) 35%);color:var(--success)}.inbound-readiness.is-locked{border-color:color-mix(in srgb,var(--warning),var(--line) 35%);color:var(--warning)}
.inbound-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}.inbound-summary-grid>div{display:grid;gap:3px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 12%)}.inbound-summary-grid strong{font-size:1.35rem}.inbound-summary-grid span{color:var(--muted);font-size:.8rem}
.inbound-resource-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.inbound-doc-actions{padding-top:14px;border-top:1px solid var(--line)}.inbound-doc-actions a{font-weight:700}
.inbound-setup-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;list-style:none;counter-reset:inbound-step;margin:16px 0;padding:0}.inbound-setup-steps li{counter-increment:inbound-step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;padding:13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 12%)}.inbound-setup-steps li::before{content:counter(inbound-step);grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}.inbound-setup-steps span{color:var(--muted);font-size:.85rem;line-height:1.45}
.inbound-settings-form{display:grid;gap:16px}.inbound-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.inbound-settings-grid label{display:grid;align-content:start;gap:6px;font-weight:700}.inbound-settings-grid .span-2{grid-column:1/-1}.inbound-settings-grid input,.inbound-settings-grid select,.inbound-settings-grid textarea{width:100%}.inbound-settings-grid textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}.inbound-settings-grid small{color:var(--muted);font-weight:400}.inbound-copy-field{display:block;padding:10px 12px}.inbound-copy-field .copy-field-header{align-items:center;flex-wrap:wrap;justify-content:flex-start;margin:0}.inbound-copy-field code{overflow-wrap:anywhere}.inbound-copy-field .copy-feedback{display:block;min-height:0}
.inbound-settings-grid .checkbox-row{display:flex;align-items:flex-start;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 12%)}.inbound-settings-grid .checkbox-row input{flex:0 0 auto;margin-top:3px;width:auto}
.inbound-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.inbound-option-grid .checkbox-row{display:flex;align-items:flex-start;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 12%)}.inbound-option-grid input{margin-top:3px}.inbound-option-grid code{overflow-wrap:anywhere}
.inbound-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.inbound-status-grid>div{display:grid;grid-template-columns:auto 1fr;gap:1px 9px;padding:11px;border:1px solid var(--line);border-radius:12px}.inbound-status-grid strong{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--line),transparent 35%)}.inbound-status-grid span{font-weight:800}.inbound-status-grid small{color:var(--muted)}.inbound-status-grid .is-complete{border-color:color-mix(in srgb,var(--success),var(--line) 45%)}.inbound-status-grid .is-complete strong{background:var(--success);color:#fff}
@media(max-width:900px){.inbound-email-heading{display:grid}.inbound-settings-grid,.inbound-option-grid{grid-template-columns:1fr}.inbound-settings-grid .span-2{grid-column:1}.inbound-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.inbound-resource-actions>*{width:100%;text-align:center}.inbound-status-grid{grid-template-columns:1fr}.inbound-settings-form .form-actions button{width:100%}}
.inbound-operations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.inbound-compact-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.inbound-compact-controls label{display:grid;gap:6px;min-width:180px}.smtp-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inbound-test-form{display:flex;align-items:end;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.inbound-test-form label{display:grid;gap:6px;flex:1;margin:0}.inbound-test-form input{height:var(--control-h,40px);min-height:var(--control-h,40px)}.inbound-test-form input{width:100%}.inbound-secret-note{margin:10px 0 0}.inbound-advanced-panel{margin-top:16px}.inbound-advanced-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}.inbound-advanced-panel>summary::-webkit-details-marker{display:none}.inbound-advanced-panel>summary:after{content:'+';font-size:1.35rem}.inbound-advanced-panel[open]>summary:after{content:'−'}.inbound-advanced-content{display:grid;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.inbound-advanced-content>.panel{margin:0}
@media(max-width:1000px){.inbound-operations-grid{grid-template-columns:1fr}}@media(max-width:640px){.smtp-settings-grid{grid-template-columns:1fr}.smtp-settings-grid .span-2{grid-column:1}.inbound-test-form{align-items:stretch;flex-direction:column}.inbound-advanced-panel>summary{align-items:flex-start;flex-direction:column}}

/* Paid connections */
.connections-page{display:grid;gap:18px;width:100%;max-width:none}.connections-page>.panel,.connections-catalog>.panel{margin:0}.connections-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.connections-hero h1,.connections-hero p{margin:.2rem 0}.connections-hero p:last-child{max-width:820px;color:var(--muted)}.connections-mode{display:inline-flex;padding:7px 11px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:800}.connections-callout h2,.connections-callout p{margin:.2rem 0}.connections-callout.is-warning{border-color:color-mix(in srgb,var(--warning),var(--line) 45%)}.connections-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.connection-provider-card{display:flex;flex-direction:column;gap:14px}.connection-provider-heading{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}.connection-provider-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:#4285f4;font-size:1.35rem;font-weight:900;box-shadow:inset 0 0 0 1px var(--line)}.connection-provider-heading h2,.connection-provider-heading p{margin:0}.connection-provider-heading p,.connection-scope-note,.connection-row p,.connection-row small,.connections-privacy p{color:var(--muted)}.connection-scope-note{margin:0}.connection-provider-card form{margin-top:auto}.connections-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.connections-section-heading h2,.connections-section-heading .panel-kicker{margin:0}.connections-section-heading>span{font-weight:800}.connections-empty{margin:18px 0 0;padding:22px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}.connection-list{display:grid;gap:10px;margin-top:16px}.connection-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 10%)}.connection-row h3,.connection-row p{margin:0}.connection-row small{display:block;margin-top:4px}.connection-error{color:var(--danger)!important}.connection-actions{display:flex;align-items:center;gap:8px}.connections-privacy h2,.connections-privacy p{margin:.2rem 0}@media(max-width:800px){.connections-catalog{grid-template-columns:1fr}.connection-row{align-items:flex-start;flex-direction:column}.connection-actions{flex-wrap:wrap}}@media(max-width:520px){.connections-hero,.connections-section-heading{align-items:flex-start;flex-direction:column}.connection-actions,.connection-actions form,.connection-actions button{width:100%}}

/* Plans and entitlements */
.plans-admin-page{display:grid;gap:18px}.plans-admin-page>.panel{margin:0}.plans-lead{max-width:960px}.plan-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-top:18px}.plan-catalog-card{display:flex;flex-direction:column;gap:10px;min-height:200px;padding:16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 10%)}.plan-catalog-card.is-public{border-color:color-mix(in srgb,var(--accent),var(--line) 48%)}.plan-card-topline,.plans-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.plan-card-topline .panel-kicker,.plan-catalog-card h3,.plan-catalog-card p{margin:0}.plan-catalog-card h3{font-size:1.25rem}.plan-catalog-card p{color:var(--muted);line-height:1.5}.plan-key,.plans-account-total{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:800}.plan-card-footer{display:grid;gap:3px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}.plan-card-footer span{color:var(--muted);font-size:.82rem}.plans-section-heading .panel-kicker,.plans-section-heading h2{margin:0}.account-distribution-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:12px;margin-top:16px}.account-count-card{display:grid;gap:3px;padding:15px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 10%)}.account-count-card strong{font-size:1.65rem}.account-count-card span{color:var(--muted)}.plans-ledger-status{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px}.plans-ledger-status.is-ready{border-color:color-mix(in srgb,var(--success),var(--line) 45%);background:color-mix(in srgb,var(--success),transparent 92%)}.plans-ledger-status.is-warning{border-color:color-mix(in srgb,var(--warning),var(--line) 45%);background:color-mix(in srgb,var(--warning),transparent 92%)}.release-boundary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:16px 0 0;padding:0}.release-boundary-list li{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 10%)}.release-boundary-list span{color:var(--muted);line-height:1.45}@media(max-width:900px){.account-distribution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.release-boundary-list{grid-template-columns:1fr}}@media(max-width:560px){.plans-section-heading{align-items:flex-start;flex-direction:column}.account-distribution-grid{grid-template-columns:1fr}}

.theme-settings-panel{display:grid;gap:20px}.theme-settings-heading,.theme-contrast-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.theme-settings-heading h2,.custom-theme-maker h3{margin:.2rem 0}.theme-scheme-fieldset{min-width:0;margin:0;padding:0;border:0}.theme-scheme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.theme-scheme-card{position:relative;display:grid;gap:7px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 8%);cursor:pointer}.theme-scheme-card:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent),transparent 55%)}.theme-scheme-card input{position:absolute;top:10px;right:10px}.theme-scheme-card small{color:var(--muted)}.theme-scheme-card.is-locked{cursor:not-allowed;opacity:.58}.theme-scheme-preview{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:4px;height:48px;padding:7px;border-radius:9px;background:var(--scheme-preview-bg)}.theme-scheme-preview i{display:block;border-radius:5px;background:var(--scheme-preview-panel)}.theme-scheme-preview i:first-child{background:var(--scheme-preview-accent)}.custom-theme-maker{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 8%)}.custom-theme-maker.is-locked{opacity:.7}.custom-theme-controls{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px}.custom-theme-controls label{display:flex;align-items:center;justify-content:space-between;gap:8px}.custom-theme-controls input[type="color"]{width:48px;height:38px;padding:2px}.custom-theme-preview{display:grid;gap:6px;padding:18px;border:1px solid color-mix(in srgb,var(--custom-preview-text,#102d46),transparent 76%);border-radius:12px;background:var(--custom-preview-surface,#fff);color:var(--custom-preview-text,#102d46)}.custom-theme-preview button{justify-self:start;background:var(--custom-preview-accent,#bf5328);border-color:var(--custom-preview-accent,#bf5328);color:#fff}.theme-contrast-row [data-theme-contrast].is-valid{color:var(--success)}.theme-contrast-row [data-theme-contrast].is-invalid{color:var(--danger)}@media(max-width:760px){.theme-settings-heading,.theme-contrast-row{align-items:flex-start;flex-direction:column}.custom-theme-controls{grid-template-columns:repeat(2,minmax(120px,1fr))}}@media(max-width:460px){.custom-theme-controls{grid-template-columns:1fr}}

.settings-shell{display:grid;grid-template-columns:minmax(235px,280px) minmax(0,1fr);gap:18px;align-items:start}.settings-sidebar{position:sticky;top:82px;max-height:calc(100vh - 102px);overflow-y:auto;padding:14px 18px 18px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 8%)}.settings-sidebar-heading{margin:0 0 14px;padding:0 10px 12px;border-bottom:1px solid var(--line)}.settings-sidebar-heading h1{margin:0;font-size:clamp(1.45rem,2vw,2rem)}.settings-section-nav{display:grid;gap:20px;margin:0}.settings-nav-group{display:grid;gap:7px}.settings-nav-group h2{margin:0;padding:0 10px;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.settings-nav-items{display:grid;gap:4px}.settings-section-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 11px;border:1px solid transparent;border-radius:11px;color:var(--text);text-decoration:none}.settings-section-link strong,.settings-section-link span{grid-column:1}.settings-section-link strong{font-size:.9rem}.settings-section-link span{color:var(--muted);font-size:.74rem;line-height:1.35}.settings-section-link:hover,.settings-section-link.is-active{border-color:color-mix(in srgb,var(--accent),var(--line) 48%);background:color-mix(in srgb,var(--accent),var(--panel-solid) 93%)}.settings-section-link.is-active{box-shadow:inset 3px 0 0 var(--accent)}.settings-section-link.is-active::after{content:'✓';grid-column:2;grid-row:1/3;align-self:center;color:var(--accent);font-size:1rem;font-weight:900}.settings-content{min-width:0}.settings-content-heading{margin:0 0 14px;padding:0 2px 13px;border-bottom:1px solid var(--line)}.settings-content-heading .panel-kicker,.settings-content-heading h2,.settings-content-heading p{margin:.15rem 0}.settings-content-heading h2{font-size:clamp(1.45rem,2vw,2rem)}.settings-page-panels{display:grid;gap:16px;max-width:1040px}.settings-page-panels>.panel{margin:0}.settings-appearance-grid{align-items:stretch}.theme-picker-row{display:grid;grid-template-columns:110px minmax(220px,420px);align-items:end;gap:16px}.theme-picker-row label{display:grid;gap:6px}.theme-picker-preview{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;height:62px;padding:8px;border:1px solid var(--scheme-preview-line,var(--line));border-radius:12px;background:var(--scheme-preview-bg,#f4e7d0)}.theme-picker-preview i{display:grid;place-items:center;border-radius:6px;font-style:normal;font-size:.8rem;font-weight:800;line-height:1}.theme-picker-preview i.is-page{background:transparent;color:var(--scheme-preview-text,#1f2937)}.theme-picker-preview i.is-panel{background:var(--scheme-preview-panel,#fff);border:1px solid var(--scheme-preview-line,#d8dee6);color:var(--scheme-preview-accent,#bf5328);text-decoration:underline;text-underline-offset:2px}.theme-picker-preview i.is-accent{background:var(--scheme-preview-accent,#bf5328);color:var(--scheme-preview-on-accent,#fff)}.custom-theme-details{border-top:1px solid var(--line);padding-top:14px}.custom-theme-details>summary{cursor:pointer;font-weight:800;color:var(--accent)}.custom-theme-details[open]>summary{margin-bottom:12px}@media(max-width:980px){.settings-shell{grid-template-columns:220px minmax(0,1fr);gap:14px}.settings-sidebar{padding:12px}.settings-section-link span{display:none}}@media(max-width:760px){.settings-shell{grid-template-columns:1fr}.settings-sidebar{position:static;max-height:none;overflow:visible}.settings-section-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-nav-group{align-content:start;padding:10px;border:1px solid var(--line);border-radius:12px}.settings-section-link span{display:block}.theme-picker-row{grid-template-columns:82px minmax(0,1fr)}}@media(max-width:520px){.settings-section-nav{grid-template-columns:1fr}.settings-nav-group{padding:8px}.settings-section-link{padding:10px}}
.settings-palette-regional-grid{align-items:stretch;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.settings-palette-regional-grid>.panel{margin:0}
.settings-palette-regional-grid .settings-regional-form{grid-template-columns:1fr 1fr}
.settings-palette-regional-grid .settings-regional-form label:first-child{grid-column:1/-1}
.settings-palette-regional-grid .settings-regional-form .form-actions{grid-column:1/-1}
.account-settings-form{align-items:end;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.account-settings-form .form-actions{align-self:end;margin:0}

/* Keep visible controls on one baseline in horizontal form rows. */
.form-grid > label,
.inline-form > label,
.home-compact-form > label,
.signup-mode-form > label,
.signup-test-link-form > label,
.inbound-test-form > label,
.inbound-compact-controls > label,
.inbox-filters > label {
  margin-bottom: 0;
}

.form-grid > .form-actions {
  align-self: end;
  margin: 0;
}

.inline-form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-form > label {
  flex: 1 1 220px;
}

.form-grid > label > :is(input, select),
.form-grid > .form-actions > button,
.inline-form > :is(input, select, button),
.inline-form > label > :is(input, select),
.home-compact-form > label > :is(input, select),
.home-compact-form > button,
.signup-mode-form > label > :is(input, select),
.signup-mode-form > button,
.signup-test-link-form > label > :is(input, select),
.signup-test-link-form > button,
.inbound-compact-controls > label > :is(input, select),
.inbound-compact-controls > button,
.inbox-filters > label > :is(input, select),
.inbox-filters > button {
  min-height: 42px;
}

@media (max-width: 560px) {
  .inline-form:has(> label) > label,
  .inline-form:has(> label) > button {
    flex-basis: 100%;
    width: 100%;
  }
}
.built-in-space-list .service-card:last-child{border-color:color-mix(in srgb,var(--accent),var(--line) 72%)}
.built-in-space-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.built-in-space-list .service-card {
  align-items: end;
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 10%);
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 72%);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 16px;
}
.built-in-space-list .service-card > div {
  flex: 1 1 180px;
}
.built-in-space-list .service-card h3 {
  margin: 0 0 8px;
}
.built-in-space-list .service-card p {
  margin: 0;
}
.built-in-space-list .service-card .inline-form {
  align-items: end;
  display: flex;
  flex: 1 1 320px;
  gap: 8px;
}
.built-in-space-list .service-card .inline-form input[type="text"] {
  flex: 1 1 auto;
  margin: 0;
  min-width: 160px;
}
.built-in-space-list .service-card > form:not(.inline-form),
.built-in-space-list .service-card > .status-chip {
  flex: 0 0 auto;
}

.family-seat-heading {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.family-seat-heading h2,
.family-seat-heading p { margin-bottom: 0; }
.family-seat-table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
}
.family-seat-table {
  border-collapse: collapse;
  min-width: 860px;
  width: 100%;
}
.family-seat-table th,
.family-seat-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
}
.family-seat-table th {
  background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.family-seat-table tbody tr:last-child td { border-bottom: 0; }
.family-seat-table td:first-child { width: 64px; }
.family-seat-table td:nth-child(2) { min-width: 245px; }
.family-seat-table td:nth-child(3) { min-width: 125px; }
.family-seat-table td:nth-child(4) { min-width: 210px; }
.family-seat-table td:last-child { min-width: 180px; }
.family-seat-table td > span,
.family-seat-table td > strong { display: block; }
.family-seat-table td > strong + span,
.family-seat-detail {
  color: var(--muted);
  font-size: .86rem;
  margin-top: 4px;
}
.family-seat-row-purchase { background: color-mix(in srgb, var(--panel-solid), var(--bg) 8%); }
.family-seat-invite { position: relative; }
.family-seat-invite summary {
  border: 1px solid var(--accent);
  border-radius: 9px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  list-style: none;
  padding: 8px 12px;
}
.family-seat-invite summary::-webkit-details-marker { display: none; }
.family-seat-invite[open] summary { margin-bottom: 10px; }
.family-seat-invite form {
  align-items: end;
  display: flex;
  gap: 8px;
  min-width: 360px;
}
.family-seat-invite label { flex: 1 1 auto; }
.family-seat-invite input { min-width: 220px; }
.family-seat-invite p { font-size: .82rem; margin: 8px 0 0; }
.family-seat-footnote { margin: 14px 0 0; }
.family-upgrade-panel button[disabled],
.family-seat-table button[disabled] { cursor: not-allowed; opacity: .68; }

@media (max-width: 760px) {
  .family-seat-heading { align-items: flex-start; flex-direction: column; }
  .family-seat-table-wrap { border: 0; overflow: visible; }
  .family-seat-table,
  .family-seat-table tbody,
  .family-seat-table tr,
  .family-seat-table td { display: block; min-width: 0; width: 100%; }
  .family-seat-table thead { display: none; }
  .family-seat-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .family-seat-table td {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 10px 12px;
  }
  .family-seat-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .family-seat-table tr td:last-child { border-bottom: 0; }
  .family-seat-invite form { align-items: stretch; flex-direction: column; min-width: 0; }
  .family-seat-invite input { min-width: 0; width: 100%; }
}

@media (max-width: 1180px) {
  .app-bar {
    display: grid;
    grid-template-columns: auto auto minmax(160px, 1fr) auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .home-switcher {
    grid-column: 1;
    grid-row: 1;
  }
  .app-home-title {
    grid-column: 2;
    grid-row: 1;
  }
  .nav-actions {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
  }
  .header-search {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
}
@media (max-width: 640px) {
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
  }
  .home-switcher { grid-column: 1; }
  .app-home-title { grid-column: 2; }
  .nav-actions { grid-column: 3; }
  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .main-nav {
    grid-row: 3;
  }
  .home-switcher-menu { min-width: min(320px, calc(100vw - 32px)); }
}
@media(max-width:980px){.settings-palette-regional-grid{grid-template-columns:1fr}}
/* v0.18.1 calendar */
.calendar-topbar,
.calendar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-month-actions,
.calendar-source-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.calendar-shell {
  overflow: hidden;
}

.calendar-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg-soft));
}

.calendar-weekdays span {
  padding: .55rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-month-grid {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.calendar-day {
  min-width: 0;
  min-height: 8.5rem;
  padding: .55rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.calendar-day.is-outside {
  background: color-mix(in srgb, var(--panel) 70%, var(--bg-soft));
  color: var(--muted);
}

.calendar-day.is-today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-day > time {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 999px;
  font-weight: 800;
}

.calendar-day.is-today > time {
  background: var(--accent);
  color: var(--on-accent);
}

.calendar-day-events {
  display: grid;
  gap: .3rem;
  margin-top: .4rem;
}

.calendar-event {
  display: block;
  min-width: 0;
  padding: .35rem .45rem;
  border-left: 3px solid currentColor;
  border-radius: 5px;
  background: color-mix(in srgb, currentColor 11%, var(--panel));
  color: var(--text);
  font-size: .76rem;
  line-height: 1.2;
  text-decoration: none;
}

.calendar-event span,
.calendar-event strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event span {
  color: var(--muted);
  font-size: .68rem;
}

.calendar-event-task { border-left-color: #0f766e; }
.calendar-event-reminder { border-left-color: #7c3aed; }
.calendar-event-important_date { border-left-color: #be185d; }
.calendar-event-google { border-left-color: #2563eb; }

.calendar-more {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.calendar-source {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: .76rem;
}

.calendar-source-task { box-shadow: inset 3px 0 #0f766e; }
.calendar-source-reminder { box-shadow: inset 3px 0 #7c3aed; }
.calendar-source-important_date { box-shadow: inset 3px 0 #be185d; }
.calendar-source-google { box-shadow: inset 3px 0 #2563eb; }
.calendar-source-personal { box-shadow: inset 3px 0 #2563eb; }
.calendar-source-work { box-shadow: inset 3px 0 #0f766e; }
.calendar-source-vfw { box-shadow: inset 3px 0 #be123c; }
.calendar-event-personal { border-color: color-mix(in srgb, #2563eb, var(--line) 45%) !important; box-shadow: inset 3px 0 #2563eb; }
.calendar-event-work { border-color: color-mix(in srgb, #0f766e, var(--line) 45%) !important; box-shadow: inset 3px 0 #0f766e; }
.calendar-event-vfw { border-color: color-mix(in srgb, #be123c, var(--line) 45%) !important; box-shadow: inset 3px 0 #be123c; }
.calendar-event-google { border-color: color-mix(in srgb, #64748b, var(--line) 45%) !important; box-shadow: inset 3px 0 #64748b; }

.calendar-agenda {
  margin-top: 1rem;
}

.calendar-agenda-list,
.calendar-widget-list {
  display: grid;
  gap: .6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.calendar-agenda-list li,
.calendar-widget-list li {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: .8rem;
  align-items: start;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}

.calendar-agenda-list time,
.calendar-agenda-list li > div,
.calendar-widget-list time,
.calendar-widget-list li > div {
  display: grid;
  gap: .2rem;
}

.calendar-widget-footer {
  margin-top: .8rem;
  text-align: right;
}

@media (max-width: 900px) {
  .calendar-topbar,
  .calendar-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-month-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .calendar-day {
    min-height: 0;
  }

  .calendar-day.is-outside {
    display: none;
  }
}

@media (max-width: 560px) {
  .calendar-agenda-list li,
  .calendar-widget-list li {
    grid-template-columns: 1fr;
  }
}

/* v0.18.2 calendar views and compact controls */
.calendar-topbar{min-height:0;margin-bottom:.55rem;padding:.2rem 0}.calendar-topbar h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem;margin:0}.calendar-heading-note{color:var(--muted);font-size:.95rem;font-weight:400}.calendar-view-switch{display:flex;align-items:center;gap:.35rem;margin-bottom:.7rem}.calendar-view-switch a{padding:.45rem .75rem;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-size:.88rem;font-weight:700;text-decoration:none}.calendar-view-switch a.is-active{border-color:var(--accent);background:var(--accent);color:#fff}.calendar-view-switch>span{width:1px;height:1.5rem;margin:0 .2rem;background:var(--line)}
.calendar-period-heading{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem}.calendar-period-heading h2{margin:0}.calendar-date-picker{display:flex;align-items:center;gap:.35rem}.calendar-date-picker input{width:auto;min-height:2.4rem;padding:.35rem .55rem}.calendar-summary-block{display:grid;justify-items:end;gap:.4rem}.calendar-refresh-time{font-size:.72rem}.calendar-event{width:100%;border-top:0;border-right:0;border-bottom:0;font-family:inherit;text-align:left;cursor:pointer}.calendar-event:hover,.calendar-agenda-event:hover,.calendar-week-event:hover{filter:brightness(.97);box-shadow:0 1px 4px color-mix(in srgb,var(--text) 18%,transparent)}
.calendar-agenda-days{display:grid;margin-top:1rem}.calendar-agenda-day{display:grid;grid-template-columns:minmax(7rem,9rem) 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}.calendar-agenda-day>time{display:grid;align-content:start;gap:.2rem}.calendar-agenda-day>time span{color:var(--muted);font-size:.82rem}.calendar-agenda-day .calendar-agenda-list{gap:.35rem;margin:0}.calendar-agenda-day .calendar-agenda-list li{grid-template-columns:5.5rem 1fr;gap:.7rem;padding:.25rem 0;border:0}.calendar-agenda-time{padding-top:.4rem;color:var(--muted);font-size:.82rem}.calendar-agenda-event{display:grid;gap:.25rem;width:100%;padding:.55rem .65rem;border:0;border-radius:8px;background:color-mix(in srgb,var(--panel) 86%,var(--bg-soft));color:var(--text);font-family:inherit;text-align:left;cursor:pointer}.calendar-agenda-event .calendar-source{justify-self:start}
.calendar-week-view{min-width:920px;margin-top:1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}.calendar-shell:has(.calendar-week-view){overflow-x:auto}.calendar-week-head,.calendar-week-all-day,.calendar-week-timed{display:grid;grid-template-columns:4.5rem repeat(7,minmax(7rem,1fr))}.calendar-week-head{background:var(--bg-soft)}.calendar-week-head>*{padding:.6rem .35rem;border-left:1px solid var(--line);text-align:center}.calendar-week-head .is-today{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent)}.calendar-week-all-day{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.calendar-week-all-day>span{padding:.45rem;color:var(--muted);font-size:.72rem;text-align:right}.calendar-week-all-day>div{display:grid;align-content:start;gap:.25rem;min-height:2.8rem;padding:.3rem;border-left:1px solid var(--line)}.calendar-week-timed{position:relative}.calendar-time-rail,.calendar-week-day-column{position:relative;height:864px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 36px)}.calendar-time-rail span{position:absolute;top:calc(var(--calendar-hour) * 36px - .55rem);right:.4rem;color:var(--muted);font-size:.68rem}.calendar-week-day-column{border-left:1px solid var(--line)}.calendar-week-event{position:absolute;z-index:1;top:calc(var(--event-start) * .6px);left:3px;width:calc(100% - 6px);min-height:max(24px,calc(var(--event-duration) * .6px));overflow:hidden;padding:.3rem .35rem;border:0;border-left:3px solid #2563eb;border-radius:5px;background:color-mix(in srgb,#2563eb 11%,var(--panel));color:var(--text);font-family:inherit;font-size:.7rem;line-height:1.2;text-align:left;cursor:pointer}.calendar-week-event span,.calendar-week-event strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-week-event.calendar-event-task{border-left-color:#0f766e}.calendar-week-event.calendar-event-reminder{border-left-color:#7c3aed}.calendar-week-event.calendar-event-important_date{border-left-color:#be185d}.calendar-event-modal{width:min(680px,calc(100vw - 2rem))}.calendar-event-modal .info-list dd{overflow-wrap:anywhere}.settings-calendar-range-form{align-items:end}.settings-calendar-range-form label{min-width:180px}
@media(max-width:900px){.calendar-title-row{gap:.7rem}.calendar-summary-block{justify-items:start}.calendar-agenda-day{grid-template-columns:1fr}.calendar-agenda-day>time{display:flex;gap:.5rem}.calendar-week-view{min-width:800px}}
@media(max-width:560px){.calendar-heading-note{display:block;width:100%;font-size:.85rem}.calendar-view-switch{flex-wrap:wrap}.calendar-period-heading{align-items:flex-start;flex-direction:column}.calendar-date-picker{width:100%}.calendar-date-picker input{flex:1;min-width:0}.calendar-agenda-day .calendar-agenda-list li{grid-template-columns:1fr}.calendar-agenda-time{padding:0}.calendar-source-summary{display:none}}

/* v0.18.3 calendar and task reliability */
.task-due-schedule{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:.45rem;min-width:0;margin:0;padding:0;border:0}.task-due-schedule legend{grid-column:1/-1;margin-bottom:.35rem;font-weight:700}.task-due-schedule input{min-width:0}.calendar-topbar>.icon-button{flex:0 0 auto}
@media(max-width:900px){.task-history-grid{grid-template-columns:1fr}}

/* v0.21 Family Settings */
.settings-section-nav{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}.family-invitation-panel{width:min(680px,calc(100vw - 2rem));margin:2rem auto}.family-sharing-intro p{max-width:76rem}
.status-page {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 48px);
  padding: 24px;
}
.status-card {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  max-width: 680px;
  padding: clamp(24px, 5vw, 48px);
  width: 100%;
}
.status-brand {
  align-items: center;
  display: flex;
  font-size: 1.2rem;
  font-weight: 900;
  gap: 10px;
  margin-bottom: 28px;
}
.status-brand img { border-radius: 10px; height: 42px; width: 42px; }
.status-card h1 { margin-bottom: 10px; }
.status-summary { color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.status-overall {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  margin: 24px 0;
  padding: 14px 16px;
}
.status-overall > span { background: currentColor; border-radius: 50%; height: 10px; width: 10px; }
.status-components { border: 1px solid var(--line); border-radius: 14px; margin: 0; overflow: hidden; }
.status-components > div { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 14px 16px; }
.status-components > div + div { border-top: 1px solid var(--line); }
.status-components dt { font-weight: 800; }
.status-components dd { font-weight: 800; margin: 0; }
.status-card .is-operational { color: #16803c; }
.status-card .is-disrupted { color: #b42318; }
.status-checked { margin: 18px 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
  .status-page { min-height: calc(100vh - 24px); padding: 12px; }
  .status-card { border-radius: 16px; padding: 22px; }
  .status-components > div { align-items: flex-start; flex-direction: column; gap: 4px; }
}
/* Keyboard access remains visible in every palette and on every page. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent, #c65328);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #102f4a);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}
.auth-method-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-method-divider::before,
.auth-method-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.auth-provider-button {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* v0.24.1 system navigation, bounded workspaces, and progressive surfaces */
.spaces-switcher{position:relative;flex:0 0 auto}.spaces-switcher>summary{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-solid);color:var(--text);cursor:pointer;list-style:none}.spaces-switcher>summary::-webkit-details-marker{display:none}.spaces-switcher-label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.spaces-switcher-menu{position:absolute;z-index:620;top:calc(100% + 8px);right:0;display:grid;gap:4px;min-width:220px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel-solid);box-shadow:0 18px 44px rgba(10,31,49,.25)}.spaces-switcher-menu a{padding:9px 10px;border-radius:8px;color:var(--text);text-decoration:none}.spaces-switcher-menu a:hover,.spaces-switcher-menu a.active{background:color-mix(in srgb,var(--accent),var(--panel-solid) 88%);color:var(--accent)}

.workstream-tab-panel,.todo-list,.task-history-grid{width:min(100%,1280px);margin-inline:auto}.settings-shell{width:min(100%,1152px);margin-inline:auto}.settings-page-panels{max-width:none}.settings-page-panels>.panel{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2fr);column-gap:24px}.settings-page-panels>.panel> :is(.panel-kicker,h2,h3,p.muted):first-child{grid-column:1}.settings-page-panels>.panel> :not(.panel-kicker):not(h2):not(h3):not(p.muted){grid-column:2}.settings-page-panels>.panel>h2+.muted,.settings-page-panels>.panel>h3+.muted{grid-column:1}.settings-page-panels>.panel>form,.settings-page-panels>.panel>.form-grid,.settings-page-panels>.panel>.service-list,.settings-page-panels>.panel>.info-list,.settings-page-panels>.panel>details{grid-column:2;grid-row:1/span 8}

.calendar-source-summary button{font:inherit;color:var(--text);cursor:pointer;transition:opacity .16s ease,background .16s ease}.calendar-source-summary button[aria-pressed="false"]{opacity:.42;text-decoration:line-through}.calendar-event-drawer{inset:0 0 0 auto;width:min(520px,calc(100vw - 24px));max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border-radius:18px 0 0 18px;transform:translateX(100%);opacity:0;transition:transform .22s ease,opacity .18s ease}.calendar-event-drawer[open]{transform:translateX(0);opacity:1}.calendar-event-drawer::backdrop{background:rgba(8,20,32,.42);backdrop-filter:blur(2px)}

.weather-location-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:5px;margin-bottom:10px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}.weather-location-tabs button{display:grid;gap:1px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}.weather-location-tabs button[aria-selected="true"]{background:var(--panel-solid);color:var(--accent);box-shadow:0 1px 5px color-mix(in srgb,var(--text) 13%,transparent)}.weather-location-tabs small{font-size:.68rem;font-weight:600}.weather-card .weather-location[hidden]{display:none!important}.weather-card .weather-location{min-height:0}.weather-card .forecast-grid{grid-template-columns:repeat(5,minmax(58px,1fr))}

.executive-widget .summary-item{position:relative;border-left:3px solid #64748b;padding-right:82px;transition:transform .16s ease,box-shadow .16s ease}.executive-widget .summary-item:has(.due-chip){border-left-color:#d97706}.executive-widget .summary-item:has(.priority-high),.executive-widget .summary-item:has(.priority-urgent){border-left-color:#be123c}.executive-widget .summary-item .priority-normal,.executive-widget .summary-item .watch-chip,.executive-widget .summary-item .due-chip{display:none}.executive-widget .summary-item:hover{transform:translateY(-1px);box-shadow:0 5px 18px color-mix(in srgb,var(--text) 12%,transparent)}
.summary-triage-actions{position:absolute;top:50%;right:8px;display:flex;gap:4px;opacity:0;transform:translateY(-45%);transition:opacity .14s ease,transform .14s ease}.summary-item:hover .summary-triage-actions,.summary-item:focus-within .summary-triage-actions{opacity:1;transform:translateY(-50%)}.summary-triage-actions form{margin:0}.summary-snooze{position:relative}.summary-snooze>summary{display:flex;list-style:none}.summary-snooze>summary::-webkit-details-marker{display:none}.summary-snooze form{position:absolute;z-index:40;top:calc(100% + 6px);right:0;display:grid;gap:5px;width:210px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-solid);box-shadow:0 12px 30px rgba(10,31,49,.22)}.summary-snooze form button{width:100%;text-align:left}.summary-snooze form label{display:grid;gap:4px;font-size:.72rem}
.bookmark-row{grid-template-columns:minmax(0,1fr) auto}.bookmark-preview-button{opacity:0;transition:opacity .14s ease}.bookmark-row:hover .bookmark-preview-button,.bookmark-row:focus-within .bookmark-preview-button{opacity:1}.link-preview-drawer{inset:0 0 0 auto;width:min(720px,calc(100vw - 24px));max-width:none;height:100dvh;max-height:none;margin:0;padding:16px;border-radius:18px 0 0 18px}.link-preview-drawer iframe{width:100%;height:calc(100dvh - 82px);border:1px solid var(--line);border-radius:12px;background:#fff}.link-preview-drawer::backdrop{background:rgba(8,20,32,.42);backdrop-filter:blur(2px)}
.task-view-toggle{display:flex;justify-content:flex-end;gap:5px;width:min(100%,1280px);margin:0 auto 8px}.task-view-toggle .is-active{border-color:var(--accent);background:var(--accent);color:#fff}.workstream-tab-panel[data-task-view-mode="list"] .board-preview{display:grid;grid-template-columns:1fr;gap:0}.workstream-tab-panel[data-task-view-mode="list"] .board-column{display:contents}.workstream-tab-panel[data-task-view-mode="list"] .board-column-header{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px 9px 0 0;background:var(--bg-soft)}.workstream-tab-panel[data-task-view-mode="list"] .task-card{display:grid;grid-template-columns:minmax(220px,2fr) minmax(180px,1fr) auto;align-items:center;gap:10px;margin:0;padding:10px;border-radius:0;border-top:0}.workstream-tab-panel[data-task-view-mode="list"] .task-card p{display:none}.workstream-tab-panel[data-task-view-mode="list"] .task-title-row,.workstream-tab-panel[data-task-view-mode="list"] .badge-row,.workstream-tab-panel[data-task-view-mode="list"] .task-meta-row{margin:0}.workstream-tab-panel[data-task-view-mode="list"] .task-actions{justify-self:end}

/* Master To-Do parity and transaction-backed bulk task controls. */
.master-todo-shell{width:min(100%,1280px);margin-inline:auto}.master-todo-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.master-todo-header .task-view-toggle{width:auto;margin:0}.master-filter-bar{display:grid;gap:8px;margin:16px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}.master-filter-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.master-filter-group>span{min-width:62px;color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.filter-pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-solid);color:var(--text);font:inherit;font-size:.82rem;cursor:pointer}.filter-pill.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent),var(--panel-solid) 84%);color:var(--accent);font-weight:800}.master-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.master-kanban-column{min-width:0;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--bg-soft)}.master-kanban-column>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.master-kanban-column h3{margin:0;font-size:1rem}.master-kanban-stack{display:grid;gap:9px}.master-task-card{position:relative;padding-left:42px}.master-task-card .bulk-task-checkbox{position:absolute;top:14px;left:13px}.master-column-empty{margin:8px}.master-task-table-wrap{overflow-x:auto}.master-task-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0}.master-task-table :is(th,td){padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.master-task-table th{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}.master-task-table tbody tr{cursor:pointer;transition:background .14s ease}.master-task-table tbody tr:hover,.master-task-table tbody tr.is-bulk-selected{background:color-mix(in srgb,var(--accent),transparent 92%)}.priority-stripe{display:block;width:5px;height:32px;border-radius:99px;background:#64748b}.priority-stripe.priority-urgent{background:#be123c}.priority-stripe.priority-high{background:#d97706}.priority-stripe.priority-low{background:#64748b}.is-overdue-text{color:#be123c;font-weight:800}.bulk-task-checkbox{display:inline-flex;align-items:center;justify-content:center;margin:0}.bulk-task-checkbox input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}.bulk-task-checkbox-card{position:absolute;z-index:4;top:10px;left:10px}.workstream-tab-panel .task-card:has(>.bulk-task-checkbox-card){position:relative;padding-left:42px}.task-card.is-bulk-selected{outline:2px solid var(--accent);outline-offset:1px}.bulk-action-bar{position:fixed;z-index:900;left:50%;bottom:24px;display:flex;align-items:center;flex-wrap:wrap;gap:9px;max-width:calc(100vw - 24px);padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--panel-solid);color:var(--text);box-shadow:0 22px 55px rgba(7,20,33,.36);transform:translateX(-50%)}.bulk-action-bar[hidden]{display:none}.bulk-action-bar button{white-space:nowrap}.bulk-action-control{display:flex;align-items:center;gap:5px;margin:0;color:var(--muted);font-size:.76rem;font-weight:800}.bulk-action-control select{min-width:122px}.bulk-clear-button{width:36px;padding-inline:0;border-radius:50%;font-size:1.25rem}.bulk-action-message{flex-basis:100%;color:var(--muted);font-size:.75rem}.bulk-action-bar.is-working{pointer-events:none;opacity:.72}.is-bulk-removing{opacity:.22;transform:scale(.98);transition:opacity .18s ease,transform .18s ease}.master-filter-empty{text-align:center}

@media(max-width:1280px){.spaces-switcher-label,.header-weather small,.main-nav > a{font-size:0}.main-nav > a::before{font-size:.9rem}.main-nav a[data-global-nav="home"]::before{content:'⌂'}.main-nav a[data-global-nav="todo"]::before{content:'✓'}.main-nav a[data-global-nav="calendar"]::before{content:'▦'}.main-nav > a{min-width:38px;text-align:center}.spaces-switcher>summary strong{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:820px){.settings-page-panels>.panel{display:block}.settings-page-panels>.panel>*{grid-column:auto!important;grid-row:auto!important}.calendar-event-drawer{width:min(100%,520px)}.weather-card .forecast-grid{overflow-x:auto}.master-todo-header{display:grid}.master-todo-header .task-view-toggle{justify-content:flex-start}.master-kanban{grid-template-columns:1fr}.bulk-action-bar{right:12px;bottom:12px;left:12px;transform:none}.bulk-action-control{flex:1 1 150px}.bulk-action-control select{width:100%}}

/* System-wide edge-to-edge layout and widget consolidation. */
.mobile-app-nav,
.mobile-navigation-heading { display: none !important; }

.workstream-tab-panel,
.todo-list,
.task-history-grid,
.master-todo-shell,
.task-view-toggle,
.settings-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.settings-shell { grid-template-columns: 260px minmax(0, 1fr); }
.settings-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-content-heading,
.settings-content > .dashboard-notice,
.settings-content > .admin-panel-compact,
.settings-content > .settings-page-panels,
.settings-content > .grid { grid-column: 1 / -1; }
.settings-content > .panel { margin: 0; }
.settings-page-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; }
.settings-page-panels > .panel { display: block; }
.settings-page-panels > .panel > * { grid-column: auto !important; grid-row: auto !important; }

.weather-card { --widget-accent: var(--accent); background: var(--panel); border-color: var(--line); }
:root:is([data-theme="dark"],[data-theme="night"]) .weather-card { background: var(--panel); }
.grid-stack > .weather-card > .grid-stack-item-content { border-color: var(--line); }
.weather-card .widget-body { align-content: start; }
.weather-card .weather-location { display: block; width: 100%; }

.bookmark-group-content { overflow: visible; padding:7px; }
.quick-links-widget .widget-body { container-name: quick-links-body; container-type: inline-size; overflow: auto; padding-bottom:8px; scrollbar-gutter: auto; }
.quick-links-widget .bookmark-group-header { min-height:34px; padding:4px 7px; }
.quick-links-widget .bookmark-list.is-icon-view { gap:2px; }
.quick-links-widget .bookmark-list.is-icon-view .bookmark-row a { min-height:60px; padding:5px 6px; }
.quick-links-widget .bookmark-list.is-icon-view .bookmark-row img { height:28px; width:28px; }
.bookmark-section-add { min-width: auto; padding: 4px 7px; border-color: color-mix(in srgb, var(--bookmark-accent), var(--line) 55%); border-radius: 7px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.bookmark-section-add:hover { background: color-mix(in srgb, var(--bookmark-accent), var(--panel) 86%); }

@container quick-links-body (max-width: 620px) {
  .bookmark-grid > .bookmark-group.bookmark-width-compact {
    grid-column: span 6;
  }
}

@container quick-links-body (max-width: 420px) {
  .bookmark-grid > .bookmark-group,
  .bookmark-grid > .bookmark-group.bookmark-width-compact {
    grid-column: 1 / -1;
  }
}

.executive-widget .summary-item { border-left: 3px solid #64748b; padding-left: 10px; padding-right: 82px; }
.executive-widget .summary-item.action-item-status-high { border-left-color: #be123c; }
.executive-widget .summary-item.action-item-status-overdue { border-left-color: #d97706; }
.executive-widget .summary-item .priority-normal,
.executive-widget .summary-item .priority-high,
.executive-widget .summary-item .priority-urgent,
.executive-widget .summary-item .watch-chip,
.executive-widget .summary-item .due-chip { display: none; }

@media (max-width: 1023px) {
  .app-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .home-switcher { grid-column: 1; grid-row: 1; }
  .app-home-title { grid-column: 2; grid-row: 1; }
  .nav-actions { grid-column: 3; grid-row: 1; }
  .header-search { grid-column: 1 / -1; grid-row: 2; }
  .main-nav { display: none; }
  .home-switcher-menu { position: absolute; top: calc(100% + 9px); bottom: auto; left: 0; width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 110px); border-radius: 0 18px 18px 0; padding: 18px; overscroll-behavior: contain; }
  .mobile-app-nav,
  .mobile-navigation-heading { display: grid !important; }
  .mobile-app-nav { gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .page-home .mobile-app-nav,
  .page-home .mobile-navigation-heading { display: none !important; }
  .mobile-app-nav a { padding: 10px 11px; border-radius: 9px; color: var(--text); text-decoration: none; }
  .mobile-app-nav a:hover,
  .mobile-app-nav a.active { background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); color: var(--accent); }
  .calendar-source-summary { display: flex; flex-wrap: wrap; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .main-nav a { min-width: 0; font-size: .78rem; padding-inline: 8px; }
  .main-nav a::before { content: none !important; }
}

@media (max-width: 820px) {
  .settings-content,
  .settings-page-panels { grid-template-columns: 1fr; }
  .settings-content > * { grid-column: 1; }
}

/* v0.24.6: keep primary navigation anchored when optional search is hidden. */
@media (min-width: 1181px) {
  .app-bar {
    display:grid;
    grid-template-columns:auto auto minmax(0, 1fr) auto auto;
    grid-template-rows:auto;
  }
  .home-switcher { grid-column:1; grid-row:1; }
  .app-home-title { grid-column:2; grid-row:1; }
  .main-nav { grid-column:3; grid-row:1; }
  .header-search { grid-column:4; grid-row:1; }
  .nav-actions { grid-column:5; grid-row:1; }
}

/* Admin screens use the available workspace; settings exceptions are intentional. */
.admin-settings-shell .settings-content { display:block; }
.admin-settings-shell .settings-content > * { width:100%; margin:0 0 16px; }
.settings-content-family,
.settings-content-family .settings-page-panels,
.settings-content-history .settings-page-panels,
.settings-content-about .settings-page-panels { grid-template-columns:1fr; }

.user-directory-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.user-directory-heading h2,
.user-directory-heading .panel-kicker { margin:.15rem 0; }
.user-directory-toolbar { display:grid; grid-template-columns:minmax(220px,2fr) repeat(2,minmax(150px,1fr)) auto; align-items:end; gap:12px; margin:18px 0; }
.user-directory-toolbar label { display:grid; gap:6px; }
.user-result-count { align-self:center; white-space:nowrap; }
.user-directory [data-user-row][hidden] { display:none; }
.user-directory [data-user-no-results] td { padding:28px; color:var(--muted); text-align:center; }
.user-directory .user-table-wrap { border-block:1px solid var(--line); }
.user-directory .user-table-wrap table { min-width:0; font-size:.78rem; line-height:1.2; }
.user-directory .user-table-wrap :is(th,td) { padding:7px 6px; vertical-align:top; }
.user-directory .user-table-wrap th { font-size:.7rem; letter-spacing:.02em; }
.user-directory .user-name-cell { gap:4px; }
.user-directory .inline-pill { font-size:.66rem; padding:2px 5px; }
.user-directory .button-row { flex-wrap:nowrap; gap:4px; }

.user-directory-pagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding-top:12px; }
.user-directory-pagination > .muted { margin-right:auto; }
.user-directory-pagination label { display:flex; align-items:center; gap:7px; margin:0; font-size:.78rem; }
.user-directory-pagination select { min-width:76px; padding:6px 28px 6px 8px; }
.user-directory-pagination .button-row { align-items:center; }
.user-directory-pagination strong { min-width:88px; text-align:center; white-space:nowrap; }
.user-billing-cell { display:grid; gap:3px; }
.user-billing-cell .inline-pill + .muted { margin-top:4px; }
@media (max-width:900px) {
  .user-directory-toolbar { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .user-directory-heading { align-items:flex-start; }
  .user-directory-toolbar { grid-template-columns:1fr; }
  .user-directory-pagination { align-items:stretch; flex-direction:column; }
  .user-directory-pagination > .muted { margin-right:0; }
  .user-directory-pagination .button-row { display:grid; grid-template-columns:1fr auto 1fr; }
}

.admin-reauth-card .info-list {
  margin: 1rem 0;
}

/* v0.25.1 Helpdesk requester bubbles follow the shared theme surface contract. */
.helpdesk-public-conversation .helpdesk-message.is-user {
  background: color-mix(in srgb, var(--accent), var(--panel-solid) 82%);
  border-color: color-mix(in srgb, var(--accent), var(--line) 45%);
  color: var(--text);
}
.helpdesk-public-conversation .helpdesk-message.is-user header {
  color: var(--muted);
  opacity: 1;
}
.helpdesk-public-conversation .helpdesk-message.is-user a {
  color: var(--accent);
}
.helpdesk-public-conversation .helpdesk-message.is-user details summary {
  color: var(--danger);
}
.helpdesk-public-conversation .helpdesk-message.is-user details {
  border-top-color: var(--line);
}

/* Semantic foregrounds for solid status and accent surfaces. */
.helpdesk-folder-tabs a:hover,
.helpdesk-folder-tabs a.is-active,
.task-save-button,
.calendar-day.is-today > time,
.calendar-view-switch a.is-active,
.task-view-toggle .is-active,
.inbound-setup-steps li::before {
  color: var(--on-accent);
}
.alert-badge {
  color: var(--on-danger);
}
.inbound-status-grid .is-complete strong {
  color: var(--on-success);
}
.custom-theme-preview button {
  color: var(--custom-preview-on-accent, var(--on-accent));
}

/* v0.25.2 Admin roadmap: compact history, a clear S25 position, and visible future gates. */
.admin-roadmap-panel { display:grid; gap:1.15rem; }
.roadmap-heading,.roadmap-position-copy,.roadmap-progress-labels,.roadmap-card-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.roadmap-heading h2,.roadmap-heading p,.roadmap-card h4,.roadmap-card p { margin-bottom:0; }
.roadmap-summary { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }
.roadmap-summary span,.roadmap-status,.roadmap-sprint-number { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:.28rem .55rem; font-size:.73rem; font-weight:800; }
.roadmap-summary span { gap:.25rem; background:var(--action-secondary-bg); color:var(--text); }
.roadmap-position { padding:.9rem 1rem .7rem; border:1px solid color-mix(in srgb,var(--accent),var(--line) 42%); border-radius:14px; background:color-mix(in srgb,var(--accent),var(--panel-solid) 90%); }
.roadmap-position-copy strong { padding:.32rem .65rem; border-radius:999px; background:var(--action-primary-bg); color:var(--action-primary-fg); }
.roadmap-position-copy span { color:var(--text); font-weight:800; }
.roadmap-progress-track { position:relative; height:8px; margin:.85rem .15rem .35rem; border-radius:999px; background:color-mix(in srgb,var(--line),transparent 18%); }
.roadmap-progress-track span { display:block; width:var(--roadmap-progress); height:100%; border-radius:inherit; background:var(--accent); }
.roadmap-progress-track i { position:absolute; top:50%; left:var(--roadmap-position); width:18px; height:18px; transform:translate(-50%,-50%); border:3px solid var(--accent); border-radius:50%; background:var(--panel-solid); }
.roadmap-progress-labels { color:var(--muted); font-size:.7rem; }
.roadmap-progress-labels strong { margin-right:calc(16.667% - 1.2rem); margin-left:auto; color:var(--accent); }
.roadmap-current h3,.roadmap-upcoming h3 { margin:0 0 .65rem; }
.roadmap-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:.7rem; }
.roadmap-card { display:grid; gap:.48rem; min-width:0; padding:.8rem .85rem; border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:12px; background:color-mix(in srgb,var(--panel-solid),var(--bg) 7%); }
.roadmap-card.is-current { border-color:var(--accent); border-left-width:7px; background:color-mix(in srgb,var(--accent),var(--panel-solid) 88%); box-shadow:var(--shadow-card); }
.roadmap-card.is-complete { border-left-color:var(--success); }
.roadmap-card.is-validation { border-left-color:var(--warning); }
.roadmap-card.is-planned { border-left-color:var(--accent); }
.roadmap-sprint-number { background:var(--panel-solid); color:var(--text); letter-spacing:.04em; }
.roadmap-status-complete { border-color:color-mix(in srgb,var(--success),var(--line) 46%); background:color-mix(in srgb,var(--success),var(--panel-solid) 84%); color:var(--success); }
.roadmap-status-validation { border-color:color-mix(in srgb,var(--warning),var(--line) 46%); background:color-mix(in srgb,var(--warning),var(--panel-solid) 84%); color:var(--warning); }
.roadmap-status-trial { border-color:color-mix(in srgb,var(--success),var(--line) 46%); background:color-mix(in srgb,var(--success),var(--panel-solid) 84%); color:var(--text); }
.roadmap-status-current { border-color:var(--action-primary-border); background:var(--action-primary-bg); color:var(--action-primary-fg); }
.roadmap-status-planned { border-color:var(--action-secondary-border); background:var(--action-secondary-bg); color:var(--action-secondary-fg); }
.roadmap-card h4 { font-size:1rem; }
.roadmap-card p { font-size:.83rem; line-height:1.45; }
.roadmap-card .roadmap-gate { color:var(--muted); }
.roadmap-card .roadmap-gate strong { color:var(--text); }
.roadmap-history { padding-top:.85rem; border-top:1px solid var(--line); }
.roadmap-group-title { margin:.9rem 0 .5rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.roadmap-next-grid { grid-template-columns:1fr; }
.roadmap-later { margin-top:.9rem; }
.roadmap-slices { margin-top:.2rem; }
.roadmap-slices > summary { cursor:pointer; font-size:.83rem; font-weight:800; color:var(--accent); }
.roadmap-slice-list { margin:.5rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.roadmap-slice { padding:.55rem .65rem; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:9px; background:var(--panel-solid); }
.roadmap-slice-head { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.2rem; }
.roadmap-slice-code { font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--muted); }
.roadmap-slice p { margin:.2rem 0 0; font-size:.8rem; }
.roadmap-history > summary { padding:.25rem 0 .8rem; color:var(--text); cursor:pointer; font-weight:800; }
@media(max-width:760px){.roadmap-heading{align-items:flex-start;flex-direction:column}.roadmap-summary{justify-content:flex-start}.roadmap-position-copy{align-items:flex-start;flex-direction:column}}

/* A provider occupies one catalog row even when it grants several capabilities. */
.connection-provider-card.is-combined{grid-column:1/-1}
.connection-provider-state{margin:0}
.connection-provider-card.is-coming-soon{border-style:dashed}
.connection-provider-mark.is-microsoft{color:#0078d4}
.connection-provider-mark.is-apple{color:var(--text)}
.connection-provider-badge{align-self:flex-start;margin-top:auto;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 18%);color:var(--muted);font-size:.78rem;font-weight:800}

/* v0.25.5: a calm, personal Home canvas over the full NookFox toolset. */
.page-home {
  --home-glow: color-mix(in srgb, var(--accent), transparent 72%);
  padding: 10px 12px 34px;
}
.page-home::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 2%, color-mix(in srgb, var(--accent), transparent 79%), transparent 34rem),
    radial-gradient(ellipse at 86% 10%, color-mix(in srgb, var(--scheme-secondary, var(--text)), transparent 87%), transparent 38rem),
    linear-gradient(155deg, color-mix(in srgb, var(--bg-soft), white 5%), var(--bg));
  content: "";
}
.page-home > .app-bar { display: none !important; }
.home-focus {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 5vw, 72px);
  min-height: 270px;
  margin: 2px 0 18px;
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 72%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--scheme-secondary, var(--accent)), transparent 72%), transparent 18rem),
    linear-gradient(118deg, color-mix(in srgb, var(--panel-solid), transparent 8%), color-mix(in srgb, var(--panel), transparent 23%));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--text), transparent 88%), inset 0 1px 0 rgba(255,255,255,.6);
  isolation: isolate;
  animation: home-hero-grow .46s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: top center;
}
.home-focus-identity { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); min-width: 0; }
.home-focus-brand-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(52px, 6vw, 76px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 64%);
  border-radius: 18px;
  background: #f4e7d0;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text), transparent 88%);
}
.home-focus-brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.home-focus:has(.home-switcher-menu:not([hidden]), .notification-dropdown:not([hidden]), .account-menu:not([hidden])) {
  z-index: 700;
  overflow: visible;
}
.home-focus:has(.home-switcher-menu:not([hidden]), .notification-dropdown:not([hidden]), .account-menu:not([hidden])) :is(.home-switcher-menu, .notification-dropdown, .account-menu) {
  z-index: 710;
}
/* v0.36.1.1: an open More menu (a native details) escapes the hero the same way. */
.home-focus:has([data-header-menu][open]) {
  z-index: 700;
  overflow: visible;
}
.home-focus:has([data-header-menu][open]) .header-menu-list {
  z-index: 710;
}
.home-focus.is-home-leaving {
  opacity: .4;
  transform: translateY(-18px) scaleY(.26) scaleX(.985);
  border-radius: 16px;
  animation: none;
  transition: opacity .34s ease, transform .34s cubic-bezier(.4,0,.2,1), border-radius .34s ease;
}
@keyframes home-hero-grow {
  from { opacity: .35; transform: translateY(-14px) scaleY(.78) scaleX(.985); border-radius: 16px; }
  to { opacity: 1; transform: none; border-radius: 28px; }
}
.home-focus::after {
  position: absolute;
  right: -7rem;
  bottom: -10rem;
  z-index: -1;
  width: 28rem;
  height: 28rem;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 75%);
  border-radius: 52% 48% 40% 60% / 44% 58% 42% 56%;
  background: color-mix(in srgb, var(--accent), transparent 90%);
  content: "";
  /* Clip to the hero's own right and bottom edges (with its 28px corner) so
     the blob stays inside even when an open menu switches the hero to
     overflow: visible. */
  clip-path: inset(0 7rem 10rem 0 round 0 0 28px 0);
  /* v0.29.4: the blob breathes (a slow scale and drift, compositor only) and its
     shape follows the hour through --blob-plus, which the live clock sets each
     tick: 0 at the top of the hour (round), 1 at the half hour (four soft lobes). */
  --blob-plus: 0;
  border-radius:
    calc(52% - var(--blob-plus) * 24%) calc(48% + var(--blob-plus) * 24%) calc(40% - var(--blob-plus) * 14%) calc(60% + var(--blob-plus) * 12%)
    / calc(44% + var(--blob-plus) * 24%) calc(58% - var(--blob-plus) * 30%) calc(42% + var(--blob-plus) * 26%) calc(56% - var(--blob-plus) * 28%);
  transform-origin: 40% 40%;
  animation: home-blob-breathe 46s ease-in-out infinite;
  transition: border-radius 12s linear;
  will-change: transform;
}
@keyframes home-blob-breathe {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-0.6rem, 0.4rem) scale(1.035) rotate(2deg); }
  66% { transform: translate(0.5rem, -0.5rem) scale(0.985) rotate(-2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .home-focus::after { animation: none; transition: none; } }
.home-focus-copy { min-width: 0; max-width: 720px; }
.home-focus-copy h1 {
  margin: .05em 0 .18em;
  font-size: clamp(2rem, 5vw, 4.6rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .96;
}
.home-focus-greeting {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-focus-clock {
  display: grid;
  min-width: min(290px, 34vw);
  padding-left: clamp(22px, 3vw, 44px);
  border-left: 1px solid color-mix(in srgb, var(--accent), var(--line) 68%);
  text-align: right;
}
.home-focus-clock time {
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: -.075em;
  line-height: .92;
}
.home-focus-clock span { margin-top: 9px; font-size: .92rem; font-weight: 800; }
.home-focus-clock small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.home-focus-command { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; grid-column: 1 / -1; gap: 12px; min-width: 0; align-self: end; }
.home-focus-command-left { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.home-focus-switcher:empty,
.home-focus-actions:empty { display: none; }
.home-focus-switcher .home-switcher,
.home-focus-actions .nav-actions { position: relative; inset: auto; margin: 0; }
.home-focus-actions { justify-self: end; }
.home-focus-actions .nav-actions { display: flex; }
.home-focus-search { min-width: 0; }
.home-focus-search .header-search { display: flex; width: 100%; }
.home-focus-search .header-search input { min-width: 0; flex: 1; border-radius: 999px 0 0 999px; }
.home-focus-search .header-search button { border-radius: 0 999px 999px 0; }
.home-focus-pages { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; min-width: 0; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
/* v0.29.4 one 36px row: the hamburger, the page pills, the weather chip, and the icon buttons share a height and centre line. */
.home-focus-command-left .home-switcher-toggle { height: 36px; width: 38px; }
.home-focus-actions .nav-actions { align-items: center; }
.home-focus-actions .header-weather { height: 36px; min-height: 36px; padding: 3px 10px; }
.home-focus-actions .nav-actions > button, .home-focus-actions .nav-actions > a, .home-focus-actions .nav-actions .notification-bell, .home-focus-actions .nav-actions .icon-button { height: 36px; min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.home-focus-pages a,
.home-focus-pages button { flex: 0 0 auto; min-height: 36px; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 72%); border-radius: 999px; background: color-mix(in srgb, var(--panel-solid), transparent 18%); color: var(--text); font-size: .8rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.home-focus-pages a:hover,
.home-focus-pages a.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent), var(--panel-solid) 84%); color: var(--accent); }
.home-focus-collapse {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 62%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-solid), transparent 8%);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--text), transparent 90%);
}
.home-focus-collapse span { font-size: 1.05rem; font-weight: 900; line-height: 1; transform: translateY(1px); }
.home-focus-collapse:hover { background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); }
.home-focus.is-collapsed {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  gap: 14px;
  padding: 10px 56px 10px 12px;
  border-color: var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel), var(--bg) 16%);
  box-shadow: var(--glass-highlight), var(--shadow-card);
  animation: none;
}
.home-focus.is-collapsed::after { display: none; }
.home-focus.is-collapsed .home-focus-identity { gap: 10px; }
.home-focus.is-collapsed .home-focus-brand-mark { width: 38px; border-radius: 11px; box-shadow: none; }
.home-focus.is-collapsed .home-focus-copy { display: flex; align-items: center; max-width: none; }
.home-focus.is-collapsed .home-focus-greeting { display: none; }
.home-focus.is-collapsed .home-focus-copy h1 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; line-height: 1.15; }
.home-focus.is-collapsed .home-focus-clock { display: none; }
.home-focus.is-collapsed .home-focus-command { grid-column: 2; align-self: center; }
.home-focus.is-collapsed .home-focus-collapse { top: 50%; bottom: auto; transform: translateY(-50%); }
.home-quick-add-entry-modal { width: min(620px, calc(100vw - 28px)); }
.home-quick-add-entry-body { display: grid; gap: 12px; padding: 4px 2px 2px; }
.home-quick-add-entry-body .quick-add-status-row { margin-bottom: 0; }
.main-nav a { border-radius: 999px; }
.page-home .grid-stack > .widget-panel > .grid-stack-item-content {
  border-color: color-mix(in srgb, var(--widget-accent), var(--line) 80%);
  border-radius: 26px;
  background: color-mix(in srgb, var(--panel-solid), transparent 7%);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--text), transparent 91%), inset 0 1px 0 rgba(255,255,255,.55);
}
.page-home .widget-panel {
  background: color-mix(in srgb, var(--widget-tint), var(--panel-solid) 76%);
}
:root:is([data-theme="dark"],[data-theme="night"]) .page-home .widget-panel {
  background: color-mix(in srgb, var(--widget-dark-tint), var(--panel) 72%);
}
.page-home .widget-header {
  min-height: 46px;
  padding-inline: 16px 10px;
  border-bottom-color: color-mix(in srgb, var(--widget-accent), var(--line) 78%);
  background: color-mix(in srgb, var(--panel-solid), transparent 45%);
  box-shadow: none;
}

/* Weather color follows the current temperature while retaining theme contrast. */
.page-home .weather-card.is-temperature-reactive .weather-location { --weather-tone: var(--accent); border-color: color-mix(in srgb, var(--weather-tone), var(--line) 58%); background: linear-gradient(145deg, color-mix(in srgb, var(--weather-tone), var(--panel-solid) 78%), color-mix(in srgb, var(--weather-tone), var(--panel-solid) 90%)); }
.page-home .weather-card.is-temperature-reactive .weather-location.is-weather-cold { --weather-tone: #2563eb; }
.page-home .weather-card.is-temperature-reactive .weather-location.is-weather-cool { --weather-tone: #0f8b8d; }
.page-home .weather-card.is-temperature-reactive .weather-location.is-weather-mild { --weather-tone: #d2692d; }
.page-home .weather-card.is-temperature-reactive .weather-location.is-weather-warm { --weather-tone: #dc5a24; }
.page-home .weather-card.is-temperature-reactive .weather-location.is-weather-hot { --weather-tone: #c2413b; }
.page-home .weather-card.is-temperature-reactive .weather-location .weather-current strong { color: var(--weather-tone); }
.page-home .weather-card.is-temperature-reactive .weather-location .forecast-strip div { background: color-mix(in srgb, var(--weather-tone), var(--panel-solid) 91%); border-color: color-mix(in srgb, var(--weather-tone), var(--line) 72%); }
.page-home .widget-header h2::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--widget-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--widget-accent), transparent 84%);
  content: "";
  vertical-align: 1px;
}
.device-timezone-control { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.device-timezone-control button { flex: 0 0 auto; }
.device-timezone-control small { color: var(--muted); }

/* Membership percentages need a chart that remains legible near zero. */

@media (max-width: 1180px) {
  .home-focus { gap: 24px; padding: 26px; }
  .home-focus-command { grid-template-columns: minmax(0, 1fr) auto; }
  .home-focus-command-left { grid-column: 1; grid-row: 1; width: 100%; }
  .home-focus-actions { grid-column: 2; grid-row: 1; }
  .home-focus-search { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1023px) {
  .home-focus.is-collapsed { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 56px 10px 12px; }
  .home-focus.is-collapsed .home-focus-identity { grid-column: 2; grid-row: 1; }
  .home-focus.is-collapsed .home-focus-command,
  .home-focus.is-collapsed .home-focus-command-left { display: contents; }
  .home-focus.is-collapsed .home-focus-switcher { grid-column: 1; grid-row: 1; }
  .home-focus.is-collapsed .home-focus-actions { grid-column: 3; grid-row: 1; }
  .home-focus.is-collapsed .home-focus-pages { display: none; }
  .home-focus.is-collapsed .home-focus-search { grid-column: 1 / -1; grid-row: 2; }
  .page-home .home-focus.is-collapsed .mobile-app-nav,
  .page-home .home-focus.is-collapsed .mobile-navigation-heading { display: grid !important; }
}
@media (max-width: 760px) {
  .home-focus { grid-template-columns: 1fr; min-height: 0; }
  .home-focus-identity { align-items: flex-start; }
  .home-focus-brand-mark { width: 50px; border-radius: 15px; }
  .home-focus-clock { min-width: 0; padding: 18px 0 0; border-top: 1px solid color-mix(in srgb, var(--accent), var(--line) 68%); border-left: 0; text-align: left; }
  .home-focus-clock time { font-size: clamp(2.7rem, 16vw, 4.5rem); }
  .home-focus-command { grid-template-columns: auto minmax(0, 1fr) auto; }
  .home-focus-command-left { display: contents; }
  .home-focus-switcher { grid-column: 1; grid-row: 1; }
  .home-focus-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .home-focus-pages { grid-column: 1 / -1; grid-row: 2; }
  .home-focus-search { grid-column: 1 / -1; grid-row: 3; }
  .home-focus.is-collapsed .home-focus-copy { display: none; }
}
@media (max-width: 560px) {
  .page-home { padding-inline: 8px; }
  .home-focus { gap: 18px; padding: 18px 18px 48px; border-radius: 22px; }
  .home-focus-copy h1 { font-size: clamp(2rem, 13vw, 3.25rem); }
  .home-focus-command-left { grid-template-columns: auto minmax(0, 1fr); }
  .home-focus.is-collapsed { padding: 10px 52px 10px 12px; border-radius: 16px; }
  .device-timezone-control { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .home-focus,
  .home-focus.is-home-ready,
  .home-focus.is-home-leaving { opacity: 1; transform: none; animation: none; transition: none; }
  
}

.admin-cron-output {
  margin: 0;
  padding: 0.6rem 0.75rem;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

/* v0.25.6.4 Home visual cleanup. */
/* Widget settings menus promoted to the top layer (see openWidgetMenu). */
.widget-menu[popover] { position: fixed; inset: auto; margin: 0; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; /* v0.37.1.13: a long menu scrolls inside the screen (its Save button was out of reach on a phone) */ padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); color: var(--text); box-shadow: 0 14px 34px color-mix(in srgb, var(--text), transparent 84%); }
.widget-menu[popover]:not(:popover-open) { display: none; }
.widget-menu[popover]:popover-open { display: grid; }

/* Hero collapse control: a real button beside the gear, chevron flips when collapsed. */
.home-focus-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.home-focus-actions:empty { display: none; }
.home-focus-collapse,
.home-focus.is-collapsed .home-focus-collapse { position: static; transform: none; width: auto; height: auto; min-width: 38px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 70%); border-radius: 8px; background: var(--panel-solid); color: var(--text); box-shadow: none; }
.home-focus-collapse:hover { background: color-mix(in srgb, var(--accent), var(--panel-solid) 86%); color: var(--accent); }
.home-focus-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-focus-collapse-icon { display: block; width: 16px; height: 16px; transition: transform .25s ease; }
.home-focus-collapse[aria-expanded="false"] .home-focus-collapse-icon { transform: rotate(180deg); }
.home-focus.is-collapsed { padding-right: 12px; }
@media (prefers-reduced-motion: reduce) { .home-focus-collapse-icon { transition: none; } }

/* Weather: compact at narrow widget widths instead of spilling. */
.weather-card .widget-body { container-type: inline-size; container-name: weather-body; }
@container weather-body (max-width: 340px) {
  .weather-current { margin: 3px 0; }
  .weather-current strong { font-size: 1.45rem; }
  .forecast-strip { gap: 3px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .forecast-strip div { padding: 4px 2px; }
  .forecast-strip span { font-size: .62rem; }
  .forecast-strip strong { font-size: .8rem; }
  .forecast-strip small { display: none; }
  .weather-head .home-weather-chip { display: none; }
}
@container weather-body (max-width: 250px) {
  .forecast-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forecast-strip div:nth-child(n+4) { display: none; }
}
@container weather-body (max-width: 190px) {
  .forecast-strip { display: none; }
  .weather-location { padding: 8px 9px; }
}

/* VFW Stats: side by side and smaller before stacking; numbers only when tight. */

.widget-menu[popover][hidden] { display: none !important; }

/* v0.25.6.6 VFW cards: one horizontal bar each, shorter cards. */

/* v0.25.8.0 command palette. */
.command-palette-trigger { font-size: 1.05rem; }
.command-palette { width: min(640px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.command-palette-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.command-palette-form .command-palette-input { flex: 1 1 auto; margin: 0; min-width: 0; border: 0; background: transparent; font-size: 1.05rem; padding: 6px 4px; }
.command-palette-form .command-palette-input:focus { outline: none; }
.command-palette-icon { font-size: 1.1rem; color: var(--muted); }
.command-palette-hint, .command-palette-empty kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); color: var(--muted); font-size: .7rem; font-family: inherit; }
.command-palette-results { max-height: min(60vh, 520px); overflow: auto; padding: 6px; }
.command-palette-empty { margin: 8px 6px; font-size: .84rem; }
.command-palette-group { margin: 8px 8px 4px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.command-palette-item { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.command-palette-item:hover, .command-palette-item.is-active { background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); border-color: color-mix(in srgb, var(--accent), var(--line) 60%); }
.command-palette-kind { padding: 2px 6px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.command-palette-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.command-palette-detail { color: var(--muted); font-size: .76rem; white-space: nowrap; }
@media (max-width: 640px) { .command-palette-item { grid-template-columns: 54px minmax(0, 1fr); } .command-palette-detail { display: none; } }

/* v0.25.8.1 Quick Capture tray. */
.quick-capture-trigger { font-size: 1.2rem; font-weight: 800; }
.quick-capture { width: min(560px, calc(100vw - 24px)); }
.quick-capture-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.quick-capture-kind { position: relative; }
.quick-capture-kind input { position: absolute; opacity: 0; inset: 0; }
.quick-capture-kind span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: .8rem; font-weight: 800; cursor: pointer; }
.quick-capture-kind input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent), var(--panel-solid) 84%); color: var(--accent); }
.quick-capture-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-capture-text textarea { width: 100%; margin-top: 4px; resize: vertical; }
.quick-capture-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.quick-capture-extra[hidden] { display: none; }
.quick-capture-destination { margin: 4px 0 10px; font-size: .8rem; }

/* v0.25.8.2 Edit mode with Undo. */
.grid-stack:not(.is-arranging) .widget-header { cursor: default; }
.grid-stack.is-arranging .widget-header { cursor: move; }
.grid-stack.is-arranging .grid-stack-item > .grid-stack-item-content { outline: 2px dashed color-mix(in srgb, var(--accent), var(--line) 45%); outline-offset: -2px; }
.grid-stack.is-arranging .widget-header:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.home-arrange-bar { position: fixed; left: 50%; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 55%); border-radius: 14px; background: var(--panel-solid); color: var(--text); box-shadow: 0 16px 40px color-mix(in srgb, var(--text), transparent 80%); transform: translateX(-50%); font-size: .86rem; }
.home-arrange-bar strong { white-space: nowrap; }
.home-arrange-bar .home-arrange-hint { color: var(--muted); }

@media (max-width: 640px) { .home-arrange-bar { flex-wrap: wrap; justify-content: center; } .home-arrange-bar .home-arrange-hint { display: none; } }

/* v0.25.8.3 Quick Links tools. */
.link-tools-modal { width: min(760px, calc(100vw - 24px)); }
.link-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.link-tools-section { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.link-tools-section h3 { margin: 0 0 4px; }
.link-tools-section .muted { font-size: .8rem; }
.link-tools-review { grid-column: 1 / -1; }
.link-tools-results h4 { margin: 12px 0 6px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.link-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); margin-bottom: 6px; }
.link-tools-row > div:first-child { display: grid; min-width: 0; }
.link-tools-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-tools-row .muted { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-tools-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.link-tools-actions button { margin: 0; padding: 5px 9px; font-size: .78rem; }
@media (max-width: 640px) { .link-tools-row { flex-direction: column; align-items: stretch; } .link-tools-actions { flex-wrap: wrap; } }

/* v0.25.8.4 notices dismiss themselves; color pop-out lives inside the floating menu. */
.global-toast { position: relative; padding-right: 40px; }
.global-toast-close { position: absolute; top: 6px; right: 8px; margin: 0; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.global-toast-close:hover { color: var(--text); }
.widget-menu[popover] .widget-color-popout { position: static; width: auto; max-width: none; margin-top: 6px; border-right: 0; }
.widget-menu[popover] { overflow-x: hidden; }

/* v0.25.8.5 Quick Links modes, section drag, separators; notices slide in; menu stacking; VFW dot spacing. */
.global-toast { position: fixed; top: 14px; left: 50%; z-index: 80; width: min(820px, calc(100vw - 32px)); margin: 0; transform: translateX(-50%); animation: global-toast-in .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes global-toast-in { from { opacity: 0; transform: translate(-50%, -18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .global-toast { animation: none; } }
.bookmark-group { position: relative; }
.bookmark-group:has([data-bookmark-section-menu]:not([hidden])) { z-index: 40; }
.bookmark-section-menu { z-index: 41; }

.bookmark-list.is-tile-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bookmark-list.is-tile-view .bookmark-row a { flex-direction: row; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--line), transparent 15%); background: color-mix(in srgb, var(--panel-solid), var(--bg) 6%); }
.bookmark-list.is-tile-view .bookmark-row img { width: 28px; height: 28px; flex: 0 0 auto; }
.bookmark-list.is-tile-view .bookmark-row .bookmark-text { display: grid; min-width: 0; }
.bookmark-list.is-tile-view .bookmark-row .bookmark-host { display: block; }
.bookmark-host { display: none; color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-text { min-width: 0; display: contents; }
.bookmark-list.is-compact-view { gap: 1px; }
.bookmark-list.is-compact-view .bookmark-row a { padding: 3px 6px; gap: 6px; border-radius: 6px; font-size: .84rem; }
.bookmark-list.is-compact-view .bookmark-row img { width: 14px; height: 14px; padding: 1px; }
.bookmark-row:has(> .bookmark-separator-line) { cursor: grab; }
.bookmark-row:has(> .bookmark-separator-line) .bookmark-separator-line { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.bookmark-row:has(> .bookmark-separator-line) .bookmark-separator-line::before, .bookmark-row:has(> .bookmark-separator-line) .bookmark-separator-line::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--bookmark-accent, var(--accent)), var(--line) 45%); }
.bookmark-row:has(> .bookmark-separator-line) button { margin: 0; padding: 0 6px; border: 0; background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; opacity: 0; }
.bookmark-row:has(> .bookmark-separator-line):hover button, .bookmark-row:has(> .bookmark-separator-line):focus-within button { opacity: 1; }
.bookmark-list.is-icon-view .bookmark-row:has(> .bookmark-separator-line), .bookmark-list.is-tile-view .bookmark-row:has(> .bookmark-separator-line) { grid-column: 1 / -1; }
.bookmark-group-heading { cursor: grab; }
.bookmark-group-heading button, .bookmark-group-heading a, .bookmark-group-heading form { cursor: pointer; }
.bookmark-group.is-section-dragging { opacity: .5; }
.bookmark-group.is-section-drop-target { outline: 2px dashed color-mix(in srgb, var(--accent), var(--line) 40%); outline-offset: 2px; }
.bookmark-section-options { display: flex; flex-wrap: wrap; gap: 4px; }
.bookmark-section-options button[aria-current="true"] { border-color: var(--accent); color: var(--accent); }

/* v0.25.8.6 readable backgrounds: curated CSS-only backdrops behind Home.
   The picture lives on a fixed body::before layer with a scrim mixed from
   the theme's --bg so text tone follows Light, Night, and Dark; panels turn
   nearly opaque so widgets stay readable over any scene. Nothing animates. */
:root[data-home-background] { --home-backdrop-scrim: 38%; background: var(--bg, #f1f1f1); }
:root[data-home-background] body, :root[data-home-background] body.brand-nookfox, :root[data-home-background][data-color-scheme] body.brand-nookfox { background: transparent; }
/* 0.33.14.1 painted the backdrop only behind Home; v0.35.4.2 paints it behind every page (Admin, To-Do, Calendar, Spaces included) so the chosen scene is consistent, with the same scrim and the same nearly opaque panels. */
:root[data-home-background] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--bg) var(--home-backdrop-scrim), transparent), color-mix(in srgb, var(--bg) var(--home-backdrop-scrim), transparent)), var(--home-backdrop, none); background-size: cover, cover; background-position: center; background-repeat: no-repeat; }
:root[data-home-background] body { --panel: color-mix(in srgb, var(--panel-solid) 95%, transparent); }
:root[data-home-background] .home-hero, :root[data-home-background] .topbar { backdrop-filter: saturate(1.05); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] { --home-backdrop-scrim: 58%; }
@media print { :root[data-home-background] body::before { display: none; } }

:root[data-home-background="dawn"] { --home-backdrop: linear-gradient(160deg, #ffd6a5 0%, #ffb4a2 30%, #cdb4db 62%, #a2d2ff 100%); }
:root[data-home-background="dusk"] { --home-backdrop: linear-gradient(165deg, #f6b26b 0%, #d96c8b 32%, #6a4c93 64%, #1b2a49 100%); }
:root[data-home-background="meadow"] { --home-backdrop: linear-gradient(170deg, #d9f99d 0%, #86efac 38%, #5eead4 74%, #bae6fd 100%); }
:root[data-home-background="sea"] { --home-backdrop: linear-gradient(175deg, #a5f3fc 0%, #22d3ee 34%, #0e7490 70%, #164e63 100%); }
:root[data-home-background="aurora"] { --home-backdrop: radial-gradient(ellipse at 18% 12%, rgba(52, 211, 153, .75), transparent 42%), radial-gradient(ellipse at 76% 22%, rgba(167, 139, 250, .7), transparent 46%), radial-gradient(ellipse at 52% 80%, rgba(56, 189, 248, .55), transparent 50%), linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); }
:root[data-home-background="sand"] { --home-backdrop: linear-gradient(160deg, #fef3c7 0%, #fde68a 28%, #f5d0a9 60%, #e7c8a0 100%); }
:root[data-home-background="mountains"] { --home-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bfdbfe'/%3E%3Cstop offset='1' stop-color='%23fde68a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23s)'/%3E%3Ccircle cx='1180' cy='230' r='70' fill='%23fff7ed' opacity='.9'/%3E%3Cpath d='M0 640 L220 420 L360 520 L560 300 L760 540 L900 430 L1100 600 L1300 380 L1600 620 L1600 900 L0 900Z' fill='%2394a3b8'/%3E%3Cpath d='M0 720 L260 560 L420 640 L640 470 L820 660 L1020 560 L1240 700 L1440 590 L1600 700 L1600 900 L0 900Z' fill='%2364748b'/%3E%3Cpath d='M0 820 L300 700 L520 780 L760 660 L980 790 L1220 720 L1600 830 L1600 900 L0 900Z' fill='%23334155'/%3E%3C/svg%3E"); }
:root[data-home-background="waves"] { --home-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e0f2fe'/%3E%3Cstop offset='1' stop-color='%2367e8f9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23s)'/%3E%3Cpath d='M0 560 C200 500 300 640 500 590 C700 540 800 660 1000 610 C1200 560 1300 680 1600 600 L1600 900 L0 900Z' fill='%2322d3ee' opacity='.7'/%3E%3Cpath d='M0 660 C220 610 320 740 540 690 C760 640 860 760 1080 710 C1300 660 1400 780 1600 700 L1600 900 L0 900Z' fill='%230891b2' opacity='.75'/%3E%3Cpath d='M0 770 C240 720 340 840 560 800 C780 760 880 860 1100 820 C1320 780 1420 880 1600 810 L1600 900 L0 900Z' fill='%23155e75'/%3E%3C/svg%3E"); }
:root[data-home-background="stars"] { --home-backdrop: radial-gradient(1.5px 1.5px at 12% 18%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 28% 44%, #fff 60%, transparent 62%), radial-gradient(2px 2px at 41% 12%, #fde68a 60%, transparent 62%), radial-gradient(1px 1px at 57% 31%, #fff 60%, transparent 62%), radial-gradient(1.5px 1.5px at 66% 62%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 78% 20%, #bae6fd 60%, transparent 62%), radial-gradient(2px 2px at 88% 48%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 19% 74%, #fff 60%, transparent 62%), radial-gradient(1.5px 1.5px at 47% 86%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 93% 82%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 34% 60%, #fff 60%, transparent 62%), radial-gradient(1.5px 1.5px at 72% 88%, #fde68a 60%, transparent 62%), linear-gradient(180deg, #020617 0%, #0f172a 55%, #1e1b4b 100%); }
:root[data-home-background="paper"] { --home-backdrop: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 3px), linear-gradient(180deg, #faf6ee 0%, #f1e9dc 100%); }
:root[data-home-background="stars"], :root[data-home-background="aurora"] { --home-backdrop-scrim: 30%; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="stars"], :root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="aurora"], :root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="dusk"] { --home-backdrop-scrim: 62%; }
:root[data-home-background] .page-home::before { display: none; }

/* v0.25.8.7 frosted panels over backdrops: the scene shows through the
   widgets and hero (translucent surface plus blur) while text stays on a
   calm, readable ground. Users who prefer reduced transparency get solid
   panels instead. */
:root[data-home-background] body { --panel: color-mix(in srgb, var(--panel-solid) 82%, transparent); }
:root[data-home-background] .widget-panel { background: linear-gradient(90deg, var(--widget-accent) 0 6px, transparent 6px); }
/* v0.35.5.2: the tint stays, the blur goes, so the scene behind a widget stays sharp. Dialog and menu backdrops keep theirs. */
:root[data-home-background] .page-home .grid-stack > .widget-panel > .grid-stack-item-content { background: color-mix(in srgb, var(--panel-solid) 84%, transparent); }
:root[data-home-background] .home-focus { background: linear-gradient(118deg, color-mix(in srgb, var(--panel-solid) 80%, transparent), color-mix(in srgb, var(--panel-solid) 68%, transparent)); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] { --home-backdrop-scrim: 42%; }
:root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="stars"], :root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="aurora"], :root:not([data-theme="dark"]):not([data-theme="night"])[data-home-background="dusk"] { --home-backdrop-scrim: 55%; }
@media (prefers-reduced-transparency: reduce) {
  :root[data-home-background] .page-home .grid-stack > .widget-panel > .grid-stack-item-content, :root[data-home-background] .home-focus { background: var(--panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-home-background] body { --panel: var(--panel-solid); }
}
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] .page-home .grid-stack > .widget-panel > .grid-stack-item-content { background: color-mix(in srgb, var(--panel-solid) 84%, transparent); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] .home-focus { background: linear-gradient(118deg, color-mix(in srgb, var(--panel-solid) 60%, transparent), color-mix(in srgb, var(--panel-solid) 46%, transparent)); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] { --home-backdrop-scrim: 34%; }
/* The Home route shell is a .panel; over a backdrop it must not paint. Widget
   tints keep their hue at reduced opacity so the scene reads through. */
:root[data-home-background] .page-home .dashboard-route-shell { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* v0.35.4.4: the scene stays sharp in the widget's outer frame; only the content inside is frosted. */
:root[data-home-background] .page-home .grid-stack > .widget-panel { background: linear-gradient(90deg, var(--widget-accent) 0 6px, transparent 6px), color-mix(in srgb, var(--widget-tint) 12%, transparent); border-radius: 26px; }
:root[data-home-background] .page-home .grid-stack > .widget-panel > .grid-stack-item-content { margin: 9px 9px 9px 12px; border-radius: 20px; }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background] .page-home .grid-stack > .widget-panel { background: linear-gradient(90deg, var(--widget-accent) 0 6px, transparent 6px), color-mix(in srgb, var(--widget-dark-tint) 14%, transparent); }

/* v0.25.9.0 calendar header (Google-style), VFW trend card, Operations drill. */
.calendar-title-row { flex-wrap: wrap; row-gap: .6rem; }
.calendar-period-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 760; letter-spacing: -.01em; }
.calendar-period-nav { display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.calendar-period-nav .calendar-month-actions { gap: .25rem; }
.calendar-period-nav .icon-button { min-width: 2.4rem; font-size: 1.25rem; line-height: 1; }
.calendar-jump { position: relative; }
.calendar-jump > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; }
.calendar-jump > summary::-webkit-details-marker { display: none; }
.calendar-jump[open] > .calendar-date-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow-soft); }
@media (max-width: 640px) { .calendar-period-nav { width: 100%; } .calendar-jump[open] > .calendar-date-picker { left: auto; right: 0; } }

.ops-subheading { margin: 16px 0 6px; font-size: 1rem; }
.ops-backup-files { margin: 8px 0; }
.ops-backup-files > summary { cursor: pointer; color: var(--muted); font-size: .86rem; }
.ops-drill-form { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 520px; margin-top: 8px; }
/* v0.35.5.2: each rehearsal field is a label above its box (the compact two-column base collapsed the first column). */
.ops-drill-form > label { display: grid; gap: 4px; }
.ops-drill-form > label > span { white-space: normal; }
.ops-drill-form > button { justify-self: start; }

/* v0.26.0.0 VFW Stats sizes itself to the widget (Weather does the same by
   width). The body is a size container: short widgets show figures only,
   medium ones bring back bars and goals, tall ones add the trend line. */

.ops-backup-details { margin-top: 10px; }
.ops-backup-details > summary { cursor: pointer; color: var(--muted); font-size: .86rem; }

/* v0.26.2.0 hero date opens the calendar. */
.home-focus-date-link { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, currentColor, transparent 55%); }
.home-focus-date-link:hover, .home-focus-date-link:focus-visible { border-bottom-color: currentColor; }

/* v0.26.3.0 clock tools: the hero clock opens timer, alarm, countdown, stopwatch. */
.home-focus-clock-button { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; border-radius: 12px; }
.home-focus-clock-button:hover time, .home-focus-clock-button:focus-visible time { color: var(--accent); }
.home-focus-clock-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-focus-clock-status { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; height: 2rem; min-height: 1.7em; margin-top: 6px; overflow: hidden; color: var(--accent); font-size: .74rem; font-weight: 800; cursor: pointer; }
.home-focus-clock-status.is-idle { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.clock-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 100%; line-height: 1.2; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 60%); border-radius: 999px; background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); white-space: nowrap; }
.clock-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clock-chip button { margin: 0; flex: 0 0 auto; padding: 0 3px; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.clock-chip button:hover { color: var(--text); }
.home-focus-clock-status.is-ringing { animation: clock-status-pulse 1s ease-in-out infinite; }
@keyframes clock-status-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .home-focus-clock-status.is-ringing { animation: none; } }
.clock-tools { width: min(560px, calc(100vw - 32px)); }
.clock-tools-tabs { display: flex; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid var(--line); }
.clock-tools-tabs button { margin: 0; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.clock-tools-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.clock-tools-panel { display: grid; gap: 12px; }
.clock-tools-display { font-size: clamp(2.6rem, 9vw, 4.2rem); font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: -.05em; line-height: 1; text-align: center; padding: 8px 0; }
.clock-tools-display.is-done { color: var(--danger); }
.clock-tools-presets { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.clock-tools-presets label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.clock-tools-presets input { width: 110px; }

.clock-tools-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clock-tools-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; align-items: end; }
.clock-tools-form label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .clock-tools-form { grid-template-columns: 1fr; } }
.clock-tools-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.clock-tools-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-solid), transparent 6%); }
.clock-tools-list li.is-fired { border-color: var(--danger); }
.clock-tools-list li strong { font-variant-numeric: tabular-nums; }
.clock-tools-list li small { color: var(--muted); }
.clock-tools-list li button { margin: 0; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.clock-tools-laps { list-style: decimal inside; }
.clock-tools-footnote { margin: 14px 0 0; font-size: .72rem; }

/* v0.26.5.1 clock tools polish: one panel at a time, aligned controls, ringing bar. */
.clock-tools-panel[hidden] { display: none; }
.clock-tools { max-height: calc(100vh - 32px); overflow: auto; }
.clock-tools-display { min-height: 1.15em; }
.clock-tools-presets { align-items: center; }
.clock-tools-presets .button-secondary, .clock-tools-presets input { min-height: 2.6rem; margin: 0; }
.clock-tools-presets input { width: 150px; }
.clock-tools-form input { min-height: 2.6rem; }


.clock-ringing { position: fixed; left: 50%; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 12px 16px; border: 2px solid var(--danger); border-radius: 14px; background: var(--panel-solid); color: var(--text); box-shadow: var(--shadow-soft); transform: translateX(-50%); animation: clock-status-pulse 1.2s ease-in-out infinite; }
.clock-ringing span { display: grid; min-width: 0; }
.clock-ringing strong { font-size: .95rem; }
.clock-ringing small { color: var(--muted); font-size: .78rem; }
.clock-ringing button { margin: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .clock-ringing { animation: none; } }

/* v0.26.5.3 live clock chips stand out as active tasks. */
.clock-chip { padding: 4px 11px; border-color: transparent; background: var(--accent); color: var(--on-accent, #fff); font-size: .8rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent), transparent 62%); }
.clock-chip button { color: inherit; opacity: .85; }
.clock-chip button:hover { color: inherit; opacity: 1; }
.clock-chip[data-clock-chip="ringing"] { background: var(--danger); color: var(--on-danger, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--danger), transparent 55%); }
.home-focus-clock-status { height: 2.3rem; }
/* v0.26.6.2 the chip row must never widen the clock column (which wrapped the title and grew the hero). */
.home-focus-clock-status { contain: inline-size; min-width: 0; max-width: 100%; }
.clock-chip > span { max-width: 16ch; }
.clock-chip[data-clock-chip^="more"] { background: color-mix(in srgb, var(--accent), var(--panel-solid) 80%); color: var(--accent); box-shadow: none; }

/* v0.26.8.0 Weather contract: forecast day cards never grow past one line of
   condition text, and the text only appears when the body is wide enough. */
.forecast-strip small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast-strip div { min-width: 0; overflow: hidden; }
@container weather-body (max-width: 430px) {
  .forecast-strip small { display: none; }
}
.weather-card .widget-body { overflow: auto; min-height: 0; }
/* v0.28.0.0 Weather location cards never shrink to fit a short widget body
   (Chrome shrank them and let the day cards spill past the border; other
   engines did not). The body scrolls instead. */
.weather-card .weather-location { flex: 0 0 auto; min-height: max-content; }
.weather-card .forecast-strip > div { min-height: 0; }

/* v0.35.1.0 S35.1: AI Intake page, the Company > OpenAI rollout controls, and the roadmap history folds. */
.ai-intake-page .connections-mode{white-space:nowrap}
.ai-consent-terms{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:.35rem .9rem;margin:.5rem 0 .8rem;font-size:.86rem}
.ai-consent-terms dt{font-weight:800;color:var(--text)}
.ai-consent-terms dd{margin:0;color:var(--muted);line-height:1.45}
.ai-proposal-list{display:grid;gap:.75rem}
.ai-proposal{display:grid;gap:.45rem;padding:.85rem .95rem;border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:12px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 6%)}
.ai-proposal.is-proposal{border-left-color:var(--success)}
.ai-proposal.is-needs_review{border-left-color:var(--warning)}
.ai-proposal-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ai-proposal-head h3{margin:0;font-size:1.02rem}
.ai-proposal-source,.ai-proposal-destination{margin:0;font-size:.84rem;line-height:1.45}
.ai-proposal-change{margin:0;font-size:.88rem;line-height:1.45;padding:.35rem .6rem;border-radius:8px;background:color-mix(in srgb,var(--success),var(--panel-solid) 88%)}
.ai-permission-table td:not(:first-child){text-align:center}
.ai-mode-choice{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .4rem}
.ai-preference-fields{display:grid;gap:.6rem;margin:.75rem 0;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px}
.ai-preference-fields legend{font-weight:700;padding:0 .3rem}
.ai-preference-fields label{display:grid;gap:.25rem;font-size:.9rem}
.ai-preference-fields textarea,.ai-preference-fields input[type=number]{max-width:28rem}
.ai-preference-check{display:flex!important;gap:.5rem;align-items:flex-start}
.ai-proposal-facts{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .8rem;margin:.2rem 0;font-size:.9rem}
.ai-proposal-facts dt{color:var(--muted);font-weight:700}
.ai-proposal-facts dd{margin:0}
.ai-proposal-flags{padding:.5rem .7rem;border-radius:9px;background:color-mix(in srgb,var(--warning),var(--panel-solid) 85%);font-size:.84rem}
.ai-proposal-flags ul{margin:.25rem 0 0 1rem;padding:0}
.ai-message-table td:last-child{white-space:nowrap}
.ai-how-list{margin:.4rem 0 .2rem 1.1rem;padding:0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.ai-how-list li{margin-bottom:.35rem}
.ai-rollout-form fieldset{border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem;margin:.6rem 0}
.ai-rollout-form legend{padding:0 .35rem;font-size:.8rem;font-weight:800;color:var(--muted)}
.ai-rollout-switches label.ai-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:.55rem;margin:.35rem 0;font-size:.88rem;line-height:1.4;text-align:left;width:100%}
.ai-rollout-switches label.ai-switch input{flex:0 0 auto;margin:.2rem 0 0;width:auto}
.ai-rollout-switches label.ai-switch .muted{font-weight:400}
.ai-limit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.55rem}
.ai-limit-grid label{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted)}
.ai-limit-grid input{width:100%}
.ai-grant-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.55rem;align-items:end;margin-bottom:.7rem}
.ai-grant-form label{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted)}
.quick-add-policy-note{margin:.15rem 0 0;font-size:.8rem}
.quick-add-refusal{margin:0;font-weight:600;line-height:1.35}
.quick-add-draft-notice{margin:0 0 .35rem;font-weight:600;line-height:1.35}
.quick-add-ai-access{margin:.15rem 0 0;font-size:.8rem;line-height:1.35}
/* Roadmap: concise cards, with the dense record behind an accessible fold (owner request, S35.1). */
.roadmap-card-history{margin-top:.15rem}
.roadmap-card-history>summary{cursor:pointer;font-size:.8rem;font-weight:800;color:var(--accent);padding:.15rem 0}
.roadmap-card-history>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.roadmap-card-history p{margin:.4rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted)}
.roadmap-count-note{margin:.15rem 0 0;font-size:.78rem;color:var(--muted)}
/* v0.35.2.0 S35.2: the AI control center on Company > OpenAI. */
.ai-checks{list-style:none;margin:.5rem 0 .75rem;padding:0;display:grid;gap:.35rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ai-checks li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:start;padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px;font-size:.86rem;line-height:1.4}
.ai-checks li strong{font-weight:700}
.ai-checks li .muted{grid-column:2;font-size:.8rem}
.ai-check-mark{grid-row:1 / span 2;width:.85rem;height:.85rem;margin-top:.3rem;border-radius:50%;background:var(--muted)}
.ai-check-mark.is-ok{background:var(--success)}
.ai-check-mark.is-off{background:var(--warning)}
.ai-money-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ai-money-card{border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;background:color-mix(in srgb,var(--panel-solid),var(--bg) 6%)}
.ai-money-card h3{margin:0 0 .4rem;font-size:.95rem}
.ai-money-card dl{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;margin:0 0 .4rem;font-size:.88rem}
.ai-money-card dt{color:var(--muted)}
.ai-money-card dd{margin:0;font-weight:700;text-align:right}
.ai-model-form select{max-width:100%;min-width:min(100%,420px)}
.ai-pricing-table input{width:7.5rem}
.ai-report-title{margin:1rem 0 .4rem;font-size:.95rem}
.ai-attempts-filter{align-items:end;flex-wrap:wrap}
.ai-attempts-filter label{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted)}
@media (max-width: 720px){.ai-checks{grid-template-columns:1fr}.ai-money-card dl{grid-template-columns:1fr}.ai-money-card dd{text-align:left}}
/* v0.35.2.1 S35.2: reconciliation forms and the breaker controls. */
.ai-reconcile-form{display:grid;gap:.3rem;min-width:260px}
.ai-reconcile-form label{display:grid;gap:.15rem;font-size:.78rem;color:var(--muted)}
.ai-uncertain-table td{vertical-align:top}
[data-ai-breaker-open-form] label{display:grid;gap:.2rem;font-size:.8rem;color:var(--muted)}
[data-ai-breaker-open-form]{align-items:end;flex-wrap:wrap}
/* v0.35.2.2 S35.2: AI Intake polish (eligibility checklist, message states, phone layout). */
.ai-intake-page .ai-checks{margin-top:.6rem}
.ai-message-state{display:grid;gap:.15rem}
.ai-message-state small{color:var(--muted);line-height:1.35;white-space:normal}
.ai-message-table td:last-child{white-space:normal}
.ai-proposal .button-row{flex-wrap:wrap}
@media (max-width: 760px){
  .ai-intake-page .connections-hero{flex-direction:column;align-items:flex-start;gap:.5rem}
  .ai-proposal-facts{grid-template-columns:1fr}
  .ai-consent-terms{grid-template-columns:1fr}
  .ai-message-table th:nth-child(1),.ai-message-table td:nth-child(1){display:none}
  .ai-message-table td,.ai-message-table th{padding:.4rem .35rem;font-size:.82rem}
  .ai-intake-page .summary-grid.compact{grid-template-columns:1fr 1fr}
}

/* v0.35.4.4 shared readiness pills: text carries the meaning, color repeats it. Old class names stay as aliases. */
.inline-pill.is-ready, .inline-pill.is-success { border-color: color-mix(in srgb, var(--success), var(--line) 40%); background: color-mix(in srgb, var(--success) 16%, var(--panel-solid)); color: var(--text); }
.inline-pill.is-configured, .inline-pill.is-pending { border-color: color-mix(in srgb, #b7791f, var(--line) 40%); background: color-mix(in srgb, #eab308 20%, var(--panel-solid)); color: var(--text); }
.inline-pill.is-attention, .inline-pill.is-warning { border-color: color-mix(in srgb, #c2410c, var(--line) 40%); background: color-mix(in srgb, #f97316 20%, var(--panel-solid)); color: var(--text); }
.inline-pill.is-failed, .inline-pill.is-error, .inline-pill.is-danger { border-color: color-mix(in srgb, var(--danger), var(--line) 40%); background: color-mix(in srgb, var(--danger) 16%, var(--panel-solid)); color: var(--text); }
.inline-pill.is-off, .inline-pill.is-neutral { border-color: var(--line); background: color-mix(in srgb, var(--muted) 12%, var(--panel-solid)); color: var(--muted); }
/* v0.35.4.4: a bold label followed by a muted note never runs together. */
strong + span.muted, strong + .muted { margin-left: .45rem; }
/* v0.35.4.4: legal documents inside the shell reuse the public typography. */
.legal-page { display: grid; gap: 18px; width: 100%; }
.legal-page > .panel { margin: 0; }
.legal-page .policy-card, .legal-page .policy-main { max-width: 860px; }
.legal-page .policy-effective { display: inline-block; margin: .25rem 0 .75rem; color: var(--muted); font-size: .9rem; }
.legal-page section { margin: 0 0 1.1rem; }
.legal-page h2 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.legal-page ul { padding-left: 1.2rem; }

/* v0.35.4.6: the legal documents as one readable centered column. */
.legal-page { max-width: 880px; margin: 0 auto; }
.legal-page .legal-page-body { padding: 28px 36px; line-height: 1.65; font-size: 1.02rem; }
.legal-page .legal-page-body h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.legal-page .legal-page-body h3 { font-size: 1.02rem; margin: 1.1rem 0 .35rem; }
.legal-page .legal-page-body p, .legal-page .legal-page-body li { max-width: 72ch; }
.legal-page .legal-page-body ul, .legal-page .legal-page-body ol { margin: .4rem 0 .9rem; }
@media (max-width: 640px) { .legal-page .legal-page-body { padding: 18px 16px; } }
/* v0.35.4.6: Company > OpenAI reports and settings live in collapsed shells; reconciliation forms open on request. */
.ai-shell { padding: 0; }
.ai-shell > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ai-shell > summary::-webkit-details-marker { display: none; }
.ai-shell > summary::before { content: "\25B8"; opacity: .7; }
.ai-shell[open] > summary::before { content: "\25BE"; }
.ai-shell > section.panel, .ai-shell > .ai-instructions-body { margin: 0 12px 12px; }
.ai-instructions-body { padding: 0 6px 6px; }
.ai-reconcile-details > summary { cursor: pointer; font-weight: 600; }
.ai-reconcile-details[open] > summary { margin-bottom: 8px; }
/* v0.35.4.6: a stored vendor login reads as a list until Edit. */
.vendor-view-list dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-bridge-advanced-inputs { margin-top: 12px; }
.vendor-form[hidden] { display: none; }
/* v0.35.5.2: the Diagnostics Technical detail heading keeps its title and its description apart. */
[data-diagnostics-technical] > .diagnostics-technical-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; }
[data-diagnostics-technical] > .diagnostics-technical-summary .muted { font-weight: 500; }
/* v0.35.5.2 item 4: the VFW collection panel. The switch lines up with the other controls; Save, Check now, and the
   explanation share one row and wrap on narrow screens; a report's pill sits inline before its note. */
.ai-limit-grid .vfw-collection-toggle { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 38px; padding: 6px 0; }
.ai-limit-grid .vfw-collection-toggle input { margin: 0; }
.vfw-collection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: .55rem; }
.vfw-collection-actions .inline-form { display: inline-flex; margin: 0; }
.vfw-collection-actions > .muted { flex: 1 1 260px; min-width: 0; }
.vfw-collection-state .inline-pill { vertical-align: middle; }
.vfw-collection-state .muted { vertical-align: middle; }
/* S36.9 B11: the weekly recruiter report status and the owner's one-message check under the collection table. */
.vfw-collection-weekly { margin: .75rem 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.vfw-collection-weekly h3 { margin: 0 0 .35rem; font-size: 1rem; }
.vfw-collection-weekly p { margin: .2rem 0; overflow-wrap: anywhere; }
.vfw-collection-inspect { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: .55rem; }
.vfw-collection-inspect label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
/* v0.35.5.2 item 4: the VFW Stats widget says when the figures on show were filed, left of the gear. */
.widget-header .widget-updated { margin: 0 0 0 auto; padding-inline: 4px; font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* v0.35.5.2 item 5: the vendor login card keeps a consistent inset and a compact width. */
.vendor-card { padding: 12px 14px; max-width: min(100%, 760px); }
.vendor-view { display: grid; gap: 10px; }
.vendor-view > .muted { margin: 0; }
.vendor-view-list { grid-template-columns: minmax(120px, 170px) 1fr; column-gap: 12px; row-gap: 6px; margin: 0; }
@media (max-width: 560px) { .vendor-view-list { grid-template-columns: 1fr; row-gap: 2px; } .vendor-view-list dd { margin-bottom: 6px; } }
/* v0.35.5.2 item 6: roadmap cards and their contents start at the top; an expanded neighbour no longer spreads a card's rows apart. */
.roadmap-card-grid { align-items: start; }
.roadmap-card { align-content: start; }
@media (min-width: 900px) { .ai-limit-grid .vfw-collection-toggle { grid-column: span 2; } }
.ai-limit-grid .vfw-collection-toggle span { line-height: 1.25; }
/* v0.35.5.3 item 2: the Bell badge. The generic count-badge tint (accent mixed into the panel) and the on-danger text
   colour were fighting: dark text on a dark badge. The badge is the theme's danger colour with its own readable text,
   a ring so it stands off the button in every theme, and an exclamation mark so the meaning does not rest on colour. */
.notification-bell .count-badge.alert-badge { background: var(--danger); border-color: var(--danger); color: var(--on-danger); box-shadow: 0 0 0 2px var(--panel-solid); font-weight: 800; }
.notification-bell .count-badge.alert-badge::before { content: "!"; margin-right: 3px; font-weight: 900; }
:root:is([data-theme="dark"],[data-theme="night"]) .notification-bell .count-badge.alert-badge { background: #fb7185; border-color: #fb7185; color: #1f0810; }
.notification-bell.has-alert { border-color: var(--danger) !important; }
/* v0.35.5.3 item 3: no backdrop blur on the home widget frame or the hero either (the shared .panel rule kept a 10px
   blur on the frame after v0.35.5.2 removed the interior one). Dialog, drawer, and menu backdrops keep theirs. */
.page-home .widget-panel, .page-home .home-focus, :root[data-home-background] .page-home .widget-panel, :root[data-home-background] .home-focus { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* v0.35.5.3 item 4: with the NookFox scheme in Light there is no data-color-scheme attribute, and the scheme rule for
   body (higher specificity) painted an opaque background over the scene. This selector outranks it. */
:root[data-home-background]:not([data-theme="dark"]):not([data-theme="night"]) body.brand-nookfox, :root[data-home-background]:not([data-theme="dark"]):not([data-theme="night"]) body { background: transparent; }
/* v0.35.5.7: a fact that cannot be edited reads as text, not as a box to type in. */
.field-static { display: grid; gap: 4px; align-content: start; font-size: 0.85rem; }
.field-static-label { font-weight: 700; }
.field-static-value { color: var(--muted); padding: 10px 0; }
/* v0.35.5.7: the repeat picker. */
.recurrence-extra { display: grid; align-content: end; min-width: 0; }
.recurrence-summary { margin: 0; font-size: 0.85rem; }
.recurrence-summary .link-button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
dialog.recurrence-dialog { width: min(380px, calc(100vw - 32px)); padding: 0; }
.recurrence-dialog-body { display: grid; gap: 14px; padding: 20px; }
.recurrence-dialog-body h2 { margin: 0; font-size: 1.1rem; }
.recurrence-dialog-body fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.recurrence-dialog-body legend { font-weight: 700; font-size: 0.85rem; padding: 0; margin-bottom: 6px; }
.recurrence-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recurrence-row label { display: flex; align-items: center; gap: 8px; }
.recurrence-row input[type="number"] { width: 72px; }
.recurrence-row .sr-only-label { font-size: 0; }
.recurrence-row .sr-only-label select { font-size: 1rem; }
.recurrence-days { display: flex; gap: 6px; flex-wrap: wrap; }
.recurrence-day { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, currentColor); background: transparent; color: var(--text); cursor: pointer; font-weight: 700; }
.recurrence-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.recurrence-dialog-body [hidden] { display: none !important; }
.recurrence-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; font-weight: 400; }
.recurrence-choice input[type="radio"] { width: 16px; height: 16px; margin: 0; display: inline-block; }
.recurrence-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recurrence-inline input { width: auto; display: inline-block; margin: 0; }
.recurrence-inline input[type="number"] { width: 80px; }
.recurrence-inline input[type="date"] { width: 170px; }
.recurrence-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* v0.35.5.9 UX pass 1. The rail: wide enough for "Connections", the active item a centred filled tile (the inset bar
   pushed the label off centre and the hover outline then cut through it). */
.admin-rail { width: 92px; padding: 8px; }
.admin-rail-button { box-sizing: border-box; padding: 8px 4px 7px; text-decoration: none; }
.admin-rail-label { max-width: 100%; overflow-wrap: anywhere; }
.admin-rail-group.is-active > .admin-rail-button { color: var(--accent); box-shadow: none; border-color: color-mix(in srgb, var(--accent), var(--line) 35%); background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); }
.admin-rail-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { .admin-rail { width: auto; padding: 6px; } }
/* "+N more" in a month cell is a control, and the day's list reads like the agenda. */
button.calendar-more { display: block; width: 100%; padding: 3px 6px; border: 1px dashed color-mix(in srgb, var(--accent), var(--line) 55%); border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; text-align: left; }
button.calendar-more:hover, button.calendar-more:focus-visible { background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); }
.calendar-day-modal { width: min(520px, calc(100vw - 32px)); }
.calendar-day-list { display: grid; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; max-height: min(60vh, 520px); overflow: auto; }
.calendar-day-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.calendar-day-list .calendar-event { width: 100%; text-align: left; }
/* Gmail on AI Intake. */
.ai-gmail-actions { display: grid; justify-items: end; gap: 6px; min-width: 200px; }
.ai-gmail-state { margin: 0; text-align: right; font-size: .8rem; }
.ai-gmail-manage { font-size: .78rem; }
@media (max-width: 760px) { .ai-gmail-actions { justify-items: start; } .ai-gmail-state { text-align: left; } }

/* v0.35.5.10: Admin overview tiles. Colour is never the only signal: each tile also says its state in words. */
.admin-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.admin-overview-tile { --tile: var(--success); display: grid; gap: 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--tile), var(--line) 55%); border-left: 5px solid var(--tile); border-radius: 14px; background: color-mix(in srgb, var(--tile), var(--panel-solid) 94%); color: var(--text); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.admin-overview-tile.is-amber { --tile: #d97706; }
.admin-overview-tile.is-red { --tile: var(--danger); }
.admin-overview-tile:hover, .admin-overview-tile:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--text), transparent 88%); }
.admin-overview-head { display: flex; align-items: center; gap: 8px; }
.admin-overview-head strong { font-size: 1rem; }
.admin-overview-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tile); flex: none; }
.admin-overview-state { margin-left: auto; color: var(--tile); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.admin-overview-line { color: var(--muted); font-size: .88rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .admin-overview-tile { transition: none; } }
/* v0.35.5.10: AI usage. */
.ai-usage-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ai-usage-meter { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%); }
.ai-usage-meter-label { margin: 0; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ai-usage-meter-value { margin: 4px 0 8px; font-size: .95rem; }
.ai-usage-meter-value strong { font-size: 1.5rem; }
.ai-usage-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent), transparent 84%); overflow: hidden; }
.ai-usage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ai-usage-pace { margin: 8px 0 0; font-size: .82rem; }
.ai-usage-window { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-usage-window .is-active { border-color: var(--accent); color: var(--accent); }
.ai-usage-figure { margin: 0 0 18px; }
.ai-usage-figure figcaption { margin-bottom: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.ai-usage-figure svg { display: block; width: 100%; height: 190px; }
.ai-usage-grid { stroke: color-mix(in srgb, var(--line), transparent 30%); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ai-usage-axis { fill: var(--muted); font-size: 10px; }
.ai-usage-series-0 { fill: #2563eb; background: #2563eb; } .ai-usage-series-1 { fill: #d97706; background: #d97706; } .ai-usage-series-2 { fill: #059669; background: #059669; }
.ai-usage-series-3 { fill: #9333ea; background: #9333ea; } .ai-usage-series-4 { fill: #dc2626; background: #dc2626; } .ai-usage-series-5 { fill: #64748b; background: #64748b; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-0 { fill: #60a5fa; background: #60a5fa; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-1 { fill: #fbbf24; background: #fbbf24; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-2 { fill: #34d399; background: #34d399; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-3 { fill: #c084fc; background: #c084fc; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-4 { fill: #fb7185; background: #fb7185; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-5 { fill: #94a3b8; background: #94a3b8; }
.ai-usage-spend { fill: var(--accent); }
.ai-usage-uncertain { fill: #d97706; }
.ai-usage-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .8rem; }
.ai-usage-legend li { display: flex; align-items: center; gap: 6px; }
.ai-usage-swatch { width: 10px; height: 10px; border-radius: 3px; }
.ai-usage-subhead { margin: 18px 0 8px; font-size: 1rem; }
.ai-usage-month-bar { width: 30%; }
.ai-usage-month-bar span { display: block; height: 8px; border-radius: 999px; background: var(--accent); min-width: 2px; }
.ai-usage-limit-form { margin: 0 0 16px; }
.ai-usage-limit-form h3 { margin: 0 0 8px; font-size: .95rem; }
.ai-usage-limit-form .ai-limit-grid { align-items: end; }

.ai-usage-table-fold > summary { cursor: pointer; font-weight: 700; margin: 6px 0 10px; }
.ai-usage-range { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.ai-usage-range label { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; }
dialog.ai-usage-key-dialog { width: min(520px, calc(100vw - 32px)); }
.ai-usage-key-form { display: grid; gap: 10px; padding: 0 4px 12px; }

/* v0.35.5.10: page toolbars. The controls of a page belong to one band on its panel: title, a segmented switch, and the
   add buttons at the far end. Nothing floats above the panel or trails off on a rule. */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: 100%; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--line), transparent 10%); border-radius: 16px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%); box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 90%), 0 8px 20px color-mix(in srgb, var(--text), transparent 93%); }
.page-toolbar-title h2 { margin: 0; font-size: 1.05rem; }
.page-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; padding: 0; }
.segmented, .segmented.nf-tabs { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg), var(--panel-solid) 35%); }
.segmented .segmented-item, .segmented .nf-tab, .segmented .nf-tab.button-secondary { position: relative; margin: 0; padding: 7px 16px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--muted); font-size: .88rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.segmented .segmented-item:hover, .segmented .nf-tab:hover { color: var(--text); }
.segmented .is-active, .segmented .segmented-item.is-active, .segmented .nf-tab.is-active, .segmented .nf-tab.button-secondary.is-active { background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: 0 1px 4px color-mix(in srgb, var(--text), transparent 78%); }
.segmented .nf-tab.is-active::after { display: none; }
.master-todo-header { display: block; }
.master-todo-note { margin: -6px 2px 12px; font-size: .84rem; }
.calendar-topbar h1 { margin-bottom: 8px; }
/* Once a page has loaded, its loader is one quiet line and the page's own panels sit on the scene. */
.panel.dashboard-route-shell.is-loaded, :root:is([data-theme="dark"],[data-theme="night"]) .panel.dashboard-route-shell.is-loaded { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 0; border: 0; border-color: transparent; background: transparent !important; box-shadow: none !important; backdrop-filter: none; }
.dashboard-route-shell.is-loaded .dashboard-route-shell-header { grid-column: 2; grid-row: 1; }
.dashboard-route-shell.is-loaded .dashboard-route-shell-header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dashboard-route-shell.is-loaded .dashboard-route-shell-status { grid-column: 1; grid-row: 1; justify-self: end; justify-content: flex-end; gap: 6px; padding: 3px 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--panel-solid), transparent 18%); font-size: .78rem; }
.dashboard-route-shell.is-loaded .dashboard-route-shell-status strong { font-weight: 700; color: var(--muted); }
.dashboard-route-shell.is-loaded .dashboard-route-shell-content { grid-column: 1 / -1; }
/* Depth: the board's panel is a tinted sheet over the scene, its columns are raised trays, its cards lift on hover. */
.master-todo-shell, .panel.calendar-shell { background: color-mix(in srgb, var(--panel-solid), transparent 16%); box-shadow: 0 18px 44px color-mix(in srgb, var(--text), transparent 86%), inset 0 1px 0 color-mix(in srgb, white, transparent 88%); }
.master-kanban-column { border-radius: 16px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 22%); box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 90%), 0 10px 24px color-mix(in srgb, var(--text), transparent 90%); }
.master-task-card { transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 2px 6px color-mix(in srgb, var(--text), transparent 90%); }
.master-task-card:hover, .master-task-card:focus-within { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--text), transparent 84%); }
@media (prefers-reduced-motion: reduce) { .master-task-card { transition: none; } .master-task-card:hover { transform: none; } }
@media (max-width: 640px) { .page-toolbar-actions { margin-left: 0; width: 100%; } .page-toolbar-actions > * { flex: 1 1 auto; text-align: center; } }

/* v0.35.5.10: the task dialog. Three things first (due, how urgent, repeat); the rest under More options. */
.task-form-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
/* v0.35.6.0: Due, Priority and Repeat line up. Due was its own kind of field, with a bigger label and a different gap,
   so its box sat lower than the two beside it. All three now share one label size and one gap, and the boxes meet. */
.task-form-primary > label { display: grid; gap: .35rem; align-content: start; min-width: 0; font-size: .85rem; font-weight: 700; }
.task-form-primary > label > span { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.task-form-primary > label > input, .task-form-primary > label > select { width: 100%; min-width: 0; }
.task-form-primary .task-due-datetime { gap: .35rem; }
.task-form-primary .task-due-datetime > span { font-size: .85rem; line-height: 1.3; }
.task-form-primary .recurrence-extra { grid-column: 1 / -1; }
.task-more { margin: 4px 0 2px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 12%); }
.task-more > summary { padding: 10px 14px; cursor: pointer; font-weight: 700; list-style-position: inside; }
.task-more[open] > summary { border-bottom: 1px solid var(--line); }
.task-more > .form-grid { padding: 12px 14px 14px; }
.task-more .task-watch-toggle { align-self: end; }
@media (max-width: 640px) { .task-form-primary { grid-template-columns: 1fr; } }

/* v0.35.6.0: a finished task is one line. Opening it shows the details and the two things anyone wants from a
   finished task: put it back, or start another like it. A long history stays a list instead of a wall of cards. */
.done-row { border: 1px solid color-mix(in srgb, var(--line), transparent 25%); border-radius: 12px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 26%); margin-bottom: 6px; }
.done-row > summary { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: .86rem; list-style-position: inside; }
.done-row > summary::marker { color: var(--muted); }
.done-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.done-row-when { flex: 0 0 auto; font-size: .78rem; }
.done-row[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 40%); }
.done-row-body { padding: 10px 12px 12px; }
.done-row-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: .8rem; }
.done-row-notes { margin: 0 0 8px; font-size: .84rem; }
.done-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.done-row-more, .done-row-rest { margin-top: 6px; font-size: .8rem; }
@media (max-width: 640px) { .done-row > summary { flex-wrap: wrap; } }

/* v0.35.6.1: stopping a repeat is a visible act next to the repeat itself, and on delete. */
.link-button.recurrence-stop { margin-left: 8px; color: var(--danger, #e11d48); }
.recurrence-stop-hint { display: block; margin-top: 4px; }
/* One line: the question, then the two choices side by side. The dialog's grid styles labels as blocks, so these
   are pinned back to inline rows. */
.task-form-primary .delete-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 2px; font-size: .88rem; }
.task-form-primary .delete-scope > span { flex: 0 0 auto; }
.task-form-primary .delete-scope label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; margin: 0; width: auto; font-weight: 600; font-size: .88rem; }
.task-form-primary .delete-scope label input { margin: 0; width: auto; }
/* hidden must win over the display rules above: a task that does not repeat shows neither the choice nor the hint. */
.task-form-primary .delete-scope[hidden], .recurrence-stop-hint[hidden], .link-button.recurrence-stop[hidden] { display: none; }

/* v0.35.6.2: the tick box's hidden label must not sit over the box and take the click. */
.bulk-task-checkbox .sr-only { pointer-events: none; }

/* v0.35.6.2: the stop-repeat choice and the row actions menu. */
.repeat-stop-choice { width: min(92vw, 520px); padding: 20px 22px; }
.repeat-stop-choice h3 { margin: 0 0 6px; }
.repeat-stop-options { display: grid; gap: 10px; margin: 14px 0 6px; }
.repeat-stop-options button { display: grid; gap: 2px; padding: 12px 14px; text-align: left; }
.repeat-stop-options button span { font-weight: 500; font-size: .85rem; opacity: .85; }
.row-actions-menu { position: absolute; z-index: 950; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 16px 40px color-mix(in srgb, var(--text), transparent 80%); }
.row-actions-menu[hidden] { display: none; }
.row-actions-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.row-actions-menu button:hover, .row-actions-menu button:focus { background: color-mix(in srgb, var(--accent), transparent 88%); }
.row-actions-menu button.is-danger { color: var(--danger, #e11d48); }
.row-actions-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }

/* The way back sits in the notice that says what happened. */
.global-toast-action { min-height: 0; margin-left: 10px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.global-toast-action:hover { background: color-mix(in srgb, currentColor, transparent 85%); }

/* v0.35.5.10: message pages (an error, a Plus feature): a centred card with the way back. */
.message-page { display: grid; place-items: center; min-height: min(60vh, 520px); padding: 24px 0; }
.message-card { display: grid; justify-items: center; gap: 10px; width: min(560px, 100%); max-width: 560px; padding: 32px 28px; text-align: center; border-radius: 24px; box-shadow: 0 22px 50px color-mix(in srgb, var(--text), transparent 86%); }
.message-card h1 { margin: 0; font-size: 1.5rem; }
.message-card .message-text { margin: 0; font-size: 1rem; line-height: 1.5; }
.message-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.6rem; font-weight: 900; color: var(--accent-contrast, #fff); background: var(--accent); }
.message-card.is-error .message-icon { background: var(--danger); }
.message-card .message-actions { justify-content: center; margin-top: 8px; }

/* v0.36.1.0 S36.4 and S36.5: card controls, rules, the Home briefing, the header indicator. */
.ai-card-more{border-top:1px dashed var(--line);padding-top:.4rem}
.ai-card-more>summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.ai-card-more-body{display:grid;gap:.5rem;padding-top:.5rem}
.ai-correct-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;align-items:end;padding:.6rem;border:1px solid var(--line);border-radius:10px}
.ai-correct-form strong,.ai-correct-form button{grid-column:1/-1}
.ai-correct-form label{display:grid;gap:.2rem;font-size:.85rem}
.ai-rules{display:grid;gap:.6rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.ai-rules h3{margin:0}
.ai-rule-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ai-rule-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px}
.ai-rule-preview{display:grid;gap:.4rem;padding:.7rem .85rem;border:1px solid var(--warning,#b45309);border-radius:10px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 6%)}
.ai-rule-examples{margin:0;padding-left:1.1rem;color:var(--muted)}
.ai-rule-new-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;align-items:end;padding-top:.5rem}
.ai-rule-new-form label{display:grid;gap:.2rem;font-size:.85rem}
.ai-rule-new-form button{grid-column:1/-1;justify-self:start}
/* S38.5 (5J): the AI Intake column never grows past the screen; a wide table scrolls inside its own box. */
.ai-intake-page{grid-template-columns:minmax(0,1fr)}
.ai-intake-page>*{min-width:0}
/* S38.5 correction: on a phone each "Handled for you" line is a card, so Undo and what it changes are in reach. */
.ai-undo-effect{display:block;margin-bottom:.3rem}
@media (max-width:720px){.ai-handled-table thead{display:none}.ai-handled-table,.ai-handled-table tbody,.ai-handled-table tr,.ai-handled-table td{display:block;width:100%}.ai-handled-table tr{padding:.6rem 0;border-bottom:1px solid var(--line)}.ai-handled-table td{padding:.15rem 0;border:0;overflow-wrap:anywhere}}
/* S38.4: what NookFox remembers from you (AI Intake, under the rules). */
.ai-feedback-memory{display:grid;gap:.5rem;margin-top:1rem;min-width:0;max-width:100%}
.ai-feedback-memory>*{min-width:0}
.ai-feedback-memory>summary{display:flex;align-items:baseline;gap:.75rem;cursor:pointer}
.ai-feedback-memory>summary h3{display:inline;margin:0}
.ai-feedback-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ai-feedback-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.6rem;padding:.55rem .6rem;border:1px solid var(--line);border-radius:10px}
.ai-feedback-text{display:grid;gap:.25rem;min-width:0}
.ai-feedback-list .ai-rule-preview{grid-column:1/-1}
.ai-feedback-revise label{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem}
@media (max-width:720px){.ai-feedback-list li{grid-template-columns:minmax(0,1fr)}.ai-feedback-memory>summary{flex-wrap:wrap}.ai-feedback-revise,.ai-feedback-revise label{display:grid;width:100%}.ai-feedback-revise input{min-width:0;width:100%}}
.ai-brief{display:grid;gap:.75rem}
.ai-brief-head-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ai-brief-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.ai-brief-section h3{display:flex;align-items:center;gap:.4rem;margin:0 0 .4rem;font-size:1rem}
.ai-brief-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ai-brief-row{display:grid;gap:.25rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel-solid),var(--bg) 4%)}
.ai-brief-main{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.ai-brief-title{font-weight:600}
.ai-brief-evidence>summary{cursor:pointer;color:var(--muted);font-size:.88rem;line-height:1.35}
.ai-brief-evidence p{margin:.35rem 0}
.ai-brief-empty{margin:0;font-size:.9rem}
.ai-brief-trips h3{margin:0 0 .4rem;font-size:1rem}
.ai-brief-trip{padding:.5rem .6rem;border:1px solid var(--line);border-radius:10px}
.ai-brief-trip>summary{cursor:pointer}
.ai-brief-health>summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.ai-brief-figures{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .8rem;margin:.5rem 0}
.ai-brief-figures dt{color:var(--muted)}
.ai-brief-figures dd{margin:0}
.ai-attention-pill{text-decoration:none}
@media (max-width:720px){.ai-brief-columns{grid-template-columns:1fr}.ai-brief-main{flex-direction:column;align-items:flex-start;gap:.2rem}.ai-rule-list li{flex-direction:column;align-items:flex-start}.ai-attention-pill span{display:none}}
/* ==== Ongoing work (v0.36.5.0, S36.8) ==================================================================== */
.work-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 8px; }
.work-panel .inline-pill.is-warning { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--text); }
.work-panel .inline-pill.is-muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.work-list, .work-entries, .work-turns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.work-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.work-list-title { font-weight: 600; }
.work-state { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.work-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.work-form { display: grid; gap: 8px; margin-top: 10px; }
.work-form label { display: grid; gap: 4px; }
.work-form button { justify-self: start; }
.work-turn { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.work-turn.is-owner { background: var(--bg-soft); }
.work-turn p { margin: 4px 0; }
.work-turn-who { font-size: .8rem; font-weight: 600; color: var(--muted); }
.work-proposal { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; }
.work-proposal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0; }
.work-proposal-form input[type="text"] { flex: 1 1 220px; min-width: 0; }

/* v0.36.5.0: conversations that moved on (AI Intake) */
.ai-continuity { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.ai-continuity h3 { margin: 0 0 4px; font-size: 1rem; }
.ai-continuity-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.ai-continuity-list .inline-form { display: inline-block; margin-left: 6px; }

/* ==== Scene backdrops (v0.36.5.3): generated by scripts/tcc-build-backdrops.php; edit the scenes there, not here. ==== */
:root[data-home-background="alpine_lake"] { --home-backdrop: url("../backdrops/alpine_lake-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="alpine_lake"] { --home-backdrop: url("../backdrops/alpine_lake-dark.svg"); }
:root[data-home-background="front_range"] { --home-backdrop: url("../backdrops/front_range-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="front_range"] { --home-backdrop: url("../backdrops/front_range-dark.svg"); }
:root[data-home-background="forest"] { --home-backdrop: url("../backdrops/forest-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="forest"] { --home-backdrop: url("../backdrops/forest-dark.svg"); }
:root[data-home-background="ocean"] { --home-backdrop: url("../backdrops/ocean-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="ocean"] { --home-backdrop: url("../backdrops/ocean-dark.svg"); }
:root[data-home-background="desert"] { --home-backdrop: url("../backdrops/desert-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="desert"] { --home-backdrop: url("../backdrops/desert-dark.svg"); }
:root[data-home-background="space"] { --home-backdrop: url("../backdrops/space-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="space"] { --home-backdrop: url("../backdrops/space-dark.svg"); }
:root[data-home-background="moonscape"] { --home-backdrop: url("../backdrops/moonscape-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="moonscape"] { --home-backdrop: url("../backdrops/moonscape-dark.svg"); }
:root[data-home-background="engine"] { --home-backdrop: url("../backdrops/engine-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="engine"] { --home-backdrop: url("../backdrops/engine-dark.svg"); }
:root[data-home-background="factory"] { --home-backdrop: url("../backdrops/factory-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="factory"] { --home-backdrop: url("../backdrops/factory-dark.svg"); }
:root[data-home-background="clouds"] { --home-backdrop: url("../backdrops/clouds-light.svg"); }
:root:is([data-theme="dark"],[data-theme="night"])[data-home-background="clouds"] { --home-backdrop: url("../backdrops/clouds-dark.svg"); }
/* ==== end of scene backdrops ==== */

/* v0.36.5.5: the task dialog shows either Complete or Reopen; a pill button's display must not override [hidden]. */
.task-modal-action-bar button[hidden] { display: none; }

/* v0.36.5.7: cards from one email conversation sit together under one heading in AI Intake. */
.ai-conversation { border: 1px solid var(--border, rgba(127,127,127,.35)); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 12px; }
.ai-conversation-heading { margin: 0; font-size: 1rem; }
.ai-conversation > p.muted { margin: -6px 0 0; }

/* v0.36.5.8: Back to top. Small and quiet: desktop only (the script never shows it on narrow or touch screens),
   only on a page that scrolls, after the first screen. */
.back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border, rgba(127,127,127,.4)); background: var(--surface, rgba(30,40,60,.85)); color: var(--text-muted, currentColor); opacity: .55; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
.back-to-top:hover, .back-to-top:focus-visible { opacity: 1; color: var(--accent, currentColor); }
.back-to-top[hidden] { display: none; }
@media (max-width: 899px), (pointer: coarse) { .back-to-top { display: none !important; } }

/* v0.36.5.8: one line for every control in a control row. A row of labelled boxes with its buttons beside them lines
   them up on the same bottom edge at the same height (Show / Download beside dates, Show this month beside the month,
   Filter beside the Helpdesk filters, the limit forms, Run beside the briefing select). A new row of this kind takes
   the class control-row; stacked forms keep their spacing. */
:root { --control-h: 40px; }
/* v0.36.5.8: every box opens with a header band. The kicker and the title share one line ("ACCOUNTS / SIGNUPS - Public
   Beta Enrollment") in a darker band with a dark rule under it, and the box's own words start below the rule. The band
   is painted by the box's background at a fixed height, so no view had to change; a long title is cut with an
   ellipsis rather than spilling out of the band. Matches a box that starts with a kicker and its title, a heading
   block holding them (with any buttons beside it), or a bare title. */
:root { --panel-head-h: 46px; --panel-head-bg: color-mix(in srgb, var(--panel-solid), var(--text) 6%); --panel-head-rule: color-mix(in srgb, var(--line), var(--text) 30%); }
:root:is([data-theme="dark"],[data-theme="night"]) { --panel-head-bg: color-mix(in srgb, var(--panel-solid), black 28%); --panel-head-rule: color-mix(in srgb, var(--line), black 45%); }
:is(main:not(.page-home), .settings-content, .admin-page) .panel:is(:has(> .panel-kicker:first-child + :is(h2, h3)), :has(> :is(div, header):first-child > div:first-child > .panel-kicker:first-child + :is(h2, h3)), :has(> h2:first-child)):not(.home-widget) {
  padding-top: 0;
  background-image: linear-gradient(var(--panel-head-bg), var(--panel-head-bg)), linear-gradient(var(--panel-head-rule), var(--panel-head-rule));
  background-size: 100% var(--panel-head-h), 100% 1px;
  background-position: 0 0, 0 var(--panel-head-h);
  background-repeat: no-repeat;
}
:is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child:has(+ :is(h2, h3)), :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child { display: inline-block; margin: 0; line-height: var(--panel-head-h); vertical-align: top; white-space: nowrap; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child:has(+ :is(h2, h3))::after, :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child::after { content: "\2014"; margin: 0 .55em; opacity: .6; letter-spacing: 0; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child + :is(h2, h3), :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child + :is(h2, h3), :is(main:not(.page-home), .settings-content, .admin-page) .panel > h2:first-child { display: inline-block; max-width: calc(100% - 12em); margin: 0 0 12px; overflow: hidden; font-size: 1.08rem; line-height: var(--panel-head-h); text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > h2:first-child { max-width: 100%; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child + :is(h2, h3) + *, :is(main:not(.page-home), .settings-content, .admin-page) .panel > h2:first-child + *, :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child + :is(h2, h3) + p { margin-top: 0; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child { display: block; min-width: 0; flex: 1 1 auto; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > :not(:first-child) { align-self: flex-start; margin: calc(var(--panel-head-h) / 2) 0 0; transform: translateY(-50%); }
/* v0.36.5.11: only status chips sit in the band beside the title. Anything else beside a heading (a form, toggles, a
   button, a nav) goes under the description in one column, so it can never ride up into the band (Account's email
   toggles and "Turn on for this device" did, because the text beside them has a maximum width and left room). */
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)):has(> :not(:first-child):not(.inline-pill, .status-chip, [data-status-level])) { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)):has(> :not(:first-child):not(.inline-pill, .status-chip, [data-status-level])) > div:first-child { width: 100%; max-width: none; }
:is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)):has(> :not(:first-child):not(.inline-pill, .status-chip, [data-status-level])) > :not(:first-child) { margin: 0; transform: none; min-height: 0; }
/* On a phone the band stacks the kicker over the whole title instead of cutting the title short, and anything beside
   the heading (a chip, a nav, buttons) moves under the description. */
@media (max-width: 640px) {
  :root { --panel-head-h: 66px; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child:has(+ :is(h2, h3)), :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child { display: block; padding-top: 9px; line-height: 22px; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child:has(+ :is(h2, h3))::after, :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child::after { content: none; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > .panel-kicker:first-child + :is(h2, h3), :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child > .panel-kicker:first-child + :is(h2, h3) { display: block; max-width: 100%; line-height: 35px; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) { flex-wrap: wrap; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > div:first-child { flex-basis: 100%; }
  :is(main:not(.page-home), .settings-content, .admin-page) .panel > :is(div, header):first-child:has(> div:first-child > .panel-kicker:first-child + :is(h2, h3)) > :not(:first-child) { margin: 0; transform: none; }
}
/* v0.36.5.8: on a phone the Users table is a stack of cards, so the desktop table's 1500px minimum no longer applies
   (it made the page five phones wide). */
@media (max-width: 640px) { .user-directory .user-table-wrap table { min-width: 0; } }

/* v0.36.5.8: a provider card is a column; its action sits at the start instead of stretching across the card. */
.connection-provider-card > :is(button, form) { align-self: flex-start; }

/* v0.36.5.8: the changelog is a document in a reading column that follows the window. */
.changelog-topbar, .changelog-doc { width: min(100%, 920px); margin-inline: auto; }
.changelog-doc { padding: 24px 32px; line-height: 1.6; }
.changelog-doc h2 { margin: 1.6rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1.15rem; }
.changelog-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.changelog-doc h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.changelog-doc p { margin: 0 0 .7rem; }
.changelog-doc ul { margin: 0 0 .8rem; padding-left: 1.25rem; }
.changelog-doc li { margin: .25rem 0; }
.changelog-doc code { font-size: .88em; padding: 0 .3em; border-radius: 4px; background: color-mix(in srgb, var(--text), transparent 90%); overflow-wrap: anywhere; }
@media (max-width: 640px) { .changelog-doc { padding: 16px; } }

/* v0.36.5.8: the in-app Terms and Privacy boxes are the same width; the document's own title is a page-sized title. */
.legal-page .policy-main, .legal-page .policy-card { max-width: none; }
.legal-page .legal-page-body h1 { font-size: 1.6rem; line-height: 1.25; margin: .4rem 0 1rem; max-width: none; }

/* v0.36.5.8: settings boxes side by side keep their own height (a short box is not stretched to its neighbour), and
   the built-in Spaces are one compact row each: name and kind, the rename box with its button, then Archive. */
.settings-content { align-items: start; }
.built-in-space-list { gap: 8px; margin-top: 12px; }
.built-in-space-list .service-card { align-items: center; flex-wrap: nowrap; gap: 12px; padding: 10px 14px; }
.built-in-space-list .service-card > div { flex: 0 0 150px; }
.built-in-space-list .service-card h3 { margin: 0 0 2px; font-size: 1rem; }
.built-in-space-list .service-card p { font-size: .82rem; }
.built-in-space-list .service-card .inline-form { flex: 1 1 auto; align-items: center; flex-wrap: nowrap; margin: 0; }
.built-in-space-list .service-card .inline-form input[type="text"] { min-width: 0; height: var(--button-h); margin: 0; }
.built-in-space-list .service-card > :is(form, .status-chip):last-child:not(.inline-form) { margin-left: auto; }
@media (max-width: 640px) { .built-in-space-list .service-card { flex-wrap: wrap; } .built-in-space-list .service-card > div { flex-basis: 100%; } }
/* Family: the Invite control is an ordinary action button, not a green chip. */
.family-seat-invite summary { display: inline-flex; align-items: center; height: 32px; padding: 0 11px; border: 1px solid var(--action-secondary-border); border-radius: 8px; background: transparent; color: var(--action-primary-bg); font-size: .8rem; font-weight: 600; cursor: pointer; }

/* v0.36.5.8: Helpdesk folders are tabs on top of the mailbox, like the workspace tabs; the older pill styling of
   helpdesk-folder-tabs (still used on the customer Helpdesk) is undone here. */
.sub-nav.sub-nav-tabs.helpdesk-folder-tabs { display: flex; gap: 0; padding: 4px 0 5px; margin-bottom: -5px; border: 0; background: none; }
.sub-nav.sub-nav-tabs.helpdesk-folder-tabs a { border-radius: 16px 16px 0 0; font-weight: 700; }
.sub-nav.sub-nav-tabs.helpdesk-folder-tabs a:not(.active):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-solid), var(--bg) 6%), color-mix(in srgb, var(--panel), var(--bg) 22%)); color: var(--text); }
.helpdesk-tabs-bar + .panel { border-top-left-radius: 0; }
.admin-helpdesk-page > .helpdesk-tabs-bar { margin-bottom: -19px; }

/* v0.36.5.9: Home's own button rules, put back. v0.36.5.8 removed them as overridden by the button standard, but the
   standard never applies on Home, so without them the arrange bar and the loader line's buttons lost their look. */
.home-arrange-bar button { margin: 0; padding: 6px 12px; }
.dashboard-route-shell.is-loaded .dashboard-route-shell-actions .button-secondary { min-height: 0; padding: 4px 12px; font-size: .78rem; }

/* v0.36.5.8: depth. A box inside a box sits on a darker surface than its parent (lighter shade in Light), and one
   more level inside goes a step further, so a page reads as boxes in boxes rather than one long run-on box.
   v0.36.5.9: none of this reaches Home (outside its dialogs); Home keeps its own look until Todd approves a change. */
:root { --panel-depth-1: color-mix(in srgb, var(--panel-solid), var(--text) 3.5%); --panel-depth-2: color-mix(in srgb, var(--panel-solid), var(--text) 7%); }
:root:is([data-theme="dark"],[data-theme="night"]) { --panel-depth-1: color-mix(in srgb, var(--panel-solid), black 22%); --panel-depth-2: color-mix(in srgb, var(--panel-solid), black 38%); }
.panel .panel:not(.page-home :not(dialog, dialog *)), .panel :is(.metric-card, .service-card, .summary-card, .chat-bridge-step, .copy-field, fieldset, details.panel-fold):not(.page-home :not(dialog, dialog *)) {
  background-color: var(--panel-depth-1); box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 94%); backdrop-filter: none;
}
.panel .panel .panel:not(.page-home :not(dialog, dialog *)), .panel .panel :is(.metric-card, .service-card, .summary-card, .copy-field, fieldset):not(.page-home :not(dialog, dialog *)) { background-color: var(--panel-depth-2); }
.panel .panel:not(.page-home :not(dialog, dialog *)) { --panel-head-bg: color-mix(in srgb, var(--panel-depth-1), black 18%); }

/* ==== Buttons: the one standard (v0.36.5.8) ==========================================================================
   The one place a button's size, shape, and colour are decided. Reference: docs/UI_STANDARDS.md.
   * Every action button on a page or in a dialog is one shape at one of two heights: 40px, or 32px for row actions in
     a table and for a button in a box's header band. Radius 10px (8px compact). Never a pill, never stretched.
   * Available action: no fill, orange (action colour) text and border. Selected or toggled (is-active, aria-pressed,
     aria-current): orange fill. Danger: red. Disabled: no fill, dashed border, muted text; never faded orange.
   * Buttons in a row are 10px apart and 14px from the box above them.
   * Not action buttons, so not styled here: icon buttons, tabs, segmented switches, toggles, calendar cells, the
     back-to-top button, and anything inside a Home widget. Status pills, chips, and badges are never buttons.
   The exclusions sit in :where() so they add no weight; every rule below outweighs an ordinary page rule on purpose.
   A page adds no button size, radius, or colour of its own. */
:root { --button-h: 40px; --button-h-compact: 32px; --button-radius: 10px; --button-border: color-mix(in srgb, var(--action-primary-bg), var(--line) 45%); }
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; max-width: 100%; min-width: 0; height: var(--button-h); min-height: var(--button-h); margin-top: 0; padding: 0 16px; justify-self: start;
  border: 1px solid var(--button-border); border-radius: var(--button-radius); background: transparent; box-shadow: none; filter: none; color: var(--action-primary-bg);
  font-size: .9rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; vertical-align: middle;
}
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)) > svg { flex: 0 0 auto; width: 1em; height: 1em; }
/* The display above must never show a button the page has hidden. */
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button)[hidden] { display: none; }
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)):not(:disabled):hover { background: color-mix(in srgb, var(--action-primary-bg), transparent 88%); }
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)):is(.is-active, [aria-pressed="true"], [aria-current]) { background: var(--action-primary-bg); border-color: var(--action-primary-border); color: var(--action-primary-fg); }
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):is(.button-danger):not(:disabled):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)) { background: var(--action-danger-bg); border-color: var(--action-danger-border); color: var(--action-danger-fg); }
:is(main:not(.page-home), dialog) :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)):is(:disabled, [aria-disabled="true"]) { background: transparent; border: 1px dashed var(--line); color: var(--muted); opacity: 1; cursor: not-allowed; }
/* Compact: row actions in a table. (Since v0.36.5.11 no button sits in a header band; see the band rules above.) */
:is(main:not(.page-home), dialog) td :is(.button, .button-primary, .button-secondary, .button-danger, .button-success, .button-pill, .button-pill-outline, button[type="submit"]:not([class]), button:not([class]), button[class=""], .button-pill-compact, .button-small, .copy-button, .inbox-add-button, .workstream-new-task-button, .task-save-button, .task-complete-button, .task-reopen-button, .task-restore-button, .task-archive-button, .task-duplicate-button):not(:where(.icon-button, .segmented-item, .nf-tab, [role="tab"], .back-to-top, .calendar-more, .home-widget *, .page-home :not(dialog, dialog *), [role="menu"] *, [role="toolbar"] *, [role="tablist"] *, [class*="-menu"] *, .mail-text-toolbar *, .weather-location-tabs *, .clock-tools-tabs *, .clock-chip *, .clock-tools-list *, .bookmark-section-width-options *, .bookmark-section-options *, .repeat-stop-options *, .task-date-shortcuts *, .header-control, .notification-bell, .custom-theme-preview *, .header-search *)) {
  height: var(--button-h-compact); min-height: var(--button-h-compact); padding: 0 11px; border-radius: 8px; font-size: .8rem;
}
:is(main:not(.page-home), dialog) td:has(> :is(form, button, .button, .button-secondary)) { white-space: normal; }
:is(main:not(.page-home), dialog) td > form { display: inline-block; margin: 0 4px 4px 0; }
:is(main:not(.page-home), dialog) :is(.button-row, .form-actions, .inline-actions) { gap: 10px; }
:is(main:not(.page-home), dialog) * + :is(.button-row, .form-actions, .inline-actions) { margin-top: 14px; }
:is(main:not(.page-home), dialog) :is(.button-row, .form-actions, .inline-actions) > form { margin: 0; }

/* v0.36.5.8: every settings page lays its boxes out the same way. Boxes flow down two columns that pack like a wall
   (no row is as tall as its tallest box, so a short box never leaves a hole beside a long one), and the columns become
   one when the window is narrower than two boxes. History, Family, and About stay one column. */
.settings-content > .settings-page-panels { display: block; columns: 2 440px; column-gap: 16px; }
.settings-content > .settings-page-panels > .panel { display: block; width: 100%; margin: 0 0 16px; break-inside: avoid; }
.settings-content-family .settings-page-panels,
.settings-content-history .settings-page-panels,
.settings-content-about .settings-page-panels { columns: 1; }

/* v0.36.5.8: workspace tabs sit flush on their panel. The first tab starts at the panel's left edge, the panel's
   top-left corner is square under it (a rounded corner left the first tab hanging when it was not selected), and a
   hovered tab no longer lifts (the tab strip scrolls sideways, which clipped the lifted top). */
.sub-nav.sub-nav-tabs { padding: 4px 0 5px; margin-bottom: -5px; overflow-y: hidden; } /* room for the active tab's join below it, so the strip never scrolls up and down */
.sub-nav.sub-nav-tabs a:hover { transform: none; }
.workstream-tabs-bar:has(.sub-nav-tabs) ~ .panel:not(.workstream-tabs-bar ~ .panel ~ .panel) { border-top-left-radius: 0; }
/* Control rows: labelled fields and their buttons share one bottom edge at the 40px control height. The rows are
   named here; a new one takes the class control-row. Buttons get their size from the button standard. */
:is(.control-row, .ai-usage-range, .ai-limit-grid, .helpdesk-filters, .helpdesk-mail-filters, .clock-tools-form, .inline-form, .page-toolbar form):has(> label > :is(input, select)):not(.page-home :not(dialog, dialog *)) { align-items: end; }
:is(.control-row, .ai-usage-range, .ai-limit-grid, .helpdesk-filters, .helpdesk-mail-filters, .clock-tools-form, .inline-form, .page-toolbar form):has(> label > :is(input, select)):not(.page-home :not(dialog, dialog *)) > label { margin-bottom: 0; }
:is(.control-row, .ai-usage-range, .ai-limit-grid, .helpdesk-filters, .helpdesk-mail-filters, .clock-tools-form, .inline-form, .page-toolbar form):has(> label > :is(input, select)):not(.page-home :not(dialog, dialog *)) > label > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select) { box-sizing: border-box; height: var(--control-h); min-height: var(--control-h); margin-bottom: 0; }
:is(.control-row, .ai-usage-range, .ai-limit-grid, .helpdesk-filters, .helpdesk-mail-filters, .clock-tools-form, .inline-form, .page-toolbar form):has(> label > :is(input, select)):not(.page-home :not(dialog, dialog *)) > :is(button, input[type=submit], a.button-secondary, a.button) { align-self: end; }
.helpdesk-filters select { min-width: 0; text-overflow: ellipsis; }

/* v0.36.5.8: a checkbox or radio inside a label keeps its own size and sits beside its words (the general input
   width stretched it across the row, so "What you see on Home" showed the boxes far left and the words far right). */
label:not(.page-home :not(dialog, dialog *)) > input:is([type=checkbox], [type=radio]) { width: auto; flex: 0 0 auto; min-height: 0; height: auto; }
.ai-preference-check { justify-content: flex-start; text-align: left; }
.ai-preference-check > input { margin-top: 3px; }

/* v0.36.5.8: AI usage charts drawn by app.js at their real width, with the value under the pointer. */
.ai-usage-figure { position: relative; }
.ai-usage-figure svg.ai-usage-drawn { width: 100%; height: auto; outline: none; }
.ai-usage-figure svg.ai-usage-drawn:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
.ai-usage-hit { fill: transparent; }
.ai-usage-col.is-active .ai-usage-hit { fill: color-mix(in srgb, var(--text), transparent 92%); }
.ai-usage-figure.is-drawn .ai-usage-col:not(.is-active) rect:not(.ai-usage-hit) { transition: opacity .12s; }
.ai-usage-figure[data-ai-usage-active] .ai-usage-col:not(.is-active) rect:not(.ai-usage-hit) { opacity: .55; }
.ai-usage-series-6 { fill: #0891b2; background: #0891b2; } .ai-usage-series-7 { fill: #db2777; background: #db2777; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-6 { fill: #22d3ee; background: #22d3ee; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-series-7 { fill: #f472b6; background: #f472b6; }
.ai-usage-spend { fill: #0d9488; background: #0d9488; } .ai-usage-uncertain { fill: #d97706; background: #d97706; }
:root:is([data-theme="dark"],[data-theme="night"]) .ai-usage-spend { fill: #2dd4bf; background: #2dd4bf; }
.ai-usage-tip { position: absolute; z-index: 3; display: grid; gap: 3px; min-width: 150px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 8px 22px color-mix(in srgb, var(--text), transparent 84%); font-size: .8rem; pointer-events: none; }
.ai-usage-tip[hidden] { display: none; }
.ai-usage-tip strong { font-size: .78rem; color: var(--muted); }
.ai-usage-tip-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.ai-usage-tip-row b { font-variant-numeric: tabular-nums; }
.ai-usage-tip .ai-usage-swatch { display: inline-block; }
.ai-usage-pager { margin: 0 0 10px; }
.ai-usage-pager .segmented-item { padding: 5px 12px; }
.ai-usage-pager-status { margin-left: auto; font-variant-numeric: tabular-nums; }

/* v0.36.5.12: weather temperature colors (approved by Todd from the 2026-10-03 preview). The server sets --weather-tone
   on each location from a smooth blue-to-red scale (tcc_weather_temperature_color) and --day-tone on each forecast day
   from that day's high; the older band classes stay as the fallback. Below 32 °F icicles hang from the card's top edge;
   at 90 °F and above the reading sweats. Only with "React to temperature" on, and only on Home's weather widget. */
.page-home .weather-card.is-temperature-reactive .weather-location { position: relative; }
.page-home .weather-card.is-temperature-reactive .forecast-strip div.has-day-tone { border-top: 3px solid var(--day-tone); }
.page-home .weather-card.is-temperature-reactive .forecast-strip div.has-day-tone strong { color: var(--day-tone); }
.page-home .weather-card.is-temperature-reactive .weather-location.is-freezing::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 11px; pointer-events: none; opacity: .85;
  background: conic-gradient(from 150deg at 50% 0, #d6ecff 0 60deg, transparent 0) 0 0 / 13px 11px repeat-x;
}
.page-home .weather-card.is-temperature-reactive .weather-location.is-sweltering .weather-current strong::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; vertical-align: 0.9em;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #7cc4ff; animation: weather-sweat 2.6s ease-in infinite;
}
@keyframes weather-sweat { 0%, 55% { translate: 0 0; opacity: 1; } 90% { translate: 0 9px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .page-home .weather-card.is-temperature-reactive .weather-location.is-sweltering .weather-current strong::after { animation: none; } }

/* v0.36.5.13: Settings > Sign-in & Security, remembered devices. One row per browser: words left, its action right;
   on a phone the action drops under the words. */
.remembered-device-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.remembered-device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); border-radius: 10px; }
.remembered-device.is-current { border-color: var(--action-primary-border, var(--accent)); }
.remembered-device-text { display: grid; gap: 2px; min-width: 0; }
.remembered-device-text strong { overflow-wrap: anywhere; }
.remembered-device form { margin: 0; flex: none; }
.remembered-device-note { flex: none; font-size: 0.9em; }
.remembered-device-more { margin-top: 10px; }
.remembered-device-more > summary { cursor: pointer; color: var(--action-primary-text, var(--accent)); font-weight: 600; }
@media (max-width: 560px) { .remembered-device { flex-direction: column; align-items: flex-start; } }
/* B9: with a name and more details, each row stacks: the words on top, then its actions (name, sign out) in one row
   underneath; the name form opens below its summary at the row's full width. The panel sits in a narrow column. */
.remembered-device { flex-direction: column; align-items: stretch; }
.remembered-device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.remembered-device-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.remembered-device-rename { flex: 1 1 auto; min-width: 0; }
.remembered-device-rename[open] { flex-basis: 100%; }
.remembered-device-actions > .remembered-device-note { margin-left: auto; }
.remembered-device-rename > summary { cursor: pointer; color: var(--action-primary-text, var(--accent)); font-weight: 600; padding: 4px 0; width: max-content; }
.remembered-device .remembered-device-rename-form { display: grid; gap: 6px; margin-top: 6px; max-width: 360px; }
.remembered-device-rename-form label { display: grid; gap: 4px; }
.remembered-device-rename-form input[type="text"] { width: 100%; box-sizing: border-box; }
.remembered-device-rename-form button { justify-self: start; }
.remembered-device-actions > form { margin-left: auto; }

/* v0.36.5.13: Settings > Appearance > Weather colors. The bar and the sample readings preview the scale; the table of
   stops stays narrow and scrolls inside itself on a phone. */
.weather-scale-panel { max-width: 900px; }
.weather-scale-bar { height: 18px; border-radius: 9px; margin-top: 12px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.weather-scale-bar-ends { display: flex; justify-content: space-between; font-size: 0.85em; margin-top: 2px; }
.weather-scale-samples { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.weather-scale-samples li { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); border-top: 4px solid var(--sample-tone, var(--accent)); }
.weather-scale-samples strong { color: var(--sample-tone, inherit); font-size: 1.15em; }
.weather-scale-samples small { font-size: 0.8em; opacity: 0.8; }
.weather-scale-table { border-collapse: collapse; margin-top: 8px; max-width: 100%; }
.weather-scale-table th { text-align: left; font-weight: 600; padding: 4px 12px 4px 0; }
.weather-scale-table td { padding: 4px 12px 4px 0; vertical-align: middle; }
.weather-scale-table input[type="number"] { width: 7em; }
.weather-scale-table input[type="color"] { width: 56px; height: var(--control-h, 40px); padding: 2px; }
.weather-scale-effects { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); margin-top: 14px; }
.weather-scale-panel.is-unordered .weather-scale-bar { opacity: 0.35; }
.weather-scale-panel.is-unordered .weather-scale-form > p.muted { color: var(--danger, #b91c1c); }
/* B10: Admin > System > Site settings, the personal colors kept from before. */
.weather-scale-transition { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.weather-scale-transition h3 { margin: 0 0 6px; font-size: 1rem; }

/* v0.36.5.13: Admin > Users on a laptop: the account ID sits under the name and the row actions wrap two to a line,
   so the row fits without the actions running off the edge. Phones keep the card layout (max 640px). */
@media (min-width: 641px) {
  .user-table-wrap td[data-label="Actions"] .button-row { flex-wrap: wrap; max-width: 240px; }
  .user-table-wrap .user-name-cell code { display: block; font-size: 0.85em; }
}

/* v0.37.1.0: the Filing Cabinet (S37.1 records).
   v0.37.1.3: one centred column (about 1040px); a compact toolbar with the records right under it; the form opens only
   for Add record or Edit and comes in four groups; each record reads name and provider on the left, its dates and
   reminder on the right; Edit is the one coloured row action, the others are quiet. Phones stack everything. */
/* S36.9 B6 (Todd 2026-10-04): the Filing Cabinet uses the shared page width like every other page, not a 1040px column. */
.filing-page { width: 100%; max-width: none; margin-inline: 0; min-width: 0; }
.filing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; }
.filing-search-row { display: flex; flex: 1 1 440px; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.filing-search-row > label { display: block; margin: 0; min-width: 0; }
.filing-search-field { flex: 1 1 220px; }
.filing-search-field input { width: 100%; }
.filing-kind-field select { min-width: 150px; }
.filing-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.filing-view-switch { margin: 0; }
.filing-form { display: grid; gap: 14px; }
.filing-group { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); border-radius: 12px; min-width: 0; }
.filing-group > legend { padding: 0 6px; font-weight: 700; }
.filing-optional > summary { cursor: pointer; font-weight: 700; }
.filing-optional > summary .muted { font-weight: 400; }
.filing-optional[open] > summary { margin-bottom: 10px; }
.filing-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.filing-fields > label { display: grid; gap: 4px; margin: 0; min-width: 0; }
.filing-fields .filing-wide { grid-column: 1 / -1; }
.filing-hint { margin: 8px 0 0; font-size: 0.9em; }
.filing-form > .filing-hint { margin: 0; }
.filing-form .form-actions { margin-top: 0; }
.filing-records { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.filing-record { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 6px 24px; padding: 14px 16px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); border-radius: 12px; min-width: 0; }
.filing-record-main { min-width: 0; }
.filing-record-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filing-record-title { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.filing-record-who { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.filing-record-line { margin: 4px 0 0; overflow-wrap: anywhere; }
.filing-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.filing-record-notes { margin: 4px 0 0; overflow-wrap: anywhere; }
.filing-record-quiet { color: var(--muted); font-size: 0.92em; }
.filing-record-dates { display: grid; gap: 4px; margin: 0; align-content: start; }
.filing-record-dates > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }
.filing-record-dates dt { color: var(--muted); font-size: 0.85em; }
.filing-record-dates dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.filing-record-dates .filing-record-quiet dd { font-weight: 400; }
.filing-record-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.filing-record-meta { font-size: 0.85em; margin: 0; }
.filing-record-actions { margin: 0; gap: 6px; }
.filing-record-actions form { margin: 0; }
:is(main:not(.page-home), dialog) .filing-record-actions .filing-quiet-action:not(:disabled) { border-color: transparent; background: transparent; color: var(--muted); }
:is(main:not(.page-home), dialog) .filing-record-actions .filing-quiet-action:not(:disabled):is(:hover, :focus-visible) { border-color: var(--line); color: var(--text); }
.filing-export { margin: 14px 0 0; font-size: 0.9em; }
@media (max-width: 640px) {
  .filing-toolbar { padding: 12px; }
  .filing-search-row { flex-basis: 100%; }
  .filing-kind-field { flex: 1 1 auto; }
  .filing-kind-field select { width: 100%; min-width: 0; }
  .filing-toolbar-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .filing-record { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .filing-fields { grid-template-columns: minmax(0, 1fr); }
}

/* v0.36.5.13: VFW > Membership, the Colorado page (page classes, not the VFW Stats widget). */
.membership-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.membership-figures > div { padding: 10px 12px; border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); border-radius: 10px; }
.membership-figures dt { font-size: 0.85em; opacity: 0.8; }
.membership-figures dd { margin: 2px 0 0; font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums; }
.membership-figures dd small { font-size: 0.55em; font-weight: 500; opacity: 0.8; }
.membership-progress p { margin: 4px 0; }
.membership-breakdown { border-collapse: collapse; margin-top: 10px; width: auto; min-width: 320px; }
.membership-breakdown th, .membership-breakdown td { padding: 6px 14px 6px 0; text-align: left; font-variant-numeric: tabular-nums; }
.membership-breakdown thead th { font-weight: 600; border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.membership-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin-top: 16px; }
.membership-recruiters { margin: 8px 0; padding-left: 1.4em; }
/* S36.9 B11: the department choice beside the title, the merged calls with a join button, and earlier calls folded away. */
.membership-department-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.membership-department-form label { margin: 0; font-weight: 600; }
.membership-department-form select { width: auto; min-width: 12rem; max-width: 100%; }
.membership-department-form .muted { flex: 1 1 220px; min-width: 0; font-size: 0.9em; }
.membership-recruiters li { margin: 0 0 6px; }
.membership-calls li { margin: 0 0 12px; overflow-wrap: anywhere; }
.membership-join { display: inline-block; margin-top: 6px; }
.membership-past-calls { margin-top: 8px; }
.membership-past-calls summary { cursor: pointer; }
@media (max-width: 640px) { .membership-department-form select { flex: 1 1 10rem; min-width: 0; } }

/* S36.9 B4: the Briefing widget (Direction B, Todd 2026-10-04), in the Action Items slot. Theme tokens only, so Light,
   Dark, and Night follow; a narrow widget (an iPad column, a phone) puts the date and buttons under the words and uses
   short tile labels; touch targets are 44px on tablets and phones. */
.briefing { display: grid; gap: 10px; container-type: inline-size; }
.briefing-fresh { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); white-space: nowrap; }
.briefing-fresh.is-stale { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.briefing-context { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; color: var(--muted); }
.briefing-context b { color: var(--text); font-weight: 600; }
.briefing-tiles { display: flex; gap: 8px; }
.briefing-tile { flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; align-content: center; justify-items: start; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.briefing-tile b { font-size: 1.35rem; line-height: 1.1; }
.briefing-tile > span { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.briefing-tile .is-short { display: none; }
.briefing-tile.is-warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: color-mix(in srgb, var(--warning) 8%, var(--panel-solid)); }
.briefing-tile[aria-pressed="true"] { background: var(--action-primary-bg); border-color: var(--action-primary-border); color: var(--action-primary-fg); }
.briefing-tile[aria-pressed="true"] > span { color: inherit; }
.briefing-tile:focus-visible, .briefing-row button:focus-visible { outline: 3px solid color-mix(in srgb, var(--action-primary-bg) 45%, transparent); outline-offset: 2px; }
.briefing-heading { display: flex; justify-content: space-between; margin: 2px 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.briefing-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-solid); }
.briefing-row { border-top: 1px solid var(--line); }
.briefing-row:first-child { border-top: 0; }
.briefing-row-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center; padding: 8px 10px; }
.briefing-expand { width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; font-size: .9rem; }
.briefing-expand[aria-expanded="true"] { transform: rotate(90deg); }
.briefing-what { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.briefing-sit { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.briefing-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.briefing-date { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.briefing-date.is-soon { color: var(--warning); }
.briefing-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.widget-panel .briefing-acts button, .widget-panel .briefing-reasons button { min-width: 36px; min-height: 36px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0 9px; }
.widget-panel .briefing-acts button.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--line)); }
.widget-panel .briefing-acts button.is-choice { color: var(--action-primary-bg); border-color: color-mix(in srgb, var(--action-primary-bg) 40%, var(--line)); }
.briefing-more { padding: 0 12px 10px 52px; font-size: .82rem; color: var(--muted); }
.briefing-more:not([hidden]) { display: grid; gap: 6px; }
.briefing-src { border-left: 3px solid var(--line); padding-left: 8px; }
.briefing-doubt { border-left: 3px solid var(--warning); padding-left: 8px; color: var(--warning); }
.briefing-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.widget-panel .briefing-reasons button { min-height: 30px; font-size: .76rem; }
.widget-panel .briefing-more-toggle { justify-self: start; margin-top: 6px; min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--action-primary-bg); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.briefing-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); }
.briefing-toast { margin: 0; border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--success) 12%, var(--panel-solid)); color: var(--success); font-weight: 600; font-size: .86rem; }
.briefing-clear { border: 1px dashed var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 4px; }
.briefing-clear b { font-size: 1rem; }
[data-briefing][aria-busy="true"] .briefing-acts button { opacity: .6; pointer-events: none; }
@container (max-width: 560px) {
  .briefing-row-main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'x text text' 'x date acts'; }
  .briefing-row-main > .briefing-expand { grid-area: x; align-self: start; }
  .briefing-row-main > .briefing-text { grid-area: text; }
  .briefing-row-main > .briefing-date { grid-area: date; }
  .briefing-row-main > .briefing-acts { grid-area: acts; }
  .briefing-tile .is-long { display: none; }
  .briefing-tile .is-short { display: inline; }
  .briefing-more { padding-left: 14px; }
}
@media (max-width: 1024px) and (pointer: coarse), (max-width: 760px) {
  .widget-panel .briefing-acts button { min-width: 44px; min-height: 44px; }
  .briefing-expand { width: 44px; height: 44px; }
  .briefing-tile { min-height: 64px; }
}
/* ===== S36.9 B6: To-Do fits every width; the due-date filter ===== */
/* Completed rows and cards never grow past their column: grid items default to min-width:auto, and a row whose date
   cannot shrink pushed past the column on iPad widths (about 821-1180px). */
.master-kanban-column, .master-kanban-stack > *, .board-column, .board-column > * { min-width: 0; }
.master-kanban-stack .done-row { max-width: 100%; overflow: hidden; }
.master-kanban-stack .done-row > summary { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.master-kanban-stack .done-row-title { flex: 1 1 8rem; min-width: 0; }
.master-kanban-stack .done-row-when { flex: 0 1 auto; min-width: 0; white-space: normal; }
.master-kanban-stack .task-card, .master-kanban-stack .task-card * { overflow-wrap: anywhere; }
@media (min-width: 821px) and (max-width: 1180px) {
  .master-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-kanban-column[data-master-column="completed"] { grid-column: 1 / -1; }
}
.master-due-filter { display: inline-flex; align-items: center; gap: 8px; }
.master-due-filter select { min-height: 36px; padding: 4px 10px; border-radius: 10px; }
.master-overdue-note { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--warning-soft, #fff7ed); color: var(--text, inherit); }
@media (max-width: 640px) {
  .master-filter-bar { gap: 8px; }
  .master-due-filter select { min-height: 44px; }
}
/* ===== S36.9 B6: Kanban by touch ===== */
.board-preview.is-sorting, .board-preview.is-sorting .task-card { -webkit-user-select: none; user-select: none; }
.board-preview .task-card.is-dragging { box-shadow: 0 10px 28px rgba(15, 23, 42, .25); }
.board-preview .task-card.is-drag-ghost { opacity: .45; }
@media (hover: none) and (pointer: coarse) {
  /* On touch screens a press on a card starts a move, not a text selection or the iOS callout. Text elsewhere stays selectable. */
  .board-preview .task-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.task-actions .task-move select { min-height: 36px; max-width: 100%; padding: 4px 8px; border-radius: 10px; font-size: .9rem; }
@media (hover: none) and (pointer: coarse) { .task-actions .task-move select { min-height: 44px; } }
/* ===== S36.9 B6: Filing Cabinet across the page ===== */
/* Wide screens: two records side by side; fields stay readable (no field wider than a comfortable line). */
@media (min-width: 1280px) {
  .filing-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filing-record { grid-template-columns: minmax(0, 1fr) 220px; }
}
.filing-fields { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.filing-fields > label input:not([type="checkbox"]):not([type="radio"]), .filing-fields > label select { max-width: 32rem; }
.filing-fields .filing-wide textarea, .filing-fields .filing-wide input { max-width: 60rem; }
@media (max-width: 640px) { .filing-fields { grid-template-columns: minmax(0, 1fr); } }
/* ===== S36.9 B7: the work panel (Work on this) ===== */
dialog.work-panel-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: var(--surface, #fff); color: var(--text); box-shadow: -18px 0 40px rgba(15, 23, 42, .25); overflow: hidden; }
dialog.work-panel-dialog::backdrop { background: rgba(15, 23, 42, .35); }
dialog.work-panel-dialog > [data-work-panel-body] { height: 100%; }
.work-sheet { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.work-sheet-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.work-sheet-back { display: none; }
.work-sheet-crumb { margin: 0; font-size: .82rem; color: var(--muted); }
.work-sheet-title { margin: 2px 0 6px; font-size: 1.25rem; overflow-wrap: anywhere; }
.work-sheet-title:focus { outline: none; }
.work-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.work-sheet-tabs { margin-top: 10px; flex-wrap: wrap; }
.work-sheet-body { flex: 1; overflow: auto; padding: 12px 18px; display: grid; gap: 12px; align-content: start; -webkit-overflow-scrolling: touch; }
.work-sheet-body > section { display: grid; gap: 12px; min-width: 0; }
.work-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.work-sheet-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.work-sheet-box h3 { margin: 0 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.work-sheet-proposals { background: var(--warning-soft, #fffbeb); border-color: #fde68a; }
.work-sheet-proposals .work-proposal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.work-sheet-proposals .work-proposal-form input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.work-sheet-add { display: grid; gap: 8px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.work-sheet-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.work-sheet-add textarea { width: 100%; }
.work-sheet-add .checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.work-sheet-add .checkbox-label input { width: auto; min-height: 0; margin: 0; flex: none; }
.work-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-muted, transparent); }
.work-sheet-foot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-sheet .work-entries { margin: 0; padding-left: 18px; }
.work-sheet .work-entries li { overflow-wrap: anywhere; }
.task-work-button { white-space: nowrap; }
@media (max-width: 720px) {
  dialog.work-panel-dialog { inset: 0; width: 100vw; box-shadow: none; }
  .work-sheet-back { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0 14px; margin: 0 0 6px; }
  .work-sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .work-sheet-foot { flex-direction: column; align-items: stretch; }
  .work-sheet-foot-actions { flex-direction: column; }
  /* The shared button rule sizes buttons from --button-h; the panel sets it rather than fighting that rule. */
  dialog.work-panel-dialog .work-sheet-foot-actions { --button-h: 46px; }
  dialog.work-panel-dialog .work-sheet-foot-actions > *, dialog.work-panel-dialog .work-sheet-back { min-height: 46px; justify-content: center; }
}
@media (hover: none) and (pointer: coarse) { .work-sheet { --button-h: 44px; } .work-sheet select, .work-sheet input:not([type="checkbox"]) { min-height: 44px; } }
/* ===== S36.9 B5: backlog preview ===== */
.backlog-preview-counts { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 8px; }
.backlog-preview-list { display: grid; gap: 10px; padding-left: 22px; }
.backlog-preview-list > li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; overflow-wrap: anywhere; }
.backlog-preview-list p { margin: 4px 0 0; }
.inline-pill.disposition-retain { background: var(--soft-blue, #eff6ff); }
.inline-pill.disposition-combine { background: #f5f3ff; }
.inline-pill.disposition-complete { background: #ecfdf5; }
.inline-pill.disposition-supersede { background: #f1f5f9; }
.inline-pill.disposition-clarify { background: #fffbeb; }
/* ===== S38.7: backlog review (sorted old cards, ticked rows, Apply and Undo) ===== */
.backlog-review-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 8px; }
.backlog-group { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
.backlog-group > summary { cursor: pointer; padding: 4px 0; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.backlog-group-meaning { margin: 2px 0 8px; }
.backlog-tick-all { margin: 0 0 8px; }
.backlog-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.backlog-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; align-items: start; border-top: 1px solid var(--line); padding: 8px 0 2px; overflow-wrap: anywhere; }
.backlog-row-tick { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.backlog-row-tick input { width: 20px; height: 20px; margin: 0; }
.backlog-row-body p { margin: 2px 0 0; }
.backlog-row-change { font-weight: 600; }
/* In the page flow above and below the list (never sticky), so it never covers a row while reading or ticking. */
.backlog-apply-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; padding: 10px 0; margin: 4px 0 8px; }
.backlog-apply-bar[data-backlog-apply-bar="bottom"] { border-top: 1px solid var(--line); margin: 8px 0 0; }
.backlog-run-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.inline-pill.backlog-pill-applied { background: #ecfdf5; }
.inline-pill.backlog-pill-refused { background: #fffbeb; }
.inline-pill.backlog-pill-restored { background: var(--soft-blue, #eff6ff); }
.backlog-preview-own > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.backlog-preview-own[open] > summary { margin-bottom: 8px; }
@media (max-width: 640px) {
  .backlog-row { grid-template-columns: 40px minmax(0, 1fr); }
  .backlog-row-tick { min-height: 44px; }
  .backlog-row-tick input { width: 24px; height: 24px; }
  .backlog-apply-bar { justify-content: stretch; }
  /* The shared button rule sizes buttons from --button-h; these panels set it rather than fighting that rule. */
  .backlog-review, .backlog-run { --button-h: 44px; }
  .backlog-run .form-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .backlog-apply-bar .button-primary, .backlog-tick-all, .backlog-run .button-secondary { width: 100%; justify-content: center; }
}


/* ===== S36.9 B8: To-Do > Subscriptions (Subscription Watch) ===== */
.todo-top-tabs { margin: 0 0 12px; max-width: 100%; }
.todo-top-tabs .nf-tab { min-height: 36px; display: inline-flex; align-items: center; }
.subscriptions-panel { min-width: 0; }
.subscriptions-note { margin: -4px 2px 14px; font-size: .88rem; max-width: 70ch; }
.subscription-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.subscription-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-solid), var(--bg) 20%); overflow-wrap: anywhere; }
.subscription-card:target, .subscription-card:has(.subscription-detail) { grid-column: 1 / -1; }
.subscription-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.subscription-name { margin: 0; font-size: 1.05rem; }
.subscription-status { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 800; }
.subscription-status.is-decision { background: color-mix(in srgb, var(--accent), transparent 82%); border-color: var(--accent); color: var(--text); }
.subscription-status.is-cancelling { background: color-mix(in srgb, #d97706, transparent 85%); border-color: #d97706; }
.subscription-status.is-cancelled, .subscription-status.is-stopped { color: var(--muted); }
.subscription-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 12px 0 8px; }
.subscription-facts > div { min-width: 0; }
.subscription-facts dt { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.subscription-facts dd { margin: 2px 0 0; font-weight: 700; }
.subscription-basis { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 1px solid var(--line); }
.subscription-basis.is-confirmed { border-color: color-mix(in srgb, #15803d, transparent 30%); color: #15803d; }
.subscription-basis.is-estimate { border-style: dashed; color: var(--muted); }
.subscription-change, .subscription-note { margin: 6px 0; font-size: .88rem; font-weight: 700; }
.subscription-change-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, #d97706, transparent 82%); font-size: .74rem; }
.subscription-source { margin: 8px 0; font-size: .84rem; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.subscription-action-form { margin: 0; }
.subscription-actions button, .subscription-actions .button-secondary { min-height: 40px; }
.subscription-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.subscription-detail h4 { margin: 0 0 8px; }
.subscription-billing { width: 100%; border-collapse: collapse; font-size: .88rem; }
.subscription-billing th, .subscription-billing td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.subscription-billing tr.is-price-change td { background: color-mix(in srgb, #d97706, transparent 92%); }
.subscription-billing-text { font-size: .8rem; }
.subscription-add, .subscription-history { margin-top: 16px; }
.subscription-add summary, .subscription-history summary, .subscription-changes summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.subscription-add-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; margin-top: 10px; align-items: end; }
.subscription-add-form label { margin: 0; min-width: 0; }
.subscription-add-form input, .subscription-add-form select { width: 100%; max-width: 100%; }
@media (max-width: 640px) {
  .subscription-card { padding: 12px; }
  .subscription-actions form, .subscription-actions .subscription-details-link { flex: 1 1 calc(50% - 8px); }
  .subscription-actions button, .subscription-actions .subscription-details-link { width: 100%; justify-content: center; text-align: center; }
  .subscription-billing thead { display: none; }
  .subscription-billing tr { display: grid; grid-template-columns: 1fr auto; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .subscription-billing td { border: 0; padding: 2px 4px; }
  .subscription-billing td:nth-child(2) { grid-column: 1 / -1; }
}
@media (hover: none) and (pointer: coarse) { .subscription-actions button, .todo-top-tabs .nf-tab { min-height: 44px; } }
/* ===== S36.9 B12: VFW Membership "On track for June 30?" ===== */
.membership-forecast { display: grid; gap: 12px; }
.membership-forecast-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.membership-forecast-head h2 { margin: 0; }
.membership-forecast-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; border: 1px solid var(--line); }
.membership-forecast-badge.is-ahead { color: var(--success); border-color: currentColor; }
.membership-forecast-badge.is-on_track { color: var(--accent); border-color: currentColor; }
.membership-forecast-badge.is-at_risk { color: var(--warning); border-color: currentColor; }
.membership-forecast-badge.is-insufficient { color: var(--muted); }
.membership-forecast-asof { margin: 0; }
.membership-forecast-focus { margin: 0; line-height: 1.5; }
.membership-forecast-focus .muted { display: block; font-size: .88rem; margin-top: 4px; }
.membership-forecast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.membership-forecast-grid > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.membership-forecast-grid dt { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.membership-forecast-grid dd { margin: 2px 0; font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }
.membership-forecast-grid .muted { font-size: .85rem; }
.membership-forecast-chart { margin: 0; }
/* v0.37.1.12: the chart fills the panel's width at a fixed height; labels are HTML; hover or tap shows the values. */
.membership-forecast-plot { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 280px 22px; padding: 12px 12px 0 0; }
.membership-forecast-yaxis { position: relative; grid-column: 1; grid-row: 1; }
.membership-forecast-yaxis span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.membership-forecast-area { position: relative; grid-column: 2; grid-row: 1; touch-action: pan-y; cursor: crosshair; }
.membership-forecast-xaxis { position: relative; grid-column: 2; grid-row: 2; }
.membership-forecast-xaxis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: .78rem; color: var(--muted); }
.membership-forecast-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.membership-forecast-chart svg * { vector-effect: non-scaling-stroke; }
.membership-forecast-chart .grid { stroke: var(--line); stroke-width: 1; }
.membership-forecast-chart .year { fill: none; stroke-width: 2; }
.membership-forecast-chart .year.is-current { stroke: var(--accent); stroke-width: 3; }
.membership-forecast-chart .year.is-prior { stroke: var(--muted); stroke-dasharray: 4 3; opacity: .8; }
.membership-forecast-chart .year.is-older { stroke-dasharray: 1.5 3; opacity: .55; }
.membership-forecast-chart .year.is-hot { stroke-width: 4; opacity: 1; }
.membership-forecast-chart .target { stroke: var(--success); stroke-width: 1.5; stroke-dasharray: 6 4; }
.membership-forecast-chart .range { fill: color-mix(in srgb, var(--accent), transparent 70%); stroke: var(--accent); }
.membership-forecast-chart .projection { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.membership-forecast-dot { position: absolute; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); pointer-events: none; }
.membership-forecast-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted); pointer-events: none; }
.membership-forecast-tip { position: absolute; top: 8px; z-index: 2; min-width: 190px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: .85rem; pointer-events: none; }
.membership-forecast-tip strong { display: block; margin-bottom: 4px; }
.membership-forecast-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.membership-forecast-tip .tip-row.is-hot { font-weight: 700; }
.membership-forecast-tip .tip-row .muted { color: var(--muted); }
@media (max-width: 640px) { .membership-forecast-plot { grid-template-columns: 48px 1fr; grid-template-rows: 220px 22px; } .membership-forecast-xaxis span:nth-child(even) { display: none; } }
.membership-forecast-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .85rem; color: var(--muted); margin-top: 4px; }
.membership-forecast-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.membership-forecast-legend .key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; }
.membership-forecast-legend .key.is-prior { border-top: 2px dashed var(--muted); }
.membership-forecast-legend .key.is-older { border-top-style: dotted; opacity: .7; }
.membership-forecast-legend .key.is-target { border-top: 2px dashed var(--success); }
.membership-forecast-legend .key.is-range { height: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent), transparent 70%); }
.membership-forecast-limits { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.membership-forecast .is-unconfirmed { color: var(--danger); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.membership-forecast-standing { display: grid; gap: 10px; padding-top: 4px; }
.membership-forecast-standing-head { display: grid; gap: 8px; justify-items: start; }
.membership-forecast-standing-head h3 { margin: 0; font-size: 1.05rem; }
.membership-forecast-settings > summary { list-style: none; cursor: pointer; width: max-content; }
.membership-forecast-settings { width: 100%; }
.membership-forecast-settings > summary::-webkit-details-marker { display: none; }
.membership-forecast-settings-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.membership-forecast-settings-form p { grid-column: 1 / -1; margin: 0; }
.membership-forecast-settings-form label { display: grid; gap: 4px; font-size: .9rem; }
.membership-forecast-standing-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.membership-forecast-details summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.membership-forecast-coverage { width: 100%; border-collapse: collapse; font-size: .9rem; }
.membership-forecast-coverage th, .membership-forecast-coverage td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.membership-forecast-national { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 720px) { .membership-forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .membership-forecast-coverage { display: block; overflow-x: auto; } }
/* S37.2 P5: the PayPal state pills on Admin > Plans and billing. */
.plans-paypal-pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
/* S37.2 P5: a connection's status pill stays on one line beside the heading. */
.service-hero [data-service-pill]{white-space:nowrap;flex:0 0 auto}
.plans-paypal-pills .inline-pill.is-success{background:color-mix(in srgb,var(--success) 18%,transparent);border-color:color-mix(in srgb,var(--success),transparent 50%);color:var(--success)}

/* v0.38.7.3: AI Intake shows what to handle; settings and history are their own pages (Todd, 2026-10-14). */
.ai-intake-hero h1 { margin-bottom: .2rem; }
/* The title column takes the width, so the Settings gear sits at the right edge (Todd: the gear never moves). */
.ai-intake-hero > div:first-child { flex: 1 1 auto; min-width: 0; width: 100%; }
.ai-intake-counts { margin: .1rem 0 .5rem; font-size: .95rem; }
.ai-intake-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: .35rem 0 .25rem; }
.ai-intake-nav a { font-weight: 600; text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.ai-intake-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.ai-intake-nav .ai-intake-gear { margin-left: auto; }
.ai-intake-about { margin-top: .35rem; font-size: .88rem; }
.ai-intake-about summary { cursor: pointer; color: var(--muted); }
.ai-all-clear { text-align: center; padding: 1.4rem 1rem; }
.ai-all-clear h2 { margin: 0 0 .35rem; }
/* Notices to see: one line each, Seen on the right. */
.ai-notice-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.ai-notice-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.ai-notice-main { display: grid; gap: .15rem; min-width: 0; }
.ai-notice-main .muted { overflow-wrap: anywhere; }
/* Compact decision cards: facts on one wrapped line, tighter spacing, the explanation clipped to three lines. */
.ai-intake-page .ai-proposal { gap: .3rem; padding: .65rem .8rem; }
.ai-intake-page .ai-proposal-facts { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: 0; font-size: .86rem; }
.ai-intake-page .ai-proposal-facts dt { font-weight: 700; }
.ai-intake-page .ai-proposal-facts dt::after { content: ":"; }
.ai-intake-page .ai-proposal-facts dd { margin: 0 .4rem 0 .25rem; }
.ai-intake-page .ai-proposal-change { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ai-intake-page .ai-proposal .button-row { margin-top: .15rem; }
/* Pages at the foot of long lists: 10, 25, or 50 rows, Previous and Next. */
.ai-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .6rem 0 .2rem; font-size: .88rem; }
.ai-pager .ai-pager-pages { margin-left: auto; display: inline-flex; gap: .6rem; align-items: center; }
@media (max-width: 600px) {
  .ai-notice-row { flex-direction: column; align-items: stretch; }
  .ai-pager .ai-pager-pages { margin-left: 0; }
}

/* ==== VFW Stats widget (v0.35.5.8): the one place its rules live. ===================================================
   Six earlier passes left about 130 rules in eight places that fought each other, and the fifth card (National trend)
   was switched off below 440px of height. Rules here: all five cards always show; the widget body is the container;
   WIDTH picks the arrangement, HEIGHT picks how much each card says; when even the smallest arrangement does not fit,
   the body scrolls instead of dropping a card. Do not add VFW widget rules anywhere else in this file. */
.vfw-stats-widget { --widget-accent:#b91c1c; --vfw-chart-accent:#be123c; --vfw-chart-accent-bright:#fb7185; --vfw-needed-accent:#b45309; --vfw-movement-accent:#15803d; --vfw-chart-surface:rgba(255,255,255,.5); }
:root:is([data-theme="dark"],[data-theme="night"]) .vfw-stats-widget { --vfw-chart-accent:#fb7185; --vfw-chart-accent-bright:#fda4af; --vfw-needed-accent:#fbbf24; --vfw-movement-accent:#4ade80; --vfw-chart-surface:rgba(5,15,29,.26); }
.vfw-stats-widget,
.vfw-stats-widget .grid-stack-item-content { overflow:hidden; }
.vfw-stats-widget .widget-body { flex:1 1 auto; min-height:0; padding:10px; overflow:auto; container-type:size; container-name:vfw-body; }

/* Arrangement, default: two columns, the trend across both (a body 481 to 639px wide). */
.vfw-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(84px,1fr); gap:10px; width:100%; min-height:100%; }
.vfw-metric-grid .vfw-trend-card { grid-column:1 / -1; }

/* Cards. */
.vfw-metric-grid .vfw-metric-card { --vfw-card-accent:var(--vfw-chart-accent); display:flex; flex-direction:column; min-width:0; min-height:0; padding:12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vfw-card-accent),var(--line) 72%); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--vfw-card-accent),var(--panel-solid) 96%),color-mix(in srgb,var(--panel-solid),var(--bg) 12%)); }
.vfw-metric-grid .vfw-goal-card { --vfw-card-accent:var(--vfw-needed-accent); }
.vfw-metric-grid .vfw-movement-card { --vfw-card-accent:var(--vfw-movement-accent); }
.vfw-metric-grid .vfw-trend-card { --vfw-card-accent:var(--success); }
.vfw-metric-grid .vfw-movement-card.is-negative,
.vfw-metric-grid .vfw-trend-card.is-negative { --vfw-card-accent:var(--danger); }
.vfw-card-label { color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.05em; line-height:1.15; text-align:center; text-transform:uppercase; }
.vfw-card-main { display:flex; flex:1 1 auto; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:0; width:100%; margin-top:8px; padding:10px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vfw-card-accent),var(--line) 78%); border-radius:12px; background:var(--vfw-chart-surface); text-align:center; }
.vfw-metric-copy { display:grid; justify-items:center; gap:2px; min-width:0; }
.vfw-metric-copy > strong { color:var(--text); font-size:clamp(1.3rem,3.2cqw,2rem); line-height:1; }
.vfw-metric-copy small,
.vfw-goal-visual > small,
.vfw-movement-visual > small { color:var(--muted); font-size:.72rem; font-weight:700; }
.vfw-metric-card em { color:var(--muted); font-size:.7rem; font-style:normal; font-weight:700; overflow-wrap:anywhere; }
.vfw-bar-caption { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:2px 8px; min-width:0; color:var(--muted); font-size:.7rem; font-weight:700; }
.vfw-bar-caption strong { color:var(--vfw-card-accent); font-size:.95rem; }
.vfw-bar-caption small { font-size:.66rem; text-transform:uppercase; }
.vfw-needed-callout { display:grid; justify-items:center; gap:3px; min-width:0; }
.vfw-needed-callout strong { color:var(--vfw-card-accent); font-size:clamp(1.3rem,3.2cqw,2rem); line-height:1; }
.vfw-needed-callout span { color:var(--muted); font-size:.72rem; font-weight:800; }
.vfw-movement-callout { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; color:var(--vfw-card-accent); }
.vfw-movement-callout > span { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--vfw-card-accent),transparent 78%); font-weight:900; }
.vfw-movement-callout strong { font-size:clamp(1.3rem,3.2cqw,2rem); line-height:1; letter-spacing:-.03em; white-space:nowrap; }
.vfw-trend-callout { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:2px 8px; color:var(--vfw-card-accent); }
.vfw-trend-callout strong { font-size:clamp(1.2rem,2.8cqw,1.6rem); line-height:1; }
.vfw-trend-callout small { color:var(--muted); font-size:.72rem; font-weight:700; }

/* Charts. The bar's fill is a plain colour so it is visible on every theme. */
.vfw-linear-chart { position:relative; flex:none; width:100%; height:12px; border:1px solid color-mix(in srgb,var(--vfw-card-accent),var(--line) 62%); border-radius:999px; background:color-mix(in srgb,var(--vfw-card-accent),transparent 84%); overflow:hidden; }
.vfw-linear-chart span { display:block; width:max(12px,calc(var(--chart-value) * 1%)); max-width:100%; height:100%; border-radius:inherit; background:var(--vfw-card-accent); }
.vfw-movement-line { flex:0 1 36px; width:100%; min-height:0; height:36px; overflow:visible; }
.vfw-movement-line polyline { fill:none; stroke:var(--vfw-card-accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.vfw-movement-line circle { fill:var(--panel-solid); stroke:var(--vfw-card-accent); stroke-width:4; }
.vfw-movement-baseline { stroke:color-mix(in srgb,var(--vfw-card-accent),transparent 68%); stroke-width:2; stroke-dasharray:4 5; }
.vfw-movement-area { fill:color-mix(in srgb,var(--vfw-card-accent),transparent 83%); }
.vfw-trend-line { display:block; flex:1 1 0; width:100%; min-height:22px; max-height:120px; color:var(--vfw-card-accent); }

/* WIDTH: the arrangement. */
@container vfw-body (max-width: 480px) {
  .vfw-metric-grid { grid-template-columns:1fr; grid-auto-rows:minmax(40px,auto); gap:6px; }
  .vfw-metric-grid .vfw-metric-card { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; }
  .vfw-card-label { text-align:left; }
  .vfw-card-main { flex:0 1 auto; width:auto; margin:0; padding:0; border:0; background:transparent; align-items:flex-end; text-align:right; }
  .vfw-linear-chart, .vfw-movement-line, .vfw-trend-line, .vfw-metric-copy small, .vfw-bar-caption, .vfw-needed-callout span, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-trend-callout small, .vfw-metric-card em { display:none; }
  .vfw-metric-copy > strong, .vfw-needed-callout strong, .vfw-movement-callout strong, .vfw-trend-callout strong { font-size:1.15rem; }
}
@container vfw-body (min-width: 640px) and (max-width: 899px) {
  .vfw-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vfw-metric-grid .vfw-trend-card { grid-column:span 2; }
}
@container vfw-body (min-width: 640px) and (max-width: 899px) and (max-height: 259px) {
  .vfw-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:8px; }
  .vfw-metric-grid .vfw-trend-card { grid-column:auto; }
  .vfw-metric-grid .vfw-metric-card { padding:8px; }
  .vfw-card-main { padding:8px 6px; gap:6px; }
  .vfw-metric-copy small, .vfw-needed-callout span, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-movement-line, .vfw-trend-callout small, .vfw-bar-caption em, .vfw-metric-card em { display:none; }
}
@container vfw-body (min-width: 900px) {
  .vfw-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr); grid-template-rows:minmax(0,1fr); height:100%; }
  .vfw-metric-grid .vfw-trend-card { grid-column:auto; }
}
@container vfw-body (min-width: 640px) and (max-height: 439px) {
  /* five across: smaller numbers, and the trend card gives its room to the line */
  .vfw-metric-copy > strong, .vfw-needed-callout strong, .vfw-movement-callout strong { font-size:clamp(1.15rem,2.2cqw,1.7rem); }
  .vfw-trend-callout strong { font-size:clamp(1.1rem,2cqw,1.5rem); }
  .vfw-trend-card em { display:none; }
}
@container vfw-body (min-width: 900px) and (min-height: 440px) {
  .vfw-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) minmax(130px,.7fr); }
  .vfw-metric-grid .vfw-trend-card { grid-column:1 / -1; }
}

/* HEIGHT: how much each card says. Below 180px of body the bars, the small charts, and the captions go; the numbers stay. */
@container vfw-body (min-width: 481px) and (max-height: 179px) {
  .vfw-metric-grid { gap:8px; }
  .vfw-metric-grid .vfw-metric-card { padding:8px; }
  .vfw-card-label { font-size:.64rem; }
  .vfw-card-main { gap:4px; margin-top:4px; padding:6px 8px; }
  .vfw-linear-chart, .vfw-movement-line, .vfw-bar-caption em, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-needed-callout span, .vfw-trend-callout small, .vfw-metric-card em { display:none; }
  .vfw-metric-copy > strong, .vfw-needed-callout strong, .vfw-movement-callout strong, .vfw-trend-callout strong { font-size:clamp(1.05rem,2.4cqw,1.45rem); }
}
@container vfw-body (min-width: 481px) and (max-height: 119px) {
  .vfw-card-main { margin-top:2px; padding:0; border:0; background:transparent; }
  .vfw-metric-copy small, .vfw-bar-caption, .vfw-trend-line { display:none; }
}
/* Two and three column arrangements stack rows, so each card is shorter than the body: thin them by the same steps. */
@container vfw-body (min-width: 640px) and (max-width: 899px) and (min-height: 260px) and (max-height: 439px) {
  .vfw-metric-copy small, .vfw-needed-callout span, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-bar-caption em, .vfw-metric-card em, .vfw-trend-callout small { display:none; }
}
@container vfw-body (min-width: 481px) and (max-width: 639px) and (min-height: 420px) and (max-height: 599px) {
  .vfw-metric-copy small, .vfw-needed-callout span, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-bar-caption em, .vfw-metric-card em, .vfw-trend-callout small { display:none; }
}
@container vfw-body (min-width: 481px) and (max-width: 639px) and (max-height: 419px) {
  .vfw-metric-grid { grid-auto-rows:minmax(78px,1fr); gap:8px; }
  .vfw-metric-grid .vfw-metric-card { padding:8px; }
  .vfw-card-label { font-size:.64rem; }
  .vfw-card-main { gap:4px; margin-top:4px; padding:6px 8px; }
  .vfw-linear-chart, .vfw-movement-line, .vfw-metric-copy small, .vfw-needed-callout span, .vfw-goal-visual > small, .vfw-movement-visual > small, .vfw-bar-caption small, .vfw-bar-caption em, .vfw-metric-card em, .vfw-trend-callout small { display:none; }
  .vfw-metric-copy > strong, .vfw-needed-callout strong, .vfw-movement-callout strong, .vfw-trend-callout strong { font-size:1.2rem; }
  .vfw-card-main.vfw-bar-layout { flex-direction:row; align-items:baseline; gap:10px; }
  .vfw-trend-visual { flex-direction:row; align-items:center; gap:12px; }
  .vfw-trend-line { min-height:20px; height:26px; flex:1 1 0; }
}
@media (prefers-reduced-motion: no-preference) { .vfw-linear-chart span { transition:width .3s ease; } }
/* v0.36.1.0 QA: the stored message text on AI Intake, text only */
.ai-message-body { margin-top: .35rem; font-size: .85rem; }
.ai-message-body summary { cursor: pointer; color: var(--muted, #667085); }
.ai-message-text { white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto; margin: .35rem 0 0; padding: .5rem .65rem; background: rgba(0,0,0,.03); border-radius: 6px; font: inherit; font-size: .85rem; }
/* v0.36.1.1: the mail window behind the header envelope */
.ai-mail-wrap { display: inline-flex; }
/* v0.36.1.1: the mail window. Fixed to the screen, anchored by script under (or above) the envelope; a column whose
   header and footer stay put while only the middle scrolls, so the actions are always reachable. */
.ai-mail-window { isolation: isolate; background: var(--panel-solid); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow-soft); color: var(--text); position: fixed; right: 16px; top: 72px; left: auto; bottom: auto; z-index: 1200; width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 760px); display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left; }
.ai-mail-window[hidden] { display: none !important; }
.ai-mail-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ai-mail-head h3 { margin: 0; flex: 1; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ai-mail-subhead { padding: 8px 12px 0; font-size: .95rem; }
.ai-mail-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ai-mail-tabs [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 10px 8px; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.ai-mail-tabs [role="tab"].is-active { color: var(--text); border-bottom-color: var(--accent); }
.ai-mail-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-mail-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; overscroll-behavior: contain; }
.ai-mail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: 0 0 auto; background: var(--panel-solid); }
.ai-mail-foot .ai-mail-intake-link { margin-left: auto; font-size: .85rem; }
.ai-mail-status { margin: 0 0 8px; padding: 6px 8px; border-radius: 6px; font-size: .9rem; }
.ai-mail-status.is-ok { background: color-mix(in srgb, var(--panel-solid), #2e7d32 14%); }
.ai-mail-status.is-error { background: color-mix(in srgb, var(--panel-solid), #c62828 14%); }
.ai-mail-section { margin-top: 10px; }
.ai-mail-section:first-child { margin-top: 0; }
.ai-mail-section h4, .ai-mail-section summary { margin: 0 0 6px; font-weight: 600; cursor: pointer; }
.ai-mail-list, .ai-mail-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ai-mail-item-button { display: grid; gap: 2px; width: 100%; text-align: left; background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: inherit; font: inherit; cursor: pointer; }
.ai-mail-item-button:hover, .ai-mail-item-button:focus-visible { border-color: var(--accent); }
.ai-mail-item-button .muted { font-size: .85rem; }
.ai-mail-row { border-top: 1px solid var(--line); padding-top: 6px; }
.ai-mail-row p { margin: 2px 0; font-size: .85rem; }
.ai-mail-detail > p { margin: 0 0 8px; }
.ai-mail-detail .ai-proposal-facts { margin: 8px 0; }
.ai-mail-detail .button-row { margin-top: 8px; }
.ai-mail-detail h4 { margin: 0 0 6px; }
.ai-mail-option-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-mail-option { background: color-mix(in srgb, var(--panel-solid), var(--bg) 14%); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: inherit; font: inherit; cursor: pointer; }
.ai-mail-option:hover, .ai-mail-option:focus-visible { border-color: var(--accent); }
.ai-mail-option-details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ai-mail-option-details > summary { font-weight: 600; cursor: pointer; }
.ai-mail-rule-pick { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.ai-mail-seg { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: inherit; font: inherit; cursor: pointer; }
.ai-mail-seg.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-mail-rule-value { margin: 4px 0 6px; font-size: .9rem; }
.ai-mail-rule-preview { margin: 6px 0 0; }
.ai-mail-source-meta { margin: 0 0 8px; }
@media (max-width: 760px) {
  .ai-mail-window { position: fixed; left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 12px; }
  .ai-mail-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* v0.36.1.1 header controls: one shape for every control in the app bar and the hero's command row (height, radius,
   border, icon size, spacing, focus ring); text controls vary in width, icon controls are square. The count badge is
   the same badge in the same corner on every control and never changes the control's height. */
.app-bar { --hc-h: 38px; }
.home-focus-command { --hc-h: 36px; }
.main-nav .header-control, .nav-actions .header-control, .home-focus-pages .header-control, .home-focus-actions .header-control, .home-focus .home-focus-collapse.header-control, .home-focus.is-collapsed .home-focus-collapse.header-control {
  box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  height: var(--hc-h, 38px); min-height: var(--hc-h, 38px); min-width: var(--hc-h, 38px); width: auto; margin: 0; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--line) 70%); border-radius: 999px; background: var(--panel-solid); color: var(--text);
  font: inherit; font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none; opacity: 1;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.main-nav .header-control:hover, .nav-actions .header-control:hover, .home-focus-pages .header-control:hover, .home-focus-actions .header-control:hover, .home-focus .home-focus-collapse.header-control:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent), var(--panel-solid) 88%); transform: none; }
.header-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.main-nav .header-control.active, .home-focus-pages .header-control.is-current, .main-nav .header-control.active:hover, .home-focus-pages .header-control.is-current:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.header-control > span[aria-hidden="true"], .header-control .home-focus-collapse-icon { font-size: 1rem; line-height: 1; }
.nav-actions .header-control.icon-button, .nav-actions .header-control.notification-bell, .nav-actions .header-control.global-settings-gear, .home-focus .home-focus-collapse.header-control { width: var(--hc-h, 38px); min-width: var(--hc-h, 38px); padding: 0; }
.home-focus .home-focus-collapse.header-control, .home-focus.is-collapsed .home-focus-collapse.header-control { inset: auto; transform: none; }
.nav-actions .header-weather.header-control { min-width: 84px; padding: 0 10px; gap: 7px; font-weight: inherit; cursor: default; }
.nav-actions .header-weather.header-control:hover { background: var(--panel-solid); border-color: color-mix(in srgb, var(--accent), var(--line) 70%); color: var(--text); }
.nav-actions .header-weather.header-control.is-unavailable, .nav-actions .header-weather.header-control.is-unavailable:hover { color: var(--muted); }
.header-control .count-badge { position: absolute; top: -7px; right: -7px; margin: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--panel-solid); z-index: 1; }
.ai-attention-pill .count-badge.alert-badge::before { content: none; }
/* v0.36.5.3: the envelope is drawn (the text glyph varied by font) and its count sits outside the icon, smaller, so 1, 2, or
   3 characters (99+) never cover the envelope; the icon steps down and left a little while a count shows. */
.ai-attention-pill .ai-attention-icon { display: block; transition: transform .12s ease; }
.ai-attention-pill.has-items .ai-attention-icon { transform: translate(-2px, 2px); }
.ai-attention-pill .count-badge { top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; font-size: .62rem; letter-spacing: -.01em; }
.ai-attention-pill .count-badge[data-digits="3"] { right: -14px; padding: 0 3px; }
.header-menu { position: relative; display: inline-flex; flex: 0 0 auto; }
.header-menu > summary { list-style: none; }
.header-menu > summary::-webkit-details-marker { display: none; }
.header-menu-caret { font-size: .7rem !important; }
.header-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.header-menu-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 320; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow: auto; display: grid; gap: 4px; padding: 8px; background: var(--panel-solid); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-soft); text-align: left; }
.main-nav .header-menu-list a, .home-focus-pages .header-menu-list a { display: block; margin: 0; min-height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: none; }
.main-nav .header-menu-list a:hover, .home-focus-pages .header-menu-list a:hover, .main-nav .header-menu-list a:focus-visible, .home-focus-pages .header-menu-list a:focus-visible { background: color-mix(in srgb, var(--accent), var(--panel) 91%); border-color: color-mix(in srgb, var(--accent), var(--line) 70%); color: var(--text); }
.main-nav .header-menu-list a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.header-menu-list.is-flipped { left: auto; right: 0; }
.header-menu-list .header-menu-manage { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.home-focus-pages { overflow: visible; flex-wrap: wrap; }
.home-focus.has-open-menu { overflow: visible; z-index: 700; }
.home-focus.has-open-menu .header-menu-list { z-index: 710; }
.home-focus-actions { flex-wrap: nowrap; }
.home-focus-actions > .nav-actions, .home-focus-actions > .home-focus-collapse { flex: 0 0 auto; }
.home-focus-command { --home-focus-actions-gap: 8px; }
.account-menu-kbd { justify-self: end; font: inherit; font-size: .66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.account-menu-weather { display: none; cursor: default; }
.account-menu-weather:hover { background: transparent; border-color: transparent; }
.account-menu-weather.is-unavailable { color: var(--muted); }
@media (max-width: 760px) {
  .nav-actions .header-weather.header-control { display: none; }
  .account-menu-weather { display: grid; }
  .app-bar { --hc-h: 40px; }
  .home-focus-command { --hc-h: 40px; }
  .home-focus-command-left .home-switcher-toggle { height: 40px; }
}/* v0.36.1.1 phones: the bell and utility menus hang from the right edge of the whole actions row (the "..." control is
   no longer the last control there), so a 268px menu fits a 390px screen instead of running past its right edge. */
@media (max-width: 760px) {
  .nav-actions { position: relative; }
  .nav-actions .account-wrap, .nav-actions .notification-wrap { position: static; }
  .nav-actions .account-menu, .nav-actions .notification-dropdown { left: auto; right: 0; max-width: calc(100vw - 24px); }
}

/* v0.36.2.0: a suggested rule in the mail window, offered after repeated "not useful"; never saved without the preview and a click. */
.ai-mail-suggestion { margin: 0 0 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 60%); border-radius: 8px; background: color-mix(in srgb, var(--accent), var(--panel-solid) 92%); }
.ai-mail-suggestion p { margin: 0 0 6px; }

/* v0.37.1.12: the widget's card list (top recruiters) and its card choice in settings. */
.vfw-card-list { margin: 0; padding-left: 18px; text-align: left; font-size: .85rem; line-height: 1.5; }
.vfw-cards-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.vfw-cards-form legend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 700; color: var(--text); }
.vfw-cards-form legend .muted { font-weight: 600; }
.widget-menu-settings-form.vfw-cards-form label.vfw-card-choice { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: start; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: .85rem; font-weight: 600; text-align: left; cursor: pointer; }
.widget-menu-settings-form.vfw-cards-form label.vfw-card-choice:hover { background: color-mix(in srgb, var(--accent), transparent 90%); }
.widget-menu-settings-form.vfw-cards-form label.vfw-card-choice input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.vfw-card-choice span { display: grid; gap: 1px; min-width: 0; }
.vfw-card-choice small { color: var(--muted); font-size: .74rem; font-weight: 500; line-height: 1.3; }
.vfw-card-choice:has(input:checked) { background: color-mix(in srgb, var(--accent), transparent 86%); }

/* v0.37.1.14: Admin > Accounts > VFW access. */
.vfw-access-panel h3 { margin: 18px 0 8px; font-size: 1rem; }
.vfw-access-account { margin-top: 18px; }
.vfw-access-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
.vfw-access-facts div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.vfw-access-facts dt { font-size: .74rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.vfw-access-facts dd { margin: 2px 0 0; }

/* v0.37.1.14: the info icon on every stat (tcc_stat_info): hover, or tap/focus on a phone, shows the explanation. */
.stat-info { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 4px; cursor: help; outline: none; text-transform: none; letter-spacing: 0; }
.stat-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 4px; font: 700 10px/1 Georgia, serif; font-style: italic; opacity: .7; }
.stat-info:hover .stat-info-icon, .stat-info:focus .stat-info-icon { opacity: 1; }
/* v0.37.1.16: the text stays hidden in the icon; app.js shows it in .stat-info-pop on the page body (solid, above every panel). */
.stat-info-text { display: none !important; }
.stat-info-pop { position: fixed; z-index: 2000; top: 0; left: 0; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-solid, #ffffff); color: var(--text); opacity: 1; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); font-size: .8rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; pointer-events: none; }
.stat-info-pop[hidden] { display: none; }
.membership-forecast-rating { display: inline-flex; align-items: center; gap: 2px; }

/* v0.37.1.15: the VFW page (the owner's facelift): the department and recruiters side by side, the chart full width,
   smaller boxes below; the OMS window's settings open from a gear on its right. */
.vfw-page-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.vfw-page-top > .panel, .vfw-page-bottom > .panel { margin: 0; }
.vfw-page-top + .membership-forecast { margin-top: 16px; }
.vfw-page-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .vfw-page-top { grid-template-columns: minmax(0, 1fr); } }
.vfw-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.vfw-box-head h2 { margin: 0; }
.vfw-report-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }
.vfw-report-row .membership-department-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.vfw-report-row .membership-department-form select { max-width: 200px; }
.vfw-asof { margin: 0; font-size: .88rem; }
.membership-page .membership-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px; }
.membership-page .membership-figures dd { font-size: 1.35em; }
@media (max-width: 640px) { .membership-page .membership-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vfw-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.vfw-split-part { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.vfw-split-part.is-find { border-color: color-mix(in srgb, var(--accent), transparent 45%); background: color-mix(in srgb, var(--accent), transparent 93%); }
.vfw-split-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vfw-split-part > strong { font-size: 1.5rem; line-height: 1.2; }
.vfw-split-part > .muted { margin: 0; padding: 0; font-size: .86rem; line-height: 1.35; }
.vfw-split-verdict { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .vfw-split { grid-template-columns: minmax(0, 1fr); } }
.vfw-split-done { margin: 0 0 12px; }
.vfw-changes { display: grid; gap: 2px; margin: 0; font-size: .88rem; }
.vfw-small { font-size: .85rem; }
.vfw-recruiters-box .membership-recruiters { margin: 10px 0 8px; }
.vfw-recruiters-box .membership-recruiters li { margin: 0 0 8px; }
.vfw-recruiter-name small { display: block; }
.vfw-recruiter-count { float: right; margin-left: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vfw-window { position: relative; }
.vfw-window-settings > summary { list-style: none; }
.vfw-window-settings > summary::-webkit-details-marker { display: none; }
.vfw-window-settings > summary.vfw-gear { position: absolute; top: 16px; right: 16px; }
.vfw-window-settings[open] > summary.vfw-gear { border-color: var(--accent); color: var(--accent); }
.vfw-window > h2:first-child { max-width: calc(100% - 52px); }
.vfw-page-bottom details:not(.vfw-window-settings) > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.vfw-window-settings .membership-forecast-settings-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; margin: 10px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.vfw-window-settings .membership-forecast-settings-form input { width: 100%; min-width: 0; box-sizing: border-box; } /* v0.37.1.16: the date box fits its column */
.vfw-window-settings .membership-forecast-settings-form > p { grid-column: 1 / -1; margin: 0; }
.vfw-window-settings .membership-forecast-settings-form label { display: grid; gap: 4px; font-size: .82rem; }
.vfw-mini-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.vfw-mini-figures > div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.vfw-mini-figures dt { font-size: .74rem; color: var(--muted); }
.vfw-mini-figures dd { margin: 0; font-size: 1.1rem; font-weight: 700; }
.vfw-window-line { margin: 0 0 8px; }
.vfw-national-line { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.vfw-national-line p { margin: 0; }
.vfw-page-bottom .membership-breakdown caption, .vfw-page-bottom .membership-forecast-coverage caption { text-align: left; font-weight: 700; margin: 10px 0 4px; }