/* App-shell layout for the generic renderer. */

sq-app { display: block; min-height: 100vh; }

.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.sidebar {
  /* Shell / sidebar / page-header / primitives are re-declared and ELEVATED by the
     tranche-1 design layer (components.css) appended at the end of this file, which
     wins by source order. Superseded declarations that would otherwise leak through
     (components.css does not reset them) are trimmed at their source: here, the rail's
     right border — the elevated shell is a tinted canvas with an inset content card,
     no divider. Same reason the nav-label uppercase + .main max-width are trimmed below. */
  background: hsl(var(--card));
  padding: 1rem .75rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.brand { font-weight: 600; font-size: 1rem; padding: .25rem .5rem .75rem; display: flex; align-items: center; gap: .5rem; }
.brand .dot { width: .6rem; height: .6rem; border-radius: 9999px; background: hsl(var(--primary)); }
.nav-label { font-size: .7rem; color: hsl(var(--muted-foreground)); padding: .5rem .5rem .25rem; } /* uppercase/tracking trimmed → shadcn sentence-case group labels (components.css) */
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .5rem; border-radius: var(--radius); cursor: pointer; color: hsl(var(--foreground));
  font-size: .875rem;
}
.nav-item:hover { background: hsl(var(--accent)); }
.nav-item.active { background: hsl(var(--secondary)); font-weight: 500; }
.nav-item .count { font-size: .75rem; color: hsl(var(--muted-foreground)); }

.main { padding: 1.5rem 2rem; } /* max-width trimmed → the inset content card fills the grid column (components.css) */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-title { font-size: 1.375rem; }
.page-sub { color: hsl(var(--muted-foreground)); font-size: .875rem; margin-top: .15rem; }

.empty {
  border: 1px dashed hsl(var(--border)); border-radius: var(--radius);
  padding: 3rem 1rem; text-align: center; color: hsl(var(--muted-foreground));
}

.toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.toolbar .search { max-width: 280px; }

/* Wide tables (many columns) scroll horizontally inside the card instead of
   spilling their rightmost cells (e.g. the row actions) past the layout. */
.table-wrap { overflow-x: auto; }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: hsl(var(--foreground)); }
.sort-ind { margin-left: .3rem; vertical-align: middle; }
/* Sign-in / claim screen (client onboarding): a centered card. */
.signin-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.signin-card { width: 100%; max-width: 22rem; padding: 1.5rem; }
.signin-card label { display: block; font-size: .8rem; margin-bottom: .15rem; }
.signin-card .input { width: 100%; }
.signin-or { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; color: hsl(var(--muted-foreground)); font-size: .8rem; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }
/* Signed-in user footer in the sidebar (client onboarding). */
.nav-user { margin-top: .5rem; padding: .6rem .5rem; border-top: 1px solid hsl(var(--border)); font-size: .8rem; }
.nav-user-email { display: block; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .25rem; }
/* Self-documenting landing (sq-landing): a product page generated from the spec. */
.landing { max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
.landing-hero { text-align: center; padding: 2.5rem 1rem 2rem; }
.landing-hero h1 { font-size: 2rem; margin: .5rem 0 .25rem; }
.landing-tagline { color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; }
.landing-groups { display: grid; gap: 1.5rem; }
.landing-group h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.landing-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.landing-feat { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .7rem .85rem; background: hsl(var(--card)); }
.landing-feat-title { font-weight: 600; font-size: .9rem; }
.landing-feat .muted { font-size: .8rem; margin-top: .15rem; }
.landing-cta { text-align: center; margin-top: 2rem; }
/* Landing follow-ons: demo video + screenshots gallery + the owner editor. */
.landing-video { max-width: 44rem; margin: 0 auto 2rem; }
.landing-iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid hsl(var(--border)); display: block; background: #000; }
.landing-shots { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 2rem; }
.landing-shot { max-height: 180px; max-width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--border)); object-fit: cover; }
.landing-shot-edit { position: relative; display: inline-flex; }
.landing-shot-edit .btn { position: absolute; top: .25rem; right: .25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); padding: .15rem .3rem; }
.landing-edit-bar { text-align: center; margin-bottom: 1.5rem; }
.landing-editor { max-width: 40rem; margin: 0 auto 2rem; padding: 1.25rem; text-align: left; }
.landing-embedded .landing-video, .landing-embedded .landing-editor { margin-left: 0; }
/* Inline Lucide icons (icons.js): sized to the text, baseline-aligned, OS-identical. */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }
.icon.ok { color: hsl(142 70% 38%); }
.sort-ind .icon { width: .8em; height: .8em; vertical-align: middle; }

/* Inline data links (email / url / file names) — shadcn-style: foreground text with a
   subtle underline that darkens on hover, never the default browser blue. Buttons styled as
   links (.btn) keep their own look; image-preview links (wrapping an <img>) opt out. */
a:not(.btn) {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-decoration-color: hsl(var(--border));
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
a:not(.btn):hover { text-decoration-color: hsl(var(--foreground)); }
a:not(.btn):has(img) { text-decoration: none; }

/* The spec-derived feature tour shown INSIDE the app (the "Features" nav item), vs the
   full-bleed pre-auth landing: left-aligned, tighter hero, fills the main column. */
.landing-embedded { padding-top: 0; }
.landing-embedded .landing-hero { text-align: left; padding: .25rem 0 1.5rem; }
.landing-embedded .landing-hero h1 { font-size: 1.5rem; }

/* Keep the row actions on one line so the column doesn't wrap when space is tight. */
.table td .row-actions { white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: space-between; margin-top: .85rem; }
.pager-btns { display: flex; gap: .5rem; }

.row-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* Slide-over form panel */
.overlay { position: fixed; inset: 0; background: hsl(0 0% 0% / .4); display: flex; justify-content: flex-end; z-index: 50; }
.panel {
  width: min(420px, 100%); height: 100%; background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border)); padding: 1.5rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.form-grid { display: flex; flex-direction: column; gap: .9rem; }
.form-section { font-weight: 600; font-size: .95rem; color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); padding-bottom: .3rem; margin-top: .4rem; }
.form-section:first-child { margin-top: 0; }
.field-help { color: hsl(var(--muted-foreground)); font-size: .8rem; margin-top: .25rem; }
.comment-row { padding: .5rem 0; border-top: 1px solid hsl(var(--border)); }
.comment-row:first-of-type { border-top: none; }
.comment-meta { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.comment-author { font-weight: 600; }
.comment-del { margin-left: auto; padding: .1rem .3rem; }
.comment-body { white-space: pre-wrap; margin-top: .15rem; }
.tl-card { padding: 1rem; }
.tl-axis { display: flex; justify-content: space-between; font-size: .75rem; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); padding-bottom: .4rem; margin-bottom: .5rem; margin-left: 12rem; }
.tl-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; cursor: pointer; border-radius: var(--radius); }
.tl-row:hover { background: hsl(var(--muted)); }
.tl-label { width: 11.5rem; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.tl-track { position: relative; flex: 1; height: 1.4rem; background: hsl(var(--muted)); border-radius: var(--radius); }
.tl-bar { position: absolute; top: .2rem; height: 1rem; min-width: 3px; background: hsl(var(--primary)); border-radius: 999px; }
.tl-bar.fmt-red { background: #ef4444; } .tl-bar.fmt-amber { background: #f59e0b; } .tl-bar.fmt-green { background: #22c55e; } .tl-bar.fmt-blue { background: #3b82f6; } .tl-bar.fmt-gray { background: #6b7280; }
.assist-ops { background: hsl(var(--muted)); padding: .5rem; border-radius: var(--radius); font-size: .78rem; overflow-x: auto; max-height: 16rem; margin: .5rem 0; }
.notif-badge { margin-left: auto; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 999px; font-size: .7rem; min-width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem; }
.notif-row { padding: .55rem .5rem; border-radius: var(--radius); cursor: pointer; border-bottom: 1px solid hsl(var(--border)); }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: hsl(var(--muted)); }
.notif-row.unread { background: color-mix(in srgb, hsl(var(--primary)) 8%, transparent); }
.notif-row.unread .notif-body { font-weight: 600; }
.notif-meta { font-size: .75rem; margin-top: .15rem; }
.panel-actions { display: flex; gap: .5rem; margin-top: .5rem; }

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .main { padding: 1rem; }
}

/* ---- board (kanban) view (S12) ---- */
.board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.board-col { flex: 0 0 264px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .6rem; min-height: 120px; }
.board-col-head { font-weight: 600; font-size: .85rem; margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; }
.board-card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); padding: .55rem .65rem; margin-bottom: .5rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.board-card:active { cursor: grabbing; }
.board-col-head .count.wip-over { color: hsl(var(--destructive)); font-weight: 700; }
/* swimlanes: a grid of a label column + N group columns × M swimlane rows */
.board-swim { display: grid; gap: .5rem .75rem; align-items: start; overflow-x: auto; padding-bottom: 1rem; }
.swim-colhead { font-weight: 600; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .1rem; }
.swim-label { font-weight: 600; font-size: .8rem; color: hsl(var(--muted-foreground)); display: flex; align-items: center; padding-top: .5rem; }
.swim-cell { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .5rem .5rem .05rem; min-height: 54px; }

