/* Learning features for students: Today's 10 (practice), exam-hall mode, Mistake book.
   Builds on tna.css + portal.css tokens and components. Prefixes: .pen-* shared pen marks,
   .dp-* daily practice, .ex-* exam hall, .mk-* mistake book. */

/* ================================================================ shared: the teacher's pen */
@keyframes pen-draw{from{stroke-dashoffset:var(--len,200)}to{stroke-dashoffset:0}}
@keyframes pen-pop{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
.pen-tick,.pen-ring,.pen-cross{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pen-tick path,.pen-ring path,.pen-cross path{stroke-dasharray:var(--len,200);stroke-dashoffset:0;animation:pen-draw 360ms var(--ease) both}
.pen-tick{width:34px;height:28px;right:14px;top:50%;margin-top:-14px;stroke:var(--accent-500);stroke-width:4.5}
.pen-ring{inset:-6px -4px;width:calc(100% + 8px);height:calc(100% + 12px);stroke:var(--accent-500);stroke-width:2.6}
.pen-ring path{vector-effect:non-scaling-stroke}
.pen-cross{width:22px;height:22px;right:16px;top:50%;margin-top:-11px;stroke:var(--danger);stroke-width:3}
.pen-cross path:nth-child(2){animation-delay:120ms}

/* option list used by practice + mistake retry */
.opts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 64px 10px 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--sheet);color:var(--ink-1);font:500 var(--t-16)/1.4 var(--f-body);text-align:left;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform 120ms var(--ease)}
.opt:hover:not([disabled]){border-color:var(--brand-700);background:var(--brand-50)}
.opt:active:not([disabled]){transform:scale(.99)}
.opt[disabled]{cursor:default}
.opt .ltr{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);font:700 var(--t-14)/1 var(--f-display);color:var(--brand-900);background:var(--paper)}
.opt .txt{flex:1;min-width:0}
.opt .verdict{position:absolute;right:56px;top:50%;transform:translateY(-50%);font:600 var(--t-12)/1 var(--f-display);white-space:nowrap}
.opt.is-right{border-color:var(--accent-500);background:var(--accent-50)}
.opt.is-right .ltr{background:var(--accent-500);border-color:var(--accent-600);color:var(--on-accent)}
.opt.is-right .verdict{color:var(--accent-700)}
.opt.is-wrong{border-color:var(--line-2);background:var(--paper)}
.opt.is-wrong .txt{text-decoration:line-through;text-decoration-color:rgba(180,36,36,.55);text-decoration-thickness:2px;color:var(--ink-2)}
.opt.is-wrong .verdict{color:var(--danger)}
.opt.is-dim{opacity:.62}
.opt.has-verdict{padding-right:150px}
@media (max-width:640px){
  .opt.has-verdict{padding-right:56px;padding-bottom:28px}
  .opt .verdict{top:auto;bottom:9px;right:auto;left:56px;transform:none}
}

