/* The panel, the onboarding, billing and the account page.

   Same two faces as the public site and the same tokens. What this file adds
   is a 4px grid, two control heights (36 and 30), two radii (8 and 12) and
   one moment of motion: the rhythm strip growing in when a measurement lands.
   Everything else holds still. */

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --ink-soft: color-mix(in srgb, var(--ink) 78%, var(--bg));
  --ok: var(--low);
  --warn: var(--med);
  --scrim: rgba(24, 20, 14, 0.62);
  --shadow-1: 0 1px 2px rgba(20, 16, 10, 0.06), 0 4px 14px rgba(20, 16, 10, 0.06);
  --shadow-2: 0 2px 6px rgba(20, 16, 10, 0.08), 0 16px 40px rgba(20, 16, 10, 0.14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* --- primitives --------------------------------------------------------- */

/* The hidden attribute wins over every display rule below. Without this a
   `.field { display: block }` quietly un-hides a field that JS hid. */
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; row-gap: 10px; }
.eyebrow {
  font: 500 12px/1 var(--sans);
    color: var(--accent);
  margin-bottom: 8px;
}
.hint { font: 14px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }
.lede { font: 15px/1.55 var(--sans); color: var(--muted); margin: 0 0 24px; }
.note { font: 13px/1.5 var(--sans); color: var(--warn); margin: 10px 0 0; }
.empty-line { color: var(--muted); font-size: 14px; }

/* Buttons: two heights, four looks. The spinner replaces the label in place
   so the button never changes width while it waits. */
button, .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
              opacity 140ms ease, transform 140ms var(--ease);
}
button.small, .button.small { height: 30px; padding: 0 13px; font-size: 13px; }
button.wide, .button.wide { width: 100%; }
button.primary, .button.primary { background: var(--beige); color: var(--ink); }
button.primary:hover:not(:disabled) { background: var(--beige-deep); }
button.ghost, .button.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
button.ghost:hover:not(:disabled) { border-color: var(--accent-line); }
button.ghost.danger { color: var(--high); }
button.ghost.danger:hover:not(:disabled) { border-color: var(--high); }
button.link {
  height: auto; padding: 0; border: 0; background: none;
  color: var(--accent); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--accent-line); text-underline-offset: 3px;
}
button:disabled { opacity: 0.45; cursor: default; }
button:active:not(:disabled) { transform: translateY(1px); }
button .spinner { display: none; }
button.is-busy .label { visibility: hidden; }
button.is-busy .spinner {
  display: block;
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fields */
.field { display: block; margin: 0 0 16px; }
.field > span {
  display: block;
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  margin-bottom: 7px;
}
.field > span em { font-style: normal; font-weight: 400; }
.field input[type=text], .field input[type=email], .field input[type=password],
textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 14px/1.4 var(--sans);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
textarea { height: auto; min-height: 96px; padding: 11px 12px; font-size: 15px; line-height: 1.55; resize: vertical; }
.field input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field small { display: block; font: 12px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }
.form-error { font: 13px/1.5 var(--sans); color: var(--high); margin: 0 0 12px; }
.form-error.inline { margin: 0; }
.form-error.ok { color: var(--ok); }
label.check { font: 14px/1 var(--sans); color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
label.check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.banner {
  font: 14px/1.5 var(--sans);
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--code);
  color: var(--ink);
  margin: 0 0 24px;
}
.banner.ok { border-left: 3px solid var(--ok); }
.banner.warn { border-left: 3px solid var(--warn); }

/* Kind cards: the one picture of what a tone is. */
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
.kind-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
  height: auto;
  padding: 16px 16px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  white-space: normal;
  transition: border-color 140ms ease, box-shadow 160ms ease, transform 160ms var(--ease),
              background 140ms ease;
}
.kind-card .kind-glyph { grid-row: 1 / span 2; color: var(--accent); margin-top: 1px; }
.kind-card b { font: 600 14px/1.3 var(--sans); }
.kind-card span { font: 13px/1.45 var(--sans); color: var(--muted); }
.kind-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.kind-card[aria-checked=true] { border-color: var(--accent); background: var(--accent-soft); }
.kind-glyph { fill: currentColor; flex: 0 0 auto; }

