/* PEpracticehub - the member area.
   Loaded after tokens.css, base.css and account.css. Shared by /account/,
   /account/history/, /account/profile/ and /account/plan/.

   A working area, not a landing page: one sidebar that never moves, one
   column of content, and nothing that animates while somebody is reading
   their own results. */

.member{
  width:var(--page-w);margin:0 auto;padding:24px 0 64px;
  display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;align-items:start;
}
@media (max-width:900px){.member{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---- sidebar ---- */

.mnav{position:sticky;top:20px;display:grid;gap:22px}
@media (max-width:900px){.mnav{position:static;gap:14px}}

.who-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  display:grid;gap:3px;
}
.who-card .nm{font-family:var(--display);font-size:22px;font-weight:800;line-height:1.1}
.who-card .em{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.who-card .plan{
  justify-self:start;margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);
}
.who-card .plan.pro{background:var(--amber-soft);color:var(--warn)}
.who-card .plan.admin{background:var(--blue-soft);color:var(--blue-text)}

.mlinks{display:grid;gap:3px}
/* On a phone the links become a grid of buttons instead of a strip that
   scrolls sideways and cuts the last ones off at the edge: every choice is on
   screen at once. The two things a member comes here to do sit on top. */
@media (max-width:900px){
  .mlinks{grid-template-columns:1fr 1fr;gap:8px}
}
.mlinks a{
  display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink);
  border:1.5px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s;
}
.mlinks a:hover{background:var(--surface-2)}
.mlinks a.on{background:var(--surface);border-color:var(--line);font-weight:600}
.mlinks a svg{width:17px;height:17px;flex:none;color:var(--muted)}
.mlinks a.on svg{color:var(--blue-text)}
.mlinks .sep{height:1px;background:var(--line);margin:8px 0}
@media (max-width:900px){.mlinks .sep{display:none}}
/* The admin center. Only a handful of accounts ever see this link, and it
   leads somewhere with real consequences, so it is marked as a place rather
   than dressed as another page of your own account. Blue, not amber: amber
   is reserved for the one thing a member is here to do. */
.mlinks .admin-link{
  background:var(--blue-soft);border-color:var(--blue);color:var(--blue-text);
  font-weight:600;
}
.mlinks .admin-link svg{color:var(--blue-text)}
.mlinks .admin-link:hover{background:var(--blue-soft);filter:brightness(.97)}
.mlinks .admin-link.on{background:var(--blue-soft);border-color:var(--blue)}

.mlinks .go{
  margin-top:6px;justify-content:center;background:var(--amber);color:var(--amber-ink);
  font-weight:600;border-color:var(--amber);
}
.mlinks .go:hover{background:var(--amber);filter:brightness(1.04)}

@media (max-width:900px){
  .mlinks a{
    white-space:normal;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:8px;min-height:76px;padding:12px 14px;line-height:1.25;
    background:var(--surface);border-color:var(--line);
  }
  .mlinks a svg{width:20px;height:20px}
  .mlinks a.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
  .mlinks .go,.mlinks .admin-link,.mlinks a[href="/app/"]{
    flex-direction:row;align-items:center;justify-content:center;min-height:50px;margin-top:0;
  }
  .mlinks .go{order:-2;background:var(--amber)}
  .mlinks .admin-link{order:-1;background:var(--blue-soft)}
  /* Without the admin link, Start practicing takes the whole top row. */
  .mlinks:has(#studioLink[hidden]) .go{grid-column:1 / -1}
  .mlinks a[href="/app/"]{grid-column:1 / -1}
}
/* Opened from the home screen icon, the app is already installed. */
@media (display-mode:standalone){.mlinks a[href="/app/"]{display:none}}

/* ---- content ---- */

.mmain{display:grid;gap:18px;min-width:0}
.mhead h1{font-size:36px;font-weight:800;line-height:1.05}
.mhead p{color:var(--muted);font-size:14.5px;margin-top:7px;max-width:62ch}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;width:auto;
}
@media (max-width:520px){.panel{padding:20px 18px}}
.panel h2{font-size:21px;font-weight:700}
.panel .psub{color:var(--muted);font-size:13.5px;margin:6px 0 18px;max-width:62ch}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}

