/* =========================================================================
   Steady Chapter — Components
   Calm, paper-warm, generous. All sized for unhurried reading.
   ========================================================================= */

/* =========================
   BUTTONS
   ========================= */
.sc-btn {
  --_bg: var(--accent);
  --_fg: var(--text-on-accent);
  --_bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  user-select: none;
}
.sc-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sc-btn:active { background: var(--accent-press); border-color: var(--accent-press); transform: translateY(1px); }
.sc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sc-btn--secondary {
  --_bg: transparent;
  --_fg: var(--text-primary);
  --_bd: var(--border-default);
}
.sc-btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.sc-btn--secondary:active { background: var(--paper-300); }

.sc-btn--ghost {
  --_bg: transparent;
  --_fg: var(--text-secondary);
  --_bd: transparent;
}
.sc-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: transparent; }
.sc-btn--ghost:active { background: var(--paper-300); }

.sc-btn--quiet {
  --_bg: transparent;
  --_fg: var(--accent);
  --_bd: transparent;
  padding: 8px 12px;
}
.sc-btn--quiet:hover { background: var(--accent-soft-bg); border-color: transparent; }

.sc-btn--danger {
  --_bg: var(--signal-stop-fg);
  --_fg: #FBF8F2;
  --_bd: var(--signal-stop-fg);
}
.sc-btn--danger:hover { filter: brightness(0.92); }

.sc-btn--lg { font-size: var(--fs-16); padding: 14px 24px; }
.sc-btn--sm { font-size: var(--fs-14); padding: 8px 14px; border-radius: var(--r-sm); }

.sc-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* =========================
   INPUTS
   ========================= */
.sc-field { display: flex; flex-direction: column; gap: 6px; }

.sc-label {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-primary);
}

.sc-hint {
  font-size: var(--fs-13);
  color: var(--text-tertiary);
  line-height: var(--lh-snug);
}

.sc-input,
.sc-textarea,
.sc-select {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 11px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.sc-input:hover,
.sc-textarea:hover,
.sc-select:hover { border-color: var(--border-strong); }

.sc-input:focus,
.sc-textarea:focus,
.sc-select:focus,
.sc-input:focus-visible,
.sc-textarea:focus-visible,
.sc-select:focus-visible { outline: none; box-shadow: none; }

.sc-input::placeholder,
.sc-textarea::placeholder { color: var(--text-muted); }

.sc-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-relaxed); }

.sc-textarea--editorial {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  background: var(--bg-page);
  border-color: var(--paper-200);
}

/* Search input variant */
.sc-search {
  position: relative;
  display: flex;
  align-items: center;
}
.sc-search .sc-input { padding-left: 40px; }
.sc-search svg {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* Checkbox + radio (custom) */
.sc-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-15);
  color: var(--text-primary);
}
.sc-check input { position: absolute; opacity: 0; pointer-events: none; }
.sc-check .box {
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-raised);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.sc-check .box svg { opacity: 0; color: var(--text-on-accent); }
.sc-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.sc-check input:checked + .box svg { opacity: 1; }
.sc-check input:focus-visible + .box { box-shadow: var(--shadow-focus); }

/* Toggle */
.sc-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.sc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sc-toggle .track {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--paper-300);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.sc-toggle .thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}
.sc-toggle input:checked + .track { background: var(--accent); }
.sc-toggle input:checked + .track .thumb { transform: translateX(16px); }

/* =========================
   CARDS
   ========================= */
.sc-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sc-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); }

.sc-card--quiet { background: var(--bg-surface); border-color: transparent; }
.sc-card--paper { background: var(--paper-100); border: 1px solid var(--paper-200); }

.sc-card-eyebrow {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}

.sc-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--text-display);
  margin: 0 0 var(--sp-2);
}

.sc-card-body {
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: 0;
}

/* =========================
   BADGES / TAGS
   ========================= */
.sc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  line-height: 1.4;
}

.sc-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.sc-tag--accent { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: var(--euc-100); }
.sc-tag--care   { background: var(--signal-care-bg); color: var(--signal-care-fg); border-color: var(--signal-care-line); }
.sc-tag--warn   { background: var(--signal-warn-bg); color: var(--signal-warn-fg); border-color: var(--signal-warn-line); }
.sc-tag--stop   { background: var(--signal-stop-bg); color: var(--signal-stop-fg); border-color: var(--signal-stop-line); }
.sc-tag--ok     { background: var(--signal-ok-bg);   color: var(--signal-ok-fg);   border-color: var(--signal-ok-line); }