/* Chips and segmented controls */
.chip {
  height: 30px; padding: 0 12px 0 10px; gap: 7px;
  background: var(--panel); color: var(--muted); border-color: var(--line); font-size: 13px;
}
.chip .kind-glyph { color: var(--muted); }
.chip:hover:not(:disabled) { color: var(--ink); border-color: var(--accent-line); }
.chip[aria-checked=true], .chip.is-on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.chip[aria-checked=true] .kind-glyph { color: var(--accent); }
.kind-picker, .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  margin: 4px 0 16px;
}
.segmented button {
  height: 30px; padding: 0 14px; border: 0; background: none; color: var(--muted); font-size: 13px;
}
.segmented button:focus-visible { outline-offset: -3px; }
.segmented button[aria-selected=true] { background: var(--beige); color: var(--ink); }

/* Rhythm strip host */
.strip-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin: 0 0 16px;
}
.strip-box.tall .strip { height: 56px; }
.strip-host { min-height: 34px; }
.strip-host .strip { height: 34px; margin: 6px 0 0; }
.strip-host:empty::after {
  content: "Nothing measured yet";
  display: block;
  font: 12px/34px var(--sans);
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .strip.grow rect { transform-origin: 50% 100%; animation: grow 520ms var(--ease) both; }
  .strip.grow rect:nth-child(2n) { animation-delay: 40ms; }
  .strip.grow rect:nth-child(3n) { animation-delay: 80ms; }
  .strip.grow rect:nth-child(5n) { animation-delay: 120ms; }
  @keyframes grow { from { transform: scaleY(0.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
}

/* Dials: one variable per row, value on the right in the mono face. */
.dials { display: grid; gap: 14px; margin: 0 0 18px; }
.dial {
  display: grid;
  grid-template-columns: 168px 1fr 92px;
  column-gap: 16px;
  align-items: center;
}
.dial .dial-label { font: 500 13px/1.3 var(--sans); color: var(--ink); }
.dial .dial-help { font: 12px/1.4 var(--sans); color: var(--muted); margin-top: 3px; }
.dial .dial-value { text-align: right; font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dial .dial-value small { display: block; font: 10px/1.4 var(--sans); color: var(--muted); letter-spacing: 0.02em; }
.dials.compact .dial { grid-template-columns: 132px 1fr 84px; }
.dials.compact .dial-help { display: none; }

/* The dials are measurements with names only a linguist knows. Where the
   explanation does not fit beside the label, it waits behind an i. */
.dial .dial-label { display: inline-flex; align-items: center; gap: 6px; }
.dial-i {
  position: relative; display: none; place-items: center;
  width: 15px; height: 15px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 50%; background: none;
  color: var(--muted); font: 500 10px/1 var(--sans); cursor: help;
}
.dials.compact .dial-i { display: inline-grid; }
.dial-i:hover, .dial-i:focus-visible { border-color: var(--accent); color: var(--accent); }
.dial-i .tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20;
  width: max-content; max-width: 250px; padding: 8px 10px;
  transform: translateX(-50%);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); box-shadow: var(--shadow-2);
  color: var(--ink); font: 12px/1.45 var(--sans); text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 120ms ease;
}
.dial-i:hover .tip, .dial-i:focus-visible .tip { opacity: 1; visibility: visible; }
.dial:first-child .dial-i .tip { bottom: auto; top: calc(100% + 8px); }
.dial-group { font: 500 11px/1 var(--sans); color: var(--muted); margin: 6px 0 -4px; }
.dials.compact .dial-group { display: none; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; background: none; cursor: pointer;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--line); }
input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 120ms var(--ease), box-shadow 120ms ease;
}
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent);
}
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15); box-shadow: 0 0 0 4px var(--accent-soft);
}
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 500 13px/1 var(--sans);
  box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity 180ms ease, transform 220ms var(--ease);
  z-index: 60; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- auth -------------------------------------------------------------- */

.auth { max-width: 400px; margin: 64px auto 0; padding: 0 20px; }
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-1);
}
.auth-card h1 { font: 600 24px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 8px; }
.auth-sub { font: 14px/1.5 var(--sans); color: var(--muted); margin: 0 0 24px; }
.auth-switch { font: 13px/1.5 var(--sans); color: var(--muted); text-align: center; margin: 18px 0 0; }
.google, .button.google {
  height: 44px; gap: 12px;
  background: var(--panel); color: var(--ink); border-color: var(--line);
  font-weight: 500; font-size: 15px;
}
.google:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.auth-card .form-error { text-align: center; margin: 12px 0 0; }

/* --- onboarding -------------------------------------------------------- */

.onboard { max-width: 600px; margin: 40px auto 0; padding: 0 20px; }
.progress {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 28px;
  counter-reset: step;
}
.progress li { flex: 1; position: relative; padding-top: 12px; }
.progress li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px;
  background: var(--line); transition: background 300ms ease;
}
.progress li span { font: 500 11px/1 var(--sans); color: var(--muted); }
.progress li.is-done::before, .progress li.is-current::before { background: var(--accent); }
.progress li.is-current span { color: var(--ink); }

