/* AgentSee stylesheet. One file, hand-written, no build step.
   Sections: tokens, fonts, reset, typography, shell, components (one block
   per partial), pages, auth, public site, utilities, print. */

/* ---------------------------------------------------------------------------
   1. Tokens (PRD §1). Light on :root, dark on .dark.
   --------------------------------------------------------------------------- */
:root {
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --background: oklch(0.975 0.004 155);
  --foreground: oklch(0.19 0.012 165);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.012 165);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.012 165);
  --primary: oklch(0.57 0.17 150);
  --primary-foreground: oklch(0.99 0.003 155);
  --secondary: oklch(0.94 0.008 155);
  --secondary-foreground: oklch(0.24 0.015 165);
  --muted: oklch(0.94 0.008 155);
  --muted-foreground: oklch(0.48 0.018 160);
  --accent: oklch(0.92 0.018 150);
  --accent-foreground: oklch(0.2 0.018 160);
  --destructive: oklch(0.66 0.2 25);
  --destructive-foreground: oklch(0.98 0.005 25);
  --warning: oklch(0.67 0.15 72);
  --warning-foreground: oklch(0.99 0.005 80);
  --info: oklch(0.62 0.14 235);
  --info-foreground: oklch(0.99 0.004 235);
  --border: oklch(0.86 0.012 160);
  /* Chart series, validated for CVD separation and 3:1 on the card surface (dataviz validator, 25 Sep 2026). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --input: oklch(0.82 0.014 160);
  --ring: oklch(0.57 0.17 150);
  --sidebar: oklch(0.95 0.008 155);
  --sidebar-foreground: oklch(0.22 0.014 165);
  --sidebar-primary: oklch(0.57 0.17 150);
  --sidebar-primary-foreground: oklch(0.99 0.003 155);
  --sidebar-accent: oklch(0.89 0.018 150);
  --sidebar-accent-foreground: oklch(0.18 0.015 165);
  --sidebar-border: oklch(0.83 0.012 160);
  --chart-1: oklch(0.78 0.19 150);
  --chart-2: oklch(0.7 0.16 220);
  --chart-3: oklch(0.74 0.15 70);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --ok-wash: oklch(0.57 0.17 150 / 0.12);
  --warning-wash: oklch(0.67 0.15 72 / 0.14);
  --danger-wash: oklch(0.66 0.2 25 / 0.12);
  --info-wash: oklch(0.62 0.14 235 / 0.12);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 16px 48px oklch(0 0 0 / 0.18);
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --content-max: 1500px;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  color-scheme: light;
}

.dark {
  --background: oklch(0.145 0.008 165);
  --foreground: oklch(0.95 0.006 155);
  --card: oklch(0.178 0.009 165);
  --card-foreground: oklch(0.95 0.006 155);
  --popover: oklch(0.19 0.009 165);
  --popover-foreground: oklch(0.95 0.006 155);
  --primary: oklch(0.78 0.19 150);
  --primary-foreground: oklch(0.14 0.025 155);
  --secondary: oklch(0.215 0.01 165);
  --secondary-foreground: oklch(0.92 0.006 155);
  --muted: oklch(0.215 0.01 165);
  --muted-foreground: oklch(0.64 0.018 160);
  --accent: oklch(0.235 0.016 160);
  --accent-foreground: oklch(0.96 0.006 155);
  --destructive: oklch(0.66 0.2 25);
  --destructive-foreground: oklch(0.98 0.005 25);
  --warning: oklch(0.78 0.15 80);
  --warning-foreground: oklch(0.16 0.03 80);
  --info: oklch(0.72 0.13 235);
  --info-foreground: oklch(0.15 0.02 235);
  --border: oklch(0.29 0.012 165);
  --series-1: #3987e5;
  --series-2: #d95926;
  --input: oklch(0.32 0.013 165);
  --ring: oklch(0.78 0.19 150);
  --sidebar: oklch(0.13 0.008 165);
  --sidebar-foreground: oklch(0.92 0.006 155);
  --sidebar-primary: oklch(0.78 0.19 150);
  --sidebar-primary-foreground: oklch(0.14 0.025 155);
  --sidebar-accent: oklch(0.22 0.012 165);
  --sidebar-accent-foreground: oklch(0.96 0.006 155);
  --sidebar-border: oklch(0.27 0.012 165);
  --ok-wash: oklch(0.78 0.19 150 / 0.16);
  --warning-wash: oklch(0.78 0.15 80 / 0.16);
  --danger-wash: oklch(0.66 0.2 25 / 0.18);
  --info-wash: oklch(0.72 0.13 235 / 0.16);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 16px 48px oklch(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   2. Fonts, self-hosted.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/DMSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/DMSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   3. Reset and base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); z-index: 100; }
.skip-link:focus { left: 8px; }

/* ---------------------------------------------------------------------------
   4. Typography helpers
   --------------------------------------------------------------------------- */
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.muted { color: var(--muted-foreground); }
.small { font-size: var(--fs-sm); }
.lede { font-size: var(--fs-md); color: var(--muted-foreground); line-height: 1.55; }
.strong { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 10px; color: var(--muted-foreground); background: var(--card); }
.icon { flex: none; }

/* ---------------------------------------------------------------------------
   5. Shell: sidebar, topbar, content
   --------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  background: var(--sidebar); color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  padding: 12px;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
}
.sidebar--open { transform: none; box-shadow: var(--shadow-lg); }
.sidebar__backdrop { position: fixed; inset: 0; z-index: 39; background: oklch(0 0 0 / 0.4); }
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 6px; margin-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-weight: 600; font-size: var(--fs-md); }
.brand:hover { text-decoration: none; }
.brand__mark { display: inline-flex; }
.brand__tag { margin-left: 2px; padding: 1px 6px; border-radius: 4px; background: var(--primary); color: var(--primary-foreground); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sidebar__close { display: inline-flex; }
.sidebar__nav { flex: 1; overflow-y: auto; padding-top: 4px; }
.nav-group { margin-bottom: 14px; }
.nav-group__label { padding: 4px 10px 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; margin-bottom: 2px;
  border-radius: var(--radius);
  color: var(--muted-foreground); font-size: 13px; font-weight: 500;
}
.nav-link:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); text-decoration: none; }
.nav-link--active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-link--active .icon { color: var(--primary); }
.nav-link--soon { opacity: 0.55; cursor: default; }
.nav-link--soon:hover { background: none; color: var(--muted-foreground); }
.nav-link__chip { margin-left: auto; padding: 1px 6px; border-radius: 99px; background: var(--muted); color: var(--muted-foreground); font-size: 10px; font-weight: 600; }
.nav-link__chip--warning { background: var(--warning); color: var(--warning-foreground); }
.sidebar__footer { position: relative; border-top: 1px solid var(--sidebar-border); padding-top: 10px; }
.user-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--radius); text-align: left; color: inherit; }
.user-card:hover { background: var(--sidebar-accent); }
.user-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-card__name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card__role { font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card__more { color: var(--muted-foreground); }

.switcher { position: relative; margin: 4px 0 14px; }
.switcher__button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--sidebar-border); border-radius: var(--radius); background: var(--card); color: var(--foreground); text-align: left; }
.switcher__button:hover { border-color: var(--input); }
.switcher__avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; background: var(--secondary); font-size: 10px; font-weight: 700; flex: none; }
.switcher__avatar--logo { background: oklch(1 0 0); border: 1px solid var(--border); padding: 2px; overflow: hidden; }
.switcher__avatar--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__logo { display: block; max-height: 32px; max-width: 180px; object-fit: contain; }
.switcher__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.switcher__name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__sub { font-size: 10.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__chevron { color: var(--muted-foreground); }

.shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: var(--topbar-height); padding: 0 16px;
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__menu { display: inline-flex; }
.topbar__title { font-weight: 600; font-size: var(--fs-md); }
.topbar__search { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; }
.topbar__search-icon { position: absolute; left: 11px; color: var(--muted-foreground); pointer-events: none; }
.topbar__search-input { width: 100%; height: 36px; padding: 0 40px 0 34px; border: 1px solid transparent; border-radius: var(--radius); background: var(--secondary); font-size: 13px; }
.topbar__search-input:focus { outline: none; border-color: var(--ring); background: var(--card); }
.topbar__search-input::placeholder { color: var(--muted-foreground); }
.topbar__kbd { position: absolute; right: 8px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.topbar__bell { position: relative; }
.topbar__dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.theme-menu { position: relative; }
.theme-icon--dark { display: none; }
.dark .theme-icon--dark { display: inline-flex; }
.dark .theme-icon--light { display: none; }

.content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 20px 16px 48px; }

@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .sidebar__close, .sidebar__backdrop, .topbar__menu { display: none !important; }
  .shell__main { padding-left: var(--sidebar-width); }
  .topbar { padding: 0 28px; }
  .content { padding: 28px 28px 64px; }
}

/* Banners under the topbar */
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.banner--warning { background: var(--warning-wash); }
.banner--muted { background: var(--secondary); color: var(--secondary-foreground); }
.banner--danger { background: var(--danger-wash); }
.banner--info { background: var(--info-wash); }
.banner--impersonating { background: var(--warning); color: oklch(0.2 0.02 70); font-weight: 500; }
.banner--impersonating .btn { background: oklch(0.99 0 0); color: oklch(0.2 0 0); }
.banner__text { flex: 1; min-width: 0; }
.banner__text strong { font-weight: 600; }
.banner form { margin-left: auto; }
.banner .btn { margin-left: auto; }
@media (min-width: 1024px) { .banner { padding: 10px 28px; } }

