/* The shell's own stylesheet. Every colour is a token by name (gui-b78zg6);
   every gap is on the spacing scale (gui-bkznlm); both modes ship (gui-t39yn5).
   Nothing here is loaded from the network (gui-d05dxr). */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--mdd-typeface);
  font-size: 16px;
  line-height: 1.4;
  color: var(--mdd-text);
  background: var(--mdd-page-bg);
}
h1, h2, h3 { font-weight: 500; color: var(--mdd-heading); margin: 0; }
h1 { font-size: var(--mdd-type-heading-1); }
h2 { font-size: var(--mdd-type-heading-2); }
a { color: var(--mdd-link); }
code, .mono { font-family: var(--mdd-monospace); font-size: var(--mdd-type-text-code); }
:focus-visible { outline: 2px solid var(--mdd-focus); outline-offset: 2px; border-radius: var(--mdd-radius-focus-ring); }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* The landing page: a standalone surface on cloud-white, text left (gui-oms813). */
.landing { min-height: 100%; background: var(--mdd-standalone-bg); padding: var(--mdd-space-8) var(--mdd-space-5); }
.landing .card { max-width: 30rem; background: var(--mdd-surface-bg); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-standalone-card); padding: var(--mdd-space-6); display: grid; gap: var(--mdd-space-4); }
.button { display: inline-flex; align-items: center; gap: var(--mdd-space-2); min-height: 44px; padding: 0 var(--mdd-space-4); border-radius: var(--mdd-radius-control); border: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); color: var(--mdd-text); cursor: pointer; }
.button.primary { background: var(--mdd-link); color: var(--mdd-cloud-white); border-color: var(--mdd-link); }
.button.primary:hover { background: var(--mdd-accent); }
.button kbd { font-family: var(--mdd-monospace); font-size: 12px; opacity: 0.8; }

/* The frame: rail, dock and the speaking line at the foot, always (resp-60xyhq). */
.app { height: 100%; }
.frame { height: 100%; display: grid; grid-template-columns: 64px minmax(12rem, 18rem) 1fr; grid-template-rows: auto auto 1fr auto auto auto; grid-template-areas: "rail shelf connection" "rail shelf presence" "rail shelf dock" "rail voice voice" "rail line line" "rail foot foot"; }
.presence { grid-area: presence; }
.rail { grid-area: rail; }
.shelf { grid-area: shelf; }
.connection { grid-area: connection; }
.dock { grid-area: dock; position: relative; }
.speaking-line { grid-area: line; }
.footer { grid-area: foot; }
.rail { display: flex; flex-direction: column; gap: var(--mdd-space-1); padding: var(--mdd-space-2); border-right: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); overflow: auto; }
.rail a, .rail button { display: flex; flex-direction: column; align-items: center; gap: var(--mdd-space-1); padding: var(--mdd-space-2); border-radius: var(--mdd-radius-control); color: var(--mdd-text); text-decoration: none; font-size: 12px; border: 0; background: none; cursor: pointer; min-height: 44px; }
.rail a[aria-current="page"] { color: var(--mdd-accent); font-weight: 600; }
.rail .head { border-bottom: 1px solid var(--mdd-border); margin-bottom: var(--mdd-space-1); }
.rail .sub-rooms { margin-top: var(--mdd-space-2); padding-top: var(--mdd-space-2); border-top: 1px solid var(--mdd-border); font-size: 10px; }
.rail svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.mark { display: inline-flex; align-items: center; gap: var(--mdd-space-1); font-size: 10px; border-radius: var(--mdd-radius-pill); padding: 0 var(--mdd-space-1); border: 1px solid var(--mdd-border); }
.mark[data-tone="uncertain"] { background: var(--mdd-uncertain-soft); color: var(--mdd-uncertain-text); }
.mark[data-tone="jelly-bean"] { background: var(--mdd-solitude); color: var(--mdd-chathams-blue); }
.mark[data-tone="feedback"] { background: var(--mdd-feedback-soft); color: var(--mdd-feedback-text); }
.mark[data-tone="void"] { background: var(--mdd-void-soft); color: var(--mdd-void-text); }
.mark[data-tone="aligned"] { background: var(--mdd-aligned-soft); color: var(--mdd-aligned-text); }
.mark[data-tone="misaligned"] { background: var(--mdd-misaligned-soft); color: var(--mdd-misaligned-text); }
.mark svg { width: 12px; height: 12px; }
.dock { min-width: 0; min-height: 0; height: 100%; }
.dock .dv-dockview { height: 100%; }

/* A panel's body scrolls inside its region and never over a neighbour (resp-8bcmjd, resp-d0oyt7). */
.panel { height: 100%; overflow: auto; padding: var(--mdd-space-4); display: grid; gap: var(--mdd-space-3); align-content: start; }
.panel .header { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 14px; }
.panel .header .actsFor { font-weight: 600; }
.panel .fill { display: grid; gap: var(--mdd-space-1); font-size: 12px; }
.panel .fill meter { width: 100%; height: 8px; }
.panel .conversation { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-4); background: var(--mdd-surface-bg); min-height: calc(2 * var(--mdd-space-9)); }
.panel .empty { color: var(--mdd-void-text); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-2); }
.events li { display: grid; gap: var(--mdd-space-1); border-bottom: 1px solid var(--mdd-border); padding-bottom: var(--mdd-space-2); font-size: 14px; }
.events .meta { font-size: 12px; color: var(--mdd-void-text); }
.tab { display: inline-flex; align-items: center; gap: var(--mdd-space-2); padding: 0 var(--mdd-space-2); height: 100%; }
.tab .hand { color: var(--mdd-feedback); }