/* streak: flame + week strip (shared by practice intro and finish) */
.streak{display:flex;align-items:center;gap:14px}
.streak .flame{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent-50);color:var(--accent-600);flex:none;border:1px solid var(--accent-200)}
.streak .flame .ico{width:28px;height:28px}
.streak .n{font:700 var(--t-30)/1 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.streak .n small{font:500 var(--t-14) var(--f-body);color:var(--ink-2);margin-left:4px;letter-spacing:0}
.streak p{font-size:var(--t-14);color:var(--ink-2);margin-top:4px}
.week{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week li{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 var(--t-12)/1 var(--f-display);color:var(--ink-2)}
.week .d{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);background:var(--sheet);color:var(--ink-3)}
.week .done .d{border-color:var(--accent-500);background:var(--accent-50);color:var(--accent-700)}
.week .done .d .ico-sm{stroke-width:3}
.week .today .d{border-style:dashed;border-color:var(--brand-700);color:var(--brand-700)}
.week .today>span:last-child{color:var(--brand-900)}
.week .today.done .d{border-style:solid;border-color:var(--accent-500)}
.week .d svg.draw path{stroke-dasharray:40;animation:pen-draw 380ms 200ms var(--ease) both;--len:40}

/* ================================================================ Today's 10 */
.dp .overview .say{max-width:62ch}
.dp-topics>li{align-items:flex-start;gap:14px;padding-top:14px;padding-bottom:14px}
.subj-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-800);border:1px solid var(--brand-100)}
.dp-topics .body{flex:1;min-width:0}
.dp-topics .body b{display:block;font-weight:600;color:var(--ink-1)}
.dp-topics .body small{display:block;color:var(--ink-2);font-size:var(--t-14);margin-top:2px}
.dp-topics .why{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--t-12);font-weight:600;color:var(--accent-700)}
.dp-topics .end .tag{font-variant-numeric:tabular-nums}
.dp-rules{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--t-14);color:var(--ink-2)}
.dp-rules li{display:flex;gap:10px;align-items:flex-start}
.dp-rules .ico-sm{margin-top:3px;color:var(--brand-700)}
.quick{display:flex;flex-direction:column;gap:12px}
.quick .q-time{display:flex;align-items:baseline;gap:8px}
.quick .q-time b{font:700 var(--t-24)/1 var(--f-display);color:var(--brand-900)}
.quick .q-time span{color:var(--ink-2);font-size:var(--t-14)}

/* the question card: a ruled answer sheet */
.dp-card{max-width:760px}
.dp-card .paper-head{align-items:center;flex-wrap:wrap;row-gap:8px}
.dp-count{font:700 var(--t-14)/1 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-count small{font:500 var(--t-14) var(--f-body);color:var(--ink-2)}
.dots{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dots li{width:12px;height:12px;border-radius:50%;background:var(--line-2);position:relative;transition:transform var(--dur) var(--ease),background var(--dur)}
.dots li.cur{background:var(--sheet);box-shadow:0 0 0 2px var(--brand-900);transform:scale(1.15)}
.dots li.ok{background:var(--accent-500);border-radius:50%}
.dots li.no{background:transparent;border-radius:2px}
.dots li.no::before,.dots li.no::after{content:"";position:absolute;left:5px;top:-1px;width:2.4px;height:14px;border-radius:2px;background:var(--danger);transform:rotate(45deg)}
.dots li.no::after{transform:rotate(-45deg)}
.calm-timer{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:30px;padding:0 10px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font:600 var(--t-14)/1 var(--f-display);font-variant-numeric:tabular-nums}
.calm-timer .ico-sm{color:var(--brand-700)}
.dp-why{display:flex;align-items:center;gap:8px;padding:2px 18px 0 60px;font-size:var(--t-14);color:var(--accent-700);font-weight:600}
.dp-why .ico-sm{color:var(--accent-600)}
.dp-qbody{padding:10px 18px 18px 60px}
.dp-q{font:600 var(--t-18)/1.5 var(--f-body);color:var(--ink-1);margin:6px 0 18px;max-width:62ch}
.dp-q sub,.dp-q sup,.opt sub,.opt sup,.mk-q sub,.mk-q sup{line-height:0}
.dp-fb{margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);animation:pen-pop 260ms var(--ease) both}
.dp-fb h3{display:flex;align-items:center;gap:8px;font-size:var(--t-16)}
.dp-fb h3 .ico{color:var(--accent-600)}
.dp-fb.wrong h3 .ico{color:var(--danger)}
.dp-fb p{margin-top:6px;font-size:var(--t-14);color:var(--ink-1);max-width:66ch}
.dp-fb .added{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--t-12);font-weight:600;color:var(--brand-800)}
.dp-next{display:flex;align-items:center;gap:12px;padding:14px 18px 16px 60px;border-top:1px solid var(--line);background:rgba(251,250,247,.9)}
.dp-next .hint{font-size:var(--t-14);color:var(--ink-2)}
.dp-next .btn-primary{margin-left:auto}

