*{box-sizing:border-box}
:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6063' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html,body{height:100%}
body{margin:0;background:var(--color-surface);color:var(--color-text);font:var(--text-body)/var(--text-body--line-height) var(--font-sans);-webkit-font-smoothing:antialiased}
/* The element reset sits in @layer base so the registry utilities win: `font` is a shorthand, and unlayered it reset
   the weight, size and line height a variant had just set, which drew every button at 400. The same holds for the
   fallback radius, which a bare button this file owns still gets because no utility competes for it. */
@layer base{
 button,input,textarea,select{font:inherit;color:inherit}
 button{cursor:pointer;border:0;background:none;padding:0}
 button:not([data-ui-adapter]):not([data-slot]){border-radius:var(--radius-control)}
}
input:not([type=checkbox]):not([type=radio]),textarea{border-radius:var(--radius-row)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([data-size]),textarea:not([data-size])){min-height:var(--control-height);background:var(--color-fill)}
select{min-height:var(--control-height);border-radius:var(--radius-row);background-color:var(--color-fill);cursor:pointer}
select:not([multiple]):not([data-slot=native-select]){appearance:none;background-image:var(--icon-chevron);background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-inline-end:34px}
select:disabled{cursor:not-allowed;color:var(--color-text-muted);background-color:var(--color-fill-strong)}
@media(forced-colors:active){select:not([multiple]){appearance:auto;background-image:none}}
button:disabled{cursor:not-allowed;opacity:.55}
a{color:var(--color-accent-text)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
:focus-visible:not([data-ui-adapter]):not([data-slot]){border-radius:var(--radius-control)}
h1,h2,h3,p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:var(--text-caption)/var(--text-caption--line-height) var(--font-sans);color:var(--color-text-muted);font-weight:500}
.error-text{color:var(--color-danger);font-size:var(--text-body)}
/* What happened and what survived it. A session that ended is a state, not a refusal. */
.gate-card .gate-note{color:var(--color-text);font-size:var(--text-body);border-inline-start:2px solid var(--color-text);padding-inline-start:12px}

/* Invitation gate */
.gate{min-height:100%;display:grid;grid-template-columns:minmax(320px,440px) minmax(0,520px);gap:48px;align-items:center;justify-content:center;padding:32px 24px}
.gate-card{display:grid;gap:16px}
.gate-card h1{font-size:var(--text-title);line-height:var(--text-title--line-height);font-weight:500;letter-spacing:var(--tracking-title)}
.gate-card p{color:var(--color-text-muted)}
.gate-card form{display:grid;gap:8px}
.gate-card label{font-size:var(--text-label)}
.gate-card [data-variant=default]{justify-self:start}
.gate-howard{mix-blend-mode:multiply}
.howard-scene{position:relative;max-width:100%;aspect-ratio:3/2;mix-blend-mode:multiply;filter:brightness(1.145)}
.howard-scene img,.howard-scene video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.howard-scene video{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}
.howard-scene.playing video{opacity:1}

/* Shell. Section 4 of the product specification: navigation about 256 px, a working column of 560 px
   and more, and a context panel of about 380 px. The case used to have no region of its own. */
.shell{display:grid;grid-template-columns:256px minmax(0,1fr);height:100vh}
.canvas{background:var(--color-surface-sunken);overflow-y:auto;min-width:0;height:100vh;padding:16px 16px;display:flex;flex-direction:column;gap:var(--gap-block)}
.canvas ul,.canvas li,.canvas button{min-width:0}
#case-detail{min-width:0}
/* The tab strip that replaces the panel below 1100 px, where there is no room for a third column. */
.panes{display:none;gap:4px}
.sidebar{background:var(--color-surface-sunken);padding:16px 12px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--text-body)}
.side-section{min-width:0}
.side-section ul,.side-section li,.side-section button{min-width:0}
.side-section ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side-empty,.side-note{font-size:var(--text-caption);color:var(--color-text-muted)}
summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--nav-height);cursor:pointer}summary::-webkit-details-marker{display:none}summary>[data-animate-slot]{margin:0;transition:rotate .18s ease}details[open]>summary[data-animate-ready=ChevronRight]>[data-animate-slot]{rotate:90deg}
/* Opening a case and filing a pack are the two things a broker cannot work without, so they are
   controls rather than grey captions. While the case list is empty, opening one is the only thing
   the interface can usefully be asked to do, so it is the one primary action in view; as soon as a
   case exists it goes quiet again and the blue goes back to focus and selection. */
#no-cases:not([hidden]) ~ #new-case{background:var(--color-accent);color:var(--color-text-inverse)}
#no-cases:not([hidden]) ~ #new-case:hover{background:var(--color-accent-hover);color:var(--color-text-inverse)}
/* A list may dress the buttons it holds, but not one that declares its own square: an icon button keeps the width and
   padding its size variant gives it, here and in .source-list below, so a row menu is the 40px target it says it is. */
