/* ============================================================
   public/app/menu.css: the phone's menu (menu.js), and the bottom bar it replaces

   The owner, 9 October 2026: "we have too many sections, instead of this just add a burger menu on the left side
   at the top". A button at the top left opens one panel with every section; the floating bar of five tabs is
   not drawn. Phones only (the width app.css already calls a phone, 720px): a wide screen keeps its side menu.
   The bar's own markup stays in the page and is only hidden here, so taking this file out brings it back.
   ============================================================ */
/* ---------- the side menu in named groups (13 October 2026, from the owner's reference): Today, Business, Setup ----------
   Small capitals with a little air between the letters; the first sits tight under the logo. Where the menu is only
   icons (collapsed, or a window under 1100) there is no room for a word, so a hairline keeps the groups apart. */
.nav-h{padding:14px 10px 4px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.nav-h:first-of-type{padding-top:2px}
:root[data-rail="1"] .nav-h{height:1px;margin:8px 12px;padding:0;overflow:hidden;font-size:0;background:var(--line)}
:root[data-rail="1"] .nav-h:first-of-type{display:none}
@media (max-width:1100px){.nav-h{height:1px;margin:8px 12px;padding:0;overflow:hidden;font-size:0;background:var(--line)}.nav-h:first-of-type{display:none}}

/* ---------- the plan's meters at the foot of the menu (menu.js meters(); the status-dots design, 21 October 2026) ----------
   A card that is a link to the plan. "Call minutes 905 of 1,000" over a thin bar (status.css .sd-bar): grey while there is
   room, amber from 80% (the colour of what needs you), coral once it has stopped; it was lime with a glow. The one button,
   Add minutes or Add messages, is the quiet .btn-sub and only shows from 80%. */
.usage{display:block;padding:10px 12px 12px;border-radius:var(--r-ctl);box-shadow:0 0 0 1px var(--line);background:var(--card);color:var(--ink);text-decoration:none;transition-property:box-shadow,scale;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.usage:active{scale:.96}
.usage-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--fs-meta);color:var(--ink-2)}
.usage-t b{font-weight:600;color:var(--ink);white-space:nowrap}
.usage.pm-card{padding:14px}
.pm-a{display:block;color:inherit;text-decoration:none}
.pm+.pm{margin-top:14px}
.pm-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.pm-h span{font-size:var(--fs-meta);font-weight:500;color:var(--ink-3)}
.pm-h b{font-size:var(--fs-meta);font-weight:500;color:var(--ink);white-space:nowrap}
.pm-h b small{font-size:inherit;font-weight:400;color:var(--ink-3)}
.pm-x{display:block;margin-top:6px;font-size:var(--fs-meta);line-height:1.3;color:var(--ink-3)}
.pm-x.err{color:var(--err-ink)}
.pm-h b,.pm-h b small{font-variant-numeric:normal;font-feature-settings:normal} /* plain zeros: the face's tabular zero is slashed (shell.css says the same) */
.pm-add{width:100%;margin-top:14px}
@media (hover:hover){.usage:hover{box-shadow:0 0 0 1px var(--line-2)}}
:root[data-rail="1"] .side-usage{display:none}
@media (max-width:1100px){.side-usage{display:none}}
@media (prefers-reduced-motion: reduce){.usage{transition:none}.usage:active{scale:1}}

