/* 2026-10-10: shared look for the Grammar pick-the-word activities (a/an, apostrophes…)
   Same layout as /homophones (Todd Lab colors). Used with /grammar/practice.js. */
:root{
  --ink:#22303d;--card:#fff;--line:#d9e3ec;--muted:#5d6b78;
  --navy:#1f4e79;--navyd:#163a5a;--sky:#3a8fd6;--skybg:#e3f0fb;--sun:#f2b33d;
  --good:#2f7d4a;--bad:#b03a3a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{background:#f7fbff;min-height:100vh;color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;}
.wrap{max-width:900px;margin:0 auto;padding:24px 16px 60px;}
.hidden{display:none!important;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:44px;}
.topbar .back{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-family:inherit;font-size:.95rem;color:var(--navy);cursor:pointer;font-weight:600;}
.topbar .back:hover{border-color:var(--sky);}
.topbar .title{flex:1;font-family:Georgia,serif;color:var(--navy);font-weight:bold;text-align:center;font-size:1.15rem;}
.topbar .tb-r{min-width:92px;display:flex;justify-content:flex-end;}
body.menu .topbar .title{visibility:hidden;}
.rulebtn{background:#fff;border:2px solid var(--line);border-radius:12px;padding:7px 12px;font-family:inherit;font-weight:700;color:var(--navy);cursor:pointer;font-size:.95rem;}
.rulebtn:hover{border-color:var(--sky);background:var(--skybg);}
h1.big{text-align:center;color:var(--navy);font-size:2.2rem;margin:10px 0 4px;}
.sub{text-align:center;color:var(--muted);font-size:1.05rem;}
.section{font-family:Georgia,serif;color:var(--navy);font-size:1.5rem;margin-top:22px;padding-bottom:6px;border-bottom:3px solid var(--sun);}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:16px;}
.tile{position:relative;display:flex;gap:14px;align-items:center;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px;font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .12s,transform .12s;}
.tile:hover{border-color:var(--sky);transform:translateY(-2px);}
.tile .num{flex:0 0 44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;font-family:Georgia,serif;font-weight:bold;font-size:1.3rem;display:flex;align-items:center;justify-content:center;}
.tile b{display:block;font-size:1.12rem;color:var(--navy);line-height:1.3;}
.tile small{display:block;color:var(--muted);font-size:.9rem;margin-top:2px;}
.tile .mg{position:absolute;top:-10px;right:10px;font-size:.85rem;font-weight:bold;color:var(--good);background:#e2f2e7;border:1px solid var(--good);border-radius:999px;padding:1px 9px;}
.tile .mg.low{color:var(--bad);background:#f9e4e4;border-color:var(--bad);}

.rule{background:#fff;border:2px solid var(--line);border-radius:18px;overflow:hidden;margin-top:14px;}
.rule .rh{background:var(--skybg);color:var(--navy);font-family:Georgia,serif;font-weight:bold;font-size:1.3rem;padding:12px 18px;}
.rule table{width:100%;border-collapse:collapse;}
.rule td{padding:10px 16px;border-top:1px solid var(--line);vertical-align:top;font-size:1.08rem;line-height:1.45;}
.rule td.w{font-family:Georgia,serif;font-weight:bold;font-size:1.3rem;color:var(--navy);white-space:nowrap;width:1%;}
.rule td.ex{color:var(--muted);font-style:italic;}
.rule td.ex u{color:var(--ink);font-style:normal;font-weight:700;text-decoration-color:var(--sun);text-decoration-thickness:3px;}
.rule .tip{background:#fff7e0;border-top:2px dashed var(--sun);padding:12px 18px;font-size:1.05rem;line-height:1.5;}
@media (max-width:600px){.rule td.ex{display:none;}}

.modepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px;}
.modebtn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 18px;background:var(--card);border:3px solid var(--line);border-radius:22px;cursor:pointer;font-family:inherit;color:var(--ink);text-decoration:none;transition:border-color .12s,transform .12s;}
.modebtn:hover{border-color:var(--sky);transform:translateY(-2px);}
.modebtn .mi{font-size:2.6rem;line-height:1;}
.modebtn b{font-family:Georgia,serif;font-size:1.4rem;color:var(--navy);}
.modebtn .msub{font-size:1rem;color:var(--muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.modebtn.you{border-color:var(--navy);}

.slots{display:flex;gap:10px;justify-content:center;margin:4px 0 12px;flex-wrap:wrap;}
.slot{width:50px;height:50px;border:2px solid var(--line);border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:bold;color:var(--good);}
.slot.got{border-color:var(--good);background:#e2f2e7;transform:scale(1.08);}
.banner{font-weight:600;font-size:1.15rem;border-radius:12px;padding:10px 16px;margin:0 0 12px;min-height:1.45em;border:1px solid transparent;text-align:center;}
.banner.good{background:#e2f2e7;border-color:var(--good);color:var(--good);}
.banner.bad{background:#f9e4e4;border-color:var(--bad);color:var(--bad);}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:30px 28px;margin:0 0 16px;}
.card .sen{font-family:Georgia,serif;font-size:2rem;line-height:1.5;}
.card .hintw{color:var(--muted);font-size:.8em;}
.card .blank{display:inline-block;min-width:3.6em;border-bottom:4px solid var(--navy);padding:0 .25em;color:var(--sky);font-weight:bold;text-align:center;}
.card .blank.filled{background:var(--skybg);border-radius:8px 8px 0 0;}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:640px;margin:0 auto;}
.opt{display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:18px 10px;cursor:pointer;font-size:1.6rem;font-family:Georgia,serif;color:var(--ink);}
.opt:hover{border-color:var(--sky);}
.opt.sel{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);background:var(--skybg);}
.nextrow{text-align:center;margin-top:18px;}
.btn{background:var(--navy);color:#fff;border:none;border-radius:14px;padding:14px 34px;font-size:1.15rem;font-family:Georgia,serif;font-weight:bold;cursor:pointer;box-shadow:0 3px 0 var(--navyd);margin:4px;}
.btn:disabled{opacity:.45;cursor:default;}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--navyd);}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:none;font-weight:normal;}
.pass{text-align:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:26px 18px;}
.pass h2{color:var(--navy);font-size:1.8rem;margin-bottom:8px;}
.pass p{font-size:1.1rem;line-height:1.5;margin-bottom:14px;}

.gtop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.qdots{display:flex;gap:5px;flex-wrap:wrap;flex:1;}
.qdot{min-width:34px;height:32px;padding:0 6px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;}
.qdot.ans{background:var(--skybg);border-color:var(--sky);color:var(--navy);}
.qdot.cur{background:var(--navy);border-color:var(--navy);color:#fff;}
.qdot.clr{color:var(--bad);border-color:var(--bad);padding:0 10px;}
.helpbtn{background:#fff7e0;border:2px solid #f0b429;color:#8a5a00;border-radius:12px;padding:7px 14px;font-weight:700;font-family:inherit;cursor:pointer;}
.helpbtn.on{background:#f0b429;color:#fff;}
.qhead{font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;}
.helpnote{border-radius:12px;padding:12px 16px;margin-top:14px;font-size:1.08rem;line-height:1.6;background:#fff7e0;border:2px solid #f0d27a;color:#5a4300;}
.gnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;}
.donebox{text-align:center;padding:26px 10px;background:#fff;border:2px solid var(--line);border-radius:18px;}
.donebox h2{color:var(--navy);font-size:1.6rem;margin:8px 0 6px;}
.donebox p{color:var(--muted);margin-bottom:16px;line-height:1.5;}

.veil{position:fixed;inset:0;background:rgba(20,30,45,.55);display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto;z-index:50;}
.veil .box{background:#fff;border-radius:20px;max-width:760px;width:100%;padding:14px;position:relative;}
.veil .x{position:absolute;right:10px;top:8px;border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--muted);}
.startrow{text-align:center;margin-top:20px;}
@media (max-width:600px){
  .card .sen{font-size:1.45rem;} .opt{font-size:1.25rem;} .slot{width:40px;height:40px;font-size:1.4rem;}
  .topbar .tb-r{min-width:0;} h1.big{font-size:1.7rem;}
}

/* 📌 anchor chart (practice.chart) */
.rulebtn.chartbtn{background:#ffe680;border-color:#c9a400;color:#3a2e00;}
.rulebtn.chartbtn:hover{background:#fff1a8;}
.veil .box.chartbox{max-width:min(1400px,96vw);padding:10px;}
.chartbox img{display:block;width:100%;height:auto;max-height:calc(100vh - 80px);object-fit:contain;border-radius:12px;}