/* Generated by website/illustration/build.py; edit the sources there, not this file. */
/* ---- Figure 1: synthetic IDE illustration, drawn in the site's theme tokens ----
   One fixed 1200 x 740 design canvas. Every length below is written in
   design px and multiplied by --u (= 1/1200 of the frame width), so the whole
   window scales proportionally, stays crisp, and never overflows on phones.
   Hairlines use real calc(1 * var(--u)) so they stay visible at small sizes.
   Colours come only from the datasheet.css tokens, so the window follows
   the light or dark theme. */
.shot__fig { position: relative; container-type: inline-size; }
.ide { --u: calc(100cqw / 1200);
  --wv-fill: var(--ok-fill);              /* pale solder-mask: bus fill, cursor highlight */
  position: relative; width: calc(1200 * var(--u)); height: calc(740 * var(--u)); overflow: hidden;
  display: grid; grid-template-rows: calc(30 * var(--u)) 1fr calc(24 * var(--u)); grid-template-columns: calc(40 * var(--u)) 1fr;
  background: var(--fill-2); border: 1px solid var(--ink); color: var(--ink);
  font: 400 calc(12 * var(--u))/1.3 var(--sans); font-stretch: 90%; }
.ide * { box-sizing: border-box; }

/* title bar: window dots, command-centre pill, layout glyphs */
.ide__title { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u));
  background: var(--fill); border-bottom: 1px solid var(--rule-soft); }
.ide__dots { display: flex; gap: calc(6 * var(--u)); width: calc(120 * var(--u)); }
.ide__dots i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); }
.ide__cmd { margin: 0 auto; width: calc(380 * var(--u)); height: calc(20 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: calc(5 * var(--u)); color: var(--ink-2); font-size: calc(12 * var(--u)); }
.ide__cmd b { color: var(--ink); font-weight: 600; }
.ide__lay { display: flex; gap: calc(6 * var(--u)); width: calc(120 * var(--u)); justify-content: flex-end; }

/* activity bar: stylised outline glyphs, Booley's selected */
.ide__act { background: var(--fill); border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); }
.ide__act i { position: relative; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border: calc(1.6 * var(--u)) solid var(--rule); border-radius: calc(3 * var(--u)); }
.ide__act i:nth-child(2) { border-radius: 50%; }
.ide__act i.on { border-color: var(--mask); background: var(--wv-fill); }

/* main area: three agent terminals stacked left; Dashboard (two split panes) + waveform right */
/* sub-windows sit on a darker gutter, so splits read as thick separators */
.ide__main { display: grid; grid-template-columns: calc(410 * var(--u)) 1fr; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)); background: var(--gutter); min-width: 0; min-height: 0; }
.ide__col { display: grid; gap: calc(6 * var(--u)); min-height: 0; min-width: 0; }
.ide__col--agents { grid-template-rows: 1fr 1fr; }
.ide__col--right { grid-template-rows: 1fr calc(232 * var(--u)); }
.pn { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper);
  border: 1px solid var(--rule); }
.pn__tab { flex: none; height: calc(28 * var(--u)); display: flex; align-items: stretch; background: var(--fill-2);
  border-bottom: 1px solid var(--rule-soft); font-size: calc(13.5 * var(--u)); }
.pn__tab span { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)); background: var(--paper);
  box-shadow: inset 0 calc(2 * var(--u)) 0 var(--mask); border-right: 1px solid var(--rule-soft); font-weight: 600; }
.pn__tab span.off { background: none; box-shadow: none; font-weight: 400; color: var(--ink-2); }
.pn__tab em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.pn__tab .gl { font: 600 calc(11.5 * var(--u))/1 var(--mono); color: var(--mask); }   /* terminal glyph ">_" */

/* ---- agent session terminals: request + 3-4 compact steps ---- */
.ag { flex: 1; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)); font: 400 calc(14 * var(--u))/calc(21 * var(--u)) var(--mono); min-height: 0; overflow: hidden; }
.ag p { margin: 0; white-space: pre; }
.ag .you { margin-bottom: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); background: var(--fill); border-left: calc(2 * var(--u)) solid var(--ink-2); white-space: pre-wrap; }
.ag .st { margin-top: calc(5 * var(--u)); }
.ag .st b { font-weight: 600; color: var(--mask); }           /* Booley Flow call */
.ag .st .ed { font-weight: 600; color: var(--ink); }            /* client edit */
.ag .dot { color: var(--mask); }
.ag .r { color: var(--ink-2); }
.ag .ok { color: var(--mask); font-weight: 600; }
.ag .bad { color: var(--ink); font-weight: 600; text-decoration: underline calc(1.5 * var(--u)); text-underline-offset: calc(2 * var(--u)); }
.ag .run { color: var(--mask); }
.ag .live { margin-top: calc(4 * var(--u)); color: var(--ink-2); }
.ag .live i { font-style: normal; color: var(--mask); }

