/* LocalFlow menu-bar visual for /how (and a compact version on /). Everything is scoped under #lf-menubar.
   Colours come from the page's own tokens (home.css :root) with fallbacks; light and dark follow the visitor's
   system, like the page. No images, no external fonts: the menu is drawn in HTML/CSS and the icons are inline SVG.
   The menu text is the real text from Sources/main.swift (buildStatusItem / refreshUI). */
#lf-menubar{
  /* a faux macOS desktop: it follows the page's light/dark, like macOS does */
  --m-bar:rgba(255,255,255,.92);
  --m-bar-ink:#1c1c1e;
  --m-bar-mute:rgba(28,28,30,.55);
  --m-menu:rgba(250,250,251,.97);
  --m-menu-ink:#1c1c1e;
  --m-menu-off:rgba(28,28,30,.42);
  --m-menu-line:rgba(28,28,30,.13);
  --m-menu-edge:rgba(28,28,30,.18);
  --m-hi:#0b57d0;            /* macOS's selection blue */
  --m-hi-ink:#fff;
  --m-wall1:var(--accent-soft,#e0efe7);
  --m-wall2:var(--bg2,#eaf0ec);
  --m-rec:#ff3b30;           /* NSColor.systemRed */
  --m-dot:#ff9500;           /* NSColor.systemOrange */
  --m-pop:0 0 0 .5px var(--m-menu-edge),0 1px 2px rgba(0,0,0,.12),0 14px 34px -6px rgba(0,0,0,.32);
  color:var(--ink,#111a15);
  font:15px/1.5 var(--font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif);
}
  #lf-menubar{
    --m-bar:rgba(34,38,36,.92);--m-bar-ink:#f2f4f3;--m-bar-mute:rgba(242,244,243,.6);
    --m-menu:rgba(44,48,46,.97);--m-menu-ink:#f2f4f3;--m-menu-off:rgba(242,244,243,.42);
    --m-menu-line:rgba(242,244,243,.14);--m-menu-edge:rgba(255,255,255,.2);
    --m-hi:#0a64e8;
    --m-wall1:var(--accent-soft,#18281f);--m-wall2:var(--bg2,#111815);
    --m-pop:0 0 0 .5px var(--m-menu-edge),0 1px 2px rgba(0,0,0,.4),0 16px 38px -6px rgba(0,0,0,.7);
  }
#lf-menubar *{box-sizing:border-box}
#lf-menubar .lfm{display:flex;flex-direction:column;gap:20px}

/* the three states, as buttons */
#lf-menubar .lfm-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#lf-menubar .lfm-tab{appearance:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink,#111a15);
  background:var(--surface,#fff);border:1.5px solid var(--line,#d9e0db);border-radius:999px;min-height:44px;padding:0 16px;
  display:inline-flex;align-items:center;gap:9px}
#lf-menubar .lfm-tab:hover{border-color:var(--accent,#17684a)}
#lf-menubar .lfm-tab[aria-pressed="true"]{background:var(--accent,#17684a);border-color:var(--accent,#17684a);color:var(--accent-ink,#fff)}
#lf-menubar .lfm-tab:focus-visible,#lf-menubar .lfm-note:focus-visible{outline:3px solid var(--focus,#0b57d0);outline-offset:3px}
#lf-menubar .lfm-tab i{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.9;flex:none}
#lf-menubar .lfm-tab[data-s="recording"] i{background:var(--m-rec)}
#lf-menubar .lfm-tab[data-s="setup"] i{background:var(--m-dot)}
#lf-menubar .lfm-tab[data-s="idle"] i{opacity:.55}
#lf-menubar .lfm-play{margin-left:auto}

/* the stage: the desktop on one side, the notes on the other */
#lf-menubar .lfm-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,36px);align-items:start}
#lf-menubar .lfm-desk{position:sticky;top:calc(var(--nav,61px) + 16px);border-radius:18px;overflow:hidden;border:1px solid var(--line,#d9e0db);box-shadow:var(--shadow,0 12px 32px -8px rgba(17,26,21,.18));
  background:linear-gradient(150deg,var(--m-wall1),var(--m-wall2) 60%);padding-bottom:20px;min-width:0}
#lf-menubar .lfm-bar{position:relative;z-index:2;height:30px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 0 14px;
  background:var(--m-bar);color:var(--m-bar-ink);
  border-bottom:1px solid var(--m-menu-line);font-size:13px;font-weight:500;white-space:nowrap}
