/* today.css — "Today" practice cockpit for the Words home. A learning INSTRUMENT, not a
   storefront: a calm progress ring (today's plan, honest), one clear action, quiet real
   figures. Keeps the craft + GSAP motion, drops the marketing hero. Scoped to
   body[data-skin="today"]. Light + dark via the theme toggle. */

body[data-skin="today"] {
  --paper: #F4F1EA;
  --paper-2: #FBFAF5;
  --ink: #211E18;
  --muted: #847C6D;
  --hairline: #E3DCCD;
  --accent: #157A6E;            /* deep teal — calm "progress / growth" */
  --accent-soft: rgba(21, 122, 110, 0.10);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif; /* warm serif for long-form reading */
  --font-mono: "Geist Mono", ui-monospace, monospace;

  color: var(--ink);
  background: var(--paper);
}
html[data-theme="dark"] body[data-skin="today"] {
  --paper: #15140F; --paper-2: #1E1C16; --ink: #ECE7DB; --muted: #948C7B;
  --hairline: #2C2920; --accent: #54B9A8; --accent-soft: rgba(84, 185, 168, 0.16);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body[data-skin="today"] {
    --paper: #15140F; --paper-2: #1E1C16; --ink: #ECE7DB; --muted: #948C7B;
    --hairline: #2C2920; --accent: #54B9A8; --accent-soft: rgba(84, 185, 168, 0.16);
  }
}

body[data-skin="today"] .topbar,
body[data-skin="today"] .tabbar {
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--hairline);
}
body[data-skin="today"] .tabbar__tab.is-active { color: var(--accent); }

/* ---- cockpit ---- */
body[data-skin="today"] .today-home { max-width: 30rem; margin: 0 auto; text-align: center; padding: var(--sp-6) 0 var(--sp-7); }
body[data-skin="today"] .td-eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; color: var(--muted);
}

body[data-skin="today"] .td-ring-wrap {
  position: relative; width: min(70vw, 300px); aspect-ratio: 1; margin: var(--sp-5) auto var(--sp-4);
}
body[data-skin="today"] .td-ring { width: 100%; height: 100%; display: block; }
body[data-skin="today"] .td-ring__track { fill: none; stroke: var(--hairline); stroke-width: 9; }
body[data-skin="today"] .td-ring__fill {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
}
body[data-skin="today"] .td-ring__center { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.2rem; }
body[data-skin="today"] .td-ring__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3.4rem, 2.4rem + 5vw, 5rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink);
}
body[data-skin="today"] .td-ring__n.is-done { color: var(--accent); }
body[data-skin="today"] .td-ring__l { font-family: var(--font-display); color: var(--muted); font-size: 0.98rem; }

/* actions */
body[data-skin="today"] .td-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
body[data-skin="today"] .td-btn {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em;
  border-radius: 980px; padding: 0.85rem 2rem; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
body[data-skin="today"] .td-btn--primary { background: var(--ink); color: var(--paper); min-width: 14rem; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.4); }
body[data-skin="today"] .td-btn--primary:hover { transform: translateY(-2px); }
body[data-skin="today"] .td-btn--primary[disabled] { background: var(--hairline); color: var(--muted); box-shadow: none; cursor: default; }
body[data-skin="today"] .td-btn--text { background: transparent; color: var(--accent); padding: 0.4rem 1rem; }
body[data-skin="today"] .td-btn--text:hover { text-decoration: underline; }

/* quiet real figures */
body[data-skin="today"] .td-meta {
  display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-7);
  padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
body[data-skin="today"] .td-meta__item { display: flex; flex-direction: column; gap: 0.25rem; }
body[data-skin="today"] .td-meta__n { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
body[data-skin="today"] .td-meta__l { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* foot / config */
body[data-skin="today"] .td-foot { margin-top: var(--sp-6); }
body[data-skin="today"] .words-cfg-d { display: inline-block; text-align: left; border: none; }
body[data-skin="today"] .words-cfg-d__sum:hover { color: var(--accent); }
body[data-skin="today"] .words-cfg__field input { background: var(--paper-2); border-color: var(--hairline); color: var(--ink); border-radius: 10px; }
body[data-skin="today"] .words-home__msg { text-align: center; }

/* study cards inherit the calm surface */
body[data-skin="today"] .rcard {
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 56px -36px rgba(0,0,0,0.35);
}
body[data-skin="today"] .rcard__word { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }