/* ============================================================
   Scale Sense — Big-number intuition builder
   Paper-tech surface, sage-green #6B8E63 + ochre #C89B4E
   Scoped to .scale-sense-page
   ============================================================ */

/* Override --color-bg at :root so html element resolves to paper too —
   without this, html stays dark navy and shows on iOS rubber-band scroll. */
:root {
  --color-bg: #f8f5ef;
}

/* --- Page-level: light paper-tech theme --- */
.scale-sense-page {
  /* Map ink palette into canonical chrome tokens. */
  --chrome-ink: #1e1b16;
  --chrome-ink-muted: #7a7060;
  --ss-green: #6B8E63;
  --ss-green-dark: #4f6b49;
  --ss-green-light: #8db384;
  --ss-ochre: #C89B4E;
  --ss-ochre-light: #dab974;
  --ss-paper: #f8f5ef;
  --ss-paper-2: #f2ede4;
  --ss-paper-3: #ece6d8;
  --ss-ink: #1e1b16;
  --ss-ink-2: #3a342c;
  --ss-ink-muted: #7a7060;
  --ss-border: #d6ceba;
  --ss-fill-bar: #6B8E63;
  /* Local semantic tokens for error/warm/cool highlights.
     Promoted out of scattered hex values so future retints touch one place. */
  --ss-error: #b5341e;
  --ss-error-border: #c0392b;
  --ss-warm: #b5341e;
  --ss-cool: #2d6ca3;
  --color-bg: #f8f5ef;
  --color-surface: #fff;
  --color-text: #1e1b16;
  --color-text-muted: #7a7060;
  background: var(--ss-paper);
  color: var(--ss-ink);
}

.scale-sense-page .tool-frame {
  max-width: 980px;
  position: relative;
}

/* ── Language toggle ────────────────────────────────────── */
.ss-lang-toggle {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  /* Hit target raised to ~36px to clear WCAG 2.5.5 AA minimum (24px) with
     comfortable margin. 28px touched but missed the mark on thumb input. */
  padding: 7px 14px;
  font-size: var(--text-sm);
  color: var(--ss-ink-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-height: 36px;
  line-height: 1.4;
  white-space: nowrap;
}
.ss-lang-toggle:hover {
  border-color: var(--ss-green);
  color: var(--ss-green);
}

/* ── Tool header tweaks ─────────────────────────────────── */
.scale-sense-page .tool-header-block {
  padding-right: 100px; /* space for lang toggle */
}

/* ── UI container ───────────────────────────────────────── */
.ss-ui {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Input row ──────────────────────────────────────────── */
.ss-input-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ss-number-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ss-number-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--ss-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--text-xl);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  color: var(--ss-ink);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
  letter-spacing: -0.01em;
}
.ss-number-input:focus {
  outline: none;
  border-color: var(--ss-green);
  box-shadow: 0 0 0 3px rgba(107, 142, 99, 0.15);
}
.ss-number-input[data-tone="error"] {
  border-color: var(--ss-error-border);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}
.ss-number-input::placeholder {
  color: var(--ss-ink-muted);
  opacity: 0.5;
}

.ss-input-hint {
  font-size: var(--text-sm);
  color: var(--ss-ink-muted);
  min-height: 1.4em;
  margin: 0;
  padding: 0 2px;
  transition: opacity var(--transition-fast);
}
.ss-input-hint[data-tone="error"] {
  color: var(--ss-error);
}
.ss-input-hint[data-tone="info"] {
  color: var(--ss-green-dark);
}

/* sr-only: debounced live summary for screen readers */
.ss-sr-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Off-scale banner (value beyond reference library span) */
.ss-offscale {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 14px;
  border: 1.5px dashed var(--ss-ochre);
  border-radius: 10px;
  background: rgba(200, 155, 78, 0.08);
  color: var(--ss-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ss-offscale:not([hidden]) { display: flex; }
.ss-offscale-icon { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.ss-offscale-text { margin: 0; }

/* Footgun fix: shared .tool-header-meta sets display:flex which overrides HTML [hidden]. */
.scale-sense-page [data-lang][hidden] { display: none !important; }

/* ── Unit chips ─────────────────────────────────────────── */
.ss-unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ss-chip {
  background: var(--ss-paper-2);
  border: 1.5px solid var(--ss-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  color: var(--ss-ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 0;
  line-height: 1.5;
}
.ss-chip:hover {
  border-color: var(--ss-green);
  color: var(--ss-green);
  background: rgba(107, 142, 99, 0.06);
}
.ss-chip--active {
  /* Darker green so white text hits WCAG AA (~6.8:1) on 14px body copy;
     the lighter --ss-green was 4.28:1 — fine for large text, below AA here. */
  background: var(--ss-green-dark);
  border-color: var(--ss-green-dark);
  color: #fff;
}
.ss-chip--active:hover {
  background: var(--ss-green-dark);
  border-color: var(--ss-green-dark);
  color: #fff;
}

/* ── Action buttons ─────────────────────────────────────── */
.ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ss-preset-btn {
  background: none;
  border: 1px solid var(--ss-border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: var(--text-xs);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  color: var(--ss-ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 0;
  line-height: 1.6;
}
.ss-preset-btn:hover {
  border-color: var(--ss-ochre);
  color: var(--ss-ochre);
  background: rgba(200, 155, 78, 0.06);
}

/* Shared base for primary actions — Surprise and Share sit at the same tier
   visually (filled), presets stay outlined. This distinguishes the "do
   something now" actions from the "load a demo value" utilities. */
.ss-action-btn {
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 0;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Surprise: filled ochre — the "new idea" button */
.ss-surprise {
  background: var(--ss-ochre);
  border-color: var(--ss-ochre);
  color: #fff;
  /* Push Surprise + Share to the right edge on desktop; presets cluster left. */
  margin-left: auto;
}
.ss-surprise:hover {
  background: #b1873f; /* slightly darker ochre */
  border-color: #b1873f;
}
/* Share: filled green — the "commit / export" button, anchors the popover */
.ss-share {
  background: var(--ss-green-dark);
  border-color: var(--ss-green-dark);
  color: #fff;
}
.ss-share:hover {
  background: #40573b; /* darker green on hover */
  border-color: #40573b;
}
.ss-share[data-tone="loading"] {
  opacity: 0.6;
  cursor: wait;
}

/* ── Empty state ────────────────────────────────────────── */
.ss-empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--ss-ink-muted);
  font-size: var(--text-md);
  border: 1.5px dashed var(--ss-border);
  border-radius: 12px;
  background: rgba(248, 245, 239, 0.5);
}
.ss-empty-state p { margin: 0; }

/* ── Equivalents grid ───────────────────────────────────── */
.ss-equivalents {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Desktop 2-col grid */
@media (min-width: 640px) {
  .ss-equivalents.ss-has-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* ── Equivalent card ────────────────────────────────────── */
.ss-card {
  background: #fff;
  border: 1.5px solid var(--ss-border);
  border-radius: 10px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
  overflow: hidden;
}
.ss-card.ss-card--visible {
  opacity: 1;
  transform: translateY(0);
}
.ss-card.ss-card--invalid {
  opacity: 0.4;
}

/* Respect prefers-reduced-motion: skip fade-in and bar animations */
@media (prefers-reduced-motion: reduce) {
  .ss-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ss-fill-bar {
    transition: none;
  }
}

.ss-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ss-pictogram {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--ss-paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border: 1px solid var(--ss-border);
}

.ss-card-label {
  flex: 1;
  min-width: 0;
}
.ss-card-label strong {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ss-ink);
  line-height: 1.3;
  font-family: 'Manrope', sans-serif;
}
.ss-card-label span {
  font-size: var(--text-sm);
  color: var(--ss-ink-muted);
  display: block;
  margin-top: 2px;
}

.ss-card-ratio {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ss-green-dark);
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  /* Cap the ratio column so long strings (e.g., "1/25,000,000") don't squeeze
     the label into a cramped middle column. flex-shrink: 0 keeps it intact. */
  flex: 0 0 auto;
  max-width: 40%;
}
.ss-card-ratio[data-tone="delta-warm"] { color: var(--ss-warm); }
.ss-card-ratio[data-tone="delta-cool"] { color: var(--ss-cool); }
/* Export card inherits the same tone treatment so PNG matches live card. */
.ss-export-card-ratio[data-tone="delta-warm"] { color: var(--ss-warm); }
.ss-export-card-ratio[data-tone="delta-cool"] { color: var(--ss-cool); }

/* ── Fill bar ───────────────────────────────────────────── */
.ss-fill-track {
  height: 5px;
  background: var(--ss-paper-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: var(--space-1);
}
.ss-fill-bar {
  height: 100%;
  background: var(--ss-green);
  border-radius: 3px;
  width: 0%;
  transition: width 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ss-fill-bar--accent {
  background: var(--ss-ochre);
}

/* ── Domain badge ───────────────────────────────────────── */
.ss-domain-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ss-ink-muted);
  opacity: 0.65;
  font-family: 'Manrope', sans-serif;
}
/* Row that groups domain badge + reference magnitude side-by-side.
   The generic `.ss-card-label span` rule above would force block layout
   on nested spans, so this container + its children reset that. */
.ss-card-label .ss-card-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.ss-card-label .ss-card-meta > span {
  display: inline;
  margin-top: 0;
}
.ss-ref-magnitude {
  font-size: var(--text-sm);
  color: var(--ss-ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ss-ref-magnitude::before {
  content: "·";
  color: var(--ss-border);
  margin-right: 4px;
  font-weight: 400;
}

/* ── Share popover ──────────────────────────────────────── */
.ss-share-wrap {
  position: relative;
  display: inline-block;
}
.ss-share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(30, 27, 22, 0.12), 0 2px 6px rgba(30, 27, 22, 0.06);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ss-popover-in 0.14s ease-out;
}
.ss-share-popover[hidden] {
  display: none;
}
@keyframes ss-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ss-share-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--ss-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  min-height: 0;
  transition: background 0.12s ease;
}
.ss-share-option:hover,
.ss-share-option:focus-visible {
  background: var(--ss-paper-2);
  outline: none;
}
.ss-share-option[hidden] { display: none; }
.ss-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ss-paper-3);
  color: var(--ss-ink);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.ss-share-icon-x {
  background: #000;
  color: #fff;
}
.ss-share-icon-line {
  background: #06C755;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  letter-spacing: -0.5px;
}
.ss-share-divider {
  height: 1px;
  background: var(--ss-border);
  margin: 4px 8px;
}

/* ── Toast (ephemeral confirm) ──────────────────────────── */
/* Always in DOM + always display:flex so opacity transition runs;
   the `hidden` attribute would set display:none and kill the fade. */
.ss-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  transform: translateX(-50%) translateY(8px);
  background: var(--ss-ink);
  color: var(--ss-paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.ss-toast.ss-toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .ss-toast { transition: none; }
}

/* ── Export overlay (PNG capture) ───────────────────────── */
/* 1080×1080 square, designed for IG/Twitter. Bolder typography,
   gradient accent strip on the left edge, 3 hero anchor rows. */
.ss-export-frame {
  display: none;
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1080px;
  height: 1080px;
  background:
    radial-gradient(circle at top right, rgba(107, 142, 99, 0.08), transparent 55%),
    radial-gradient(circle at bottom left, rgba(200, 155, 78, 0.08), transparent 50%),
    var(--ss-paper);
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  color: var(--ss-ink);
  overflow: hidden;
}
.ss-export-frame.ss-export-active {
  display: block;
}
.ss-export-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(180deg, var(--ss-green) 0%, var(--ss-ochre) 100%);
}
.ss-export-body {
  padding: 80px 80px 70px 100px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ss-export-eyebrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--ss-green-dark);
  margin: 0 0 36px;
  /* Default: no letter-spacing at the block level — it gets scoped to the
     Latin portion below so CJK chars aren't stretched. */
}
/* CJK half of the eyebrow: no letter-spacing, upright. */
.ss-export-eyebrow-zh {
  letter-spacing: 0;
}
/* Latin half: uppercased and tracked for the engineering-manual feel. */
.ss-export-eyebrow-latin {
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ss-export-eyebrow-dot {
  margin: 0 6px;
  color: var(--ss-ink-muted);
}
.ss-export-hero {
  margin: 0 0 8px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--ss-ink);
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.ss-export-hero-unit {
  font-size: 56px;
  font-weight: 600;
  color: var(--ss-ink-muted);
  letter-spacing: 0;
}
.ss-export-tagline {
  margin: 0 0 44px;
  font-size: 28px;
  font-weight: 500;
  color: var(--ss-ink-2);
  line-height: 1.35;
}
.ss-export-tagline strong {
  color: var(--ss-green-dark);
  font-weight: 700;
}
.ss-export-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.ss-export-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1.5px solid var(--ss-border);
  border-radius: 18px;
  padding: 20px 28px;
}
.ss-export-card-emoji {
  font-size: 54px;
  line-height: 1;
  text-align: center;
}
.ss-export-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ss-export-card-label {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--ss-ink);
  line-height: 1.35;
  /* NOTE: html2canvas mis-renders -webkit-box + -webkit-line-clamp (text
     gets offset upward and clipped by the card's top edge). Labels in the
     dataset are short enough that natural wrapping gives us 1–2 lines
     without overflow. Word-break ensures long tokens don't push out. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Anchor's own value (e.g. "40 °C", "NT$80") — smaller muted subtitle. */
.ss-export-card-ref {
  font-size: 18px;
  font-weight: 500;
  color: var(--ss-ink-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ss-export-bar-track {
  height: 8px;
  background: var(--ss-paper-3);
  border-radius: 4px;
  overflow: hidden;
}
.ss-export-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-green-light) 0%, var(--ss-green-dark) 100%);
  border-radius: 4px;
}
.ss-export-card-ratio {
  font-size: 30px;
  font-weight: 800;
  color: var(--ss-green-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.ss-export-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ss-border);
  font-size: 18px;
  color: var(--ss-ink-muted);
}
.ss-export-footer-brand {
  font-weight: 700;
  color: var(--ss-ink);
  letter-spacing: 0.5px;
}

/* ── Tool notes scoped ──────────────────────────────────── */
.ss-tool-notes {
  background: var(--ss-paper-2);
  border-color: var(--ss-border);
}
.ss-tool-notes .card-title {
  color: var(--ss-ink-2);
}
.ss-tool-notes .card-text {
  color: var(--ss-ink-2);
  font-size: var(--text-sm);
  line-height: 1.75;
  margin-bottom: var(--space-3);
}
.ss-tool-notes .card-text:last-child { margin-bottom: 0; }

/* ── Responsive: mobile stack ───────────────────────────── */
@media (max-width: 639px) {
  .scale-sense-page .tool-header-block {
    padding-right: 80px;
  }
  .ss-number-input {
    font-size: var(--text-lg);
  }
  /* On mobile, drop the "push-right" margin so Surprise/Share sit in-flow
     next to the preset chips — otherwise on a 2-row wrap Surprise orphans
     itself with a full gutter of whitespace on its left. */
  .ss-surprise {
    margin-left: 0;
  }
  .ss-actions {
    gap: var(--space-2);
  }
  /* Anchor popover from the left edge on mobile so a Share button that wraps
     to the start of a new row doesn't push the popover off the right edge. */
  .ss-share-popover {
    right: auto;
    left: 0;
    min-width: min(232px, calc(100vw - var(--space-4) * 2));
  }
  /* Ratio column can wrap to its own baseline on narrow screens so the label
     never gets squeezed by long "1/25,000,000" strings. */
  .ss-card-ratio {
    max-width: 100%;
  }
}