/* pivot (cross-tab) */
.pivot-wrap { overflow-x: auto; }
.pivot { border-collapse: collapse; font-size: .875rem; }
.pivot th, .pivot td { border: 1px solid hsl(var(--border)); padding: .4rem .7rem; text-align: right; white-space: nowrap; }
.pivot thead th, .pivot .pivot-row, .pivot .pivot-corner { text-align: left; background: hsl(var(--muted)); font-weight: 600; }
.pivot .pivot-corner { color: hsl(var(--muted-foreground)); font-weight: 500; }
.pivot tbody td { background: hsl(var(--card)); }
.pivot .pivot-zero { color: hsl(var(--muted-foreground)); }
.pivot .pivot-total { background: hsl(var(--muted)); font-weight: 600; }
.pivot .pivot-grand { background: hsl(var(--accent)); }

/* ---- dashboard stat cards (S12) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.stat-card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: hsl(var(--muted-foreground)); font-size: .85rem; margin-top: .35rem; }

/* ---- gallery (card grid, §5.2) ---- */
/* §5.2 gallery: CSS-columns masonry — cards flow by natural image height (Pinterest-style),
   varying-aspect photos pack tightly; break-inside keeps a card whole. */
.gallery { columns: 220px auto; column-gap: 1rem; }
.gallery-card {
  break-inside: avoid; margin: 0 0 1rem; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  transition: box-shadow .15s ease, transform .15s ease;
}
.gallery-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); transform: translateY(-2px); }
.gallery-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
/* natural image height → masonry packing; a placeholder keeps a 4:3 box so text-only cards aren't tiny. */
.gallery-img { background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-img img { width: 100%; height: auto; display: block; }
.gallery-img-ph { aspect-ratio: 4 / 3; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: hsl(var(--muted-foreground)); }
.gallery-body { padding: .7rem .8rem; }
.gallery-title { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-sub { color: hsl(var(--muted-foreground)); font-size: .8rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- calendar: month / week / agenda (§5.2) ---- */
.cal-toolbar { display: flex; align-items: center; gap: .75rem; }
.cal-nav, .cal-modes { display: flex; gap: .25rem; }
/* month */
.cal-month { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: hsl(var(--muted)); }
.cal-dow > div { padding: .45rem .5rem; font-size: .72rem; font-weight: 600; text-align: right; color: hsl(var(--muted-foreground)); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(98px, 1fr); }
.cal-cell { border-top: 1px solid hsl(var(--border)); border-left: 1px solid hsl(var(--border)); padding: .3rem; min-height: 98px; overflow: hidden; cursor: pointer; }
.cal-cell:hover { background: hsl(var(--accent) / .4); }
.cal-cell:nth-child(7n+1) { border-left: 0; }
.cal-out { background: hsl(var(--muted) / .4); }
.cal-out .cal-daynum { color: hsl(var(--muted-foreground)); }
.cal-daynum { font-size: .78rem; text-align: right; padding: .05rem .2rem; }
.cal-today { box-shadow: inset 0 0 0 2px hsl(var(--primary)); }
.cal-evs { display: flex; flex-direction: column; gap: 2px; margin-top: .15rem; }
.cal-chip { font-size: .72rem; background: hsl(var(--primary) / .12); border-left: 3px solid hsl(var(--primary)); border-radius: 3px; padding: 1px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip:hover { background: hsl(var(--primary) / .2); }
.cal-chip-t { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.cal-more { font-size: .7rem; color: hsl(var(--muted-foreground)); padding: 0 4px; cursor: default; }
/* week */
.cal-week { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.cal-week-head, .cal-allday { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
.cal-week-head { background: hsl(var(--muted)); }
.cal-wday { padding: .45rem; font-size: .76rem; font-weight: 600; text-align: center; border-left: 1px solid hsl(var(--border)); }
.cal-wday.cal-today { color: hsl(var(--primary)); box-shadow: none; }
.cal-gutter { font-size: .66rem; color: hsl(var(--muted-foreground)); padding: .2rem; text-align: right; }
.cal-allday { border-top: 1px solid hsl(var(--border)); min-height: 26px; }
.cal-allday-col { border-left: 1px solid hsl(var(--border)); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.cal-week-body { display: grid; grid-template-columns: 56px repeat(7, 1fr); max-height: 60vh; overflow-y: auto; border-top: 1px solid hsl(var(--border)); }
.cal-hours { display: flex; flex-direction: column; }
.cal-hour { border-top: 1px solid hsl(var(--border) / .5); font-size: .64rem; color: hsl(var(--muted-foreground)); padding: 1px 4px 0 0; text-align: right; box-sizing: border-box; }
.cal-day-col { position: relative; border-left: 1px solid hsl(var(--border)); }
.cal-hline { position: absolute; left: 0; right: 0; border-top: 1px solid hsl(var(--border) / .5); }
.cal-event { position: absolute; left: 2px; right: 2px; overflow: hidden; font-size: .72rem; line-height: 1.25; background: hsl(var(--primary) / .16); border-left: 3px solid hsl(var(--primary)); border-radius: 3px; padding: 1px 4px; cursor: pointer; box-sizing: border-box; }
.cal-event:hover { background: hsl(var(--primary) / .26); }
/* agenda */
.cal-agenda { display: flex; flex-direction: column; }
.cal-agenda-day { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; padding: .6rem 0; border-top: 1px solid hsl(var(--border)); }
.cal-agenda-date { font-weight: 600; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.cal-agenda-items { display: flex; flex-direction: column; gap: .3rem; }
.cal-agenda-item { display: flex; gap: .75rem; align-items: baseline; padding: .35rem .5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; }
.cal-agenda-item:hover { background: hsl(var(--muted) / .5); }
.cal-agenda-time { font-size: .78rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; min-width: 4rem; }
.cal-agenda-label { font-size: .9rem; }

/* ---- conditional format rules (§5.2): a curated semantic palette → tint / badge ---- */
.fmt-red   { --fmt: 0 72% 45%; }
.fmt-amber { --fmt: 35 92% 40%; }
.fmt-green { --fmt: 142 64% 32%; }
.fmt-blue  { --fmt: 217 80% 48%; }
.fmt-gray  { --fmt: 220 9% 42%; }
/* tint: a subtle background wash on a cell, a whole row's cells, or a board/gallery card */
td.fmt-tint { background: hsl(var(--fmt) / .12); }
tr.fmt-tint td { background: hsl(var(--fmt) / .09); }
.board-card.fmt-tint, .gallery-card.fmt-tint { background: hsl(var(--fmt) / .12); }
/* badge on a whole record: a colored left accent (a row's first cell, or a card's edge) */
tr.fmt-badge td:first-child { box-shadow: inset 3px 0 0 hsl(var(--fmt)); }
.board-card.fmt-badge, .gallery-card.fmt-badge { border-left: 3px solid hsl(var(--fmt)); }
/* pill: a single cell value rendered as a colored badge */
.fmt-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 500; background: hsl(var(--fmt) / .15); color: hsl(var(--fmt)); }
/* calendar: a formatted event/chip adopts the rule color (bg wash + left accent) */
.cal-chip.fmt, .cal-event.fmt { background: hsl(var(--fmt) / .18); border-left-color: hsl(var(--fmt)); }
/* polymorphic relations (§5.1): the target-picker chips + the reverse annotation list */
.poly-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.poly-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .55rem; border-radius: 999px; font-size: .82rem; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.poly-chip .btn { padding: .05rem .2rem; height: auto; }
/* positionable mixin (§5.1): draggable rows show a move cursor */
.row-draggable { cursor: move; }
.row-draggable:hover { background: hsl(var(--muted) / .4); }

/* ---- color + rating field types (P5) ---- */
.color-input { display: inline-flex; align-items: center; gap: .5rem; }
.color-input input[type=color] { width: 2.5rem; height: 2rem; padding: 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: none; cursor: pointer; }
.color-input .input { width: 8rem; }
.color-cell { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.color-swatch { width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid hsl(var(--border)); display: inline-block; flex: none; }
.rating-input { display: inline-flex; gap: .1rem; }
.rating-input .star { background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: hsl(var(--muted-foreground) / .4); padding: 0 1px; }
.rating-input .star.on, .rating-input .star:hover, .rating-cell .star.on { color: hsl(38 92% 50%); }
/* Lucide-icon rating stars: an "on"/hover star is FILLED, an empty star stays an outline (svg fill=none). */
.rating-input .star.on .icon, .rating-input .star:hover .icon, .rating-cell .star.on .icon { fill: currentColor; }
.remote-cursor .icon { fill: currentColor; } /* the live remote cursor is a solid, per-user-colored pointer */
.rating-cell { color: hsl(var(--muted-foreground) / .35); letter-spacing: 1px; white-space: nowrap; }

/* ---- mobile / field-capture widgets (§5.1) ---- */
.draw-field { display: inline-flex; flex-direction: column; gap: .35rem; }
.draw-has { font-size: .85rem; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: .3rem; }
.draw-canvas { border: 1px dashed hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); touch-action: none; cursor: crosshair; max-width: 100%; }
.draw-actions { display: inline-flex; gap: .4rem; }
.barcode-field { display: inline-flex; flex-direction: column; gap: .35rem; }
.barcode-row { display: flex; gap: .4rem; align-items: center; }
.barcode-video { max-width: 320px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: #000; }
.barcode-err { color: hsl(var(--destructive, 0 72% 51%)); }
.geo-field { display: inline-flex; flex-direction: column; gap: .35rem; }
.geo-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.geo-num { width: 8rem; }
.geo-map { height: 260px; width: 100%; max-width: 440px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.camera-field { display: inline-flex; flex-direction: column; gap: .35rem; }
.camera-actions { display: inline-flex; gap: .4rem; align-items: center; }
.camera-video { max-width: 360px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: #000; }

/* ---- theme gallery (§5.2) ---- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.theme-card { text-align: left; cursor: pointer; padding: 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--card-foreground)); overflow: hidden; display: flex; flex-direction: column; font: inherit; }
.theme-card:hover { border-color: hsl(var(--ring)); }
.theme-card.sel { outline: 2px solid hsl(var(--primary)); outline-offset: -1px; border-color: hsl(var(--primary)); }
.theme-swatch { height: 46px; width: 100%; }
.theme-name { font-weight: 600; font-size: .85rem; padding: .5rem .6rem 0; }
.theme-desc { font-size: .75rem; padding: .1rem .6rem .6rem; }

/* ---- command palette (Cmd-K global search, §10) ---- */
.nav-search { display: flex; align-items: center; gap: .5rem; margin: .1rem .25rem .5rem; padding: .4rem .55rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); color: hsl(var(--muted-foreground)); font-size: .85rem; cursor: pointer; }
.nav-search:hover { background: hsl(var(--muted) / .5); }
.nav-search .kbd { margin-left: auto; font-size: .72rem; border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 0 .3rem; }
.palette-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1000; }
.palette { width: min(560px, 92vw); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); box-shadow: 0 16px 48px rgba(0,0,0,.25); overflow: hidden; }
.palette-input { width: 100%; border: 0; border-bottom: 1px solid hsl(var(--border)); padding: .9rem 1rem; font-size: 1rem; background: transparent; color: hsl(var(--foreground)); outline: none; box-sizing: border-box; }
.palette-list { max-height: 52vh; overflow-y: auto; padding: .35rem; }
.palette-empty { padding: 1.25rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .9rem; }
.palette-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius); cursor: pointer; }
.palette-item.active { background: hsl(var(--primary) / .12); }
.palette-kind { width: 1.1rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .85rem; flex: none; }
.palette-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { color: hsl(var(--muted-foreground)); font-size: .78rem; flex: none; }

/* ---- master-detail child grid (§5.2) ---- */
.child-grid { margin: .25rem 0 .5rem; border-top: 1px solid hsl(var(--border)); padding-top: .75rem; }
.child-grid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.child-table th { font-size: .72rem; }
.child-table td { padding: .2rem .35rem; }
.child-table .input, .child-table .select, .child-table .textarea { font-size: .85rem; padding: .3rem .4rem; }

/* ---- curated demo-grade views: hero / metrics chart / map (S32, §5.2) ---- */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem;
  padding: 4rem 1.5rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, hsl(var(--secondary) / .5), hsl(var(--card)));
}
.hero-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.hero-title { font-size: 2.5rem; line-height: 1.1; max-width: 22ch; }
.hero-sub { color: hsl(var(--muted-foreground)); font-size: 1.05rem; max-width: 52ch; margin: 0; }
.hero-cta { margin-top: .5rem; height: 2.6rem; padding: 0 1.4rem; }
.hero-img { margin-top: 1.5rem; max-width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--border)); }

.chart-card { padding: 1.1rem 1.25rem; margin-top: 1rem; }
.chart-title { font-weight: 600; font-size: .9rem; margin-bottom: .9rem; }
.bar-chart { display: flex; align-items: flex-end; gap: .6rem; height: 200px; padding-top: 1.25rem; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar { width: 70%; min-height: 2px; background: hsl(var(--primary)); border-radius: 4px 4px 0 0; transition: height .3s; }
.bar-val { font-size: .75rem; font-weight: 600; margin-bottom: .25rem; color: hsl(var(--foreground)); }
.bar-lbl { font-size: .72rem; color: hsl(var(--muted-foreground)); margin-top: .4rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.map-plane {
  position: relative; height: 420px; margin-top: .5rem; overflow: hidden;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background:
    linear-gradient(hsl(var(--border) / .35) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, hsl(var(--border) / .35) 1px, transparent 1px) 0 0 / 40px 100%,
    hsl(var(--muted) / .4);
}
.map-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3rem; }
.map-dot { width: .8rem; height: .8rem; border-radius: 9999px; background: hsl(var(--primary)); border: 2px solid hsl(var(--background)); box-shadow: 0 1px 3px rgba(0,0,0,.3); flex: 0 0 auto; }
.map-label { font-size: .72rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 9999px; padding: 0 .4rem; color: hsl(var(--foreground)); white-space: nowrap; }

.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; }

/* ---- aichat (in-app AI assistant) (S35, §5.3/§11) ---- */
.chat { display: flex; flex-direction: column; height: 70vh; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.chat-msg { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.chat-user { align-items: flex-end; }
.chat-bubble { max-width: 80%; padding: .5rem .75rem; border-radius: var(--radius); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .9rem; white-space: pre-wrap; }
.chat-user .chat-bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.chat-error .chat-bubble { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.proposal-card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .6rem .75rem; background: hsl(var(--card)); display: flex; flex-direction: column; gap: .5rem; max-width: 80%; }
.proposal-sum { font-size: .85rem; font-weight: 500; }
.chat-input { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid hsl(var(--border)); }
.chat-input .input { flex: 1; }

/* RAG doc-search: citation chips under an answer (click → open the source record). */
.rag-sources { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.rag-source { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .75rem; cursor: pointer; }
.rag-source:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

/* reactive v2: presence badge + live remote cursors */
.presence-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .35rem; margin-left: .45rem; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .7rem; font-weight: 600; }
.remote-cursor { position: fixed; z-index: 9999; pointer-events: none; font-size: 15px; transform: translate(-1px, -2px); transition: left .08s linear, top .08s linear; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Offline/local-first banner (P5): connectivity + pending-sync notices. */
.offline-banner { padding: .5rem .75rem; margin: 0 0 .75rem; border-radius: var(--radius); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .85rem; }
.offline-banner.ok { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Tier-2 morphic editor (P5): in-place block selection + property drawer. Outline (not
   border) so selecting a block never shifts the layout. */
.morphic-bar { display: flex; gap: .5rem; align-items: center; margin: 0 0 .5rem; flex-wrap: wrap; }
/* In edit mode a block is a flex row: a hover-revealed gutter (+ / drag-handle) beside the
   content. The content stays inline-editable (contenteditable), so clicking the text places
   the cursor instead of opening the drawer — the handle selects, the "+" slash-inserts. */
.morphic-block { display: flex; align-items: flex-start; gap: .15rem; position: relative; }
.morphic-content { flex: 1 1 auto; min-width: 0; }
.morphic-content:hover { outline: 1px dashed hsl(var(--ring)); outline-offset: 2px; }
.morphic-gutter { flex: 0 0 auto; display: flex; gap: 1px; opacity: 0; padding-top: .2rem; transition: opacity .1s; }
.morphic-block:hover > .morphic-gutter { opacity: .65; }
.morphic-gutter:hover { opacity: 1 !important; }
.morphic-plus, .morphic-handle { border: none; background: none; color: hsl(var(--muted-foreground)); border-radius: 3px; font-size: .8rem; line-height: 1; padding: .1rem .2rem; }
.morphic-plus { cursor: pointer; font-weight: 600; }
.morphic-handle { cursor: grab; letter-spacing: -2px; }
.morphic-plus:hover, .morphic-handle:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.morphic-sel { outline: 2px solid hsl(var(--primary)) !important; outline-offset: 1px; }
.morphic-drag { opacity: .5; }
.morphic-drop { outline: 2px dashed hsl(var(--primary)) !important; outline-offset: 1px; }
.morphic-drawer { position: fixed; top: 0; right: 0; width: 320px; max-width: 90vw; height: 100vh; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-left: 1px solid hsl(var(--border)); box-shadow: -4px 0 16px rgba(0,0,0,.08); padding: 1rem; overflow-y: auto; z-index: 50; }
.morphic-palette { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.morphic-dropzone { font-size: .7rem; text-align: center; padding: .35rem; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); opacity: .5; }
.morphic-dropzone:hover { opacity: 1; border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.morphic-add-end { margin: .4rem 0; }

/* Notion-style block doc (§5.2): a `doc` view kind is a narrow prose column of rich blocks
   (text/heading/list/todo/quote/callout/code), inline-editable, with a slash-insert menu. The
   fixed renderer interprets the block tree — the blocks are authored via the 6 ops like any
   layout, so a doc is data, not app-specific code. */
.doc-page { max-width: 740px; margin: 0 auto; padding: .5rem 0; counter-reset: docnum; }
.doc-page h1 { font-size: 1.9rem; margin: 1rem 0 .3rem; }
.doc-page h2 { font-size: 1.45rem; margin: .9rem 0 .25rem; }
.doc-page h3 { font-size: 1.15rem; margin: .7rem 0 .2rem; }
.doc-p { margin: .12rem 0; line-height: 1.65; }
.doc-li { position: relative; padding-left: 1.6rem; margin: .12rem 0; line-height: 1.65; }
.doc-bullet::before { content: "•"; position: absolute; left: .5rem; }
.doc-num { counter-increment: docnum; }
.doc-num::before { content: counter(docnum) "."; position: absolute; left: 0; width: 1.3rem; text-align: right; color: hsl(var(--muted-foreground)); }
.doc-todo { display: flex; align-items: flex-start; gap: .5rem; margin: .12rem 0; line-height: 1.65; }
.doc-todo input { margin-top: .35rem; }
.doc-done { text-decoration: line-through; opacity: .55; }
.doc-quote { border-left: 3px solid hsl(var(--border)); padding-left: .8rem; margin: .4rem 0; color: hsl(var(--muted-foreground)); font-style: italic; }
.doc-callout { display: flex; gap: .5rem; background: hsl(var(--muted)); border-radius: var(--radius); padding: .6rem .8rem; margin: .3rem 0; }
.doc-callout-icon { flex: 0 0 auto; }
.doc-code { background: hsl(var(--muted)); border-radius: var(--radius); padding: .6rem .8rem; margin: .3rem 0; overflow-x: auto; }
.doc-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; white-space: pre; }
.doc-editable { outline: none; display: inline-block; min-width: 3rem; }
.doc-editable:empty::before { content: attr(data-ph); color: hsl(var(--muted-foreground)); opacity: .55; }

/* Slash-insert menu: a filterable block palette shown at the cursor (Notion "/"). */
.slash-menu { position: relative; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: .4rem; margin: .3rem 0; max-width: 280px; z-index: 30; }
.slash-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; margin-top: .35rem; }
.slash-item { display: flex; gap: .6rem; align-items: center; text-align: left; background: none; border: none; padding: .35rem .5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: inherit; font-size: .85rem; }
.slash-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.slash-item > :first-child { display: inline-block; width: 1.4rem; text-align: center; color: hsl(var(--muted-foreground)); }

/* Inline @-mentions + backlinks (§11, the Obsidian linked-mentions analog). A mention token
   renders as a clickable chip; the @-autocomplete menu + the "what links here" panel below. */
.mention { color: hsl(var(--primary)); background: hsl(var(--primary) / .08); border-radius: 4px; padding: 0 .25rem; cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none; }
.mention:hover { background: hsl(var(--primary) / .16); text-decoration: underline; }
.mention-input { position: relative; }
.mention-menu { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 240px; max-width: 340px; margin-top: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: .3rem; max-height: 240px; overflow-y: auto; }
.mention-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: .35rem .5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: inherit; font-size: .85rem; }
.mention-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.backlink-row { padding: .4rem .5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
.backlink-row:hover { background: hsl(var(--accent)); }

/* shadcn-parity presentation primitives (§5.2), recreated as native Tier-2 blocks — themed
   from the design tokens (theme/dark-safe). Semantic hues are local so they hold in dark mode. */
:root { --ok: 142 71% 40%; --warn: 38 92% 48%; --info: 217 91% 55%; }
.sq-card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.sq-card-head { padding: .8rem 1rem .2rem; }
.sq-card-title { font-weight: 600; font-size: 1rem; }
.sq-card-sub { color: hsl(var(--muted-foreground)); font-size: .82rem; margin-top: .1rem; }
.sq-card-body { padding: .7rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.sq-stat { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); padding: .75rem .9rem; min-width: 8rem; }
.sq-stat-label { color: hsl(var(--muted-foreground)); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.sq-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin-top: .15rem; }
.sq-stat-delta { font-size: .8rem; margin-top: .1rem; color: hsl(var(--muted-foreground)); }
.sq-stat-delta.stat-up { color: hsl(var(--ok)); }
.sq-stat-delta.stat-down { color: hsl(var(--destructive)); }
.sq-alert { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid hsl(var(--border)); border-left-width: 3px; border-radius: var(--radius); padding: .6rem .8rem; background: hsl(var(--card)); }
.sq-alert-icon { font-weight: 700; line-height: 1.4; }
.sq-alert-title { font-weight: 600; margin-bottom: .1rem; }
.sq-alert-info { border-left-color: hsl(var(--info)); } .sq-alert-info .sq-alert-icon { color: hsl(var(--info)); }
.sq-alert-success { border-left-color: hsl(var(--ok)); } .sq-alert-success .sq-alert-icon { color: hsl(var(--ok)); }
.sq-alert-warning { border-left-color: hsl(var(--warn)); } .sq-alert-warning .sq-alert-icon { color: hsl(var(--warn)); }
.sq-alert-destructive { border-left-color: hsl(var(--destructive)); } .sq-alert-destructive .sq-alert-icon { color: hsl(var(--destructive)); }
.sq-badge { display: inline-block; align-self: flex-start; width: fit-content; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; line-height: 1.4; border: 1px solid transparent; }
.sq-badge-default, .sq-badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.sq-badge-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sq-badge-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.sq-badge-success { background: hsl(var(--ok) / .15); color: hsl(var(--ok)); }
.sq-badge-info { background: hsl(var(--info) / .15); color: hsl(var(--info)); }
.sq-badge-warning { background: hsl(var(--warn) / .18); color: hsl(var(--warn)); }
.sq-badge-destructive { background: hsl(var(--destructive) / .15); color: hsl(var(--destructive)); }
.sq-progress-wrap { display: flex; flex-direction: column; gap: .25rem; }
.sq-progress-label { display: flex; justify-content: space-between; font-size: .78rem; color: hsl(var(--muted-foreground)); }
.sq-progress { height: .5rem; background: hsl(var(--muted)); border-radius: 999px; overflow: hidden; }
.sq-progress-bar { height: 100%; background: hsl(var(--primary)); border-radius: 999px; transition: width .3s ease; }
.sq-tabs-list { display: flex; gap: .15rem; border-bottom: 1px solid hsl(var(--border)); }
.sq-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .4rem .8rem; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: .85rem; font-weight: 500; margin-bottom: -1px; }
.sq-tab:hover { color: hsl(var(--foreground)); }
.sq-tab.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); }
.sq-tabs-panel { padding: .7rem 0; display: flex; flex-direction: column; gap: .5rem; }
/* accordion — collapsible sections */
.sq-accordion { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.sq-acc-item + .sq-acc-item { border-top: 1px solid hsl(var(--border)); }
.sq-acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: none; border: none; padding: .6rem .85rem; cursor: pointer; color: hsl(var(--foreground)); font-size: .9rem; font-weight: 500; text-align: left; }
.sq-acc-head:hover { background: hsl(var(--accent)); }
.sq-acc-chev { color: hsl(var(--muted-foreground)); font-size: .8rem; }
.sq-acc-panel { padding: .2rem .85rem .8rem; display: flex; flex-direction: column; gap: .5rem; }
/* dialog — a trigger button opening a modal over a backdrop */
.sq-dialog-wrap { display: inline-block; }
.sq-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }
.sq-dialog { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.28); width: 100%; max-width: 30rem; max-height: 85vh; overflow-y: auto; }
.sq-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .9rem 1rem .3rem; }
.sq-dialog-title { font-weight: 600; font-size: 1.05rem; }
.sq-dialog-x { background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: .95rem; line-height: 1; padding: .1rem .25rem; }
.sq-dialog-x:hover { color: hsl(var(--foreground)); }
.sq-dialog-body { padding: .4rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.sq-dialog-inline { border: 1px dashed hsl(var(--border)); border-radius: var(--radius); padding: .5rem .7rem; margin-top: .35rem; display: flex; flex-direction: column; gap: .5rem; }
/* avatar — image or initials circle */
.sq-avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.sq-avatar-initials { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
/* tooltip — a hover-revealed bubble (pure CSS) */
.sq-tooltip { position: relative; display: inline-flex; }
.sq-tooltip-anchor { border-bottom: 1px dotted hsl(var(--muted-foreground)); cursor: help; }
.sq-tooltip-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .35rem; background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: .75rem; line-height: 1.35; white-space: nowrap; padding: .25rem .5rem; border-radius: calc(var(--radius) - 2px); opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.sq-tooltip:hover .sq-tooltip-bubble, .sq-tooltip:focus .sq-tooltip-bubble, .sq-tooltip:focus-within .sq-tooltip-bubble { opacity: 1; }
/* separator — a rule with an optional centered label */
.sq-sep-plain { border: none; border-top: 1px solid hsl(var(--border)); margin: .5rem 0; }
.sq-separator { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.sq-sep-line { flex: 1; height: 1px; background: hsl(var(--border)); }
.sq-sep-label { color: hsl(var(--muted-foreground)); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
/* overlay family — sheet (edge drawer) · popover / dropdown (anchored float) · command (inline filter) */
.sq-sheet { position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 22rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-left: 1px solid hsl(var(--border)); box-shadow: -8px 0 32px rgba(0,0,0,.24); display: flex; flex-direction: column; animation: sq-sheet-in .18s ease; }
@keyframes sq-sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.sq-dialog-backdrop:has(.sq-sheet) { justify-content: flex-end; align-items: stretch; padding: 0; }
.sq-float-wrap { position: relative; display: inline-block; }
.sq-popover { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 55; min-width: 12rem; max-width: 20rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: .6rem .7rem; display: flex; flex-direction: column; gap: .4rem; animation: sq-pop-in .12s ease; }
.sq-popover-title { font-weight: 600; font-size: .85rem; }
@keyframes sq-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sq-menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 55; min-width: 11rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: .25rem; display: flex; flex-direction: column; gap: 1px; animation: sq-pop-in .12s ease; }
.sq-menu .btn { width: 100%; justify-content: flex-start; text-align: left; background: none; border: none; color: inherit; font-weight: 400; padding: .35rem .5rem; border-radius: calc(var(--radius) - 2px); }
.sq-menu .btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.sq-command { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; background: hsl(var(--card)); }
.sq-command-input { width: 100%; border: none; border-bottom: 1px solid hsl(var(--border)); padding: .5rem .7rem; background: none; color: inherit; font-size: .9rem; outline: none; }
.sq-command-list { max-height: 15rem; overflow-y: auto; padding: .25rem; display: flex; flex-direction: column; gap: 1px; }
.sq-command-list .btn { width: 100%; justify-content: flex-start; text-align: left; background: none; border: none; color: inherit; font-weight: 400; padding: .35rem .5rem; border-radius: calc(var(--radius) - 2px); }
.sq-command-list .btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.sq-command-empty { color: hsl(var(--muted-foreground)); font-size: .82rem; padding: .5rem .6rem; }

/* Polish-by-default (§5.2): toasts · skeletons · empty states · reduced-motion. Cheap, large
   perceived-quality lift, applied as RENDERER DEFAULTS (not authored per app). */
.toast-host { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; min-width: 12rem; max-width: 24rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-left-width: 3px; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: .55rem .75rem; font-size: .85rem; animation: sq-toast-in .18s ease; }
.toast .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.toast-success { border-left-color: hsl(var(--ok)); } .toast-success .icon { color: hsl(var(--ok)); }
.toast-error { border-left-color: hsl(var(--destructive)); } .toast-error .icon { color: hsl(var(--destructive)); }
.toast-info { border-left-color: hsl(var(--info)); } .toast-info .icon { color: hsl(var(--info)); }
@keyframes sq-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.sq-skel { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.sq-skel-row { height: 1rem; border-radius: calc(var(--radius) - 2px); background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--accent)) 37%, hsl(var(--muted)) 63%); background-size: 400% 100%; animation: sq-shimmer 1.3s ease infinite; }
@keyframes sq-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sq-empty-state { display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 2.75rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); }
.sq-empty-illus .icon { width: 2.75rem; height: 2.75rem; opacity: .4; }
.sq-empty-msg { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .sq-skel-row, .toast, .sq-sheet, .sq-popover, .sq-menu { animation: none !important; } }