.conv-list button:not([data-size^=icon]){width:100%;text-align:start;padding:4px 8px;border-radius:var(--radius-control);font-size:var(--text-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-brief{padding:8px 0;margin:0 24px;display:grid;gap:8px}
.brief-details summary{font-size:var(--text-ui);font-weight:500;color:var(--color-text)}
.brief-details[open]{display:grid;gap:8px}
.brief-alert{color:var(--color-danger)}
.conversation-result{margin:24px;display:grid;gap:12px;justify-items:start}
.conversation-result h2{font-size:var(--text-title);line-height:var(--text-title--line-height);font-weight:500;letter-spacing:var(--tracking-title)}
.case-source-row{display:flex;align-items:start;gap:4px}
.case-source-row>button:first-child{flex:1}
.case-source-row>.row-menu{flex:none}
.case-brief p{font-size:var(--text-label)}
.case-brief .label{display:block}
.attn-filters{display:grid;gap:8px;margin:0 0 8px}
.attn-filters select{display:block;width:100%;margin-top:4px;min-width:0}
.account-menu{min-width:0}
.account-menu summary{cursor:pointer;font-size:var(--text-caption);font-weight:500}
.menu-pop{position:absolute;z-index:20;display:grid;gap:4px;min-width:min(280px,80vw);padding:6px;border-radius:var(--radius-card);background:var(--color-surface-raised);box-shadow:var(--shadow-popover);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(var(--rise-popover)) scale(var(--scale-enter))}to{opacity:1;transform:none}}
.menu-pop button:not([role=tab]):not([data-slot]){text-align:start;padding:8px 12px;min-height:var(--menu-item-height);border-radius:var(--radius-control);font-size:var(--text-label);line-height:var(--text-label--line-height)}
.menu-pop button:not([role=tab]):not([data-slot]):hover:not(:disabled){background:var(--color-accent-subtle)}
.attach-wrap{position:relative}
.composer-suggest{bottom:100%;inset-inline:0;margin-bottom:8px}
.composer-modes label,.composer-modes select{min-width:0;max-width:100%}
.attn-meta,.attn-due,.attn-block{display:block;font-size:var(--text-caption);color:var(--color-text-muted)}
.attn-new{animation:pop .16s ease}
@media (prefers-reduced-motion:reduce){.attn-new{animation:none}}
.composer-modes{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:8px}
.composer-modes select{display:block;margin-top:4px}
.daily-review{margin:12px 16px 0;display:grid;gap:12px}
.daily-table-wrap{max-height:220px;overflow:auto;border-radius:var(--radius-row)}
.daily-table{width:100%;border-collapse:collapse;font-size:var(--text-caption)}
.daily-table th,.daily-table td{padding:8px 8px;text-align:start;vertical-align:top}
.daily-table th{position:sticky;top:0;background:var(--color-fill)}
.draft-stale{background:var(--color-warning-bg);color:var(--color-warning-ink);border-radius:var(--radius-row);padding:8px;margin:8px 0;font-size:var(--text-label)}
.case-brief textarea{width:100%;min-height:96px;font:var(--text-label)/var(--text-label--line-height) var(--font-sans)}
.conv-list button:hover{background:var(--color-accent-subtle)}
.conv-list button[aria-current="true"]{background:var(--color-accent-subtle);color:var(--color-accent);font-weight:500}
.source-list button:not([data-size^=icon]),.source-list a{width:100%;text-align:start;padding:4px 8px;border-radius:var(--radius-control);display:grid;gap:1px}
.source-list a{color:var(--color-text);text-decoration:none}
.source-list button:hover,.source-list a:hover{background:var(--color-accent-subtle)}
.record-pick{width:100%;font:inherit;font-size:var(--text-caption);padding:4px 8px;border:2px solid transparent;border-radius:var(--radius-row);background:var(--color-fill);color:var(--color-text)}
.record-pick:focus-visible,#library-query:focus-visible,#project-case-picker:focus-visible,#connected-files-query:focus-visible{background:var(--color-surface);border-color:var(--color-accent);box-shadow:var(--ring)}
.source-list .src-name{font-size:var(--text-caption);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-list .src-meta{font-size:var(--text-caption);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* What was not read of a component is the one line that must not be cut off: a coverage
   warning clipped to "56 of 60 pages re..." is a warning the broker cannot act on. The red is
   this interface's ink for a refusal and for machine-read provenance, so it carries a component
   a machine read off an image, one nobody could read, and one read only in part. */
.source-list .src-meta.whole{overflow:visible;text-overflow:clip;white-space:normal}
/* The same rule, applied to every line the case itself carries rather than to the one state that
   remembered to ask for it. Measured at 1440x900 on a six-component pack: 16 of the 36 lines in
   this panel were cut off, among them both machine-read warnings ("read by machine from an image,
   co..."), the sentence naming who settles a disputed figure, the question's addressee and its due
   date, and the client's name in the case list. The session's mail list keeps its single line: a
   clipped subject costs a broker nothing, and a clipped provenance costs them the case. */
#case-detail .src-name,#case-detail .src-meta,#case-detail p,#cases button{overflow:visible;text-overflow:clip;white-space:normal}
.source-list .src-meta.machine-read{color:var(--color-danger)}
@keyframes arrive{from{opacity:0;transform:translateY(-4px);background:var(--color-accent-subtle)}to{opacity:1;transform:none}}
/* What a broker may believe about a result, and about an approval given on it.

   The word carries the meaning and the rule beside it supports the word, which is the same discipline
   the comparison's own marks use: a stale result drawn only in a colour is defect D-23 moved from the
   grid into the panel, and it fails V-06 and the accessibility rule that information is never carried
   by colour alone. None of these is --color-danger. That token is a refusal and machine-read provenance under
   ruling R5, and a result that has gone out of date is neither: it is a fact about the case, and
   spending the refusal colour on it is what left --color-danger carrying five jobs at once.

   These lines are not --color-text-muted either. A result's standing is a critical value and V-02 keeps a
   critical value out of label grey; the measured defect was exactly that, "stale" in the label grey
   at 11 px, the colour and size of a character count. */
.standing{margin:4px 0 0;font-size:var(--text-caption);font-weight:500;line-height:var(--text-label--line-height);color:var(--color-text);padding-inline-start:8px;border-inline-start-width:2px;border-inline-start-color:var(--color-text)}
.standing-ready{border-inline-start-style:solid}
.standing-stale{border-inline-start-style:double;border-inline-start-width:4px}
.standing-failed{border-inline-start-style:dotted;border-inline-start-width:3px}
.standing-approved{border-inline-start-style:solid}
.standing-lapsed{border-inline-start-style:double;border-inline-start-width:4px}
/* A component that has been corrected, marked on the component itself. It is a fact about a document
   and not a warning, so it is the quietest rule of the family. */
.standing-corrected{display:block;border-inline-start-style:solid;border-inline-start-width:1px}
/* The sentence the domain published under the word. It sits inside the rule of the line above it, so
   the reason reads as part of the standing rather than as a caption beside it. */
.standing-why{margin:4px 0 0;padding-inline-start:8px;font-size:var(--text-caption);line-height:var(--text-body--line-height);color:var(--color-text);white-space:normal}
/* What kind of thing is outstanding, as a heading the list can be scanned by. The item's own sentence
   sits under it at the weight of the reasons, so the kinds are what the eye lands on first. */
.item-kind{margin:8px 0 0;font-size:var(--text-caption);font-weight:500;line-height:var(--text-label--line-height);color:var(--color-text)}
/* A job that is running now, at the running-row cycle ui-context.md sets: opacity 1 to 0.72 over
   1.6 s. It is not a percentage and not a spinner: the row already says in words that it is running,
   and this only keeps the eye on it. The rule at the foot of this file turns every animation off
   under prefers-reduced-motion, and the words are unchanged when it does. */
.job-running{animation:working 1.6s ease-in-out infinite alternate}
@keyframes working{from{opacity:1}to{opacity:.72}}
#case-detail .source-list li + li .item-kind{padding-top:8px}
/* Which market agreed which version. The grid scrolls inside its own container, which is what
   ui-context.md requires of every wide table, and the panel itself never scrolls sideways. The
   thread's own table-wrap bleeds 16 px into the message margin; inside a 351 px panel that same rule
   made the panel 367 px wide and scrolled the whole of it sideways, so here it is contained. */
#case-detail .table-wrap{margin:0;padding:0;max-width:100%}
.market-grid{width:100%;border-collapse:collapse;font-size:var(--text-caption)}
.market-grid th,.market-grid td{vertical-align:top;text-align:start;padding-block:4px;padding-inline:0 8px}
.market-grid th{font-weight:500;color:var(--color-text-muted);white-space:nowrap}
.market-grid td.field{min-width:118px}
.market-grid .market-name{display:block;font-size:var(--text-caption);color:var(--color-text)}
.market-grid .market-section{display:block;color:var(--color-text-muted)}
.market-grid .cell-state{display:block;color:var(--color-text);font-weight:500;min-width:112px}
/* A premium is not emphasised beyond the text around it: a highlighted figure reads as a
   recommendation, and this product does not make one. It is set in the comparable-strings face
   because it is compared character by character. */
.market-grid .cell-premium{display:block;margin-top:4px;font-family:var(--font-sans);color:var(--color-text)}
.market-grid .cell-when,.market-grid .cell-empty{display:block;margin-top:4px;color:var(--color-text-muted);font-weight:400}
.connect-row{display:grid;gap:8px}
.connect{display:flex;align-items:center;gap:8px;background:var(--color-fill);border-radius:var(--radius-control);padding:8px 8px;color:var(--color-text);text-decoration:none;font-size:var(--text-caption);font-weight:500}
.connect img{flex:none;width:16px;height:16px}
.connect:hover{background:var(--color-fill-hover);color:var(--color-accent)}
.connect[aria-disabled="true"]{color:var(--color-text-muted);background:var(--color-fill-strong);pointer-events:none}
.connect[aria-disabled="true"] img{opacity:.45;filter:grayscale(1)}
.mail-account{font-size:var(--text-body);font-weight:500;overflow-wrap:anywhere}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh}
.topbar{height:var(--topbar-height);flex:none;padding:0 32px;background:var(--color-surface)}
.menu{display:none;background:var(--color-fill);border-radius:var(--radius-control);padding:4px 8px;font-size:var(--text-label)}
.thread{flex:1;overflow-y:auto;padding:32px 24px 12px}
.messages{max-width:var(--content-max);margin:0 auto}

/* Empty state */
.empty{max-width:720px;margin:0 auto;padding:8px 0 24px;text-align:center}
.empty-howard{width:260px;aspect-ratio:1.1;overflow:hidden;mix-blend-mode:multiply}
.empty-howard img,.empty-howard video{position:absolute;inset:auto;width:180%;max-width:none;height:auto;inset-inline-start:-40%;top:-17%}
.empty p{color:var(--color-text-muted);max-width:520px}
.starters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
/* With no case open there is one thing to offer and it is not a starter: it is the case itself. */
.starters.one{grid-template-columns:minmax(0,1fr);max-width:420px;justify-self:center}
.starters button{text-align:start;background:var(--color-fill);border-radius:var(--radius-card);padding:12px 16px;font-size:var(--text-label);line-height:var(--text-label--line-height)}
.starters .label{display:block;margin-bottom:4px}

/* Messages, adapted from the ChatGPT-style journey markup and inverted to light */
.user-bubble{justify-self:stretch;max-width:100%;background:var(--color-fill);color:var(--color-text);border-radius:var(--radius-row);padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-name{font-size:var(--text-caption);font-weight:600;min-height:24px}
.assistant-identity{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.assistant-status{font-size:var(--text-caption);line-height:var(--text-label--line-height);color:var(--color-text-muted);font-weight:400}
/* The consolidated specification's 18 by 18 px box, reconciling the earlier 16 by 20 px one. The
   head keeps its own proportions inside it and no longer sets the height of the agent's name row. */
.howard-avatar{display:block;width:18px;height:18px;flex:none;color:var(--color-text)}
.howard-avatar svg{display:block;width:100%;height:100%;overflow:visible}
.howard-eyes{fill:var(--color-surface);transform-box:fill-box;transform-origin:center}
.howard-gaze{transform-box:fill-box;transform-origin:center;transition:transform .14s ease}
.howard-avatar[data-state="focused"] .howard-gaze{transform:translateY(4px)}
.howard-avatar[data-state="thinking"] .howard-gaze{animation:howard-think 3.4s ease-in-out infinite}
.howard-avatar[data-state="reading"] .howard-gaze{animation:howard-read 1.8s ease-in-out infinite}
.howard-avatar:is([data-state="thinking"],[data-state="reading"],[data-state="writing"]) .howard-eyes{animation:howard-blink 4.8s ease-in-out infinite}
.howard-avatar[data-state="writing"] .howard-gaze{transform:translateY(5px)}
.howard-avatar[data-state="done"] .howard-eyes{transform:none}
.howard-avatar[data-state="done"][data-settling="true"] .howard-gaze{animation:howard-settle .14s ease}
@keyframes howard-settle{from{transform:var(--howard-from)}to{transform:translate(0,0)}}
.howard-avatar[data-state="error"] .howard-gaze{transform:translateX(-5px)}
.howard-avatar[data-state="stopped"] .howard-eyes{transform:scaleY(.3)}
@keyframes howard-blink{0%,43%,45.5%,100%{transform:scaleY(1)}44.25%{transform:scaleY(.08)}}
@keyframes howard-think{0%,100%{transform:translate(0,0)}35%,65%{transform:translate(5px,-5px)}}
@keyframes howard-read{0%,100%{transform:translate(-5px,3px)}65%{transform:translate(5px,3px)}}
.motion-paused .howard-avatar *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.howard-scene video{display:none}}
.assistant-content{padding-inline-start:24px;font-size:var(--text-body);line-height:var(--text-reading--line-height)}
.assistant-content p,.assistant-content ul,.assistant-content ol{margin:0}
.assistant-content .md{display:grid;gap:8px}
.assistant-content ul,.assistant-content ol{padding-inline-start:24px;display:grid;gap:4px}
.assistant-content strong{font-weight:600}
.skill-chip{display:flex;align-items:baseline;gap:4px;max-width:100%;font-size:var(--text-caption);line-height:var(--text-body--line-height);color:var(--color-text-muted)}
.skill-chip .label{font:inherit;color:inherit}
.skill-chip .skill-name{font-weight:400;color:inherit}

.connector-chip{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:var(--text-caption);color:var(--color-text-muted)}
.connector-chip img{width:14px;height:14px}
/* One task, with its steps under it. The turn used to be a flat list of tool rows with ticks, and
   the case's own durable job record was drawn nowhere at all. Criterion 3 keeps the broker's click,
   a tool reporting that it finished, a reference written down and an openable result apart: the head
   is the click, the rows are the steps, and the result is the card below this block. */
.task{border-radius:var(--radius-row);background:var(--color-fill);padding:8px 12px;display:grid;gap:8px}
.task-head{font-size:var(--text-label);font-weight:600;line-height:var(--text-label--line-height);overflow-wrap:anywhere}
.task-count{font-size:var(--text-caption);color:var(--color-text-muted);line-height:var(--text-label--line-height)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
/* The state of a step in words. A dot's shape alone is not a state a broker can read out. */
.step-state{font-size:var(--text-caption);color:var(--color-text-muted);white-space:nowrap}
.tool-row.error .step-state{color:var(--color-danger)}
.tool-row{color:var(--color-text-muted);font-size:var(--text-caption);line-height:var(--text-body--line-height);min-height:18px}
.tool-row .dot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--color-fill-strong)}
/* A step that is running pulses its own row at the specified 1.6 s, and the filled dot stays as the
   static mark of it. The spinner this replaces said "wait" about work that is meant to be left
   and come back to, and it carried the state in motion alone. */
/* The keyframes are not called "running": in the animation shorthand that word is a value of
   animation-play-state, so the browser reads it as the play state and leaves the animation with no
   name at all. */
.tool-row.running{animation:tool-running 1.6s ease-in-out infinite alternate}
.tool-row.running .dot{background:var(--color-accent)}
@keyframes tool-running{from{opacity:1}to{opacity:.72}}
.tool-row .tool-label{color:var(--color-text-muted);overflow-wrap:anywhere}
/* the previous grey measures 3.96:1 on white and this text is 11 px, so it used the token that measures
   5.19:1 instead. What a step produced is not decoration. */
.tool-row .tool-summary{font-size:var(--text-caption);color:var(--color-text-muted);overflow-wrap:anywhere}
.tool-row.error .tool-summary{color:var(--color-danger)}
.notice{border-inline-start:2px solid var(--color-accent);padding-block:4px;padding-inline:12px 0;color:var(--color-text-muted);font-size:var(--text-body)}
.notice.error{border-color:var(--color-danger);color:var(--color-danger)}
/* A broker's own Stop is not a refusal. The server's abort arrives as an error event, so an
   interruption used to be drawn in --color-danger with a red rule: the one colour this interface reserves for
   a refusal and for machine-read provenance was telling a broker their own decision was a fault. */
.notice.stopped{border-color:var(--color-text);color:var(--color-text)}

/* Artefact cards */
.card{background:var(--color-fill);border-radius:var(--radius-card);overflow:hidden}
.card-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px}
.card-bar .label{color:var(--color-text-muted)}
.card-body{padding:16px 16px}
.card-body h3{font-size:var(--text-body);font-weight:600}
.card-summary{color:var(--color-text-muted);font-size:var(--text-caption)}
.table-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
.card table{width:100%;border-collapse:collapse;font-size:var(--text-body);line-height:var(--text-body--line-height)}
.card th{text-align:start;font:var(--text-body)/var(--text-body--line-height) var(--font-sans);color:var(--color-text-muted);font-weight:400;padding-block:8px;padding-inline:0 8px}
.card td{padding:8px 8px 8px 0;vertical-align:top}
.card td.field{font-weight:500;width:30%}
/* --color-danger was carrying five jobs at once: a refusal, a commercial flag on a comparison row, a missing
   value, a deliberate stop and machine-read provenance, which is the one ruling R5 reserves it for.
   A value the draft could not fill and a flag on a row are both statements, not refusals, so they
   carry their own weight instead of the refusal ink. */
.card td.missing{color:var(--color-text);font-weight:500}
.flag{display:block;margin-top:4px;font-size:var(--text-caption);color:var(--color-text);font-weight:600}
/* The compact reference MAX ratified: [N] at 12px, following its text with no gap of any kind, so a figure and
   the source it rests on read as one thing. The glyph stays small and the pointer target does not: it lives
   entirely in an out-of-flow ::before, 36 by 36px on a fine pointer and 44 by 44px on a coarse one, so nothing
   in flow moves for it and the zero gap survives. */
.cite-sup{vertical-align:super;line-height:0}
.cite-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;margin:0;font-size:var(--text-caption);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-accent-text);border-radius:var(--radius-keycap);text-decoration:none}
.cite-mark::before{content:"";position:absolute;inset:var(--cite-target-block) var(--cite-target-inline)}
.cite-mark:hover,.cite-mark:focus-visible{background:transparent;text-decoration:underline;text-underline-offset:2px}
/* Inside a row of the grid the mark sits on the row's own baseline, not above it. */
.card td .cite-sup,.card th .cite-sup{vertical-align:baseline}
.cite-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)}
.cite-chip{gap:var(--space-2);font-weight:400}
.cite-number{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-1);border-radius:var(--radius-control);background:var(--color-accent-subtle);color:var(--color-accent-text);font-size:var(--text-caption);font-weight:500;font-variant-numeric:tabular-nums}
.cite-hint{display:block;font-size:var(--text-caption);color:var(--color-text);font-weight:500}
.cite-preview{display:grid;gap:var(--space-2);padding:var(--space-3);max-width:min(360px,calc(100vw - 32px));font-size:var(--text-label);line-height:var(--text-body--line-height)}
.cite-preview .source-quote{margin:0;text-wrap:pretty}
.cite-preview .src-meta{font-size:var(--text-caption);color:var(--color-text-muted)}
.cite-preview .src-meta.machine-read{color:var(--color-danger)}
.cite-preview button{justify-self:start}
/* A citation that reaches nothing durable is not drawn like one that reaches a stored immutable
   version. It keeps the citation's shape, because it is still the way to the words, and loses the
   blue that in this interface means a value rests on evidence the case holds. It says the rest in
   its own text. */
