/* ══════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT
   The same .m-app shell and screens as the phone (css/mobile.css), laid out
   for a wide window: the bottom tab bar becomes a sidebar with the brand,
   the account card and the theme switch; lists become grids; sign-in and
   onboarding become centred pages instead of full-bleed phone screens.

   Logged-out desktop visitors are guests, not gated (js/mobile.js render()),
   so the guest/logged-in split is visible here as .m-app.is-guest.
   ══════════════════════════════════════════════════════════════════════ */

/* Desktop-only pieces exist in the markup at every width. */
.m-desk-only{display:none}

/* What logging in adds — the sidebar, the guest landing and locked screens. */
.m-perks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.m-perks li{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.m-perks b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--green-deep)}
.m-perks span{font-size:13px;line-height:1.45;color:var(--mute-2)}

@media (min-width:768px){

.m-desk-only{display:revert}

/* ── Frame: sidebar | header + body ──────────────────────────────────── */
.m-main.on{
  display:grid;
  grid-template-columns:clamp(220px,20vw,272px) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"nav head" "nav body";
}
.m-header{grid-area:head;padding:30px clamp(24px,4vw,56px) 18px;border-bottom:1px solid var(--line)}
.m-head-title{font-size:30px}
.m-body{grid-area:body;padding:28px clamp(24px,4vw,56px) 64px}
.m-body>.m-screen{max-width:1180px;margin:0 auto}
.m-screen.on{animation:m-fade .28s cubic-bezier(.22,1,.36,1)}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.m-tabs{
  grid-area:nav;display:flex;flex-direction:column;gap:4px;
  border-top:none;border-right:1px solid var(--line);
  padding:26px 16px 20px;overflow-y:auto;background:var(--surface);
}
.m-side-brand{padding:0 8px 24px}
.m-side-wordmark{display:inline-block;font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:.16em;color:var(--on-accent);background:var(--green);border-radius:16px;padding:10px 18px;user-select:none}
.m-side-campus{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:12px}

.m-tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:6px 8px;border-radius:999px;text-align:left;transition:background .16s}
.m-tab:hover{background:var(--tint)}
.m-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-tab-pill{width:40px;height:36px}
.m-tab-label{font-size:14px}
.m-tab.is-active{background:var(--tint)}
.m-tab.is-active .m-tab-pill{background:var(--green);color:var(--on-accent)}

.m-side-foot{margin-top:auto;padding-top:22px;display:grid;gap:12px}
.m-side-guest{padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--base)}
.m-side-kicker{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.m-side-guest p{font-size:13px;line-height:1.5;color:var(--mute-2);margin:8px 0 0}
.m-side-login{height:44px;font-size:14px;box-shadow:none}
.m-side-me{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:22px;background:var(--base);color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;transition:background .16s}
.m-side-me:hover,.m-side-me.is-active{background:var(--tint)}
.m-side-me:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-side-me-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--green);color:var(--on-accent);font-family:var(--mono);font-weight:500;font-size:13px}
.m-side-me-text{min-width:0;display:grid;gap:2px}
.m-side-me-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-side-me-sub{font-family:var(--mono);font-size:11px;color:var(--mute-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-side-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;font-family:var(--mono);font-size:13px;color:var(--mute-2);cursor:pointer}
.m-side-credit{padding:0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--mute-3)}

/* ── Header actions: guests get "Log in", members the bell + avatar ──── */
.m-login-btn{height:42px;padding:0 22px;border:none;border-radius:999px;background:var(--green);color:var(--on-accent);font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.03em;cursor:pointer}
.m-login-btn:hover{background:var(--green-deep)}
.m-login-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-app:not(.is-guest) .m-login-btn{display:none}
.m-app.is-guest #m-bell-btn,.m-app.is-guest #m-avatar-btn{display:none}
/* Guests have no timetable of their own, so the per-student controls on
   Today give way to the guest landing (js/mobile.js guestHomeHTML). */
.m-app.is-guest #m-courses-btn,.m-app.is-guest #m-friends-btn,
.m-app.is-guest #m-today .m-seg{display:none!important}

