@layer reset, tokens, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button { touch-action: manipulation; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --sage-navy: #0b3f63;
    --sage-ocean-blue: #1d6fa3;
    --sage-sky: #6fafd1;
    --sage-soft-blue: #e9f4fa;
    --sage-deep-teal: #3e7f82;
    --sage-soft-teal: #6fa8a3;
    --sage-green: #91ae93;
    --sage-mint: #ddf1e8;
    --sage-lavender: #a99bcd;
    --sage-soft-lilac: #f0ecf8;
    --sage-cream: #f7f2d5;
    --sage-moss: #6f6a3a;
    --sage-canvas: #f5f9fc;
    --sage-surface: #ffffff;
    --sage-border: #dde7ed;
    --sage-text: #0b3f63;
    --sage-text-secondary: #5e6b74;
    --sage-muted: #8b9ba6;
    --sage-critical: #b23a3a;
    --sage-shadow-1: 0 2px 8px rgb(11 63 99 / .07), 0 12px 28px rgb(11 63 99 / .05);
    --sage-shadow-2: 0 10px 26px rgb(11 63 99 / .16);
    --sage-radius-sm: 10px;
    --sage-radius-md: 16px;
    --sage-radius-lg: 24px;
    --sage-max: 1240px;
    --bottom-nav-height: 88px;
    --room-dock-height: 82px;
    --focus: 0 0 0 3px rgb(111 175 209 / .42);
  }
}

