.area-dashboard:not(.page-question) { --under-h: 64px; }
.main { max-width: 640px; padding: 1.25rem 1rem 1.5rem; }
.site-header { position: sticky; top: 0; z-index: 30; padding: .6rem 1rem; }
.site-header .mode-switch__btn span { display: none; }
.q-text { font-size: 1.25rem; }
.choice { font-size: 1.15rem; min-height: 3.75rem; }
/* Phones: plane leaves room for its tools and the check button below it. */
.page-question { --q-chrome: 37rem; }
.page-question .plane-wrap { width: min(100%, calc(100dvh - var(--q-chrome))); min-width: 15rem; }
.page-question .q-answer > p.muted.small { display: none; }
.page-question .plane-tools { gap: .5rem; flex-wrap: nowrap; }
.page-question .plane-slots { flex-direction: row; min-width: 0; }
.quad-board__axis--x { right: .35rem; top: calc(50% - 1.3rem); }
/* Only one bar may stick to the top: during a question that is the question bar, not the site header. */
.page-question .site-header { position: static; }
.page-question .main { padding-left: 1rem; }
.settings-row { padding: 1rem; }
.settings-row .segmented { justify-content: flex-start; }

/* ===== Phone question screen: the plane leads, everything else stays compact ===== */
.page-question { --q-chrome: 22rem; --q-check-h: 4.25rem; }
.page-question .site-header, .page-question .fball { display: none; }
.page-question .main { padding: .25rem .75rem calc(var(--q-check-h) + 1rem); }
/* Geri bildirim paneli açıkken altta kalan şıklara kaydırılabilsin. */
.page-question.has-sheet .main { padding-bottom: calc(var(--sheet-h, 0px) + 1rem); justify-content: flex-start; }
.page-question .q-top { gap: .45rem; min-height: 3rem; }
.page-question .q-top .timer { width: 2.6rem; height: 2.6rem; font-size: .8rem; }
.page-question [data-q-body] .q-step { display: none; }
.page-question .q-text { font-size: 1.05rem; line-height: 1.35; }
.page-question .q-layout, .page-question .q-answer { gap: .55rem; }
.page-question .plane-wrap { width: min(100%, calc(100dvh - var(--q-chrome))); min-width: 14rem; }