/* number tiles, four across */
.mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:820px){.mtiles{grid-template-columns:repeat(2,1fr)}}
.mtile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:3px}
.mtile .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mtile .v{font-family:var(--display);font-size:34px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.mtile .v.sm{font-size:21px;line-height:1.25}
.mtile .n{font-size:12.5px;color:var(--muted);line-height:1.4}

/* progress by area */
.abars{display:grid;gap:13px}
.abar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:baseline}
.abar .name{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abar .num{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.abar .track{grid-column:1 / -1;height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.abar .track b{display:block;height:100%;border-radius:5px;background:var(--ok);width:0;transition:width .7s cubic-bezier(.22,1,.36,1)}
.abar.poor .track b{background:var(--bad)}
.abar.mixed .track b{background:var(--warn)}
.abar.none .track b{background:var(--line)}
@media (prefers-reduced-motion:reduce){.abar .track b{transition:none}}

/* the week */
.week{display:flex;gap:6px;align-items:flex-end;height:74px}
.wday{flex:1;display:grid;gap:5px;justify-items:center;align-content:end}
.wday .bar{width:100%;border-radius:4px 4px 0 0;background:var(--blue);min-height:3px}
.wday .bar.zero{background:var(--surface-2)}
.wday .lbl{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-transform:uppercase}

.goal-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
.goal-line b{color:var(--ink);font-variant-numeric:tabular-nums}

/* empty states */
.mempty{border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;display:grid;gap:12px;justify-items:center}
.mempty h3{font-size:20px;font-weight:700}
.mempty p{color:var(--muted);font-size:14px;max-width:46ch}

/* rows of facts, and rows with an action on the right */
.frows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.frow{background:var(--surface);display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 16px;font-size:14.5px}
@media (max-width:600px){.frow{grid-template-columns:1fr;gap:5px}}
.frow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.frow .v{min-width:0;overflow-wrap:anywhere}
.frow .sub{display:block;font-size:12.5px;color:var(--muted)}

/* history */
.hfilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hfilters select{width:auto;min-width:150px}
.hlist{display:grid;gap:9px}
.hitem{border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.hitem summary{
  cursor:pointer;list-style:none;padding:13px 16px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
}
.hitem summary::-webkit-details-marker{display:none}
.hitem summary:hover{background:var(--surface-2)}
@media (max-width:600px){.hitem summary{grid-template-columns:auto minmax(0,1fr);gap:8px 10px}}
.hitem .stem{font-size:14px;line-height:1.45;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hitem .aside{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.hitem .aside .slow{color:var(--bad)}
.verdict-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--ok)}
.verdict-dot.no{background:var(--bad)}
.hbody{padding:0 16px 18px;display:grid;gap:12px}
.hbody .full{font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.hbody .opts{display:grid;gap:6px}
.hbody .o{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;background:var(--surface)}
.hbody .o .l{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hbody .o.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.hbody .o.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.hbody .sol{border-left:3px solid var(--blue);background:var(--surface-2);border-radius:0 10px 10px 0;padding:14px 16px;font-size:14.5px;line-height:1.62;white-space:pre-wrap}
.hbody figure{margin:0}
.hbody img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff;padding:8px}
.hbody .ref{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hmore{display:flex;justify-content:center;margin-top:16px}

/* focus areas, as tick boxes */
.areas-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media (max-width:700px){.areas-pick{grid-template-columns:1fr}}
.apick{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s}
.apick:hover{border-color:var(--blue)}
.apick input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--amber)}
.apick input:checked~.txt{font-weight:600}
.apick .txt{font-size:13.5px;line-height:1.35}
.apick .txt small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;font-family:var(--mono)}

/* the danger zone */
.danger{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.danger h2{color:var(--bad)}
.danger-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pending{
  border-left:3px solid var(--warn);background:var(--amber-soft);
  border-radius:0 10px 10px 0;padding:14px 16px;font-size:14px;line-height:1.55;
  display:grid;gap:10px;justify-items:start;
}
.pending b{display:block}

/* the study plan */
.steps-n{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--amber);letter-spacing:.1em;margin-right:10px;vertical-align:3px}
.sp-date{max-width:260px}
.countdown{font-family:var(--mono);font-size:13px;color:var(--blue-text);margin-top:10px}
.countdown:empty{display:none}
.sp-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.sp-gap{margin-top:18px}
.picks{display:flex;gap:8px;flex-wrap:wrap}
.picks button{
  border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 15px;cursor:pointer;
  font-family:var(--display);font-size:20px;font-weight:700;color:var(--muted);
  transition:border-color .15s,background .15s,color .15s;
}
.picks button:hover{border-color:var(--blue);color:var(--ink)}
.picks button[aria-pressed="true"]{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.picks.days button{min-width:48px;padding:8px 0}
.sp-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
@media (max-width:640px){.sp-sum{grid-template-columns:1fr}}
.sp-sum .mtile{background:var(--surface-2);border-color:transparent}
.sp-time{
  width:100%;height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;
}
.sp-time:focus{outline:none;border-color:var(--blue)}
.pledge{
  margin:0;border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 12px 12px 0;
  padding:18px 20px;font-size:19px;line-height:1.5;font-weight:500;color:var(--ink);
}
.pledge-when{font-size:12.5px;color:var(--muted);margin-top:10px}
.sp-sign{margin-top:18px;max-width:380px}
.sp-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
.sp-actions .hint{font-size:12.5px;color:var(--muted);max-width:46ch}
/* On a phone the plan gets its own full row in the menu: it is the page that
   decides how every other one is used. */
@media (max-width:900px){
  .mlinks a[href="/account/study-plan/"]{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:50px}
}

/* plan */
.plan-now{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.plan-badge{
  font-family:var(--display);font-size:34px;font-weight:800;text-transform:uppercase;line-height:1;
  padding:10px 16px;border-radius:12px;background:var(--surface-2);
}
.plan-badge.pro{background:var(--amber);color:var(--amber-ink)}
.plan-price{
  font-family:var(--mono);font-size:14px;color:var(--ink);margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.plan-what{display:grid;gap:8px;margin-top:18px}
.plan-what li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.plan-what .tick{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ok);color:#fff;font-size:10px;font-weight:700;margin-top:2px}
.plan-what .tick.no{background:var(--surface-2);color:var(--muted)}
.plan-what ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}