/* hero-workspace: the lander's `?hero=workspace` option (hero-workspace.js). Two parts:
   .hw-browser, the ad's first act (a dark browser whose tab strip fills with
   every agent app), drawn inside hero-sphere's .hs-canvas in its design px so
   each favicon sits exactly where its sphere tile lifts from; and .hw-card,
   the ads' black text card over the whole stage once the frontend has shown,
   with the storm gradient and white shine on "one" (the module writes the
   card's opacity, each word's rise and the gradient every frame). */

/* ---------- the browser (design px; the module sets width, transform, opacity) ---------- */
.hero-sphere .hw-browser {
  --hw-strip: #1b1b1d; --hw-tab: #2a2a2e; --hw-page: #111113; --hw-ink: #e6e8ee; --hw-dim: #9a9ca6;
  position: absolute; left: 0; top: 0;
  width: 1536px; height: 864px;
  transform-origin: 0 0;
  background: var(--hw-page);
  font: 500 12px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--hw-ink);
  overflow: hidden;
}

/* the strip: 40 px, the favicon row at y 23 (hero-sphere HS.FAV_Y) */
.hero-sphere .hw-strip { position: absolute; left: 0; top: 0; right: 0; height: 40px; background: var(--hw-strip); }
.hero-sphere .hw-dot { position: absolute; top: 17px; width: 12px; height: 12px; border-radius: 50%; }
.hero-sphere .hw-dot:nth-child(1) { left: 16px; background: #ff5f57; }
.hero-sphere .hw-dot:nth-child(2) { left: 36px; background: #febc2e; }
.hero-sphere .hw-dot:nth-child(3) { left: 56px; background: #28c840; }
.hero-sphere .hw-tabs { position: absolute; inset: 0; }
.hero-sphere .hw-tab {
  position: absolute; left: 0; top: 6px; height: 34px;
  border-radius: 9px 9px 0 0;
  color: var(--hw-dim);
  white-space: nowrap; overflow: hidden;
}
/* the separator between two inactive tabs */
.hero-sphere .hw-tab::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 8px; width: 1px;
  background: #3a3b40;
}
.hero-sphere .hw-tab.on { background: var(--hw-tab); color: var(--hw-ink); }
.hero-sphere .hw-tab.on::before, .hero-sphere .hw-tab.on + .hw-tab::before { display: none; }
.hero-sphere .hw-fav {
  position: absolute; left: 12px; top: 9px;
  width: 16px; height: 16px; border-radius: 4px; object-fit: cover; display: block;
}
.hero-sphere .hw-tt {
  position: absolute; left: 36px; right: 28px; top: 11px;
  overflow: hidden; text-overflow: ellipsis;
}
.hero-sphere .hw-x { position: absolute; right: 10px; top: 10px; font-size: 13px; color: var(--hw-dim); }
.hero-sphere .hw-tab[data-size="s"] .hw-x,
.hero-sphere .hw-tab[data-size="xs"] .hw-x,
.hero-sphere .hw-tab[data-size="xs"] .hw-tt { display: none; }
.hero-sphere .hw-tab[data-size="s"] .hw-tt { right: 6px; }
.hero-sphere .hw-new {
  position: absolute; left: 0; top: 10px;
  width: 26px; height: 22px; line-height: 22px; text-align: center;
  font-size: 18px; color: var(--hw-dim);
}

/* the toolbar and omnibox */
.hero-sphere .hw-bar {
  position: absolute; left: 0; right: 0; top: 40px; height: 44px;
  background: var(--hw-tab); border-bottom: 1px solid #1f1f22;
}
.hero-sphere .hw-nav { position: absolute; top: 14px; font-size: 15px; color: var(--hw-dim); }
.hero-sphere .hw-nav:nth-child(1) { left: 18px; }
.hero-sphere .hw-nav:nth-child(2) { left: 46px; }
.hero-sphere .hw-nav:nth-child(3) { left: 74px; }
.hero-sphere .hw-omni {
  position: absolute; left: 110px; right: 110px; top: 7px; height: 30px;
  border-radius: 15px; background: var(--hw-strip);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  font-size: 13px; color: var(--hw-ink);
}
.hero-sphere .hw-lock {
  width: 9px; height: 7px; margin-top: 4px; border-radius: 2px; background: var(--hw-dim); position: relative;
}
.hero-sphere .hw-lock::before {
  content: ""; position: absolute; left: 1.5px; top: -5px; width: 4px; height: 5px;
  border: 1.5px solid var(--hw-dim); border-bottom: 0; border-radius: 3px 3px 0 0;
}

/* the page: the active tab's app, cut in on every new tab */
.hero-sphere .hw-page { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; }
.hero-sphere .hw-app {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.hero-sphere .hw-app-icon { width: 72px; height: 72px; border-radius: 24%; object-fit: cover; display: block; }
.hero-sphere .hw-app-name { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.hero-sphere .hw-compose {
  position: relative; width: 620px; height: 58px; margin-top: 10px;
  border-radius: 29px; border: 1px solid #3a3b40; background: #19191c;
  display: flex; align-items: center; padding: 0 24px;
  font-size: 16px; color: var(--hw-dim);
}
.hero-sphere .hw-send {
  position: absolute; right: 12px; top: 12px; width: 34px; height: 34px;
  border-radius: 50%; background: #3a3b40;
}
.hero-sphere .hw-count {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px;
  background: #1f1f23; border: 1px solid #3a3b40;
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--hw-ink);
  opacity: 0;
}

/* ---------- the card: black over the stage, the headline centred ---------- */
.stage .hw-card {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: #000;
  container-type: size;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.hw-card .hw-title {
  margin: 0; padding: 0 8%;
  max-width: 16ch;
  text-align: center;
  font-size: clamp(22px, 7.2cqw, 92px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}
/* the words wait for their beat; the module writes each one's rise */
.hw-card .hw-w { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
/* "one": a white shine band over the storm gradient (the ad's renderGrads),
   both clipped to the glyphs; the band draws on top, no-repeat, so it only
   shows while it sweeps */
.hw-card .hw-one {
  padding: 0 0.04em; margin: 0 -0.04em;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, #2b6bff 0%, #7b3cf0 25%, #c026d3 50%, #ff3d9a 75%, #2b6bff 100%);
  background-repeat: no-repeat, repeat-x;
  background-size: 0 100%, 300px 100%;
  background-position: -100px 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- the ad's HUD discs (hero-workspace.js swapHud(), workspace only) ----------
   the image disc: an agent whose mark is the app's own icon, not a glyph.
   hub-boot.css already fills a disc's (and a menu art's) img edge to edge,
   round and cover (the app's .hud-face > img); here the disc's raised ground
   is dropped so no fringe shows at the image's edge. Scoped to the workspace
   host so the shared HUD is untouched. */
.stage[data-hero-host="workspace"] .hud .hud-disc.logo,
.stage[data-hero-host="workspace"] .hud .hud-menu-art.logo { background: transparent; }

/* ---------- no phone (2026-09-26, the user: "remove the phone syncing element") ----------
   The phone mock, its sync beam and its label are not drawn in this arm.
   hub-handoff.js prepStage reads the phone's display (noPhone), so the beam is
   never placed and the phone beat never docks: the hub keeps the whole arena
   at every width, as the phone cut below 640px always did. */
.stage[data-hero-host="workspace"] .phone,
.stage[data-hero-host="workspace"] .phone-label,
.stage[data-hero-host="workspace"] .beam { display: none; }

/* ---------- the story ends on the app's new chat screen (hero-workspace.js newChat()) ----------
   superbot-desktop hub/new-chat.css + ThreadIdle.tsx variant="hero" +
   NewChatChips.tsx, at the miniature's em scale: the mark INLINE with a serif
   greeting on one line at the feed's foot, the composer at mid-pane, the five
   start chips under it. The feed and the tail under the composer split the
   lane's free height, as the app's open .new-chat-tail does. */
.stage[data-hero-host="workspace"] .feed.hw-nc { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 8%; }
.hw-nc-hero { display: flex; align-items: center; justify-content: center; gap: 1.1em; padding-bottom: 1.6em; min-width: 0; }
.hw-nc-mark { flex: none; width: 3.2em; height: 3.2em; display: block; }
.hw-nc-greet { margin: 0; min-width: 0; font: 400 2.2em/1.15 var(--font-serif); letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.hw-nc-greet span { white-space: nowrap; }
.hw-nc-tail { flex: 1 1 0; min-height: 0; overflow: hidden; }
.hw-nc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55em; padding: .6em 8% 0; }
.hw-nc-chip { display: inline-flex; align-items: center; gap: .55em; padding: .5em 1.1em; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--raised); color: var(--secondary); white-space: nowrap; }
.hw-nc-chip svg { flex: none; width: 1.1em; height: 1.1em; }
/* New chat is the open row: the app's pressed paint on the dashed row (hub.css
   .hub-side-new-chat-item[aria-expanded]: the edge turns solid, the row takes
   the active overlay, label and plus in the fg ink), on the fill the mock's
   open chat row already wears */
.stage[data-hero-host="workspace"] .chats .row.new.on { border-style: solid; background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }
/* the context line's empty-chat reading (hero-workspace.js NEW_CHAT_CTX,
   ContextStatusLine.tsx `baseline`): the bar fills to the always-on share,
   6%, where the thread's 18k history drew 9% (hub-boot.css .ctx .bar i) */
#hub[data-hw-new] .composer .ctx .bar i { width: 6%; }
/* a narrow seat sheds the always-on clause and keeps the base reading
   whole (hub-chat.css .hub-context-status-detail, thread-column <= 480px) */
@container stage (max-width: 560px) { #hub[data-hw-new] .hw-nc-ctx-detail { display: none; } }
/* a narrow seat (new-chat.css @container thread-column <= 560px): the
   greeting steps down to the headline size and the mark with it */
@container stage (max-width: 820px) {
  .hw-nc-hero { gap: .8em; padding-bottom: 1.2em; }
  .hw-nc-mark { width: 2.4em; height: 2.4em; }
  .hw-nc-greet { font-size: 1.6em; }
}
/* a phone's stage: the greeting stays ONE line for its longest bucket
   ("Good afternoon. Where do we go?"), so the type follows the stage width
   (cqi, the stage container) under a 1.35em cap and the feed gives back its
   8% gutters; the per-sentence spans only break it on a seat narrower still.
   Measured 2026-09-26: the line is 14.97em wide and has the stage less 61px
   (the hub's insets, these gutters, the mark and its gap), so /16 against
   the stage less 64px keeps ~7% of slack for a wider serif, the 16.2px cap
   from ~390 up. The type floor (--fs-sm, 14px) holds under it: 13.9px at a
   320px viewport becomes 14px, and the line still fits with ~6% to spare */
@container stage (max-width: 480px) {
  .stage[data-hero-host="workspace"] .feed.hw-nc { padding: 0 var(--sp-2); }
  .hw-nc-hero { gap: .6em; }
  .hw-nc-mark { width: 2em; height: 2em; }
  .hw-nc-greet { font-size: max(var(--fs-sm), min(1.35em, calc((100cqi - 64px) / 16))); }
  .hw-nc-chips { gap: .4em; padding: .5em 10px 0; }
  .hw-nc-chip { padding: .35em .75em; }
}
/* the mock's type floor on a touch surface (hub-boot.css's coarse block):
   the chip labels are the reader's text there, not a scaled picture */
@media (pointer: coarse) and (max-width: 1400px) {
  #hub .hw-nc-chip { font-size: 12px; line-height: 16px; }
}

/* ---------- the sidebar's two lanes (hero-workspace.js sidebarLanes()) ----------
   Each lane's list is its own panel between the tabs and the account bar; it
   clips under the bar the way the app's list scrolls under its footer. */
.stage[data-hero-host="workspace"] .hw-lane { flex: 1 1 0; min-height: 0; overflow: hidden; }
.stage[data-hero-host="workspace"] .hw-lane[hidden] { display: none; }
/* the switch as buttons: the span's look kept, a pointer, and a hit area the
   bar's own height can't give: 28px on a mouse, 44px under a coarse pointer
   (--target-sm), grown from the tab's middle so the underline stays put */
.stage[data-hero-host="workspace"] .lane-tabs button.lane-tab { --hw-lane-h: 24px; margin: 0; border: 0; background: none; cursor: pointer; min-height: var(--hw-lane-h); }
.stage[data-hero-host="workspace"] .lane-tabs button.lane-tab::before { content: ""; position: absolute; left: -4px; right: -4px; top: calc((100% - var(--target-sm)) / 2); height: var(--target-sm); }
@media (hover: hover) { .stage[data-hero-host="workspace"] .lane-tabs button.lane-tab:hover { color: var(--fg); } }
/* under a coarse pointer the button's own box is the target (--target, 44px):
   it reaches past the 24px row by equal negative block margins, so the row
   keeps its height, the label stays centred where it was, and the open lane's
   underline is pulled back up onto the row's hairline */
@media (pointer: coarse) {
  .stage[data-hero-host="workspace"] .lane-tabs button.lane-tab { min-height: var(--target); margin-block: calc((var(--hw-lane-h) - var(--target)) / 2); }
  .stage[data-hero-host="workspace"] .lane-tabs button.lane-tab.on::after { bottom: calc((var(--target) - var(--hw-lane-h)) / 2 - 1px); }
}
/* the vendor tiles the new rows wear, on the brand grounds the HUD's own
   discs use (hub-boot.css --brand-*): ChatGPT's white tile, Cursor's black
   one, and Devin, which has no brand ground here, on the raised tile */
.chats .row .sp.app-openai, .chats .row .sp.app-cursor, .chats .row .sp.app-devin { border-radius: calc(var(--r-control) / 2); box-shadow: inset 0 0 0 1px var(--line); }
.chats .row .sp.app-openai { background: var(--brand-openai); color: var(--brand-openai-ink); }
.chats .row .sp.app-cursor { background: var(--brand-cursor); color: var(--brand-cursor-ink); }
.chats .row .sp.app-devin { background: var(--raised); color: var(--fg); }
.chats .row .sp.hw-git { background: transparent; color: var(--muted); }

/* ---------- the Code lane, the quiet sidebar (superbot-desktop 7b762eeeb, spec §15.414; Sidebar.tsx .hub-side-new-project, ProjectRows.tsx, project-rows.css) ----------
   One quiet '+ New project' row (no dashed box, no Import); the date buckets
   fold, [chevron] Today open, a later bucket one folded row with a muted
   count; each project ONE line, [chevron][mark][name]......[time], the
   muted fold chevron at rest in a leading gutter on every row (down on the
   open project, right on a folded one, on the bucket heads' chevron column;
   the user, 2026-09-29), nothing filled at rest; the selected project a 2px accent bar on its leading edge; a running
   one a still accent dot and muted 'Running 4:20' in the time's seat (the UI
   face, tabular figures, never mono); the open project's chats one line
   each, their titles on the name's column (14 pad + 16 chevron + 4 + 16
   mark + 6 gap), their
   muted dates on the times' column, no mark, no tree, no preview. Every
   first glyph (plus, bucket chevron, project chevron) shares the rows' 14px
   icon edge. */
.stage[data-hero-host="workspace"] .chats .row.hw-newproj { min-height: 27px; margin: 6px 0 2px; padding: 0 14px; border-radius: 0; font-size: 1.09em; color: var(--muted); }
.hw-newproj .nc-mark { flex: none; display: grid; place-items: center; width: 16px; height: 16px; font-style: normal; }
.hw-newproj .nc-mark svg { width: 12px; height: 12px; }
.stage[data-hero-host="workspace"] .chats .today.hw-fhead { gap: 6px; padding: 5px 14px 3px; }
.hw-chev { flex: none; display: grid; place-items: center; width: 16px; height: 16px; font-style: normal; }
.hw-chev svg { width: 10px; height: 10px; transform: rotate(-90deg); }
.hw-fhead.open .hw-chev svg { transform: none; }
.hw-fcount { font-variant-numeric: tabular-nums; opacity: .7; }
.stage[data-hero-host="workspace"] .chats .row.hw-proj-head { min-height: 30px; margin: 0; padding: 0 14px; gap: 6px; border-radius: 0; font-size: 1.09em; }
.chats .row.hw-proj-head .sp { width: 16px; height: 16px; }
.chats .row.hw-proj-head > .hw-chev { margin-right: -2px; }
.hw-proj.open > .row.hw-proj-head > .hw-chev svg { transform: none; }
.chats .row.hw-proj-head .sp.hw-git svg { width: 13px; height: 13px; }
.stage[data-hero-host="workspace"] .row.hw-proj-head .t { color: var(--fg); font-weight: 600; }
.stage[data-hero-host="workspace"] .row.hw-proj-head em,
.stage[data-hero-host="workspace"] .hw-proj-chats .row.chat em { flex: none; padding-left: 6px; font: .82em/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--muted); }
.stage[data-hero-host="workspace"] .row.hw-proj-head.sel::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: var(--r-pill); background: var(--accent); }
.stage[data-hero-host="workspace"] .row.hw-proj-head em.hw-run { display: inline-flex; align-items: center; gap: 4px; }
.hw-run > i { flex: none; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); }
.stage[data-hero-host="workspace"] .hw-proj-chats .row.chat { padding-left: 56px; }
.stage[data-hero-host="workspace"] .hw-proj-chats .row.chat .t { color: var(--secondary); }
/* the tab strip's "N tabs open" pill (.hero-sphere .hw-count above) has
   always taken these from the unscoped rule the old project count pill
   shared with it; kept so the browser act draws exactly as before */
.hw-count { flex: none; min-width: 16px; margin-left: 6px; padding: 0 4px; border-radius: var(--r-pill); background: var(--raised); color: var(--muted); font: 500 .75em/14px var(--font-mono); text-align: center; }

/* ---------- the Code tab's quiet header (superbot-desktop fa679ec97, SidebarHud.tsx hudQuiet) ----------
   hero-workspace.js flips #hub[data-hw-lane]: on the Code tab the HUD drops
   the mark and the disc row and keeps the wordmark alone, a shorter head
   over the tabs. A render, never a transition. (The app's title-bar search
   and ⌘K sit by its Hide sidebar button, which this arm's HUD does not draw;
   the tab row's own search glyph stays.) */
.stage[data-hero-host="workspace"] #hub[data-hw-lane="code"] .hud-mark,
.stage[data-hero-host="workspace"] #hub[data-hw-lane="code"] .hud-discs { display: none; }

/* ---------- the account footer, one row (superbot-desktop fa679ec97, v00-crisper) ----------
   On the sidebar's own ground under a hairline, no card: [avatar][address]
   ......[gear]. The tier line, Invite, Report a bug, More and UPGRADE live
   in the app's account popover now, so they are not drawn. */
.stage[data-hero-host="workspace"] .chats .acct { margin: auto 0 0; padding: 7px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--side); }
.stage[data-hero-host="workspace"] .acct .avatar .dot { box-shadow: 0 0 0 2px var(--side); }
.stage[data-hero-host="workspace"] .acct .acct-plan,
.stage[data-hero-host="workspace"] .acct .acct-tool.invite,
.stage[data-hero-host="workspace"] .acct .acct-tool.bug,
.stage[data-hero-host="workspace"] .acct .acct-tool.more,
.stage[data-hero-host="workspace"] .acct .upg { display: none; }
.stage[data-hero-host="workspace"] .acct .acct-tool.settings { background: transparent; border-color: transparent; }

/* ---------- a tablet's stage keeps the sidebar in this arm ----------
   Below a 900px viewport or an 820px stage the shared hub folds its sidebar
   into a HUD header (hub-boot.css breakpoints), which leaves no Chat | Code
   to press. From a 700px stage up this arm keeps the column: the full
   sidebar back, at 206px on a tablet's stage (the width hub-boot.css's own
   .hub.slim gives a sidebar that still holds the whole HUD row), the lists
   clipping under the account bar. Phones keep the header cut. */
@container stage (min-width: 700px) {
  .stage[data-hero-host="workspace"] .hub { grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: none; }
  .stage[data-hero-host="workspace"] .side > .chats { display: flex; }
  .stage[data-hero-host="workspace"] .side > .hud { padding: 2.2em .36em 2.2em 1.15em; border-right-width: 1px; border-bottom-width: 0; }
  .stage[data-hero-host="workspace"] .hud-text { flex-direction: column; align-items: stretch; gap: .29em; }
  .stage[data-hero-host="workspace"] .hud .hud-menu { top: calc(100% - 1.8em); }
}
@container stage (min-width: 700px) and (max-width: 820px) {
  .stage[data-hero-host="workspace"] .hub { grid-template-columns: 206px minmax(0, 1fr); }
  .stage[data-hero-host="workspace"] .side > .hud { gap: 1.1em; padding: 1.4em .36em 1.4em .9em; }
  /* the stepped-in column's own trade (hub-boot.css .hub.slim): the rows
     give up their stamps so a title reads rather than "checko…"; a running
     project keeps its status, the row's live fact (project-rows.css: the
     stamp yields, never the running status) */
  .stage[data-hero-host="workspace"] .hw-lane .row em:not(.hw-run) { display: none; }
}