/* Backstage's menu at the side (Danny 22/10/2026), shared by the home (index.html) and a product's page (fight.html).
   Design kit v1: the same surface, lines and orange as the home's menu; no new colour.
   Wider than 980 px (where the home stops using its drawer, style.css): the menu stays at the side of every screen and folds to a column of icons with its button.
   Narrower: nothing changes (the home keeps its drawer, a product's conversation stays full screen). */
.side-tg{display:none}
.side .lbl{white-space:nowrap}

/* a product's page: the same menu as the home's, drawn only on a wide screen and only once /me says she is in */
.fx-app .side{display:none}
@media (min-width:981px){
  .fx-app.with-side{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
  .fx-app.with-side .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
    border-right:1px solid var(--line);background:var(--surface-2);padding:28px 16px 16px;font-size:16px;line-height:1.6}
  .fx-app.with-side .fx{width:100%}
  .fx-app.with-side .fx-brand{display:none}
  .fx-app .brand{padding:0 8px 20px}
  .fx-app .brand .logo{width:180px;max-width:100%}
  .fx-app .brand .name{font:700 13px/1.5 var(--f-body);letter-spacing:.1em;text-transform:uppercase;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .fx-app nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
  .fx-app nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;text-decoration:none;color:var(--muted);font-weight:500;border-radius:10px}
  .fx-app nav a svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .fx-app nav a:hover{background:var(--raised);color:var(--ink)}
  .fx-app nav a.on{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}

  /* the fold button: top right of the menu, the kit's ghost shape */
  .side .brand{position:relative}
  .side-tg{display:grid;place-items:center;position:absolute;top:-6px;right:-4px;width:40px;height:40px;padding:0;
    border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s var(--ease)}
  .side-tg:hover{background:var(--raised);border-color:var(--ink)}
  .side-tg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .side-off .side-tg .chev{transform:rotate(180deg);transform-origin:14.25px 12px}

  /* folded: a column of icons; the words stay for screen readers and as each line's tooltip */
  .side-off .app{grid-template-columns:72px 1fr}
  .side-off .fx-app.with-side{grid-template-columns:72px minmax(0,1fr)}
  .side-off .side{padding:16px 12px;overflow-x:hidden}
  .side-off .side .brand{padding:0 0 12px;display:flex;justify-content:center}
  .side-off .side .brand .logo,.side-off .side .brand .name{display:none}
  .side-off .side-tg{position:static}
  .side-off .side nav a{justify-content:center;padding:8px 0;gap:0}
  .side-off .side nav .grp{justify-content:center;padding:14px 0 6px}
  .side-off .side .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .side-off .side nav .sep.gap{margin:10px 4px}
  /* folded, the footer keeps what has no other place on a computer (the topbar's PIN and Theme are phone-only):
     the Unlock button and the dark-mode switch, compact; the name, the lock's words and the disclaimer go
     (the page's own disclaimer stays under every screen) */
  .side-off .side .side-foot{padding:12px 0 0;align-items:center}
  .side-off .side .side-foot .who,.side-off .side .side-foot .disclaimer,.side-off .side .lockbar>span{display:none}
  .side-off .side .lockbar{padding:0;border:0;justify-content:center}
  .side-off .side .lockbar .btn.sm{min-height:44px;padding:6px 2px;font-size:12px;width:48px}
  .side-off .side .switch{font-size:0;padding:4px 0;justify-content:center}
}