/* Myopedia — app.css
   Mobile-first design system. Loaded after Basecoat UI's CDN stylesheet.
   Tokens, type scale, layout, dark mode via prefers-color-scheme. */

/* -------------------------------------------------------------------------
   1. Tokens (light)
   ------------------------------------------------------------------------- */
:root {
  /* Color (neutral + one accent) */
  --color-bg:           #ffffff;
  --color-surface:      #f7f7f8;
  --color-surface-2:    #eeeef1;
  --color-border:       #d9d9de;
  --color-text:         #131418;
  --color-text-muted:   #5b5d66;
  --color-text-subtle:  #84868f;
  --color-accent:       #d4451a;
  --color-accent-hover: #b3380f;
  --color-accent-fg:    #ffffff;
  --color-focus:        #2563eb;
  --color-danger:       #b00020;
  --color-success:      #0a7c3a;

  /* Type scale (modular) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  2.75rem;
  --fs-stat-mobile:  2.5rem;   /* ≥ 40px */
  --fs-stat-desktop: 3.5rem;   /* ≥ 56px */
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* Spacing (4 px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radius + shadow */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  /* Layout */
  --sidebar-w:   240px;
  --content-max: 720px;
  --header-h:    56px;

  /* Motion */
  --t-fast:   120ms;
  --t-base:   180ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
}

/* -------------------------------------------------------------------------
   2. Tokens (dark)
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0e0f12;
    --color-surface:      #16181d;
    --color-surface-2:    #1f2127;
    --color-border:       #2c2f37;
    --color-text:         #f1f2f5;
    --color-text-muted:   #a8abb4;
    --color-text-subtle:  #767982;
    --color-accent:       #ff6a3d;
    --color-accent-hover: #ff855e;
    --color-accent-fg:    #0e0f12;
    --color-focus:        #6ea8ff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow:    0 2px 8px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  }
}

/* -------------------------------------------------------------------------
   3. Reset + base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "tnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* Skip link */
.skip-link {
  position: absolute;
  left: -10000px;
  top: var(--sp-2);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-2); }

/* -------------------------------------------------------------------------
   4. Type scale
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl);  margin-top: var(--sp-6); }
h3 { font-size: var(--fs-lg);  margin-top: var(--sp-5); }
h4 { font-size: var(--fs-md);  margin-top: var(--sp-4); }
p  { margin: 0 0 var(--sp-4); }
small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-3xl); }
}

/* -------------------------------------------------------------------------
   5. Layout — header / sidebar / main / footer
   ------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  height: var(--header-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.wordmark {
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-text); }

.nav-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-surface); }

.app-shell {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

/* Drawer (mobile default; sidebar on desktop) */
.app-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--sp-4);
  transform: translateX(-100%);
  transition: transform var(--t-base) var(--ease), visibility var(--t-base);
  overflow-y: auto;
  z-index: 15;
}
/* Closed drawer is off-screen — keep it out of the tab and AT order too. */
.app-nav[data-open="false"] { visibility: hidden; }
.app-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
.app-nav h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin: var(--sp-4) 0 var(--sp-2);
}
.app-nav h2:first-child { margin-top: 0; }
.app-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.app-nav a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.app-nav a:hover { background: var(--color-surface); color: var(--color-text); }
.app-nav a[aria-current="page"] {
  background: var(--color-surface-2);
  font-weight: 600;
}

.app-main {
  flex: 1 1 auto;
  width: 100%;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  max-width: var(--content-max);
  margin-inline: auto;
}

.app-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--sp-5) var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.app-footer a { color: var(--color-text-muted); }

@media (min-width: 768px) {
  .app-header { padding: 0 var(--sp-5); }
  .nav-toggle { display: none; }
  /* Desktop: always-on sidebar — data-open stays "false" but it must show. */
  .app-nav,
  .app-nav[data-open="false"] {
    position: sticky;
    top: var(--header-h);
    inset: auto;
    transform: none;
    visibility: visible;
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    border-right: 1px solid var(--color-border);
    flex: 0 0 var(--sidebar-w);
  }
  .app-shell { flex-direction: row; }
  .app-main {
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
    margin-inline: 0;
    max-width: var(--content-max);
  }
}

/* -------------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.field .hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.field .error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
}

input[type="number"],
input[type="text"],
input[type="time"],
select {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
input:focus, select:focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
input[aria-invalid="true"] { border-color: var(--color-danger); }

/* Input with a trailing unit label */
.input-suffix {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.input-suffix input { flex: 1 1 auto; }
.input-suffix > span {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  min-width: 2ch;
}

/* Segmented control (unit toggle) */
.seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}
.seg button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Buttons */
.btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.btn:hover { background: var(--color-surface-2); }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* -------------------------------------------------------------------------
   7. Result + cards
   ------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--sp-5) 0;
}
.stat-value {
  font-size: var(--fs-stat-mobile);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .stat-value { font-size: var(--fs-stat-desktop); }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
@media (min-width: 480px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Card rendered as a link (used on home page) */
.card-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.card-link:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.card-link .card-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}
.card-link h3 {
  margin: 0;
  font-size: var(--fs-md);
}
.card-link p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Disclosure (How this is calculated) */
details.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  margin: var(--sp-5) 0;
}
details.disclosure summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure[open] { padding-bottom: var(--sp-4); }

/* Disclaimer */
.disclaimer {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
th { font-weight: 600; color: var(--color-text-muted); }
th[scope="row"] { color: var(--color-text); }
tr[aria-current="true"] { background: var(--color-surface-2); font-weight: 600; }
caption {
  text-align: left;
  margin-bottom: var(--sp-2);
  color: var(--color-text-muted);
}

/* Utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.row { display: flex; gap: var(--sp-3); align-items: end; flex-wrap: wrap; }
.row > .field { flex: 1 1 160px; margin-bottom: 0; }

/* Secondary line inside a table row header (e.g. goal descriptions) */
.caption {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  margin-top: var(--sp-1);
}

/* Stacked-bar visualization (macro split) */
.macro-bar {
  width: 100%;
  height: 16px;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--sp-4) 0;
}
.macro-seg-p { fill: var(--color-accent); }
.macro-seg-c { fill: var(--color-success); }
.macro-seg-f { fill: var(--color-focus); }

/* Inline color key (pairs a table row with its bar segment) */
.swatch {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  margin-right: var(--sp-2);
}
.swatch-p { background: var(--color-accent); }
.swatch-c { background: var(--color-success); }
.swatch-f { background: var(--color-focus); }

/* 24-hour fasting ring */
.if-ring {
  width: 220px;
  height: 220px;
  max-width: 100%;
  display: block;
  margin: var(--sp-5) auto;
}
.if-seg-fast {
  fill: none;
  stroke: var(--color-surface-2);
  stroke-width: 14;
}
.if-seg-eat {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 14;
  stroke-linecap: round;
}
.if-ring-tick {
  fill: var(--color-text-subtle);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}
.if-now {
  fill: var(--color-text);
  stroke: var(--color-bg);
  stroke-width: 2;
  transition: cx var(--t-base) var(--ease), cy var(--t-base) var(--ease);
}

/* Weekly strip (5:2) */
.if-week {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.if-day {
  flex: 1 1 70px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.if-day-low {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
  font-weight: 600;
}