/* =============================================================================
   MOBILE STYLES — auto-applied on viewports ≤ 767 px
   -----------------------------------------------------------------------------
   These rules override the desktop layout in style.css for narrow screens.
   The browser fires them automatically on real mobile devices and on small
   browser windows; no opt-in flag, no JS bootstrapper. To preview on desktop,
   use Chrome DevTools' device toolbar (Ctrl+Shift+M).

   767, NOT 768: Tailwind's md: kicks in AT 768 (min-width) — at exactly
   768 px (iPad Mini portrait) both "mobile" and "desktop" rules fired at
   once and the 100vw sidebar covered the whole app.
   ============================================================================= */

@media (max-width: 767px) {

/* ============================================================================
   ONBOARDING / SETUP SCREEN
   ============================================================================ */

/* Make the setup card fill the whole viewport — no inset, no rounded card */
#setup-screen {
    padding: 0 !important;
}
#setup-screen > .max-w-4xl,
#setup-screen > .max-w-6xl,
#setup-screen > div:first-of-type {
    max-width: 100% !important;
    width: 100% !important;
    /* `vh` PRIJE `dvh`: `dvh` stize u Chrome 108, a na starijem WebViewu je
       ta deklaracija nevazeca i tiho se odbaci — carobnjak bi ostao bez
       visinske granice. Novi preglednik svejedno uzima `dvh` ispod. */
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
}

/* --- Header: a touch more padding so it doesn't feel squished ------------ */
#setup-screen > div > div:first-child {
    padding: 0.85rem 0.85rem 0.7rem !important;
}
/* Step indicator dots — smaller so they read as a "progress bar" instead
   of competing with the title for attention. */
#setup-screen .border-b .flex.items-center.gap-1 > span {
    transform: scale(0.65) !important;
    transform-origin: center !important;
}
/* …ALI NE STRELICI NATRAG. Naslov `h1` nosi isti niz klasa kao red tockica
   (`flex items-center gap-1`), pa je pravilo iznad smanjivalo i znak `‹`
   unutar gumba za natrag na 65 % -- odatle „izrazenija strelica natrag"
   (Ivo, 02.09.). Tockice ostaju male, strelica se vraca na svoju velicinu. */
#setup-screen .setup-natrag > span {
    transform: none !important;
}
/* Force the renderSetupHeader outer flex to row on mobile so the HR/EN
   toggle sits on the RIGHT next to the title block (same as desktop),
   instead of stacking below the step indicator. Tailwind's setup.js
   markup uses `flex flex-col sm:flex-row` which would put it below at
   <640px — override that here. */
#setup-screen .border-b > div.flex {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
#setup-screen .border-b h1 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0.15rem 0 0.2rem !important;
}
#setup-screen .border-b .text-xs.text-blue-100 {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
}
/* Step indicator row — keep "Korak X od 3 ●●●" on a single line
   below the title (default position from setup.js renderSetupHeader). */
#setup-screen .border-b .flex.items-center.gap-2.mt-1 {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
}
#setup-screen .border-b .flex.items-center.gap-2.mt-1 > span.text-xs {
    white-space: nowrap !important;
}

/* Hide the content-language picker (the second HR/EN switch). On mobile we
   keep only the UI language toggle — content language has its own field
   in settings. The selector targets the bg-blue-900/40 wrapper used in
   renderSetupHeader's contentLangPicker. */
#setup-screen [class*="bg-blue-900"] {
    display: none !important;
}

/* Right-side UI lang toggle on the header — make it visibly subtler so
   it doesn't dominate the slim mobile header. Drop the white wrapper
   bg, hide the globe icon, shrink the pill buttons, no border. */
#setup-screen .border-b .flex.justify-between {
    gap: 0.5rem !important;
}
#setup-screen .border-b .bg-white\/10 {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    gap: 0 !important;
}
#setup-screen .border-b .bg-white\/10 > span {
    display: none !important;   /* globe emoji */
}
#setup-screen .border-b .bg-white\/10 button {
    padding: 0.15rem 0.45rem !important;
    font-size: 0.68rem !important;
    border-radius: 0.3rem !important;
}

/* --- Layout C side panel: hidden on mobile. The mascot+bubble row at
   the top eats vertical space + the truncated bubble text wasn't
   readable enough to be worth it. Cards are what matter on a phone. */
#setup-mascot-side {
    display: none !important;
}

/* --- Sidebar (subject list + Mentor + Settings) — full-screen on mobile.
   Default Tailwind w-72 (288 px) leaves ~30 % of the right edge showing
   the dimmed main view, which can be misread as content. On a phone the
   menu is the user's whole context until they pick something, so cover
   the whole viewport. Desktop (md+) keeps the original sidebar width. */
#sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Hide the sidebar's X close button on the very first sidebar reveal
   after onboarding. setup.js#finalizeSetup adds .onboarding-just-finished
   to <body>; the first click inside the sidebar removes it again, so
   every subsequent reveal gets the normal close affordance back. */
body.onboarding-just-finished #sidebar button[onclick="toggleSidebar()"] {
    display: none !important;
}

/* Centre the "INGENIKO™" title in the sidebar header. Default mobile
   layout is `flex justify-between` which pushes the title to the right
   when the info button sits on the left + X button on the far right.
   Pull BOTH side buttons (info on left, X on right) out of the flex
   flow with absolute positioning so the title span is the only normal
   child — and parent's justify-content: center then centres it dead-on
   regardless of which side button is visible. */
#sidebar > div:first-child {
    justify-content: center !important;
}
#sidebar > div:first-child > button:first-child {
    position: absolute !important;
    left: 1rem !important;
}
/* X close button — absolute on the right; without this, its `ml-auto`
   absorbed all leftover flex space and dragged the title out of centre,
   right on top of the absolute "i" button. */
#sidebar > div:first-child > button:last-child {
    position: absolute !important;
    right: 1rem !important;
    margin-left: 0 !important;
}

/* --- Setup main column container ----------------------------------------- */
#setup-main-col {
    flex: 1 !important;
    min-height: 0 !important;
}

