/* BaseGameLab theme (agents/design/game-tools-ui/GUI.md, revision qodfoueyz7ne).
   Colour, type, space and motion literals live only in the token blocks below;
   everything else references them. Geist / Geist Mono are self-hosted (SIL OFL,
   geist-LICENSE.txt); icons are Lucide outlines (ISC) in templates/_icons.html. */
@font-face{font-family:"Sidebar Geist";src:url(/static/geist-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Sidebar Geist Mono";src:url(/static/geist-mono-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --neutral-1:#ffffff;--neutral-2:#f9fafb;--neutral-3:#eef0f3;--neutral-4:#dadee3;--neutral-5:#c0c6cd;
  --neutral-6:#91979e;--neutral-7:#686d73;--neutral-8:#41464c;--neutral-9:#21252b;--neutral-10:#000000;
  --color-1:#ffa344;--color-2:#00c9bb;--color-3:#76ef6b;--color-4:#e864ff;
  --success:#76ef6b;--warning:#ffa344;--error:#ff5263;
  --color-1-transparent:#ffa34433;--color-2-transparent:#00c9bb33;
  --success-transparent:#76ef6b33;--warning-transparent:#ffa34433;--error-transparent:#ff526333;
  --neutral-10-transparent:#00000033;
  --border-default-color:rgb(0 0 0 / 0.1);
  --focus-ring-outline:2px solid color-mix(in srgb, #000000 50%, transparent);

  --font-ui:"Sidebar Geist",system-ui,sans-serif;
  --font-data:"Sidebar Geist Mono",ui-monospace,monospace;
  --weight-regular:400;--weight-medium:500;--weight-heavy:700;
  --size-xxs:9px;--size-xs:11px;--size-s:13px;--size-m:15px;--size-l:22px;--size-xl:33px;--size-xxl:44px;
  --line-xxs:13px;--line-xs:15px;--line-s:18px;--line-m:22px;--line-l:29px;--line-xl:36px;--line-xxl:47px;
  --tracking-xs:-0.02em;--tracking-s:-0.01em;--tracking-m:0em;--tracking-l:0.01em;--tracking-xl:0.02em;
  --space-xxs:3px;--space-xs:6px;--space-s:9px;--space-m:12px;--space-l:19px;--space-xl:25px;--space-xxl:37px;
  --radius-xs:2px;--radius-s:5px;--radius-m:7px;--radius-l:15px;--radius-xl:22px;--radius-full:9999px;
  --border-s:1px;--border-l:2px;
  --motion-duration:150ms;--motion-easing:cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-large-duration:300ms;--motion-large-easing:cubic-bezier(0.16, 1, 0.3, 1);

  /* Roles (theme aliases). */
  --canvas:var(--neutral-1);--surface:var(--neutral-2);--surface-muted:var(--neutral-3);
  --text:var(--neutral-10);--text-muted:var(--neutral-7);
  --action:var(--color-1);--action-ink:var(--neutral-9);
  --navigation-active-background:var(--color-1-transparent);
  --navigation-active-foreground:var(--neutral-10);

  /* Application structure (not theme values). */
  --gutter:16px;--tap:44px;--shell-top:52px;--shell-bar:60px;
  /* Desktop shell frame (BGL-85 desk.css): 32 px gutters, 1760 px max, 12 columns with 24 px gaps. */
  --shell-gutter:32px;--shell-max:1760px;--col-gap:24px;--shell-top-desk:56px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --neutral-1:#000000;--neutral-2:#1f2022;--neutral-3:#2a2b2d;--neutral-4:#37383a;--neutral-5:#4f5052;
    --neutral-6:#767779;--neutral-7:#a1a3a6;--neutral-8:#c4c6c9;--neutral-9:#e4e5e6;--neutral-10:#ffffff;
    --neutral-10-transparent:#ffffff33;
    --border-default-color:rgb(255 255 255 / 0.14);
    --focus-ring-outline:2px solid color-mix(in srgb, #ffffff 50%, transparent);
    --action-ink:var(--neutral-2);
  }
}

/* Base typography. */
body{
  background:var(--canvas);color:var(--text);
  font:var(--weight-regular) var(--size-m)/var(--line-m) var(--font-ui);
  letter-spacing:var(--tracking-m);text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:var(--focus-ring-outline);outline-offset:var(--border-l)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Shell: top bar with tabs on desktop, bottom tab bar on phone. */
.shell-top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-l);
  height:var(--shell-top);padding:0 var(--gutter);background:var(--canvas);
  box-shadow:inset 0 calc(-1 * var(--border-s)) 0 var(--border-default-color);
}
.shell-brand{display:flex;align-items:center;gap:var(--space-xs);color:var(--text);font:var(--weight-heavy) var(--size-m)/1 var(--font-ui);text-decoration:none}
.shell-brand i{width:10px;height:10px;border-radius:var(--radius-full);background:var(--action)}
.shell-tabs{display:none;gap:var(--space-xxs);margin-left:var(--space-l)}
.shell-tabs a{
  display:flex;align-items:center;gap:var(--space-xs);height:34px;padding:0 var(--space-m);border-radius:var(--radius-m);
  color:var(--text-muted);font:var(--weight-medium) var(--size-s)/1 var(--font-ui);letter-spacing:var(--tracking-s);text-decoration:none;
  transition:background-color var(--motion-duration) var(--motion-easing),color var(--motion-duration) var(--motion-easing);
}
.shell-tabs a:hover{color:var(--text)}
.shell-tabs a[aria-current="page"]{background:var(--surface-muted);color:var(--text)}
.shell-who{
  margin-left:auto;width:30px;height:30px;border-radius:var(--radius-full);background:var(--surface-muted);
  display:grid;place-items:center;color:var(--text);font:var(--weight-medium) var(--size-s)/1 var(--font-ui);
}
.shell-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:max(var(--space-xs), env(safe-area-inset-bottom));background:var(--canvas);
  box-shadow:inset 0 var(--border-s) 0 var(--border-default-color);
}
.shell-tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xxs);min-height:52px;
  color:var(--text-muted);font:var(--weight-medium) var(--size-xs)/1 var(--font-ui);text-decoration:none;
}
.shell-tabbar a[aria-current="page"]{color:var(--text)}
.shell-tabbar a[aria-current="page"] .ico{stroke-width:2.25}
body.has-shell{padding-bottom:calc(var(--shell-bar) + env(safe-area-inset-bottom))}
@media (min-width: 721px){
  .shell-tabs{display:flex}
  .shell-tabbar{display:none}
  body.has-shell{padding-bottom:0}
  /* Desktop shell frame: the top bar lines up with the content frame; the Today tab carries the ask count. */
  :root{--shell-top:var(--shell-top-desk)}
  .shell-top{padding:0 max(var(--shell-gutter), calc((100vw - var(--shell-max)) / 2 + var(--shell-gutter)))}
  .shell-tabs a{height:36px;font-size:var(--size-m)}
}
.shell-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 var(--space-xs);border-radius:var(--radius-full);
  background:var(--action);color:var(--action-ink);font:var(--weight-heavy) var(--size-xs)/1 var(--font-ui);letter-spacing:var(--tracking-m);
}

