/* Your Story — server-backed book workspace (web/src/*.ts).
   Estate UI rules: AAA contrast (ink on paper >= 7:1), text size setting, visible focus,
   resizable multi-line boxes (never resize:none), numbered guidance, motto under the logo. */
:root {
  --ys-paper: #f8f4e9;      /* prototype dialog paper */
  --ys-card: #fffdf7;
  --ys-ink: #1b3329;        /* 12.9:1 on paper */
  --ys-muted: #3d4f45;      /* 8.4:1 on paper */
  --ys-line: #6b6450;
  --ys-btn: #1f4a3d;        /* white on this 9.9:1 */
  --ys-on-btn: #ffffff;
  --ys-btn-hover: #133328;
  --ys-focus: #0b3d91;
  --ys-halo: #ffcf77;
  --ys-ok: #14532d;
  --ys-warn: #6b3200;
  --ys-error: #8b0000;
  --ys-note-bg: #eef3e6;
  --ys-scale: 1;
}
html[data-ys-contrast="high"] {
  --ys-paper: #ffffff; --ys-card: #ffffff; --ys-ink: #000000; --ys-muted: #1a1a1a; --ys-line: #000000;
  --ys-btn: #000000; --ys-on-btn: #ffffff; --ys-btn-hover: #1f1f1f; --ys-focus: #0033a0; --ys-halo: #ffd500;
  --ys-ok: #004d00; --ys-warn: #5a2d00; --ys-error: #7a0000; --ys-note-bg: #f2f2f2;
}

