/* Roji Practice Cards: styles for the card maker and the help page.
   Layout: Roji's classroom-worksheet look. Brand header with Roji pointing at the tool name,
   settings on the left, real-size paper sheets on a desk on the right (stacked on phones). */
:root{
  --navy:#1D5B8D; --sky:#0B7CC9; --green:#3CC47C; --green-ink:#1E8A52;
  --bg:#EEF5FB; --surface:#FFFFFF; --ink:#16324A; --muted:#557089; --line:#CFE0EE; --field:#F7FBFE; --desk:#DCE9F4;
  --on-navy:#FFFFFF; --warn-bg:#FFF1CC; --warn-ink:#7A5400; --ok-bg:#DDF5E8; --ok-ink:#15693F;
  --title-fill:#0B7CC9; --title-stroke:#12344F;
  --shadow:0 1px 0 #d7e6f2, 0 10px 30px -18px rgba(29,91,141,.45);
  /* paper stays paper in both themes: it is what prints */
  --paper:#FFFFFF; --p-ink:#16324A; --p-soft:#4F6A82; --p-line:#C5D6E5; --p-hl:#FFEBA8; --p-accent:#1D5B8D;
  --f-display:"Luckiest Guy","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1B27; --surface:#15283A; --ink:#E6F0F8; --muted:#9BB3C8; --line:#27425A; --field:#10202F; --desk:#0A141D;
  --navy:#5CADE2; --sky:#5CADE2; --green-ink:#5FD897; --on-navy:#06121C;
  --warn-bg:#3B3013; --warn-ink:#F4CF6E; --ok-bg:#153B2A; --ok-ink:#7FE3AE;
  --title-fill:#5CADE2; --title-stroke:#06121C; --shadow:0 12px 30px -20px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1B27; --surface:#15283A; --ink:#E6F0F8; --muted:#9BB3C8; --line:#27425A; --field:#10202F; --desk:#0A141D;
  --navy:#5CADE2; --sky:#5CADE2; --green-ink:#5FD897; --on-navy:#06121C;
  --warn-bg:#3B3013; --warn-ink:#F4CF6E; --ok-bg:#153B2A; --ok-ink:#7FE3AE;
  --title-fill:#5CADE2; --title-stroke:#06121C; --shadow:0 12px 30px -20px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3vw,32px);padding-block:12px 40px}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- brand header ---------- */
.brandbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;color:var(--navy);font-size:.9rem}
.brandbar a{color:inherit;text-decoration:none}
.brandbar .kit{letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--muted)}
.hero{display:flex;align-items:center;margin-block:4px 10px}
.hero-text{flex:1;min-width:0;padding-bottom:clamp(8px,2vw,20px)}
.eyebrow{font-weight:800;color:var(--green-ink);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,6vw,3.8rem);line-height:.95;margin:4px 0 10px;
  color:var(--title-fill);-webkit-text-stroke:2px var(--title-stroke);paint-order:stroke fill;letter-spacing:.01em;text-wrap:balance;text-shadow:0 3px 0 var(--title-stroke)}
.tagline{margin:0;color:var(--muted);font-weight:700;max-width:52ch}
.roji{flex:0 0 auto;width:clamp(110px,20vw,200px);display:block}
.roji img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 12px rgba(18,52,79,.18))}