.cite-mark.cite-session{color:var(--color-text-muted);text-decoration:underline dotted;text-underline-offset:3px}
.cite-chip.cite-session .cite-number,.cite-chip.cite-chat .cite-number{background:var(--color-surface-hover);color:var(--color-text-muted)}
/* A card built on documents this case does not hold is not a caption: it is the reason to stop
   reading, so it carries the weight of the card's own title. It is not drawn in --color-danger, which this
   interface keeps for a refusal and for machine-read provenance. */
.card-offcase{font-size:var(--text-reading);font-weight:600;line-height:var(--text-label--line-height);border-inline-start:3px solid var(--color-text);padding-inline-start:12px}
.questions{margin:0;padding-inline-start:24px;display:grid;gap:4px;font-size:var(--text-label)}
.card-foot{font-size:var(--text-caption);color:var(--color-text-muted)}
/* A value a machine read off an image is never shown in the same ink as a quote off a text layer (R5). */
.machine-read{color:var(--color-danger)}
.email-to,.email-subject{padding:8px 16px;font-size:var(--text-body)}
.email-to span,.email-subject span{color:var(--color-text-muted);margin-inline-end:8px}
.email-subject{font-weight:600;font-size:var(--text-label)}
.email-body{padding:16px 16px;white-space:pre-wrap;font-size:var(--text-reading);line-height:var(--text-reading--line-height)}
.email-foot{padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--text-caption);color:var(--color-text-muted)}

