/* StudyScore — dashboard styles. Replaces the <style> block in index.html.
   Every colour, size, radius, shadow and timing is a token on :root;
   night values are redefined once in the prefers-color-scheme block. */
*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:light;
  /* ground + surfaces */
  --bg:oklch(0.972 0.014 5);
  --glow:oklch(0.992 0.008 30);
  --glow-2:oklch(0.950 0.028 355);
  --card:oklch(0.998 0.003 10);
  --wash:oklch(0.982 0.010 5);
  --well:oklch(0.948 0.020 0);
  --line:oklch(0.905 0.032 0);
  --grid:oklch(0.955 0.016 0);
  /* ink (plum-grey, never black) */
  --ink:oklch(0.33 0.035 340);
  --dim-ink:oklch(0.46 0.030 340);
  --dim:oklch(0.54 0.026 340);
  --faint:oklch(0.80 0.022 340);
  --control:oklch(0.68 0.045 350);
  /* the one accent */
  --rose:oklch(0.555 0.120 358);
  --rose-h:oklch(0.505 0.120 358);
  --rose-deep:oklch(0.48 0.130 358);
  --rose-wash:oklch(0.945 0.032 358);
  --on-rose:oklch(0.995 0.004 10);
  --ring:oklch(0.555 0.120 358 / .45);
  /* chart */
  --bar:oklch(0.925 0.032 0);
  --bar-on:oklch(0.83 0.070 0);
  --trace:oklch(0.66 0.115 0);
  --area:oklch(0.66 0.115 0 / .08);
  --band:oklch(0.80 0.050 0);
  /* task tints: same lightness + chroma, five hues */
  --t0:oklch(0.82 0.075 0);    /* blush */
  --t1:oklch(0.82 0.075 300);  /* lavender */
  --t2:oklch(0.82 0.075 55);   /* peach */
  --t3:oklch(0.82 0.075 165);  /* mint */
  --t4:oklch(0.82 0.075 95);   /* butter */
  /* depth */
  --shadow-sm:0 1px 2px oklch(0.45 0.08 0 / .05),0 4px 12px -4px oklch(0.55 0.10 0 / .10);
  --soft:0 1px 2px oklch(0.45 0.08 0 / .04),0 12px 32px -12px oklch(0.55 0.11 0 / .20);
  --shadow-lift:0 2px 6px oklch(0.45 0.08 0 / .06),0 32px 72px -20px oklch(0.50 0.12 0 / .32);
  --scrim:oklch(0.35 0.05 345 / .22);
  --toast-bg:var(--ink); --toast-ink:var(--card);
  /* type */
  --font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fs-2xs:10.5px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:40px;
  --fw-light:300; --fw-reg:400; --fw-semi:600; --fw-bold:700; --fw-heavy:800;
  --lh:1.65; --lh-snug:1.4; --lh-tight:1.15;
  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  /* radii */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:32px; --r-pill:999px;
  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur:300ms; --dur-slow:600ms; --breathe:5s;
  --ease:var(--dur) var(--ease-out);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:oklch(0.205 0.028 340);
    --glow:oklch(0.255 0.045 350);
    --glow-2:oklch(0.230 0.040 320);
    --card:oklch(0.265 0.034 340);
    --wash:oklch(0.238 0.030 340);
    --well:oklch(0.320 0.038 340);
    --line:oklch(0.370 0.042 340);
    --grid:oklch(0.300 0.032 340);
    --ink:oklch(0.93 0.016 350);
    --dim-ink:oklch(0.82 0.024 350);
    --dim:oklch(0.72 0.030 350);
    --faint:oklch(0.45 0.030 340);
    --control:oklch(0.58 0.040 350);
    --rose:oklch(0.76 0.110 358);
    --rose-h:oklch(0.81 0.100 358);
    --rose-deep:oklch(0.82 0.100 358);
    --rose-wash:oklch(0.34 0.060 358);
    --on-rose:oklch(0.21 0.030 340);
    --ring:oklch(0.76 0.110 358 / .5);
    --bar:oklch(0.345 0.050 355);
    --bar-on:oklch(0.50 0.085 358);
    --trace:oklch(0.76 0.110 358);
    --area:oklch(0.76 0.110 358 / .10);
    --band:oklch(0.46 0.050 350);
    --t0:oklch(0.72 0.075 0);   --t1:oklch(0.72 0.075 300);
    --t2:oklch(0.72 0.075 55);  --t3:oklch(0.72 0.075 165);
    --t4:oklch(0.72 0.075 95);
    --shadow-sm:inset 0 1px 0 oklch(1 0 0 / .04),0 4px 12px -4px oklch(0.08 0.03 340 / .5);
    --soft:inset 0 1px 0 oklch(1 0 0 / .045),0 14px 34px -12px oklch(0.06 0.03 340 / .7);
    --shadow-lift:inset 0 1px 0 oklch(1 0 0 / .05),0 32px 80px -20px oklch(0.05 0.03 340 / .8);
    --scrim:oklch(0.12 0.03 340 / .55);
  }
}

