:root {
  /* Forge (light) — Iron Black structure, cool navy-biased surfaces (not flat
     neutral gray — see [[Frontend Design Reference]] in the vault), navy
     accent for structure, warm amber spent only on primary actions/badges. */
  --text: #10182B;
  --text-muted: #5B6478;
  --bg: #EEF0F4;
  --panel: #E9EDF3;
  --border: #C7CEDB;
  --accent: #13294B;
  --accent-bg: #DCE3ED;
  --on-accent: #FFFFFF;
  --accent-warm: #E29A1E;
  --on-warm: #1A1200;
  --accent-warm-bg: #FBEBCF;
  --accent-warm-text: #8A5A0A;
  --danger: #8A0E12;
  --on-danger: #FFFFFF;
  --header-bg: linear-gradient(135deg, #0E1524, #16213A);
  --header-text: #E1E5EC;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 43, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 24, 43, 0.04), 0 4px 14px rgba(16, 24, 43, 0.07);
  --shadow-lg: 0 4px 6px rgba(16, 24, 43, 0.05), 0 10px 28px rgba(16, 24, 43, 0.1);
  --transition: 180ms ease;
  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Forge (dark) — Iron Black surfaces with a navy bias instead of flat
       Steel Gray, brighter Blue accent for contrast, same warm amber role. */
    --text: #DDE2EA;
    --text-muted: #8B94A8;
    --bg: #0A0D14;
    --panel: #1E2740;
    --border: #333E54;
    --accent: #3B6FE0;
    --accent-bg: #16264F;
    --on-accent: #FFFFFF;
    --accent-warm: #F0AE3C;
    --on-warm: #1A1200;
    --accent-warm-bg: #3A2C10;
    --accent-warm-text: #F0AE3C;
    --danger: #FF6B57;
    --on-danger: #1A0000;
    --header-bg: linear-gradient(135deg, #131A2A, #1B2748);
    --header-text: #DDE2EA;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}
/* ---- Global interactive polish -----------------------------------------
   Hover/focus/transition applied once here instead of duplicated across
   every one of the button rules below (none of them had any before this).
   See [[Frontend Design Reference]] in the vault for the source checklist. */
button {
  transition: filter var(--transition), box-shadow var(--transition), transform var(--transition), background-color var(--transition), border-color var(--transition);
}

button:not(:disabled):hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-sm);
}

button:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

/* ---- Button appearance fallbacks ---------------------------------------
   There is deliberately NO bare `button { background: ... }` rule. Paint
   swatches, colour chips and similar controls are <button> elements that
   carry their own background and zero padding, so a global appearance rule
   would wreck those grids.

   Instead: `.secondary` gets a real standalone definition (it previously
   only existed scoped inside individual components, so any button using it
   outside those components fell through to the browser default), plus the
   handful of form submits that had no scoped rule of their own. House
   convention, per the token comment in index.css: warm amber is spent only
   on primary actions. Anything more specific still wins on specificity. */
.secondary {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

.requirements-lookup-form button[type="submit"],
.credential-add-form button[type="submit"],
.review-request-section > button[type="submit"],
.reports-header button {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.requirements-lookup-form button[type="submit"]:disabled,
.credential-add-form button[type="submit"]:disabled,
.review-request-section > button[type="submit"]:disabled,
.reports-header button:disabled {
  opacity: 0.6;
  cursor: default;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input,
textarea,
select {
  transition: border-color var(--transition), box-shadow var(--transition);
}

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

header {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--header-bg);
  background-color: #0E1524;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.tabs button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

.tabs button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.tabs .nav-spacer {
  flex: 1;
}

.tabs .current-user {
  align-self: center;
  color: #B7C0D1;
  font-size: 13px;
}

.staff-badge {
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
}

.beta-badge {
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  background: var(--accent);
  color: #fff;
}

.tabs button.secondary {
  background: var(--panel);
  color: var(--text);
}

header h1 {
  margin: 0;
  font-size: 28px;
  color: var(--header-text);
}

.layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

aside {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.new-bid-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.new-bid-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.new-bid-form input,
.new-bid-form textarea,
.new-bid-form select {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.new-bid-form > button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.new-bid-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.new-bid-form button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.new-client-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.new-client-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.new-client-form input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.new-client-form > button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.new-client-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.rooms-section,
.exterior-section,
.cleanup-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--bg);
}

.rooms-section-header,
.exterior-section-header,
.cleanup-section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}

.cleanup-post-construction,
.cleanup-restoration {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--panel);
}

.cleanup-checkbox-row,
.cleanup-condition-row,
.cleanup-adder-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cleanup-condition-row label,
.cleanup-adder-row label {
  flex: 1;
  min-width: 120px;
}

.room-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--panel);
}