.bm-btn,.bm,.bm-scrim{display:none}
@media (max-width:720px){
  .mnav{display:none}
  .mlogo{display:none}
  body[data-view="assistant"] .bm-btn{display:none}

  /* with no bar to clear, what sat above it sits near the screen's edge */
  .content{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .kc-f{bottom:calc(16px + env(safe-area-inset-bottom))}
  .savebar{bottom:calc(16px + env(safe-area-inset-bottom))}
  .toast-slot{bottom:calc(20px + env(safe-area-inset-bottom))}

  .bm-btn{position:relative;display:inline-grid;flex:none;width:var(--h-touch);height:var(--h-touch);margin-inline-start:-4px}
  .bm-btn svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .bm-btn:active{scale:.96}
  /* the one peach thing: something waits for you (the same peach as every count that waits) */
  .bm-dot{position:absolute;top:-3px;inset-inline-end:-3px;width:12px;height:12px;border-radius:50%;background:var(--you-solid);box-shadow:0 0 0 2px var(--panel)}

  .bm-scrim{display:block;position:fixed;inset:0;z-index:60;background:var(--scrim);opacity:0;pointer-events:none;touch-action:none;transition:opacity 200ms var(--ease-out)}
  .bm-scrim[data-open="true"]{opacity:1;pointer-events:auto}
  /* the rows sit 12 inside the panel and are 8 round (--r-ctl), so the panel is 8 + 12 = 20 round (outer = inner + padding) */
  .bm{display:flex;flex-direction:column;gap:12px;position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(84vw,320px);padding:calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));background:var(--card);overflow-y:auto;overscroll-behavior:contain;border-radius:0 calc(var(--r-ctl) + 12px) calc(var(--r-ctl) + 12px) 0;box-shadow:var(--shadow-pop);transform:translateX(-102%);visibility:hidden;transition:transform 200ms cubic-bezier(.2,0,0,1),visibility 0s linear 200ms} /* leaving is quicker than arriving (200 against 260) */
  .bm[data-open="true"]{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(.2,0,0,1)}
  .bm-h{display:flex;align-items:center;justify-content:space-between;min-height:var(--h-touch);padding-inline:8px 0}
  .bm-h .logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
  .bm-list{display:flex;flex:none;flex-direction:column;gap:2px;overflow:visible}
  .bm-gap{height:1px;margin:8px 12px;background:var(--line)}
  .bm-h2{padding:10px 12px 2px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .bm-h2:first-child{padding-top:2px}
  .bm-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-body);font-weight:500;text-align:start;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
  .bm-item svg.i{flex:none;width:20px;height:20px;stroke-width:2} /* beside medium (500) text: 2px */
  .bm-item:active{background:var(--press)}
  .bm-item[aria-current="page"]{background:var(--raise);color:var(--ink)}
  .bm-l{flex:1 1 auto;min-width:0}
  .bm-n{flex:none;min-width:24px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:var(--r-chip);background:var(--raise);color:var(--ink-2);font-size:var(--fs-sm);font-weight:600}
  .bm-n.you{background:var(--you-solid);color:var(--on-you-solid)}
  .bm-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
  .bm-who{display:block;padding:4px 12px 10px;border-radius:var(--r-ctl);color:inherit;text-decoration:none}
  .bm-who-a{display:block;color:inherit;text-decoration:none}
  .bm-who .pm{margin-top:14px}
  .bm-who .pm-h b{display:inline;font-size:var(--fs-meta);font-weight:500}
  .bm-who .pm-h b small{display:inline;margin:0;font-size:inherit;color:var(--ink-3)}
  .bm-who .pm-add{margin-top:14px}
  a.bm-who:active{background:var(--press)}
  .bm-who b{display:block;font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bm-who small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2)}
  .bm :focus-visible,.bm-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
}
/* a short phone: every section still fits without scrolling. Under 780px tall the group names give way to hairlines (as in the
   icon-only side menu); under 700px the rows come down to 44px, still a full thumb. */
@media (max-width:720px) and (max-height:780px){
  .bm-h2{height:1px;margin:6px 12px;padding:0;overflow:hidden;font-size:0;background:var(--line)}
  .bm-h2:first-child{display:none}
}
@media (max-width:720px) and (max-height:700px){
  .bm{gap:8px}
  .bm-item{min-height:44px}
}
@media (hover:hover) and (max-width:720px){.bm-item:hover{background:var(--hover);color:var(--ink)}}
@media (prefers-reduced-motion: reduce){.bm,.bm-scrim,.bm-item{transition:none!important}.bm-btn:active{scale:1}}

/* =====================================================================
   Three levels that read apart (the owner, 14 October 2026, with a picture of the menu: "they looks same no
   hierarchy of text", then: "not bold keep the current style just reduce font weight of those menu items").
   A group's name (600) and the page you are on (500, the first ink) stay exactly as they were. Every other row
   is lighter: 300, where it was 400 (and 500 in the phone's menu, the same weight as the page you are on).
   ===================================================================== */
.nav a:not(.cur){font-weight:300}
.bm-item:not([aria-current="page"]){font-weight:300}