/* AMC hub additions on top of practice.css: level switch, three tabs,
   real-style problems (citations, mock palette and timer) and the
   registration guide. Mobile-first tweaks at the end. */
.hub-tabs{grid-template-columns:repeat(3,minmax(0,1fr));min-width:min(100%,480px)}
.level-switch{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;max-width:720px}
.level-switch button{flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 16px;border:2px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;box-shadow:var(--shadow-sm)}
.level-switch button strong{font-size:1.15rem;line-height:1.2;color:var(--text)}
.level-switch button span{font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.35}
.level-switch button:hover{border-color:#8cc9c0;background:var(--brand-soft)}
.level-switch button[aria-pressed="true"]{border-color:var(--brand);background:linear-gradient(135deg,#ecfdf9,#e7f5f3);box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.level-switch button[aria-pressed="true"] strong{color:var(--brand-active)}
.hub-section{margin-top:34px}
.hub-section>h2{margin-bottom:6px}
.hub-section>p{max-width:78ch;color:var(--text-2)}
.real-grid{margin-top:16px}
.course-card>h3{font-size:1.15rem;margin:14px 0 4px}
.course-card>p{margin:4px 0;color:var(--text-2)}
.mock-card{background:linear-gradient(160deg,#ffffff,#fff8ec);border-color:var(--sun-line)}
.mock-card .icon{background:var(--sun)}
.link-button{display:inline;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.link-button:hover{background:none;color:var(--brand-hover)}

/* Real-style problem */
.amc-prompt{font-size:clamp(1.1rem,2.4vw,1.35rem)!important;font-weight:650!important}
.options button.selected{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-active)}
.options button.selected::before{background:var(--brand);color:#fff}
.band{font-weight:750}
.band-1{background:var(--ok-soft);color:var(--ok)}
.band-2{background:var(--info-soft);color:var(--info)}
.band-3{background:var(--sun);color:var(--sun-text)}
.citation{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 4px;font-size:.86rem;color:var(--muted)}
.cite-badge{display:inline-flex;align-items:center;border-radius:6px;background:#eef2f6;color:var(--text-2);padding:1px 8px;font-size:.76rem;font-weight:750;letter-spacing:.02em}
.blank-btn{border:1px dashed var(--line-strong)!important}
.feedback[data-state="wrong"]{color:var(--bad)}
.mock-bar{position:sticky;top:calc(var(--bar-h) + 4px);z-index:5;background:rgba(245,247,250,.94);backdrop-filter:blur(6px);padding:6px 0;border-radius:12px}
.mock-timer-wrap strong{font-variant-numeric:tabular-nums;color:var(--brand-active);font-size:1rem}
.mock-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:18px 0 6px}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;margin:18px 0 8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.palette button{min-height:42px;padding:0;border-radius:10px;font-size:.9rem;font-variant-numeric:tabular-nums;box-shadow:none}
.palette button.answered{background:var(--brand-soft);border-color:#8cc9c0;color:var(--brand-active)}
.palette button[aria-current="true"]{border:2px solid var(--brand);font-weight:800}
.score-breakdown{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;font-weight:650;color:var(--text-2);font-size:.92rem}
.aime-line{margin-top:16px}
.review-body .options{margin:12px 0}
.model-list{margin:22px 0}
.model-list ul{padding-left:20px}

/* Registration */
.reg-verified{margin:4px 0 10px}
.reg-jump{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.reg-jump a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:650;text-decoration:none;color:var(--text-2);box-shadow:var(--shadow-sm)}
.reg-jump a:hover{border-color:#8cc9c0;background:var(--brand-soft);color:var(--brand-active)}
.reg-caution{padding:12px 16px;border:1px solid var(--sun-line);border-radius:var(--r);background:var(--sun);color:var(--sun-text);font-weight:600;max-width:none!important}
.reg-grid{display:grid;gap:18px;margin-top:16px}
.reg-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(18px,3vw,26px);scroll-margin-top:140px}
.reg-card>h3{font-size:1.25rem;margin-bottom:8px}
.reg-org{font-weight:650;color:var(--text-2)}
.reg-how{padding-left:20px;color:var(--text-2)}
.reg-how li{margin:4px 0}
.table-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:12px}
.reg-table{width:100%;border-collapse:collapse;font-size:.92rem}
.reg-table th,.reg-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.reg-table thead th{background:var(--surface-2);font-size:.8rem;letter-spacing:.03em;color:var(--muted);font-weight:750}
.reg-table tbody tr:last-child>*{border-bottom:0}
.reg-table tbody th{font-weight:750;white-space:nowrap}
.reg-table tr.is-current>*{background:#f1faf8}
.reg-table tr.is-current th{box-shadow:inset 3px 0 0 var(--brand)}
.flag-unverified{display:inline-block;margin-left:4px;padding:0 7px;border-radius:6px;background:var(--bad-soft);color:var(--bad);font-size:.72rem;font-weight:750;white-space:nowrap}
.reg-unverified{margin:12px 0;padding:10px 14px;border:1px dashed var(--bad-line);border-radius:12px;background:#fffafa}
.reg-unverified h4{color:var(--bad);font-size:.92rem}
.reg-unverified ul{margin:0;padding-left:20px;font-size:.92rem}
.reg-links{margin-bottom:2px}
.reg-link-list{margin:0;padding-left:20px}
.reg-link-list li{margin:3px 0}
.reg-path{scroll-margin-top:140px}
.path-steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.path-steps li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);position:relative}
.path-steps li+li::before{content:"";position:absolute;left:36px;top:-13px;width:2px;height:12px;background:var(--line-strong)}
.path-icon{flex:none;font-size:1.5rem;line-height:1.2}
.path-steps h3{margin-bottom:2px}
.path-steps p{margin:2px 0;color:var(--text-2)}
.intl-note{margin:14px 0}

@media (max-width:960px){.real-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .level-switch{gap:6px}
  .level-switch button{padding:8px 10px;min-height:58px}
  .level-switch button strong{font-size:1rem}
  .level-switch button span{font-size:.7rem}
  .hub-tabs{min-width:100%}
  .hub-tabs button{font-size:.88rem;padding:6px 4px}
  .real-grid{grid-template-columns:minmax(0,1fr)}
  .mock-bar{font-size:.85rem}
  .mock-bar>span{padding:4px 10px}
  .palette{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));padding:8px}
  .reg-table thead{display:none}
  .reg-table,.reg-table tbody,.reg-table tr,.reg-table th,.reg-table td{display:block;width:100%}
  .reg-table tr{border-bottom:1px solid var(--line);padding:6px 0}
  .reg-table tbody tr:last-child{border-bottom:0}
  .reg-table th,.reg-table td{border:0;padding:4px 12px}
  .reg-table tbody th{white-space:normal;font-size:1rem}
  .reg-table td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:750;color:var(--muted);letter-spacing:.02em}
  .path-steps li{padding:14px}
}

/* Equal tiles. practice.css lays card grids out with align-items:start, so each
   card was only as tall as its own text (ja/en titles and goals wrap to
   different line counts) and the buttons ended up at different heights.
   Every card grid on the hub now has equal columns and equal rows (the tallest
   card sets the row height for the whole grid), and cards are flex columns
   whose score bar and buttons are pushed to the bottom. When a drill card's
   "Methods and examples" panel is open, rows size to content again so the
   other rows do not grow with it. */
.course-grid,.lesson-grid,.fact-grid,.archive-list{align-items:stretch;grid-auto-rows:1fr}
.course-grid:has(.topic-guide[open]){grid-auto-rows:auto}
.course-card{display:flex;flex-direction:column;height:100%}
.course-card>.icon{flex:none}
.course-card>.best{margin-top:auto;padding-top:12px}
.course-card>.card-actions{margin-top:14px}
.course-card>.topic-guide{margin-top:14px}
.lesson-card{height:100%}
.lesson-card>.icon,.fact>.icon{flex:none}
.fact{height:100%}
.archive-list li{display:flex;flex-direction:column;justify-content:space-between}
.level-switch{align-items:stretch}
.level-switch button{justify-content:flex-start;height:100%}

/* Account binding (AmcProgressStore): sign-in prompt / sync status. */
.amc-account{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);text-align:left}
.amc-account>div{flex:1;min-width:0}
.amc-account p{margin:0;line-height:1.5}
.amc-account-icon{flex:none;font-size:1.4rem}
.amc-account-title{font-weight:800;color:var(--text)}
.amc-account-status{color:var(--text-2);font-size:.92rem}
.amc-account-note{margin-top:4px!important;color:var(--muted);font-size:.85rem}
.amc-account.is-guest{border-color:var(--sun-line);background:linear-gradient(135deg,#fffaf0,#fff4dc)}
.amc-account.is-user{border-color:#8cc9c0;background:linear-gradient(135deg,#f3fcfa,#e9f7f4)}
.amc-account.is-user[data-sync="retrying"],.amc-account.is-user[data-sync="offline"],.amc-account.is-user[data-sync="expired"]{border-color:var(--sun-line);background:#fff8ec}
.amc-account button{flex:none;white-space:normal}
.save-note{margin:14px 0}
.save-note .amc-account{margin-top:0}
.mock-history{margin:6px 0 0;font-size:.85rem}
@media (max-width:560px){.amc-account{flex-wrap:wrap}.amc-account button{width:100%}}
#auth-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.88);padding:16px}
#auth-modal.hidden,#auth-modal .hidden{display:none!important}
#auth-modal section{width:min(100%,460px);padding:24px;border-radius:24px;background:#fffdf6;color:#243b35}
#auth-modal h1{font-size:1.6rem}
#auth-modal p{font-size:14px}
#auth-modal button{width:100%;margin:6px 0}
#auth-turnstile{display:flex;justify-content:center;margin-top:16px}
#auth-error{padding:10px;color:#a03d29}
#auth-modal .auth-benefit-card span{color:#475569}
#auth-modal .auth-privacy-link{color:#3f51b5}