/* The site's shared layer over tokens.css, linked by every page: the few colors and type sizes the server's own
   pages add (the round-3 assistant-access mockups, docs/redesign/assistant-access-mockups/round3/tokens.css), and
   the site menu, which is the sidebar on a computer and a menu button on a phone (and in the viewer's bar). Kept
   apart from tokens.css, which every MCP widget inlines. Additions only: no token in tokens.css changes. */

:root,
[data-theme="light"] {
  --code-bg: #F2F2F7;
  --pill-fill: #E9E9EE;
  --gray-chip: #EFEFF4;
  --field-fill: #E3E3E8;
  --toggle-off: #E9E9EA;
  --good-ink: #248A3D;
  --good-fill: rgba(52, 199, 89, 0.12);
  --attention: #FF9F0A;
  --attention-ink: #B25E00;
  --destructive-ink: #D70015;
  --neutral-dot: #8A8A8E;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-edge: rgba(0, 0, 0, 0.07);
  --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --scrim: rgba(0, 0, 0, 0.32);
  --alert-bg: rgba(242, 242, 247, 0.96);
  --brand-edge-light: rgba(0, 0, 0, 0.12);
  --brand-edge-dark: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-bg: #2C2C2E;
    --pill-fill: #2C2C2E;
    --gray-chip: #2C2C2E;
    --field-fill: #2C2C2E;
    --toggle-off: #39393D;
    --good-ink: #30D158;
    --good-fill: rgba(48, 209, 88, 0.22);
    --attention: #FFB340;
    --attention-ink: #FFB340;
    --destructive-ink: #FF6961;
    --neutral-dot: #98989D;
    --glass: rgba(44, 44, 46, 0.74);
    --glass-edge: rgba(255, 255, 255, 0.09);
    --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.55);
    --alert-bg: rgba(44, 44, 46, 0.97);
    --brand-edge-light: transparent;
    --brand-edge-dark: rgba(255, 255, 255, 0.24);
  }
}
[data-theme="dark"] {
  --code-bg: #2C2C2E;
  --pill-fill: #2C2C2E;
  --gray-chip: #2C2C2E;
  --field-fill: #2C2C2E;
  --toggle-off: #39393D;
  --good-ink: #30D158;
  --good-fill: rgba(48, 209, 88, 0.22);
  --attention: #FFB340;
  --attention-ink: #FFB340;
  --destructive-ink: #FF6961;
  --neutral-dot: #98989D;
  --glass: rgba(44, 44, 46, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.09);
  --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.55);
  --alert-bg: rgba(44, 44, 46, 0.97);
  --brand-edge-light: transparent;
  --brand-edge-dark: rgba(255, 255, 255, 0.24);
}
:root {
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --button-radius: 14px;
  /* AppFont, .large anchors */
  --f-screen-title: 700 28px/34px var(--font);
  --f-headline: 600 17px/22px var(--font);
  --f-body: 400 17px/22px var(--font);
  --f-row-title: 600 16px/21px var(--font);
  --f-callout: 400 16px/21px var(--font);
  --f-card-head: 600 15px/20px var(--font);
  --f-sub-body: 400 15px/20px var(--font);
  --f-caption: 400 14px/19px var(--font);
  --f-section-header: 600 13px/18px var(--font);
  --f-footnote: 400 13px/18px var(--font);
}

/* ── The site menu ────────────────────────────────────────────────────── */
/* The button that opens it: a glass circle beside the brand on a phone, a plain one in the viewer's bar. */
.site-menu-btn {
  flex: 0 0 auto; width: var(--target); height: var(--target); border-radius: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0.5px solid var(--glass-edge); background: var(--glass); box-shadow: var(--shadow-float); color: var(--label);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.site-menu-btn svg { width: 20px; height: 20px; }
.vbar .site-menu-btn { justify-self: end; border: 0; background: none; box-shadow: none; color: var(--tint); -webkit-backdrop-filter: none; backdrop-filter: none; }
.vbar .site-menu-btn:hover { background: var(--tint-fill-10); }

/* The menu itself, opened from that button: the sidebar's rows in a floating card. */
.site-menu:popover-open {
  position: fixed; inset: calc(env(safe-area-inset-top) + 62px) 12px auto auto; margin: 0;
  width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto;
  display: flex; flex-direction: column; padding: 6px 0 4px; border: 0; border-radius: var(--radius-sheet);
  background: var(--surface); color: var(--label); box-shadow: var(--shadow-float);
  font-family: var(--font);
}
.vbar ~ .site-menu:popover-open, .view .site-menu:popover-open { inset-block-start: calc(env(safe-area-inset-top) + 50px); }
.site-menu::backdrop { background: transparent; }
.site-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.site-nav .nav {
  min-height: var(--target); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font: var(--f-callout); color: var(--label); text-decoration: none;
}
.site-nav .nav:hover { text-decoration: none; background: var(--tint-fill-10); }
.site-nav .nav svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--tertiary); }
.site-nav .nav[aria-current="page"] { background: var(--tint-fill-12); color: var(--tint); font-weight: 600; }
.site-nav .nav[aria-current="page"] svg { color: var(--tint); }
.site-account { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 6px 0 0; padding: 8px 18px 0; border-top: 0.5px solid var(--hairline); }
.site-account .who-signed { margin: 0; font: var(--f-footnote); color: var(--tertiary); }
.site-account form { margin: 0; }
.signout-btn {
  min-height: var(--target); margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: var(--f-callout); color: var(--tint);
}
.signout-btn:hover { background: var(--tint-fill-10); }