/* 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 {
  border-right: 1px solid hsl(var(--border));
  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; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); padding: .5rem .5rem .25rem; }
.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: 1100px; }
.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, .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)); }