/* --- Setup card list: vertically centred in the available scroll area
   so equal whitespace sits above the first card and below the last.
   Flex column instead of the default grid because Tailwind's grid
   classes were swallowing align-content: center.

   `safe center` falls back to flex-start when the content is taller
   than the container — without it, plain `center` pushes the top of
   the list ABOVE the scroll container's start position, leaving the
   first cards unreachable on short-screen phones (iPhone SE, older
   Androids). Modern browser support is universal (Chrome/Safari/FF). */
#setup-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
    padding: 0.55rem !important;
    gap: 0.4rem !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Step 3 (predmet picker) needs different flex behaviour: the year
   <select> must stay anchored at the top of the card no matter how
   many subjects the chosen semester has. justify-content: flex-start
   pins the dropdown there; align-items: stretch + width:100% on the
   children kills the "shrink to longest option text" effect that
   appearance-none selects + flex-col children fall into on WebKit. */
#setup-list[data-step="subjects"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}
#setup-list[data-step="subjects"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
/* Programme/uni cards (createSelectionButton output) — icon ABSOLUTELY
   positioned on the left (top: 50% / translateY -50%) so it stays
   vertically centred no matter how tall the title block grows. Title
   + code stay in normal block flow on the right; the card reserves
   `padding-left: 3.4 rem` so they never slide under the icon. Solves
   the "icon glued to card top" issue on multi-line titles like
   DSE: "Znanost o podacima, UI i sistemsko inženjerstvo". */
#setup-list > div[data-module] {
    /* Card is a normal block with extra left padding to reserve room
       for the absolutely-positioned icon chip — guarantees the chip
       sits at the vertical centre of the card no matter how many lines
       the title wraps to (DSE wraps to 2 lines + a code subtitle).
       Scoped to [data-module] so this only hits programme/smjer cards
       on Step 2 — Step 3 (predmet) rows have their own chip styling. */
    display: block !important;
    position: relative !important;
    padding: 0.6rem 0.75rem 0.6rem 3.4rem !important;
    min-height: 3.4rem !important;
    border-width: 1px !important;
    border-left-width: 4px !important;
    border-right-width: 4px !important;
    border-left-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-radius: 0.6rem !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:first-child {          /* icon chip — absolute, vertically centred */
    position: absolute !important;
    left: 0.65rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.55rem !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
}
/* Per-module icon-chip tint (Tailwind 50-shade range) — same hue as the
   border accent but ultra-soft so icon stays the visual focus. */
#setup-list > div[data-module="BME"]      > div:first-child { background: #fef2f2 !important; } /* red-50 */
#setup-list > div[data-module="CCE"]      > div:first-child { background: #fff7ed !important; } /* orange-50 */
#setup-list > div[data-module="CPE"]      > div:first-child { background: #f0fdfa !important; } /* teal-50 */
#setup-list > div[data-module="DSE"]      > div:first-child { background: #faf5ff !important; } /* purple-50 */
#setup-list > div[data-module="EECS"]     > div:first-child { background: #fefce8 !important; } /* yellow-50 */
#setup-list > div[data-module="IEM"]      > div:first-child { background: #eff6ff !important; } /* blue-50 */
#setup-list > div[data-module="MAE"]      > div:first-child { background: #f8fafc !important; } /* slate-50 */
#setup-list > div[data-module="UNI"]      > div:first-child { background: #eef2ff !important; } /* indigo-50 */
#setup-list > div[data-module="PERSONAL"] > div:first-child { background: #ecfdf5 !important; } /* emerald-50 */
#setup-list > div[data-module] > div:nth-child(2) {         /* title — centered in the right area */
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
#setup-list > div[data-module] > div:nth-child(3) {         /* module code — under title, centered */
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 0 !important;
    margin-top: 0.15rem !important;
}
/* Per-module accent — both edges, softened (Tailwind 300-shade range)
   so the stripes are visible but quiet. data-module is set by setup.js
   createSelectionButton. */
#setup-list > div[data-module="BME"]      { border-left-color: #fca5a5 !important; border-right-color: #fca5a5 !important; }
#setup-list > div[data-module="CCE"]      { border-left-color: #fdba74 !important; border-right-color: #fdba74 !important; }
#setup-list > div[data-module="CPE"]      { border-left-color: #5eead4 !important; border-right-color: #5eead4 !important; }
#setup-list > div[data-module="DSE"]      { border-left-color: #d8b4fe !important; border-right-color: #d8b4fe !important; }
#setup-list > div[data-module="EECS"]     { border-left-color: #fde047 !important; border-right-color: #fde047 !important; }
#setup-list > div[data-module="IEM"]      { border-left-color: #93c5fd !important; border-right-color: #93c5fd !important; }
#setup-list > div[data-module="MAE"]      { border-left-color: #cbd5e1 !important; border-right-color: #cbd5e1 !important; }
#setup-list > div[data-module="UNI"]      { border-left-color: #a5b4fc !important; border-right-color: #a5b4fc !important; }
#setup-list > div[data-module="PERSONAL"] { border-left-color: #6ee7b7 !important; border-right-color: #6ee7b7 !important; }

/* Breadcrumb in the setup header — redundant on mobile (the dot
   indicator already shows the current step + lets you rewind). Drop
   it to recover one row of vertical space in the blue header. */
#setup-screen .border-b .text-xs.text-blue-100.flex.items-center.gap-1 {
    display: none !important;
}

/* --- Bottom action bar — selected counter LEFT, "Krenimo" button RIGHT.
   Button no longer full-width on mobile so the counter has room. */
#setup-screen .p-6.border-t {
    padding: 0.7rem 0.9rem !important;
}
#setup-screen .p-6.border-t button {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.9rem !important;
}
/* Counter visual identity (label-stack + Ingeniko-blue pill) lives in
   style.css — here we just tighten sizes for the cramped mobile footer
   so the two stacked label words + pill fit comfortably next to Krenimo. */