.steps { position: relative; }
.step-card {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 32px 26px;
  box-shadow: var(--shadow-1);
}
.step-card.is-active { display: block; }
.step-card h1 { font: 600 26px/1.15 var(--sans); letter-spacing: -0.022em; margin: 0 0 10px; }
.step-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.step-actions .ghost { margin-right: auto; }
.step-actions .ghost:only-child { margin-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .step-card.is-entering { animation: stepIn 280ms var(--ease) both; }
  .step-card.is-leaving  { animation: stepOut 170ms ease both; }
  .step-card.is-entering.back { animation-name: stepInBack; }
  .step-card.is-leaving.back  { animation-name: stepOutBack; }
  @keyframes stepIn      { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes stepOut     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-20px); } }
  @keyframes stepInBack  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  @keyframes stepOutBack { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(20px); } }
}
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 8px; }
.facts div { background: var(--code); border-radius: 10px; padding: 12px 14px; }
.facts dt { font: 11px/1 var(--sans); color: var(--muted); margin-bottom: 8px; }
.facts dd { margin: 0; font: 600 19px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-explainer { display: grid; gap: 10px; margin: 0 0 6px; }
.ce-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--code); }
.ce-row b { font: 600 24px/1 var(--mono); text-align: center; color: var(--accent); }
.ce-row span { font: 14px/1.45 var(--sans); }
.count { font-variant-numeric: tabular-nums; }

/* --- panel shell ------------------------------------------------------- */

.panel-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  min-height: calc(100vh - 66px);
  border-top: 1px solid var(--line);
}
.side {
  border-right: 1px solid var(--line);
  padding: 24px 20px 20px 32px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: start; max-height: 100vh;
}
.side-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.side-head h1 { font: 600 20px/1 var(--sans); letter-spacing: -0.02em; margin: 0; }
.tone-nav { flex: 1; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.tone-nav .group-label {
  font: 500 11px/1 var(--sans); color: var(--muted); margin: 16px 8px 8px;
}
.tone-nav .group-label:first-child { margin-top: 0; }
.tone-item {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
  width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: 14px/1 var(--sans); text-align: left;
  justify-content: start;
}
.tone-item .kind-glyph { color: var(--muted); }
.tone-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tone-item:hover { background: var(--code); }
.tone-item.is-active { background: var(--accent-soft); color: var(--ink); }
.tone-item.is-active .kind-glyph { color: var(--accent); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--accent); background: transparent; flex: 0 0 auto;
}
.status-dot.is-measured { background: var(--accent); }
.status-dot.is-thin { border-color: var(--warn); }
.side-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.side-foot a { color: var(--accent); text-decoration: none; }
.side-foot a:hover { text-decoration: underline; }
.tone-nav .nav-empty { font: 13px/1.5 var(--sans); color: var(--muted); padding: 4px 10px; }

.main { padding: 32px 40px 64px; min-width: 0; }
.view { display: none; max-width: 820px; }
.view.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .view.is-active { animation: viewIn 220ms var(--ease) both; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.view-head { margin: 0 0 22px; }
.view-head h2 { font: 600 26px/1.15 var(--sans); letter-spacing: -0.022em; margin: 0; min-width: 0; }
.view-head h2[contenteditable]:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; }
.view-head h2[contenteditable]:focus { outline: none; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.view-head .hint { margin: 6px 0 0; }
.empty h2 { font: 600 26px/1.15 var(--sans); letter-spacing: -0.022em; margin: 8px 0 10px; }

.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.tabs button {
  height: 40px; padding: 0 2px; border: 0; border-radius: 0; background: none;
  color: var(--muted); font: 500 14px/1 var(--sans);
  position: relative;
}
.tabs button .n { font: 500 11px/1 var(--mono); color: var(--muted); background: var(--code); padding: 3px 6px; border-radius: 999px; margin-left: 4px; }
.tabs button:focus-visible { outline-offset: -4px; border-radius: 6px; }
.tabs button[aria-selected=true] { color: var(--ink); }
.tabs button[aria-selected=true]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 1px;
}
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

