@charset "utf-8";
/* =========================================================================
   BACKBENCH — the design system
   -------------------------------------------------------------------------
   The idea: an app should look like the thing it is for. This one is for a
   student's desk, so it is built out of a desk's materials — a ruled sheet,
   highlighter ink, a stack of cards, a clock.

   Two rules hold it together:
     1  Six INKS belong to subjects, and to nothing else. Your Maths is
        always the same colour, everywhere in the app.
     2  Status colours (green / orange / red) are separate from the inks, so
        a colour never has to mean two things at once.
   ========================================================================= */

/* ---- 1 · tokens · light first, everything declared here ---------------- */
:root{
  color-scheme:light dark;

  --bg:#FBFAF7;  --bg-2:#FFFFFF;  --bg-3:#F2F0EA;  --bg-4:#EAE7DE;
  --line:#E6E2D8;  --line-2:#D2CDBF;
  --edge:rgba(19,19,24,.045);
  --tx:#131318;  --tx-2:#55545F;  --tx-3:#86858F;

  /* six subject inks. Validated for colour-blind separation against paper:
     worst adjacent pair ΔE 9.8 (deutan), 21.1 normal, all above 3:1 contrast.
     A subject's name is always written beside its dot, so colour is never
     the only thing carrying the identity. */
  --ink-1:#6F9A00;  --ink-2:#0093B8;  --ink-3:#D6357F;
  --ink-4:#B57A00;  --ink-5:#6F4BD8;  --ink-6:#D2502C;

  --ok:#128A5B;   --ok-bg:rgba(18,138,91,.10);
  --warn:#B4700A; --warn-bg:rgba(180,112,10,.11);
  --bad:#C4382F;  --bad-bg:rgba(196,56,47,.09);

  --mark-1:rgba(255,214,60,.45);
  --mark-2:rgba(255,120,190,.34);
  --mark-3:rgba(70,205,240,.32);
  --mark-4:rgba(150,240,120,.36);

  --solid:#131318;  --solid-tx:#FBFAF7;
  --rule:rgba(19,19,24,.055);      /* the lines on the sheet */
  --grain:.03;

  --r:16px;  --r-sm:11px;  --r-lg:26px;
  --ease:cubic-bezier(.2,.72,.28,1);
  --pop:cubic-bezier(.34,1.4,.5,1);
  --sh:0 1px 1px rgba(19,19,24,.04),0 8px 22px -14px rgba(19,19,24,.28);
  --sh-lg:0 2px 4px rgba(19,19,24,.05),0 30px 60px -30px rgba(19,19,24,.4);
  --rail:240px;
  --gut:clamp(16px,3.2vw,38px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C0C10; --bg-2:#151519; --bg-3:#1D1E24; --bg-4:#25262E;
    --line:#292A33; --line-2:#3A3B46;
    --edge:rgba(255,255,255,.06);
    --tx:#F1EFEA; --tx-2:#9E9DA8; --tx-3:#6D6C78;
    --ink-1:#A9DC3F; --ink-2:#4FD8F5; --ink-3:#FF6FB5;
    --ink-4:#F0B840; --ink-5:#A98BFF; --ink-6:#FF7A5A;
    --ok:#3ECF8E;   --ok-bg:rgba(62,207,142,.12);
    --warn:#FFB020; --warn-bg:rgba(255,176,32,.12);
    --bad:#FF6B5E;  --bad-bg:rgba(255,107,94,.11);
    --mark-1:rgba(255,214,60,.22); --mark-2:rgba(255,120,190,.20);
    --mark-3:rgba(70,205,240,.20); --mark-4:rgba(150,240,120,.20);
    --solid:#F1EFEA; --solid-tx:#0C0C10;
    --rule:rgba(255,255,255,.045);
    --grain:.045;
    --sh:0 1px 1px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
    --sh-lg:0 2px 6px rgba(0,0,0,.55),0 44px 80px -34px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C10; --bg-2:#151519; --bg-3:#1D1E24; --bg-4:#25262E;
  --line:#292A33; --line-2:#3A3B46;
  --edge:rgba(255,255,255,.06);
  --tx:#F1EFEA; --tx-2:#9E9DA8; --tx-3:#6D6C78;
  --ink-1:#A9DC3F; --ink-2:#4FD8F5; --ink-3:#FF6FB5;
  --ink-4:#F0B840; --ink-5:#A98BFF; --ink-6:#FF7A5A;
  --ok:#3ECF8E;   --ok-bg:rgba(62,207,142,.12);
  --warn:#FFB020; --warn-bg:rgba(255,176,32,.12);
  --bad:#FF6B5E;  --bad-bg:rgba(255,107,94,.11);
  --mark-1:rgba(255,214,60,.22); --mark-2:rgba(255,120,190,.20);
  --mark-3:rgba(70,205,240,.20); --mark-4:rgba(150,240,120,.20);
  --solid:#F1EFEA; --solid-tx:#0C0C10;
  --rule:rgba(255,255,255,.045);
  --grain:.045;
  --sh:0 1px 1px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
  --sh-lg:0 2px 6px rgba(0,0,0,.55),0 44px 80px -34px rgba(0,0,0,1);
}

/* ---- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:400 15px/1.6 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none}
body::before{content:"";position:fixed;inset:0;z-index:6;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%}
/* .btn sets display:inline-flex, which would otherwise beat the hidden
   attribute and show every optional control */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--tx);outline-offset:2px;border-radius:7px}
