/* AI mock interview (docs/mock-interview-plan.md). The app's tokens from styles.css plus a
   "stage" palette: the interview itself is a focus mode, dark in both themes like a video
   call. Every class starts with mk- so nothing clashes with the rest of the app. */
:root{
  --mk-bg:#0a0f1f; --mk-ink:#eef1fa; --mk-ink-2:#a9b3cc; --mk-line:rgb(255 255 255 / .1);
  --mk-a:#6d8bff; --mk-b:#a879ff; --mk-c:#38d6c4; --mk-think:#ffbf47; --mk-rec:#ff4d6a;
}
.mk-view{animation:mkIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mkIn{from{opacity:0;transform:translateY(8px)}}
@keyframes mkBlink{50%{opacity:.55}}
@keyframes mkSpin{to{transform:rotate(360deg)}}

/* ---- set-up ---- */
.mk-ai{display:inline-flex;align-items:center;gap:5px;font:700 .68rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px 3px 7px;border-radius:99px;color:#fff;background:linear-gradient(100deg,var(--mk-a),var(--mk-b));white-space:nowrap}
.mk-quota{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--ink-2);background:var(--sheet);border:1px solid var(--line);border-radius:99px;padding:6px 12px 6px 8px}
.mk-quota i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.mk-quota i.used{background:var(--line)}
.mk-grid{display:grid;gap:16px}
@media (min-width:960px){.mk-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.mk-step{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-weight:700}
.mk-step:first-child{margin-top:0}
.mk-step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:800;flex:none}
.mk-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.mk-card{position:relative;text-align:left;border:1.5px solid var(--line);background:var(--sheet);border-radius:14px;padding:14px;cursor:pointer;display:grid;gap:5px;align-content:start;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;color:var(--ink)}
.mk-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mk-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.mk-card .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.mk-card b{font-size:.98rem}
.mk-card span.d{font-size:.84rem;color:var(--ink-2)}
.mk-card .rec{position:absolute;top:10px;right:10px}
.mk-card .facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mk-modes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mk-topic{display:inline-grid;gap:4px;text-align:left}
.mk-topic .bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;min-width:60px}
.mk-topic .bar i{display:block;height:100%;background:var(--accent)}
.choice[aria-pressed="true"] .mk-topic .bar{background:rgb(255 255 255 / .3)}
.choice[aria-pressed="true"] .mk-topic .bar i{background:#fff}
.mk-job{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--sheet);cursor:pointer;text-align:left;width:100%;color:var(--ink)}
.mk-job[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--sheet))}
.mk-jobs{display:grid;gap:8px;max-height:300px;overflow:auto;padding:2px}
.mk-memory{border-radius:var(--r);padding:1.5px;background:linear-gradient(120deg,var(--mk-a),var(--mk-b),var(--mk-c));box-shadow:var(--shadow)}
.mk-memory > div{background:var(--sheet);border-radius:calc(var(--r) - 1.5px);padding:16px}
.mk-memory p{font-size:.93rem;margin-top:8px}
.mk-memory ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:.9rem;display:grid;gap:4px}
.mk-daily{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 40%,var(--sheet))}
.mk-daily .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);flex:none}
.mk-hist{display:grid;gap:8px}
.mk-hist button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--sheet);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.mk-hist button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.mk-hist small{display:block;color:var(--ink-2);font-size:.8rem}
.mk-hist .sc{font-weight:800;font-size:1.1rem}
.mk-side{display:grid;gap:16px}

/* ---- the stage (mic check, interview, analysis) ---- */
.mk-stage{position:relative;isolation:isolate;overflow:hidden;color:var(--mk-ink);background:var(--mk-bg);border-radius:22px;
  min-height:min(760px,calc(100svh - 140px));display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgb(10 15 40 / .55)}
.mk-stage::before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.7;
  background:radial-gradient(40% 35% at 30% 20%,rgb(109 139 255 / .28),transparent 70%),
             radial-gradient(35% 30% at 75% 75%,rgb(168 121 255 / .22),transparent 70%),
             radial-gradient(30% 25% at 80% 15%,rgb(56 214 196 / .12),transparent 70%);
  animation:mkDrift 18s ease-in-out infinite alternate}
