/* Bashidrum production shell: sign-in screens, account button, install bar, account sheets.
   Uses the prototype's tokens (styles.css), so it follows the brand: white cards on the brand green. */

#authView[hidden],#appView[hidden],#installBar[hidden],.acct[hidden],.authcard [hidden]{display:none!important}

/* sign-in */
.auth{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 0 40px}
.authcard{width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}
/* the Bashidrum lockup: emblem, BASHIDRUM, then the letter-spaced strapline */
.authbrand{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;margin-bottom:4px}
.authbrand .emblem{width:122px;height:116px;display:block;flex:none;color:#fff;overflow:visible}
.authbrand h1{font-family:var(--f-display);font-weight:800;font-size:2.35rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff;margin:16px 0 0}
.authbrand .strap{font-family:var(--f-display);font-weight:600;font-size:.8rem;line-height:1.2;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin:8px 0 0;padding-left:.24em}
@media (max-width:380px){.authbrand .emblem{width:101px;height:96px}.authbrand h1{font-size:2rem}}
.authcard .panel{padding:20px;border:0;border-radius:var(--r-card);box-shadow:var(--card-shadow)}
.authcard h2{font-size:1.25rem;margin:0 0 4px}
.authcard p{margin:6px 0;color:var(--ink-2)}
.authcard input[type=email],.authcard input[type=password],.authcard input[type=text]{width:100%;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:#fff}
.authcard .btn{width:100%;min-height:48px;margin-top:18px;font-size:15px;font-weight:600}
.authcard .btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.authcard .linkbtn{display:inline-block}
.authlinks{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.authlinks a,.linkish-a{color:var(--ink-2);text-underline-offset:3px;font-size:13.5px;padding:8px 0}
.formerr{color:var(--danger);font-size:13.5px;margin:10px 0 0;min-height:1em}
.formok{color:var(--green-ink);font-size:13.5px;margin:10px 0 0}
.authcard .fieldhelp{font-size:13px;color:var(--muted);margin:6px 0 0}
.authcard #loginUser{font-family:var(--f-mono);letter-spacing:.01em}
.askben{color:var(--ink-2);font-size:13.5px;padding:8px 0}
/* under Sign in: Forgot password? and Forgot username? (or "ask Ben" when sign-in help by email is off), then the privacy link */
.authlinks.forgotlinks{margin-top:10px}
.authlinks.forgotlinks .linkbtn{font-size:14px;color:var(--green-ink);font-weight:600}
.authlinks.authfoot{justify-content:center;margin-top:0}
.authcard .formok{font-weight:600;line-height:1.45}

/* the account button sits beside the sound button in the header */
.acct{font-weight:700;font-size:1rem}
.acct #acctAv{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-size:.85rem}

/* install bar under the header */
.installbar{position:relative;z-index:1;max-width:580px;margin:0 auto 12px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-card);padding:10px 12px 10px 16px;box-shadow:var(--card-shadow);font-size:.9rem}
.installbar p{margin:0;flex:1}

/* account sheets (accounts.js) */
.copybox{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--soft);border-radius:8px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;margin:8px 0;user-select:all}
.kvrow{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;margin:10px 0}
.kvrow span:nth-child(odd){color:var(--muted)}
.sheet input[type=email],.sheet input[type=password]{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-height:var(--tap);width:100%}

/* privacy and self-test pages */
.page{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:24px 0 48px}
.page .panel{border:0;border-radius:var(--r-card);box-shadow:var(--card-shadow);padding:20px}
.page h1{color:#fff;font-size:1.6rem;margin:8px 0 16px}
.page a.back{color:#fff;font-weight:600}

/* the username in Ben's class list (Admin > Students) */
.crow .cu{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.crow[aria-pressed="true"] .cu{color:inherit;opacity:.75}

/* the sign-in card Ben prints or copies for a student (Add student, Reset password) */
.logincard{border:2px dashed var(--line);border-radius:14px;padding:16px 18px;margin:12px 0;background:#fff;color:#111}
.logincard .lc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logincard .lc-head img{width:40px;height:40px;flex:none}
.logincard .lc-head b{display:block;font-size:1.05rem}
.logincard .lc-head span{font-size:12.5px;color:#555}
.logincard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.logincard dt{color:#555}
.logincard dd{margin:0;font-weight:600;word-break:break-word}
.logincard dd.lc-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.03em}
.logincard .lc-foot{margin:12px 0 0;font-size:13px;color:#333}
.sheet .fieldhelp{font-size:12.5px;color:var(--muted);margin:4px 0 0}
@media print{
  body.printcard *{visibility:hidden!important}
  body.printcard .logincard,body.printcard .logincard *{visibility:visible!important}
  body.printcard .logincard{position:fixed;left:12mm;top:12mm;width:90mm;border:1.5px dashed #999;box-shadow:none}
}

/* Every drop-down (Settings: Day, Month, Year, Playing since; the metronome's Click; Ben's Student picker; Admin) is drawn
   flat with our own chevron. Without this, Safari on macOS and iOS draws its own grey gradient button whatever the border
   and background say; the prototype only looked flat because it was viewed in Chromium. The higher specificity wins over
   the background and padding shorthands in styles.css, and keeps each select's own background colour. */
html select:not([multiple]):not([size]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23556' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px 8px;
  padding-left:12px;padding-right:32px;text-overflow:ellipsis
}
html .metrow.sm select:not([multiple]):not([size]){padding-left:8px;padding-right:26px;background-position:right 8px center}
html .adminctl select:not([multiple]):not([size]){padding-left:14px;padding-right:34px;background-position:right 14px center}
html select:not([multiple]):not([size])::-ms-expand{display:none}
html select:not([multiple]):not([size]):disabled{opacity:.6}