::selection{background:var(--mark-1)}
h1,h2,h3,h4{margin:0;line-height:1.06}
p{margin:0 0 .9em}

.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dsp{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.032em;line-height:.98;text-wrap:balance;
  font-variation-settings:"wdth" 100,"opsz" 40}
.d1{font-size:clamp(2.5rem,6vw,4.4rem)}
.d2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.d3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.d4{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:-.02em;line-height:1.2}
.lead{font-size:1.02rem;line-height:1.62;color:var(--tx-2);max-width:60ch}
.tiny{font-size:.79rem;line-height:1.5;color:var(--tx-3);margin:0}
.lab{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600}
/* an icon dropped into a label or a pill still has to know how big it is */
.lab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.pill svg{width:13px;height:13px;fill:currentColor;stroke:none;vertical-align:-2px}
.mark{background:linear-gradient(var(--mark-1),var(--mark-1));background-size:100% 54%;
  background-position:0 88%;background-repeat:no-repeat;padding:0 .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* At display size a highlighter band turns into a block, so the stroke drops
   to an underline in the first subject ink instead — same gesture, still a
   marker, and it reads at 4rem. */
.dsp .mark,.d1 .mark,.d2 .mark{
  background-image:linear-gradient(var(--ink-1),var(--ink-1));
  background-size:100% 11%;background-position:0 96%;padding:0}
.mark-2{background-image:linear-gradient(var(--mark-2),var(--mark-2))}
.mark-3{background-image:linear-gradient(var(--mark-3),var(--mark-3))}
.mark-4{background-image:linear-gradient(var(--mark-4),var(--mark-4))}

/* ---- 3 · shell --------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh}
.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:16px;
  padding:20px 13px 16px;border-right:1px solid var(--line);background:var(--bg-2);
  overflow-y:auto;scrollbar-width:thin}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:2px 8px 4px}
.brand-m{width:34px;height:34px;flex:none;border-radius:11px;background:var(--solid);
  color:var(--solid-tx);display:grid;place-items:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;
  box-shadow:var(--sh);transform:rotate(-4deg)}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.08rem;
  letter-spacing:-.03em}
.brand-t i{font-style:normal;font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx-3);margin-top:4px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:1px}
.nav-g{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;padding:14px 12px 6px}
.nv{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:10px;border:0;background:none;cursor:pointer;text-align:left;
  color:var(--tx-2);font-size:.91rem;width:100%;
  transition:background .16s var(--ease),color .16s var(--ease)}
.nv:hover{background:var(--bg-3);color:var(--tx)}
.nv[aria-current="page"]{background:var(--solid);color:var(--solid-tx);font-weight:600}
.nv[aria-current="page"] .nv-i{color:var(--solid-tx)}
.nv-i{width:18px;height:18px;flex:none;color:var(--tx-3);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nv-n{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  padding:1px 6px;border-radius:100px;background:var(--bg-4);color:var(--tx-2)}
.nv[aria-current="page"] .nv-n{background:rgba(128,128,128,.35);color:inherit}
.rail-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
.rail-lv{display:flex;align-items:center;gap:11px}
.rail-lv-t{min-width:0}
.rail-lv-t b{display:block;font-size:.85rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-lv-t span{font-size:.7rem;color:var(--tx-3)}

.main{min-width:0;width:100%;max-width:1320px;margin-inline:auto;
  padding:clamp(20px,3vw,42px) var(--gut) 132px}
.view{display:none}
.view.on{display:block;animation:rise .32s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(18px,2.6vw,30px)}
.head-tx{min-width:0}
.head-tx .lead{max-width:54ch}
.head h1{margin-bottom:.16em}

/* ---- the first screen -------------------------------------------------- */
.ob{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,452px);
  gap:clamp(26px,4.5vw,64px);align-items:center;
  min-height:calc(100dvh - clamp(60px,10vh,140px))}