@keyframes mkDrift{to{transform:translate3d(4%,-3%,0) rotate(8deg)}}
.mk-stage .btn{background:rgb(255 255 255 / .06);border-color:var(--mk-line);color:var(--mk-ink)}
.mk-stage .btn:hover{background:rgb(255 255 255 / .12)}
.mk-stage .muted{color:var(--mk-ink-2)}
@property --mk-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.mk-edge{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;opacity:.45;transition:opacity .6s;
  background:conic-gradient(from var(--mk-ang),transparent 0 8%,var(--mk-a),var(--mk-b),var(--mk-c),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mkEdge 7s linear infinite}
.mk-edge.soft{padding:10px;filter:blur(18px);opacity:.25}
@keyframes mkEdge{to{--mk-ang:360deg}}
.mk-stage[data-phase="speak"] .mk-edge,.mk-stage[data-phase="analyse"] .mk-edge{opacity:.9}
.mk-stage[data-phase="speak"] .mk-edge.soft,.mk-stage[data-phase="analyse"] .mk-edge.soft{opacity:.45}
.mk-stage[data-phase="think"] .mk-edge{opacity:.25;animation-duration:14s}
.mk-stage[data-phase="record"] .mk-edge{opacity:1;background:conic-gradient(from var(--mk-ang),transparent 0 8%,#ff5c7a,var(--mk-b),var(--mk-a),transparent 62%)}
.mk-stage[data-phase="record"] .mk-edge.soft{opacity:.5}
.mk-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--mk-line);flex-wrap:wrap;position:relative;z-index:4}
.mk-segs{display:flex;gap:4px;flex:1 1 180px;min-width:140px}
.mk-segs i{flex:1;height:6px;border-radius:99px;background:rgb(255 255 255 / .12);overflow:hidden;position:relative}
.mk-segs i.done{background:linear-gradient(90deg,var(--mk-a),var(--mk-b))}
.mk-segs i.skip{background:rgb(255 255 255 / .28)}
.mk-segs i.now::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,var(--mk-a),var(--mk-b));transition:width .2s linear}
.mk-count{font-weight:700;font-size:.9rem;white-space:nowrap}
.mk-clock{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:1rem;padding:6px 12px;border-radius:99px;background:rgb(255 255 255 / .07);border:1px solid var(--mk-line);font-variant-numeric:tabular-nums}
.mk-clock.low{color:var(--mk-think);border-color:color-mix(in srgb,var(--mk-think) 50%,transparent)}
.mk-clock.crit{color:var(--mk-rec);border-color:color-mix(in srgb,var(--mk-rec) 55%,transparent);animation:mkBlink 1s steps(2) infinite}
.mk-body{flex:1;min-height:0;overflow-y:auto;display:grid;place-items:center;padding:24px 16px 10px;text-align:center;position:relative;z-index:4}
.mk-inner{width:100%;max-width:760px;display:grid;justify-items:center;gap:18px}
.mk-who{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-ink-2)}
.mk-who .live{width:8px;height:8px;border-radius:50%;background:var(--mk-c);animation:mkPing 1.8s infinite;flex:none}
@keyframes mkPing{0%{box-shadow:0 0 0 0 var(--mk-c)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mk-q{font-size:clamp(1.3rem,3.6vw,2rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;min-height:2.6em;text-wrap:balance}
.mk-q .caret{display:inline-block;width:.08em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--mk-a);animation:mkBlink 1s steps(2) infinite}
.mk-src{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:26px}
.mk-src span{font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:99px;background:rgb(255 255 255 / .08);border:1px solid var(--mk-line);display:inline-flex;gap:5px;align-items:center}
.mk-src span.real{background:rgb(255 191 71 / .14);border-color:rgb(255 191 71 / .35);color:#ffd88a}
.mk-src span.mine{background:rgb(109 139 255 / .16);border-color:rgb(109 139 255 / .4);color:#c3d0ff}
.mk-src span.again{background:rgb(255 92 122 / .14);border-color:rgb(255 92 122 / .4);color:#ffc2cd}
.mk-voice{width:min(640px,100%);height:150px;display:block}
.mk-timer{display:grid;justify-items:center;gap:10px;width:min(380px,88%)}
.mk-pill{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:99px;border:1px solid var(--mk-line);background:rgb(255 255 255 / .05);color:var(--mk-ink-2)}
.mk-tnum{font-size:clamp(2.6rem,8vw,3.6rem);font-weight:300;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-height:1em}
.mk-tbar{width:100%;height:3px;border-radius:99px;background:rgb(255 255 255 / .1);overflow:hidden}
.mk-tbar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,1));background:linear-gradient(90deg,var(--mk-a),var(--mk-b))}
.mk-stage[data-phase="think"] .mk-pill{color:#ffd88a;border-color:rgb(255 191 71 / .35)}
.mk-stage[data-phase="think"] .mk-tbar i{background:linear-gradient(90deg,#ffbf47,#ff9a5c)}
.mk-stage[data-phase="record"] .mk-pill{color:#ffc2cd;border-color:rgb(255 92 122 / .4)}
.mk-stage[data-phase="record"] .mk-tbar i{background:linear-gradient(90deg,#ff5c7a,var(--mk-b))}
.mk-stage.last .mk-tnum{color:#ff8da1}
.mk-stage.last .mk-tbar i{background:#ff5c7a}
.mk-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mk-rec);animation:mkBlink 1s steps(2) infinite}
.mk-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:12px 16px 20px;position:relative;z-index:4}
.mk-big{border:0;border-radius:999px;min-height:56px;padding:0 28px;font:800 1.02rem var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:10px;color:#0a0f1f;
  background:linear-gradient(100deg,#c9d4ff,#fff);box-shadow:0 10px 30px -8px rgb(140 160 255 / .7);transition:transform .15s,box-shadow .15s}
.mk-big:hover{transform:translateY(-1px)}
.mk-big.rec{color:#fff;background:linear-gradient(100deg,#ff4d6a,#c2337f);box-shadow:0 10px 30px -8px rgb(255 77 106 / .7)}
.mk-big[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.mk-big kbd{font:700 .72rem var(--font-body);padding:2px 6px;border-radius:5px;border:1px solid currentColor;opacity:.7}
.mk-pipe{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--mk-ink-2)}
.mk-pipe .pd{display:flex;gap:4px}
.mk-pipe .pd i{width:7px;height:7px;border-radius:50%;background:rgb(255 255 255 / .15);transition:background .3s}
.mk-pipe .pd i.up{background:var(--mk-a);animation:mkBlink .8s steps(2) infinite}
.mk-pipe .pd i.busy{background:var(--mk-think);animation:mkBlink .8s steps(2) infinite}
.mk-pipe .pd i.ok{background:var(--mk-c)}
.mk-pipe .pd i.bad{background:var(--mk-rec)}
.mk-pipe.flash #mkPdT{color:#a6f2e8}
.mk-meter{width:min(360px,80vw);height:10px;border-radius:99px;background:rgb(255 255 255 / .08);overflow:hidden;position:relative}
.mk-meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--lvl,0)*100%);background:linear-gradient(90deg,var(--mk-c),var(--mk-a),var(--mk-b));border-radius:99px;transition:width .08s linear}
.mk-say{font-size:1.25rem;font-weight:700}
.mk-privacy{display:flex;gap:10px;align-items:flex-start;text-align:left;max-width:520px;font-size:.86rem;color:var(--mk-ink-2);background:rgb(255 255 255 / .05);border:1px solid var(--mk-line);border-radius:12px;padding:10px 12px}
.mk-privacy svg{flex:none;color:var(--mk-c);margin-top:2px}
.mk-fs{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--mk-ink-2);cursor:pointer}
.mk-fs input{width:18px;height:18px;accent-color:var(--mk-a)}
.mk-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;font-size:.8rem;font-weight:600;color:var(--mk-ink-2);background:rgb(255 255 255 / .06);border:1px solid var(--mk-line);border-radius:99px;padding:5px 12px;white-space:nowrap;animation:mkHint 3.5s ease forwards;pointer-events:none}
@keyframes mkHint{0%,75%{opacity:1}100%{opacity:0}}
.mk-ask{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgb(5 8 20 / .72);backdrop-filter:blur(6px);padding:16px}
.mk-ask > div{width:min(420px,100%);background:#121a30;border:1px solid var(--mk-line);border-radius:18px;padding:22px;display:grid;gap:12px;text-align:center;box-shadow:0 30px 60px -20px #000}
.mk-ask .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.mk-ask .end{border:0;border-radius:10px;padding:10px 16px;font:700 .92rem var(--font-body);cursor:pointer;color:#fff;background:linear-gradient(100deg,#ff4d6a,#c2337f)}
.mk-steps{display:grid;gap:8px;text-align:left;width:min(420px,88vw)}
.mk-steps div{display:flex;gap:10px;align-items:center;font-size:.95rem;color:var(--mk-ink-2)}
.mk-steps .st{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--mk-line);flex:none}
.mk-steps .run{color:var(--mk-ink)} .mk-steps .run .st{border-color:var(--mk-a);border-right-color:transparent;animation:mkSpin .8s linear infinite}
.mk-steps .ok{color:var(--mk-ink)} .mk-steps .ok .st{background:var(--mk-c);border-color:transparent;color:#05221e}

/* exam mode: the whole screen (Fullscreen API); Esc or the button leaves it */
body.mk-focus header.top,body.mk-focus .tabbar{display:none!important}
body.mk-focus main.app-main{padding:0}
body.mk-focus main.app-main > .wrap{max-width:none;padding:0}
body.mk-focus .mk-stage{border-radius:0;min-height:100vh;height:100vh;box-shadow:none}
@media (max-height:760px){.mk-voice{height:96px}.mk-inner{gap:10px}.mk-tnum{font-size:2.5rem}.mk-body{padding-top:12px}.mk-q{min-height:0}.mk-foot{padding-block:8px 14px}}
/* phones: the interview covers the whole screen, everything fits without scrolling */
@media (max-width:700px){
  .mk-stage{position:fixed;inset:0;z-index:60;border-radius:0;min-height:0;height:100svh;box-shadow:none}
  .mk-top{padding:10px 12px;gap:8px 10px}
  .mk-count{margin-right:auto}
  .mk-segs{order:9;flex-basis:100%}
  .mk-voice{height:110px}
  .mk-tnum{font-size:2.4rem}
  .mk-q{font-size:1.25rem;min-height:0}
  .mk-inner{gap:12px}
  .mk-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .mk-big{width:100%;justify-content:center}
  .mk-big kbd{display:none}
}

/* ---- report ---- */
.mk-hero{display:grid;gap:18px;align-items:center;position:relative;overflow:hidden}
@media (min-width:760px){.mk-hero{grid-template-columns:auto minmax(0,1fr) minmax(220px,300px)}}
.mk-score{position:relative;width:150px;height:150px;flex:none;justify-self:center}
.mk-score svg{transform:rotate(-90deg)}
.mk-score circle{fill:none;stroke-width:11;stroke-linecap:round}
.mk-score .trk{stroke:var(--tint)}
.mk-score .val{stroke:var(--accent);transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.mk-score b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:2.7rem;font-weight:800;line-height:1}
.mk-score b small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--ink-3);margin-top:4px}
.mk-verdict{font-size:1.35rem;font-weight:800}
.mk-dims{display:grid;gap:9px}
.mk-dim{display:grid;grid-template-columns:96px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:.86rem;font-weight:600}
.mk-dim .bar{height:8px;border-radius:99px;background:var(--tint);overflow:hidden}
.mk-dim .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--mk-b));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.mk-dim b{text-align:right}
.mk-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px}
.mk-tile{padding:16px;display:grid;gap:8px;align-content:start}
.mk-tile .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.mk-tile .v{font-size:1.9rem;font-weight:800;line-height:1.05}
.mk-tile .v small{font-size:.9rem;font-weight:600;color:var(--ink-2);margin-left:4px}
.mk-tile p{font-size:.85rem;color:var(--ink-2)}
.mk-gauge{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--warn-soft) 0 28.6%,var(--good-soft) 28.6% 60.7%,var(--warn-soft) 60.7%)}
.mk-gauge i{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--sheet);border:3px solid var(--accent);transform:translate(-50%,-50%);left:0;transition:left 1.4s cubic-bezier(.2,.8,.2,1)}
.mk-gauge-l{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-3);font-weight:600}
.mk-notes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:12px}
.mk-note{padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--sheet);box-shadow:var(--shadow-sm)}
.mk-note h4{font-size:.95rem;display:flex;gap:8px;align-items:center;margin-bottom:8px}
.mk-note ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.92rem;color:var(--ink-2)}
.mk-note.good h4{color:var(--good)} .mk-note.warn h4{color:var(--warn)} .mk-note.next h4{color:var(--accent)}
.mk-wait{display:grid;gap:10px;padding:18px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 40%,var(--sheet));margin-top:12px}
.mk-qlist{display:grid;gap:10px;margin-top:12px}
.mk-qrow{border:1px solid var(--line);border-radius:14px;background:var(--sheet);box-shadow:var(--shadow-sm);overflow:hidden}
.mk-qrow summary{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) 52px;gap:12px;align-items:center;padding:12px 14px;cursor:pointer}
.mk-qrow summary::-webkit-details-marker{display:none}
.mk-qrow .qn{font-weight:800;color:var(--ink-3);font-size:.9rem}
.mk-qrow .qt{font-weight:600;line-height:1.35}
.mk-qrow .chips{margin-top:6px}
.mk-qrow .qd{padding:0 14px 14px 54px;display:grid;gap:12px;font-size:.92rem}
.mk-qrow .qd h5{margin:0 0 6px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.mk-qrow[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.mk-qrow .ring b small{display:none}
@media (max-width:560px){.mk-qrow .qd{padding-left:14px}}
.mk-kept{display:flex;gap:10px;align-items:center;justify-content:center;font-size:.85rem;color:var(--ink-2);margin-top:18px;text-align:center}
.mk-kept svg{color:var(--good);flex:none}
.mk-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

/* ---- being found: the nav item and the home-page card (owner, 2026-10-10: people
   couldn't find the feature, it should catch the eye like an AI feature does) ---- */
nav.main a.mk-nav{white-space:nowrap;position:relative;color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) padding-box,
  linear-gradient(100deg,var(--mk-a),var(--mk-b),var(--mk-c)) border-box;border:1.5px solid transparent;padding:6.5px 8px 6.5px 11px}
nav.main a.mk-nav > svg{color:var(--mk-b);display:inline-block}   /* kept on small laptops too */
nav.main a.mk-nav:hover{background:linear-gradient(var(--tint),var(--tint)) padding-box,linear-gradient(100deg,var(--mk-a),var(--mk-b),var(--mk-c)) border-box}
nav.main a.mk-nav[aria-current="page"]{color:#fff;background:linear-gradient(100deg,var(--mk-a),var(--mk-b)) border-box}
nav.main a.mk-nav[aria-current="page"] > svg{color:#fff}
.mk-nav-ai{display:inline-flex;align-items:center;gap:3px;font:800 .62rem var(--font-body);letter-spacing:.06em;color:#fff;border-radius:99px;padding:2px 6px 2px 5px;
  background:linear-gradient(100deg,var(--mk-a),var(--mk-b));background-size:200% 100%;animation:mkShine 3s ease-in-out infinite}
.mk-nav[aria-current="page"] .mk-nav-ai{background:rgb(255 255 255 / .22);animation:none}
@keyframes mkShine{50%{background-position:100% 0;box-shadow:0 0 10px -1px color-mix(in srgb,var(--mk-b) 70%,transparent)}}
/* phones: a gradient icon with a sparkle */
.tabbar a.mk-nav > svg{color:var(--mk-b)}
.tabbar a.mk-nav::after{content:"";position:absolute;top:3px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--mk-a),var(--mk-b));box-shadow:0 0 0 2px var(--sheet);animation:mkPulse 2.4s ease-in-out infinite}
.tabbar a.mk-nav span{background:linear-gradient(100deg,var(--mk-a),var(--mk-b));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes mkPulse{50%{box-shadow:0 0 0 2px var(--sheet),0 0 0 6px color-mix(in srgb,var(--mk-b) 25%,transparent)}}

.mk-promo{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;align-items:center;
  margin-bottom:14px;padding:20px 22px;border-radius:var(--r);background:var(--mk-bg);color:var(--mk-ink);
  box-shadow:0 0 0 1px var(--mk-line),0 14px 34px -14px color-mix(in srgb,var(--mk-b) 70%,transparent)}
.mk-promo-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--mk-a) 45%,transparent),transparent 70%),
  radial-gradient(50% 120% at 100% 100%,color-mix(in srgb,var(--mk-b) 40%,transparent),transparent 70%),
  radial-gradient(30% 80% at 75% 0%,color-mix(in srgb,var(--mk-c) 22%,transparent),transparent 70%)}
