/* Pasta design system — token-for-token from the reference deck
   (Design/pasta-talk.html, the app-styled artifact): near-black ground,
   warm off-white ink, muted antique gold accent, quiet gold bloom with
   dot-grain stipple, Cormorant with LIGHT display weight and italic-gold
   emphasis, glass cards at 28px. Dark-only, like the app. */

@font-face { font-family: 'Cormorant'; src: url('/static/fonts/Cormorant-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/static/fonts/Cormorant-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/static/fonts/Cormorant-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #060606;
  --ink: #EDE9E2;
  --ink-dim: rgba(237,233,226,0.58);
  --ink-faint: rgba(237,233,226,0.36);
  --glass: rgba(255,255,255,0.055);
  --glass-line: rgba(255,255,255,0.11);
  --gold: #B8892E;
  --gold-bright: #D9A94A;
  --blue: #4E7FD0;
  --teal: #2FA396;
  --green: #6DA555;
  --rust: #C05A32;
  --rose: #C75F92;
  --violet: #9678D3;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: 'Cormorant', Georgia, serif; font-weight: 300;
  font-size: 1.3rem; line-height: 1.5;
}

/* Ambient bloom — the app's mesh glow, quoted quietly (deck treatment). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 108%,
    rgba(184,137,46,0.30), rgba(150,90,30,0.10) 55%, transparent 78%);
}
/* Dot-grain stipple inside the bloom. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(226,178,92,0.35) 1px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(55% 42% at 50% 108%, rgba(0,0,0,.8), transparent 72%);
  mask-image: radial-gradient(55% 42% at 50% 108%, rgba(0,0,0,.8), transparent 72%);
}

header.site {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1.2rem 1.5rem;
}
footer.site {
  padding: 1.2rem 1.5rem; color: var(--ink-faint); font-family: var(--mono);
  font-size: 0.8rem; margin-top: 4rem;
}
.brand {
  color: var(--ink); text-decoration: none; font-weight: 300;
  font-size: 1.6rem; letter-spacing: 0.015em;
}
.brand span { color: var(--gold-bright); font-style: italic; font-weight: 400; }

main { max-width: 42rem; margin: 0 auto; padding: 2.4rem 1.5rem; }

h1 {
  font-weight: 300; font-size: 2.6rem; line-height: 1.08; margin: 0 0 0.8rem;
  letter-spacing: 0.005em; text-wrap: balance;
}
h1 em { font-style: italic; font-weight: 400; color: var(--gold-bright); }

.eyebrow {
  font-size: 0.85rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--gold-bright); font-weight: 300; margin: 0 0 1.4rem;
}
.eyebrow a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 0.35em; text-decoration-thickness: 1px;
}
.kicker { font-style: italic; font-weight: 400; font-size: 1.45rem; color: var(--ink-dim); }
.kicker strong { color: var(--gold-bright); font-style: italic; font-weight: 400; }
.label {
  font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 300;
}
.mono { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0; }
.muted { color: var(--ink-dim); }

a { color: var(--gold-bright); }

.error {
  color: #F2CDBE; background: rgba(192,90,50,0.12);
  border: 1px solid rgba(192,90,50,0.45);
  padding: 0.6rem 1rem; border-radius: 14px; font-weight: 300;
}
.status {
  background: var(--glass); border: 1px solid var(--glass-line);
  padding: 0.8rem 1.2rem; border-radius: 18px;
}
.status.good { border-color: rgba(109,165,85,0.55); }
.status.bad { border-color: rgba(192,90,50,0.55); }

form.card, a.card, div.card {
  display: block; background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 28px; padding: 1.6rem 1.8rem; margin: 1.3rem 0;
  color: var(--ink); text-decoration: none;
}
nav.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
nav.cards .card { margin: 0; transition: border-color 0.2s ease; }
nav.cards .card:hover { border-color: rgba(217,169,74,0.55); }
nav.cards .card strong { font-weight: 400; font-style: italic; font-size: 1.35rem; color: var(--gold-bright); }

label { display: block; margin: 1rem 0; font-weight: 300; }
label > input { margin-top: 0.35rem; }
input:not([type]), input[type="email"], input[type="password"], input[type="text"],
input[type="number"], input[type="date"], input[type="search"], textarea, select {
  display: block; width: 100%; padding: 0.6rem 0.9rem;
  border: 1px solid var(--glass-line); border-radius: 14px;
  background: rgba(0,0,0,0.35); color: var(--ink);
  font: inherit; font-weight: 300;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217,169,74,0.14);
}
label.check { display: flex; gap: 0.65rem; align-items: baseline; color: var(--ink-dim); }
input[type="checkbox"] { accent-color: var(--gold); transform: translateY(2px); }
fieldset { border: 1px solid var(--glass-line); border-radius: 18px; margin: 1.2rem 0; padding: 0.5rem 1.1rem 0.9rem; }
legend { font-style: italic; font-weight: 400; color: var(--gold-bright); padding: 0 0.45rem; }

button {
  background: var(--glass); color: var(--gold-bright);
  border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 0.55rem 1.7rem; font: inherit; font-weight: 400; font-style: italic;
  cursor: pointer; transition: border-color 0.2s ease;
}
button:hover { border-color: var(--gold); }
button.linkish {
  background: none; border: 0; color: var(--ink-faint); padding: 0;
  font-weight: 300; font-style: normal; text-decoration: underline; margin-top: 2rem;
}

.hero { text-align: center; padding: 4rem 0 1.6rem; }
.hero .wordmark {
  font-weight: 300; font-size: 5rem; line-height: 1; letter-spacing: 0.015em;
}
.hero .wordmark span { color: var(--gold-bright); font-style: italic; font-weight: 400; }
.hero .sub { font-style: italic; font-weight: 400; font-size: 1.6rem; color: var(--ink-dim); margin-top: 1.1rem; }
.hero .actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; }

ul.terms li { margin-bottom: 0.75rem; color: var(--ink-dim); }
ul.terms li strong { color: var(--ink); font-weight: 400; font-style: italic; }

.avatar { width: 7rem; height: 9.33rem; border-radius: 18px; object-fit: cover;
  border: 1px solid var(--glass-line); background: var(--glass); }
.avatar.large { width: 10rem; height: 13.33rem; margin-bottom: 1rem; }
.avatar-row { display: flex; gap: 1.4rem; align-items: center; margin-bottom: 0.6rem; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 1rem; }
.chip { display: inline-block; border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 0.1rem 0.8rem; margin: 0.15rem 0.2rem 0.15rem 0; }
.coach-page { text-align: center; padding-top: 1.5rem; }
.coach-page .bio { text-align: left; max-width: 36rem; margin: 1.6rem auto; }
.coach-page .creds { list-style: none; padding: 0; color: var(--ink-dim); }
.coach-page .actions { margin-top: 2.2rem; }
input[type="file"] { color: var(--ink-dim); font: inherit; font-size: 0.95rem; }

.capsules { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0 1rem; }
.capsule { display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--glass-line); background: var(--glass);
  border-radius: 999px; padding: 0.15rem 0.5rem 0.15rem 0.9rem; font-size: 1.05rem; }
.capsule-x { background: none; border: 0; padding: 0 0.25rem; margin: 0;
  color: var(--gold-bright); font: inherit; font-style: normal; cursor: pointer;
  border-radius: 50%; line-height: 1; }
.capsule-x:hover { color: var(--ink); }
select { appearance: none; }

.small { font-size: 1.05rem; }

input[type="file"]::file-selector-button {
  background: var(--glass); color: var(--gold-bright);
  border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 0.45rem 1.3rem; margin-right: 0.9rem;
  font: inherit; font-weight: 400; font-style: italic; cursor: pointer;
  transition: border-color 0.2s ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--gold); }

#credentials-input { margin-bottom: 1.4rem; }

.docedit { min-height: 24rem; font-size: 0.85rem; line-height: 1.4; }
ul.lint li { color: #F2CDBE; margin-bottom: 0.4rem; }
ul.outline { list-style: none; padding: 0; color: var(--ink-dim); }

/* ---- builder island ---- */
.builder label { margin: 0.5rem 0; }
.b-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; }
.b-row > label { flex: 1 1 10rem; }
.b-settings, .b-phases, .b-grid-wrap, .b-status { margin: 1.4rem 0; }
.b-phase { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  border-left: 3px solid var(--gold); background: var(--glass);
  border-radius: 0 14px 14px 0; padding: 0.5rem 0.8rem; margin: 0.5rem 0; }
