/* ARISE — clean dark UI.
 *
 * Cosmetics only; the structure is unchanged. The System look (notched panels,
 * glowing frames, canvas effects) is gone in favour of soft rounded surfaces,
 * one blue accent and a lot of breathing room.
 *
 * Rule the file lives by: every colour is a token on :root, redefined once for
 * light. Nothing reaches for a literal, so no state rule can ever compete with
 * a theme rule.
 */

:root{
  /* Near-black, very slightly blue — a pure #000 ground makes cards look like
     holes rather than raised surfaces. */
  --void:#0A0A0C;
  --card:#16171B;        /* panels */
  --raise:#1F2026;       /* inputs, chips, anything sitting on a panel */
  --line:#2A2C33;        /* hairlines — separation, never decoration */

  --accent:#3B82F6;
  --accent-soft:rgba(59,130,246,.14);
  --accent-ink:#FFFFFF;

  --green:#22C55E;
  --amber:#F59E0B;
  --red:#EF4444;
  --violet:#A78BFA;

  --ink:#F2F4F7;
  --ink-2:#9AA1AC;
  --ink-3:#6B7280;

  --body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:16px;      /* cards */
  --r-sm:12px;   /* inputs, small controls */
  --pad:20px;
}

:root[data-theme="light"]{
  --void:#F4F5F7;
  --card:#FFFFFF;
  --raise:#F0F2F5;
  --line:#E3E6EB;

  --accent:#2563EB;
  --accent-soft:rgba(37,99,235,.12);
  --accent-ink:#FFFFFF;

  --green:#15803D;
  --amber:#B45309;
  --red:#DC2626;
  --violet:#7C3AED;

  --ink:#101317;
  --ink-2:#5A626D;
  --ink-3:#8A929D;
}

*{box-sizing:border-box;}

/* The `hidden` attribute must actually hide things. The browser's rule is
   display:none at the lowest possible specificity, so any class that sets
   display silently beats it. Fixed once, globally. */
[hidden]{display:none !important;}

html,body{height:100%;}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;
}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;padding:0;}
h1,h2,h3,h4,p,ul,ol{margin:0;}
ul,ol{list-style:none;padding:0;}
.shell,.tabs,.sheet-head{-webkit-user-select:none;user-select:none;}
input,output,select{-webkit-user-select:text;user-select:text;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}

/* One soft wash at the top. No canvas, no particles. */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 40% at 50% 0%, rgba(59,130,246,.07), transparent 70%);}

.shell{position:relative;z-index:2;max-width:520px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 104px;}
.view{display:none;}
.view.on{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}}

.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 18px;}
.pagehead h1{font-size:28px;font-weight:800;letter-spacing:-.02em;}
.pagehead .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px;font-weight:500;}

/* ----------------------------------------------------------- panels --- */
/* .panel/.in kept as a pair so the markup does not change; the outer is now
   just a wrapper and the inner is the card. */
.panel{margin-bottom:12px;}
.panel > .in{background:var(--card);border-radius:var(--r);padding:16px 16px 18px;}
/* .v is only ever a completed goal, .r only ever an open penalty — a hairline
   ring in the semantic colour, never a glow. */
.panel.v > .in{box-shadow:inset 0 0 0 1px rgba(34,197,94,.3);}
.panel.r > .in{box-shadow:inset 0 0 0 1px rgba(239,68,68,.35);}
.mb{margin-bottom:12px;}
.ticked{}   /* corner marks retired; class kept so markup need not change */

.eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.02em;color:var(--ink-2);}
.eyebrow.r{color:var(--red);}

/* ============================================================== the T --- */
/* 90px = the shell's own top padding plus the fixed tab bar. Anything larger
   leaves a visible dead band under the two legs. */
.tframe{display:flex;flex-direction:column;gap:12px;height:calc(100dvh - 90px);
  min-height:520px;}