/* ---------- card maker layout ---------- */
.app{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:940px){.app{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:6px 20px 20px;min-width:0}
.grp{padding-top:14px;display:grid;gap:10px}
.grp+.grp{border-top:2px dashed var(--line);margin-top:16px}
.grp h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-ink);margin:0;font-weight:800}
label{display:grid;gap:4px;font-size:.85rem;font-weight:800;color:var(--muted)}
label .hint{font-weight:600;font-size:.78rem}
.lbl{font-size:.85rem;font-weight:800;color:var(--muted);margin-bottom:6px}
input,select,textarea{font-size:.95rem;font-weight:700;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:10px;padding:7px 10px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--sky)}
textarea{resize:vertical;line-height:1.4;font-weight:600}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;align-items:end}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-size:.85rem;font-weight:800;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.check{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.check input{width:auto;accent-color:var(--green)}
.note{font-size:.82rem;color:var(--muted);background:var(--field);border-radius:10px;padding:8px 10px;margin:0;font-weight:600}

.preview{min-width:0;display:grid;gap:12px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{font-size:.9rem;font-weight:800;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:999px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.tab:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{font-size:.92rem;font-weight:800;border:2px solid var(--navy);background:var(--navy);color:var(--on-navy);border-radius:12px;padding:8px 14px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.8rem;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.chip.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
.chip.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.desk{background:var(--desk);border-radius:18px;padding:18px;display:grid;gap:18px;justify-items:center}
.frame{width:100%;max-width:760px;position:relative}
.frame.extra{display:none}
.frame .sheet{position:absolute;top:0;left:0;transform-origin:0 0;box-shadow:0 1px 3px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.10)}
.more{font-size:.88rem;font-weight:700;color:var(--muted);margin:0}
footer.site{margin-top:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;font-weight:700}
footer.site a{color:var(--navy)}

/* ---------- printed paper (816 × 1056 px = 8.5 × 11 in) ---------- */
.sheet{width:816px;height:1056px;background:var(--paper);color:var(--p-ink);font-family:var(--f-body);display:grid;overflow:hidden}
.sheet.l-full{grid-template-rows:1fr}
.sheet.l-half{grid-template-rows:1fr 1fr}
.sheet.l-quarter{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.sheet.l-half .card+.card{border-top:1.5px dashed var(--p-line)}
.sheet.l-quarter .card:nth-child(odd){border-right:1.5px dashed var(--p-line)}
.sheet.l-quarter .card:nth-child(n+3){border-top:1.5px dashed var(--p-line)}
.card{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;position:relative}
.card.blank{background:repeating-linear-gradient(45deg,transparent 0 10px,#F1F5F9 10px 11px)}
.card.over::after{content:"Too much for this size";position:absolute;right:10px;bottom:10px;background:#9A2A1F;color:#fff;font-size:12px;font-weight:800;padding:3px 8px;border-radius:4px}
.line{display:inline-block;border-bottom:1.5px solid var(--p-ink);min-width:9em;height:1em;flex:1}
.box{display:inline-block;width:.95em;height:.95em;border:2px solid var(--p-ink);border-radius:3px;flex:none}
.c-head{display:flex;gap:20px;justify-content:space-between;align-items:flex-start}
.c-titles{min-width:0;display:grid;gap:6px}
.c-eyebrow{font-size:.76em;text-transform:uppercase;letter-spacing:.09em;color:var(--p-soft);font-weight:800}
.c-title{font-family:var(--f-display);font-weight:400;color:var(--p-accent);margin:0;line-height:1;letter-spacing:.01em;text-wrap:balance}
.c-meta{display:flex;flex-wrap:wrap;gap:4px 22px;color:var(--p-soft);font-size:.9em;font-weight:700;align-items:baseline}
.c-meta .nm{display:flex;gap:6px;align-items:baseline;color:var(--p-ink);min-width:15em}
.c-qr{flex:none;display:grid;gap:4px;justify-items:center;text-align:center}
.c-qr svg{display:block;width:100%;height:auto}
.c-qr-lbl{font-size:.72em;font-weight:800;line-height:1.2}
.c-goal{background:var(--p-hl);border-radius:6px;padding:.5em .75em;font-weight:800;line-height:1.3}
.c-goal-k{font-size:.78em;text-transform:uppercase;letter-spacing:.08em;margin-right:.5em;color:var(--p-accent)}
.c-sec{font-size:.74em;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:var(--p-accent);margin-bottom:.45em}
.c-ex-p{font-weight:800;font-variant-numeric:tabular-nums}
.c-ex ol{margin:.3em 0 0;padding-left:1.4em;display:grid;gap:.15em}
.c-days{flex:1;min-height:0;overflow:hidden}
.c-day{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:12px;padding:.55em 0;border-top:1px solid var(--p-line)}
.c-day-h{display:flex;flex-direction:column;gap:2px}
.c-day-h b{display:flex;gap:6px;align-items:center}
.c-date{font-size:.8em;color:var(--p-soft);font-weight:700;padding-left:1.5em}
.c-probs{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5em,1fr));gap:.5em 1.2em;align-content:start}
.p{display:flex;flex-wrap:wrap;gap:.15em .45em;align-items:baseline;min-width:0}
.p.long{grid-column:1/-1}
.p-q{font-weight:800;font-variant-numeric:tabular-nums}
.p.long .p-q{font-weight:600}
.p-a{display:flex;gap:.4em;align-items:baseline;flex:1;min-width:6em;color:var(--p-soft);font-weight:700}
.c-rate{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.9em;font-weight:700}
.c-rate .c-sec{margin:0}
.c-rate .o{display:flex;gap:6px;align-items:center}
.dot{display:inline-block;width:.9em;height:.9em;border:2px solid var(--p-ink);border-radius:50%}
.c-foot{display:grid;gap:6px;font-size:.82em;color:var(--p-soft);border-top:1px solid var(--p-line);padding-top:.55em}
.c-tip b{color:var(--p-ink)}
.c-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--p-accent)}
.c-brand img{width:2.2em;height:2.2em;border-radius:50%}
.scan-note{font-size:.85em;color:var(--p-soft);font-style:italic}
.card.full{padding:44px 52px 30px;gap:16px;font-size:15px}
.card.full .c-title{font-size:38px}
.card.full .c-qr{width:150px}
.card.half{padding:24px 34px 14px;gap:10px;font-size:13px}
.card.half .c-title{font-size:26px}
.card.half .c-qr{width:104px}
.card.half .c-days{display:grid;grid-template-columns:repeat(var(--nd),minmax(0,1fr));gap:0 14px}
.card.half .c-days>.c-sec{grid-column:1/-1}
.card.half .c-col{display:flex;flex-direction:column;gap:.45em;border-top:1px solid var(--p-line);padding-top:.45em;min-width:0}
.card.half .p{flex-direction:column;align-items:stretch;gap:.1em}
.card.half .p-a,.card.half .line{min-width:0}
.card.half .c-brand img,.card.quarter .c-brand img{width:1.8em;height:1.8em}
.card.quarter{padding:20px 22px 12px;gap:8px;font-size:12px}
.card.quarter .c-title{font-size:20px}
.card.quarter .c-qr{width:88px}
.card.quarter .c-head{gap:10px}
.card.quarter .c-meta .nm{min-width:0;width:100%}
.card.quarter .c-rate{gap:4px 12px}
.card.quarter .c-brand{font-size:.9em}
.q-days{display:grid;gap:.35em;align-content:start}
.q-day{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--p-line);padding-bottom:.35em}
.q-day .c-date{margin-left:auto;padding-left:0}
.k-list{display:grid;gap:.4em;align-content:start}
.k-day{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:10px;border-top:1px solid var(--p-line);padding-top:.4em}
.k-items{display:flex;flex-wrap:wrap;gap:.25em 1.3em;font-variant-numeric:tabular-nums}
.k-items span.long{flex-basis:100%}

/* ---------- help page content (help.html and the phone preview) ---------- */
.help-card{background:var(--paper);color:var(--p-ink);display:grid;gap:14px;font-size:17px;padding:20px 18px 24px}
.help-card p{margin:0}
.h-eyebrow{font-weight:800;color:var(--green-ink);letter-spacing:.08em;text-transform:uppercase;font-size:.74rem}
.help-card .h-eyebrow{color:#1E8A52}
.h-title{font-family:var(--f-display);font-weight:400;color:var(--p-accent);font-size:30px;line-height:1;margin:0;text-wrap:balance}
.h-goal{background:var(--p-hl);border-radius:8px;padding:10px 12px;font-weight:800}
.h-box{border:2px solid var(--p-line);border-radius:14px;padding:10px 12px}
.h-box>summary{cursor:pointer;font-weight:800;display:flex;justify-content:space-between;gap:8px}
.h-box>summary span{color:var(--p-soft);font-weight:700;font-size:.9em}
.h-ex{font-weight:800;margin-top:8px!important}
.h-steps{margin:.4em 0 0;padding-left:1.3em;display:grid;gap:.2em}
.h-q{display:grid;gap:4px;padding:8px 0;border-top:1px solid var(--p-line)}
.h-box>summary+.h-q{border-top:0}
.h-math{font-weight:800;font-variant-numeric:tabular-nums}
.h-check summary{cursor:pointer;color:var(--p-accent);font-weight:800;font-size:.9em}
.h-check b{color:#15693F}
.h-tip{background:#EEF5FB;border-radius:10px;padding:10px 12px}
.h-tip b{display:block;color:var(--p-accent);font-size:.8em;text-transform:uppercase;letter-spacing:.08em}
.h-small{font-size:.9em;color:var(--p-soft)}
.h-privacy{font-size:12px;color:var(--p-soft);border-top:1px solid var(--p-line);padding-top:10px}
.h-notice{font-size:14px;font-weight:700;background:#FFF1CC;color:#7A5400;border-radius:8px;padding:8px 10px}
.phone{width:min(390px,100%);border-radius:30px;border:10px solid #0F1E2B;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.2);background:var(--paper)}
.ph-bar{background:#0F1E2B;color:#fff;font-size:11px;padding:6px 14px 8px;min-width:0}
.ph-bar span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* help.html page shell */
.help-page{max-width:600px;margin:0 auto;padding-inline:16px;padding-block:12px 40px}
.help-page .hero{margin-block:6px 12px}
.help-page h1{font-size:clamp(1.9rem,8vw,2.6rem)}
.help-page .roji{width:clamp(90px,26vw,140px)}
.help-page .help-card{border-radius:18px;box-shadow:var(--shadow)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- printing ---------- */
@page{size:letter;margin:0}
@media print{
  body{background:#fff}
  .brandbar,.hero,.panel,.bar,.chips,.more,.phone,footer.site{display:none!important}
  .wrap,.app,.preview,.desk{display:block;padding:0;margin:0;max-width:none;background:none}
  .frame,.frame.extra{display:block;height:auto!important;max-width:none;width:8.5in;break-after:page}
  .frame .sheet{position:static;transform:none!important;box-shadow:none;width:8.5in;height:11in}
  .card.blank{background:none}
  .card.over::after{display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}