/* ===========================================================================
   Thelo — desktop layer.

   The pages under /sdashboard/, /learn/ and /scan/ are ported verbatim from the
   Android app by tools/port-from-app.sh. They are built for a phone held in the
   hand. This stylesheet is the only thing that turns them into a website, so a
   change made for the phone reaches the web by re-running the port and nothing
   else.

   Almost everything here sits inside a pointer/width query: a phone browser
   hitting thelo.ink still gets exactly the app layout.
   =========================================================================== */

@media (pointer: fine) and (min-width: 900px) {

    /* --- Page frame -------------------------------------------------------
       The app paints its own white surfaces. Giving the page behind them a
       tinted ground stops the layout reading as a stretched phone screenshot. */
    body {
        background-color: #EEF2F7;
        background-image:
            linear-gradient(rgba(148, 163, 184, 0.10) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px);
        background-size: 28px 28px;
    }

    /* ======================================================================
       DASHBOARD  (/sdashboard/)
       ====================================================================== */

    /* The app's bottom tab bar is a phone idiom and sits badly on a monitor. On
       desktop it becomes a top header — where a web app's navigation belongs —
       which also frees the bottom of the screen entirely. */
    /* Every page's bar, not just the dashboard views — /scan/ puts its nav
       directly in <body>, so a view-scoped selector left it stranded at the
       bottom there while the dashboard's sat at the top. Navigation that moves
       between pages is worse than navigation in the wrong place. */
    .nav-bar {
        /* These containers are flex columns laid out content → nav, so sticky
           alone leaves the bar at the foot of the page. order:-1 lifts it to the
           top, which is what makes it read as a site header rather than a phone
           tab bar. */
        order: -1;
        position: sticky;
        top: 0;
        bottom: auto;
        width: 100%;
        max-width: none;
        border-top: none;
        border-bottom: 1px solid var(--grid-color, #E2E8F0);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        justify-content: center;
        gap: 2.5rem;
        z-index: 50;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

    .nav-bar .nav-item {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        padding: 0.9rem 0.75rem;
        font-size: 0.95rem;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;

        /* The app fixes each tab at 64px, which fits "Scan" and "Home" and
           nothing else. Armenian is far longer — "Դասընթացներ" needs 127px — so
           the label overflowed its tab and ran across its neighbours. Let the tab
           size to its text and keep it on one line. */
        width: auto;
        min-width: 0;
        max-width: none;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .nav-bar .nav-item span { white-space: nowrap; }

    /* Long Armenian labels plus four tabs can outgrow a narrow laptop; let the
       row tighten rather than overflow. */
    @media (max-width: 1100px) {
        #view-hangar .nav-bar,
        #view-courses .nav-bar,
        #view-profile .nav-bar,
        body > .nav-bar { gap: 1.25rem; }
    }
    .nav-bar .nav-item i { font-size: 1rem; }
    .nav-bar .nav-item:hover { color: var(--thelo-blue, #2563EB); }
    .nav-bar .nav-item.active { border-bottom-color: var(--thelo-blue, #2563EB); }

    /* Content column. The app targets ~400px; on a monitor that is a ribbon.
       width:100% matters: these are flex items in a column, and `margin: 0 auto`
       alone makes a flex item shrink to its content instead of filling to
       max-width — which left the header collapsed around the logo. */
    #view-hangar main,
    #view-courses main,
    #view-profile main,
    #view-hangar header {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    #view-hangar main,
    #view-courses main,
    #view-profile main { padding: 2.5rem 2rem 4rem; }

    #view-hangar header { padding: 1.5rem 2rem 0; }

    /* The "Up Next" card earns more room and a little more presence. */
    .window-card-hero {
        padding: 2.25rem 2.5rem;
        border-radius: 1rem;
        box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
    }
    .window-card-hero .card-title { font-size: 2rem; }
    .window-card-hero .btn { max-width: 260px; }

    /* Lesson and review rows read better as a two-up grid than a long column. */
    #h-lesson-list,
    #h-review-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 1rem;
        align-items: start;
    }
    #h-lesson-list > div { grid-column: 1 / -1; }   /* unit headings span the row */
    #h-lesson-list .lesson-item,
    #h-review-list .lesson-item { margin-bottom: 0; height: 100%; }

    .lesson-item { cursor: pointer; }
    .lesson-item:hover:not(.locked) {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.18);
    }

    .curriculum-header { font-size: 1.4rem; margin-top: 2.25rem; }

    /* ======================================================================
       LESSON  (/learn/) — the whiteboard
       ====================================================================== */

    /* A pen cursor over the drawing surface and the normal arrow everywhere
       else, so it is obvious where writing works. */
    #board, #feedbackCanvas, #thelobookCanvas { cursor: crosshair; }
    #board.no-cursor { cursor: none; }

    /* The phone reaches its controls through a floating handle. With a mouse the
       toolbar is always on screen, so the handle is redundant clutter. */
    #mobileMenuFab, #mobileMenu { display: none !important; }

    /* A real desktop control strip rather than a thumb-reach row. */
    #bottomBar {
        padding: 0.6rem 1.25rem;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.04);
    }

    #bottomBar .control-btn {
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    }
    #bottomBar .control-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        filter: brightness(1.05);
        box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.28);
    }
    #bottomBar .control-btn:active:not(:disabled) { transform: translateY(0); }
    #bottomBar .control-btn:disabled { cursor: default; opacity: 0.55; }

    /* Focus rings — a mouse user may still tab, and the app sets none. */
    .control-btn:focus-visible,
    .nav-item:focus-visible,
    .btn:focus-visible {
        outline: 2px solid var(--thelo-blue, #2563EB);
        outline-offset: 2px;
    }

    /* MCQ answers are clicked, not tapped: make that legible. */
    .mcq-option-btn { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
    .mcq-option-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.25);
    }

    /* ======================================================================
       SCAN  (/scan/)
       ====================================================================== */
    .scan-wrap, #view-scan main { max-width: 900px; margin: 0 auto; }

    /* "Take photo" means a rear camera pointed at a worksheet. A desktop either
       has no camera or has one pointed at the student's face, so the button can
       only disappoint — the file picker is the whole story here. The gallery
       button is promoted to primary in thelo-web.js to match. */
    #btn-camera { display: none !important; }

    /* Gallery is the only way in now, so it should look like the action rather
       than the secondary option. Styled by id instead of swapping in .btn-primary
       from script: the page's own .btn rules kept winning the background while
       the class's white text applied, which produced a white-on-white button. */
    #btn-gallery {
        width: 100%;
        max-width: 380px;
        background: var(--thelo-blue, #2563EB) !important;
        color: #FFFFFF !important;
        border: none !important;
    }
    #btn-gallery:hover:not(:disabled) {
        background: var(--thelo-blue-dark, #1D4ED8) !important;
    }

    /* ======================================================================
       Shared touches
       ====================================================================== */

    /* The app disables selection for touch. On desktop let people select the
       text of a question — but never on the drawing surfaces. */
    body { -webkit-user-select: text; user-select: text; }
    canvas { -webkit-user-select: none; user-select: none; }

    ::selection { background: rgba(37, 99, 235, 0.18); }

    * { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    *::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }
}

/* ---------------------------------------------------------------------------
   First-run hint explaining mouse drawing. Outside the media query so the script
   can show it deliberately; it is only ever inserted on a fine pointer.
   --------------------------------------------------------------------------- */
#thelo-mouse-hint {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    transform: translateX(-50%) translateY(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    color: #F8FAFC;
    font: 600 0.9rem/1.2 'Manrope', system-ui, sans-serif;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#thelo-mouse-hint.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#thelo-mouse-hint button {
    all: unset;
    cursor: pointer;
    pointer-events: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
}
#thelo-mouse-hint button:hover { background: rgba(255, 255, 255, 0.24); }