@layer base {
  body {
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--sage-canvas);
    color: var(--sage-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 22px;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(circle at 10% 0%, rgb(111 175 209 / .14), transparent 28rem),
      linear-gradient(180deg, #f9fcfe, var(--sage-canvas));
    content: "";
  }

  h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
  h2 { font-size: 20px; line-height: 26px; font-weight: 700; }
  h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
  p { color: var(--sage-text-secondary); }
  strong, b { font-weight: 600; }
  small { display: block; color: var(--sage-text-secondary); font-size: 13px; line-height: 18px; }
  code { color: var(--sage-navy); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

  :focus-visible { outline: 2px solid var(--sage-ocean-blue); outline-offset: 3px; box-shadow: var(--focus); }
  ::selection { background: var(--sage-soft-blue); color: var(--sage-navy); }

  .skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    transform: translateY(-180%);
    border-radius: 8px;
    background: var(--sage-navy);
    color: #fff;
    padding: 10px 14px;
  }
  .skip-link:focus { transform: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer components {
  .app-shell { min-height: 100dvh; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
  .app-shell.with-room-dock { padding-bottom: calc(var(--bottom-nav-height) + var(--room-dock-height) + env(safe-area-inset-bottom)); }

  .top-rail {
    width: min(calc(100% - 24px), var(--sage-max));
    min-height: 80px;
    margin: 12px auto 0;
    padding: 16px clamp(18px, 4vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: var(--sage-radius-md);
    background: linear-gradient(112deg, #082f5b, var(--sage-navy));
    color: #fff;
    box-shadow: var(--sage-shadow-2);
  }
  .trust-copy, .brand-lockup { display: flex; align-items: center; gap: 14px; }
  .trust-copy { flex-wrap: wrap; }
  .trust-copy::before {
    width: 42px;
    height: 48px;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 18px 18px 22px 22px;
    content: "✓";
    display: grid;
    place-items: center;
    font-size: 24px;
  }
  .trust-copy strong { font-size: 15px; line-height: 20px; }
  .trust-copy span { width: 100%; margin-left: 56px; margin-top: -12px; color: rgb(255 255 255 / .76); font-size: 13px; }
  .brand-lockup { border-left: 1px solid rgb(255 255 255 / .42); padding-left: 18px; }
  .brand-lockup strong { font-size: 30px; line-height: 34px; letter-spacing: .03em; }
  .brand-lockup span { color: rgb(255 255 255 / .82); font-size: 10px; line-height: 12px; }

  .ownership-rail {
    width: min(calc(100% - 32px), var(--sage-max));
    min-height: 70px;
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 16px;
  }
  .ownership-rail > span { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .lsc-logo { width: 66px; height: 66px; object-fit: contain; border-radius: 12px; background: rgb(255 255 255 / .92); padding: 4px; box-shadow: var(--sage-shadow-1); }
  .connectivity { justify-self: end; border-radius: 999px; padding: 6px 10px; color: var(--sage-text-secondary); background: #fff; border: 1px solid var(--sage-border); font-size: 12px; line-height: 16px; }
  .connectivity::before { width: 8px; height: 8px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--sage-green); content: ""; }
  .connectivity.offline::before { background: var(--sage-critical); }

  .screen { width: min(calc(100% - 24px), var(--sage-max)); margin: 0 auto; padding: 0 0 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .screen-intro { grid-column: 1 / -1; padding: 22px clamp(18px, 4vw, 34px); border-radius: var(--sage-radius-lg); background: linear-gradient(135deg, #fff, var(--sage-soft-blue)); border: 1px solid var(--sage-border); }
  .screen-intro h1 { margin-top: 6px; }
  .screen-intro p { max-width: 68ch; margin-top: 6px; }
  .screen-id, .prototype-pill { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .screen-id { color: var(--sage-ocean-blue); }

  .home-hero {
    position: relative;
    min-height: 390px;
    grid-column: 1 / -1;
    overflow: hidden;
    border: 1px solid var(--sage-border);
    border-radius: var(--sage-radius-lg);
    background: #fff url("/assets/brand/sage-home-organic-background-approved.png") center / cover no-repeat;
    box-shadow: var(--sage-shadow-1);
  }
  .home-ribbon { position: absolute; top: 18px; left: 0; width: 100%; height: 94px; object-fit: cover; object-position: center; }
  .hero-copy { position: relative; z-index: 2; width: min(54%, 640px); padding: 152px 0 40px clamp(22px, 5vw, 58px); }
  .hero-copy h1 { margin: 12px 0 8px; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; }
  .hero-copy p { max-width: 36ch; font-size: 17px; line-height: 25px; }
  .hero-copy p strong { color: var(--sage-deep-teal); }
  .prototype-pill { display: inline-flex; border-radius: 999px; padding: 8px 12px; background: rgb(255 255 255 / .88); color: var(--sage-navy); box-shadow: var(--sage-shadow-1); }
  .sage-placeholder {
    position: absolute;
    right: clamp(24px, 7vw, 86px);
    bottom: 26px;
    width: min(31%, 330px);
    aspect-ratio: .82;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 24px 18px;
    border: 2px dashed rgb(29 111 163 / .42);
    border-radius: 48% 48% 38% 38% / 38% 38% 45% 45%;
    background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(233 244 250 / .9));
    color: var(--sage-text-secondary);
    text-align: center;
  }
  .sage-placeholder-mark { margin: auto 0; color: rgb(29 111 163 / .28); font-size: clamp(34px, 5vw, 64px); line-height: 1; font-weight: 800; letter-spacing: .08em; }
  .sage-placeholder strong { font-size: 13px; line-height: 18px; }
  .sage-placeholder small { font-size: 11px; line-height: 14px; }

  .panel { grid-column: span 6; min-width: 0; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--sage-border); border-radius: var(--sage-radius-md); background: rgb(255 255 255 / .96); box-shadow: var(--sage-shadow-1); }
  .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .panel-heading h2 { font-size: 17px; line-height: 23px; }
  .panel-current-work, .panel-work-areas, .panel-progress, .panel-plan, .panel-room-summary, .panel-door-graphic, .panel-report-preview, .panel-history, .panel-evidence, .panel-unassigned { grid-column: 1 / -1; }

  .button, .file-button {
    min-height: 44px;
    border: 1px solid var(--sage-ocean-blue);
    border-radius: 12px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sage-ocean-blue);
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .button:hover, .file-button:hover { background: var(--sage-navy); border-color: var(--sage-navy); }
  .button.secondary, .file-button.secondary { background: var(--sage-surface); color: var(--sage-ocean-blue); }
  .button.quiet { min-height: 38px; border-color: transparent; background: transparent; color: var(--sage-ocean-blue); padding-inline: 8px; }
  .button.danger { border-color: var(--sage-critical); background: var(--sage-critical); }
  .button:disabled { opacity: .48; cursor: not-allowed; }
  .button-row, .chip-row, .capture-options, .two-column-actions, .three-column-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .button-row.split { justify-content: space-between; }
  .two-column-actions > * { flex: 1 1 180px; }
  .three-column-actions > * { flex: 1 1 150px; }
  .row-actions { display: flex; align-items: center; gap: 4px; }

  .chip, .segmented button {
    min-height: 40px;
    border: 1px solid var(--sage-border);
    border-radius: 999px;
    padding: 8px 13px;
    background: var(--sage-surface);
    color: var(--sage-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .chip:hover, .segmented button:hover { border-color: var(--sage-ocean-blue); background: var(--sage-soft-blue); }
  .segmented { display: inline-flex; overflow: auto; max-width: 100%; border: 1px solid var(--sage-border); border-radius: 12px; background: var(--sage-canvas); }
  .segmented button { flex: 0 0 auto; border: 0; border-radius: 0; }

  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .form-grid > .button, .form-grid > .button-row, .form-grid > .field-note { align-self: end; }
  label, .stacked-label { display: grid; gap: 6px; color: var(--sage-text); font-size: 12px; line-height: 16px; font-weight: 600; }
  input, select, textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd9e1;
    border-radius: 10px;
    background: #fff;
    color: var(--sage-text);
    padding: 10px 12px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
  }
  textarea { resize: vertical; }
  input[readonly] { background: var(--sage-canvas); color: var(--sage-text-secondary); }
  fieldset { border: 1px solid var(--sage-border); border-radius: 12px; padding: 14px; }
  fieldset legend { padding: 0 6px; font-weight: 600; }
  fieldset label { display: inline-flex; align-items: center; margin: 8px 16px 0 0; }
  fieldset input, .switch input, .select-row input { width: auto; min-height: auto; }
  .field-note { grid-column: 1 / -1; }
  .file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

  .current-work-card, .room-header, .helper-feature { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .current-work-card h3, .room-header h3 { margin-top: 4px; font-size: 18px; }
  .current-work-card p, .room-header p { margin: 2px 0 12px; }
  .current-work-card .button { min-width: 130px; }
  .callout, .empty-state, .snapshot-placeholder, .report-preview { border: 1px solid var(--sage-border); border-radius: 14px; background: var(--sage-canvas); padding: 18px; }
  .callout p, .empty-state p, .snapshot-placeholder p, .report-preview p { margin-top: 4px; }

  .tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .feature-tile, .helper-tile {
    min-height: 120px;
    border: 1px solid var(--sage-border);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 5px;
    background: #fff;
    color: var(--sage-text);
    text-align: left;
    cursor: pointer;
  }
  .feature-tile:hover, .helper-tile:hover { transform: translateY(-1px); border-color: var(--sage-sky); box-shadow: var(--sage-shadow-1); }
  .tile-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--sage-soft-blue), var(--sage-mint)); }
  .feature-tile:nth-child(3n + 2) .tile-mark { background: linear-gradient(135deg, var(--sage-soft-lilac), #fff); }
  .feature-tile small { margin-top: auto; }

  .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .metrics > div { min-height: 104px; border-radius: 14px; background: linear-gradient(145deg, var(--sage-soft-blue), #fff); padding: 18px; display: grid; align-content: center; }
  .metrics strong { font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .metrics span { color: var(--sage-text-secondary); font-size: 13px; }

  .list { display: grid; gap: 8px; }
  .list-row { width: 100%; min-height: 64px; border: 1px solid var(--sage-border); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; color: var(--sage-text); text-align: left; }
  button.list-row { cursor: pointer; }
  button.list-row:hover { border-color: var(--sage-sky); background: var(--sage-canvas); }
  .list-row > span:first-child { min-width: 0; }
  .list-row strong, .list-row small { overflow-wrap: anywhere; }
  .status-badge { flex: 0 0 auto; border-radius: 999px; padding: 5px 9px; background: var(--sage-soft-blue); color: var(--sage-ocean-blue); font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .status-badge.good { background: var(--sage-mint); color: #2f6d57; }
  .status-badge.warn { background: var(--sage-cream); color: var(--sage-moss); }

  .controlled-plan { position: relative; min-height: 420px; overflow: hidden; border: 1px solid #bfd2dc; border-radius: 16px; background: linear-gradient(90deg, transparent 49.8%, #d4e2e8 50%, transparent 50.2%), linear-gradient(transparent 49.8%, #d4e2e8 50%, transparent 50.2%), #fafdfe; background-size: 44px 44px; }
  .plan-note { position: absolute; top: 12px; left: 12px; border-radius: 999px; background: #fff; padding: 6px 10px; color: var(--sage-text-secondary); font-size: 11px; font-weight: 600; }
  .room-boundary { position: absolute; left: var(--x); top: var(--y); width: 38%; min-height: 120px; border: 3px solid var(--sage-ocean-blue); background: rgb(233 244 250 / .8); color: var(--sage-text); display: grid; place-content: center; gap: 4px; cursor: pointer; }
  .room-boundary.status-reviewed { border-color: var(--sage-green); background: rgb(221 241 232 / .75); }
  .room-boundary.status-deferred { border-color: var(--sage-moss); background: rgb(247 242 213 / .75); }

  .snapshot-placeholder { min-height: 150px; display: grid; place-content: center; justify-items: center; text-align: center; }
  .snapshot-placeholder code { margin-top: 10px; border-radius: 8px; background: #fff; padding: 8px; }
  .capture-stage { display: grid; justify-items: center; gap: 14px; text-align: center; }
  .record-control { width: 112px; height: 112px; border: 10px solid var(--sage-soft-blue); border-radius: 50%; background: var(--sage-ocean-blue); color: #fff; font-weight: 700; cursor: pointer; box-shadow: var(--sage-shadow-2); }
  .record-control.recording { border-color: #f5dada; background: var(--sage-critical); }

  .door-stage { position: relative; width: min(100%, 620px); min-height: 400px; margin: 0 auto; border-radius: 16px; background: linear-gradient(180deg, var(--sage-soft-blue), #fff); display: grid; place-items: center; }
  .door-stage img { max-width: 70%; max-height: 360px; }
  .hotspot { position: absolute; min-height: 36px; border: 2px solid #fff; border-radius: 999px; background: var(--sage-ocean-blue); color: #fff; padding: 6px 10px; font-size: 12px; font-weight: 600; box-shadow: var(--sage-shadow-2); cursor: pointer; }
  .hotspot.hinge { left: 23%; top: 48%; }
  .hotspot.latch { right: 22%; top: 52%; }
  .hotspot.closer { top: 15%; left: 48%; }

  .progress-line { height: 10px; overflow: hidden; border-radius: 999px; background: var(--sage-border); }
  .progress-line span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--sage-ocean-blue), var(--sage-sky)); }
  .comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
  .comparison article { border: 1px solid var(--sage-border); border-radius: 14px; padding: 16px; background: var(--sage-canvas); }
  .comparison p { margin-top: 8px; color: var(--sage-text); }

  .helper-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .art-blocked { min-height: 74px; width: 100%; display: grid; place-content: center; border: 1px dashed var(--sage-sky); border-radius: 12px; background: var(--sage-soft-blue); color: var(--sage-text-secondary); text-align: center; }
  .helper-feature .art-blocked { width: 160px; flex: 0 0 160px; }

  .report-preview { min-height: 260px; background: #fff; box-shadow: inset 0 0 0 8px var(--sage-canvas); padding: 32px; }
  .report-preview > strong { color: var(--sage-critical); font-size: 12px; letter-spacing: .08em; }
  .report-preview h3 { margin: 28px 0 8px; font-size: 24px; line-height: 30px; }
  .search-box { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .switch, .select-row { display: inline-flex; align-items: center; gap: 8px; }

  .room-action-dock {
    position: fixed;
    right: 0;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    left: 0;
    z-index: 20;
    height: var(--room-dock-height);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    border-top: 1px solid var(--sage-border);
    background: rgb(255 255 255 / .96);
    backdrop-filter: blur(16px);
  }
  .room-action-dock button { min-width: 0; min-height: 66px; border: 0; background: transparent; color: var(--sage-text-secondary); display: grid; place-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 600; cursor: pointer; }
  .room-action-dock img { width: 28px; height: 28px; }

  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding: 6px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    border-top: 1px solid var(--sage-border);
    border-radius: 24px 24px 0 0;
    background: rgb(255 255 255 / .97);
    box-shadow: 0 -8px 26px rgb(11 63 99 / .08);
    backdrop-filter: blur(16px);
  }
  .nav-item { min-width: 0; min-height: 72px; border: 0; background: transparent; color: var(--sage-text-secondary); display: grid; justify-items: center; align-content: end; gap: 3px; padding: 4px; cursor: pointer; }
  .nav-item.active { color: var(--sage-ocean-blue); }
  .nav-item b { font-size: 11px; line-height: 14px; }
  .nav-icon { width: 30px; height: 30px; display: grid; place-items: center; }
  .nav-icon img { width: 28px; height: 28px; }
  .capture-nav { align-content: end; color: var(--sage-ocean-blue); }
  .capture-nav .nav-icon { width: 64px; height: 64px; margin-top: -26px; filter: drop-shadow(0 8px 9px rgb(11 63 99 / .2)); }
  .capture-nav .nav-icon img { width: 64px; height: 64px; }

  .modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgb(8 47 91 / .52); }
  .modal { width: min(100%, 520px); border-radius: 20px; background: #fff; padding: 24px; box-shadow: 0 24px 80px rgb(8 47 91 / .28); }
  .modal p { margin: 10px 0 20px; }
  .toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px); z-index: 70; width: min(calc(100% - 24px), 620px); transform: translateX(-50%); border: 1px solid var(--sage-border); border-radius: 14px; background: var(--sage-navy); color: #fff; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sage-shadow-2); }
  .with-room-dock .toast { bottom: calc(var(--bottom-nav-height) + var(--room-dock-height) + env(safe-area-inset-bottom) + 18px); }
  .toast span { flex: 1; }
  .toast .button.quiet { color: #fff; }
  .toast-close { width: 38px; height: 38px; border: 0; background: transparent; color: #fff; font-size: 24px; cursor: pointer; }
  .error-panel { grid-column: 1 / -1; margin-top: 48px; }
}

@layer responsive {
  @media (max-width: 900px) {
    .panel { grid-column: 1 / -1; }
    .tile-grid, .helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero { min-height: 430px; }
    .hero-copy { width: 58%; }
    .sage-placeholder { width: 34%; right: 24px; }
  }

  @media (max-width: 620px) {
    :root { --bottom-nav-height: 82px; --room-dock-height: 74px; }
    .top-rail { width: calc(100% - 16px); min-height: 72px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; }
    .trust-copy::before { width: 34px; height: 40px; border-radius: 14px 14px 18px 18px; font-size: 20px; }
    .trust-copy strong { max-width: 190px; font-size: 11px; line-height: 15px; }
    .trust-copy span { display: none; }
    .brand-lockup { gap: 8px; padding-left: 10px; }
    .brand-lockup strong { font-size: 22px; line-height: 26px; }
    .brand-lockup span { display: none; }
    .ownership-rail { width: calc(100% - 24px); min-height: 58px; grid-template-columns: 48px 1fr auto; gap: 8px; }
    .lsc-logo { width: 46px; height: 46px; padding: 3px; border-radius: 9px; }
    .ownership-rail > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .connectivity { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 7px; font-size: 10px; }
    .screen { width: calc(100% - 16px); gap: 10px; }
    .screen-intro { padding: 18px 16px; border-radius: 16px; }
    .home-hero { min-height: 410px; border-radius: 16px; }
    .home-ribbon { top: 10px; height: 70px; }
    .hero-copy { width: 68%; padding: 116px 0 24px 18px; }
    .hero-copy h1 { font-size: 30px; line-height: 36px; }
    .hero-copy p { font-size: 15px; line-height: 22px; }
    .prototype-pill { max-width: 210px; font-size: 9px; line-height: 12px; padding: 6px 9px; }
    .sage-placeholder { right: 12px; bottom: 18px; width: 32%; min-width: 118px; height: 246px; padding: 14px 8px; }
    .sage-placeholder strong, .sage-placeholder small { font-size: 9px; line-height: 12px; }
    .sage-placeholder-mark { font-size: 28px; }
    .panel { padding: 16px; border-radius: 14px; }
    .form-grid { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .metrics > div:last-child { grid-column: 1 / -1; }
    .tile-grid { gap: 8px; }
    .feature-tile { min-height: 112px; padding: 12px; }
    .feature-tile small { display: none; }
    .current-work-card, .room-header, .helper-feature { align-items: stretch; flex-direction: column; }
    .current-work-card .button { width: 100%; }
    .comparison { grid-template-columns: 1fr; }
    .helper-feature .art-blocked { width: 100%; flex-basis: auto; }
    .search-box { grid-template-columns: 1fr 1fr; }
    .search-box label { grid-column: 1 / -1; }
    .controlled-plan { min-height: 360px; }
    .room-boundary { width: 40%; min-height: 96px; }
    .door-stage { min-height: 330px; }
    .door-stage img { max-height: 300px; }
    .room-action-dock button { min-height: 60px; font-size: 9px; }
    .room-action-dock img { width: 24px; height: 24px; }
    .nav-item { min-height: 68px; }
    .capture-nav .nav-icon { width: 60px; height: 60px; margin-top: -23px; }
    .capture-nav .nav-icon img { width: 60px; height: 60px; }
  }

  @media (max-width: 390px) {
    .hero-copy { width: 70%; }
    .sage-placeholder { min-width: 108px; width: 30%; }
    .metrics { grid-template-columns: 1fr; }
    .metrics > div:last-child { grid-column: auto; }
    .button-row > .button { flex: 1 1 140px; }
    .room-action-dock { overflow-x: auto; grid-template-columns: repeat(6, 64px); justify-content: start; }
  }

  @media (min-width: 1100px) {
    .bottom-nav { left: 50%; width: min(100%, 1180px); transform: translateX(-50%); border-right: 1px solid var(--sage-border); border-left: 1px solid var(--sage-border); }
    .room-action-dock { left: 50%; width: min(100%, 1180px); transform: translateX(-50%); border-right: 1px solid var(--sage-border); border-left: 1px solid var(--sage-border); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  }

  @media (forced-colors: active) {
    .top-rail, .button, .record-control, .hotspot, .toast { border: 1px solid ButtonText; }
    .sage-placeholder, .art-blocked { border-style: solid; }
  }
}