/* ============================================================
   Cork — Design System
   Premium · editorial · analytical · warm.
   Deep burgundy + ivory + charcoal. Hairline borders, generous
   whitespace, restrained radius. No gradients, no glassmorphism,
   no purple-AI-wrapper aesthetic.
   ============================================================ */

:root {
  /* Palette */
  --wine-900: #3b0d16;
  --wine-700: #5c1523;
  --wine-500: #7d1f31;
  --wine-300: #b76a78;
  --copper: #be8961;
  --ivory-100: #faf7f2;
  --ivory-200: #f3ede2;
  --ivory-300: #e9dfcf;
  --charcoal-900: #211d1c;
  --charcoal-700: #433d39;
  --charcoal-500: #6b625b;
  --charcoal-300: #a49a90;
  --line: rgba(33, 29, 28, 0.12);
  --line-strong: rgba(33, 29, 28, 0.22);

  /* Type */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius / spacing — restrained, not "SaaS-rounded" */
  --radius-sm: 3px;
  --radius-md: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ivory-100);
  color: var(--charcoal-900);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal-900);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- App shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* The mobile backdrop must not consume a desktop grid cell. */
.sidebar-scrim { display: none; }
.main { min-width: 0; min-height: 0; }
.sidebar { min-height: 0; overflow-y: auto; }
.nav-item { width: 100%; border: 0; background: transparent; text-align: left; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
.brand-tagline { display: block; font-size: 10px; color: var(--ivory-300); }
.brand img { flex-shrink: 0; }
.sidebar .brand { align-items: center; }
.sidebar .brand-mark { font-size: 34px; letter-spacing: -.04em; }
.sidebar-footer label { display: block; color: var(--ivory-300); }
.sidebar-footer select { width: 100%; margin: 8px 0; padding: 8px; background: var(--wine-900); color: var(--ivory-100); border: 1px solid var(--wine-300); }
#history-status { font-size: 11px; color: var(--ivory-300); padding: 0 8px; }
.chat-history-list .chat-history-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; }
.chat-history-list .is-current { background: rgba(250,247,242,.1); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.rec-why-toggle { border: 0; background: transparent; padding: 4px 0; font: inherit; }
.chat-scroll, .view { min-height: 0; }
@supports (height: 100dvh) { .app-shell, .main { height: 100dvh; } }

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40;
             transform: translateX(-100%); transition: transform 180ms ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(33,29,28,.35); z-index: 30; }
  .sidebar-scrim.is-open { display: block; }
}

/* ---------- Sidebar ---------- */

.sidebar {
  background: var(--wine-900);
  color: var(--ivory-200);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--line-strong);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ivory-100);
}

.brand-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-300);
}

.btn-new-chat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 1px solid rgba(250, 247, 242, 0.22);
  border-radius: var(--radius-sm);
  color: var(--ivory-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  margin-bottom: var(--space-5);
}
.btn-new-chat:hover { background: rgba(250, 247, 242, 0.08); border-color: rgba(250,247,242,.4); }

.nav-section-label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wine-300);
  padding: 0 var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: rgba(250, 247, 242, 0.82);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item:hover { background: rgba(250, 247, 242, 0.08); color: var(--ivory-100); }
.nav-item.is-active { background: rgba(250, 247, 242, 0.12); color: var(--ivory-100); font-weight: 500; }
.nav-item .nav-icon { width: 16px; text-align: center; opacity: 0.85; font-size: 13px; }

.chat-history-list { flex: 1; overflow-y: auto; margin-top: var(--space-2); }
.chat-history-item {
  padding: var(--space-2);
  font-size: 13.5px;
  color: rgba(250, 247, 242, 0.65);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-history-item:hover { background: rgba(250, 247, 242, 0.06); color: var(--ivory-100); }

.sidebar-footer {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: 12.5px;
  color: rgba(250, 247, 242, 0.5);
}

/* ---------- Main area ---------- */

.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.main-header {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--ivory-100);
}
@media (max-width: 860px) { .main-header { display: flex; } }

.icon-btn {
  border: 1px solid var(--line-strong);
  background: white;
  border-radius: var(--radius-sm);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--charcoal-700);
}

