/* Hallmark · component: speech controls + type scale · macrostructure: Split Studio (preserved)
 * genre: playful-soft · theme: Quiet/teal · contrast: pass (46–50)
 * nav: N9 edge-aligned-minimal · footer: Ft2 inline-single-line
 * states: default · hover · focus · active · disabled · loading · error · success
 * tone: friendly teaching tool · anchor hue: 170 (brand teal)
 * pre-emit critique: P4 H5 E5 S5 R5 V4
 */

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: clip; font-size: 16px; }
body {
  overflow-x: clip;
  font-family: var(--font-ui);
  font-weight: 400;
  background: var(--color-paper);
  color: var(--color-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  gap: var(--space-lg);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}
.wordmark-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.wordmark-title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  white-space: nowrap;
}
.header-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Workspace ───────────────────────────────────────────────────── */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1px 3fr;
  min-height: 0;
}
.workspace-divider {
  background: var(--color-rule);
  width: 1px;
}

/* ── Panel ───────────────────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel__head {
  padding: var(--space-sm) var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-shrink: 0;
}
.panel__title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.panel__body {
  padding: var(--space-lg) var(--space-xl);
  flex: 1;
  overflow-y: auto;
}

/* ── Samples strip ───────────────────────────────────────────────── */
.samples {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.samples-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sample {
  background: none;
  border: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    background var(--dur-short) var(--ease-out);
}
.btn-sample:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: oklch(54% 0.096 170 / 0.05);
}
.btn-sample:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Textarea ────────────────────────────────────────────────────── */
textarea {
  width: 100%;
  min-height: 220px;
  font-family: var(--font-content);
  font-size: var(--text-base);
  line-height: 1.7;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  resize: vertical;
  transition: border-color var(--dur-short) var(--ease-out);
  -webkit-font-smoothing: antialiased;
}
textarea::placeholder { color: var(--color-muted); }
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-paper);
}

/* ── Char counter ────────────────────────────────────────────────── */
.char-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: right;
  margin-top: var(--space-2xs);
  padding-right: var(--space-2xs);
}
.char-count.near { color: oklch(64% 0.14 65); }
.char-count.over { color: oklch(50% 0.16 25); font-weight: 600; }

/* ── Annotate button ─────────────────────────────────────────────── */
.btn-annotate {
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: 48px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  transition:
    background var(--dur-short) var(--ease-out),
    transform   100ms var(--ease-out),
    opacity     var(--dur-short) var(--ease-out);
}
.btn-annotate:hover  { background: var(--color-accent-dim); }
.btn-annotate:active { transform: translateY(1px); }
.btn-annotate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn-annotate:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid oklch(54% 0.096 170 / 0.3);
  border-top-color: var(--color-accent-ink);
  border-radius: 50%;
  display: none;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}
.btn-annotate.loading .spinner { display: block; }
.btn-annotate.loading .btn-text::after { content: "…"; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error message ───────────────────────────────────────────────── */
.error-msg {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-rule);
  color: var(--color-error-ink);
  font-size: var(--text-sm);
  display: none;
  line-height: 1.5;
}
.error-msg.show { display: block; }

