/* ══════════════════════════════════════════════════════════════════════
   PHONE LAYOUT
   Everything here is additive: the desktop look is untouched. The mobile
   shell (.m-app) is display:none by default and only takes over inside the
   breakpoint below, where the desktop .shell is hidden instead. The desktop
   DOM is never removed — js/app.js drives it and its startup barrier
   requires every one of those IDs to exist.

   Tokens and type follow VTable mobile app design/design_handoff_vtable_app.
   Mobile appearance is controlled by data-mobile-theme.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Figtree:wght@400;500;600;700&display=swap');

.m-app{display:none}

@media (max-width:767px){

.m-app{
  color-scheme:light; --base:#fff; --solid:#16210f; --on-accent:#fff;
  --accent-rgb:47,107,49; --bright-rgb:143,199,141;
  --ink:#16210f; --green:#2f6b31; --green-deep:#1f4a22; --green-bright:#8fc78d;
  --tint:#edf5eb; --tint-hover:#e0eedd; --surface:#fbfdfa; --page:#f2f6f0;
  --neutral:#eef1ec; --slot-free:#7fb87d; --slot-busy:#dfe3dc; --seat-section:#cfe6cb;
  --red:#b3402f; --red-deep:#8a2f22; --red-bright:#e2897c; --red-soft:#c0563f;
  --line:rgba(22,33,15,.09); --line-strong:rgba(22,33,15,.14);
  --mute:rgba(22,33,15,.5); --mute-2:rgba(22,33,15,.62); --mute-3:rgba(22,33,15,.45);
  --mono:'DM Mono','JetBrains Mono',monospace; --sans:'Figtree','Inter',system-ui,sans-serif;
  display:flex; flex-direction:column; position:fixed; inset:0; z-index:40;
  background:var(--base); color:var(--ink); font-family:var(--sans);
  overflow:hidden; overscroll-behavior:none;
  /* index.html sets viewport-fit=cover, so the layout viewport runs edge to
     edge. Inset the top so the header never sits under a notch or a status
     bar; resolves to 0 in fullscreen, where there is no system bar at all. */
  padding-top:env(safe-area-inset-top);
}

/* Desktop chrome stands down on phones. */
.shell,#bg3d,.profile-launcher,.theme-toggle{display:none!important}
/* The pet belongs to the desktop layout only. */
.mascot{display:none!important}
body{padding-bottom:0!important;background:var(--page)}
body.has-pwa-bar{padding-bottom:0!important}
#app{border-radius:0;box-shadow:none;min-height:100vh}

/* ── Screens ─────────────────────────────────────────────────────────── */
.m-screen{display:none}
.m-screen.on{display:block;animation:m-slide .3s cubic-bezier(.22,1,.36,1)}
.m-app>.m-screen.on{display:flex;flex-direction:column;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
@keyframes m-slide{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(var(--bright-rgb),.7)}70%{box-shadow:0 0 0 8px rgba(var(--bright-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--bright-rgb),0)}}
.m-reveal{animation:m-fade .3s cubic-bezier(.22,1,.36,1)}

/* ── Boot splash ─────────────────────────────────────────────────────── */
.m-app>.m-splash.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;height:100%;background:var(--base);animation:none}
.m-splash-mark{font-family:var(--mono);font-weight:500;font-size:30px;letter-spacing:.16em;color:var(--green)}
.m-splash-tag{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ── Sign in ─────────────────────────────────────────────────────────── */
.m-signin,.m-onboard{padding:24px 22px;justify-content:space-between;gap:24px}
.m-signin-top{padding-top:28px}
.m-wordmark{font-family:var(--mono);font-weight:500;font-size:27px;letter-spacing:.16em;color:var(--on-accent);background:var(--green);border-radius:22px;padding:16px 26px;display:inline-block}
.m-hero{font-family:var(--mono);font-weight:500;font-size:38px;line-height:1.08;letter-spacing:-.03em;margin-top:28px}
.m-hero-sub{font-size:14px;line-height:1.5;color:var(--mute-2);margin-top:14px;max-width:30ch}
.m-signin-bottom{padding-bottom:12px}
.m-field-label{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px}
.m-input-wrap{display:flex;align-items:center;gap:8px;height:58px;border:1px solid var(--line-strong);border-radius:999px;padding:0 18px;background:var(--surface)}
.m-input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--mono);font-size:17px;color:var(--ink)}
.m-input::placeholder{color:var(--mute-3)}
.m-signin-status{font-size:12.5px;line-height:1.45;color:var(--mute-2);min-height:18px;margin:10px 2px 0}
.m-signin-status.is-error{color:#a8352a}
.m-btn-primary{width:100%;height:58px;margin-top:12px;border:none;border-radius:999px;background:var(--green);color:var(--on-accent);font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 24px rgba(var(--accent-rgb),.26);transition:background .16s,transform .16s}
.m-btn-primary:active{background:var(--green-deep);transform:translateY(-2px)}
.m-btn-primary[disabled]{opacity:.65}
.m-btn-ghost{width:100%;height:50px;margin-top:10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--tint);color:var(--green-deep);font-family:var(--mono);font-weight:500;font-size:13.5px;letter-spacing:.04em;cursor:pointer}
.m-btn-ghost:active{background:var(--tint-hover)}
.m-signin-foot{text-align:center;font-size:11.5px;color:var(--mute-3);margin-top:16px}
.m-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:var(--on-accent);border-radius:50%;animation:m-spin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* ── Onboarding ──────────────────────────────────────────────────────── */
.m-kicker{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.m-title-lg{font-family:var(--mono);font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.02em;margin-top:8px}
.m-onboard-copy{font-size:13.5px;line-height:1.5;color:var(--mute-2);margin-top:10px}
.m-onboard-rows{margin:22px 0;display:flex;flex-direction:column;gap:10px}
.m-orow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 16px}
.m-orow-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);width:66px;flex-shrink:0}
.m-orow-value{font-weight:600;font-size:14px;flex:1;min-width:0}

