/* Plugbook web app, brand v2. The same look as the landing page (Qronos style): near-black canvas, a hairline
   frame with crosshair marks, two-tone headings, app-window cards with 1px light borders and a 14px radius,
   pill buttons. Neon green #5EFF29 only for the one primary action, live dots, success and source chips.
   Manrope for text and headings, Spline Sans Mono 500 for labels and data, Google Sans 700 only for the
   "plugbook" wordmark. Fonts are self-hosted because the CSP allows font-src 'self' only. The tokens are the
   landing page's :root; the few app-only ones (states, window fill) are marked below. */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/SplineSansMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/GoogleSans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #060706; --panel: #0A0C0A; --card: #0D100D; --raise: #151915;
  --line: rgba(238, 243, 237, .085); --line2: rgba(238, 243, 237, .15); --line3: rgba(238, 243, 237, .3);
  --text: #EEF3ED; --soft: #CDD3CC; --muted: #A3AAA2; --faint: #868D85;
  --accent: #5EFF29; --on-accent: #0B0D0A; --chip: #132610; --chip-ink: #BDFAB0; --chip-line: #25521A;
  --ink: #EEF3ED; --bezel: #0B0D0A;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1344px; --gut: clamp(16px, 4.4vw, 48px); --r: 14px;
  --x: linear-gradient(var(--line3), var(--line3));
  /* app only: states the landing page does not need, and the app-window fill */
  --bad: #FF8A7A; --bad-line: rgba(255, 138, 122, .42); --warn: #F5C451; --warn-line: rgba(245, 196, 81, .4);
  --win: linear-gradient(180deg, #0E110E, #090B09);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--line3); text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
}
a:hover { text-decoration-color: var(--accent); }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0 0 12px; color: var(--muted); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 700; }
/* Only an upright Manrope is loaded and font-synthesis is off, so emphasis is brighter text instead of italics */
em { font-style: normal; color: var(--text); }
ul, ol { margin: 0; }
hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
form { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a:not([class]):focus-visible { border-radius: 4px; }
::selection { background: rgba(94, 255, 41, .28); color: var(--text); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; top: -80px; left: 12px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 14px; }
.mono { font-family: var(--mono); font-weight: 500; }
.mt { margin-top: 14px; } .mt-s { margin-top: 10px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spread { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.stack > * + * { margin-top: 16px; }

/* ---------------------------------------------------------------- frame: hairlines, crosshairs, hatched band */
.frame {
  position: relative; display: flex; flex-direction: column; width: min(var(--max), calc(100% - 12px)); min-height: 100vh;
  margin-inline: auto; border-inline: 1px solid var(--line);
}
main { flex: 1 0 auto; width: 100%; }
.rule { position: relative; height: 0; border-top: 1px solid var(--line); }
.rule::before, .rule::after, .hdr .bar::before, .hdr .bar::after {
  content: ""; position: absolute; top: -6px; width: 11px; height: 11px; pointer-events: none;
  background: var(--x) center / 1px 100% no-repeat, var(--x) center / 100% 1px no-repeat;
}
.rule::before, .hdr .bar::before { left: -6px; }
.rule::after, .hdr .bar::after { right: -6px; }
.hatch { height: 28px; border-block: 1px solid var(--line); background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--line) 7px 8px); }
/* registration marks just outside the four corners of a window */
.x4::before {
  content: ""; position: absolute; inset: -16px; pointer-events: none;
  background:
    var(--x) left 0 top 5px / 11px 1px no-repeat, var(--x) left 5px top 0 / 1px 11px no-repeat,
    var(--x) right 0 top 5px / 11px 1px no-repeat, var(--x) right 5px top 0 / 1px 11px no-repeat,
    var(--x) left 0 bottom 5px / 11px 1px no-repeat, var(--x) left 5px bottom 0 / 1px 11px no-repeat,
    var(--x) right 0 bottom 5px / 11px 1px no-repeat, var(--x) right 5px bottom 0 / 1px 11px no-repeat;
}

/* ---------------------------------------------------------------- header */
.hdr { position: relative; z-index: 40; padding-top: 10px; pointer-events: none; }
.hdr .bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 56px;
  padding: 5px clamp(12px, 2.4vw, 24px); border-block: 1px solid var(--line); background: rgba(6, 7, 6, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); pointer-events: auto;
}
@media (min-width: 720px) { .hdr { position: sticky; top: 0; } }
.brand {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--text);
  font: 700 22px/1 "Google Sans", var(--sans); letter-spacing: -.025em; text-decoration: none; white-space: nowrap;
}
.brand img { width: 31px; height: 28px; flex: none; }
.brand-sm { gap: 8px; min-height: 0; font-size: 18px; }
.brand-sm img { width: 24px; height: 22px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a:not(.btn), .nav button.link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted);
  font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.nav a:not(.btn):hover, .nav button.link:hover { color: var(--text); }
