/* PEpracticehub - the account screens.
   Loaded after tokens.css and base.css. Everything here is specific to
   sign-up, sign-in, password reset and the member dashboard. */

/* The amber bar that marks demo mode. Hidden the moment real accounts are
   configured; turns red if they are configured but unreachable. */
.demo-bar{
  background:var(--amber);color:var(--amber-ink);
  font-size:13.5px;font-weight:600;padding:10px 18px;text-align:center;line-height:1.4;
}
.demo-bar span{font-weight:400;opacity:.82}
[data-auth-mode="live"] .demo-bar{display:none}
[data-auth-mode="error"] .demo-bar{background:var(--bad);color:#fff}

/* page shell

   One number decides how wide a page is, and the header, the content and the
   footer all read it. They used to carry their own widths, which is why the
   logo never lined up with anything underneath it: the bar was capped at
   1000px while the member area ran to 1240.

   Each kind of page sets the variable once, by what it contains. Anything
   that does not match keeps the narrow default, which suits the sign-in and
   sign-up boxes. */
.shell{
  min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;
  --page-w:min(1000px,calc(100% - 32px));
}
.shell:has(.member)      {--page-w:min(1240px,calc(100% - 48px))}
.shell:has(.play-main)   {--page-w:min(1680px,calc(100% - 40px))}
.shell:has(.studio-main) {--page-w:min(1680px,calc(100% - 48px))}
@media (max-width:640px){
  .shell,.shell:has(.member),.shell:has(.play-main),.shell:has(.studio-main){
    --page-w:calc(100% - 24px);
  }
}

.topbar{border-bottom:1px solid var(--line);background:var(--surface)}
.topbar-in{
  width:var(--page-w);margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{
  display:flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:24px;font-weight:600;text-decoration:none;color:inherit;
}
.logo b{font-weight:800;color:var(--blue-text)}
.logo em{font-style:normal;font-weight:800;color:var(--amber)}
.logo svg{width:29px;height:29px;color:var(--blue-text)}
.topbar .alt{font-size:14px;color:var(--muted)}
.topbar .alt a{font-weight:600}
.linkish{background:transparent;border:0;color:var(--blue-text);font-weight:600;cursor:pointer;font-size:14px;padding:0}
.linkish:hover{text-decoration:underline}

/* On a touchscreen a text button is a 20px target, well under the 44px a
   finger needs. The padding grows what can be tapped and the negative margin
   takes the same space back, so nothing on the page moves. A mouse is precise
   enough that none of this applies. */
@media (pointer:coarse){
  .linkish,.goal-line a,.foot-link a,#seeAll,.forgot a{
    display:inline-block;padding-block:12px;margin-block:-12px;
  }
}

.center{display:grid;place-items:center;padding:38px 16px 56px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);width:min(460px,100%);padding:32px;
}
.card.wide{width:min(820px,100%)}
.card h1{font-size:38px;font-weight:800;margin-bottom:8px}
.card .sub{color:var(--muted);font-size:15px;margin-bottom:24px}

footer.foot{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:12.5px}
.foot-in{
  width:var(--page-w);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot-in a{color:var(--muted)}

/* Two fields side by side, stacking on a phone.
   align-content:start matters: the two cells are stretched to the height of
   the taller one, and without it a field with no hint under it spreads its
   rows to fill, pushing its input out of line with the neighbour's. */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.row2 .field{align-content:start}
@media (max-width:480px){.row2{grid-template-columns:1fr}}

/* password field with a show/hide control */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:76px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--muted);font-size:12.5px;
  font-weight:600;padding:8px 10px;cursor:pointer;border-radius:7px;
}
.pw-toggle:hover{color:var(--ink);background:var(--surface-2)}

/* Live password requirements. Gray before anyone types, then green for a
   rule that is met and red for one that is not. Built by validate.js from
   a single list, so adding a rule needs no change here or in the markup. */
.pw-reqs{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.pw-reqs li{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;line-height:1.3;color:var(--muted);
  transition:color .15s;
}
.pw-reqs .mark{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);background:transparent;
  display:grid;place-items:center;
  font-size:9px;font-weight:700;line-height:1;color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.pw-reqs .mark::before{content:"\2713"}          /* check */
.pw-reqs li.ok{color:var(--ok)}
.pw-reqs li.ok .mark{background:var(--ok);border-color:var(--ok);color:#fff}
.pw-reqs li.no{color:var(--bad)}
.pw-reqs li.no .mark{border-color:var(--bad);color:var(--bad)}
.pw-reqs li.no .mark::before{content:"\2715"}    /* cross */

/* the "forgot it?" link sitting next to the password label */
.forgot{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.forgot a{font-size:12.5px;font-weight:600}

.foot-link{text-align:center;font-size:14px;color:var(--muted);margin-top:20px}

/* success panel that replaces a form once it has been submitted */
.done{display:none;gap:16px}
.done.show{display:grid;animation:rise .4s both}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.done .big{font-family:var(--display);font-size:34px;font-weight:800;line-height:1;text-transform:uppercase}
.done .sub{margin:0}
.done ol{margin:0;padding-left:19px;display:grid;gap:7px;color:var(--muted);font-size:14.5px}
.done ol b{color:var(--ink)}

/* Shared with the practice results screen. The old dashboard rules that used
   to live here are gone: #dash{display:none} outlived the markup it was
   written for and silently hid the whole member area, because an id beats
   the [hidden] attribute the new pages use. */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface-2);border-radius:12px;padding:15px 17px;display:grid;gap:3px}
.tile .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:var(--display);font-size:31px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .v.small{font-size:20px;line-height:1.2}
.tile .n{font-size:12.5px;color:var(--muted)}
/* .empty, .rows and .row used to live here for the old dashboard. They are
   gone with it. .empty in particular was a trap: a name that generic will be
   reached for again, and it silently repainted an unrelated block as a
   dashed centered box the first time it was. The member area uses .mempty and
   .frows, which say where they belong. */

/* legal pages */
.legal{width:min(760px,100%);padding:8px 0 20px}
.legal h1{font-size:44px;font-weight:800;margin-bottom:6px}
.legal .updated{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:28px}
.legal h2{font-size:24px;font-weight:700;margin:30px 0 10px}
.legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.65}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:20px;display:grid;gap:7px}
.legal strong{color:var(--ink)}
.legal .note{background:var(--surface-2);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:14px 16px;margin-top:16px}

/* A field whose value is not up for discussion. Used where a choice used to
   be and no longer is: one exam is open, so a dropdown of one would be a
   control that does nothing. */
.fixed-val{
  height:50px;display:flex;align-items:center;padding:0 15px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);
  color:var(--muted);font-size:15px;
}