#setup-selected-counter {
    gap: 0.5rem !important;
}
#setup-selected-counter .setup-counter-label {
    font-size: 0.72rem !important;
}
#setup-selected-counter .setup-counter-num {
    min-width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.78rem !important;
    padding: 0 0.45rem !important;
}

/* --- Predmet rows (step 3) — each course in its own rounded "chip"
   card so the list reads as discrete items rather than a merged blob.
   Subtle border + tiny shadow give the chip shape without shouting.
   Selected rows still get their stronger blue card from setup.js
   (border-blue-200 + bg-blue-50). */
#setup-list .p-2.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}
#setup-list .p-2.space-y-2 > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* --- "O tebi" step — COMPACT controls on phones (Drago: input, gumb i
   opcijske kartice bili preveliki na mobitelu). Scoped to the you-step. */
#setup-list[data-step="you"] {
    min-height: 0 !important;
}
#setup-list[data-step="you"] .setup-you-wrap {
    gap: 0.9rem !important;
    max-width: 17rem !important;   /* Drago: kartice i dalje presiroke */
}
#setup-list[data-step="you"] h2 {
    font-size: 1.05rem !important;
}
#setup-list[data-step="you"] input {
    padding: 0.7rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 0.9rem !important;
}
#setup-list[data-step="you"] .setup-you-wrap > button {   /* Dalje */
    padding: 0.65rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 0.9rem !important;
}
#setup-list[data-step="you"] .grid > button {             /* opcijske kartice */
    padding: 0.65rem 0.9rem !important;
    border-radius: 0.9rem !important;
    font-size: 0.95rem !important;
    gap: 0.6rem !important;
}
#setup-list[data-step="you"] .you-opt-ic {
    width: 1.7rem !important;
    height: 1.7rem !important;
}
#setup-list[data-step="you"] .setup-you-foot button {
    padding: 0.4rem 1rem !important;
    font-size: 0.82rem !important;
}
#setup-list[data-step="you"] .setup-you-err {
    margin-top: -0.5rem !important;
    font-size: 0.75rem !important;
}

/* Setup tip block (Ingeniko hint) — keep snug */
#setup-tip {
    padding: 0 0.9rem 0.5rem !important;
    font-size: 0.78rem !important;
}


/* ============================================================================
   APP HEADER (subject name + mode/mentor selectors)
   ============================================================================ */
header.bg-white {
    height: auto !important;
    min-height: 3.4rem !important;
    padding: 0.4rem 0.6rem !important;
    gap: 0.4rem !important;
}
header #current-subject {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    /* Allow 2 lines instead of single-line truncate */
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
header .px-3.py-1\.5 {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.75rem !important;
}


/* ============================================================================
   SUBJECT DASHBOARD (dash-rich)
   ============================================================================ */

#view-dashboard.dash-rich {
    /* Generous top padding so the first section breathes below the
       sticky page header (especially when the subject name wraps to
       2 lines). NO bottom padding: the app-shell chat-bar row is the
       view's bottom edge now. */
    padding: 1.4rem 0.7rem 0 !important;
    /* The Tailwind classes on #view-dashboard include
       justify-center items-center text-center — fine on desktop where
       the dashboard fits in one viewport, but on mobile they vertically
       centre an overflowing column, which pushes the first row of
       Brzi-pristup tiles ABOVE the scroll origin and they get clipped
       by the page header. Force top-anchored stacking instead. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}
.dash-rich-wrap {
    gap: 0.65rem !important;
}

/* --- Hero: hidden on mobile entirely. The course name is already in
   the page header above; the AI greeting bubble + decorative deco
   were eating screen space without adding info on a phone. */
.dash-hero {
    display: none !important;
}

/* --- Brzi pristup on mobile: 3-col × 2-row icon-only grid.
   Title + description hidden — just the colored icon tile. The icon
   itself communicates the action (book = Skripta, lightning = Kviz,
   etc.) and a long-press / hover tooltip carries the title for
   accessibility. */
.dash-quick {
    /* Four equal columns so all feature cards (Skripta / Kviz / Audioknjiga /
       Kolege) stay on ONE row on phones — 3 columns pushed the 4th down. */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
}
.dash-quick-card {
    padding: 0.25rem !important;         /* tighter — icon dominates the card */
    gap: 0 !important;
    border-radius: 0.7rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 4.6rem !important;       /* hard cap so cards stay small */
    justify-self: center !important;     /* centre the card within its grid cell so
                                            the empty room is split evenly L / R */
    width: 100% !important;
    max-width: 4.6rem !important;        /* keeps cards square + symmetrical */
}
.dash-quick-icon {
    /* Four cards per row on phones: icon shrinks so the row fits even a
       ~360px screen. */
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin: 0 auto !important;           /* horizontal centre */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dash-quick-icon > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
.dash-quick-text {
    display: none !important;
}
.dash-quick-arrow {
    display: none !important;
}

/* --- Section titles ------------------------------------------------------ */
.dash-section-title {
    font-size: 0.88rem !important;
    margin-bottom: 0.35rem !important;
}
/* Subject dashboard: a touch more air between "Brzi pristup" and the
   icon tiles below it (Drago, 2026-07-15). */
#view-dashboard .dash-section-title {
    margin-bottom: 0.55rem !important;
}
.dash-section-bolt {
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.75rem !important;
}