/* =========================
   ALERTS / CALLOUTS
   ========================= */
.sc-alert {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.sc-alert .icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-secondary);
}
.sc-alert-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.sc-alert-body {
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: 0;
}

.sc-alert--care { background: var(--signal-care-bg); border-color: var(--signal-care-line); }
.sc-alert--care .icon, .sc-alert--care .sc-alert-title { color: var(--signal-care-fg); }

.sc-alert--warn { background: var(--signal-warn-bg); border-color: var(--signal-warn-line); }
.sc-alert--warn .icon, .sc-alert--warn .sc-alert-title { color: var(--signal-warn-fg); }

.sc-alert--ok { background: var(--signal-ok-bg); border-color: var(--signal-ok-line); }
.sc-alert--ok .icon, .sc-alert--ok .sc-alert-title { color: var(--signal-ok-fg); }

/* =========================
   SAFETY FOOTER (always-on, quiet)
   ========================= */
.sc-safety {
  background: var(--paper-100);
  border-top: 1px solid var(--border-subtle);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.sc-safety strong { color: var(--text-primary); font-weight: 600; }
.sc-safety a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--euc-200);
}
.sc-safety a:hover { border-bottom-color: var(--accent); }

/* =========================
   DOMAIN: Letter analysis card
   ========================= */
.sc-letter {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sc-letter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper-100);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-13);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.sc-letter-body {
  padding: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.sc-letter-body p { margin: 0 0 var(--sp-3); }

.sc-letter-body mark {
  background: rgba(217, 181, 164, 0.35);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
  border-bottom: 1px dashed var(--signal-care-line);
}

.sc-letter-body mark.warn  { background: rgba(221, 199, 138, 0.4); border-bottom-color: var(--signal-warn-line); }
.sc-letter-body mark.stop  { background: rgba(212, 162, 147, 0.4); border-bottom-color: var(--signal-stop-line); }

/* Margin annotation */
.sc-annotation {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper-100);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.sc-annotation .ribbon {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.sc-annotation.care .ribbon { background: var(--signal-care-fg); }
.sc-annotation.warn .ribbon { background: var(--signal-warn-fg); }
.sc-annotation strong { color: var(--text-primary); font-weight: 600; }

/* =========================
   DOMAIN: Cooling-off timer
   ========================= */
.sc-cooling {
  background: var(--paper-100);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}

.sc-cooling-dial {
  width: 84px; height: 84px;
  position: relative;
  flex-shrink: 0;
}
.sc-cooling-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-cooling-dial circle.track { fill: none; stroke: var(--paper-300); stroke-width: 4; }
.sc-cooling-dial circle.fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-deliberate) var(--ease-out);
}
.sc-cooling-dial .num {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  color: var(--text-display);
  letter-spacing: -0.02em;
}

.sc-cooling-text { flex: 1; min-width: 0; }
.sc-cooling-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-18);
  color: var(--text-display);
  margin: 0 0 4px;
}
.sc-cooling-sub {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* =========================
   DOMAIN: Version history
   ========================= */
.sc-history { border-left: 1px solid var(--border-default); padding-left: var(--sp-6); }
.sc-history-item {
  position: relative;
  padding: var(--sp-3) 0;
}
.sc-history-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) - 5px);
  top: 18px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 2px solid var(--border-strong);
}
.sc-history-item.current::before { border-color: var(--accent); background: var(--accent); }

.sc-history-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.sc-history-label {
  font-size: var(--fs-14);
  color: var(--text-primary);
  margin-top: 2px;
}

/* =========================
   NAV / APP CHROME
   ========================= */
.sc-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-page);
}

.sc-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-20);
  color: var(--text-display);
  text-decoration: none;
}
.sc-wordmark::after { content: "."; color: var(--accent); }

.sc-wordmark-lg {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-30);
  letter-spacing: var(--tracking-snug);
  color: var(--text-display);
  line-height: 1;
}
.sc-wordmark-lg::after { content: "."; color: var(--accent); }
.sc-wordmark-sub {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 6px;
  font-weight: 400;
}