/* Composer */
.composer-wrap{flex:none;padding:8px 24px 16px;background:var(--color-surface)}
.composer{position:relative;max-width:var(--content-max);margin:0 auto;background:var(--color-fill);border-radius:var(--radius-panel);padding-block:8px;padding-inline:12px 8px}
.composer textarea{width:100%;border:0;resize:none;outline:none;background:transparent;font-size:var(--text-body);line-height:var(--text-body--line-height);max-height:calc(6lh + 8px);padding:4px 0}
.composer textarea::placeholder{color:var(--color-text-muted)}
.composer-status{flex:1;font-size:var(--text-label);color:var(--color-text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#send.stop{background:var(--color-surface-inverse);color:var(--color-text-inverse)}

/* Above the thread rather than over the composer. "Open a case first" was drawn across the
   message box it was refusing, which is the one place the broker was looking. */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:grid;grid-auto-flow:column;gap:10px;align-items:center;background:var(--color-surface-inverse);color:var(--color-text-inverse);padding:12px 16px;border-radius:var(--radius-row);font-size:var(--text-secondary);max-width:min(520px,92vw);z-index:20}
.toast.error{background:var(--color-danger)}
.toast>[data-animate-slot]{margin:0}
.toast:not(.error)>[data-animate-slot]{color:var(--color-accent-on-dark)}
.toast>p{min-width:0;overflow-wrap:anywhere}
#multitask-list .task-row{display:grid;gap:4px;padding:8px 0}
#multitask-list .task-row[aria-current="true"]{background:var(--color-accent-subtle)}
#multitask-list .task-stop{justify-self:start}
.voice-navigation-body{display:grid;gap:12px;padding:16px 16px;overflow:auto;min-height:0;overflow-wrap:anywhere}
.voice-navigation-body .dialog-actions{display:flex;flex-wrap:wrap;gap:8px}
.voice-review-body{padding:16px 16px;overflow:auto;min-height:0;overflow-wrap:anywhere}
.voice-review-body .composer-row{flex-wrap:wrap;gap:8px}
#voice-review-content audio,#voice-review-content textarea{width:100%;margin:8px 0}
.source-library-content{padding:24px;min-width:0;overflow-wrap:anywhere}
.library-intro,.source-library-content .collapsible p,#library-use-reason{font-size:var(--text-caption);line-height:var(--text-reading--line-height);color:var(--color-text-muted)}
p#library-status{font-size:var(--text-caption);line-height:var(--text-reading--line-height);color:var(--color-text-muted)}
p#library-status:empty{display:none}
.stack[data-variant=panel] #library-query:not(:disabled){background:var(--color-surface)}
/* The two tabs name two panels; the track is as wide as its own pills. */
#kb-tabs{align-self:flex-start}
#library-list{max-height:45dvh;overflow:auto}
.source-library-content [data-variant=row]>span:nth-child(2){display:grid;gap:var(--space-1)}
.source-library-content [data-variant=row] strong{font-size:var(--text-body);font-weight:500}.source-library-content [data-variant=row] small{font-size:var(--text-caption);color:var(--color-text-muted)}
.library-icon{width:18px;height:18px;flex:none}
.library-state{font-size:var(--text-caption);flex:none;color:var(--color-text-muted)}.library-warning{color:var(--color-warning)}
#library-detail h3{font-size:var(--text-reading);font-weight:500;margin:0}
#library-detail>p{font-size:var(--text-label);line-height:var(--text-reading--line-height)}
#library-detail dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 16px;font-size:var(--text-caption);padding:16px 0}
#library-detail dt{color:var(--color-text-muted)}#library-detail dd{margin:0}
.source-library-content .library-state{justify-self:end}
#library-use[aria-disabled=true]{color:var(--color-text-muted)}
.vault-setup-fields{margin:24px 0}
.vault-setup-fields input,.vault-setup-fields select{width:100%}
.vault-setup-fields p,#vault-setup-status{font-size:var(--text-caption);color:var(--color-text-muted);line-height:var(--text-reading--line-height)}
#vault-folder{align-self:flex-start;margin-top:12px}
#vault-folder[aria-disabled=true],#vault-create[aria-disabled=true]{color:var(--color-text-muted)}
@media(max-width:420px){.source-library-content{padding:16px}#library-detail dl{grid-template-columns:1fr;gap:4px}#library-detail dd{margin-bottom:8px}}
.share-project-content{padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow-wrap:anywhere}
#share-project-name{font-size:var(--text-label);font-weight:600;margin:0}
#share-scope,#share-service-status,.share-project-content details p{font-size:var(--text-caption);line-height:var(--text-body--line-height);color:var(--color-text-muted);margin:0}
.share-project-content>label{font-size:var(--text-caption);font-weight:600;margin-top:8px}
#share-member-search{width:100%;min-height:42px}
#share-selection{display:flex;flex-wrap:wrap;gap:8px}
#share-selection:empty{display:none}
#share-selection button{font-size:var(--text-caption);border-radius:var(--radius-control);padding:8px 8px;min-height:var(--control-height-sm);background-color:var(--color-fill);max-width:100%;overflow-wrap:anywhere}
#share-member-list{max-height:210px;overflow:auto;display:flex;flex-direction:column;gap:4px}
#share-member-list>button{display:flex;align-items:center;gap:8px;text-align:start;min-height:48px;border:0;background:transparent;padding:8px;border-radius:var(--radius-control);width:100%}
#share-member-list>button:hover{background:var(--color-accent-subtle)}
#share-member-list>button>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.share-person-initials{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--color-accent-subtle);font-size:var(--text-caption);color:var(--color-text-muted)}
.share-person-role{font-size:var(--text-caption);color:var(--color-text-muted)}
#share-member-list>p,#share-status{font-size:var(--text-caption);line-height:var(--text-body--line-height);margin:0}
#share-status:empty{display:none}
#project-access{padding-top:16px;font-size:var(--text-caption)}
#project-access h3{font-size:var(--text-caption);font-weight:600;margin:0 0 8px}
#project-access-status{font-size:var(--text-caption);line-height:var(--text-body--line-height);color:var(--color-text-muted)}
#project-access-status:empty{display:none}
.project-access-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 0}
.project-access-row>div{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.project-access-row small,.project-access-confirm small{font-size:var(--text-caption);color:var(--color-text-muted);line-height:var(--text-body--line-height)}
.project-access-row>span{font-size:var(--text-caption);color:var(--color-text-muted);white-space:nowrap}
.project-access-menu{position:relative;flex:none;padding:0}
.project-access-options{padding:4px}
.project-access-options button{display:flex;align-items:center;gap:8px;text-align:start;padding:8px 8px;width:100%;border-radius:var(--radius-control);min-height:var(--control-height);font-size:var(--text-label);font-weight:400;white-space:nowrap}
.project-access-options button:hover{background:var(--color-surface-hover)}
.project-access-options [data-access=remove]{color:var(--color-danger)}
.project-access-confirm{padding:12px 0;display:grid;gap:8px}
.share-project-actions{padding-top:12px}
.share-project-actions [data-zone=start]>div{display:grid;gap:8px;min-width:0}
.share-project-actions label{font-size:var(--text-caption);color:var(--color-text-muted)}
.share-project-actions select{min-height:40px;max-width:100%}
#share-invite{min-height:40px;white-space:normal}
#share-invite[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.share-project-content details{font-size:var(--text-caption);padding-top:8px}
.share-project-content details p{margin-top:8px}
@media(max-width:420px){.share-project-content{padding:16px}.share-person-role{display:none}.share-project-actions{align-items:stretch;flex-direction:column}#share-invite{width:100%}}
#connected-files-content .label{display:grid;gap:4px}
#connected-files-list{margin:8px 16px 16px;max-height:16rem;overflow:auto}
#connected-files-status,#connected-files-account{margin:8px 16px}
/* The comparison the case holds. Twenty-seven rows and five columns of professional reading: the
   table scrolls inside its own region and the head stays with the rows it names. */
/* The grid scrolls inside its own box, so the column header can stay with the rows it names and
   the values in dispute stay on screen while the Director reads 27 conditions. A table-wrap that
   only scrolls sideways is a scroll container on both axes by CSS rule, which is why the sticky
   header used to stick to a box that never moved and left the grid unlabelled from row 8 on. */
.comparison-body{flex:1;min-height:0;overflow:auto;padding:16px 16px 24px}
.comparison-body .table-wrap{margin:0;padding:0;max-width:100%;overflow:auto;max-height:68vh}
.comparison-body table{font-size:var(--text-label)}
.comparison-body th,.comparison-body td{vertical-align:top;padding:8px 8px;text-align:start}
.comparison-body thead th{position:sticky;top:0;background:var(--color-fill);z-index:1}
.comparison-body td.field{min-width:190px;max-width:240px;font-weight:500}
.comparison-body td.value{min-width:180px}
.comparison-body .not-stated{color:var(--color-text-muted)}
/* What a marked cell differs by, in words. The tint this replaces was --color-accent-subtle on a white cell,
   a contrast of 1.125:1, and it was the only carrier of the fact: 51 of the 81 market cells on the
   D1 grid carried it, one column in all 27 of its rows, and one mark stood for four different
   meanings. The words carry it now. The four kinds keep four different rules so the grid can still
   be scanned, and none of them is a colour: --color-accent-subtle is this interface's current selection and
   its quoted-source surface, and an accent on 51 cells is not an accent. */
.comparison-body .mark{display:block;margin-top:4px;font-size:var(--text-caption);line-height:var(--text-label--line-height);font-weight:500;color:var(--color-text);padding-inline-start:8px;border-inline-start-width:2px;border-inline-start-color:var(--color-text)}
.comparison-body .mark-differs{border-inline-start-style:solid}
.comparison-body .mark-added{border-inline-start-style:dashed}
.comparison-body .mark-dropped{border-inline-start-style:dotted}
.comparison-body .mark-silent{border-inline-start-style:double;border-inline-start-width:3px}
.comparison-body .mark-other{border-inline-start-style:solid}
/* A row the comparison could not read from any document of it, said on the row rather than only in
   a list under the grid, so a blank cell is qualified where the reader meets it. */
.comparison-body .row-note{display:block;margin-top:4px;font-size:var(--text-caption);font-weight:400;line-height:var(--text-label--line-height);color:var(--color-text);padding-inline-start:8px;border-inline-start:2px solid var(--color-text)}
/* How the document behind a column was read. A grey "not stated" in a column a machine read off a
   photograph is not the same fact as one in a column read whole from selectable text, and the
   payload's cells cannot yet tell them apart, so the column says it once at the top (R5). */
.comparison-body .col-label{display:block}
.comparison-body .col-read{display:block;margin-top:4px;font-size:var(--text-caption);font-weight:500;line-height:var(--text-label--line-height);color:var(--color-danger);white-space:normal}
/* The word in a cell of a disputed row points at the block above the grid. It draws no bar of its own,
   because the bar on .row-note belongs to the grid's own warning about a row, and this is not that: it
   carries the one colour this interface keeps for a refusal and for machine-read provenance. */
.comparison-body .row-note.row-note-disputed{color:var(--color-danger);padding-inline-start:0;border-inline-start:0}
.comparison-body .conflict{border-inline-start:3px solid var(--color-danger);padding:8px 12px;margin:0 0 8px;background:var(--color-danger-subtle)}
.comparison-body .note{margin:16px 0 8px}
.source-quote{margin:16px 16px 0;padding:8px 12px;background:var(--color-accent-subtle);border-inline-start:3px solid var(--color-accent);font-size:var(--text-body)}
/* The original bytes of the version a value rests on were the quietest control in this dialog, at
   12 px in the label grey, under a coverage line that named the store's identifier three times. It
   is the check the whole dialog exists for, so it is a control. */
.source-original{align-self:start;margin:12px 16px 0;border-radius:var(--radius-control);padding:8px 12px;font-size:var(--text-label);font-weight:500;color:var(--color-text);text-decoration:none;background:var(--color-fill)}
.source-original:hover{background:var(--color-fill-hover);color:var(--color-accent)}
.source-quote,.source-original{flex:none}
#source-text{margin:0;padding:16px 16px;white-space:pre-wrap;font:var(--text-label)/var(--text-label--line-height) var(--font-mono);overflow:auto;flex:1;min-height:0}
#source-text mark{background:var(--color-accent-subtle);color:var(--color-text)}

/* Below 1100 px the context becomes an explicit tab beside the thread: the two share the working
   column and the strip in the top bar says which one is showing. */
@media (max-width:1100px){
  .shell{grid-template-columns:256px minmax(0,1fr)}
  .main,.canvas{grid-column:2;grid-row:1}
  .shell.canvas-open .panes{display:flex}
  .shell:not([data-pane="canvas"]) .canvas{display:none}
  .shell[data-pane="canvas"] .main{display:none}
}
/* Below 760 px, which is the specification's own figure. The band from 760 to 860 was not driven in
   phase one's run, so the breakpoint was left where it was rather than moved on a guess. */
@media (max-width:760px){
  html,body,.shell{overflow-x:hidden}
  .shell{grid-template-columns:minmax(0,1fr);max-width:100vw}
  .main,.canvas{grid-column:1;min-width:0;max-width:100%}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);max-width:100vw;z-index:10;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:var(--color-scrim);z-index:9}
  .menu{display:block}
  .starters{grid-template-columns:1fr}
  .gate{grid-template-columns:1fr}
  .thread,.composer-wrap{padding-inline:16px}
  .composer-row,.composer-modes{flex-wrap:wrap}
  .composer-modes select,.composer-modes label{width:100%}
  .user-bubble{max-width:100%}
  .assistant-content{padding-inline-start:0}
}
@media (max-width:520px){.empty-howard{width:180px}}

/* The one form in the interface: opening a case. A Director and a Broker are required on an active
   case, so the form asks for them rather than letting the server refuse afterwards. */
.case-form{display:grid;gap:8px;padding:16px 16px;overflow:auto}
.case-note{margin:4px 0 0;font-size:var(--text-caption);color:var(--color-danger)}

/* D1 fixed regions and review controls. Motion never delays state or an action. */
.shell{--rail-width:var(--sidebar-width);--canvas-width:380px;grid-template-columns:var(--rail-width) minmax(0,1fr) 0;transition:grid-template-columns .2s ease}
.shell.canvas-open{grid-template-columns:var(--rail-width) minmax(0,1fr) var(--canvas-width)}
.sidebar,.canvas{position:relative}
.sidebar{overflow:hidden}
.sidebar-projects{overflow:auto;min-height:80px;display:flex;flex-direction:column;gap:24px}
.attention-region{position:relative;flex:0 1 var(--attention-height,180px);min-height:96px;overflow:auto;padding-bottom:12px}
.vertical-divider{position:absolute;inset-inline-end:0;top:0;bottom:0;width:6px;z-index:8;cursor:col-resize}
.canvas>.vertical-divider{inset-inline-start:0;inset-inline-end:auto}
.horizontal-divider{height:6px;position:sticky;bottom:0;background:var(--color-fill-strong);cursor:row-resize}
.vertical-divider:hover,.vertical-divider:focus-visible,.horizontal-divider:focus-visible{background:var(--color-accent-subtle)}
.resizing{user-select:none}
.resizing .shell{transition:none}
.shell.rail-collapsed{grid-template-columns:0 minmax(0,1fr) 0}
.shell.rail-collapsed.canvas-open{grid-template-columns:0 minmax(0,1fr) var(--canvas-width)}
.shell.rail-collapsed>.sidebar{visibility:hidden;padding:0}
.shell:not(.canvas-open)>.canvas{visibility:hidden;padding:0}
.composer-sources{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.source-chip{display:inline-flex;gap:8px;align-items:center;min-height:32px;background:var(--color-surface);border-radius:var(--radius-control);padding:4px;max-width:100%;animation:pop .16s ease}
.source-chip button{overflow-wrap:anywhere;font-size:var(--text-caption);min-height:var(--control-height-sm)}
.d1-draft-panel{display:flex;flex-direction:column;gap:8px;min-width:0}.d1-stack{min-width:0}
.d1-draft-panel textarea{width:100%;min-height:min(55vh,520px);resize:none;padding:12px;font-size:var(--text-label);line-height:var(--text-body--line-height)}
.d1-draft-panel>select{width:100%;min-width:0;font-size:var(--text-caption)}
.d1-draft-panel>[data-variant=outline]{align-self:flex-start}
.d1-stack pre,.d1-diff pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-sans);font-size:var(--text-label)}
.improve-content{padding:16px 16px;overflow-wrap:anywhere}.improve-content pre{font-size:var(--text-body);line-height:var(--text-reading--line-height)}
.improve-content textarea{width:100%;min-width:0;resize:none;line-height:var(--text-reading--line-height);padding:12px}
.ready-tasks-content{padding:16px 16px;overflow-wrap:anywhere}.ready-tasks-content input,.ready-tasks-content textarea{width:100%;min-width:0;line-height:var(--text-body--line-height)}.ready-tasks-content [hidden]{display:none}
.d1-stack>[data-variant=outline]{align-self:flex-start;max-width:100%}
.d1-stack>[data-variant=default]{align-self:flex-end}
@media(max-width:420px){.d1-stack>[data-variant=default]{align-self:stretch}}
.d1-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-height:65vh;overflow:auto}
.d1-diff h3{font-size:var(--text-label)}
.row-menu{position:relative;display:inline-block}
.row-menu .menu-pop{z-index:30;min-width:140px;max-width:240px;inset-inline-start:0;top:100%}
.menu-pop button:not([role=tab]):not([data-slot]){min-height:var(--menu-item-height);white-space:normal;overflow-wrap:anywhere}
.review-section{min-width:0;animation:pop .16s ease}
#project-case-picker{max-width:100%;width:100%;padding:8px;border:2px solid transparent;background:var(--color-fill);border-radius:var(--radius-row)}
button{transition:var(--t-bg),transform .14s ease,box-shadow .14s ease,border-color .16s ease}
@media(max-width:1100px){.shell,.shell.rail-collapsed,.shell.canvas-open,.shell.rail-collapsed.canvas-open{grid-template-columns:var(--rail-width) minmax(0,1fr)}.vertical-divider{display:none}.shell>.canvas{visibility:visible;padding:16px 16px}.shell.rail-collapsed{grid-template-columns:0 minmax(0,1fr)}}
@media(max-width:760px){.shell,.shell.rail-collapsed,.shell.canvas-open,.shell.rail-collapsed.canvas-open{grid-template-columns:minmax(0,1fr)}.shell.rail-collapsed>.sidebar{visibility:visible;padding:16px 12px}.topbar{padding:0 16px}.d1-diff{grid-template-columns:minmax(0,1fr)}.canvas{max-width:100vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.motion-paused *{animation-play-state:paused!important}

.menu-pop[data-motion-managed="true"]{animation:none;position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);min-width:min(280px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}

.new-activity{align-self:center;margin:4px 0;padding:8px 12px;border-radius:var(--radius-control);background:var(--color-fill);color:var(--color-accent)}

/* Keep shared navigation outside the Conversation/Case regions it switches. */
.shell{grid-template-rows:auto minmax(0,1fr)}
.shell>.sidebar{grid-column:1;grid-row:1 / span 2}
.shell>.topbar{grid-column:2;grid-row:1}
.shell>.main{grid-column:2;grid-row:2;height:auto}
.shell>.canvas{grid-column:3;grid-row:1 / span 2;min-height:0}
@media(max-width:1100px){.shell>.canvas{grid-column:2;grid-row:2;height:auto}}
@media(max-width:760px){.shell>.topbar,.shell>.main,.shell>.canvas{grid-column:1}.shell>.sidebar{position:fixed;grid-area:auto}}

/* Case source selection keeps exact versions and reading coverage visible. */
.source-count{flex-basis:100%;font-size:var(--text-caption);color:var(--color-text-muted)}
.source-chip-meta{display:block;font-size:var(--text-caption);line-height:var(--text-body--line-height);white-space:normal;overflow-wrap:anywhere}
.source-results{display:flex;flex-direction:column;gap:4px;max-height:42vh;overflow:auto;min-width:0}
.source-results>[role=option]{text-align:start;white-space:normal;overflow-wrap:anywhere;flex-shrink:0}
.source-results>[aria-selected=true]{outline:2px solid var(--color-text);outline-offset:-2px}
#d1-source-picker>.d1-stack{padding:16px 16px;overflow:auto;min-height:0}
#d1-source-picker input{min-width:0;width:100%}
.source-results>[role=option]{padding:8px;border-radius:var(--radius-control)}
.source-results>[aria-selected=true]{outline-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-text)}
.source-inline-text{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-sans);font-size:var(--text-label)}