/* --- Widgets: simplified for mobile.
   - Nastavi gdje si stao: hide the empty "Lekcije završene: 0/—"
     subtitle and the empty grey progress bar. Keep just the chapter
     number badge + title + "Nastavi" / "Pregledaj poglavlja" actions.
   - Tvoj napredak: hide the 3-row stats list (Lekcije / Kvizovi /
     Zadaci all "0/—" on a fresh course). Big % ring + the "Pogledaj
     detaljan napredak" link is enough until the user has data.
*/
.dash-widgets {
    /* minmax(0,…) is load-bearing — plain 1fr lets a long nowrap course
       title force the card wider than the phone screen. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
}
.dash-widget {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.7rem !important;
    min-width: 0 !important;
}
.dash-widget h3 {
    font-size: 0.78rem !important;
    margin-bottom: 0.35rem !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
}
/* TAMNA TEMA MORA VRATITI SVOJE (Drago QA 16.09.2026.): `!important` iznad
   gasi `html.dark-theme .dash-widget h3` iz style.css (koje ga nema), pa su
   naslovi kartica „Mapa znanja" i „Liga genija" na telefonu ostajali
   tamnoplavi #1e3a8a na tamnoj kartici #2a2927, kontrast 1,40:1. Boja se NE
   mice iz pravila iznad: ondje je brendska mornarska plava za svijetli
   mobilni izgled i vrijedi dalje. Ovdje se samo dopisuje tamna grana, kao sto
   je vec napravljeno za #home-continue-btn nize u ovoj datoteci. */
html.dark-theme .dash-widget h3 {
    color: #e2e8f0 !important;
}

/* The subject continue + knowledge-map widgets are compact by design
   now (chapter dots, kmap tiles) — the old structural grid overrides
   that reshaped the legacy widgets were removed. */
.dash-progress-ring {
    width: 70px !important;
    height: 70px !important;
}
.dash-progress-ring::before {
    inset: 7px !important;
}
.dash-progress-ring > span {
    font-size: 0.95rem !important;
}
.dash-faq-chip {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.75rem !important;
}

/* --- Dashboard chatbar — flows inline immediately under the
   "Tvoj napredak" widget instead of being pinned to the viewport
   bottom. Earlier we used position:fixed but the user prefers it
   sitting with the rest of the content so the dashboard reads as
   one coherent column. */
.dash-chatbar {
    padding: 0.65rem 0.8rem !important;
    gap: 0.55rem !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
}
/* Ista zamka (Drago QA 16.09.2026.): `background`/`border` s `!important`
   iznad nadjacavaju `html.dark-theme .dash-chatbar` iz style.css, pa je traka
   „Pitaj Inzenjerka bilo sto..." na dnu tamne naslovnice ostajala cisto bijela
   ploha preko cijele sirine, a tekst u njoj svijetao iz tamne teme. */
html.dark-theme .dash-chatbar {
    background: #2a2927 !important;
    border-color: #3b3a37 !important;
}
.dash-chatbar-avatar {
    width: 2.1rem !important;
    height: 2.1rem !important;
}
.dash-chatbar input {
    font-size: 0.9rem !important;
}
.dash-chatbar-desc {
    font-size: 0.66rem !important;
}
.dash-chatbar-send {
    width: 2.1rem !important;
    height: 2.1rem !important;
}


/* ============================================================================
   LESSON CONTENT (skripta) — wide things scroll INSIDE their own box.
   A truth table with 8 columns, a long code line or a display equation
   must never drag the whole page sideways on a phone.
   ============================================================================ */
.prose table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.prose pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Only DISPLAY equations ($$…$$) scroll horizontally when they can't shrink.
   INLINE math must never show a scrollbar — Android WebViews flash a spurious
   one on a sub-pixel overflow, so a short answer looks like it's clipped
   (Ivo, 2026-07-18). */
mjx-container {
    max-width: 100% !important;
}
mjx-container[display="true"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
/* IZUZETAK: `.math-scrolls` (Drago, prijava 03.09.2026.: „Прекид на рубу", uz
   sliku na kojoj su `h11 = 0 ⟹ γ(x1,x1) = (` odrezani na desnom rubu chata).

   Pravilo iznad i `mjx-container.math-scrolls` u `style.css` imaju ISTU
   specificnost — `mjx-container:not([attr])` je (0,1,1), kao i
   `mjx-container.math-scrolls` — i oba su `!important`. Kod izjednacenja
   odlucuje redoslijed, a `mobile.css` se ucitava POSLIJE `style.css`, pa je
   ovo tise gasilo skroler koji je `fitMathInElement` upravo namjerno upalio.
   Formula bi zatim prelila `.prose`, koji ima `overflow-x: clip` — dakle rez
   bez ijednog nacina da se dode do ostatka. Izmjereno: `scrollWidth` 555 px
   naspram `clientWidth` 317 px, a `overflow-x` racunat kao `visible`.

   Namjera pravila ostaje netaknuta: obicna inline formula i dalje nema
   skrolera, pa nema ni laznog na sub-pixel prelijevu (Ivo, 2026-07-18).
   `.math-scrolls` NIJE sub-pixel slucaj — tu klasu `fitMathInElement` stavlja
   tek kad formula viri i nakon smanjenja do poda, dakle kad je jedini izbor
   „skrolaj" ili „odrezano". Prag je zato i premjesten u JS: da se ova dva
   slucaja mogu razlikovati, sto CSS sam ne moze. */
mjx-container:not([display="true"]):not(.math-scrolls) {
    overflow: visible !important;
}


/* ============================================================================
   GENERIC: tighter chat input + inputs
   ============================================================================ */
#input-area {
    padding: 0.4rem 0.5rem 0.7rem !important;
}
#input-area input {
    font-size: 0.92rem !important;
}


/* ============================================================================
   ONBOARDING HEADER (Natrag · Korak 3 od 3) — keep slim
   ============================================================================ */
#onboarding-header {
    padding: 0.5rem 0.7rem !important;
}
#onboarding-header .text-xs {
    font-size: 0.7rem !important;
}

/* ============================================================================
   TUTOR / MENTOR INTRO CARD + SUGGESTED QUESTIONS
   ----------------------------------------------------------------------------
   The tutor- and mentor-intro cards (.chat-intro-card) render a 14rem mascot
   circle + a speech bubble + a list of starter questions. On a phone the
   14rem mascot eats the whole viewport before the bubble even shows; shrink
   the mascot, the bubble padding/text, and the suggestion buttons so the
   whole intro fits cleanly above the input bar.
   ============================================================================ */