/* ---------------------------------------------------------------------------
   6. Components
   --------------------------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); }
.dark .btn--primary:hover { background: color-mix(in oklab, var(--primary) 90%, white); }
.btn--secondary { background: var(--card); color: var(--foreground); border-color: var(--border); }
.btn--secondary:hover { background: var(--secondary); }
.btn--ghost { background: transparent; color: var(--foreground); }
.btn--ghost:hover { background: var(--accent); }
.btn--danger { background: var(--destructive); color: var(--destructive-foreground); }
.btn--danger:hover { background: color-mix(in oklab, var(--destructive) 88%, black); }
.btn--danger-outline { background: transparent; color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.btn--danger-outline:hover { background: var(--danger-wash); }
.btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn--lg { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 30px; }
.btn--block { width: 100%; }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--ok-wash); color: color-mix(in oklab, var(--primary) 80%, black); }
.dark .pill--ok { color: var(--primary); }
.pill--warning { background: var(--warning-wash); color: color-mix(in oklab, var(--warning) 70%, black); }
.dark .pill--warning { color: var(--warning); }
.pill--danger { background: var(--danger-wash); color: color-mix(in oklab, var(--destructive) 85%, black); }
.dark .pill--danger { color: color-mix(in oklab, var(--destructive) 80%, white); }
.pill--info { background: var(--info-wash); color: color-mix(in oklab, var(--info) 80%, black); }
.dark .pill--info { color: color-mix(in oklab, var(--info) 85%, white); }
.pill--muted { background: var(--muted); color: var(--muted-foreground); }
.pill--outline { background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }

/* Metric tiles */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric { display: block; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; }
a.metric:hover { text-decoration: none; border-color: var(--input); }
.metric__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.metric__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.metric__icon { color: var(--muted-foreground); }
.metric__value { font-size: 26px; font-weight: 600; line-height: 1.1; }
.metric__hint { margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }
.metric--ok .metric__icon, .metric--ok .metric__value { color: var(--primary); }
.metric--warning .metric__icon, .metric--warning .metric__value { color: var(--warning); }
.metric--danger .metric__icon, .metric--danger .metric__value { color: var(--destructive); }

/* Panels */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.panel__title { font-size: var(--fs-md); font-weight: 600; }
.panel__subtitle { margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); }
.panel__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.panel__body { padding: 18px; }
.panel__body--flush { padding: 0; }
.panel__footer { padding: 12px 18px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--secondary) 50%, var(--card)); border-radius: 0 0 var(--radius) var(--radius); font-size: 12.5px; color: var(--muted-foreground); }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { font-size: 13px; }
.table th { text-align: left; padding: 9px 14px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in oklab, var(--secondary) 45%, transparent); }
.table td.num, .table th.num { text-align: right; }
.table .actions { text-align: right; white-space: nowrap; }
.table a.row-link { color: inherit; font-weight: 500; }
.table a.row-link:hover { color: var(--primary); }
.table__sub { display: block; font-size: 12px; color: var(--muted-foreground); }
.table--compact td { padding: 8px 14px; }

/* Forms */
.field { margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.field__optional { font-weight: 400; color: var(--muted-foreground); font-size: 12px; }
.field__input { display: block; width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--foreground); font-size: 14px; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
textarea.field__input { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.field__select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.field__input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent); }
.field__input::placeholder { color: var(--muted-foreground); opacity: 0.8; }
.field__input:disabled { opacity: 0.6; background: var(--secondary); }
.field__hint { margin-top: 5px; font-size: 12px; color: var(--muted-foreground); }
.field__error { margin-top: 5px; font-size: 12.5px; color: var(--destructive); font-weight: 500; }
.field--error .field__input { border-color: var(--destructive); }
.field--checkbox { margin-bottom: 12px; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; }
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--input); border-radius: 4px; background: var(--card); position: relative; }
.checkbox input:checked + .checkbox__box { background: var(--primary); border-color: var(--primary); }
.checkbox input:checked + .checkbox__box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--primary-foreground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--ring); outline-offset: 2px; }
.checkbox__text { display: flex; flex-direction: column; gap: 2px; }
.checkbox__text .field__hint { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.form-actions--end { justify-content: flex-end; }
.form-note { font-size: 12.5px; color: var(--muted-foreground); }
.form-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius); background: var(--danger-wash); color: var(--destructive); font-size: 13px; font-weight: 500; }
.fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.fieldset__legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.radio-list { display: grid; gap: 6px; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--primary); background: var(--ok-wash); }
.radio input { margin-top: 3px; accent-color: var(--primary); }
.radio__text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.radio__text .muted { font-size: 12px; }
.code-input { font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; height: 50px; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px; gap: 8px; }
.empty--compact { padding: 26px 16px; }
.empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--secondary); color: var(--muted-foreground); margin-bottom: 4px; }
.empty__title { font-size: var(--fs-md); font-weight: 600; }
.empty__body { max-width: 380px; font-size: 13px; color: var(--muted-foreground); }
.empty .btn { margin-top: 6px; }