/* The speaking line: the foot of every page, never covered (resp-60xyhq, resp-0kfsg4). */
.speaking-line { position: relative; z-index: 10; display: flex; gap: var(--mdd-space-3); align-items: center; padding: var(--mdd-space-2) var(--mdd-space-4); border-top: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); min-height: 44px; }
.speaking-line .hears { font-size: 12px; color: var(--mdd-void-text); white-space: nowrap; }
.speaking-line input { flex: 1; min-height: 44px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); padding: 0 var(--mdd-space-3); font: inherit; background: var(--mdd-page-bg); color: var(--mdd-text); }
.footer { font-size: 10px; color: var(--mdd-void-text); padding: 0 var(--mdd-space-4) var(--mdd-space-1); display: flex; gap: var(--mdd-space-4); align-items: center; }
.footer .reload { color: var(--mdd-uncertain-text); }

/* The notices: an outcome, passing, linked (resp-dvs6cz). Never a decision. */
.notices { position: fixed; right: var(--mdd-space-4); bottom: var(--mdd-space-9); display: grid; gap: var(--mdd-space-2); z-index: 5; }
.notice { padding: var(--mdd-space-2) var(--mdd-space-3); border-radius: var(--mdd-radius-strip-tooltip-and-popover); border: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 14px; }
.notice[data-tone="misaligned"] { border-color: var(--mdd-misaligned); }
.connection { padding: var(--mdd-space-1) var(--mdd-space-4); background: var(--mdd-uncertain-soft); color: var(--mdd-uncertain-text); font-size: 12px; }
.refusal { border-left: 4px solid var(--mdd-misaligned); padding: var(--mdd-space-2) var(--mdd-space-3); background: var(--mdd-misaligned-soft); color: var(--mdd-misaligned-text); font-size: 14px; }

/* The command line: a picker over names, opened by a prefix (resp-z5t5gf). */
.command-line { position: fixed; left: 50%; top: 10%; transform: translateX(-50%); width: min(40rem, 100% - 2 * var(--mdd-space-4)); background: var(--mdd-surface-bg); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-strip-tooltip-and-popover); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: var(--mdd-space-2); z-index: 20; display: grid; gap: var(--mdd-space-2); }
/* 10.3 found it: the rule above set display on the dialog and beat its hidden attribute, so the closed command line was drawn (and took clicks) at the top of every page; hidden is hidden. */
.command-line[hidden] { display: none; }
.command-line input { font: inherit; padding: var(--mdd-space-2) var(--mdd-space-3); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); }
.command-line ul { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; }
.command-line li { padding: var(--mdd-space-2) var(--mdd-space-3); border-radius: var(--mdd-radius-control); display: flex; justify-content: space-between; gap: var(--mdd-space-3); cursor: pointer; }
.command-line li[aria-selected="true"] { background: var(--mdd-tab-hover); }
.command-line kbd { font-family: var(--mdd-monospace); font-size: 12px; color: var(--mdd-void-text); }

/* Dockview's theme variables, bound to tokens: the furniture in our colours. */
.dock .dv-dockview, .mdd-theme {
  --dv-group-view-background-color: var(--mdd-page-bg);
  --dv-tabs-and-actions-container-background-color: var(--mdd-surface-bg);
  --dv-activegroup-visiblepanel-tab-background-color: var(--mdd-page-bg);
  --dv-activegroup-hiddenpanel-tab-background-color: var(--mdd-surface-bg);
  --dv-inactivegroup-visiblepanel-tab-background-color: var(--mdd-page-bg);
  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--mdd-surface-bg);
  --dv-activegroup-visiblepanel-tab-color: var(--mdd-text);
  --dv-activegroup-hiddenpanel-tab-color: var(--mdd-void-text);
  --dv-inactivegroup-visiblepanel-tab-color: var(--mdd-text);
  --dv-inactivegroup-hiddenpanel-tab-color: var(--mdd-void-text);
  --dv-separator-border: var(--mdd-border);
  --dv-paneview-header-border-color: var(--mdd-border);
  --dv-tab-divider-color: var(--mdd-border);
  --dv-drag-over-background-color: var(--mdd-solitude);
  --dv-drag-over-border-color: var(--mdd-accent);
  --dv-tabs-container-scrollbar-color: var(--mdd-border);
  --dv-icon-hover-background-color: var(--mdd-tab-hover);
  --dv-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --dv-active-sash-color: var(--mdd-accent);
  --dv-background-color: var(--mdd-page-bg);
  /* ev-teic0d: the layout's own measures, which the library's stylesheet reads from its theme and ours must therefore carry. */
  --dv-paneview-active-outline-color: var(--mdd-accent);
  --dv-tabs-and-actions-container-font-size: 14px;
  --dv-tabs-and-actions-container-height: 44px;
  --dv-edge-dock-indicator-color: var(--mdd-accent);
  --dv-floating-border: 1px solid var(--mdd-border);
  --dv-overlay-z-index: 999;
  --dv-tab-font-size: inherit;
  --dv-border-radius: 0px;
  --dv-tab-margin: 0;
  --dv-sash-color: transparent;
  --dv-active-sash-transition-duration: 0.1s;
  --dv-active-sash-transition-delay: 0.5s;
  --dv-spacing-padding: 0px;
  --dv-tab-border-radius: 0px;
  --dv-sash-border-radius: 0px;
  --dv-dropdown-border-radius: 0px;
  --dv-tab-close-icon-size: inherit;
  --dv-floating-group-border: none;
  --dv-drag-over-border: none;
  --dv-floating-group-dragging-opacity: 0.5;
  --dv-floating-titlebar-height: 24px;
  --dv-floating-titlebar-background-color: var(--dv-tabs-and-actions-container-background-color);
  --dv-floating-titlebar-border-bottom: var(--dv-floating-border);
  --dv-scrollbar-background-color: var(--mdd-border);
}

/* THE SHELF (part-ftxby4): between the rail and the dock. When it grows it takes the room from the
   weave — the dock's 1fr — and the rail's 64px column stays where it is (resp-0s48ll, resp-mi37a1). */