.view { flex: 1; overflow-y: auto; display: none; }
.view.is-active { display: block; }

/* ---------- Chat view ---------- */
.degradation-notice{margin:10px 0 0;padding:9px 11px;border-left:3px solid var(--copper);background:rgba(178,112,72,.09);font-size:12px;line-height:1.4;color:var(--charcoal-700)}

#view-chat { display: none; flex-direction: column; height: 100%; }
#view-chat.is-active { display: flex; }

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.chat-inner {
  max-width: 760px;
  margin: 0 auto;
}

.welcome {
  max-width: 620px;
  margin: 8vh auto 0;
  text-align: center;
}
.welcome h1 { font-size: 32px; margin-bottom: var(--space-2); }
.welcome p { color: var(--charcoal-500); margin-bottom: var(--space-6); font-size: 15px; }

.prompt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 560px) { .prompt-grid { grid-template-columns: 1fr; } }

.prompt-chip {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--charcoal-700);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}
.prompt-chip:hover { border-color: var(--wine-500); color: var(--wine-700); }

.msg-row { display: flex; margin-bottom: var(--space-5); }
.msg-row.user { justify-content: flex-end; }

.msg-bubble {
  max-width: 78%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.6;
}
.msg-row.user .msg-bubble {
  background: var(--wine-900);
  color: var(--ivory-100);
  border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md);
}
.msg-row.assistant .msg-bubble {
  background: white;
  border: 1px solid var(--line);
  color: var(--charcoal-900);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px;
  max-width: 86%;
}

.msg-row.assistant .msg-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-500);
  margin-bottom: var(--space-2);
  display: block;
}

.typing-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--charcoal-300);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Composer ---------- */

.composer-wrap {
  border-top: 1px solid var(--line);
  background: var(--ivory-100);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.composer {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: white;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  transition: border-color 120ms ease;
}
.composer:focus-within { border-color: var(--wine-500); }

.composer textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  padding: var(--space-2) 0;
  max-height: 160px;
  background: transparent;
  color: var(--charcoal-900);
}
.composer textarea::placeholder { color: var(--charcoal-300); }

.composer-send {
  background: var(--wine-900);
  color: var(--ivory-100);
  border: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background 120ms ease;
  flex-shrink: 0;
}
.composer-send:hover { background: var(--wine-700); }
.composer-send:disabled { background: var(--charcoal-300); cursor: not-allowed; }

.composer-context-row {
  max-width: 760px;
  margin: 0 auto var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.context-chip {
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--charcoal-500);
  background: transparent;
  cursor: pointer;
}
.context-chip:hover { border-color: var(--wine-500); color: var(--wine-700); }

.composer-hint {
  max-width: 760px;
  margin: var(--space-2) auto 0;
  font-size: 11.5px;
  color: var(--charcoal-300);
  text-align: center;
}

/* ---------- Generic placeholder view (Phase 2+ destinations) ---------- */

.placeholder-view {
  max-width: 720px;
  margin: var(--space-7) auto;
  padding: 0 var(--space-5);
}
.placeholder-view h2 { font-size: 24px; margin-bottom: var(--space-2); }
.placeholder-view .muted { color: var(--charcoal-500); font-size: 14px; }
.placeholder-card {
  margin-top: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  padding: var(--space-5);
  color: var(--charcoal-500);
  font-size: 13.5px;
}

/* ---------- Reusable object cards (used by chat + views, Phase 2) ---------- */

.wi-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  overflow: hidden;
}

.wine-card { max-width: 360px; }
.wine-card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.wine-card-name { font-family: var(--font-display); font-size: 17px; margin-bottom: 2px; }
.wine-card-meta { font-size: 12.5px; color: var(--charcoal-500); }
.wine-card-body { padding: var(--space-3) var(--space-4); }
.wine-card-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.fact-pill {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ivory-200);
  color: var(--charcoal-700);
  border: 1px solid var(--line);
}
.wine-card-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.wi-btn {
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: white;
  color: var(--charcoal-700);
  cursor: pointer;
}
.wi-btn:hover { border-color: var(--wine-500); color: var(--wine-700); }
.wi-btn.primary { background: var(--wine-900); color: var(--ivory-100); border-color: var(--wine-900); }
.wi-btn.primary:hover { background: var(--wine-700); }