.writing-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.writing {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.writing p {
  margin: 0; font: 14px/1.5 var(--sans); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.writing.open p { display: block; white-space: pre-wrap; }
.writing .meta { font: 12px/1 var(--mono); color: var(--muted); margin-top: 8px; }
.writing .tools { display: flex; gap: 4px; }
.icon-btn {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 0; background: none; color: var(--muted);
}
.icon-btn:hover { background: var(--code); color: var(--ink); }
.icon-btn.danger:hover { color: var(--high); }
.add-writing textarea { margin-bottom: 10px; }
.spec { margin-top: 16px; }
.spec[open] > summary { margin-bottom: 16px; }
.spec pre { font-size: 12px; }
.quote-line { font: 13px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.quote-line.short { color: var(--high); }
.quote-line b { font-family: var(--mono); color: var(--ink); }
.quote-line.short b { color: var(--high); }
.history { margin-top: 24px; }
.history ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.history li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: 13px/1.5 var(--sans); }
.history li .snip { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li .meta { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.results { margin-top: 20px; }
.create-form textarea { margin-bottom: 10px; }
/* Name and note sit side by side where there is room: two short questions
   before the one that takes work. */
.create-form .lang-picker { margin: 14px 0 4px; }
.create-form .hint { margin: 0 0 10px; }

/* One box per piece. A voice is measured from several things a person wrote,
   and they are separate things, so they are separate boxes. */
.pieces { display: grid; gap: 10px; }
.piece { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.piece-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--sans); color: var(--muted);
}
.piece-head .piece-w { margin-left: auto; font-size: 11.5px; }
.piece-drop { width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.piece-drop:hover { background: var(--code); color: var(--ink); }
.piece textarea {
  display: block; width: 100%; margin: 0; border: 0; border-radius: 0;
  background: none; resize: vertical; min-height: 96px;
}
.piece textarea:focus { outline: none; box-shadow: none; }
.piece:focus-within { border-color: var(--accent-line); }
.pieces-acts { margin-top: 10px; }

/* A writer's voice is saved by picking one, so the form's own fields have
   nothing to say while the gallery is open. */
.create-form.is-gallery > .field,
.create-form.is-gallery > .lang-picker,
.create-form.is-gallery #create-save { display: none; }
.create-form.is-gallery .voice-filter { margin-top: 18px; }

/* --- tour -------------------------------------------------------------- */

.tour-block { position: fixed; z-index: 50; background: transparent; }
.tour-hole {
  position: fixed; z-index: 51; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 2px var(--accent);
  transition: top 320ms var(--ease), left 320ms var(--ease), width 320ms var(--ease), height 320ms var(--ease);
}
.tour-hole.click::after {
  content: ""; position: absolute; inset: -6px; border-radius: 14px;
  border: 2px solid var(--accent); opacity: .7;
  animation: pulse 1400ms ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.98); opacity: .8; } 100% { transform: scale(1.06); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-hole.click::after { animation: none; } .tour-hole { transition: none; } }
.tour-tip {
  position: fixed; z-index: 52; width: 300px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px;
  box-shadow: var(--shadow-2);
  transition: top 320ms var(--ease), left 320ms var(--ease), opacity 200ms ease;
}
.tour-tip .eyebrow { margin-bottom: 6px; }
.tour-tip h3 { font: 600 15px/1.3 var(--sans); margin: 0 0 6px; }
.tour-tip p { font: 13px/1.5 var(--sans); color: var(--muted); margin: 0 0 14px; }
.tour-tip .row { justify-content: space-between; }
.tour-tip .counter { font: 12px/1 var(--mono); color: var(--muted); }
.tour-tip .cue { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--sans); color: var(--accent); }
.tour-tip .cue::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* --- billing ----------------------------------------------------------- */

.billing, .account { max-width: 820px; margin: 36px auto 0; padding: 0 32px; }
.balance-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 0 0 28px; }
.balance { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.balance b { font: 600 48px/1 var(--mono); letter-spacing: -0.02em; }
.balance span { font: 15px/1 var(--sans); color: var(--muted); }
.billing h2 { font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; margin: 32px 0 12px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-grid.three { grid-template-columns: repeat(3, 1fr); }
.plan-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px;
}
.plan-card > b { font: 600 15px/1.3 var(--sans); }
.plan-card .price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; }
.plan-card .price span { font: 600 26px/1 var(--mono); letter-spacing: -0.01em; }
.plan-card .price small { font: 13px/1 var(--sans); color: var(--muted); }
.plan-card .credits-line { font: 14px/1.4 var(--sans); }
.plan-card .hint { margin: 0 0 10px; flex: 1; }
.plan-card.current { border-color: var(--accent); background: var(--accent-soft); }
.plan-card button { align-self: flex-start; }
.ledger { width: 100%; border-collapse: collapse; font: 14px/1.5 var(--sans); }
.ledger th, .ledger td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger th { font: 500 11px/1 var(--sans); color: var(--muted); }
.ledger .num { text-align: right; }
.ledger .plus { color: var(--ok); }
.ledger .minus { color: var(--muted); }

/* --- account ----------------------------------------------------------- */

.account .view-head { margin-bottom: 20px; }
.card-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px 18px; margin: 0 0 14px; max-width: 560px;
}
.card-form h3 { font: 600 15px/1.3 var(--sans); margin: 0 0 12px; }
.card-form .field:last-of-type { margin-bottom: 14px; }