/* finish screen */
.dp-done .paper-score .big{font-size:var(--t-48)}
.dp-done .stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.dp-done .stat3>div{padding:14px 18px 14px 18px;border-left:1px solid var(--line)}
.dp-done .stat3>div:first-child{padding-left:60px;border-left:0}
.dp-done .stat3 dt{font-size:var(--t-12);color:var(--ink-2)}
.dp-done .stat3 dd{margin:4px 0 0;font:700 var(--t-20)/1.1 var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums}
.streak-up .n .old{color:var(--ink-3);font-weight:600;font-size:var(--t-20);text-decoration:line-through;text-decoration-color:var(--accent-500);text-decoration-thickness:2px;margin-right:8px}
.streak-up .n .new{display:inline-block;animation:pen-pop 320ms 280ms var(--ease) both}
.review>li{gap:12px;align-items:flex-start}
.review .mk-sym{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.review .mk-sym.ok{background:var(--accent-50);color:var(--accent-700)}
.review .mk-sym.no{background:var(--danger-bg);color:var(--danger)}
.review .body{flex:1;min-width:0;font-size:var(--t-14)}
.review .body b{display:block;color:var(--ink-1);font-weight:600}
.review .body small{color:var(--ink-2)}

@media (max-width:640px){
  .dp-why{padding-left:44px;padding-right:14px}
  .dp-qbody{padding:8px 14px 16px 44px}
  .dp-q{font-size:var(--t-16)}
  .dp-next{padding:12px 14px 14px 44px}
  .dp-next .hint{display:none}
  .dp-done .stat3>div{padding:12px 10px}
  .dp-done .stat3>div:first-child{padding-left:44px}
  .dp-done .stat3 dd{font-size:var(--t-18)}
  .week .d{width:34px;height:34px}
  .opt{padding-right:52px}
  .pen-tick{right:10px;width:28px}
  .pen-cross{right:12px}
}

/* ================================================================ Exam hall (bare shell) */
.ex-page{--ex-top:auto}
body:has(.ex){background:var(--paper)}
.ex{min-height:calc(100vh - 32px);display:flex;flex-direction:column}
.ex-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:12px 24px;padding:12px 24px;background:var(--sheet);border-bottom:1px solid var(--line);box-shadow:var(--sh-1);position:sticky;top:0;z-index:20}
.ex-brand{display:flex;align-items:center;gap:10px;color:var(--ink-1);text-decoration:none}
.ex-brand img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);padding:3px;object-fit:contain}
.ex-brand b{display:block;font:700 var(--t-14)/1.2 var(--f-display);color:var(--brand-900)}
.ex-brand small{display:block;font-size:var(--t-12);color:var(--ink-3)}
.ex-title{min-width:0;padding-left:24px;border-left:1px solid var(--line)}
.ex-title h1{font-size:var(--t-18);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ex-title p{font-size:var(--t-12);color:var(--ink-2);margin-top:2px}
.ex-cand{display:flex;align-items:center;gap:10px}
.ex-cand small{display:block;font-size:var(--t-12);color:var(--ink-3);line-height:1.2}
.ex-cand b{display:block;font:600 var(--t-14)/1.25 var(--f-display);color:var(--ink-1)}
.ex-timer{display:flex;flex-direction:column;align-items:flex-end;padding:6px 14px;border-radius:var(--r-md);background:var(--brand-900);color:var(--on-brand);min-width:128px}
.ex-timer small{font-size:11px;color:var(--on-brand-2);letter-spacing:.02em}
.ex-timer b{font:700 var(--t-20)/1.1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ex-exit{white-space:nowrap}

.ex-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:0;max-width:1440px;width:100%;margin:0 auto}
.ex-main{padding:20px 24px 32px;min-width:0}
.ex-sections{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;padding:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;width:max-content;max-width:100%}
.ex-sections button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:9px;font:600 var(--t-14) var(--f-display);color:var(--ink-2)}
.ex-sections button small{font:600 var(--t-12) var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ex-sections button:hover{color:var(--brand-900)}
.ex-sections button[aria-current="true"]{background:var(--sheet);color:var(--brand-900);box-shadow:var(--sh-1)}
.ex-sections button[aria-current="true"] small{color:var(--accent-700)}
.ex-sections button:focus-visible{box-shadow:var(--focus)}
.ex-qcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.ex-qhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.ex-qhead h2{font-size:var(--t-18);font-variant-numeric:tabular-nums}
.ex-qhead .meta{font-size:var(--t-12);color:var(--ink-2)}
.ex-qhead .end{margin-left:auto;display:flex;gap:8px;align-items:center}
.ex-qbody{padding:20px 20px 8px;min-height:340px}
.ex-qtext{font:500 var(--t-18)/1.6 var(--f-body);color:var(--ink-1);max-width:70ch}
.ex-qtext.sample{color:var(--ink-2);font-style:normal}
.ex-qtext sub,.ex-qtext sup,.ex-opt sub,.ex-opt sup{line-height:0}
.ex-opts{border:0;margin:20px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.ex-opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;background:var(--sheet);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ex-opt:hover{border-color:var(--brand-700)}
.ex-opt input{appearance:none;flex:none;width:22px;height:22px;margin:0;border:2px solid var(--border-input);border-radius:50%;display:grid;place-items:center;background:var(--sheet);cursor:pointer}
.ex-opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand-900);transform:scale(0);transition:transform 160ms var(--ease)}
.ex-opt input:checked{border-color:var(--brand-900)}
.ex-opt input:checked::after{transform:scale(1)}
.ex-opt input:focus-visible{box-shadow:var(--focus)}
.ex-opt:has(input:checked){border-color:var(--brand-900);background:var(--brand-50)}
.ex-opt .n{font:700 var(--t-14) var(--f-display);color:var(--brand-900);width:22px}
.ex-hint{display:flex;gap:8px;align-items:center;margin:14px 0 6px;font-size:var(--t-12);color:var(--ink-2)}
.ex-hint .ico-sm{color:var(--brand-700)}
.ex-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 var(--r-md) var(--r-md)}
.ex-actions .sp{flex:1}
.ex-actions .lbl-short{display:none}
.ex-palbtn{display:none}

