/* Fear & Greed page. Light = Tellus sand, dark = shared Tellus dark tokens
   (html[data-theme], set before paint in the <head>; toggle wiring in /theme.js).
   The meter card is the embeddable widget and keeps its dark look in both themes. */
:root {
  --bg: #ECE0CC; --panel: #F5EDDD; --panel-2: #FFFAF2; --ink: #1F3536; --muted: #4A6163;
  --line: #D4C8B5; --accent: #2A5A5C; --accent-text: #9E441F;
  --btn-bg: #1F3536; --btn-fg: #ECE0CC; --btn-hover: #2A5A5C;
  --code-bg: #1F3536; --code-fg: #ECE0CC;
  --card-bg: #1F3536; --card-line: rgba(236,224,204,0.14); --card-ink: #ECE0CC; --card-muted: rgba(236,224,204,0.72);
}
html[data-theme="dark"] {
  --bg: #142425; --panel: #1F3536; --panel-2: #26403F; --ink: #ECE0CC; --muted: rgba(236,224,204,0.72);
  --line: rgba(236,224,204,0.14); --accent: #7FB5B7; --accent-text: #E8956A;
  --btn-bg: #E8956A; --btn-fg: #142425; --btn-hover: #F0A982;
  --code-bg: #142425; --code-fg: #ECE0CC;
  --card-bg: #26403F;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: Inter, "DM Sans", Arial, sans-serif; }
.app-shell { max-width: 920px; margin: auto; padding: 40px 20px 72px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.app-home { display: inline-flex; align-items: center; }
.app-home img { width: 168px; height: auto; display: block; }
.app-nav { display: flex; align-items: center; gap: 16px; }
.app-nav a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; text-underline-offset: 4px; }
.app-nav a:hover { text-decoration: underline; }
.app-nav .theme-toggle { --tt-fg: var(--ink); --tt-line: var(--line); --tt-hover: var(--panel); --tt-focus: var(--accent-text); background: var(--panel); }
.widget-section { display: flex; justify-content: center; margin-bottom: 80px; }

.meter-card { width: min(384px, 100%); padding: 24px; background: var(--card-bg); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: 15px; box-shadow: 0 20px 48px rgba(20,36,37,0.25); }
.meter-header { text-align: center; margin-bottom: 14px; }
.meter-header h2 { font-size: 20px; line-height: 1.25; margin: 0; font-weight: 700; }
.meter-header p { margin: 5px 0 0; color: var(--card-muted); font-size: 12px; }
.meter-card .value { text-align: center; font-size: 48px; line-height: 1; font-weight: 800; margin-top: 8px; }
/* Tone stays on the number, glow and marker; the 13px label stays on the card ink for AA */
.meter-card .class { color: var(--card-ink) !important; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0; }
.character-wrap { position: relative; width: 150px; height: 150px; margin: 8px auto; }
.character-wrap img { position: relative; width: 145px; height: 145px; object-fit: contain; z-index: 1; }
.glow { position: absolute; inset: 25px; border-radius: 50%; filter: blur(24px); opacity: .28; }
.meter-track { height: 11px; border-radius: 10px; background: linear-gradient(90deg, #ea3943, #ea8c00 25%, #f3d42f 50%, #93d900 75%, #16c784); position: relative; }
.marker { position: absolute; top: 50%; width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #fff8; }
.ticks { display: flex; justify-content: space-between; color: var(--card-muted); font-size: 10px; margin-top: 7px; }
.updated { text-align: center; color: var(--card-muted); font-size: 11px; margin: 18px 0 0; }
.loading { text-align: center; color: var(--card-muted); padding: 90px 0; }
.spinner { display: block; width: 42px; height: 42px; border: 4px solid rgba(236,224,204,0.2); border-top-color: #7FB5B7; border-radius: 50%; animation: spin .8s linear infinite; margin: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { text-align: center; color: #F4B4A0; padding: 70px 0; }
.retry { background: #E8956A; color: #142425; border: 0; border-radius: 6px; padding: 10px 16px; font-weight: 700; cursor: pointer; }

.embed-section { max-width: 896px; margin: auto; }
.section-heading { text-align: center; margin-bottom: 32px; }
.section-heading h1 { font-size: 28px; margin: 0 0 8px; font-weight: 800; }
.section-heading p { color: var(--muted); margin: 0; }
.embed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.preview-panel, .configure-panel, .how-to { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 24px; }
.preview-panel h2, .configure-panel h2, .how-to h2 { font-size: 20px; margin: 0 0 20px; font-weight: 700; }
.preview-frame { display: flex; justify-content: center; background: transparent; padding: 6px 0; }
.meter-card.compact { width: 100%; padding: 20px 16px; box-shadow: none; }
.meter-card.compact .value { font-size: 48px; }
.meter-card.compact .character-wrap { width: 140px; height: 140px; }
.meter-card.compact .character-wrap img { width: 135px; height: 135px; }
.controls { display: grid; gap: 20px; }
.control-group label { display: block; color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.choice-row { display: flex; gap: 8px; }
.choice { flex: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); padding: 10px 8px; text-align: left; font-size: 13px; cursor: pointer; }
.choice strong, .choice small { display: block; }
.choice small { font-size: 10px; color: var(--muted); margin-top: 4px; }
.choice.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-row .choice { text-align: center; }
.code-section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }
.code-heading { display: flex; align-items: center; justify-content: space-between; }
.code-heading h3 { font-size: 14px; margin: 0; }
.code-heading button { background: var(--btn-bg); border: 0; border-radius: 6px; color: var(--btn-fg); font-size: 11px; font-weight: 700; padding: 8px 12px; cursor: pointer; }
.code-heading button:hover { background: var(--btn-hover); }
.code-section pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 12px; min-height: 150px; white-space: pre-wrap; overflow: auto; color: var(--code-fg); font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 10px 0; }
.copy-status { color: var(--accent); font-size: 11px; min-height: 1em; }
.tip { color: var(--muted); font-size: 11px; margin: 0; }
.how-to { max-width: 896px; margin: 24px auto 0; }
.how-to ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.how-to li { display: flex; gap: 12px; font-size: 14px; line-height: 1.4; }
.how-to b { color: var(--accent-text); }
footer { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 64px; }
footer a { color: var(--accent); }

/* Embed mode (?embed=1): only the card, on a transparent page */
html.is-embed, html.is-embed body { background: transparent; }

@media (max-width: 720px) {
  .app-shell { padding-top: 24px; }
  .app-home img { width: 132px; }
  .embed-grid { grid-template-columns: 1fr; }
  .widget-section { margin-bottom: 60px; }
  .choice-row { flex-direction: column; }
  .theme-row { flex-direction: row; }
  .section-heading h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }