/*
 * VisualMethod UI system.
 *
 * This file is the single source of truth for design tokens, shared controls,
 * data-table geometry and overflow behaviour. Page styles may arrange a
 * component, but must not redefine its visual metrics.
 */

:root {
  color-scheme: light;

  /* Warm neutral palette, inspired by the Ronas IT patient portal. */
  --ref-charcoal: #302c28;
  --ref-stone: #e9e5df;
  --ref-sand: #e0d5c3;
  --ref-yellow: #f6d579;
  --ref-taupe: #b0a38d;
  --ref-green: #e3e7db;
  --ref-peach: #f1e2c9;
  --ref-black: var(--ref-charcoal);
  --ref-ghost: #e9e6e1;
  --ref-cream: #f3f0e9;
  --ref-porcelain: #faf9f6;
  /* Existing components share these compatibility aliases. */
  --ref-blue: var(--ref-stone);
  --ref-lilac: var(--ref-sand);
  --ref-vanilla: var(--ref-yellow);
  --blue-ink: var(--ref-charcoal);
  --lime-ink: #51401c;
  --lilac-ink: #685c49;
  --peach-ink: #6b5130;

  /* Semantic colour */
  --canvas: var(--ref-ghost);
  --surface: var(--ref-porcelain);
  --surface-2: #f1eee7;
  --surface-3: var(--ref-stone);
  --surface-card: var(--ref-porcelain);
  --surface-column: var(--surface-card);
  --surface-toolbar: var(--surface-card);
  --surface-inset: #efede7;
  --rail: var(--canvas);
  --rail-2: #ded9d0;
  --rail-ink: #726c62;
  --rail-ink-strong: var(--ref-charcoal);
  --rail-active: var(--surface-card);
  --ink: var(--ref-charcoal);
  --ink-soft: #5e574d;
  --muted: #756e63;
  --line: color-mix(in srgb, var(--ref-charcoal) 10%, transparent);
  --line-soft: color-mix(in srgb, var(--ref-charcoal) 6%, transparent);
  --line-strong: color-mix(in srgb, var(--ref-charcoal) 19%, transparent);
  --accent: var(--ref-charcoal);
  --accent-strong: var(--ref-charcoal);
  --accent-hover: #191714;
  --accent-ink: #faf9f6;
  --accent-soft: #f4edd8;
  --accent-soft-strong: var(--ref-yellow);
  --accent-border: #b59d62;
  --danger: #a34d3c;
  --danger-strong: #873629;
  --danger-soft: #f6e6df;
  --danger-border: #deb2a6;
  --warning: #bb8c38;
  --success: #657451;

  /* Status */
  --status-todo: #a59982;
  --status-active: #ad812c;
  --status-done: #63775f;
  --status-neutral: #77756e;
  --status-todo-bg: var(--ref-blue);
  --status-todo-ink: #3e444c;
  --status-active-bg: var(--ref-vanilla);
  --status-active-ink: var(--ref-black);
  --status-done-bg: var(--ref-green);
  --status-done-ink: #31422f;
  --status-neutral-bg: var(--ref-stone);
  --status-neutral-ink: #55534d;
  --status-todo-wash: color-mix(in srgb, var(--ref-blue) 58%, transparent);
  --status-active-wash: color-mix(in srgb, var(--ref-vanilla) 42%, transparent);
  --status-done-wash: color-mix(in srgb, var(--ref-green) 50%, transparent);
  --status-neutral-wash: color-mix(in srgb, var(--ref-cream) 72%, transparent);
  --status-todo-wash-hot: color-mix(in srgb, var(--ref-blue) 88%, transparent);
  --status-active-wash-hot: color-mix(in srgb, var(--ref-vanilla) 76%, transparent);
  --status-done-wash-hot: color-mix(in srgb, var(--ref-green) 78%, transparent);
  --status-neutral-wash-hot: color-mix(in srgb, var(--ref-cream) 90%, transparent);

  /* Labels */
  --label-mint-bg: var(--ref-green);
  --label-mint-ink: #30412e;
  --label-amber-bg: var(--ref-vanilla);
  --label-amber-ink: #4d4a1e;
  --label-rose-bg: #f1d8d2;
  --label-rose-ink: #73312f;
  --label-blue-bg: var(--ref-blue);
  --label-blue-ink: #35414d;
  --label-violet-bg: var(--ref-lilac);
  --label-violet-ink: var(--lilac-ink);

  /* Type */
  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --text-micro: 11px;
  --text-small: 12px;
  --text-caption: 0.8125rem;
  --text-control: 14px;
  --text-ui: 0.875rem;
  --text-body: 0.9375rem;
  --text-heading: 17px;
  --icon-size: 18px;
  --text-subhead: 1.0625rem;
  --text-title: 1.25rem;
  --text-total: 20px;
  --text-page: 1.5rem;
  --text-display: clamp(26px, 2.4vw, 34px);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-control: 500;
  --weight-heavy: 600;
  --leading-tight: 1.2;
  --leading-ui: 1.4;
  --leading-body: 1.55;

  /* Shape, spacing and elevation */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 22px;
  --radius-md: var(--radius);
  --radius-field: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --shadow-subtle: 0 1px 2px rgb(33 33 33 / 0.05), 0 6px 18px rgb(33 33 33 / 0.04);
  --shadow-card: 0 4px 16px rgb(33 33 33 / 0.06);
  --shadow-raised: 0 16px 36px rgb(33 33 33 / 0.13);
  --shadow-overlay: 0 24px 60px rgb(33 33 33 / 0.2);

  /* Controls */
  --ui-control-height: 38px;
  --ui-control-height-compact: 32px;
  --ui-field-height: 34px;
  --ui-control-radius: 999px;
  --ui-control-padding-inline: 14px;
  --ui-field-padding-inline: 8px;

  /* Data tables */
  --ui-table-row-height: 48px;
  --ui-table-head-height: 34px;
  --ui-table-cell-padding: 8px;
  --ui-table-row-gap: 0px;
  --ui-table-control-rail: 44px;
  --ui-table-font-size: 13px;
  --ui-table-head-font-size: 11px;
  --ui-note-trigger-width: 30px;
  --ui-rail-width: 184px;
  --ui-sidebar-width: 220px;
  --ui-header-height: 72px;

  /* Compatibility aliases consumed by the server-rendered estimate controls. */
  --estimate-control-height: var(--ui-field-height);
  --estimate-cell-inline-padding: var(--ui-field-padding-inline);
  --estimate-row-font-size: var(--ui-table-font-size);

  /* Compatibility aliases used by the React workspace. */
  --paper: var(--canvas);
  --card: var(--surface-card);
  --row-font: var(--ui-table-font-size);
  --head-font: var(--ui-table-head-font-size);
  --field-height: var(--ui-field-height);
  --control-rail: var(--ui-table-control-rail);
  --row-gap: var(--ui-table-row-gap);
  --shadow: none;
  --content-width: 1360px;
  --page-gutter: 24px;

  /* Motion and stacking */
  --ease-out: cubic-bezier(0.2, 0.9, 0.18, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.2, 1);
  --ease-spring: var(--ease-out);
  --ease-press: cubic-bezier(0.2, 0, 0.2, 1);
  --motion-fast: 100ms;
  --motion-base: 160ms;
  --motion-slow: 220ms;
  --z-sticky: 200;
  --z-dropdown: 300;
  --z-drawer-backdrop: 400;
  --z-drawer: 500;
  --z-search-backdrop: 600;
  --z-search: 610;
  --z-drag: 650;
  --z-toast: 700;
}