/* Motto under the logo (estate standard: Caveat, lowercase). */
.ys-motto { font-family: 'BMSG Caveat', Caveat, cursive; text-transform: lowercase; margin: 0; line-height: 1.1; }
.ys-motto-header { color: #efcf84; font-size: clamp(17px, 2vw, 22px); }

/* Header additions */
.ys-open, .ys-signout {
  min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 2px solid #efcf84;
  background: #1f4a3d; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer;
}
.ys-open:hover, .ys-signout:hover { background: #133328; }
.ys-account { display: flex; align-items: center; gap: 8px; color: #f7f1e4; font-size: 14px; }
.ys-account-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .ys-account-name { display: none; } }

/* Workspace dialog */
dialog.ys-workspace {
  width: min(980px, 96vw); max-height: 94svh; padding: 0; border-radius: 18px;
  background: var(--ys-paper); color: var(--ys-ink); border: 2px solid var(--ys-line);
  font-size: calc(16px * var(--ys-scale)); line-height: 1.5; margin: auto;
}
dialog.ys-workspace::backdrop { background: rgba(8, 20, 16, .72); }
.ys-ws-head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px 10px; border-bottom: 1px solid var(--ys-line); position: sticky; top: 0; background: var(--ys-paper); z-index: 1;
}
.ys-ws-head h1 { margin: 0; font-size: 1.6em; color: var(--ys-ink); }
.ys-brand { margin: 0; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--ys-muted); }
.ys-ws-head .ys-motto { color: #6b3a00; font-size: 1.35em; }
html[data-ys-contrast="high"] .ys-ws-head .ys-motto { color: #000; }
.ys-ws-brand { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .ys-a11y { order: 3; flex-basis: 100%; } }
.ys-a11y { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9em; }
.ys-a11y select { width: auto; display: inline-block; min-height: 36px; margin: 0; }
.ys-close { min-width: 44px; min-height: 44px; border-radius: 22px; border: 2px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font-size: 1.4em; cursor: pointer; }
.ys-ws-body { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 0; }
@media (max-width: 720px) { .ys-ws-body { grid-template-columns: 1fr; } }
.ys-ws-body > nav { border-right: 1px solid var(--ys-line); padding: 14px 10px; }
@media (max-width: 720px) { .ys-ws-body > nav { border-right: 0; border-bottom: 1px solid var(--ys-line); } }
.ys-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { .ys-nav { flex-direction: row; flex-wrap: wrap; } }
.ys-nav button {
  width: 100%; text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--ys-line); background: var(--ys-card); color: var(--ys-ink); font: inherit; cursor: pointer;
}
dialog.ys-workspace .ys-nav button { background: var(--ys-card) !important; color: var(--ys-ink) !important; border: 2px solid var(--ys-btn) !important; }
dialog.ys-workspace .ys-nav button[aria-current="step"] { background: var(--ys-btn) !important; color: var(--ys-on-btn) !important; font-weight: 700; }
dialog.ys-workspace .ys-nav button:disabled { background: transparent !important; color: var(--ys-muted) !important; border-style: dashed !important; }
.ys-nav button:disabled { opacity: 1; color: var(--ys-muted); background: transparent; border-style: dashed; cursor: not-allowed; }
.ys-view { padding: 16px 22px 26px; min-width: 0; }
.ys-view h2 { margin: .2em 0 .5em; font-size: 1.35em; color: var(--ys-ink); }
.ys-view h3 { margin: .2em 0 .4em; font-size: 1.1em; color: var(--ys-ink); }

/* Numbered guidance */
.ys-steps { margin: 0 0 14px; padding-left: 1.6em; }
.ys-steps li { margin: 3px 0; }
.ys-num {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: .45em; border-radius: 50%;
  background: var(--ys-btn); color: var(--ys-on-btn); font-weight: 700; font-size: .9em;
}

/* Fields */
.ys-field { margin: 12px 0; }
.ys-field label, .ys-label { display: block; font-weight: 600; margin: 0 0 4px; color: var(--ys-ink); }
.ys-view input[type="text"], .ys-view input[type="number"], .ys-view textarea, .ys-view select {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px; margin: 0;
  border: 2px solid var(--ys-line); border-radius: 9px; background: #ffffff; color: #111111; font: inherit;
}
.ys-view input[type="number"] { width: 8em; }
/* Every multi-line box keeps the drag-corner grip (estate rule: resize:none is banned). */
.ys-view textarea, textarea.ys-resizable { resize: vertical; min-height: 7em; }
.ys-hint { margin: 4px 0 0; color: var(--ys-muted); font-size: .92em; }
.ys-picker { border: 1px solid var(--ys-line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.ys-picker legend { font-weight: 600; padding: 0 4px; }
.ys-picker input[type="checkbox"], .ys-picker input[type="radio"], .ys-list input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; accent-color: var(--ys-btn); }
.ys-a11y input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; }

/* Buttons */
.ys-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.ys-view button, .ys-button-link {
  min-height: 44px; padding: 9px 16px; border-radius: 22px; border: 2px solid var(--ys-btn);
  background: var(--ys-card); color: var(--ys-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.ys-view button.ys-primary, .ys-button-link { background: var(--ys-btn); color: var(--ys-on-btn); }
.ys-view button.ys-primary:hover, .ys-button-link:hover { background: var(--ys-btn-hover); }
.ys-view button:disabled { cursor: progress; opacity: .75; }
.ys-view button.ys-link-button { border: 0; background: none; padding: 4px 2px; min-height: 36px; text-decoration: underline; color: var(--ys-ink); border-radius: 4px; }
.ys-record { border-color: #8b0000 !important; }
.ys-recorder { display: block; padding: 10px 12px; border: 1px dashed var(--ys-line); border-radius: 10px; }
.ys-recorder[data-state="recording"] { border: 2px solid #8b0000; background: #fff4f2; }
.ys-rec-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.ys-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.3em; min-width: 3.5ch; }
.ys-playback { display: block; width: 100%; max-width: 100%; min-height: 48px; }
.ys-play-block { margin-top: 10px; }
.ys-view button[aria-pressed="true"] { background: var(--ys-btn); color: var(--ys-on-btn); }

/* Microphone level slider: big thumb + tall track for fingers (44px+ touch target). */
.ys-mic-level { margin: 10px 0; }
dialog.ys-workspace .ys-mic-level label { display: block; font-weight: 600; margin: 0 0 4px; }
.ys-gain-out { font-variant-numeric: tabular-nums; }
.ys-view input[type="range"]#ys-mic-gain {
  display: block; width: 100%; box-sizing: border-box; height: 48px; margin: 0; padding: 0;
  background: transparent; accent-color: var(--ys-btn); cursor: pointer; -webkit-appearance: none; appearance: none;
}
#ys-mic-gain::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: var(--ys-card); border: 2px solid var(--ys-line); }
#ys-mic-gain::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 34px; height: 34px; margin-top: -13px; border-radius: 50%;
  background: var(--ys-btn); border: 3px solid var(--ys-on-btn); box-shadow: 0 0 0 2px var(--ys-btn);
}
#ys-mic-gain::-moz-range-track { height: 12px; border-radius: 6px; background: var(--ys-card); border: 2px solid var(--ys-line); }
#ys-mic-gain::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--ys-btn); border: 3px solid var(--ys-on-btn); box-shadow: 0 0 0 2px var(--ys-btn); }

/* Live level meter: the words carry the meaning; the colour only backs them up. */
.ys-meter { position: relative; height: 22px; margin: 10px 0 4px; border: 2px solid var(--ys-line); border-radius: 11px; background: var(--ys-card); overflow: hidden; }
.ys-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--ys-muted); transition: transform 80ms linear; }
.ys-meter[data-word="good"] .ys-meter-fill { background: var(--ys-ok); }
.ys-meter[data-word="quiet"] .ys-meter-fill, .ys-meter[data-word="silent"] .ys-meter-fill { background: var(--ys-warn); }
.ys-meter[data-word="loud"] .ys-meter-fill { background: var(--ys-error); }
.ys-level-word { margin: 4px 0 0; font-weight: 600; color: var(--ys-ink); min-height: 1.5em; }