/* ── Header ──────────────────────────────────────────────────────────── */
.m-main{display:none;flex-direction:column;height:100%;min-height:0}
.m-main.on{display:flex}
.m-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 10px;flex-shrink:0;background:var(--base)}
.m-head-title{font-family:var(--mono);font-weight:500;font-size:22px;line-height:1;letter-spacing:-.01em;margin-top:5px}
.m-head-sub{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:7px}
.m-head-sub[hidden]{display:none}
.m-header-actions{display:flex;gap:8px;flex-shrink:0}
.m-icon-btn,.m-avatar-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink);position:relative}
.m-icon-btn svg{width:19px;height:19px}
.m-avatar-btn{background:var(--green);color:var(--on-accent);border-color:var(--green);font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em}

/* ── Body + tabs ─────────────────────────────────────────────────────── */
.m-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 36px}
.m-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--base);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}
.m-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 9px;border:none;background:none;cursor:pointer;color:var(--mute-3)}
.m-tab-pill{width:46px;height:28px;border-radius:999px;display:grid;place-items:center;transition:background .16s}
.m-tab-pill svg{width:19px;height:19px}
.m-tab.is-active{color:var(--green-deep)}
.m-tab.is-active .m-tab-pill{background:var(--tint)}
.m-tab-label{font-family:var(--mono);font-weight:500;font-size:10.5px}
.m-tab.is-active .m-tab-label{font-weight:600}

/* ── Segmented control ───────────────────────────────────────────────── */
.m-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--tint);border-radius:999px;padding:4px;margin:4px 0 16px}
.m-seg-3{grid-template-columns:repeat(3,1fr)}
.m-seg-btn{height:40px;border:none;border-radius:999px;background:none;font-family:var(--mono);font-weight:500;font-size:13px;color:var(--mute-2);cursor:pointer}
.m-seg-btn.is-active{background:var(--base);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(22,45,18,.14)}

