/* The look every page on the home page shares — the list of tools, the sign-in and
   the account page.
 *
 * **A file rather than three copies inline.** The home page is a directory Caddy
 * serves, so a second file costs nothing, and the three pages are one surface: a
 * person signs in, lands on the list, opens their account. Three inline copies of
 * this would drift on the first edit.
 *
 * Deliberately not the product's stylesheet. A developer tool that looks like the
 * student app is exactly what a person arriving from a login cannot tell apart —
 * that confusion is what this whole change exists to end. */

:root {
  --surface: rgb(248 250 248);
  --card: rgb(255 255 255);
  --ink: rgb(45 52 50);
  --ink-quiet: rgb(89 97 95);
  --line: rgb(172 179 177);
  --accent: rgb(70 103 71);
  --warn: rgb(169 112 42);
  --bad: rgb(162 69 63);
  --shadow: 0 1px 2px rgb(20 32 29 / .06), 0 12px 32px -18px rgb(20 32 29 / .3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: rgb(20 20 26);
    --card: rgb(26 26 32);
    --ink: rgb(228 230 238);
    --ink-quiet: rgb(146 150 168);
    --line: rgb(46 46 60);
    --accent: rgb(162 166 188);
    --warn: rgb(211 160 92);
    --bad: rgb(217 123 116);
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px -18px rgb(0 0 0 / .8);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--surface); color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The bar, the same on every surface of this server that is not Learn.
 *
 * **An M3 small top app bar since 2026-10-19**, the same bar as the Lab and Studio
 * (`wondy/apps/lab/lab/templates/_bar.html` and the shell block of `lab.css`), which
 * moved from dark-on-both to Material Design 3 that day. This page is a static file
 * Caddy serves without the app, so it cannot link the app's `m3.css`: the M3 roles the
 * bar needs are copied below, scoped to `.bar`, with the values of the M3 baseline
 * scheme (source #6750A4) that `m3.css` declares. Change one, change the other.
 *
 * Container *surface*, *surface-container* once the page has scrolled under it
 * (`data-scrolled`, set by this page's script); the title in title-large; the nine dots
 * an icon button; the account an assist chip; sign out a text button. The rest of this
 * page keeps its own look: only the bar was asked to move.
 *
 * **To put the dark bar back**, point `--bar-*` at the inverse roles, as the commented
 * rule in `lab.css` does. */
.bar {
  --md-sys-color-primary: #6750a4;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #4a4458;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-ext-color-success: #386a20;
  --md-ext-color-warning: #7c5800;
  --md-ref-typeface: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-ref-typeface-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface);
  --md-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);

  --bar-bg: var(--md-sys-color-surface);
  --bar-bg-scrolled: var(--md-sys-color-surface-container);
  --bar-fg: var(--md-sys-color-on-surface);
  --bar-fg-2: var(--md-sys-color-on-surface-variant);
  --bar-accent: var(--md-sys-color-primary);
  --bar-line: var(--md-sys-color-outline);
  --bar-ind: var(--md-sys-color-secondary-container);
  --bar-on-ind: var(--md-sys-color-on-secondary-container);
  position: sticky; top: 0; z-index: 20;
  background: var(--bar-bg); color: var(--bar-fg);
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  .bar {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-highest: #36343b;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    --md-ext-color-success: #9cd67d;
    --md-ext-color-warning: #f8bd2a;
  }
}
.bar[data-scrolled] { background: var(--bar-bg-scrolled); }
.bar .row {
  max-width: 1180px; margin: 0 auto; padding: 8px 16px; min-height: 64px;
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px;
}
.bar .brand { font: var(--md-sys-typescale-title-large); color: var(--bar-fg); }
.bar .tag {
  font: var(--md-sys-typescale-body-medium); letter-spacing: 0.25px; color: var(--bar-fg-2);
  padding-left: 12px; border-left: 1px solid var(--md-sys-color-outline-variant);
}

/* Every control in the bar draws the M3 state layer: a film of its own content colour,
   8% on hover, 10% on focus and on press. */
.bar .apps, .bar .seat, .bar .out { position: relative; isolation: isolate; }
.bar .apps::after, .bar button.seat::after, .bar .out::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bar .apps:hover::after, .bar button.seat:hover::after, .bar .out:hover::after { opacity: 0.08; }
.bar .apps:focus-visible::after, .bar button.seat:focus-visible::after, .bar .out:focus-visible::after { opacity: 0.1; }
.bar .apps:active::after, .bar button.seat:active::after, .bar .out:active::after { opacity: 0.1; }
/* M3's focus indicator: a 3px ring in secondary, 2px off the control. */
.bar :focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* Nine dots, as an M3 standard icon button: 40px, full corner. */
.bar .apps {
  all: unset; cursor: pointer; flex: none; position: relative; isolation: isolate;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px;
  color: var(--bar-fg-2);
}
.bar .apps[aria-expanded="true"] { background: var(--bar-ind); color: var(--bar-on-ind); }
.bar .apps:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.bar .dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.bar .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* The other server and LiteLLM: always visible, pushed to the right with the chip. */
.bar .bar-links { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bar .bar-links + .seat { margin-left: 0; }
.bar .bar-link {
  display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--bar-line); border-radius: 8px; color: var(--bar-fg); text-decoration: none;
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px; white-space: nowrap;
}
.bar .bar-link:hover { background: var(--bar-ind); color: var(--bar-on-ind); border-color: transparent; }
.bar .bar-link:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* The account, as an M3 assist chip: 32px, small corner, outline. */
.bar .seat {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; box-sizing: border-box; padding: 0 16px 0 12px;
  border: 1px solid var(--bar-line); border-radius: 8px;
  color: var(--bar-fg); text-decoration: none; background: transparent; cursor: pointer;
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px;
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar .seat[aria-expanded="true"] { background: var(--bar-ind); color: var(--bar-on-ind); border-color: transparent; }
.bar .seat .led { width: 8px; height: 8px; border-radius: 50%; background: var(--md-ext-color-success); flex: none; }

/* Sign out, as an M3 text button: a `button` here, so the keyboard reaches it. */
.bar .out {
  all: unset; flex: none; display: inline-flex; align-items: center; height: 40px;
  padding: 0 12px; border-radius: 9999px; cursor: pointer; position: relative; isolation: isolate;
  font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px;
  color: var(--bar-accent); text-decoration: none;
}
.bar .out:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* --- the switcher panel, as on the app ---------------------------------------- */
.apps-panel {
  position: absolute; z-index: 30; margin: 4px 0 0 14px;
  width: min(580px, calc(100vw - 32px)); padding: 16px; box-sizing: border-box;
  border-radius: 16px; border: 0;
  background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-level2);
  color: var(--md-sys-color-on-surface);
}
.apps-panel[hidden] { display: none; }
.apps-head {
  margin: 0 0 12px; font: 400 10.5px/1.5 var(--md-ref-typeface-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--md-sys-color-on-surface-variant);
}
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.app {
  display: grid; gap: 4px; padding: 12px 12px 13px; border-radius: 10px;
  text-decoration: none; color: inherit; border: 1px solid transparent;
  font-family: var(--md-ref-typeface);
}
.app:hover { background: var(--md-sys-color-surface-container-highest); }
/* One letter in a rounded square, white on a fixed colour (not a role). */
.app .mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: #4a5a55; color: #ffffff;
  font-family: var(--md-ref-typeface); font-weight: 600; font-size: 13px; letter-spacing: -.02em;
}
.app[data-surface="door"] .mark { background: #4a5a55; }
.app[data-surface="learn"] .mark { background: #3c7a4d; }
.app[data-surface="lab"] .mark { background: #14615a; }
.app[data-surface="studio"] .mark { background: #7a4f9e; }
.app[data-surface="gateway"] .mark { background: #8a5a1c; }
.app-name { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.app-what { font-size: 11.5px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }

/* The panel under the person's chip: the switcher's shape, narrower and with no marks.
   **Aligned to the row, not to the viewport**: the row is 1180px centred with 16px of
   padding, so the panel's right edge is the row's, falling back to 14px once the row
   stops being centred. Kept in step with `lab/static/lab.css` by hand. */
.you-panel {
  position: absolute; z-index: 30; margin-top: 4px;
  right: max(14px, calc((100vw - 1180px) / 2 + 16px));
  width: min(360px, calc(100vw - 32px)); padding: 16px; box-sizing: border-box;
  border-radius: 16px; border: 0;
  background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-level2);
  color: var(--md-sys-color-on-surface);
}
.you-panel[hidden] { display: none; }
.you-grid { display: grid; gap: 4px; }
.you-row {
  display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 10px;
  text-decoration: none; color: inherit; border: 1px solid transparent; font-family: var(--md-ref-typeface);
}
.you-row:hover { background: var(--md-sys-color-surface-container-highest); }
.you-name { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.you-what { font-size: 11.5px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }

main { width: 100%; max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.eyebrow { margin: 0 0 .35rem; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-quiet); }
h1 { margin: 0 0 1.75rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
h2 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 600; }
.foot { margin: 1.75rem 0 0; font-size: .8rem; color: var(--ink-quiet); }

/* The list of tools. */
.doors { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.door { display: block; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; }
.door:hover, .door:focus-visible { border-color: var(--accent); outline: none; }
.door:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.name { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: .3rem; }
.what { display: block; font-size: .875rem; color: var(--ink-quiet); }
/* **A tile says it heard the click** (carnet 2026-10-10, F1). The tool behind it can take
   seconds to send its first byte — a 2 GB server answering from swap after a deploy —
   and a page that does nothing in the meantime reads as a click that missed. The tile
   lights, says *opening…* and turns a small ring until the next page replaces it. */
.door[aria-busy="true"] { border-color: var(--accent); cursor: progress; }
.door .opening { display: none; align-items: center; gap: .45rem; margin-top: .55rem; font-size: .8rem; color: var(--accent); }
.door[aria-busy="true"] .opening { display: flex; }
.door .ring { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: door-turn .8s linear infinite; }
@keyframes door-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .door .ring { animation: none; border-color: var(--accent); } }

/* Forms — the sign-in and the account page. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .8rem; color: var(--ink-quiet); }
.field input {
  font: inherit; font-size: .95rem; padding: .6rem .75rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
button.go {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  padding: .6rem 1.4rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--card);
}
a.go {
  display: inline-block; text-decoration: none;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  padding: .6rem 1.4rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--card);
}
button.go:hover, a.go:hover { filter: brightness(1.1); }
button.go:disabled { opacity: .5; cursor: default; }
.quiet { font-size: .85rem; color: var(--ink-quiet); margin: 1rem 0 0; }
.said { margin: 1rem 0 0; font-size: .9rem; }
.said.bad { color: var(--bad); }
.said.ok { color: var(--accent); }
.said:empty { margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.secret { display: block; margin: .6rem 0; padding: .7rem .9rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.warnbar { border-left: 3px solid var(--warn); padding-left: .9rem; }

/* **Why you are on this page**, when LiteLLM sent you: one sentence under the title. */
.sent { margin: -1rem 0 1.4rem; font-size: .9rem; }

/* A button that is a sentence — for the act that is not the one you came for. */
button.linkish {
  all: unset; cursor: pointer; color: var(--accent); text-decoration: underline;
  text-underline-offset: .15em;
}
button.linkish:hover { filter: brightness(1.1); }
button.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* The eye. A field you cannot read is a field you cannot check. */
.withreveal { position: relative; display: block; }
.withreveal input { width: 100%; box-sizing: border-box; padding-right: 2.75rem; }
button.reveal {
  all: unset; position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 6px;
  cursor: pointer; color: var(--ink-quiet);
}
button.reveal:hover { color: var(--ink); background: var(--surface); }
button.reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.reveal .off { display: none; }
button.reveal[aria-pressed="true"] .on { display: none; }
button.reveal[aria-pressed="true"] .off { display: block; }

/* **My account** (2026-10-08): who you are, then the two secrets, each saying what it
   is for. The password change is folded inside its card until asked for. */
dl.facts { display: grid; grid-template-columns: 7rem 1fr; gap: .35rem 1rem; margin: 0; }
dl.facts dt { color: var(--ink-quiet); font-size: .9rem; }
dl.facts dd { margin: 0; }
.secrets-head { margin: 1.75rem 0 .6rem; font-weight: 400; }
.secrets-head + .card { margin-top: 0; }
#account-only + .card { margin-top: 1rem; }
.does { margin: .2rem 0 .75rem; }
.status { margin: 0 0 .75rem; font-size: .9rem; }
.status b { font-weight: 600; color: var(--accent); }
.status[hidden] { display: none; }
.hint { font-size: .8rem; color: var(--ink-quiet); }
.card details > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .95rem; }
.card details[open] > summary { margin-bottom: .8rem; }

/* **The setup, as the two steps a person does.** */
ol.steps { margin: 1rem 0 0; padding-left: 1.2rem; }
ol.steps > li + li { margin-top: 1rem; }
ol.steps .secret { letter-spacing: .08em; }