/* ── Shared pieces, roomier ──────────────────────────────────────────── */
.m-btn-primary,.m-btn-ghost{transition:background .16s,transform .16s}
.m-btn-primary:hover{background:var(--green-deep);transform:translateY(-1px)}
.m-btn-ghost:hover,.m-guest-btn:hover{background:var(--tint-hover)}
.m-seg{max-width:460px}
/* Chips wrap instead of scrolling sideways: there is room, and a mouse has
   no swipe. */
.m-chip-row{flex-wrap:wrap;overflow:visible}
.m-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px;align-items:start}
.m-empty{max-width:640px}
.m-toast{left:50%;right:auto;bottom:32px;transform:translateX(-50%);min-width:240px;max-width:480px}
.m-courses-btn{max-width:460px}
#m-today .m-courses-btn{display:inline-flex;margin-right:10px}

/* Today: the live banner sits beside its list on wide screens. */
.m-now{max-width:640px}
.m-daycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}

/* Lookup and exam filters read better as a two-column form. */
#m-lookup-fields,#m-exam-filters{max-width:900px}

/* Free rooms */
.m-rooms-bar{max-width:640px}
.m-block-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-width:900px}
#m-rooms-out .m-rows,#m-rooms-out .m-room-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.m-room-name{width:84px}
.m-room:hover{filter:brightness(.98)}

/* Faculty: a card grid, and a detail page that does not stretch. */
.m-search-wrap{max-width:640px}
.m-faclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.m-fac{transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s}
.m-fac:hover{transform:translateY(-2px);background:var(--tint)}
#m-facdetail-out,#m-facdetail .m-back{max-width:760px}

/* Exams */
.m-hero-dark{max-width:640px}

/* Profile reads as a settings page. */
#m-profile-out{max-width:760px}

/* ── Locked screens and the guest landing ────────────────────────────── */
.m-locked{max-width:560px;margin:0 auto}
.m-locked .m-locked-btn{max-width:320px}
.m-guest-home{display:grid;gap:28px}
.m-guest-hero .m-hero{font-size:44px;margin-top:10px}
.m-guest-hero .m-hero-sub{max-width:none}
.m-guest-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.m-guest-tool{display:grid;gap:6px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:26px;background:var(--surface);color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s}
.m-guest-tool:hover{transform:translateY(-2px);background:var(--tint)}
.m-guest-tool:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-guest-tool b{font-family:var(--mono);font-weight:500;font-size:17px}
.m-guest-tool span{font-size:13.5px;line-height:1.5;color:var(--mute-2)}
.m-guest-unlock .m-perks{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.m-guest-unlock .m-locked-btn{max-width:320px}

/* ── Sign in and onboarding: centred pages ───────────────────────────── */
.m-app>.m-signin.on{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;align-content:center;gap:clamp(32px,6vw,96px);
  padding:48px max(40px,calc((100% - 1080px)/2));
}
.m-signin-top{padding-top:0}
.m-signin .m-hero{font-size:clamp(44px,5vw,64px)}
.m-signin .m-hero-sub{font-size:16px;max-width:36ch}
.m-signin-bottom{padding:32px;border:1px solid var(--line);border-radius:32px;background:var(--surface)}
.m-app>.m-onboard.on{justify-content:center;padding:48px max(32px,calc((100% - 560px)/2))}

/* ── Overlays: arcade, My courses, friends ───────────────────────────── */
.m-arcade-head,.m-arcade-body{width:100%;max-width:820px;margin:0 auto}
.m-arcade-body{padding-bottom:40px}
.m-stage-holder canvas{border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);box-shadow:0 18px 44px rgba(22,45,18,.18)}
.m-stage-x{top:24px;right:24px}

/* The install bar floats bottom-right instead of above a tab bar. */
.pwa-install-bar{left:auto;right:24px;bottom:24px;max-width:420px}

} /* end desktop layout */

/* Narrow desktops: a slimmer sidebar. */
@media (min-width:768px) and (max-width:1023px){
  .m-rows{grid-template-columns:1fr}
  .m-app>.m-signin.on{grid-template-columns:1fr;align-content:center}
}