/* One public API for buttons in Go templates and React. */
.button {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  padding: 0 var(--ui-control-padding-inline);
  font-size: var(--text-control);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.button-primary,
.button--primary {
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.button-primary:hover,
.button--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.button-secondary,
.button--secondary {
  border-color: var(--line-strong);
  background: var(--surface-card);
  color: var(--ink);
}

.button-secondary:hover,
.button--secondary:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft-strong);
  color: var(--ink);
}

.button-compact {
  min-height: var(--ui-control-height-compact);
  padding-inline: 10px;
  font-size: var(--text-caption);
}

/* Overflow vocabulary. Every truncation exposes its complete value on hover/focus. */
[data-ui-overflow="truncate"],
.ui-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ui-overflow="wrap"],
.ui-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

[data-ui-overflow="number"],
.ui-number {
  min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Registered table families. Header and row always consume the same schema. */
[data-ui-table="project-estimate"] {
  --ui-table-columns:
    minmax(260px, 1.8fr)
    minmax(76px, 0.5fr)
    minmax(140px, 0.8fr)
    minmax(124px, 0.8fr)
    minmax(74px, 0.5fr)
    minmax(138px, 0.9fr)
    minmax(152px, 1fr)
    minmax(112px, 0.8fr)
    minmax(126px, 0.9fr);
  --ui-table-min-width: 1278px;
}

[data-ui-table="proposal"] {
  --ui-table-columns: minmax(260px, 2fr) minmax(80px, .6fr) minmax(140px, 1fr) minmax(124px, 1fr) minmax(74px, .5fr) minmax(126px, 1fr);
  --ui-table-min-width: 888px;
}

[data-ui-table="rate-catalog"] {
  --ui-table-columns: minmax(290px, 2fr) minmax(190px, 1.3fr) minmax(130px, .8fr) minmax(140px, 1fr);
  --ui-table-min-width: 834px;
}

[data-ui-table="employees"] {
  --ui-table-columns: minmax(180px, 1.4fr) minmax(170px, 1.05fr) minmax(120px, 0.8fr) minmax(190px, 1.2fr) minmax(120px, 0.8fr) minmax(100px, 0.72fr) minmax(170px, 1.08fr) minmax(120px, 0.78fr) minmax(110px, 0.72fr);
  --ui-table-min-width: 1392px;
  --ui-table-row-height: 48px;
}

[data-ui-table="fees"] {
  --ui-table-columns: minmax(250px, 1fr) minmax(320px, 1.2fr) minmax(420px, 1.5fr) minmax(285px, 1fr) 34px;
  --ui-table-min-width: 1370px;
  --ui-table-head-height: 34px;
  --ui-table-row-height: 52px;
}

[data-ui-table="admin"] {
  --ui-table-columns: minmax(320px, 1fr) 64px 452px;
  --ui-table-min-width: 980px;
  --ui-table-row-height: 52px;
}

[data-ui-table="admin"][data-ui-table-variant="directory"] {
  --ui-table-columns: minmax(320px, 1fr) 64px;
  --ui-table-min-width: 420px;
}

[data-ui-table-scroll] {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

[data-ui-table] {
  min-width: var(--ui-table-min-width, 0);
}

[data-ui-table] [data-ui-table-head],
[data-ui-table] [data-ui-table-row] {
  min-width: 0;
  grid-template-columns: var(--ui-table-columns);
}

[data-ui-table] [data-ui-table-head] {
  min-height: var(--ui-table-head-height);
}

[data-ui-table] [data-ui-table-row] {
  min-height: var(--ui-table-row-height);
}

[data-ui-table] :is([data-ui-table-cell], [data-estimate-column]) {
  min-width: 0;
}

[data-ui-table] :is([data-ui-table-cell], [data-estimate-column]) > :is(input, select, output, .catalog-combobox) {
  min-width: 0;
  max-width: 100%;
}

[data-ui-table] :is([data-ui-table-cell][data-ui-kind="number"], [data-estimate-column="internal-rate"], [data-estimate-column="client-rate"], [data-estimate-column="quantity"], [data-estimate-column="employee-amount"], [data-estimate-column="total"]) {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Warm workspace: one shared shell for Go/HTMX and React. */
.app-frame-with-sidebar { grid-template-columns: var(--ui-rail-width) var(--ui-sidebar-width) minmax(0, 1fr); }
.app-frame-no-sidebar, .app-frame-with-sidebar.is-workspace-nav-collapsed { grid-template-columns: var(--ui-rail-width) minmax(0, 1fr); }
.app-frame-with-sidebar.is-workspace-nav-collapsed > .workspace-nav { display: none; }
/* The overview already lists every project; the secondary navigator is for project pages. */
.app-frame:has([data-project-overview]) { grid-template-columns: var(--ui-rail-width) minmax(0, 1fr); }
.app-frame:has([data-project-overview]) > .workspace-nav,
.app-frame:has([data-project-overview]) .rail .workspace-nav-restore { display: none; }
.rail { align-items: stretch; padding: 24px 14px 16px; border-right: 1px solid var(--line-soft); gap: 24px; }
.rail-brand { display: flex; justify-content: flex-start; align-items: center; gap: 9px; margin: 0 0 8px; color: var(--ink); }
.rail-brand-name { font-size: 14px; font-weight: 500; letter-spacing: -.04em; }
.rail .brand-mark { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--ref-charcoal); color: var(--ref-yellow); box-shadow: none; font-size: 11px; font-weight: 500; }
.rail-brand:hover .brand-mark { background: var(--ref-charcoal); color: var(--ref-yellow); box-shadow: none; transform: none; }
.rail-nav { gap: 6px; }
.rail-link { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 44px; padding: 0 13px; border-radius: 999px; font-size: 13px; }
.rail-link svg { flex: 0 0 18px; width: 18px; height: 18px; stroke-width: 1.6; }
.rail-link.is-active { background: var(--rail-active); color: var(--ink); box-shadow: none; }
.rail-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .workspace-nav-restore { display: none; }
.app-frame-with-sidebar.is-workspace-nav-collapsed .workspace-nav-restore { display: flex; }
.rail .avatar-small { background: var(--ref-sand); color: var(--ink); }
.rail-account > summary { display: flex; gap: 9px; width: 100%; height: auto; padding: 10px 0; border-radius: var(--radius); }
.rail-account-label { min-width: 0; display: grid; gap: 3px; text-align: left; }
.rail-account-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.rail-account-label small { color: var(--muted); font-size: 11px; }
.workspace-nav { width: var(--ui-sidebar-width); background: var(--canvas); border-right-color: var(--line-soft); }
.workspace-head { min-height: var(--ui-header-height); }
.workspace-name { font-weight: 500; }
.board-nav { gap: 4px; }
.board-nav-label { margin-block: 15px 4px; font-size: var(--text-small); font-weight: 500; text-transform: none; }
.board-nav-item { min-height: 38px; font-size: var(--text-caption); border-radius: var(--radius); }
.board-nav-item.is-active { background: var(--surface-card); color: var(--ink); box-shadow: none; }
.board-nav-item.is-active .board-nav-dot { background: var(--warning); }
.board-toolbar { min-height: var(--ui-header-height); background: var(--canvas); box-shadow: none; backdrop-filter: none; border-color: var(--line-soft); }
.board-breadcrumb h1, .board-breadcrumb .inline-title-input { font-weight: 500; }
.account-popover { left: calc(var(--ui-rail-width) + 8px); }

:is(#rate-atlas-root, #root) { font-family: var(--font); }
:is(#rate-atlas-root, #root) .rate-atlas-app { grid-template-rows: var(--ui-header-height) minmax(0, 1fr); }
:is(#rate-atlas-root, #root) .proposal-app { grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); }
:is(#rate-atlas-root, #root) .proposal-app.is-library-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
:is(#rate-atlas-root, #root) .app-header { height: var(--ui-header-height); background: var(--canvas); backdrop-filter: none; }
:is(#rate-atlas-root, #root) .app-context-title strong { font-weight: 500; }
:is(#rate-atlas-root, #root) .proposal-library { width: var(--ui-sidebar-width); background: var(--canvas); }
:is(#rate-atlas-root, #root) .proposal-library-item { border-color: transparent; border-radius: 12px; background: var(--surface-card); box-shadow: none; }
:is(#rate-atlas-root, #root) .proposal-library-item.is-active { background: var(--ref-vanilla); border-color: transparent; box-shadow: none; }
:is(#rate-atlas-root, #root) .proposal-library-select { padding: 12px; }
:is(#rate-atlas-root, #root) .proposal-library-select > span:first-child { font-size: var(--text-control); font-weight: 500; }
:is(#rate-atlas-root, #root) .proposal-library-created { color: var(--muted); }
:is(#rate-atlas-root, #root) .search-field { min-height: 42px; border: 0; border-radius: 999px; background: var(--surface-card); box-shadow: none; }
:is(#rate-atlas-root, #root) .search-field input { box-shadow: none; background: transparent; }
:is(#rate-atlas-root, #root) .search-field:focus-within { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
:is(#rate-atlas-root, #root) .proposal-library-search input { border-color: transparent; border-radius: 999px; background: var(--surface-card); }
:is(#rate-atlas-root, #root) .proposal-library-tabs button.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* One shared control scale; fields remain rectangular, actions are pill-shaped. */
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) .button {
  min-height: var(--ui-control-height); border-radius: var(--ui-control-radius);
  padding: 8px var(--ui-control-padding-inline); font-size: var(--text-control);
  font-weight: 500; line-height: var(--leading-ui); box-shadow: none;
}
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) :is(.button-primary, .button--primary) { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) :is(.button-primary, .button--primary):hover { background: var(--accent-hover); color: var(--accent-ink); }
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) :is(.button-secondary, .button--secondary) { background: var(--surface-card); border-color: var(--line); color: var(--ink); }
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) :is(.button-secondary, .button--secondary):hover { background: var(--accent-soft); border-color: var(--line-strong); }
:is(.app-frame, .auth-shell, #drawer-root, #rate-atlas-root, #root) .button-compact { min-height: var(--ui-control-height-compact); padding: 6px 12px; font-size: var(--text-caption); }
input:focus, select:focus, textarea:focus { transform: none; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.workspace-nav-collapse:focus-visible, .workspace-nav-restore:focus-visible { outline-color: var(--blue-ink); }

/* Quiet headings, softly inset cards and a small number of yellow highlights. */
h1 { font-weight: 500; letter-spacing: -.035em; }
h2, h3 { font-weight: 500; }
.boards-layout, .admin-layout { width: min(1600px, calc(100% - 48px)); }
.boards-layout { margin-block: 24px; gap: 24px; }
.overview-heading, .employee-directory-heading, .admin-layout > .page-heading { background: transparent; border-radius: 0; padding: 0; }
.overview-heading h1, .employee-directory-heading h1, .admin-layout > .page-heading h1 { color: var(--ink); font-size: var(--text-display); }
.overview-heading p { margin-bottom: 0; }
.overview-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.overview-search { display: flex; align-items: center; gap: 10px; width: min(430px, 100%); min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-card); }
.overview-search svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.overview-search input { min-width: 0; width: 100%; min-height: 42px; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: var(--text-control); }
.overview-search input:focus { border: 0; background: transparent; box-shadow: none; outline: 0; }
.overview-search:focus-within { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
.overview-context { color: var(--muted); font-size: var(--text-caption); white-space: nowrap; }
.overview-summary { display: grid; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-card); }
.overview-summary h2 { margin: 0; font-size: var(--text-heading); }
.overview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.overview-stat { display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-inset); }
.overview-stat:first-child { background: var(--ref-yellow); }
.overview-stat strong { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.overview-stat span { font-size: var(--text-caption); color: var(--ink-soft); }
.overview-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 16px; min-width: 0; }
.overview-workspace:not(:has(.overview-side)) { grid-template-columns: minmax(0, 1fr); }
.overview-side { display: grid; gap: 16px; min-width: 0; }
.project-section, .overview-directory { min-width: 0; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-card); }
.section-heading h2 { font-size: var(--text-heading); }
.section-heading .client-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 50%; background: var(--ref-taupe); color: var(--accent-ink); font-size: var(--text-small); }
.section-heading-link { font-size: var(--text-small); }
.project-filter { gap: 6px; }
.project-filter-button { min-height: 32px; background: var(--surface-inset); border-color: transparent; font-size: var(--text-caption); }
.project-filter-button.is-active span { color: var(--accent-ink); }
.project-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.project-tile, .project-tile:nth-child(n) { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-inset); box-shadow: none; transition: border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out); }
.project-tile:hover { transform: none; border-color: var(--ref-taupe); background: var(--ref-cream); box-shadow: none; }
.project-tile-link { min-height: 240px; padding: 18px; }
.project-tile-topline { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.project-monogram { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ref-charcoal); color: var(--ref-cream); font-size: 10px; font-weight: 500; }
.project-open-arrow { margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; }
.project-tile h3 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.project-tile :is(.project-client, .project-manager-label, .project-manager-email, .project-dates small, .project-description) { color: var(--muted); }
.project-client { font-weight: 400; }
.project-tile-footer { padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--line); }
.project-manager { margin-bottom: auto; }
.client-directory, .people-directory, .admin-section, .executor-directory-grid, .employee-table-scroll { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: none; }
.overview-directory .client-directory, .overview-directory .people-directory { grid-template-columns: minmax(0, 1fr); gap: 6px; border: 0; border-radius: 0; }
.overview-directory .client-directory-row, .overview-directory .people-directory-row { min-height: 54px; padding: 10px 12px; border: 0; border-radius: var(--radius); background: var(--surface-inset); }
.overview-directory .client-directory-row:is(:hover, .is-active) { background: var(--ref-yellow); }
.overview-directory .people-directory { max-height: 360px; overflow-y: auto; }
.overview-directory .people-directory-row { flex-wrap: wrap; gap: 6px; }
.overview-directory .people-role { padding-left: 42px; font-size: 11px; }
.overview-directory .member-identity-text { min-width: 0; }
.overview-directory .member-identity-text :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-section { border-color: transparent; padding: 20px; }
.employee-table-scroll { padding: 16px; }
.columns-rail { gap: 16px; padding: 20px; }
.kanban-column { flex: 1 0 286px; max-width: 440px; background: var(--surface-card); border: 0; box-shadow: none; padding: 10px; border-radius: var(--radius-lg); }
.kanban-column:hover { box-shadow: none; }
.add-column { flex: 0 0 220px; max-width: 220px; }
.column-header { border-radius: var(--radius); padding: 12px 10px; margin-bottom: 8px; background: var(--surface-inset); }
.status-todo > .column-header { background: var(--ref-stone); }
.status-active > .column-header { background: var(--ref-yellow); }
.status-done > .column-header { background: var(--ref-green); }
.column-header .status-pill { background: transparent; padding: 0; }
.column-title, .column-title-form input { font-size: var(--text-caption); font-weight: 500; text-transform: none; }
.kanban-card { background: var(--surface-inset); box-shadow: none; border-color: transparent; border-radius: var(--radius); }
.kanban-card:hover { border-color: var(--ref-taupe); box-shadow: none; }
.drawer, .custom-rate-dialog, .catalog-delete-dialog { background: var(--surface-card); border-radius: var(--radius-lg); }
.drawer-header { background: var(--ref-cream); }
.drawer-backdrop { backdrop-filter: none; background: rgb(48 44 40 / .28); }
.drawer :is(input, select, textarea):focus { box-shadow: none; }
.drawer-header h2 { color: var(--ink); font-weight: 500; }
.section-token-chip { background: var(--ref-sand); color: var(--ink); font-weight: 500; }
.auth-card, .auth-panel, .overview-popover { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Shared headings for rates, proposals and project plan/fact. */
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.page-title, .proposal-builder-head) {
  align-items: center; flex-wrap: wrap; gap: 18px; background: transparent;
  border-radius: 0; padding: 4px 0 20px; margin-bottom: 20px;
}
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.page-title, .proposal-builder-head) > div:first-child { min-width: 0; flex: 1 1 360px; }
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.page-title h1, .proposal-title-input) {
  width: 100%; max-width: 100%; min-width: 0; color: var(--blue-ink);
  font-size: var(--text-display); font-weight: 500; line-height: 1.2; letter-spacing: -.03em;
}
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.proposal-kicker, .proposal-project-dates b) { color: var(--blue-ink); font-weight: 500; text-transform: none; letter-spacing: 0; }
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.proposal-head-actions, .page-actions) { min-width: 0; flex-wrap: wrap; align-self: center; }
:is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.table-page, .proposal-builder) { padding-top: 24px; }
.project-estimate-controls { background: var(--surface-card); border-color: transparent; border-radius: var(--radius); margin-bottom: 20px; }
.estimate-mode-switch { border-color: transparent; border-radius: 999px; background: var(--surface-card); }
.estimate-mode-switch button { min-width: 124px; border-radius: 999px; font-weight: 500; }
.estimate-mode-switch button.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: none; }

/* A single table geometry at every width. Scrolling belongs only to the wrapper. */
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table-scroll] { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-gutter: auto; }
.project-estimate-canvas { overflow: visible; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] { min-width: var(--ui-table-min-width); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is([data-ui-table-head], [data-ui-table-row]) { display: grid; grid-template-columns: var(--ui-table-columns); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] [data-ui-table-head] {
  min-height: var(--ui-table-head-height); align-items: center; gap: 0; border: 0; border-radius: 8px;
  background: var(--canvas); color: var(--muted); font-size: var(--ui-table-head-font-size);
  font-weight: 500; letter-spacing: 0; text-transform: none;
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] [data-ui-table-head] > * { min-width: 0; padding-inline: var(--ui-table-cell-padding); white-space: nowrap; font-size: var(--ui-table-head-font-size); font-weight: 500; text-transform: none; letter-spacing: 0; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] [data-ui-table-row] {
  min-height: var(--ui-table-row-height); padding: 0; gap: 0; border: 0;
  border-bottom: 1px solid var(--line-soft); border-radius: 0; background: var(--surface-card); box-shadow: none;
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] [data-ui-table-row]:hover { background: var(--surface-2); box-shadow: none; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is([data-ui-table-cell], [data-estimate-column]) {
  min-width: 0; min-height: 0; grid-column: auto; grid-row: auto;
  padding: 4px var(--ui-table-cell-padding); white-space: nowrap;
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is([data-ui-table-cell], [data-estimate-column])::before { content: none; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(input, select, output) { font-size: var(--ui-table-font-size); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] [data-ui-kind="number"], [data-estimate-column="total"] { font-variant-numeric: tabular-nums; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-cell { display: flex; align-items: center; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-cell > :is(input, select, output) {
  width: 100%; height: var(--ui-field-height); min-height: var(--ui-field-height); margin: 0;
  padding: 0 var(--ui-field-padding-inline); border: 1px solid transparent; border-radius: var(--radius-field);
  background: transparent; color: var(--ink); font-size: var(--ui-table-font-size); line-height: 1.4;
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-cell > output { display: block; line-height: calc(var(--ui-field-height) - 2px); overflow: hidden; text-overflow: ellipsis; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .rate-input input,
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .catalog-combobox > input {
  width: 100%; height: var(--ui-field-height); min-height: var(--ui-field-height);
  padding: 0 var(--ui-field-padding-inline); border: 1px solid transparent;
  border-radius: var(--radius-field); background: transparent; box-shadow: none;
  font: 400 var(--ui-table-font-size)/1.4 var(--font); color: var(--ink);
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.rate-input, .catalog-combobox) > input:is(:hover, :focus) { background: var(--surface-card); border-color: var(--line-strong); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-cell > :is(input, select):is(:hover, :focus) { background: var(--surface-card); border-color: var(--line-strong); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-shell { min-width: 0; grid-template-columns: var(--ui-table-control-rail) minmax(0, 1fr); gap: 0; align-items: center; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-row-controls { position: static; width: var(--ui-table-control-rail); height: var(--ui-table-row-height); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.proposal-rate-list, .rate-card-list, .estimate-rate-list) { gap: var(--ui-table-row-gap); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-grid-header { margin: 0 0 0 var(--ui-table-control-rail); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) :is([data-ui-table="proposal"], [data-ui-table="project-estimate"], [data-ui-table="rate-catalog"]) { border: 0; border-radius: var(--radius-lg); padding: 16px; background: var(--surface-card); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-group-header { background: transparent; border: 0; padding: 0 0 12px; gap: 8px; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.proposal-section-drag, .category-drag-handle) { color: var(--lilac-ink); background: var(--ref-lilac); border-radius: 10px; font-weight: 500; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .data-group-header :is(input, .estimate-section-title) { font-size: 16px; font-weight: 500; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.proposal-row-total, .estimate-table-emphasis) { font-weight: 600 !important; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .is-field-changed { background: var(--ref-peach) !important; border-color: color-mix(in srgb, var(--peach-ink) 22%, transparent) !important; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .is-added > [data-ui-table-row] { background: color-mix(in srgb, var(--ref-green) 30%, white); box-shadow: inset 2px 0 var(--success); }

/* Notes get a reserved column inside the work cell, never cover its label. */
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.proposal-work-cell, .work-cell, .has-detail-toggle) { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--ui-note-trigger-width); gap: 4px; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.proposal-work-cell, .work-cell, .has-detail-toggle) > :is(select, input, output),
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .work-cell > .catalog-combobox > input { padding-inline: var(--ui-field-padding-inline) !important; overflow: hidden; text-overflow: ellipsis; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.explanation-trigger, .estimate-detail-toggle) {
  position: static; display: grid; place-items: center; width: var(--ui-note-trigger-width); height: 30px;
  max-width: none; padding: 0; margin: 0; transform: none; border: 0; border-radius: 9px;
  background: var(--ref-lilac); color: var(--lilac-ink); font-size: 18px; font-weight: 500;
}
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] :is(.explanation-trigger, .estimate-detail-toggle):hover { background: var(--ref-blue); color: var(--blue-ink); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .proposal-work-cell:has(.proposal-rate-refresh-marker) { background: var(--ref-peach); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table].proposal-section > footer { margin-left: var(--ui-table-control-rail); flex-direction: row; align-items: center; padding-top: 14px; gap: 10px; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] .project-estimate-add-actions { margin-left: var(--ui-table-control-rail); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] footer :is(select, button) { height: var(--ui-control-height); font-size: var(--text-control); font-weight: 500; border-radius: var(--ui-control-radius); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] footer select { background: var(--surface-card); border-color: var(--line-strong); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] footer button { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card { border: 0; border-radius: var(--radius-lg); background: var(--surface-card); margin-left: 0; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card > div { flex-wrap: wrap; }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card .is-net { background: var(--ref-blue); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card .is-primary { background: var(--ref-vanilla); color: var(--lime-ink); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card .is-primary :is(strong, span) { color: var(--lime-ink); }
:is(.app-frame, #drawer-root, #rate-atlas-root, #root) .proposal-total-card > p { background: var(--ref-peach); color: var(--peach-ink); border-color: transparent; }

/* Directory and finance cells are single-line groups, including their subfields. */
[data-ui-table="employees"] .employee-person-cell strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui-table="employees"] .employee-table-professions { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui-table="employees"] .employee-table-professions > span { display: inline; padding: 0; border: 0; background: transparent; white-space: nowrap; }
[data-ui-table="employees"] .employee-table-professions > span + span::before { content: ", "; }
[data-ui-table="employees"] { gap: 0; }
[data-ui-table="admin"] .member-identity-text, [data-ui-table="fees"] .member-identity-text { display: flex; gap: 10px; min-width: 0; align-items: center; }
[data-ui-table="admin"] .member-identity-text :is(strong, small), [data-ui-table="fees"] .member-identity-text :is(strong, small) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui-table="admin"] [data-ui-table-cell] > .member-role-select { width: 155px; min-width: 0; }
:is(.app-frame, #drawer-root, #rate-atlas-root) [data-ui-table="admin"] [data-ui-table-cell] { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; width: auto; }
:is(.app-frame, #drawer-root, #rate-atlas-root) [data-ui-table="fees"] :is(.fee-work, .fee-row-calculation, .fee-money) { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; }
[data-ui-table="fees"] .fee-work-title { min-width: 0; flex: 1 1 50%; }
[data-ui-table="fees"] .fee-work-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui-table="fees"] .fee-comment-input { width: 50%; min-width: 0; }
[data-ui-table="fees"] .fee-inline-field { flex: 0 1 auto; min-width: 0; }
[data-ui-table="fees"] .fee-inline-field input { width: 70px; min-width: 0; }
[data-ui-table="fees"] .fee-rate-value, [data-ui-table="fees"] .fee-prepayment-field, [data-ui-table="fees"] .fee-paid-toggle { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* The same native top-layer note drawer serves Go forms and React portals. */
.ui-note-dialog {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh; margin: 0; padding: 24px; overflow-y: auto;
  border: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-overlay);
}
.ui-note-dialog:not([open]) { display: none !important; }
.ui-note-dialog[open], .project-estimate-workspace .ui-note-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 20px; padding: 24px; background: var(--surface-card); }
.ui-note-dialog::backdrop { background: rgb(48 44 40 / .28); }
.ui-note-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ui-note-header > div { min-width: 0; }
.ui-note-header small { display: inline-block; background: var(--ref-lilac); color: var(--lilac-ink); border-radius: 999px; padding: 5px 10px; font-size: var(--text-small); }
.ui-note-header h2 { margin: 16px 0 0; font-size: 24px; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.ui-note-close { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--canvas); color: var(--ink); font-size: 22px; cursor: pointer; }
.ui-note-close:hover { background: var(--ref-vanilla); }
.ui-note-dialog :is(.data-row-detail, .proposal-item-explanation, .rate-explanation-card) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: transparent; }
.ui-note-dialog :is(p, label, span) { white-space: normal; }
.ui-note-dialog :is(textarea, input:not([type="checkbox"])) { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); background: var(--surface-card); border-radius: var(--radius-field); font: inherit; line-height: 1.55; }
.ui-note-dialog textarea { min-height: 140px; resize: vertical; }
.ui-note-dialog[open] { font: 400 var(--text-control)/var(--leading-body) var(--font); }
.ui-note-dialog :is(.rate-explanation-card > label, .proposal-item-explanation > span) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--text-small); font-weight: 500; }
.ui-note-dialog :is(.rate-explanation-card > label, .proposal-item-explanation > span) small { flex: 0 0 auto; font: inherit; }
.ui-note-dialog :is(.rate-explanation-card > label, .proposal-item-explanation > span) b { font: inherit; }
.ui-note-dialog :is(label > span, .estimate-balance small) { font-size: var(--text-small); font-weight: 500; }
.ui-note-dialog[open] :is(textarea, input:not([type="checkbox"])) { font: 400 var(--text-control)/var(--leading-body) var(--font); }
.ui-note-dialog .proposal-rate-refresh-notice button { padding: 9px 14px; border: 0; border-radius: var(--ui-control-radius); color: var(--accent-ink); background: var(--accent); font: inherit; cursor: pointer; }
.ui-note-dialog .proposal-rate-refresh-notice { display: grid; gap: 12px; padding: 16px; border: 0; border-radius: var(--radius); background: var(--ref-peach); color: var(--peach-ink); }
.ui-note-dialog .estimate-balance { text-align: left; justify-content: start; }
.ui-note-dialog .estimate-paid-control { justify-items: start; }
.ui-note-dialog .estimate-plan-note > p { color: var(--ink-soft); line-height: var(--leading-body); }
@media (prefers-reduced-motion: no-preference) {
  .ui-note-dialog[open] { animation: ui-note-enter var(--motion-slow) var(--ease-out); }
  @keyframes ui-note-enter { from { opacity: .5; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
}

@media (max-width: 1200px) {
  .app-frame { --ui-rail-width: 64px; }
  .rail { align-items: center; padding: 20px 8px 14px; }
  .rail-brand-name, .rail-link-label, .rail-account-label { display: none; }
  .rail-link { justify-content: center; width: 44px; padding: 0; }
  .rail-account > summary { justify-content: center; }
  .overview-workspace { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 960px) {
  .app-frame, .app-frame-with-sidebar.is-workspace-nav-collapsed { grid-template-columns: var(--ui-rail-width) minmax(0, 1fr); }
  .workspace-nav { display: none; }
  .overview-workspace { grid-template-columns: minmax(0, 1fr); }
  .overview-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :is(#rate-atlas-root, #root) .proposal-app, :is(#rate-atlas-root, #root) .proposal-app.is-library-collapsed { grid-template-columns: minmax(0, 1fr); }
  :is(#rate-atlas-root, #root) .proposal-app { grid-template-rows: var(--ui-header-height) auto minmax(0, 1fr); }
  :is(#rate-atlas-root, #root) .proposal-app.is-library-collapsed { grid-template-rows: var(--ui-header-height) minmax(0, 1fr); }
  :is(#rate-atlas-root, #root) .proposal-library { width: 100%; }
  .overview-heading, .employee-directory-heading, .admin-layout > .page-heading { padding: 0; }
  .boards-layout, .admin-layout { width: calc(100% - 28px); }
  .overview-context { display: none; }
  .overview-search { width: 100%; }
  .overview-side { grid-template-columns: minmax(0, 1fr); }
  .overview-summary, .project-section, .overview-directory { padding: 16px; }
  .overview-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .overview-stat { padding: 14px; }
  .overview-stat strong { font-size: 28px; }
  :is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.page-title, .proposal-builder-head) { padding: 18px; gap: 14px; }
  :is(#rate-atlas-root, #root, #project-estimate-workspace) :is(.page-title, .proposal-builder-head) > div:first-child { flex-basis: auto; }
  :is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] > .data-group-header { grid-template-columns: 32px minmax(220px, 1fr) auto auto auto; }
  :is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table] > .data-group-header > * { grid-row: auto; grid-column: auto; }
  :is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table="project-estimate"] > .data-group-header > .estimate-section-total { grid-column: 4; }
  :is(.app-frame, #drawer-root, #rate-atlas-root, #root) [data-ui-table="rate-catalog"] > .data-group-header { grid-template-columns: 32px 10px minmax(220px, 1fr) auto auto; }
  .columns-rail { padding: 12px; }
  .kanban-column { flex: 0 0 min(310px, calc(100vw - 100px)); }
  .project-tile-link { min-height: 210px; }
}
@media (max-width: 520px) {
  .app-frame { --ui-rail-width: 48px; }
  .app-frame, .app-frame-with-sidebar.is-workspace-nav-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
  .rail-link { width: 36px; height: 40px; }
  .overview-stat:last-child:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
  .rail .brand-mark { width: 32px; height: 32px; }
  .account-popover { left: 8px; }
  .ui-note-dialog, .project-estimate-workspace .ui-note-dialog[open] { border-radius: 0; padding: 20px; }
  .board-actions { gap: 4px; }
}
@media (pointer: coarse) {
  [data-ui-table] .row-delete { opacity: 1; }
  [data-ui-table] :is(input, select), .ui-note-dialog :is(input, textarea, select) { font-size: 16px; }
  .ui-note-close { width: 44px; height: 44px; flex-basis: 44px; }
}