/* The signed-in app: one grey page, a sidebar on it, white bevelled cards. */
:root{
  --t1:#4A4A4A;--t2:#616161;--t3:#6E6E6E;--ink:#303030;
  /* A menu place that opens later is a disabled control, not text to read: lighter than the open
     places' grey, or it reads as open. */
  --locked:#8A8A8A;
  --ground:#F1F1F1;--soft:#F7F7F7;--hair:#EBEBEB;--track:#E3E3E3;
  --acc:#4E8A00;--acc-ink:#2E6A00;--acc-soft:#E7F0DA;--down:#8A8A8A;
  /* The chart colours of production's charts and bars, the same blue as Passed on the run page (app/run/verdict.ts). */
  --series:#13ACF0;--series-across:linear-gradient(90deg,#0A97D5,#33BDF7);
  --ring:inset 1px 0 0 rgba(0,0,0,.09),inset -1px 0 0 rgba(0,0,0,.09),inset 0 -1px 0 rgba(0,0,0,.15),inset 0 1px 0 rgba(210,210,210,.5),0 1px 0 rgba(0,0,0,.05);
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;--mono:ui-monospace,'SF Mono',Menlo,monospace;
  --frame:#EBEBEB;--card:#fff;--pill:#fff;--line:#E3E3E3;--faint:#B5B5B5;--d3:#D9D9D6;
  --hover:rgba(0,0,0,.04);--press:rgba(0,0,0,.07);--rail:rgba(63,63,70,.3);--brand:#76B900;
  --tip:#303030;--on-tip:#fff;--up:#067E46;--link:#005BD3;
  --grid:#E4E4E7;--prev:#8E8E93;--axis:#75757E;--crosshair:#CBCBCF;--skel:#EFEFED;--skel-hi:#F7F7F5;
  --row-hover:#E3E3E3;--chip-full:#E0F0FF;--chip-full-ink:#00527C;--chip-none:#FEE9F8;--chip-none-ink:#8E1F5E;
  --globe-sea:#FFFFFF;--globe-edge:#E9E9E4;--globe-land:92,92,84;
  --btn-hover:#F7F7F7;--danger:#B42318;--scrim:rgba(0,0,0,.2);--chip-part:#EFEAFD;--chip-part-ink:#4B2BB5;
  /* Outcome marks too small to carry a word (globe dots, 8px keys) need 3:1 on their ground, which the ring's #13ACF0 misses on white. */
  --o-full:#0A97D5;--o-part:#6A42E9;--o-none:#D147AC;--o-unread:#8A8A8A;
  /* The sheet's edge: a hairline and a soft shadow falling on the menu beside it. */
  --sheet:0 0 0 1px rgba(0,0,0,.03),0 0 14px rgba(0,0,0,.07);
}
/* Dark: Databuddy's dashboard palette (apps/dashboard/app/globals.css, .dark), our green kept as the accent. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --frame:#1e1e23;--ground:#19191d;--card:#1e1e23;--pill:#2a2a31;--soft:#2a2a31;--hair:#3b3b45;--track:#2a2a31;--line:#323239;
  --ink:#e7e8eb;--t1:#c8c9ce;--t2:#a5a6ad;--t3:#94959c;--locked:#7e7f87;--down:#7e7f87;--faint:#4a4a52;--d3:#3a3a42;
  --acc:#76B900;--acc-ink:#9BCF4A;--acc-soft:rgba(118,185,0,.14);
  --hover:rgba(255,255,255,.05);--press:rgba(255,255,255,.08);--rail:rgba(231,232,235,.25);
  --tip:#323239;--on-tip:#e7e8eb;--up:#4ebf7b;--link:#4db8e8;
  --grid:#3b3b45;--prev:#7e7f87;--axis:#a3a4ab;--crosshair:#4a4a52;--skel:#2a2a31;--skel-hi:#323239;
  --row-hover:#3b3b45;--chip-full:rgba(77,184,232,.16);--chip-full-ink:#7fcdf0;--chip-none:rgba(212,101,138,.18);--chip-none-ink:#e89ab4;
  --globe-sea:#2a2a31;--globe-edge:#1e1e23;--globe-land:163,164,171;
  --ring:inset 0 0 0 1px #3b3b45,0 1px 3px rgba(0,0,0,.1);
  --btn-hover:#323239;--danger:#F97066;--scrim:rgba(0,0,0,.5);--chip-part:rgba(106,66,233,.2);--chip-part-ink:#B9A6F8;
  --o-full:#13ACF0;--o-part:#9C82F2;--o-none:#E26BC2;--o-unread:#8e8f97;
  --sheet:0 0 0 1px rgba(255,255,255,.04),0 0 14px rgba(0,0,0,.4);
}
/* The switch cross-fades the whole page once; a person who asked for less motion gets it at once. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}
*{box-sizing:border-box}
html,body{margin:0;background:var(--frame)}
body{color:var(--t1);font-family:var(--sans);font-size:13px;line-height:20px;font-weight:450;
  font-feature-settings:'cv11';font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
/* Focus is an outline, which no component sets: drawn as a box-shadow it lost to every button's bevel
   and chosen segment's ring. Rows flush inside a clipping box draw it inside, or the box cuts it. */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