.shelf { display: flex; flex-direction: column; gap: var(--mdd-space-2); padding: var(--mdd-space-2); border-right: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); overflow: auto; min-width: 0; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mdd-space-2); }
.shelf-head h2 { font-size: 14px; }
.spines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-2); }
.spine { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); background: var(--mdd-page-bg); display: grid; gap: var(--mdd-space-1); }
.spine[data-open="yes"] { border-color: var(--mdd-accent); }
.spine[data-pinned="yes"] { border-left: 4px solid var(--mdd-accent); }
.spine .name { display: flex; align-items: center; gap: var(--mdd-space-1); font: inherit; font-weight: 600; text-align: left; background: none; border: 0; color: var(--mdd-heading); cursor: pointer; padding: 0; min-height: 24px; }
.spine .name svg { width: 16px; height: 16px; }
.spine .facts { display: flex; flex-wrap: wrap; gap: var(--mdd-space-1); }
.spine .who-is-in { font-size: 12px; color: var(--mdd-void-text); }
.spines .empty { font-size: 14px; color: var(--mdd-void-text); }
.button.small { min-height: 32px; padding: 0 var(--mdd-space-2); font-size: 12px; }
.button.small svg, .button svg { width: 16px; height: 16px; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button[aria-pressed="true"] { background: var(--mdd-solitude); color: var(--mdd-chathams-blue); }
.spawn-form { display: grid; gap: var(--mdd-space-2); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-page-bg); }
.spawn-form label { display: grid; gap: var(--mdd-space-1); font-size: 12px; }
.spawn-form label.inline { grid-template-columns: auto 1fr; align-items: center; }
.spawn-form select, .spawn-form input[type="text"] { font: inherit; font-size: 14px; padding: var(--mdd-space-1) var(--mdd-space-2); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-surface-bg); color: var(--mdd-text); }
.spawn-form .actions { display: flex; gap: var(--mdd-space-2); }

/* THE CONVERSATION (part-ybrezg): the turns, each message under its mark, each block a card. */
.panel.session { display: grid; grid-template-rows: auto auto 1fr; gap: var(--mdd-space-2); overflow: hidden; }
.conversation-view { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; gap: var(--mdd-space-2); }
.conversation-view .tools { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 12px; }
.conversation-view .turns { overflow: auto; min-height: 0; display: grid; gap: var(--mdd-space-3); align-content: start; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); }
.turn { display: grid; gap: var(--mdd-space-2); scroll-margin-top: var(--mdd-space-4); }
.turn .who { display: flex; align-items: center; gap: var(--mdd-space-1); font-size: 12px; font-weight: 600; color: var(--mdd-heading); }
.turn .who svg { width: 14px; height: 14px; }
.turn .who[data-mark="team-mdd"] { color: var(--mdd-void-text); font-style: italic; }
.turn .who[data-mark="session"] { color: var(--mdd-accent); }
.turn .who[data-mark="other-session"] { color: var(--mdd-feedback-text); }
.message { display: grid; gap: var(--mdd-space-1); padding-left: var(--mdd-space-2); border-left: 2px solid var(--mdd-border); }
.message[data-from="the system"] { border-left-color: var(--mdd-void); }
.message[data-from="the session"] { border-left-color: var(--mdd-accent); }
.card { font-size: 14px; }
.card details > summary { cursor: pointer; color: var(--mdd-void-text); font-size: 12px; list-style: none; }
.card details > summary::before { content: "▸ "; }
.card details[open] > summary::before { content: "▾ "; }
.card[data-tone="misaligned"] > details > summary { color: var(--mdd-misaligned-text); }
.card[data-tone="uncertain"] > details > summary { color: var(--mdd-uncertain-text); }
.card-question details, .card-consent details { border: 1px solid var(--mdd-uncertain); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); background: var(--mdd-uncertain-soft); }
.card .answers { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; margin-top: var(--mdd-space-2); }
.card .answers input { font: inherit; padding: var(--mdd-space-1) var(--mdd-space-2); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); min-width: 12rem; background: var(--mdd-page-bg); color: var(--mdd-text); }
.card .answers .ceremony { border-color: var(--mdd-uncertain); }
.card .ceremony-note, .card .answered, .card .decision { font-size: 12px; color: var(--mdd-void-text); margin: var(--mdd-space-1) 0 0; }
.card .decision[data-tone="misaligned"] { color: var(--mdd-misaligned-text); }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--mdd-space-1) var(--mdd-space-3); margin: var(--mdd-space-2) 0 0; font-size: 12px; }
.fields dt { font-weight: 600; color: var(--mdd-heading); }
.fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--mdd-space-2); }
.prose h3, .prose h4 { margin: var(--mdd-space-2) 0; }
.code { position: relative; }
.code pre { margin: 0; padding: var(--mdd-space-2) var(--mdd-space-3); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); background: var(--mdd-page-bg); overflow: auto; font-size: var(--mdd-type-text-code); }
.code .copy { position: absolute; top: var(--mdd-space-1); right: var(--mdd-space-1); border: 0; background: none; color: var(--mdd-link); cursor: pointer; }
.code .copy svg { width: 16px; height: 16px; }
.tok-comment { color: var(--mdd-void-text); font-style: italic; }
.tok-string { color: var(--mdd-ocean-green); }
.tok-number { color: var(--mdd-uncertain-text); }
.tok-keyword { color: var(--mdd-accent); font-weight: 600; }
.picture { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); background: none; cursor: zoom-in; padding: var(--mdd-space-1); display: inline-flex; align-items: center; gap: var(--mdd-space-1); color: var(--mdd-link); }
.picture img { max-width: 15rem; max-height: 10rem; display: block; }
.file { display: inline-flex; align-items: center; gap: var(--mdd-space-1); font-family: var(--mdd-monospace); font-size: 12px; }
.file svg { width: 14px; height: 14px; }
.subagent { border: 1px dashed var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); }
.subagent > summary { font-size: 12px; color: var(--mdd-void-text); cursor: pointer; }
.turn.draft { opacity: 0.7; }
.turn.draft .draft-text { font-style: italic; margin: 0; white-space: pre-wrap; }
.outline { margin: 0; padding-left: var(--mdd-space-4); font-size: 12px; flex-basis: 100%; }
.display-choices > div { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); padding: var(--mdd-space-2) 0; }
.display-choices label { display: inline-flex; gap: var(--mdd-space-1); align-items: center; }
.display-choices select, .next-turn select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); }
.display-choices > summary, .prompts > summary, .next-turn > summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--mdd-space-1); }
.display-choices svg, .next-turn svg { width: 14px; height: 14px; }
.prompts ul { margin: var(--mdd-space-1) 0 0; padding-left: var(--mdd-space-4); }
.conversation-view .foot { min-height: 0; }
.conversation-view .newest { justify-self: center; }
.sub-sessions { display: grid; gap: var(--mdd-space-1); }
.sub-session { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); font-size: 14px; }
.sub-session > summary { cursor: pointer; display: flex; align-items: center; gap: var(--mdd-space-1); }
.sub-session svg { width: 14px; height: 14px; }
.sub-session p { margin: var(--mdd-space-1) 0; font-size: 12px; color: var(--mdd-void-text); }