.mk-promo-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;align-self:start;
  background:linear-gradient(135deg,var(--mk-a),var(--mk-b));box-shadow:0 8px 20px -6px var(--mk-b);animation:mkPulseIc 2.4s ease-in-out infinite}
@keyframes mkPulseIc{50%{box-shadow:0 8px 20px -6px var(--mk-b),0 0 0 8px color-mix(in srgb,var(--mk-b) 18%,transparent)}}
.mk-promo-txt{display:grid;gap:6px;justify-items:start;padding-right:28px}
.mk-promo-tag{display:inline-flex;align-items:center;gap:5px;font:800 .68rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px 3px 7px;border-radius:99px;color:#fff;background:linear-gradient(100deg,var(--mk-a),var(--mk-b))}
.mk-promo h3{margin:0;font:800 1.25rem/1.25 var(--font-display);color:#fff}
.mk-promo p{margin:0;font-size:.92rem;color:var(--mk-ink-2);max-width:60ch}
.mk-promo-wave{display:none;align-items:center;gap:4px;height:44px}
.mk-promo-wave i{width:4px;height:100%;border-radius:4px;background:linear-gradient(var(--mk-c),var(--mk-a));transform:scaleY(.3);animation:mkWave 1.2s ease-in-out infinite}
.mk-promo-wave i:nth-child(2n){animation-delay:-.3s}.mk-promo-wave i:nth-child(3n){animation-delay:-.7s}.mk-promo-wave i:nth-child(4n+1){animation-delay:-.5s}
@keyframes mkWave{50%{transform:scaleY(1)}}
.mk-promo-go{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border-radius:12px;
  background:#fff;color:#1b1f3b;font:800 .98rem var(--font-body);text-decoration:none;box-shadow:0 8px 22px -8px rgb(0 0 0 / .6);transition:transform .2s,box-shadow .2s}
.mk-promo-go svg{color:var(--mk-b)}
.mk-promo-go:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--mk-b) 80%,transparent)}
.mk-promo-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mk-promo-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:9px;border:0;background:rgb(255 255 255 / .08);color:var(--mk-ink-2);cursor:pointer;display:grid;place-items:center}
.mk-promo-x:hover{background:rgb(255 255 255 / .16);color:#fff}
.mk-promo-x:focus-visible{outline:2px solid #fff}
@media (min-width:760px){
  .mk-promo{grid-template-columns:auto minmax(0,1fr) auto auto;padding:22px 56px 22px 24px}
  .mk-promo-txt{padding-right:0}
  .mk-promo-wave{display:flex}
  .mk-promo-go{grid-column:auto}
}
/* phones and small tablets: no card, the "AI mock" tab in the bottom bar is the way in */
@media (max-width:859px){.mk-promo{display:none}}

/* ---- my documents: question sets (owner, 2026-10-10) ---------------------------------- */
.mk-sets{display:grid;gap:8px}
.mk-set{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--sheet);color:var(--ink)}
.mk-set.ready{cursor:pointer}
.mk-set.ready:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.mk-set[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--sheet))}
.mk-set.failed{border-style:dashed}
.mk-set .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.mk-set .t{min-width:0}
.mk-set .t b{display:block;overflow-wrap:anywhere}
.mk-set small{display:flex;gap:6px;align-items:center;color:var(--ink-2);font-size:.82rem}
.mk-set.failed small{color:var(--bad)}
.mk-upload{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.mk-upload .btn.disabled{opacity:.55;pointer-events:none}
.mk-set-name{font:800 1.5rem var(--font-display);border:1px solid transparent;background:transparent;color:var(--ink);padding:4px 6px;margin:4px 0 0 -6px;border-radius:8px;width:100%;max-width:640px}
.mk-set-name:hover,.mk-set-name:focus{border-color:var(--line);background:var(--sheet)}
.mk-set-qs{display:grid;gap:12px;margin-top:14px}
.mk-set-q{display:grid;gap:8px}
.mk-set-qh{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem}
.mk-set-qh .qn{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font:700 .8rem var(--font-mono);display:grid;place-items:center}
.mk-set-q textarea{width:100%;resize:vertical}
.mk-full{margin-top:6px;font-size:.88rem}
.mk-full summary{cursor:pointer;color:var(--accent);font-weight:600}
.mk-full p{margin-top:6px;color:var(--ink-2);white-space:pre-wrap}
.mk-check{display:flex;gap:8px;align-items:center;font-size:.9rem;margin-top:8px;cursor:pointer}
.mk-check input{width:18px;height:18px;accent-color:var(--accent)}

/* ---- challenges (owner, 2026-10-10) --------------------------------------------------- */
.mk-chal{margin-top:16px;display:grid;gap:10px;border:1.5px solid color-mix(in srgb,var(--mk-b) 45%,var(--line))}
.mk-chal.invite{background:linear-gradient(120deg,color-mix(in srgb,var(--mk-b) 12%,var(--sheet)),color-mix(in srgb,var(--mk-a) 10%,var(--sheet)))}
.mk-chal-h{display:flex;gap:8px;align-items:center;font-size:1.05rem;color:var(--ink)}
.mk-chal-h svg{color:var(--mk-b)}
.mk-vs{display:flex;align-items:center;gap:18px;justify-content:center;padding:6px 0}
.mk-vs div{display:grid;justify-items:center}
.mk-vs b{font:800 2.4rem var(--font-display);line-height:1}
.mk-vs span{font-size:.82rem;color:var(--ink-2);margin-top:4px}
.mk-vs i{font-style:normal;font-weight:800;color:var(--ink-3)}
.mk-board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mk-board li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--tint)}
.mk-board li.you{background:color-mix(in srgb,var(--accent-soft) 70%,var(--sheet));outline:1.5px solid var(--accent)}
.mk-board .rk{font:700 .85rem var(--font-mono);color:var(--ink-2);text-align:center}
.mk-board li:first-child .rk{color:#c58a00}
.mk-board .nm{overflow-wrap:anywhere}
.mk-board small{font-size:.72rem;color:var(--ink-3);margin-left:4px}
.mk-board b{font-weight:800;font-variant-numeric:tabular-nums}
.mk-share-card{width:100%;border-radius:12px;border:1px solid var(--line);display:block;aspect-ratio:1200/630;object-fit:cover;background:#121a2b}
.mk-share-link{display:flex;gap:8px}
.mk-share-link input{flex:1;min-width:0;font:500 .85rem var(--font-mono)}
.mk-share-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mk-chal-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin-bottom:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--mk-b) 14%,var(--sheet)),color-mix(in srgb,var(--mk-a) 10%,var(--sheet)))}
.mk-chal-hero h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:6px 0 4px}
.mk-chal-hero .eyebrow svg{color:var(--mk-b)}
.mk-chal-topic{font-weight:700;color:var(--ink-2);margin-bottom:10px}
.mk-ring-big{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:radial-gradient(closest-side,var(--sheet) 79%,transparent 80% 100%),conic-gradient(#2ec48f calc(var(--p,0)*1%),var(--line) 0)}
.mk-ring-big b{font:800 2.6rem var(--font-display);line-height:1}
.mk-ring-big small{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3)}
.mk-how{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--ink-2);font-size:.92rem}
@media (max-width:560px){
  .mk-chal-hero{grid-template-columns:1fr}
  .mk-ring-big{width:110px;height:110px}
  .mk-set{grid-template-columns:36px minmax(0,1fr) auto auto auto;gap:6px}
}