/* ── Shared blocks ───────────────────────────────────────────────────── */
.m-section-label{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:18px 0 9px}
.m-empty{border:1px dashed var(--line-strong);border-radius:28px;padding:26px 20px;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--mute-2)}
.m-chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-chip-row::-webkit-scrollbar{display:none}
.m-chip{flex-shrink:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;padding:9px 15px;cursor:pointer;white-space:nowrap}
.m-chip.is-on{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.m-chip.is-ink.is-on{background:var(--solid);border-color:var(--solid)}
.m-pill{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:999px;background:var(--neutral);white-space:nowrap}
.m-pill.is-green{background:var(--green);color:var(--on-accent)}
.m-toast{position:fixed;left:20px;right:20px;bottom:104px;z-index:60;background:var(--solid);color:var(--on-accent);font-family:var(--mono);font-size:13px;text-align:center;padding:13px 16px;border-radius:999px;box-shadow:0 12px 32px rgba(22,45,18,.35)}
.m-toast[hidden]{display:none}
.m-dark-mode-tip{position:absolute;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:15;display:flex;align-items:center;gap:10px;max-width:400px;margin:0 auto;padding:12px 14px 12px 20px;border:1px solid var(--line-strong);border-radius:28px;background:var(--surface);color:var(--green);box-shadow:0 6px 20px rgba(22,45,18,.12)}
.m-dark-mode-tip[hidden]{display:none}
.m-dark-mode-tip p{display:grid;gap:4px;min-width:0;margin:0;font-size:13px;line-height:1.5}
.m-dark-mode-tip strong{font-size:14px;font-weight:700}
.m-dark-mode-tip button{flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:24px;cursor:pointer}
.m-dark-mode-tip button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ── Install prompt ──────────────────────────────────────────────────
   Shared with the desktop (#pwa-install-bar lives in all-modals.html and is
   driven by app.js), restyled here to the phone's design language. It floats
   ABOVE the tab bar rather than pinning to bottom:0 like the desktop bar —
   sitting at the very bottom would bury the primary navigation. */
.pwa-install-bar{
  position:fixed; left:12px; right:12px; z-index:55;
  bottom:calc(78px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:22px;
  background:var(--surface); border:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
  box-shadow:0 14px 34px rgba(22,45,18,.22);
  font-family:var(--sans); max-width:none;
}
.pwa-install-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0}
.pwa-install-text{min-width:0;gap:2px}
.pwa-install-title{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:0;color:var(--ink)}
.pwa-install-sub{font-size:11.5px;line-height:1.35;color:var(--mute-2)}
.pwa-install-btn{
  background:var(--green); border-radius:999px; padding:10px 16px;
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.02em;
  flex-shrink:0; width:auto;
}
.pwa-install-btn:hover{background:var(--green-deep)}
.pwa-install-close{color:var(--mute-3);font-size:22px;flex-shrink:0;padding:0 2px}
/* The iOS "Add to Home Screen" sheet sits over everything, tab bar included. */
.pwa-ios-sheet{z-index:70}
.pwa-ios-card{border-radius:26px;font-family:var(--sans)}
.pwa-ios-card h3{font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:0;color:var(--green-deep)}
.pwa-ios-close{background:var(--green);border-radius:999px;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.02em}
.m-back{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;font-family:var(--mono);font-size:12.5px;color:var(--ink);padding:8px 15px;margin:4px 0 14px;cursor:pointer}

/* ── Class rows (Today / Week / Lookup) ──────────────────────────────── */
.m-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px}
.m-meta-row>span{min-width:0;flex-shrink:0}
.m-meta-row b{color:var(--green);font-weight:500;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-rows{display:flex;flex-direction:column;gap:9px}
.m-row{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 16px}
.m-row.is-now{background:var(--tint);border-color:rgba(var(--accent-rgb),.45)}
.m-row.is-past{opacity:.55}
.m-row-time{width:58px;flex-shrink:0}
.m-row-start{font-family:var(--mono);font-size:15px}
.m-row-end{font-family:var(--mono);font-size:12px;color:var(--mute)}
.m-row-rule{width:1px;align-self:stretch;background:var(--line-strong);flex-shrink:0}
.m-row-main{flex:1;min-width:0}
.m-row-name{font-weight:700;font-size:16px;line-height:1.25;word-break:break-word}
.m-row-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.m-note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-bottom:6px;display:inline-block}
.m-note.cancel{background:rgba(168,53,42,.1);color:#a8352a}
.m-note.resch{background:rgba(184,108,0,.12);color:#8a5200}

/* ── Today banner + gaps ─────────────────────────────────────────────── */
.m-now{position:relative;overflow:hidden;background:var(--green);color:var(--on-accent);border-radius:30px;padding:20px;box-shadow:0 14px 30px rgba(var(--accent-rgb),.24);user-select:none}
.m-now::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1)}
.m-now-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.m-now-dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);animation:m-pulse 2s infinite}
.m-now-name{font-family:var(--mono);font-weight:500;font-size:24px;line-height:1.15;margin:12px 0 16px;position:relative}
/* Idle variant: same card, shown when nothing is running right now. No live
   dot pulse, and the copy sets its own smaller size so two lines still fit
   inside a 390px screen. */
/* A class in progress reads as "occupied", the same language the room cards
   use — light red rather than the green of a free/upcoming state. */
.m-now.is-live{background:var(--red-soft);box-shadow:0 14px 30px rgba(179,64,47,.22)}
.m-now.is-live .m-now-dot{background:var(--red-bright)}
.m-now.is-idle .m-now-dot{animation:none}
.m-now.is-idle .m-now-name{font-size:21px;line-height:1.3;margin-bottom:2px}
.m-now-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative}
.m-now-stat-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.m-now-stat-value{font-family:var(--mono);font-weight:500;font-size:18px;margin-top:3px;word-break:break-word}
.m-home-exam-stack{display:grid;gap:10px}
.m-home-exam-stack .m-now{margin:0}
.m-home-exam-stack .m-now:not(.is-live) .m-now-dot{animation:none}
.m-home-exam-empty{display:none}
.m-gap{width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:var(--tint);border:1px dashed rgba(var(--accent-rgb),.55);border-radius:22px;padding:14px 16px;color:var(--green-deep);cursor:pointer;font-family:inherit}
.m-gap svg{width:18px;height:18px;flex-shrink:0}
.m-gap-text{flex:1;min-width:0;font-size:13px;font-weight:500;line-height:1.4}
.m-gap-go{font-family:var(--mono);font-size:12px;white-space:nowrap}
.m-locked{text-align:center;padding:48px 24px}
.m-locked-title{font-family:var(--mono);font-weight:500;font-size:16px;line-height:1.5}
.m-locked-btn{margin-top:18px}

/* ── Week ────────────────────────────────────────────────────────────── */
.m-daycards{display:flex;flex-direction:column;gap:12px}
.m-daycard{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--surface)}
.m-daycard-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 17px;background:var(--tint)}
.m-daycard.is-today .m-daycard-head{background:var(--solid);color:var(--on-accent)}
.m-daycard-day{font-family:var(--mono);font-weight:500;font-size:15px}
.m-daycard-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.m-daycard-body{padding:4px 17px}
.m-dayrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.m-daycard-body>.m-dayrow:first-child{border-top:none}
.m-dayrow-time{font-family:var(--mono);font-size:12px;color:var(--mute-2);grid-column:1/-1;line-height:1.5;overflow-wrap:anywhere}
.m-dayrow-name{flex:1;min-width:0;font-size:14px;font-weight:600;word-break:break-word}

