*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#0B1F17;font-family:-apple-system,BlinkMacSystemFont,
 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#12211B;overscroll-behavior:none}
#app{max-width:820px;margin:0 auto;min-height:100vh;background:#F4F7F5;
 display:flex;flex-direction:column}
.bar{background:#00563A;color:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px;
 position:sticky;top:0;z-index:9}
.bar .mk{width:20px;flex:0 0 20px}
.bar h1{font-size:15px;margin:0;font-weight:700;letter-spacing:.04em}
/* Which book am I in. Takes the flex so the title and the count stay put, and
   drops out entirely on a narrow phone where the count matters more. */
.vol{flex:1;font-size:12.5px;color:#BFE0CE;font-weight:650;letter-spacing:.02em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:400px){.bar h1{flex:1}.vol{display:none}}
.pill{background:rgba(255,255,255,.16);border-radius:99px;padding:4px 11px;font-size:12.5px;
 font-weight:700}
.wrap{padding:16px 16px 120px;flex:1}
.cardhead{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.num{background:#00563A;color:#fff;border-radius:8px;padding:3px 10px;font-weight:800;font-size:15px}
.score{color:#5b6b63;font-size:13px}
h2{font-size:21px;line-height:1.25;margin:6px 0 12px;color:#0E1A15}
.court{background:#fff;border:1px solid #DDE6E1;border-radius:12px;padding:6px;margin-bottom:14px;
 text-align:center}
.court svg{width:100%;max-width:340px;height:auto}
.sit{font-size:17px;line-height:1.5;margin:0 0 16px;white-space:pre-wrap}
.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid #DDE6E1;
 border-radius:12px;padding:14px 15px;font-size:17px;line-height:1.4;margin-bottom:10px;
 font-family:inherit;color:#12211B}
.opt{border-left-width:6px}
.opt b{display:inline-block;border-radius:7px;padding:3px 11px;margin-right:11px;
 font-size:15px;color:#fff;font-weight:800}
.optA b{background:#C8A22E}
.optB b{background:#2E7DA8}
.optC b{background:#B0563A}
.optD b{background:#4C7A4E}
.opt.sel{box-shadow:inset 0 0 0 2px #00563A;border-color:#00563A;background:#EDF6F0}
/* The letter colour survives every state. It is how a card gets talked about
   out loud - "I took C" has to mean the rust one before and after the answer. */
.optA,.optA.sel,.optA.right,.optA.wrong{border-left-color:#C8A22E}
.optB,.optB.sel,.optB.right,.optB.wrong{border-left-color:#2E7DA8}
.optC,.optC.sel,.optC.right,.optC.wrong{border-left-color:#B0563A}
.optD,.optD.sel,.optD.right,.optD.wrong{border-left-color:#4C7A4E}
.lab{display:block;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 color:#5b6b63;margin:16px 0 6px}
textarea{width:100%;border:2px solid #DDE6E1;border-radius:12px;padding:13px;font-size:17px;
 line-height:1.45;font-family:inherit;min-height:110px;background:#fff;color:#12211B;resize:vertical}
textarea:focus,.opt:focus{outline:none;border-color:#00563A}
.btn{display:block;width:100%;background:#00563A;color:#fff;border:0;border-radius:12px;
 padding:16px;font-size:17px;font-weight:800;font-family:inherit;margin-top:16px}
.btn[disabled]{background:#B9C7C0}
.btn.ghost{background:#fff;color:#00563A;border:2px solid #00563A}
.opt.right{border-color:#00693F;background:#E6F4EC;box-shadow:none}
.opt.wrong{border-color:#B0563A;background:#FBEDE8;box-shadow:none}
.tag{display:inline-block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.07em;
 text-transform:uppercase;border-radius:99px;padding:3px 9px;margin-left:9px;
 vertical-align:middle;white-space:nowrap}
.tag.ok{background:#00693F;color:#fff}
.tag.me{background:#fff;color:#5b6b63;border:1.5px solid #C3D0C9}
.opt[disabled]{opacity:1}
.verd{border-radius:10px;padding:12px 14px;font-weight:800;font-size:17px;margin-top:16px}
.verd.ok{background:#E6F4EC;color:#00563A}
.verd.no{background:#FBEDE8;color:#8A3B08}
.mine{background:#fff;border:1px solid #DDE6E1;border-radius:10px;padding:11px 13px;margin-top:10px}
.mine h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#5b6b63;margin:0 0 4px}
.mine p{margin:0;font-size:16px;line-height:1.5;white-space:pre-wrap}
.key{margin-top:18px;border-top:3px solid #C8A22E;padding-top:14px}
.rem{background:#FBF3DA;border-left:4px solid #C8A22E;border-radius:0 8px 8px 0;padding:11px 13px;
 font-weight:700;font-size:16px;margin-bottom:12px}
.sec{margin-bottom:13px}
.sec h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#00563A;margin:0 0 4px}
.sec p{margin:0;font-size:16px;line-height:1.5;white-space:pre-wrap}
.sec.said{background:#EDF6F0;border-radius:8px;padding:10px 12px}
.notline{font-size:15.5px;line-height:1.45;margin-bottom:4px;color:#3d4d46}
.drill{background:#FAFCFA;border:1px solid #C8D9CD;border-left:4px solid #C8A22E;
 border-radius:0 8px 8px 0;padding:11px 13px;margin-top:12px}
.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #DDE6E1;
 padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;
 max-width:820px;margin:0 auto}
.nav button{flex:1;border:0;border-radius:11px;padding:14px;font-size:16px;font-weight:800;
 font-family:inherit;background:#E8EFEA;color:#00563A}
.nav button.pri{background:#00563A;color:#fff}
.nav button[disabled]{opacity:.4}
.done{color:#00693F;font-weight:800}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{flex:1;border:2px solid #DDE6E1;background:#fff;border-radius:10px;padding:10px;
 font-size:14px;font-weight:700;font-family:inherit;color:#5b6b63}
.tabs button.on{border-color:#00563A;color:#00563A;background:#EDF6F0}
.list button{display:block;width:100%;text-align:left;background:#fff;border:1px solid #DDE6E1;
 border-radius:10px;padding:12px 13px;font-size:16px;font-family:inherit;margin-bottom:8px;
 color:#12211B;display:flex;gap:10px;align-items:center}
.list .n{background:#E8EFEA;border-radius:7px;padding:2px 9px;font-weight:800;font-size:14px;
 flex:0 0 auto}
.list .t{flex:1;line-height:1.3}
.hint{font-size:14px;color:#5b6b63;margin-top:8px;line-height:1.45}
.count{font-size:13px;color:#8a978f;text-align:right;margin-top:5px;font-variant-numeric:tabular-nums}
.count.near{color:#B0563A}
.count.max{color:#B0563A;font-weight:800}

/* ---------------------------------------------------- login and licence --
   Same palette and type as crosscourtiq.com, so signing in does not feel like
   leaving the site. */

.boot{padding:40px;text-align:center;color:#5b6b63;font-size:15px}

.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;
 padding:28px 18px;background:linear-gradient(160deg,#04150F 0%,#04563A 62%,#00693F 100%)}
.gatebox{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:30px 26px 26px;
 box-shadow:0 18px 50px rgba(0,0,0,.28)}
.gatemark{width:34px;margin:0 auto 10px}
.gatemark svg{width:34px;height:auto;display:block}
.gatename{text-align:center;font-size:13px;font-weight:800;letter-spacing:.16em;color:#00563A;
 margin-bottom:22px}

.gh{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:#0E1A15}
.gp{font-size:15.5px;line-height:1.55;color:#5b6b63;margin:0 0 18px}
.gp.small{font-size:14px;margin-top:16px}
.gp b{color:#12211B}

.gin{width:100%;border:2px solid #DDE6E1;border-radius:12px;padding:15px 14px;font-size:17px;
 font-family:inherit;background:#fff;color:#12211B;margin-bottom:12px}
.gin:focus{outline:none;border-color:#00563A}
.gin.key{font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gin.code{text-align:center;font-size:30px;letter-spacing:.34em;font-weight:800;padding:14px 0 14px .34em}

.gerr{background:#FBEDE8;color:#8A3B08;border-radius:10px;padding:11px 13px;font-size:15px;
 font-weight:700;margin-bottom:14px}
.gdev{background:#FBF3DA;border-left:4px solid #C8A22E;border-radius:0 8px 8px 0;padding:10px 12px;
 font-size:14px;margin-bottom:14px;color:#6B5407}

.lnk{display:block;width:100%;background:none;border:0;color:#00563A;font-family:inherit;
 font-size:15px;font-weight:700;padding:14px 0 2px;text-decoration:underline}

/* ------------------------------------------------------------- account -- */

.acct{display:flex;align-items:center;justify-content:space-between;gap:12px;
 background:#fff;border:1px solid #DDE6E1;border-radius:12px;padding:11px 13px;margin-bottom:12px}
.acct span{font-size:14.5px;color:#5b6b63;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct button{background:none;border:0;color:#00563A;font-family:inherit;font-size:14.5px;
 font-weight:750;text-decoration:underline;flex:0 0 auto}

.syncflag{font-size:13.5px;color:#8A3B08;text-align:center;padding:6px 16px 0;min-height:0}