/* palette */
.ex-pal{position:sticky;top:var(--ex-head,77px);align-self:start;height:calc(100vh - var(--ex-head,77px));display:flex;flex-direction:column;background:var(--sheet);border-left:1px solid var(--line)}
.ex-pal-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.ex-pal-head h2{font-size:var(--t-16)}
.ex-pal-head .sub{font-size:var(--t-12);color:var(--ink-2)}
.ex-pal-head .icon-btn{display:none;margin-left:auto}
.ex-legend{list-style:none;margin:0;padding:6px 18px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:var(--t-12);color:var(--ink-1);border-bottom:1px solid var(--line)}
.ex-legend li{display:flex;align-items:center;gap:8px;min-width:0}
.ex-legend li:last-child{grid-column:1/-1}
.ex-legend .shape{--s:26px;font-size:11px}
.ex-legend b{font-variant-numeric:tabular-nums;margin-left:auto;color:var(--brand-900);font-family:var(--f-display)}
.ex-grid-wrap{flex:1;overflow-y:auto;padding:14px 18px}
.ex-grid-wrap h3{font-size:var(--t-14);color:var(--ink-2);font-weight:600;margin-bottom:10px}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.ex-grid button{all:unset;cursor:pointer;position:relative;display:grid;place-items:center;height:46px;border-radius:8px}
.ex-grid button:focus-visible{box-shadow:var(--focus)}
.ex-grid button[aria-current="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-4px;height:3px;border-radius:3px;background:var(--accent-500)}
.ex-pal-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ex-pal-foot .btn{width:100%}
.ex-pal-foot p{font-size:var(--t-12);color:var(--ink-2);text-align:center}

/* NTA status shapes: shape + label carry the meaning, colour only reinforces it */
.shape{--s:40px;position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;font:700 var(--t-14)/1 var(--f-display);font-variant-numeric:tabular-nums;flex:none}
.shape i{position:absolute;inset:0;z-index:0}
.shape span{position:relative;z-index:1}
.shape.nv i{background:var(--paper-2);border:1px solid var(--line-2);border-radius:6px}
.shape.nv{color:var(--ink-2)}
.shape.na i{background:var(--danger);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.shape.na span{transform:translateY(-3px)}
.shape.na{color:#fff}
.shape.a i{background:var(--success);clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
.shape.a span{transform:translateY(3px)}
.shape.a{color:#fff}
.shape.m i,.shape.am i{background:var(--brand-700);border-radius:50%}
.shape.m,.shape.am{color:#fff}
.shape.am::after{content:"";position:absolute;z-index:2;right:-3px;bottom:-3px;width:calc(var(--s)*.42);height:calc(var(--s)*.42);border-radius:50%;background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 2px var(--sheet)}
.ex-grid .shape{--s:40px}

.ex-scrim{display:none}
.ex-done{max-width:720px;margin:32px auto;padding:0 16px;width:100%}
.ex-done .paper-head{padding-top:20px}
.ex-sum{font-variant-numeric:tabular-nums}
.ex-sum td.num,.ex-sum th.num{text-align:right}
.ex-sum tfoot td{font-weight:700;color:var(--brand-900);border-top:1px solid var(--line-2)}
.ex-sum th .shape{--s:20px;display:inline-grid;vertical-align:middle;margin-right:6px}
.ex-sum th{white-space:normal;line-height:1.3}

@media (max-width:1100px){
  .ex-top{grid-template-columns:auto minmax(0,1fr) auto auto;padding:10px 16px}
  .ex-brand span{display:none}
  .ex-cand{display:none}
}
@media (max-width:860px){
  /* fixed action bar = 10 + 48 (Save) + 8 + 44 (Review/Clear) + 10 + 1px border ≈ 121px, plus the safe area */
  body:has(.ex){padding-bottom:calc(124px + env(safe-area-inset-bottom))}
  .ex-top{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:10px 14px}
  .ex-brand{display:none}
  .ex-title{padding-left:0;border-left:0}
  .ex-title h1{font-size:var(--t-16)}
  .ex-title p{display:none}
  .ex-timer{min-width:0;padding:5px 10px}
  .ex-timer b{font-size:var(--t-18)}
  .ex-exit{grid-column:1/-1;justify-self:start;margin:-4px 0 0 -10px}
  .ex-body{grid-template-columns:minmax(0,1fr)}
  .ex-main{padding:12px 12px 24px}
  .ex-sections{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
  .ex-sections button{flex-direction:column;justify-content:center;gap:0;height:48px;padding:0 4px;font-size:var(--t-12);text-align:center}
  .ex-qhead{padding:12px 14px}
  .ex-qbody{padding:16px 14px 6px;min-height:0}
  .ex-qtext{font-size:var(--t-16)}
  .ex-actions{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:0;box-shadow:0 -8px 20px -14px rgba(var(--brand-rgb),.35)}
  .ex-actions .btn{padding:0 8px;white-space:nowrap;text-align:center;line-height:1.15;font-size:var(--t-12);height:44px}
  .ex-actions .btn-primary{grid-column:1/-1;order:-1;height:48px;font-size:var(--t-14)}
  .ex-actions .sp,.ex-actions .ex-back{display:none}
  .ex-actions .lbl-long{display:none}
  .ex-actions .lbl-short{display:inline}
  .ex-palbtn{display:inline-flex}
  /* palette becomes a bottom sheet */
  .ex-pal{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:82vh;z-index:60;border-left:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);transform:translateY(105%);visibility:hidden;transition:transform 280ms var(--ease),visibility 0s 280ms}
  .ex-pal.open{transform:none;visibility:visible;transition:transform 280ms var(--ease)}
  .ex-pal::before{content:"";width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:10px auto 0;flex:none}
  .ex-pal-head{padding-top:8px}
  .ex-pal-head .icon-btn{display:inline-grid}
  .ex-pal-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .ex-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(var(--brand-rgb),.42);border:0;opacity:0;pointer-events:none;transition:opacity 240ms}
  .ex-scrim.on{opacity:1;pointer-events:auto}
}

/* ================================================================ Mistake book */
.mk-page .overview .say{max-width:62ch}
.mk-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);margin-bottom:20px}
.mk-filters .field{flex:0 1 200px}
.mk-filters .field.subj{flex:1 1 auto}
.mk-filters .count{margin-left:auto;font-size:var(--t-14);color:var(--ink-2);align-self:center;font-variant-numeric:tabular-nums}
.mk-subj{margin-top:8px}
.mk-subj>h2{display:flex;align-items:center;gap:10px;font-size:var(--t-20);margin:20px 0 4px}
.mk-subj>h2 .subj-ico{width:34px;height:34px;border-radius:10px}
.mk-subj>h2 .tag{font-family:var(--f-body)}
.mk-chap>h3{font-size:var(--t-14);font-weight:600;color:var(--ink-2);margin:16px 0 10px;display:flex;gap:8px;align-items:center}
.mk-chap>h3::after{content:"";flex:1;height:1px;background:var(--line)}
.mk-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));align-items:start}