.tbottom{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0;}
.tbox{min-height:0;min-width:0;display:flex;}
.tbox > .in{height:100%;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.scroller{overflow-y:auto;flex:1;margin:10px -2px 0;padding:0 2px 2px;
  display:flex;flex-direction:column;gap:8px;scrollbar-width:none;}
.scroller::-webkit-scrollbar{display:none;}
/* Natural height, never stretched. `flex:1 0 auto` here inflated three habits
   into three slabs and squeezed twelve into unreadable slivers — the scroller
   is what handles overflow, not the rows. */
.scroller > .hb,.scroller > .tk{flex:0 0 auto;}

.crown{display:flex;align-items:center;gap:14px;}
.sigil{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);}
.sigil svg{display:none;}                     /* the hex frame is gone */
.sigil .rk{font-size:24px;font-weight:800;color:var(--accent);letter-spacing:-.02em;}
.crown .who{flex:1;min-width:0;}
.crown h1{font-size:21px;font-weight:800;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crown .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;font-weight:500;}
.datestamp{text-align:right;flex:0 0 auto;}
.datestamp .d{font-size:14px;font-weight:700;}
.datestamp .t{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px;
  font-variant-numeric:tabular-nums;}

.metrics{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.metric .lab{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--ink-3);margin-bottom:6px;font-weight:500;}
.metric .lab b{color:var(--ink-2);font-weight:600;}
.metric .lab .hot{color:var(--ink);font-weight:700;}

/* Continuous bars, not segmented gauges. The gauge markup emits <i> children,
   so the track is the parent and the fill is a flex row of lit segments with no
   gaps — reads as one solid bar. */
.gauge{height:7px;border-radius:99px;background:var(--raise);display:flex;overflow:hidden;}
.gauge i{flex:1;background:transparent;transition:background .35s ease;}
.gauge i.on{background:var(--accent);}
.gauge.v i.on{background:var(--violet);}
.gauge.g i.on{background:var(--green);}
.gauge.a i.on{background:var(--amber);}
.gauge.xs{height:5px;}