.ob-l{min-width:0}
.ob h1{font-size:clamp(2.3rem,4.6vw,3.9rem);margin:.18em 0 .34em}
.ob-list{display:grid;gap:11px;margin-top:clamp(20px,2.6vw,30px);max-width:44ch}
.ob-i{display:flex;gap:12px;align-items:flex-start}
.ob-i svg{width:19px;height:19px;flex:none;margin-top:3px;fill:none;stroke:var(--tx-3);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob-i b{font-weight:600;letter-spacing:-.012em}
.ob-i span{color:var(--tx-2);font-size:.92rem}
.ob-r{padding:clamp(18px,2.4vw,26px)}
body.onb .nav,body.onb .rail-foot,body.onb .tabs,body.onb .mtop-r{display:none}
body.onb .main{padding-bottom:clamp(24px,4vw,48px)}
body.onb .rail{justify-content:flex-start}

/* the hero: what today is on the left, how you are doing on the right */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,376px);
  gap:clamp(16px,2.4vw,30px);align-items:stretch;margin-bottom:clamp(16px,2.4vw,26px)}
.hero-l{display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:clamp(4px,1vw,14px) 0}
.hero-l h1{margin:.1em 0 .18em}
.hero-say{font-size:1.02rem;color:var(--tx-2);max-width:46ch;margin:0}
.hero-say b{color:var(--tx);font-weight:600}
.hero-r{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.hero-lv{display:flex;align-items:center;gap:14px}
.hero-lv-t{min-width:0}
.hero-lv-t b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.12rem;letter-spacing:-.026em;line-height:1.1}
.hero-lv-t span{font-size:.78rem;color:var(--tx-3)}

/* seven days, at a glance. taller bar = a day you did something */
.wk{display:flex;gap:6px;align-items:flex-end}
.wk-d{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.wk-b{width:100%;height:42px;border-radius:9px;background:var(--bg-3);position:relative;
  overflow:hidden;border:1px solid transparent}
.wk-b i{position:absolute;left:0;right:0;bottom:0;border-radius:8px;
  transition:height .5s var(--ease)}
.wk-b .f{background:var(--ink-1);opacity:.9}
.wk-b .a{background:var(--tx-3);opacity:.5}
.wk-d.now .wk-b{border-color:var(--tx-3)}
.wk-d span{font-size:.6rem;letter-spacing:.06em;color:var(--tx-3);font-weight:600;
  text-transform:uppercase}
.wk-d.now span{color:var(--tx)}

/* ---- 4 · surfaces ------------------------------------------------------ */
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(15px,2vw,22px);box-shadow:inset 0 1px 0 var(--edge)}
button.card,a.card{text-align:left;cursor:pointer;color:inherit;font:inherit;
  text-decoration:none;display:block;
  transition:transform .18s var(--pop),border-color .18s,box-shadow .18s}
