/* The Orchestrator landing. Everything not here comes from site.css.

   The story: a board pinned beside the text, the queue as coop loop works it through one night. Each
   step moves the clock on and the tasks with it (orchestrator.js); without the script it shows morning. */
.night { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.night-lead { grid-column: 1; grid-row: 1; display: grid; align-content: center; min-height: calc(100vh - 76px); padding-block: 24px 64px; }
.night-lead h1 { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 3.75rem); }
/* the board hangs from the same height all night, so it grows downward and never jumps */
.night-stage { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; display: grid; place-items: start center; height: 100vh; margin: 0; padding-top: max(80px, calc(50vh - 260px)); }
.night-steps { grid-column: 1; grid-row: 2; }
.night-step { display: grid; align-content: center; min-height: 70vh; }
.night-step:last-child { min-height: 90vh; }
.night-step h2 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; }
.night-step p { max-width: 34rem; margin-top: 16px; font-size: 1.25rem; line-height: 1.6; text-wrap: pretty; }
/* a number behind the step, as on the main page: the figure, then its sentence and source beside it */
:is(.night-step, .night-safe-copy) > .evidence { display: flex; align-items: center; gap: 24px; max-width: 32rem; margin-top: 32px; font-size: 1rem; line-height: 1.5; }

/* The board: the queue in the main picture's card, titled with the command and the time. */
.board { --row: 2rem; position: relative; width: min(100%, 33rem); padding: 18px 22px 20px; border-radius: 16px; background: var(--surface); color: var(--text); font: 400 1rem/1 var(--mono); }
.board-head { display: flex; align-items: center; justify-content: space-between; font: 500 1rem/1.5 var(--sans); }
.clock { color: var(--muted); font: 500 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.board[data-day] .clock { color: var(--text); }
/* the night, 22:00 to 07:00: the moon rides its track as the clock runs, and rises as the sun */
.night-track { position: relative; height: 2px; margin: 12px 0 16px; border-radius: 1px; background: rgb(255 255 255 / 7%); }
.night-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--night) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgb(98 211 240 / 30%), var(--amber) calc(100% / max(var(--night), 0.01))); }
.sky { position: absolute; top: 50%; left: calc(var(--night) * 100%); width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset -4px -3px 0 0 var(--muted); translate: -50% -50%; rotate: -30deg; }
.board[data-day] .sky { background: var(--amber); box-shadow: 0 0 0 4px rgb(230 169 92 / 20%); rotate: none; }