#lf-menubar .lfm-bar b{font-weight:700}
#lf-menubar .lfm-bar .app{display:flex;gap:16px;align-items:center;overflow:hidden;min-width:0}
#lf-menubar .lfm-bar .app span{color:var(--m-bar-mute)}
#lf-menubar .lfm-bar .sys{display:flex;gap:11px;align-items:center;flex:none}
#lf-menubar .lfm-bar .sys>svg{width:17px;height:17px;display:block;color:var(--m-bar-ink);opacity:.78}
#lf-menubar .lfm-bar .clock{font-variant-numeric:tabular-nums;color:var(--m-bar-ink);opacity:.9}

/* the LocalFlow icon in the bar; pressed while its menu is open */
#lf-menubar .lfm-icon{position:relative;width:30px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:rgba(127,127,127,.28);margin:0}
#lf-menubar .lfm-icon svg{width:18px;height:18px;grid-area:1/1;transition:opacity .25s ease,transform .25s ease}
#lf-menubar .lfm-glyph{color:var(--m-bar-ink)}
#lf-menubar .lfm-icon .g-rec{color:var(--m-rec);opacity:0;transform:scale(.8)}
#lf-menubar[data-s="recording"] .lfm-icon .g-idle{opacity:0;transform:scale(.8)}
#lf-menubar[data-s="recording"] .lfm-icon .g-rec{opacity:1;transform:none}
#lf-menubar .lfm-icon .lfm-badge{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--m-dot);
  transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#lf-menubar[data-s="setup"] .lfm-icon .lfm-badge{transform:scale(1)}
@keyframes lfm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.86)}}
@keyframes lfm-dot{0%,100%{box-shadow:0 0 0 0 rgba(255,149,0,.55)}60%{box-shadow:0 0 0 5px rgba(255,149,0,0)}}

/* a faux document under the menu, so the desk is not empty */
#lf-menubar .lfm-win{position:absolute;left:12px;top:46px;width:min(124px,28%);border-radius:10px;background:var(--surface,#fff);
  border:1px solid var(--line,#d9e0db);box-shadow:0 8px 22px -10px rgba(0,0,0,.35);padding:0 0 14px;overflow:hidden}
#lf-menubar .lfm-win-bar{height:20px;background:var(--bg2,#eaf0ec);border-bottom:1px solid var(--line,#d9e0db);margin-bottom:12px}
#lf-menubar .lfm-win-text{padding:0 10px;font-size:11.5px;line-height:1.45;color:var(--ink,#111a15);margin-bottom:10px}
#lf-menubar .lfm-win-text mark{background:var(--accent-soft,#e0efe7);color:inherit;border-radius:3px;padding:0 1px}
#lf-menubar .lfm-win-line{height:6px;margin:7px 10px 0;border-radius:3px;background:var(--line,#d9e0db)}
#lf-menubar .lfm-win-line.s{width:55%}

/* the notch and the pill that slides out under it while Listening (same look as the hero demo and the real app) */
#lf-menubar .lfm-desk{--m-nw:clamp(120px,40%,190px)}
#lf-menubar .lfm-notch{position:absolute;z-index:3;left:50%;top:-1px;height:33px;width:var(--m-nw);transform:translateX(-50%);
  background:#0b0e0c;border-radius:0 0 7px 7px;transition:border-radius .3s ease}
#lf-menubar[data-s="recording"] .lfm-notch{border-radius:0}
#lf-menubar .lfm-pill{position:absolute;z-index:1;left:50%;top:30px;width:var(--m-nw);transform:translate(-50%,-102%);line-height:0;
  transition:transform .55s cubic-bezier(.22,.8,.3,1)}
#lf-menubar[data-s="recording"] .lfm-pill{transform:translate(-50%,0)}
#lf-menubar .lfm-pill canvas{display:block;width:100%;aspect-ratio:190/34}
#lf-menubar .lfm-bar .app span:nth-child(n+4){display:none}

/* the open menu */
#lf-menubar .lfm-menu{position:relative;margin:42px 12px 0 auto;width:min(318px,calc(100% - 24px));padding:5px;border-radius:10px;
  background:var(--m-menu);color:var(--m-menu-ink);box-shadow:var(--m-pop);
  font-size:13px;line-height:1.25;list-style:none}
#lf-menubar .lfm-row{position:relative;display:flex;align-items:center;gap:6px;min-height:22px;padding:3px 9px 3px 20px;border-radius:5px;
  transition:background .15s ease,color .15s ease}
