:root{--bg:#fff;--ink:#1d2330;--muted:#5f6878;--line:#e3e6ec;--yellow:#ffd21f;--chip:#f4f6f9;--field:#fff;--err:#c62828;--warn:#a15c00;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171a21;--ink:#eef0f4;--muted:#9aa3b2;--line:#2b303b;--chip:#222732;--field:#1d212a;--err:#ff6b6b;--warn:#f0b35a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#171a21;--ink:#eef0f4;--muted:#9aa3b2;--line:#2b303b;--chip:#222732;--field:#1d212a;--err:#ff6b6b;--warn:#f0b35a;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.4}
button{font:inherit;font-size:.8rem;font-weight:500;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:0 8px;cursor:pointer}
button:hover{border-color:var(--muted)}
button:disabled{color:var(--muted);opacity:.55;cursor:default}button:disabled:hover{border-color:var(--line)}
button:focus-visible{outline:2px solid var(--yellow)}
.btnlike{font-size:.8rem;font-weight:500;background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:0 8px;cursor:pointer}
.small{font-size:.75rem}


/* ---- page: title + Menu, then timer + two columns. Text sizes are the same in both views.
   Full: timer is a sidebar on the left. Compact (end of file): timer is a bar on top, smaller diagrams. ---- */
.wrap{max-width:1280px;margin:0 auto;padding:12px 16px 40px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
h1{font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:700;font-size:1.15rem;margin:0}
.layout{display:flex;align-items:flex-start;gap:16px}

/* ---- menu ---- */
.menuwrap{position:relative}
.menubtn{font-size:.75rem;padding:1px 8px}
#tools{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:20;flex-direction:column;align-items:stretch;gap:4px;min-width:200px;
 background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
#tools.open{display:flex}
#tools button,#tools .btnlike{text-align:left;font-size:.8rem;padding:4px 8px;width:100%}
.sync{font-size:.7rem;color:var(--muted);padding:2px 8px}.sync:empty{display:none}
.textsize{display:flex;align-items:center;gap:6px;padding:2px 8px;font-size:.8rem}
.textsize span:first-child{margin-right:auto}
#tools .textsize button{width:auto;padding:0 10px;font-size:.9rem;line-height:1.4}
#txtVal{min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}

/* ---- timer: sidebar (full view) ---- */
.side{flex:0 0 250px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:5;max-height:calc(100vh - 16px);overflow:auto;
 border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--chip)}
.tbody{display:grid;grid-template-columns:1fr;grid-template-areas:"head" "scr" "clock" "stats" "hist" "list" "bot";gap:4px 8px;align-items:center}
.tfold{position:absolute;top:5px;right:6px;background:none;border:none;color:var(--muted);padding:0 4px;font-size:.8rem;cursor:pointer}
.tfold .g-top{display:none}
.thead{grid-area:head;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-right:22px}
.thead h2{font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-size:1rem;margin:0}
.insp{font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:4px;cursor:pointer;margin-left:auto}
.scramble{grid-area:scr;font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-size:.8rem;line-height:1.35;word-spacing:.25em;margin:2px 0}
.srow{display:inline;font-variant-numeric:tabular-nums}.srow::after{content:" "}
.clock{grid-area:clock;font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-size:1.9rem;font-weight:700;text-align:center;padding:4px 10px;min-width:5em;
 border-radius:8px;background:var(--bg);border:1px solid var(--line);cursor:pointer;user-select:none;touch-action:none;font-variant-numeric:tabular-nums}
.clock:focus-visible{outline:2px solid var(--yellow)}
.clock.hold{color:#c0362c}.clock.ready{color:#1a8547}.clock.run{color:var(--ink)}
.stats{grid-area:stats;display:flex;flex-wrap:wrap;gap:0 8px;font-size:.7rem;color:var(--muted)}
.stats span{display:none}
.stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.stats b::before{font-weight:400;color:var(--muted)}
.stats b:nth-of-type(1)::before{content:"n "}
.stats b:nth-of-type(2)::before{content:"best "}
.stats b:nth-of-type(3)::before{content:"ao5 "}
.stats b:nth-of-type(4)::before{content:"ao12 "}
.stats b:nth-of-type(5)::before{content:"mean "}
.histbtn{grid-area:hist;justify-self:start;margin:2px 0}
.times{grid-area:list;display:none;list-style:none;margin:0;padding:0;max-height:min(210px,40vh);overflow:auto;font-size:.75rem}
.times.open{display:block}
.times li{display:flex;align-items:center;gap:6px;padding:1px 0;border-top:1px solid var(--line)}
.times .n{color:var(--muted);width:2em;text-align:right;font-size:.7rem}
.times .v{font-variant-numeric:tabular-nums;flex:1}
.times .v.dnf{text-decoration:line-through;color:var(--muted)}
.times button{font-size:.7rem;padding:0 4px;background:none;border:none;color:var(--muted)}
.times button:hover{color:var(--ink);background:var(--chip)}
.tbot{grid-area:bot;display:none;margin-top:4px}
.tbody:has(.times.open) .tbot{display:flex}
/* shrunk timer: one line, clock + scramble */
.side.shut{display:flex;align-items:center;gap:8px;padding:4px 8px}
.side.shut .tfold{position:static;order:2}
.side.shut .tbody{flex:1;min-width:0;grid-template-columns:auto 1fr;grid-template-areas:"clock scr";gap:0 8px}
.side.shut .thead,.side.shut .stats,.side.shut .histbtn,.side.shut .tbody .times,.side.shut .tbody .tbot{display:none}
.side.shut .clock{font-size:1.4rem;padding:2px 8px;min-width:3.6em}
.side.shut .scramble{font-size:.75rem;line-height:1.2;margin:0;max-height:2.4em;overflow:hidden}

/* ---- columns: always two, header is a dropdown of the sets ---- */
.grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.col{min-width:0}
.colhead{display:flex;align-items:center;gap:4px;border-bottom:3px solid var(--yellow);padding-bottom:2px;margin-bottom:3px}
.setpick{flex:1;min-width:0;appearance:none;-webkit-appearance:none;font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:700;font-size:1rem;
 color:var(--ink);background:none;border:none;border-radius:4px;padding:0;margin:0;cursor:pointer}
.setpick:focus-visible{outline:2px solid var(--yellow)}
.colhead .chev{color:var(--muted);font-size:.7rem;pointer-events:none}

/* ---- groups and cases ---- */
.step h3{font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:600;font-size:.9rem;margin:6px 0 2px;display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.step h3 .chev{color:var(--muted);font-size:.7rem;margin-left:auto}
.step.shut .cases{display:none}
.stepn{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:4px;background:var(--yellow);color:#1d2330;font-size:.7rem}
.cases{list-style:none;margin:0;padding:0}
/* a case row: [fold status] [cube] [name prob ... Mirror Reset / formula]; collapsed = the same without cube and formula.
   --nameh: height of the name line; the icons use it so they sit on the name line, open or collapsed.
   --algh: height of the formula box (one line). The cube is exactly name + gap + formula tall. */
.case{--nameh:1.05rem;--algh:calc(.85rem * 1.3 + 2px);display:flex;gap:6px;align-items:flex-start;padding:4px 6px 4px 4px;border-top:1px solid var(--line)}
.prob{font-size:.6rem;color:var(--muted);margin-right:auto}
/* fold button on the name line, status circle under it (open rows only) */
.strip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.strip button{width:1.25rem;height:var(--nameh);padding:0;display:grid;place-items:center;border:none;background:none;color:var(--muted);cursor:pointer;font-size:.75rem;line-height:1;border-radius:4px}
.strip button:hover{background:var(--chip);color:var(--ink)}
/* status: always a circle - empty (not learned), half (learning), full (learned) */
.st::before{content:"";width:.45rem;height:.45rem;border:1.2px solid currentColor;border-radius:50%;box-sizing:border-box}
.st[data-s="learning"]::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.st[data-s="learned"]::before{background:currentColor}
.st[data-s="learning"]{color:#b8860b}
.st[data-s="learned"]{color:#1a8547}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st[data-s="learning"]{color:#f0c040}:root:not([data-theme="light"]) .st[data-s="learned"]{color:#4ccf87}}
:root[data-theme="dark"] .st[data-s="learning"]{color:#f0c040}:root[data-theme="dark"] .st[data-s="learned"]{color:#4ccf87}
.case.learning{background:rgba(240,205,42,.16)}
.case.learned{background:rgba(34,165,89,.14)}
.case.learning,.case.learned{border-radius:6px}
.pic{--pic:calc(var(--nameh) + 2px + var(--algh));flex:0 0 var(--pic);width:var(--pic);height:var(--pic);background:var(--chip);border-radius:4px;padding:1px}
.pic svg{width:100%;height:100%;display:block}
.txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.row1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:var(--nameh)}
.name{font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:600;color:var(--muted);font-size:.75rem;line-height:var(--nameh)}
.alg{width:100%;font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.02em;word-spacing:.2em;
color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:5px;padding:1px 6px;resize:none;overflow:hidden;line-height:1.3}
.alg:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:transparent}
.alg.changed{border-color:var(--yellow)}
.mir,.rst{font-size:.7rem;line-height:1.2;padding:0 6px}
/* formula line: [formula picker, only for cases with several formulas] [formula] */
.algline{display:flex;gap:4px;align-items:flex-start}
.algline .alg{flex:1;min-width:0;width:auto}
/* ▾ after the formula: a select drawn as a small arrow button; its list shows every formula of the case */
.varwrap{position:relative;flex:0 0 auto;display:flex}
.varwrap::after{content:"\25be";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.7rem;color:var(--muted);pointer-events:none}
.var{appearance:none;-webkit-appearance:none;width:1.3rem;height:var(--algh);font:inherit;font-size:.85rem;color:transparent;background:var(--field);border:1px solid var(--line);border-radius:5px;padding:0;cursor:pointer}
.var option{color:var(--ink);background:var(--bg);font-family:"Barlow Semi Condensed",Barlow,sans-serif;font-weight:600}
.var:focus-visible{outline:2px solid var(--yellow)}
.case.shut .algline{display:none}
/* a formula with a problem: coloured box, reason in its tooltip (no text line under it) */
.alg.warn,.alg.warn:focus{border-color:var(--warn);outline-color:var(--warn)}
.alg.err,.alg.err:focus{border-color:var(--err);outline-color:var(--err)}
.case.shut .pic,.case.shut .alg,.case.shut .mir,.case.shut .rst,.case.shut .prob,.case.shut .st{display:none}

/* ---- compact: html.compact is set by layout() when the timer sidebar + two columns don't fit ---- */
@media screen{
 .compact .wrap{padding:8px 8px 24px}
 .compact .top{margin-bottom:6px}
 .compact .layout{flex-direction:column;align-items:stretch;gap:8px}
 .compact .side{flex:none;top:env(safe-area-inset-top,0px);max-height:none;overflow:visible}
 .compact .tbody{grid-template-columns:1fr auto;grid-template-areas:"head head" "scr clock" "stats clock" "hist hist" "list list" "bot bot";gap:2px 8px}
 .compact .tfold .g-side{display:none}.compact .tfold .g-top{display:inline}
 .compact .times{max-height:90px}
 .compact .grid{gap:6px}
 .compact .case{gap:4px;padding:3px 0}
 .compact .strip button{width:1rem}
 .compact .row1{gap:4px}
 .compact .mir,.compact .rst{display:none}
 .compact .alg{padding:1px 4px;word-spacing:.12em}
}

@media print{
 @page{margin:10mm}
 :root,:root[data-theme="dark"],:root[data-theme="light"]{--bg:#fff;--ink:#000;--muted:#444;--line:#bbb;--chip:#fff;--yellow:#000}
 body{background:#fff;color:#000}
 .wrap{padding:0;max-width:none}.menuwrap,.side,.sync,button,.varwrap,.fold,.prob,.st,.chev{display:none !important}.case.shut .algline{display:flex}
 .step.shut .cases{display:block}.case.shut .pic{display:block}.case.shut .alg{display:block}
 .stepn{background:none;border:1px solid #000;color:#000;width:1.4em;height:1.4em}
 .top{margin-bottom:6px}h1{font-size:14pt}
 .grid{gap:10px}
 .colhead{border-bottom:2px solid #000;padding-bottom:2px;margin-bottom:4px}
 .setpick{font-size:11pt}
 .step h3{margin:6px 0 2px;font-size:10pt}
 .case{break-inside:avoid;padding:2px 0;gap:5px;background:none !important}
 .strip{display:none}.pic{flex-basis:46px;width:46px;height:46px;background:none;padding:0}
 .name{font-size:7.5pt}.alg{font-size:9pt;border:none;padding:0;background:none;height:auto !important;overflow:visible;resize:none}
}