.nav a[aria-current="page"]:not(.btn) { border-color: var(--line3); background: rgba(238, 243, 237, .08); color: var(--text); }
.nav .btn { padding: 0 16px; }
@media (max-width: 719.98px) {
  .nav a:not(.btn), .nav button.link { padding: 0 10px; }
  .nav .btn { padding: 0 14px; }
  .nav-in { flex: 1 1 100%; justify-content: space-between; gap: 2px; margin-inline: -4px; }
  .nav-in a:not(.btn), .nav-in button.link { font-size: 13px; }
}

/* ---------------------------------------------------------------- footer */
.fo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 22px var(--gut) 26px; }
.fo-about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.fo-about p { margin: 0; color: var(--muted); font-size: 14px; }
.fo-links { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.fo-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted); font-size: 14px; text-decoration: none; }
.fo-links a:hover { color: var(--text); }

/* ---------------------------------------------------------------- layouts */
/* .narrow: sign-in, the connect flow, CLI sign-in and errors. Less top space on wide screens, so the primary
   button stays above the fold of a laptop window (1470 x 743). */
.narrow { width: 100%; max-width: calc(456px + 2 * var(--gut)); margin-inline: auto; padding: clamp(36px, 7vw, 84px) var(--gut) clamp(56px, 8vw, 104px); }
@media (min-width: 720px) { .narrow { padding-top: clamp(24px, 3.2vw, 44px); } }
.mid { width: 100%; max-width: calc(880px + 2 * var(--gut)); margin-inline: auto; padding: clamp(32px, 6vw, 72px) var(--gut) clamp(56px, 8vw, 96px); }
.mid.wide { max-width: calc(1040px + 2 * var(--gut)); }
.wrap { width: 100%; padding: clamp(28px, 5vw, 56px) var(--gut) clamp(56px, 8vw, 96px); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grid > * { min-width: 0; }
.grid > * > .card { height: 100%; }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; }
}

/* page head: mono label, two-tone heading (a white line, then a grey line), lede */
.ph { margin-bottom: clamp(24px, 4vw, 40px); }
.ph h1 { margin-top: 14px; font: 500 clamp(34px, 6.2vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.l2 { display: block; color: var(--faint); }
.ph .lede { max-width: 62ch; margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.ph .lede.small { font-size: 15px; }
.ph-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px; }
.ph-row > div { flex: 1 1 320px; min-width: 0; }
@media (max-width: 599.98px) { .ph-row > .btn { flex: 1 1 100%; } }
.back { margin: 0 0 6px; }
.back .btn-text { margin-left: -6px; }

/* labels */
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--faint); font: 500 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 0 14px; border: 1px solid var(--line2);
  border-radius: 999px; background: rgba(6, 7, 6, .6); color: var(--soft); font-size: 13px; font-weight: 500; line-height: 1.3;
}
.dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.dot.bad { background: var(--bad); }
.step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 26px; padding: 0 8px;
  border: 1px solid var(--line2); border-radius: 999px; color: var(--faint); font: 500 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- sign-in and the connect flow */