.chat-intro-card {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
/* Mascot wrapper — first direct child, has inline width:14rem;height:14rem.
   Kept deliberately subtle on mobile (was 8.5rem, then user asked for it
   smaller still — 6rem now reads as a chat-style avatar, not a hero). */
.chat-intro-card > div:first-child {
    width: 6rem !important;
    height: 6rem !important;
    margin-bottom: 0.7rem !important;
}
/* Halo + border + shadow scaled down to match — at 6rem the original
   12px shadow + 3px white border felt overweight. */
.chat-intro-card > div:first-child > div:first-child {
    inset: -6px !important;
    filter: blur(14px) !important;
}
.chat-intro-card > div:first-child > div:nth-child(2) {
    border-width: 2px !important;
    box-shadow: 0 6px 14px -4px rgba(30, 41, 59, 0.25) !important;
}
/* Online status dot — smaller to match the smaller circle. */
.chat-intro-card > div:first-child > span {
    width: 12px !important;
    height: 12px !important;
    border-width: 2px !important;
    bottom: 6px !important;
    right: 6px !important;
}
/* Speech bubble — second direct child, the .bg-white p-5 ... block */
.chat-intro-card > div:nth-child(2) {
    padding: 0.9rem 1rem !important;
    max-width: 92% !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.chat-intro-card > div:nth-child(2) h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
}
.chat-intro-card > div:nth-child(2) p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

/* Tutor "Predloženo:" suggestion buttons — tighten padding + font so
   each chip is roughly half the height it has on desktop. */
.tutor-suggestion-btn {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    border-radius: 0.7rem !important;
}
.tutor-suggestion-btn > span:first-child {
    font-size: 1rem !important;
    margin-right: 0.45rem !important;
}

/* --- Once the user enters chat (first message sent), strip the
   frosted-glass wrapper around the message history and hide the
   sticky mini-mascot at the top. On a phone, both add visual weight
   without value — the chat reads better as plain message bubbles
   on the white background. */
.chat-history-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.chat-mascot-sticky {
    display: none !important;
}


/* ============================================================================
   HOME DASHBOARD (#view-home) — the global landing view
   ----------------------------------------------------------------------------
   Mobile-first layout: one clean column, no horizontal scroll, and the
   gamification hero KEPT (it drives daily return) but compacted — the
   mascot/deco go, the greeting + 4 tap-friendly chips stay.
   ============================================================================ */

/* Tailwind's items-center/justify-center on #view-home centre an
   OVERFLOWING column — the top of the page gets pushed above the scroll
   origin (the "big empty gap / clipped hero" bug). Anchor to the top. */
#view-home.dash-rich {
    /* Bottom padding 0: the scroll area already ends above the fixed chat
       bar (style.css), so any bottom padding here is pure dead scroll. */
    padding: 0.9rem 0.7rem 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
}
#view-home .dash-rich-wrap {
    gap: 0.65rem !important;
}

/* Hero: style.css hides .dash-hero on mobile (subject dashboard doesn't
   need it) — but the HOME hero carries the level/XP/streak/quests chips,
   so it must survive. Single centered column, no mascot, no 🎓 deco,
   no corner glyphs, compact type. */
.dash-hero--home {
    display: block !important;
    padding: 0.9rem 0.85rem 0.85rem !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 1rem !important;
}
.dash-hero--home .dash-hero-mascot,
.dash-hero--home > .relative,
.dash-hero--home .dash-hero-deco {
    display: none !important;
}
.dash-hero--home::before, .dash-hero--home::after {
    display: none !important;
}
.dash-hero--home .dash-hero-content h1 {
    font-size: 1.05rem !important;
}
.dash-hero--home .dash-hero-content h1 .accent {
    display: inline !important;          /* name on the same line — saves a row */
    font-size: 1.05rem !important;
}
.dash-hero--home .dash-hero-content p.tagline {
    font-size: 0.72rem !important;
    margin-top: 0.25rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

/* Gamify status strip: styled globally for ≤1160 in style.css (one
   segmented instrument). Here only phone-size tightening. */
.dash-hero--home .hg-chip { padding: 6px 11px !important; }
.dash-hero--home .hg-level { padding: 4px 9px !important; }

/* Course quick-access cards — tighter, and never wider than the screen. */
/* Course tiles: rail styling lives in style.css (<=1160); no overrides. */

/* ============================================================================
   ADAPTIVE DENSITY — tall phones (S20/Pixel 7 @915px…): quick tiles grow a
   notch. (The old "last section rides at the bottom" rule was dead while the
   chat bar was the wrap's last child; now that the bar lives OUTSIDE the
   wrap it would fire and scatter the tall-phone layout — deleted.)
   ============================================================================ */
@media (min-height: 800px) {
    .dash-quick { gap: 0.5rem !important; }
    .dash-quick-card { max-width: 5.2rem !important; max-height: 5.2rem !important; }
    .dash-quick-icon { width: 4rem !important; height: 4rem !important; }
    #dash-map-widget { padding: 0.85rem 1rem !important; }
    .kbar-seg { height: 36px; }
    .kbar-seg i { height: 14px; }
    .dash-chatbar { padding: 0.85rem 1rem !important; }
}

/* "Nastavi gdje si stao" — phone-tight: small icon, one bar line with the
   % beside it, slim buttons. Cuts the card by ~30% without losing info. */
.dash-widget-continue { padding: 0.55rem 0.75rem !important; }
.dash-widget-continue h3 { margin-bottom: 0.15rem !important; }
/* On phones the HOME continue card drops its title — the blue card +
   "Nastavi lekciju" button say it all; saves a full row. (The subject
   page card is the merged knowledge map and KEEPS its header row.) */
#view-home .dash-widget-continue > .flex.items-center.justify-between:first-child,
#view-home .dash-widget-continue > h3 { display: none !important; }
#view-home .dash-widget-continue .flex.items-center.gap-3 { margin-top: 0 !important; }
.dash-widget-continue .w-10 { width: 1.9rem !important; height: 1.9rem !important; border-radius: 0.5rem !important; }
.dash-widget-continue .w-10 img, .dash-widget-continue .w-10 svg { width: 1.3rem !important; height: 1.3rem !important; }
.dash-widget-continue .font-semibold { font-size: 0.8rem !important; }
.dash-widget-continue .hcw-bar { margin: 0.4rem 0 0.1rem !important; }
.dash-widget-continue .hcw-meta span:first-child { display: none; }   /* drop the label, keep the % */
.dash-widget-continue .hcw-meta { justify-content: flex-end !important; margin-top: -1.1rem !important; padding-bottom: 0.15rem; }
.dash-widget-continue .hcw-bar { margin-right: 2.4rem !important; }   /* room for the % beside the bar */
.dash-widget-continue .mt-2 { margin-top: 0.45rem !important; }
.dash-widget-continue #home-continue-btn, .dash-widget-continue .dash-resume-btn {
    padding: 0.45rem 0.8rem !important; font-size: 0.72rem !important;
}
/* The HOME continue card drops its % bar on phones — the same number is
   already on the course tile above and in Ukupan napredak below. Two
   rows saved: icon + name, then the buttons. */