/* THE SPEAKING LINE (part-5bh4x6): who hears, what is beside them, the moving mark, the queue. */
.speaking-line { flex-direction: column; align-items: stretch; gap: var(--mdd-space-1); }
.speaking-line .addressee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdd-space-2); }
.speaking-line .hears { display: inline-flex; align-items: center; gap: var(--mdd-space-2); font-size: 12px; color: var(--mdd-void-text); }
.speaking-line .hears select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); }
.speaking-line .beside { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mdd-space-1); margin-left: auto; }
.landing-mark { display: inline-flex; width: 12px; height: 12px; align-items: center; justify-content: center; }
.landing-mark .dot { width: 8px; height: 8px; border-radius: var(--mdd-radius-pill); background: var(--mdd-now); animation: landing 1.6s ease-in-out infinite; }
@keyframes landing { 0%, 100% { transform: translateX(-2px); opacity: 0.6; } 50% { transform: translateX(2px); opacity: 1; } }
.line-form { display: flex; gap: var(--mdd-space-2); align-items: flex-end; }
.speaking-line textarea { flex: 1; min-height: 44px; resize: none; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); padding: var(--mdd-space-2) var(--mdd-space-3); font: inherit; background: var(--mdd-page-bg); color: var(--mdd-text); }
.speaking-line input[type="datetime-local"] { font: inherit; font-size: 12px; min-height: 44px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); padding: 0 var(--mdd-space-2); }
.speaking-line .urgent { color: var(--mdd-misaligned-text); }
.suggestions { list-style: none; margin: 0; padding: var(--mdd-space-1); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-strip-tooltip-and-popover); background: var(--mdd-surface-bg); display: grid; gap: var(--mdd-space-1); max-height: 30vh; overflow: auto; }
.suggestions li { display: flex; gap: var(--mdd-space-2); padding: var(--mdd-space-1) var(--mdd-space-2); border-radius: var(--mdd-radius-control); cursor: pointer; font-size: 14px; }
.suggestions li:hover { background: var(--mdd-tab-hover); }
.suggestions .kind { font-size: 12px; color: var(--mdd-void-text); min-width: 5rem; }
.speaking-line .attached { display: flex; gap: var(--mdd-space-1); flex-wrap: wrap; }
.speaking-line .under { display: grid; gap: var(--mdd-space-1); font-size: 12px; }
.speaking-line .said { margin: 0; color: var(--mdd-void-text); }
.speaking-line .reply { margin: 0; color: var(--mdd-text); }
.speaking-line .reply .who { color: var(--mdd-accent); font-weight: 600; }
.queued { display: flex; gap: var(--mdd-space-2); align-items: center; }
.queued input { flex: 1; font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); padding: var(--mdd-space-1) var(--mdd-space-2); background: var(--mdd-page-bg); color: var(--mdd-text); }

/* The phone: the five as a bottom bar, one pane at a time, the speaking line above it (resp-3c2nsp).
   The layout alone changes (resp-1jwctg). The shelf is a row of tabs above the one pane (mot-tpgrk0). */
@media (width < 768px) {
  .frame { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto auto auto auto; grid-template-areas: "connection" "presence" "shelf" "dock" "voice" "line" "rail" "foot"; }
  .shelf { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--mdd-border); overflow-x: auto; }
  .shelf-head h2 { display: none; }
  .spines { display: flex; }
  .spine { min-width: 10rem; }
  .spine .who-is-in { display: none; }
  /* ev-2ig2l1: the acts on a session stay reachable at phone width, on the open book's header. */
  .panel .header .controls { display: flex; }
  .speaking-line .beside { margin-left: 0; }
  .rail { flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--mdd-border); overflow-x: auto; }
  .rail .head { border-bottom: 0; margin: 0; }
  .rail .sub-rooms { display: none; }
  .notices { bottom: calc(2 * var(--mdd-space-9)); }
}