/* Avatars */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--secondary); color: var(--secondary-foreground); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.avatar--xs { width: 22px; height: 22px; font-size: 9px; border-radius: 5px; }
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 44px; height: 44px; font-size: 14px; }
.avatar--primary { background: var(--primary); color: var(--primary-foreground); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-left: -6px; border: 2px solid var(--card); }
.avatar-stack .avatar:first-child { margin-left: 0; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person__text { display: flex; flex-direction: column; min-width: 0; }
.person__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__sub { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flash */
.flash { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13.5px; }
.flash__text { flex: 1; }
.flash__link { font-weight: 600; white-space: nowrap; }
.flash__close { display: inline-flex; color: var(--muted-foreground); padding: 4px; border-radius: 4px; }
.flash__close:hover { background: var(--accent); }
.flash--ok { background: var(--ok-wash); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.flash--ok .icon:first-child { color: var(--primary); }
.flash--info { background: var(--info-wash); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.flash--info .icon:first-child { color: var(--info); }
.flash--warning { background: var(--warning-wash); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
.flash--warning .icon:first-child { color: var(--warning); }
.flash--error { background: var(--danger-wash); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); }
.flash--error .icon:first-child { color: var(--destructive); }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 13px; animation: toast-in 0.18s ease; }
.toast--ok .icon { color: var(--primary); }
.toast--error .icon { color: var(--destructive); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Menus (dropdowns) */
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px; padding: 6px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.menu--right { left: auto; right: 0; }
.menu--up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; }
.menu--switcher { left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
.menu__label { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: inherit; text-align: left; }
.menu__item:hover { background: var(--accent); text-decoration: none; }
.menu__item--active { background: var(--accent); font-weight: 600; }
.menu__item--danger { color: var(--destructive); }
.menu__meta { margin-left: auto; font-size: 11px; color: var(--muted-foreground); padding-left: 8px; }
.menu__divider { height: 1px; background: var(--border); margin: 6px 4px; }
.menu form { margin: 0; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.tabs__link:hover { color: var(--foreground); text-decoration: none; }
.tabs__link--active { color: var(--foreground); border-bottom-color: var(--primary); }
.tabs__link--soon { opacity: 0.55; cursor: default; }
.tabs__count { padding: 0 6px; border-radius: 99px; background: var(--muted); font-size: 11px; }
.tabs__chip { padding: 0 5px; border-radius: 4px; background: var(--muted); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Sub navigation (settings, account) */
.settings-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* Account > Notifications: one row per preference */
.pref-list { display: grid; }
.pref-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.pref-row:first-child, .pref-row--head + .pref-row { border-top: 0; }
.pref-row--head { display: none; }
.pref-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pref-row__text .field__hint { margin: 0; }
.pref-row__email .field__select { height: 34px; font-size: 13px; }
@media (min-width: 720px) {
  .pref-row { grid-template-columns: minmax(0, 1fr) 96px 170px; align-items: center; gap: 16px; }
  .pref-row--head { display: grid; padding: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
  .pref-row__bell { justify-self: center; }
  .pref-row__mobile-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 900px) { .settings-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; } }
.sub-nav { display: flex; flex-direction: column; gap: 2px; }
.sub-nav__heading { padding: 4px 10px 8px; }
.sub-nav__link { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.sub-nav__link:hover { background: var(--accent); color: var(--foreground); text-decoration: none; }
.sub-nav__link--active { background: var(--accent); color: var(--foreground); }
.sub-nav__link--soon { opacity: 0.55; cursor: default; }
@media (max-width: 899px) { .sub-nav { flex-direction: row; flex-wrap: wrap; } .sub-nav__heading { display: none; } }

/* Page header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.page-header__subtitle { margin-top: 4px; font-size: 13.5px; color: var(--muted-foreground); }
.page-header__back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.page-header__back:hover { color: var(--foreground); text-decoration: none; }
.page-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-header .kicker { margin-bottom: 4px; }

/* Modal and sheet */
.modal, .sheet { position: fixed; inset: 0; z-index: 70; }
.modal__backdrop, .sheet__backdrop { position: absolute; inset: 0; background: oklch(0 0 0 / 0.45); }
.modal__dialog { position: relative; margin: 8vh auto 0; width: calc(100% - 32px); max-width: 520px; max-height: 84vh; display: flex; flex-direction: column; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: toast-in 0.15s ease; }
.modal__dialog--sm { max-width: 420px; }
.modal__dialog--lg { max-width: 760px; }
.modal__header, .sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal__title, .sheet__title { font-size: var(--fs-md); font-weight: 600; }
.modal__body, .sheet__body { padding: 18px; overflow-y: auto; }
.modal__footer, .sheet__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; background: var(--popover); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: sheet-in 0.18s ease; }
.sheet__body { flex: 1; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__body p + p { margin-top: 10px; }

/* Activity list */
.activity { display: flex; flex-direction: column; }
.activity__item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.activity__item:last-child { border-bottom: 0; }
.notice-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.notice-dot--unread { background: var(--primary); }
.logo-setting { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.logo-setting__preview { width: 180px; height: 72px; padding: 8px; border: 1px dashed var(--border); border-radius: var(--radius); background: oklch(1 0 0); display: flex; align-items: center; justify-content: center; }
.logo-setting__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-setting .stack { flex: 1; min-width: 240px; }
.activity__text { flex: 1; min-width: 0; font-size: 13px; }
.activity__meta { font-size: 12px; color: var(--muted-foreground); }

/* Checklist (onboarding) */
.checklist { display: grid; gap: 6px; }
.checklist__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; }
.checklist__item:hover { text-decoration: none; border-color: var(--input); background: color-mix(in oklab, var(--secondary) 40%, transparent); }
.checklist__item--done { opacity: 0.6; }
.checklist__item--done .checklist__label { text-decoration: line-through; }
.checklist__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); color: var(--primary); flex: none; }
.checklist__item--done .checklist__mark { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.checklist__label { flex: 1; font-size: 13.5px; font-weight: 500; }
.progress { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.progress__bar { height: 100%; background: var(--primary); border-radius: 99px; }

/* Definition list */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13.5px; }
.dl dt { color: var(--muted-foreground); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Code block, snippet */
.code { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row .code { flex: 1; }

/* Dev link box */
.dev-link { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px; border: 1px dashed color-mix(in oklab, var(--info) 60%, transparent); border-radius: var(--radius); background: var(--info-wash); font-size: 12.5px; }
.dev-link .icon { color: var(--info); margin-top: 2px; }
.dev-link__label { color: var(--muted-foreground); margin-bottom: 4px; }
.dev-link__url { overflow-wrap: anywhere; font-size: 12px; }

/* QR and recovery codes */
.qr { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.qr svg { display: block; }
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); font-family: var(--mono); font-size: 14px; }
.setup-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.setup-row > div { flex: 1; min-width: 200px; }

/* Board preview on the project overview */
.list-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.list-col { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); }
.list-col__name { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.list-col__count { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); }
.list-col__flags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

/* Project and company cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.item-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; }
.item-card:hover { text-decoration: none; border-color: var(--input); box-shadow: var(--shadow-sm); }
.item-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.item-card__sub { font-size: 12.5px; color: var(--muted-foreground); }
.item-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
.item-card__code { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--secondary); color: var(--secondary-foreground); }

/* Filter bar */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters .field { margin: 0; }
.filters .field__input { height: 34px; font-size: 13px; }
.filters__search { min-width: 220px; }
.row[data-filter-form] .field__input { width: auto; height: 34px; font-size: 13px; }
.row[data-filter-form] input[type="search"] { min-width: 220px; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 2px; }
.seg__link { flex: none; white-space: nowrap; padding: 5px 10px; border-radius: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
.seg__link:hover { text-decoration: none; color: var(--foreground); }
.seg__link--active { background: var(--secondary); color: var(--foreground); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; font-size: 12.5px; }
.pagination__links { display: flex; align-items: center; gap: 10px; }

/* Two column layout */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* Component sheet */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 11px; }
.swatch__chip { height: 44px; }
.swatch__name { padding: 6px 8px; font-family: var(--mono); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.icon-cell { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; font-family: var(--mono); }
.demo-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   7. Auth pages
   --------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.auth__header { padding: 18px 24px; }
.auth__main { display: grid; place-items: start center; padding: 24px 16px 48px; }
.auth__card { width: 100%; max-width: 420px; padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.auth__card--wide { max-width: 560px; }
.auth__footer { padding: 18px 24px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }
.auth__footer a { color: inherit; }
.auth__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.auth__lede { font-size: 13.5px; color: var(--muted-foreground); margin-bottom: 20px; line-height: 1.55; }
.auth__meta { margin-top: 18px; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.6; }
.auth__meta a { font-weight: 500; }
.auth__divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 11px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth__email { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); font-size: 13px; }
.auth__email a { font-size: 12px; }
.auth__pending { display: flex; gap: 12px; align-items: flex-start; }

/* ---------------------------------------------------------------------------
   8. Public site
   --------------------------------------------------------------------------- */
.site-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.site-header { border-bottom: 1px solid var(--border); background: var(--card); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.site-nav { display: flex; align-items: center; gap: 18px; font-size: 13.5px; font-weight: 500; }
.site-nav a { color: inherit; }
.site-main { min-height: 60vh; }
.site-footer { border-top: 1px solid var(--border); padding: 24px 0; font-size: 12.5px; color: var(--muted-foreground); }
.site-footer a { color: inherit; }
.hero { padding: 72px 0 40px; text-align: center; }
.hero__title { font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 760px; margin: 0 auto 16px; }
.hero__lede { max-width: 620px; margin: 0 auto 26px; font-size: 17px; color: var(--muted-foreground); line-height: 1.55; }
.hero__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 24px 0 48px; }
.feature { padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.feature__icon { display: inline-flex; padding: 8px; border-radius: var(--radius); background: var(--ok-wash); color: var(--primary); margin-bottom: 12px; }
.feature__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.feature__body { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.55; }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 24px 0 56px; }
.plan { display: flex; flex-direction: column; padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.plan--featured { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ok-wash); }
.plan__name { font-size: 14px; font-weight: 600; }
.plan__price { margin: 10px 0 4px; font-family: var(--mono); font-size: 32px; font-weight: 600; }
.plan__price small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted-foreground); }
.plan__limits { margin: 14px 0 20px; display: grid; gap: 8px; font-size: 13.5px; }
.plan__limits li { display: flex; gap: 8px; align-items: center; }
.plan__limits .icon { color: var(--primary); }
.plan .btn { margin-top: auto; }
/* Settings > Billing and plan */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan-grid .plan { padding: 18px; border-radius: var(--radius); }
.plan-grid .plan__price { font-size: 26px; }
.plan-now__name { font-size: 18px; font-weight: 600; }
.usage-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .usage-grid { grid-template-columns: repeat(3, 1fr); } }
.usage { display: grid; gap: 8px; }
.progress__bar--full { background: var(--destructive); }
.cycle-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); }
.cycle-toggle__option { position: relative; display: inline-flex; cursor: pointer; }
.cycle-toggle__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cycle-toggle__option > span { padding: 6px 12px; border-radius: calc(var(--radius) - 2px); font-size: 13px; font-weight: 500; }
.cycle-toggle__option input:checked + span { background: var(--card); box-shadow: var(--shadow-sm); }
.cycle-toggle__option input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.section-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; text-align: center; margin: 32px 0 6px; }
.section-lede { text-align: center; color: var(--muted-foreground); max-width: 560px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   8b. Boards and cards (build step 2)
   --------------------------------------------------------------------------- */

/* Labels: names from Label::COLOURS, one wash and one ink per name */
.label { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--label-bg); color: var(--label-fg); }
.label--dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; }
.label--button { cursor: pointer; }
.label--button:hover { filter: brightness(0.95); }
.label--red { --label-bg: oklch(0.66 0.2 25 / 0.16); --label-fg: oklch(0.45 0.18 25); }
.label--amber { --label-bg: oklch(0.72 0.15 72 / 0.2); --label-fg: oklch(0.45 0.12 60); }
.label--green { --label-bg: oklch(0.6 0.17 150 / 0.16); --label-fg: oklch(0.4 0.14 150); }
.label--blue { --label-bg: oklch(0.62 0.14 235 / 0.16); --label-fg: oklch(0.42 0.13 240); }
.label--purple { --label-bg: oklch(0.6 0.18 300 / 0.16); --label-fg: oklch(0.42 0.16 300); }
.label--pink { --label-bg: oklch(0.66 0.2 350 / 0.16); --label-fg: oklch(0.46 0.17 350); }
.label--teal { --label-bg: oklch(0.65 0.12 195 / 0.18); --label-fg: oklch(0.4 0.1 195); }
.label--muted { --label-bg: var(--muted); --label-fg: var(--muted-foreground); }
.label--dot.label--red { background: oklch(0.66 0.2 25); } .label--dot.label--amber { background: oklch(0.72 0.15 72); } .label--dot.label--green { background: oklch(0.6 0.17 150); } .label--dot.label--blue { background: oklch(0.62 0.14 235); } .label--dot.label--purple { background: oklch(0.6 0.18 300); } .label--dot.label--pink { background: oklch(0.66 0.2 350); } .label--dot.label--teal { background: oklch(0.65 0.12 195); } .label--dot.label--muted { background: var(--muted-foreground); }
.dark .label--red { --label-bg: oklch(0.66 0.2 25 / 0.22); --label-fg: oklch(0.82 0.12 25); }
.dark .label--amber { --label-bg: oklch(0.78 0.15 80 / 0.22); --label-fg: oklch(0.86 0.12 80); }
.dark .label--green { --label-bg: oklch(0.78 0.19 150 / 0.2); --label-fg: oklch(0.85 0.15 150); }
.dark .label--blue { --label-bg: oklch(0.72 0.13 235 / 0.22); --label-fg: oklch(0.84 0.1 235); }
.dark .label--purple { --label-bg: oklch(0.7 0.18 300 / 0.22); --label-fg: oklch(0.85 0.12 300); }
.dark .label--pink { --label-bg: oklch(0.72 0.2 350 / 0.22); --label-fg: oklch(0.86 0.12 350); }
.dark .label--teal { --label-bg: oklch(0.75 0.12 195 / 0.22); --label-fg: oklch(0.85 0.09 195); }

