/* styles.css — all presentation. Tokens via CSS custom properties so theming
   is one variable swap. Light is the default; dark follows the system UNLESS
   the user forces a theme via [data-theme] (set by app.js from settings). */

:root{
  --fg:#111; --mut:#777; --bg:#fff; --line:#e6e6e6; --soft:#f7f7f7; --accent:#111;
  --ielts:#1f6feb; --taiec:#7c3aed; --prog:#0f766e; --cert:#b45309; --yt:#9ca3af; --ns:#111;
  --danger:#dc2626;
  --tabh:58px; --scale:1;
}
/* auto dark: follow system, but not if user forced light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fg:#f2f2f2; --mut:#9a9a9a; --bg:#111; --line:#2a2a2a; --soft:#1b1b1b; --accent:#f2f2f2;
    --ielts:#5b9bff; --taiec:#a884f5; --prog:#3fb6a6; --cert:#e09b4a; --yt:#9ca3af; --ns:#f2f2f2;
    --danger:#f87171;
  }
}
/* forced dark (overrides everything) */
:root[data-theme="dark"]{
  --fg:#f2f2f2; --mut:#9a9a9a; --bg:#111; --line:#2a2a2a; --soft:#1b1b1b; --accent:#f2f2f2;
  --ielts:#5b9bff; --taiec:#a884f5; --prog:#3fb6a6; --cert:#e09b4a; --yt:#9ca3af; --ns:#f2f2f2;
  --danger:#f87171;
}
/* text-size scale */
:root[data-text="s"]{ --scale:.92; }
:root[data-text="l"]{ --scale:1.1; }

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); }
body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg);
      line-height:1.5; font-size:calc(1rem * var(--scale));
      max-width:560px; margin:0 auto; padding:14px 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 22px); }

.offline{ display:none; background:var(--cert); color:#fff; text-align:center; font-size:.72rem; font-weight:700;
          padding:6px 10px; border-radius:8px; margin-bottom:10px; }

/* passcode lock overlay */
.lockscreen{ position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.lockcard{ width:100%; max-width:320px; text-align:center; }
.lockcard .locktitle{ font-size:1.4rem; font-weight:800; }
.lockcard .locksub{ font-size:.82rem; color:var(--mut); margin:6px 0 16px; }
.lockinput{ width:100%; font-size:1.3rem; text-align:center; letter-spacing:.3em; padding:12px; border-radius:10px;
            border:2px solid var(--line); background:var(--soft); color:var(--fg); font-family:inherit; }
.lockinput:focus{ outline:none; border-color:var(--accent); }
.lockerr{ color:var(--danger); font-size:.78rem; min-height:1.1em; margin:8px 0; font-weight:700; }

.hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.badge{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
        color:var(--bg); background:var(--accent); padding:4px 9px; border-radius:99px; }
.hdr .r{ text-align:right; }
.hdr .clock{ font-size:.95rem; font-weight:800; }
.hdr .date{ font-size:.74rem; color:var(--mut); }

.label{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--mut); }
.label .timer{ color:var(--accent); margin-left:6px; }
.sec{ font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin:22px 2px 10px; }

.view{ display:none; }
.view.on{ display:block; animation:fade .12s ease; }
@keyframes fade{ from{opacity:.4} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .view.on{ animation:none; } }
:root[data-theme] .view.on{ }

.now{ border:2px solid var(--accent); border-radius:14px; padding:17px 17px 15px; }
.now .title{ font-size:1.5rem; font-weight:800; line-height:1.15; margin:6px 0 2px; }
.now .time{ font-size:.8rem; color:var(--mut); margin-bottom:13px; }
.v1box{ background:var(--soft); border-radius:10px; padding:13px 14px; }
.v1box .h{ font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-bottom:5px; }
.v1box .txt{ font-size:1rem; font-weight:600; }
.go{ display:block; text-align:center; text-decoration:none; background:var(--accent); color:var(--bg);
     font-size:1rem; font-weight:700; padding:13px; border-radius:10px; margin-top:11px; border:none; cursor:pointer; font-family:inherit; width:100%; }