/* shadcn charts (§5.2): a no-dep SVG chart block. */
.sq-chart-block { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); padding: .8rem 1rem 1rem; }
.sq-chart-title { font-weight: 600; font-size: .95rem; }
.sq-chart-sub { color: hsl(var(--muted-foreground)); font-size: .8rem; margin-bottom: .4rem; }
.sq-chart-canvas { margin-top: .4rem; }
.sq-chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; }
.sq-leg { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: hsl(var(--muted-foreground)); }
.sq-leg-dot { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }

/* shadcn form controls (§5.2): switch (a toggle over the checkbox) + slider (a range). */
.sq-switch { display: inline-flex; align-items: center; cursor: pointer; }
.sq-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sq-switch-track { position: relative; width: 2.15rem; height: 1.2rem; border-radius: 999px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); transition: background .15s ease; }
.sq-switch-track::after { content: ""; position: absolute; top: 1px; left: 1px; width: 1rem; height: 1rem; border-radius: 999px; background: hsl(var(--background)); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.sq-switch input:checked + .sq-switch-track { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.sq-switch input:checked + .sq-switch-track::after { transform: translateX(.95rem); }
.sq-switch input:focus-visible + .sq-switch-track { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.sq-slider { display: inline-flex; align-items: center; gap: .6rem; }
.sq-slider input[type=range] { accent-color: hsl(var(--primary)); width: 11rem; max-width: 60vw; }
.sq-slider-val { min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; color: hsl(var(--foreground)); }

/* shadcn nav primitives (§5.2): breadcrumb (a link trail) + pagination (page controls). */
.sq-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.sq-crumb-sep { color: hsl(var(--muted-foreground)); opacity: .6; }
.sq-crumb .btn { background: none; border: none; padding: 0; color: hsl(var(--muted-foreground)); font-weight: 400; }
.sq-crumb .btn:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.sq-crumb:last-child { color: hsl(var(--foreground)); font-weight: 500; }
.sq-pagination { display: inline-flex; align-items: center; gap: .25rem; }
.sq-page-btn { min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); border-radius: calc(var(--radius) - 2px); cursor: pointer; font-size: .85rem; }
.sq-page-btn:hover:not(:disabled) { background: hsl(var(--accent)); }
.sq-page-btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.sq-page-btn:disabled { opacity: .45; cursor: default; }

/* §5.2 tree view: an indented, expand/collapse record hierarchy (Notion sub-items). */
.tree-list { padding: .4rem 0; }
.tree-row { display: flex; align-items: center; gap: .35rem; padding-top: .2rem; padding-bottom: .2rem; border-radius: calc(var(--radius) - 2px); }
.tree-row:hover { background: hsl(var(--accent) / .5); }
.tree-toggle { background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: .7rem; width: 1.1rem; padding: 0; }
.tree-leaf { color: hsl(var(--muted-foreground)); opacity: .4; width: 1.1rem; text-align: center; font-size: .7rem; }
.tree-label { cursor: pointer; font-size: .9rem; }
.tree-label:hover { text-decoration: underline; }
.tree-count { font-size: .7rem; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-radius: 999px; padding: 0 .4rem; }
.backlink-snippet { color: hsl(var(--muted-foreground)); font-size: .8rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Record templates (§5.4): the "New ▾" dropdown of blank + saved templates. */
.new-dropdown { position: relative; display: inline-block; }
.new-menu { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 220px; margin-top: 4px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: .3rem; }
.new-menu-item { display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; background: none; border: none; padding: .45rem .5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: inherit; font-size: .85rem; }
.new-menu-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Undo / redo (§5.4): a compact pair under the sidebar search. */
.undo-bar { display: flex; gap: .35rem; margin: .1rem 0 .35rem; }
.undo-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem; background: none; border: 1px solid hsl(var(--border)); border-radius: var(--radius); color: hsl(var(--muted-foreground)); padding: .3rem .4rem; font-size: .78rem; cursor: pointer; }
.undo-btn:hover:not(:disabled) { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.undo-btn:disabled { opacity: .4; cursor: default; }
.undo-btn .icon { width: .95rem; height: .95rem; }

/* Reporting / documents (P5, §11): a record-bound printable page (invoice/statement/contract).
   On screen the .sq-doc renders as a white "sheet" at its fixed page size (mm width/min-height
   set inline from pageSize/orientation); @media print strips the app chrome so only the
   document prints (client window.print(); the server PDF route is the other output). The doc
   body forces dark-on-white regardless of app theme so it prints + reads as a paper document. */
.doc-actions { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.sq-doc { background: #fff; color: #1a1a1a; margin: 0 auto 1.5rem; padding: 16mm; box-shadow: 0 1px 12px rgba(0,0,0,.18); border-radius: 2px; box-sizing: border-box; max-width: 100%; }
.sq-doc h1, .sq-doc h2, .sq-doc h3, .sq-doc p, .sq-doc a { color: #1a1a1a; }
.sq-doc .field-label { color: #555; }
@media print {
  .sidebar, .sq-sidebar, .offline-banner, .doc-actions, .remote-cursor, .morphic-bar { display: none !important; }
  .shell { display: block !important; }
  .main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .sq-doc { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
}

/* Public intake form (§11) — a standalone pre-auth lead-capture page. */
.public-form { max-width: 480px; margin: 3rem auto; padding: 0 1rem; }
.public-form h1 { font-size: 1.4rem; margin: 0 0 1rem; }
.public-field { display: block; margin-bottom: 1rem; }
.public-field > span { display: block; font-size: .85rem; color: #71717a; margin-bottom: .3rem; }
.public-field .req { color: #dc2626; }
.public-form .btn { width: 100%; margin-top: .5rem; }
.public-form-done { text-align: center; padding: 2rem; }
.public-form-done p { margin-top: .75rem; }
/* The honeypot must be in the DOM (bots fill it) but invisible to humans — not display:none. */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* §5.2 inline cell editing + bulk selection */
.cell-editable { cursor: pointer; }
.cell-editable:hover { background: hsl(var(--accent)); }
.cell-edit { padding: 2px 4px; }
.cell-edit .input, .cell-edit .select, .cell-edit .textarea, .cell-edit input, .cell-edit select, .cell-edit textarea { width: 100%; min-width: 6rem; box-sizing: border-box; }
.bulk-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: .6rem; background: hsl(var(--accent)); border-radius: var(--radius); }
.bulk-bar .grow { flex: 1; }
.row-selected { background: hsl(var(--accent) / .5); }

/* §5.2 style classes + animation builder — a curated, token-driven visual vocabulary applied to any
   Tier-2 block (bg/radius/shadow/textAlign/size) + entrance/attention animations. No raw CSS in the
   spec: an author picks from these presets (like the token-coarse layout props). */
.sq-bg-muted   { background: hsl(var(--muted)); padding: .75rem; }
.sq-bg-card    { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); padding: .75rem; }
.sq-bg-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: .75rem; }
.sq-bg-accent  { background: hsl(var(--accent)); padding: .75rem; }
.sq-radius-sm   { border-radius: calc(var(--radius) * .5); overflow: hidden; }
.sq-radius-md   { border-radius: var(--radius); overflow: hidden; }
.sq-radius-lg   { border-radius: calc(var(--radius) * 2); overflow: hidden; }
.sq-radius-full { border-radius: 999px; overflow: hidden; }
.sq-shadow-sm { box-shadow: 0 1px 2px hsl(var(--foreground) / .08); }
.sq-shadow-md { box-shadow: 0 4px 10px hsl(var(--foreground) / .10); }
.sq-shadow-lg { box-shadow: 0 10px 24px hsl(var(--foreground) / .14); }
.sq-text-left { text-align: left; } .sq-text-center { text-align: center; } .sq-text-right { text-align: right; }
.sq-size-sm { font-size: .82rem; } .sq-size-base { font-size: 1rem; } .sq-size-lg { font-size: 1.2rem; } .sq-size-xl { font-size: 1.6rem; }
.sq-anim { animation-duration: .5s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
.sq-anim-fadeIn    { animation-name: sq-fadeIn; }
.sq-anim-slideUp   { animation-name: sq-slideUp; }
.sq-anim-slideDown { animation-name: sq-slideDown; }
.sq-anim-zoomIn    { animation-name: sq-zoomIn; }
.sq-anim-pulse     { animation-name: sq-pulse; animation-duration: 1.6s; animation-iteration-count: infinite; }
.sq-delay-short { animation-delay: .12s; } .sq-delay-medium { animation-delay: .28s; } .sq-delay-long { animation-delay: .5s; }
@keyframes sq-fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sq-slideUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sq-slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes sq-zoomIn    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sq-pulse     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sq-anim { animation: none !important; } }

/* §5.2 scroll-triggered + hover animations (STY1 follow-on). A .sq-anim-scroll block waits at its
   pre-animation state (opacity 0) until the IntersectionObserver adds .sq-anim (which supplies the
   duration/fill), then the same keyframes play. Hover animations run on :hover only. */
.sq-anim-scroll { opacity: 0; }
.sq-anim-hover { display: inline-block; }
.sq-anim-hover-fadeIn:hover    { animation: sq-fadeIn .5s both; }
.sq-anim-hover-slideUp:hover   { animation: sq-slideUp .5s both; }
.sq-anim-hover-slideDown:hover { animation: sq-slideDown .5s both; }
.sq-anim-hover-zoomIn:hover    { animation: sq-zoomIn .4s both; }
.sq-anim-hover-pulse:hover     { animation: sq-pulse 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .sq-anim-scroll { opacity: 1; }
  [class*="sq-anim-hover-"]:hover { animation: none !important; }
}

/* §8 edit-presence + live-delete banners on the record view. */
.live-banner { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius); margin: .5rem 0; font-size: .85rem; }
.live-banner .icon { width: 1rem; height: 1rem; }
.live-editing { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.live-deleted { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / .3); }

/* §11 translation-completeness chips on the record view. */
.i18n-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; border: 1px solid hsl(var(--border)); }
.i18n-full { background: hsl(140 60% 45% / .15); color: hsl(140 60% 30%); border-color: hsl(140 60% 45% / .4); }
.i18n-partial { background: hsl(40 90% 55% / .15); color: hsl(40 90% 35%); border-color: hsl(40 90% 55% / .4); }
.i18n-none { color: hsl(var(--muted-foreground)); }


/* ============================================================================
   TRANCHE 1 — Claude Design elevation layer (W-DS3, 2026-07-05)
   Source: design-import/components.css, folded in VERBATIM below. Loaded after
   the token block (theme.css) + the base app-shell rules above, so it wins by
   source order and elevates the app shell / sidebar / page header / primitives to
   the shadcn-grade tranche-1 design with ZERO markup change (the flagged
   sq-sidebar-* renderer change is a later session). Its §0 adds only NEW token
   names; the synced token set in theme.css is untouched. Re-sync = replace the
   block below. See design-import/TRANCHE-1-MAPPING.md.
   ============================================================================ */
/* ============================================================================
   SQ5 components.css — Tranche 1: App shell · Sidebar · Page header · Mobile
   ----------------------------------------------------------------------------
   CSS-FIRST elevation of the renderer's captured markup (design-export truth).
   - Consumes ONLY the shadcn-zinc tokens from tokens.css. No hard-coded hex
     outside the additive tokens below. Safe under arbitrary runtime re-theming
     (constraint 11): every hue flows from --primary/--accent/--muted/--border.
   - Zero markup changes required. Flagged (optional) changes: see
     TRANCHE-1-MAPPING.md.
   - Fold-in: append this file after the token block in style.css/theme.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0) ADDITIVE TOKENS (new names only — never overrides the synced set)
   --------------------------------------------------------------------------- */
:root {
  /* type */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* @kind font */

  /* elevation — neutral black alpha so it works under any theme hue.
     Dark mode separates with borders instead (shadows stay, read as ~0). */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05); /* @kind shadow */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); /* @kind shadow */
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); /* @kind shadow */
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06); /* @kind shadow */

  /* sidebar surface = translucent wash of --muted over --background, so it
     inherits ANY app theme (violet muted → faint violet rail) with no new
     required tokens. Override --sidebar-background per app if desired. */
  --sidebar-tint: 0.4; /* @kind other */
  /* The sidebar surface color is color-mix(in srgb, hsl(var(--sidebar-background, var(--muted)))
     calc(var(--sidebar-tint) * 100%), hsl(var(--background))) — INLINED at every
     usage site on purpose: baking it into a :root custom property would flatten
     the inner var()s against light values (custom-property var()s substitute at
     the declaring scope), breaking .dark and runtime app themes. Override the
     knob per app via --sidebar-background (consumed as var(--sidebar-background,
     var(--muted)) — declared NOWHERE here so theme scopes re-resolve it); same
     pattern for --radius-ctl (fallback calc(var(--radius) - 2px)). Never
     re-declare either at :root. */
  --sidebar-width: 16rem; /* @kind spacing */

  /* semantic status palette (curated 5 hues — brief §2; these are the ONLY
     non-token hues in the kit). -fg = readable text on the tint. */
  --status-red: 0 72% 51%; /* @kind color */
  --status-red-fg: 0 68% 38%; /* @kind color */
  --status-amber: 38 92% 50%; /* @kind color */
  --status-amber-fg: 32 84% 30%; /* @kind color */
  --status-green: 142 71% 45%; /* @kind color */
  --status-green-fg: 142 72% 24%; /* @kind color */
  --status-blue: 217 91% 60%; /* @kind color */
  --status-blue-fg: 221 72% 38%; /* @kind color */
  --status-gray: 240 4% 46%; /* @kind color */
  --status-gray-fg: 240 5% 34%; /* @kind color */
}

.dark {
  --sidebar-tint: 0.45; /* @kind other */
  --status-red-fg: 0 84% 72%; /* @kind color */
  --status-amber-fg: 40 90% 62%; /* @kind color */
  --status-green-fg: 142 62% 62%; /* @kind color */
  --status-blue-fg: 214 90% 72%; /* @kind color */
  --status-gray-fg: 240 5% 70%; /* @kind color */
}

/* ----------------------------------------------------------------------------
   1) BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lit custom elements are display:inline by default — normalize to flow. */
sq-view, sq-entity { display: block; min-width: 0; }

::selection { background: hsl(var(--primary) / 0.15); }

a { color: inherit; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

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

/* Focus: one crisp ring everywhere. Never rely on color alone. */
:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
}

/* Thin, theme-aware scrollbars for inner scroll containers. */
.sidebar, .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
}
.sidebar::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.25);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: transparent; }