:is(.hitem,.grow,.kpis button,.list .item,.m-check,.barrow,.run-ui li>button):focus-visible{outline-offset:-2px}
p,h1,h2,h3,ul,ol{margin:0}
code,.code{font-family:var(--mono);font-size:12px;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The frame stands still: the menu and the sheet hold their places and only the sheet's content
   scrolls, inside its own rounded edge. */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
.side{position:sticky;top:0;z-index:30;height:100vh;display:flex;flex-direction:column;gap:14px;padding:16px 12px;overflow:hidden}
/* The mark alone, the flask from the landing page's logo, a little larger than it stands there. */
.linkish{padding:0;border:0;background:none;color:var(--t2);text-align:left;font-weight:550}
.linkish:hover{color:var(--ink)}

/* The app is a sheet laid on the frame: the ground on a frame a shade deeper, its top corner
   rounded, starting a little below the top, raised a little over the side menu beside it. The sheet
   stands still: its title bar holds the top and only the pane under it scrolls, with a hairline under
   the bar once anything has gone beneath it. */
.main{min-width:0;margin-top:12px;display:flex;flex-direction:column;background:var(--ground);border-radius:16px 0 0 0;overflow:hidden;box-shadow:var(--sheet);timeline-scope:--pane}
.topbar{flex:none;padding:22px 28px 16px}
.pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 28px 48px;scroll-timeline:--pane y}
@supports (animation-timeline:--pane){
  .topbar{animation:topbar-edge linear both;animation-timeline:--pane;animation-range:0 16px}
  @keyframes topbar-edge{to{box-shadow:0 1px 0 var(--hair)}}
}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;min-height:32px}
.topnote{max-width:1120px;margin:0 auto}
.topnote .next-prod{margin:14px 0 0}
.top h1{font-size:20px;line-height:28px;font-weight:650;letter-spacing:-.2px;color:var(--ink)}
.top .actions{display:flex;align-items:center;gap:8px}
.page{position:relative;max-width:1120px;margin:0 auto}

@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);align-content:start;height:auto;overflow:visible}
  .side{position:static;height:auto;gap:10px;padding:12px 16px 0}
  .brand{display:none}
  .side-foot{display:none}
  .main{display:block;margin-top:0;border-radius:0;overflow:visible}
  .topbar{padding:8px 16px 12px}
  .pane{overflow:visible;padding:0 16px 40px}
  .top{flex-wrap:wrap}
  .top h1{font-size:18px}
}
.side-top{display:flex;flex-direction:column;gap:18px;min-height:0}
@media (max-width:760px){.side-top{gap:10px}}
[data-feedback-mount][data-unread]::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--acc);vertical-align:middle}

/* The menu. A row per group: its icon and its name. Under it the group's places, with the hook
   rail running down to the open one. The open place is ink, the rest grey and ink on hover; a place
   that opens after the first run is lighter and does not answer the pointer. No boxes. The icons
   sit at the same spot open or folded (22px in), so folding narrows the menu around them. */