.b-phase input, .b-phase select {
  width: auto; display: inline-block;
  background: transparent; border-color: transparent;
}
.b-phase input:hover, .b-phase select:hover { border-color: var(--glass-line); }
.b-phase input:focus, .b-phase select:focus {
  background: rgba(0,0,0,0.35); border-color: var(--gold);
}
.b-phase-name { font-weight: 600; max-width: 11rem; }
.b-phase-focus { flex: 1; min-width: 10rem; }
.b-weeks { display: inline-flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.b-weeks button { padding: 0.1rem 0.7rem; font-style: normal; }
.b-x {
  width: 2.2rem; height: 2.2rem; padding: 0 0 2px;
  display: inline-grid; place-items: center;
  line-height: 1; font-style: normal; font-size: 1.13rem;
  font-family: system-ui, sans-serif;
  border-radius: 50%; align-self: center; flex: none;
  color: var(--rust); border-color: rgba(192,90,50,0.4);
}
.b-phase-row { position: relative; }
.b-phase-row > .b-phase { width: 100%; }
.b-phase-row > .b-x { position: absolute; right: -3.1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 56rem) { .b-phase-row > .b-x { right: 0.4rem; } }
.b-x > * { pointer-events: none; }
.b-x:hover { border-color: #E4685A; color: #E4685A; }
.b-grid-wrap { overflow-x: auto; }
.b-grid { border-collapse: collapse; width: 100%; font-size: 1rem; }
.b-grid th, .b-grid td { border: 1px solid rgba(255,255,255,0.08); padding: 0.35rem 0.5rem;
  text-align: left; vertical-align: top; }
.b-grid thead th { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.1em; border: 0; }
.b-cell { cursor: pointer; min-width: 6.5rem; height: 3.4rem; transition: background 0.15s ease; }
.b-cell:hover { background: rgba(217,169,74,0.08); }
.b-selected { outline: 2px solid var(--gold); outline-offset: -2px; }
.b-rest { color: var(--ink-faint); text-align: center; }
.b-restdot { display: block; text-align: center; color: var(--ink-faint); }
.b-active_recovery .b-cell-focus { color: var(--teal); }
.b-cell-focus { font-size: 0.95rem; line-height: 1.2; }
.b-cell-meta { color: var(--ink-faint); font-size: 0.7rem; }
.b-repeat td, .b-repeat th { opacity: 0.45; }
.b-repeat .b-deload { opacity: 1; }
.b-phase-tag { font-style: italic; font-weight: 400; }
.b-deload, .b-deload-h { text-align: center; width: 3rem; }
.b-day { background: transparent; }
.b-block { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; padding: 1.2rem 1.4rem; margin: 0.8rem 0; }
.b-mini { flex: 0 1 8.5rem; }
.b-day > .b-row > label { flex: 1 1 12rem; }
.b-pick { flex: 1 1 12rem; text-align: left; font-style: normal; color: var(--ink); }
.b-ramp { margin-top: 0.4rem; }
.b-est { color: var(--ink-dim); margin-left: 1rem; }
.b-picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40;
  display: grid; place-items: center; padding: 1rem; }
.b-picker { width: 100%; max-width: 34rem; max-height: 70vh; overflow-y: auto; }
.b-picker ul { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.b-picker li { padding: 0.45rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; }
.b-picker li:hover { background: rgba(217,169,74,0.08); }
.b-save { display: inline-block; margin-bottom: 0.6rem; }
.b-save-error { color: var(--rust); }
.b-save-dirty, .b-save-saving { color: var(--ink-dim); }
.b-save-saved { color: var(--green); }

.b-picker.card { background: #121110; border-color: rgba(255,255,255,0.18); }
.b-picker { max-width: 38rem; }
.b-picker li { padding: 0.6rem 0.6rem; }
.b-picker li:hover { background: rgba(217,169,74,0.14); }

.b-hms { flex: 0 1 14rem; }
.b-hms-row { display: flex; gap: 0.3rem; align-items: center; margin-top: 0.35rem; }
.b-hms-row input { width: 4.3rem; text-align: center; margin-top: 0; }

.b-focus { display: block; width: 100%; }
.b-hms-cell { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.b-hms-unit { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }

.b-datebar { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.b-datebar input[type="date"] { width: auto; padding: 0.3rem 0.6rem; }
.b-week-dates { display: block; font-family: var(--mono); font-size: 0.7rem;
  color: var(--ink-faint); font-weight: 300; letter-spacing: 0; }

.b-grid tbody th { min-width: 9.5rem; padding: 0.5rem 0.8rem; font-weight: 300; }

.b-phase-tag { margin-left: 0.6rem; }

/* ---- coach inbox ---- */
.thread-card.unread { border-color: rgba(217,169,74,0.55); }
.unread-chip { color: var(--gold-bright); border-color: rgba(217,169,74,0.5); margin-left: 0.5rem; }
.thread-when { float: right; color: var(--ink-faint); }
.thread { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.bubble { max-width: 78%; border: 1px solid var(--glass-line); background: var(--glass);
  border-radius: 18px; padding: 0.7rem 1rem; }
.bubble-user { align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble-coach { align-self: flex-end; border-bottom-right-radius: 6px;
  background: rgba(184,137,46,0.12); border-color: rgba(184,137,46,0.35); }
.bubble-when { color: var(--ink-faint); font-size: 0.7rem; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.8rem; align-items: flex-end; }
.composer textarea { flex: 1; }