/* Visible focus everywhere in the workspace + header additions */
#ys-workspace :focus-visible, .ys-open:focus-visible, .ys-signout:focus-visible {
  outline: 3px solid var(--ys-focus) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ys-halo);
}

/* Status + notes */
.ys-status { min-height: 1.5em; margin: 8px 0; font-weight: 600; }
.ys-status[data-tone="ok"] { color: var(--ys-ok); }
.ys-status[data-tone="warn"] { color: var(--ys-warn); }
.ys-status[data-tone="error"] { color: var(--ys-error); }
.ys-note, .ys-kg { background: var(--ys-note-bg); border-left: 5px solid var(--ys-btn); padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.ys-kg-hold { border-left-color: #6b3200; }
.ys-kg-refuse { border-left-color: #8b0000; }
.ys-prompt { background: var(--ys-card); border: 1px solid var(--ys-line); padding: 10px; border-radius: 8px; }
.ys-muted { color: var(--ys-muted); }
.ys-badge { color: var(--ys-warn); font-size: .92em; }

/* Cards, lists, chips */
.ys-card { background: var(--ys-card); border: 1px solid var(--ys-line); border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.ys-card > summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.ys-list { list-style: none; padding: 0; margin: 6px 0; }
.ys-list li { padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ys-prompts { padding-left: 1.4em; }
.ys-prompts li { margin: 6px 0; }
.ys-view button.ys-prompt-chip { text-align: left; font-weight: 500; border-radius: 12px; }
.ys-para { margin: 12px 0 16px; }
.ys-chips { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9em; }
.ys-chip { border: 1px solid var(--ys-btn); border-radius: 12px; padding: 1px 9px; background: var(--ys-note-bg); color: var(--ys-ink); }

/* PDF preview */
.ys-pdf-frame { width: 100%; height: min(70vh, 720px); border: 1px solid var(--ys-line); border-radius: 8px; background: #ffffff; }

/* Overrides for the carried prototype's generic header/dialog rules. */
main > header button.ys-open, main > header .ys-account button.ys-signout { width: auto; height: auto; min-height: 44px; padding: 8px 14px; white-space: nowrap; }
dialog.ys-workspace label { font-size: 1em; margin: 0; }
dialog.ys-workspace .ys-field > label, dialog.ys-workspace .ys-label { margin: 0 0 4px; }
dialog.ys-workspace input[type="radio"] { display: inline-block; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; vertical-align: middle; accent-color: var(--ys-btn); }
dialog.ys-workspace input[type="checkbox"] { margin: 0 6px 0 0; }
.ys-picker > div, .ys-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ys-picker > div { margin: 6px 0; }
.ys-picker > div label, .ys-list li label { display: inline; }
.ys-view h2:focus:not(:focus-visible), .ys-view h2[tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }
.ys-view h2, .ys-view h3 { font-family: inherit; }

@media (prefers-reduced-motion: reduce) { #ys-workspace * { transition: none !important; animation: none !important; } }