/* glad UI on the canvas. Tokens are glad.abloh.dev's (site/styles.css), plus the app-only steps marked new. */

:root {
  --ink: #111110;
  --ground: #FAFAF8;
  --muted: #6B6B66;
  --body: #3B3B38;
  --hairline: #E2E1DB;
  --rule: #D6D5CF;
  --error: #8A2B1F;
  --hover: #EFEEE9;          /* the site's b-out hover */
  --ink-hover: #2E2E2B;      /* the site's b-in hover */
  --press: #E6E5DF;          /* new: one step past hover */
  --faint: #A9A8A2;          /* new: disabled marks, old answers */
  --p-you: var(--ink);       /* new: your share of who decided (rings, bars, dots), and the agent's; a theme adds --hue-0 to 7 */
  --p-agent: var(--ground);
  --hue-0: #F7F7F3; --hue-1: #C4C4BC; --hue-2: #8E8D87; --hue-3: #F7F7F3; --hue-4: #C4C4BC; --hue-5: #8E8D87; --hue-6: #F7F7F3; --hue-7: #C4C4BC;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --top-h: 56px;
  --rail-w: 208px;
  --drawer-w: 480px;
  --ctl-h: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--ground); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: var(--ink); }
a:hover { color: var(--muted); }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- frame */

.frame { position: relative; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); background: var(--ground); color: var(--ink); font-family: var(--serif); overflow: hidden; }
.frame > .top { grid-column: 1 / -1; }
.top {
  position: relative; z-index: 30;
  height: var(--top-h);
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  background: var(--ground);
}
.brand { display: flex; align-items: baseline; gap: var(--s3); padding: 0 var(--s5); min-width: 0; }
.wordmark { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.repo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.live { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s5); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }

.rail {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s5) var(--s3) var(--s5) var(--s3);
  border-right: 1px solid var(--hairline);
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  height: 36px; padding: 0 var(--s3);
  border: 0; border-left: 2px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-align: left;
  cursor: pointer; color: var(--muted); text-decoration: none;
}
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item:active { background: var(--press); }
.nav-item[aria-current="page"] { color: var(--ink); border-left-color: var(--ink); }
.nav-item:focus-visible { outline-offset: -1px; }
.count { font-variant-numeric: tabular-nums; font-size: 12px; }
.count.on { color: var(--ground); background: var(--ink); min-width: 20px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }

.legend { display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.legend-title { margin-bottom: var(--s1); }
.key { display: flex; align-items: center; gap: var(--s2); }
.key .mk { flex: 0 0 auto; }

.main { min-width: 0; padding: var(--s6) var(--s6) var(--s8); position: relative; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
h1.title { margin: var(--s1) 0 0; font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; }
h2.section { margin: 0; font-weight: 300; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- marks */

.mk { display: inline-block; width: 12px; height: 12px; position: relative; vertical-align: middle; flex: 0 0 12px; }
.mk-none { display: inline-block; flex: none; vertical-align: middle; }
.mk::before { content: ''; position: absolute; inset: 0; margin: auto; }
/* a person's mark is an svg (render.js: sc-mark) sitting where a 12px mark sits, at its own size */
svg.mk { flex: 0 0 auto; }
.mk-agent::before { width: 7px; height: 7px; border: 1px solid var(--ink); background: var(--ground); transform: rotate(45deg); box-sizing: border-box; }
.mk-open::before { width: 8px; height: 1px; background: var(--faint); }
.mk-clash::before { content: '×'; font-family: var(--mono); font-size: 13px; line-height: 12px; text-align: center; width: 12px; height: 12px; }
.mk-check::before { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed var(--ink); }
.mk-two::before { content: 'a/b'; font-family: var(--mono); font-size: 8px; line-height: 12px; letter-spacing: 0; text-align: center; width: 12px; height: 12px; }
.dim .mk-agent::before { border-color: var(--faint); }

/* a person's mark (marks.js, drawn by render.js's sc-mark): --mk-tint is their colour, the theme's --hue-N, and
   --mk-fill, --mk-line and --mk-face paint the parts; each theme sets its own (themes.css, part 3) */
.mark { display: block; flex: 0 0 auto; overflow: visible;
  --mk-tint: var(--ink); --mk-fill: var(--surface); --mk-line: var(--ink); --mk-face: var(--ink);
  --mk-agent: var(--ink); --mk-tag: var(--mk-agent); --mk-tag-edge: var(--ground); }
.mark.hue-0 { --mk-tint: var(--hue-0); } .mark.hue-1 { --mk-tint: var(--hue-1); } .mark.hue-2 { --mk-tint: var(--hue-2); } .mark.hue-3 { --mk-tint: var(--hue-3); }
.mark.hue-4 { --mk-tint: var(--hue-4); } .mark.hue-5 { --mk-tint: var(--hue-5); } .mark.hue-6 { --mk-tint: var(--hue-6); } .mark.hue-7 { --mk-tint: var(--hue-7); }
.mark .mb { fill: var(--mk-fill); stroke: var(--mk-line); stroke-width: 1.3; stroke-linejoin: round; }
.mark .ml { fill: none; stroke: var(--mk-line); stroke-width: 1.5; stroke-linecap: round; }
.mark .mf { fill: var(--mk-face); }
.mark .ms { fill: none; stroke: var(--mk-face); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mark .mg { fill: var(--mk-tag); stroke: var(--mk-tag-edge); stroke-width: 1.4; stroke-linejoin: round; }
.mark.role-you { --mk-tint: var(--p-you); }
.mark.compact .mb { stroke-width: 2.2; }
.mark.role-agent .mb { stroke-dasharray: 2.4 1.6; }
.mark.compact.role-agent .mb { stroke-dasharray: 3.2 2.2; }

/* a side's colour, for its share in a split, a ring or a dot (people.js: tint) */
.pc-you { --pc: var(--p-you); } .pc-agent { --pc: var(--p-agent); }
.pc-0 { --pc: var(--hue-0); } .pc-1 { --pc: var(--hue-1); } .pc-2 { --pc: var(--hue-2); } .pc-3 { --pc: var(--hue-3); }
.pc-4 { --pc: var(--hue-4); } .pc-5 { --pc: var(--hue-5); } .pc-6 { --pc: var(--hue-6); } .pc-7 { --pc: var(--hue-7); }
.split2 .bars .b { background: var(--pc); }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--ctl-h); padding: 0 var(--s4);
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; white-space: nowrap;
  cursor: pointer; position: relative; overflow: hidden;
}
.btn:hover { background: var(--hover); }
.btn:active { background: var(--press); }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.primary:hover { background: var(--ink-hover); }
.btn.primary:active { background: var(--body); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.ghost:active { background: var(--press); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; background: transparent; }
.btn.primary:disabled { background: var(--ink); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: currentColor; animation: busy 0.9s linear infinite;
}
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.btn.done { border-color: var(--ink); }

.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button {
  height: calc(var(--ctl-h) - 2px); min-width: 44px; padding: 0 var(--s3);
  border: 0; border-right: 1px solid var(--ink); background: transparent;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--hover); }
.seg button:active { background: var(--press); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.seg button:focus-visible { outline-offset: 2px; }
.seg.big button { min-width: 64px; font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.chip {
  height: 28px; min-width: 32px; padding: 0 var(--s2);
  border: 1px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); cursor: pointer;
}
.chip:hover { background: var(--hover); color: var(--ink); }
.chip:active { background: var(--press); }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.chip:disabled { opacity: .4; cursor: not-allowed; background: transparent; }

.select {
  height: var(--ctl-h); padding: 0 28px 0 var(--s3);
  border: 1px solid var(--ink); border-radius: 0; background: transparent;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink);
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.select:hover { background-color: var(--hover); }

.check { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; cursor: pointer; }
.check input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--ink); display: grid; place-content: center; cursor: pointer; }
.check input::before { content: ''; width: 8px; height: 8px; background: var(--ink); transform: scale(0); }
.check input:checked::before { transform: scale(1); }
.check:hover input { background: var(--hover); }
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; border: 1px solid transparent; }
.tag.solid { background: var(--ink); color: var(--ground); }
.tag.line { border-color: var(--rule); }
.tag.dash { border: 1px dashed var(--ink); color: var(--ink); }
.tag.ink { color: var(--ink); }

/* ---------------------------------------------------------------- search */