/* ── Free rooms ──────────────────────────────────────────────────────── */
.m-rooms-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--solid);color:var(--on-accent);border-radius:22px;padding:14px 18px;margin:4px 0 6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.m-rooms-bar-left{display:flex;align-items:center;gap:9px}
.m-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);animation:m-pulse 2s infinite}
.m-step-label{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:18px 0 9px}
.m-block-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.m-block{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:26px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--ink);font-family:inherit}
.m-block.is-on{background:var(--solid);border-color:var(--solid);color:var(--on-accent)}
.m-block-letter{font-family:var(--mono);font-weight:500;font-size:21px}
.m-block-free{font-family:var(--mono);font-size:10px;opacity:.7}
.m-roomlist{display:flex;flex-direction:column;gap:9px;margin-top:6px}
/* The card owns the border/radius so the expanded panel sits inside it and the
   whole thing reads as one object; the button inside stays transparent. */
.m-room-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.m-room-card.is-open{border-color:rgba(var(--accent-rgb),.45);border-radius:26px}
.m-room{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;padding:13px 16px;cursor:pointer;color:var(--ink);font-family:inherit}
/* Free right now = the banner's solid green, in use = solid red, so the
   answer is readable in one pass down the list instead of having to decode
   eight little bars. */
.m-room-card.is-free{border-color:var(--green)}
.m-room.is-free{background:var(--green);color:var(--on-accent)}
.m-room.is-free .m-room-status{color:var(--on-accent)}
.m-room.is-free .m-slot{background:rgba(255,255,255,.3)}
.m-room.is-free .m-slot.is-free{background:var(--green-bright)}
.m-room.is-free .m-room-chev{color:rgba(255,255,255,.85)}
.m-room-card.is-busy{border-color:var(--red)}
.m-room.is-busy{background:var(--red);color:var(--on-accent)}
.m-room.is-busy .m-room-status{color:var(--on-accent)}
.m-room.is-busy .m-slot{background:rgba(255,255,255,.3)}
.m-room.is-busy .m-slot.is-free{background:var(--red-bright)}
.m-room.is-busy .m-room-chev{color:rgba(255,255,255,.85)}
.m-room-card.is-open .m-room:not(.is-free):not(.is-busy){background:var(--tint)}
.m-room-chev{width:16px;height:16px;flex-shrink:0;color:var(--mute);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.m-room-card.is-open .m-room-chev{transform:rotate(180deg);color:var(--green-deep)}
.m-room-detail{padding:2px 16px 15px;background:var(--tint);animation:m-expand .22s cubic-bezier(.22,1,.36,1)}
@keyframes m-expand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.m-room-live{display:grid;gap:3px;padding:10px 16px 12px;background:var(--tint);border-top:1px solid var(--line)}
.m-room-live-label{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.m-room-live-course{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--ink);word-break:break-word}
.m-room-live-free{font-family:var(--mono);font-size:11.5px;line-height:1.35;color:var(--green-deep)}
.m-room-summary{font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--green-deep);padding:8px 0 12px;border-top:1px solid rgba(var(--accent-rgb),.18)}
.m-slotrows{display:flex;flex-direction:column;gap:6px}
.m-slotrow{display:flex;align-items:center;gap:10px;background:var(--base);border-radius:999px;padding:7px 8px 7px 8px}
.m-slotpill{font-family:var(--mono);font-size:11px;background:var(--neutral);border-radius:999px;padding:4px 10px;white-space:nowrap;flex-shrink:0}
.m-slotwho{font-size:12.5px;line-height:1.35;color:var(--mute-2);min-width:0;word-break:break-word}
.m-slotwho.is-free{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.m-room-name{font-family:var(--mono);font-size:13px;width:58px;flex-shrink:0;word-break:break-word}
.m-slots{flex:1;min-width:0;display:flex;gap:3px}
.m-slot{flex:1;height:9px;border-radius:999px;background:var(--slot-busy)}
.m-slot.is-free{background:var(--slot-free)}
.m-room-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap;flex-shrink:0}
.m-room.is-free .m-room-status{color:var(--green)}
.m-caption{font-size:11.5px;line-height:1.5;color:var(--mute-3);margin-top:12px}