/* Given data sits small, right under the plane */
.q-data { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.q-data .pt-row { gap: .4rem; justify-content: center; }
.page-question .pt-chip, .page-question .pt-chip--big { font-size: .95rem; padding: .2rem .6rem; }
.q-data .eq-box { width: 100%; font-size: 1.05rem; padding: .35rem .8rem; }
.q-data .formula { padding: .35rem .6rem; font-size: .8rem; }

/* Plane tools: point slots stacked on the left, a compact cross pad and the clear button beside them */
.page-question .plane-tools { flex-direction: row; align-items: center; justify-content: center; gap: .7rem; flex-wrap: nowrap; }
.page-question .plane-tools--slots { justify-content: space-between; }
.page-question .plane-slots { flex: 1; flex-direction: column; gap: .3rem; min-width: 0; }
.page-question .plane-slots .btn { min-height: 2.25rem; height: 2.25rem; padding: .2em .5em; font-size: .9rem; }
.page-question .plane-dpad { --d: 2.2rem; }
.page-question .plane-clear { width: 2.6rem; min-height: 2.6rem; }

/* Check button pinned to the bottom, always reachable */
.page-question .q-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.page-question .q-actions .btn { min-height: 3rem; }


/* Pen: one round key left of the check button. A tool opens the tray above the bar: tools with clear and close
   on top, the colour caps under them. */
.page-question .draw-bar { top: auto; bottom: calc(.6rem + env(safe-area-inset-bottom) + .25rem); left: .75rem; transform: none; flex-direction: row; padding: 0; background: transparent; border: 0; box-shadow: none; }
.page-question .draw-bar:not(.is-open) .draw-bar__tools { padding: 0; background: transparent; box-shadow: none; }
.page-question .draw-bar:not(.is-open) .draw-bar__tools > :not([data-draw-tool="pen"]),
.page-question .draw-bar:not(.is-open) .draw-bar__colors,
.page-question .draw-bar:not(.is-open) .draw-bar__actions { display: none; }
.page-question .draw-bar:not(.is-open) .draw-bar__tool { width: 2.75rem; height: 2.75rem; min-height: 0; border-radius: 999px; }
.page-question .draw-bar:not(.is-open) .draw-bar__tools .draw-bar__tool { background: var(--surface); border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
.page-question .draw-bar.is-open { right: .75rem; bottom: calc(var(--q-check-h) + .6rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tools . actions" "colors colors colors"; gap: .5rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.4rem; box-shadow: 0 5px 0 var(--line), 0 12px 28px rgba(15, 23, 42, .2); }
.page-question .draw-bar.is-open .draw-bar__tools { grid-area: tools; flex-direction: row; }
.page-question .draw-bar.is-open .draw-bar__actions { grid-area: actions; flex-direction: row; }
.page-question .draw-bar.is-open .draw-bar__colors { grid-area: colors; flex-direction: row; gap: .45rem; padding: .1rem .1rem .2rem; }
.page-question .draw-bar.is-open .draw-bar__tool { width: 2.6rem; height: 2.6rem; min-height: 0; }
/* Colours: four wide paint blocks sharing the row; the chosen one lifts, gets a ring and a tick. */
.page-question .draw-bar__color { flex: 1; width: auto; height: 2.75rem; border-radius: .95rem; }
.page-question .draw-swatch { position: relative; width: 100%; height: 100%; border-radius: .95rem; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 1px var(--line-strong); }
.page-question .draw-swatch--1 { color: var(--bg); }
.page-question .draw-bar__color[aria-pressed="true"] .draw-swatch { transform: translateY(-2px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 2.5px var(--surface), 0 0 0 5px var(--ink); }
.page-question .draw-bar__color[aria-pressed="true"] .draw-swatch::after { content: ""; position: absolute; left: 50%; top: 45%; width: .42rem; height: .8rem; border: solid currentColor; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.page-question.has-sheet .draw-bar:not(.is-open) { display: none; }
.page-question.has-sheet .draw-bar.is-open { bottom: calc(var(--sheet-h, 0px) + .6rem); }

/* Results: equal full-width actions */
.result-actions { grid-template-columns: 1fr; }
.page-question .card--center { padding: 1.5rem 1.1rem; }

/* Pen lives in the bottom bar, left of the check button; opening it lifts the palette above the bar. */
.page-question.has-pen .q-actions { padding-left: calc(.75rem + 2.5rem + .6rem + .6rem); }

/* Choice questions with a plane: slightly smaller plane, tighter choices */
.page-question:has(.choice-grid) { --q-chrome: 25rem; }
.page-question .choice { min-height: 2.9rem; font-size: 1.05rem; }
.page-question .choice--word { flex-direction: row; gap: .45rem; font-size: .95rem; }
.page-question .choice--word .icon { width: 1.2rem; height: 1.2rem; }
.page-question .choice-grid { gap: .5rem; }
.feedback__inner .btn { width: 100%; }

/* Top bar must never be wider than the phone: one rounded row, the progress takes whatever room is left. */
.page-question { --q-chrome: 24rem; }
.page-question:has(.choice-grid) { --q-chrome: 27rem; }
.page-question:has(.frac-input) { --q-chrome: 30rem; }
.page-question:has(.plane-tools) { --q-chrome: 28.5rem; }
.page-question .feedback__inner { flex-wrap: wrap; }
.page-question .q-top { flex-wrap: nowrap; min-width: 0; gap: .3rem; padding: .35rem .45rem; border-radius: 20px; }
.page-question .q-top > * { flex-shrink: 0; }
.page-question [data-q-mode] { display: none; }
.page-question .q-top .q-step { font-size: .72rem; letter-spacing: .02em; }
.page-question .q-top .progress { flex: 1 1 0; min-width: 1.75rem; height: 12px; padding: 2px; }
/* Only numbers and icons on a phone: "7/10" and a flame for a hard question (the words stay for screen readers). */
.page-question .q-step__word,
.page-question .q-hard__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-question .q-top .badge--hard { padding: .2em .35em; }
/* Very narrow phones: the "7/10" counter already tells the progress, so the bar steps aside. */
@media (max-width: 359px) {
  .page-question .q-top { gap: .2rem; padding-inline: .3rem; }
  .page-question .q-top .progress { display: none; }
}
.page-question .q-top .progress__bar::before { left: 4px; right: 4px; top: 1px; height: 2px; }
.page-question .q-top .badge { white-space: nowrap; padding: .15em .5em; font-size: .72rem; }
.page-question .q-top .btn--icon { width: 2.4rem; min-height: 2.4rem; height: 2.4rem; }
.page-question [data-q-finish] { min-height: 2.4rem; padding: 0 .6rem; }
.page-question .q-finish__label { display: none; }
.page-question .q-top .timer { width: 2.4rem; height: 2.4rem; font-size: .75rem; }
.page-question .feedback__text { flex: 1 1 10rem; }

/* Results fit one phone screen so the bonus flights stay visible */
.page-question .result-card { gap: .45rem; padding: 1rem .9rem; }
.page-question .result-trophy-slot { width: 5.5rem; height: 5.5rem; }
.page-question .trophy-flyer { width: 5.5rem; }
.page-question .result-card .h1 { font-size: 1.5rem; }
.page-question .result-badges { min-height: 2.8rem; }
.page-question .grade { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; border-width: 3px; }
.page-question .result-total { font-size: 2.8rem; }
.page-question .result-breakdown { gap: .3rem; }
.page-question .bonus-row { padding: .35rem .8rem; font-size: .92rem; }
.page-question .main:has(.result-card) { padding-bottom: 1rem; }
.page-question .result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.page-question .result-actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.page-question .result-actions .btn { min-height: 2.9rem; padding: .4rem .6rem; font-size: .92rem; gap: .35rem; white-space: normal; line-height: 1.15; }
.page-question .result-actions--more { margin-top: .15rem; padding-top: .5rem; }
/* Two half-width main buttons: without the icon "Yeniden başla" / "Derslere dön" fit on one line. */
.page-question .result-actions:not(.result-actions--more) .btn .icon { display: none; }
.page-question .result-stats { margin: 0; }
.topic-random-row { flex-direction: column; }
.topic-random-row>.topic-random:first-child { flex: none; }
.level-pick { grid-template-columns: 1fr; }
.level-card { min-height: 5.5rem; flex-direction: row; justify-content: flex-start; gap: 1rem; padding: 1rem 1.25rem; }
.level-card__mult { margin-left: auto; }

.page-home--m { --under-h: 5.5rem; }
.page-home--m .main > * + * { margin-top: 2.25rem; }
.mh-hero { display: flex; flex-direction: column; gap: .9rem; }
.mh-hero__badge { align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: var(--good-soft); color: var(--good-ink); font-size: .8rem; font-weight: 800; }
.mh-hero__title { margin: 0; font-size: 2.2rem; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.mh-hero__title em { display: block; font-style: normal; color: var(--primary); }
.mh-hero__lead { margin: 0; color: var(--muted); font-size: 1.05rem; }
.mh-plane { position: relative; width: min(100%, 20rem); margin: .25rem auto 0; }
.mh-plane .pt-chip, .mh-plane__eq { position: absolute; padding: .25rem .6rem; font-size: .85rem; box-shadow: 0 3px 0 var(--edge); animation: mh-float 3.2s ease-in-out infinite; }
.mh-plane__a { left: -.6rem; bottom: 1.6rem; }
.mh-plane__b { right: -.6rem; top: 1.4rem; animation-delay: -1.1s; }
.mh-plane__eq { right: -.6rem; bottom: -.6rem; min-height: 0; animation-delay: -2.2s; }
@keyframes mh-float { 50% { transform: translateY(-5px); } }
.mh-section { display: flex; flex-direction: column; gap: .85rem; }
.mh-section__title { margin: 0; font-size: 1.35rem; font-weight: 900; }
.mh-modes { display: flex; gap: .8rem; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.mh-modes::-webkit-scrollbar { display: none; }
.mh-mode { --tone: var(--primary); --tone-edge: var(--primary-edge); flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border-radius: 22px; background: var(--tone); color: #fff; box-shadow: 0 5px 0 var(--tone-edge); }
.mh-mode--good { --tone: var(--good); --tone-edge: var(--good-edge); }
.mh-mode--purple { --tone: var(--purple); --tone-edge: var(--purple-edge); }
.mh-mode .h3, .mh-mode p { margin: 0; }
.mh-mode__icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: .4rem; border-radius: 14px; background: rgba(255, 255, 255, .22); }
.mh-mode__meta { font-size: .8rem; font-weight: 800; opacity: .85; }
.mh-steps { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.mh-steps li { display: flex; gap: .8rem; align-items: flex-start; }
.mh-steps .h3, .mh-steps p { margin: 0; }
.mh-steps__num { width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.mh-perks { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mh-perk { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--edge); font-weight: 800; font-size: .92rem; }
.mh-perk .icon { flex: none; color: var(--warn); }
.mh-topic { display: flex; flex-direction: column; gap: .4rem; }
.mh-topic .chip-list { margin: 0; padding: 0; }
.mh-about { display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--edge); color: inherit; text-decoration: none; }
.mh-about > .icon:last-child { margin-left: auto; color: var(--muted); }
.mh-about__icon { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.mh-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .6rem; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.mh-dock .btn { flex: 1; min-height: 3.2rem; padding-inline: .8rem; white-space: nowrap; font-size: 1rem; }
.mh-dock__main { flex: 1.6 !important; }

.page-question .feedback__actions { flex: 1 1 100%; }
.page-question .feedback__actions [data-next] { flex: 1; }
.page-learn-player .learn-steps { position: sticky; bottom: calc(var(--under-h) + .5rem); z-index: 5; gap: .5rem; padding: .9rem 1rem; box-shadow: 0 6px 0 var(--edge), 0 12px 28px rgba(30, 42, 71, .16); }
.page-learn-player .learn-steps__text { font-size: 1rem; }
.page-learn-player .learn-controls .btn--icon { width: 2.8rem; height: 2.8rem; min-height: 0; }
/* Phones: the floating step card stays small so the plane and answers above it remain visible:
   one row of controls with "another example" as an icon, a smaller formula. */
.page-learn-player .learn-bar { flex-wrap: nowrap; justify-content: space-between; }
.page-learn-player .learn-another { width: 2.8rem; height: 2.8rem; min-height: 0; padding: 0; justify-content: center; }
.page-learn-player .learn-another span { display: none; }
.page-learn-player .learn-steps__math { font-size: .95rem; padding: .45rem .8rem; }
.page-learn-player .learn-steps__head { min-height: 0; }
.page-learn-player .plane-wrap, .page-learn-player .choice-grid, .page-learn-player .quad-board { scroll-margin-top: 4.5rem; }
.feedback__inner .feedback__mark { width: 3.75rem; }

/* Connection loss: centred message, retry pinned at the bottom */
.m-conn-page .site-footer { display: none; }
.m-conn-page .main { display: flex; flex-direction: column; min-height: calc(100dvh - 4.5rem); padding: 1.25rem 16px calc(1.25rem + env(safe-area-inset-bottom)); }
.m-conn { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 26rem; margin: 0 auto; }
.m-conn__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; }
.m-conn__center .h1 { margin: .5rem 0 0; font-size: 1.75rem; }
.m-conn__center p { margin: 0; }
.m-conn__center .muted { max-width: 22rem; line-height: 1.55; }
.m-conn .conn__icon { width: 6.5rem; height: 6.5rem; background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); box-shadow: 0 5px 0 var(--warn-edge); }
.m-conn .conn__icon .icon { width: 3rem; height: 3rem; opacity: 1; }
.m-conn .conn__ring { border-color: var(--warn); }
.m-conn .conn__status { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 999px; background: var(--surface-2); font-size: .9rem; font-weight: 800; color: var(--muted); opacity: 1; }
.m-conn .conn__status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--warn); animation: conn-blink 1.2s ease-in-out infinite; }
@keyframes conn-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .m-conn .conn__status::before { animation: none; } }
.more-settings__head { padding: 1rem 1.1rem; }
.more-settings__body { padding: 0 1.1rem 1.1rem; }
.more-settings.settings-panel .more-settings__body { padding-top: 1.1rem; }
.more-settings__row { flex-direction: column; align-items: stretch; }
.more-settings__row .btn { width: 100%; }
/* A row that only holds a switch keeps it beside the text, as on desktop: five privacy switches fit on one screen. */
.more-settings__row:has(> .big-toggle) { flex-direction: row; align-items: center; padding: .8rem .9rem; }

/* Teacher class pages: numbers scroll sideways, cards stack, students as a compact list. */
.page-tclass .main, .page-tclasses .main { max-width: 640px; gap: 1rem; padding-inline: 1rem; }
.tclass, .tclasses, .tclass__main, .tclass__side, .tnote__compose, .tnote__side, .tset-col { gap: 1rem; }
.tclass-head { align-items: stretch; }
.tclass-head__actions { width: 100%; }
.tclass-head__actions .btn:not(.btn--icon) { flex: 1; }
.teach-kpis { display: flex; gap: .6rem; margin-inline: -1rem; padding: 0 1rem .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; --fade-l: 0rem; --fade-r: 2.5rem; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.teach-kpis::-webkit-scrollbar { display: none; }
.teach-kpis.is-scrolled { --fade-l: 2rem; }
.teach-kpis.is-end { --fade-r: 0rem; }
.teach-kpis::after { content: ''; flex: 0 0 .1rem; }
.kpi { flex: 0 0 auto; padding: .6rem .85rem; gap: .6rem; scroll-snap-align: start; }
.kpi__icon { width: 2.3rem; height: 2.3rem; border-radius: 13px; }
.kpi__icon .icon { width: 1.25rem; height: 1.25rem; }
.kpi__value { font-size: 1.25rem; }
.tclass__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.tnote, .tset-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* Phones: event, join code, students, then notices. */
.tclass__main, .tclass__side { display: contents; }
.tclass__main > .event-band { order: -2; }
.tclass-code { order: -1; }
.tclass-notices { order: 1; }
.teach-students { padding: 1rem; }
.teach-filter { width: 100%; margin-left: 0; }
.teach-filter .pill-tabs__tab { flex: 1; }
.student-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.student-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .1rem; align-items: center; justify-items: start; padding: .6rem .8rem; border-radius: 18px; text-align: left; }
.student-card__top { grid-row: 1 / span 3; }
.student-card > :not(.student-card__top) { grid-column: 2; }
.event-band .release-actions .btn { flex: 1 1 auto; }
.tclass-code { padding: 1rem; }
/* Class overview on phones: the code alone, centred; copy/project buttons stay on larger screens. */
.tclass__side .tclass-code { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tclass__side .tclass-code__label { justify-content: center; }
.tclass__side .tclass-code__actions { display: none; }
.tclasses__grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.tclass-card { --tc-pad: 1rem; }
.tclass-card--new { min-height: 5.5rem; flex-direction: row; gap: .6rem; }
.tclass-card--new .icon { width: 1.6rem; height: 1.6rem; }
.tclass-card__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tclass-card__stat--code { grid-column: 1 / -1; }
.tnote__mode { padding: .85rem; }
.tnote__mode .muted.small { display: none; }
.tnote__item-actions { justify-content: flex-start; }

/* Event wizard on phones: one column, start above end. */
.when__grid { grid-template-columns: minmax(0, 1fr); }
.when__arrow { transform: rotate(90deg); }
.when__days { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-teacher-event .main { max-width: 640px; }
.teach-sort { width: 100%; margin-left: 0; }
.teach-sort .pill-tabs__tab { flex: 1; padding-inline: .4rem; }
.quick-start__list { grid-template-columns: minmax(0, 1fr); }
.teach-home__classes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.step-flow .wizard__step:not(.is-active) .wizard__label { display: none; }
.step-flow .wizard__step.is-active { flex: 3; }
.guide__action { width: 100%; margin-left: 0; }
.guide__action .btn { width: 100%; justify-content: center; }

/* Event banner on phones: topics, facts and countdown centred. */
.event-hero .event-topics, .event-hero .event-facts { justify-content: center; }
.event-hero .event-hero__bottom { align-items: center; }
.event-hero .event-hero__bottom .event-clock-box { align-self: center; justify-content: center; }

/* ===== Teacher pages on phones ===== */
/* One tab bar for the class pages instead of the header buttons. */
.tclass-head__actions { display: none; }
.tclass-head { gap: .4rem; }
.tclass-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; padding: .3rem; border-radius: 18px; background: var(--surface-2); }
.tclass-tabs__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.4rem; padding: .35rem; border-radius: 14px; color: var(--muted); font-weight: 900; font-size: .85rem; text-decoration: none; }
.tclass-tabs__tab .icon { width: 1.35rem; height: 1.35rem; }
.tclass-tabs__tab.is-active { background: var(--surface); color: var(--primary); box-shadow: 0 3px 0 var(--edge); }
.tclass-tabs__tab:active { transform: translateY(2px); }

/* Numbers as a tidy 3 + 2 grid instead of a sideways scroller. */
.teach-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-inline: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.teach-kpis::after { content: none; }
.teach-kpis .kpi { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .6rem .7rem; }
.teach-kpis .kpi:nth-child(n+4) { grid-column: span 3; }
.teach-kpis .kpi__icon { width: 1.9rem; height: 1.9rem; border-radius: 11px; }
.teach-kpis .kpi__icon .icon { width: 1.05rem; height: 1.05rem; }
.teach-kpis .kpi__value { font-size: 1.15rem; }
.teach-kpis .kpi__label { font-size: .72rem; max-width: 100%; }

/* Running event: two even columns, end button full width; projection belongs to the board. */
.event-band .release-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.event-band .release-actions .btn { min-width: 0; padding-inline: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.event-band .release-actions > :first-child { grid-column: auto; }
.event-band .release-actions > .btn--warn { grid-column: 1 / -1; order: 9; }
.event-band__project, .tclass-code__project { display: none !important; }
.event-band__top { flex-wrap: wrap; row-gap: .2rem; }

/* Join code: big code on the left, copy and share stacked on the right. */
.tclass__side .tclass-code { display: grid; align-items: center; text-align: left; }
.tclass__side .tclass-code__label { justify-content: flex-start; }
.tclass__side .tclass-code__actions { display: flex; gap: .4rem; }

/* Sort tabs: one row that scrolls if it must. */
.teach-sort { overflow-x: auto; scrollbar-width: none; }
.teach-sort .pill-tabs__tab { flex: 1 0 auto; white-space: nowrap; font-size: .85rem; }

/* Notices: text on its own line, time and banner tag under it. */
.notice-list li { flex-direction: column; gap: .3rem; }
.notice-list__meta { justify-content: flex-start; }

/* Class picker: the header button is enough; three stats in one row. */
.tclass-card--new { display: none; }
.tclass-card__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.tclass-card__stat--code { grid-column: auto; }

/* Settings: students before deleting the class. */
.tset-grid { display: flex; flex-direction: column; }
.tset-col { display: contents; }
.tset--danger { order: 9; }

/* Step flows and the event wizard: the active step keeps its name, Back / Next stay in reach above the tab bar. */
.wizard { padding: 1rem; gap: 1rem; }
.wizard__steps .wizard__step.is-active .wizard__label { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard__steps .wizard__step { min-width: 0; }
.wizard__steps .wizard__step:not(.is-active) { flex: 0 0 auto; }
.wizard__steps .wizard__step.is-active { flex: 1 1 auto; }
/* Small phones: tighter steps leave room for the active step's name. */
@media (max-width: 420px) { .wizard__steps { gap: .3rem; } .wizard__steps .wizard__step { padding: .35rem; } .wizard__steps .wizard__step.is-active { padding-right: .6rem; } }
.wizard__nav { position: sticky; bottom: calc(var(--under-h) + .5rem); z-index: 5; flex-wrap: wrap; gap: .5rem; margin: 0 -.4rem; padding: .5rem; border-radius: 20px; background: var(--surface); box-shadow: 0 -2px 0 var(--line), 0 8px 20px rgba(0, 0, 0, .25); }
.wizard__nav > .spacer { display: none; }
.wizard__nav .wizard__msg { order: -1; flex: 1 0 100%; text-align: center; }
.wizard__nav .wizard__msg:empty { display: none; }
.wizard__nav .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.wizard__nav .btn[hidden] { display: none; }
.wizard__nav .btn--primary, .wizard__nav .btn--good { flex: 2 1 0; }
.step-flow__panel { min-height: 0; }
.step-flow__title { font-size: 1.3rem; }
/* The event summary shows only what is picked, as small rows. */
.wizard__aside { padding: .6rem; gap: .35rem; }
.wizard__aside .wizard-sum__row.is-empty { display: none; }
.wizard__aside .wizard-sum__row { padding: .4rem .55rem; font-size: .9rem; }
.wizard__aside:not(:has(.wizard-sum__row:not(.is-empty))) { display: none; }
/* Hour : minute on one line. */
.when__clock { flex-wrap: nowrap; gap: .25rem; }
.when__stepper { gap: .1rem; padding: .2rem; }
.when__stepper .when__step { width: 2.5rem; height: 2.5rem; }
.when__value { min-width: 2.3rem; font-size: 1.5rem; }
/* Kind cards: picture on the left, words on the right, so all three fit on one screen. */
.pick-card.pick-card--kind { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; row-gap: .1rem; align-items: center; justify-items: start; text-align: left; padding: .8rem 1rem; }
.pick-card.pick-card--kind .pick-card__art { grid-row: 1 / span 2; width: 2.8rem; height: 2.8rem; }
.wizard__nav .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; padding-inline: .6rem; }

/* ---------- Public pages on phones (moved here from the never-loaded css/pages/mobile.css) ---------- */
.m-header { gap: .6rem; padding: .55rem .75rem .55rem 1rem; padding-top: max(.55rem, env(safe-area-inset-top)); }
.m-header .brand__full { display: none; }
.m-header__menu { width: 2.75rem; min-height: 2.75rem; height: 2.75rem; border-radius: 14px; }

/* Sign-in screens: one full-width column with a centred heading; no invisible card padding on top of the page's. */
.m-auth-page .main { display: flex; flex-direction: column; padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.m-auth-page .site-footer { display: none; }
.m-auth { flex: 1; width: 100%; margin: 0 auto; padding: 0; gap: 1.2rem; }
.m-back { margin-bottom: 0; width: 2.75rem; height: 2.75rem; }
.m-back .icon { width: 1.25rem; height: 1.25rem; }
.m-auth .auth-head { flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.m-auth .auth-head__texts { gap: .35rem; }
.m-auth .auth-head .h1 { font-size: 1.6rem; line-height: 1.2; }
.m-auth .auth-head p.muted { max-width: 22rem; margin-inline: auto; }
.m-auth .auth-head__icon { width: 3.75rem; height: 3.75rem; margin-bottom: .3rem; border-radius: 20px; background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-edge); }
.m-auth .auth-head__icon .icon { width: 1.75rem; height: 1.75rem; }
.m-auth .input--code { font-size: 1.4rem; text-align: center; min-height: 3.5rem; }
.local-item__forget { flex: none; width: 2.75rem; min-height: 2.75rem; }

/* Narrow phones: class tab labels shrink and cut cleanly instead of running into each other. */
.tclass-tabs__tab { min-width: 0; }
.tclass-tabs__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .tclass-tabs { gap: .15rem; padding: .25rem; }
  .tclass-tabs__tab { padding: .35rem .15rem; font-size: .7rem; }
}

/* Subject picker: no arrow on phones, the logo and name open the list on their own (js/subjects.js). */
.brand__chev { display: none; }