.divider{height:1px;background:var(--line);margin:16px 0 14px;}
.goalstrip .gname{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.goalstrip .gsub{font-size:12px;color:var(--ink-3);margin-top:3px;font-weight:500;}
.goalstrip .gpct{font-size:20px;font-weight:800;color:var(--green);letter-spacing:-.02em;}
.goalstrip .gpct.part{color:var(--amber);}

.bh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.bh .ct{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.bh .ct s{color:var(--ink-3);text-decoration:none;font-weight:600;}
.bh .hint{font-size:10.5px;color:var(--ink-3);font-weight:600;}
.bh .hint.live{color:var(--amber);}

/* --------------------------------------------- the day's shape --- */
/* A horizontal rail of time-boxes between the crown and the two legs. It scrolls
   sideways inside itself; the page body must never move. */
.rstrip{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:1px 0 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.rstrip::-webkit-scrollbar{display:none;}
.rblk{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 10px;
  background:var(--card);border-radius:99px;cursor:pointer;transition:background .15s;}
.rblk .rico{font-size:13px;flex:0 0 auto;line-height:1;}
.rblk .rnm{font-size:12px;font-weight:700;letter-spacing:-.01em;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rblk .rtm{font-size:10.5px;font-weight:700;color:var(--ink-3);flex:0 0 auto;
  font-variant-numeric:tabular-nums;}
.rblk.past{opacity:.4;}
.rblk.now{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);}
.rblk.now .rnm{color:var(--accent);}
.rblk.now .rtm{color:var(--accent);}

/* ---------------------------------------------------------- habits --- */
.hb{display:flex;align-items:flex-start;gap:10px;padding:11px;cursor:pointer;
  background:var(--raise);border-radius:var(--r-sm);transition:background .15s;}
.hb:active{background:var(--line);}
.hb.done{background:var(--accent-soft);}
.hb.locked{opacity:.4;cursor:not-allowed;}
.box{flex:0 0 auto;width:20px;height:20px;border-radius:7px;
  border:2px solid var(--ink-3);display:grid;place-items:center;transition:.15s;}
.box svg{width:11px;height:11px;opacity:0;transform:scale(.5);transition:.15s;}
.box svg path{fill:none;stroke:var(--accent-ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;}
.hb.done .box{background:var(--accent);border-color:var(--accent);}
.hb.done .box svg{opacity:1;transform:scale(1);}

.hbody{flex:1;min-width:0;}
.hb .nm{font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
.hb.done .nm{color:var(--ink-2);}
/* The leg is ~118px of usable width, so the domain and the streak are fighting
   for it. The streak takes what it needs; the domain gets the rest and tracks
   tight enough that a real word like FITNESS fits without an ellipsis. */
.hfoot{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:4px;}
.hb .dom{flex:1 1 auto;min-width:0;font-size:9.5px;letter-spacing:-.01em;
  color:var(--ink-3);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb .stk{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--amber);white-space:nowrap;}
.qrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.qty{font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  padding:2px 7px;border-radius:99px;}
.qty.over{color:var(--green);background:rgba(34,197,94,.14);}
.owed{font-size:10px;font-weight:700;color:var(--red);background:rgba(239,68,68,.13);
  padding:2px 7px;border-radius:99px;}
.hb .over{flex:0 0 auto;align-self:center;width:26px;height:26px;border-radius:8px;
  background:rgba(34,197,94,.15);color:var(--green);font-size:16px;font-weight:700;
  display:grid;place-items:center;}
.dots{display:flex;gap:3px;margin-top:7px;}
.dots i{width:100%;max-width:9px;height:4px;border-radius:99px;background:var(--line);}
.dots i.on{background:var(--amber);}
.dots i.miss{background:rgba(239,68,68,.45);}

/* ----------------------------------------------------------- tasks --- */
.tk{display:flex;gap:10px;padding:11px 2px;cursor:pointer;align-items:flex-start;
  border-bottom:1px solid var(--line);}
.tk:last-child{border-bottom:none;}
.tk .dot{flex:0 0 auto;width:8px;height:8px;border-radius:99px;background:var(--accent);margin-top:5px;}
.tk.done .dot{background:var(--ink-3);}
.tk .tx{flex:1;font-size:13.5px;line-height:1.35;font-weight:600;}
.tk.done .tx{color:var(--ink-3);text-decoration:line-through;font-weight:500;}
.tk .mt{font-size:10.5px;color:var(--ink-3);margin-top:4px;font-weight:600;}
.tk .kill{flex:0 0 auto;color:var(--ink-3);font-size:17px;line-height:1;padding:0 2px;}
/* The last penalty cannot be removed — the System needs something to assign. */
.row .kill{flex:0 0 auto;color:var(--ink-3);font-size:17px;line-height:1;padding:0 6px;}
.row .kill[disabled]{opacity:.25;cursor:not-allowed;}
.tk.stale .tx{color:var(--amber);}
.tk.pen .tx{color:var(--red);}
/* A blown deadline is the loudest thing on the row: it costs 20% and a penalty. */
.tk.over .dot{background:var(--red);}
.tk.over .tx{color:var(--red);}
.tk.over .mt{color:var(--red);font-weight:700;}
/* A System assignment: issued, not typed. The violet dot separates it at a
   glance from the tasks Bart set himself, and it carries no delete. */
.tk.sys .dot{background:var(--violet);}
.tk.sys.done .dot{background:var(--ink-3);}
.tk.sys .mt{color:var(--violet);}
.tk.sys.done .mt{color:var(--ink-3);}

/* -------------------------------------------------------- penalties --- */
.pen-lead{margin-top:9px;font-size:13px;line-height:1.5;color:var(--ink-2);font-weight:500;}
.pen-lead b{color:var(--red);font-weight:700;}
.pen-title{font-size:17px;font-weight:800;color:var(--red);margin-top:8px;letter-spacing:-.01em;}
.pen-meta{font-size:11.5px;color:var(--ink-2);margin-top:5px;font-weight:600;}
.pen-clear{margin-top:12px;}

/* ------------------------------------------------------ list rows --- */
.list{display:flex;flex-direction:column;gap:8px;}
.row{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;
  background:var(--raise);border-radius:var(--r-sm);}
.row.is-archived{opacity:.5;}
.row-emoji{font-size:19px;width:24px;text-align:center;flex:0 0 auto;}
.row-body{flex:1;min-width:0;}
.row-name{font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-weight:600;}
.streak{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--amber);}
.streak.is-zero{color:var(--ink-3);}
.row-drag{color:var(--ink-3);font-size:12px;padding:4px 2px;line-height:1;}
.row-drag[disabled]{opacity:.25;}

/* --------------------------------------------------------- ascent --- */
.ascent{display:flex;flex-direction:column;}
.arow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px;}
.arow:last-child{border-bottom:none;}
.arow span{color:var(--ink-2);font-weight:600;}
.arow b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.arow b.good{color:var(--green);}
.arow b.bad{color:var(--red);}
.arow b.hot{color:var(--accent);}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.stat{background:var(--raise);border-radius:var(--r-sm);padding:15px 10px;text-align:center;}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;}
.stat span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:4px;font-weight:600;}

.statcard{background:var(--raise);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;}
.statcard-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.statcard-head b{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.heat{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;}
.heat i{aspect-ratio:1;border-radius:4px;background:var(--line);display:block;}
.heat i.on{background:var(--accent);}
.heat i.off{background:rgba(239,68,68,.3);}
.heat i.na{opacity:.35;}
.statfoot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;
  font-size:11.5px;color:var(--ink-3);font-weight:600;}
.statfoot b{color:var(--ink);font-weight:700;}

/* ------------------------------------------------------------ goals --- */
.goalrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.goalrow h4{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.goalpct{font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.panel.v .goalpct{color:var(--green);}
.panel.v .goalrow h4{color:var(--ink-2);}
.gmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.pillchip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;
  color:var(--ink-2);background:var(--raise);}
.pillchip.t-flagship{color:var(--amber);background:rgba(245,158,11,.14);}
.pillchip.t-major{color:var(--violet);background:rgba(167,139,250,.14);}
.pillchip.t-standard{color:var(--accent);background:var(--accent-soft);}
.pillchip.t-minor{color:var(--green);background:rgba(34,197,94,.14);}
.pillchip.boost{color:var(--violet);background:rgba(167,139,250,.14);}
.gnote{font-size:13px;color:var(--ink-2);line-height:1.5;margin:11px 0 13px;}

/* ------------------------------------------------- the protocol --- */
.sechead{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink-3);
  margin:22px 0 10px;}

.runhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:12px;}
.runbig{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;}
.runof{font-size:16px;font-weight:700;color:var(--ink-3);}
.runhead .sub-l{margin-top:5px;}
.runpace{flex:0 0 auto;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:99px;
  background:var(--raise);}
