/* The one face, shared by every surface of this product: the cockpit inside a bot and the owner's
   own pages on the door. It is served at /__ui/ by both, from THIS file - there is no copy.
   The system is stalkr.ai's, translated to dark: one type family, a warm near-black ground,
   off-white ink, low-alpha hairlines, pill controls, big confident headings, generous whitespace,
   quiet metadata, and exactly one accent - Wrkr emerald - spent only on the mark, one primary
   action at a time, and live state. ui/kit.js is the behaviour that goes with it. */

@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/site/fonts/inter-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:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/site/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Funnel Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/funnel-sans-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:"Funnel Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/site/fonts/funnel-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/site/fonts/geist-mono-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 {
  color-scheme:dark;
  --ground:#0e0e0e;
  --sunk:#0a0a0a;
  --panel:#161616;
  --raised:#1f1f1f;
  --hover:#272727;
  --line:rgba(240,240,238,.09);
  --line-2:rgba(240,240,238,.17);
  /* Materials. Surfaces that float over content are translucent and blurred; surfaces you read
     from stay solid. Every raised thing gets the same two cues macOS gives it: a specular hairline
     along its top edge, and a shadow that says how far off the ground it is. */
  --blur:saturate(170%) blur(30px);
  --material:rgba(26,26,26,.72);
  --material-strong:rgba(23,23,23,.95);
  --material-rail:rgba(17,17,17,.62);
  --menu-solid:#1b1b1b;
  --specular:inset 0 1px 0 rgba(255,255,255,.055);
  --specular-strong:inset 0 1px 0 rgba(255,255,255,.09);
  --bezel:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.013));
  --sheen:rgba(255,255,255,.07);
  --press:rgba(0,0,0,.22);
  /* The hairline around a surface that floats free of the page - a menu, a dialog, the composer.
     It has one job; a shadow names its own colour, the way the two below do. */
  --edge:rgba(255,255,255,.13);
  --lift-1:0 1px 2px rgba(0,0,0,.36);
  --lift-2:0 2px 6px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.34);
  --lift-3:0 8px 20px rgba(0,0,0,.42),0 32px 80px rgba(0,0,0,.5);
  --r-window:15px;
  --ink:#f2f2f0;
  --body:#d2d2cf;
  --muted:#97968f;
  --faint:#76756e;
  --accent:#5ad19e;
  --accent-lift:#7ce3b7;
  --accent-soft:rgba(90,209,158,.13);
  --accent-line:rgba(90,209,158,.42);
  --accent-ink:#06130d;
  --warn:#e0b070;
  --warn-soft:rgba(224,176,112,.1);
  --danger:#e58a7c;
  --danger-soft:rgba(229,138,124,.1);
  --sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Funnel Sans",var(--sans);
  --mono:"Geist Mono","SFMono-Regular",ui-monospace,Consolas,"Liberation Mono",monospace;
  /* One rhythm for the whole client. Every gap, pad and margin is drawn from this ladder, so
     spacing is a system to tune in one place rather than 452 separate decisions. */
  --s-1:2px;
  --s-2:4px;
  --s-3:6px;
  --s-4:8px;
  --s-5:10px;
  --s-6:12px;
  --s-7:16px;
  --s-8:20px;
  --s-9:26px;
  --s-10:34px;
  --s-11:44px;
  /* And one type ladder. The half-pixel sizes it replaces were noise, not hierarchy. */
  --t-11:11px;
  --t-12:12px;
  --t-13:13px;
  --t-14:14px;
  --t-15:15px;
  --t-16:16px;
  --t-18:18px;
  --t-20:20px;
  --t-26:26px;
  --t-30:30px;
  /* One ladder for how tall a thing you press or type into is. A height repeated twenty-five times
     is not structure, it is a decision, and a decision belongs in one place. */
  --h-1:22px;
  --h-2:26px;
  --h-3:30px;
  --h-4:34px;
  --h-5:40px;
  --h-6:46px;
  /* And one for how big a glyph is. --i-3 is the ordinary one, on every button in this client. */
  --i-1:12px;
  --i-2:14px;
  --i-3:17px;
  --i-4:20px;
  --i-5:26px;
  --i-6:34px;
  --r-pill:999px;
  --r-small:6px;
  --r-chip:8px;
  --r-input:10px;
  --r-card:14px;
  --r-bubble:16px;
  /* The few widths and heights this layout repeats, each with the name of what it is. */
  --w-rail:268px;
  --w-name:120px;
  --w-label:230px;
  --w-read:560px;
  --h-card:112px;
  --h-preview:150px;
  --h-thumb:84px;
  --w-meta:112px;
  --dot:6px;
  --dot-lg:9px;
  --i-hero:42px;
  /* How much room a thing the bot made may take in the conversation, on its own and in a grid. */
  --h-view:320px;
  --h-tile:132px;
  --w-tile:236px;
  /* Grounds and inks nothing may reinvent. Every one of these has a counterpart in the light
     block below, so a surface that binds to a token is a surface that follows the theme. */
  --wash:radial-gradient(130% 90% at 10% -12%, rgba(90,209,158,.035), transparent 60%),linear-gradient(#131313,#0b0b0b 64%);
  --raise:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.05));
  --raise-soft:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.028));
  --card-face:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.016));
  --card-edge:rgba(0,0,0,.36);
  --inset:rgba(0,0,0,.3);
  --inset-edge:inset 0 1px 3px rgba(0,0,0,.4);
  --field:rgba(0,0,0,.22);
  --field-edge:inset 0 1px 2px rgba(0,0,0,.35);
  --veil:rgba(10,9,8,.92);
  --scrim:rgba(10,9,8,.6);
  --backdrop:rgba(0,0,0,.72);
  --warn-line:rgba(224,176,112,.3);
  --danger-line:rgba(229,138,124,.4);
  --accent-fill:linear-gradient(#7ee3b8,#4cc491);
  --accent-fill-lift:linear-gradient(#8fecc4,#5ad19e);
  --accent-fill-edge:inset 0 1px 0 rgba(255,255,255,.4);
  /* A page is paper and a screen with nothing on it is black, in either theme. */
  --paper:#ffffff;
  --screen-off:#000000;
  /* A terminal's own palette. The three with no name of their own in this system get one here. */
  --ansi-blue:#83aae2;
  --ansi-magenta:#c89ada;
  --ansi-cyan:#6cc7cc;
  --ease:cubic-bezier(.2,.8,.2,1);
}

* { box-sizing:border-box }
[hidden] { display:none!important }
html, body { margin:0; color:var(--body); font:var(--t-14)/1.5 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
body { background:var(--wash) }
button, input, select, textarea { font:inherit }
h1, h2, h3, h4 { margin:0; color:var(--ink); font-weight:600 }
h1, .surface h1, #onboarding h2, .empty-card h2, .state-card h2, dialog h2 { font-family:var(--display) }
h1 { font-size:var(--t-30); line-height:1.14; letter-spacing:-.032em }
h2 { font-size:var(--t-20); line-height:1.25; letter-spacing:-.022em }
h3 { font-size:var(--t-16); line-height:1.3; letter-spacing:-.014em }
code, .mono { font-family:var(--mono); font-size:.92em; letter-spacing:-.01em }

button, .button, a.button { min-height:var(--h-4); display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3); padding:var(--s-3) var(--s-6); border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--bezel); color:var(--body); font-size:var(--t-13); font-weight:500; text-decoration:none; cursor:pointer; box-shadow:var(--lift-1),var(--specular); transition:background 130ms,border-color 130ms,color 130ms,box-shadow 130ms,opacity 130ms }
button:hover:not(:disabled), .button:hover { border-color:var(--line-2); background:var(--raise-soft); color:var(--ink) }
button:active:not(:disabled), .button:active { background:var(--press); box-shadow:var(--inset-edge) }
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px }
button:disabled { opacity:.34; cursor:default }
button.primary, .button.primary { border-color:transparent; background:var(--accent-fill); color:var(--accent-ink); font-weight:600; box-shadow:var(--lift-1),var(--accent-fill-edge) }
button.primary:hover:not(:disabled), .button.primary:hover { background:var(--accent-fill-lift); color:var(--accent-ink) }
button.quiet, .button.quiet { border-color:transparent; background:transparent; color:var(--muted); box-shadow:none }
button.quiet:hover:not(:disabled) { border-color:transparent; background:var(--sheen) }
button.danger, .button.danger { color:var(--danger) }
button.danger:hover:not(:disabled) { border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger) }
svg { width:var(--i-3); height:var(--i-3); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
/* Written to beat `a.button`, which is more specific than a lone class and was quietly keeping its
   14px side padding - that is what crushed a 17px glyph into a 4px sliver. */
.icon-button, a.icon-button, .button.icon-button { width:var(--h-4); height:var(--h-4); min-width:var(--h-4); flex:0 0 var(--h-4); padding:0; border-color:transparent; background:transparent; color:var(--muted); box-shadow:none }
/* An icon is never the thing that gives way when a control runs short of room. */
button svg, .button svg, a.button svg { flex:none }
.icon-button:hover:not(:disabled) { border-color:transparent; background:var(--sheen); color:var(--ink) }
.icon-button[aria-pressed="true"], .icon-button[aria-selected="true"] { border-color:transparent; background:var(--accent-soft); color:var(--accent) }
.eyebrow { display:block; color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.16em }
.spacer { flex:1 }
.wordmark { color:var(--accent); font:600 var(--t-14)/1 var(--mono); letter-spacing:-.06em }

/* ── the one floating layer ───────────────────────────────────────────────────
   Every menu, picker and right-click in this product is this one surface, placed by ui/kit.js. */
#actionMenu { position:fixed; z-index:70; width:246px; padding:var(--s-3); border:1px solid var(--edge); border-radius:var(--r-card); background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--lift-3),var(--specular-strong) }
/* An item in this layer looks the same whether it does something or goes somewhere. */
#actionMenu button, #actionMenu a { width:100%; min-height:var(--h-4); display:flex; align-items:center; justify-content:flex-start; gap:var(--s-5); padding:var(--s-3) var(--s-5); border-color:transparent; border-radius:var(--r-input); background:transparent; color:var(--body); font-size:var(--t-13); font-weight:400; text-align:left; text-decoration:none; box-shadow:none }
#actionMenu button:hover:not(:disabled), #actionMenu a:hover { border-color:transparent; background:var(--raised); color:var(--ink) }
#actionMenu button.danger:hover:not(:disabled), #actionMenu a.danger:hover { background:var(--danger-soft) }
#actionMenu svg { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2); color:var(--faint) }
#actionMenu button.danger svg, #actionMenu a.danger svg { color:var(--danger) }
#actionMenu hr { height:1px; margin:var(--s-3) var(--s-2); border:0; background:var(--line) }
#actionMenu .menu-label { padding:var(--s-4) var(--s-5) var(--s-2); color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.16em }
#actionMenu button[data-selected="true"], #actionMenu a[data-selected="true"] { background:var(--accent-soft); color:var(--accent) }
#actionMenu button[data-selected="true"] svg, #actionMenu a[data-selected="true"] svg { color:var(--accent) }
#actionMenu .menu-identity { display:flex; flex-direction:column; gap:1px; padding:var(--s-4) var(--s-5) var(--s-3) }
#actionMenu .menu-identity strong { color:var(--ink); font-size:var(--t-14); font-weight:600 }
#actionMenu .menu-identity small { color:var(--faint); font-size:var(--t-12) }

/* ── the two questions ────────────────────────────────────────────────────────
   Naming or choosing (formDialog) and confirming (confirmDialog). ui/kit.js builds both. */
dialog { width:min(520px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border:1px solid var(--edge); border-radius:var(--r-bubble); background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--body); box-shadow:var(--lift-3),var(--specular-strong) }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(3px) }
dialog form { position:relative; display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-8) }
dialog h2 { padding-right:var(--s-9) }
dialog form>p { margin:0; color:var(--muted); font-size:var(--t-14); line-height:1.55 }
dialog header { display:flex; align-items:center; gap:var(--s-5) }
dialog header strong { flex:1; color:var(--ink); font-size:var(--t-16); font-weight:600 }
dialog label { display:flex; flex-direction:column; gap:var(--s-3) }
dialog label>span { color:var(--body); font-size:var(--t-13) }
dialog input[type="text"], dialog input:not([type]) { width:100%; height:var(--h-5); padding:var(--s-3) var(--s-6); border:1px solid var(--edge); border-radius:var(--r-input); background:var(--field); box-shadow:var(--field-edge); color:var(--ink); font-size:var(--t-14) }
dialog input:focus-visible { border-color:var(--accent-line) }
dialog menu { display:flex; justify-content:flex-end; gap:var(--s-4); margin:0; padding:0 }
.field-hint { display:flex; align-items:center; gap:var(--s-3); min-height:var(--h-1); color:var(--faint); font-size:var(--t-12) }
.field-hint b { color:var(--muted); font:var(--t-12) var(--mono); font-weight:400 }
.dialog-note { margin:0; padding:var(--s-6) var(--s-7); border:1px solid var(--line); border-radius:var(--r-input); background:var(--sunk); color:var(--muted); font-size:var(--t-13); line-height:1.55 }
.dialog-check { flex-direction:row; align-items:flex-start; gap:var(--s-5); padding:var(--s-6) var(--s-7); border:1px solid var(--line); border-radius:var(--r-input); cursor:pointer }
.dialog-check input { width:var(--i-3); height:var(--i-3); flex:0 0 var(--i-3); margin-top:1px; accent-color:var(--accent) }
.dialog-check span { display:flex; flex-direction:column; gap:var(--s-1); color:var(--body); font-size:var(--t-13) }
.dialog-check small { color:var(--faint); font-size:var(--t-12); line-height:1.45 }
.dialog-error { min-height:var(--h-1); margin:0; color:var(--danger); font-size:var(--t-13) }
.dialog-close { position:absolute; top:14px; right:14px; width:var(--h-3); height:var(--h-3); padding:0; border:0; background:transparent }
#formFields { display:flex; flex-direction:column; gap:var(--s-6) }
#formChoices { max-height:340px; overflow:auto }
.folder-choice { width:100%; justify-content:flex-start; border-color:transparent; border-radius:var(--r-input); background:transparent }
/* A choice with something to explain: the name, then the line that says what picking it means. */
.folder-choice:has(small) { min-height:var(--h-6); flex-direction:column; align-items:flex-start; gap:var(--s-2); padding:var(--s-6) var(--s-7); text-align:left }
.folder-choice strong { color:var(--ink); font-size:var(--t-14); font-weight:600 }
.folder-choice small { color:var(--muted); font-size:var(--t-13); font-weight:400; line-height:1.45; white-space:normal }