/* 8.4: THE QUEUE, THE BOARDS AND THE TIMELINE (part-t1dgxc, part-tst06a, part-61ycxc). An area as a panel. */
.panel.judgement, .panel.create, .panel.operation { display: grid; gap: var(--mdd-space-3); align-content: start; }
/* 13.3: THE REFLECTION VIEW (part-nxnz7a) — the named readings and the record side by side, one above the other at a narrow width. */
.panel.reflection .reflection-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--mdd-space-5); align-items: start; }
.panel.reflection .questions, .panel.reflection .open-notes, .panel.reflection .discussed-notes, .panel.reflection .cost-changes, .panel.reflection .events, .panel.reflection .ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-2); }
.panel.reflection .questions li, .panel.reflection .note { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); }
.panel.reflection .questions p, .panel.reflection .note p { margin: 0; }
.panel.reflection .line[data-tone="void"], .panel.reflection .not-measured { color: var(--mdd-void-text); }
.panel.reflection .tick-row { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; margin-top: var(--mdd-space-2); }
.panel.reflection .record .events li, .panel.reflection .record .ledger li { font-size: 12px; overflow-wrap: anywhere; }
@media (width < 768px) { .panel.reflection .reflection-columns { grid-template-columns: minmax(0, 1fr); } }
.panel h3 { font-size: 18px; margin-top: var(--mdd-space-2); }
.panel h4 { font-size: 14px; color: var(--mdd-void-text); margin: var(--mdd-space-2) 0 0; }
.quiet { color: var(--mdd-void-text); font-size: 12px; }
.link { background: none; border: 0; padding: 0; color: var(--mdd-link); cursor: pointer; font: inherit; text-decoration: underline; }
.asks, .colleagues, .queue, .timeline, .chunks, .invariants, .cadences, .environments, .configuration, .reviews, .unclaimed, .bin, .open-sessions, .run-results, .team-mdd, .service, .standing-checks, .term-uses, .groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-2); }
.ask { border: 1px solid var(--mdd-border); border-left: 4px solid var(--mdd-uncertain); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); display: grid; gap: var(--mdd-space-1); scroll-margin-top: var(--mdd-space-4); }
.ask[data-lit="yes"] { outline: 2px solid var(--mdd-now); outline-offset: 2px; }
.ask .question { margin: 0; font-weight: 600; color: var(--mdd-heading); }
.ask .waiting, .ask .why { margin: 0; font-size: 12px; color: var(--mdd-void-text); }
.ask .controls { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.ask .consequence { font-size: 12px; color: var(--mdd-void-text); }
.ask .answer.standing { border-color: var(--mdd-accent); }
.colleague { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 14px; }
.notify-offer { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 14px; border-top: 1px solid var(--mdd-border); padding-top: var(--mdd-space-2); }
.narrowing { display: flex; flex-wrap: wrap; gap: var(--mdd-space-3); align-items: center; font-size: 12px; }
.narrowing select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--mdd-space-3); }
.column { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); display: grid; gap: var(--mdd-space-2); align-content: start; background: var(--mdd-page-bg); }
.column h3 { font-size: 14px; margin: 0; }
.column .count { color: var(--mdd-void-text); font-weight: 400; }
.change-card { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); background: var(--mdd-surface-bg); display: grid; gap: var(--mdd-space-1); }
.change-card .name { font: inherit; font-weight: 600; color: var(--mdd-heading); background: none; border: 0; text-align: left; cursor: pointer; padding: 0; }
.change-card .facts, .change-card .sessions { margin: 0; font-size: 12px; color: var(--mdd-void-text); }
.change-card .sessions { display: flex; flex-wrap: wrap; gap: var(--mdd-space-1); }
.change-card .overlap { margin: 0; font-size: 12px; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--mdd-space-3); font-size: 14px; }
.change-frame .rationale { margin: 0; font-style: italic; }
.change-frame .facts { margin: 0; font-size: 14px; }
.account { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 0; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); background: var(--mdd-surface-bg); }
.readiness ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mdd-space-1); font-size: 14px; }
.readiness li svg { width: 14px; height: 14px; vertical-align: middle; margin-right: var(--mdd-space-1); }
.readiness li[data-present="no"] { color: var(--mdd-void-text); }
.compose-acts { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); }
.chunk { font-size: 14px; }
.chunk .lights { display: block; font-size: 12px; color: var(--mdd-accent); padding-left: var(--mdd-space-4); }
.chunk .edits { font-size: 12px; color: var(--mdd-void-text); }
.timeline li { display: grid; grid-template-columns: max-content 1fr; gap: var(--mdd-space-2); font-size: 14px; border-left: 2px solid var(--mdd-border); padding-left: var(--mdd-space-2); }
.timeline li[data-landing="yes"] { border-left-color: var(--mdd-aligned); font-weight: 600; }
.timeline li[data-land-step="yes"] { border-left-color: var(--mdd-accent); }
.timeline li[data-tone="misaligned"] { border-left-color: var(--mdd-misaligned); }
.timeline .at { font-family: var(--mdd-monospace); font-size: 12px; color: var(--mdd-void-text); }
.ops-section { display: grid; gap: var(--mdd-space-2); border-top: 1px solid var(--mdd-border); padding-top: var(--mdd-space-2); }
.invariants li, .cadences li, .environments li, .configuration li, .reviews li, .unclaimed li { font-size: 14px; }
.invariant-ask { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; padding: var(--mdd-space-2); border: 1px solid var(--mdd-uncertain); border-radius: var(--mdd-radius-card); background: var(--mdd-uncertain-soft); }
.invariant-ask p { margin: 0; flex-basis: 100%; }
.run-live { display: inline-flex; align-items: center; gap: var(--mdd-space-1); margin: 0; }
.run-live svg { width: 16px; height: 16px; }
.act-row { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.act-row select, .act-row input, .unclaimed select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); min-height: 32px; }
.leaders[data-stopped="yes"] { color: var(--mdd-misaligned-text); }
.tab .popout { background: none; border: 0; padding: 0; margin-left: var(--mdd-space-1); color: var(--mdd-void-text); cursor: pointer; display: inline-flex; }
.tab .popout svg { width: 12px; height: 12px; }
.mark[data-tone="misaligned"] svg { width: 12px; height: 12px; }