.brandrow{position:relative;display:flex;align-items:center;height:36px;padding-left:8px}
.brand{display:flex;align-items:center;margin:-4px;padding:4px;border-radius:8px;text-decoration:none}
/* The mark is a link like every place in the menu, and answers the pointer like one while the menu is open. */
:root:not([data-nav="folded"]) .brand:hover{background:var(--hover)}
.brand img{width:24px;height:24px;image-rendering:pixelated}
.fold{position:absolute;top:2px;left:176px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--t2);cursor:pointer;transition:none}
.fold:hover{background:var(--hover);color:var(--ink)}
.nav{display:grid;gap:10px}
.hgroup{display:grid}
.ico{flex:none;width:20px;height:20px}
.ico svg{display:block;width:20px;height:20px}
.grow{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;font-size:13px;line-height:20px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.grow .ico{color:var(--t1)}
a.grow:hover{background:var(--hover)}
.grow.locked{color:var(--locked);cursor:default}
.grow.locked .ico{color:var(--locked)}
.gname{transition:opacity .15s ease}
.gkids{display:grid;grid-template-rows:1fr}
.gkids>.hlist{min-height:0;overflow:hidden}
/* The 2px over the first place is the gap after an empty first item, not padding: padding kept a
   folded list 2px tall, and the icons under it hopped when its card took it out of the column. */
.hlist{position:relative;display:flex;flex-direction:column;gap:2px;margin-left:14px}
.hlist::before{content:"";height:0}
.hitem{display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% - 14px);margin-left:14px;padding:6px 4px 6px 8px;border-radius:8px;font-size:13px;line-height:20px;font-weight:500;
  color:var(--t2);text-decoration:none;white-space:nowrap;transition:color .2s}
.hitem:hover{color:var(--t1)}
/* The open place wears what a chosen button wears, as on the landing's dashboard: the white pill with its bevel, the hook running into it. */
.hitem[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--pill);box-shadow:var(--ring)}
.hitem.locked{color:var(--locked);cursor:default}
/* A group that is shut says when it opens, once, under its places. */
.hnote{padding:2px 4px 4px 22px;font-size:12px;line-height:16px;color:var(--t2);white-space:normal}
.hitem b{min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:6px;background:var(--press);color:var(--t1);font-size:11px;font-weight:650}
.hrail{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.hrail.shown{opacity:1}
.hrail.on{color:var(--brand)}
.hrail.hover{color:var(--rail)}
.hrail i{position:absolute;left:2px;width:1px;background-image:repeating-linear-gradient(to top,transparent 0 2px,currentColor 2px 4px);
  transition:top .38s cubic-bezier(.34,1.25,.64,1),height .38s cubic-bezier(.34,1.25,.64,1)}
.hrail svg{position:absolute;left:2px;transition:top .38s cubic-bezier(.34,1.25,.64,1)}
.hrail path{stroke:currentColor;stroke-dasharray:2 2}
.hrail.still,.hrail.still i,.hrail.still svg{transition:none}
@media (prefers-reduced-motion:reduce){.hrail,.hrail i,.hrail svg{transition:none}}

/* The one hint, laid on the page: a dark pill with the name, and the key beside the fold. */
.navtip{position:fixed;z-index:100;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:var(--tip);color:var(--on-tip);font-size:12px;line-height:16px;font-weight:450;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s}
.navtip.on{opacity:1;visibility:visible;transition:opacity .12s ease}
.navtip kbd{font:inherit;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.14)}

/* Folded: the column narrows to 64px around the icons; the names fade, the places fold up, the fold
   button rests on the mark and shows when the mark is hovered; the open group's icon wears our
   white. Motion only when the person folds or unfolds (nav-anim), never on a load or a redraw. */
:root[data-nav="folded"] .app{grid-template-columns:64px minmax(0,1fr)}
:root[data-nav="folded"] .gname{opacity:0;pointer-events:none}
/* Folded, a group's places are hidden by folded itself, not by the hover rules below: those are off
   during a fold, and coming back at the end of one they handed every card a fade from fully drawn.
   The whole menu flashed its cards each time it folded. */
