/* Experivio: Home Screen 3.0 design system and layout.
   Tokens are scoped to the Home screen (.home3), its dialogs (.hdlg) and the compact utility bar (.ubar),
   so other screens keep their current look. */

:root{
  /* color */
  --h-bg:#f5f4ff;--h-surface:#fff;--h-surface2:#f0eeff;--h-pri:#654cf5;--h-deep:#4030a7;--h-blue:#3673fa;
  --h-ink:#1d1b3a;--h-mut:#5c587f;--h-line:#e2dff5;--h-ok:#15805d;--h-warn:#a16207;--h-bad:#b42318;
  --h-on-pri:#fff;--h-pri-ink:#4a33d6;--h-ok-bg:#e6f5ee;--h-warn-bg:#fff4d6;--h-bad-bg:#fdecea;
  --h-grad:linear-gradient(125deg,#4030a7 0%,#654cf5 52%,#3673fa 100%);
  /* type */
  --h-fs-greet:clamp(24px,1.1vw + 19px,36px);--h-fs-h2:clamp(18px,.45vw + 16px,22px);--h-fs-h3:clamp(15px,.3vw + 14px,18px);
  --h-fs-body:clamp(15px,.12vw + 14.6px,16px);--h-fs-label:clamp(12px,.15vw + 11.5px,14px);
  /* space and shape */
  --h-s1:4px;--h-s2:8px;--h-s3:12px;--h-s4:16px;--h-s5:24px;--h-s6:32px;
  --h-gap:clamp(12px,1vw + 8px,24px);--h-pad:clamp(16px,1vw + 12px,28px);
  --h-r-sm:10px;--h-r:16px;--h-r-lg:clamp(20px,.4vw + 18px,24px);
  /* elevation */
  --h-e1:0 1px 2px rgba(40,30,120,.06),0 2px 8px rgba(40,30,120,.05);
  --h-e2:0 2px 4px rgba(40,30,120,.06),0 10px 28px rgba(40,30,120,.10);
  --h-e3:0 18px 48px rgba(52,34,160,.26);
  /* motion */
  --h-dur-fast:180ms;--h-dur-in:260ms;--h-dur-bar:450ms;--h-ease:cubic-bezier(.2,.7,.2,1);--h-stagger:45ms;
  --h-focus:0 0 0 3px var(--h-surface),0 0 0 6px #ffb703;
}
/* accents (Customize Home) */
:root[data-accent="ocean"]{--h-pri:#1f63d8;--h-deep:#123f8f;--h-blue:#0b84c6;--h-pri-ink:#1a56bd;--h-grad:linear-gradient(125deg,#123f8f 0%,#1f63d8 55%,#0b84c6 100%)}
:root[data-accent="teal"]{--h-pri:#0f766e;--h-deep:#0b4f4a;--h-blue:#1580a8;--h-pri-ink:#0d6a63;--h-grad:linear-gradient(125deg,#0b4f4a 0%,#0f766e 52%,#1580a8 100%)}
:root[data-accent="indigo"]{--h-pri:#4338ca;--h-deep:#1e1b4b;--h-blue:#3730a3;--h-pri-ink:#3f35c0;--h-grad:linear-gradient(125deg,#1e1b4b 0%,#312e81 50%,#4338ca 100%)}
/* dark */
:root[data-theme="dark"]{--h-bg:#14122b;--h-surface:#1e1b3d;--h-surface2:#29254d;--h-ink:#eeedff;--h-mut:#b0acdb;--h-line:#3a3566;--h-pri:#9b86ff;--h-blue:#6ea0ff;--h-pri-ink:#b7a8ff;--h-on-pri:#14122b;--h-ok:#4cd08f;--h-warn:#f2c14e;--h-bad:#ff9a8a;--h-ok-bg:#163a2c;--h-warn-bg:#3d3210;--h-bad-bg:#43201d;--h-e1:none;--h-e2:0 10px 30px rgba(0,0,0,.35);--h-e3:0 18px 48px rgba(0,0,0,.45);--h-focus:0 0 0 3px var(--h-surface),0 0 0 6px #ffcf4d}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--h-bg:#14122b;--h-surface:#1e1b3d;--h-surface2:#29254d;--h-ink:#eeedff;--h-mut:#b0acdb;--h-line:#3a3566;--h-pri:#9b86ff;--h-blue:#6ea0ff;--h-pri-ink:#b7a8ff;--h-on-pri:#14122b;--h-ok:#4cd08f;--h-warn:#f2c14e;--h-bad:#ff9a8a;--h-ok-bg:#163a2c;--h-warn-bg:#3d3210;--h-bad-bg:#43201d;--h-e1:none;--h-e2:0 10px 30px rgba(0,0,0,.35);--h-e3:0 18px 48px rgba(0,0,0,.45);--h-focus:0 0 0 3px var(--h-surface),0 0 0 6px #ffcf4d}}
:root[data-theme="dark"][data-accent="ocean"]{--h-pri:#6eb0ff;--h-pri-ink:#9ccaff}
:root[data-theme="dark"][data-accent="teal"]{--h-pri:#4fd1c5;--h-pri-ink:#7fe3d9}
:root[data-theme="dark"][data-accent="indigo"]{--h-pri:#a5b4fc;--h-pri-ink:#c7d0fe}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent="ocean"]{--h-pri:#6eb0ff;--h-pri-ink:#9ccaff}:root:not([data-theme="light"])[data-accent="teal"]{--h-pri:#4fd1c5;--h-pri-ink:#7fe3d9}:root:not([data-theme="light"])[data-accent="indigo"]{--h-pri:#a5b4fc;--h-pri-ink:#c7d0fe}}
:root[data-density="compact"]{--h-gap:clamp(8px,.6vw + 6px,16px);--h-pad:clamp(12px,.6vw + 10px,20px)}

/* ---------- utility bar (shown on every screen, kept compact) ---------- */
.ubar{max-width:1480px;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 8px 6px 12px;border-radius:12px;font-size:var(--h-fs-label);color:var(--h-mut);background:var(--h-surface);border:1px solid var(--h-line)}
.ubar .ub-save{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:1 1 14rem}
.ub-dot{width:8px;height:8px;border-radius:50%;background:var(--h-bad);flex:none}.ub-dot.ok{background:var(--h-ok)}
.ubar .aistat{display:inline-flex;align-items:center}
.ub-acts{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.ubar .btn.ub-b{min-height:40px;padding:6px 12px;font-size:var(--h-fs-label);margin:0}
.ub-more{position:relative}
.ub-more>summary{list-style:none;min-height:40px;padding:6px 12px;border-radius:10px;background:var(--soft);color:var(--ink);font-size:var(--h-fs-label)}
.ub-more>summary::-webkit-details-marker{display:none}
.ub-more>summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-1px);margin-left:8px}
.ub-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:6px;min-width:12rem;padding:8px;border-radius:12px;background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--h-e2)}
.ub-menu .btn{margin:0;justify-content:flex-start;min-height:40px;font-size:var(--h-fs-label)}
.ubar.bad{background:var(--h-bad-bg);border:2px solid var(--h-bad);color:var(--h-ink)}
.ubar.bad #savestat{font-weight:700;color:var(--h-bad)}
.ubar .btn.urgent{background:var(--h-bad);color:#fff}
:root[data-theme="dark"] .ubar .btn.urgent{color:#14122b}
@container main (max-width:520px){.ubar .ub-save{flex-basis:100%}.ub-acts{margin-left:0}}

/* ---------- page ---------- */
.home3{display:grid;gap:var(--h-gap);color:var(--h-ink);font-size:var(--h-fs-body);max-width:1480px;margin:0 auto}
.home3 :focus-visible{outline:none;box-shadow:var(--h-focus);border-radius:10px}
.home3 .mut{color:var(--h-mut)}.home3 .small{font-size:var(--h-fs-label)}
.hhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.hhead h1{font-size:var(--h-fs-greet);letter-spacing:-.02em;margin:0}
.hhead p{margin:4px 0 0}
.hcust{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:10px;border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);font:inherit;font-size:var(--h-fs-label);font-weight:650;cursor:pointer;transition:border-color var(--h-dur-fast),transform var(--h-dur-fast) var(--h-ease)}
.hcust:hover{border-color:var(--h-pri)}

/* ---------- hero ---------- */
.hero.h3{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:var(--h-gap);grid-template-columns:minmax(0,1fr);padding:clamp(20px,1.8vw + 14px,40px);border-radius:var(--h-r-lg);background:var(--h-grad);color:#fff;box-shadow:var(--h-e3);border:0}
.hero.h3::before{content:"";position:absolute;inset:auto -10% -55% 35%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);z-index:-1;pointer-events:none}
.hero.h3::after{content:"";position:absolute;inset:-40% 55% auto -20%;height:90%;background:radial-gradient(closest-side,rgba(120,170,255,.28),transparent);z-index:-1;pointer-events:none}
.hero-l{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hero-k{margin:0 0 6px;font-size:var(--h-fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.hero.h3 h2{color:#fff;font-size:clamp(22px,1.3vw + 16px,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 8px;max-width:22ch}
.hero-s{max-width:52ch;opacity:.95;margin:0}
.hero-title{font-size:var(--h-fs-h3);font-weight:750;margin:6px 0 6px;overflow-wrap:anywhere;max-width:48ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.hpill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:var(--h-fs-label);font-weight:600;max-width:100%;overflow-wrap:anywhere}
.hero-pick,.hero-next{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.12);max-width:46rem}
.hero-pick span,.hero-next span{display:block;font-size:var(--h-fs-label);opacity:.9}
.hero-pick b,.hero-next b{overflow-wrap:anywhere}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:18px;align-items:center}
.home3 .hbtn{margin:0;min-height:48px;padding:12px 22px;border-radius:12px;background:#fff;color:var(--h-deep);font-weight:750;box-shadow:0 4px 14px rgba(20,10,80,.22);transition:transform var(--h-dur-fast) var(--h-ease),box-shadow var(--h-dur-fast)}
:root[data-accent="indigo"] .home3 .hbtn{color:#312e81}
.home3 .hbtn:hover{filter:none;transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,10,80,.28)}
.home3 .hbtn:active,.home3 .hbtn2:active,.home3 .nbtn:active,.home3 .htool:active,.home3 .hstat:active{transform:scale(.985)}
.hbtn2{min-height:48px;padding:10px 18px;border-radius:12px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);font:inherit;font-weight:650;cursor:pointer;transition:background var(--h-dur-fast)}
.hbtn2:hover{background:rgba(255,255,255,.12)}
.hero.h3 :focus-visible{box-shadow:0 0 0 3px #1d1b3a,0 0 0 6px #ffcf4d}
.hero-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.hlink{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 2px;background:none;border:0;color:#fff;font:inherit;font-size:var(--h-fs-label);font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hero-r{min-width:0;display:flex;align-items:center;justify-content:center}
.hero-art{width:min(220px,100%);height:auto;color:#fff;opacity:.9}
:root[data-motion="full"] .hero-art .orbit{transform-origin:110px 110px;animation:horb 40s linear infinite}
:root[data-motion="full"] .hero-art .orbit2{transform-origin:110px 110px;animation:horb 70s linear infinite reverse}
@keyframes horb{to{transform:rotate(360deg)}}
.hero-prev{width:100%;max-width:26rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.hero-note{grid-column:1/-1;margin:0;font-size:12px;opacity:.85}
.hero-ms{display:grid;gap:10px;min-width:0}
.ring{position:relative;width:118px;height:118px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring-bg{stroke:rgba(255,255,255,.22)}
.ring-fg{stroke:#fff;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:calc(326.73px * (1 - var(--v,0) / 100));transition:stroke-dashoffset var(--h-dur-bar) var(--h-ease)}
.ring-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ring-t b{font-size:26px;font-variant-numeric:tabular-nums}.ring-t span{font-size:12px;opacity:.95;max-width:84px}
.meter-h{display:flex;justify-content:space-between;gap:8px;font-size:var(--h-fs-label)}
.meter-h b{font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:4px}
.meter-bar i{display:block;height:100%;background:#fff;border-radius:99px;transform-origin:left;transform:scaleX(calc(var(--v,0) / 100));transition:transform var(--h-dur-bar) var(--h-ease)}
.meter-n{margin:3px 0 0;font-size:12px;opacity:.9}
.dtl{list-style:none;margin:0;padding:16px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:grid;gap:4px;width:100%;max-width:22rem}
.dtl li{display:flex;align-items:center;gap:10px;font-size:var(--h-fs-label);opacity:.8;min-height:28px}
.dtl li.done{opacity:1}.dtl li.now{opacity:1;font-weight:750}
.dot2{width:24px;height:24px;border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:750;border:1.5px solid rgba(255,255,255,.55);flex:none}
.dtl li.done .dot2{background:#fff;color:var(--h-deep);border-color:#fff}
.dtl li.now .dot2{background:rgba(255,255,255,.25);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
@container main (min-width:820px){.hero.h3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}.hero-r{justify-content:flex-end}}
@container main (max-width:420px){.hero-acts>*{width:100%}.hero-prev{grid-template-columns:minmax(0,1fr);justify-items:center}.hero-ms{width:100%}}

/* ---------- sections ---------- */
.hsec{min-width:0}
.hsec-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:10px}
.hsec-h{font-size:var(--h-fs-h2);margin:0 0 10px;letter-spacing:-.01em}
.hsec-top .hsec-h{margin:0}.hsec-top p{margin:0}
.home3 ol,.home3 ul{margin:0;padding:0;list-style:none}

/* 3-step intro (new students) */
.intro3{display:grid;gap:var(--h-gap);grid-template-columns:minmax(0,1fr)}
@container main (min-width:700px){.intro3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.icard{position:relative;padding:var(--h-pad);border-radius:var(--h-r);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--h-e1)}
.icard b{display:block;font-size:var(--h-fs-h3);margin:10px 0 4px}.icard p{margin:0;color:var(--h-mut)}
.inum{position:absolute;top:14px;right:16px;font-size:13px;font-weight:800;color:var(--h-mut)}
.iic,.nic,.hsic,.htic,.jic{display:inline-grid;place-content:center;border-radius:12px;flex:none}
.iic{width:42px;height:42px;background:var(--h-surface2);color:var(--h-pri-ink)}

/* next three steps */
.next3{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:760px){.next3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.ncard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:start;padding:16px;border-radius:var(--h-r);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--h-e1);transition:transform var(--h-dur-fast) var(--h-ease),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast),background var(--h-dur-in)}
.ncard:hover{transform:translateY(-2px);box-shadow:var(--h-e2)}
.nic{width:36px;height:36px;background:var(--h-surface2);color:var(--h-pri-ink)}
.nbody b{display:block;font-size:var(--h-fs-h3);line-height:1.3;overflow-wrap:anywhere}.nbody p{margin:4px 0 0;color:var(--h-mut);font-size:.95em}
.nbtn,.nstat{grid-column:1/-1;justify-self:start}
.home3 .nbtn{margin:2px 0 0;min-height:44px;transition:transform var(--h-dur-fast) var(--h-ease)}
.nstat{display:inline-flex;align-items:center;min-height:32px;padding:2px 10px;border-radius:99px;background:var(--h-ok-bg);color:var(--h-ok);font-weight:700;font-size:var(--h-fs-label)}
.ncard.is-done{background:var(--h-ok-bg);border-color:transparent}.ncard.is-done .nic{background:var(--h-ok);color:#fff}
:root[data-theme="dark"] .ncard.is-done .nic{color:#14122b}
.ncard.k-review{border-left:4px solid var(--h-warn)}.ncard.k-review .nic{background:var(--h-warn-bg);color:var(--h-warn)}
.ncard.k-safety{border-left:4px solid var(--h-bad)}.ncard.k-safety .nic{background:var(--h-bad-bg);color:var(--h-bad)}
.alltasks{margin-top:10px}.alltasks summary{color:var(--h-pri-ink)}
.tlist{display:grid;gap:2px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:760px){.tlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
.tlist li.done .lnk{color:var(--h-mut)}
.tag-r{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--h-warn-bg);color:#7a4500;font-size:12px;font-weight:700}
:root[data-theme="dark"] .tag-r{color:#ffe3a0}

/* journey */
.journey{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);counter-reset:j}
@container main (min-width:640px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (min-width:980px){.journey{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container main (min-width:1360px){.journey{grid-template-columns:repeat(var(--jn,6),minmax(0,1fr))}}
.jstep{display:flex;flex-direction:column;gap:6px;min-width:0}
.jbtn{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i t" "i s" "w w";gap:2px 10px;align-items:center;text-align:left;padding:14px;border-radius:var(--h-r);border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);font:inherit;cursor:pointer;box-shadow:var(--h-e1);transition:transform var(--h-dur-fast) var(--h-ease),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast)}
.jbtn:hover{transform:translateY(-2px);box-shadow:var(--h-e2);border-color:var(--h-pri)}
.jic{grid-area:i;width:38px;height:38px;background:var(--h-surface2);color:var(--h-mut)}
.jbtn b{grid-area:t;font-size:var(--h-fs-h3);line-height:1.25}
.jst{grid-area:s;font-size:var(--h-fs-label);font-weight:700;color:var(--h-mut)}
.jwhy{grid-area:w;margin-top:8px;font-size:var(--h-fs-label);color:var(--h-mut);overflow-wrap:anywhere}
.s-done .jic{background:var(--h-ok);color:#fff}.s-done .jst{color:var(--h-ok)}
:root[data-theme="dark"] .s-done .jic{color:#14122b}
.s-progress .jic{background:var(--h-surface2);color:var(--h-pri-ink)}.s-progress .jst{color:var(--h-pri-ink)}.s-progress .jbtn{border-color:var(--h-pri)}
.s-review .jic{background:var(--h-warn-bg);color:var(--h-warn)}.s-review .jst{color:var(--h-warn)}
:root[data-theme="dark"] .s-review .jst{color:#ffe3a0}
.jmark{align-self:flex-start;min-height:40px;padding:4px 12px;border-radius:10px;border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-pri-ink);font:inherit;font-size:var(--h-fs-label);font-weight:650;cursor:pointer}
.jmark[aria-pressed="true"]{background:var(--h-ok-bg);color:var(--h-ok);border-color:transparent}

/* stats */
.hstats{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@container main (min-width:900px){.hstats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container main (max-width:340px){.hstats{grid-template-columns:minmax(0,1fr)}}
.hstat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i n" "l l" "s s";gap:2px 10px;align-items:center;text-align:left;padding:16px;border-radius:var(--h-r);border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);font:inherit;cursor:pointer;box-shadow:var(--h-e1);transition:transform var(--h-dur-fast) var(--h-ease),box-shadow var(--h-dur-fast)}
.hstat:hover{transform:translateY(-2px);box-shadow:var(--h-e2)}
.hsic{grid-area:i;width:36px;height:36px;background:var(--h-surface2);color:var(--h-pri-ink)}
.hstat .num{grid-area:n;font-size:clamp(24px,1vw + 18px,32px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;min-width:3ch}
.hsl{grid-area:l;margin-top:8px;font-weight:700;font-size:var(--h-fs-label)}
.hss{grid-area:s;font-size:12.5px;color:var(--h-mut)}
.hstat.zero .num{color:var(--h-mut)}.hstat.zero .hss{color:var(--h-pri-ink);font-weight:650}

/* quick tools */
.htools{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:600px){.htools{grid-template-columns:repeat(2,minmax(0,1fr))}.htools>.htool:last-child:nth-child(odd){grid-column:1/-1}}
@container main (min-width:1000px){.htools{grid-template-columns:repeat(3,minmax(0,1fr))}.htools>.htool:last-child:nth-child(odd){grid-column:auto}}
.htool{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:var(--h-r);border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);font:inherit;cursor:pointer;box-shadow:var(--h-e1);min-width:0;transition:transform var(--h-dur-fast) var(--h-ease),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast)}
.htool:hover{transform:translateY(-3px);box-shadow:var(--h-e2);border-color:var(--h-pri)}
.htic{width:44px;height:44px;background:var(--h-grad);color:#fff}
.htt{flex:1;min-width:0}.htt b{display:block;font-size:var(--h-fs-h3)}.htt span{display:block;font-size:var(--h-fs-label);color:var(--h-mut);margin-top:2px}
.htgo{color:var(--h-pri-ink);transition:transform var(--h-dur-fast) var(--h-ease)}.htool:hover .htgo{transform:translateX(3px)}

/* extras */
.hextras{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:900px){.hextras{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.hx{padding:16px;border-radius:var(--h-r);background:var(--h-surface);border:1px solid var(--h-line);box-shadow:var(--h-e1);min-width:0}
.hx h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--h-fs-h3)}.hx h3 .ic{color:var(--h-pri-ink)}
.tipc{background:linear-gradient(160deg,var(--h-surface2),var(--h-surface))}
.miles li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--h-line)}
.mchk{display:flex;align-items:center;gap:8px;flex:1 1 10rem;min-width:0;margin:0;font-weight:600;cursor:pointer}.mchk span{overflow-wrap:anywhere}
.miles li.done .mchk span{text-decoration:line-through;color:var(--h-mut)}
.mdate{font-size:12.5px;color:var(--h-mut)}.miles li.late .mdate{color:var(--h-warn);font-weight:700}
:root[data-theme="dark"] .miles li.late .mdate{color:#ffe3a0}
.mdel{width:36px;height:36px;display:grid;place-content:center;border:0;border-radius:8px;background:none;color:var(--h-mut);cursor:pointer}.mdel:hover{background:var(--h-surface2)}
.madd{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.madd input{flex:1 1 9rem;min-width:0;min-height:44px}.madd input[type=date]{flex:0 1 10rem}
.madd .btn{margin:0}
.feed li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--h-line);font-size:var(--h-fs-label)}
.feed span{overflow-wrap:anywhere;min-width:0}.feed time{color:var(--h-mut);white-space:nowrap}

/* project settings, safety & privacy */
.psett,.safep{border-radius:var(--h-r);background:var(--h-surface);border:1px solid var(--h-line);padding:4px 16px}
.psett[open],.safep[open]{padding-bottom:14px}
.psett summary,.safep summary{gap:8px;color:var(--h-ink);font-size:var(--h-fs-body)}
.psett summary .ic,.safep summary .ic{color:var(--h-pri-ink)}
.psett .warn{margin-top:12px}.psett .tbtns{margin-top:6px}
.safep ul{display:grid;gap:6px;margin-top:4px;font-size:var(--h-fs-label);color:var(--h-mut)}
.safep li b{color:var(--h-ink)}
.bnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--h-warn-bg);color:var(--h-ink);font-size:var(--h-fs-label)}
.bnote .ic{color:var(--h-warn)}
.hlink2{min-height:40px;padding:2px 4px;background:none;border:0;color:var(--h-pri-ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.home3>.hsec>.warn[role=alert]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;border:2px solid var(--h-bad);background:var(--h-bad-bg);color:var(--h-ink)}
.home3>.hsec>.warn[role=alert] .btn{margin:0}

/* first-time tour */
.tour{padding:14px 16px;border-radius:var(--h-r);background:var(--h-surface);border:2px solid var(--h-pri);box-shadow:var(--h-e2)}
.tour b{font-size:var(--h-fs-h3)}.tour p{margin:4px 0 8px}
.tour-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--h-pri-ink)}
.tourhl{outline:3px solid #ffb703!important;outline-offset:4px;border-radius:12px}

/* ---------- dialogs ---------- */
.hdlg{width:min(36rem,calc(100vw - 24px));max-height:min(88dvh,52rem);padding:0;border:0;border-radius:var(--h-r-lg);background:var(--h-surface);color:var(--h-ink);box-shadow:var(--h-e3)}
.hdlg::backdrop{background:rgba(20,16,50,.5)}
.dlg-in{padding:clamp(16px,2vw,24px);display:grid;gap:14px}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:10px}.dlg-h h2{margin:0;font-size:var(--h-fs-h2)}
.dlg-x{width:44px;height:44px;display:grid;place-content:center;border:0;border-radius:10px;background:var(--h-surface2);color:var(--h-ink);cursor:pointer}
.hdlg :focus-visible{outline:none;box-shadow:var(--h-focus)}
.hdlg fieldset{border:1px solid var(--h-line);border-radius:14px;padding:10px 12px 12px;margin:0;min-width:0}
.hdlg legend{padding:0 6px;font-weight:700;font-size:var(--h-fs-label)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.segi{position:relative;margin:0;cursor:pointer}
.segi input{position:absolute;opacity:0;width:1px;height:1px}
.segi span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:10px;border:1.5px solid var(--h-line);background:var(--h-bg);font-size:var(--h-fs-label);font-weight:650}
.segi input:checked+span{background:var(--h-pri);border-color:var(--h-pri);color:var(--h-on-pri)}
.segi input:focus-visible+span{box-shadow:var(--h-focus)}
.ordl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.ordl li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 4px 8px;border-radius:10px;background:var(--h-bg)}
.ordk{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;min-width:0}
.ordb{display:flex;gap:4px}.ordb button{width:40px;height:40px;display:grid;place-content:center;border:1px solid var(--h-line);border-radius:8px;background:var(--h-surface);color:var(--h-ink);cursor:pointer}
.dlg-f{justify-content:space-between}.dlg-f .btn{margin:0}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plist li{display:flex;align-items:stretch;gap:6px}
.popen{flex:1;min-width:0;display:grid;text-align:left;gap:2px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--h-line);background:var(--h-bg);color:var(--h-ink);font:inherit;cursor:pointer}
.popen b{overflow-wrap:anywhere}.popen span{font-size:12.5px;color:var(--h-mut)}
.plist li.cur .popen{border-color:var(--h-pri);background:var(--h-surface2)}
.ppin{width:44px;flex:none;display:grid;place-content:center;border:1.5px solid var(--h-line);border-radius:12px;background:var(--h-bg);color:var(--h-mut);cursor:pointer}
.ppin[aria-pressed="true"]{color:var(--h-warn);border-color:var(--h-warn)}

/* ---------- motion ---------- */
/* hero: its own short entrance when Home opens */
@keyframes hhero{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero.h3[data-in],.tour[data-in]{animation:hhero 500ms cubic-bezier(.22,1,.36,1) both}
@keyframes hrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* scroll-linked reveal (see app.js): progress follows scroll position, never a timer. Insets (--rv-ti/--rv-bi) exclude the
   phone's bottom tab bar and the tablet's top bar, so the reveal happens where the student can see it.
   Engine 1: CSS scroll-driven animations. Fade-in runs over the first 32vh of a card's travel into view; fade-out over the
   last 24vh of its travel out of the top (Full only). Before/after those ranges the card is simply fully visible. */
@keyframes rvIn{from{opacity:0;translate:0 var(--rv-dy,18px)}to{opacity:1;translate:none}}
@keyframes rvOut{from{opacity:1}to{opacity:0}}
html.rv-on:not(.rv-full){--rv-dy:8px}
@supports (animation-timeline: view()){
  html.rv-on.rv-sda #main .rv:not(.rv-static){animation:rvIn linear both;animation-timeline:view(block var(--rv-ti,0px) var(--rv-bi,0px));animation-range:cover 0% cover var(--rv-end,32vh)}
  html.rv-on.rv-sda.rv-full #main .rv:not(.rv-static){animation:rvIn linear both,rvOut linear forwards;animation-timeline:view(block var(--rv-ti,0px) var(--rv-bi,0px)),view(block var(--rv-ti,0px) var(--rv-bi,0px));animation-range:cover 0% cover var(--rv-end,32vh),cover calc(100% - 24vh) cover 100%}
}
/* Engine 2 (JS fallback) writes inline opacity/translate; nothing to declare here. */
/* Whatever the student is using with the keyboard or typing into is always fully visible.
   (:focus-visible, so a mouse click on a half-revealed card doesn't make it pop to full opacity.) */
html.rv-on #main .rv:focus-visible,html.rv-on #main .rv:has(:focus-visible){animation:none!important;opacity:1!important;translate:none!important}
/* Home updates in place after a click; browser scroll anchoring must not nudge the page by an animated offset */
html.rv-on{overflow-anchor:none}
.rv-on #main .rv:focus-within{opacity:1;translate:none}
.hero.h3.swap{animation:hrise var(--h-dur-in) var(--h-ease) both}
:root[data-motion="off"] .home3 *,:root[data-motion="off"] .home3,:root[data-motion="off"] .hdlg *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.home3 *,.home3,.hdlg *{animation:none!important;transition:none!important}.hero-art .orbit,.hero-art .orbit2{animation:none!important}}
@media(forced-colors:active){.ncard,.jbtn,.hstat,.htool,.hx,.icard{border:1px solid CanvasText}.ring-fg,.meter-bar i{stroke:Highlight;background:Highlight}}
@container main (max-width:600px){.hero-art{width:140px}}
.psett .lvldone{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--h-ok-bg);color:var(--h-ink);font-size:var(--h-fs-label)}.psett .lvldone .ic{color:var(--h-ok);flex:none;margin-top:2px}
.safep .safe-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.safep .safe-acts .btn{margin:0;min-height:40px;font-size:var(--h-fs-label)}