/* 8.3: THE READER AS A PANEL (part-du7vo2, part-7jypxp), THE EVENT COLUMNS; the shared heading and empty state (gui-b4vftz, gui-ikmfqj). */
.heading { display: flex; align-items: baseline; gap: var(--mdd-space-2); scroll-margin-top: var(--mdd-space-6); }
.heading .words.as-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.heading .copy-link { background: none; border: 0; padding: 0; color: var(--mdd-void-text); cursor: pointer; display: inline-flex; opacity: 0; }
.heading:hover .copy-link, .heading .copy-link:focus { opacity: 1; }
.heading .copy-link svg { width: 14px; height: 14px; }
.heading .copied { font-size: 12px; color: var(--mdd-aligned-text); }
.empty-state { display: grid; justify-items: center; gap: var(--mdd-space-2); padding: var(--mdd-space-4); color: var(--mdd-void-text); text-align: center; }
.empty-state .illustration { width: 100%; max-width: 20rem; height: auto; color: var(--mdd-void); }
.empty-state .empty-heading { margin: 0; font-weight: 600; color: var(--mdd-heading); }
.empty-state .empty-words { margin: 0; font-size: 14px; }
.panel .header .controls { display: flex; flex-wrap: wrap; gap: var(--mdd-space-1); margin-left: auto; }
.panel.reader { display: grid; gap: var(--mdd-space-3); align-content: start; }
.reader-tools { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.reader-tools select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); min-height: 32px; }
.reader-head .chunk-facts { margin: 0; font-size: 12px; color: var(--mdd-void-text); }
.reader-head .chunk-id { font-family: var(--mdd-monospace); font-size: var(--mdd-type-text-code); }
.reader-head .because { margin: 0; font-size: 12px; font-style: italic; color: var(--mdd-void-text); }
.reader-marks { display: flex; flex-wrap: wrap; gap: var(--mdd-space-1); }
.reader-marks .ask-lit { cursor: pointer; }
.reader-body .prose { font-size: 16px; line-height: 1.5; }
.reader-body .collapsed-line { margin: 0; color: var(--mdd-void-text); }
.sigil { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dotted var(--mdd-link); color: var(--mdd-link); }
.sigil[data-tone="uncertain"] { border-bottom-style: dashed; border-bottom-color: var(--mdd-uncertain); color: var(--mdd-uncertain-text); }
.cite { font-family: var(--mdd-monospace); font-size: var(--mdd-type-text-code); }
.cite.gone { color: var(--mdd-misaligned-text); text-decoration: line-through; }
.moves-head { font-size: 14px; color: var(--mdd-void-text); margin: var(--mdd-space-2) 0 0; }
.reader-moves .axis, .reader-moves .more { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-2); background: var(--mdd-surface-bg); margin-bottom: var(--mdd-space-2); }
.reader-moves summary { cursor: pointer; font-weight: 600; color: var(--mdd-heading); }
.reader-moves .edges, .reader-moves .bound, .neighbours, .invocations, .commits { list-style: none; margin: var(--mdd-space-1) 0 0; padding: 0; display: grid; gap: var(--mdd-space-1); font-size: 14px; }
.reader-moves .edges .from { color: var(--mdd-void-text); }
.reader-moves .edges .words { font-style: italic; }
.reader-moves .kind { margin: var(--mdd-space-2) 0 0; font-size: 12px; color: var(--mdd-void-text); }
.reader-moves .history { margin-top: var(--mdd-space-2); }
.neighbours li[data-state="collapsed"] a { color: var(--mdd-void-text); }
.neighbours .why-here { font-size: 12px; color: var(--mdd-void-text); }
.reader-term .term { border: 1px solid var(--mdd-accent); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); display: grid; gap: var(--mdd-space-2); }
.reader-term .definition { margin: 0; }
.reader-term .forms, .reader-term .invocations-count { margin: 0; font-size: 12px; color: var(--mdd-void-text); }
.reader-term .actions { display: flex; gap: var(--mdd-space-2); }
.picture-terms { font-size: 12px; color: var(--mdd-void-text); }
.column-tools { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 12px; color: var(--mdd-void-text); }
.column-tools select { font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); min-height: 32px; }
.events li[data-in-view="yes"] { border-left: 4px solid var(--mdd-now); padding-left: var(--mdd-space-2); }
.panel.installation { display: grid; gap: var(--mdd-space-3); align-content: start; }
.panel.installation .reading { font-size: 14px; }
.panel.installation .reading[data-tone="misaligned"] { color: var(--mdd-misaligned-text); }
.panel.installation .reading svg { width: 14px; height: 14px; vertical-align: middle; }
table.data { border-collapse: collapse; font-size: 14px; width: 100%; }
table.data th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mdd-void-text); border-bottom: 1px solid var(--mdd-border); padding: var(--mdd-space-1) var(--mdd-space-2); }
table.data td { border-bottom: 1px solid var(--mdd-border); padding: var(--mdd-space-1) var(--mdd-space-2); vertical-align: top; }
.rail .installation { margin-top: auto; }