/* the upload box: the first thing on "My document" (owner, 2026-10-10) */
.mk-drop{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px;padding:16px 18px;border-radius:16px;cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent-soft) 55%,var(--sheet));transition:border-color .2s,background .2s,transform .2s}
.mk-drop:hover,.mk-drop.over{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.mk-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.mk-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mk-drop .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.mk-drop .t{display:grid;gap:2px;min-width:0}
.mk-drop .t b{font-size:1.02rem;display:flex;gap:8px;align-items:center}
.mk-drop .t small{color:var(--ink-2);font-size:.85rem}
.mk-drop.busy{pointer-events:none;opacity:.85}
.mk-drop.off{cursor:default;opacity:.6;border-style:solid}
.mk-how-doc{margin-top:8px;font-size:.85rem;color:var(--ink-2)}
.mk-how-doc summary{cursor:pointer;color:var(--accent);font-weight:600;width:max-content}
.mk-how-doc p{margin-top:6px;max-width:70ch}
.mk-set.usable{cursor:pointer}
.mk-set.usable:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.mk-set small b{color:var(--good)}
.mk-set small .bad{color:var(--bad)}
.mk-prog{display:block;height:6px;border-radius:99px;background:var(--tint);overflow:hidden;margin-top:6px;max-width:320px}
.mk-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mk-a),var(--mk-b));transition:width .6s ease}
@media (max-width:560px){.mk-drop{grid-template-columns:44px minmax(0,1fr)}.mk-drop>.btn{grid-column:1/-1;justify-self:start}}