button.card:hover,a.card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:var(--sh)}
button.card:active,a.card:active{transform:translateY(-1px)}
.strip-i{transition:background .16s}
.strip-i:hover{background:var(--bg-3)}
.card-q{background:none;border:0;padding:0;box-shadow:none}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr))}
.row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.row-b{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
.sep{height:1px;background:var(--line);border:0;margin:clamp(18px,3vw,32px) 0}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--edge);margin-bottom:clamp(16px,2.4vw,26px)}
.strip-i{padding:clamp(14px,1.8vw,19px);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;min-width:0}
.strip-i:last-child{border-right:0}
.strip-i small{font-size:.77rem;color:var(--tx-3);line-height:1.4}
.big{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1;font-weight:500;letter-spacing:-.05em}

.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.sec-h::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-h .btn,.sec-h .row{order:3}

/* the ruled sheet — used only where you read or write, like a real one */
.sheet{background-color:var(--bg-2);
  background-image:repeating-linear-gradient(var(--bg-2) 0 30px,var(--rule) 30px 31px);
  background-position:0 6px;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--edge)}

/* ---- 5 · controls ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:9px 16px;border-radius:100px;border:1px solid var(--line-2);background:var(--bg-2);
  cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .16s var(--pop),border-color .16s,background .16s,box-shadow .16s}
.btn:hover{border-color:var(--tx-3);transform:translateY(-1.5px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn-p{background:var(--solid);color:var(--solid-tx);border-color:transparent;box-shadow:var(--sh)}
.btn-p:hover{border-color:transparent;box-shadow:var(--sh-lg)}
.btn-q{border-color:transparent;background:none;color:var(--tx-2);box-shadow:none}
.btn-q:hover{background:var(--bg-3);color:var(--tx);border-color:transparent}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-lg{padding:13px 26px;font-size:.95rem}
.btn-bad{color:var(--bad);border-color:transparent;background:none;box-shadow:none}
.btn-bad:hover{background:var(--bad-bg);border-color:transparent}
.btn-ic{width:34px;height:34px;padding:0;border-radius:100px}
.btn[disabled]{opacity:.42;pointer-events:none}
/* AI is optional here, so it never looks like the main path */
.btn-ai{border-style:dashed;border-color:var(--line-2);color:var(--tx-2)}
.btn-ai:hover{border-style:solid;color:var(--tx)}

.inp,select.inp,textarea.inp{width:100%;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);font-size:.94rem;
  transition:border-color .15s,box-shadow .15s,background .15s}
.inp:focus{outline:none;border-color:var(--tx);background:var(--bg-2);
  box-shadow:0 0 0 3px var(--mark-1)}
textarea.inp{resize:vertical;min-height:96px;line-height:1.62}
select.inp{appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f{display:flex;flex-direction:column;gap:6px}
.seg{display:inline-flex;padding:3px;border-radius:100px;background:var(--bg-3);gap:2px;
  border:1px solid var(--line)}
.seg button{border:0;background:none;padding:6px 15px;border-radius:100px;cursor:pointer;
  font-size:.82rem;color:var(--tx-2);font-weight:500;transition:.16s}
.seg button[aria-pressed="true"]{background:var(--bg-2);color:var(--tx);font-weight:600;
  box-shadow:var(--sh)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--bg-2);font-size:.8rem;cursor:pointer;
  color:var(--tx-2);font-weight:500;transition:.15s}
.chip:hover{border-color:var(--tx-3);color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--solid);color:var(--solid-tx);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips-x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips-x::-webkit-scrollbar{display:none}