:root[data-nav="folded"] .gkids{grid-template-rows:0fr;opacity:0;visibility:hidden}
/* Hidden, the places take no Tab stop: a keyboard landed on seven links nobody could see. */
:root[data-nav="folded"] .gkids>.hlist{opacity:0;visibility:hidden}
/* Each icon stands in a square tile, a step apart from the next, the menu's foot the same; the
   tile sits 2px in so the icon keeps its spot. The open one is a soft grey tile with its icon in ink. */
:root[data-nav="folded"] .nav{gap:14px}
:root[data-nav="folded"] .grow{width:36px;margin-left:2px;padding:0 8px}
:root[data-nav="folded"] .grow .ico{color:var(--t3)}
:root[data-nav="folded"] a.grow:hover .ico{color:var(--ink)}
:root[data-nav="folded"] :is(.grow,.themebtn,.me){transition:background-color .12s ease}
:root[data-nav="folded"] .grow.on{background:var(--press);box-shadow:none}
:root[data-nav="folded"] .grow.on .ico{color:var(--ink)}
/* Folded, a group's places open beside its icon while the pointer or the keyboard is on it: a card
   with the group's name over its places, reached across the gap without closing. Never while the
   menu is folding, when the column still clips its names. */
:root[data-nav="folded"] .hgroup{position:relative}
:root[data-nav="folded"]:not(.nav-anim) .side{overflow:visible}
/* A card lingers a moment after the pointer leaves, so a slip on the way to it does not shut it; the
   one being opened stands over it. A fold switches these rules off, so no card fades out during one. */
:root[data-nav="folded"]:not(.nav-anim) .gkids{position:absolute;top:-6px;left:100%;display:block;padding-left:18px;transform:translateX(-4px);
  transition:opacity .12s ease .22s,transform .12s ease .22s,visibility 0s linear .34s}
:root[data-nav="folded"]:not(.nav-anim) .hgroup:is(:hover,:focus-within){z-index:2}
:root[data-nav="folded"]:not(.nav-anim) .side:has(.hgroup:hover) .hgroup:not(:hover) .gkids{transition:opacity 0s linear .1s,transform 0s linear .1s,visibility 0s linear .1s}
:root[data-nav="folded"]:not(.nav-anim) .hgroup:is(:hover,:focus-within) .gkids{visibility:visible;opacity:1;transform:none;
  transition:opacity .12s ease .1s,transform .12s ease .1s,visibility 0s linear .1s}
:root[data-nav="folded"]:not(.nav-anim) .gkids>.hlist{min-width:184px;margin:0;padding:6px;overflow:visible;visibility:inherit;opacity:1;border-radius:12px;background:var(--card);box-shadow:var(--ring),0 8px 24px rgba(0,0,0,.14)}
:root[data-nav="folded"]:not(.nav-anim) .hlist::before{content:attr(data-hook);height:auto;padding:4px 8px 6px;font-size:12px;line-height:16px;font-weight:600;color:var(--t2)}
:root[data-nav="folded"]:not(.nav-anim) .hitem{width:auto;margin:0;padding:6px 8px}
:root[data-nav="folded"]:not(.nav-anim) a.hitem:hover{background:var(--hover);color:var(--ink)}
:root[data-nav="folded"]:not(.nav-anim) .hitem[aria-current="page"]{background:var(--hover);box-shadow:none}
:root[data-nav="folded"]:not(.nav-anim) .hrail{display:none}
/* Folded, the drawer rests on the logo and shows in its place on hover; right after the press that
   folded it, the logo stays the logo until the pointer has left it, so nothing flashes. */