/* ── Faculty ─────────────────────────────────────────────────────────── */
.m-search-wrap{position:relative;margin:4px 0 12px}
.m-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--mute)}
.m-search{width:100%;height:52px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);padding:0 18px 0 44px;font-family:inherit;font-size:14px;color:var(--ink);outline:none}
.m-search::placeholder{color:var(--mute-3)}
.m-faclist{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.m-fac{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:12px 16px;cursor:pointer;font-family:inherit;color:var(--ink)}
.m-fac-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:14px;flex-shrink:0;color:var(--green-deep)}
.m-fac-main{flex:1;min-width:0}
.m-fac-name{font-weight:700;font-size:15px;line-height:1.25;word-break:break-word}
.m-fac-title{font-size:12.5px;color:var(--mute-2);margin-top:2px;word-break:break-word}
.m-fac-head{background:var(--tint);border-radius:32px;padding:22px;text-align:center}
.m-fac-head .m-fac-avatar{width:82px;height:82px;font-size:24px;margin:0 auto 14px}
.m-fac-head-name{font-family:var(--mono);font-weight:500;font-size:21px;line-height:1.2}
.m-fac-head-title{font-size:13px;color:var(--mute-2);margin-top:6px}
.m-fac-actions{display:flex;gap:10px;margin:16px 0}
.m-fac-actions .m-btn-primary{margin-top:0}
.m-detail-rows{display:flex;flex-direction:column;gap:9px}
.m-drow{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:13px 16px}
.m-drow-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.m-drow-value{font-size:14px;word-break:break-word}

/* ── Exams ───────────────────────────────────────────────────────────── */
.m-exam{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:13px 16px}
.m-exam-date{width:52px;height:56px;border-radius:16px;background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--mono)}
.m-exam.is-next .m-exam-date{background:var(--green);color:var(--on-accent)}
.m-exam-day{font-weight:500;font-size:18px;line-height:1}
.m-exam-mon{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;opacity:.75}
.m-exam-main{flex:1;min-width:0}
.m-exam-name{font-weight:700;font-size:15px;line-height:1.25;word-break:break-word}
.m-exam-meta{font-family:var(--mono);font-size:11.5px;color:var(--mute-2);margin-top:4px;word-break:break-word}
.m-hero-dark{position:relative;overflow:hidden;background:var(--solid);color:var(--on-accent);border-radius:30px;padding:22px;margin-bottom:16px}
.m-hero-dark::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(var(--bright-rgb),.14)}
.m-hero-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.m-hero-big{font-family:var(--mono);font-weight:500;font-size:34px;line-height:1.1;margin:8px 0 6px;position:relative}
.m-hero-line{font-size:13.5px;opacity:.85;position:relative;word-break:break-word}
.m-seat-card{background:var(--tint);border-radius:28px;padding:22px;text-align:center}
.m-seat-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.m-seat-meta{font-size:12px;line-height:1.4;color:var(--mute);margin-top:8px}
.m-seat-room{color:#c47d46;font-weight:700;white-space:nowrap}
.m-seat-value{font-family:var(--mono);font-weight:500;font-size:26px;color:var(--green);margin-top:6px}
.m-seat-name{font-weight:700;font-size:16px;margin-bottom:16px}

/* ── Profile ─────────────────────────────────────────────────────────── */
.m-pcard{background:var(--tint);border-radius:28px;padding:22px;display:flex;align-items:center;gap:15px;margin-bottom:8px}
.m-pcard-avatar{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--on-accent);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:20px;flex-shrink:0}
.m-pcard-name{font-weight:700;font-size:17px;word-break:break-word}
.m-pcard-sub{font-family:var(--mono);font-size:12px;color:var(--mute-2);margin-top:4px;word-break:break-word}
.m-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:13px 16px;margin-bottom:9px;cursor:pointer}
.m-toggle-row.is-pending{opacity:.6;cursor:not-allowed}
.m-toggle-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.m-toggle-label{font-size:14px;font-weight:600}
.m-toggle-help{font-size:11.5px;line-height:1.4;color:var(--mute-2);margin-top:2px}
.m-toggle{appearance:none;-webkit-appearance:none;flex-shrink:0;width:50px;height:29px;border-radius:999px;background:var(--slot-busy);position:relative;cursor:pointer;transition:background .18s}
.m-toggle::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(22,45,18,.2);transition:transform .18s}
.m-toggle:checked{background:var(--green)}
.m-toggle:checked::after{transform:translateX(21px)}
.m-toggle[disabled]{cursor:not-allowed}
/* The master switch sits above the categories it governs, so it reads as the
   heading of the group rather than another row in it. */
.m-toggle-master{background:var(--tint);border-color:transparent}
/* Categories while push is off. pointer-events blocks the label wrapper too —
   a disabled <input> alone still lets a tap on the surrounding <label> toggle
   it in some engines. The inputs are also genuinely disabled, so this is
   presentation, not the mechanism. */
.m-pref-group.is-locked{opacity:.42;filter:grayscale(1);pointer-events:none;user-select:none}
.m-soon{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(184,108,0,.12);color:#8a5200;margin-left:6px;vertical-align:middle}

/* ══ ARCADE ═══════════════════════════════════════════════════════════════
   The desktop game overlays are a dark full-screen scrim with a boxy modal —
   right for a browser window, wrong next to everything else on the phone. The
   games themselves are untouched; only their surroundings are rebuilt here in
   the same white / rounded / mono language as the rest of the app.

   Hide the desktop overlays outright: js/mobile.js borrows the <canvas> and
   the leaderboard out of them, and app.js keeps `.on` set on the overlay for
   as long as the game runs (its loop reads that class to know it is alive), so
   the overlay must be invisible rather than closed. That covers the desktop
   game picker and the chess picker too — the phone has its own. */
.cr-overlay{display:none!important}

.m-arcade{position:absolute;inset:0;z-index:20;background:var(--base);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);animation:m-fade .18s ease-out}
.m-arcade[hidden]{display:none}
.m-arcade-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.m-arcade-head-text{min-width:0}
.m-arcade-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px calc(24px + env(safe-area-inset-bottom))}