.rec-card { padding: var(--space-4); }
.rec-card-title { font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; }
.rec-card-reason { font-size: 13px; color: var(--charcoal-700); }
.rec-why-toggle {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--wine-500);
  cursor: pointer;
  display: inline-block;
}
.rec-why-body {
  margin-top: var(--space-2);
  font-size: 12.5px;
  color: var(--charcoal-500);
  border-top: 1px dashed var(--line);
  padding-top: var(--space-2);
  display: none;
}
.rec-why-body.is-open { display: block; }

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--charcoal-500);
  font-size: 13px;
  text-align: center;
}

.unavailable-badge {
  font-size: 11px;
  color: var(--charcoal-300);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
}

/* Functional catalog and insight views */
.section-page { width: min(1080px, 100%); margin: 0 auto; padding: 34px clamp(18px, 4vw, 56px) 56px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.section-heading h1 { font-size:clamp(32px,4vw,46px); line-height:1.08; margin:4px 0 10px; }
.eyebrow { color:var(--wine-700); font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin:0 0 8px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 34px; }
.metric-card { background:#fffdf9; border:1px solid var(--line); padding:18px 20px; min-height:98px; display:flex; flex-direction:column; justify-content:space-between; }
.metric-card span { color:var(--charcoal-500); font-size:12px; }
.metric-card strong { font-family:var(--font-display); font-size:30px; line-height:1.1; font-weight:500; }
.subsection-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:24px 0 14px; }
.subsection-title h2,.pairing-intro h2 { font-size:24px; }
.subsection-title span,.result-count { color:var(--charcoal-500); font-size:12px; }
.catalog-search { display:flex; gap:8px; margin:20px 0 12px; }
.catalog-search input { flex:1; min-width:0; border:1px solid var(--line-strong); background:#fffdf9; border-radius:var(--radius-sm); padding:12px 14px; font:inherit; color:var(--charcoal-900); }
.wi-btn { border:1px solid var(--line-strong); background:transparent; color:var(--charcoal-900); padding:8px 12px; cursor:pointer; font:500 12px var(--font-body); border-radius:var(--radius-sm); }
.wi-btn:hover { border-color:var(--wine-500); color:var(--wine-700); }
.wi-btn.primary { background:var(--wine-900); color:var(--ivory-100); border-color:var(--wine-900); }
.catalog-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.catalog-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; background:#fffdf9; border:1px solid var(--line); }
.catalog-row strong { font-family:var(--font-display); font-weight:500; font-size:18px; }
.catalog-row p { margin:4px 0 0; color:var(--charcoal-500); font-size:12px; }
.row-meta { color:var(--charcoal-500); white-space:nowrap; font-size:12px; }
.loading-state,.empty-state,.error-state { border:1px solid var(--line); padding:22px; background:#fffdf9; color:var(--charcoal-500); }
.error-state { border-left:3px solid var(--wine-500); color:var(--charcoal-900); }
.error-state p { color:var(--charcoal-500); }
.palate-summary,.pairing-intro,.insight-note { background:#fffdf9; border:1px solid var(--line); padding:22px; margin-bottom:18px; }
.palate-summary p,.pairing-intro p,.insight-note { color:var(--charcoal-500); }
.dimension-list { display:flex; flex-direction:column; gap:12px; margin:22px 0; }
.dimension-row { display:grid; grid-template-columns:150px minmax(50px,1fr) 42px; align-items:center; gap:14px; font-size:12px; text-transform:capitalize; }
.dimension-track { height:7px; background:var(--ivory-300); overflow:hidden; }
.dimension-track span { display:block; height:100%; background:var(--wine-500); }
.dimension-row b { font-weight:500; text-align:right; }
.chat-results { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.list-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; border-top:1px solid var(--line); padding:9px 0; }
.chat-history-item { display:block; width:100%; text-align:left; background:transparent; border:0; color:rgba(250,247,242,.7); padding:8px 10px; cursor:pointer; font:12px var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-history-item:hover,.chat-history-item.is-current { background:rgba(255,255,255,.08); color:var(--ivory-100); }
.sidebar-footer { display:flex; flex-direction:column; gap:4px; }
#api-status { color:rgba(250,247,242,.5); font-size:10px; }
.rec-why-body { display:none; margin-top:10px; color:var(--charcoal-500); font-size:12px; }
.rec-why-body.is-open { display:block; }
.rec-why-toggle { display:inline-block; margin-top:8px; color:var(--wine-700); cursor:pointer; font-size:12px; }
.wine-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
.wine-card-actions button { border:1px solid var(--line); background:transparent; color:var(--wine-700); padding:7px 9px; font-size:11px; cursor:pointer; }
@media (max-width:760px) {
 .section-page { padding:24px 16px 38px; }
 .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .metric-card { padding:14px; min-height:82px; }
 .metric-card strong { font-size:26px; }
 .catalog-row { align-items:flex-start; padding:13px; }
 .row-meta { white-space:normal; text-align:right; }
 .dimension-row { grid-template-columns:110px minmax(30px,1fr) 36px; gap:8px; }
 .subsection-title { align-items:flex-start; flex-direction:column; }
}

/* Record details use the native modal focus/escape behavior. */
#record-detail { width: min(620px, calc(100vw - 32px)); max-height: 85dvh; border: 1px solid var(--line-strong); background: var(--ivory-100); color: var(--charcoal-900); padding: 28px; }
#record-detail::backdrop { background: rgba(33,29,28,.5); }
.detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.detail-facts { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.detail-facts dt { color: var(--charcoal-500); }
.detail-facts dd { margin: 0; overflow-wrap: anywhere; }
.filter-summary { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.catalog-row .row-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: 8px; }
@media(max-width:560px) { .catalog-row { flex-direction: column; } .catalog-row .row-meta { justify-content: start; } }

#tasting-form label, #cellar-edit-form label { display: block; margin-bottom: 18px; }
#tasting-form input, #tasting-form textarea, #cellar-edit-form input { display: block; width: 100%; padding: 10px; margin-top: 6px; font: inherit; border: 1px solid var(--line-strong); background: #fffdf9; }
.auth-gate { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:24px; background:var(--ivory-200); }
.auth-gate[hidden], .app-shell[hidden] { display:none; }
.auth-card { width:min(430px,calc(100vw - 48px)); min-width:0; padding:36px; background:#fffdf9; border:1px solid var(--line); box-shadow:0 20px 60px rgba(59,13,22,.12); }
@media(max-width:480px) { .auth-card { padding:28px 24px; } }
.auth-card h1 { margin:10px 0; font-size:34px; }
.auth-card form { display:grid; gap:14px; margin:24px 0; }
.auth-card label { display:grid; gap:6px; font-size:12px; color:var(--charcoal-700); }
.auth-card input { width:100%; padding:12px; border:1px solid var(--line-strong); background:white; font:inherit; }
.auth-card summary { cursor:pointer; color:var(--wine-700); }
#auth-status { color:var(--wine-700); min-height:20px; }
.sensory-profile { margin:18px 0; padding:16px; border:1px solid var(--line); background:var(--ivory-100); }
.sensory-coverage { margin:4px 0 10px; color:var(--charcoal-700); font-size:13px; }
.sensory-row { display:grid; grid-template-columns:128px minmax(120px,1fr) 150px; gap:10px; align-items:center; margin:7px 0; font-size:12px; text-transform:capitalize; }
.sensory-track { height:9px; background:var(--ivory-300); border-radius:10px; position:relative; overflow:visible; }
.sensory-track i { display:block; height:100%; background:var(--wine-700); border-radius:10px; }
.sensory-row.predicted .sensory-track i { background:#a87546; }
.sensory-row.unknown { opacity:.55; }
.sensory-row.unknown .sensory-track { background:repeating-linear-gradient(135deg,#eee 0,#eee 4px,#ddd 4px,#ddd 8px); }
.sensory-track b { position:absolute; top:-3px; width:2px; height:15px; background:#1e5061; }
@media(max-width:700px) { .sensory-row { grid-template-columns:104px 1fr; } .sensory-row small { grid-column:2; } }

/* Authenticated home and focused conversation */
.header-home { border:0; background:transparent; color:var(--wine-900); cursor:pointer; font:500 18px var(--font-display); }
.home-scroll { height:calc(100dvh - 148px); overflow:auto; padding:clamp(24px,4vw,58px); padding-bottom:120px; }
.home-scroll > * { width:min(1180px,100%); margin-left:auto; margin-right:auto; }
.home-hero { padding:24px 0 46px; }
.home-hero h1 { font-size:clamp(38px,5vw,68px); line-height:1.02; max-width:780px; }
.home-hero > p:last-child { color:var(--charcoal-500); font-size:16px; }
.home-module { background:#fffdf9; border:1px solid var(--line); padding:clamp(18px,3vw,32px); margin-bottom:20px; min-width:0; }
.home-module > header { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:22px; }
.home-module > header h2 { font-size:clamp(24px,3vw,34px); }
.home-module > header > span { color:var(--charcoal-500); font-size:11px; }
.journal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.journal-card { min-width:0; border-top:1px solid var(--line-strong); padding-top:14px; }
.journal-card img { width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:14px; background:var(--ivory-200); }
.journal-card span,.home-wine > p { color:var(--charcoal-500); font-size:11px; }
.journal-card h3 { font-size:20px; line-height:1.15; margin:7px 0; }
.journal-card p { color:var(--charcoal-500); font-size:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.quiet-link { border:0; padding:0; background:transparent; color:var(--wine-700); cursor:pointer; font:600 11px var(--font-body); text-decoration:underline; text-underline-offset:3px; }
.home-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.home-wines { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.home-wine { border-top:1px solid var(--line); padding:13px 0; min-width:0; }
.home-wine h3 { font-size:19px; overflow-wrap:anywhere; }
.home-wine h3 span { color:var(--charcoal-500); font-size:14px; }
.preference-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--charcoal-500); font-size:12px; }
.preference-tags strong { width:100%; color:var(--charcoal-700); }
.preference-tags span { border:1px solid var(--line); padding:4px 8px; }
.module-prompt { width:100%; border:1px solid var(--wine-900); background:var(--wine-900); color:var(--ivory-100); padding:12px; cursor:pointer; margin-top:14px; }
.home-empty { border:1px dashed var(--line-strong); color:var(--charcoal-500); padding:18px; font-size:12px; }
.home-conversation { position:fixed; z-index:8; left:calc(268px + 50%); bottom:20px; transform:translateX(-50%); width:min(760px,calc(100vw - 308px)); padding:13px 16px; background:#fffdf9; border:1px solid var(--line-strong); box-shadow:0 16px 42px rgba(59,13,22,.12); }
.home-conversation label { display:block; color:var(--wine-700); font:600 10px var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.home-composer-row { display:flex; align-items:end; gap:8px; }
.home-composer-row textarea { flex:1; min-width:0; resize:none; border:0; outline:0; background:transparent; color:var(--charcoal-900); font:18px var(--font-display); padding:8px 0; }
.home-conversation > p { margin:0; color:var(--charcoal-300); font-size:10px; }
.conversation-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 24px; border-bottom:1px solid var(--line); color:var(--charcoal-500); font-size:10px; }

@media(max-width:900px) {
 .journal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-split { grid-template-columns:1fr; }
 .home-conversation { left:calc(268px + (100vw - 268px)/2); width:min(680px,calc(100vw - 300px)); }
}
@media(max-width:760px) {
 .home-scroll { height:calc(100dvh - 132px); padding:20px 16px 120px; }
 .home-hero { padding:14px 0 30px; }
 .home-hero h1 { font-size:38px; }
 .journal-grid,.home-wines { grid-template-columns:1fr; }
 .home-module { padding:18px; }
 .home-conversation { left:16px; right:16px; bottom:10px; transform:none; width:auto; }
 .conversation-toolbar { padding:8px 16px; }
}