/* ---- 6 · ink. a subject's colour, everywhere ---------------------------- */
.ink-1{--ink:var(--ink-1)} .ink-2{--ink:var(--ink-2)} .ink-3{--ink:var(--ink-3)}
.ink-4{--ink:var(--ink-4)} .ink-5{--ink:var(--ink-5)} .ink-6{--ink:var(--ink-6)}
.dot{width:9px;height:9px;border-radius:100px;flex:none;background:var(--ink,var(--tx-3))}
.tag-ink{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;
  border-radius:100px;font-size:.74rem;font-weight:600;
  background:color-mix(in srgb,var(--ink,var(--tx-3)) 15%,transparent);
  color:var(--ink,var(--tx-2))}
.tag-ink::before{content:"";width:6px;height:6px;border-radius:100px;background:currentColor}

/* progress rings — the only chart in the app, so it earns its place */
.ring{--p:0;width:44px;height:44px;flex:none;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring .bg{stroke:var(--bg-4)}
.ring .fg{stroke:var(--ink,var(--tx));
  stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c) - var(--c) * var(--p) / 100);
  transition:stroke-dashoffset .8s var(--ease)}
.ring b{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:500;
  letter-spacing:-.05em}
.ring-lg{width:92px;height:92px}
.ring-lg circle{stroke-width:6}
.ring-lg b{font-size:1.05rem}

.meter{height:7px;border-radius:100px;background:var(--bg-3);position:relative;overflow:visible}
.meter i{display:block;height:100%;border-radius:100px;background:var(--ink,var(--tx-3));
  transition:width .7s var(--ease)}
.meter.ok i{background:var(--ok)} .meter.warn i{background:var(--warn)}
.meter.bad i{background:var(--bad)}
.meter .tgt{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--tx);opacity:.55}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;
  font-size:.72rem;font-weight:600;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-n{background:var(--bg-3);color:var(--tx-2)}

/* ---- charts. Three, and each does one job -------------------------------
   dots  = state, one square per class      (status colours, keyed)
   bars  = magnitude over an ordered run    (one hue, every bar labelled)
   heat  = how much, day by day             (one hue, light → dark)
   Text never wears a series colour; the marks carry it. */
.dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.dots i{width:9px;height:9px;border-radius:3px;background:var(--bg-4);flex:none}
.dots i.p{background:var(--ok)}
.dots i.a{background:var(--bad)}
.dots i.c{background:var(--line-2)}
.key{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:.7rem;color:var(--tx-3)}
.key b{display:inline-flex;align-items:center;gap:5px;font-weight:500}
.key b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--bg-4)}
.key b.p::before{background:var(--ok)}
.key b.a::before{background:var(--bad)}
.key b.c::before{background:var(--line-2)}

.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,12px);height:132px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%}
.bar-t{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}
.bar-t i{width:100%;border-radius:5px 5px 0 0;background:var(--tx-3);opacity:.5;
  transition:height .7s var(--ease);min-height:3px}
.bar.now .bar-t i{background:var(--tx);opacity:1}
.bar b{font-family:"JetBrains Mono",monospace;font-size:.72rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.bar span{font-size:.62rem;color:var(--tx-3);font-weight:600;letter-spacing:.04em}

.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);
  grid-auto-columns:13px;justify-content:start;gap:4px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none}
.heat::-webkit-scrollbar{display:none}
.heat i{width:13px;height:13px;border-radius:4px;background:var(--bg-3)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--ink-1) 28%,var(--bg-3))}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--ink-1) 52%,var(--bg-3))}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--ink-1) 76%,var(--bg-3))}
.heat i[data-l="4"]{background:var(--ink-1)}
.heat-k{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--tx-3);margin-top:10px}
.heat-k i{width:11px;height:11px;border-radius:3px;background:var(--bg-3)}
.heat-k i[data-l="1"]{background:color-mix(in srgb,var(--ink-1) 28%,var(--bg-3))}
.heat-k i[data-l="2"]{background:color-mix(in srgb,var(--ink-1) 52%,var(--bg-3))}
.heat-k i[data-l="3"]{background:color-mix(in srgb,var(--ink-1) 76%,var(--bg-3))}
.heat-k i[data-l="4"]{background:var(--ink-1)}