/* Board toolbar */
.board-toolbar { margin: -6px 0 16px; }
.board-toolbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-toolbar__filter-toggle--on { border-color: var(--primary); }
.board-toolbar__filter-toggle .pill { height: 18px; padding: 0 6px; font-size: 10.5px; }
.board-switch, .board-menu { position: relative; }
.board-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.board-filters .field { margin: 0; }
.board-filters .field__input { height: 32px; font-size: 12.5px; }
.board-filters__search { min-width: 200px; flex: 1; }
.board-filters .field__select { min-width: 140px; }

/* Board */
.board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 16px; scroll-padding: 12px; min-height: 60vh; }
.board__list { flex: none; width: 280px; max-height: calc(100vh - 250px); display: flex; flex-direction: column; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.board__list--new { background: transparent; border-style: dashed; max-height: none; }
.board__list-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 12px; }
.board__list-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__list-count { font-size: 11.5px; color: var(--muted-foreground); padding: 1px 6px; border-radius: 99px; background: var(--muted); }
.board__list--over .board__list-count { background: var(--warning-wash); color: var(--warning); font-weight: 600; }
.board__list-flag { display: inline-flex; }
.board__list-menu { position: relative; }
.board__cards { flex: 1; min-height: 24px; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.board__cards--over { background: color-mix(in oklab, var(--primary) 6%, transparent); border-radius: var(--radius); }
.board__add { padding: 4px 8px 8px; }
.board__add-summary { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: var(--radius); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; list-style: none; }
.board__add-summary::-webkit-details-marker { display: none; }
.board__add-summary:hover { background: var(--sidebar-accent); color: var(--foreground); }
.board__add[open] .board__add-summary { display: none; }
.board__add-form { display: flex; flex-direction: column; gap: 8px; }
.board__add-form .field__input { font-size: 13px; }
.board__add-form textarea.field__input { padding: 8px 10px; min-height: 56px; }
.board__add-opts { display: flex; gap: 8px; align-items: center; }
.board__add-opts .field__input { height: 30px; font-size: 12px; flex: 1; }
.board__add-opts .checkbox { align-items: center; }
.board__add-opts .checkbox__text { color: var(--muted-foreground); }
.board__add-actions { display: flex; gap: 6px; }

/* Kanban card */
.card-kanban { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 9px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; box-shadow: var(--shadow-sm); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.card-kanban:hover { text-decoration: none; border-color: var(--input); }
.card-kanban:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.card-kanban--done .card-kanban__title { color: var(--muted-foreground); }
.card-kanban__cover { display: block; height: 140px; margin: -10px -10px 2px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--secondary); }
.card-kanban__cover img { display: block; -webkit-user-drag: none; pointer-events: none; width: 100%; height: 100%; object-fit: cover; }
.card-kanban__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.card-kanban__title { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.card-kanban__approval { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--warning); }
.card-kanban__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--muted-foreground); }
.card-kanban__meta .pill { height: 18px; padding: 0 6px; font-size: 10.5px; }
.card-kanban__code { font-size: 11px; }
.card-kanban__type { display: inline-flex; }
.card-kanban__due, .card-kanban__count { display: inline-flex; align-items: center; gap: 3px; }
.card-kanban__due--overdue { color: var(--destructive); font-weight: 600; }
.card-kanban__due--soon { color: var(--warning); font-weight: 600; }
.card-kanban__count--done { color: var(--primary); }
.card-kanban__members { margin-left: auto; }
.card-kanban--dragging { opacity: 0.35; border-style: dashed; }
.card-kanban--ghost { position: fixed; z-index: 90; pointer-events: none; transform-origin: center; box-shadow: var(--shadow-lg); cursor: grabbing; rotate: 2deg; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.no-cards .board__cards { min-height: 40px; }

/* Card modal */
.modal__dialog--card { max-width: 980px; margin: 4vh auto 0; max-height: 92vh; }
.card-modal__bar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 8px 10px 0; }
.card-modal__body { padding: 4px 24px 24px; overflow-y: auto; }
@media (max-width: 720px) { .modal__dialog--card { margin: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; } .card-modal__body { padding: 4px 16px 24px; } }

