/* The rail both pages share. The site and the studio are one product, so the
   rail is one component: the same markup, styles, lists and account block,
   built by sidebar.js and dropped into a <nav class="side"> on either page.
   Each page keeps only its placement: the studio puts the rail in the app
   shell's flex row, the site fixes it to the viewport. Colours come from the
   page's own variables, falling back across the two names the pages use for
   the same surfaces. */
.side{width:252px;display:flex;flex-direction:column;gap:2px;
      padding:calc(var(--safe-t, 0px) + 10px) 10px 14px;
      background:var(--surface, var(--panel));
      border-right:1px solid var(--line);overflow-y:auto}
.side .mark{font-family:var(--serif);font-size:21px;padding:6px 10px 14px}
.side .mark em{font-style:italic}
.side-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;
      border:0;border-radius:11px;background:none;color:var(--ink);cursor:pointer;
      font:500 14.5px/1 var(--sans);text-align:left;text-decoration:none}
.side-item:hover{background:var(--surface-2, var(--panel-2))}
.side-item svg{flex:none;color:var(--muted)}
.side-foot{margin-top:auto;padding:12px 11px 0;border-top:1px solid var(--line);
      color:var(--muted);font-size:12.5px;line-height:1.5}
.recents{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.side-head{padding:6px 11px;color:var(--muted);font-size:12px;font-weight:600;
      letter-spacing:.06em;text-transform:uppercase}
.side-head:not(:first-child){margin-top:14px}
.side-item.recent{padding:0;gap:0;overflow:hidden}
.side-item.recent.on{background:var(--surface-2, var(--panel-2))}
/* Studio rows are buttons inside the row: the open action and the delete
   action are separate controls. */
.side-item.recent .recent-open{flex:1;min-width:0;border:0;background:none;color:inherit;cursor:pointer;
      padding:11px 4px 11px 11px;font:400 14px/1.45 var(--sans);text-align:left;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-del{flex:none;border:0;background:none;color:var(--muted);cursor:pointer;
      padding:11px 11px;font-size:12px;opacity:0;transition:opacity .12s}
.side-item.recent:hover .recent-del,.recent-del:focus{opacity:1}
.recent-del:hover{color:var(--ink)}
.recent-live{flex:none;width:7px;height:7px;margin-left:10px;border-radius:50%;
             background:var(--accent,#7aa2ff);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
/* Site rows are plain links: the site has no thread to open anything in,
   so a row navigates to the studio instead. */
.recents > a.recent-open{flex:none;display:block;padding:11px 11px;border-radius:9px;color:inherit;text-decoration:none;
      font:400 14px/1.45 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recents > a.recent-open:hover{background:var(--surface-2, var(--panel-2))}
.side-empty{padding:6px 11px;color:var(--faint);font-size:12.5px;line-height:1.45}

/* ---------------------------------------------------------------- account */
.account{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.account .who{display:block;padding:4px 11px 8px;color:var(--muted);
      font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signin{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
      padding:10px 12px;border:1px solid var(--line);border-radius:11px;
      background:var(--surface-2, var(--panel-2));color:var(--ink);cursor:pointer;
      font:600 14px/1 var(--sans);text-decoration:none;margin-bottom:6px}
.signin:hover{border-color:var(--muted)}
.signin svg{flex:none}
.account .why{padding:2px 11px 0;color:var(--faint);font-size:11.5px;line-height:1.45}
.linkbtn{border:0;background:none;color:var(--muted);cursor:pointer;padding:6px 11px;
      font:400 12.5px/1 var(--sans);text-decoration:underline}
.linkbtn:hover{color:var(--ink)}

/* Narrow screens: the same rail, as an overlay drawer. Wide screens keep
   the static rail; nothing about the component changes, only its place. */
.side-close{display:none}
.side-backdrop{display:none}
@media (max-width:860px){
  nav.side{position:fixed;inset:0 auto 0 0;z-index:200;width:min(300px,85vw);
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:8px 0 32px rgba(0,0,0,.35)}
  body.drawer-open nav.side{transform:none}
  body.drawer-open{overflow:hidden}
  .side-backdrop{position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.45)}
  body.drawer-open .side-backdrop{display:block}
  .side-close{display:block;position:absolute;top:12px;right:12px;z-index:1;
    border:0;background:none;color:var(--muted);cursor:pointer;
    padding:8px;font-size:16px;line-height:1}
  .side-close:hover{color:var(--ink)}
}