:root[data-nav="folded"] .brandrow .fold{left:4px;opacity:0}
:root[data-nav="folded"]:not(.nav-justfolded) .brandrow:hover .fold,:root[data-nav="folded"] .brandrow .fold:focus-visible{opacity:1;background:var(--line);transition:opacity .12s ease}
:root[data-nav="folded"]:not(.nav-justfolded) .brandrow:hover .brand{opacity:0}
:root.nav-anim .app{transition:grid-template-columns .32s cubic-bezier(.22,1,.36,1)}
:root.nav-anim .gkids{transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1),opacity .18s ease,visibility .18s}
:root.nav-anim .gkids>.hlist{transition:opacity .18s ease,visibility .18s}
:root.nav-anim .grow{transition:width .32s cubic-bezier(.22,1,.36,1),margin .32s cubic-bezier(.22,1,.36,1),padding .32s cubic-bezier(.22,1,.36,1)}
:root.nav-anim :is(.nav,.side-foot){transition:gap .32s cubic-bezier(.22,1,.36,1)}
/* The fold the app makes itself while setting up: slower, since nobody pressed for it. */
:root.nav-slow :is(.app,.gkids,.grow,.me,.nav,.side-foot,.setrow,.themebtn){transition-duration:.6s}
:root.nav-slow .gkids>.hlist{transition-duration:.3s}
@media (prefers-reduced-motion:reduce){:root.nav-anim :is(.app,.gkids,.grow,.me,.nav,.side-foot,.setrow,.themebtn){transition:none}:root[data-nav="folded"]:not(.nav-anim) .hgroup:is(:hover,:focus-within) .gkids{transition:none}}
/* Production's pages in the dashboard's shapes: a grid of metric cards, each a number with its
   interval, what it came up in, how sure, the move, and what it is made of. */
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.m-grid>.card{margin:0}
.m-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px}
.m-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.m-head span{flex:none;font-size:12px;color:var(--t3)}
/* Two lines held for every question, so the numbers in one row of cards stand on one line. */
.m-q{min-height:34px;font-size:12px;line-height:17px;color:var(--t2)}
.m-val{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.m-val b{font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.3px;color:var(--ink)}
.m-val small{font-size:12px;color:var(--t2)}
.m-sub{font-size:12px;color:var(--t2)}
.m-move{font-size:12px;color:var(--t2)}
.m-bars{display:grid;gap:8px;margin-top:12px;padding:0;list-style:none}
.m-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.m-bars li span{grid-row:1;grid-column:1;color:var(--t1);overflow-wrap:anywhere}
.m-bars li b{grid-row:1;grid-column:2;font-weight:650;color:var(--ink)}
.m-bars li i{grid-row:2;grid-column:1 / -1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--fill,var(--series)) var(--v),var(--track) var(--v))}
.m-bars li.grey i{background:linear-gradient(90deg,var(--down) var(--v),var(--track) var(--v))}
.m-wide{margin-bottom:12px}
.m-behind{margin:16px 0 4px;font-size:12px;font-weight:650;color:var(--ink)}
.m-checks{margin:0 -16px -16px;padding:0;list-style:none}
.m-checks>li{border-top:1px solid var(--hair)}
.m-check{display:grid;grid-template-columns:minmax(0,1fr) fit-content(32%);gap:16px;align-items:center;width:100%;padding:10px 16px;border:0;background:none;text-align:left;color:inherit}
.m-check:hover,.m-check[aria-expanded="true"]{background:var(--soft)}
.m-check[aria-expanded="true"]:hover{background:var(--row-hover)}
.m-checks>li:last-child .m-check[aria-expanded="false"]{border-radius:0 0 12px 12px}
.m-check .what b{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.m-check .what span{display:block;font-size:12px;color:var(--t2)}
.m-check .num{text-align:right;font-size:12px;color:var(--t2);overflow-wrap:anywhere}
.m-check .num b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
/* An opened check: the rule as written, where it came from on a line of its own, and its conversations. */
.m-check-more{display:grid;justify-items:start;gap:6px;padding:4px 16px 14px;background:var(--soft);color:var(--ink)}
.m-check-more[hidden]{display:none}
.m-checks>li:last-child .m-check-more{border-radius:0 0 12px 12px}
.m-from{font-size:12px;color:var(--t2);overflow-wrap:anywhere}
.m-from code{color:var(--t2)}
.m-check-more .btn{height:28px;margin-top:2px}
.m-checks .pager{padding:8px 16px}
.m-add label{display:grid;gap:4px;margin-top:10px;font-size:12px;font-weight:550;color:var(--t1)}
.m-add input,.m-add textarea{height:34px;padding:0 10px;border:0;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--d3);color:var(--ink);font:inherit}
/* The question takes up to 400 letters: three lines to start, growing with what is written. */
.m-add textarea{height:auto;min-height:76px;padding:7px 10px;field-sizing:content;resize:none}
.m-add :is(input,textarea)::placeholder{color:var(--t3)}
.m-add [aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--danger)}
.m-err{margin-top:4px;font-size:12px;color:var(--danger)}
.m-add p:last-child{margin-top:12px}
@media (max-width:1100px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.m-grid{grid-template-columns:minmax(0,1fr)}}
/* A surface tab keeps one line up to 22em; the chosen one's full name opens the line under the tabs. */
.seg.surfaces{margin-bottom:12px}
.seg.surfaces button{max-width:22em}
.seg.surfaces button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lede .over{color:var(--ink)}

