/* Phone layout for the signed-in app (Akeed 2026-09-25, "like Parakeet on mobile").
   Loaded by shell.js, so every page with the sidebar gets it and no page file changes.

   Below 760px the sidebar (#shell) stops being a squeezed top strip where Resumes, Usage,
   Contact and Log out sat off-screen. It becomes:
     - a top bar: logo + name on the left, a round account button on the right
     - a floating bottom tab bar: Interviews / Practice / All notes / Resumes
     - an account sheet (email, plan, Usage, Contact, Log out) that slides up from the button
   The nav links stay the SAME elements inside #shell, so every page hook that listens for
   `#shell a[href]` or `.navitem[data-filter]` keeps working untouched.
   Nothing in here applies above 760px: desktop is unchanged. */

.mtop,.mavatar,.mscrim{display:none}

@media (max-width:760px){
  .shell{height:100vh;height:100dvh;grid-template-rows:minmax(0,1fr);
    padding:60px 0 calc(88px + env(safe-area-inset-bottom))}

  /* ---- the sidebar becomes the bottom tab bar ---- */
  aside#shell{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    height:68px;padding:6px;gap:4px;flex-direction:row;align-items:stretch;overflow:visible;
    background:var(--card);border:1px solid var(--border);border-radius:24px;
    box-shadow:0 14px 34px -14px rgba(18,23,20,.28),0 2px 6px rgba(18,23,20,.05)}
  aside#shell > .navitem{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:4px;
    padding:6px 2px;border-radius:18px;font-size:11.5px;font-weight:500;line-height:1.1;
    text-align:center;white-space:nowrap;color:var(--soft)}
  aside#shell > .navitem svg{width:21px;height:21px}
  aside#shell > .navitem.on{background:var(--green-soft);color:var(--accent);font-weight:650;
    box-shadow:inset 0 0 0 1px var(--blue-border)}
  aside#shell .ct,aside#shell .spacer,aside#shell .navlbl{display:none}

  /* ---- top bar: bar background + logo + account button ---- */
  .mtop{display:block;position:fixed;z-index:39;top:0;left:0;right:0;height:60px;
    background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  aside#shell .wordmark{position:fixed;z-index:41;top:0;left:16px;height:60px;padding:0;gap:10px}
  aside#shell .wordmark .name{display:inline;font-size:17px}
  .mavatar{display:grid;place-items:center;position:fixed;z-index:41;top:9px;right:14px;
    width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--field);
    color:var(--ink);font:600 16px/1 var(--font-display);padding:0}
  .mavatar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ---- account sheet (the .acct block, shown only when the button is tapped) ---- */
  aside#shell .acct{display:none}
  aside#shell.acct-open .acct{display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:fixed;z-index:61;left:0;right:0;bottom:0;margin:0;
    padding:10px 14px calc(18px + env(safe-area-inset-bottom));
    background:var(--card);border-radius:24px 24px 0 0;border-top:none;
    box-shadow:0 -18px 40px -18px rgba(18,23,20,.35);animation:msheet .22s ease-out}
  aside#shell.acct-open .acct::before{content:"";align-self:center;width:40px;height:4px;border-radius:4px;
    background:var(--border-2);margin:0 0 10px}
  aside#shell.acct-open .acct .who{display:flex!important;align-items:center;gap:8px;
    padding:4px 10px 12px;margin:0 0 4px;border-bottom:1px solid var(--border);font-size:14px}
  aside#shell.acct-open .acct .who .email{display:block;color:var(--ink);font-weight:500}
  aside#shell.acct-open .acct .navitem{width:100%;flex-direction:row;gap:13px;padding:14px 10px;
    font-size:15.5px;border-radius:14px;color:var(--ink)}
  aside#shell.acct-open .acct .navitem svg{width:20px;height:20px;color:var(--soft)}
  aside#shell.acct-open .acct .navitem.on{background:var(--green-soft)}
  aside#shell.acct-open .mscrim{display:block;position:fixed;inset:0;z-index:60;
    background:rgba(18,23,20,.34);animation:mfade .2s ease-out}

  /* keep toasts clear of the tab bar */
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}

  /* ---- Interview page (/app). Scoped by #startBtn, which only that page has. ---- */
  .pane:has(#startBtn) > header{flex-wrap:nowrap;gap:8px;padding:12px 16px}
  .pane:has(#startBtn) > header h1{font-size:17px}
  /* the floating answer window is a desktop-Chrome feature; phones can't open it */
  .pane:has(#startBtn) #pipBtn{display:none!important}
  .pane:has(#startBtn) > main{padding:12px;gap:12px;grid-template-rows:minmax(150px,.8fr) 1.2fr}
  .pane:has(#startBtn) .col-head{padding:14px 16px 8px}
  .pane:has(#startBtn) .col-body{padding:2px 16px 16px}
  .pane:has(#startBtn) .col-body > .empty{height:auto;min-height:100%;justify-content:center;gap:8px;padding:6px 0}
  .pane:has(#startBtn) #tsempty .eic{display:none}
  .pane:has(#startBtn) .foot{gap:4px;padding:10px}
  .pane:has(#startBtn) .foot .btn{padding:8px 11px;font-size:13px;white-space:nowrap}
  .pane:has(#startBtn) .foot .btn > svg{display:none}
  .pane:has(#startBtn) .foot .spacer{flex:1 1 0;min-width:0}

  /* ---- Notes page ---- */
  /* the INTERVIEW badge drops under the title instead of squeezing it to a narrow column */
  .card .tt{flex-wrap:wrap;row-gap:6px}
  .card{gap:12px;padding:14px}
  /* reader: buttons on one row, the title gets its own full-width row under them */
  .rd-head{flex-wrap:wrap;align-items:center;gap:4px 6px;padding-top:12px}
  .rd-head #rdBack{margin-right:auto}
  .rd-head .ttl{order:9;flex:0 0 100%}
  .rd-head .btn{padding:8px 11px;font-size:13.5px}
}
@keyframes msheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes mfade{from{opacity:0}to{opacity:1}}

/* Laptop fit (shell.js scales the page to the window with CSS zoom): a zoomed 100vh would stop
   short of the bottom of the window, so the app frame's height is divided back by the factor. */
@media (min-width:761px){
  .shell{height:calc(100vh / var(--fitz, 1))}
}