.mk{perspective:1400px}
.mk-flip{display:grid;transition:transform 380ms var(--ease);transform-style:preserve-3d}
.mk.flipped .mk-flip{transform:rotateY(180deg)}
.mk-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--brand-50) 31px 32px);background-position:0 10px}
.mk-face::before{content:"";position:absolute;top:0;bottom:0;left:36px;width:2px;background:var(--margin-rule)}
.mk-face>*{position:relative}
.mk-back{transform:rotateY(180deg)}
.mk-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px 4px 50px;font-size:var(--t-12);color:var(--ink-2)}
.mk-head .end{margin-left:auto}
.mk-q{padding:6px 16px 10px 50px;font:600 var(--t-16)/1.5 var(--f-body);color:var(--ink-1)}
.mk-opts{list-style:none;margin:0;padding:0 16px 8px 50px;display:grid;gap:6px}
.mk-opts li{position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 8px;font-size:var(--t-14);color:var(--ink-2);border-radius:8px}
.mk-opts .ltr{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font:700 var(--t-12)/1 var(--f-display);color:var(--brand-900);background:var(--sheet)}
.mk-opts .lab{margin-left:auto;font:600 var(--t-12)/1 var(--f-display);white-space:nowrap;padding-left:8px}
.mk-opts li.mine .txt{text-decoration:line-through;text-decoration-color:rgba(180,36,36,.6);text-decoration-thickness:2px}
.mk-opts li.mine .lab{color:var(--danger)}
.mk-opts li.mine .ltr{border-color:var(--danger);color:var(--danger)}
.mk-opts li.right{color:var(--ink-1);font-weight:600}
.mk-opts li.right .lab{color:var(--accent-700)}
.mk-opts li.right .ltr{background:var(--accent-500);border-color:var(--accent-600);color:var(--on-accent)}
.mk-opts .pen-ring{inset:-3px -2px;width:calc(100% + 4px);height:calc(100% + 6px)}
.mk-opts .pen-ring path,.mk-opts .pen-cross path{animation:none}
.mk-expl{margin:4px 16px 12px 50px;padding:10px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:var(--t-14);color:var(--ink-1)}
.mk-expl b{color:var(--brand-900)}
.mk-reason{padding:0 16px 12px 50px}
.mk-reason .lbl{display:block;font:600 var(--t-12) var(--f-body);color:var(--ink-2);margin-bottom:6px}
.mk-reason .chips{gap:6px}
.mk-reason .chip{height:32px;font-size:var(--t-12);padding:0 10px}
.mk-reason .chip[aria-pressed="true"]::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mk-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px 12px 50px;border-top:1px solid var(--line);background:rgba(251,250,247,.92)}
.mk-foot .end{margin-left:auto;display:flex;gap:8px}
.mk-back .opts{padding:4px 16px 8px 50px;gap:8px}
.mk-back .opt{min-height:46px;font-size:var(--t-14);padding-top:6px;padding-bottom:6px}
.mk-back .opt .ltr{width:28px;height:28px}
.mk-back .opt.has-verdict{padding-right:130px}
.mk-retry-fb{margin:4px 16px 12px 50px;font-size:var(--t-14);color:var(--ink-1)}
.mk-retry-fb:empty{display:none}
.mk-retry-fb b{color:var(--brand-900)}