/* Picker */
.m-game-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:24px;padding:15px 17px;margin-bottom:10px;cursor:pointer;
  font-family:var(--sans);color:var(--ink);transition:background .15s,border-color .15s,transform .12s}
.m-game-card:active{transform:scale(.985);background:var(--tint)}
.m-game-emoji{font-size:30px;line-height:1;width:52px;height:52px;flex-shrink:0;border-radius:18px;
  background:var(--tint);display:grid;place-items:center}
/* Both children are spans, so the column has to be declared — inline is what
   makes a name and its description run together on one line. */
.m-game-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.m-game-name{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.m-game-desc{display:block;font-size:11.5px;line-height:1.4;color:var(--mute-2)}
.m-game-best{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);flex-shrink:0}
.m-game-card.is-soon .m-game-emoji{background:rgba(184,108,0,.12)}

/* ── Full-screen play surface ────────────────────────────────────────────
   The game is the screen. No header, no hint line, no on-screen buttons and
   no leaderboard while a run is live — every one of these games already takes
   its input from the canvas itself.

   The canvas cannot be reshaped to portrait: each game reads
   canvas.width/height ONCE into a const at page load and tunes its ground
   line, gravity and gap sizes against those numbers, so a 720x220 strip is
   what there is. It is therefore scaled to the full width of the phone and
   centred in the empty field, which is as much of the screen as it can take
   without distorting the game or retuning it. */
.m-stage-full{position:absolute;inset:0;z-index:30;background:var(--base);display:flex;align-items:center;
  justify-content:center;padding-top:env(safe-area-inset-top);animation:m-fade .18s ease-out}
.m-stage-full[hidden]{display:none}
.m-stage-holder{position:absolute;inset:0}
.m-stage-holder canvas{display:block;position:absolute;left:50%;top:50%;
  /* Sized by layoutStage() in js/mobile.js, which asks the game for an upright
     portrait field rather than turning a landscape one onto its side. */
  transform:translate(-50%,-50%);
  /* The canvas IS the controller: no scroll-chaining, no tap-to-zoom, no
     text-selection lasso on a long press. */
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.m-stage-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.92);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.m-stage-x svg{width:19px;height:19px}
/* Death card — the only time the leaderboard appears. White, per request. */
.m-dead{position:absolute;inset:0;z-index:3;background:rgba(255,255,255,.93);display:flex;
  align-items:center;justify-content:center;padding:20px;overflow-y:auto;animation:m-fade .2s ease-out}
.m-dead[hidden]{display:none}
.m-dead-card{width:100%;max-width:420px;background:var(--base);border:1px solid var(--line);border-radius:28px;
  padding:22px;box-shadow:0 18px 44px rgba(22,33,15,.13)}
.m-dead-kicker{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red)}
.m-dead-score{font-family:var(--mono);font-size:26px;letter-spacing:.02em;color:var(--ink);margin:6px 0 16px}
.m-dead-score span{font-size:13px;color:var(--mute);margin-left:10px}

/* Leaderboard: the desktop table, restyled in place. Scoped to .m-arcade so
   the desktop board keeps its own look. */
.m-play-lb:empty{display:none}
/* Every rule below is written with THREE classes on purpose.

   This table is the desktop's, borrowed into the phone, so it also carries the
   desktop's dark-theme rules — and those are written as
   `html[data-theme="dark"] .cr-lb-table td`, specificity (0,2,2), which beat a
   plain `.m-arcade .cr-lb-table td` at (0,2,1). With the phone's own light
   background still winning, dark mode painted near-white text (#e7f5ec) onto
   the near-white highlight of your own row and it disappeared completely.

   The phone layout is light-only for now (dark is deferred — see too_do.md),
   so the borrowed table follows the phone's palette whatever the desktop theme
   says. Going through `.m-play-lb` gets every rule to (0,3,x), which clears
   the dark rules outright instead of racing them. */
.m-arcade .m-play-lb .cr-lb{margin:0;border:1px solid var(--line);border-radius:22px;background:var(--base)}
/* Stack the title over its status: side by side, "DUCK HUNTER LEADERBOARD" and
   a status message both wrap on a 390px screen and the head grows to four
   ragged lines. */
.m-arcade .m-play-lb .cr-lb-head{flex-direction:column;align-items:flex-start;gap:3px;background:var(--base);
  border-bottom:1px solid var(--line);padding:13px 17px}