.go:active{ opacity:.7; }
.go.ghost{ background:transparent; color:var(--fg); border:1px solid var(--line); }
.go.danger{ background:transparent; color:var(--danger); border:1px solid var(--danger); }
.permit{ font-size:.78rem; color:var(--mut); margin-top:11px; line-height:1.45; }
.permit b{ color:var(--fg); }
details.v2{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
details.v2 summary,.disc summary{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
                     color:var(--mut); cursor:pointer; list-style:none; }
details summary::-webkit-details-marker{ display:none; }
details.v2 summary::after,.disc summary::after{ content:' ▾'; }
details.v2[open] summary::after,.disc[open] summary::after{ content:' ▴'; }
details.v2 .body{ font-size:.92rem; color:var(--fg); margin-top:9px; white-space:pre-line; }

.seeall{ display:block; text-align:center; font-size:.8rem; color:var(--mut); text-decoration:none; margin-top:14px; padding:8px; cursor:pointer; }
.seeall:active{ color:var(--fg); }

.anchors{ display:flex; gap:8px; margin-top:14px; }
.chk{ flex:1; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; padding:11px 12px; cursor:pointer; user-select:none; }
.chk .box{ width:20px; height:20px; border:2px solid var(--mut); border-radius:6px; flex:none;
           display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--bg); }
.chk.done .box{ background:var(--accent); border-color:var(--accent); }
.chk .box svg{ width:12px; height:12px; opacity:0; }
.chk.done .box svg{ opacity:1; }
.chk .t{ font-size:.82rem; font-weight:700; }
.chk .s{ font-size:.68rem; color:var(--mut); }

.cds{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.cd{ border:1px solid var(--line); border-radius:11px; padding:11px 8px; text-align:center; }
.cd.hot{ border-color:var(--accent); background:var(--soft); }
.cd .d{ font-size:1.55rem; font-weight:800; line-height:1; }
.cd .n{ font-size:.6rem; color:var(--mut); margin-top:5px; text-transform:uppercase; letter-spacing:.04em; }
.cd .sub{ font-size:.58rem; color:var(--mut); margin-top:2px; }

.tl{ position:relative; margin-left:6px; padding-left:22px; }
.tl::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); }
.blk{ position:relative; margin-bottom:10px; }
.blk::before{ content:''; position:absolute; left:-22px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--line); border:2px solid var(--bg); }
.blk.past::before{ background:var(--bg); border-color:var(--line); }
.blk.cur::before{ background:var(--accent); border-color:var(--bg); }
.blk .card{ border:1px solid var(--line); border-radius:11px; padding:11px 13px; }
.blk.cur .card{ border:2px solid var(--accent); }
.blk.past{ opacity:.55; }
.blk .bt{ font-size:.95rem; font-weight:700; }
.blk .bw{ font-size:.72rem; color:var(--mut); }
.blk .btime{ font-size:.72rem; color:var(--mut); float:right; }
.blk .what{ font-size:.9rem; margin-top:7px; }
.disc{ margin-top:9px; border-top:1px solid var(--line); padding-top:8px; }
.disc .row{ font-size:.85rem; margin-top:7px; }
.disc .row b{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:1px; }
.inlinev1{ margin-top:9px; }