/* 8.5: A PERSON'S WORD AND PRESENCE (part-acl6g6, part-1hkmy7, part-27t43g). */
.presence { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; padding: var(--mdd-space-1) var(--mdd-space-3); border-bottom: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); font-size: 12px; min-height: 32px; }
.presence .present { display: inline-flex; align-items: center; gap: var(--mdd-space-1); }
.presence .disc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 600; color: var(--mdd-cloud-white); box-shadow: 0 0 0 2px var(--mdd-now); }
.presence .disc[data-hue="chathams-blue"] { background: var(--mdd-chathams-blue); }
.presence .disc[data-hue="jelly-bean"] { background: var(--mdd-jelly-bean); }
.presence .disc[data-hue="java"] { background: var(--mdd-java); }
.presence .disc[data-hue="ocean-green"] { background: var(--mdd-ocean-green); }
.presence .disc[data-hue="uncertain"] { background: var(--mdd-uncertain); }
.presence .disc[data-hue="misaligned"] { background: var(--mdd-misaligned); }
.presence .disc[data-hue="feedback"] { background: var(--mdd-feedback); }
.dark .presence .disc { color: var(--mdd-gable-green); }
.presence .presence-marks { display: inline-flex; gap: var(--mdd-space-1); }
.presence .button.small { min-height: 24px; }
.ceremony { border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); background: var(--mdd-surface-bg); color: var(--mdd-text); padding: var(--mdd-space-4); max-width: 40rem; width: calc(100% - 2 * var(--mdd-space-4)); }
.ceremony::backdrop { background: rgba(0, 0, 0, 0.4); }
.ceremony-body { display: grid; gap: var(--mdd-space-3); }
.ceremony h2 { margin: 0; }
.ceremony h3 { margin: var(--mdd-space-2) 0 var(--mdd-space-1); font-size: 14px; }
.ceremony .told { margin: 0; font-size: 14px; border-left: 4px solid var(--mdd-uncertain); padding-left: var(--mdd-space-2); }
.ceremony .told[data-tone="void"] { border-left-color: var(--mdd-void); }
.ceremony .statement { margin: 0; font-weight: 600; color: var(--mdd-heading); font-size: 16px; }
.ceremony .scope ul { margin: 0; padding-left: var(--mdd-space-4); font-size: 14px; }
.ceremony .own-word { display: flex; align-items: center; gap: var(--mdd-space-2); font-weight: 600; }
.ceremony .actions { display: flex; gap: var(--mdd-space-2); justify-content: flex-end; }
.ceremony .refusal { margin: 0; }
.mark.understood[data-tone="accepted"] { background: var(--mdd-accepted-soft, var(--mdd-solitude)); color: var(--mdd-accepted-text, var(--mdd-chathams-blue)); }
.panel.editor { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: var(--mdd-space-2); }
.panel.editor textarea.document { font: inherit; font-size: 16px; line-height: 1.5; padding: var(--mdd-space-3); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); background: var(--mdd-page-bg); color: var(--mdd-text); resize: vertical; min-height: 12rem; }
.panel.editor .cursors { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--mdd-space-2); font-size: 12px; color: var(--mdd-void-text); }
.panel.editor .editor-foot { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.panel.editor .said[data-tone="misaligned"] { color: var(--mdd-misaligned-text); }
.panel.editor .said[data-tone="aligned"] { color: var(--mdd-aligned-text); }
.test-verdicts, .wastes { margin: 0; padding-left: var(--mdd-space-4); font-size: 12px; color: var(--mdd-void-text); }

/* 8.8s: THE UNDERSTAND VIEW (part-3mbxry, part-wrbfjt's shell half, part-xme1jm). */
.panel.understand { display: grid; gap: var(--mdd-space-3); align-content: start; }
.panel.understand .waiting-items, .panel.understand .states, .panel.understand .positions, .panel.understand .alerts, .panel.understand .touched, .panel.understand .happenings { margin: 0; padding-left: var(--mdd-space-4); display: grid; gap: var(--mdd-space-1); font-size: 14px; }
.panel.understand .happenings { font-size: 12px; color: var(--mdd-void-text); }
.panel.understand .quiet, .panel.understand .since { font-size: 12px; color: var(--mdd-void-text); }
.panel.understand .orientation { border: 1px solid var(--mdd-accent); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); }
.panel.understand .orientation ul { margin: var(--mdd-space-1) 0 0; padding-left: var(--mdd-space-4); }
.panel.understand .state .commit { font-family: var(--mdd-monospace); font-size: var(--mdd-type-text-code); }
.panel.understand details > summary { cursor: pointer; font-weight: 600; color: var(--mdd-heading); font-size: 18px; }
.panel.understand dl { display: grid; gap: var(--mdd-space-1); font-size: 14px; }
.panel.understand dt { font-weight: 600; }
.panel.understand dd { margin: 0 0 var(--mdd-space-2); }
.panel.understand select.colleague { font: inherit; font-size: 12px; min-height: 28px; }
.panel.understand .account { white-space: pre-wrap; font-size: 14px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-card); padding: var(--mdd-space-3); background: var(--mdd-surface-bg); }
.mark.moved-since-mark { background: var(--mdd-accepted-soft, var(--mdd-solitude)); color: var(--mdd-accepted-text, var(--mdd-chathams-blue)); }
.mark.team-understood[data-tone="accepted"], .mark.roster[data-tone="accepted"] { background: var(--mdd-accepted-soft, var(--mdd-solitude)); color: var(--mdd-accepted-text, var(--mdd-chathams-blue)); }
.mark.lit { background: var(--mdd-solitude); color: var(--mdd-chathams-blue); border-color: var(--mdd-now); }
.mark.sign-off-stale { background: var(--mdd-accepted-soft, var(--mdd-solitude)); }
.reader-team { display: grid; gap: var(--mdd-space-1); font-size: 12px; color: var(--mdd-void-text); }
.reader-team ul { margin: 0; padding-left: var(--mdd-space-4); }
.reader-readings { font-size: 14px; }
.reader-readings details { margin: var(--mdd-space-1) 0; }
.reader-readings summary { cursor: pointer; }
.reader-readings ul { margin: var(--mdd-space-1) 0 0; padding-left: var(--mdd-space-4); font-size: 12px; }
.neighbours li .mark { margin-left: var(--mdd-space-1); }
.neighbours li.colleague-here, .reader-head .heading.colleague-here { outline: 2px solid var(--mdd-chathams-blue); outline-offset: 2px; border-radius: var(--mdd-radius-control); }
[data-hue="jelly-bean"].colleague-here { outline-color: var(--mdd-jelly-bean); }
[data-hue="java"].colleague-here { outline-color: var(--mdd-java); }
[data-hue="ocean-green"].colleague-here { outline-color: var(--mdd-ocean-green); }
[data-hue="uncertain"].colleague-here { outline-color: var(--mdd-uncertain); }
[data-hue="misaligned"].colleague-here { outline-color: var(--mdd-misaligned); }
[data-hue="feedback"].colleague-here { outline-color: var(--mdd-feedback); }

