/* Design studies on top of the Current design (theme-n.css), chosen by the admin in Settings → Admin → Design.
   html[data-skin="paper|route|focus|ledger|objects"]; html[data-theme="light|dark"] (absent = same as phone).
   Current = no data-skin: nothing in this file applies. Hooks used here (.skdate, .skhero, .vnum, .skprog,
   .sttag.ok/.pend) are hidden in Current by app.css. Layout differs per study, not only colours. */

/* ---------- shared by all five studies ---------- */
:root[data-skin]{--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;--serif:Georgia,"Times New Roman",serif;--mono2:ui-monospace,"SF Mono",Menlo,monospace;
  --st-done:var(--accent);--st-no:#ab3433;--st-mkb:#87571d;--st-pend:var(--muted)}
:root[data-skin] body{font-family:var(--sans)}
:root[data-skin] .skprog{display:inline}
:root[data-skin] .skhero{display:flex}
:root[data-skin] .skhero.empty .sk-go{display:none}
.skhero{flex-direction:column;gap:6px}
.skhero .sk-over{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.skhero .sk-big,.skhero .sk-names,.skhero .sk-stops,.skhero .sk-meta{display:none}
.skhero .sk-meta{font-size:13px;color:var(--muted)}
.skhero ul{list-style:none;margin:0;padding:0}
.skhero .sk-go{margin-top:14px;min-height:50px;border-radius:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.skdate b{font-weight:400}
.skdate i,.skdate em{font-style:normal}

/* status: bar on the left + a word at the start of the text */
:root[data-skin] .sttag.ok,:root[data-skin] .sttag.pend{display:inline-block}
:root[data-skin] .swp .sttag{background:none!important;padding:0;margin:0 6px 0 0;border-radius:0;font-size:12px;font-weight:600;letter-spacing:0;vertical-align:1px}
:root[data-skin] .swp .sttag::first-letter{text-transform:uppercase}
:root[data-skin] .sttag.ok{color:var(--st-done)}
:root[data-skin] .sttag.no{color:var(--st-no)!important}
:root[data-skin] .sttag.mkb{color:var(--st-mkb)!important}
:root[data-skin] .sttag.pend{color:var(--st-pend)}
:root[data-skin] .swp>.row input[type=checkbox]{background:color-mix(in srgb,var(--st-pend) 55%,transparent);width:3px;border-radius:0;margin-left:0}
:root[data-skin] .swp>.row input[type=checkbox]:checked{background:var(--st-done)}
:root[data-skin] li.item.st-no .swp>.row input[type=checkbox]{background:var(--st-no)}
:root[data-skin] li.item.st-mkb .swp>.row input[type=checkbox]{background:var(--st-mkb)}
:root[data-skin] li.item.done label{color:var(--fg)}
:root[data-skin] .swp>.row label{font-size:15.5px;line-height:1.5}
:root[data-skin] .zone{text-transform:uppercase!important;letter-spacing:.1em!important;font-size:11px!important;color:var(--muted)!important}
:root[data-skin] .pbtn.ib{border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);width:44px;height:44px}
:root[data-skin] .pbtn.has{background:var(--accent-soft)}
:root[data-skin] .tabbar{background:var(--bg)!important;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--line)}
:root[data-skin] .topbar{background:var(--bg)}
:root[data-skin] .topbar .logo{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg);width:26px;height:26px;border-radius:7px;font-size:13px}
:root[data-skin] .dprog{display:none}
:root[data-skin] .vat{display:flex;flex-direction:column}
:root[data-skin] .vcont{float:none;display:block;margin:4px 0 0;order:2}