.ns{ border:1px solid var(--line); border-left:3px solid var(--ns); border-radius:11px; padding:14px 15px; background:var(--soft); }
.ns .star{ font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.ns .big{ font-size:1.05rem; font-weight:800; margin:5px 0 7px; line-height:1.3; }
.ns .meta{ font-size:.84rem; color:var(--fg); }
.ns .rank{ font-size:.78rem; color:var(--mut); margin-top:7px; }
.ladder{ font-size:.7rem; color:var(--mut); text-align:center; margin:10px 0 4px; }

.goal{ border:1px solid var(--line); border-radius:12px; margin-bottom:11px; overflow:hidden; }
.goal>summary{ list-style:none; cursor:pointer; padding:13px 14px; display:block; }
.goal>summary::-webkit-details-marker{ display:none; }
.goal .gtop{ display:flex; align-items:flex-start; gap:10px; }
.goal .accentbar{ width:3px; align-self:stretch; border-radius:2px; background:var(--mut); flex:none; }
.goal .gtitle{ font-size:1rem; font-weight:800; }
.goal .gdead{ font-size:.62rem; font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:99px; padding:2px 7px; white-space:nowrap; }
.goal .gnext{ font-size:.8rem; color:var(--mut); margin-top:4px; }
.goal .gnext b{ color:var(--fg); }
.goal .gbody{ padding:0 14px 14px; }
.goal .gwhy{ font-size:.86rem; color:var(--fg); margin:4px 0 10px; }
.goal .gcrit{ font-size:.82rem; background:var(--soft); border-radius:8px; padding:9px 11px; margin-bottom:11px; }
.goal .gcrit b{ font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:2px; }
.goal .gmaps{ font-size:.74rem; color:var(--mut); margin-top:11px; font-style:italic; }
.goal .gnote{ font-size:.74rem; color:var(--cert); margin-top:9px; }
.ms{ display:flex; align-items:flex-start; gap:9px; padding:7px 0; cursor:pointer; user-select:none; }
.ms .box{ width:18px; height:18px; border:2px solid var(--mut); border-radius:5px; flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; }
.ms.done .box{ background:var(--accent); border-color:var(--accent); }
.ms .box svg{ width:11px; height:11px; opacity:0; }
.ms.done .box svg{ opacity:1; }
.ms .ml{ font-size:.88rem; }
.ms.done .ml{ color:var(--mut); text-decoration:line-through; }
.ms.hard .ml{ font-weight:700; }
.ms .box svg path{ stroke:var(--bg); }

.ribbon{ display:flex; gap:6px; }
.ribbon .seg{ flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 7px; text-align:center; font-size:.68rem; color:var(--mut); }
.ribbon .seg.on{ border:2px solid var(--accent); color:var(--fg); font-weight:700; }
table{ border-collapse:collapse; width:100%; font-size:.8rem; margin-top:4px; }
td{ border-bottom:1px solid var(--line); padding:7px 4px; vertical-align:top; }
tr td:last-child{ text-align:right; white-space:nowrap; color:var(--mut); font-size:.7rem; font-weight:700; }
tr.hard td{ font-weight:700; }
.wkstrip{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.wkd{ border:1px solid var(--line); border-radius:8px; padding:7px 3px; text-align:center; min-height:62px; }
.wkd.today{ border:2px solid var(--accent); }
.wkd .dn{ font-size:.6rem; color:var(--mut); font-weight:700; }
.wkd .dl{ font-size:.58rem; margin-top:3px; line-height:1.2; }
.blocktbl td{ font-size:.75rem; }

/* settings */
.setgrp{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.setlab{ font-size:.85rem; font-weight:600; }
.opts{ display:flex; gap:6px; flex:none; }
.opt{ font-size:.78rem; font-weight:700; border:1px solid var(--line); background:transparent; color:var(--mut);
      border-radius:8px; padding:7px 12px; cursor:pointer; font-family:inherit; }
.opt.on{ border-color:var(--accent); color:var(--bg); background:var(--accent); }
.setnote{ font-size:.74rem; color:var(--mut); margin:8px 0 4px; line-height:1.45; }
#settings .go{ margin-top:9px; }

footer{ margin-top:24px; padding-top:13px; border-top:1px solid var(--line); font-size:.64rem; color:var(--mut); line-height:1.5; }

.tabs{ position:fixed; bottom:0; left:0; right:0; height:calc(var(--tabh) + env(safe-area-inset-bottom));
       padding-bottom:env(safe-area-inset-bottom); background:var(--bg); border-top:1px solid var(--line);
       display:flex; max-width:560px; margin:0 auto; z-index:50; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      cursor:pointer; color:var(--mut); font-size:.6rem; font-weight:700; letter-spacing:.04em; }
.tab svg{ width:21px; height:21px; stroke:var(--mut); fill:none; stroke-width:1.8; }
.tab.on{ color:var(--fg); }
.tab.on svg{ stroke:var(--fg); }