/* ---- Booley Dashboard: one pane, readable first ----
   Overview table with aligned columns; the Goal Mode session (S2) is the
   selected row, its Goals expanded beneath it as an indented sub-table. */
.db { flex: 1; display: flex; flex-direction: column; min-height: 0; font: 400 calc(14 * var(--u))/calc(22 * var(--u)) var(--mono); }
.db__hd { display: flex; align-items: baseline; gap: calc(18 * var(--u)); padding: calc(9 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)); background: var(--fill); border-bottom: 1px solid var(--rule-soft); }
.db__hd b { white-space: nowrap; font: 700 calc(16 * var(--u))/1.2 var(--sans); font-stretch: 88%; color: var(--ink); }
.db__hd span { margin-left: auto; white-space: nowrap; font-size: calc(13 * var(--u)); color: var(--ink-2); }
.db__hd span em { font-style: normal; color: var(--mask); font-weight: 600; }
.db__sec { padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)); font: 700 calc(12.5 * var(--u))/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
/* one column template shared by header, rows: # | session | mode | activity | Goals | Job | started */
.dr { display: grid; grid-template-columns: calc(18 * var(--u)) calc(82 * var(--u)) calc(94 * var(--u)) calc(188 * var(--u)) calc(50 * var(--u)) 1fr calc(62 * var(--u)); column-gap: calc(9 * var(--u));
  align-items: baseline; padding: calc(9 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--fill); white-space: nowrap; }
.dr--th { padding-top: calc(4 * var(--u)); padding-bottom: calc(5 * var(--u)); border-bottom: 1px solid var(--rule); font: 700 calc(12.5 * var(--u))/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.dr .n { color: var(--ink-2); }
.dr .s { font-weight: 600; }
.dr .act { color: var(--mask); }
.dr .dim { color: var(--rule); }
.dr .t { color: var(--ink-2); text-align: right; }
.dr--sel { background: var(--wv-fill); border-bottom-color: transparent; box-shadow: inset calc(3 * var(--u)) 0 0 var(--mask); }
/* expanded Goals: indented under the selected row, tree rule on the left */
.dg { background: var(--wv-fill); padding: calc(2 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(45 * var(--u)); border-bottom: 1px solid var(--fill); }
.dg__row { display: grid; grid-template-columns: calc(140 * var(--u)) calc(170 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); align-items: baseline;
  padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(14 * var(--u)); border-left: calc(1.5 * var(--u)) solid var(--mask); white-space: nowrap; font-size: calc(14 * var(--u)); }
.dg .ok { color: var(--mask); font-weight: 700; }
.dg .bad { color: var(--ink); font-weight: 700; text-decoration: underline calc(1.5 * var(--u)); text-underline-offset: calc(3 * var(--u)); }
.dg .nr { color: var(--ink-2); }
.dg .id { color: var(--ink); font-weight: 600; }
.dg .rq { color: var(--ink-2); }
.dg .chk { color: var(--mask); font-style: italic; }

/* ---- waveform viewer ---- */
.wv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wv__bar { flex: none; height: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(10 * var(--u)); border-bottom: 1px solid var(--rule-soft);
  font: 400 calc(12.5 * var(--u))/1 var(--mono); color: var(--ink-2); }
.wv__bar b { color: var(--mask); font-weight: 600; }
.wv svg { display: block; width: 100%; flex: 1; min-height: 0; }
.wv text { font-family: var(--mono); font-size: calc(13 * var(--u)); fill: var(--ink); }
.wv .nm { fill: var(--ink); }
.wv .vl { fill: var(--ink-2); text-anchor: end; }
.wv .tk { fill: var(--ink-2); font-size: calc(11 * var(--u)); }
.wv .bt { text-anchor: middle; font-size: calc(12.5 * var(--u)); }
.wv .w { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.wv .bus { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; }
.wv .bus.hi { fill: var(--wv-fill); stroke: var(--mask); stroke-width: 1.6; }
.wv .gr { stroke: var(--fill); stroke-width: 1; }
.wv .names { fill: var(--fill-2); }          /* signal-name column band */
.wv .names-rule { stroke: var(--rule-soft); }
.wv .ruler { stroke: var(--rule); }
.wv .cur { stroke: var(--mask); stroke-width: 1.6; }
.wv .flag { fill: var(--mask); }
.wv .flagt { fill: var(--mask-ink); font-size: calc(11 * var(--u)); font-weight: 600; text-anchor: middle; }

/* ---- status bar ---- */
.ide__status { grid-column: 1 / -1; display: flex; align-items: stretch; gap: calc(16 * var(--u)); background: var(--fill);
  border-top: 1px solid var(--rule-soft); font-size: calc(11.5 * var(--u)); color: var(--ink-2); }
.ide__status span { display: flex; align-items: center; }
.ide__status .dc { padding: 0 calc(12 * var(--u)); background: var(--mask); color: var(--mask-ink); font-weight: 600; gap: calc(6 * var(--u)); }
.ide__status .r { margin-left: auto; padding-right: calc(12 * var(--u)); }