#lf-menubar .lfm-row .t{flex:1;min-width:0;overflow-wrap:anywhere}
#lf-menubar .lfm-row .k{flex:none;color:var(--m-menu-off);font-size:13px;letter-spacing:.04em}
#lf-menubar .lfm-row .ck{position:absolute;left:6px;top:50%;width:10px;height:10px;margin-top:-5px}
#lf-menubar .lfm-row.off{color:var(--m-menu-off)}
#lf-menubar .lfm-row[hidden]{display:none}
#lf-menubar .lfm-row.on{background:var(--m-hi);color:var(--m-hi-ink)}
#lf-menubar .lfm-row.on .k{color:rgba(255,255,255,.75)}
#lf-menubar .lfm-row .pin{position:absolute;left:-30px;top:50%;margin-top:-10px;width:20px;height:20px;border-radius:50%;
  background:var(--accent,#17684a);color:var(--accent-ink,#fff);font:700 11.5px/20px var(--font,system-ui);text-align:center;
  box-shadow:0 0 0 2px var(--m-wall2,#eaf0ec);pointer-events:none}
#lf-menubar .lfm-sep{height:1px;margin:5px 9px;background:var(--m-menu-line)}
#lf-menubar .lfm-sep[hidden]{display:none}
#lf-menubar .lfm-menu.pop{animation:lfm-open .22s cubic-bezier(.2,.9,.3,1)}
@keyframes lfm-open{from{opacity:.0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
#lf-menubar .lfm-menu{transform-origin:top right}

/* the notes */
#lf-menubar .lfm-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#lf-menubar .lfm-notes li{margin:0}
#lf-menubar .lfm-note{appearance:none;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--surface,#fff);
  border:1.5px solid var(--line,#d9e0db);border-radius:12px;padding:7px 12px 8px 42px;position:relative;display:block;
  transition:border-color .15s ease,background .15s ease}
#lf-menubar .lfm-note:hover,#lf-menubar .lfm-note.on{border-color:var(--accent,#17684a)}
#lf-menubar .lfm-note.on{background:var(--accent-soft,#e0efe7)}
#lf-menubar .lfm-note::before{content:attr(data-n);position:absolute;left:11px;top:8px;width:22px;height:22px;border-radius:50%;
  background:var(--accent,#17684a);color:var(--accent-ink,#fff);font:700 12px/22px var(--font,system-ui);text-align:center}
#lf-menubar .lfm-note b{display:block;font-weight:650;font-size:15px;line-height:1.3;letter-spacing:-.005em}
#lf-menubar .lfm-note span{display:block;font-size:14px;line-height:1.35;color:var(--mute,#4d5b54)}
#lf-menubar .lfm-note.dim{opacity:.55}
#lf-menubar .lfm-note.dim.on{opacity:1}

/* compact (the home page): the desk and the tabs only, no notes */
#lf-menubar[data-compact] .lfm-stage{grid-template-columns:minmax(0,1fr)}
#lf-menubar[data-compact] .lfm-notes{display:none}
#lf-menubar[data-compact] .lfm-row .pin{display:none}
#lf-menubar[data-compact] .lfm-desk{max-width:520px;position:relative;top:auto}

/* phone: stacked; the pins sit inside the menu, at the right edge of a row */
@media (max-width:820px){
  #lf-menubar .lfm-stage{grid-template-columns:minmax(0,1fr)}
  #lf-menubar .lfm-desk{position:relative;top:auto}
  #lf-menubar .lfm-play{margin-left:0}
}
@media (max-width:480px){
  #lf-menubar .lfm-bar .app span:nth-child(n+3){display:none}
  #lf-menubar .lfm-bar .sys>svg.wifi,#lf-menubar .lfm-bar .clock{display:none}
  #lf-menubar .lfm-row .pin{left:-14px;top:50%;margin-top:-9px;width:18px;height:18px;font-size:10.5px;line-height:18px;box-shadow:0 0 0 2px var(--m-menu)}
  #lf-menubar .lfm-row{padding-right:14px}
  #lf-menubar .lfm-win{display:none}
  #lf-menubar .lfm-menu{width:calc(100% - 20px);margin-left:10px;margin-right:10px}
  #lf-menubar .lfm-tab{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #lf-menubar *,#lf-menubar *::before{animation:none!important;transition:none!important}
}