/* ── Result panel toolbar ────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.btn-icon {
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.btn-icon:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.btn-icon:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Speech playback controls ───────────────────────────────────── */
.speech-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.speech-toolbar[data-state="playing"],
.speech-toolbar[data-state="paused"],
.speech-toolbar[data-state="success"] {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}
.speech-toolbar[data-state="error"] {
  border-color: var(--color-error-rule);
  background: var(--color-error-bg);
  color: var(--color-error-ink);
}
.speech-toolbar__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}
.speech-toolbar__status strong {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.speech-toolbar__status span {
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.speech-toolbar[data-state="error"] .speech-toolbar__status span {
  color: var(--color-error-ink);
}
.speech-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.speech-button {
  min-width: 64px;
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.speech-button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
@media (hover: hover) and (pointer: fine) {
  .speech-button:not(:disabled):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
  }
  .speech-button--primary:not(:disabled):hover {
    border-color: var(--color-accent-dim);
    background: var(--color-accent-dim);
    color: var(--color-accent-ink);
  }
}
.speech-button:active { transform: translateY(1px); }
.speech-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.speech-button--primary:focus-visible { outline-color: var(--color-ink); }
.speech-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.speech-toolbar[data-state="loading"] .speech-button--primary { opacity: 0.55; }
.speech-toolbar[data-state="error"] .speech-button { border-color: var(--color-error-rule); }
.speech-toolbar[data-state="success"] .speech-button--primary { border-color: var(--color-accent); }

/* ── Legend ──────────────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-md);
}
.legend-hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  margin-top: calc(-1 * var(--space-xs));
  line-height: 1.5;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--dur-short) var(--ease-out),
    background   var(--dur-short) var(--ease-out),
    opacity      var(--dur-short) var(--ease-out);
}
.legend-item:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.legend-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.legend-item.off { opacity: 0.35; }

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Result text ─────────────────────────────────────────────────── */
#result-text {
  font-family: var(--font-content);
  font-size: var(--text-md);
  line-height: 2.7;
  letter-spacing: 0.02em;
  min-height: 120px;
  overflow: visible;
  transition: opacity var(--dur-mid) var(--ease-out);
}
#result-text.loading-fade { opacity: 0.25; }

.placeholder {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding: var(--space-2xl) 0;
  text-align: center;
  line-height: 1.7;
}

/* ── Annotation styles ───────────────────────────────────────────── */
/* Pause markers */
b.p1, b.p2 {
  font-weight: 400;
  font-style: normal;
  color: var(--color-muted);
  font-size: 0.875em;
  padding: 0 1px;
}
b.p2 { color: var(--color-ink-2); }

/* Emotional word */
span.emo {
  background: oklch(88% 0.10 80 / 0.35);
  border-radius: 3px;
  padding: 0 2px;
  cursor: help;
  position: relative;
}

/* Emotional peak */
span.peak {
  color: oklch(48% 0.17 25);
  font-weight: 700;
  cursor: help;
  position: relative;
}

/* Polyphonic character */
span.poly {
  border-bottom: 2px solid oklch(64% 0.14 65);
  cursor: help;
  position: relative;
}

/* Light tone */
span.lite {
  border-bottom: 2px dotted oklch(56% 0.14 160);
  cursor: help;
  position: relative;
}

/* Error-prone character */
span.warn {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: oklch(50% 0.18 25);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: help;
  position: relative;
}

.legend-swatch--warn {
  width: auto;
  min-width: 14px;
  height: auto;
  color: oklch(50% 0.18 25);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ── CSS Tooltip ─────────────────────────────────────────────────── */
span[title]:hover::after, b[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  white-space: nowrap;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: 0 2px 8px oklch(16% 0.01 170 / 0.18);
}

/* ── Toggle visibility ───────────────────────────────────────────── */
#result-text.hide-pause b.p1,
#result-text.hide-pause b.p2 { display: none; }
#result-text.hide-emo   span.emo  { background: none; }
#result-text.hide-peak  span.peak { color: inherit; font-weight: inherit; }
#result-text.hide-poly  span.poly { border-bottom: none; }
#result-text.hide-lite  span.lite { border-bottom: none; }
#result-text.hide-warn  span.warn { text-decoration: none; }

/* ── Manual annotation floating toolbar ─────────────────────────── */
.anno-toolbar {
  position: absolute;
  z-index: var(--z-tooltip);
  background: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-xs);
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  box-shadow: 0 4px 16px oklch(16% 0.01 170 / 0.25);
}
.anno-label {
  font-size: var(--text-xs);
  color: oklch(70% 0.004 170);
  padding-right: var(--space-2xs);
  white-space: nowrap;
  flex-shrink: 0;
}
.anno-toolbar button {
  background: oklch(26% 0.008 170);
  border: none;
  border-radius: var(--radius-sm);
  color: oklch(90% 0.004 170);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: 3px var(--space-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out);
}
.anno-toolbar button:hover { background: oklch(34% 0.010 170); }
.anno-toolbar button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.anno-toolbar button[data-cls="emo"]  { border-bottom: 2px solid oklch(64% 0.14 65); }
.anno-toolbar button[data-cls="peak"] { color: oklch(78% 0.10 25); }
.anno-toolbar button[data-cls="poly"] { border-bottom: 2px solid oklch(64% 0.14 65); }
.anno-toolbar button[data-cls="lite"] { border-bottom: 2px dotted oklch(56% 0.14 160); }
.anno-toolbar button[data-cls="warn"] { border-bottom: 2px solid oklch(65% 0.14 25); }
#anno-remove { color: oklch(72% 0.12 25) !important; }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-sm) var(--space-xl);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.footer-logo {
  height: 20px;
  width: auto;
  opacity: 0.5;
  flex-shrink: 0;
}
.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
.footer-copy a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-copy a:hover { color: var(--color-ink-2); }

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .site-header, .panel--input, .anno-toolbar, .site-footer,
  .legend, .legend-hint, .toolbar, .btn-icon { display: none !important; }

  .workspace {
    display: block;
  }
  .panel--result .panel__head { background: none; border: none; }
  .panel--result .panel__body { padding: 0; }

  #result-text {
    font-size: 14pt;
    line-height: 2.6;
  }

  span.emo  { background: #fef3c7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  span.peak { color: #c0392b !important; font-weight: 700 !important; }
  span.poly { border-bottom: 2px solid #e67e22 !important; }
  span.lite { border-bottom: 2px dotted #27ae60 !important; }
  span.warn {
    text-decoration: underline wavy #c0392b 1.5px !important;
    text-underline-offset: 4px !important;
  }
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* 768 px — tablet: stack panels */
@media (max-width: 768px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .workspace-divider {
    width: 100%;
    height: 1px;
  }
  .header-badge { display: none; }
  .header-inner { padding: var(--space-sm) var(--space-lg); }
  .panel__head  { padding: var(--space-sm) var(--space-lg); }
  .panel__body  { padding: var(--space-md) var(--space-lg); }
  .site-footer  { padding: var(--space-sm) var(--space-lg); }
  .speech-toolbar { align-items: flex-start; }
}

/* 414 px — mobile: tighten further */
@media (max-width: 414px) {
  .wordmark-title { font-size: var(--text-sm); }
  .header-inner { padding: var(--space-sm) var(--space-md); }
  .panel__head  { padding: var(--space-xs) var(--space-md); }
  .panel__body  { padding: var(--space-md); }
  .site-footer  { padding: var(--space-sm) var(--space-md); }
  .samples { gap: var(--space-3xs); }
  textarea { min-height: 160px; font-size: var(--text-base); }
  #result-text { font-size: var(--text-base); line-height: 2.6; }
  .speech-toolbar { flex-direction: column; }
  .speech-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speech-button { width: 100%; }

  /* footer stacks */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}

/* 320 px — smallest phones */
@media (max-width: 375px) {
  .wordmark-title { font-size: var(--text-sm); letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
  .panel__head { align-items: flex-start; flex-direction: column; }
  .panel__title { white-space: nowrap; }
  .samples { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}