#connected-files-list{flex-shrink:0;list-style:none;padding:0}
#connected-files-list [role=option]{width:100%;text-align:start;padding:8px;border:2px solid transparent;border-radius:var(--radius-row);overflow-wrap:anywhere}
#connected-files-list [aria-selected=true]{background:var(--color-accent-subtle)}
#connected-files-list [aria-selected=true]::before{content:'Selected · ';color:var(--color-accent)}
#connected-files-list .active-result{border-color:var(--color-accent)}
#connected-files-query{padding:8px;border:2px solid transparent;border-radius:var(--radius-row);background:var(--color-fill);min-width:0}
#connected-files-selected{list-style:none;padding:0;display:grid;gap:12px;overflow-wrap:anywhere}
#connected-files-selected strong{font-size:var(--text-caption);font-weight:500}

#local-upload-panel{display:grid;gap:8px;margin:8px 0;min-width:0}
#local-upload-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-height:28vh;overflow:auto;min-width:0}
#local-upload-list li{display:grid;gap:4px;padding:8px;background:var(--color-surface);border-radius:var(--radius-row);overflow-wrap:anywhere;animation:pop .16s ease}
#local-upload-list strong{font-size:var(--text-caption);font-weight:500}
#local-upload-list select{min-width:0;max-width:100%;font-size:var(--text-caption)}
#local-upload-start{padding:8px;border-radius:var(--radius-control);text-align:start}
#local-upload-start:not(:disabled){background:var(--color-surface)}
.composer{transition:var(--t-bg)}
.composer.file-drop-active{background:var(--color-fill-hover)}
#local-drop-status{color:var(--color-accent);padding:8px 0}

#multitask-list .task-open{white-space:normal;overflow-wrap:anywhere}
#multitask-list .task-result{font-size:var(--text-caption);padding:4px 8px;overflow-wrap:anywhere}
#multitask-list .task-result summary{cursor:pointer;color:var(--color-accent)}
#multitask-list .task-result-text{white-space:pre-wrap}
#multitask-list .task-output-empty{margin:0;padding:4px 8px}

.task-detail-body{padding:16px 16px;overflow:auto;min-height:0;overflow-wrap:anywhere}
.task-detail-body h3{margin:16px 0 8px;font-size:var(--text-body)}
.task-detail-fields{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,3fr);gap:8px 16px;margin:16px 0;font-size:var(--text-label)}
.task-detail-fields dt{color:var(--color-text-muted)}
.task-detail-fields dd{margin:0;white-space:pre-wrap}
.task-detail-sources{list-style:none;padding:0;margin:8px 0}
.task-detail-sources button{white-space:normal;text-align:start;overflow-wrap:anywhere;max-width:100%}
.task-source-preview .source-inline-text{white-space:pre-wrap;overflow-wrap:anywhere}
.task-details-open{justify-self:start}

.voice-indicators{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;color:var(--color-text-muted);font-size:var(--text-caption)}
.voice-indicators [data-elapsed]{font-variant-numeric:tabular-nums;min-width:4ch}
.voice-indicators meter{width:90px;height:12px;max-width:100%}


.motion-paused .composer textarea{transition:none}

.plan-chip{display:inline-flex;align-items:center;gap:4px;flex:none;padding:4px 4px;border-radius:var(--radius-control);color:var(--color-accent);background:var(--color-accent-subtle);font-size:var(--text-caption);opacity:0;visibility:hidden}
.plan-chip button{min-width:24px;min-height:24px;padding:0;color:inherit;background:transparent;display:inline-grid;place-items:center}

.empty-thread-space{flex:none;height:0;pointer-events:none}

.composer-wrap{max-height:calc(100% - 40px);overflow-y:auto}

.composer-options{padding:12px;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 24px))}
.composer-options label,.composer-options select{width:100%}
.composer-options .side-note{margin:0;white-space:normal}
.composer-options button{text-align:start;white-space:normal}
@media(max-width:760px){
  .composer-modes{flex-wrap:nowrap;align-items:flex-end;gap:8px}
  .composer-modes>label{flex:1;width:auto;min-width:0}
  .composer-modes #composer-more{flex:none;min-height:32px}
  .composer-modes .plan-chip{align-self:flex-end}
}

.composer-context{max-width:var(--content-max);margin:0 auto;overflow-wrap:anywhere}
.composer-context .side-note{margin:4px 0;white-space:normal}
.composer-context .side-note:empty{display:none}
.composer-context-choices button{text-align:start;white-space:normal;max-width:100%;min-width:0;overflow-wrap:anywhere}
.context-choice-detail{display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-top:4px}
#d1-case-picker button,#d1-conversation-picker button{white-space:normal;overflow-wrap:anywhere}
#d1-case-picker [aria-current],#d1-conversation-picker [aria-current]{background:var(--color-accent-subtle)}

.context-loading #thread,.context-loading #canvas,.context-loading #composer{visibility:hidden}
@media(min-width:600px) and (max-height:600px){
  .composer-context{display:flex;align-items:center;gap:8px}
  .composer-context-choices{display:contents}
  .composer-context .side-note{min-width:0}
}
#d1-case-picker>.d1-stack,#d1-conversation-picker>.d1-stack{padding:16px 16px;overflow:auto;min-height:0}
#d1-case-picker input,#d1-conversation-picker input{width:100%;min-width:0}
.task-detail-body > [data-variant]{max-width:100%;margin:4px 0;text-align:start;white-space:normal}