/* --- narrow ------------------------------------------------------------ */

@media (max-width: 900px) {
  .panel-shell { grid-template-columns: 1fr; border-top: 0; }
  .side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 20px; }
  .tone-nav { max-height: 220px; }
  .main { padding: 24px 20px 56px; }
  .dial, .dials.compact .dial { grid-template-columns: 1fr 80px; row-gap: 6px; }
  .dial input[type=range] { grid-column: 1 / -1; }
  .plan-grid, .plan-grid.three { grid-template-columns: 1fr; }
  .billing, .account { padding: 0 20px; }
  .balance-head { flex-direction: column; }
}
@media (max-width: 560px) {
  .kind-grid { grid-template-columns: 1fr; }
  .step-card { padding: 24px 20px 20px; }
  .facts { grid-template-columns: 1fr; }
  .tour-tip { width: calc(100vw - 32px); }
  .auth-card { padding: 24px 20px 18px; }
}


/* --- connect page ------------------------------------------------------- */
.snippet { margin-top: 14px; }
.snippet pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-all; }
.tokens { width: 100%; border-collapse: collapse; font-size: 13px; }
.tokens th, .tokens td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tokens th { color: var(--muted); font-weight: 600; }

/* Start from a voice: the gallery in the panel. Portraits and specs reuse the
   demo's data; the card idiom follows .kind-card so it sits in the panel. */
.empty-or {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 16px; color: var(--muted); font-size: 13px;
}
.empty-or::before, .empty-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.home-head-actions { display: inline-flex; gap: 8px; }

.voice-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.voice-chip {
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  font: 500 13px/1 var(--sans); cursor: pointer;
}
.voice-chip:hover { color: var(--ink); border-color: var(--accent-line); }
.voice-chip[aria-selected=true] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }

/* A voice is a shape, so the card shows the shape. The strip is that writer's
   own sentences, one bar each, width for length and ink for depth, measured
   from the pages named underneath it. Picking on portrait and adjective alone
   was picking blind. */
.voice-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.voice-pick-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  text-align: left; height: auto; padding: 16px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); white-space: normal; cursor: pointer;
  transition: border-color 140ms ease, box-shadow 160ms ease, transform 160ms var(--ease);
}
.voice-pick-card[hidden] { display: none !important; }
.voice-pick-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.voice-pick-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vpc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voice-pick-card .portrait {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  background: var(--accent-soft); filter: grayscale(0.3);
  transition: filter 160ms ease;
}
.voice-pick-card:hover .portrait { filter: none; }
.vpc-id { display: grid; gap: 1px; min-width: 0; }
.vpc-id b { font: 600 14.5px/1.25 var(--sans); }
.vpc-id small { font: 12px/1.3 var(--sans); color: var(--muted); }

/* The strip sits on its own line at the card's full width, so two cards can be
   compared down a column the way the numbers behind them would be. */
.vpc-strip { display: block; }
.vpc-strip .strip { height: 26px; }

.vpc-blurb {
  font: 13px/1.45 var(--sans); color: var(--muted); margin: 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vpc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 2px;
}
/* The provenance wraps rather than truncating: a book title cut to `On the
   Origin of Spe...` tells the reader less than the second line costs. */
.vpc-src {
  font: 11.5px/1.35 var(--sans); color: var(--muted); min-width: 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.voice-pick-go {
  flex: 0 0 auto; font: 500 12px/1 var(--sans); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: 7px 13px;
  transition: background 140ms ease, color 140ms ease;
}
.voice-pick-card:hover .voice-pick-go { background: var(--accent); color: var(--panel); border-color: var(--accent); }
.voice-pick-card.is-busy { opacity: 0.6; pointer-events: none; }
.voice-pick-card.is-busy .voice-pick-go { color: var(--muted); background: none; border-color: var(--line); }

@media (max-width: 640px) {
  .voice-pick-grid { grid-template-columns: 1fr; }
}
}