/* account-theme.css: main-site look for /account/ pages. Load AFTER pages.css.
   Overrides only; no markup changes required. Fonts are self-hosted (OFL). */
@font-face { font-family: "Fraunces"; src: url("/account/fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/account/fonts/nunito-sans-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/account/fonts/nunito-sans-italic-var.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
  --paper: #fbf8f1; --card: #ffffff; --ink: #3c3c3c; --muted: #4a4740; --line: #e3ddd0;
  --teal: #134a47; --teal-dark: #0f3d3a; --teal-tint: #e4f1ef; --sprout: #6fa86a; --sun: #e9b85a; --clay: #d9826a;
  --accent: var(--teal); --accent-dark: var(--teal-dark); --sky: var(--teal); --good: #1a5414; --bad: #8f1c13;
  --radius: 18px; --shadow: 0 1px 0 rgba(60,60,60,.04), 0 6px 18px rgba(60,60,60,.06);
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --head: "Fraunces", Georgia, "Times New Roman", serif;
  --ja-accent: var(--teal); --ja-accent-hover: var(--teal-dark); --ja-ink: var(--ink);
}
body { background: var(--paper); color: var(--ink); font-family: var(--font); }
a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--teal-dark); }
:focus-visible { outline-color: var(--teal); }
h1, h2, h3, .brand { font-family: var(--head); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h1 { color: var(--teal-dark); }

/* Header: light bar with the sprout logo, like the main site */
.site-head { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.site-head .bar { min-height: 76px; }
.brand { color: var(--ink); gap: 10px; }
.brand img { height: 56px; width: auto; display: block; }
.brand .brand-label { font: 600 1.05rem/1 var(--head); color: var(--teal); background: var(--teal-tint);
  padding: .4em .8em; border-radius: 999px; align-self: center; margin-top: 6px; }
.head-nav a { color: var(--ink); font-weight: 700; }
.head-nav a:hover, .head-nav a[aria-current] { background: var(--teal-tint); color: var(--teal-dark); }
.site-head .ja-widget a, .site-head .ja-widget button { color: var(--teal-dark); border-color: var(--line); background: #fff; }
.site-head .ja-widget .ja-primary { background: var(--teal); color: #fff; border-color: transparent; }
.site-head .ja-widget .ja-primary:hover { background: var(--teal-dark); }

/* Cards: rounded, tinted, 4px borders */
.card { border: 4px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.dash-sec.card, #account-view.card, #admin-view.card, #setup-view.card { background: #fff; }
.notice { background: #fbf1dc; border: 2px solid var(--sun); border-radius: 14px; }
.notice.bad { background: #fbe9e3; border-color: var(--clay); color: #7a2616; }
.notice.good { background: var(--teal-tint); border-color: var(--sprout); color: var(--teal-dark); }

/* Buttons: teal pills */
.btn, button.btn { background: var(--teal); font-weight: 800; border-radius: 999px; }
.btn:hover { background: var(--teal-dark); }
.btn.ghost { background: #fff; color: var(--teal-dark); border-color: var(--teal); }
.btn.ghost:hover { background: var(--teal-tint); }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #74160f; }

/* Forms */
input[type=text], input[type=email], input[type=password], input[type=number], select { border-color: var(--line); background: #fff; }
input:focus, select:focus, input:focus-visible, select:focus-visible { border-color: var(--teal); outline-color: var(--teal); }
.pw-toggle { border-color: var(--line); color: var(--teal-dark); }
.pw-toggle:hover { background: var(--teal-tint); }
.pw-toggle[aria-pressed=true] { background: #fbf1dc; border-color: var(--sun); }
.check input { accent-color: var(--teal); }

/* Login tabs + kid keypad */
.tabs { background: var(--teal-tint); border: 2px solid #cfe5e1; }
.tabs [role=tab] { color: var(--teal-dark); }
.tabs [role=tab][aria-selected=true] { background: var(--teal); color: #fff; box-shadow: none; }
.kid-panel { background: #fff; border-color: #cfe5e1; }
.pin-dots span { border-color: var(--teal); } .pin-dots span.on { background: var(--teal); }
.keypad button { font-family: var(--font); font-weight: 800; border: 3px solid var(--line); color: var(--teal-dark); background: #fff; }
.keypad button:hover { background: var(--teal-tint); border-color: #b9dbd6; }
.keypad button:active { background: #fbf1dc; }
.keypad .go { background: #2f5a2c; color: #fff; }
.keypad .go:hover { background: #264a24; }
.choice { border: 4px solid var(--line); } .choice:hover { border-color: var(--teal); }

/* Dashboard side menu: teal-tinted with a clear active state */
.dash-nav ul { background: var(--teal-tint); border: 4px solid #cfe5e1; box-shadow: none; padding: 10px; }
.dash-nav a { color: var(--teal-dark); font-weight: 700; border-radius: 12px; border-left: 4px solid transparent; }
.dash-nav a:hover { background: #fff; }
.dash-nav a[aria-current="page"] { background: var(--teal); color: #fff; border-left-color: var(--sun); box-shadow: 0 2px 0 rgba(15,61,58,.25); }
@media (max-width: 600px) {
  .dash-nav { background: var(--paper); }
  .dash-nav ul { background: transparent; border: 0; padding: 4px 20px; }
  .dash-nav a { border: 2px solid #cfe5e1; background: var(--teal-tint); border-radius: 999px; }
  .dash-nav a[aria-current="page"] { background: var(--teal); border-color: var(--teal); }
}

/* Child cards and switcher */
.kid-card { background: var(--teal-tint); border: 4px solid #cfe5e1; }
.kid-cards .kid-card:nth-child(3n+2) { background: #fbf1dc; border-color: #f1d9a6; }
.kid-cards .kid-card:nth-child(3n+3) { background: #fbe9e3; border-color: #f0c6b8; }
.kid-card:hover { border-color: var(--teal); }
.kid-card:focus-visible { outline-color: var(--teal); }
.kid-card-name { font-family: var(--head); font-weight: 600; font-size: 1.3em; color: var(--teal-dark); }
.kid-stats dt { color: var(--muted); }
.kid-switch [role=tab] { border-color: #cfe5e1; color: var(--teal-dark); background: #fff; }
.kid-switch [role=tab][aria-selected=true] { background: var(--teal); border-color: var(--teal); color: #fff; }
.kid-admin { background: #fff; border-color: #cfe5e1; }
.resume { background: linear-gradient(135deg, #fbf1dc, #fbe9e3); border-color: #f1d9a6; }
.tag.elementary { background: #fbf1dc; color: #5f430c; } .tag.middle { background: #fbe9e3; color: #7a3624; } .tag.high { background: var(--teal-tint); color: var(--teal-dark); }

/* Quiz tables and answer keys */
.quiz-table th, .quiz-table td { border-bottom-color: var(--line); }
.quiz-table thead th { color: var(--teal-dark); }
.attempt-detail li { border-left-color: var(--line); }
#keys-section .keys-course { font-family: var(--head); color: var(--teal-dark); }
.keys-row { border-top-color: var(--line); }

/* Footer */
.site-foot { border-top: 4px solid var(--line); }
.site-foot a { color: var(--teal-dark); font-weight: 700; }

@media (max-width: 600px) {
  .site-head .bar { min-height: 64px; }
  .brand img { height: 44px; }
  .brand .brand-label { font-size: .9rem; }
}
.dash h2, .dash-sec h2 { font-size: 1.45rem; color: var(--teal-dark); }
.kid-stats dd { font-weight: 800; color: var(--ink); }

.skip:hover, .skip:focus { color:#fff; }