/* Connecting (connectDialog): a link for the person's own browser, sometimes a one-time code, and
   at most one thing to bring back. The third dialog and the last one - nothing else in the product
   asks a question. */
#connectLink { align-self:flex-start }
#connectCode { display:grid; grid-template-columns:1fr auto; gap:var(--s-3) var(--s-6); padding:var(--s-7); border:1px solid var(--line); border-radius:var(--r-input); background:var(--sunk) }
#connectCode span { grid-column:1/-1; color:var(--muted); font-size:var(--t-12) }
#connectCodeValue { align-self:center; color:var(--ink); font:600 var(--t-20) var(--mono); letter-spacing:.08em }
#connectAsk { display:grid; grid-template-columns:1fr auto; gap:var(--s-3) var(--s-4) }
#connectAsk>span { grid-column:1/-1; color:var(--body); font-size:var(--t-13) }
#connectMessage { min-height:var(--h-1); margin:0; color:var(--muted); font-size:var(--t-13) }

/* The label that arrives while the pointer is still there to explain. */
#tooltip { position:fixed; z-index:120; max-width:280px; padding:var(--s-2) var(--s-5); border:1px solid var(--edge); border-radius:var(--r-chip); background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--ink); font-size:var(--t-12); line-height:1.35; box-shadow:var(--lift-2),var(--specular); pointer-events:none }