.runpace.good{color:var(--green);background:rgba(34,197,94,.14);}
.runpace.bad{color:var(--amber);background:rgba(245,158,11,.14);}

.ladder{display:flex;flex-direction:column;margin-top:10px;}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.lrow:last-child{border-bottom:none;}
.lrank{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:var(--ink-3);background:var(--raise);}
.lrow.got .lrank{color:var(--green);background:rgba(34,197,94,.14);}
.lrow.here .lrank{color:var(--accent-ink);background:var(--accent);}
.lmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:11.5px;color:var(--ink-3);font-weight:600;}
.lmeta b{font-size:13.5px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.lstate{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink-3);text-align:right;}
.lrow.got .lstate{color:var(--green);}

.phaselist{display:flex;flex-direction:column;margin-top:10px;}
.ph{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.ph:last-child{border-bottom:none;}
.ph-n{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--ink-3);background:var(--raise);}
.ph.past .ph-n{color:var(--green);background:rgba(34,197,94,.14);}
.ph.now .ph-n{color:var(--accent-ink);background:var(--accent);}
.ph.ahead{opacity:.55;}
.ph-body{flex:1;min-width:0;}
.ph-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ph-name{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.ph.now .ph-name{color:var(--accent);}
.ph-days{font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap;}
.ph-note{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:7px 0 0;font-weight:500;}
.ph-skills{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.ph-score{font-size:10.5px;color:var(--ink-3);font-weight:700;margin-top:7px;}

/* -------------------------------------- the assignment library --- */
.queue{margin-top:12px;}
.qdom{margin-bottom:16px;}
.qdom:last-child{margin-bottom:0;}
.qhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.qhead span{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink-2);}
.qhead b{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.qrow-a{display:flex;align-items:baseline;gap:9px;padding:6px 0;font-size:12.5px;}
.qmk{flex:0 0 auto;width:11px;text-align:center;color:var(--ink-3);font-size:11px;}
.qtx{flex:1;min-width:0;color:var(--ink-2);font-weight:500;}
.qct{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;}
.qrow-a.now .qmk,.qrow-a.now .qct{color:var(--violet);}
.qrow-a.now .qtx{color:var(--ink);font-weight:700;}
.qrow-a.got .qmk,.qrow-a.got .qct{color:var(--green);}
.qrow-a.got .qtx{color:var(--ink-3);text-decoration:line-through;}

/* ----------------------------------------------- skills by domain --- */
.domsec .dbody{display:none;}
.domsec.open .dbody{display:block;margin-top:6px;}
.domhead{width:100%;display:flex;align-items:center;gap:10px;padding:2px 0;text-align:left;}
.dcaret{color:var(--ink-3);font-size:11px;transition:transform .18s;display:inline-block;}
.domsec.open .dcaret{transform:rotate(90deg);color:var(--accent);}
.dname{flex:1;min-width:0;font-size:15px;font-weight:800;letter-spacing:-.01em;}
.dcount{font-size:12.5px;color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums;}
.dmult{font-size:10.5px;font-weight:700;color:var(--violet);background:rgba(167,139,250,.14);
  padding:3px 8px;border-radius:99px;}

.skill{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.skill:last-child{border-bottom:none;}
.skill .sg{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;background:var(--accent-soft);}
.skill.locked .sg{background:var(--raise);opacity:.65;}
.skill h4{font-size:15px;font-weight:700;margin:2px 0 3px;letter-spacing:-.01em;}
.skill.locked h4{color:var(--ink-2);}
.skill p{font-size:12.5px;color:var(--ink-3);line-height:1.45;font-weight:500;}
.skill h4 .tick{color:var(--green);font-size:13px;}
.sdom{font-size:10px;color:var(--accent);font-weight:700;}
.skill.locked .sdom{color:var(--ink-3);}
.snone{font-size:12.5px;color:var(--ink-3);padding:10px 0;font-weight:500;}

.reqs{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.req{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);font-weight:600;}
.req .mk{flex:0 0 auto;width:12px;}
.req .rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.req b{color:var(--ink-2);font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.req.met{color:var(--green);}
.req.met b{color:var(--green);}
.req .auto{flex:0 0 auto;font-size:9px;font-weight:700;color:var(--ink-3);
  background:var(--raise);padding:2px 6px;border-radius:99px;}
.req .nudge{flex:0 0 auto;display:flex;gap:4px;}
.req .nudge button{width:24px;height:24px;border-radius:7px;background:var(--raise);
  color:var(--accent);font-size:14px;font-weight:700;display:grid;place-items:center;}
.reqbar{height:4px;border-radius:99px;background:var(--line);margin-top:12px;overflow:hidden;}
.reqbar i{display:block;height:100%;background:var(--accent);border-radius:99px;}

/* ----------------------------------------------- system identity --- */
.idrow{display:flex;align-items:center;gap:14px;margin-top:14px;}
.idsigil{flex:0 0 auto;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-size:26px;font-weight:800;color:var(--accent);background:var(--accent-soft);letter-spacing:-.02em;}
.idmeta{flex:1;min-width:0;}
.idlvl{font-size:13px;color:var(--ink-3);font-weight:600;}
.idlvl b{color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.02em;}
.idsub{font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:500;}
.sub-l{font-size:11.5px;color:var(--ink-3);font-weight:600;}
.xphint{font-size:12px;color:var(--ink-3);align-self:center;font-weight:500;}

/* --------------------------------------------------------- controls --- */
.btn{padding:11px 18px;border-radius:99px;background:var(--raise);color:var(--ink);
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;transition:transform .12s,opacity .15s;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45;pointer-events:none;}
.btn-sm{padding:9px 15px;font-size:12.5px;}
.btn-accent{background:var(--accent);color:var(--accent-ink);}
.btn-violet{background:var(--violet);color:#141018;}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);}
.btn-danger{background:rgba(239,68,68,.14);color:var(--red);}
.btn-danger.is-armed{background:var(--red);color:#fff;}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0 8px;}
.linkbtn{color:var(--accent);font-size:14px;font-weight:600;}
.linkbtn-strong{font-weight:800;}

.addrow{display:flex;gap:8px;margin-top:10px;align-items:center;}
.addrow-input{flex:1;min-width:0;background:var(--raise);border:none;border-radius:var(--r-sm);
  padding:11px 13px;font-size:16px;outline:none;font-weight:500;}  /* 16px or iOS zooms */
.addrow-input::placeholder{color:var(--ink-3);}
.addrow-btn{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--accent);
  color:var(--accent-ink);font-size:20px;line-height:1;display:grid;place-items:center;}
.addrow-btn:active{transform:scale(.94);}
.addrow-time .addrow-input{flex:0 0 auto;width:auto;}

.switchrow,.segrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.switchrow:last-child,.segrow:last-child{border-bottom:none;}
.switchrow strong,.segrow > span,.segrow label{font-size:14px;font-weight:600;}
.switchrow .sub{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:500;}

.seg{display:inline-flex;background:var(--raise);border-radius:99px;padding:3px;gap:2px;}
.seg button{padding:8px 14px;border-radius:99px;font-size:12.5px;font-weight:700;
  color:var(--ink-3);transition:.15s;white-space:nowrap;}
.seg button.on{background:var(--accent);color:var(--accent-ink);}
.seg-wide{display:flex;width:100%;}
.seg-wide button{flex:1;text-align:center;}

.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:99px;
  background:var(--raise);color:var(--ink-3);transition:.15s;}
.chip.on{background:var(--accent);color:var(--accent-ink);}

.times{display:flex;flex-direction:column;gap:8px;margin:10px 0 0;}
.timerow{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:var(--raise);border-radius:var(--r-sm);}
.timerow strong{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
.timerow button{color:var(--ink-3);font-size:18px;padding:0 4px;line-height:1;}

.timeinput,.selinput{background:var(--raise);border:none;border-radius:var(--r-sm);
  padding:10px 13px;font-size:16px;outline:none;font-weight:600;color:var(--ink);}

.warn{background:rgba(245,158,11,.12);border-radius:var(--r-sm);padding:13px 15px;
  font-size:13px;margin:10px 0 12px;color:var(--ink-2);}
.warn strong{display:block;margin-bottom:4px;color:var(--ink);}

.empty{padding:22px 16px;text-align:center;color:var(--ink-3);font-size:13.5px;
  background:var(--raise);border-radius:var(--r-sm);margin-top:10px;font-weight:500;}
.note{font-size:12px;color:var(--ink-3);line-height:1.7;text-align:center;
  padding:16px 8px 0;font-weight:500;}
.note-l{font-size:13px;color:var(--ink-2);line-height:1.5;margin:9px 0;font-weight:500;}

.fold{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;}
.fold summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-3);
  list-style:none;padding:4px 0;}
.fold summary::-webkit-details-marker{display:none;}
.fold summary::before{content:"› ";}
.fold[open] summary::before{content:"⌄ ";}
.diag{margin:11px 0;padding:13px;background:var(--raise);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;}

/* ------------------------------------------------------------- tabs --- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);}
.tab{flex:1;max-width:120px;color:var(--ink-3);display:flex;flex-direction:column;
  align-items:center;gap:5px;padding:4px;font-size:10.5px;font-weight:700;transition:color .15s;}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.tab.is-on{color:var(--accent);}

/* ------------------------------------------------------------ sheet --- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);animation:fade .2s ease;}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:520px;margin:0 auto;
  max-height:92dvh;overflow-y:auto;background:var(--card);
  border-radius:22px 22px 0 0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));
  animation:rise .28s cubic-bezier(.2,.9,.3,1);}
@keyframes rise{from{transform:translateY(24px);opacity:0;}}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 12px;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;}
.sheet-head h2{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.sheet-foot{display:flex;justify-content:space-between;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);}

.field{margin-bottom:18px;}
.field > label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-3);margin-bottom:9px;}
.field > label .opt{font-weight:500;font-size:11.5px;color:var(--ink-3);margin-left:6px;}
.field input[type="text"],.field input[type="number"]{width:100%;background:var(--raise);
  border:none;border-radius:var(--r-sm);padding:13px;font-size:16px;outline:none;
  color:var(--ink);font-weight:600;}
.amtrow{display:flex;gap:9px;}
.amtrow input{flex:1;min-width:0;background:var(--raise);border:none;border-radius:var(--r-sm);
  padding:13px;font-size:16px;outline:none;color:var(--ink);font-weight:600;}
.amtrow input#hAmount,.amtrow input#hXp{flex:0 0 100px;}

.emojigrid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;}
.emojigrid button{aspect-ratio:1;border-radius:11px;background:var(--raise);font-size:18px;
  display:grid;place-items:center;transition:.14s;}
.emojigrid button.on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);}
.daypick{display:flex;gap:7px;margin-top:10px;}
.daypick button{flex:1;aspect-ratio:1;max-height:44px;border-radius:12px;background:var(--raise);
  font-size:13px;font-weight:700;color:var(--ink-3);transition:.14s;}
.daypick button.on{background:var(--accent);color:var(--accent-ink);}
.targetpick{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px;}
.targetpick label{font-size:14px;color:var(--ink-2);font-weight:600;margin:0;}
.stepper{display:flex;align-items:center;gap:4px;background:var(--raise);border-radius:99px;padding:3px;}
.stepper button{width:34px;height:34px;border-radius:99px;font-size:17px;color:var(--accent);
  display:grid;place-items:center;line-height:1;font-weight:700;}
.stepper output{min-width:30px;text-align:center;font-size:16px;font-weight:800;}

/* --------------------------------------------------------- overlay --- */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);animation:fade .25s ease;}
.lvlcard{text-align:center;max-width:340px;width:100%;background:var(--card);
  border-radius:22px;padding:28px 22px 22px;animation:rise .4s cubic-bezier(.2,.9,.3,1);}
.lvlcard .sysline{font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:10px;}
.lvlcard .bang{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;}
.lvlcard p{color:var(--ink-3);font-size:13.5px;margin:10px 0 0;font-weight:500;}
.gains{display:flex;flex-direction:column;gap:2px;margin:20px 0 22px;}
.gain{display:flex;justify-content:space-between;font-size:13px;padding:11px 0;
  border-bottom:1px solid var(--line);font-weight:600;}
.gain:last-child{border-bottom:none;}
.gain span{color:var(--ink-3);}
.gain b{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums;}
.overlay.rank .bang{color:var(--amber);}
.lvlcard .btn{width:100%;}

/* ---------------------------------------------------------- finale --- */
/* The one screen the whole app points at. Bigger than a level-up, quieter than
   a firework: the rank, then the numbers, then a single way out. */
/* z-index above the level-up overlay: if both ever reach the screen, the run's
   verdict is the one that must be on top. */
.overlay.finale{z-index:70;background:rgba(0,0,0,.88);align-items:flex-start;
  overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 20px 32px;}
.finalecard{max-width:380px;padding:30px 22px 22px;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);}
.finalerank{font-size:82px;line-height:1;font-weight:800;letter-spacing:-.05em;
  color:var(--violet);margin:6px 0 14px;
  text-shadow:0 0 40px rgba(167,139,250,.45);}
.finalecard .bang{font-size:23px;letter-spacing:-.02em;line-height:1.2;}
.finalecard .gains{margin:22px 0 24px;text-align:left;}
.finalecard .gain b.hot{color:var(--accent);}
.finalecard .gain b.bad{color:var(--red);}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 88px);
  transform:translateX(-50%);z-index:61;max-width:min(440px,calc(100vw - 36px));
  padding:13px 20px;border-radius:99px;background:var(--card);color:var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.45);font-size:13.5px;font-weight:600;text-align:center;
  animation:toastin .25s cubic-bezier(.2,.9,.3,1);}
.toast.is-bad{background:var(--red);color:#fff;}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px);}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
@media (max-width:359px){.tbottom{grid-template-columns:1fr;}}