/* ================= 1. PAPER: a flat document, expressive type, almost no containers ================= */
:root[data-skin=paper]{--bg:#fbfaf7;--paper:#fbfaf7;--fg:#212721;--muted:#5f685e;--faint:#8a9187;--line:#dfe3da;--line2:#cfd4c9;--fill:#efefe9;
  --accent:#245a41;--accent-ink:#fbfaf7;--accent-soft:#e9eee5;--warn:#9a5a12;--warn-soft:#f6efe2;--st-done:#246143;--st-no:#ab3433;--st-mkb:#87571d;--r:12px;--r2:10px}
:root[data-skin=paper] h1{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.04em;line-height:1.05}
:root[data-skin=paper] .dhead{padding-bottom:20px;border-bottom:1px solid var(--fg)}
:root[data-skin=paper] .skdate{display:block;margin-top:6px}
:root[data-skin=paper] .skdate b,:root[data-skin=paper] .skdate i{display:none}
:root[data-skin=paper] .skdate em{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:root[data-skin=paper] .visit{background:transparent!important;padding:20px 0 4px;border-radius:0!important;border-top:1px solid var(--line)!important}
:root[data-skin=paper] #visits>section.visit:first-of-type{border-top:0!important;padding-top:4px}
:root[data-skin=paper] .vhead{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.03em}
:root[data-skin=paper] .zone{padding:22px 0 4px}
:root[data-skin=paper] .swp>.row{padding-left:0!important;background:var(--bg)!important}
:root[data-skin=paper] li.item+li.item::before{display:none}
:root[data-skin=paper] .panel{margin-left:15px}
:root[data-skin=paper] .skhero{padding:22px 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--line)}
:root[data-skin=paper] .skhero .sk-names{display:flex;flex-direction:column;font-family:var(--serif);font-size:31px;letter-spacing:-.04em;line-height:1.2;margin:6px 0 2px}
:root[data-skin=paper] .skhero .sk-meta{display:block}
:root[data-skin=paper] .skhero .sk-go{align-self:flex-start;background:#243322;color:#fbfaf7;padding:0 20px}
:root[data-skin=paper] .hcard,:root[data-skin=paper] .todo,:root[data-skin=paper] .dayc{background:transparent!important;border-radius:0!important;padding-left:0;padding-right:0;border-bottom:1px solid var(--line)!important}
:root[data-skin=paper] .hchip{background:transparent;border-radius:22px}
:root[data-skin=paper] .hchip.today{background:var(--accent);box-shadow:none}
:root[data-skin=paper] .hchip.today span,:root[data-skin=paper] .hchip.today b,:root[data-skin=paper] .hchip.today i{color:var(--accent-ink)}
:root[data-skin=paper] .sech,:root[data-skin=paper] .sett-h{font-family:var(--serif);font-weight:400}
:root[data-skin=paper] #dayrep{background:var(--accent-soft)!important;padding:16px!important;border-top:0!important;border-radius:var(--r)!important}

/* ================= 2. ROUTE: visits are stops on a route, tasks inside each stop ================= */
:root[data-skin=route]{--bg:#f3f4f4;--paper:#ffffff;--fg:#20292b;--muted:#59666a;--faint:#869297;--line:#dbe0e2;--line2:#c9d1d4;--fill:#e9eef0;
  --accent:#205f78;--accent-ink:#ffffff;--accent-soft:#e6eef1;--warn:#a2561a;--warn-soft:#f7ece2;--st-done:#246143;--st-no:#ab3433;--st-mkb:#87571d;--hero:#dcebf0;--on-hero:#1d4555;--r:20px;--r2:12px}
:root[data-skin=route] .skdate{display:flex;align-items:center;gap:14px;margin:4px 0 2px}
:root[data-skin=route] .skdate b{font-size:60px;letter-spacing:-.08em;line-height:1}
:root[data-skin=route] .skdate span{display:flex;flex-direction:column;gap:3px}
:root[data-skin=route] .skdate i{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:root[data-skin=route] .skdate em{font-size:22px;letter-spacing:-.03em;font-weight:500}
:root[data-skin=route] .dhead h1{font-size:22px;letter-spacing:-.02em}
:root[data-skin=route] #visits{counter-reset:stop;position:relative;padding-left:30px;display:flex;flex-direction:column;gap:18px}
:root[data-skin=route] #visits::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:1px;background:var(--line2)}
:root[data-skin=route] #visits>.visit{counter-increment:stop;position:relative;overflow:visible}
:root[data-skin=route] #visits>.visit::before{content:counter(stop);position:absolute;left:-30px;top:16px;width:22px;height:22px;border-radius:50%;background:var(--fill);color:var(--fg);font:600 12px/22px var(--sans);text-align:center}
:root[data-skin=route] #visits>section.visit:first-of-type::before{background:var(--accent);color:var(--accent-ink)}
:root[data-skin=route] .vwin{color:var(--accent)}
:root[data-skin=route] .swp>.row label{font-size:14.5px}
:root[data-skin=route] .skhero{background:var(--hero);color:var(--on-hero);border-radius:20px;padding:22px}
:root[data-skin=route] .skhero .sk-over{color:var(--on-hero);opacity:.8}
:root[data-skin=route] .skhero .sk-big{display:block;font-size:30px;letter-spacing:-.04em;line-height:1.1;font-weight:500}
:root[data-skin=route] .skhero .sk-big span{display:block}
:root[data-skin=route] .skhero .sk-stops{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--on-hero);padding-left:14px;margin:14px 0 0;font-size:14px}
:root[data-skin=route] .skhero .sk-go{background:#1d4555;color:#fff;width:100%}
:root[data-skin=route] .dayc{border-radius:12px!important}

/* ================= 3. FOCUS: a contrasting header for the job, big easy tasks below ================= */
:root[data-skin=focus]{--bg:#fbfbfa;--paper:#fbfbfa;--fg:#222725;--muted:#606864;--faint:#8b928e;--line:#dce0da;--line2:#cdd2cb;--fill:#f0f1ee;
  --accent:#285642;--accent-ink:#f6f7ef;--accent-soft:#e3ece6;--warn:#9c5714;--warn-soft:#f7eee3;--st-done:#246143;--st-no:#ab3433;--st-mkb:#87571d;--hero:#263e31;--on-hero:#f6f7ef;--r:24px;--r2:14px}
:root[data-skin=focus] .visit{background:transparent!important}
:root[data-skin=focus] #visits>.visit{overflow:visible}
:root[data-skin=focus] #visits>section.visit:first-of-type .vtop{background:var(--hero);color:var(--on-hero);margin:0 -16px 6px;padding:22px 16px 20px;border-radius:0 0 26px 26px;gap:10px}
:root[data-skin=focus] #visits>section.visit:first-of-type .vhead{font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
:root[data-skin=focus] #visits>section.visit:first-of-type .vwin,:root[data-skin=focus] #visits>section.visit:first-of-type .vaddr,:root[data-skin=focus] #visits>section.visit:first-of-type .vaddr a{color:var(--on-hero)!important}
:root[data-skin=focus] #visits>section.visit:first-of-type .pbtn.ib{color:var(--on-hero);background:transparent;box-shadow:inset 0 0 0 1px currentColor}
:root[data-skin=focus] #visits>section.visit:first-of-type .pbtn .cnt{background:var(--on-hero);color:var(--hero)}
:root[data-skin=focus] #visits>.visit+.visit{border-top:1px solid var(--line)!important;border-radius:0!important;padding-top:18px}
:root[data-skin=focus] ul.items{display:flex;flex-direction:column;gap:10px;padding:0}
:root[data-skin=focus] li.item+li.item::before{display:none}
:root[data-skin=focus] .swp{border-radius:0 14px 14px 0}
:root[data-skin=focus] .swp>.row{border-radius:0 14px 14px 0;background:var(--fill)!important;padding:14px 12px 14px 0!important}
:root[data-skin=focus] .swp>.row label{font-size:16px}
:root[data-skin=focus] .zone{padding:20px 0 2px}
:root[data-skin=focus] .panel{margin:8px 0 4px 14px}
:root[data-skin=focus] .dhead h1{font-size:34px}
:root[data-skin=focus] .skdate{display:block}
:root[data-skin=focus] .skdate b,:root[data-skin=focus] .skdate em{display:none}
:root[data-skin=focus] .skdate i{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:root[data-skin=focus] .skhero{background:var(--hero);color:var(--on-hero);border-radius:24px;padding:24px}
:root[data-skin=focus] .skhero .sk-over{color:var(--on-hero);opacity:.85}
:root[data-skin=focus] .skhero .sk-big{display:block;font-size:38px;line-height:1.03;letter-spacing:-.06em;font-weight:500;margin-top:8px}
:root[data-skin=focus] .skhero .sk-big span{display:block}
:root[data-skin=focus] .skhero .sk-meta{display:block;color:var(--on-hero);opacity:.85;margin-top:6px}
:root[data-skin=focus] .skhero .sk-go{background:var(--on-hero);color:var(--hero);border-radius:30px;width:100%}
:root[data-skin=focus] .hcard,:root[data-skin=focus] .dayc{background:transparent!important;padding-left:0;padding-right:0;border-radius:0!important;border-top:1px solid var(--line)!important}
:root[data-skin=focus] #dayrep{background:var(--accent-soft)!important;padding:16px!important;border-radius:var(--r)!important}

/* ================= 4. LEDGER: a strict grid, visit numbers, rules, a work-sheet look ================= */
:root[data-skin=ledger]{--bg:#f5f3ed;--paper:#fffcf5;--fg:#29291f;--muted:#676456;--faint:#8f8c7d;--line:#d9d6c9;--line2:#c6c2b2;--fill:#e9e7dc;
  --accent:#333e30;--accent-ink:#fffcf5;--accent-soft:#e9e7dc;--warn:#93561a;--warn-soft:#f2eadc;--st-done:#246143;--st-no:#ab3433;--st-mkb:#87571d;--r:0px;--r2:0px}
:root[data-skin=ledger] .topbar{border-bottom:1px solid var(--fg)}
:root[data-skin=ledger] h1{font-size:27px;font-weight:650;letter-spacing:-.04em}
:root[data-skin=ledger] .dhead{padding-bottom:16px;border-bottom:1px solid var(--fg)}
:root[data-skin=ledger] .skdate{display:block;margin-top:4px}
:root[data-skin=ledger] .skdate b,:root[data-skin=ledger] .skdate i{display:none}
:root[data-skin=ledger] .skdate em{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:root[data-skin=ledger] .visit,:root[data-skin=ledger] .todo,:root[data-skin=ledger] .hcard,:root[data-skin=ledger] .dayc{border-radius:0!important}
:root[data-skin=ledger] #visits>.visit{background:transparent!important;position:relative;padding:18px 0 6px 44px}
:root[data-skin=ledger] #visits>.visit+.visit{border-top:1px solid var(--fg)!important}
:root[data-skin=ledger] .vnum{display:block;position:absolute;left:0;top:18px;font:400 22px/1 var(--mono2);color:var(--muted)}
:root[data-skin=ledger] .pbtn.ib{border-radius:0;box-shadow:none;background:transparent}
:root[data-skin=ledger] .zone{border-bottom:1px solid var(--fg);padding:9px 0!important;margin:16px 0 0!important;font-size:10px!important}
:root[data-skin=ledger] .swp>.row{padding-left:0!important;background:var(--bg)!important;border-bottom:1px solid var(--line)}
:root[data-skin=ledger] li.item+li.item::before{display:none}
:root[data-skin=ledger] .swp>.row label{font-size:14.5px;line-height:1.6}
:root[data-skin=ledger] .panel{margin-left:15px}
:root[data-skin=ledger] .skhero{border:1px solid var(--fg);background:var(--paper);padding:0;gap:0}
:root[data-skin=ledger] .skhero .sk-over{padding:14px 16px;border-bottom:1px solid var(--line);font-size:10px}
:root[data-skin=ledger] .skhero .sk-names{display:flex;flex-direction:column;font-size:26px;letter-spacing:-.03em;line-height:1.25;padding:16px 16px 4px}
:root[data-skin=ledger] .skhero .sk-meta{display:block;padding:0 16px;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
:root[data-skin=ledger] .skhero .sk-go{margin:14px 16px 16px;border-radius:0;background:var(--accent);color:var(--accent-ink)}
:root[data-skin=ledger] .skhero.empty .sk-meta{padding-bottom:16px}
:root[data-skin=ledger] .pernav{font-family:var(--mono2)}
:root[data-skin=ledger] .hchip{border-radius:0}
:root[data-skin=ledger] .btn,:root[data-skin=ledger] .seg,:root[data-skin=ledger] .seg button,:root[data-skin=ledger] input,:root[data-skin=ledger] textarea,:root[data-skin=ledger] select{border-radius:0!important}

/* ================= 5. OBJECTS: big blocks, a bold date, zone headings ================= */
:root[data-skin=objects]{--bg:#faf8f3;--paper:#eeede7;--fg:#262b24;--muted:#5f6659;--faint:#8b9185;--line:#d9ddcf;--line2:#c8cdbd;--fill:#e4e3dc;
  --accent:#334c24;--accent-ink:#faf8f3;--accent-soft:#e1e8d5;--warn:#93561a;--warn-soft:#f3ebdd;--st-done:#246143;--st-no:#ab3433;--st-mkb:#87571d;--hero:#dce7c9;--on-hero:#30451f;--r:18px;--r2:12px}
:root[data-skin=objects] .skdate{display:block;margin-top:4px}
:root[data-skin=objects] .skdate span{display:block}
:root[data-skin=objects] .skdate i{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:root[data-skin=objects] .skdate b,:root[data-skin=objects] .skdate em{display:none}
:root[data-skin=objects] h1{font-size:43px;font-weight:600;letter-spacing:-.05em;line-height:.98}
:root[data-skin=objects] .visit{background:transparent!important;padding:0}
:root[data-skin=objects] #visits>.visit .vtop{background:var(--hero);color:var(--on-hero);padding:16px;border-radius:18px}
:root[data-skin=objects] #visits>.visit+.visit .vtop{margin-top:10px}
:root[data-skin=objects] #visits .vhead{font-size:24px;font-weight:500;letter-spacing:-.03em}
:root[data-skin=objects] .vtop .vwin,:root[data-skin=objects] .vtop .vaddr,:root[data-skin=objects] .vtop .vaddr a{color:var(--on-hero)!important}
:root[data-skin=objects] .vtop .pbtn.ib{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 40%,transparent);color:var(--on-hero)}
:root[data-skin=objects] .zone{text-transform:none!important;letter-spacing:-.03em!important;font-size:18px!important;font-weight:500!important;color:var(--fg)!important;padding:20px 0 4px!important}
:root[data-skin=objects] .zone::first-letter{text-transform:uppercase}
:root[data-skin=objects] ul.items{display:flex;flex-direction:column;gap:8px;padding:0}
:root[data-skin=objects] li.item+li.item::before{display:none}
:root[data-skin=objects] .swp{border-radius:0 15px 15px 0}
:root[data-skin=objects] .swp>.row{border-radius:0 15px 15px 0;background:var(--paper)!important;padding:14px 12px 14px 0!important}
:root[data-skin=objects] .swp>.row input[type=checkbox]{width:5px}
:root[data-skin=objects] .swp .sttag{display:block;margin:0 0 4px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
:root[data-skin=objects] .panel{margin:6px 0 4px 15px}
:root[data-skin=objects] .skhero{background:var(--hero);color:var(--on-hero);border-radius:20px;padding:20px}
:root[data-skin=objects] .skhero .sk-over{color:var(--on-hero);opacity:.85}
:root[data-skin=objects] .skhero .sk-names{display:flex;flex-direction:column;font-size:32px;letter-spacing:-.04em;line-height:1.2;margin-top:8px}
:root[data-skin=objects] .skhero .sk-meta{display:block;color:var(--on-hero);opacity:.85}
:root[data-skin=objects] .skhero .sk-go{background:var(--on-hero);color:var(--hero);width:100%}
:root[data-skin=objects] .hcard,:root[data-skin=objects] .todo,:root[data-skin=objects] .dayc{background:var(--paper)!important}
:root[data-skin=objects] #dayrep{background:var(--hero)!important;padding:16px!important;border-radius:18px!important}

/* ---------- dark ---------- */
@media (prefers-color-scheme:dark){
:root[data-skin=paper]:not([data-theme=light]){--bg:#141914;--paper:#141914;--fg:#eef1e7;--muted:#b6c1ae;--faint:#8c9786;--line:#3c4839;--line2:#4a5746;--fill:#232b22;--accent:#b1d59b;--accent-ink:#141914;--accent-soft:#2c3c27;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83}
:root[data-skin=route]:not([data-theme=light]){--bg:#121b1f;--paper:#1d2a30;--fg:#edf3f4;--muted:#b2c3c9;--faint:#83969d;--line:#3a4b54;--line2:#475a64;--fill:#26363d;--accent:#9bcdde;--accent-ink:#121b1f;--accent-soft:#293e48;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#294b5a;--on-hero:#e4f0f5}
:root[data-skin=focus]:not([data-theme=light]){--bg:#131916;--paper:#131916;--fg:#f0f4ec;--muted:#b7c5ba;--faint:#879589;--line:#3b4c40;--line2:#4a5d4f;--fill:#202a24;--accent:#b1dabb;--accent-ink:#131916;--accent-soft:#2a4132;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#dae8d4;--on-hero:#233c2b}
:root[data-skin=ledger]:not([data-theme=light]){--bg:#1a1a14;--paper:#24251c;--fg:#f2efdf;--muted:#c1bdab;--faint:#928e7d;--line:#484839;--line2:#575746;--fill:#2e2f24;--accent:#d5d8ba;--accent-ink:#1a1a14;--accent-soft:#343626;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83}
:root[data-skin=objects]:not([data-theme=light]){--bg:#161b13;--paper:#242d20;--fg:#f1f3e8;--muted:#bcc7b0;--faint:#8c9881;--line:#3d4a32;--line2:#4b5a3f;--fill:#2c3627;--accent:#c2dca6;--accent-ink:#161b13;--accent-soft:#34452a;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#40532f;--on-hero:#eef4e3}
:root[data-skin=paper]:not([data-theme=light]) .skhero .sk-go{background:var(--accent);color:var(--accent-ink)}
:root[data-skin=route]:not([data-theme=light]) .skhero .sk-go{background:var(--on-hero);color:var(--hero)}
}
:root[data-skin=paper][data-theme=dark]{--bg:#141914;--paper:#141914;--fg:#eef1e7;--muted:#b6c1ae;--faint:#8c9786;--line:#3c4839;--line2:#4a5746;--fill:#232b22;--accent:#b1d59b;--accent-ink:#141914;--accent-soft:#2c3c27;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83}
:root[data-skin=route][data-theme=dark]{--bg:#121b1f;--paper:#1d2a30;--fg:#edf3f4;--muted:#b2c3c9;--faint:#83969d;--line:#3a4b54;--line2:#475a64;--fill:#26363d;--accent:#9bcdde;--accent-ink:#121b1f;--accent-soft:#293e48;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#294b5a;--on-hero:#e4f0f5}
:root[data-skin=focus][data-theme=dark]{--bg:#131916;--paper:#131916;--fg:#f0f4ec;--muted:#b7c5ba;--faint:#879589;--line:#3b4c40;--line2:#4a5d4f;--fill:#202a24;--accent:#b1dabb;--accent-ink:#131916;--accent-soft:#2a4132;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#dae8d4;--on-hero:#233c2b}
:root[data-skin=ledger][data-theme=dark]{--bg:#1a1a14;--paper:#24251c;--fg:#f2efdf;--muted:#c1bdab;--faint:#928e7d;--line:#484839;--line2:#575746;--fill:#2e2f24;--accent:#d5d8ba;--accent-ink:#1a1a14;--accent-soft:#343626;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83}
:root[data-skin=objects][data-theme=dark]{--bg:#161b13;--paper:#242d20;--fg:#f1f3e8;--muted:#bcc7b0;--faint:#8c9881;--line:#3d4a32;--line2:#4b5a3f;--fill:#2c3627;--accent:#c2dca6;--accent-ink:#161b13;--accent-soft:#34452a;--warn:#f0b36b;--warn-soft:#3a2f1e;--st-done:#a6d5b2;--st-no:#ffaaa3;--st-mkb:#f0cd83;--hero:#40532f;--on-hero:#eef4e3}
:root[data-skin=paper][data-theme=dark] .skhero .sk-go{background:var(--accent);color:var(--accent-ink)}
:root[data-skin=route][data-theme=dark] .skhero .sk-go{background:var(--on-hero);color:var(--hero)}
:root[data-skin][data-theme=dark]{color-scheme:dark}
:root[data-skin][data-theme=light]{color-scheme:light}

/* ---------- Maxim: Today and Period in the five studies ---------- */
:root[data-skin] .you{border-radius:4px}
/* Paper: no cards, rules and serif names */
:root[data-skin=paper] .pday,:root[data-skin=paper] .team,:root[data-skin=paper] .revb,:root[data-skin=paper] .lcard{background:transparent!important;padding-left:0!important;padding-right:0!important;border-radius:0!important;border-top:1px solid var(--fg)!important}
:root[data-skin=paper] .pdh b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.03em}
:root[data-skin=paper] .pstop{grid-template-columns:3px 1fr}
:root[data-skin=paper] .psh b{font-family:var(--serif);font-weight:400;font-size:17px}
/* Route: each person's visits are stops on a line */
:root[data-skin=route] .pstops{position:relative;padding-left:6px}
:root[data-skin=route] .pstops::before{content:"";position:absolute;left:10px;top:18px;bottom:18px;width:1px;background:var(--line2)}
:root[data-skin=route] .pstop{grid-template-columns:10px 1fr;border-top:0;padding:8px 0}
:root[data-skin=route] .pstop .pb{width:9px;height:9px;border-radius:50%;margin-top:5px;position:relative;z-index:1;box-shadow:0 0 0 3px var(--paper)}
:root[data-skin=route] .pday{border-radius:20px!important}
/* Focus: a dark header for each person, task rows as filled blocks */
:root[data-skin=focus] .pday{background:transparent!important;padding:0!important}
:root[data-skin=focus] .pdh{background:var(--hero);color:var(--on-hero);padding:14px 16px;border-radius:20px 20px 0 0}
:root[data-skin=focus] .pdh .num,:root[data-skin=focus] .pdh .chev,:root[data-skin=focus] .pdh .pnote{color:var(--on-hero);opacity:.8}
:root[data-skin=focus] .pdh .bar{background:color-mix(in srgb,var(--on-hero) 30%,transparent)}
:root[data-skin=focus] .pdh .bar i{background:var(--on-hero)}
:root[data-skin=focus] .pdh:only-child{border-radius:20px}
:root[data-skin=focus] .pdh .you{background:var(--on-hero);color:var(--hero)}
:root[data-skin=focus] .pstops{display:flex;flex-direction:column;gap:6px;padding-top:6px}
:root[data-skin=focus] .pstop{border-top:0;background:var(--fill);border-radius:0 14px 14px 0;padding:12px 12px 12px 0}
/* Ledger: numbered stops, rules, square */
:root[data-skin=ledger] .pday,:root[data-skin=ledger] .team,:root[data-skin=ledger] .revb{background:transparent!important;padding-left:0!important;padding-right:0!important;border-top:1px solid var(--fg)!important}
:root[data-skin=ledger] .pstops{counter-reset:st}
:root[data-skin=ledger] .pstop{counter-increment:st;grid-template-columns:28px 3px 1fr;gap:10px}
:root[data-skin=ledger] .pstop::before{content:counter(st,decimal-leading-zero);font:400 15px/1.3 var(--mono2);color:var(--muted)}
:root[data-skin=ledger] .pdh .bar,:root[data-skin=ledger] .pdh .bar i,:root[data-skin=ledger] .tc,:root[data-skin=ledger] .tb,:root[data-skin=ledger] .you{border-radius:0}
:root[data-skin=ledger] .pdh b{text-transform:uppercase;letter-spacing:.06em;font-size:14px}
/* Objects: the name as a coloured block, stops as big blocks */
:root[data-skin=objects] .pday{background:transparent!important;padding:0!important}
:root[data-skin=objects] .pdh{background:var(--hero);color:var(--on-hero);padding:14px 16px;border-radius:18px}
:root[data-skin=objects] .pdh b{font-size:22px;font-weight:500;letter-spacing:-.03em}
:root[data-skin=objects] .pdh .num,:root[data-skin=objects] .pdh .chev{color:var(--on-hero)}
:root[data-skin=objects] .pstops{display:flex;flex-direction:column;gap:6px;padding-top:6px}
:root[data-skin=objects] .pstop{border-top:0;background:var(--paper);border-radius:0 15px 15px 0;padding:12px 12px 12px 0;grid-template-columns:5px 1fr}
/* Route: the visit's three buttons are plain icons (no rings), compact, tucked into the top right corner of the card */
:root[data-skin=route] .vtop>.vbtns{gap:0;margin:-10px -12px 0 0}
:root[data-skin=route] .pbtn.ib{box-shadow:none;width:38px;height:38px}
:root[data-skin=route] .pbtn.ib svg{width:20px;height:20px}
:root[data-skin=route] .pbtn.ib .cnt{top:-2px;right:-2px}