/* Shared Vessel skin. Opt-in: Home, shell, Kay, Guardian Home and Room.
 * Typography, 14px/1.6 body rhythm, easing and token names: cc-chat2.html.
 * Bar geometry: shell.js (36px). Shell panes/resizer remain in shell.html.
 * Warm colours: prototype-theme.css's Source Maps light/dark palettes.
 * Font sources: fonts.googleapis.com (Instrument Serif), api.fontshare.com (Satoshi).
 */
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('/public/vessel-fonts/instrument-serif-400-normal.ttf') format('truetype'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('/public/vessel-fonts/instrument-serif-400-italic.ttf') format('truetype'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:300; font-display:swap; src:url('/public/vessel-fonts/satoshi-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:400; font-display:swap; src:url('/public/vessel-fonts/satoshi-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:500; font-display:swap; src:url('/public/vessel-fonts/satoshi-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:700; font-display:swap; src:url('/public/vessel-fonts/satoshi-700-normal.woff2') format('woff2'); }

html[data-vessel-style] {
  --display:'Instrument Serif',Georgia,serif;
  --body:'Satoshi',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --void:#f5efe2; --deep:#ebe3d2; --surface:#fffbf5;
  --border:rgba(125,78,32,.12); --border-strong:rgba(125,78,32,.22);
  --ink:#1a1612; --ink-2:#5a493b; --ink-3:#786552; --ink-4:#917c66;
  --patina:#8a6b4e; --patina-dim:rgba(184,115,51,.05); --patina-glow:rgba(184,115,51,.10);
  --ember:#965b27; --ember-soft:#b87333; --ember-dim:rgba(184,115,51,.07);
  --signal:var(--ember); --danger:#a5463a;
  --section-face:var(--body); --section-size:16px;
  --section-fill:transparent; --section-line:transparent;
  --radius:10px; --radius-sm:6px; --shadow:none;
  color-scheme:light;
}
html[data-vessel-style][data-theme="dark"] {
  --void:#141110; --deep:#1a1612; --surface:#211b16;
  --border:rgba(212,154,94,.12); --border-strong:rgba(212,154,94,.24);
  --ink:#f5efe2; --ink-2:#c9bca9; --ink-3:#ad9a83; --ink-4:#927b60;
  --patina:#b8a88e; --patina-dim:rgba(212,154,94,.05); --patina-glow:rgba(212,154,94,.10);
  --ember:#d49a5e; --ember-soft:#e5b977; --ember-dim:rgba(212,154,94,.09);
  --danger:#e08a7c; color-scheme:dark;
}
/* The variations change colour, type emphasis and section treatment only. */
html[data-vessel-style="warm"] {
  --void:#f0e5d2; --deep:#e7d6ba; --surface:#faf1e4;
  --section-face:var(--display); --section-size:20px;
}
html[data-vessel-style="warm"][data-theme="dark"] {
  --void:#1a1612; --deep:#252019; --surface:#2f281f;
  --ink-2:#d0beaa; --ink-3:#b9a084; --ink-4:#a18a6d;
}
html[data-vessel-style="outlined"] {
  --section-fill:var(--surface); --section-line:var(--border-strong);
}
html[data-vessel-style="outlined"][data-theme="dark"] { --void:#1c1814; --surface:#252019; }

/* Map older page tokens to the same KayOS vocabulary. */
html[data-vessel-style][data-theme] {
  --paper:var(--void); --paper-warm:var(--deep); --white:var(--surface);
  --sand:var(--void); --paper-deep:var(--deep); --slate:var(--ink-2); --slate-light:var(--ink-3);
  --copper:var(--ember); --leaf:var(--ember); --leaf-deep:var(--ember);
  --leaf-soft:var(--ember-dim); --leaf-line:var(--border-strong);
  --ink-soft:var(--ink-2); --ink-faint:var(--ink-3);
  --amber:var(--ember); --amber-soft:var(--deep); --danger-soft:var(--deep);
}
html[data-vessel-style] body {
  font-family:var(--body); font-size:14px; font-weight:400; line-height:1.6;
  color:var(--ink-2); background-color:var(--void); background-image:none;
}
/* Some older pages pin white/black with !important; keep the shared palette. */
html[data-vessel-style][data-theme],html[data-vessel-style][data-theme] body { background:var(--void)!important; }
html[data-vessel-style] :is(h1,h2,h3,.tier-title,.seat-name,.epigraph) { font-family:var(--display); font-weight:400; color:var(--ink); }
html[data-vessel-style] :is(button,input,textarea,select) { font-family:var(--body); }
html[data-vessel-style] a { color:var(--ember); }
html[data-vessel-style] :is(button,a,input,textarea,select):focus-visible { outline:2px solid var(--ember); outline-offset:3px; }
html[data-vessel-style] ::selection { background:var(--ember-dim); color:var(--ink); }

/* Keep shell geometry, hamburger and existing menu/pane behaviours intact. */
html[data-vessel-style][data-theme] :is(.sh-bar,.sh-chat,.sh-nav-panel,.sh-search-box) { background:var(--void); border-color:var(--border); }
html[data-vessel-style][data-theme] :is(.sh-hamburger,.sh-btn,.sh-search-btn,.sh-inbox) { color:var(--ink-3); }
html[data-vessel-style][data-theme] :is(.sh-home,.sh-brand-os,.sh-nav-item.active) { color:var(--ember); }
html[data-vessel-style][data-theme] :is(.sh-title,.sh-brand,.sh-nav-item) { color:var(--ink-2); }
html[data-vessel-style][data-theme] :is(.sh-nav-item-desc,.sh-ambient,.sh-nav-footer) { color:var(--ink-3); }
html[data-vessel-style][data-theme] :is(.sh-nav-item:hover,.sh-nav-item.active) { background:var(--ember-dim); }
html[data-vessel-style][data-theme] .sh-kay { color:var(--ember)!important; border-color:var(--border-strong)!important; background:var(--ember-dim)!important; }
html[data-vessel-style][data-theme] .sh-kay.active { background:var(--ember-dim)!important; color:var(--ember)!important; }
html[data-vessel-style][data-theme] .sh-nav-brand-text { color:var(--ink); }
html[data-vessel-style][data-theme] .sh-nav-mark { background:var(--ember-dim); color:var(--ember); }
html[data-vessel-style] .sh-nav-item-icon { display:none; }
html[data-vessel-style][data-theme] :is(.sh-sep,.sh-nav-divider,.sh-ambient-sep) { background:var(--border); }

/* Vessel top bar: keep the full name clear of the weather and Kay controls. */
html[data-vessel-top-bar] .sh-bar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; }
html[data-vessel-top-bar] .sh-bar .sh-title { display:block; overflow:visible; white-space:nowrap; }
html[data-vessel-top-bar] .sh-center { position:static; transform:none; }
html[data-vessel-top-bar] .sh-right { justify-self:end; }
@media (max-width:1100px) {
  html[data-vessel-top-bar] .sh-ambient-city { display:none; }
}
@media (max-width:900px) {
  html[data-vessel-top-bar] .sh-center { display:none; }
  html[data-vessel-top-bar] .sh-bar { display:flex; gap:8px; padding-inline:8px; }
  html[data-vessel-top-bar] .sh-left { gap:8px; }
  html[data-vessel-top-bar] .sh-title { font-size:11px; }
  html[data-vessel-top-bar] .sh-left .sh-sep { display:none; }
}

/* Actual /home landing page: keep its panel, doors and spacing. */
html[data-vessel-style][data-vessel-page="home"] :is(.topbar .name,.greeting,.founding-badge,.surface .label) { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="home"] .door-label { font-family:var(--body); }
html[data-vessel-style][data-vessel-page="home"] .topbar { background:var(--void); border-color:var(--border); }
html[data-vessel-style][data-vessel-page="home"] .founding-room { background:var(--deep); border-color:var(--border-strong); }
html[data-vessel-style][data-vessel-page="home"] .door { background:var(--surface); border-color:var(--border-strong); }
html[data-vessel-style][data-vessel-page="home"] :is(.door:hover,.door:active) { background:var(--ember-dim); border-color:var(--ember); }

/* Guardian spaces share Home/Library's reading width and open sections. */
html[data-vessel-style] .gd-main { max-width:40rem; padding:0 1.5rem 5rem; margin-inline:auto; }
html[data-vessel-style] .gd-main.gd-prototype-view { max-width:none; padding:12px 16px; }
html[data-vessel-style] .gd-page-header {
  max-width:40rem; margin:0 auto 3rem; padding:3rem 1.5rem 0;
  text-align:center; background:transparent; border:0; position:static;
}
html[data-vessel-style] .gd-page-header h1 {
  font-family:var(--display); font-size:clamp(2.2rem,4vw,2.8rem);
  font-weight:400; line-height:1.2; color:var(--ink); margin:0 0 .5rem;
}
html[data-vessel-style] .gd-page-intro { margin:0; color:var(--ink-3); }
html[data-vessel-style] .gd-hairline { width:56px; height:1px; margin:2rem auto 0; background:var(--ember); opacity:.7; }
html[data-vessel-style] .gd-page-tools { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; text-align:start; }
html[data-vessel-style] .gd-page-tools:empty { display:none; }
html[data-vessel-style] .gd-page-tools .gd-back { border:0; background:transparent; color:var(--ember); cursor:pointer; min-width:44px; min-height:44px; font-size:22px; }
html[data-vessel-style] .gd-page-tools .gd-vis { font-size:12px; color:var(--ink-3); }
html[data-vessel-style] .gd-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:0; }
html[data-vessel-style] :is(.gd-tile,.gd-card,.gd-chat,.gd-empty,.gd-threshold .gd-choice) {
  background:transparent; border:0; border-top:1px solid var(--border-strong);
  border-radius:0; padding:1.5rem 0; box-shadow:none;
}
html[data-vessel-style] .gd-card { margin:0; }
html[data-vessel-style] :is(.gd-tile:hover,.gd-threshold .gd-choice:hover) { background:var(--ember-dim); border-color:var(--ember); }
html[data-vessel-style] .gd-tile-icon { display:none; }
html[data-vessel-style] .gd-tile-title { font-family:var(--display); font-size:24px; font-weight:400; }
html[data-vessel-style] .gd-main h2 { font-family:var(--display); font-size:1.6rem; line-height:1.3; font-weight:400; margin-bottom:1rem; }
html[data-vessel-style] .gd-main h3 { font-family:var(--display); font-size:24px; font-weight:400; margin:2.5rem 0 1rem; }
html[data-vessel-style] .gd-card :is(h2,h3) { font-size:24px; margin:0 0 .5rem; }
html[data-vessel-style] .gd-main .gd-host-heading { margin:2.5rem 0 1rem; }
html[data-vessel-style] .gd-card p { margin:.5rem 0 1rem; }
html[data-vessel-style] .gd-card .gd-card-foot { border:0; padding:0; margin:1rem 0 0; }
html[data-vessel-style] .gd-card-foot { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
html[data-vessel-style] .gd-topbar { background:var(--void); border-color:var(--border); }
html[data-vessel-style] .gd-topbar h1 { font-family:var(--display); font-weight:400; color:var(--ink); }
html[data-vessel-style] :is(.gd-k,.gd-k-fab) { display:none!important; }
html[data-vessel-style][data-theme] :is(.gd-btn,.gd-help,.gd-topbar .gd-vis,.gd-light-actions button) {
  background:transparent; border:1px solid var(--border-strong); color:var(--ember); box-shadow:none;
}
html[data-vessel-style][data-theme] :is(.gd-btn:hover,.gd-help:hover) { background:var(--patina-glow); }
html[data-vessel-style][data-theme][data-prototype="guardian"] .gd-btn.ghost { background:transparent; color:var(--ember); border-color:var(--border-strong); }
html[data-vessel-style] :is(.gd-input,.gd-composer-inner,.gd-modal-inner) { background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
html[data-vessel-style] .gd-light { background:var(--deep); border-color:var(--border); }
html[data-vessel-style] .gd-light h4 { color:var(--ember); }
html[data-vessel-style] .gd-light p { color:var(--ink-2); }
html[data-vessel-style] .gd-empty { color:var(--ink-3); }
html[data-vessel-style] .gd-chat.self { background:var(--ember-dim); }

/* Keep Room and shelf buttons outlined in both palettes, including the older theme layer. */
html[data-vessel-style][data-theme][data-prototype="guardian"] .gd-btn,
html[data-vessel-style][data-theme][data-vessel-page="guardian-room"] .gd-btn {
  background:transparent; color:var(--ember); border-color:var(--border-strong);
}
html[data-vessel-style][data-theme][data-prototype="guardian"] .gd-btn:hover { background:var(--ember-dim); border-color:var(--ember); }
html[data-vessel-style][data-theme][data-prototype="guardian"] .gd-btn.danger { color:var(--danger); border-color:var(--danger); }
html[data-vessel-style][data-theme][data-vessel-page="guardian-room"] .gd-btn[aria-pressed="true"] {
  background:var(--deep); border-color:var(--ember);
}
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-chat.self { background:transparent; }
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-msg-list { gap:0; }
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-empty { padding:2rem 0; }
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-chat-head { gap:1rem; flex-wrap:wrap; }
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-composer textarea { min-width:0; }
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-composer-inner:focus-within { outline:2px solid var(--ember); outline-offset:3px; }
html[data-vessel-style][data-vessel-page="guardian-room"] .host-badge {
  background:var(--ember-dim); color:var(--ember); border:1px solid var(--border-strong);
}
html[data-vessel-style][data-vessel-page="guardian-room"] .gd-composer textarea::placeholder { color:var(--ink-3); opacity:1; }

/* Existing Members tiers and names; no directory or layout changes. */
html[data-vessel-style][data-vessel-page="events"] :is(.topbar .name,.subtitle,.section-label,.when-date,.title,.empty,.sample-banner strong) { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="events"] :is(.badge,.empty small) { font-family:var(--body); }
html[data-vessel-style][data-vessel-page="events"] .sample-banner { background:var(--ember-dim); border-color:var(--border-strong); border-left-color:var(--ember); }
html[data-vessel-style][data-vessel-page="events"] .event.cancelled .badge { border-color:var(--border-strong); }
html[data-vessel-style][data-vessel-page="library"] :is(.shelf-num,.shelf-title,.item-row .title,.subfolder-row .icon,.subfolder-row .name,.empty-shelf,.modal-title,footer.note,.sample-banner strong) { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="library"] .sample-banner { background:var(--ember-dim); border-color:var(--border-strong); border-left-color:var(--ember); }
html[data-vessel-style][data-vessel-page="members"] :is(.tier-mark,footer.note) { font-family:var(--display); }
html[data-vessel-style] :is(.tier-mark,.seat-role,.note .accent) { color:var(--ember); }
html[data-vessel-style] :is(.tier-desc,.tier-count,.seat-empty,.note) { color:var(--ink-3); }
html[data-vessel-style] .tier-body { background:var(--section-fill); border:1px solid var(--section-line); border-radius:var(--radius); }

/* Profile keeps its sections and controls; translate its former green accents. */
html[data-vessel-style]:is([data-vessel-page="profile"],[data-vessel-page="settings"],[data-vessel-page="legacy"]) {
  --bg:var(--void); --surface-w:var(--deep); --border-m:var(--border-strong);
  --sage:var(--ember); --sage-mid:var(--ember-soft); --sage-dim:var(--ember-dim); --sage-dim2:var(--patina-glow);
  --sand:var(--ember); --sand-dim:var(--ember-dim); --rose:var(--ember); --rose-dim:var(--ember-dim);
}
html[data-vessel-style][data-vessel-page="profile"] .banner-block { background:linear-gradient(135deg,var(--deep),var(--surface)); }
html[data-vessel-style][data-vessel-page="profile"] .banner-placeholder { color:var(--ink-3); }
html[data-vessel-style][data-vessel-page="profile"] :is(.save-btn,.pf-save-btn,.pf-btn-primary) { color:var(--void); }
html[data-vessel-style][data-vessel-page="profile"] .pf-add-btn { border-color:var(--border-strong); }
html[data-vessel-style][data-vessel-page="settings"] { --border-med:var(--border-strong); }
html[data-vessel-style][data-vessel-page="settings"] .settings-btn { color:var(--void); }
html[data-vessel-style][data-vessel-page="settings"] .profile-hero-banner { background:linear-gradient(135deg,var(--deep),var(--surface)); }
html[data-vessel-style][data-vessel-page="notifications"] {
  --parchment:var(--void); --stone:var(--ink-3); --brass:var(--ember); --sea:var(--ember); --line:var(--border); --line-strong:var(--border-strong);
}
html[data-vessel-style][data-vessel-page="notifications"] :is(.group-heading,.notification .kind,.notification .time) { font-family:var(--body); }
html[data-vessel-style][data-vessel-page="notifications"] :is(.empty,.empty .k-mark) { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="legacy"] {
  --cream:var(--void); --charcoal:var(--ink); --text:var(--ink-2); --text-light:var(--ink-3);
  --sage-dark:var(--ember); --sage-deep:var(--ember); --sage-light:var(--ember-soft); --sage-glow:var(--patina-glow);
  --serif:var(--display); --sans:var(--body); --border-med:var(--border-strong);
}
html[data-vessel-style][data-vessel-page="legacy"] :is(.nav,.pricing-card,.testimonial-card,.what-card) { background:var(--surface); border-color:var(--border-strong); }
html[data-vessel-style][data-vessel-page="legacy"] :is(.nav-brand span,.pricing-amount,.testimonial-quote) { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="legacy"] :is(.join-btn,.kay-btn,.link-out-btn,.filter-btn.active,.card-rsvp.none,.zoom-btn) { background:var(--ember); color:var(--void); }
html[data-vessel-style][data-vessel-page="legacy"] :is(.join-btn:hover,.kay-btn:hover) { background:var(--ember-soft); }

html[data-vessel-style][data-vessel-page="guardian-seats"] { --line:var(--border-strong); }
html[data-vessel-style][data-vessel-page="guardian-seats"] main { max-width:40rem; margin-inline:auto; padding:3rem 1.5rem 5rem; }
html[data-vessel-style][data-vessel-page="guardian-seats"] .gd-page-header { padding:0; }
html[data-vessel-style][data-vessel-page="guardian-seats"] :is(.seat,.add-form) { background:transparent; border:0; border-radius:0; padding:1.5rem 0; margin:0; }
html[data-vessel-style][data-vessel-page="guardian-seats"] .seat { border-top:1px solid var(--line); }
html[data-vessel-style][data-vessel-page="guardian-seats"] .add-form { padding-top:0; padding-bottom:2.5rem; }
html[data-vessel-style][data-vessel-page="guardian-seats"] .add-form h2 { font-size:1.6rem; color:var(--ink); }
html[data-vessel-style][data-vessel-page="guardian-seats"] .seat-name { font-size:24px; }
html[data-vessel-style][data-vessel-page="guardian-seats"] :is(button,a.btn) { background:transparent; color:var(--ember); border:1px solid var(--border-strong); min-height:44px; }
html[data-vessel-style][data-vessel-page="guardian-seats"] :is(button,a.btn):hover { background:var(--ember-dim); border-color:var(--ember); }
html[data-vessel-style][data-vessel-page="guardian-seats"] :is(.state.sent,.state.awaiting) { background:var(--deep); color:var(--ink-2); }
html[data-vessel-style][data-vessel-page="guardian-seats"] input { color:var(--ink); background:var(--surface); }
html[data-vessel-style][data-vessel-page="guardian-seats"] input::placeholder { color:var(--ink-3); opacity:1; }
html[data-vessel-style][data-vessel-page="guardian-seats"] dialog { background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); max-height:85dvh; }
html[data-vessel-style][data-vessel-page="guardian-seats"] dialog header { background:var(--surface); }
html[data-vessel-style][data-vessel-page="guardian-seats"] .dlg-actions { flex-wrap:wrap; }
html[data-vessel-style][data-vessel-page="guardian-seats"] .msg.err { background:var(--deep); color:var(--danger); }

@media (max-width:520px) {
  html[data-vessel-style] .gd-tiles { grid-template-columns:1fr; gap:0; }
  html[data-vessel-style] .gd-page-header { padding-top:2rem; margin-bottom:2rem; }
  html[data-vessel-style][data-vessel-page="guardian-room"] .gd-composer textarea { min-height:4.5rem; }
  html[data-vessel-style][data-vessel-page="guardian-seats"] main { padding-top:2rem; }
  html[data-vessel-style][data-vessel-page="guardian-seats"] .gd-page-header { padding:0; }
}

html[data-vessel-style][data-vessel-page="login"] .sub { font-family:var(--display); }
html[data-vessel-style][data-vessel-page="login"] .mark path { fill:var(--ember); }
html[data-vessel-style][data-vessel-page="login"] .message:not(.error) { background:var(--ember-dim); }
html[data-vessel-style][data-vessel-page="login"] input::placeholder { color:var(--ink-3); opacity:1; }

html[data-vessel-style][data-vessel-page="workbooks"] { --muted:var(--ink-3); --accent:var(--ember); --line:var(--border-strong); }
html[data-vessel-style][data-vessel-page="workbooks"] iframe { background:var(--surface); }

/* Existing Kay markup and controls, using its original style variables. */
html[data-vessel-style] .empty-prompt-card { background:var(--section-fill); border-color:var(--section-line); }
html[data-vessel-style] .empty-prompt-title { font-family:var(--section-face); }
html[data-vessel-style] :is(.msg-name,.welcome-text) { font-family:var(--display); }
html[data-vessel-style] .input-btn.send { background:var(--ember-dim); color:var(--ember); }
html[data-vessel-style] .composer-chip-ext { border-color:var(--border-strong); color:var(--ember); }
html[data-vessel-style] .composer-chip-ext .composer-chip-dot { background:var(--ember); }
html[data-vessel-style] .composer-chip-ext:hover { background:var(--ember-dim); border-color:var(--ember); }
@media (max-width:640px) { html[data-vessel-style] .sh-title { max-width:max(0px,calc(50vw - 155px)); } }
@media (prefers-reduced-motion:reduce) {
  html[data-vessel-style] *,html[data-vessel-style] *::before,html[data-vessel-style] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  html[data-vessel-style][data-vessel-page="legacy"] :is(.eyebrow,.arrival,.welcome-note,.kay-card,.happens-next,.closing-note,.gs) { opacity:1; transform:none; }
}