/* a compact read of every subject at once */
.pulse{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.pl{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-2);min-width:0;
  transition:transform .16s var(--pop),border-color .16s}
.pl:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pl-t{min-width:0;flex:1}
.pl-t b{display:block;font-size:.84rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-t .meter{display:block;width:100%;margin-top:6px}
.pl-p{font-family:"JetBrains Mono",monospace;font-size:.82rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}

/* ---- 7 · rows ---------------------------------------------------------- */
.rw{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s;
  background:none;text-align:left;width:100%;border-left:0;border-right:0;border-top:0;
  color:inherit;font:inherit;cursor:default}
.rw:first-of-type{border-top:1px solid var(--line)}
.rw:hover{background:var(--bg-2)}
button.rw,a.rw{cursor:pointer;text-decoration:none}
.rw-n{font-weight:600;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rw-m{font-size:.78rem;color:var(--tx-3);display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rw-r{display:flex;align-items:center;gap:7px}

/* ---- 8 · library tiles ------------------------------------------------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--edge);text-align:left;cursor:pointer;color:inherit;
  font:inherit;transition:transform .18s var(--pop),border-color .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh)}
.tile-th{aspect-ratio:4/3;border-radius:10px;background:var(--bg-3);display:grid;
  place-items:center;overflow:hidden;position:relative}
.tile-th img{width:100%;height:100%;object-fit:cover}
.tile-th svg{width:30px;height:30px;stroke:var(--tx-3);fill:none;stroke-width:1.4}
.tile-n{font-weight:600;font-size:.9rem;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-m{font-size:.72rem;color:var(--tx-3);display:flex;gap:6px;align-items:center}
.tile-x{position:absolute;top:8px;right:8px;opacity:0;transition:.16s}
.tile:hover .tile-x,.tile:focus-within .tile-x{opacity:1}
@media (hover:none){.tile-x{opacity:1}}

/* ---- 9 · reading & notes ----------------------------------------------- */
.prose{padding:clamp(16px,2.4vw,30px);line-height:1.75;font-size:1rem;
  background-position:0 clamp(16px,2.4vw,30px)}
.prose h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;
  letter-spacing:-.028em;margin:1.4em 0 .4em}
.prose h3{font-weight:700;font-size:1.02rem;margin:1.35em 0 .3em;letter-spacing:-.015em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;margin:.4em 0 1em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--tx-3)}
.prose code{font-family:"JetBrains Mono",monospace;font-size:.85em;background:var(--bg-3);
  padding:1px 5px;border-radius:5px}
.prose pre{background:var(--bg-3);padding:13px 15px;border-radius:var(--r-sm);overflow-x:auto;
  border:1px solid var(--line)}
.prose pre code{background:none;padding:0}
.prose blockquote{margin:.6em 0 1em;padding:2px 0 2px 15px;border-left:3px solid var(--mark-1);
  color:var(--tx-2)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;margin:.4em 0 1.1em}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.prose th{background:var(--bg-3);font-weight:600}
.prose img{border-radius:var(--r-sm);margin:.5em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.qa{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:var(--bg);
  overflow:hidden}
.qa>summary{cursor:pointer;padding:12px 15px;font-weight:600;list-style:none;display:flex;
  gap:11px;align-items:flex-start;letter-spacing:-.012em}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::before{content:attr(data-m);font-family:"JetBrains Mono",monospace;font-size:.66rem;
  padding:2px 7px;border-radius:100px;background:var(--bg-3);color:var(--tx-3);flex:none;
  margin-top:2px;min-width:32px;text-align:center;font-weight:500}
.qa>div{padding:0 15px 14px;color:var(--tx-2)}

/* ---- 10 · flashcards --------------------------------------------------- */
.deckwrap{display:grid;place-items:center;gap:18px;padding:10px 0}
.fc{position:relative;width:min(100%,560px);aspect-ratio:8/5;perspective:1600px;cursor:pointer;
  background:none;border:0;padding:0}
.fc::before,.fc::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line);z-index:-1}
.fc::before{transform:translateY(9px) rotate(1.4deg) scale(.978);opacity:.75}
.fc::after{transform:translateY(17px) rotate(-1.8deg) scale(.952);opacity:.45}
.fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--ease)}
.fc[aria-pressed="true"] .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center;
  padding:30px;text-align:center;box-shadow:var(--sh-lg),inset 0 1px 0 var(--edge);overflow:auto}