.auth-head { margin-bottom: 28px; text-align: center; }
.auth-head h1 { margin-top: 20px; font: 500 clamp(36px, 9.4vw, 56px)/1.03 var(--sans); letter-spacing: -.05em; overflow-wrap: anywhere; }
.auth-head .sub { max-width: 40ch; margin: 16px auto 0; color: var(--soft); font-size: 16px; line-height: 1.6; }
.auth-head .sub strong { overflow-wrap: anywhere; }
.auth-head .act { margin: 26px 0 0; }
@media (min-width: 720px) { .auth-head { margin-bottom: 22px; } .auth-head .sub { max-width: 48ch; } }
.auth .fine { margin: 22px 0 0; color: var(--faint); font-size: 13px; text-align: center; }
.auth .fine a { color: var(--muted); }
.pair { display: flex; align-items: center; justify-content: center; }
.pair .tile {
  display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line2); border-radius: 14px;
  background: linear-gradient(180deg, #121612, #0A0C0A); color: var(--text); font: 700 20px/1 var(--sans);
}
.pair .tile img { width: 30px; height: 27px; }
.pair .tile img[src*="/logos/"] { width: 26px; height: 26px; }
.pair .tile > svg { width: 24px; height: 24px; color: var(--muted); }
.w { filter: brightness(0) invert(1); } /* a one-colour logo drawn in currentColor, shown white */
.pair .wire { position: relative; width: 64px; height: 1px; background: repeating-linear-gradient(90deg, var(--line3) 0 4px, transparent 4px 8px); }
.pair .wire .dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(94, 255, 41, .16); }
.lead { margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 600; }

/* app window: the card for sign-in and every step of the connect flow */
.win { position: relative; border: 1px solid var(--line2); border-radius: var(--r); background: var(--win); box-shadow: 0 24px 60px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04); }
.win-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.win-bar h2 { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.win-bar .r, .card-bar .r { margin-left: auto; color: var(--faint); font: 500 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.win-body { padding: 22px 20px 24px; }
.win-foot { padding: 18px 20px 20px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: rgba(238, 243, 237, .015); }
@media (min-width: 520px) { .win-bar { padding: 0 26px; } .win-body { padding: 26px 26px 28px; } .win-foot { padding: 20px 26px 24px; } }
@media (max-width: 519.98px) { .x4::before { inset: -13px; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 999px; background: none; color: var(--text);
  font: 700 13px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; text-align: center;
  white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn-neon { background: var(--accent); color: var(--on-accent); }
.btn-neon:hover { background: #86FF5E; color: var(--on-accent); }
.btn-line { border-color: var(--line3); background: linear-gradient(180deg, rgba(238, 243, 237, .08), rgba(238, 243, 237, 0) 70%); color: var(--text); }
.btn-line:hover { border-color: rgba(238, 243, 237, .6); color: var(--text); }
.btn-sm { padding: 0 16px; }
.btn-block { display: flex; width: 100%; padding-block: 10px; white-space: normal; text-wrap: balance; }
.btn-danger { border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); color: var(--bad); }
.btn:active { transform: translateY(1px); }
.btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0;
  background: none; color: var(--muted); font: 600 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: color .2s;
}
.btn-text:hover { color: var(--text); }
.btn-text svg { width: 16px; height: 16px; flex: none; }
.btn-text.btn-block { padding: 0 6px; }
/* Google's own dark-theme sign-in button: their colours, their G, sentence case */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 20px;
  border: 1px solid #8E918F; border-radius: 999px; background: #131314; color: #E3E3E3; font: 600 15px/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s;
}
.btn-google:hover { border-color: #B6B9B7; background: #1C1D1F; color: #E3E3E3; }
.btn-google svg { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: 0 0 8px; color: var(--soft); font-size: 14px; font-weight: 600; }
input[type=email], input[type=text], input:not([type]) {
  display: block; width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 12px;
  background: var(--panel); color: var(--text); font: 500 16px/1.3 var(--sans); transition: border-color .2s, box-shadow .2s;
}
input::placeholder { color: var(--faint); opacity: 1; }
input:hover { border-color: var(--line3); }
input:focus { border-color: rgba(94, 255, 41, .75); box-shadow: 0 0 0 3px rgba(94, 255, 41, .16); }
input:focus-visible { outline: none; }
input[aria-invalid="true"] { border-color: var(--bad-line); }
input[aria-invalid="true"]:focus { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 138, 122, .16); }
/* A saved email or a code filled from Mail or Messages: keep the dark field instead of the browser's autofill tint */
input:-webkit-autofill, input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--panel) inset;
  transition: border-color .2s, background-color 9999s;
}
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--panel) inset, 0 0 0 3px rgba(94, 255, 41, .16);
  border-color: rgba(94, 255, 41, .75);
}
input.code { min-height: 64px; padding: 0 0 0 .38em; font: 500 30px/1 var(--mono); letter-spacing: .38em; text-align: center; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.err { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--bad); font-size: 14px; font-weight: 600; line-height: 1.45; }
.err svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
/* an error about the whole step, not the field: a box at the top of the window */
.err-top { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--bad-line); border-radius: 12px; background: rgba(255, 138, 122, .06); }
.hint.resend { margin-top: 18px; }
.note { margin: 0 0 16px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: rgba(238, 243, 237, .06); color: var(--soft); font-size: 14px; line-height: 1.5; }
.note.ok { border-color: var(--chip-line); background: var(--chip); color: var(--chip-ink); }
.note.warn { border-color: var(--warn-line); background: rgba(245, 196, 81, .06); color: var(--soft); }
.keyform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.keyform .field { flex: 1 1 240px; min-width: 0; }
.keyform .btn { min-height: 50px; }
@media (max-width: 519.98px) { .keyform .btn { width: 100%; } }