#view-home .dash-widget-continue .hcw-bar,
#view-home .dash-widget-continue .hcw-meta { display: none !important; }
#view-home .dash-widget-continue .mt-2 { margin-top: 0.35rem !important; }

/* Ukupan napredak, phone-tight: smaller ring + tighter week line. */
#view-home #home-progress-widget .hpw-ring {
    width: 48px !important; height: 48px !important;
}
#view-home #home-progress-widget .hpw-ring::before { inset: 4px !important; }
#view-home #home-progress-widget .hpw-ring > span { font-size: 0.72rem !important; }
#view-home #home-progress-widget .hpr-week {
    margin-top: 0.15rem !important;
    padding-top: 0.3rem !important;
}

/* ============================================================================
   FIT HOME ON ONE SCREEN — the goal: "Pitaj mentora" visible with NO
   scrolling (measured 76px over the fold on a 667px phone).
   ============================================================================ */
/* 1 · The loud "Nastavi lekciju" text button becomes a quiet round arrow
   riding the right edge of the card, vertically centred; the bottom row
   keeps only the "Brzi kviz" link. Saves a row AND reads subtler. */
/* Doubled class = higher specificity than the '#view-home .dash-widget'
   padding shorthand further down this file (equal (1,1,0) would lose by
   order and re-zero the right padding under the arrow). */
#view-home .dash-widget-continue.dash-widget-continue {
    position: relative;
    padding-right: 3.6rem !important;
}
#view-home #home-continue-btn {
    position: absolute !important; right: 0.7rem; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important;
    display: grid !important; place-items: center;
    font-size: 0.78rem !important; line-height: 1 !important;
    font-weight: 800 !important;
}
/* Text + arrow go; the chapter badge ("P3" = where you stopped) stays.
   White chip with blue type — same family as the card's icon square,
   so the badge reads as part of the card instead of a dark blue blob. */
#view-home #home-continue-btn > span { display: none !important; }
#view-home #home-continue-btn > .hcb-ch { display: block !important; }
#view-home #home-continue-btn {
    background: #fff !important;
    color: #2563eb !important;
    border: 1.5px solid #93c5fd !important;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.35) !important;
}
#view-home #home-continue-btn:active { background: #eff6ff !important; }
html.dark-theme #view-home #home-continue-btn {
    background: #172554 !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

/* 2 · Course tiles: ONE clean ellipsis line — the inherited two-line
   clamp rendered as flow-root with a height cap, clipping mid-line
   ("Introduction to.. / Computing:" sliver). Bar + % carry the state;
   the full name lives one tap away on the subject page. */
#view-home .hcc-title {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    height: auto !important; max-height: none !important;
}

/* 3 · Slimmer column gaps + chatbar. (Widget padding is tuned in the
   "Widget column" block below — one owner, no duplicate rules.) */
#view-home .dash-rich-wrap { gap: 0.5rem !important; }
#view-home .dash-chatbar { padding: 0.65rem 0.8rem !important; }

/* 4 · Short phones (≤760px tall): trim what keeps "Pitaj mentora" near
   the fold — the chatbar's helper lines go (the placeholder explains
   itself) plus hair-thin spacing cuts. Liga stays FULL per Drago. */
@media (max-height: 760px) {
    #view-home .dash-chatbar-desc { display: none !important; }
    /* Single-course progress row duplicates the ring beside it. */
    #view-home #home-progress-widget .hpr-solo { display: none !important; }
    /* ISTA TRAKA NA OBA EKRANA (Drago, 25.09.2026.: „kartica Inzenjerka treba
       biti iste velicine na Pocetnoj i na naslovnici predmeta"). Pocetna je od
       13.07. imala svoj tjesnji uzmak (0,55rem), a naslovnica predmeta ostala
       na osnovnih 0,65 — pa je traka ondje bila 62,8 px, a ovdje 59,6, i pri
       prijelazu je gornji rub poskocio 3 px. Nitko to nije namjerno razlikovao.
       Sada obje uzimaju 0,65rem. */
    #view-home .dash-chatbar { padding: 0.65rem 0.8rem !important; }
    #view-home.dash-rich { padding-top: 0.35rem !important; }
    #view-home .dash-section-title { margin-bottom: 0.2rem !important; }
    #view-home .dash-rich-wrap { gap: 0.4rem !important; }
    /* margin-top NE ispod 30px: to je prostor za glavu koja viri iznad
       kartice, a fit-osigurač (app.js) zumiranjem margine smanji — na 22px
       je glava na z≈0.88 bila točno na rubu reza i na uređajima se rezala
       (Drago, 04.09.). Visinu ionako čuva osigurač, ne ovih 8px. */
    /* 24, ne 30 (Drago, 25.09.2026.: „mozda da se Ingeniko malo podigne i sve
       da se mrvicu podigne"). Iznad glave je ostajalo 16 px praznine do
       zaglavlja; sada 10, sto je i dalje zraka, a stupac dobiva 6 px. Glava i
       razmak su u istom stisnutom bloku pa se smanjuju zajedno, dakle odnos je
       isti na svakom mjerilu; provjereno na dnu od 0,94. */
    #view-home .dash-hero--home { padding-bottom: 0.6rem !important; margin-top: 24px !important; }
    #view-home .dash-hero--home .hg-chip { padding: 5px 10px !important; }
    #view-home .dash-widget-continue .mt-2 { margin-top: 0.2rem !important; }
}