.m-arcade .m-play-lb .cr-lb-title{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep)}
.m-arcade .m-play-lb .cr-lb-status{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute)}
.m-arcade .m-play-lb .cr-lb-table{font-family:var(--sans);font-size:13px}
.m-arcade .m-play-lb .cr-lb-table th{font-family:var(--mono);font-size:9px;letter-spacing:.11em;color:var(--mute);
  padding:9px 16px;border-bottom:1px solid var(--line)}
.m-arcade .m-play-lb .cr-lb-table td{padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.m-arcade .m-play-lb .cr-lb-table td.cr-rank{font-family:var(--mono);font-size:13px;color:var(--mute-2);width:34px}
.m-arcade .m-play-lb .cr-lb-table td.cr-score{font-family:var(--mono);color:var(--green-deep);font-weight:500}
/* Your row: solid green, white text — the same treatment a free room gets on
   the Rooms tab, and legible without depending on any other rule losing. */
.m-arcade .m-play-lb .cr-lb-row-me{background:var(--green)}
.m-arcade .m-play-lb .cr-lb-row-me td{color:var(--on-accent);font-weight:700;border-bottom-color:transparent}
.m-arcade .m-play-lb .cr-lb-row-me td.cr-rank,
.m-arcade .m-play-lb .cr-lb-row-me td.cr-score{color:var(--on-accent)}
.m-arcade .m-play-lb .cr-lb-empty,
.m-arcade .m-play-lb .cr-lb-table td.cr-lb-cta{font-family:var(--sans);font-size:12.5px;
  padding:18px 16px;text-align:center;letter-spacing:0;color:var(--mute-2)}
.m-arcade .m-play-lb .cr-lb-table td.cr-lb-cta{color:var(--green-deep);font-weight:600;text-decoration:underline}

/* Chess is a mode picker plus a "coming soon" line on the desktop too — it is
   not a built game. Say so here rather than implying otherwise. */
.m-soon-note{margin-top:14px;border-radius:22px;background:rgba(184,108,0,.1);color:#7a4900;
  padding:15px 17px;font-size:12.5px;line-height:1.5}

:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ── My courses (phone) ─────────────────────────────────────────────── */
/* Same card language as .m-toggle-row so the list reads as part of the
   profile rather than something bolted on. */
.m-course-list{display:flex;flex-direction:column;gap:8px}
.m-course-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:20px;padding:12px 14px;background:var(--base)}
.m-course-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-course-name{font-size:14px;font-weight:600;color:var(--ink);word-break:break-word}
.m-course-origin{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.m-course-remove{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(168,53,42,.28);background:rgba(168,53,42,.08);color:#a8352a;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
.m-course-remove:active{transform:scale(.94)}
.m-course-add[disabled]{opacity:.55;box-shadow:none;cursor:default}

/* ── My courses entry button (Today screen) ─────────────────────────── */
/* "Slightly big" per the request: taller than a normal pill button, with a
   visibly larger icon than the header's m-icon-btn, so it reads as an entry
   point rather than a minor toggle. */
.m-courses-btn{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;
  padding:0 16px;margin:0 0 14px;border:1.5px solid rgba(var(--accent-rgb),.22);border-radius:18px;
  background:linear-gradient(180deg,var(--base),var(--tint));color:var(--ink);
  font-family:var(--mono);font-weight:500;font-size:14.5px;letter-spacing:.02em;cursor:pointer}
.m-courses-btn svg{width:24px;height:24px;flex-shrink:0;color:var(--green)}
.m-courses-btn-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.m-courses-btn-copy small{margin-top:3px;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0;color:var(--mute)}
.m-courses-btn:active{transform:scale(.98)}
.m-courses-btn-count{flex:none!important;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--green);color:var(--on-accent);font-size:11px;font-weight:700;display:grid;place-items:center}
.m-courses-btn-count[hidden]{display:none}

/* The sheet reuses .m-arcade's full-screen overlay pattern. */
.m-course-status{font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--mute-2);margin-top:8px;min-height:16px}
.m-course-status.is-error{color:#a8352a}
.m-course-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;vertical-align:middle;
  background:rgba(var(--accent-rgb),.1);color:var(--green);border:1px solid rgba(var(--accent-rgb),.2)}