/* ---------------------------------------------------------------- cards (app windows) */
.card { position: relative; min-width: 0; border: 1px solid var(--line2); border-radius: var(--r); background: var(--win); }
.card.hot { border-color: rgba(94, 255, 41, .4); }
.card-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 6px 16px 6px 20px; border-bottom: 1px solid var(--line); }
.card-bar h2 { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--sans); letter-spacing: -.015em; }
.card-bar .btn { margin-left: auto; }
.card-body { padding: 20px; }
.card-body > h3 { margin: 24px 0 10px; font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.card-top { padding: 22px 20px 20px; border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; background: rgba(238, 243, 237, .015); }
.card-top .note { margin: 14px 0 0; }
.card-top form, .card-top > .btn-block { margin-top: 20px; }
@media (max-width: 519.98px) { .card-bar { padding: 6px 12px 6px 16px; } .card-body { padding: 18px 16px; } .card-top { padding: 20px 16px 18px; } }
@media (min-width: 960px) { .card-bar { padding: 6px 18px 6px 24px; } .card-body { padding: 24px; } .card-top { padding: 24px; } }
.nm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; margin: 0;
  color: var(--faint); font: 500 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.pr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; font: 600 clamp(28px, 3.4vw, 36px)/1.08 var(--sans); letter-spacing: -.04em; }
.pr span { color: var(--faint); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.d { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.hint { margin: 8px 0 0; color: var(--faint); font-size: 13px; line-height: 1.55; }
.empty { padding: 28px 20px; border: 1px dashed var(--line2); border-radius: 12px; text-align: center; }
.empty p { margin: 0; }
.empty p:first-child { color: var(--text); font-weight: 600; }
.empty p + p { margin-top: 6px; color: var(--faint); font-size: 14px; }

/* chips (green: sources, citations, plan time) and status pills */
.chip, .cite, .c {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border: 1px solid var(--chip-line); border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); font: 500 13px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; text-transform: none;
}
.nm .chip { letter-spacing: .06em; text-transform: uppercase; }
.cite { min-height: 22px; margin: 0 1px; padding: 0 7px; vertical-align: 1px; }
/* a citation in a playbook opens its source (a YouTube one at the cited moment) */
a.cite { position: relative; text-decoration: none; transition: border-color .2s; }
a.cite:hover { border-color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); font: 500 13px/1 var(--mono); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--faint); }
.pill.ok, .pill.done { color: var(--soft); }
.pill.ok::before, .pill.done::before { background: var(--accent); }
.pill.queued, .pill.running, .pill.building { border-color: var(--warn-line); color: var(--soft); }
.pill.queued::before, .pill.running::before, .pill.building::before { background: var(--warn); }
.pill.failed, .pill.error, .pill.refused { border-color: var(--bad-line); color: var(--bad); }
.pill.failed::before, .pill.error::before, .pill.refused::before { background: var(--bad); }
/* .pill.revoked stays neutral: a revoked key is a normal past state, not a failure */
@media (prefers-reduced-motion: no-preference) {
  .pill.queued::before, .pill.running::before, .pill.building::before { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .3; } }