@media (max-width:640px){
  .mk-filters{padding:12px}
  .mk-filters .field{flex:1 1 140px}
  .mk-filters .field.subj{flex-basis:100%}
  .mk-filters .count{margin-left:0}
  .mk-face::before{left:26px}
  .mk-head,.mk-q,.mk-reason,.mk-foot{padding-left:38px;padding-right:12px}
  .mk-opts{padding-left:34px;padding-right:10px}
  .mk-expl,.mk-retry-fb{margin-left:38px;margin-right:12px}
  .mk-back .opts{padding-left:38px;padding-right:12px}
  .mk-back .opt.has-verdict{padding-right:48px}
  .mk-foot .end{margin-left:0;width:100%}
  .mk-foot .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .mk-flip{transition:none}
}
.dp-next .sticky-cta{margin-left:auto}
.pen-tick path,.pen-ring path,.pen-cross path{--len:100}
@media (max-width:920px){
  .dp #dp-intro .portal-grid>aside{order:-1}
}
@media (max-width:640px){
  .dp-topics>li{flex-wrap:wrap}
  .dp-topics .end{margin-left:54px;order:3}
}
.week .today.done .d{color:var(--accent-700);background:var(--accent-50)}
.dp-done .paper-foot svg{display:inline-block;vertical-align:-3px;margin-right:6px}
@media (max-width:920px){
  .dp-done .portal-grid>aside{order:-1}
  .dp-done aside .row .btn{flex:1 1 160px}
}
#ex-confirm{width:min(640px,calc(100vw - 24px))}
.ex-sum tbody th{position:static;background:none;font:600 var(--t-14) var(--f-body);color:var(--ink-1);letter-spacing:0;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
.ex-sum td,.ex-sum thead th{padding:10px 12px}
.ex-sum td:last-child{background:var(--paper)}
@media (min-width:861px){.ex-pal{height:calc(100vh - var(--ex-head,77px) - var(--ex-pre,0px))}}
@media (max-width:520px){
  .ex-sum tbody th{white-space:normal;font-size:var(--t-12)}
  .ex-sum thead th{font-size:11px;padding:8px 6px}
  .ex-sum td{padding:8px 6px}
}
.review .mk-sym.skip{background:var(--paper-2);color:var(--ink-2)}
.ex-sum abbr.sm{display:none;text-decoration:none}
#ex-confirm .dlg-foot{flex-wrap:wrap}
@media (max-width:520px){
  .ex-sum .lg{display:none}
  .ex-sum abbr.sm{display:inline}
  #ex-confirm .dlg-foot .btn{flex:1 1 140px}
  #ex-confirm .dlg-body{padding:16px}
}
@media (max-width:520px){
  #ex-confirm .dlg-body{padding:14px 12px}
  .ex-sum thead th,.ex-sum td,.ex-sum tbody th{padding:8px 4px}
  .ex-sum thead th:first-child,.ex-sum tbody th{padding-left:8px}
  .ex-sum tbody th .shape{--s:16px;margin-right:4px}
  .ex-sum td:last-child,.ex-sum thead th:last-child{padding-right:8px}
}
.mk-opts li.right{margin-left:0}
.mk-opts li.right{justify-self:start;max-width:100%;padding-right:10px}
.mk-opts li.right .lab{margin-left:14px}
.mk-filters .field{flex:0 1 230px}