/* Card detail */
.card-page { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 24px 24px; }
.card-detail__head { padding: 10px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.card-detail__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.card-detail__code { font-size: 12.5px; color: var(--foreground); }
.card-detail__type { display: inline-flex; align-items: center; gap: 4px; }
.card-detail__title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.card-detail__title-form { display: flex; gap: 8px; align-items: center; }
.card-detail__title-input { flex: 1; min-width: 0; height: 40px; padding: 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.card-detail__title-input:hover { border-color: var(--border); }
.card-detail__title-input:focus { outline: none; border-color: var(--ring); background: var(--card); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent); }
.js .card-detail__title-save { display: none; }
.js .card-detail__title-form.is-dirty .card-detail__title-save { display: inline-flex; }
.card-detail__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .card-detail__grid { grid-template-columns: minmax(0, 1fr) 260px; } }
.card-detail__main { min-width: 0; }
.card-detail__rail { min-width: 0; }
.card-section { margin-bottom: 24px; }
.card-section__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.card-section__head .card-section__title { margin-bottom: 0; }
.card-section__title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.card-section__title .icon { color: var(--muted-foreground); }
.card-edit > summary { list-style: none; cursor: pointer; }
.card-edit > summary::-webkit-details-marker { display: none; }
.card-edit > form, .card-edit > .rail-picker, .card-edit > .activity { margin-top: 8px; }
.card-detail__main > .card-edit { margin-bottom: 24px; }
.card-edit--inline { display: inline-block; }
.card-edit--inline[open] > summary { display: none; }
.card-edit--inline > form { margin-top: 0; }
.card-edit--rail > summary { display: flex; }
.card-edit textarea.field__input { font-size: 13.5px; }
.is-busy { opacity: 0.6; pointer-events: none; }

/* Markdown output */
.md { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.md p + p, .md p + ul, .md p + ol, .md ul + p, .md ol + p, .md pre + p, .md p + pre { margin-top: 8px; }
.md ul { list-style: disc; padding-left: 20px; }
.md ol { list-style: decimal; padding-left: 20px; }
.md li + li { margin-top: 2px; }
.md-code { padding: 1px 5px; border-radius: 4px; background: var(--secondary); font-family: var(--mono); font-size: 12px; }
.md-pre { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; }
.mention { padding: 0 3px; border-radius: 3px; background: var(--info-wash); color: var(--info); font-weight: 600; }

/* Checklists on a card */
.check-items { display: flex; flex-direction: column; gap: 2px; }
.check-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13.5px; }
.check-item--done .check-item__body > .md { text-decoration: line-through; color: var(--muted-foreground); }
.check-item__toggle { display: inline-flex; margin-top: 1px; }
.check-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--input); border-radius: 4px; background: var(--card); color: var(--primary-foreground); }
.check-box--on { background: var(--primary); border-color: var(--primary); }
button.check-box:hover { border-color: var(--primary); }
.check-item__body { flex: 1; min-width: 0; }
.check-item__meta { display: block; font-size: 11.5px; color: var(--muted-foreground); }
.check-item__edit { margin-left: auto; }
.check-item__edit > summary { opacity: 0; }
.check-item:hover .check-item__edit > summary, .check-item__edit > summary:focus-visible { opacity: 1; }
.check-add { display: flex; gap: 8px; margin-top: 8px; }
.check-add .field__input { height: 34px; font-size: 13px; }

/* Attachments */
.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.attachment { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); min-width: 0; }
.attachment--cover { border-color: var(--primary); }
.attachment__thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 68px; height: 68px; border-radius: var(--radius-sm); background: var(--secondary); overflow: hidden; }
.attachment__thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment__icon { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted-foreground); font-size: 10px; }
.attachment__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.attachment__name { font-size: 13px; font-weight: 500; }
.attachment__meta { font-size: 11.5px; color: var(--muted-foreground); }
.attachment__actions { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 2px; margin-left: -8px; }
.attachment__actions .btn { height: 26px; padding: 0 8px; font-size: 12px; }
.upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.upload-row__input { font-size: 12.5px; max-width: 100%; }