.search { position: relative; width: min(420px, 100%); justify-self: center; }
.search label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 36px; padding: 0 44px 0 56px;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  font-family: var(--mono); font-size: 13px; color: var(--ink); text-overflow: ellipsis;
}
.search input:hover { border-bottom-color: var(--muted); }
.search input:focus { outline: none; border-bottom-color: var(--ink); }
.search input:focus-visible { outline: none; }
.search input::placeholder { color: var(--faint); }
.kbd { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--rule); padding: 1px 5px; }
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  max-height: min(480px, 70vh); overflow: auto;
  background: var(--ground); border: 1px solid var(--ink);
  box-shadow: 0 12px 32px rgba(17, 17, 16, .08);
}
.res-group { padding: var(--s2) 0; border-bottom: 1px solid var(--hairline); }
.res-group:last-child { border-bottom: 0; }
.res-group .label { padding: var(--s1) var(--s4); display: block; font-size: 11px; }
.res {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s2); align-items: baseline;
  width: 100%; padding: var(--s2) var(--s4); border: 0; background: transparent; text-align: left; cursor: pointer;
}
.res:hover, .res[aria-selected="true"] { background: var(--hover); }
.res .rid { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.res .rt { font-size: 15px; line-height: 1.35; }
.res .ra { grid-column: 2; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.res mark { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.res-empty { padding: var(--s4); font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- graph toolbar */

.toolbar { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.tool { display: flex; align-items: center; gap: var(--s3); }
.tool > .label { font-size: 11px; }
.scrub { display: flex; align-items: center; gap: var(--s2); }
.tool.push { margin-left: auto; }

/* ---------------------------------------------------------------- 2D board */

.board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); align-items: start; }
.board-col { min-width: 0; }
.board-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.board-links path { fill: none; stroke: var(--ink); stroke-width: 1; }
.board-links path.faint { stroke: var(--rule); }
.board-links path.relies { stroke-dasharray: 3 3; }
.board-links circle { fill: var(--ink); }

.thing { margin-bottom: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.thing.dim-all { border-top-color: var(--rule); }
.thing-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.thing-name {
  justify-self: start; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.thing-name:hover { text-decoration-color: var(--ink); }
.thing-meta { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); display: flex; gap: var(--s3); flex-wrap: wrap; }
.ratio { display: flex; height: 6px; width: 72px; border: 1px solid var(--ink); align-self: center; }
.ratio span { display: block; height: 100%; }
.ratio .r-you { background: var(--ink); }
.ratio .r-agent { background: var(--ground); }

.subject { margin-top: var(--s3); }
.subject-name { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); padding: var(--s2) 0 var(--s1); }
.subject-name::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s2); row-gap: 2px;
  width: 100%; padding: var(--s2) var(--s2) var(--s2) var(--s2);
  border: 0; border-left: 2px solid transparent; background: transparent;
  text-align: left; cursor: pointer; position: relative;
}
.row:hover { background: var(--hover); }
.row:active { background: var(--press); }
.row:focus-visible { outline-offset: -1px; }
.row[aria-current="true"] { border-left-color: var(--ink); background: var(--hover); }
.row .mk { margin-top: 5px; }
.row .qid { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
.row .qt { font-size: 15px; line-height: 1.35; color: var(--body); }
.row .ans { grid-column: 2; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.row .at { font-size: 16px; line-height: 1.35; color: var(--ink); }
.row .was { font-size: 14px; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.row .tags { grid-column: 2; display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: 2px; }
.row.dim .qt, .row.dim .at, .row.dim .qid { color: var(--muted); }
.row.dim .tags .tag.solid { background: var(--muted); }
.row.sub { padding-left: calc(var(--s2) + 20px); }
.row .at.none { color: var(--muted); }
.row { text-decoration: none; color: inherit; }
.row.sub .qt { font-size: 14px; }
.row.sub .at { font-size: 15px; }
.row.hot .at { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.row.enter { animation: enter 360ms cubic-bezier(.3,.6,.2,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.thing-empty { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: var(--s2); }

/* ---------------------------------------------------------------- 3D */

.stage {
  position: relative; height: calc(100vh - var(--top-h) - 190px); min-height: 460px;
  border: 1px solid var(--hairline); background: var(--ground); overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.stage-labels { position: absolute; inset: 0; pointer-events: none; }
.t-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink);
  background: rgba(250, 250, 248, .86); padding: 2px 6px; white-space: nowrap; pointer-events: auto; cursor: pointer;
  border: 1px solid transparent;
}
.t-label:hover { border-color: var(--ink); }
.t-label.sub { color: var(--muted); font-size: 10px; pointer-events: none; background: transparent; }
.tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 320px;
  background: var(--ground); border: 1px solid var(--ink); padding: var(--s3);
  box-shadow: 0 8px 24px rgba(17,17,16,.08);
  transform: translate(12px, 12px);
}
.tip .qid { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tip .qt { font-size: 14px; line-height: 1.35; color: var(--body); margin: 2px 0 var(--s2); }
.tip .at { font-size: 16px; line-height: 1.3; }
.tip .who { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.stage-corner { position: absolute; left: var(--s4); bottom: var(--s4); display: flex; gap: var(--s2); z-index: 3; }
.stage-corner .btn { background: rgba(250,250,248,.9); }
.stage-hint { position: absolute; right: var(--s4); bottom: var(--s4); font-family: var(--mono); font-size: 11px; color: var(--muted); z-index: 3; }
.stage-state { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s4); justify-items: center; text-align: center; z-index: 4; background: var(--ground); }
.stage-state p { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.skeleton-orb { width: 180px; height: 110px; position: relative; }
.skeleton-orb span { position: absolute; bottom: 0; width: 44px; background: var(--hover); animation: shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- just now */

.moment-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 880px; }
.moment-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.quote { margin: 0; font-weight: 300; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch; text-wrap: balance; }
.quote::before { content: '“'; }
.quote::after { content: '”'; }
.reply { margin: 0; max-width: 72ch; font-size: 16px; line-height: 1.55; color: var(--body); }
.feed { display: grid; max-width: 880px; border-top: 1px solid var(--ink); }
.fx {
  display: grid; grid-template-columns: 120px 12px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline;
  width: 100%; padding: var(--s4) var(--s2); border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; cursor: pointer;
}
.fx:hover { background: var(--hover); }
.fx:active { background: var(--press); }
.fx:focus-visible { outline-offset: -1px; }
.fx .kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.fx .mk { align-self: center; }
.fx .main { font-size: 17px; line-height: 1.4; color: var(--ink); }
.fx .main .q { color: var(--body); }
.fx .main s { color: var(--muted); text-decoration-thickness: 1px; }
.fx .sub { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: var(--s1); line-height: 1.5; }
.fx .side { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.fx.enter { animation: enter 320ms cubic-bezier(.3,.6,.2,1) both; }
.fx.skel { cursor: default; }
.fx.skel:hover { background: transparent; }
.bar { display: block; height: 12px; background: var(--hover); animation: shimmer 1.2s ease-in-out infinite; }
.feed-foot { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.empty { padding: var(--s6) 0; display: grid; gap: var(--s3); justify-items: start; }
.empty p { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.empty .big { font-family: var(--serif); font-weight: 300; font-size: 26px; color: var(--ink); }

/* ---------------------------------------------------------------- inbox, team, insights */

.list { display: grid; max-width: 960px; border-top: 1px solid var(--ink); }
.item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--s4); align-items: start; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--hairline); }
.item.read { opacity: .55; }
.item .kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); padding-top: 4px; }
.item .body { min-width: 0; }
.item .ttl { font-size: 17px; line-height: 1.4; }
.item .det { margin-top: var(--s1); font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.55; }
.item .acts { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.linkish { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); }
.linkish:hover { text-decoration-color: var(--ink); }
.linkish:active { color: var(--muted); }
.linkish.mono { font-family: var(--mono); font-size: 12px; }

.clash-card { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: var(--s4); align-items: stretch; padding: var(--s5) 0; border-top: 1px solid var(--ink); max-width: 960px; }
.side-card { padding: var(--s4); border: 1px solid var(--hairline); display: grid; gap: var(--s2); align-content: start; }
.side-card .who { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.side-card .at { font-size: 24px; font-weight: 300; line-height: 1.2; }
.side-card blockquote { margin: 0; font-style: italic; color: var(--body); font-size: 15px; }
.vs { display: grid; place-items: center; font-family: var(--mono); font-size: 20px; }
.clash-q { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; flex-wrap: wrap; }
.clash-q .qt { font-size: 20px; font-weight: 300; }
.clash-acts { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; }

.table { width: 100%; max-width: 960px; border-collapse: collapse; }
.table th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); padding: 0 var(--s2) var(--s2); border-bottom: 1px solid var(--ink); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td { padding: 0 var(--s2); height: 48px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; }
.table td.name { font-family: var(--serif); font-size: 16px; }
.table tr.open-row td { border-bottom: 0; }
.expander { display: inline-flex; align-items: center; gap: var(--s2); padding: 0; border: 0; background: transparent; cursor: pointer; font-family: var(--mono); font-size: 12px; text-align: left; }
.expander::before { content: '+'; width: 12px; display: inline-block; }
.expander[aria-expanded="true"]::before { content: '−'; }
.expander:hover { color: var(--muted); }
.branch-rules td { padding: 0 var(--s2) var(--s4); height: auto; }
.mini { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.mini .row { padding-left: var(--s2); }

.tabs-line { display: flex; gap: var(--s5); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s5); flex-wrap: wrap; }
.tab {
  height: 40px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab:active { color: var(--body); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.unstable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) 32px; gap: var(--s3) var(--s4); align-items: center; width: 100%; padding: var(--s3) var(--s2); border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; cursor: pointer; }
.unstable:hover { background: var(--hover); }
.unstable:active { background: var(--press); }
.unstable .qid { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.unstable .qt { font-size: 16px; line-height: 1.35; }
.unstable .path { font-family: var(--mono); font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.trail { display: flex; align-items: center; gap: 0; }
.trail .mk { flex: 0 0 12px; }
.trail .seg-line { flex: 1; height: 1px; background: var(--rule); min-width: 12px; }
.unstable .n { font-family: var(--mono); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); max-width: 960px; }
.split .name { font-size: 20px; font-weight: 300; }
.split .bars { display: flex; height: 20px; border: 1px solid var(--ink); }
.split .bars span { height: 100%; }
.split .bars .b-you { background: var(--ink); }
.split .bars .b-agent { background: var(--ground); border-left: 1px solid var(--ink); }
.split .nums { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.split .nums strong { color: var(--ink); font-weight: 500; }

.onboard { max-width: 70ch; }
.onboard p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0 0 var(--s4); }
.onboard .open-list { margin: var(--s5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.onboard .open-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); font-size: 16px; color: var(--body); }
.onboard .open-list .mono { font-size: 11px; color: var(--muted); margin-right: var(--s2); }

/* ---------------------------------------------------------------- drawer */

.scrim { position: absolute; inset: var(--top-h) 0 0 0; background: rgba(17, 17, 16, .06); z-index: 19; }
.drawer {
  position: absolute; top: var(--top-h); right: 0; bottom: 0; z-index: 20;
  width: min(var(--drawer-w), 100vw);
  background: var(--ground); border-left: 1px solid var(--ink);
  display: flex; flex-direction: column;
}

.d-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--hairline); min-height: 52px; }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; min-width: 0; }
.crumbs .qid { color: var(--ink); }
.d-body { flex: 1; overflow: auto; padding: var(--s5) var(--s5) var(--s6); display: grid; gap: var(--s6); align-content: start; }
.d-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.d-q { margin: 0; font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.d-sec { display: grid; gap: var(--s3); }
.d-sec > .label { display: flex; justify-content: space-between; align-items: baseline; }
.now-ans { font-size: 30px; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }
.who { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.box { border: 1px solid var(--ink); padding: var(--s4); display: grid; gap: var(--s2); }
.box.dash { border-style: dashed; }
.box .ttl { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.box p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.box .acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.readings { display: grid; gap: var(--s3); }
.reading { padding-left: var(--s3); border-left: 1px solid var(--rule); display: grid; gap: var(--s1); }
.reading .qt { font-size: 15px; line-height: 1.4; color: var(--body); }
.reading ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 15px; }
.reading li { display: flex; gap: var(--s2); align-items: baseline; }
.reading li .opt { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 14px; }
.reading li.chosen { color: var(--ink); }
.reading li.chosen .opt { color: var(--ink); }
.reading li:not(.chosen) { color: var(--muted); }
.reading .state { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.story { list-style: none; margin: 0; padding: 0; display: grid; }
.story li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s3); padding-bottom: var(--s5); }
.story li::before { content: ''; position: absolute; left: 7.5px; top: 20px; bottom: 0; width: 1px; background: var(--rule); }
.story li:last-child::before { display: none; }
.story li:last-child { padding-bottom: 0; }
.story .mk { margin-top: 5px; background: var(--ground); z-index: 1; }
.story .when { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: var(--s2); flex-wrap: wrap; }
.story .when b { color: var(--ink); font-weight: 400; }
.story .a { font-size: 18px; line-height: 1.35; margin: 2px 0; }
.story .a.old { color: var(--muted); }
.story .a.dead { text-decoration: line-through; text-decoration-thickness: 1px; }
.story .when span:empty { display: none; }
.story .when span:nth-of-type(3) { order: 2; }
.story .when span:nth-of-type(3)::before { content: '· '; }
.story .when span:nth-of-type(2) { order: 3; flex-basis: 100%; }
.story .words { margin: var(--s1) 0 0; font-style: italic; font-size: 15px; color: var(--body); line-height: 1.45; overflow-wrap: anywhere; }
.story .full { margin-top: var(--s2); padding: var(--s3); background: var(--hover); font-size: 14px; line-height: 1.5; color: var(--body); }
.story .full mark { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.story .full .reply-x { margin-top: var(--s2); font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.55; }
.story .event { font-family: var(--mono); font-size: 12px; color: var(--body); }

.refs { display: grid; border-top: 1px solid var(--hairline); }
.ref { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; width: 100%; padding: var(--s2) var(--s1); border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; cursor: pointer; }
.ref:hover { background: var(--hover); }
.ref:active { background: var(--press); }
.ref:focus-visible { outline-offset: -1px; }
.ref .qid { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ref .rt { font-size: 15px; line-height: 1.35; }
.ref .rs { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.ref.file { grid-template-columns: minmax(0, 1fr) auto; }
.ref.file .rt { font-family: var(--mono); font-size: 12px; }

.code { border: 1px solid var(--hairline); overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.65; }
.code .ln { display: grid; grid-template-columns: 36px 124px minmax(0, 1fr); min-width: max-content; }
.code .n { color: var(--faint); text-align: right; padding-right: var(--s2); user-select: none; }
.code .g { border-left: 2px solid transparent; padding-left: var(--s1); }
.code .g a { display: inline-block; padding: 0 5px; text-decoration: none; border: 0; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 10px; cursor: pointer; line-height: 16px; }
.code .g a:hover { background: var(--ink-hover); }
.code .ln.inr .g { border-left-color: var(--ink); }
.code .ln.hi { background: var(--hover); }
.code .ln.chg .n { color: var(--ink); }
/* a live graph's lines: a change's before and after, marked by their rule, and the lines cut or skipped */
.code .ln.del { background: color-mix(in srgb, var(--clash) 7%, transparent); }
.code .ln.del .g { border-left-color: var(--clash); }
.code .ln.del .n { color: var(--clash); }
.code .ln.del pre { color: var(--muted); }
.code .ln.add .g { border-left-color: var(--ink); }
/* lines a change put in against a decision held there, among the lines that carry it out */
.code .ln.goes { background: color-mix(in srgb, var(--clash) 7%, transparent); }
.code .ln.goes .g { border-left-color: var(--clash); }
.code .ln.goes .n { color: var(--clash); }
.code .ln.more .n, .code .ln.more pre, .code .ln.gap .n { color: var(--faint); }
.code pre { margin: 0; white-space: pre; padding-right: var(--s4); tab-size: 4; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: absolute; left: 50%; bottom: var(--s5); z-index: 50; transform: translate(-50%, 8px);
  background: var(--ink); color: var(--ground); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- canvas additions */

.timeline { display: flex; align-items: center; gap: 0; }
.tick { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; background: transparent; cursor: pointer; padding: 0; position: relative; }
.tick:hover { background: var(--hover); }
.tick:active { background: var(--press); }
.tick.on { border-color: var(--ink); }
.tick.old .mk { opacity: .55; }
.tick-line { width: 10px; height: 1px; background: var(--rule); }
.tick-gap { width: 26px; height: 1px; background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 5px); }
.now-label { font-family: var(--mono); font-size: 12px; color: var(--muted); max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-label b { color: var(--ink); font-weight: 400; }
.mono-main { font-family: var(--mono); font-size: 14px; }
.stage { height: auto; min-height: 0; }
.pane { position: absolute; right: var(--s4); top: var(--s4); width: 340px; background: rgba(250,250,248,.94); border: 1px solid var(--ink); padding: var(--s4); display: grid; gap: var(--s2); z-index: 4; }
.pane .qt { font-size: 18px; font-weight: 300; line-height: 1.25; }
.pane .at { font-size: 22px; font-weight: 300; line-height: 1.2; }
.pane .acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.stage-legend { position: absolute; left: var(--s4); top: var(--s4); z-index: 3; display: grid; gap: 6px; padding: var(--s3); background: rgba(250,250,248,.9); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.stage-legend .key { gap: var(--s2); }
.glyph3 { width: 14px; height: 14px; display: inline-block; flex: 0 0 14px; }
a.btn { text-decoration: none; }
a.tab { display: inline-flex; align-items: center; text-decoration: none; }
.seg a { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--ctl-h) - 2px); min-width: 64px; padding: 0 var(--s3); border-right: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-decoration: none; color: var(--ink); }
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--hover); }
.seg a.on { background: var(--ink); color: var(--ground); }
.drawer-host { position: absolute; inset: 0; }
.caret { display: inline-block; width: 1px; height: 16px; background: var(--ink); vertical-align: middle; margin-left: 1px; animation: pulse 1s steps(1) infinite; }
.search.open input { border-bottom-color: var(--ink); }
.story-wide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.story-wide > li { padding: var(--s5) var(--s5) var(--s5) 0; border-right: 1px solid var(--hairline); display: grid; gap: var(--s2); align-content: start; }
.story-wide > li + li { padding-left: var(--s5); }
.story-wide > li:last-child { border-right: 0; }
.story-wide .a { font-size: 28px; font-weight: 300; line-height: 1.15; }
.story-wide .a.old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.story-wide .prompt { font-size: 17px; line-height: 1.5; color: var(--body); }
.story-wide .prompt mark { background: var(--ink); color: var(--ground); padding: 0 2px; }
.story-wide .reply-x { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6); align-items: start; }
.bigq { margin: 0; font-weight: 300; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; max-width: 24ch; }
.phone { width: 390px; }

/* ---------------------------------------------------------------- the app frame: graph home */

.app2 { position: relative; width: 1440px; height: 900px; overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--serif); }
.bar-top { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s5); border-bottom: 1px solid var(--hairline); background: var(--ground); z-index: 30; }
.bar-top .brand { padding: 0; }
.crumbs2 { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.crumb { height: 28px; padding: 0 var(--s2); border: 0; background: transparent; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; white-space: nowrap; }
.crumb:hover { background: var(--hover); color: var(--ink); }
.crumb:active { background: var(--press); }
.crumb.last { color: var(--ink); cursor: default; }
.crumb.last:hover { background: transparent; }
.crumb-sep { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.bar-top .search { width: 340px; flex: 0 0 340px; }
.overlays { display: flex; gap: 2px; }
.ov { height: 32px; padding: 0 var(--s3); border: 1px solid transparent; background: transparent; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov:hover { background: var(--hover); color: var(--ink); }
.ov:active { background: var(--press); }
.ov[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.ov .count.on { height: 16px; min-width: 18px; font-size: 11px; }
/* below 1024 px .nav-menu folds whatever tabs sit in .overlays behind a trigger button; at or above it the
   trigger stays hidden and .overlays sits in the row exactly as before, open or not */
.nav-menu { display: flex; align-items: center; }
.nav-menu-btn { display: none; }

.graph2 { position: absolute; left: 0; top: 56px; height: 780px; overflow: hidden; transition: width 320ms cubic-bezier(.3,.6,.2,1); }
/* the ring can grow past the viewport to keep its labels full size and non-overlapping; this is what scrolls to it.
   the top bar and the graph's own corner controls sit outside it (siblings of it, inside .graph2) so they never
   scroll; its own height (index.html's scrollH) ends exactly where the corner controls begin, never their own
   fixed band, so nothing scrolled can ever paint there - the structural guarantee the top bar already has for
   free from .graph2's own top offset, now matched at the bottom instead of relying on the ring never drawing
   that far down at any scroll position, which only the ring's own opening layout was ever checked for */
.graph-scroll { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; }
.graph-scroll.grown { overflow: auto; }
.edges2 { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity 260ms; }
.edges2.moving { opacity: 0; transition: none; }
.edges2 path { fill: none; stroke-width: 1; }
.e-tree { stroke: #C9C8C2; }
.e-tree.faint { stroke: var(--hairline); }
.e-path { stroke: var(--rule); stroke-dasharray: 2 4; }
.e-link { stroke: #B9B8B2; stroke-dasharray: 4 4; }
.e-link.on { stroke: var(--ink); }
.e-story { stroke: var(--ink); stroke-width: 1.5; }
.e-story.faint { stroke: var(--rule); stroke-width: 1; }

.gn { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink); font: inherit;
  transition: transform 560ms cubic-bezier(.3,.6,.2,1), opacity 420ms; z-index: 2; }
.gn.gone { pointer-events: none; }
.gn:focus-visible { outline: none; }
.gn .g { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 50%; transition: box-shadow 120ms; }
.gn:hover .g { box-shadow: 0 0 0 6px var(--hover); }
.gn:active .g { box-shadow: 0 0 0 6px var(--press); }
.gn:focus-visible .g { outline: 1px solid var(--ink); outline-offset: 6px; }
.g-root { width: 60px; height: 60px; border: 1px solid var(--ink); background: var(--ground); }
.g-root::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.gdonut { position: absolute; left: 0; top: 0; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--ink); box-sizing: border-box; }
.gdonut::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--ground); border: 1px solid var(--ink); }
.g-thing { width: 76px; height: 76px; background: transparent; }
.g-subject { width: 44px; height: 44px; border: 1px solid var(--ink); background: var(--ground); }
.g-subject::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid var(--ink); }
/* a decision's node is its person's mark, or their agent's */
.g-mark { line-height: 0; }
.g-open { width: 22px; height: 22px; border: 1px dashed var(--faint); background: var(--ground); }
.g.ghost { opacity: .35; border-style: dashed; }
.g.small { width: 20px; height: 20px; }
.gcheck { position: absolute; left: 0; top: 0; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed var(--ink); animation: spin 8s linear infinite; }
.gn-thing .gcheck { width: 100px; height: 100px; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.gx { position: absolute; left: 14px; top: -34px; font-family: var(--mono); font-size: 18px; line-height: 1; }
.gn-thing .gx { left: 52px; top: -10px; }
.gn-subject .gx { left: 30px; top: -10px; }
/* a label right of its node starts where the clash mark sits, so there the mark goes above the node */
.gn-subject.lab-east .gx { left: 16px; top: -40px; }
.gn-thing.lab-east:not(.gn-area) .gx { left: 30px; top: -62px; }
.gtag { position: absolute; left: 0; top: -44px; transform: translateX(-50%); background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; padding: 2px 6px; white-space: nowrap; }
.gn-thing .gtag { top: -62px; }
.gn-subject .gtag { top: -46px; }
.gtwo { position: absolute; left: -30px; top: 8px; font-family: var(--mono); font-size: 9px; color: var(--ink); border: 1px solid var(--ink); padding: 0 3px; background: var(--ground); }
.gunst { position: absolute; left: 14px; top: 6px; min-width: 18px; height: 18px; display: grid; place-items: center; background: var(--ground); border: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; }
.gl { position: absolute; left: 0; top: 24px; transform: translateX(-50%); width: 200px; display: grid; gap: 2px; text-align: center; pointer-events: none; }
.gl-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.gl-s { font-family: var(--serif); font-size: 16px; line-height: 1.25; color: var(--ink); }
.gn-thing .gl { top: 50px; width: 220px; }
.gn-thing .gl-t, .gn-root .gl-t { order: 0; font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: -0.01em; color: var(--ink); }
.gn-thing .gl-s, .gn-root .gl-s, .gn-subject .gl-s { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gn-root .gl { top: 40px; }
.gn-subject .gl { top: 32px; }
.gn-subject .gl-t { font-family: var(--serif); font-size: 19px; font-weight: 300; color: var(--ink); letter-spacing: 0; }
.gn-reading .gl { width: 210px; }
.gn-reading .gl-t { font-family: var(--serif); font-size: 13px; letter-spacing: 0; color: var(--body); }
.gn-reading .gl-s { font-size: 14px; }
.gn-story .gl-t { font-family: var(--serif); font-size: 16px; color: var(--ink); letter-spacing: 0; }
.gn-story .gl-s { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gn-story { cursor: default; }
.lab-none .gl, .lab-none .gtag, .lab-none .gx, .lab-none .gtwo, .lab-none .gcheck { display: none; }
/* a name on the path down the left edge is a box as wide as its text and a hair for its last letter, so the empty room beside it never reads as a
   ring's name under it (ABL-120) */
.lab-right .gl { left: 34px; top: -12px; transform: none; text-align: left; justify-items: start; width: 150px; }
.lab-right .gl-t { font-size: 26px; font-family: var(--serif); letter-spacing: 0; color: var(--ink); padding-right: .1em; }
.gn-thing.lab-right .gl { left: 50px; top: -16px; }
.gn-thing.lab-right .gl-t, .gn-root.lab-right .gl-t { font-size: 30px; }
.lab-right .gl-s { display: none; }
.lab-right .gtag, .lab-right .gcheck, .lab-right .gtwo { display: none; }
.lab-center .gl { top: 30px; width: 360px; }
.lab-center .gl-t { font-size: 12px; }
.lab-center .gl-s { font-size: 26px; font-weight: 300; line-height: 1.15; }
.lab-center .gtag { top: -40px; }
.gn.dim .g, .gn.dim .gdonut { opacity: .3; }
/* a mark is light paint where the old glyphs were ink, so a dimmed one keeps more of itself to stay legible */
.gn.dim .g.g-mark { opacity: .55; }
.gn.dim .gl { opacity: .62; }
.gn.dim .gcheck { opacity: .3; }
.gn.focus .g-thing, .gn.focus .g-subject { box-shadow: 0 0 0 10px rgba(17,17,16,.05); }

.graph-corner { position: absolute; right: var(--s5); top: var(--s4); z-index: 5; display: flex; gap: var(--s2); }

.panel2 { position: absolute; right: 0; top: 56px; bottom: 0; width: 440px; background: var(--ground); border-left: 1px solid var(--ink); z-index: 26; display: flex; flex-direction: column; animation: slidein 260ms cubic-bezier(.3,.6,.2,1); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel2 .d-body { gap: var(--s5); }
.p-title { margin: 0; font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.p-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.p-list { display: grid; border-top: 1px solid var(--hairline); }
.p-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; width: 100%; padding: var(--s3) var(--s1); border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.p-row:hover { background: var(--hover); }
.p-row:active { background: var(--press); }
.p-row:focus-visible { outline-offset: -1px; }
.p-row .mk { align-self: center; }
.p-row .t { font-size: 16px; line-height: 1.35; }
.p-row .s { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.p-row .r { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.p-row .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 2px; }
.p-row s { color: var(--muted); text-decoration-thickness: 1px; }
.p-row.read { opacity: .55; }
.p-row.enter { animation: enter 320ms cubic-bezier(.3,.6,.2,1) both; }
.p-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tabs-mini { display: flex; gap: var(--s4); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.tabs-mini .tab { height: 34px; font-size: 12px; }
.p-clash { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: var(--s2); align-items: stretch; }
.p-clash .side-card { padding: var(--s3); }
.p-clash .side-card .at { font-size: 20px; }
.p-clash .side-card .who { flex-wrap: wrap; white-space: normal; }
.p-clash .vs { font-size: 16px; }
.split2 .bars { display: flex; height: 14px; border: 1px solid var(--ink); }
.split2 .bars span { height: 100%; }
.split2 .bars span + span { border-left: 1px solid var(--ground); }
.split2 .bars span + .b-agent { border-left-color: var(--ink); }
.split-nums { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.split-n { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.split2 { display: grid; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); }
.split2 .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.split2 .name { font-size: 18px; font-weight: 300; }
.p-copy .code { max-height: 520px; }
.stage2 { position: absolute; inset: 0; }
.stage2 canvas { display: block; width: 100%; height: 100%; }
.tip2 { position: absolute; z-index: 6; pointer-events: none; max-width: 300px; background: var(--ground); border: 1px solid var(--ink); padding: var(--s3); box-shadow: 0 8px 24px rgba(17,17,16,.08); }
.tip2 .t1 { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tip2 .t2 { font-size: 17px; line-height: 1.3; margin-top: 2px; }

/* ---------------------------------------------------------------- at scale: levels, dots, single-line text */

.zoomwrap { position: relative; }
.zin-a { animation: zinA 460ms cubic-bezier(.3,.6,.2,1) both; }
.zin-b { animation: zinB 460ms cubic-bezier(.3,.6,.2,1) both; }
.zout-a { animation: zoutA 460ms cubic-bezier(.3,.6,.2,1) both; }
.zout-b { animation: zoutB 460ms cubic-bezier(.3,.6,.2,1) both; }
@keyframes zinA { from { transform: scale(.42); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zinB { from { transform: scale(.42); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zoutA { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zoutB { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.gn { transition: none; }
/* a live graph's write: every node already drawn glides to where it now stands, its line with it, and what is new fades in */
.graph2.gliding .gn { transition: transform 560ms cubic-bezier(.3,.6,.2,1), opacity 420ms; }
.graph2.gliding .edges2 path { transition: d 560ms cubic-bezier(.3,.6,.2,1); }
.gn.arrived { animation: arrive 560ms cubic-bezier(.3,.6,.2,1) both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
/* and a clash lights up the same way */
.graph2.gliding .gx { animation: arrive 560ms cubic-bezier(.3,.6,.2,1) both; }
/* a row a live write adds to a list opens up where it lands, so the rows under it slide down rather than jump */
.p-row.arrived, .p-item.arrived { overflow: hidden; animation: rowIn 420ms cubic-bezier(.3,.6,.2,1) both; }
@keyframes rowIn { from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } to { max-height: 240px; opacity: 1; } }
.dot { stroke: var(--ink); stroke-width: 1; }
.dot.d-p { fill: var(--pc); }
.dot.d-agent { fill: var(--p-agent); }
.dot.d-open { fill: var(--ground); stroke: var(--faint); stroke-dasharray: 2 2; }
.dot.dim { opacity: .28; }
.dot.hot { stroke-width: 2; }
.g-thing.big, .gn-area .gdonut { width: 84px; height: 84px; }
.gn-area .gl { top: 54px; }
.gl { width: 220px; }
.gl-t, .gl-s { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-q .gl { width: 190px; }
.lab-center .gl { width: 560px; }
.lab-center .gl-s { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lab-right .gl { width: 132px; }
.gn-story .gl, .gn-reading .gl { width: 210px; }

.panel2 { width: var(--pw, 480px); border-left: 1px solid var(--ink); }
.panel2 .d-head, .panel2 .d-foot { padding-left: 24px; padding-right: 24px; }
.panel2 .d-body { padding: 24px 24px 32px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.panel2 .d-q { text-wrap: balance; }
.p-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
.p-row .t, .p-row .s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row .r { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.p-row > span:nth-child(2) { min-width: 0; }
.p-item { display: grid; gap: 6px; padding: 12px 4px; border-bottom: 1px solid var(--hairline); min-width: 0; }
.p-item.read { opacity: .55; }
.p-item .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
.p-item .t { font-size: 16px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.p-item .t:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.p-item .s { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story .a, .now-ans { overflow-wrap: anywhere; }
.reading .qt, .reading li span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.reading li { min-width: 0; }
.stat-line { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.clash-list .p-row.on { background: var(--hover); }
.gl .gtag { position: static; transform: none; justify-self: center; margin-top: 4px; }
.lab-right .gl .gtag { display: none; }
.gn.focus .gl { width: 360px; }
.gn.tight .gl { width: 180px; }
.gn.tight .gl-t { font-size: 20px; }
.mk-group::before { width: 8px; height: 8px; border: 1px solid var(--ink); box-sizing: border-box; }
.lab-right .gl { width: 300px; }
.gn-thing.lab-right .gl, .gn-root.lab-right .gl { left: 62px; }
.gn-subject.lab-right .gl { left: 46px; }
.gn.tight .gl-s { font-size: 13px; }
.crumbs2 { overflow: hidden; }
.crumb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-top .search { flex: 0 1 340px; min-width: 220px; }
.bar-top { gap: var(--s4); }
.who { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code .g a { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.crumb.first, .crumb.last { flex-shrink: 0; }
.crumb.last { max-width: 320px; }
.crumb { min-width: 48px; }
.lab-right .gx { display: none; }
/* the panel's one column never grows past the panel; long one-line text truncates instead */
.panel2 .d-body { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; overflow-y: auto; }
.panel2 .d-body > *, .panel2 .d-sec, .panel2 .d-sec > * { min-width: 0; }
.stat-line { overflow: hidden; text-overflow: ellipsis; }
.split2 .top-line > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-clash > * { min-width: 0; }
.panel2 .d-body { grid-auto-rows: max-content; }
/* the panel scrolls without a scrollbar: no gutter, the right edge matches the left */
.panel2 { overflow: hidden; }
.panel2 .d-body { scrollbar-width: none; }
.panel2 .d-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body { overflow: hidden; }

/* the prompt stream */
.panel2 .d-head { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.stream { display: grid; border-top: 1px solid var(--hairline); }
.stream-row { align-items: start; grid-template-columns: 16px minmax(0, 1fr); padding: 12px 4px; }
.stream-row .mk { margin-top: 4px; }
.sr-body { display: grid; gap: 4px; min-width: 0; }
.sr-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text { font-size: 15px; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stream-row.newest { background: var(--hover); }
.pq { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pq u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.moment-meta.one { flex-wrap: nowrap; min-width: 0; }
.moment-meta.one .mk { flex: 0 0 12px; }
.moment-meta.one .mm-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn.tight .gl { width: 210px; }
.gn.tight .gl-s { font-size: 12px; }
.d-head .btn.back { margin-left: -16px; }
/* the prompt is always shown whole; its metadata is always one line */
.sr-text { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.sr-meta, .mm-text { font-size: 11px; }
.moment-meta.one { font-size: 11px; gap: 8px; }
.quote { overflow-wrap: anywhere; }
.now-label { max-width: none; flex: 1 1 auto; min-width: 0; }
/* the question in the centre: its own words, at most two lines, never over its neighbours */
.lab-center .gl { width: 255px; }
.lab-center .gl-t { font-family: var(--serif); font-size: 11px; letter-spacing: 0; color: var(--body); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
.crumb.last { max-width: 220px; }
.gn.focus.lab-center .gl, .gn.lab-center .gl { width: 255px; }
/* a live graph not live, said over the top of the graph so nothing moves: the stream dropped and the browser is trying
   it again, or the service that let it in is gone */
.live-off { position: absolute; top: var(--s4); left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--ground); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; pointer-events: auto; animation: arrive 320ms ease-out both; }
.live-off .live-ring { width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%; border: 1px solid currentColor; }
.live-off.shut { color: var(--ink); }
.live-off.under-judge { top: calc(var(--s4) + 40px); }
/* glad cannot read prompts now: one line over the page, centred on the graph, in the waiting colours */
.judge-off { position: absolute; top: calc(56px + var(--s4)); transform: translateX(-50%); z-index: 25; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 5px 14px; border: 1px solid var(--warn); border-radius: 14px; background: var(--warn-bg); font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: 0.04em; color: var(--warn); width: max-content; animation: arrive 320ms ease-out both; }
.judge-off .judge-ring { flex: 0 0 auto; width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%; background: currentColor; }
.judge-off .judge-for { flex: 0 0 auto; padding-left: var(--s2); border-left: 1px solid currentColor; opacity: 0.8; white-space: nowrap; }
.live-off.shut .live-ring { border-style: dashed; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); }
/* panel tabs: always one row, spread across the panel */
.tabs-mini { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.tabs-mini .tab { font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
.gn.tight .gl { width: var(--lw, 210px); }

/* labels beside the nodes down each side of a crowded ring */
.lab-east .gl { left: 38px; top: -16px; transform: none; text-align: left; }
.lab-west .gl { left: -38px; top: -16px; transform: translateX(-100%); text-align: right; }
.lab-east .gtag, .lab-west .gtag { justify-self: start; }
.lab-west .gtag { justify-self: end; }
.gn-area.lab-east .gl { left: 50px; } .gn-area.lab-west .gl { left: -50px; }

/* the filter lives in the top bar */
.top-select { height: 32px; font-size: 12px; flex: 0 0 auto; }

/* the filter: bottom right of the graph */
.graph-corner-bottom { position: absolute; right: var(--s5); bottom: var(--s4); z-index: 5; }
.graph-corner-bottom .select { background-color: rgba(250, 250, 248, 0.94); }
.gn-area .gx { left: -6px; top: -66px; }
.gn.tight .gl-s { font-size: 11px; letter-spacing: 0; }
/* panel tabs share the row equally */
.tabs-mini { gap: 0; justify-content: stretch; }
.tabs-mini .tab { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
.tabs-mini .tab { min-width: max-content; }

/* unstable questions: the count and the question; click for where it sits and each decision in turn */
.uq { border-bottom: 1px solid var(--hairline); }
.uq-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: var(--s3); align-items: baseline; width: 100%; padding: var(--s3) var(--s1); border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.uq-row:hover { background: var(--hover); }
.uq-row:active { background: var(--press); }
.uq-row:focus-visible { outline-offset: -1px; }
.uq-row[aria-expanded="true"] { background: var(--hover); }
.uq-n { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.uq-t { font-size: 16px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-sign { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; }
.uq-detail { display: grid; gap: var(--s3); padding: var(--s2) var(--s1) var(--s4) calc(28px + var(--s3) + var(--s1)); }
.uq-where { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.uq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); position: relative; }
.uq-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; align-items: baseline; }
.uq-steps li .mk { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
.uq-a { font-size: 16px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.uq-steps li.now .uq-a { color: var(--ink); }
.uq-m { grid-column: 2; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* clashes are shown, never settled here */
.st { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; padding: 1px 6px; white-space: nowrap; }
.st-open { background: var(--ink); color: var(--ground); }
.st-settled { border: 1px solid var(--rule); color: var(--muted); }
.clash-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.clash-head .stat-line { min-width: 0; }
.asked { min-width: 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
/* a session's id, or a command to copy, is selected whole by one click, ready to copy */
.sid { font-family: var(--mono); color: var(--ink); white-space: nowrap; user-select: all; -webkit-user-select: all; cursor: text; }
.pr-link { display: block; width: fit-content; max-width: calc(100% - 16px - var(--s2) - var(--s1) * 2); margin: calc(var(--s2) - var(--s3)) 0 0 calc(var(--s1) + 16px + var(--s2)); padding-bottom: var(--s3); font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-link:hover { color: var(--accent); }
.pull-link { font-family: var(--mono); font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pull-link:hover { color: var(--accent); }
.story .pull-link { display: inline-block; margin-top: 2px; }
.asked .slack { white-space: nowrap; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.asked .slack:hover { color: var(--muted); }
.box.settled { border-color: var(--rule); }
.box.settled .ttl { color: var(--muted); }
.p-clash .side-card .p-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row.is-settled .mk-clash { opacity: .35; } .p-row.is-settled .t { color: var(--body); }

/* inbox views: a grid of tiles, each its count and its name */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--hairline); }
.tile { display: grid; gap: 2px; justify-items: start; align-content: start; min-width: 0; padding: 10px 10px 9px; border: 0; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: transparent; cursor: pointer; text-align: left; color: var(--muted); }
.tile:hover { background: var(--hover); color: var(--ink); }
.tile:active { background: var(--press); }
.tile:focus-visible { outline-offset: -2px; }
.tile[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.tile-n { font-family: var(--mono); font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.view-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.p-item .kind-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.p-item span.t { cursor: default; }
.p-item span.t:hover { text-decoration: none; }
.p-item .iq { font-style: italic; font-size: 14px; line-height: 1.45; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-item .ia { font-size: 14px; line-height: 1.45; color: var(--ink); border-left: 2px solid var(--ink); padding-left: 8px; }
.tile { padding: 10px 6px 9px 8px; } .tile-l { letter-spacing: 0; }
.gn.tight .gl-s { white-space: pre-line; line-height: 1.35; }
.p-item .s.wrap { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.5; }
.gn.tight.lab-below .gl-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; text-wrap: balance; }
/* a name beside its node, on the path down the left, squeezed beside that path or on a lineage goes on two lines
   rather than being cut where the type is too wide for one */
.gn.lab-west .gl-t, .gn.lab-east .gl-t, .gn.lab-right .gl-t, .gn.narrow.lab-below .gl-t, .gn-story .gl-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; text-wrap: balance; }
.p-item .iq { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.gn.narrow .gl { width: var(--lw); }
.p-row.qrow .t { white-space: normal; }
.p-row.qrow .mk { align-self: start; margin-top: 7px; }
.opt-list { display: grid; }
.opt-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; padding: 8px var(--s1); border-bottom: 1px solid var(--hairline); }
.opt-row .mk { align-self: start; margin-top: 7px; }
.opt-row .t { font-size: 16px; line-height: 1.35; color: var(--muted); }
.opt-row.picked .t { color: var(--ink); }
.opt-row .r { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.state-line { margin-top: 10px; }
.label + .state-line { margin-top: 0; }
.person-ans .pa { font-size: 18px; line-height: 1.35; margin: 4px 0 0; }
.p-row .against { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; margin-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink); white-space: normal; }
.p-row .against .mk { margin-top: 4px; }
.hl-pick { position: relative; }
.hl-btn { display: block; text-align: left; min-width: 212px; }
.hl-btn[aria-expanded="true"] { background-image: linear-gradient(135deg, transparent 50%, var(--ink) 50%), linear-gradient(45deg, var(--ink) 50%, transparent 50%); }
.hl-menu { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; min-width: 100%; display: grid; padding: 4px 0; background: var(--ground); border: 1px solid var(--ink); box-shadow: 0 -6px 20px rgba(17, 17, 16, 0.08); }
.hl-head { padding: 8px 12px 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); border-top: 1px solid var(--hairline); margin-top: 4px; min-height: 0; }
.hl-head:empty { padding: 0; }
.hl-opt { display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 7px 12px; border: 0; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; }
.hl-opt:hover, .hl-opt:focus-visible { background: var(--hover); }
.hl-opt[aria-selected="true"] { font-weight: 500; }
.hl-tick { text-align: right; }
.graph-corner-bottom { display: flex; align-items: flex-end; gap: var(--s2); }
.theme-btn { min-width: 0; }
.hl-menu > .hl-head:first-child { border-top: 0; margin-top: 0; }
/* why an agent decided: the person's prompt, then the agent's answer to it */
.why { display: grid; gap: 8px; }
.why-ask { border-left: 2px solid var(--ink); padding: 2px 0 2px 12px; }
.why-who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink); }
.why-words { margin: 4px 0 0; font-style: italic; font-size: 14px; line-height: 1.45; color: var(--ink); }
.why-then { display: flex; gap: 8px; align-items: baseline; padding-left: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.why-then b { font-family: var(--serif); font-weight: 400; font-size: 14px; color: var(--ink); }
.why-arrow { font-size: 13px; color: var(--ink); }
/* the panel's lists read smaller so they wrap less */
.d-body .p-row .t, .opt-row .t { font-size: 14px; }
.d-body .story .words { font-size: 14px; }
.story .a { font-size: 17px; }
.person-ans .pa { font-size: 15px; }
.now-ans { font-size: 26px; }
.who.shipped { white-space: nowrap; gap: 8px; } .who.shipped .k { letter-spacing: 0.04em; } .who.shipped .v { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.rel-line { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--body); } .rel-line .st { margin-right: 6px; }
/* the four newer marks: deferred, not built, unowned code, incompatible - together, left of the glyph */
.gmk { position: absolute; left: -14px; top: -34px; transform: translateX(-100%); display: flex; gap: 5px; align-items: center; font-family: var(--mono); line-height: 1; color: var(--ink); pointer-events: none; }
.gn-subject .gmk { left: -24px; top: 12px; }
.gn-thing .gmk { left: -40px; top: 24px; }
.gn-area .gmk { left: -16px; top: -66px; }
.lab-right .gmk, .lab-none .gmk { display: none; }
.gn.dim .gmk { opacity: .3; }
.mk-def { font-size: 15px; font-weight: 500; }
.mk-nb { display: inline-block; width: 11px; height: 11px; border: 1.5px dashed var(--ink); box-sizing: border-box; }
.mk-own { font-size: 13px; letter-spacing: -0.04em; }
.mk-inc { font-size: 17px; }
.gmk > span { background: var(--ground); padding: 1px; white-space: nowrap; }
/* the key, bottom left of the graph, opens upward */
.graph-key { position: absolute; left: var(--s5); bottom: var(--s4); z-index: 5; display: flex; align-items: center; gap: var(--s1); }
.key-btn { min-width: 0; background-color: rgba(250, 250, 248, 0.94); }
.key-btn[aria-expanded="true"], .hl-btn[aria-expanded="true"] { background-image: linear-gradient(135deg, transparent 50%, var(--ink) 50%), linear-gradient(45deg, var(--ink) 50%, transparent 50%); }
.key-card { position: absolute; left: 0; bottom: calc(100% + 6px); display: grid; gap: 7px; min-width: 190px; padding: 12px 14px; background: var(--ground); border: 1px solid var(--ink); box-shadow: 0 -6px 20px rgba(17, 17, 16, 0.08); }
.key-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin-top: 4px; }
.key-h:first-child { margin-top: 0; }
.key-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.key-row .g { position: static; transform: none; width: 12px; height: 12px; justify-self: center; border-radius: 50%; }
.km { display: grid; place-items: center; font-family: var(--mono); line-height: 1; }
.mk-x { font-size: 16px; }
.mk-rc { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--ink); box-sizing: border-box; }
.mk-ab { font-size: 9px; border: 1px solid var(--ink); padding: 0 3px; }
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.res-prompt .rt { font-style: italic; font-size: 14px; line-height: 1.45; white-space: normal; }
.res-prompt .rd { white-space: normal; color: var(--body); }
.results { left: auto; right: 0; width: min(600px, calc(100vw - 32px)); max-height: min(660px, calc(100vh - 90px)); }
.res .rt, .res .ra { white-space: normal; overflow: visible; }
/* the four newer marks are icons in small round badges, one look for all of them */
.bdg { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ground); color: var(--ink); box-sizing: border-box; flex: 0 0 auto; }
.bdg svg { width: 11px; height: 11px; display: block; }
.gmk { gap: 3px; }
.gmk > span.bdg { padding: 0; }
.gn-thing .gmk, .gn-area .gmk { transform: translateX(-100%) scale(1.15); transform-origin: right center; }
/* the legend button at the bottom left of the graph */
.key-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 12px 0 8px; background: rgba(250, 250, 248, 0.94); }
.key-btn .bdg { width: 15px; height: 15px; } .key-btn .bdg svg { width: 9px; height: 9px; }
.key-btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); } .key-btn[aria-pressed="true"] .bdg { border-color: var(--ground); background: var(--ink); color: var(--ground); }
/* the legend panel */
.lg { display: grid; }
.lg-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.lg-sym { display: grid; place-items: center; min-height: 22px; }
.lg-sym .g { position: static; transform: none; width: 16px; height: 16px; border-radius: 50%; }
.lg-sym .bdg { width: 20px; height: 20px; } .lg-sym .bdg svg { width: 12px; height: 12px; }
.lg-t { display: grid; gap: 2px; min-width: 0; }
.lg-t b { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.lg-t span { font-size: 14px; line-height: 1.45; color: var(--body); }
.lg-donut { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--p-you) 0 40%, var(--hue-0) 40% 50%, var(--hue-1) 50% 57%, var(--hue-2) 57% 64%, var(--p-agent) 64% 100%); box-shadow: inset 0 0 0 1px var(--ink); position: relative; }
.lg-donut::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px var(--ink); }
.lg-tag { position: static; transform: none; font-size: 9px; padding: 2px 4px; white-space: nowrap; }
.lg-row:has(.lg-tag) { grid-template-columns: 80px minmax(0, 1fr); }
.gn-thing .gmk { left: -50px; top: 30px; }
.lg-sym .mk-x { font-size: 20px; line-height: 1; }
.lg-sym .mk-rc { width: 18px; height: 18px; }
.lg-sym .mk-ab { font-size: 10px; }
/* minimal: the icons alone, thin, no badge */
.bdg { width: auto; height: auto; border: 0; border-radius: 0; background: transparent; }
.bdg svg { width: 11px; height: 11px; }
.bdg svg * { stroke-width: 1.1; }
.gmk { gap: 5px; }
.gmk > span.bdg { background: var(--ground); padding: 1px; }
.gn-thing .gmk, .gn-area .gmk { transform: translateX(-100%); }
/* a label left of its node takes the node's lower left, so there the marks sit at its lower right */
.gn-thing.lab-west .gmk { left: 50px; transform: none; }
.gn-subject.lab-west .gmk, .gn-q.lab-west .gmk { left: 24px; transform: none; }
.key-btn { padding: 0 12px; }
.lg-sym .bdg svg { width: 14px; height: 14px; }
/* legend: one quiet line per symbol */
.lg-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; border-bottom: 0; }
.lg-t { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
.lg-t b { font-weight: 400; }
.lg-t span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.lg-sym { min-height: 18px; }
.lg-sym .g { width: 12px; height: 12px; }
.lg-sym .mk-x { font-size: 16px; } .lg-sym .mk-rc { width: 13px; height: 13px; } .lg-sym .mk-ab { font-size: 8px; }
.lg-sym .bdg svg { width: 12px; height: 12px; }
.lg-donut { width: 14px; height: 14px; } .lg-donut::after { inset: 3.5px; }
.lg-row:has(.lg-tag) { grid-template-columns: 24px minmax(0, 1fr); }
.lg-tag { font-size: 8px; padding: 1px 3px; }
.gn.narrow .gl-s { white-space: pre-line; line-height: 1.35; }

/* the graph with nothing decided yet, and the page that could not read a graph at all */
.graph-empty { position: absolute; left: 50%; top: calc(50% + 132px); bottom: 64px; transform: translateX(-50%); width: min(520px, calc(100% - 64px)); justify-items: center; align-content: start; overflow-y: auto; text-align: center; padding: 0; }
/* where the band below the root node is too short for its text (a short window, or under 640 px where the pickers take
   a row of their own above the legend and the text wraps taller), it sits in the one above the root node instead */
@media (max-width: 639px), (max-height: 690px) { .graph-empty { top: 24px; bottom: calc(50% + 48px); align-content: safe center; } }
.app2.shut { width: 100vw; height: 100vh; display: grid; place-items: center; }
.app2.shut .empty { width: min(560px, calc(100% - 64px)); }
.sr-text.sr-none { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- people, by their marks */

/* an inbox item names who it is about by their marks, before its kind; a clash row its two people */
.p-item .kind-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.p-item .kind-who svg.mk + svg.mk { margin-left: -2px; }
.p-row .s.who-pair { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.p-row .who-pair .x { font-family: var(--mono); color: var(--clash, currentColor); margin: 0 3px; }

/* a 16px mark keeps the middle the 12px mark it stands in for had in every list that lines it up with its first line */
span.mk { justify-self: center; }
.row svg.mk, .story svg.mk { margin-top: 3px; }
.stream-row svg.mk, .uq-steps li svg.mk, .p-row .against svg.mk { margin-top: 2px; }
.p-row.qrow svg.mk, .opt-row svg.mk { margin-top: 5px; }

/* the team page, in the graph's place: a showcase of the team's marks, laid out as the Design canvas's motion board -
   a header, everyone in one row with their agent beside them, then a card per move with the move playing in it */
.team-page { position: absolute; left: 0; top: 56px; display: flex; flex-direction: column; gap: 32px; padding: 36px 64px 28px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
  background: var(--ground); transition: width 320ms cubic-bezier(.3,.6,.2,1); scrollbar-width: none; }
/* the page scrolls without a scrollbar, as the panel's body already does: no gutter, so content reaches the same
   right edge whether or not the page is tall enough to scroll */
.team-page::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.tp-intro { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.tp-intro h1 { margin: 0; font-size: 44px; line-height: 1.06; font-weight: var(--title-w); letter-spacing: var(--title-track); color: var(--ink); }
.tp-intro p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--body); }
.tp-link { flex: 0 0 auto; margin-top: 2px; padding: 0; border: 0; background: transparent; color: var(--body); white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); }
.tp-link:hover, .tp-link[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--ink); }
.tp-link:active { color: var(--muted); }
.tp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-sec { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.tp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tp-head .tp-num { color: var(--ink); }
/* everyone across the whole row, each in an equal share of it and centred there, wrapping only past ~8 people */
.tp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 16px; padding: 20px 0 4px; }
/* the person and their agent stand on one line, and their names under them sit on one baseline */
/* every pair from the top of the row, so a longer line under one person never lifts their marks above the others' */
.tp-person { display: grid; grid-template-columns: auto auto; grid-auto-flow: column; grid-template-rows: auto auto; justify-content: center; align-content: start; justify-items: center; align-items: end; gap: 10px 14px; min-width: 0; }
.tp-one { display: contents; }
/* each mark on the first row and its name under it, whatever rows the lines below the pair add: auto-placed into a
   column, the agent's mark fell under its person's name once the line under them moved to the fourth row */
.tp-one > :first-child { grid-row: 1; }
.tp-one > :last-child { grid-row: 2; }
.tp-person:not(:has(.tp-now)) .tp-off { grid-row: 3; }
.tp-one > :is(.tn, .ta) { align-self: baseline; }
.tp-one .tn { display: flex; align-items: baseline; gap: 6px; max-width: 100%; font-size: 17px; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-one .ta { font-family: var(--mono); font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.tp-now { grid-column: 1 / -1; grid-row: 3; max-width: 230px; margin: 2px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.tp-off { grid-column: 1 / -1; grid-row: 4; max-width: 230px; margin: 2px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--body); text-align: center; text-wrap: balance; }
.tp-note { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--body); }
/* where clashes go (ABL-134): the Add to Slack offer, or the channel Slack is connected to, on the team page and in the clashes panel */
.slack-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--body); }
.slack-strip:empty { display: none; }
.slack-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); white-space: nowrap; }
.slack-failed { color: var(--warn); }
.tp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tp-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 18px 20px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }
.tp-stage { height: 100px; display: flex; align-items: center; justify-content: center; }
.tp-demo { position: relative; display: flex; }
.tp-demo .gx.tp-x { left: 80px; top: -6px; font-size: 22px; }
.tp-mini { display: grid; gap: 8px; width: 100%; max-width: 220px; }
.tp-mini-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tp-mini-row:last-child { padding-bottom: 0; border-bottom: 0; }
.tp-mini-row b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tp-mini-row span { text-align: right; }
.tp-body { font-size: 15px; line-height: 1.45; color: var(--ink); }
.tp-when { margin-top: auto; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); }
/* the one-off moves of a card play again: stopped for a moment (index.html's componentDidMount), standing where they
   ended, then let go; a card is never left empty between two plays */
.tp-cards[data-off] .tp-replay :is(.mark, .mark *) { animation: none !important; }
/* four cards only where their own section has room for them: a side panel open narrows it, not the window */
@container (max-width: 960px) { .tp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the legend: everyone by their mark, and the way into the team */
.lg-people { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 0 4px 34px; }
.lg-person { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.lg-open { font-family: var(--mono); font-size: 12px; }
.lg-t .lg-open span { font: inherit; color: inherit; }

/* the top bar's way to the people page and to the tour, apart from the panels' tabs: the people button carries the
   first few marks of the team, so it reads as people and never as the team tab beside it, which opens the clashes */
.bar-people { flex: 0 0 auto; }
.ov-people .ov-marks { display: inline-flex; align-items: center; }
.ov-people .ov-marks { gap: 2px; }
.ov-tour { width: 32px; padding: 0; justify-content: center; font-weight: 600; }

/* the tour: a few cards over the page, which stays as it is behind them; each card a small drawing of one thing on
   the page, drawn from this graph's own example, and a few words on it. Every drawing ends where it stands still, so a
   person who asked for less motion sees the same drawing, finished */
.tour-scrim { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim); animation: tour-fade 220ms ease-out both; }
.tour { position: relative; width: 680px; max-width: 100%; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column;
  background: linear-gradient(var(--surface), var(--surface)), var(--ground); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 24px 64px var(--shadow-c);
  color: var(--ink); animation: tour-in 320ms cubic-bezier(.2, .8, .2, 1) both; scrollbar-width: none; }
.tour:focus, .tour:focus-visible { outline: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px 10px 40px; border-bottom: 1px solid var(--hairline); }
.tour-head .label { white-space: nowrap; text-transform: var(--label-case); letter-spacing: var(--label-track); }
.tour-stage { position: relative; height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 32px;
  background: var(--ground); border-bottom: 1px solid var(--hairline); }
.tour-copy { padding: 24px 40px 4px; min-height: 172px; }
.tour-words { display: grid; gap: 10px; animation: ts-up 300ms cubic-bezier(.2, .8, .2, 1) both; }
.tour-words h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: var(--title-w); letter-spacing: var(--title-track); color: var(--ink); }
.tour-words p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty; overflow-wrap: anywhere; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 40px 24px; }
.tour-skip { margin-left: -12px; }
.tour-steps { margin-left: auto; display: flex; gap: 8px; }
.tour-steps .btn, .tour-skip .btn { white-space: nowrap; }
.tour-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.tour-dot { width: 20px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tour-dot::before { content: ''; width: 6px; height: 6px; border-radius: min(3px, var(--r-chip)); background: var(--rule); transition: width 220ms cubic-bezier(.2, .8, .2, 1), background 220ms; }
.tour-dot:hover::before { background: var(--muted); }
.tour-dot[aria-selected="true"]::before { width: 14px; background: var(--accent); }
.tour-dot:focus-visible { outline: 1px solid var(--ink); outline-offset: 0; }

/* each drawing: its parts come in one after another, each at its own --d */
.ts { position: relative; max-width: 100%; animation: tour-fade 240ms ease-out both; }
.ts [style*="--d"] { animation: ts-pop 460ms cubic-bezier(.2, .8, .2, 1) var(--d) both; }
/* a mark's own move plays once its part has come in */
.ts .mark:is(.is-new, .is-clash), .ts .mark:is(.is-new, .is-clash) * { animation-delay: calc(var(--d, 0s) + .4s) !important; }
.ts-t { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--muted); }
.ts-a { font-size: 17px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ts-q { font-size: 13px; line-height: 1.35; color: var(--body); overflow-wrap: anywhere; }
.ts-qh { font-family: var(--serif); font-size: 17px; line-height: 1.3; color: var(--ink); text-align: center; overflow-wrap: anywhere; }
.ts-who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.ts-card { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }
.ts-ans { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ts-tag { padding: 2px 8px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--warn) 14%, transparent); font-family: var(--mono); font-size: 11px; color: var(--ink); }
.ts-settle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: left; }
.ts-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-chip); background: var(--accent); color: var(--on-accent); font-size: 11px; }
.ts-tick-open { background: var(--warn-bg); color: var(--warn); }

/* the map: the project, one part with its ring, and that part's groups */
.ts-map { display: flex; align-items: center; justify-content: center; width: 100%; }
.ts-node { flex: none; position: relative; display: grid; }
/* a node's words hang under its circle, so the lines meet the circles at their middle */
.ts-under { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; margin-top: 8px; white-space: nowrap; }
.ts-under > * { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ts-root { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.ts-donut { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ink); box-sizing: border-box; }
.ts-donut::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--ground); border: 1px solid var(--ink); }
.ts-name { font-size: 15px; color: var(--ink); }
.ts-link { flex: 1 1 28px; min-width: 16px; max-width: 64px; height: 1.5px; background: var(--edge); }
.ts-groups { display: grid; gap: 3px; min-width: 0; margin: 0; padding: 4px 0 4px 18px; list-style: none; border-left: 1.5px solid var(--edge); }
.ts-groups li { position: relative; min-width: 0; font-size: 14px; line-height: 21px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-groups li::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--node); vertical-align: -1px; }
.ts-groups .ts-more { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ts-groups .ts-more::before { display: none; }

/* whose each decision is: the person and their agent, each with one decision of theirs */
.ts-whose { display: flex; justify-content: center; gap: 40px; }
.ts-side { flex: 0 1 240px; min-width: 0; display: grid; grid-template-rows: 56px auto auto 1fr; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.ts-side svg.mark { align-self: end; }
.ts-side b { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); }
.ts-side .ts-said { display: grid; align-content: center; gap: 2px; align-self: stretch; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }

/* a question and every answer it had, the one in force last */
.ts-line { display: grid; justify-items: center; gap: 16px; width: 560px; }
.ts-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: 100%; margin: 0; padding: 0; list-style: none; }
.ts-story li { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }
.ts-story .ts-was .ts-a { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ts-story .ts-now { border-color: var(--ink); }
.ts-story .ts-now::before { content: '→'; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--muted); }
.ts-words { font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--body); overflow-wrap: anywhere; }

/* an agent's move, or another person's, against or under a decision */
.ts-off { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--hairline)); border-radius: var(--r); background: var(--surface); }
.ts-off > div { display: grid; gap: 2px; min-width: 0; }
.ts-off b { font-weight: 500; font-size: 14px; color: var(--ink); }
.ts-sym { font-family: var(--mono); color: var(--warn); }
.ts-shift { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.ts-shift s { color: var(--muted); }
.ts-against, .ts-recheck { display: grid; justify-items: center; gap: 10px; width: 480px; }
.ts-recheck { gap: 6px; }
.ts-against .ts-card, .ts-recheck .ts-card, .ts-against .ts-off, .ts-recheck .ts-off { width: 100%; box-sizing: border-box; }
.ts-down { width: 1.5px; height: 10px; background: var(--edge); }

/* a clash between two people */
.ts-clash { display: grid; justify-items: center; gap: 16px; width: 600px; }
.ts-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 20px; width: 100%; }
.ts-vs .ts-x { align-self: center; }
.ts-said-m { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-width: 0; padding: 12px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }
.ts-said-m svg.mark { grid-row: 1 / 3; }
.ts-said-m .ts-a { font-size: 15px; }
.ts-x { font-family: var(--mono); font-size: 26px; line-height: 1; color: var(--clash); animation: ts-pop 420ms cubic-bezier(.2, .8, .2, 1) .8s both; }

/* prompts as they are sent */
.ts-live { display: grid; gap: 14px; width: 560px; }
.ts-feed { display: grid; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); }
.ts-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--hairline);
  font-size: 14px; color: var(--body); white-space: nowrap; }
.ts-row:first-child { border-top: 0; }
.ts-row b { font-weight: 500; color: var(--ink); }
.ts-row-t { overflow: hidden; text-overflow: ellipsis; }
.ts-strip { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* the team */
.ts-team { display: grid; justify-items: center; gap: 12px; }
.ts-crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 36px; max-width: 600px; }
.ts-mate { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.ts-duo { display: flex; align-items: flex-end; gap: 10px; }
.ts-mate-n { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink); }

/* a phone: the card fills the width, and each drawing stands its parts one under another */
@media (max-width: 640px) {
  .tour-scrim { padding: 16px; }
  .tour-head { padding: 8px 12px 8px 20px; }
  .tour-stage { height: auto; min-height: 0; padding: 20px 16px; }
  .tour-copy { padding: 18px 20px 4px; min-height: 0; }
  .tour-words h2 { font-size: 20px; }
  .tour-words p { font-size: 15px; line-height: 1.5; }
  .tour-foot { padding: 14px 20px 18px; }
  .ts-donut { width: 48px; height: 48px; }
  .ts-donut::after { inset: 6px; }
  .ts-groups li { font-size: 13px; line-height: 19px; }
  .ts-whose { gap: 16px; }
  .ts-side .ts-said { padding: 8px 10px; }
  .ts-story { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ts-story .ts-now::before { content: '↓'; left: 50%; top: -20px; transform: translateX(-50%); }
  .ts-vs { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; }
  .ts-vs .ts-said-m { width: 100%; box-sizing: border-box; }
  .ts-crew { gap: 16px 24px; }
}

@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ts-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes ts-pop { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .tour-scrim, .tour-scrim *, .tour-scrim *::before, .tour-scrim *::after { animation: none !important; transition: none !important; }
}
/* up to 1440 px the search gives up room before the path does, so the people, tour and ripples buttons cost the path nothing */
@media (max-width: 1440px) { .bar-top .search { flex-basis: 250px; } }

/* below 1024 px the path, the search and the people marks give up room, in that order, and whatever tabs the bar
   has fold into .nav-menu's trigger, toggled by click with aria-expanded, closed by Escape, a tap outside or
   picking one (index.html), so the wordmark, the search and every control stay reachable on a phone */
/* at 1024 the bar is still the wide layout (the fold below is not yet in play), but the project crumb's own flex
   room is already down to a sliver there - the wordmark, the full-width search and every bar tab between them
   leave it none, so .crumbs2's overflow:hidden cut its text mid-letter with no ellipsis shown; hiding it here,
   a px before the fold below would anyway, is the clean version of what was already happening */
/* .brand stops giving up room exactly where .crumbs2 (its only shrinkable neighbour before .search) stops
   existing to take it back: past this point nothing is left to absorb .brand's own slack, so a theme whose type
   needs more width than the flex would otherwise leave it (hud's wide letter-spacing, right at 1024 px) squeezed
   it below its own text's width and its wordmark ran under the search field. Scoped here, not wider: at 1025 px+ .crumbs2 is still in the row and
   still the thing that gives up room, so .brand taking flex-shrink:0 there would shift it and everything after it
   by whatever .brand no longer gives up - the one width above 1024 the page must stay pixel-identical at */
@media (max-width: 1024px) { .crumbs2 { display: none; } .bar-top .brand { flex-shrink: 0; } .th-hud .bar-top .search { min-width: 200px; } }
@media (max-width: 1023px) {
  .bar-top { padding: 0 var(--s2); gap: var(--s1); }
  .bar-top .search, .th-hud .bar-top .search { flex: 0 1 140px; min-width: 84px; }
  .kbd { display: none; }
  .search input { padding: 0 8px 0 52px; }
  .ov-people .ov-marks { display: none; }
  .nav-menu { position: relative; }
  .nav-menu-btn { display: inline-flex; }
  .nav-menu .overlays { display: none; }
  .nav-menu.open .overlays {
    display: flex; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 160px;
    flex-direction: column; gap: 0; padding: 0; border-radius: 0;
    background: var(--ground); border: 1px solid var(--ink); box-shadow: 0 12px 32px rgba(17, 17, 16, .08);
  }
  .nav-menu.open .ov { width: 100%; height: 36px; justify-content: flex-start; }
}

/* below 640 px .graph-corner-bottom (the theme and highlight pickers, .hl-btn alone at least 212 px) runs into
   .graph-key (legend, Misha): give the pickers their own row above it instead of the usual shared one */
@media (max-width: 640px) { .graph-corner-bottom { bottom: 56px; } }

/* a person's own agent going against their decision, under it on the question's panel: what it did and why, glad
   telling it to put it back, or the re-check waiting on the person; and on the answer that replaced one, what and why */
.offs { display: grid; }
.off { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.off:first-child { padding-top: 0; border-top: 0; }
.off:last-child { padding-bottom: 0; }
.off-sym { font-family: var(--mono); font-size: 13px; font-weight: 600; line-height: 20px; color: var(--warn); text-align: center; }
.off-body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.off-ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 14px; line-height: 20px; color: var(--ink); }
.off-ttl b { font-weight: 500; }
.off-ago { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.off-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.off-line s { color: var(--muted); }
.builds { display: grid; gap: 2px; }
.build-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.off-dim { color: var(--muted); }
.off-tag { margin: 2px 0; padding: 1px 8px; border-radius: var(--r-chip); background: var(--warn-bg); color: var(--warn); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.off-state { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.off-state.off-open { color: var(--warn); }
.off-state.off-done { color: var(--ok); }

/* a group's summary under its name and count: at most two lines, the whole of it in the title */
.gl-d { justify-self: center; max-width: var(--dw, 100%); margin-top: 2px; font-family: var(--serif); font-size: 13px; line-height: 1.35; letter-spacing: 0; color: var(--body); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: pretty; }
.lab-right .gl-d, .lab-center .gl-d { display: none; }
/* left of its node the summary hugs the node's side, its lines read from the left: a right-aligned clamp loses its ellipsis */
.lab-west .gl-d { justify-self: end; text-align: left; }
.lab-east .gl-d { justify-self: start; }
.gn.focus .gl-d { max-width: none; }

/* Misha, the cal.com sample's team agent (calcom-misha.js): the change that starts a ripple, Misha at work, and each decision
   that rested on it landing on its outcome, then the ripple's one summary */
.mi-change { display: grid; gap: var(--s2); justify-items: start; }
.mi-q { font-size: 17px; line-height: 1.35; text-align: left; }
.mi-who { display: flex; align-items: center; gap: var(--s3); }
.mi-name { display: grid; gap: 2px; min-width: 0; }
.mi-name b { font-size: 16px; font-weight: 500; color: var(--ink); }
.mi-status { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.mi-status.on { color: var(--ink); }
.mi-step { transition: opacity 240ms; }
.mi-step .off-sym { color: var(--muted); }
.mi-landed .off-sym { color: var(--ink); }
.mi-wait { opacity: .5; }
.mi-reading .off-sym { animation: pulse 1.2s ease-in-out infinite; }
.mi-landed .off-body > :not(.off-ttl) { animation: enter 320ms cubic-bezier(.3,.6,.2,1) both; }
.mi-tag { margin: 2px 0; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--r-chip); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.mi-holds { color: var(--ok); }
.mi-retire { color: var(--muted); }
.mi-update { color: var(--accent); }
.mi-redecide { border-color: var(--warn-bg); background: var(--warn-bg); color: var(--warn); }
.mi-tag.mi-ask { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.mi-place { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.mi-how, .mi-branch { color: var(--muted); }
.mi-question { display: grid; gap: 2px; margin-top: 2px; padding-left: var(--s3); border-left: 2px solid var(--ink); }
.gn.mi-on .g { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent); }
@media (prefers-reduced-motion: reduce) { .mi-reading .off-sym, .mi-landed .off-body > :not(.off-ttl) { animation: none; } }
/* the tour's Misha card: Misha, the outcomes it lands decisions on, and its button, drawn as the map shows it */
.ts-misha { display: grid; justify-items: center; gap: 10px; width: 480px; }
.ts-misha .ts-off { width: 100%; box-sizing: border-box; }
.ts-outs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ts-mibtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--misha); color: var(--on-misha); font-family: var(--serif); font-size: 13px; font-weight: 600; }
/* Misha's mark is a brown teddy bear with a light muzzle; themes.css keeps it so in every theme */
.mark.mi-bear { --mk-tint: #9A6A3F; --mk-fill: #9A6A3F; --mk-line: #4E301A; --mk-face: #24160B; --mk-agent: #4E301A; }
.mark.mi-bear .mz { fill: #E8CFA6; stroke: #4E301A; stroke-width: 1.1; }

/* the sample projects (.sample on the page's root, set by index.html for ?project=): the team page's row and cards make
   room for Misha, and your agent is outlined in your colour (themes.css part 4) */
.sample .mark.of-you { --mk-tint: var(--p-you); }
.sample .tp-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sample .tp-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@container (max-width: 960px) { .sample .tp-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the Misha tab: the one way to Misha. In the top bar it wears the bear, and its page (team-page's frame) lists
   every ripple as a card - trigger, areas, each decision with its outcome and its files' before and after, the
   pull request, cost and undo. */
.ov-misha .ov-marks { display: inline-flex; align-items: center; margin-right: 2px; }
/* the header row, the section leads and the cards share the page's own column, as the team page's do */
/* the intro and the lead run the column's full width; the week's cost sits in the corner beside the name */
.misha-page .tp-top { position: relative; }
.misha-page .tp-intro { flex: 1 1 auto; max-width: none; min-width: 0; }
.mp-who { display: flex; align-items: center; gap: var(--s3); }
.mp-name { display: grid; gap: 2px; min-width: 0; }
.mp-name h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: var(--title-w); letter-spacing: var(--title-track); color: var(--ink); }
.mp-week { white-space: nowrap; margin-top: 6px; position: absolute; top: 0; right: 0; }
.misha-page .tp-head .tp-num { white-space: nowrap; }
.mp-lead-label { text-align: right; }
.mp-cards { display: grid; gap: var(--s4); justify-items: stretch; }
.mp-card { gap: 10px; padding: var(--s4) var(--s5); min-width: 0; }
.mp-top { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.mp-top .mp-pr { margin-left: auto; white-space: nowrap; }
.mp-when { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.st-wait { background: var(--warn-bg); color: var(--warn); }
.st-done { border: 1px solid var(--ok); color: var(--ok); }
.mp-trigger { display: flex; gap: 8px; align-items: baseline; font-size: 16px; line-height: 1.4; min-width: 0; }
.mp-trigger .mp-tq { min-width: 0; color: var(--body); }
.mp-qlink { font-size: inherit; line-height: inherit; text-align: left; overflow-wrap: anywhere; }
.mp-shift { font-size: 14px; }
.mp-areas { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mp-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.mp-area { border: 1px solid var(--hairline); border-radius: var(--r-chip); padding: 1px 10px; font-family: var(--mono); font-size: 11px; color: var(--body); white-space: nowrap; }
.mp-note { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--body); }
.mp-items { padding-top: 2px; }
.mp-item .mp-it-t { font-weight: 500; font-size: 14px; }
.mp-filebox { display: grid; margin-top: 4px; }
.mp-file { display: flex; gap: 10px; align-items: baseline; min-width: 0; padding: 4px 8px; border: 1px solid var(--hairline); background: transparent; cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--body); }
.mp-file:hover { background: var(--hover); }
.mp-file .mp-path { text-align: left; overflow-wrap: anywhere; min-width: 0; }
.mp-file .mp-lines { color: var(--muted); white-space: nowrap; }
.mp-file .mp-sum { margin-left: auto; color: var(--muted); white-space: nowrap; }
.mp-filebox .mp-code { border-top: 0; }
.mp-code { max-height: 300px; }
.mp-code .ln { grid-template-columns: 44px 10px minmax(0, 1fr); }
.mp-never { display: grid; padding-top: 2px; }
.mp-tag-never { border-color: var(--warn-bg); background: var(--warn-bg); color: var(--warn); }
.mp-yours { display: grid; gap: 4px; justify-items: start; padding: 2px 0 2px var(--s3); border-left: 2px solid var(--p-you); }
.mp-foot { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-top: 2px; }
.mp-foot .sid { font-size: 11.5px; }
.mp-flex { flex: 1 1 auto; }
@media (max-width: 640px) {
  .misha-page { padding: 20px 16px 24px; gap: 24px; }
  .misha-page .tp-top { flex-direction: column; gap: 12px; }
  .misha-page .tp-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mp-lead-label { text-align: left; }
  .mp-name h1 { font-size: 28px; }
  .mp-card { padding: var(--s3) var(--s4); }
  .mp-week { margin-top: 0; position: static; }
}