html{height:100%;background:var(--bg)}
body{
  margin:0;height:100vh;overflow:hidden;padding:var(--s6) var(--s8) var(--s5);
  display:flex;flex-direction:column;color:var(--ink);
  background:
    radial-gradient(1100px 680px at 12% -8%,var(--glow),transparent 70%),
    radial-gradient(900px 640px at 105% 108%,var(--glow-2),transparent 72%),
    var(--bg);
  background-attachment:fixed;
  font:var(--fw-reg) var(--fs-base)/var(--lh) var(--font);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--rose-wash);color:var(--ink)}
a{color:var(--rose-deep);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--ease)}
a:hover{color:var(--rose-h)}
#app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
@keyframes breathe{
  0%,100%{opacity:.5;transform:scale(.85);box-shadow:0 0 0 0 var(--rose-wash)}
  50%{opacity:1;transform:scale(1.1);box-shadow:0 0 0 5px var(--rose-wash)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .live.on{animation:none!important}
}

.head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);flex:none}
.head h1{margin:0;font-size:var(--fs-xl);font-weight:var(--fw-heavy);letter-spacing:.005em;display:flex;align-items:center}
.head .when{color:var(--dim-ink);font-size:var(--fs-sm);margin:0;text-align:right;line-height:1.55}
.head .when b{color:var(--ink);font-weight:var(--fw-bold)}
#stamp{transition:background var(--ease),color var(--ease)}
#stamp.stale{display:inline-flex;align-items:center;gap:7px;background:var(--rose-wash);color:var(--rose-deep);
  padding:2px 12px;border-radius:var(--r-pill);font-weight:var(--fw-semi)}
#stamp.stale::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose-deep)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);
  margin-left:var(--s3);transition:background var(--ease)}
.live.on{background:var(--rose);animation:breathe var(--breathe) ease-in-out infinite}

.cols{flex:1;min-height:0;margin-top:var(--s5);display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s7)}
.col{min-height:0;display:flex;flex-direction:column}
.sec{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--dim-ink);margin:0 0 var(--s3) 6px;flex:none}

/* chart pillow: plot + readout read as one card */
.plot-wrap{display:flex;background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--soft);
  clip-path:inset(-48px -48px 0 -48px);flex:1 1 0;min-height:180px;overflow:hidden;padding:10px 8px 0}