.fc-b{transform:rotateY(180deg);background:var(--bg-3)}
.fc-f>div,.fc-b>div{max-width:44ch}
.fc-q{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.16}
.fc-a{font-size:1.02rem;line-height:1.62;color:var(--tx-2)}
.fc-tag{position:absolute;top:15px;left:17px;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);font-weight:600}

/* ---- 11 · focus timer -------------------------------------------------- */
.focus{display:grid;place-items:center;gap:22px;padding:clamp(18px,4vw,40px) 0}
.clock{position:relative;width:min(76vw,300px);aspect-ratio:1;display:grid;place-items:center}
.clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.clock circle{fill:none;stroke-width:7;stroke-linecap:round}
.clock .bg{stroke:var(--bg-3)}
.clock .fg{stroke:var(--tx);stroke-dasharray:var(--c);
  stroke-dashoffset:calc(var(--c) - var(--c) * var(--p,0) / 100);transition:stroke-dashoffset 1s linear}
.clock.run .fg{stroke:var(--ok)}
.clock.rest .fg{stroke:var(--ink-2)}
.clock b{font-family:"JetBrains Mono",monospace;font-size:clamp(2.6rem,9vw,3.6rem);
  font-weight:500;letter-spacing:-.05em;line-height:1}
.clock span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;margin-top:6px}

/* ---- 12 · timetable ---------------------------------------------------- */
.tt{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.tt table{border-collapse:collapse;width:100%;min-width:690px;font-size:.85rem}
.tt th,.tt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;
  vertical-align:top}
.tt th{padding:11px 12px;text-align:left;font-weight:600;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);background:var(--bg-3)}
.tt th:last-child,.tt td:last-child{border-right:0}
.tt tr:last-child td{border-bottom:0}
.tt .slot{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 11px;min-height:58px;position:relative;transition:.15s;color:inherit;font:inherit}
.tt .slot:hover{background:var(--bg-3)}
.tt .slot b{display:block;font-weight:600;font-size:.84rem;line-height:1.25;letter-spacing:-.012em}
.tt .slot span{font-size:.72rem;color:var(--tx-3)}
.tt .slot.has{background:color-mix(in srgb,var(--ink,#888) 11%,transparent)}
.tt .slot.has::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:var(--ink,var(--tx-3))}
.tt .hour{padding:9px 11px;font-size:.7rem;color:var(--tx-3);white-space:nowrap;
  background:var(--bg-3);font-family:"JetBrains Mono",monospace}

/* ---- 13 · tasks -------------------------------------------------------- */
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--line);transition:background .15s}
.task:first-of-type{border-top:1px solid var(--line)}
.task:hover{background:var(--bg-2)}
.task.done{opacity:.44}
.task.done .task-t{text-decoration:line-through}
.tick{width:20px;height:20px;border-radius:7px;border:1.6px solid var(--line-2);flex:none;
  cursor:pointer;background:none;display:grid;place-items:center;margin-top:1px;padding:0;
  transition:.15s var(--pop)}
.tick:hover{border-color:var(--tx-3);transform:scale(1.08)}
.tick svg{width:11px;height:11px;stroke:var(--solid-tx);stroke-width:3;fill:none;opacity:0;
  stroke-linecap:round;stroke-linejoin:round}