/* Widget column (Nastavi / Ukupan napredak / Liga genija) — the generic
   .dash-widgets 1fr stack applies; just tighten the cards. */
#view-home .dash-widget { padding: 0.6rem 0.8rem !important; }
#view-home .dash-widget h3 { font-size: 0.8rem !important; margin-bottom: 0.3rem !important; }
#view-home .dash-progress-ring { width: 56px !important; height: 56px !important; }
#view-home .dash-progress-ring::before { inset: 5px !important; }
#view-home .dash-progress-ring > span { font-size: 0.85rem !important; }

/* ============================================================================
   TAP TARGETS — audit fixes (fingers, not cursors)
   ----------------------------------------------------------------------------
   Small text-links ("Pogledaj sve →", "+ Dodaj još", "Pregledaj poglavlja")
   keep their visual size but get an invisible ≥40px hit area via padding +
   negative margin, so the layout doesn't shift.
   ============================================================================ */
#view-home .text-\[11px\],
#view-dashboard .text-\[11px\],
#home-add-course,
#home-view-all-courses,
.dash-browse-btn {
    padding: 12px 10px !important;
    margin: -12px -10px !important;
}
/* „Pogledaj sve" je sad pilula s vidljivim tijelom (04.09.) — nevidljivi
   jastuk gore bi joj naslikao golemu pozadinu, a negativna margina je
   izgurala preko ruba. ID+klasa nadjačava golo ID pravilo iznad. */
#home-view-all-courses.sve-pilula,
#view-home .sve-pilula,
#view-dashboard .sve-pilula {
    padding: 4px 10px !important;
    margin: 0 !important;
}
#home-continue-btn { padding: 0.55rem 0.95rem !important; }
/* Chat send + modal controls at comfortable thumb sizes. */
.dash-chatbar-send { width: 2.5rem !important; height: 2.5rem !important; }
.modal-x { width: 2.5rem !important; height: 2.5rem !important; }
.lb-back { padding: 9px 12px !important; margin: -9px -6px !important; }
.lb-period-btn { padding-top: 9px !important; padding-bottom: 9px !important; }

}

/* ============================================================================
   TALL PHONES: uniform scale-up ("SE everywhere").
   The whole content column — cards, text, icons, spacing inside sections —
   zooms up by one factor, and the gaps BETWEEN sections grow with the same
   proportion, so every phone shows EXACTLY the iPhone SE layout, just
   proportionally larger. The pinned chat bar is excluded (it already sits
   at the bottom). Factor per tier = (space above the bar) / (SE content
   height), minus a small safety margin so the leaderboard never clips.
   iPhone SE (667) stays untouched.

   Recalibrated 2026-07-23 (Drago): the factors below were first set (07-16)
   BEFORE the header view-icon was enlarged (07-21) and BEFORE the gamification
   hero row landed (07-22), both of which grew the column. The old factors then
   overgrew it on some phones → the reported "cramped + unwanted scroll". Each
   tier is eased ~0.05–0.07 so the column keeps a comfortable air buffer that
   also absorbs a device's real header overhead (iOS safe-area etc.). Pairs with
   the smaller .hdr-view-icon in style.css.
   ============================================================================ */
/* Mid-tall tier (iPhone 8 Plus class, 720–779): gentler version of the same
   scaling so these screens fill up too. */
@media (max-width: 767px) and (min-height: 720px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.02; }
    #view-home .dash-rich-wrap, #view-dashboard .dash-rich-wrap { gap: 0.55rem !important; }
    #view-home .dash-hero--home { margin-bottom: 0.3rem !important; }
    #view-home .home-courses-grid { margin-top: 0.3rem !important; }
    #view-dashboard .dash-quick { margin-top: 0.45rem !important; }
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-dashboard .dash-widgets { gap: 0.7rem !important; }
}
@media (max-width: 767px) and (min-height: 730px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.06; }
}
@media (max-width: 767px) and (min-height: 780px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.10; }
    #view-home .dash-rich-wrap, #view-dashboard .dash-rich-wrap { gap: 0.75rem !important; }
    /* A touch more air between the hero (Inženjerko) card and the section
       below it, and between the "Tvoji predmeti" heading and its cards —
       the zoomed layout felt cramped there. Scales with zoom. */
    #view-home .dash-hero--home { margin-bottom: 0.55rem !important; }
    #view-home .home-courses-grid { margin-top: 0.55rem !important; }
    /* Same air on the subject dashboard: "Brzi pristup" heading → tiles. */
    #view-dashboard .dash-quick { margin-top: 0.8rem !important; }
    /* The subject dashboard carries less content than home. A stronger zoom
       overgrew the cards and pushed the leaderboard under the chat bar, so
       instead the leftover is spent on LARGER, EQUAL gaps between its cards
       (dashboard only — home keeps the tighter rhythm). */
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-dashboard .dash-widgets { gap: 1rem !important; }
}
@media (max-width: 767px) and (min-height: 840px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.18; }
    #view-home .dash-rich-wrap, #view-dashboard .dash-rich-wrap { gap: 0.85rem !important; }
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-dashboard .dash-widgets { gap: 1.15rem !important; }
}
@media (max-width: 767px) and (min-height: 890px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.26; }
    #view-home .dash-rich-wrap, #view-dashboard .dash-rich-wrap { gap: 0.9rem !important; }
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-dashboard .dash-widgets { gap: 1.25rem !important; }
}
@media (max-width: 767px) and (min-height: 940px) {
    #view-home .dash-rich-wrap > :not(#home-chatbar),
    #view-dashboard .dash-rich-wrap > :not(#dash-chatbar-wrap) { zoom: 1.33; }
    #view-home .dash-rich-wrap, #view-dashboard .dash-rich-wrap { gap: 0.95rem !important; }
    #view-dashboard.dash-rich .dash-rich-wrap,
    #view-dashboard .dash-widgets { gap: 1.35rem !important; }
}