/* Light. The same system, lit from the other side: paper ground, near-black ink, the same one
   accent. Materials keep their job - float, edge, shadow - but the specular edge becomes white and
   the shadows soften, because a light surface does not need as much separation to read. */
:root[data-theme="light"] {
  color-scheme:light;
  --ground:#faf9f7;
  --sunk:#f2f1ee;
  --panel:#ffffff;
  --raised:#f2f1ee;
  --hover:#e9e8e4;
  --line:rgba(24,24,22,.1);
  --line-2:rgba(24,24,22,.2);
  --ink:#18181b;
  --body:#3f3f45;
  --muted:#6d6d74;
  --faint:#8e8e95;
  --accent:#128a5c;
  --accent-lift:#0f7a51;
  --accent-soft:rgba(18,138,92,.1);
  --accent-line:rgba(18,138,92,.4);
  --accent-ink:#ffffff;
  --warn:#9a6413;
  --warn-soft:rgba(154,100,19,.09);
  --danger:#b4302a;
  --danger-soft:rgba(180,48,42,.08);
  --material:rgba(252,251,250,.76);
  --material-strong:rgba(253,252,251,.96);
  --material-rail:rgba(245,244,241,.7);
  --menu-solid:#ffffff;
  --specular:inset 0 1px 0 rgba(255,255,255,.9);
  --specular-strong:inset 0 1px 0 rgba(255,255,255,1);
  --bezel:linear-gradient(#ffffff,#f6f5f2);
  --sheen:rgba(24,24,22,.05);
  --press:rgba(24,24,22,.08);
  --edge:rgba(24,24,22,.14);
  --lift-1:0 1px 2px rgba(24,24,22,.09);
  --lift-2:0 1px 3px rgba(24,24,22,.08),0 10px 26px rgba(24,24,22,.09);
  --lift-3:0 6px 18px rgba(24,24,22,.12),0 26px 60px rgba(24,24,22,.16);
  --wash:radial-gradient(130% 90% at 10% -12%, rgba(18,138,92,.05), transparent 60%),linear-gradient(#ffffff,#f4f3f0 64%);
  --raise:linear-gradient(rgba(24,24,22,.09),rgba(24,24,22,.05));
  --raise-soft:linear-gradient(rgba(24,24,22,.05),rgba(24,24,22,.02));
  --card-face:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.5));
  --card-edge:rgba(24,24,22,.12);
  --inset:rgba(24,24,22,.07);
  --inset-edge:inset 0 1px 2px rgba(24,24,22,.08);
  --field:#ffffff;
  --field-edge:inset 0 1px 2px rgba(24,24,22,.07);
  --veil:rgba(250,249,247,.92);
  --scrim:rgba(24,24,22,.45);
  --backdrop:rgba(24,24,22,.28);
  --warn-line:rgba(154,100,19,.3);
  --danger-line:rgba(180,48,42,.35);
  --accent-fill:linear-gradient(#18a06c,#0f7a51);
  --accent-fill-lift:linear-gradient(#1cae76,#12885a);
  --accent-fill-edge:inset 0 1px 0 rgba(255,255,255,.28);
  --ansi-blue:#1d63a8;
  --ansi-magenta:#7c3aad;
  --ansi-cyan:#0f6f74;
}