/* Micro-interactions: 140ms, bg/border/color/shadow/opacity only. */
.btn, .input, .select, .nav-item, .nav-search, .badge, .fmt-pill,
.table tbody tr, th.sortable, a {
  transition: background-color 0.14s ease, border-color 0.14s ease,
              color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

/* ----------------------------------------------------------------------------
   2) PRIMITIVES — buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: hsl(var(--foreground));
  background: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.btn .icon { font-size: 1rem; opacity: 0.85; }
.btn:active { transform: translateY(0.5px); }
.btn[disabled], .btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-xs), inset 0 1px 0 hsl(var(--primary-foreground) / 0.08);
}
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn-secondary:hover { background: hsl(var(--secondary) / 0.8); }

.btn-outline {
  border-color: hsl(var(--input));
  background: hsl(var(--background));
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dark .btn-outline { background: hsl(var(--input) / 0.3); border-color: hsl(var(--input)); }
.dark .btn-outline:hover { background: hsl(var(--input) / 0.5); }

.btn-ghost { color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  box-shadow: var(--shadow-xs);
}
.btn-destructive:hover { background: hsl(var(--destructive) / 0.9); }

.btn-link {
  padding: 0;
  height: auto;
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--muted-foreground) / 0.5);
}
.btn-link:hover { text-decoration-color: currentColor; }

.btn-sm { height: 1.875rem; padding: 0 0.625rem; font-size: 0.8125rem; border-radius: calc(var(--radius-ctl, calc(var(--radius) - 2px)) - 1px); }
.btn-lg { height: 2.625rem; padding: 0 1.25rem; font-size: 0.9063rem; }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-sm.btn-icon { width: 1.875rem; }

/* loading state: spinner replaces nothing, appends after label */
.btn.loading { pointer-events: none; opacity: 0.75; }
.btn.loading::after {
  content: "";
  width: 0.875em;
  height: 0.875em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: sq-spin 0.7s linear infinite;
}
@keyframes sq-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   3) PRIMITIVES — inputs & selects
   --------------------------------------------------------------------------- */
