/* Sayso app layout. Phone only: one column, max 430px. Colours, type, radii and
   shadows all come from the Meridian tokens (tokens.css) and components (meridian.css). */

@font-face { font-family: "TWK Everett"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/TWKEverett-Regular.otf") format("opentype"); }
@font-face { font-family: "TWK Everett"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/TWKEverett-Medium.otf") format("opentype"); }
@font-face { font-family: "TWK Everett"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/TWKEverett-Bold.otf") format("opentype"); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--surface-subtle); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

#app { position: relative; max-width: 430px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: var(--surface-subtle); }
@media (min-width: 480px) { #app { box-shadow: var(--material-base); } }
#view { flex: 1; display: flex; flex-direction: column; }

/* Type scale (Meridian names) */
.t-h32 { font: 500 32px/40px var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.t-h24 { font: 500 24px/32px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.t-h20 { font: 500 20px/28px var(--font-sans); letter-spacing: -0.015em; }
.t-h16 { font: 500 16px/24px var(--font-sans); letter-spacing: -0.01em; }
.t-label16 { font: 400 16px/24px var(--font-sans); }
.t-label14 { font: 400 14px/20px var(--font-sans); }
.t-label13 { font: 400 13px/16px var(--font-sans); }
.t-label12 { font: 400 12px/16px var(--font-sans); }
.t-copy16 { font: 400 16px/24px var(--font-sans); }
.t-copy14 { font: 400 14px/22px var(--font-sans); }
.t-mono13 { font: 400 13px/20px var(--font-mono); }
.muted { color: var(--ink-muted); }
strong { font-weight: 500; }

/* Layout */
.page { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); color: var(--ink); background: var(--surface-subtle); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stack-2 { gap: var(--space-2); } .stack-3 { gap: var(--space-3); } .stack-6 { gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.row-between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.full { width: 100%; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; }
.wordmark { font: 500 20px/28px var(--font-sans); letter-spacing: -0.015em; text-decoration: none; }
.linkish { position: relative; background: none; border: 0; padding: 0; font: inherit; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* A text link is one line tall. This makes the area that answers a tap 44px. */
.linkish::before { content: ""; position: absolute; inset: -14px -8px; }
a.md-badge, a.meter { text-decoration: none; }
/* The plan badge is a small pill, so it answers a tap on a taller area. */
a.md-badge { position: relative; }
a.md-badge::before { content: ""; position: absolute; inset: -10px -6px; }
.center { align-items: center; text-align: center; }
.pad { padding: var(--space-4); }

/* Phone inputs: 16px text stops iOS from zooming the page on focus. */
.md-input input, .md-textarea { font-size: 16px; }
.idea { min-height: 112px; resize: none; border: 0; padding: 0; background: transparent; font: 400 18px/28px var(--font-sans); }
.idea:focus { outline: 0; }
.composer { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.composer:focus-within { box-shadow: 0 0 0 2px var(--focus-ring); }

/* Tappable rows: the choices on a tool, your tools, the row that reopens a conversation */
.opt {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4); border: 0; text-align: left; color: var(--ink); font: 400 16px/24px var(--font-sans); cursor: pointer; text-decoration: none; }
.opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.opt .sub { display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.opt .chev { flex: none; color: var(--ink-muted); display: flex; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.choices .opt { min-height: 48px; justify-content: center; text-align: center; padding: var(--space-2) var(--space-3); font-size: 14px; line-height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--material-base); color: var(--ink); font: 400 14px/20px var(--font-sans); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* One row that scrolls sideways, edge to edge: the Market filter chips and the preset shelf. */
.chips.scroll, .shelf { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4); scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar, .shelf::-webkit-scrollbar { display: none; }
.chips.scroll > *, .shelf > * { flex: none; }
/* A preset on the shelf: its icon tile with the label under it. */
.shelf { gap: var(--space-1); }
.shelf-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 76px; padding: var(--space-1) 0; border: 0; background: none; color: var(--ink); font: 400 12px/16px var(--font-sans); text-align: center; cursor: pointer; }
.shelf-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.meter-top b { flex: none; }

/* Stats, lists */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.stat { padding: var(--space-3); }
.stat b { display: block; font: 500 24px/32px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat small { font: 400 14px/20px var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.stat span { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 56px; }
.list > li + li { box-shadow: 0 -1px 0 var(--border); }
/* A row that is one button or link (TapRow in ui.js): the button fills the row and brings its own padding. */
.list > li.taprow { padding: 0; }
.taprow > .opt { background: none; border-radius: inherit; }
.list .names { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.stepper { display: inline-flex; align-items: center; gap: var(--space-3); }
.stepper output { min-width: 24px; text-align: center; font: 500 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.linkbox { padding: var(--space-3) var(--space-4); overflow-wrap: anywhere; user-select: all; }

/* A generated tool wears one of the looks in vibe.css. The look sets the theme on its own container. */
.toolpage { flex: 1; display: flex; flex-direction: column; }
.lookcard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 0; width: 100%; text-align: left; cursor: pointer; color: var(--ink); background: var(--surface-subtle); border-radius: var(--radius-lg); box-shadow: var(--material-medium); }
.lookcard[aria-checked="true"] { box-shadow: 0 0 0 2px var(--focus-ring), var(--material-medium); }
.lookcard:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.swatch { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); font: 500 14px/20px var(--font-sans); }
.lookhead { background: var(--surface-subtle); color: var(--ink); }
.toolfoot { margin-top: auto; padding-top: var(--space-6); text-align: center; }

/* Inside a role's card (vibe.css draws the card): a small label over a line or a list. */
.lens-group { display: flex; flex-direction: column; gap: var(--space-1); font: 400 14px/20px var(--font-sans); }
.lens-label { font: 500 12px/16px var(--font-sans); color: var(--hue-ink); }
.steps { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; font: 400 14px/20px var(--font-sans); }

/* Toasts sit above everything, near the bottom of the phone column. */
#toasts { position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast, 500); width: min(398px, calc(100% - 2 * var(--space-4))); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
#toasts .md-toast { width: 100%; pointer-events: auto; animation: rise .2s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #toasts .md-toast { animation: none; } }

/* Talk */
/* The microphone on Make and the conversation (talk.js). vibe.css draws all of it. These are the few layout rules it leaves out. */
/* Parts of Make and of the talk bar show one at a time. Each has a display of its own, so hidden has to win. */
.voice-hero[hidden], .composer[hidden], .talkbar > [hidden], .talkbar-row > [hidden], .talk-type > [hidden] { display: none; }
/* The voice button is gone while she types, and keeps its place, so the title stays in the middle of the top bar. */
.talk-mute[hidden] { visibility: hidden; }
/* The glow behind the microphone turns as it breathes. Its turning box reaches past the bar and made the page a few
   pixels taller and shorter with it, so the bar keeps what is inside it. Nothing that shows is cut. */
.talkbar { overflow: clip; }
/* A step with two answers in the bar (No, next to Looks right): the second sits on the other side of the microphone,
   so the microphone stays in the middle. While she types the microphone is gone and the two end up side by side. */
.talkbar-row > .md-btn.talk-second { grid-column: 1; grid-row: 1; justify-self: end; }
/* A quick answer with a second line, such as what each kind of tool is for. */
.reply .sub { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
/* The typing box is a textarea that grows with a long answer, such as a way to start she is changing. The buttons stay at its foot. */
.talk .talk-type { align-items: flex-end; }
.talk .talk-type > button { margin-bottom: 2px; }
.talk .talk-type > .md-input { height: auto; min-height: 48px; }
.talk-type textarea { flex: 1; min-width: 0; max-height: 168px; padding: 12px var(--space-3); border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 16px/24px var(--font-sans); }
.talk-type textarea::placeholder { color: var(--ink-muted); opacity: 1; }
/* The name in the summary is hers to change: an input that reads as the card's title, with a pencil beside it. */
.summary-head > div { flex: 1; min-width: 0; }
input.summary-title { display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; }
input.summary-title:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.summary-edit { display: flex; flex: none; margin: -6px; padding: 14px; color: var(--ink-muted); cursor: pointer; }