/* The rendered hero: a replica of the HerdrGUI window, 1440 x 900 design px.
 *
 * Values come from tokens.css (tools/extract-theme.py reads them out of vendor/zeron/ui); a comment
 * names the source function where a number is read off the render code instead of a constant.
 * Colours: --c-* (resolved Theme fields), rgb(var(--wash-rgb) / a) for the translucent washes. */

@font-face { font-family: "Geist"; font-weight: 400; src: url(fonts/Geist.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; src: url(fonts/Geist-Medium.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; src: url(fonts/Geist-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; src: url(fonts/Geist-Bold.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: italic; src: url(fonts/Geist-Italic.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; src: url(fonts/GeistMono.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; src: url(fonts/GeistMono-Medium.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 600; src: url(fonts/GeistMono-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 700; src: url(fonts/GeistMono-Bold.woff2) format("woff2"); }

.hz-stage { position: relative; }

.hz-app {
  --phi: 1.618;                      /* gpui's default line height */
  --sidebar-w: 312px;                /* hz_tabs: sidebar_content_width() */
  --rx: .5;                          /* root split: left pane share of the area */
  --ry: .5;                          /* right column split: top pane share */
  --wash-a: 0;
  position: relative;
  width: 1440px;
  height: 900px;
  overflow: hidden;
  background: var(--c-surface);      /* opaque surface treatment: the window is `surface` */
  color: var(--c-text);
  font: 400 14px/var(--phi) "Geist", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: none;               /* gpui lays glyphs out by advance width, without kerning pairs */
  user-select: none;
}
.hz-app *, .hz-app *::before, .hz-app *::after { box-sizing: border-box; }
.hz-app .grow { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An icon of the app's set, painted in the current colour. */
.ic { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.muted { color: var(--c-text-muted); }
.ic.faint { color: var(--c-text-faint); }

/* ---- the sidebar's tone, full window height (shell.rs sidebar_tone: wash(0.05) + a hairline edge) ---- */
.sb-tone {
  position: absolute; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: rgb(var(--wash-rgb) / .05);
  border-right: 1px solid rgb(var(--hairline-rgb) / .10);
}

/* ---- title bar ---- */
.titlebar { position: absolute; inset: 0 0 auto 0; height: var(--ui-titlebar-height); }
.tb-left { position: absolute; left: 0; top: 0; height: var(--ui-titlebar-height); padding: var(--ui-titlebar-top-pad) var(--shell-titlebar-cluster-pad) 0; display: flex; align-items: center; }
.tb-left .wc + .wc { margin-left: var(--shell-hz-icon-gap); }
.tb-opts { position: absolute; top: 0; left: calc(var(--sidebar-w) - var(--ui-space-sm) - 24px); height: var(--ui-titlebar-height); padding-top: var(--ui-titlebar-top-pad); display: flex; align-items: center; }
.wc { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-control-radius); flex: none; }
.wc:hover { background: var(--c-element-hover); }
/* icons::sidebar_glyph: a 24-unit frame (rect 3,4 18x16 r4, 1.75 stroke) and the panel (6.5,7.5 5.5x9) scaled to 16 */
.sbglyph { --s: calc(16 / 24); position: relative; width: 16px; height: 16px; display: block; color: var(--c-text-muted); }
.sbglyph .frame { position: absolute; left: calc((3px - .875px) * var(--s)); top: calc((4px - .875px) * var(--s)); width: calc((18px + 1.75px) * var(--s)); height: calc((16px + 1.75px) * var(--s)); border: calc(1.75px * var(--s)) solid currentColor; border-radius: calc((4px + .875px) * var(--s)); }
.sbglyph .panel { position: absolute; left: calc(6.5px * var(--s)); top: calc(7.5px * var(--s)); width: calc(5.5px * var(--s)); height: calc(9px * var(--s)); border-radius: calc(.875px * var(--s)); background: currentColor; }

.tabs { position: absolute; left: var(--sidebar-w); top: 0; height: var(--ui-titlebar-height); padding-top: var(--ui-titlebar-top-pad); display: flex; align-items: center; gap: 2px; padding-left: 2px; }
/* surface_chrome::tab_frame: h24, r6, gap4, 12px; selected wash(.10), others hover wash(.06) */
.tab { height: var(--surface-chrome-control-size); display: flex; align-items: center; gap: var(--surface-chrome-control-gap); border-radius: var(--surface-chrome-control-radius); font-size: 12px; line-height: var(--phi); color: var(--c-text-muted); padding-left: 10px; padding-right: 4px; cursor: pointer; white-space: nowrap; }
.tab.current { color: var(--c-text); background: rgb(var(--wash-rgb) / .10); }
.tab:not(.current):hover { background: rgb(var(--wash-rgb) / .06); }
.tab .tn { min-width: 35px; }
.tab .xn { height: 15px; padding: 0 6px; border-radius: 4px; display: flex; align-items: center; background: color-mix(in srgb, var(--c-accent) 28%, transparent); color: var(--c-text); font-size: 10px; font-weight: 500; }
.tab .tx { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.tab .tx:hover { background: rgb(var(--wash-rgb) / .12); }
.tab.plus { padding: 0 8px; }
.tb-right { position: absolute; right: 0; top: 0; height: var(--ui-titlebar-height); display: flex; align-items: center; }
.tb-right .hz-cap { width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.tb-right .hz-cap.w { width: var(--shell-windows-caption-button-width); height: var(--ui-titlebar-height); margin: 0; border-radius: 0; color: var(--c-text); }
.tb-right .hz-cap.w:last-child:hover { background: #c42b1c; color: #fff; }
.tb-right .hz-cap.w:hover { background: var(--c-element-hover); }

/* ---- sidebar (hz_tabs.rs render_hz_sidebar) ---- */
.sidebar { position: absolute; left: 0; top: var(--ui-titlebar-height); width: var(--sidebar-w); bottom: 0; display: flex; flex-direction: column; }
.sb-top { flex: none; height: calc((100% - var(--foot-h, 34px)) * 2 / 3); padding: 0 var(--ui-space-sm); overflow: hidden; }
.sb-bottom { flex: 1 1 0; min-height: 0; padding: 0 var(--ui-space-sm); overflow: hidden; }
.sb-handle { flex: none; height: 8px; position: relative; }
.sb-handle::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgb(var(--hairline-rgb) / .10); }
.sb-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 500; color: var(--c-text-faint); }
.slot { flex: none; width: 12px; display: flex; align-items: center; justify-content: center; }
.m-row { margin-bottom: 1px; padding: 0 8px; height: 30px; display: flex; align-items: center; gap: 8px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--c-text); }
.sq { width: 8px; height: 8px; border-radius: 2px; display: block; }
.sq.danger { background: var(--c-danger); }
.sq.accent { background: var(--c-accent); }
.sq.none { background: color-mix(in srgb, var(--c-text-faint) 60%, transparent); }
.ws-list { position: relative; padding-left: var(--hz-tabs-herdr-indent); }
.ws-block { position: relative; }
.ws-row { margin-bottom: 1px; padding: 7px 8px; display: flex; align-items: flex-start; gap: 8px; border-radius: 7px; font-size: 13px; color: var(--c-text); }
.ws-row.current { background: rgb(var(--wash-rgb) / .09); }
.ws-row:hover { background: rgb(var(--wash-rgb) / .05); }
.mk { flex: none; height: 23px; display: flex; align-items: center; }
.ws-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ws-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sub { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-text-muted); }
.pill { padding: 0 6px; border-radius: 999px; background: rgb(var(--wash-rgb) / .08); font-size: 11px; color: var(--c-text-muted); }
/* the tree's elbow: a line from Local's arrow down past every workspace, a tick to each dot */
.tree-v { position: absolute; left: calc(14.5px - var(--hz-tabs-herdr-indent)); top: 0; width: 1px; bottom: -1px; background: color-mix(in srgb, var(--c-text-faint) 45%, transparent); }
.ws-block.last .tree-v { bottom: auto; height: 17.5px; }
.tree-h { position: absolute; left: calc(15.5px - var(--hz-tabs-herdr-indent)); top: 17.5px; width: calc(var(--hz-tabs-herdr-indent) - 15.5px); height: 1px; background: color-mix(in srgb, var(--c-text-faint) 45%, transparent); }

.ag-row { margin-bottom: 1px; padding: 6px 8px 0; height: 44px; display: flex; align-items: flex-start; gap: 8px; border-radius: 7px; font-size: 13px; color: var(--c-text); }
.ag-row.current { background: rgb(var(--wash-rgb) / .09); }
.ag-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ag-l1, .ag-l2 { display: flex; align-items: center; }
.ag-l2 { font-size: 11px; color: var(--c-text-muted); }
.age { flex: none; margin-left: 6px; font-size: 11px; color: var(--c-text-faint); }
.word { flex: none; margin-left: 6px; color: var(--c-text-faint); }
.word.needs { color: var(--c-danger); }
.sb-foot { flex: none; height: var(--foot-h, 34px); margin: 0 calc(var(--ui-space-sm) + 4px); display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-text-faint); }
.sb-foot .hz-dot { width: 6px; height: 6px; border-radius: 1.5px; background: var(--c-accent); }

/* the working glyph: a 3x3 field of dots, the accent family */
.glyph-spin { display: grid; grid-template-columns: repeat(3, 3px); grid-template-rows: repeat(3, 3px); gap: 1px; }
.glyph-spin b { background: var(--c-glyph-mid); border-radius: 50%; opacity: .5; }
.glyph-spin b:nth-child(1), .glyph-spin b:nth-child(5) { opacity: 1; background: var(--c-glyph-light); }

/* ---- main area and panes (hz_tabs.rs render_hz_view / render_hz_pane) ---- */
.area { position: absolute; left: var(--sidebar-w); top: var(--ui-titlebar-height); right: 0; bottom: 0; }
.hz-pane { position: absolute; overflow: hidden; }
.div-v, .div-h { position: absolute; }
.p-body { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tag { position: absolute; left: 0; top: 0; height: 24px; max-width: 90%; display: flex; }
.tag-in { height: 100%; padding: 0 10px; display: flex; align-items: center; gap: 5px; border-bottom-right-radius: var(--ui-panel-radius); background: rgb(var(--wash-rgb) / .10); color: var(--c-text-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tag .ic { width: 14px; height: 14px; }

.transcript { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }

/* ---- transcript (transcript.rs; the column is the pane less 48 px each side, anchored to the bottom) ---- */
.transcript { display: flex; flex-direction: column; justify-content: flex-end; }
.tr-col { position: static; padding: 0 48px; display: flex; flex-direction: column; }
.tr-col > .grp:first-child { margin-top: 0; }
.md { margin: 0; font-size: var(--render-md-text-size); line-height: 22px; color: var(--c-text); }
ul.md { padding: 0; list-style: none; }
ul.md li { position: relative; padding-left: 26px; margin: 0 0 4px; }
ul.md li:last-child { margin-bottom: 0; }
ul.md li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
/* inline code: the wash is painted around the glyphs (render.rs INLINE_CODE_*), it adds no advance */
.ic-code { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--render-md-text-size); padding: 0 var(--render-inline-code-pad-x); margin: 0 calc(-1 * var(--render-inline-code-pad-x)); border-radius: var(--render-inline-code-radius); background: var(--c-code-wash); color: var(--c-code-text); }
.tr-col > * { flex: none; }
.tr-col > .md + .ubub, .tr-col > .grp + .md { }
.ubub { align-self: flex-end; width: 468px; padding: 10px 20px 10px 16px;   /* gpui wraps a little before the box edge */
  border-radius: var(--ui-bubble-radius); background: rgb(var(--wash-rgb) / .08); font-size: 14px; line-height: var(--transcript-user-line-height); color: var(--c-text); }

/* tool groups: a quiet summary line over the activity rail */
.grp-h { height: var(--transcript-tool-group-header-height); display: flex; align-items: center; gap: 6px; padding-right: 4px; font-size: var(--transcript-tool-label-size); line-height: var(--transcript-tool-label-line-height); color: var(--c-text-muted); cursor: pointer; }
.grp-h:hover { color: var(--c-text); }
/* the chevron sits in a 22 px slot, trunk-x - 7 from its left (render_tool_group) */
.grp-h > .ic { margin-left: calc(var(--transcript-activity-trunk-x) - 7px); margin-right: calc(22px - (var(--transcript-activity-trunk-x) - 7px) - 14px); }
.grp-b { position: relative; padding-top: 3px; }
.trow { position: relative; height: var(--transcript-tool-tree-row-height); display: flex; align-items: center; padding-left: var(--transcript-activity-icon-left); gap: var(--transcript-activity-text-gap); font-size: var(--transcript-tool-text-size); color: var(--c-text-muted); }
.trow::before { content: ""; position: absolute; left: var(--transcript-activity-trunk-x); top: 0; height: 50%; width: calc(var(--transcript-activity-branch-end-x) - var(--transcript-activity-trunk-x)); border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail); border-bottom-left-radius: var(--transcript-activity-bend-radius); }
.trow:not(:last-child)::after { content: ""; position: absolute; left: var(--transcript-activity-trunk-x); top: 50%; bottom: 0; width: 1px; background: var(--rail); }
.hz-app { --rail: rgb(var(--hairline-rgb) / .14); }
.trow .td { margin-left: 2px; }
.trow .ti { display: flex; }
.trow .tl, .trow .td { padding-top: 2px; }
.tchip { height: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 2px; border-radius: 8px; background: rgb(var(--wash-rgb) / .05); color: var(--c-text); }
.tchip .well { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgb(var(--wash-rgb) / .05); }
.tchip img { width: 14px; height: 14px; }
.composing { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 12px; color: var(--c-text-muted); }
.composing em { font-style: normal; font-size: 11px; color: var(--c-text-faint); }

/* ---- composer (composer.rs): a pill, 49 px, radius 26; attach 28, input, model chip, send 28 ---- */
.composer { flex: none; padding: 0 var(--ui-space-lg) calc(var(--ui-space-lg) + var(--composer-session-footer-height)); }
.pill-in { height: var(--composer-compact-total-height); border-radius: var(--composer-composer-radius); border: 1px solid var(--c-border); background: var(--c-fn-composer-surface-bg); display: flex; align-items: center; padding: 0 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);   /* gpui shadow_lg: the pill is not frosted here */ }
.pill-in .clip { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.pill-in .ph { flex: 1 1 0; padding: 0 8px; color: var(--c-text-faint); font-size: var(--composer-input-text-size); line-height: var(--composer-input-line-height); }
.pill-in .model { display: flex; align-items: center; gap: 6.5px; padding-right: 6px; font-size: 12px; }
.pill-in .model b { font-weight: 500; color: var(--c-text); }
.pill-in .model em { font-style: normal; color: var(--c-text-muted); }
.pill-in .send { margin-left: 8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-solid); color: var(--c-on-solid); flex: none; }

/* ---- waiting card and terminal card ---- */
.wait { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); padding: 17px 16px 15px; border-radius: var(--composer-composer-radius); border: 1px solid var(--c-border); background: var(--c-input-bg); }
.wait-k { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--c-text-faint); }
.transcript.center .wait { margin: 0 16px 17px; }
.wait-p { margin: 6px 0 0; font: 500 15px/20px "Geist", sans-serif; white-space: pre; color: var(--c-text); }
.wait-q { margin-top: 18px; font-size: 15px; font-weight: 500; }
.wait-rule { height: 1px; margin: 21px 0 0; background: var(--c-border); }
.wait-in { padding: 12px 4px 8px; color: var(--c-text-faint); font-size: 14px; }
.wait-btn { display: inline-block; margin-top: 1px; padding: 5px 16px; border-radius: 8px; background: rgb(var(--wash-rgb) / .25); color: var(--c-text-faint); font-size: 14px; }
.tcard { margin: 0 48px; padding: 10px 12px 9px; border-radius: 10px; background: rgb(var(--wash-rgb) / .04); border: 1px solid var(--c-border); flex: none; }
.tcard pre { margin: 0; font: 500 12.5px/18px "Geist Mono", ui-monospace, monospace; color: var(--c-text); }
.stamp { margin: 10px 48px 0; height: 22px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--c-text-faint); flex: none; }
.pn-shell .transcript { padding-bottom: 33px; }
/* text scrolled up under a pane's name tag is gone by the tag's lower edge and ramps in below it (edge_fade) */
.transcript.fade { -webkit-mask-image: linear-gradient(to bottom, transparent 24px, #000 42px); mask-image: linear-gradient(to bottom, transparent 24px, #000 42px); }
/* the turns' rhythm, as measured in the app (paragraph gap 12, a turn gap of 48) */
.pn-healthz .tr-col > :nth-child(2) { margin-top: 11px; }
.pn-healthz .tr-col > :nth-child(3) { margin-top: 48px; }
.pn-healthz .tr-col > :nth-child(4) { margin-top: 47px; }
.pn-healthz .tr-col > :nth-child(5) { margin-top: 12px; }
.pn-healthz .tr-col > :nth-child(6) { margin-top: 12px; }
.pn-healthz .tr-col > :nth-child(7) { margin-top: 12px; }
.pn-healthz .tr-col > :nth-child(8) { margin-top: 14px; }
.pn-healthz .transcript { padding-bottom: 31px; }
.pn-healthz .tr-col > :nth-child(1) .grp-b { padding-top: 2px; }
.pn-healthz .tr-col > :nth-child(2) { margin-top: 12px; }
.pn-healthz .tr-col > :nth-child(8) { margin-top: 16px; }
.pn-healthz .transcript { padding-bottom: 29px; }
/* a still frame of the breathing tag: the phase the reference captures were taken at */