.input, .select, select.input, textarea.input {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  width: auto;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.875rem;
  box-shadow: var(--shadow-xs);
}
textarea.input { height: auto; padding: 0.5rem 0.75rem; }
.dark .input, .dark .select { background: hsl(var(--input) / 0.3); box-shadow: none; }

.input::placeholder { color: hsl(var(--muted-foreground)); }

.input:hover, .select:hover { border-color: hsl(var(--muted-foreground) / 0.4); }

.input:focus, .input:focus-visible, .select:focus, .select:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25);
}
.input[disabled], .select[disabled] { opacity: 0.5; cursor: not-allowed; }

select.input, .select { cursor: pointer; padding-right: 0.5rem; }

/* ----------------------------------------------------------------------------
   4) PRIMITIVES — kbd · badge · status pills · stars
   --------------------------------------------------------------------------- */
.kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.3125rem;
  border: 1px solid hsl(var(--border));
  border-bottom-width: 2px;
  border-radius: 5px;
  background: hsl(var(--background));
  font-family: var(--font-mono);
  font-size: 0.6563rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1563rem 0.5625rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--background));
  font-size: 0.7188rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

/* .fmt-pill — semantic status wash (format rules). Works around plain text
   or a nested .badge (status column emits fmt-pill > badge). */
.fmt-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1563rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.7188rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.fmt-pill .badge {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.fmt-red    { background: hsl(var(--status-red) / 0.12);   color: hsl(var(--status-red-fg)); }
.fmt-amber  { background: hsl(var(--status-amber) / 0.15); color: hsl(var(--status-amber-fg)); }
.fmt-green  { background: hsl(var(--status-green) / 0.13); color: hsl(var(--status-green-fg)); }
.fmt-blue   { background: hsl(var(--status-blue) / 0.12);  color: hsl(var(--status-blue-fg)); }
.fmt-gray   { background: hsl(var(--status-gray) / 0.12);  color: hsl(var(--status-gray-fg)); }

/* whole-row tint (tr.fmt.fmt-tint.fmt-*) — a whisper, not a wall */
tr.fmt-tint { background: transparent; }
tr.fmt-tint.fmt-red    { background: hsl(var(--status-red) / 0.05); }
tr.fmt-tint.fmt-amber  { background: hsl(var(--status-amber) / 0.06); }
tr.fmt-tint.fmt-green  { background: hsl(var(--status-green) / 0.05); }
tr.fmt-tint.fmt-blue   { background: hsl(var(--status-blue) / 0.05); }
tr.fmt-tint.fmt-gray   { background: hsl(var(--status-gray) / 0.05); }

.rating-cell { display: inline-flex; gap: 0.125rem; }
.rating-cell .star { display: inline-flex; font-size: 0.875rem; color: hsl(var(--muted-foreground) / 0.35); }
.rating-cell .star.on { color: hsl(var(--status-amber)); }
.rating-cell .star.on .icon { fill: currentColor; }

/* ----------------------------------------------------------------------------
   5) APP SHELL — two-surface layout: tinted canvas, content card inset
   --------------------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
}

.main {
  min-width: 0;
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 1.25rem 1.75rem 2.5rem;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.8);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-sm);
}
.dark .main { box-shadow: none; }

/* ----------------------------------------------------------------------------
   6) SIDEBAR — the premium bar. shadcn structure, CSS-only: the rail is
   viewport-height and is the ONLY scroll container; brand + ⌘K pin to its top,
   the account footer pins to its bottom (sticky-inside-scroller), and just the
   nav list scrolls between them — the page never scrolls to reveal nav items.
   --------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width); /* also sizes the standalone capture correctly */
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* shadcn SidebarMenu gap-1 */
  padding: 0 0.75rem;
  background: var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
  color: hsl(var(--sidebar-foreground, var(--foreground)));
  font-size: 0.875rem; /* shadcn menu-button text-sm */
}
.sidebar :focus-visible { outline-color: hsl(var(--sidebar-ring, var(--ring))); }