.m-course-tag.is-added{background:rgba(184,108,0,.1);color:#a86b00;border-color:rgba(184,108,0,.25)}


html[data-mobile-theme="dark"] .m-app{
  color-scheme:dark; --base:#141414; --solid:#34302b; --on-accent:#211307;
  --ink:#f5eee8; --green:#c47d46; --green-deep:#d69a6b; --green-bright:#d9ac87;
  --accent-rgb:196,125,70; --bright-rgb:217,172,135;
  --tint:#30261f; --tint-hover:#3d2f25; --surface:#202020; --page:#191919;
  --neutral:#292929; --slot-free:#c47d46; --slot-busy:#484441; --seat-section:#59402e;
  --red:#a73d32; --red-deep:#ffb0a7; --red-bright:#ffaaa0; --red-soft:#ad4638;
  --line:rgba(255,238,224,.1); --line-strong:rgba(255,238,224,.2);
  --mute:#aaa19a; --mute-2:#c4b9b0; --mute-3:#a69b92;
}
html[data-mobile-theme="dark"] .m-app :is(.m-toast,.m-rooms-bar,.m-hero-dark,.m-daycard.is-today .m-daycard-head,.m-block.is-on,.m-chip.is-ink.is-on,.m-now.is-live,.m-room.is-busy){color:#f5eee8}
html[data-mobile-theme="dark"] .m-room.is-busy :is(.m-room-status,.m-room-chev){color:#fff}
html[data-mobile-theme="dark"] .m-app :is(.m-signin-status.is-error,.m-course-status.is-error,.m-course-remove,.m-note.cancel){color:#ffaaa0}
html[data-mobile-theme="dark"] .m-app :is(.m-soon,.m-soon-note,.m-note.resch,.m-course-tag.is-added){color:#d9ac87}
html[data-mobile-theme="dark"] .m-app :is(.m-stage-x,.m-dead){background:rgba(20,20,20,.95)}
.m-settings-dropdown{margin:18px 0;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);overflow:hidden}
.m-settings-dropdown summary{padding:16px;min-height:48px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.m-settings-dropdown summary::marker{color:var(--green)}
.m-settings-dropdown .m-course-list{padding:0 12px 12px}
.m-settings-select{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit}
/* Keep customization separate from disabled notification preferences. */
.m-customization{margin-top:24px}
.m-customization .m-section-label{margin:0 2px 12px;line-height:1.5}
.m-customization-fields{display:grid;gap:12px;min-width:0}
.m-profile-program{display:grid;gap:12px;padding:16px;margin:18px 0;border:1px solid var(--line);border-radius:22px;background:var(--surface);min-width:0}
.m-profile-program .m-drow{display:grid;gap:6px;padding:0;border:0;border-radius:0;background:none;min-width:0}
.m-profile-program .m-drow-label{margin:0;line-height:1.5}
.m-profile-program .m-drow-value{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.m-profile-program .m-field-label{margin:0;line-height:1.5}
.m-customization .m-settings-dropdown{margin:0}
.m-customization .m-toggle-row{margin:0}
.m-customization .m-toggle-text{flex:1;overflow-wrap:anywhere}
.m-customization .m-toggle-label{line-height:1.4}
.m-customization .m-settings-select{min-width:0;max-width:100%}
.m-customization .m-add-friend{margin:0}
.m-friends-copy{font-size:13px;line-height:1.6;color:var(--mute-2);margin:10px 0 18px;overflow-wrap:anywhere}
.m-friend-list{display:grid;gap:12px}
.m-friend-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.m-friend-open{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px;min-height:48px;text-align:left;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;overflow-wrap:anywhere}
.m-friend-form{display:grid;gap:10px;min-width:0}
#m-friend-status{white-space:pre-line}
.m-friend-form .m-field-label{margin:6px 0 0;line-height:1.5}
.m-friend-form .m-settings-select{min-width:0}
.m-friend-form .m-settings-select{font-size:16px}
#m-friend-pickers{display:grid;gap:14px;min-width:0}
.m-friend-field{display:grid;gap:8px;min-width:0;margin:0}
.m-friend-picker{min-width:0}
.m-friend-picker summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;list-style:none;overflow-wrap:anywhere}
.m-friend-picker summary::-webkit-details-marker{display:none}
.m-friend-chevron{flex-shrink:0;width:8px;height:8px;margin:0 3px 4px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .15s}
.m-friend-picker[open] .m-friend-chevron{transform:translateY(4px) rotate(225deg)}
.m-friend-picker[open] summary{border-color:var(--green)}
.m-friend-options{display:flex;flex-wrap:wrap;gap:8px;max-height:240px;overflow-y:auto;margin-top:8px;padding:4px;background:transparent}
.m-friend-options .m-chip{max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;text-align:left}
.m-friend-picker :is(summary,button):focus-visible,.m-friend-form .m-settings-select:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.m-friend-options .m-chip:hover{background:var(--tint-hover)}
.m-friend-options .m-chip.is-on:hover{background:var(--green-deep)}
#m-friend-save:disabled{opacity:.5;cursor:not-allowed}
#m-friend-retry[hidden],#m-friend-sharing-setting[hidden]{display:none}
.m-friend-form .m-section-label{margin:18px 0 0;line-height:1.5}
#m-friends-title{line-height:1.3;overflow-wrap:anywhere}
#m-friends-close{font-size:26px;flex-shrink:0}
.m-app #m-toast.m-friend-quote{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));box-sizing:border-box;z-index:120;background:var(--surface);color:var(--green);border:1px solid var(--line-strong);border-radius:999px;padding:44px 24px 28px;font-family:var(--sans);font-size:13px;line-height:1.6;pointer-events:auto}
.m-friend-quote p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.m-friend-quote-close{position:absolute;top:12px;right:34px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}
.m-friend-quote-close:hover{background:var(--tint)}
.m-friend-quote-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m-friend-quote p[lang="ur"]{margin-top:12px;font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Urdu Typesetting",serif;font-size:18px;line-height:1.9}
} /* end mobile breakpoint */