/* Comments */
.comments { display: flex; flex-direction: column; gap: 14px; }
.comment { display: flex; gap: 10px; }
.comment--internal { padding: 10px 12px; margin: 0 -12px; border-left: 3px solid var(--warning); border-radius: 0 var(--radius) var(--radius) 0; background: var(--warning-wash); }
.comment__body { flex: 1; min-width: 0; }
.comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.comment__author { font-weight: 600; }
.comment__actions { display: flex; gap: 4px; margin-top: 4px; margin-left: -8px; }
.comment-form { margin-top: 16px; }
.comment-form__row { display: flex; gap: 10px; }
.comment-form__field { position: relative; flex: 1; min-width: 0; }
.comment-form__field textarea.field__input { font-size: 13.5px; }
.comment-form__actions { padding-top: 10px; padding-left: 36px; }
.mention-menu { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 240px; max-width: 100%; margin-top: 4px; padding: 4px; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.mention-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; text-align: left; }
.mention-menu__item:hover, .mention-menu__item--active { background: var(--accent); }
.mention-menu__handle { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.activity--card { margin-top: 8px; max-height: 360px; overflow-y: auto; }
.activity--card .activity__item { padding: 8px 0; }

/* Rail */
.rail-block { padding: 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--secondary) 45%, var(--card)); }
.rail-block__label { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.rail-people { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rail-person { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.rail-person .inline-form { margin-left: auto; }
.rail-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rail-picker { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 4px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.rail-picker form { margin: 0; }
.rail-picker__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; text-align: left; }
.rail-picker__item:hover { background: var(--accent); }
.rail-picker__item .truncate { flex: 1; min-width: 0; }
.rail-form .field { margin-bottom: 10px; }
.rail-form .field__input { height: 34px; font-size: 13px; }
.rail-form .field__label { font-size: 12px; margin-bottom: 4px; }
.js .rail-form[data-autosave] [data-autosave-button] { display: none; }
.dl--rail { grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 13px; }
.switch-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.switch-row__text { font-size: 13px; font-weight: 500; }
.switch-row__text .field__hint { display: block; margin-top: 2px; font-weight: 400; }
.switch { position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: 99px; background: var(--input); transition: background 0.12s ease; }
.switch--on { background: var(--primary); }
.switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.12s ease; }
.switch--on .switch__knob { transform: translateX(16px); }
.approval-box { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--warning-wash); font-size: 12.5px; font-weight: 500; }
.approval-box .icon { color: var(--warning); }

/* List view */
.table--cards td { vertical-align: top; }
.table__check { width: 34px; text-align: center; }
.table__check input { accent-color: var(--primary); width: 15px; height: 15px; }
.table__labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.table__sort { display: inline-flex; align-items: center; gap: 3px; color: inherit; }
.table__sort:hover { color: var(--foreground); text-decoration: none; }
.table__sort--on { color: var(--foreground); }
.table__row--done td { opacity: 0.7; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bulk-bar .field__input { height: 32px; font-size: 12.5px; width: auto; min-width: 150px; }
.bulk-bar__count { color: var(--muted-foreground); }

/* Calendar */
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-nav__title { font-size: 16px; font-weight: 600; min-width: 160px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal__dow { padding: 6px 8px; background: var(--secondary); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.cal__day { min-height: 100px; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--card); }
.cal__day--outside { background: var(--background); }
.cal__day--outside .cal__date { opacity: 0.5; }
.cal__date { font-size: 11.5px; color: var(--muted-foreground); align-self: flex-start; }
.cal__day--today .cal__date { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.cal__card { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 6px; border-radius: 4px; background: var(--secondary); color: inherit; font-size: 11.5px; line-height: 1.3; }
.cal__card:hover { text-decoration: none; background: var(--accent); }
.cal__card--overdue { background: var(--danger-wash); }
.cal__card--done { opacity: 0.6; }
.cal__card--done .cal__title { text-decoration: line-through; }
.cal__code { flex: none; font-size: 10.5px; color: var(--muted-foreground); }
.cal__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-undated li { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cal-undated li:last-child { border-bottom: 0; }
@media (max-width: 720px) { .cal__day { min-height: 64px; } .cal__title { display: none; } }

/* ---------------------------------------------------------------------------
   8b. Approvals: the rail block, the queue tables, the trail
   --------------------------------------------------------------------------- */
.rail-block--approval { border-color: color-mix(in oklab, var(--warning) 35%, var(--border)); }
.approval-state { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius); font-size: 12.5px; }
.approval-state--warning { background: var(--warning-wash); }
.approval-state--warning .icon { color: var(--warning); }
.approval-state--ok { background: var(--ok-wash); }
.approval-state--ok .icon { color: var(--primary); }
.approval-state--danger { background: var(--danger-wash); }
.approval-state--danger .icon { color: var(--destructive); }
.approval-state--muted { background: var(--muted); }
.approval-state__label { font-weight: 600; }
.approval-state__meta { margin-top: 1px; font-size: 12px; color: var(--muted-foreground); }
.approval-state__meta.warn, .approval-state__meta.danger { font-weight: 600; }
.approval-warning { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: 12px; color: color-mix(in oklab, var(--warning) 70%, black); }
.dark .approval-warning { color: var(--warning); }
.approval-warning .icon { flex: none; margin-top: 2px; }
.approval-help { margin: 10px 0 6px; }
.approval-form { margin-top: 8px; }
.approval-notes { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.approval-notes .rail-block__label { margin-bottom: 4px; }
.approval-notes .md p:last-child { margin-bottom: 0; }
.approval-trail { list-style: none; margin: 8px 0 0; padding: 0 0 0 6px; border-left: 2px solid var(--border); }
.approval-trail__item { position: relative; padding: 0 0 10px 12px; font-size: 12.5px; }
.approval-trail__item:last-child { padding-bottom: 0; }
.approval-trail__dot { position: absolute; left: -7px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted-foreground); border: 2px solid var(--card); }
.approval-trail__item--ok .approval-trail__dot { background: var(--primary); }
.approval-trail__item--warning .approval-trail__dot { background: var(--warning); }
.approval-trail__item--danger .approval-trail__dot { background: var(--destructive); }
.approval-trail__note { margin-top: 2px; padding: 4px 8px; border-left: 2px solid var(--border); color: var(--muted-foreground); white-space: pre-wrap; }
.approval-trail__meta { margin-top: 2px; font-size: 11.5px; color: var(--muted-foreground); }
.table--approvals { min-width: 680px; }
.table--approvals td { vertical-align: middle; }
.table--approvals .approval-cell { width: 1%; white-space: nowrap; text-align: right; }
.approval-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.approval-actions .card-edit--inline[open] { display: block; }
.approval-inline { display: flex; flex-direction: column; gap: 6px; min-width: 240px; text-align: left; }
.approval-inline textarea { font-size: 13px; }
.metrics--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .metrics--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.waiting-list { list-style: none; margin: 0; padding: 0; }
.waiting-list__item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.waiting-list__item:last-child { border-bottom: 0; }
.waiting-list__text { flex: 1; min-width: 0; }
.waiting-list__sub { display: block; font-size: 12px; color: var(--muted-foreground); }
.waiting-list__days { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.card-kanban__approval--ok { color: var(--primary); }
.card-kanban__approval--danger { color: var(--destructive); }
.nav-link__chip--count { background: var(--warning); color: var(--warning-foreground); }

/* ---------------------------------------------------------------------------
   8c. Designs: the grid, the canvas with pins, the rail, compare, print
   --------------------------------------------------------------------------- */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.design-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.design-card:hover { text-decoration: none; border-color: var(--input); box-shadow: var(--shadow-sm); }
.design-card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--secondary); overflow: hidden; border-bottom: 1px solid var(--border); }
.design-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.design-card__blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; color: var(--muted-foreground); }
.design-card__pages { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 99px; background: oklch(0 0 0 / 0.6); color: #fff; font-size: 11px; }
.design-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.design-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.design-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.design-card__count { display: inline-flex; align-items: center; gap: 3px; color: var(--muted-foreground); font-size: 12px; }
.design-card__sub { font-size: 12px; color: var(--muted-foreground); }
.design-card__sub span { display: inline-flex; align-items: center; gap: 4px; }
.design-card__sub .danger { color: var(--destructive); }

.design-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .design-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.design-stage { min-width: 0; }
.design-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.design-toolbar__group { display: flex; align-items: center; gap: 4px; }
.design-toolbar a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.design-canvas { position: relative; height: min(72vh, 900px); min-height: 320px; overflow: hidden; background: color-mix(in oklab, var(--secondary) 70%, var(--card)); background-image: radial-gradient(color-mix(in oklab, var(--border) 80%, transparent) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); touch-action: none; cursor: crosshair; outline: none; }
.design-canvas:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent); }
.design-canvas--panning { cursor: grabbing; }
.design-canvas--locked, .design-canvas--compare { cursor: grab; }
.design-canvas--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: auto; min-height: 240px; padding: 20px; cursor: default; background-image: none; }
.design-canvas__pdf { width: 100%; height: min(72vh, 900px); border: 0; }
.design-canvas__inner { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; --pin-scale: 1; background: #fff; box-shadow: var(--shadow-md); }
.no-js .design-canvas, html:not(.js) .design-canvas { height: auto; overflow: auto; cursor: default; }
html:not(.js) .design-canvas__inner { position: relative; }
.design-canvas__image { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.design-canvas__pins { position: absolute; inset: 0; }
.design-canvas__pins--hidden .pin { display: none; }
.design-pages { display: flex; gap: 8px; margin-top: 10px; padding-bottom: 4px; overflow-x: auto; }
.design-pages__item { position: relative; flex: none; width: 76px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.design-pages__item img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.design-pages__item--active { border-color: var(--primary); }
.design-pages__item:hover { text-decoration: none; border-color: var(--input); }
.design-pages__label { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 99px; background: oklch(0 0 0 / 0.6); color: #fff; font-size: 10.5px; }
.design-pages__pins { margin-left: 4px; padding: 0 4px; border-radius: 99px; background: var(--warning); color: var(--warning-foreground); }
.design-rail { min-width: 0; }
@media (min-width: 1000px) { .design-rail { position: sticky; top: calc(var(--topbar-height) + 16px); max-height: calc(100vh - var(--topbar-height) - 32px); overflow-y: auto; padding-right: 2px; } }
.rail-block--pins .rail-block__label .mono { color: var(--foreground); }

/* Pin marker: positioned by percentage, anchored at its bottom point */
.pin { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--warning); color: var(--warning-foreground); font-family: var(--mono); font-size: 11px; font-weight: 600; box-shadow: var(--shadow-md); transform: translate(-50%, -100%) rotate(-45deg) scale(var(--pin-scale, 1)); transform-origin: 50% 100%; cursor: pointer; transition: transform 0.1s ease; }
.pin__number { transform: rotate(45deg); }
.pin__from { position: absolute; left: 100%; top: 50%; padding: 0 5px; border-radius: 99px; background: var(--muted-foreground); color: var(--card); font-size: 9px; transform: rotate(45deg) translate(2px, -12px); white-space: nowrap; }
.pin:hover, .pin--active { z-index: 3; transform: translate(-50%, -100%) rotate(-45deg) scale(calc(var(--pin-scale, 1) * 1.2)); }
.pin--active { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent), var(--shadow-md); }
.pin--resolved { background: var(--card); color: var(--muted-foreground); border-color: var(--border); }
.pin--ghost { background: var(--muted); color: var(--muted-foreground); border-style: dashed; border-color: var(--muted-foreground); opacity: 0.85; }
.pin--new { background: var(--primary); color: var(--primary-foreground); animation: pin-drop 0.2s ease; pointer-events: none; }
@keyframes pin-drop { from { transform: translate(-50%, -140%) rotate(-45deg) scale(var(--pin-scale, 1)); opacity: 0; } to { transform: translate(-50%, -100%) rotate(-45deg) scale(var(--pin-scale, 1)); opacity: 1; } }
.pin--inline { position: static; width: 22px; height: 22px; transform: rotate(-45deg); flex: none; cursor: default; box-shadow: none; font-size: 10px; }
.pin--inline:hover { transform: rotate(-45deg); }

/* Pin list and threads in the rail */
.design-pin-hint { margin-bottom: 8px; }
.design-pin-manual > form { margin-top: 8px; }
.pin-form__coords { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pin-form__coords .field { margin: 0; }
.pin-form__coords .field__input { height: 32px; font-size: 12.5px; }
.pin-form .form-actions { margin-top: 8px; }
.pin-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pin-list__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); text-align: left; }
.pin-list__item:hover, .pin-list__item--active { background: var(--accent); }
.pin-list__item--resolved .pin-list__body { text-decoration: line-through; color: var(--muted-foreground); }
.pin-list__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pin-list__body { font-size: 13px; }
.pin-list__meta { font-size: 11.5px; color: var(--muted-foreground); }
.pin-threads { margin-top: 10px; }
.pin-thread { padding: 10px 12px; border: 1px solid color-mix(in oklab, var(--primary) 40%, var(--border)); border-radius: var(--radius); background: var(--card); }
.pin-thread--resolved { border-color: var(--border); }
.pin-thread--ghost { border-style: dashed; }
.pin-thread__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pin-thread__title { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; }
.pin-thread__close { margin-left: auto; }
.pin-thread__state { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.pin-thread__state .icon { color: var(--primary); }
.pin-thread__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.comments--pin { gap: 10px; }
.comments--pin .comment--internal { margin: 0; }
.comment-form--pin { margin-top: 10px; }
.comment-form__actions--pin { padding-left: 0; }
.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.version-list__link { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: var(--radius-sm); color: inherit; }
.version-list__link:hover { background: var(--accent); text-decoration: none; }
.version-list__item--active .version-list__link { background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.version-list__thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 36px; border-radius: var(--radius-sm); background: var(--secondary); overflow: hidden; color: var(--muted-foreground); }
.version-list__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.version-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.version-list__text .pill { margin-left: 4px; }
.version-list__sub { font-size: 11.5px; color: var(--muted-foreground); }
.version-list__summary { color: var(--foreground); opacity: 0.8; }
.rail-block--design-state .approval-form { margin-top: 10px; }
.rail-block--design-state .approval-notes { margin-top: 8px; }

/* Compare */
.compare { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-pane { min-width: 0; }
.compare-pane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.compare-pane__head .btn { margin-left: auto; }
.design-canvas--compare { height: min(66vh, 800px); }

/* ---------------------------------------------------------------------------
   8d. Feedback: the callout, the report list, the card's technical details
   --------------------------------------------------------------------------- */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13.5px; line-height: 1.5; }
.callout > svg { flex: none; margin-top: 2px; }
.callout__body { min-width: 0; flex: 1; }
.callout--ok { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: var(--ok-wash); }
.callout--ok > svg { color: var(--primary); }
.callout--warning { border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); background: var(--warning-wash); }
.callout--warning > svg { color: var(--warning); }
.feedback-list { display: grid; gap: 10px; }
.feedback-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.feedback-row:hover { text-decoration: none; border-color: var(--input); box-shadow: var(--shadow-sm); }
.feedback-row--done { opacity: 0.72; }
.feedback-row__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--secondary); border: 1px solid var(--border); }
.feedback-row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.feedback-row__blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.feedback-row__pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--destructive); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--destructive); }
.feedback-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feedback-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feedback-row__code { font-size: 11.5px; color: var(--muted-foreground); }
.feedback-row__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.feedback-row__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted-foreground); }
.feedback-row__meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
@media (max-width: 600px) { .feedback-row { grid-template-columns: 1fr; } .feedback-row__thumb { max-width: 240px; } }
.card-feedback__lead { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
.card-feedback__dl { margin-top: 10px; grid-template-columns: 90px 1fr; font-size: 13px; }
.card-feedback__pre { margin: 0; padding: 8px 10px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--secondary); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-feedback__pre--errors { border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)); background: var(--danger-wash); }
.activation-form .form-grid { margin-bottom: 4px; }
/* Portal form: the screenshot annotator (annotate.js) */
.annotator { margin-top: 12px; }
.annotator__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.annotator__tools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.annotator__tools .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--ring); color: var(--foreground); }
.annotator__stage { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--secondary); line-height: 0; }
.annotator__canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.annotator__stage--text .annotator__canvas { cursor: text; }
.annotator__text { position: absolute; z-index: 1; min-width: 120px; height: auto; padding: 2px 4px; border: 1px dashed var(--ring); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--card) 85%, transparent); color: #e5484d; font-weight: 700; line-height: 1.2; font-family: inherit; }
.annotator__text:focus { outline: none; }