.room-row-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.room-row-grid input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.room-row-clearing {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.room-row-clearing label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.room-row-clearing select {
  font: inherit;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.room-row button.remove {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.exterior-measurement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exterior-measurement-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.exterior-measurement-list button.remove {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.error {
  color: var(--danger);
  font-size: 14px;
  margin: 0;
}

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

/* Otto's speech bubble had a max-width but no max-height, and a lesson runs to
   about 135 words -- so it grew until it covered the very control it was
   describing. guide.css is vendored and left alone, same as the Otto button
   contrast fix, so this caps it here instead. The real fix is shorter text per
   step; this stops it swallowing the screen in the meantime. */
.pg-bubble-body {
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Colour-family browsing. Without this the picker renders 3,090 swatches as
   one flat list -- the family chips and per-family headings are what make the
   catalogue navigable. */
.color-family-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}

.color-family-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--surface-2, #f1f1f4);
  color: var(--text, #222);
  border: 1px solid var(--border, #d8d8de);
  cursor: pointer;
}

.color-family-chip:hover {
  border-color: var(--accent);
}

.color-family-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Drop target while a swatch is being dragged onto a family. */
.color-family-chip.drop-target {
  outline: 3px dashed var(--accent);
  outline-offset: 2px;
  transform: scale(1.06);
}

.paint-chip[draggable='true'] {
  cursor: grab;
}

.paint-chip.dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.color-family-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  flex: none;
}

.color-family-section {
  margin-top: 14px;
}

/* The colour chart itself. The old .paint-grid gave every colour a 110px
   bordered card with its name and number underneath -- fine for a dozen
   colours, unusable for 3,090, because the chrome and text dwarf the colour.
   These are bare tiles butted together like a real fan deck, so a family reads
   as a block of colour and the name lives in the tooltip. */
/* Catalog manager: the detail panel for whichever swatch is being recategorised. */
.paint-catalog-manager {
  margin-top: 24px;
}

/* Sticky, because the swatch you clicked can be thousands of pixels below the
   panel. Without this you click a colour, the panel opens somewhere off the
   top of the screen, and it reads as "clicking does nothing". */
.catalog-selected {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.catalog-selected-swatch {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.catalog-selected-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  min-width: 0;
}

.catalog-family-buttons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-family-buttons button {
  font-size: 13px;
  padding: 4px 10px;
}

/* ---------------------------------------------------------------------------
   Paint workspace: room schemes, harmony rail, LRV.

   The old picker was a flat catalogue -- browse 3,090 swatches, click one, type
   a room name. These styles support the replacement: a room is a card, each
   surface is a slot, and choosing a slot opens the picker with real context.
   --------------------------------------------------------------------------- */

.scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.scheme-card {
  border: 1px solid var(--border, #d8d8de);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scheme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scheme-card-head h4 {
  margin: 0;
  font-size: 15px;
}

.scheme-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A slot is a row, not a card: five of them stack in the height one row of
   swatch cards used to take, and the colour chip stays the widest thing in the
   row so the scheme reads as colour at a glance. */
.scheme-slot {
  display: grid;
  grid-template-columns: 26px 62px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.scheme-slot:hover {
  background: var(--surface-2, #f1f1f4);
}

.scheme-slot.active {
  border-color: var(--accent);
  background: var(--surface-2, #f1f1f4);
}

.scheme-slot-chip {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: none;
  /* An unfilled slot reads as an outline, not as a white paint colour. */
  background-image: linear-gradient(45deg, transparent 46%, rgba(0, 0, 0, 0.16) 46% 54%, transparent 54%);
}

.scheme-slot.filled .scheme-slot-chip {
  background-image: none;
}

.scheme-slot-chip.inline {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 6px;
}

.scheme-slot-role {
  color: var(--muted, #6b6b76);
  font-size: 12px;
}

.scheme-slot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheme-slot-code,
.scheme-slot-empty {
  color: var(--muted, #6b6b76);
  font-size: 12px;
}

.scheme-contrast {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface-2, #f1f1f4);
}

/* Contrast states are advisory, so they read as information rather than as
   validation errors -- a low-contrast scheme is a legitimate choice. */
.contrast-strong { border-left: 3px solid #2e7d4f; }
.contrast-subtle { border-left: 3px solid #b8860b; }
.contrast-low { border-left: 3px solid #a8352f; }
.contrast-unknown { border-left: 3px solid var(--border, #d8d8de); }

.scheme-clear {
  align-self: flex-start;
  font-size: 12px;
  padding: 3px 8px;
}

.scheme-add {
  display: flex;
  gap: 6px;
  align-items: center;
  align-self: start;
  border: 1px dashed var(--border, #d8d8de);
  border-radius: 10px;
  padding: 12px;
}

.scheme-add input {
  min-width: 0;
  flex: 1 1 120px;
}

.paint-picker {
  border: 1px solid var(--border, #d8d8de);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.paint-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.paint-picker-context {
  display: block;
  color: var(--muted, #6b6b76);
  font-size: 12px;
  margin-top: 2px;
}

.paint-workspace-hint {
  margin-top: 4px;
}

/* LRV badge. 'est' marks a value derived from the colour rather than measured
   off a real drawdown -- the same provenance discipline the price book uses. */
.lrv-badge {
  font-size: 11px;
  color: var(--muted, #6b6b76);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lrv-est {
  margin-left: 3px;
  opacity: 0.7;
  font-style: italic;
}

.harmony-rail {
  border-top: 1px solid var(--border, #d8d8de);
  border-bottom: 1px solid var(--border, #d8d8de);
  padding: 10px 0;
  margin-bottom: 12px;
}

.harmony-rail h5 {
  margin: 0 0 8px;
  font-size: 13px;
}

.harmony-note {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted, #6b6b76);
  margin-top: 2px;
}

.harmony-set {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.harmony-set-label {
  font-size: 12px;
  color: var(--muted, #6b6b76);
  flex: 0 0 150px;
}

.harmony-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  /* Long harmony rows scroll inside themselves rather than widening the page. */
  overflow-x: auto;
  max-width: 100%;
}

.harmony-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--border, #d8d8de);
  border-radius: 999px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.harmony-chip:hover {
  border-color: var(--accent);
}

.harmony-chip-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex: none;
}

.harmony-chip-loose {
  font-size: 10px;
  color: var(--muted, #6b6b76);
  font-style: italic;
}

.photo-extract {
  margin-bottom: 12px;
}

.photo-extract-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 8px;
  background: var(--surface-2, #f7f7f9);
}

.photo-extract-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.photo-extract-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.photo-extract-thumb:hover {
  border-color: var(--accent);
}

.photo-extract-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-extract-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
}

@media (max-width: 560px) {
  .scheme-grid {
    grid-template-columns: 1fr;
  }
  .harmony-set-label {
    flex-basis: 100%;
  }
}

.paint-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 3px;
  margin-bottom: 12px;
}

.paint-chip {
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 3px;
  cursor: pointer;
}

/* Deliberately no transform on hover. Scaling the tile up moved it under the
   cursor and overlapped its neighbours, so the pointer could land on a
   different tile than the one being aimed at -- clicks appeared to do nothing
   or hit the wrong colour. An outline highlights without changing layout or
   hit targets. */
.paint-chip:hover {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  z-index: 2;
  position: relative;
}

.paint-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  z-index: 2;
  position: relative;
}

.color-family-heading {
  margin: 0 0 6px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.color-family-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.bid-search {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.bid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bid-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-align: left;
  font-size: 13px;
}

.bid-list button.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.bid-list .date {
  color: var(--text-muted);
}

main {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.bid-result section {
  margin-bottom: 24px;
}

.bid-result h2 {
  margin-top: 0;
}

.bid-result h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

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

.total {
  text-align: right;
  font-weight: 700;
  font-size: 16px;
  margin-top: 8px;
}

.liability {
  white-space: pre-wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
}

.ai-disclaimer {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  margin: 0 0 8px;
}

.bid-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.bid-result-header button {
  flex-shrink: 0;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 13px;
}

.new-job-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.new-job-form label,
.progress-upload-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.new-job-form input,
.progress-upload-form input,
.progress-upload-form textarea {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.new-job-form button,
.progress-upload-form button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.new-job-form button:disabled,
.progress-upload-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.job-meta {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.address-row {
  display: flex;
  gap: 8px;
}

.address-row label {
  flex: 2;
}

.address-row .address-state {
  flex: 1;
}

.address-row .address-zip {
  flex: 1;
}

.job-contact-editor .address-row {
  width: 100%;
}

.job-contact-editor .address-row input {
  flex: 2;
}

.job-contact-editor .address-row .address-state,
.job-contact-editor .address-row .address-zip {
  flex: 1;
}

.time-clock,
.progress-log {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.open-entries-notice {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--accent);
}

.open-entries-notice .notice {
  margin: 0;
}

.time-clock table tbody tr.open-entry {
  background: rgba(var(--accent-rgb, 248, 211, 47), 0.05);
}

.edited-marker {
  font-size: 10px;
  margin-left: 4px;
  font-weight: bold;
  opacity: 0.6;
}

.manual-entry-form {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
}

.manual-entry-form > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manual-entry-form label {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.manual-entry-form input,
.manual-entry-form select {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.manual-entry-form button {
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.manual-entry-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.time-clock table input[type="datetime-local"] {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}

.time-clock table button.danger {
  background: var(--danger);
  color: var(--on-danger);
}

.time-clock table button.danger:hover {
  opacity: 0.9;
}

.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.inline-form input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.inline-form button {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.employee-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.employee-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.employee-list li > span:first-child {
  font-weight: 600;
  min-width: 120px;
}

.employee-list button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.employee-list button:first-of-type {
  margin-left: auto;
}

.employee-list button:disabled {
  opacity: 0.5;
  cursor: default;
}

.employee-list li input[type='text'] {
  flex: 1;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.employee-list .error {
  font-size: 12px;
}

.badge {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 12px;
}

.badge.on {
  background: var(--accent-bg);
  color: var(--accent);
}

.badge.elsewhere {
  background: var(--bg);
  color: var(--text-muted);
}

.badge.off {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.recurring-job-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.recurring-job-section .label {
  color: var(--text-muted);
  font-size: 13px;
}

.recurring-job-section select,
.recurring-job-section input[type="date"] {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}

.progress-upload-form {
  margin-bottom: 20px;
  max-width: 480px;
}

.progress-entries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.progress-entry-header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}

.progress-entry-header span {
  color: var(--text-muted);
}

.progress-entry-actions {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-thumb {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: black;
}

.demo-banner {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.verify-email-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  margin: 0 16px 16px;
}

.bid-result-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bid-result-actions button.secondary,
.editor-actions button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.bid-editor input[type='text'],
.bid-editor input[type='number'],
.bid-editor textarea {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.bid-editor input.qty,
.bid-editor input.price {
  width: 80px;
}

.bid-editor input.unit {
  width: 90px;
}

.bid-editor table input {
  width: auto;
}

.bid-editor textarea {
  width: 100%;
  box-sizing: border-box;
}

.bid-editor button.remove {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.material-editor {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-editor li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.editor-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.print-only {
  display: none;
}

.job-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.job-status-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Jobs / Homeowners pane switch — homeowner records live inside Jobs now
   rather than as their own top-level tab. */
.jobs-pane-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.jobs-pane-toggle button {
  font: inherit;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
}

.jobs-pane-toggle button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Job detail header: name, status, homeowner/address, and the money summary
   all readable without scrolling. */
.job-header {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.job-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.job-header-top h2 {
  margin: 0;
  font-size: 20px;
}

.job-header-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.job-status-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  white-space: nowrap;
}

.job-status-pill.completed {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}

.job-header-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.job-header-sub a {
  color: var(--accent);
}

.job-header-empty {
  font-style: italic;
}

.job-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.job-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.job-kpi-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.job-kpi-value.good {
  color: var(--success, var(--accent));
}

.job-kpi-value.over {
  color: var(--danger);
}

/* Collapsible section groups — ranked by how often they're actually used,
   so the money and the day's work aren't buried under marketing tools. */
.job-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  margin-bottom: 12px;
  overflow: hidden;
}

.job-group > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.job-group > summary::-webkit-details-marker {
  display: none;
}

.job-group > summary::before {
  content: '▸';
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.15s ease;
}

.job-group[open] > summary::before {
  transform: rotate(90deg);
}

.job-group > summary:hover {
  background: var(--bg);
}

.job-group-label {
  font-weight: 700;
  font-size: 15px;
}

.job-group-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.job-group-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Job list rows carry enough to pick the right job without clicking into
   each one — name, homeowner, and where it is. */
.job-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-list button {
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.job-list button:hover {
  border-color: var(--accent);
}

.job-list button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.job-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.job-list-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .job-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-header-actions {
    margin-left: 0;
    width: 100%;
  }
}

button.danger {
  color: var(--danger);
  border-color: var(--danger);
}

.job-notes {
  margin-bottom: 16px;
}

.job-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.job-notes-header .label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.job-notes-status {
  font-size: 12px;
  color: var(--text-muted);
}

.job-notes-status.saved {
  color: var(--accent);
}

.job-notes textarea {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.job-status-row button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}

.job-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.job-filter-tabs button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.job-filter-tabs button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

@media print {
  header nav,
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block;
  }
  .layout {
    display: block;
  }
  main {
    border: none;
    padding: 0;
  }
  .app {
    max-width: none;
    padding: 0;
  }
  body {
    background: white;
    color: black;
  }
}

.billing-view {
  max-width: 900px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.current-plan {
  margin-bottom: 20px;
}

.usage-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.usage-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}

.usage-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: var(--accent);
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.plan-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.plan-card.current {
  border-color: var(--accent);
}

.plan-card h3 {
  margin: 0;
}

.plan-card-price {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.plan-card-limits {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.billing-view button {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.billing-view button:disabled {
  opacity: 0.6;
}

.billing-view button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.quickbooks-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.qbo-synced {
  font-size: 12px;
  color: var(--text-muted);
}

.reports-view {
  max-width: 900px;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 800px;
  margin-bottom: 32px;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

.report-card .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.report-card .value {
  font-size: 20px;
  font-weight: 700;
}

.report-card.over-budget .value {
  color: var(--danger);
}

.report-card .sub {
  font-size: 12px;
  color: var(--text-muted);
}

.reports-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.reports-range {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.reports-range-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-range-presets button.active {
  background: var(--accent);
  color: var(--on-accent);
}

.reports-range-dates {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.reports-range-dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.reports-range-dates input {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  padding: 6px 8px;
}

/* The unrated-labour warning. Deliberately loud: it says a number on this very
   page is wrong, which is worse than a number being missing. */
.reports-warning {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.warn-marker {
  color: var(--danger);
  font-weight: 700;
  margin-left: 3px;
  cursor: help;
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: 32px;
}

.job-profit-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.job-profit-table td:not(:first-child),
.job-profit-table th:not(:first-child) {
  text-align: right;
}

.job-profit-table tr.over-budget td {
  color: var(--danger);
}

.review-request-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.review-request-section p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.review-request-section label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.review-request-section input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  margin-top: 4px;
}

.new-lead-form,
.lead-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.new-lead-form label,
.lead-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.new-lead-form input,
.new-lead-form select,
.new-lead-form textarea,
.lead-edit-form input,
.lead-edit-form textarea {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.new-lead-form button,
.lead-edit-form button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  align-self: flex-start;
}

.lead-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.lead-status.new {
  background: var(--accent-bg);
  color: var(--accent);
}

.lead-status.contacted,
.lead-status.quoted {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.lead-status.won {
  background: #dcfce7;
  color: #166534;
}

.lead-status.lost {
  background: var(--bg);
  color: var(--danger);
}

.lead-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.lead-converted {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.lead-lost-row {
  display: flex;
  gap: 8px;
}

.lead-lost-row input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.lead-status-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.lead-status-filter select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.lead-source-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.lead-source-count {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-subtle, rgba(127, 127, 127, 0.12));
  color: var(--text-muted);
}

.messages {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-width: 600px;
}

.message-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  max-width: 80%;
}

.message-bubble.contractor {
  align-self: flex-end;
  background: var(--accent-bg);
}

/* On the homeowner's own portal, their own messages should read as "sent"
   (right-aligned), flipping the default contractor-view alignment above. */
.portal-view .message-bubble.contractor {
  align-self: flex-start;
  background: var(--bg);
}

.portal-view .message-bubble.homeowner {
  align-self: flex-end;
  background: var(--accent-bg);
}

.message-bubble p {
  margin: 2px 0;
}

.message-sender {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
}

.message-compose {
  display: flex;
  gap: 8px;
  max-width: 600px;
}

.message-compose input {
  flex: 1;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.message-compose button {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.voice-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.voice-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}

.voice-btn.listening {
  background: var(--danger);
  color: var(--on-danger);
  border-color: var(--danger);
}

.rate-input {
  max-width: 110px;
}

.rate-display {
  color: var(--text-muted);
  font-size: 13px;
}

.invite-status {
  color: var(--text-muted);
  font-size: 13px;
}

.invite-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.invite-row input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 160px;
}

.material-purchases,
.job-accounting {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.purchase-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  max-width: 480px;
}

.purchase-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.purchase-form input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.purchase-form-row {
  display: flex;
  gap: 12px;
}

.purchase-form-row label {
  flex: 1;
}

.purchase-form button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.purchase-note {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.accounting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 700px;
}

.accounting-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}

.accounting-grid .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.accounting-grid .value {
  font-size: 18px;
  font-weight: 700;
}

.accounting-grid .over-budget .value {
  color: var(--danger);
}

.accounting-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.homeowner-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.homeowner-link .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.homeowner-link code {
  font-size: 12px;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 120px;
}

.homeowner-link button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.portal-view {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}

.portal-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.portal-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.portal-header p {
  margin: 0 0 4px;
  color: var(--text-muted);
}

.portal-header .badge {
  display: inline-block;
  margin-top: 10px;
}

.portal-balance-summary {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.portal-balance-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-balance-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.portal-balance-value {
  font-size: 20px;
  font-weight: 600;
}

.portal-balance-due {
  color: var(--accent-warm, var(--accent));
}

.fp-trim-bar {
  margin: 8px 0;
}

.fp-trim-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.fp-trim-panel-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-trim-panel-group select {
  margin-top: 4px;
  width: 100%;
}

.trim-profile-preview {
  display: flex;
  gap: 10px;
}

.trim-profile-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.trim-profile-svg {
  width: 100%;
  max-width: 100px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.trim-head-on {
  max-width: 140px;
}

.trim-retail-list {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.trim-retail-date,
.trim-retail-note {
  color: var(--text-muted);
  font-style: italic;
}

.trim-retail-empty {
  margin: 6px 0 0;
  font-size: 12px;
}

.trim-profile-view-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.option-group-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.option-tier-row {
  display: flex;
  gap: 6px;
}

.option-tier-row input {
  flex: 1;
}

.option-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-group-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.option-group-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-tier-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.option-tier-desc {
  color: var(--text-muted);
}

.option-group-card {
  margin-bottom: 24px;
}

.option-tier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.option-tier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}

.option-tier-card:hover {
  border-color: var(--accent);
}

.option-tier-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.option-tier-label {
  font-weight: 700;
  font-size: 15px;
}

.option-tier-price {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.option-tier-description {
  font-size: 12px;
  color: var(--text-muted);
}

.option-tier-selected-badge {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.portal-timeline {
  list-style: none;
  margin: 12px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.portal-timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.portal-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex: 0 0 auto;
  background: var(--border);
}

.portal-timeline-dot.completed { background: var(--accent); }
.portal-timeline-dot.in-progress { background: var(--accent-warm, var(--accent)); }

.portal-timeline-title {
  font-weight: 600;
}

.portal-timeline-dates {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.portal-timeline-phase {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.portal-timeline-phase.completed { color: var(--accent); border-color: var(--accent); }
.portal-timeline-phase.in-progress { color: var(--accent-warm, var(--accent)); border-color: var(--accent-warm, var(--accent)); }

.portal-timeline-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.portal-proposal-signed {
  color: var(--accent);
  font-weight: 600;
}

.portal-proposal-pending {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.portal-proposal-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.portal-proposal-link:hover {
  opacity: 0.9;
}

.portal-scope-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.portal-scope-assumptions {
  margin: 8px 0 0;
  padding-left: 20px;
  line-height: 1.5;
}

.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 20px;
}

.photo-gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.photo-gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}

.photo-gallery-caption {
  font-size: 12px;
  color: var(--text-muted);
}

.photo-gallery-visibility {
  font-size: 11px;
  color: var(--text-muted);
}

.photo-gallery-item .remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Sticky section jump-nav -- always reachable no matter how far into a
   long section (hundreds of paint swatches, in particular) a homeowner has
   scrolled. Horizontal scroll of its own on narrow screens rather than
   wrapping, so it stays a single reachable row instead of eating vertical
   space above the fold. */
.portal-quicknav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.portal-quicknav button {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.portal-quicknav button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Contractor's own branding on the homeowner portal — the "Your Brand on the
   Homeowner Portal" reward. Sits above the job name so the homeowner sees whose
   business this is first. Absent entirely for anyone who hasn't unlocked it. */
.portal-branding {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.portal-branding-logo {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.portal-branding-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Earned category badges on the public portfolio. Deliberately quieter than
   the gold Liability-Certified badge above them — these are progress, not the
   endgame credential. */
.showcase-category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.showcase-category-badge {
  font-size: 12px;
}

.auth-view {
  max-width: 380px;
  margin: 80px auto;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.auth-back {
  align-self: flex-start;
  margin-bottom: 12px;
}

.auth-view h1 {
  margin: 0 0 24px;
  font-size: 24px;
  text-align: center;
}

.auth-view form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-view label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.auth-view input {
  font: inherit;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.auth-view button[type='submit'] {
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.auth-view button[type='submit']:disabled {
  opacity: 0.6;
}

.auth-switch {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  text-decoration: underline;
}

.auth-legal {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.auth-legal a {
  color: var(--text-muted);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-google-button {
  display: flex;
  justify-content: center;
}

.app-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.app-footer a {
  color: var(--text-muted);
}

.legal-doc h2 {
  font-size: 16px;
  margin: 28px 0 8px;
}

.legal-doc p,
.legal-doc li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.legal-doc ul {
  padding-left: 20px;
  margin: 8px 0;
}

.invoices {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.invoice-form {
  max-width: 560px;
  margin-bottom: 20px;
}

.invoice-form input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.invoice-form input.qty,
.invoice-form input.price {
  width: 90px;
}

.invoice-form table input {
  width: auto;
}

.invoice-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.invoice-form > button[type='submit'] {
  margin-top: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.invoice-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.invoice-status.draft {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.invoice-status.sent {
  background: var(--accent-bg);
  color: var(--accent);
}

.invoice-status.paid {
  background: #dcfce7;
  color: #166534;
}

.invoice-status.void {
  background: var(--bg);
  color: var(--danger);
  text-decoration: line-through;
}

.invoices table button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
}

.job-contact-editor {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.job-contact-editor input {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.job-meta button.secondary {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.portal-invoices {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-invoices li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}

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

.schedule-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.schedule-form {
  max-width: 560px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.schedule-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.schedule-form input,
.schedule-form select {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.schedule-form > button[type='submit'] {
  margin-top: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.schedule-job {
  color: var(--text-muted);
  font-weight: 400;
}

.schedule-employee-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  font-size: 14px;
  font-weight: 600;
}

.schedule-employee-filter select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 400;
}

.schedule-days {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.schedule-day h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--text-muted);
}

.schedule-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.schedule-status.scheduled {
  background: var(--accent-bg);
  color: var(--accent);
}

.schedule-status.cancelled {
  background: var(--bg);
  color: var(--danger);
  text-decoration: line-through;
}

.schedule-cancelled td {
  opacity: 0.55;
}

.schedule table button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
}

.sign-view {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}

.sign-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.sign-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.sign-header .badge {
  display: inline-block;
}

.signature-share {
  margin: 16px 0 24px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.share-link-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.share-link-row input {
  flex: 1;
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}

.sign-confirmation {
  color: var(--text-muted);
  font-weight: 600;
}

.sign-form {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  max-width: 480px;
}

.sign-form input[type='text'] {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  margin-top: 6px;
}

.sign-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}

.sign-agree {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 400 !important;
}

.sign-agree input {
  width: auto;
  margin-top: 0;
}

.sign-form > button[type='submit'] {
  margin-top: 16px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Inline text-styled action, e.g. the "use state base rate" tax suggestion --
   a suggestion to accept, not a primary form action, so it reads as a link
   rather than another button competing with Save. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  display: block;
}

.link-button:hover {
  color: var(--accent-hover, var(--accent));
}

.required-marker {
  color: var(--danger);
  font-weight: 600;
}

.job-outcome,
.estimate-accuracy {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.accuracy-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.accuracy-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.variance-over { color: var(--danger); font-weight: 600; font-variant-numeric: tabular-nums; }
.variance-under { color: var(--ok, #16a34a); font-weight: 600; font-variant-numeric: tabular-nums; }

.clause-body {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.clause-list dt {
  font-weight: 600;
  margin-top: 12px;
}

.clause-list dd {
  margin: 4px 0 0;
  color: var(--text-muted);
}

/* Bid missing-info gate: the share link stays disabled until every item in
   the checklist below is checked off. */
.bid-not-ready-hint {
  padding: 10px 12px;
  background: var(--warning-bg, rgba(217, 119, 6, 0.1));
  border: 1px solid var(--warning, #d97706);
  border-radius: var(--radius);
  color: var(--warning, #d97706);
}

.assumption-checklist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assumption-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: normal;
}

.assumption-checklist input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
}

.satellite-tool-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.satellite-tool-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.satellite-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.satellite-tool-header h3 {
  margin: 0;
}

.satellite-tool-search {
  display: flex;
  gap: 8px;
}

.satellite-tool-search input {
  flex: 1;
}

.satellite-tool-map {
  width: 100%;
  height: 400px;
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}

.satellite-tool-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.satellite-tool-actions {
  display: flex;
  gap: 8px;
}

.satellite-tool-panel button {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.satellite-tool-panel button:disabled {
  opacity: 0.6;
  cursor: default;
}

.satellite-tool-panel button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.satellite-tool-panel input {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.satellite-tool-measure-type {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.satellite-tool-measure-type label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.satellite-tool-measure-type select,
.satellite-tool-measure-type input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  width: 140px;
}

.showcase-link-hint code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}

/* The handbook: browsable lesson reference inside the Lessons tab. Native
   <details> so keyboard and screen-reader behaviour, and open/closed state,
   come from the browser rather than more React state. */
.mascot-handbook {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.mascot-handbook h4 {
  margin: 0 0 4px;
}

.mascot-handbook-course {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
  background: var(--bg);
}

.mascot-handbook-course > summary,
.mascot-handbook-lesson > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.92em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mascot-handbook-course > summary {
  font-weight: 600;
}

.mascot-handbook-course-count {
  flex-shrink: 0;
  font-size: 0.85em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mascot-handbook-blurb {
  margin: 0 12px 6px;
  font-size: 0.85em;
  color: var(--text-muted);
  line-height: 1.45;
}

.mascot-handbook-lesson {
  border-top: 1px solid var(--border);
}

.mascot-handbook-lesson > summary {
  font-weight: 500;
}

.mascot-handbook-tagline {
  margin: 0 12px 8px;
  font-size: 0.85em;
  font-style: italic;
  color: var(--text-muted);
}

.mascot-handbook-para {
  margin: 0 12px 10px;
  font-size: 0.88em;
  line-height: 1.55;
}

/* Challenge games. Deliberately reuses the checkpoint modal's shell and quiz
   option styling -- the difference is the scenario framing and the
   always-shown explanation, not new chrome. */
.mascot-game-intro {
  margin: 0 0 4px;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--text-muted);
}

.mascot-game-round {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

.mascot-game-scenario {
  margin: 0 0 10px;
  font-size: 0.95em;
  line-height: 1.55;
}

/* The teaching moment. Fires on right AND wrong, so it needs room to breathe
   rather than reading like a terse "nope". */
.mascot-game-round .mascot-tour-quiz-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88em;
  line-height: 1.5;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.mascot-game-round .mascot-tour-quiz-feedback.correct {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.credentials-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.credentials-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.credentials-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.credentials-list li.credential-expired {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.credentials-list li.credential-expiring {
  border-color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
}

.credential-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.credential-meta {
  color: var(--text-muted);
  font-size: 0.85em;
}

.credential-badge {
  font-size: 0.75em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.credential-badge.expired {
  background: var(--danger);
  color: var(--on-danger);
}

.requirements-lookup-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0 24px;
}

.requirements-no-data-note {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.requirements-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.requirement-card {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.requirement-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.requirement-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.5;
}

.requirement-severity-badge {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.requirement-requirement .requirement-severity-badge {
  background: var(--danger);
  color: var(--on-danger);
}

.requirement-question .requirement-severity-badge {
  background: var(--warning, #d97706);
  color: #fff;
}

.requirement-info .requirement-severity-badge {
  background: var(--accent);
  color: var(--on-accent);
}

.requirement-requirement {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.requirement-question {
  border-color: color-mix(in srgb, var(--warning, #d97706) 45%, var(--border));
}

.credential-badge.expiring {
  background: var(--warning, #d97706);
  color: #fff;
}

.credentials-list .remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.credentials-list .remove:hover {
  color: var(--danger);
}

.credential-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.credential-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.credential-expiry-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.credential-expiry-label input[type="date"] {
  flex: 1;
}

.showcase-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.showcase-view .showcase-job {
  margin-bottom: 32px;
}

.showcase-view .showcase-job h2 {
  margin-bottom: 12px;
}

.social-caption-panel {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.social-caption-panel .label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.caption-text {
  margin: 0 0 6px;
  white-space: pre-wrap;
}

.hashtags {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.social-caption-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.social-caption-actions button,
.share-buttons button,
.share-buttons a {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}

.share-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.change-orders {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.change-order-form {
  max-width: 480px;
  margin-bottom: 20px;
}

.change-order-form input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.change-order-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.change-order-form > button[type='submit'] {
  margin-top: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.credit {
  color: var(--accent);
}

.change-order-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.change-order-status.pending {
  background: var(--accent-bg);
  color: var(--accent);
}

.change-order-status.approved {
  background: #dcfce7;
  color: #166534;
}

.change-order-status.declined,
.change-order-status.void {
  background: var(--bg);
  color: var(--danger);
  text-decoration: line-through;
}

.change-order-signed {
  font-size: 12px;
  color: var(--text-muted);
}

.change-order-cards {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.change-order-cards li {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.change-order-card-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}

.change-order-respond input[type='text'] {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  width: 100%;
  margin-bottom: 8px;
}

.change-order-respond-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.documents {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.document-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  max-width: 480px;
}

.document-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.document-form input,
.document-form select {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.document-form .document-visible {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.document-form .document-visible input {
  width: auto;
}

.document-form button {
  padding: 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.job-folders {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.job-folders-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.job-folders-breadcrumb button {
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

.job-folders-breadcrumb button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.job-folders-crumb-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

.job-folders-new {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.job-folders-new input[type='text'] {
  flex: 1;
  min-width: 160px;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.job-folders-upload-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.job-folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.job-folder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.job-folder-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.job-folder-card input[type='text'] {
  flex: 1;
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.job-folder-open {
  flex: 1;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-folder-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.job-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.job-file-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.job-file-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.job-file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}

.job-file-preview img,
.job-file-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-file-icon {
  font-size: 32px;
}

.job-file-name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-file-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.job-file-card-actions select {
  flex: 1;
  font-size: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.portal-documents {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-documents li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}

.document-category {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: capitalize;
}

.paint-colors {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.paint-search-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.paint-search-row select,
.paint-search-row input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.paint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.paint-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}

.paint-swatch:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.paint-swatch-color {
  width: 100%;
  height: 48px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}

.paint-swatch-color.small {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
}

.paint-swatch-label {
  font-size: 12px;
  font-weight: 600;
}

.paint-swatch-number {
  font-size: 11px;
  color: var(--text-muted);
}

.flooring-category-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.flooring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.flooring-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  transition: box-shadow var(--transition), transform var(--transition);
}

.flooring-option:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.flooring-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}

.flooring-swatch.small {
  width: 22px;
  height: 22px;
  aspect-ratio: unset;
  display: inline-block;
  flex-shrink: 0;
}

.paint-pick-form {
  display: flex;
  /* Was a single unwrapped row -- on a phone-width viewport (the portal's
     real audience) the swatch + name + input + Save + Cancel add up wider
     than the screen, and the row OVERFLOWED instead of wrapping: Save and
     Cancel rendered past the right edge with no scroll affordance, so a
     homeowner who picked a color had no way to actually save it. Confirmed
     live at 375px: Cancel's rect was entirely outside the viewport.
     "Homeowner got stuck on colors, couldn't go further" was this. */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 12px;
}

.paint-pick-form input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  /* Lets the input actually shrink inside the flex row instead of forcing
     its default intrinsic width, which was the other half of the overflow
     -- a flex item's min-width defaults to its content size, not 0. */
  flex: 1 1 100px;
  min-width: 0;
}

.paint-selections-room {
  margin-bottom: 12px;
}

.paint-selections-room-name {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.paint-selections-role {
  min-width: 64px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.paint-selections {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paint-selections li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}

.paint-import-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.paint-import-form select,
.paint-import-form input[type='file'] {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.tour {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.tour-upload-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tour-upload-form input[type='text'] {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.tour-room-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tour-room-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.tour-room-thumb img {
  width: 100px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
}

.tour-room-thumb img.active {
  border-color: var(--accent);
}

.tour-editor-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tour-editor-controls button.active {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
}

.panorama-viewer.pnlm-container {
  width: 100%;
  max-width: 700px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.portal-panorama.pnlm-container {
  max-width: 100%;
  height: 420px;
  margin-bottom: 24px;
}

.tour-hotspot-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tour-hotspot-form select,
.tour-hotspot-form input {
  font: inherit;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}

.tour-hotspot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-hotspot-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}

.hotspot-label {
  color: var(--text-muted);
}

.wall-paint-picker {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 16px;
}

.wall-paint-picker .paint-grid {
  max-height: 220px;
  overflow-y: auto;
}

.wall-paint-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wall-paint-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wall-paint-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}

.wall-paint-group-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.surface-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.surface-toggle button {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 13px;
  cursor: pointer;
}

.surface-toggle button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.checklist-landing {
  max-width: 640px;
}

.checklist-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.checklist-intro {
  max-width: 58ch;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.checklist-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 380px;
}

.checklist-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.checklist-form input {
  font: inherit;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.checklist-form button {
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
}

.checklist-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Sits under the opt-in button: says plainly what happens to the address being
   handed over. Stating it at the point of the trade lowers the hesitation. */
.checklist-fineprint {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.checklist-confirm {
  font-weight: 600;
  margin-bottom: 24px;
}

.checklist-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.checklist-item:last-of-type {
  border-bottom: 1px solid var(--border);
}

.checklist-num {
  font-weight: 800;
  font-size: 18px;
  color: var(--accent);
}

.checklist-item h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.checklist-item p {
  margin: 0;
  color: var(--text-muted);
  max-width: 58ch;
}

.checklist-bonus {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--accent-bg);
  border-radius: var(--radius);
}

.checklist-bonus-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}

.checklist-bonus p {
  margin: 0;
}

.checklist-cta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid var(--text);
  max-width: 58ch;
}

.connect-payments-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.invoice-pay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pay-now-btn {
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pay-now-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mileage-log {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.mileage-start-row,
.mileage-tracking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mileage-trip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mileage-trip-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}

/* Liability University -- mascot widget, lessons, progress, Store */

.mascot-widget-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: var(--shadow-lg);
  animation: mascot-idle-bounce 3s ease-in-out infinite;
}

.mascot-widget-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: var(--on-danger);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes mascot-idle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes mascot-zip {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0.4; }
  60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.mascot-zip {
  animation: mascot-zip 0.5s ease-out;
}

.mascot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.mascot-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mascot-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mascot-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mascot-widget-head {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mascot-panel-head {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.mascot-panel-title h3 {
  margin: 0;
}

.mascot-tokens {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.mascot-tier-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mascot-tier-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.mascot-tier-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.mascot-tier-label {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.mascot-tabs {
  display: flex;
  gap: 8px;
}

.mascot-tabs button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.mascot-tabs button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.mascot-tour-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Quick Start is the primary path and has to look like it. Warm ground
   because that's Otto's own color, and because the full-tour button sitting
   underneath it is a plain secondary -- the contrast is the whole point.
   Nineteen minutes of curriculum is not what a contractor wants at signup;
   three minutes to a signed bid is. */
.mascot-quickstart {
  align-self: stretch;
  background: var(--accent-warm-bg);
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.mascot-quickstart h4 {
  margin: 0;
  color: var(--accent-warm-text);
  font-size: 0.95rem;
}
.mascot-quickstart p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
}
.mascot-quickstart button {
  background: var(--accent-warm);
  color: var(--on-warm);
  border-color: var(--accent-warm);
}

.mascot-course-play {
  margin: 0 0 10px;
  font-size: 0.82rem;
  padding: 5px 12px;
}

/* The contextual offer, sitting just above the floating Otto button. Sized
   and positioned to read as something Otto is saying rather than a system
   notification -- it is an offer, and it takes "not now" for an answer. */
.mascot-nudge {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 940;
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  background: var(--panel);
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mascot-nudge p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}
.mascot-nudge-actions {
  display: flex;
  gap: 8px;
}
.mascot-nudge-actions button {
  font-size: 0.82rem;
  padding: 5px 12px;
}
.mascot-nudge-actions button:first-child {
  background: var(--accent-warm);
  color: var(--on-warm);
  border-color: var(--accent-warm);
}

@media (prefers-reduced-motion: no-preference) {
  .mascot-nudge {
    animation: mascot-nudge-in 220ms ease-out both;
  }
}
@keyframes mascot-nudge-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The floating card during an active guided tour -- deliberately not a
   modal, so the real page underneath stays visible and usable. The avatar
   itself is rendered and positioned by guide.js, outside React entirely. */
.mascot-tour-card {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 950;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: 100%;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mascot-tour-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mascot-tour-step-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.mascot-tour-card h4 {
  margin: 0;
}

.mascot-tour-tagline {
  color: var(--text-muted);
  margin: -4px 0 0;
}

/* The transcript is a captions companion to the spoken narration, not the
   primary reading surface -- kept visually secondary (smaller, muted). */
.mascot-tour-transcript {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mascot-tour-quiz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.mascot-tour-quiz-question {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.mascot-tour-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mascot-tour-quiz-option {
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  white-space: normal;
}

.mascot-tour-quiz-option.picked {
  border-color: var(--accent);
}

.mascot-tour-quiz-option.correct {
  background: #dcfce7;
  border-color: #166534;
  color: #166534;
}

.mascot-tour-quiz-option.wrong {
  background: var(--danger-bg, rgba(239, 68, 68, 0.12));
  border-color: var(--danger);
  color: var(--danger);
}

.mascot-tour-quiz-feedback {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.mascot-tour-quiz-feedback.wrong {
  color: var(--danger);
}

.mascot-tour-quiz-feedback.correct {
  color: #166534;
}

.mascot-tour-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.mascot-tour-controls button {
  padding: 6px 10px;
  font-size: 13px;
}

/* Checkpoint modal -- one of these per 5-lesson block, reusing the
   .mascot-tour-quiz* rules above (one per question) rather than inventing
   parallel styling for what's visually the same thing repeated. */
.mascot-checkpoint-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.mascot-checkpoint-result {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.mascot-checkpoint-result.correct {
  color: #166534;
}

.mascot-checkpoint-tally {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.mascot-tour-speaking-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

.mascot-progress-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mascot-category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mascot-category-badge {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  opacity: 0.65;
}

.mascot-category-badge.earned {
  opacity: 1;
  border-color: var(--accent);
}

.mascot-certificate-preview {
  padding: 12px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
}

.mascot-endgame-note {
  font-weight: 600;
  color: var(--accent);
}

.mascot-store-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mascot-store-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.mascot-store-item-icon {
  font-size: 22px;
}

.mascot-store-item-info {
  flex: 1;
}

.mascot-store-item-info p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.mascot-perk-status {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.mascot-certificate-print {
  text-align: center;
  padding: 40px;
}

.liability-certified-badge {
  background: var(--accent-bg);
  color: var(--accent);
}

.portal-header.portfolio-framed {
  border: 3px solid var(--portfolio-frame-color, var(--accent));
  border-radius: 10px;
  padding: 16px;
}

/* Otto's Skip/Next buttons (guide.js, never modified) fail contrast at his
   default accent color — overridden here instead of touching the vendored engine. */
.pg-bubble .pg-skip {
  color: #55565c;
}

.pg-bubble .pg-next {
  background: #3a5bb5;
  border-color: #3a5bb5;
}

/* ---- Public landing page (logged-out visitors) --------------------------- */
.landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--header-bg);
  background-color: #0E1524;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.landing-header h1 {
  margin: 0;
  font-size: 22px;
  color: var(--header-text);
}

.landing-nav {
  display: flex;
  gap: 10px;
}

.landing-hero {
  text-align: center;
  padding: 64px 16px 40px;
}

.landing-hero h2 {
  font-size: 42px;
  margin: 0 0 16px;
  text-wrap: balance;
}

.landing-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.landing-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.landing-hero-actions button {
  font-size: 16px;
  padding: 12px 24px;
}

.landing-proof {
  text-align: center;
  margin: 8px 0 56px;
}

.landing-proof img {
  width: 100%;
  max-width: 720px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.landing-proof-caption {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 14px;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}

.landing-feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.landing-feature-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.landing-feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.landing-pricing {
  text-align: center;
  margin-bottom: 56px;
}

.landing-pricing h2 {
  margin: 0 0 28px;
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.landing-pricing-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  box-shadow: var(--shadow-sm);
}

.landing-pricing-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.landing-pricing-price {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-warm-text);
}

.landing-pricing-detail {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Every button on this page was falling through to the browser default, so
   the primary CTA was visually identical to the secondary on the one screen
   whose entire job is getting that click. Amber = primary action, per the
   house convention. */
.landing button {
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.landing button.secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

/* The nav sits on the dark header gradient, where --panel disappears. */
.landing-nav button.secondary {
  background: transparent;
  color: var(--header-text);
  border-color: rgba(225, 229, 236, 0.35);
}

/* Sits beside the wordmark, so the old headline keeps working as a tagline
   without occupying the slot that has to stop a contractor scrolling. */
.landing-tagline {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(225, 229, 236, 0.25);
  color: var(--header-text);
  opacity: 0.7;
  font-size: 13px;
  white-space: nowrap;
}

/* The letter opening. Narrow measure so it reads as one person talking
   rather than as a marketing column. */
.landing-story {
  max-width: 620px;
  margin: 0 auto 56px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.landing-story p {
  margin: 0 0 14px;
}

.landing-story p:last-child {
  margin-bottom: 0;
}

.landing-story strong {
  color: var(--text);
}

.landing-honest {
  margin-bottom: 64px;
}

.landing-honest h2 {
  text-align: center;
  margin: 0 0 24px;
}

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

.landing-honest-item {
  border-left: 3px solid var(--accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-warm-bg);
  padding: 16px 18px;
}

.landing-honest-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--accent-warm-text);
}

.landing-offer {
  max-width: 620px;
  margin: 0 auto 32px;
}

.landing-offer h2 {
  margin: 0 0 12px;
}

.landing-offer p {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.landing-offer strong {
  color: var(--text);
}

.landing-offer-guarantee {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 15px;
}

.landing-offer-bonus {
  border-top: 1px solid var(--accent-warm);
  padding-top: 12px;
  margin-top: 16px;
  font-size: 15px;
  color: var(--accent-warm);
}

.landing-ask {
  max-width: 520px;
  margin: 0 auto;
}

.landing-ask button {
  font-size: 16px;
  padding: 12px 24px;
}

.landing-ask p {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.landing-ask strong {
  color: var(--text);
}

@media (max-width: 640px) {
  .landing-hero h2 { font-size: 30px; }
  .landing-hero-actions { flex-direction: column; }
  .landing-tagline { display: none; }
}


/* ---- Floorplan editor (slice 1: geometry + wall drawing) ----------------
   Two tools only, never a CAD toolbar -- the app's direction is calm and
   simple. Warm amber stays reserved for primary actions per the convention
   above, so selection and active states use --accent instead. Every colour
   is a semantic token so dark mode comes for free. */
.fp-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-disclaimer {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--panel);
}

.fp-homeowner-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 14px;
  cursor: pointer;
}

.fp-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.fp-mode-switch button {
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
}

.fp-mode-switch button.active {
  background: var(--accent-warm);
  color: #fff;
}

.fp-sketch-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent-warm) 10%, var(--panel));
  margin-bottom: 8px;
}

.fp-sketch-refine {
  flex-shrink: 0;
  border: 1px solid var(--accent-warm);
  border-radius: 6px;
  background: var(--accent-warm);
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* Sketch mode reads as a different tool, not the precise editor with a
   banner slapped on -- a warmer, looser grid signals "rough pass" the
   instant the canvas is visible. */
.fp-canvas.sketch {
  background: color-mix(in srgb, var(--accent-warm) 4%, var(--bg));
}

.fp-canvas.sketch .fp-grid-line {
  stroke-dasharray: 2 4;
}

.fp-canvas.sketch .fp-wall {
  stroke: var(--accent-warm);
}

.fp-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Canvas + tool rail + sidebar -- Corey's own reference (SD3D screens
   shared 2026-08-24): a narrow vertical DRAWING TOOLS list docked to the
   left of the plan, takeoff tables docked to the right. */
.fp-workspace {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fp-tool-rail-wrap {
  flex: 0 0 100px;
  max-height: 720px;
  overflow-y: auto;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: var(--radius);
  background: var(--bg, #fff);
  padding: 10px 8px;
}

.fp-tool-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Bold section label -- the reference's own "DRAWING TOOLS" convention. */
.fp-tool-rail-heading {
  margin: 10px 0 2px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
}

.fp-tool-rail-heading:first-child {
  margin-top: 2px;
}

/* Each cluster is now a vertical stack, not a bordered horizontal group --
   the rail itself is the visual grouping, so the old divider-per-cluster
   convention is gone; a heading marks the boundary instead. */
.fp-tool-cluster {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fp-tool-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 8px;
}

.fp-tool-label select,
.fp-tool-label input {
  font-size: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.fp-settings {
  position: relative;
}

.fp-settings-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.fp-settings-toggle.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.fp-settings-drawer {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fp-levels,
.fp-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp-levels button {
  padding: 6px 12px;
  min-height: 36px; /* large tap targets per the design direction */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Rail buttons: left-aligned icon + label row, full width of the rail --
   the reference's own row shape, not a pill. */
.fp-tool-rail button {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px;
  min-height: 32px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 11px;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  flex-wrap: wrap;
}

.fp-tool-rail button:hover {
  background: var(--surface-2, #f2f0ea);
}

.fp-levels button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.fp-tool-rail button.active {
  background: var(--accent-soft, var(--surface-2, #f0eee8));
  color: var(--accent);
  font-weight: 600;
}

.fp-levels button:focus-visible,
.fp-tool-rail button:focus-visible,
.fp-zoom button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fp-grid-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.fp-zoom {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 14px;
}

.fp-zoom button {
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.fp-readonly-note {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--accent-warm-bg);
  color: var(--accent-warm-text);
  font-size: 13px;
}

.fp-canvas-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.fp-sidebar {
  flex: 0 0 320px;
  max-height: 720px;
  overflow-y: auto;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: var(--radius);
  background: var(--bg, #fff);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fullscreen targets .fp-workspace (canvas + tool rail together), not just
   the canvas -- Corey's own report: "when i go into full screen mode i
   cant see the drawing tools." The rail lives outside .fp-canvas-wrap as
   of the toolbar restyle, so making only the canvas fullscreen left the
   rail behind on the page underneath. Same treatment FloorPlan3D's own
   fullscreen wrap uses otherwise: border/radius only make sense boxed,
   dropped once this element IS the whole screen. */
.fp-workspace:fullscreen {
  height: 100vh;
  width: 100vw;
  background: var(--bg, #fff);
  padding: 12px;
  box-sizing: border-box;
  align-items: stretch;
}

.fp-workspace:fullscreen .fp-canvas-wrap {
  flex: 1;
  height: 100%;
  border: none;
  border-radius: 0;
}

.fp-workspace:fullscreen .fp-canvas {
  width: 100%;
  height: 100%;
}

.fp-workspace:fullscreen .fp-tool-rail-wrap {
  max-height: 100%;
}

.fp-workspace:fullscreen .fp-sidebar {
  max-height: 100%;
}

.fp-canvas-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 6px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.fp-canvas-fullscreen-btn:hover {
  opacity: 1;
}

.fp-canvas {
  display: block;
  width: 100%;
  height: 520px;
  touch-action: none;
}

.fp-canvas.drawing {
  cursor: crosshair;
}

.fp-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.5;
}

.fp-ghost-wall {
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  opacity: 0.35;
}

.fp-room {
  fill: var(--accent-bg);
  stroke: none;
  opacity: 0.85;
  transition: opacity 0.15s, stroke 0.15s;
}

.fp-room.selected {
  stroke: var(--accent);
  stroke-width: 4;
  opacity: 1;
}

.fp-room-label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.fp-room-area {
  fill: var(--text-muted);
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Room tag badge -- real takeoff/room-schedule convention: a numbered
   circle on the plan ties back to a schedule table row, same role the
   cabinet shop drawing's C1/C2/C3 tags already play. */
.fp-room-tag-badge {
  fill: #1e3a5f;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}

.fp-room-tag-text {
  fill: #fff;
  font-size: 10px;
  font-weight: 700;
  dominant-baseline: middle;
  pointer-events: none;
}

/* Visual handles for room/wall manipulation (conditionally rendered) */
.fp-wall-handle {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
  cursor: grab;
  transition: r 0.15s;
}

.fp-wall-handle:hover {
  r: 7;
}

.fp-room-handle {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 2;
  cursor: grab;
  transition: r 0.15s;
}

.fp-room-handle:hover {
  r: 7;
}

.fp-room-center-handle {
  fill: var(--accent-warm);
  stroke: #fff;
  stroke-width: 2;
  cursor: move;
  opacity: 0.8;
  transition: opacity 0.15s, r 0.15s;
}

.fp-room-center-handle:hover {
  opacity: 1;
  r: 10;
}

.fp-room-tag-chip {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #1e3a5f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.fp-wall {
  stroke: var(--text);
  stroke-width: 5;
  stroke-linecap: round;
  cursor: pointer;
}

.fp-wall.selected {
  stroke: var(--accent);
  stroke-width: 7;
}

.fp-wall.draft {
  stroke: var(--accent);
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.fp-corner {
  fill: var(--bg);
  stroke: var(--text);
  stroke-width: 2;
  pointer-events: none;
}

.fp-dimension {
  pointer-events: none;
}

.fp-dim-ext {
  stroke: var(--text-muted, #94a3b8);
  stroke-width: 1;
  opacity: 0.6;
}

.fp-dim-line {
  stroke: var(--text-muted, #94a3b8);
  stroke-width: 1;
}

.fp-dim-label {
  fill: var(--text-muted, #94a3b8);
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: text-after-edge;
}

.fp-dim-toggle {
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 6px;
  background: var(--bg);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

.fp-dim-toggle.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.fp-print-btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.fp-print-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.fp-print-title {
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.fp-print-title h2 {
  margin: 0 0 2px;
}

.fp-print-title p {
  margin: 2px 0;
  font-size: 13px;
}

.fp-print-disclaimer {
  margin-top: 6px !important;
  font-style: italic;
  font-size: 11px !important;
}

@media print {
  .fp-canvas-wrap {
    border: none;
  }
  .fp-canvas {
    width: 100%;
    height: auto;
    max-height: 90vh;
  }
  /* Editable room-name inputs read as boxed form fields on paper -- print
     them as plain text instead, the same information without the chrome. */
  .fp-room-table input {
    border: none;
    background: transparent;
    font: inherit;
    padding: 0;
  }
}

.fp-measure {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.fp-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}

.fp-save-state {
  font-variant-numeric: tabular-nums;
}

.fp-room-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Make tables scrollable on smaller windows */
@media (max-width: 1024px) {
  .fp-room-table {
    font-size: 12px;
    display: block;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
  }

  .fp-room-table thead {
    position: sticky;
    top: 0;
    background: var(--surface);
  }
}

.fp-room-table caption {
  text-align: left;
  padding-bottom: 6px;
  font-weight: 600;
  color: var(--text);
}

.fp-room-table th,
.fp-room-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.fp-divergence-banner {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

.fp-divergence-banner ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-divergence-banner li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-divergence-signed {
  color: #9a3412;
  font-weight: 600;
  margin: 4px 0 0;
}

.fp-divergence-accept {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 10px;
}

.fp-provenance-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 10px;
  background: #dbe9fb;
  color: #1e3a5f;
  vertical-align: middle;
}

.fp-room-table td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.fp-room-table input {
  width: 100%;
  min-width: 120px;
}

/* Cabinet shop drawings -- CAD-sheet styling: white ground, black hairlines,
   monospace-adjacent numerals, the look of a real drawing rather than the
   app's normal UI chrome. Deliberately breaks from --panel/--accent tokens
   here, the same way the plan-view dimension lines do, because this is
   meant to read as a printed technical sheet. */
.csd-sheet {
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.csd-title {
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.csd-title h2 { margin: 0 0 2px; }
.csd-title p { margin: 2px 0; font-size: 13px; }
.csd-disclaimer { font-style: italic; font-size: 11px !important; margin-top: 6px !important; }

.csd-sheet h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
  margin: 20px 0 10px;
}

.csd-floorview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.csd-floorview-band {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csd-floorline {
  stroke: #000;
  stroke-width: 1;
}

.csd-wall-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
  margin: 12px 0 4px;
}

.csd-topview + .csd-topview,
.csd-floorview + .csd-floorview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #ccc;
}

.csd-carcass {
  fill: #f7f5f0;
  stroke: #000;
  stroke-width: 1.2;
}

/* Upper/tall units shaded blue, lowers stay gray -- the "Modern
   Presentation Plan" color convention from the reference sheet. */
.csd-carcass.csd-upper,
.csd-cavity.csd-upper {
  fill: #dbe9fb;
}

.csd-toekick {
  stroke: #000;
  stroke-width: 0.8;
  stroke-dasharray: 3 2;
}

.csd-countertop {
  fill: #3a3a3a;
  stroke: #000;
  stroke-width: 0.8;
}

.csd-front {
  fill: #fff;
  stroke: #000;
  stroke-width: 0.9;
}

/* Blind-corner panel -- fixed millwork, not a door, so it reads visually
   distinct from a real front: no hardware ever draws on it (see
   BoxElevationContent), a light diagonal hatch marks it as non-functional. */
.csd-blind-panel {
  fill: #f0eee8;
  stroke-dasharray: 2 2;
}

.csd-hardware {
  fill: #000;
}

/* Reserved appliance opening -- dashed, unfilled, the same "not modeled,
   just held" convention as the 2D plan's .fp-builtin.appliance-space. */
.csd-cavity {
  fill: none;
  stroke: #000;
  stroke-width: 0.9;
  stroke-dasharray: 5 3;
}

.csd-cavity-label {
  font-size: 9px;
  fill: #555;
  text-anchor: middle;
}

/* Open shelving (wine rack) diagonal cross-hatch -- standard shop-drawing
   symbol for an open bottle-grid/shelf cavity. */
.csd-hatch-line {
  stroke: #999;
  stroke-width: 0.6;
}

.csd-tag {
  font-size: 11px;
  font-weight: 700;
  fill: #000;
}

.csd-subhead {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #666;
}

.csd-topview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.csd-topview-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csd-topview-row-label {
  font-size: 11px;
  font-weight: 700;
  color: #333;
}

.csd-topview-row-label em {
  font-style: italic;
  font-weight: 400;
  color: #777;
}

.csd-topview-label {
  font-size: 8px;
  fill: #333;
  text-anchor: middle;
}

.csd-topview-width {
  font-size: 8px;
  fill: #555;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.csd-topswing-leaf {
  stroke: #2563eb;
  stroke-width: 0.8;
  stroke-dasharray: 3 2;
}

.csd-topswing-arc {
  fill: none;
  stroke: #2563eb;
  stroke-width: 0.8;
}

.csd-topslide-line {
  stroke: #2563eb;
  stroke-width: 1;
}

.csd-arrowhead-fill {
  fill: #2563eb;
}

.csd-specsbox,
.csd-swinglegend {
  border: 1px solid #000;
  padding: 10px 14px;
  margin-top: 12px;
  max-width: 420px;
}

.csd-specsbox h4,
.csd-swinglegend h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.csd-specsbox ul {
  margin: 0;
  padding-left: 16px;
  font-size: 10px;
  line-height: 1.5;
}

.csd-swinglegend {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csd-swinglegend p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
  color: #333;
}

.csd-dim line {
  stroke: #000;
  stroke-width: 0.6;
}

.csd-dim text {
  font-size: 9px;
  fill: #000;
}

.csd-equipment td:first-child,
.csd-legend td:first-child {
  font-weight: 700;
}

.csd-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 3px;
}

.csd-material-note {
  font-style: italic;
  color: #666;
  font-size: 11px;
}

.csd-cut-error {
  color: #b91c1c;
  font-weight: 600;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 8px 10px;
}

.csd-cut-summary {
  font-size: 12px;
  color: #333;
  margin: 4px 0 12px;
}

.csd-cut-stages {
  font-size: 12px;
  margin: 0 0 16px 20px;
  padding: 0;
}

.csd-cutlist {
  margin-bottom: 16px;
}

.csd-sheets {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.csd-sheet-diagram {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csd-sheet-outline {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5;
}

.csd-sheet-piece {
  stroke: #000;
  stroke-width: 0.75;
}

.csd-sheet-piece-plywood { fill: #e9dfc8; }
.csd-sheet-piece-mdf { fill: #dbe9fb; }
.csd-sheet-piece-plywoodPanel { fill: #f3d9b1; }
.csd-sheet-piece-solidWood { fill: #d8c1a0; }

.csd-sheet-piece-label {
  font-size: 7px;
  fill: #222;
  text-anchor: middle;
  pointer-events: none;
}

@media print {
  .csd-sheet {
    border: none;
    padding: 0;
  }

  /* A live WebGL canvas doesn't reliably rasterize in a browser's
     print-to-PDF pipeline -- the flat top/floor-view elevations are
     already the real fabrication document; the 3D preview is an
     on-screen-only convenience. */
  .print-hide {
    display: none !important;
  }
}

.csd-thumb-cell {
  width: 60px;
  padding: 2px !important;
}

.csd-thumb-fallback {
  width: 56px;
  height: 56px;
  background: #f0eee8;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .fp-canvas { height: 340px; }
  .fp-toolbar { gap: 10px; }
}

/* ---- Floorplan: view switch, openings, 3D ------------------------------- */
.fp-viewswitch {
  display: flex;
  gap: 4px;
}

.fp-viewswitch button {
  padding: 6px 16px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.fp-viewswitch button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.fp-viewswitch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* An opening is drawn as a lighter break in the wall line -- the plan
   convention, and it must be visible in 2D, not only in 3D. Kind is encoded
   by dash pattern as well as colour, never colour alone. */
.fp-opening {
  stroke: var(--panel);
  stroke-width: 5;
  stroke-linecap: butt;
  pointer-events: none;
}

.fp-opening.window {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 3 2;
}

.fp-opening.cased {
  stroke: var(--panel);
  stroke-dasharray: 8 3;
}

.fp-opening.selected {
  stroke: var(--danger, #c0392b);
  stroke-width: 6;
}

/* A real docked panel, not a block sitting below the canvas -- Corey's own
   reference (Space Designer 3D's selection panel, 3rd video shared
   2026-08-24) floats a properties panel over the top-right of the viewport
   the instant something is selected. Anchored to .fp-canvas-wrap (already
   position:relative) so it tracks the canvas correctly no matter how far
   down the page the floorplan tab is scrolled -- position:fixed would
   anchor to the viewport instead and drift away from the canvas entirely. */
.fp-inspector-dock {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 300px;
  max-width: calc(100% - 24px);
  overflow-y: auto;
  z-index: 5;
  pointer-events: none;
}

.fp-inspector-dock > * {
  pointer-events: auto;
}

/* Below the same width this editor already treats as "not comfortable"
   (COMFORTABLE_WIDTH_PX), a floating dock would cover most of the drawing
   surface -- falls back to a plain block under the canvas instead, the
   original layout, rather than fighting for space on a narrow window. */
@media (max-width: 760px) {
  .fp-inspector-dock {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin-top: 10px;
  }
}

/* The one shell every selected object's properties render inside -- a wall,
   opening, stair, or built-in. Same header/summary/body shape regardless of
   which one it is, so the editor reads as one coherent inspector rather than
   four independently-styled panels that happened to appear near each other.
   Restyled to the reference's own look: a real floating card (shadow, not a
   flat border), a bold title instead of a small label, generous padding. */
.fp-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e2e0da);
  border-radius: 10px;
  background: var(--bg, #fff);
  box-shadow: 0 6px 24px rgba(30, 25, 15, 0.14);
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .fp-inspector {
    box-shadow: none;
  }
}

/* The built-in panel's fields (width/finish/hardware/etc.) run in a row since
   it has many short ones; everything else stacks, so this is opt-in per body
   rather than guessed from how many fields happen to be present. */
.fp-inspector-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.fp-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.fp-inspector-head strong {
  font-size: 16px;
}

/* Real collapsible sections -- the reference's own "▼ COLORS" convention.
   A plain button (not a details/summary pair) so the chevron can animate
   and the whole row stays one clean click target, label included. */
.fp-section {
  border-top: 1px solid var(--border, #ece9e2);
  padding-top: 8px;
}

.fp-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text, #222);
  cursor: pointer;
}

.fp-section-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 11px;
  color: var(--text-muted, #888);
}

.fp-section-chevron.open {
  transform: rotate(90deg);
}

.fp-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}

.fp-section-action {
  margin-top: 2px;
  font-size: 12px;
  align-self: flex-start;
}

/* One color row -- swatch, hex, optional reset -- reused for every
   colorable part (cabinet body/door/hardware, countertop, wall sides,
   door leaf) so they all read as the same real control. */
.fp-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.fp-color-row-label {
  flex: 1 1 auto;
  color: var(--text, #333);
}

.fp-color-row-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The native color input restyled as the small square swatch the reference
   shows -- clicking it still opens the real OS/browser color picker, this
   just stops it looking like a leftover form control. */
.fp-color-row-control input[type='color'] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 5px;
  cursor: pointer;
  background: none;
}

.fp-color-hex {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted, #777);
  min-width: 5.5em;
}

.fp-color-reset {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted, #888);
  padding: 2px 4px;
  line-height: 1;
}

.fp-color-reset:hover {
  color: var(--text, #333);
}

.fp-inspector-delete {
  font-size: 12px;
  padding: 3px 10px;
}

.fp-inspector-summary {
  margin: 0;
  width: 100%;
}

.fp-tool-options {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-opening-sizer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.fp-size-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-size-group legend {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}
}

.fp-width-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.fp-width-presets button {
  padding: 4px 9px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fp-width-presets button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.fp-wall-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Real pop-up, not another inline panel -- Corey specifically wanted a
   pop-up window when selecting a door/window/cabinet so picking a style
   reads as a distinct decision, not one more field in the side panel. */
.fp-style-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
}

.fp-style-modal {
  background: var(--bg, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 20px;
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}

.fp-style-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.fp-style-modal-head strong {
  font-size: 16px;
}

.fp-style-modal-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--text-muted, #666);
}

.fp-style-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.fp-style-modal-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 8px;
  background: var(--surface-2, #f7f7f9);
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  color: var(--text, #222);
}

.fp-style-modal-grid button svg {
  color: var(--text-muted, #555);
}

.fp-style-modal-grid button.active svg {
  color: #fff;
}

.fp-style-modal-grid button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Materials browser -- category list on the left, swatch grid on the
   right, the reference's own MATERIALS modal shape. Wider than the plain
   style picker since it carries two panes at once. */
.fp-materials-modal {
  background: var(--bg, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 20px;
  width: min(640px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.fp-materials-body {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  overflow: hidden;
}

.fp-materials-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 160px;
  border-right: 1px solid var(--border, #e2e0da);
  padding-right: 12px;
  overflow-y: auto;
}

.fp-materials-categories button {
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, #333);
}

.fp-materials-categories button.active {
  background: var(--accent-soft, var(--surface-2, #f0eee8));
  color: var(--accent, #333);
  font-weight: 600;
}

.fp-materials-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  overflow-y: auto;
  align-content: start;
}

.fp-materials-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 8px;
  background: var(--surface-2, #f7f7f9);
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  color: var(--text, #222);
}

.fp-materials-grid button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.fp-materials-swatch {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.fp-materials-paint-flag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-warm-text, #8a5a00);
  background: var(--accent-warm-bg, #fdf1dc);
  border-radius: 4px;
  padding: 1px 5px;
}

.fp-wall-material-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Built-in catalog -- category list + a picture-and-size grid, replacing
   the plain <select><optgroup> that used to be the only way to see what a
   "24in base cabinet" even looked like before placing one. Same shape as
   the materials browser (category rail + item grid), inline in the
   toolbar panel rather than a modal since this is a persistent placement
   tool, not a one-shot pick. */
.fp-catalog {
  display: flex;
  gap: 12px;
  width: 100%;
  max-height: 260px;
}

.fp-catalog-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 170px;
  overflow-y: auto;
  border-right: 1px solid var(--border, #e2e0da);
  padding-right: 10px;
}

.fp-catalog-categories button {
  text-align: left;
  border: none;
  background: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text, #333);
}

.fp-catalog-categories button.active {
  background: var(--accent-soft, var(--surface-2, #f0eee8));
  color: var(--accent, #333);
  font-weight: 600;
}

.fp-catalog-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  overflow-y: auto;
  align-content: start;
}

.fp-catalog-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 8px;
  background: var(--surface-2, #f7f7f9);
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  color: var(--text, #222);
}

.fp-catalog-grid button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.fp-catalog-size {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #888);
}

@media (max-width: 760px) {
  .fp-catalog {
    flex-direction: column;
    max-height: none;
  }
  .fp-catalog-categories {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border, #e2e0da);
    padding-right: 0;
    padding-bottom: 8px;
  }
}

.fp3d {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp3d-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fp3d-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp3d-group-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 4px;
}

.fp3d-group button {
  padding: 5px 12px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.fp3d-group button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.fp3d-group button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fp3d-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.fp3d-sun {
  min-width: 160px;
}

.fp3d-sun input[type='range'] {
  flex: 1;
  min-width: 100px;
}

.fp3d-canvas-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #101010;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp3d-canvas-wrap canvas {
  display: block;
}

/* Full-screen walkthrough: the wrap becomes the entire viewport (the
   Fullscreen API's own UA styles mostly do this, but height/border-radius
   need an explicit override so the border doesn't clip a corner of the
   screen and the canvas actually fills it edge to edge). */
.fp3d-canvas-wrap:fullscreen {
  height: 100vh;
  width: 100vw;
  border: none;
  border-radius: 0;
}

.fp3d-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px;
  text-align: center;
}

.fp3d-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .fp3d-canvas-wrap { height: 360px; }
}

/* ---- Bid price breakdown, shown on the job ------------------------------
   The job carried a Bid Estimate total with no way to see what made it up;
   finding the line items meant leaving for the Bids tab. Totals and their
   breakdown belong together. */
.bid-breakdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bid-scope-visibility {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.bid-scope-visibility h4 {
  margin: 0 0 8px;
}

.bid-scope-preview {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.bid-scope-assumptions-preview {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
  padding-left: 18px;
}

.bid-scope-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.bid-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bid-breakdown-table caption {
  text-align: left;
  padding-bottom: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.bid-breakdown-table th,
.bid-breakdown-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.bid-breakdown-table td:nth-child(2),
.bid-breakdown-table td:nth-child(4),
.bid-breakdown-table td:nth-child(5),
.bid-breakdown-table tfoot td {
  font-variant-numeric: tabular-nums;
}

.bid-breakdown-table tfoot th,
.bid-breakdown-table tfoot td {
  font-weight: 700;
  border-bottom: none;
  padding-top: 10px;
}

.bid-breakdown-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.bid-breakdown-desc-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.bid-breakdown-chevron {
  display: inline-block;
  width: 12px;
  color: var(--text-muted);
}

.bid-breakdown-detail-row td {
  background: var(--panel-alt, #f7f7f5);
  padding: 10px 14px !important;
  font-size: 13px;
}

.bid-breakdown-includes-list {
  margin: 4px 0 0;
  padding-left: 18px;
}

.bid-breakdown-includes-list li {
  margin-bottom: 2px;
}

.bid-breakdown-includes-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.bid-breakdown-includes-edit textarea {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 6px 8px;
  resize: vertical;
}

.bid-breakdown-table input[type="number"] {
  width: 80px;
  padding: 3px 6px;
  font-size: 13px;
}

/* Narrow-window behaviour. The floorplan editor must remain usable, not
   merely visible -- an earlier build disabled drawing below 900px, which
   silently removed the point of the tool. */
@media (max-width: 760px) {
  .fp-toolbar,
  .fp3d-toolbar {
    gap: 8px;
  }
  .fp-levels,
  .fp3d-group {
    flex-wrap: wrap;
  }
  /* Below the width the rail can share the row with a usable canvas, it
     stacks above instead -- the original horizontal-strip layout, not a
     column stealing width from an already-narrow drawing surface. */
  .fp-workspace {
    flex-direction: column;
  }
  .fp-tool-rail-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
  }
  .fp-tool-rail {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fp-tool-rail-heading {
    width: 100%;
  }
  .fp-tool-cluster {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fp-tool-rail button {
    width: auto;
  }
  .fp-canvas { height: 400px; }
  .fp3d-canvas-wrap { height: 400px; }
  .fp-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
  .fp-room-table,
  .bid-breakdown-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .fp-canvas { height: 320px; }
  .fp3d-canvas-wrap { height: 320px; }
  .fp-levels button,
  .fp-tool-rail button,
  .fp-viewswitch button,
  .fp3d-group button {
    padding: 6px 10px;
    font-size: 13px;
  }
  .fp-status { flex-direction: column; gap: 4px; }
}

/* A clearly visible way to stop drawing -- Escape/double-click exist but are
   not discoverable on their own, which is exactly the bug this fixes. */
.fp-done {
  padding: 6px 14px;
  min-height: 36px;
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 600;
  font-size: 14px;
}

.fp-done:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Stairs in the 2D plan: outline plus tread lines, the standard plan
   convention -- the treads make the climb direction readable at a glance. */
.fp-stair-outline {
  fill: var(--accent-bg);
  stroke: var(--text);
  stroke-width: 2;
  cursor: pointer;
}

.fp-stair-tread {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  pointer-events: none;
}

.fp-stair.selected .fp-stair-outline {
  stroke: var(--accent);
  stroke-width: 3;
}

.fp-walltype {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.fp-walltype select {
  flex: 1;
  max-width: 260px;
}

/* Built-ins in plan view. Cabinetry, counters, and fixtures are visually
   distinguished by fill as well as by their real footprint size -- never by
   colour alone, since the shape carries the actual information. */
.fp-builtin {
  fill: var(--panel);
  stroke: var(--text-muted);
  stroke-width: 1.5;
  cursor: pointer;
}

.fp-builtin.countertop {
  fill: var(--accent-bg);
  stroke: var(--accent);
}

.fp-builtin.tub,
.fp-builtin.shower,
.fp-builtin.toilet,
.fp-builtin.vanity {
  fill: var(--bg);
  stroke-dasharray: 4 2;
}

.fp-builtin.selected {
  stroke: var(--accent);
  stroke-width: 3;
}

/* Appliance spaces: a reserved opening, not a modeled appliance -- dashed
   and unfilled is the real shop-drawing convention for "this goes here,"
   distinct from a solid cabinet box. */
.fp-builtin.appliance-space {
  fill: none;
  stroke-dasharray: 5 3;
  stroke: var(--text-muted);
}

/* Door-swing symbols -- NKBA convention, blue dashed lines are the standard
   architectural-drawing color for door swings so they read as a distinct
   layer from the wall/cabinet lines. */
.fp-swing-leaf {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.fp-swing-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

.fp-swing-arrow {
  stroke: var(--accent);
  stroke-width: 1;
}

.fp-builtin-label {
  font-size: 9px;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}

.fp-builtin-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Job sections as tabs ----------------------------------------------
   Replaces a vertical stack of collapsibles where reaching the last section
   meant scrolling past all of them. The icon gives each tab a shape you can
   find without reading; the label is still there, so the icon is never the
   only thing carrying meaning. */
.job-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-tablist {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.job-tablist button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 44px; /* large tap target, per the design direction */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.job-tablist button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.job-tablist button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.job-tab-icon {
  font-size: 17px;
  line-height: 1;
}

.job-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.job-tabpanel:focus-visible {
  outline: none;
}

.job-tab-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  /* Icon-only below phone width so five tabs still fit on one or two rows
     rather than wrapping into a tall stack that defeats the purpose. */
  .job-tab-label { display: none; }
  .job-tablist button { padding: 9px 14px; }
  .job-tab-icon { font-size: 19px; }
}

/* Walk mode. The button gets the warm accent because entering the walkthrough
   is the primary thing a contractor wants to do from the 3D view -- it is what
   a homeowner is eventually shown. */
.fp3d-walk {
  padding: 7px 16px;
  min-height: 38px;
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius);
  background: var(--accent-warm);
  color: var(--on-warm);
  font-weight: 700;
  font-size: 14px;
}

.fp3d-walk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fp3d-walkhint {
  /* Overlaid ON the canvas (it's now a child of fp3d-canvas-wrap, which is
     what actually goes fullscreen) rather than stacked below it -- this is
     what keeps it visible once the canvas fills the whole screen. */
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 5;
  max-width: min(560px, calc(100% - 32px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: var(--text);
}

.fp3d-walkhint kbd {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 12px;
  font-family: var(--sans);
}

/* Color Picker Modal — Phase 1 independent paint color selection */
.color-picker-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.color-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.color-picker-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.color-picker-header .close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}

.color-picker-header .close:hover {
  color: var(--text);
}

.color-picker-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.color-picker-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.color-picker-tabs button {
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.color-picker-tabs button:hover {
  color: var(--text);
}

.color-picker-tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Adjust mode: HSL sliders */
.color-picker-sliders {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.color-preview {
  display: flex;
  gap: 12px;
  align-items: center;
}

.preview-swatch {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.hex-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
}

.hex-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.color-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rgb-display {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--panel);
  border-radius: 4px;
  border: 1px solid var(--border);
}
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-group label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.color-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--border), var(--text-muted));
  cursor: pointer;
  appearance: none;
  accent-color: var(--accent);
}

/* Eyedropper mode: photo + click */
.color-picker-eyedropper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.photo-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-selector label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-selector select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.photo-canvas {
  width: 100%;
  max-height: 300px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: crosshair;
}

/* Palette mode: Open Color swatches */
.color-picker-palette {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.palette-family {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.palette-family h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 4px;
}

.palette-swatch {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.palette-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 30%, transparent);
}

.palette-swatch.active {
  border-width: 3px;
  border-color: var(--accent);
}

/* Actions */
.color-picker-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.color-picker-actions button {
  flex: 1;
  padding: 10px 16px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.color-picker-actions .secondary {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.color-picker-actions .secondary:hover {
  background: color-mix(in srgb, var(--text) 10%, var(--bg));
}

.color-picker-actions .primary {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
}

.color-picker-actions .primary:hover {
  background: color-mix(in srgb, var(--accent) 110%, black);
  box-shadow: var(--shadow-sm);
}
/* Pannellum 2.5.7, https://github.com/mpetroff/pannellum */
.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A') repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:grab;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-grabbing{cursor:grabbing;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-sprite{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')}.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}.pnlm-zoom-controls{width:26px;height:52px}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}.pnlm-orientation-button-inactive{background-position:0 -156px}.pnlm-orientation-button-active{background-position:0 -182px}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}.pnlm-load-box p{margin:20px 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:26px;width:26px;border-radius:13px}.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -104px}.pnlm-hotspot.pnlm-scene{background-position:0 -130px}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A');cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:12px}.pnlm-fade-img{position:absolute;top:0;left:0}.pnlm-pointer{cursor:pointer}