/* 10.3: VOICE UNDER ISOLATION (part-rq1yeq Read-aloud, part-y32ntc Room). The voice strip stands above the speaking line, outside every book, so the room works with the shelf collapsed (resp-tb3jva). */
.voice { grid-area: voice; display: grid; gap: var(--mdd-space-1); border-top: 1px solid var(--mdd-border); background: var(--mdd-surface-bg); padding: 0 var(--mdd-space-4); }
.voice:empty { display: none; }
.read-aloud { display: grid; gap: var(--mdd-space-1); padding: var(--mdd-space-1) 0; font-size: 12px; }
.read-aloud .controls { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.read-aloud .controls .speed-label, .read-aloud .controls .opt-in { display: inline-flex; align-items: center; gap: var(--mdd-space-1); color: var(--mdd-void-text); }
.read-aloud .controls select { font: inherit; font-size: 12px; min-height: 28px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); }
.read-aloud .button.listen[aria-pressed="true"] { border-color: var(--mdd-now); color: var(--mdd-accent); }
.read-aloud .what { margin: 0; color: var(--mdd-void-text); }
.read-aloud .what[data-tone="misaligned"] { color: var(--mdd-misaligned-text); }
.read-aloud .what[data-hue="chathams-blue"] { border-left: 4px solid var(--mdd-chathams-blue); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="jelly-bean"] { border-left: 4px solid var(--mdd-jelly-bean); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="java"] { border-left: 4px solid var(--mdd-java); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="ocean-green"] { border-left: 4px solid var(--mdd-ocean-green); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="uncertain"] { border-left: 4px solid var(--mdd-uncertain); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="misaligned"] { border-left: 4px solid var(--mdd-misaligned); padding-left: var(--mdd-space-2); }
.read-aloud .what[data-hue="feedback"] { border-left: 4px solid var(--mdd-feedback); padding-left: var(--mdd-space-2); }
.read-aloud .sentence { margin: 0; font-size: 14px; color: var(--mdd-text); }
.read-aloud .sentence .word.lit { background: var(--mdd-solitude); color: var(--mdd-chathams-blue); border-radius: var(--mdd-radius-control); }
.card[data-reading="yes"] { outline: 2px solid var(--mdd-now); outline-offset: 2px; border-radius: var(--mdd-radius-card); }
mark.reading-sentence { background: var(--mdd-solitude); color: var(--mdd-chathams-blue); }
.room-draft { display: grid; gap: var(--mdd-space-2); padding: var(--mdd-space-2) 0; font-size: 14px; border-top: 1px solid var(--mdd-border); }
.room-draft[hidden], .read-aloud .sentence[hidden] { display: none; }
.room-draft .room-head { display: flex; align-items: center; gap: var(--mdd-space-2); }
.room-draft h3 { font-size: 14px; }
.room-draft .contributions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-1); max-height: calc(3 * var(--mdd-space-9)); overflow: auto; }
.room-draft .contribution { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: baseline; }
.room-draft .contribution .who { font-weight: 600; color: var(--mdd-heading); }
.room-draft .contribution[data-unresolved="yes"] .who { color: var(--mdd-uncertain-text); }
.room-draft .others-drafts .draft-text { margin: 0; font-size: 12px; color: var(--mdd-void-text); }
.room-draft .minutes-label { display: grid; gap: var(--mdd-space-1); font-size: 12px; color: var(--mdd-void-text); }
.room-draft textarea.minutes { font: inherit; font-size: 14px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); padding: var(--mdd-space-2); background: var(--mdd-page-bg); color: var(--mdd-text); resize: vertical; }
.room-draft .room-foot { display: flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; }
.room-draft input.say { flex: 1; min-height: 44px; font: inherit; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); padding: 0 var(--mdd-space-3); background: var(--mdd-page-bg); color: var(--mdd-text); }
.presence .button.mic[data-mic="open"] { border-color: var(--mdd-now); color: var(--mdd-accent); }
.presence .isolation { display: inline-flex; flex-wrap: wrap; gap: var(--mdd-space-2); align-items: center; font-size: 12px; color: var(--mdd-void-text); }
.presence .isolation input.language { width: 3.5rem; font: inherit; font-size: 12px; border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); background: var(--mdd-page-bg); color: var(--mdd-text); padding: 0 var(--mdd-space-1); }

/* 10.5s (part-g0menn, part-mrdk18): what a session started and kept, in its book; the Penpot keep on a change's page. */
.started-and-kept { display: grid; gap: var(--mdd-space-2); }
.started-and-kept h4 { margin: 0; font-size: 14px; }
.started-and-kept ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdd-space-1); }
.started-and-kept li { font-size: 14px; border-bottom: 1px solid var(--mdd-border); padding-bottom: var(--mdd-space-1); }
.started-and-kept pre.output, .started-and-kept pre.artefact-text { font-family: var(--mdd-monospace); font-size: var(--mdd-type-text-code); max-height: 12em; overflow: auto; margin: var(--mdd-space-1) 0 0; }
.started-and-kept .licence, .started-and-kept .retention { margin: 0; font-size: 12px; }
.penpot { display: grid; gap: var(--mdd-space-2); border-top: 1px solid var(--mdd-border); padding-top: var(--mdd-space-2); }
.penpot fieldset.declared { display: grid; gap: var(--mdd-space-1); border: 1px solid var(--mdd-border); border-radius: var(--mdd-radius-control); }
.penpot .token-rows, .penpot .tokens-written { margin: 0; font-size: 14px; }
.penpot .tokens-written li[data-ok="no"] { color: var(--mdd-misaligned-text); }