/* the whole queue at a glance: one row of dots, each a few tasks in queue order, lit as the loop gets to them */
.cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 22px; }
.cells li { aspect-ratio: 1; border-radius: 2px; background: rgb(255 255 255 / 9%); }
.cells [data-state="none"] { background: rgb(255 255 255 / 0%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.cells [data-state="active"] { background: var(--amber); }
.cells [data-state="done"] { background: rgb(54 230 165 / 72%); }
.cells [data-state="waiting"] { background: var(--warning); }
.cells [data-state="reopened"] { background: var(--cyan); }

/* A task, wherever it shows: its status, its title and, while an agent works it, the model and the
   account it runs on with how much of that account's limit is spent; a finished task shows its commit. */
.task { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: var(--row); white-space: nowrap; transform-origin: 0 0; }
.task .title { overflow: hidden; text-overflow: ellipsis; }
.task .commit { color: var(--dim); font-size: 0.8125rem; }
.task:not([data-state="done"]) .commit, .task .agent, .task .options { display: none; }
/* the status: a ring that turns while an agent works, closes on a tick when the task is done, asks
   while the task waits for you, and turns back the other way, arrow first, when the review reopens it */
.status { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status .track { stroke: rgb(255 255 255 / 18%); transform-origin: 12px 12px; }
.status .turn { transform-origin: 12px 12px; animation: night-spin 1s linear infinite paused; }
.status .arc { stroke: var(--amber); stroke-dasharray: 28 72; opacity: 0; }
.status .head { stroke: var(--cyan); opacity: 0; }
.status .tick { stroke: var(--success); stroke-dasharray: 100; opacity: 0; }
.status .ask { stroke: var(--warning); opacity: 0; transform-origin: 12px 12px; }
.task:is([data-state="active"], [data-state="reopened"]) .turn { animation-play-state: running; }
.task:is([data-state="active"], [data-state="reopened"]) .arc, .task[data-state="reopened"] .head { opacity: 1; }
.task[data-state="reopened"] .turn { animation-direction: reverse; animation-duration: 1.6s; }
.task[data-state="reopened"] .arc { stroke: var(--cyan); }
.task:is([data-state="done"], [data-state="waiting"]) .arc { opacity: 1; stroke-dasharray: 100 0; }
.task[data-state="done"] .arc { stroke: var(--success); }
.task[data-state="done"] .tick, .task[data-state="waiting"] .ask { opacity: 1; }
.task[data-state="waiting"] .arc { stroke: var(--warning); }
.task[data-state="waiting"] .track { stroke: var(--warning); opacity: 0; }

/* the task in hand: large, on a card of its own, with the agent working it under the title; with no
   task in hand (the hero, the review, the morning) the headline takes its place */
.focus:has(.now .task) .headline { display: none; }
.headline { color: var(--text); font: 600 1.5rem/1.25 var(--sans); letter-spacing: -0.02em; }
.now .task { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--raised); font-size: 1.1875rem; white-space: normal; }
.now .task .title { color: var(--text); line-height: 1.3; text-wrap: balance; }
.now .task:is([data-state="active"], [data-state="reopened"]) .agent { display: flex; grid-column: 2; align-items: center; gap: 8px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.agent .logo { width: 16px; height: 16px; color: var(--text); }
.agent .model { margin-right: 4px; color: var(--body); }
/* the accounts, side by side: each a chip that fills as its usage limit is spent, the one in use lit */
.accounts { display: inline-flex; gap: 6px; }
.account { position: relative; overflow: hidden; padding: 0 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); color: var(--dim); }
.account .used { position: absolute; inset: 0 auto 0 0; width: 0; background: rgb(255 255 255 / 12%); }
.account .name { position: relative; }
.account.on { box-shadow: inset 0 0 0 1px rgb(230 169 92 / 40%); color: var(--amber); }
.account.on .used { background: rgb(230 169 92 / 26%); }
/* a task finished in the card shows its commit where its agent was */
.now .task .commit { grid-column: 2; font-size: 0.875rem; }

/* the decision, set aside where it can't be missed, with its options and the one the agent recommends */
.waiting:not(:empty) { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: rgb(252 211 77 / 7%); box-shadow: inset 0 0 0 1px rgb(252 211 77 / 18%); }
/* folded, the decision keeps only its line: the icon that asks and the title */
.waiting:has(> .task:not([data-open])) { padding-block: 4px; }
.waiting .task { padding-block: 4px; }
.waiting .task .title { color: var(--text); }
/* folded to one line while the story is elsewhere; open on the steps about it */
.waiting .task .options { display: grid; grid-column: 2 / -1; gap: 6px; overflow: hidden; padding: 8px 0 2px; }
.waiting .task:not([data-open]) .options { height: 0; padding: 0; visibility: hidden; }
.options li { display: flex; align-items: baseline; gap: 12px; color: var(--muted); font-size: 0.875rem; }
.options .key { color: var(--dim); }
.options .pick { color: var(--text); }
.options .pick .key { color: var(--warning); }
.options .rec { margin-left: auto; color: var(--warning); font-size: 0.8125rem; }

/* what's next, then what's finished: a few rows of each, and the count of the rest */
.next:not(:empty) { margin-top: 18px; }
.done:not(:empty) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.lane:not(.now) .task { font-size: 0.875rem; }
.next .task .title { color: var(--muted); }
.done .task .title { color: var(--body); }
.done :is(.task, .rest) { border-radius: 6px; }
.rest { padding-left: calc(1.25rem + 12px); color: var(--dim); font-size: 0.8125rem; line-height: 1.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 0 0; }
/* the hero shows the head of the queue large, before the night starts */
.board:is([data-part="0"], [data-part="1"]) .next .task { font-size: 1rem; }
.board:is([data-part="0"], [data-part="1"]) .next .task .title { color: var(--text); }
/* a row crossing to another list passes over the rows on its way rather than through them */
.lane:not(.now) > .task.moving { position: relative; z-index: 1; background: var(--surface); box-shadow: 0 0 0 4px var(--surface); }
/* a row on its way into a count, drawn over the board while it goes */
.board > .lane.ghost { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform-origin: 0 0; pointer-events: none; }

@media screen and (prefers-reduced-motion: no-preference) {
  .clock, .sky { transition: color 450ms var(--ease), background-color 450ms var(--ease), box-shadow 450ms var(--ease), rotate 450ms var(--ease); }
  .cells :is([data-state="active"], [data-state="reopened"]) { animation: night-pulse 1.4s ease-in-out infinite; }
  .waiting .task .track { animation: night-ping 2.4s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .status .turn { animation: none; } }
@keyframes night-spin { to { rotate: 1turn; } }
@keyframes night-pulse { 50% { opacity: 0.4; } }
@keyframes night-ping { from { opacity: 0.7; scale: 1; } 70%, to { opacity: 0; scale: 1.7; } }

/* Safe to leave running: the main page's sandbox, finished, beside four short lines. */
.night-safe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: center; }
.night-safe-list { display: grid; gap: 18px; margin-top: 36px; }
.night-safe-list li { display: flex; align-items: flex-start; gap: 14px; color: var(--text); font-size: 1.375rem; line-height: 1.4; }
.night-safe-list .icon { flex: none; width: 24px; height: 24px; margin-top: 3px; color: var(--success); stroke-width: 2; }
.night-safe .more { margin-top: 36px; }
.night-sandbox { display: grid; justify-items: center; margin: 0; }
/* With the script, the sandbox builds itself once as it comes into view, as the main page's does over
   its story: it starts unleashed (no wall, the secret readable, every wire live), then the wall closes
   around the project (1), the secret empties (2), the network narrows to the AI provider (3) and the
   push is cut (4), each line beside it ticking as its layer lands. Without the script it's finished. */
.night-sandbox.armed .wall rect { stroke-dasharray: 1; }
.night-sandbox.armed:not(.s1) .wall rect { stroke-dashoffset: 1; }
.night-sandbox.armed:not(.s1) .zone-tag, .night-sandbox.armed:not(.s1) .out .lock { opacity: 0; }
.night-sandbox.armed:not(.s1) .out > .row > .name, .night-sandbox.armed:not(.s1) .via > .row > .name { color: var(--text); }
.night-sandbox.armed:not(.s1) .out .lock path { transform: translateY(-5px); }
.night-sandbox.armed:not(.s2) .secret-value { color: var(--warning); }
.night-sandbox.armed:not(.s2) .secret-value::after { transform: scaleX(0); }
.night-sandbox.armed:not(.s3) .hop.stop .label, .night-sandbox.armed:not(.s4) .git .label { color: var(--text); }
.night-sandbox.armed:not(.s3) .hop.stop .wire::before, .night-sandbox.armed:not(.s4) .git .wire::before { opacity: 1; }
.night-sandbox.armed:not(.s3) .hop.stop .wire::after, .night-sandbox.armed:not(.s4) .git .wire::after { opacity: 0; }
.night-sandbox.armed:not(.s3) .hop.pass .wire::before { border-color: var(--live); }
.night-sandbox.armed:not(.s3) :is(.hop.pass, .hop.stop) .wire > *, .night-sandbox.armed:not(.s4) .git .wire > * { opacity: 0; scale: 0.4; }
.night-sandbox.armed:not(.s4) .git .lock path { transform: translateY(-5px); }
.night-safe.armed .night-safe-list .icon path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 450ms var(--ease) 250ms; }
.night-safe.armed .night-safe-list li.is-on .icon path { stroke-dashoffset: 0; }

@media (max-width: 1023px) {
  .night { display: block; }
  .night-lead { min-height: 0; padding-block: 28px 32px; }
  .night-stage { position: static; height: auto; padding-top: 0; place-items: start; }
  .night-step, .night-step:last-child { min-height: 0; padding-top: 56px; }
  .night-safe { grid-template-columns: minmax(0, 1fr); }
  .night-sandbox { justify-items: start; }
  /* The sandbox's deck: the board pins above sticky sheets that slide over one another.
     orchestrator.js measures the board into --frame and each sheet into --h; a tall sheet
     stops when its last line fits on screen, as on the sandbox page. */
  .night-deck .night { --screen: 100vh; --frame: calc(22rem + 24px); --card: calc(var(--screen) - var(--frame)); }
  .night-deck .night-stage { position: sticky; top: 0; z-index: 2; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 14px; background: var(--bg); }
  .night-deck .night-stage::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 24px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  /* the options on one line, the recommended one starred */
  .night-deck .waiting .task .options { grid-auto-flow: column; justify-content: start; gap: 14px; }
  .night-deck .options li { gap: 8px; font-size: 0.8125rem; }
  .night-deck .options .rec { display: none; }
  .night-deck .options .pick::after { content: "★"; margin-left: -4px; color: var(--warning); }
  .night-deck .board :is(.next, .done, .waiting):not(:empty) { margin-top: 10px; }
  .night-deck .board .done:not(:empty) { padding-top: 6px; }
  /* one height all night, so the text under it never jumps */
  .night-deck .board { min-height: 22rem; }
  /* morning gets a reading beat before the board and its last sheet leave together */
  .night-deck .night-steps::after { content: ""; display: block; height: var(--card); }
  .night-deck .night-step { position: sticky; top: min(var(--frame), calc(var(--screen) - var(--h, 0px))); align-content: start; min-height: calc(var(--card) - 56px); margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 32px; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; background: var(--bg); box-shadow: 0 -12px 32px rgb(0 0 0 / 45%); }
  .night-deck .night-step:focus-within { z-index: 1; }
  .night-deck .night-step h2 { font-size: 1.5rem; }
  .night-deck .night-step p { margin-top: 12px; font-size: 1.0625rem; line-height: 1.55; }
  .night-deck .night-step > .evidence { margin-top: 20px; font-size: 0.9375rem; }
  .night-deck .night-step .evidence strong { font-size: 2.25rem; }
}
@supports (height: 1svh) {
  @media (max-width: 1023px) { .night-deck .night { --screen: 100svh; } }
}
@media (max-width: 640px) {
  .board { --row: 1.75rem; padding: 14px 16px 16px; }
  .night-deck .night { --frame: calc(19.5rem + 24px); }
  .night-deck .board { min-height: 19.5rem; }
  .night-track { margin: 10px 0 12px; }
  .cells { gap: 2px; margin-bottom: 14px; }
  .now .task { row-gap: 8px; padding: 12px 14px; font-size: 1rem; }
  .now .task .agent { font-size: 0.8125rem; }
  .headline { font-size: 1.25rem; }
  .night-step h2 { font-size: 1.5rem; }
  .night-step p { font-size: 1.0625rem; line-height: 1.55; }
  :is(.night-step, .night-safe-copy) > .evidence { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 0.9375rem; }
  .night-safe-list li { font-size: 1.1875rem; }
}

/* the team at a glance: the roles and their providers, without models or job titles */
#features .team :is(.model, .kind) { display: none; }