/* plan and pay as you go */
.meter { margin-top: 18px; }
.meter:first-child { margin-top: 0; }
.meter .spread { color: var(--muted); font-size: 14px; }
.meter .spread b { color: var(--text); font: 500 14px/1 var(--mono); }
.track { height: 8px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); }
.fill { height: 100%; border-radius: 999px; background: var(--accent); }
.fill.full { background: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 16px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.stat { min-width: 0; padding: 12px 14px; background: var(--card); }
.stat span { display: block; color: var(--faint); font: 500 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.stat b { display: block; margin-top: 8px; color: var(--text); font: 500 18px/1.1 var(--mono); white-space: nowrap; }
@media (max-width: 379.98px) { .stat { padding: 12px 10px; } }
.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.ticks .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

/* ---------------------------------------------------------------- tables (cards on phones) */
.tablewrap { margin: 0 -4px; padding: 0 4px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 0 8px 12px; border-bottom: 1px solid var(--line); color: var(--faint); font: 500 13px/1.2 var(--mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.t { color: var(--soft); font: 500 13px/1.4 var(--mono); white-space: nowrap; }
td .mono { color: var(--text); font-size: 13px; }
td .in { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td a.in { margin-block: -11px; padding-block: 11px; }
.kn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn .mono { color: var(--faint); font-size: 13px; }
td .why { display: block; max-width: 24ch; margin-top: 4px; color: var(--soft); font-size: 13px; line-height: 1.4; white-space: normal; }
/* the API keys table: label and value cards until it fits with room for longer values (it needs about 866 px,
   which leaves 4 px at 1024) */
@media (max-width: 1099.98px) {
  table.cards, table.cards tbody { display: block; }
  table.cards thead { display: none; }
  table.cards tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.cards tr:first-child { padding-top: 0; }
  table.cards tr:last-child { padding-bottom: 0; border-bottom: 0; }
  table.cards td { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; padding: 4px 0; border: 0; text-align: right; }
  table.cards td::before { content: attr(data-l); flex: none; color: var(--faint); font: 500 13px/1.2 var(--mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  table.cards td[data-l=""] { justify-content: flex-end; }
  table.cards td[data-l=""]::before { content: none; }
  .kn { align-items: flex-end; }
}
/* the activity feed: a full table from 1200 px (it needs about 1005 px), one compact row per call below that.
   Row 1: the call and its status (and why it failed); row 2: the input; row 3: when, from, pack, time, charge. */
@media (max-width: 1199.98px) {
  table.feed, table.feed tbody { display: block; }
  table.feed thead { display: none; }
  table.feed tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.feed tr:first-child { padding-top: 0; }
  table.feed tr:last-child { padding-bottom: 0; border-bottom: 0; }
  table.feed td { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; text-align: left; }
  table.feed td[data-l=Call] { order: 1; flex: 1 1 auto; }
  table.feed td[data-l=Status] { order: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  table.feed td[data-l=Input] { order: 3; flex: 1 1 100%; }
  table.feed tr::after { content: ""; order: 3; flex: 0 0 100%; } /* row 1 ends here even when there is no input */
  table.feed td.t, table.feed td[data-l=From], table.feed td[data-l=Pack] { order: 4; color: var(--faint); font: 500 13px/1.4 var(--mono); }
  table.feed td .in { display: block; max-width: 100%; }
  table.feed td a.in { margin-block: -6px; padding-block: 6px; }
  table.feed td.nil { display: none; }
  table.feed td .why { margin-top: 2px; }
}
/* fixed column widths, so the calls behind "Show all" (a second table) line up with the first ten; Input takes the rest */
@media (min-width: 1200px) {
  table.feed { table-layout: fixed; }
  table.feed th:nth-child(1) { width: 140px; } table.feed th:nth-child(2) { width: 132px; }
  table.feed th:nth-child(3) { width: 124px; } table.feed th:nth-child(5) { width: 100px; }
  table.feed th:nth-child(6) { width: 140px; } table.feed th:nth-child(7) { width: 70px; }
  table.feed th:nth-child(8) { width: 116px; }
  table.feed td { overflow-wrap: anywhere; }
  table.feed td.t { white-space: normal; }
  table.feed td .in { max-width: 100%; }
}
/* the calls after the first ten */
.feed-more { margin-top: 16px; }
.feed-more > summary { list-style: none; }
.feed-more > summary::-webkit-details-marker { display: none; }
.feed-more > summary .chev { transition: transform .2s; }
.feed-more[open] > summary .chev { transform: rotate(180deg); }
.feed-more[open] > summary .lbl-more, .feed-more:not([open]) > summary .lbl-less { display: none; }
.feed-more > .tablewrap { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- packs and sources */
.packs { display: grid; gap: 12px; }
.pack { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pack-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pack-head > div { min-width: 0; }
.pack h3 { font: 600 17px/1.3 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pack h3 a { text-decoration-color: var(--line2); }
.pack h3 a:hover { text-decoration-color: var(--accent); }
.pack .meta { margin: 4px 0 0; color: var(--faint); font: 500 13px/1.45 var(--mono); }
.srcs { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.card-body > .srcs:first-child { margin-top: 0; }
.srcs li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.srcs li:nth-child(odd) { background: rgba(238, 243, 237, .025); }
.srcs .c { flex: none; }
/* position: relative keeps the hidden "(opens in a new tab)" span inside the clipped link, not at the end of a long title.
   The taller tap area is a transparent border, not padding: overflow clips at the padding edge, so padding would
   show the top of a clamped third line under the ellipsis. */
.srcs .tt {
  position: relative; display: -webkit-box; flex: 1 1 auto; min-width: 0; margin-block: -12px; padding-block: 0; border-block: 12px solid transparent;
  overflow: hidden; color: var(--soft); line-height: 1.45; text-decoration: none; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.srcs a.tt:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--line3); }
.srcs .pill { flex: none; margin-left: auto; }
.srcs .more { color: var(--faint); font-size: 13px; }
.srcs .more a { color: var(--muted); }
.srcs .more a:hover { color: var(--text); }

/* ---------------------------------------------------------------- connect dialog */
/* pinned near the top, so switching tabs (which changes the height) does not move the tab bar */
dialog {
  width: min(720px, calc(100vw - 24px)); max-width: none; margin: max(12px, 8vh) auto auto; padding: 0;
  max-height: calc(100vh - max(12px, 8vh) - 12px); max-height: calc(100dvh - max(12px, 8vh) - 12px);
  overflow: hidden; border: 1px solid var(--line2); border-radius: 16px; background: var(--win); color: var(--text); box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(3, 4, 3, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 6px 8px 6px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font: 600 17px/1.3 var(--sans); letter-spacing: -.015em; }
.dlg-body { flex: 1 1 auto; min-height: 0; padding: 18px 16px 20px; overflow-y: auto; }
.dlg-foot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .dlg-head { padding-left: 24px; } .dlg-body { padding: 22px 24px 24px; } }
.x { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.x:hover { background: rgba(238, 243, 237, .06); color: var(--text); }
.x svg { width: 18px; height: 18px; }
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 18px; padding: 4px; border: 1px solid var(--line2); border-radius: 16px; background: rgba(10, 12, 10, .92); }
.tabs button {
  min-height: 44px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--muted);
  font: 600 14px/1.2 var(--sans); text-align: center; cursor: pointer; transition: background-color .2s, color .2s;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--raise); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
@media (min-width: 600px) { .tabs { display: flex; border-radius: 999px; } .tabs button { flex: 1 1 auto; padding: 0 16px; border-radius: 999px; white-space: nowrap; } }
ol.steps { margin: 0 0 14px; padding-left: 24px; color: var(--soft); }
ol.steps li { margin-bottom: 10px; padding-left: 6px; line-height: 1.6; }
ol.steps li::marker { color: var(--faint); font-family: var(--mono); font-size: 13px; font-weight: 500; }
/* an example to type, such as the first prompt to try */
.steps em { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.panel > p { color: var(--soft); }
.keybox { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.keybox:last-child { margin-bottom: 0; }
.keybox code {
  display: flex; flex: 1 1 240px; align-items: center; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--panel); color: var(--text); font: 500 14px/1.45 var(--mono); overflow-wrap: anywhere;
}
.keybox .btn { flex: none; align-self: center; } /* a pill, even next to a command that wraps to two lines */
@media (max-width: 519.98px) {
  .keybox { flex-direction: column; }
  .keybox code { flex: none; padding: 10px 12px; font-size: 13px; }
  .keybox .btn { width: 100%; }
}

/* ---------------------------------------------------------------- code */
code, pre, kbd { font-family: var(--mono); font-weight: 500; }
:not(pre) > code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--raise); color: var(--soft); font-size: 13.5px; overflow-wrap: anywhere; }
pre {
  margin: 0 0 14px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line2); border-radius: 12px; background: #070807;
  color: var(--soft); font-size: 13.5px; line-height: 1.65; white-space: pre; tab-size: 2;
}
pre:last-child { margin-bottom: 0; }
pre code { font: inherit; }

/* ---------------------------------------------------------------- playbook (rendered Markdown) */
.md { color: var(--soft); font-size: 16px; line-height: 1.7; }
.md > :first-child { margin-top: 0; }
.md h1 { margin: 0 0 16px; font: 600 clamp(24px, 3vw, 30px)/1.15 var(--sans); letter-spacing: -.035em; }
.md h2 { margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font: 600 21px/1.25 var(--sans); letter-spacing: -.025em; }
.md h1 + h2 { margin-top: 8px; padding-top: 0; border-top: 0; }
.md h3 { margin: 24px 0 8px; font: 700 17px/1.35 var(--sans); letter-spacing: -.015em; }
.md h4 { margin: 20px 0 6px; color: var(--faint); font: 500 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.md p, .md li { color: var(--soft); }
.md p { margin: 0 0 14px; }
.md ul, .md ol { margin: 0 0 16px; padding-left: 22px; }
.md li { margin-bottom: 8px; padding-left: 4px; }
.md li::marker { color: var(--faint); }
.md ol > li::marker { font-family: var(--mono); font-size: 13px; }
.md blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 2px solid var(--line3); color: var(--muted); }
.md a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- public pages */
.hero { padding: clamp(8px, 3vw, 40px) 0 clamp(32px, 5vw, 56px); text-align: center; }
.hero h1 { margin-top: 22px; font: 500 clamp(38px, 8vw, 72px)/1.02 var(--sans); letter-spacing: -.05em; }
.hero h1 .l2 { padding-bottom: .08em; background: linear-gradient(180deg, #EEF3ED 18%, #8E958D 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { max-width: 52ch; margin: 20px auto 0; color: var(--soft); font-size: clamp(16px, 2vw, 18px); line-height: 1.6; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero .fine { margin: 18px 0 0; color: var(--faint); font-size: 14px; }
.doc .card-body { max-width: 78ch; }
.doc p { color: var(--soft); }
.doc ul { display: grid; gap: 10px; margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
.doc li::marker { color: var(--faint); }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}