/* brand / workspace header — pinned */
.brand {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem; /* shadcn header menu-button size-lg h-12 */
  margin: 0 -0.75rem;
  padding: 0.25rem 1.25rem 0;
  background: var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--sidebar-foreground, var(--foreground)));
}
.brand .dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;  /* shadcn workspace mark: size-8 rounded-lg bg-sidebar-primary */
  height: 2rem;
  flex: none;
  border-radius: 0.5rem;
  background: hsl(var(--sidebar-primary, var(--primary)));
  color: hsl(var(--sidebar-primary-foreground, var(--primary-foreground)));
  font-size: 0.875rem;
  font-weight: 600;
}
/* renderer may emit data-initial="V" on .dot for the monogram (flagged, optional) */
.brand .dot::after { content: attr(data-initial); }

/* ⌘K search entry — pinned below the brand; the spread shadow paints the
   sidebar surface around it so list items scroll cleanly underneath */
.nav-search {
  position: sticky;
  top: 3rem;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  margin: 0 0 0.5rem;
  padding: 0 0.5rem 0 0.625rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: 0 0 0 0.75rem var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background)))), var(--shadow-xs);
}
.dark .nav-search {
  background: color-mix(in srgb, hsl(var(--input)) 30%, var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background)))));
  box-shadow: 0 0 0 0.75rem var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
}
.nav-search:hover { border-color: hsl(var(--muted-foreground) / 0.4); color: hsl(var(--foreground)); }
.nav-search .icon { font-size: 0.875rem; opacity: 0.7; }
.nav-search > span:not(.kbd) { flex: 1; min-width: 0; }
.nav-search .kbd { margin-left: auto; }