/* Speed and cost, from the app's own model calls. */
.calls-card{display:grid;gap:12px}
.calls-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.calls-tile .big{margin:2px 0 0}
.calls-under,.calls-note{margin:0;font-size:12px;color:var(--t2)}

/* One conversation, answer by answer. A person's or an app's words wrap anywhere and never scroll
   sideways; a reply brought into view keeps room above it. */
.conv-reply{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere;scroll-margin-top:24px}
.conv-reply.broke{box-shadow:var(--ring),inset 3px 0 0 var(--ink)}
.conv-broke{margin:0;font-weight:650;color:var(--ink)}
.conv-broke q{font-weight:450;color:var(--ink)}
.conv-who{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 0;font-size:12px;color:var(--t2)}
.conv-reply .reply-md{color:var(--ink)}
/* Show as sent: its box fills while the answer stands as the app sent it. */
.conv-sent{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font-weight:550;color:var(--t1)}
.conv-sent:hover{color:var(--ink)}
.conv-sent i{display:grid;place-items:center;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--t2);color:var(--card)}
.conv-sent svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.conv-sent[aria-pressed="true"] i{background:var(--ink);box-shadow:none}
.conv-sent[aria-pressed="false"] svg{visibility:hidden}
.conv-said,.conv-answer{margin:0;color:var(--ink);white-space:pre-wrap}
.conv-numbers,.conv-held,.conv-none{margin:4px 0 0;font-size:12px;color:var(--t2)}
.conv-ev{margin-top:6px;padding:10px 12px;border-radius:8px;background:var(--soft)}
.conv-ev-head{margin:0 0 4px;font-size:12px;font-weight:650;color:var(--ink)}
.conv-ev pre,.conv-data{margin:0;line-height:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.conv-data{padding:8px 10px;border-radius:8px;background:var(--soft)}
/* Folded: twelve lines of a tool's words, four of an answer that is raw data. */
.conv-ev pre.folded{max-height:calc(18px * 12);overflow:hidden}
.conv-data.folded{max-height:calc(18px * 4 + 16px);overflow:hidden}
.conv-more{justify-self:start;margin-top:4px;font-size:12px;color:var(--ink)}
.conv-more:hover{text-decoration:underline;text-underline-offset:3px}
.conv-ev pre+pre{margin-top:6px}
.conv-passages{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.conv-passages li{display:grid;gap:2px}
.conv-passages small{font-size:12px;color:var(--t2)}
.conv-delete{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.conv-delete p{margin:0;color:var(--ink)}
/* What the app did for an answer: a tree of its tools and lookups, a tool run inside another under it. */
.conv-steps{margin:4px 0 0;padding-left:18px;font-size:12px;line-height:18px;color:var(--t2)}
.conv-steps li{margin:4px 0}
.conv-steps li.broke>b{color:var(--bad,#B42318)}
.conv-steps b{font-weight:550;color:var(--ink)}
.conv-steps b+span{margin-left:8px}
.conv-steps .conv-data{margin-top:4px;font-size:12px}
.conv-steps ol{margin-left:2px;padding-left:14px;border-left:1px dashed var(--line)}
.conv-reactions{margin:4px 0 0;padding-left:18px;font-size:12px;line-height:18px;color:var(--t2)}
.conv-reactions li{margin:2px 0}
.conv-reactions li.bad{color:var(--bad,#B42318)}
.conv-visit{margin:0 0 8px;font-size:12px;line-height:18px;color:var(--t2)}
.conv-rec{margin-bottom:12px}
.rec-frame iframe{display:block;width:100%;height:560px;border:0;border-radius:8px;background:transparent}
.release-list{list-style:none;margin:0;padding:0}
.release-list li{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13px;line-height:20px}
.release-list li:first-child{border-top:0}
.release-list code{font-size:12px}
.release-list span{color:var(--t2)}
.release-list em{font-style:normal;color:var(--t2)}
.release-list em.worse{color:var(--bad,#B42318)}
.release-list em.better{color:var(--green,#4E8A00)}

/* Intelligence over the page: full screen, the page behind it frosted in the app's ground and a soft
   blue haze from below; the film itself is run/intel-film.tsx. It
   leaves by clearing: the blur unwinds onto the page behind. */
.invite-veil{position:fixed;inset:0;z-index:200;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(120% 70% at 50% 115%,rgba(19,172,240,.16),transparent 60%),color-mix(in srgb,var(--ground) 78%,transparent);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2)}
.invite-veil.in{opacity:1}
.invite-veil.out{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:opacity .9s ease,backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease}
/* The film's messages, drawn the way iMessage draws them: the person in blue on the right, the app's
   AI in grey on the left, each with its tail cut from the ground behind it, and the typing dots. */
.imsg{position:relative;max-width:82%;padding:10px 17px;border-radius:24px;font:400 21px/27px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;letter-spacing:-.012em;overflow-wrap:anywhere}
.imsg-out{justify-self:end;align-self:flex-end;background:#0A84FF;color:#fff}
.imsg-in{justify-self:start;align-self:flex-start;background:#E9E9EB;color:#000}
.imsg::before,.imsg::after{content:"";position:absolute;bottom:0;height:24px}
.imsg-out::before{right:-8px;width:20px;background:#0A84FF;border-bottom-left-radius:16px 14px}
.imsg-out::after{right:-26px;width:26px;background:var(--ground);border-bottom-left-radius:10px}
.imsg-in::before{left:-8px;width:20px;background:#E9E9EB;border-bottom-right-radius:16px 14px}
.imsg-in::after{left:-26px;width:26px;background:var(--ground);border-bottom-right-radius:10px}
:root[data-theme="dark"] .imsg-in,:root[data-theme="dark"] .imsg-in::before{background:#3B3B3D;color:#fff}
.imsg-note{font:500 14px/18px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;color:#8E8E93}
.imsg-dots{display:flex;gap:5px;align-items:center;height:27px}
.imsg-dots i{width:9px;height:9px;border-radius:50%;background:#8E8E93;animation:imsg-dot 1.1s infinite ease-in-out}
.imsg-dots i:nth-child(2){animation-delay:.14s}
.imsg-dots i:nth-child(3){animation-delay:.28s}
@keyframes imsg-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* Replays: one visit a row, the person on the left and what they did beside it, the player opening
   under the row it belongs to. Four tracks so the head row and every row line up. */
.reps>li{padding:0}
.reps>li+li{border-top:1px solid var(--hair)}
/* Every row is its own grid, so the tracks are fixed rather than sized to each row's own content:
   with auto columns the second column started in a different place on every line. */
.rep-headrow,.rep-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 8.5rem 16rem;align-items:center;gap:8px 20px;padding:12px 16px}
.rep-headrow{font-size:12px;line-height:16px;font-weight:550;color:var(--t2);background:var(--soft);box-shadow:inset 0 -1px 0 var(--hair)}
.rep-who,.rep-did{display:grid;gap:2px;min-width:0}
.rep-who b{font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.rep-did>span:first-child{color:var(--t1)}
.rep-when{white-space:nowrap}
.rep-acts{display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap}
.rep-play{padding:0 16px 14px}
.rep-play[hidden]{display:none}
@media (max-width:1100px){
  .rep-headrow{display:none}
  .rep-head{grid-template-columns:minmax(0,1fr);gap:8px}
  .rep-acts{justify-content:flex-start}
}