/* the report while answers are still being scored */
.mk-live{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;margin-top:14px;background:var(--accent-soft);color:var(--ink);font-size:.92rem}
.mk-live .spinner{color:var(--accent);flex:none}
.chip.wait{background:var(--tint);color:var(--ink-2);border-color:transparent}

/* the score ring holds the number; its label sits under it (owner's phone: the label spilled out) */
.mk-ring-wrap{display:grid;justify-items:center;gap:8px;text-align:center}
.mk-ring-wrap small{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);max-width:150px}
@media (max-width:560px){
  .mk-chal-hero{gap:14px;padding:18px}
  .mk-chal-hero h2{font-size:1.5rem}
  .mk-ring-wrap{display:flex;align-items:center;gap:12px;justify-items:start;text-align:left}
  .mk-ring-big{width:84px;height:84px}
  .mk-ring-big b{font-size:2rem}
  .mk-ring-wrap small{max-width:none}
}
.mk-steps-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:.9rem;color:var(--mk-ink-2);margin:4px 0 2px}
.mk-steps-line svg{width:15px;height:15px;color:var(--mk-c)}
.mk-steps-line i{font-style:normal;opacity:.5}

/* the report's question rows on phones (owner's screenshot, 2026-10-10: text ran off the edge) */
.mk-qrow .qd{min-width:0}
.mk-qrow .qd p,.mk-qrow .qd li,.mk-qrow .qt{overflow-wrap:anywhere}
.mk-qrow .qd ul{margin:0;padding-left:18px;display:grid;gap:4px}
.mk-qrow .qd .chips{gap:6px}
@media (max-width:560px){
  .mk-qrow summary{grid-template-columns:20px minmax(0,1fr) 44px;gap:10px;padding:12px}
  .mk-qrow .qn{font-size:.85rem}
  .mk-qrow .qt{font-size:.96rem}
  .mk-qrow .ring,.mk-qrow .ring svg{width:44px;height:44px}
  .mk-qrow .ring b{font-size:.9rem}
  .mk-qrow .chips .chip{font-size:.72rem;padding:3px 8px}
  .mk-qrow .qd{padding:0 12px 14px 12px;font-size:.9rem;gap:10px}
}