svg.axis-gutter{display:block;flex:none}
.plot-scroll{overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.plot-scroll::-webkit-scrollbar{height:8px}
.plot-scroll::-webkit-scrollbar-track{background:transparent}
.plot-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
svg.plot{display:block;cursor:pointer;outline:none}
svg.plot:focus-visible{outline:2px solid var(--ring);outline-offset:-4px;border-radius:var(--r-md)}
.grid-v{stroke:var(--grid);stroke-width:1}
.band{stroke:var(--band);stroke-width:1.5;stroke-dasharray:0.1 7;stroke-linecap:round}
.band-label{fill:var(--dim);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.raw{fill:var(--bar);rx:8px;transition:fill var(--ease)}
.raw.on{fill:var(--bar-on)}
.area{fill:var(--area)}
.trace{fill:none;stroke:var(--trace);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.today{fill:var(--card);stroke:var(--trace);stroke-width:2.5}
.cross{stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round;pointer-events:none}
.pick{fill:var(--rose);stroke:var(--card);stroke-width:3;pointer-events:none;
  transition:cx var(--ease),cy var(--ease)}
.axis{fill:var(--dim);font-size:var(--fs-2xs);font-weight:var(--fw-semi)}
.axis-mid{text-anchor:middle}
.hit{fill:transparent}

.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);padding:var(--s3) var(--s6);
  background:var(--wash);border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:inset 0 1px 0 var(--grid),var(--soft);clip-path:inset(0 -48px -48px -48px);min-height:48px;flex:none}
.rd-date{color:var(--dim-ink);font-size:var(--fs-sm);white-space:nowrap;font-weight:var(--fw-bold)}
.rd-vals{font-size:var(--fs-base)}
.rd-vals b{font-weight:var(--fw-bold);color:var(--ink)}
.rd-nil{color:var(--dim-ink);font-size:var(--fs-base)}
.rd-hint{color:var(--dim);font-size:var(--fs-xs);margin-left:auto;white-space:nowrap}
.caption{color:var(--dim-ink);font-size:12.5px;margin:var(--s3) 6px 0;flex:none;text-wrap:pretty}

.reading-block{padding:var(--s5) 6px 0;flex:none}
.reading{font-size:var(--fs-xl);line-height:var(--lh-snug);margin:0 0 var(--s2)}
.reading b{font-weight:var(--fw-bold)}
.reading span{color:var(--dim-ink);font-size:var(--fs-md)}
.explain{color:var(--dim-ink);font-size:var(--fs-sm);line-height:1.7;margin:0;text-wrap:pretty}
.explain b{color:var(--ink);font-weight:var(--fw-bold)}
.explain .untag{display:inline-flex;align-items:center;gap:6px;color:var(--rose-deep);font-weight:var(--fw-semi);
  background:var(--rose-wash);padding:0 10px;border-radius:var(--r-pill)}
.explain .untag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose-deep)}

.standing{flex:none;margin-bottom:var(--s6);padding:var(--s5) var(--s6) 22px;background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--soft)}
.standing .sec{margin-left:0;margin-bottom:var(--s1)}
.big{font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:0 0 6px;font-weight:var(--fw-light);letter-spacing:-.01em}
.big b{font-weight:var(--fw-bold)}
.big span{color:var(--dim-ink);font-size:var(--fs-lg);letter-spacing:0}
.standing .of{color:var(--dim-ink);font-size:var(--fs-sm);margin:0 0 var(--s3)}
.standing .meter{margin-bottom:var(--s4)}
.standing .meter i{background:var(--trace)}
.standing p.fine{color:var(--dim-ink);font-size:12.5px;line-height:1.7;margin:0;text-wrap:pretty}
.standing p.fine b{color:var(--ink);font-weight:var(--fw-bold)}

.tracks-wrap{flex:1;min-height:0;overflow-y:auto;margin:0 -10px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tracks-wrap::-webkit-scrollbar{width:8px}
.tracks-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
.tracks{display:grid;gap:var(--s3);padding:2px 10px var(--s5)}
.row{padding:var(--s4) var(--s5);background:var(--card);border-radius:var(--r-md);box-shadow:var(--soft);
  transition:background var(--ease),box-shadow var(--ease)}
.row.dormant{background:var(--wash);box-shadow:var(--shadow-sm)}
.row.dormant .meter i{opacity:.6}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:10px}
.name{min-width:0;overflow-wrap:anywhere;font-weight:var(--fw-bold);display:flex;align-items:center;gap:10px}
.name::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--tint,var(--t0))}
.val{white-space:nowrap;font-size:var(--fs-md)}
.val b{font-weight:var(--fw-bold)}
.val span{color:var(--dim-ink);font-size:var(--fs-sm)}
.meter{height:8px;background:var(--well);border-radius:var(--r-pill);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--tint,var(--t0));border-radius:var(--r-pill);display:block;
  min-width:8px;transition:width var(--dur-slow) var(--ease-out)}
.meter.none{background:transparent;height:8px;
  background-image:radial-gradient(circle,var(--band) 1.5px,transparent 2px);background-size:10px 8px}