/* =============================================================================
   SAFE AREA (outside the media query — applies to every size)
   -----------------------------------------------------------------------------
   With viewport-fit=cover the iOS webview draws under the notch/status bar;
   these env() paddings push the header and its dropdown below it. Android
   and desktop browsers report 0 for the insets, so nothing changes there.
   ============================================================================= */
/* Header row height. !important because Tailwind emits h-16/py-3 as
   !important in this build — without it these never applied at all. On
   phones the bar is 3.25rem (52px) instead of Tailwind's 4rem: 64px cost too
   much of a phone screen (Ivo, 2026-07-18, on both Android and iOS). Desktop
   keeps 4rem. iOS additionally absorbs the notch inset — see the .safe-inset
   block in style.css. */
@media (max-width: 880px) {
    /* The row's content (the ☰ button) is only 32px — the old
       `header.bg-white { min-height: 3.4rem }` was padding it out to 54px,
       which ate too much of a phone screen (Ivo, 2026-07-18: "malo previše
       visoka" on BOTH Android and iOS). 2.6rem + 0.3rem padding lands at
       ~43px with the button untouched. #app-header (an ID) outranks the
       header.bg-white rule, and both are !important — Tailwind emits
       utilities as !important in this build, so plain rules never win here. */
    #app-header {
        min-height: 2.6rem !important;
        height: auto !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
    #sidebar-nav { top: calc(2.6rem + env(safe-area-inset-top, 0px)) !important; }
}

/* ── No sideways pan (Ivo, 2026-07-30) ──────────────────────────────────
   "smeta mi malo šta se može ekran livo-desno cili pomicat" — the whole
   page could be dragged horizontally, so the home cards drifted off the
   left edge and the layout looked broken until you nudged it back.

   Nothing was ever meant to scroll sideways at the PAGE level: the two
   places that legitimately do (the subject card strip, wide tables) are
   their own `overflow-x: auto` containers further down this file and are
   untouched by this rule.

   Written as plain CSS on purpose. `overflow-x-hidden` is not in the
   precompiled tailwind.css, so reaching for the Tailwind class here would
   have needed `npm run tailwind` + a rebuilt commit to have any effect —
   the gotcha from 2026-07-23. `touch-action: pan-y` is what actually stops
   the gesture on Android; overflow-x alone leaves the overscroll drag.

   FIRST ATTEMPT WAS WRONG, and the reason is worth keeping. Constraining
   `html, body` changed nothing on the phone, because the page is not what
   moves: the header and the chat bar sit outside the scroller and stayed
   put in Ivo's screenshots while everything between them slid ~28px left.

   The thing that moves is whichever view is open, and the cause is a CSS
   rule nobody writes on purpose. Every view is `absolute inset-0
   overflow-y-auto`, which asks for vertical scrolling and says nothing
   about horizontal — but per the overflow spec, when one axis is not
   `visible`, a `visible` on the other axis COMPUTES TO `auto`. So asking
   for a vertical scroller silently produces a horizontal one too.

   Measured in the DOM at 360x780 (2026-07-30): 19 such containers, every
   one of them implicit — #view-quiz, #view-chat, #view-script,
   #view-audiobook, #view-learn, #view-dashboard, #mentor-chat,
   #mentor-map, #setup-list, .dash-rich-wrap and the rest. Not a home
   screen bug; the whole app was pannable. After the rule below: 1, and
   that one is the subject rail, which is meant to.

   Exclusions are the two containers that ask for horizontal scrolling
   AND carry the vertical utility class, so the selector would otherwise
   break them. */
html, body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y pinch-zoom !important;
}
[class~="overflow-y-auto"]:not(.home-courses-grid):not(.kolege-stories),
[class~="overflow-y-scroll"]:not(.home-courses-grid):not(.kolege-stories),
.dash-rich-wrap {
    overflow-x: hidden !important;
}

/* ── Expanded subject list (Ivo, 2026-07-30) ────────────────────────────
   Collapsed, the courses are a 108px swipe rail with the title squeezed
   onto one ellipsised line — right for a glance, useless for reading a
   name. Pressing "Pogledaj sve" adds `hcg-expanded`, and then the rail
   stops being a rail: cards become full-width rows, the icon goes back
   beside the title instead of above it, and the name wraps to as many
   lines as it needs.

   Row layout rather than a 2-column grid on purpose: two columns on a
   375px screen leaves ~170px per card, which truncates "Uvod u
   računarstvo i programiranje" all over again — the exact thing this is
   meant to fix. One column per row buys the full width.

   The rail also gets more height when expanded, so several courses are
   visible at once without the section pushing everything below it off
   the screen. */
#view-home .home-courses-grid.hcg-expanded {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 58vh !important;
    gap: 0.4rem !important;
    padding-right: 0.15rem !important;
}
#view-home .home-courses-grid.hcg-expanded .home-course-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.6rem !important;
    padding: 0.6rem 0.75rem !important;
}
#view-home .home-courses-grid.hcg-expanded .hcc-icon {
    width: 1.9rem !important; height: 1.9rem !important;
}
#view-home .home-courses-grid.hcg-expanded .hcc-main {
    flex: 1 1 auto !important; min-width: 0 !important;
}
/* The whole point: no clamp, no ellipsis, no nowrap. */
#view-home .home-courses-grid.hcg-expanded .hcc-title {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important; line-clamp: unset !important;
    min-height: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
}
#view-home .home-courses-grid.hcg-expanded .home-course-card.hcc-add {
    flex: 0 0 auto !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Onboarding audit (2026-07-29): the HR|EN toggle buttons in the wizard
   header were a 30x19 tap target — give thumbs something to hit. */
#setup-screen .border-b .bg-white\/10 button {
    padding: 0.5rem 0.85rem !important;
}