.tick[aria-pressed="true"]{background:var(--solid);border-color:transparent}
.tick[aria-pressed="true"] svg{opacity:1}
.task-b{min-width:0;flex:1}
.task-t{font-weight:600;line-height:1.35;letter-spacing:-.012em}

/* ---- 14 · odds and ends ------------------------------------------------ */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:26px 20px;display:grid;
  place-items:center;gap:5px;text-align:center;cursor:pointer;transition:.18s;background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--tx);background:var(--bg-3)}
.drop b{font-weight:700;letter-spacing:-.015em}
.drop svg{width:22px;height:22px;stroke:var(--tx-3);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.empty{text-align:center;padding:clamp(22px,3.4vw,34px) 20px;border:1.5px dashed var(--line);
  border-radius:var(--r);color:var(--tx-3)}
.empty h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.16rem;
  letter-spacing:-.026em;color:var(--tx);margin-bottom:.25em}
.empty p{max-width:44ch;margin:0 auto .9em;font-size:.88rem;line-height:1.5}
.empty .row{justify-content:center}
.note{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--line);font-size:.87rem;color:var(--tx-2)}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--tx-3);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;left:50%;bottom:94px;transform:translate(-50%,14px);z-index:80;
  background:var(--solid);color:var(--solid-tx);padding:11px 21px;border-radius:100px;
  font-size:.87rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transition:.3s var(--pop);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.think{display:inline-flex;align-items:center;gap:9px;color:var(--tx-3);font-size:.88rem}
.think i{width:6px;height:6px;border-radius:100px;background:var(--tx-3);
  animation:blink 1.2s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);color:var(--tx);
  padding:0;max-width:min(580px,94vw);width:100%;box-shadow:var(--sh-lg)}
dialog::backdrop{background:rgba(8,8,12,.55);backdrop-filter:blur(4px)}
.dlg{padding:clamp(19px,3vw,28px)}
.dlg h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;
  letter-spacing:-.03em;margin-bottom:.55em}
.dlg-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.dlg-body{max-height:min(62vh,540px);overflow:auto;margin:0 -4px;padding:0 4px}

/* ---- 15 · phone -------------------------------------------------------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:color-mix(in srgb,var(--bg-2) 90%,transparent);backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabs-in{display:flex;justify-content:space-around;max-width:540px;margin-inline:auto}
.tb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 6px;border:0;background:none;cursor:pointer;color:var(--tx-3);font-size:.62rem;
  font-weight:600;border-radius:10px}
.tb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tb[aria-current="page"]{color:var(--tx)}
.tb[aria-current="page"] svg{stroke-width:2.2}
.tb[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:18px;height:2.5px;border-radius:3px;background:var(--tx)}
.mtop{display:none;align-items:center;justify-content:space-between;gap:12px;padding:11px 0 8px;
  position:sticky;top:0;z-index:40;margin-bottom:2px;
  background:linear-gradient(var(--bg) 76%,transparent)}
.mtop-r{display:flex;align-items:center;gap:7px}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .tabs{display:block}
  .main{padding-bottom:112px}
  .mtop{display:flex}
  .big{font-size:clamp(1.55rem,7vw,2rem)}
  .head{margin-bottom:15px}
  .ob{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:6px}
  .ob h1{font-size:clamp(2.1rem,8.4vw,2.9rem)}
  .hero{grid-template-columns:1fr;gap:14px}
  .hero-r{padding:15px}
  .strip{grid-template-columns:1fr 1fr}
  .strip-i:nth-child(2n){border-right:0}
  .strip-i:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,146px),1fr));gap:10px}
}
@media (max-width:560px){
  .rw{padding:11px 8px;gap:10px}
  .task{padding:11px 8px}
  .prose{padding:16px 14px}
}
@media print{
  .rail,.tabs,.toast,.mtop,.btn,body::before{display:none!important}
  body{background:#fff;color:#000}
  .app{grid-template-columns:1fr}
  .card,.sheet{border-color:#ccc;box-shadow:none;background:#fff}
}