.row-sub{color:var(--dim-ink);font-size:var(--fs-xs);margin-top:var(--s2);overflow-wrap:anywhere}

.verdict{margin:var(--s3) 0 0;padding:var(--s4) var(--s6);background:var(--card);border-radius:var(--r-md);
  box-shadow:var(--soft);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-snug);flex:none}
.note{color:var(--dim-ink);font-size:var(--fs-xs);line-height:1.6;margin:var(--s3) 6px 0;flex:none}
.state{color:var(--dim-ink);padding:60px 0;text-align:center}

/* day-detail sheet */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:var(--s6);background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fadein var(--dur) var(--ease-out)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal[hidden]{display:none}
.sheet{width:min(600px,100%);max-height:min(82vh,740px);overflow-y:auto;background:var(--card);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lift);animation:rise var(--dur) var(--ease-out);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:26px 28px var(--s4)}
.sheet-head h2{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-heavy);line-height:var(--lh-snug)}
.sheet-head .lvl{color:var(--dim-ink);font-size:var(--fs-sm);margin:var(--s1) 0 0}
.x{background:var(--rose-wash);border:0;color:var(--rose-deep);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  line-height:1;padding:10px 18px;border-radius:var(--r-pill);cursor:pointer;min-height:36px;
  transition:background var(--ease),color var(--ease)}
.x:hover{background:var(--rose);color:var(--on-rose)}
.x:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 28px}
.fig{background:var(--bg);border-radius:var(--r-md);padding:var(--s4) 18px}
.fig .k{color:var(--dim-ink);font-size:var(--fs-xs);font-weight:var(--fw-bold);margin:0 0 2px}
.fig .v{font-size:26px;font-weight:var(--fw-bold);margin:0;line-height:1.3}
.fig .v small{font-size:var(--fs-sm);font-weight:var(--fw-reg);color:var(--dim-ink);margin-left:3px}
.sheet-body{padding:var(--s6) 28px 28px}
.sheet-body h3{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--dim-ink);margin:0 0 var(--s3)}
.brk{display:grid;gap:var(--s2)}
.brk-row{background:var(--wash);border-radius:var(--r-md);padding:14px 18px}
.brk-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.brk-top .n{font-weight:var(--fw-bold);display:flex;align-items:center;gap:var(--s2)}
.brk-top .n::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tint,var(--t0))}
.brk-top .m{white-space:nowrap;font-size:var(--fs-base)}
.brk-top .m b{font-weight:var(--fw-bold)}
.brk-top .m span{color:var(--dim-ink);font-size:12.5px}
.tagsplit{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{background:var(--card);color:var(--dim-ink);font-size:var(--fs-xs);padding:3px 12px;border-radius:var(--r-pill);
  white-space:nowrap;box-shadow:var(--shadow-sm)}
.chip b{color:var(--ink);font-weight:var(--fw-bold)}
.chip em{font-style:normal;color:var(--dim)}
.chip.untagged{background:var(--rose-wash);box-shadow:none;color:var(--rose-deep);display:inline-flex;align-items:center;gap:6px}
.chip.untagged::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose-deep)}
.chip.untagged b,.chip.untagged em{color:var(--rose-deep)}
.sheet-nil{color:var(--dim-ink);padding:var(--s3) 28px var(--s7);text-align:center}
.sheet-foot{color:var(--dim-ink);font-size:12.5px;line-height:1.7;margin:var(--s4) 2px 0}
.sheet-foot b{color:var(--ink);font-weight:var(--fw-bold)}

/* narrow: stack, let the page scroll */
@media (max-width:820px){
  body{height:auto;min-height:100vh;overflow:visible;padding:var(--s4) var(--s4) var(--s6)}
  .head{flex-wrap:wrap}
  .head .when{text-align:left}
  .cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .plot-wrap{flex:none;height:300px}
  .tracks-wrap{flex:none;overflow:visible}
  .rd-hint{margin-left:0}
  .big{font-size:34px}
  .sheet-head{padding:20px 20px 12px}
  .figs{padding:0 20px;gap:8px}
  .fig{padding:12px 14px}
  .fig .v{font-size:20px}
  .sheet-body{padding:18px 20px 22px}
  .brk-top{flex-wrap:wrap}
}