/* group labels — shadcn SidebarGroupLabel: h-8 px-2 text-xs font-medium,
   sidebar-foreground/70, sentence case (shadcn does NOT uppercase) */
.nav-label {
  display: flex;
  align-items: center;
  height: 2rem;
  margin: 0.5rem 0 0;
  padding: 0 0.5rem;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.7);
}

/* nav rows — shadcn SidebarMenuButton: h-8 p-2 gap-2 rounded-md text-sm */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  color: hsl(var(--sidebar-foreground, var(--foreground)));
  cursor: pointer;
  user-select: none;
}
.nav-item > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: inherit;
}
.nav-item .icon { font-size: 1rem; color: inherit; } /* shadcn size-4, inherits text */
.nav-item:hover {
  background: hsl(var(--sidebar-accent, var(--accent)));
  color: hsl(var(--sidebar-accent-foreground, var(--accent-foreground)));
}

/* count / kind meta — shadcn SidebarMenuBadge: h-5 min-w-5 rounded-md px-1
   text-xs font-medium tabular-nums */
.nav-item .count {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.7);
}

/* active — shadcn: bg-sidebar-accent + accent-foreground + font-medium */
.nav-item.active {
  background: hsl(var(--sidebar-accent, var(--accent)));
  color: hsl(var(--sidebar-accent-foreground, var(--accent-foreground)));
  font-weight: 500;
}
.nav-item.active .count { color: inherit; opacity: 0.8; }

/* account footer — pinned to the rail's bottom edge */
.nav-user {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: auto -0.75rem 0;
  padding: 0.5rem 1rem 0.625rem;
  background: var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
  border-top: 1px solid hsl(var(--sidebar-border, var(--border)) / 0.8);
}
.nav-user .nav-user-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.nav-user .nav-user-email:empty { display: none; }

/* ----------------------------------------------------------------------------
   6b) SIDEBAR — TARGET MARKUP (the flagged change set, shadcn-exact anatomy)
   Mirrors shadcn/ui sidebar parts 1:1 under our sq- naming:
     Sidebar→.sq-sidebar · SidebarHeader→.sq-sidebar-header · SidebarContent→
     .sq-sidebar-content (the ONLY scroll region) · SidebarFooter→.sq-sidebar-footer ·
     SidebarGroup→.sq-sidebar-group · SidebarGroupLabel→.sq-sidebar-group-label ·
     SidebarMenu/Item/Button/Badge→.sq-sidebar-menu[-item|-button|-badge] ·
     SidebarSeparator→.sq-sidebar-separator · SidebarInput→.sq-sidebar-input.
   Collapsible groups = native <details open> + <summary class="sq-sidebar-group-label">
   — zero JS (shadcn wraps groups in Collapsible; <details> is the no-build twin).
   Icon rail = data-state="collapsed" on .sq-sidebar (Lit flips it; states ship here).
   See previews/Sidebar target -shadcn exact-.html + TRANCHE-1-MAPPING.md flags.
   --------------------------------------------------------------------------- */