/* Named workspace actions remain visible on touch and with keyboard focus. */
.conv-list .workspace-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.conv-list .workspace-row > button { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.conv-list .workspace-row > .row-menu { flex: none; }
.row-menu [aria-disabled="true"] { cursor: default; color: var(--color-text-muted); }
.row-menu [role="menuitem"] small{display:block;font-size:var(--text-caption);line-height:var(--text-caption--line-height);margin-top:4px}
#case-rename-dialog form { display: grid; gap: 12px; }
#case-rename-dialog input { width: 100%; min-width: 0; }

[data-help]{position:relative}
[data-help]:hover::after,[data-help]:focus::after,[data-help]:active::after{content:attr(data-help);position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-end:0;width:max-content;max-width:min(220px,calc(100vw - 24px));padding:4px 8px;border-radius:var(--radius-control);background:var(--color-surface-inverse);color:var(--color-text-inverse);font-size:var(--text-caption);font-weight:400;line-height:var(--text-label--line-height);text-align:start;white-space:normal;box-shadow:var(--shadow-popover);pointer-events:none}
[data-help][aria-disabled="true"],[data-foundation-entry][aria-disabled="true"]{cursor:help}
.foundation-navigation,.secondary-section{gap:8px}
.foundation-navigation summary,.secondary-section summary,.review-file-help summary{cursor:pointer;font-size:var(--text-caption);color:var(--color-text-muted)}
.foundation-navigation nav{display:grid;gap:4px;padding-top:4px}
.foundation-navigation button{width:100%;padding:4px 8px;border-radius:var(--radius-control);text-align:start;font-size:var(--text-caption)}
.foundation-navigation button:hover,.foundation-navigation button:focus-visible{background:var(--color-surface);color:var(--color-accent)}
.attention-filter-panel{min-width:0}
.attention-filter-panel summary{cursor:pointer;color:var(--color-text-muted);font-size:var(--text-caption);list-style-position:inside;padding:4px 0}
.attention-filter-panel[open] summary{margin-bottom:8px;color:var(--color-text)}
.attention-region:has(.attention-filter-panel[open]){min-height:min(340px,60vh)}
.attn-filters{padding:8px;border-radius:var(--radius-row);background:var(--color-fill)}
.attn-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.attn-filters>label:nth-of-type(3),.attn-filter-actions{grid-column:1 / -1}
.attention-region{overflow-x:hidden}
.canvas-head{flex:none}
.canvas-head h2{margin:0;font-size:var(--text-reading);line-height:var(--text-title--line-height);font-weight:500}
.review-file-help{font-size:var(--text-caption)}
.review-file-help[open]{display:grid;gap:var(--space-2)}
.composer-modes>label[for="work-tool"]{flex:1;min-width:160px}
.composer-modes>label[for="work-tool"] select{width:100%}
#local-upload-body{display:grid;gap:8px}
.upload-summary{width:100%;padding:8px 8px;border-radius:var(--radius-control);background:var(--color-surface);text-align:start;font-size:var(--text-caption);color:var(--color-text)}
.upload-summary:hover{background:var(--color-fill-hover);color:var(--color-accent)}
.composer-wrap.awaiting-case{display:none}
@media(max-width:760px){.composer-modes{align-items:center}.foundation-navigation{padding-bottom:4px}}

/* Entry-first workspace: projects and input now; detailed work on demand. */
.email-editor{display:flex;flex-direction:column;gap:0;min-width:0}
.email-editor>#d1-draft-label{font-size:var(--text-reading);font-weight:500;padding:12px 0}
.email-field{display:flex;align-items:center;gap:8px;min-height:42px;font-size:var(--text-label)}
.email-field>span{width:48px;flex:none;color:var(--color-text-muted)}
.email-field input{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;color:var(--color-text);font:inherit}
.email-field input:focus{outline:0;box-shadow:var(--ring)}
.email-editor #d1-draft-editor{border:0;background:transparent;border-radius:0;min-height:320px;padding:24px 0;font:var(--text-reading)/var(--text-reading--line-height) var(--font-sans);resize:none;width:100%}
.email-toolbar{padding:12px 0}
.email-toolbar #d1-draft-state{min-width:90px;text-align:end}
.email-review-details{padding-top:12px;margin-top:12px}
.email-review-details summary{cursor:pointer;font-size:var(--text-caption);color:var(--color-text-muted)}
.email-review-details pre{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--text-caption)/var(--text-caption--line-height) var(--font-sans)}
.entry-workspace .sidebar{position:sticky;top:0;height:100vh;padding:16px;background:var(--color-surface-sunken);color:var(--color-text-muted);scrollbar-color:var(--color-divider) var(--color-surface-sunken);visibility:visible;overflow-y:auto}
.entry-workspace .side-top{padding:0}
.entry-workspace .brand{font-size:var(--text-reading);font-weight:600;gap:var(--space-3);color:var(--color-text);min-width:0}
.entry-workspace .side-top>[data-zone=start]{padding-inline-start:var(--space-3)}
.entry-workspace .brand span{font:600 var(--text-reading)/var(--text-reading--line-height) var(--font-sans);letter-spacing:var(--tracking-brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-workspace #project-history{min-width:0;margin:0;border:0;padding:0}
.entry-workspace #conv-h{font-size:var(--text-meta);text-transform:none;color:var(--color-text-subtle);padding:0 12px}
.entry-workspace #no-conv{padding:0 12px}
.entry-workspace #conversations>li>button{min-height:var(--nav-height);padding:8px 12px;font-size:var(--text-caption);line-height:var(--text-caption--line-height)}
.entry-workspace #conversations>li>button[aria-current=true]{background:var(--color-accent-subtle);color:var(--color-accent-text)}
.entry-workspace .workspace-row>.row-menu{opacity:0}
.entry-workspace .workspace-row:hover>.row-menu,.entry-workspace .workspace-row:focus-within>.row-menu{opacity:1}
.entry-workspace #account-menu{padding-top:12px}
.entry-workspace .workspace-identity{display:block;font-size:var(--text-caption);line-height:var(--text-body--line-height);overflow-wrap:anywhere}
.entry-workspace .workspace-panel{width:min(360px,calc(100vw - 24px));padding:16px;max-height:70vh;overflow:auto;color:var(--color-text);gap:12px}
.entry-workspace .workspace-panel .attention-region{max-height:none;height:auto;min-height:0;overflow:visible}
.entry-workspace #resize-navigation,.entry-workspace #resize-attention{display:none}
.entry-workspace .workspace-panel button{white-space:normal}
.entry-workspace .workspace-panel label{display:grid;gap:8px}
.entry-workspace #project-context .composer-context{display:grid;padding:8px 0}
.entry-workspace #project-context .composer-context-choices{display:grid}
.entry-workspace #panes{display:none}
.entry-workspace .topbar{height:var(--topbar-height);padding:0 32px}
/* The case the work belongs to, named where the work is. The title itself stays in the hidden h1. */
#case-selector{min-width:0}
#case-selector .ct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-workspace .conversation-heading{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-label)}
.entry-workspace .main:has(#empty:not([hidden])){justify-content:safe center;padding-bottom:48px;overflow-y:auto}
.entry-workspace .main:has(#empty:not([hidden])) .thread{flex:0;overflow:visible;padding-top:0;padding-bottom:32px}
.entry-workspace .thread{padding:32px 32px 24px;scroll-padding-block:24px}
.entry-workspace .empty{width:min(920px,100%);margin:auto;padding:0;text-align:center}
.entry-workspace .empty h2{font:600 var(--text-title)/var(--text-title--line-height) var(--font-sans);text-align:center;letter-spacing:var(--tracking-title)}
.entry-workspace #empty-note{display:none}
.entry-workspace #start-project{align-self:center}
.entry-workspace .composer-wrap{width:min(var(--content-max),calc(100% - 64px));max-width:none;margin:0 auto;padding:0 0 24px}
.entry-workspace .main:has(#empty:not([hidden])) .composer-wrap{width:min(920px,calc(100% - 64px))}
.entry-workspace .composer-wrap.awaiting-case{display:block}
.entry-workspace .composer{width:100%;max-width:none;border-radius:var(--radius-panel);padding:var(--space-1-5);background:var(--color-fill);box-shadow:none}
.entry-workspace .main:has(#empty:not([hidden])) .composer{padding:var(--space-1-5)}
/* The instruction is a white field on the composer's grey panel: three rows at rest, growing to nine, and taking the
   same 2px transparent border every other field borrows for its focus. */
.entry-workspace #input{padding:12px 14px;border:2px solid transparent;border-radius:var(--radius-control);resize:none;background:var(--color-surface);font:400 var(--text-reading)/var(--text-reading--line-height) var(--font-sans);min-height:calc(3lh + 28px);max-height:calc(9lh + 28px);width:100%;overflow-y:auto;transition:var(--t-field)}
.entry-workspace #input:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:var(--ring)}
.entry-workspace .main:has(#empty:not([hidden])) #input{font-size:var(--text-reading);min-height:calc(5lh + 28px);max-height:calc(11lh + 28px)}
/* One left cluster that wraps and one right cluster that never does, both sitting on the row's baseline. */
.entry-workspace .composer-tools{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"start end";align-items:end}
.entry-workspace .composer-tools>[data-zone=center]{display:none}
.entry-workspace .composer-tools>[data-zone=start]{flex-wrap:wrap;align-self:end}
.entry-workspace .composer-tools>[data-zone=end]{flex-wrap:nowrap;align-self:end}
.entry-workspace #composer-mode-help{margin:0;font-size:var(--text-meta);line-height:var(--text-meta--line-height);color:var(--color-text-subtle)}
.entry-workspace #composer-mode-help:empty{display:none}
.entry-workspace #input::placeholder{color:var(--color-text-subtle);opacity:1}
.entry-workspace .composer-sources{gap:8px;margin-bottom:24px}
.entry-workspace .composer-sources:empty{margin-bottom:0}
.entry-workspace .source-chip{padding:8px 12px;gap:8px;border-radius:var(--radius-control);font-size:var(--text-caption);line-height:var(--text-label--line-height)}
.entry-workspace .source-chip>button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-workspace .composer-modes{display:contents}
.entry-workspace .composer-tools #attach::before{margin:0}
.entry-workspace #send{position:relative;overflow:hidden;text-indent:100%;white-space:nowrap;font-size:var(--text-caption)}
.entry-workspace #composer-options{width:220px;min-width:0;padding:4px;border-radius:var(--radius-card);box-shadow:var(--shadow-popover)}
.entry-workspace #composer-status-row:has(:not([hidden]):not(:empty)){margin-top:8px}
.entry-workspace #composer-status-row:not(:has(:not([hidden]):not(:empty))){display:none}
.entry-workspace .suggested-tasks{display:none}
.entry-workspace .main:has(#empty:not([hidden])) .suggested-tasks{display:flex}
.entry-workspace .messages,.entry-workspace .conversation-result{width:min(var(--content-max),100%);max-width:none;margin:0 auto;font:var(--text-body)/var(--text-reading--line-height) var(--font-sans)}
/* The 4px bottom right corner is the one radius outside the role set and it is deliberate: it is the tail that
   marks the side the message is aligned to (transurance-chat COMPONENTS.md §1 and §3). */
.entry-workspace .user-bubble{align-self:flex-end;width:fit-content;max-width:88%;padding:14px 20px;border-radius:var(--radius-panel);border-end-end-radius:4px;background:var(--color-fill);font:var(--text-body)/var(--text-reading--line-height) var(--font-sans)}
.entry-workspace .assistant{gap:12px;min-width:0}
.entry-workspace .assistant-name{gap:0;font-size:var(--text-caption)}
.entry-workspace .assistant-content{overflow-wrap:anywhere;min-width:0;font:var(--text-body)/var(--text-reading--line-height) var(--font-sans)}
.entry-workspace .assistant-content .md{gap:12px}
.entry-workspace .assistant-content h2{font:600 var(--text-body)/var(--text-reading--line-height) var(--font-sans)}
.entry-workspace .task{padding:0;background:transparent;gap:8px}
.entry-workspace .task-count{cursor:pointer;font-size:var(--text-label);padding:8px 0;color:var(--color-text-muted)}
.entry-workspace .task-details[open]{padding-bottom:12px}
.entry-workspace .task-details .steps{padding:8px 0}
.entry-workspace .task-problems{font-size:var(--text-label);line-height:var(--text-body--line-height);color:var(--color-danger);margin:0}
.entry-workspace #case-brief{margin:0;padding:0 0 12px}
.entry-workspace #review-alerts{text-align:start;margin:8px 32px;padding:8px 0;flex:none}
@media(min-width:761px){
 .entry-workspace.rail-collapsed{--rail-width:var(--sidebar-width-rail)!important;grid-template-columns:var(--sidebar-width-rail) minmax(0,1fr) 0}
 .entry-workspace.rail-collapsed.canvas-open{grid-template-columns:var(--sidebar-width-rail) minmax(0,1fr) var(--canvas-width)}
 .entry-workspace.rail-collapsed>.sidebar{visibility:visible;padding:16px}
 /* The rail keeps every control and every accessible name; what it drops is the words, which there is no room for. */
 .entry-workspace.rail-collapsed .brand,.entry-workspace.rail-collapsed #project-history{display:none}
 .entry-workspace.rail-collapsed #workspace-navigation [data-variant^=nav]{overflow:hidden;color:transparent;position:relative;gap:0;padding:8px 12px}
 .entry-workspace.rail-collapsed #workspace-navigation [data-slot=keycaps]{display:none}
 .entry-workspace.rail-collapsed .side-top,.entry-workspace.rail-collapsed .side-top>[data-zone=start]{justify-content:center;padding-inline-start:0}
 .entry-workspace.rail-collapsed #account-summary{grid-template-columns:minmax(0,1fr);justify-items:center;padding:var(--space-2);background:transparent}
 .entry-workspace.rail-collapsed #account-summary :is(.account-name,.workspace-identity,[data-animate-end]){display:none}
}
@media(min-width:761px) and (max-width:1100px){.entry-workspace,.entry-workspace.canvas-open{grid-template-columns:var(--rail-width) minmax(0,1fr)}.entry-workspace.rail-collapsed,.entry-workspace.rail-collapsed.canvas-open{grid-template-columns:var(--sidebar-width-rail) minmax(0,1fr)}}
@media(max-width:1100px){.entry-workspace.canvas-open #panes{display:flex}}
@media(max-width:760px){
 .entry-workspace,.entry-workspace.rail-collapsed,.entry-workspace.canvas-open,.entry-workspace.rail-collapsed.canvas-open{grid-template-columns:minmax(0,1fr)}
 .entry-workspace .sidebar,.entry-workspace.rail-collapsed>.sidebar{position:fixed;height:auto;width:min(288px,calc(100vw - 48px));padding:16px;visibility:visible;max-height:100dvh;overflow-y:auto}
 .entry-workspace #sidebar-collapse{display:none}
 .entry-workspace .topbar{padding:0 16px}
 .entry-workspace .main:has(#empty:not([hidden])){padding-bottom:16px}
 .entry-workspace .thread{padding:24px 16px}.entry-workspace .empty h2{font-size:var(--text-title);font-weight:500;line-height:var(--text-title--line-height)}
 .entry-workspace .composer-wrap,.entry-workspace .main:has(#empty:not([hidden])) .composer-wrap{width:calc(100% - 32px);padding:0 0 16px}
 .entry-workspace .composer,.entry-workspace .main:has(#empty:not([hidden])) .composer{padding:var(--space-1-5)}
 .entry-workspace #input,.entry-workspace .main:has(#empty:not([hidden])) #input{font-size:var(--text-reading);line-height:var(--text-reading--line-height);min-height:88px;max-height:144px}
 .entry-workspace .composer-tools{gap:0;justify-content:space-between}
 .entry-workspace .composer-tools button:not([role=radio]){width:var(--control-height);height:var(--control-height);min-height:var(--control-height);padding:0;overflow:hidden;color:transparent;white-space:nowrap;position:relative;gap:0}
 .entry-workspace #composer-more::after{display:none}
 .entry-workspace .user-bubble,.entry-workspace .assistant-content{font-size:var(--text-body);line-height:var(--text-reading--line-height)}
 .entry-workspace .layout-controls{display:none}
}
@media(max-width:359px){.entry-workspace .composer,.entry-workspace .main:has(#empty:not([hidden])) .composer{padding:var(--space-1-5)}}
@media(hover:none){.entry-workspace .workspace-row>.row-menu{opacity:1}}
textarea,.email-editor #d1-draft-editor{resize:none}
.workspace-page{height:100%;min-height:0;overflow:auto;padding:32px;box-sizing:border-box;background:var(--color-surface);color:var(--color-text)}
.workspace-page h1{font:600 var(--text-title)/var(--text-title--line-height) var(--font-sans);margin:0;letter-spacing:var(--tracking-title)}
.saved-work-instruction{margin-bottom:24px}.saved-work-instruction .user-bubble{white-space:pre-wrap;margin:8px 0}
.workspace-page h2{font:600 var(--text-reading)/var(--text-reading--line-height) var(--font-sans);margin:0}
.workspace-page p{font:var(--text-ui)/var(--text-body--line-height) var(--font-sans);color:var(--color-text-muted);margin:0;overflow-wrap:anywhere}
.workspace-page-content{min-width:0}
.workspace-page-content>button{align-self:flex-start;width:fit-content;text-align:start}
.workspace-section>button{align-self:flex-start;width:fit-content}
.workspace-page-content>.side-section{padding:0;border:0;margin:0;overflow:visible}
.workspace-page .source-library-content{padding:0;max-width:none}
.workspace-page .ready-tasks-content{padding:0;max-width:820px;gap:16px}
.workspace-page #ready-task-stage{justify-self:start;min-width:140px;text-align:center}
.workspace-page #ready-task-back{justify-self:start;width:fit-content}
.workspace-section{padding:24px 0;min-width:0}
.workspace-section label{display:block;font-size:var(--text-caption)}
.workspace-section input{max-width:320px;width:100%}
/* The case table draws no lines: one grid, the header as a quiet caption row, and a row that answers the pointer
   with a fill of its own. The 718px minimum is what keeps the five columns readable inside the scrolling table. */
.workspace-table{overflow-x:auto;width:100%;margin:16px 0}
.entry-workspace .case-table-head,.entry-workspace .case-table-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) 44px;gap:20px;padding:0 16px;min-width:718px;align-items:center}
.case-table-head{list-style:none;min-height:40px;font-size:var(--text-meta);color:var(--color-text-subtle)}
.case-table-head>span,.case-table-row>span{min-width:0;font-size:var(--text-label);overflow-wrap:anywhere}
.case-table-head>span{font-size:var(--text-meta)}
.entry-workspace .case-table-row{min-height:var(--row-height);border-radius:var(--radius-row)}
.entry-workspace .case-table-row:hover{background:var(--color-fill)}
.entry-workspace .case-table-row button[data-case]{justify-content:flex-start;text-align:start;white-space:normal;line-height:var(--text-body--line-height);padding:0;min-height:var(--row-height);width:100%;background:transparent}
/* The open case is the heavier name, not a block behind it: the only fill a row takes is the pointer's. */
.case-table-row button[data-case][aria-current]{font-weight:600}
/* One scroll container for the table: the head and the rows move together, never apart. */
.workspace-page #cases{margin:0;padding:0;max-height:none}
.workspace-page [data-variant=nav]{color:var(--color-text);background:var(--color-surface-hover);width:fit-content;min-height:40px}
.workspace-page [data-variant=row] small{color:var(--color-text-muted);font-size:var(--text-caption)}
/* A provider folder: the mark, the name, the state in words, and the way to ask for it. */
.library-folder{display:grid;grid-template-columns:var(--tile-size-sm) minmax(0,1fr) auto auto;align-items:center;gap:var(--space-3);min-height:var(--row-height);padding:0 var(--space-4);border-radius:var(--radius-row);background:var(--color-fill)}
.library-folder>small{font-size:var(--text-caption);color:var(--color-text-muted)}
/* A ready-made task: the mark, the name over what it produces, Use, and the menu of what only the workspace can do. */
.task-row{display:grid;grid-template-columns:var(--tile-size) minmax(0,1fr) auto var(--control-height);align-items:center;gap:var(--space-3);min-height:var(--space-16);padding:0 var(--space-4);border-radius:var(--radius-row);background:var(--color-fill);transition:background var(--duration-bg) var(--ease-standard)}
.task-row:hover{background:var(--color-fill-hover)}
.task-row>.stack>span{font:500 var(--text-strong)/var(--text-strong--line-height) var(--font-sans);color:var(--color-text)}
.task-row>.stack>small{font-size:var(--text-caption);color:var(--color-text-muted)}
/* The three schedule cards: the label above the value, the picker's own mark at the end of the row. */
#automation-schedule>button{grid-template-columns:minmax(0,1fr) var(--icon-nav);row-gap:var(--space-0-5)}
#automation-schedule>button>span{grid-column:1;font-size:var(--text-caption);color:var(--color-text-muted)}
#automation-schedule>button>strong{grid-column:1;font-weight:500}
#automation-schedule>button>[data-animate-end]{grid-column:2;grid-row:1/span 2;justify-self:end;--icon-size:var(--icon-nav);color:var(--color-text-muted)}
.entry-workspace[data-workspace-page] .main{display:block;overflow:hidden;padding:0}
.entry-workspace[data-workspace-page] .main>:not(#workspace-page){display:none!important}
.entry-workspace[data-workspace-page] #workspace-page{display:flex}
.entry-workspace[data-workspace-page]>.canvas{display:none}
.entry-workspace[data-workspace-page] #panes{display:none}
@media(min-width:761px){.entry-workspace[data-workspace-page],.entry-workspace[data-workspace-page].canvas-open{grid-template-columns:var(--rail-width) minmax(0,1fr) 0}}
@media(min-width:1101px){
 .entry-workspace.canvas-open:not([data-workspace-page]){grid-template-columns:var(--rail-width) minmax(0,1fr) var(--canvas-width)}
 .entry-workspace>.canvas{padding:24px 24px;overflow-anchor:none}
 .entry-workspace>.canvas>.canvas-head{position:sticky;top:-24px;z-index:3;background:var(--color-surface-sunken);padding:8px 0}
}
.entry-workspace .email-editor{background:var(--color-surface);border-radius:var(--radius-card);overflow:clip}
.entry-workspace .email-editor>#d1-draft-label{padding:16px 24px;background:var(--color-fill);font-size:var(--text-reading);font-weight:600;margin:0}
.entry-workspace .email-fields{padding:0 24px}
.entry-workspace .email-field button{min-width:var(--control-height-sm);min-height:var(--control-height-sm);padding:8px;font-size:var(--text-caption)}
.entry-workspace .email-from>span:last-child{width:auto;flex:1;color:var(--color-text-muted)}
.entry-workspace .email-editor #d1-draft-editor{padding:24px;box-sizing:border-box}
.entry-workspace .email-editor #d1-draft-editor:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px;border-radius:var(--radius-control);box-shadow:none}
.entry-workspace .email-toolbar{padding:12px 16px}
.entry-workspace .email-editor>p,.entry-workspace .email-editor>details{margin:0;padding:12px 24px}
#share-project-dialog .share-project-content{padding:24px}
@media(max-width:760px){
 .workspace-page{padding:24px 16px}.workspace-page-head{align-items:flex-start;flex-direction:column;margin-bottom:24px;gap:16px}

 .workspace-page .workspace-page-actions{gap:8px}.workspace-page .workspace-page-actions button{padding:8px 8px;font-size:var(--text-caption)}
 .entry-workspace .email-editor .email-fields{padding:0 12px}.entry-workspace .email-editor #d1-draft-editor{padding:16px 12px}
.entry-workspace .email-editor>#d1-draft-label{padding:16px 12px}
 .entry-workspace .email-toolbar{padding:12px}.task-row{grid-template-columns:var(--tile-size) minmax(0,1fr) auto var(--control-height)}
}
select:not([multiple]){padding-inline-end:34px}
.entry-workspace #email-delete{margin-inline-start:8px}
.entry-workspace #local-upload-panel{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.entry-workspace #local-upload-body{grid-column:1 / -1}
.entry-workspace #local-upload-summary{background:transparent;border:0;padding:8px 0}
.entry-workspace #local-upload-start{border-radius:var(--radius-control);font-size:var(--text-caption);white-space:nowrap}
.entry-workspace #local-upload-count{display:none}
.entry-workspace .standing-approved{color:var(--color-success);border-inline-start-color:var(--color-success)}
.entry-workspace :is(.standing-stale,.standing-lapsed){color:var(--color-warning);border-inline-start-color:var(--color-warning)}
.entry-workspace .standing-failed{color:var(--color-danger);border-inline-start-color:var(--color-danger)}
.project-access-options[data-motion-managed=true]{min-width:176px}
/* Optional private provider browsing shares the existing dialog/control system. */
#connector-manager,#connector-mailbox,#connector-files{width:min(760px,calc(100vw - 32px));max-height:85vh;overflow:auto}
#connector-disconnect{width:min(480px,calc(100vw - 32px))}
.connector-content{padding:16px;min-width:0}
.connector-account{padding:12px 0}
.connector-account h3,.connector-mail-preview h3{font-size:var(--text-body);margin:0 0 8px}
.connector-capability{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.connector-capability>span:not(.tile){flex:1 1 144px}
.connector-search{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.connector-search input{flex:1 1 160px;min-width:0}
.connector-message-list{max-height:240px;overflow:auto}
.connector-message{display:block;width:100%;text-align:start;overflow-wrap:anywhere;margin:4px 0}
.connector-mail-preview{margin-top:16px;padding-top:12px}
.connector-mail-preview:empty{display:none}
.connector-mail-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;font:inherit}
.connector-attachment{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;margin:8px 0}

#connector-vault,#connector-vault-create,#connector-vault-delete { width:min(760px,calc(100vw - 32px));max-height:85vh;overflow:auto; }

.connector-content .connector-message{margin-inline-end:0}

/* DF-01 through DF-12: shared readable controls and focused working surfaces. */
small,kbd{font-size:var(--text-caption)}
.entry-workspace #sidebar-collapse::before,.entry-workspace #send::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-indent:0}
.workspace-page{padding:32px clamp(24px,3vw,48px)}

.workspace-page-content>button{min-height:40px}
.workspace-breadcrumbs{font-size:var(--text-label);color:var(--color-text-muted)}
.form-fields{display:grid;gap:24px;min-width:0}
.form-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.form-field[hidden]{display:none}
.form-field>label{display:block;margin:0;font-size:var(--text-body);font-weight:500;color:var(--color-text)}
.form-field>input,.form-field>select,.form-field>textarea{width:100%;min-width:0;min-height:var(--control-height-lg);margin:0}
.form-field>select:not([multiple]){padding-inline-end:34px}
.form-field>textarea{resize:vertical}
.form-field>:is(input,select,textarea):disabled{background-color:var(--color-fill-strong);color:var(--color-text-muted)}
.form-field .field-help{margin:0;font-size:var(--text-label);line-height:var(--text-body--line-height);color:var(--color-text-muted)}
.field-error,[data-slot=field-error]{font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-danger)}
.form-disclosure{padding-top:16px}
.form-disclosure>summary{font-size:var(--text-body);font-weight:500;cursor:pointer;min-height:var(--control-height-lg);display:flex;align-items:center;gap:8px}
.form-disclosure>summary::marker{content:''}
.form-disclosure>.form-fields{padding-top:16px}
.case-form{gap:16px;padding:24px;scroll-padding-bottom:104px}
.case-form .form-field>label{margin:0}
.filter-panel{display:flex;flex-wrap:wrap;align-items:end;gap:16px;min-width:0}
.filter-panel>.form-field,.filter-panel>label{flex:1 1 160px;min-width:0}
.case-form>[data-slot=cluster]{position:sticky;bottom:-24px;z-index:1;margin:0 -24px -24px}
#case-form-progress{font-size:var(--text-label);color:var(--color-text-muted)}
/* The footer says what is still missing beside the two controls, so it reads as a status line, not a third button. */
#case-form-hint{font-size:var(--text-meta);color:var(--color-text-muted)}
#workflow-steps>[role=tab]>strong{font-size:var(--text-body)}
#workflow-steps>[role=tab]>span:not([data-step-number]){grid-column:2;font-size:var(--text-caption);color:var(--color-text-muted);white-space:normal}
@media(max-width:760px){
 .workspace-page{padding:24px 16px}.workspace-page-head{gap:16px;margin-bottom:24px}
 .entry-workspace .composer-tools button::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-indent:0}
}


.entry-workspace .task-details .steps{gap:24px;padding:16px 0}
.entry-workspace .task-details .tool-row{position:relative;min-width:0;padding:12px 16px;border-radius:var(--radius-row);background:var(--color-fill);flex-wrap:wrap}
.entry-workspace .task-details .tool-row.error{background:var(--color-danger-subtle)}



/* ===== Polish pass, 15 September 2026: motion, geometry and states measured in the running app. =====
   Values now come from the Vagab table: the press is --scale-press on transform, surfaces enter over .16-.2s and
   leave over .14s, every curve is ease. Text controls are 40 px on desktop and 44 px on touch (DF-02). */

/* 1. Press feedback on every pressable control, on one property. The registry writes the same transform, so the two
   layers replace each other instead of multiplying two scales. Full-width rows, tabs and menu items stay still, and so
   do the registry variants that carry their own geometry (nav, nav-quiet, nav-raised, row, field, link, day): this
   file is unlayered and therefore outranks a utility, so the list below is where the exemption has to live. It repeats the
   :not chain of the press rules and adds a tag, which puts it above both of them. */
button{transition:var(--t-bg),transform .14s ease,box-shadow .14s ease,border-color .16s ease}
button:not(.static):not(:disabled):not([aria-disabled=true]):active{transform:scale(var(--scale-press))}
[data-size^=icon]:not(.static):not(:disabled):not([aria-disabled=true]):active{transform:scale(var(--scale-press-icon))}
button:is([data-variant^=nav],[role=tab],[role=menuitem],[role=menuitemradio],[role=option],.conv-list button,.case-source-row>button,.source-list button,[data-variant=row],[data-variant=field],.case-table-row button,[data-variant=segment],[data-variant=link],[data-variant=day],.starters button):not(.static):not(:disabled):not([aria-disabled=true]):active{transform:none}

/* 2. Control heights: 40 px for text and icon controls on desktop; touch keeps 44 px via --control-height. */

/* 4. Unavailable controls take a neutral fill and text, not a faded primary. */
button:disabled,.entry-workspace #send:disabled{opacity:1;background:var(--color-fill-strong);color:var(--color-text-disabled)}
.entry-workspace .composer-tools [data-variant=ghost]:disabled{background:transparent}

/* 5. Toast: rises 12 px into its place at the foot of the page over .2s, leaves over .14s; status tone by default. */
.toast{box-shadow:var(--shadow-toast);opacity:1;translate:0 0;transition:opacity .2s ease,translate .2s ease,display .2s allow-discrete,overlay .2s allow-discrete}
.toast[hidden]{opacity:0;translate:0 var(--rise-panel);transition-duration:.14s}
@starting-style{.toast:not([hidden]){opacity:0;translate:0 var(--rise-panel)}}

/* 6. Composer: the field grows instantly while typing; only its focus is animated, by the shared field transition. */
.composer textarea{transition:none}

/* 7. Review panel: the title keeps its words, actions sit under it, nothing scrolls sideways, 340 px by default. */
.entry-workspace{--canvas-width:380px}
.canvas{overflow-x:hidden}
.canvas>*{min-width:0;max-width:100%}
.conv-list [data-slot=row-meta]{font-size:var(--text-caption);font-weight:400;color:var(--color-text-subtle)}

/* 8. Menus are vertical lists of uniform rows; the mode menu never breaks a label mid-word. */
.menu-pop>button,.menu-pop [role=menuitem],.menu-pop [role=menuitemradio]{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--menu-item-height);padding:8px 12px;border:0;box-shadow:none;background:transparent;border-radius:var(--radius-control);text-align:start;overflow-wrap:normal;word-break:normal;white-space:normal}
.menu-pop>button:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-hover)}
.menu-pop :is([role=menuitem],[role=menuitemradio])[data-ui-adapter=shadcn]{display:grid}

/* 9. Icon-only controls centre their icon; text-indent used to push it out of the box on touch and in the collapsed rail. */
.entry-workspace .composer-tools button [data-animate-slot]{margin:0}
.entry-workspace #send [data-animate-slot]{position:absolute;left:50%;top:50%;translate:-50% -50%;text-indent:0;margin:0}
@media(max-width:760px){.entry-workspace .composer-tools button [data-animate-slot]{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;color:var(--color-text-muted)}}
@media(min-width:761px){.entry-workspace.rail-collapsed #workspace-navigation [data-variant^=nav] [data-animate-slot]{position:absolute;left:50%;top:50%;translate:-50% -50%;text-indent:0;margin:0}}

/* 10. Sidebar: Recent heading with a quiet inline filter, readable label colour, 13 px account text. */
.entry-workspace #account-menu>:not(summary){font-size:var(--text-label)}

/* 12. An empty evidence table is one line of text, not a scrolling box. */
.daily-table-wrap:has(>.side-empty){max-height:none}

/* 13. Text glyphs become icons: disclosure chevron, chip remove. */
.source-chip button+button{display:inline-grid;place-items:center;min-width:24px}

/* 14. Icon-button tooltip: 400 ms before the first show, a .16s fade, never on a plain click focus. */
[data-help]::after{content:attr(data-help);position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-end:0;width:max-content;max-width:min(220px,calc(100vw - 24px));padding:4px 8px;border:0;border-radius:var(--radius-control);background:var(--color-surface-inverse);color:var(--color-text-inverse);font-size:var(--text-caption);font-weight:400;line-height:var(--text-label--line-height);text-align:start;white-space:normal;box-shadow:var(--shadow-popover);pointer-events:none;opacity:0;visibility:hidden;translate:0 -2px;transition:opacity .16s ease,translate .16s ease,visibility 0s linear .16s}
[data-help]:hover::after,[data-help]:focus-visible::after{opacity:1;visibility:visible;translate:0 0;transition-delay:400ms,400ms,400ms}
[data-help]:active::after{opacity:0}

/* 15. The drawer scrim fades with the drawer. */
.scrim{opacity:1;transition:opacity .14s ease,display .14s allow-discrete}
.scrim[hidden]{opacity:0}
@starting-style{.scrim:not([hidden]){opacity:0}}

/* 16. Case identity: the case name sits in the top bar and the empty state says what to do next. */
.entry-workspace[data-case-open] #empty-note{display:block;color:var(--color-text-muted);font-size:var(--text-body);max-width:520px}

/* 17. Arrival highlight under 300 ms; token colours on starters; reduced motion keeps every state. */
.source-list li.arrived{animation:arrive .2s ease}
.starters button:hover{background:var(--color-fill-hover)}
@media(prefers-reduced-motion:reduce){button:not(.static):not(:disabled):not([aria-disabled=true]):active,[data-size^=icon]:not(.static):not(:disabled):not([aria-disabled=true]):active{transform:none}}

/* 18. Distinct navigation icons: Tasks and Vault no longer share glyphs with Automations and Cases; selected fills stay on closed geometry. */

/* 19. Review tabs fit one row: below 420 px of panel width the tab icons give way to their labels. */


/* 21. Account: one trigger at the foot of the rail, one menu on the shared popover; no nested disclosures. */
.entry-workspace #account-summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--space-3);row-gap:0;min-height:52px;padding:0 var(--space-3);border-radius:var(--radius-card);background:var(--color-quiet-hover);cursor:pointer}
.entry-workspace #account-summary>.avatar{grid-column:1;grid-row:1 / span 2}
.entry-workspace #account-summary .account-name{grid-column:2;font:500 var(--text-secondary)/var(--text-secondary--line-height) var(--font-sans);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-workspace #account-summary .workspace-identity{grid-column:2;font-weight:400;color:var(--color-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-workspace #account-summary>[data-animate-end]{grid-column:3;grid-row:1 / span 2;margin:0;color:var(--color-text-subtle)}
.entry-workspace #account-summary::-webkit-details-marker{display:none}
.entry-workspace #account-summary::marker{content:''}
.entry-workspace #account-summary:hover{background:var(--color-quiet-strong)}
.account-panel{min-width:240px}
.account-panel #account-mailbox{display:grid;gap:8px;padding:8px 12px;background:var(--color-quiet);border-radius:var(--radius-control)}
.account-panel #account-mailbox .label{padding:0;margin:0}
.account-panel .connect{padding:8px 0;min-height:var(--nav-height);font-size:var(--text-label);background:transparent}
.account-panel .connect:hover{color:var(--color-accent)}
.account-panel .mail-account{font-size:var(--text-label)}
.account-panel #mail-note{margin:0}

/* 22. One icon path. CSS glyphs became mounted icons; these rules only place them. The native select chevron is the one CSS exception, because a select cannot hold a child element. */
.tool-row.done .dot,.tool-row.error .dot{animation:none;background:none;width:auto;height:auto;border-radius:0;margin:0;display:inline-flex}
.tool-row.error .dot{color:var(--color-danger)}
.tool-row .dot [data-animate-slot],.project-access-options [data-animate-slot]{margin:0}
.tool-row .tool-arrow{display:none}
.entry-workspace .task-details .tool-row:has(~.tool-row) .tool-arrow{display:inline-flex;position:absolute;inset-inline-start:20px;bottom:-25px;color:var(--color-text-muted)}
.form-disclosure>summary .disclosure-icon{transition:rotate .18s ease}
.form-disclosure[open]>summary .disclosure-icon{rotate:90deg}
.project-access-menu>button>[data-animate-slot]{order:1;margin:0 0 0 auto}
@media(prefers-reduced-motion:reduce){.form-disclosure>summary .disclosure-icon{transition:none}}
.workspace-page h1,.workspace-page h2,.empty h2,[data-slot=dialog-title]{text-wrap:balance}
.side-note,.side-empty,.workspace-page p,.library-intro,.card-summary{text-wrap:pretty}
.src-meta,[data-slot=row-meta],.case-table-row>span,#inbox-count,.tool-summary,time,.drum-item,.calendar-grid>button,.calendar-week>span,#automation-schedule>button>span,#automation-schedule>button>strong,#cases-count,.chint,#ready-tasks-count{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){summary>[data-animate-slot]{transition:none}}
@media(min-width:761px){.entry-workspace.rail-collapsed #workspace-navigation [data-variant^=nav] [data-animate-slot]{color:var(--color-text-muted)}.entry-workspace.rail-collapsed #workspace-navigation [data-variant=nav][aria-current=page] [data-animate-slot]{color:var(--color-accent-text)}}
[data-slot=popover-content] [data-popover-content]{position:static;inset:auto;animation:none;margin:0;min-width:0;max-width:none;max-height:none;padding:var(--space-1);background:transparent;box-shadow:none}
.case-strip{flex:none;padding:var(--space-2) var(--space-8)}
.case-strip #case-files-empty{margin:0;font-size:var(--text-secondary);color:var(--color-text-subtle);white-space:nowrap}
.case-strip .row-menu>button{border-radius:var(--radius-row)}
[data-slot=row-menu-meta]{font-size:var(--text-caption);color:var(--color-text-subtle)}
#case-files{min-width:0}
[data-slot=row-menu-text]{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-versions{list-style:none;margin:0;padding:var(--space-4);display:grid;gap:var(--space-3)}
.source-versions .source-original{margin:0;justify-self:start}
@media(max-width:760px){.case-strip{padding:var(--space-2) var(--space-4)}}
.workspace-page .case-brief{margin:0;padding:0}
.case-facts{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-1) var(--space-6);font-size:var(--text-ui)}
.case-facts dt{color:var(--color-text-muted)}
.case-facts dd{margin:0;overflow-wrap:anywhere}
.case-section>h2{margin:0}
@media(max-width:760px){.case-facts{grid-template-columns:minmax(0,1fr)}.case-facts dt{margin-top:var(--space-2)}}
.canvas .email-toolbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"start" "end" "center";row-gap:var(--gap-block)}
.canvas .email-toolbar>[data-zone]{flex-wrap:wrap;justify-content:flex-start}
.workspace-page .case-brief p{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 var(--space-6);font-size:var(--text-ui)}
.workspace-page .case-brief .label{display:inline;color:var(--color-text-muted)}
.workspace-page .case-brief .brief-alert{display:block}