/* ════════════════════════════════════════════════════════════════════
   desktop.css - the desktop layer (no-frame layout)

   At >=960px the shell is a simple two-column row sitting directly on
   the page background. Left column is the nav (right-aligned text
   tabs), separated by a vertical hairline from the main content. No
   outer card frame; same background tone as the mobile experience.

   Shell HTML (.d-shell / .d-sidebar / .d-topbar / .d-main / .d-content)
   is emitted by desktop.js's desktopShell() wrapper.
   ════════════════════════════════════════════════════════════════════ */

/* Elements with .d-only are hidden on mobile, visible on desktop (>=960px) */
.d-only{display:none}

/* ── tablet range (600-959): wide mobile, viewport-pinned tabbar ──
   Strip the 600px desktop-card frame: #app goes full-bleed against
   the page background, content stays in its 440px center column,
   and the tabbar pins to the viewport bottom matching the content
   width so it doesn't visually disconnect from the column above. */
@media (min-width:600px) and (max-width:959px){
  body{padding:0;background:var(--bg)}
  #app{
    min-height:100vh;max-width:none;width:100%;
    border:none;box-shadow:none;border-radius:0;
  }
  .screen{min-height:100vh}
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;
    max-width:440px;margin:0 auto;
    border-radius:var(--radius-8) var(--radius-8) 0 0;
  }
}