.sq-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100dvh;
  background: var(--sidebar, color-mix(in srgb, hsl(var(--sidebar-background, var(--muted))) calc(var(--sidebar-tint) * 100%), hsl(var(--background))));
  color: hsl(var(--sidebar-foreground, var(--foreground)));
  font-size: 0.875rem;
  transition: width 0.2s ease;
}
.sq-sidebar :focus-visible { outline-color: hsl(var(--sidebar-ring, var(--ring))); }

.sq-sidebar-header, .sq-sidebar-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem; /* shadcn p-2 */
}
.sq-sidebar-footer { border-top: 1px solid hsl(var(--sidebar-border, var(--border)) / 0.8); }

.sq-sidebar-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
}
.sq-sidebar-content::-webkit-scrollbar { width: 8px; }
.sq-sidebar-content::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.25); border-radius: 999px; }

.sq-sidebar-group { position: relative; padding: 0.5rem; } /* shadcn p-2 */
details.sq-sidebar-group { padding-bottom: 0.25rem; }
details.sq-sidebar-group[open] { padding-bottom: 0.5rem; }

.sq-sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem; /* shadcn h-8 */
  padding: 0 0.5rem;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.7);
  list-style: none;
  user-select: none;
}
summary.sq-sidebar-group-label { cursor: pointer; }
summary.sq-sidebar-group-label::-webkit-details-marker { display: none; }
summary.sq-sidebar-group-label:hover { color: hsl(var(--sidebar-foreground, var(--foreground))); }
.sq-sidebar-group-label .chevron {
  margin-left: auto;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
details[open] > .sq-sidebar-group-label .chevron { transform: rotate(180deg); }

.sq-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* shadcn gap-1 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.sq-sidebar-menu-item { position: relative; }

.sq-sidebar-menu-button {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* shadcn gap-2 */
  width: 100%;
  height: 2rem; /* shadcn h-8 */
  padding: 0 0.5rem; /* shadcn p-2 */
  border: 0;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.sq-sidebar-menu-button .icon { font-size: 1rem; flex: none; } /* shadcn size-4 */
.sq-sidebar-menu-button > span:not(.sq-sidebar-menu-badge) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-sidebar-menu-button:hover {
  background: hsl(var(--sidebar-accent, var(--accent)));
  color: hsl(var(--sidebar-accent-foreground, var(--accent-foreground)));
}
.sq-sidebar-menu-button[data-active="true"], .sq-sidebar-menu-button[aria-current="page"] {
  background: hsl(var(--sidebar-accent, var(--accent)));
  color: hsl(var(--sidebar-accent-foreground, var(--accent-foreground)));
  font-weight: 500;
}
.sq-sidebar-menu-button[disabled] { opacity: 0.5; pointer-events: none; }

.sq-sidebar-menu-badge {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem; /* shadcn h-5 min-w-5 */
  min-width: 1.25rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.7);
  pointer-events: none;
  user-select: none;
}

.sq-sidebar-separator {
  height: 1px;
  margin: 0 0.5rem; /* shadcn mx-2 */
  border: 0;
  background: hsl(var(--sidebar-border, var(--border)));
}

/* workspace header button (shadcn menu-button size-lg h-12) */
.sq-sidebar-workspace {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sq-sidebar-workspace:hover { background: hsl(var(--sidebar-accent, var(--accent))); }
.sq-workspace-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* shadcn size-8 rounded-lg */
  height: 2rem;
  border-radius: 0.5rem;
  background: hsl(var(--sidebar-primary, var(--primary)));
  color: hsl(var(--sidebar-primary-foreground, var(--primary-foreground)));
  font-size: 0.875rem;
  font-weight: 600;
}
.sq-workspace-mark::after { content: attr(data-initial); }
.sq-sidebar-workspace-meta { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.sq-sidebar-workspace-meta .name { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-sidebar-workspace-meta .plan { font-size: 0.75rem; color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.6); }

/* ⌘K input (shadcn SidebarInput: h-8, bg-background, shadow-none) */
.sq-sidebar-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.5rem 0 0.625rem;
  border: 1px solid hsl(var(--sidebar-border, var(--border)));
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  cursor: pointer;
}
.dark .sq-sidebar-input { background: hsl(var(--input) / 0.3); }
.sq-sidebar-input:hover { border-color: hsl(var(--muted-foreground) / 0.4); color: hsl(var(--sidebar-foreground, var(--foreground))); }
.sq-sidebar-input .icon { font-size: 0.875rem; opacity: 0.7; }
.sq-sidebar-input > span:first-of-type { flex: 1; }

/* user card footer (shadcn nav-user) */
.sq-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-ctl, calc(var(--radius) - 2px));
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sq-sidebar-user:hover { background: hsl(var(--sidebar-accent, var(--accent))); }
.sq-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem; /* shadcn nav-user avatar: rounded-lg */
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sq-avatar::after { content: attr(data-initials); }
.sq-sidebar-user-meta { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.sq-sidebar-user-meta .name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-sidebar-user-meta .email { font-size: 0.75rem; color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* icon rail (shadcn collapsible="icon"): width 3rem, labels/badges hidden,
   buttons square-centered; renderer supplies title="" tooltips */
.sq-sidebar[data-state="collapsed"] { width: 3rem; }
.sq-sidebar[data-state="collapsed"] :is(
  .sq-sidebar-menu-badge,
  .sq-sidebar-group-label,
  .sq-sidebar-workspace-meta,
  .sq-sidebar-user-meta,
  .sq-sidebar-input > span,
  .sq-sidebar-input .kbd,
  .sq-sidebar-menu-button > span:not(.sq-sidebar-menu-badge),
  .sq-sidebar-workspace > .icon,
  .sq-sidebar-user > .icon
) { display: none; }
.sq-sidebar[data-state="collapsed"] .sq-sidebar-group { padding: 0.5rem 0.25rem; }
.sq-sidebar[data-state="collapsed"] :is(.sq-sidebar-menu-button, .sq-sidebar-input) {
  width: 2rem;
  height: 2rem;
  margin-inline: auto;
  padding: 0;
  justify-content: center;
}
.sq-sidebar[data-state="collapsed"] :is(.sq-sidebar-workspace, .sq-sidebar-user) {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
  padding: 0.25rem;
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   7) PAGE HEADER · TOOLBARS
   --------------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1rem;
}
.page-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
.page-sub {
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.facet-bar { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.facet-bar .select, .facet-bar select { height: 2rem; font-size: 0.8125rem; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.toolbar .input.search, .toolbar .search {
  flex: 1;
  max-width: 20rem;
}

/* ----------------------------------------------------------------------------
   8) CARD + TABLE (baseline for the shell; deep pass lands in tranche 2)
   --------------------------------------------------------------------------- */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.8);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.dark .card { box-shadow: none; }

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.table th {
  height: 2.5rem;
  padding: 0.25rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.4);
  border-bottom: 1px solid hsl(var(--border) / 0.8);
}
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.7); }

.table td {
  padding: 0.5625rem 0.75rem;
  vertical-align: middle;
  white-space: nowrap;
  color: hsl(var(--foreground) / 0.92);
}
.table tbody tr { border-top: 1px solid hsl(var(--border) / 0.6); }
.table tbody tr:first-child { border-top: 0; }
.table tbody tr:hover { background: hsl(var(--muted) / 0.35); }
.table tbody tr.fmt-tint.fmt-red:hover { background: hsl(var(--status-red) / 0.09); }
.table tbody tr.fmt-tint.fmt-amber:hover { background: hsl(var(--status-amber) / 0.1); }
.table tbody tr.fmt-tint.fmt-green:hover { background: hsl(var(--status-green) / 0.09); }

.table a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: hsl(var(--muted-foreground) / 0.4);
}
.table a:hover { text-decoration-color: currentColor; }

.table .row-actions { justify-content: flex-end; opacity: 0.75; }
.table tbody tr:hover .row-actions { opacity: 1; }

/* ----------------------------------------------------------------------------
   9) RESPONSIVE — matches the renderer's ≤720px stacking behavior
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar, .sq-sidebar {
    position: static;
    height: auto;
    max-height: 45dvh;
    border-bottom: 1px solid hsl(var(--sidebar-border, var(--border)) / 0.8);
  }
  .main {
    margin: 0.375rem;
    padding: 1rem 1rem 2rem;
    border-radius: calc(var(--radius) + 2px);
  }
  .page-head { align-items: flex-start; flex-direction: column; }
  .toolbar .input.search, .toolbar .search { max-width: none; }
}

/* ----------------------------------------------------------------------------
   10) MOTION SAFETY
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   TRANCHE 1-C — sidebar icon-rail collapse: reconcile the live .shell grid.
   components.css §6b shrinks the collapsed sidebar to a 3rem icon rail
   (.sq-sidebar[data-state="collapsed"]{width:3rem}), but the .shell grid's first
   column is pinned at --sidebar-width, so the content would leave a gap. sq-app
   adds .rail-collapsed on .shell in rail mode; match the column to the 3rem rail.
   Desktop only — at ≤720px the shell stays single-column stacked (mobile block wins).
   ============================================================================ */
@media (min-width: 721px) {
  /* animate the sidebar column in sync with the sidebar's own width transition
     (components.css §6b) so the rail + content slide together — no mid-toggle overlap. */
  .shell { transition: grid-template-columns 0.2s ease; }
  .shell.rail-collapsed { grid-template-columns: 3rem minmax(0, 1fr); }
}