/* ============================================================
   QuizHub — phone & tablet layer (shared by every design)
   ============================================================ */
.tabbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
h1, h2, h3, .title, .tl-title, .q-prompt { overflow-wrap: anywhere; }

@media (max-width: 960px) {
  /* bottom tab bar */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; inset: auto 0 0 0; z-index: 35;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px);
    border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgb(15 18 34 / .06);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 50px; padding: .2rem 0; border: 0; background: none; box-shadow: none; border-radius: 12px;
    font-size: .68rem; font-weight: 650; color: var(--muted);
  }
  .tabbar a svg, .tabbar button svg { width: 22px; height: 22px; }
  .tabbar a:hover, .tabbar button:hover { text-decoration: none; background: none; }
  .tabbar .active { color: var(--primary); }
  .tabbar .tab-fab {
    justify-self: center; width: 54px; height: 54px; min-height: 0; border-radius: 18px; margin-top: -1.4rem;
    background: var(--grad, var(--primary)); color: var(--primary-ink, #fff); box-shadow: 0 10px 24px -8px var(--primary);
  }
  .tabbar .tab-fab svg { width: 24px; height: 24px; }
  main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important; }
  #toasts { inset-inline: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  /* no tab bar while taking an exam */
  .app-layout:has(.take-top) .tabbar { display: none; }
  .app-layout:has(.take-top) main { padding-bottom: 2rem !important; }
  /* editor save bar sits above the tab bar */
  .sticky-bar { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  /* iOS zooms into inputs smaller than 16px */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=search], textarea, select { font-size: 16px; padding: .7rem .85rem; }
  button, .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; padding: .4rem .75rem; }
  .icon-btn { min-height: 0; }

  main { padding: 1.1rem 1rem calc(6.5rem + env(safe-area-inset-bottom)) !important; }
  .take-top { margin: -1.1rem -1rem 1rem; }
  .mobile-bar { padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top)); }

  /* headers & action rows */
  .page-head { flex-direction: column; align-items: stretch; gap: .9rem; margin-bottom: 1.2rem; }
  .page-head h1 { font-size: 1.5rem; }
  .page-head > .row { width: 100%; }
  .page-head > .row > .btn, .page-head > .row > button { flex: 1 1 auto; }
  .section-title { margin-top: 1.5rem; }
  .card { padding: 1.05rem; }
  .row { gap: .5rem; }

  /* dashboard hero */
  .hero { padding: 1.4rem 1.2rem; border-radius: 20px; }
  .hero h1 { font-size: 1.55rem; }
  .hero > .row { flex-direction: column; align-items: stretch; }
  .hero > .row > .row { width: 100%; }
  .hero > .row > .row > button { flex: 1; }
  .hero .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero .hero-stats strong { font-size: 1.45rem; }

  /* hub banner & tabs */
  .hub-banner { padding: 1.3rem 1.15rem; border-radius: 18px; }
  .hub-banner h1 { font-size: 1.5rem; }
  .hub-banner .row.between { flex-direction: column; align-items: stretch; }
  .hub-banner .row.between > .row > .btn { flex: 1; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex-shrink: 0; }

  /* lists */
  .list-item { padding: .9rem 1rem; gap: .75rem; flex-wrap: wrap; }
  .list-item .grow { flex-basis: calc(100% - 60px); }
  .list-item > .chev { display: none; }
  .exam-icon { width: 38px; height: 38px; }

  /* stats */
  .stats { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .stat { padding: .85rem .95rem; }
  .stat .value { font-size: 1.4rem; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }

  /* tables → stacked cards */
  table.stackable thead { display: none; }
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable td { display: block; width: 100%; }
  table.stackable tr { padding: .8rem 1rem; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.25rem; }
  table.stackable td:has(button, .btn, select) { grid-column: 1 / -1; }
  table.stackable td:nth-child(2) { grid-column: 1 / -1; }
  table.stackable tr:last-child { border-bottom: 0; }
  table.stackable td { border: 0; padding: .22rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: end !important; min-width: 0 !important; }
  table.stackable td[data-label]::before { content: attr(data-label); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: start; flex-shrink: 0; }
  table.stackable td:empty { display: none; }
  table.stackable td > .row { justify-content: flex-end; }
  table.stackable td.rank { width: auto; }
  table.no-head td { padding: .7rem .9rem; }
  .table-wrap { overflow: visible; }

  /* leaderboards → one compact row per person: rank · name · % (details underneath) */
  table.ranked thead { display: none; }
  table.ranked, table.ranked tbody { display: block; width: 100%; }
  table.ranked tr {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .2rem;
    padding: .8rem 1rem .8rem 3.6rem; border-bottom: 1px solid var(--border);
  }
  [dir=rtl] table.ranked tr { padding: .8rem 3.6rem .8rem 1rem; }
  table.ranked tr:last-child { border-bottom: 0; }
  table.ranked tr.me { background: var(--primary-soft); }
  table.ranked tr.me td { background: none; }
  table.ranked td { display: block; border: 0; padding: 0; min-width: 0 !important; background: none; }
  table.ranked td.rank {
    position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%);
    width: 2rem; text-align: center; font-size: 1.05rem; font-weight: 800;
  }
  table.ranked td.rank-1, table.ranked td.rank-2, table.ranked td.rank-3 { font-size: 1.5rem; }
  table.ranked td:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; }
  table.ranked td:nth-child(2) strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.ranked td:nth-child(2) .row { flex-wrap: nowrap; min-width: 0; }
  table.ranked td:nth-child(2) .avatar { width: 32px; height: 32px; font-size: .7rem; flex-shrink: 0; }
  table.ranked td.key { order: 2; flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; }
  table.ranked td.key .bar { display: none; }
  table.ranked td.key .row { gap: 0; }
  /* line break, then the remaining details as small "Label value" chips */
  table.ranked tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  table.ranked td:not(.rank):not(.key):not(.act):not(:nth-child(2)) { order: 4; font-size: .8rem; color: var(--muted); unicode-bidi: isolate; }
  table.ranked td:not(.rank):not(.key):not(.act):not(:nth-child(2))[data-label]::before {
    content: attr(data-label) " "; font-weight: 600; color: var(--text-2, var(--muted));
  }
  table.ranked td.act { order: 5; margin-inline-start: auto; }
  table.ranked td:empty { display: none; }

  /* code box & settings */
  .code-box { flex-wrap: wrap; }
  .code-box .code { font-size: 1.25rem; width: 100%; }
  .inline-form { flex-direction: column; }
  pre.block { font-size: .72rem; }

  /* modals become bottom sheets */
  .modal-back { place-items: end center; padding: 0; }
  .modal, .modal.wide { max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh; padding: 1.3rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom)); animation: sheet .22s ease; }
  .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: -.4rem auto .9rem; }
  .modal .actions { flex-direction: column-reverse; }
  .modal .actions button { width: 100%; }
  .modal .grid-2 { grid-template-columns: 1fr; }
  @keyframes sheet { from { transform: translateY(40px); opacity: .4; } }

  /* exam editor */
  .q-edit { padding: .9rem; }
  .q-edit .q-head { gap: .35rem; }
  .q-edit .q-head select { flex: 1 1 140px; }
  .q-edit .q-head label { display: none; }
  .add-bar { justify-content: stretch; }
  .add-bar > button { flex: 1 1 45%; }
  .add-bar > span { width: 100%; text-align: center; }
  .sticky-bar { flex-wrap: wrap; }
  .sticky-bar > * { flex: 1; }
  .sticky-bar #summary { flex: 1 1 100%; text-align: center; margin: 0 !important; }

  /* taking an exam */
  .take-top { gap: .6rem; flex-wrap: wrap; }
  .take-top .t-title { flex-basis: 100%; order: -1; }
  .take-top .timer-chip { flex: 1; justify-content: center; }
  .take-top > button { flex: 1; }
  .take-layout { display: flex; flex-direction: column; }
  .take-side { display: block !important; position: static; order: -1; }
  .take-side .card { padding: .7rem .8rem; }
  .take-side h4, .take-side .legend { display: none; }
  .qnav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .qnav::-webkit-scrollbar { display: none; }
  .qnav a { flex: 0 0 40px; height: 40px; }
  .q-card { padding: 1.1rem; }
  .q-card .q-prompt { font-size: 1.05rem; }
  .choice { padding: .85rem .9rem; min-height: 52px; }

  /* results */
  .score-hero { flex-direction: column; text-align: center; gap: 1.2rem; }
  .score-hero .row { justify-content: center; }
  .podium { gap: .5rem; }
  .podium .card { padding: 1rem .5rem; }
  .podium strong { font-size: .85rem; }
  .grid { grid-template-columns: 1fr; }

  /* auth */
  .auth-form-side { padding: calc(1.5rem + env(safe-area-inset-top)) 1.2rem 2rem; place-items: start center; }
  .auth-card { padding-top: 1rem; }
}

@media (max-width: 380px) {
  .stats, .info-grid { grid-template-columns: 1fr 1fr; }
  .hero .hero-stats { grid-template-columns: 1fr 1fr; }
  .tabbar a span, .tabbar button span { font-size: .62rem; }
}
[data-theme-toggle] svg { width: 18px; height: 18px; flex-shrink: 0; }