/* ---------------------------------------------------------------------------
   8e. Quotes: the list, the editor, the detail page, the public page
   --------------------------------------------------------------------------- */
.table--quotes { min-width: 640px; }
.quote-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .quote-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.quote-main { min-width: 0; }
.quote-main > .panel, .quote-main > form > .panel { margin-bottom: 16px; }
.quote-rail { min-width: 0; }
@media (min-width: 1000px) { .quote-rail { position: sticky; top: calc(var(--topbar-height) + 16px); } }
.quote-intro { font-size: 14px; line-height: 1.6; white-space: normal; }
.quote-lines td, .quote-lines th { vertical-align: top; }
.quote-lines__phase th { padding-top: 14px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: transparent; }
.quote-lines__task { font-weight: 500; }
.quote-lines__desc { margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
.quote-lines tfoot td { border-top: 0; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.quote-lines tfoot tr:first-child td { border-top: 1px solid var(--border); padding-top: 10px; }
.quote-lines__total td { font-size: 15px; font-weight: 600; border-top: 2px solid var(--foreground) !important; padding-top: 10px !important; }
.quote-lines__sub td { font-size: 12px; }
.quote-decide { justify-content: flex-start; margin-top: 4px; }
.quote-decide .approval-inline { min-width: min(100%, 360px); }
.panel--decide { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }

/* Editor */
.quote-editor { min-width: 680px; }
.quote-editor td { padding: 6px 6px; vertical-align: top; }
.quote-editor th { padding: 8px 6px; }
.quote-editor .field__input { height: 34px; font-size: 13px; padding: 0 8px; }
.quote-editor textarea.field__input { height: auto; min-height: 44px; padding: 6px 8px; margin-top: 4px; font-size: 12.5px; resize: vertical; }
.quote-row__phase { width: 128px; }
.quote-row__num { width: 86px; }
.quote-row__num .field__input { text-align: right; }
.quote-row__remove { width: 36px; padding-left: 0 !important; text-align: right; white-space: nowrap; }
.quote-row__remove-box .checkbox__text { font-size: 11.5px; }
.quote-row--suggested { background: var(--warning-wash); }
.quote-row--suggested td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.quote-row__chip { display: inline-block; margin-top: 4px; }
.quote-editor__actions { position: sticky; bottom: 0; z-index: 2; padding: 10px 0; margin-top: 4px; background: color-mix(in oklab, var(--background) 92%, transparent); backdrop-filter: blur(6px); }
.rail-block--totals { background: var(--card); }
.rail-block--totals .dl--rail { grid-template-columns: 1fr auto; }
.rail-block--totals .dl--rail dd { text-align: right; }
.rail-block--ai { border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.rail-block--ai .rail-block__label { display: flex; align-items: center; gap: 5px; }
.rail-block--ai .rail-block__label .icon { color: var(--primary); }
.quote-suggested { padding: 10px; border-radius: var(--radius); background: var(--warning-wash); }
.quote-notes { list-style: disc; margin: 4px 0 10px; padding-left: 18px; line-height: 1.5; }
.quote-notes li + li { margin-top: 3px; }
.quote-notes__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Public signed link page */
.quote-public { max-width: 860px; padding: 32px 16px 48px; }
.quote-public .panel { margin-bottom: 16px; }
.quote-public__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

/* ---------------------------------------------------------------------------
   8f. Invoices: the list, the editor, the invoice page, Stripe settings
   --------------------------------------------------------------------------- */
.table--invoices { min-width: 720px; }
.invoice-parties { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .invoice-parties { grid-template-columns: 1fr 1fr minmax(180px, 0.8fr); } }
.invoice-parties strong { display: block; margin-bottom: 2px; }
.invoice-lines td, .invoice-lines th { vertical-align: top; }
.invoice-lines tfoot td { border-top: 0; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.invoice-lines tfoot tr:first-child td { border-top: 1px solid var(--border); padding-top: 10px; }
.invoice-lines__vat td { color: var(--muted-foreground); font-size: 12.5px; }
.invoice-lines__total td { font-size: 15px; font-weight: 600; border-top: 2px solid var(--foreground) !important; padding-top: 10px !important; }
.invoice-lines__sub td { font-size: 12.5px; color: var(--muted-foreground); }
.invoice-lines__owed td { font-size: 14px; font-weight: 600; }
.invoice-editor { min-width: 680px; }
.invoice-editor td { padding: 6px; vertical-align: middle; }
.invoice-editor th { padding: 8px 6px; }
.invoice-editor .field__input { height: 34px; font-size: 13px; padding: 0 8px; }
.invoice-row__num { width: 92px; }
.invoice-row__num .field__input { text-align: right; }
.invoice-row__vat { width: 150px; }
.invoice-row__net { width: 104px; white-space: nowrap; }
.invoice-row__remove { width: 40px; text-align: right; white-space: nowrap; }
.invoice-row__remove .checkbox__text { font-size: 11.5px; }
.invoice-editor__add { float: left; }
.form-grid--4 { align-items: end; }
@media (min-width: 900px) { .form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.payment-form { margin-top: 12px; }
.export-form { align-items: end; margin-bottom: 8px; }
.field--inline { margin: 0; }
.field--inline .field__label { display: block; }
.connect-state { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.connect-state > div:first-child { flex: 1; min-width: 240px; }
.connect-state--active { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 6%, transparent); }
.connect-state--restricted { border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); }

/* ---------------------------------------------------------------------------
   8g. Vault: the list, the entry with masked fields, the form
   --------------------------------------------------------------------------- */
.table--vault { min-width: 640px; }
.vault-row__label { display: inline-flex; align-items: center; gap: 8px; }
.vault-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground); flex: none; }
.tag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; line-height: 18px; }
.vault-fields { display: grid; gap: 0; margin: 0; }
.vault-field { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vault-field:last-child { border-bottom: 0; }
@media (min-width: 720px) { .vault-field { grid-template-columns: 180px minmax(0, 1fr); align-items: center; } }
.vault-field__name { font-size: 12.5px; color: var(--muted-foreground); display: flex; align-items: center; gap: 4px; }
.vault-field__value { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vault-field__value .mono { word-break: break-all; }
.vault-field__mask { letter-spacing: 0.12em; color: var(--muted-foreground); }
.vault-field__revealed { padding: 2px 6px; border-radius: var(--radius); background: var(--warning-wash); }
.vault-edit-rows { display: grid; gap: 8px; }
.vault-edit-row { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }
@media (min-width: 720px) { .vault-edit-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto auto auto; } }
.vault-edit-row .field__input { height: 36px; }
.narrow { max-width: 480px; }

/* ---------------------------------------------------------------------------
   8h. Dashboards: the 12-column widget grid, widgets, charts
   --------------------------------------------------------------------------- */
.dashboard { margin-top: 8px; }
.dashboard__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.dashboard__title { font-size: var(--fs-lg, 16px); font-weight: 600; margin: 0; }
.dashboard__edit-tools { display: none; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard--editing .dashboard__edit-tools { display: flex; }
.dashboard--editing .dashboard__customise { display: none; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.widget { grid-column: span 12; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .widget--4 { grid-column: span 4; }
  .widget--6 { grid-column: span 6; }
}
@media (min-width: 900px) and (max-width: 1199px) { .widget--4 { grid-column: span 6; } }
.widget__head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 8px; }
.widget__titles { flex: 1; min-width: 0; }
.widget__title { font-size: 14px; font-weight: 600; margin: 0; }
.widget__sub { margin: 2px 0 0; font-size: 12px; color: var(--muted-foreground); }
.widget__actions { display: flex; gap: 2px; }
.widget__body { padding: 4px 16px 16px; min-width: 0; }
.widget__edit { display: none; padding: 8px 16px; margin: 0 12px 8px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--muted); }
.dashboard--editing .widget__edit { display: block; }
.dashboard--editing .widget { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent); }
.widget__settings { margin-top: 8px; align-items: end; }
.widget__empty { margin: 4px 0 0; }
.widget__more { margin: 8px 0 0; }
.field__input--sm { height: 30px; font-size: 12.5px; padding: 0 8px; }
.js [data-no-js-only] { display: none; }
html:not(.js) [data-js-only] { display: none; }
.widget__grip { display: none !important; }
.dashboard--editing .widget__grip { display: inline-flex !important; cursor: grab; }
.widget--dragging { opacity: 0.5; }
.widget--drop-before { box-shadow: -3px 0 0 var(--primary); }
.widget-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.widget-stat { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.widget-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.widget-stat__value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.widget-stat__hint { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.widget-stat--ok .widget-stat__value { color: var(--primary); }
.widget-stat--warning { border-color: color-mix(in oklab, var(--warning) 45%, var(--border)); }
.widget-stat--danger { border-color: color-mix(in oklab, var(--destructive) 45%, var(--border)); }
.widget-figure { margin-bottom: 8px; }
.widget-figure__value { font-size: 28px; font-weight: 600; }
.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.widget-list__item:last-child { border-bottom: 0; }
.widget-list__code { font-size: 11.5px; color: var(--muted-foreground); }
.widget-list__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.widget-list__text a { color: var(--foreground); }
.widget-list__sub { display: block; font-size: 12px; color: var(--muted-foreground); }
.widget-list__when { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.widget-list__when--warning { color: var(--warning); }
.widget-list__when--danger { color: var(--destructive); }
.widget-feed { list-style: none; margin: 0; padding: 0; }
.widget-feed__item { display: flex; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.widget-feed__item:last-child { border-bottom: 0; }
.widget-feed__meta { font-size: 11.5px; color: var(--muted-foreground); }
.widget-table-toggle { margin-top: 8px; }
.widget-table-toggle summary { cursor: pointer; }
.widget-chart { width: 100%; }
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.chart__axis, .chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__label, .chart__tick { fill: var(--muted-foreground); font-size: 11.5px; }
.chart__value { fill: var(--foreground); font-size: 12px; font-weight: 600; }
.chart__bar.chart__s1 { fill: var(--series-1); }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line.chart__s1 { stroke: var(--series-1); }
.chart__line.chart__s2 { stroke: var(--series-2); }
.chart__dot { stroke: var(--card); stroke-width: 2; }
.chart__dot.chart__s1 { fill: var(--series-1); }
.chart__dot.chart__s2 { fill: var(--series-2); }
.chart__hit { fill: transparent; }
.chart__mark:hover .chart__bar, .chart__mark:hover .chart__dot { opacity: 0.8; }
.chart__mark:hover .chart__dot { r: 5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted-foreground); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__key { width: 14px; height: 3px; border-radius: 2px; }
.chart-legend__key.chart__s1 { background: var(--series-1); }
.chart-legend__key.chart__s2 { background: var(--series-2); }

/* ---------------------------------------------------------------------------
   9. Utilities (a dozen, no more)
   --------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.danger { color: var(--destructive); }
.warning { color: var(--warning); }
.ok { color: var(--primary); }
.warn { color: var(--warning); }

/* ---------------------------------------------------------------------------
   10. Print
   --------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .banner, .flash, .toasts, .page-header__actions, .btn { display: none !important; }
  .shell__main { padding-left: 0 !important; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; break-inside: avoid; }
}