@media (min-width:960px){

  /* ── #app: full-bleed; the layout below sits directly on it ─── */
  #app{
    max-width:none;width:100%;min-height:100vh;
    border-radius:0;border:none;box-shadow:none;
    overflow:visible;background:transparent;
  }
  body{padding:0;background:var(--bg)}

  /* ── shell: centered two-column row, page scrolls the browser ── */
  /* The shell is NOT fixed - it lives in normal flow so the document
     scroll lives on window/body, and the browser's scrollbar sits at
     the actual right edge of the viewport. */
  .d-shell{
    position:relative;display:flex;
    align-items:flex-start;justify-content:center;
    padding:var(--space-12) var(--space-12) 0;box-sizing:border-box;
    min-height:100vh;background:transparent;
  }
  /* Sidebar: icon-dominant nav tiles. Scrolls with the page (not sticky)
     so it doesn't block the gradient as the user moves around. */
  .d-sidebar{
    flex:0 0 132px;width:132px;
    display:flex;flex-direction:column;
    padding:var(--space-11) var(--space-9) 0 0;box-sizing:border-box;
    background:transparent;
    align-self:flex-start;
  }
  .d-sidebar-nav{
    display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch;
    position:relative;
  }
  /* Welcome screen: cap the content column so the hero/button don't
     stretch edge-to-edge on widescreens. The shell isn't applied
     pre-experiment, so the view sits directly on #app. */
  #app:has(.welcome){display:flex;align-items:flex-start;justify-content:center}
  .welcome{
    width:100%;max-width:680px;
    padding:180px var(--space-9) 80px;
    min-height:auto;
    margin:0 auto;
  }
  .welcome .hero{font-size:48px;letter-spacing:-.035em;line-height:1}
  .welcome .btn.primary{
    width:auto;display:inline-flex;
    padding:var(--space-7) var(--space-10);
    font-size:14px;border-radius:var(--radius-5);
    box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  /* Hairline separator hugging the right edge of the nav stack -
     extends ~7.5% above and below the stack (15% total longer than
     the tab heights) and fades at both ends so the line dissolves
     into the page rather than stopping hard. */
  .d-sidebar-nav::after{
    content:'';position:absolute;top:-7.5%;bottom:-7.5%;right:-20px;
    width:1px;background:var(--border);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    pointer-events:none;
  }
  .d-nav-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
    padding:var(--space-4) var(--space-3);border-radius:var(--radius-4);
    background:transparent;border:0;cursor:pointer;
    font-family:inherit;color:var(--text-dim);text-align:center;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .d-nav-item .mdi{font-size:26px;opacity:.85;line-height:1}
  .d-nav-item .d-nav-label{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;line-height:1;
  }
  @media (hover:hover){
    .d-nav-item:hover{background:color-mix(in srgb, var(--text) 6%, transparent);color:var(--text)}
    .d-nav-item:hover .mdi{opacity:1}
  }
  .d-nav-item.is-active{color:var(--accent)}
  .d-nav-item.is-active .mdi{opacity:1}

  /* Main column: capped width, no internal scrolling. The document
     scroll lives on window/body, so the browser scrollbar sits at the
     viewport's right edge instead of next to the content. */
  .d-main{
    flex:1 1 auto;min-width:0;width:100%;max-width:768px;
    display:block;
    padding:0 var(--space-11) var(--space-12);box-sizing:border-box;
    background:transparent;
  }

  /* Topbar sits at the top of the main column. Fully transparent so the
     accent glow gradient bleeds through; scrolls with the page. The
     horizontal padding (--space-9 = 32px) matches the per-view content
     wrappers' padding so the title aligns with the cards below it. */
  .d-topbar{
    padding:var(--space-8) var(--space-9);
    display:flex;align-items:center;gap:var(--space-7);
    border-bottom:none;
    background:transparent;
  }
  .d-topbar-crumb{
    display:flex;align-items:center;flex:0 0 auto;
  }
  .d-topbar-title{
    font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text);
    line-height:1.1;white-space:nowrap;
  }
  .d-topbar-avatar{cursor:pointer}

  /* Desktop-specific tweak: a touch more breathing room around the
     pill and slightly larger menu. The base styles live in styles.css
     so the same pill works on mobile. */
  .d-account-avatar{width:26px;height:26px;font-size:10px}
  .d-account-email{max-width:160px}

  /* Courses '+' button + expanding menu (Add course / Import) */
  .d-add-btn{
    width:42px;height:42px;border-radius:var(--radius-pill);
    background:var(--accent);color:#0a0a0a;
    border:1px solid transparent;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;
    box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
    transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .d-add-btn .mdi{font-size:22px;line-height:1;color:#0a0a0a}
  @media (hover:hover){
    .d-add-btn:hover{box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 26%, transparent)}
  }
  .d-add-btn.is-open{transform:rotate(45deg)}

  .d-add-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    min-width:200px;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius-5);
    box-shadow:0 14px 32px rgba(0,0,0,.4);
    padding:var(--space-3);
    display:flex;flex-direction:column;gap:var(--space-1);
    z-index:40;
    animation:dialogIn var(--dur-fast) var(--ease);
  }
  .d-add-item{
    display:flex;align-items:center;gap:var(--space-5);
    padding:var(--space-5) var(--space-6);border-radius:var(--radius-3);
    background:transparent;border:0;cursor:pointer;
    font-family:inherit;font-size:13px;color:var(--text);
    text-align:left;
    transition:background var(--dur-fast) var(--ease);
  }
  @media (hover:hover){
    .d-add-item:hover{background:var(--bg-card)}
  }

  /* Active-timer pill in the topbar */
  .d-timer-pill{
    display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-7);
    border-radius:var(--radius-pill);
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,transparent) 0%, color-mix(in srgb,var(--accent) 4%,transparent) 100%);
    border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    cursor:pointer;color:var(--text);font-family:inherit;
  }
  .d-timer-pill.is-paused{
    background:linear-gradient(180deg, color-mix(in srgb,var(--orange) 12%,transparent) 0%, color-mix(in srgb,var(--orange) 4%,transparent) 100%);
    border-color:color-mix(in srgb,var(--orange) 35%,transparent);
  }
  .d-timer-sep{width:1px;height:16px;background:color-mix(in srgb,var(--accent) 25%,transparent)}
  .d-timer-pill.is-paused .d-timer-sep{background:color-mix(in srgb,var(--orange) 25%,transparent)}
  .d-timer-btn{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:var(--radius-6);margin-left:var(--space-1);
    background:var(--bg-card);border:1px solid var(--border);cursor:pointer;color:var(--text);
  }
  .d-timer-stop{background:var(--accent);border-color:var(--accent-dim);color:#0a0a0a}
  @media (hover:hover){
    .d-timer-pill:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
    .d-timer-pill.is-paused:hover{border-color:color-mix(in srgb,var(--orange) 55%,transparent)}
    .d-timer-btn:hover{filter:brightness(1.15)}
  }

  /* Content area inside the main column. No overflow:auto - the
     browser scrolls the whole page. Content just flows naturally. */
  .d-content{display:block;position:relative}

  /* Show the browser's scrollbar on the right edge. styles.css globally
     hides scrollbars - override at the document level on desktop. */
  html,body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--text-muted) 35%, transparent) transparent}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:block;width:10px;height:10px}
  html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--text-muted) 35%, transparent);
    border-radius:var(--radius-2);border:2px solid transparent;background-clip:padding-box;
  }
  @media (hover:hover){
    html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--text-muted) 55%, transparent);background-clip:padding-box}
  }

  /* ── hide mobile chrome that the desktop replaces ────────────── */
  .tabbar{display:none}
  .fab,.fab-stack,.fab-overlay{display:none}
  /* Per-view topbars are redundant - d-topbar shows the same crumb. */
  .d-content .screen > .topbar,
  .d-content .screen .items-header > .topbar{display:none}
  .d-only{display:inline-flex}

  /* Hide on-screen kbd hint pills throughout the desktop chrome -
     they're cluttering the UI; the shortcuts still work. */
  .d-kbd{display:none}

  /* ── screens reflow inside the d-content pane ────────────────── */
  .d-content .screen{
    min-height:auto;padding-bottom:0;
    padding:0 0 var(--space-10);display:block;
  }
  .d-content .screen.no-tab{padding:0}

  .d-content .screen .pane,
  .d-content .screen .pane-tight{padding-left:0;padding-right:0}

  /* Mobile reserves --tabbar-clear for the bottom bar; collapse it. */
  .d-content{--tabbar-clear:0px}

  /* views.admin's inner content div hardcodes padding-bottom:90px. Squash it. */
  .d-content .screen > div[style*="padding-bottom:90px"]{padding-bottom:0}

  /* Courses sticky-header bar uses a translucent bg + blur on mobile so
     it floats over the list. On desktop the d-topbar is the chrome -
     this strip just adds noise. Strip the bg + blur and unstick it. */
  .d-content .items-header{
    position:static;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  /* ── accent glow ─────────────────────────────────────────────── */
  /* Uniform brightness across every page - the mobile per-view opacity
     bumps (home/welcome=1, items=.95, default=.45) created an obvious
     flash when switching tabs. Pick one value and stick with it. */
  #app::before{
    top:-140px;right:-100px;width:380px;height:380px;
    position:fixed;opacity:1;
  }

  /* ── modals: centered cards ──────────────────────────────────── */
  .sheet-backdrop{
    align-items:center;justify-content:center;padding:var(--space-10);
    max-width:none;left:0;right:0;transform:none;margin:0;border-radius:0;overflow:visible;
  }
  .sheet{
    width:auto;min-width:480px;max-width:720px;max-height:88vh;
    border-radius:var(--radius-6);border:1px solid var(--border);
    animation:dialogIn var(--dur-med) cubic-bezier(.2,.7,.3,1);
  }
  .sheet.no-anim{animation:none}
  @keyframes dialogIn{
    from{transform:translateY(12px) scale(.98);opacity:0}
    to{transform:translateY(0) scale(1);opacity:1}
  }
  .sheet-handle{display:none}
  .sheet-body{padding:var(--space-10)}
  .sheet-footer{padding:var(--space-9) var(--space-10);border-radius:0 0 var(--radius-6) var(--radius-6)}
  .sheet > .sheet-close{display:flex;position:absolute;top:var(--space-6);right:var(--space-6);width:24px;height:24px;border:none;font-size:14px;color:var(--text-muted);z-index:3}
  .sheet > .sheet-close:hover{background:var(--bg-hover);color:var(--text)}

  /* Data tab: action stacks become responsive grids on desktop - 1 button
     spans the row, 2 split it, 3 fit side by side. */
  .btn-stack{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--space-4)}
}