/* Shell search (BGL-156). Desktop: the field sits in the shell bar after the tabs. Phone: an icon in the bar
   opens the field over the bar. Kept here, not in style.css, so every page with the shell styles it. */
.shell-search { display: none; position: relative; align-items: center; min-width: 0; margin-left: auto; }
.shell-search > .ico { position: absolute; left: var(--space-s); width: 16px; height: 16px; color: var(--neutral-6); pointer-events: none; }
.shell-search input { width: 260px; height: 36px; padding: 0 var(--space-s) 0 32px; border: 0; border-radius: var(--radius-m);
  background: var(--surface-muted); color: var(--text); font: var(--weight-regular) var(--size-m)/1 var(--font-ui); outline: none;
  transition: width var(--motion-duration) var(--motion-easing), box-shadow var(--motion-duration) var(--motion-easing); }
.shell-search input::placeholder { color: var(--neutral-6); }
.shell-search input:focus { width: 340px; box-shadow: inset 0 0 0 var(--border-s) var(--neutral-6); }
.shell-search input::-webkit-search-cancel-button { display: none; }
.shell-search-x { display: none; }
.shell-search + .shell-search-open + .shell-who { margin-left: 0; }
.shell-search-open { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin: 0 calc(-1 * var(--space-s)) 0 auto;
  padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
@media (max-width: 720px) {
  .shell-top.searching .shell-brand, .shell-top.searching .shell-who, .shell-top.searching .shell-search-open { display: none; }
  .shell-top.searching .shell-search { display: flex; flex: 1; margin-left: 0; }
  .shell-top.searching .shell-search input { flex: 1; min-width: 0; width: auto; height: var(--tap); font-size: 16px; }
  .shell-top.searching .shell-search input:focus { width: auto; }
  .shell-top.searching .shell-search-x { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--space-s));
    padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
}
@media (min-width: 721px) {
  .shell-search { display: flex; }
  .shell-search-open { display: none; }
  .shell-search + .shell-search-open + .shell-who { margin-left: var(--space-xs); }
  .shell-brand, .shell-tabs, .shell-who { flex-shrink: 0; }
  .shell-search { flex: 0 1 340px; }
  .shell-search input, .shell-search input:focus { width: 100%; min-width: 0; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .shell-top { gap: var(--space-s); }
  .shell-tabs { margin-left: 0; }
  .shell-tabs a { padding: 0 var(--space-s); }
}

/* Tools index. */
.tool-list{list-style:none;margin:var(--space-l) 0 0;padding:0;border-radius:var(--radius-l);box-shadow:inset 0 0 0 var(--border-s) var(--border-default-color);overflow:hidden}
.tool-list li+li{box-shadow:inset 0 var(--border-s) 0 var(--border-default-color)}
.tool-list a{display:flex;align-items:center;gap:var(--space-m);min-height:56px;padding:var(--space-s) var(--space-m);color:var(--text);text-decoration:none}
.tool-list b{flex:1;font-weight:var(--weight-medium)}
.tool-list .ico{color:var(--neutral-6)}
.page-title{margin:0;font:var(--weight-heavy) var(--size-l)/var(--line-l) var(--font-ui);letter-spacing:var(--tracking-s)}