:root {
  --brand-blue: #326AB6;
  --brand-green: #54B570;
  --brand-blue-strong: #285a9b;
  --brand-blue-soft: #eaf1fb;
  --paper: #f6f4ef;
  --surface: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --line: #e7e2d8;
  --gap: #c05621;
  --os-gap-state: var(--gap);
  --radius: 12px;
  --radius-lg: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  background: var(--paper);
  margin: 0;
}
[hidden] { display:none !important; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; border:0!important; }
/* The shared quiet variant (ux-standing-requirements.md:196, :341; the prototype's button.quiet): an
   outlined control in the line colour with ink text on the surface. */
.quiet-button { background:var(--surface); color:var(--ink); border-color:var(--line); }
.terminal-action { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:1rem; }
button:disabled { opacity:.5; cursor:default; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:1px solid var(--brand-blue-strong); outline-offset:1px; }
#session-recovery { max-width:48rem; margin:1.5rem auto; }
/* The agreement screen aligns left with the Settings content, like every other page. */
#legal-panel { box-sizing:border-box; margin:16px; padding:16px; }
#account-status,#email-change-status,#legal-status { overflow-wrap:anywhere; }
@media(max-width:560px) { .page-header { flex-wrap:wrap; } .account-nav { gap:.75rem; flex-wrap:wrap; } #session-recovery { margin:1rem; } }

/* The header and its account navigation stay in view while content scrolls. */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.product-name {
  margin: 0;
  font-weight: 600;
}

.account-nav {
  display: flex;
  gap: 1rem;
}

.account-nav a {
  color: var(--brand-blue-strong);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1fr);
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: 1rem 1rem 4rem;
}

section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

#history-panel,
#settings-panel,
#model-assignments-panel,
#sharing-panel {
  max-width: 72rem;
  margin: 0 auto 1.5rem;
}

h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

label,
legend {
  display: block;
  margin: 0.9rem 0 0.3rem;
}

/* Ruling 45: an actionable form label is semibold body text. */
label,legend,.field-label,h3,h4,#sharing-past-lead { font-size:15px; line-height:22px; font-weight:600; }

/* Ruling 45: text, email and textarea share one 44px control. */
textarea,
input[type="text"],
input[type="email"] {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  font-weight:400;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

button {
  margin-top: 1rem;
  font: inherit;
  font-weight:600;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--brand-blue);
  border-radius: 8px;
  background: var(--brand-blue);
  color: #fff;
  cursor: pointer;
}

button.danger {
  border-color: var(--os-gap-state);
  color: var(--surface);
  background: var(--os-gap-state);
}

.quiet-line {
  font-size:13px;
  line-height:18px;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

#messages,
#record-body,
#history-list {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message {
  width: min(88%, 560px);
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
}

#messages {
  display: grid;
  gap: 0.75rem;
}

.message p { margin: 0 0 0.5rem; }


.message > :last-child { margin-bottom: 0; }

/* The prototype's composer: Return sends, and the ↵ control sits inside the box. */
.composer-box { position: relative; }
.composer-box input { padding-right:60px; min-height:52px; border-radius:12px; }
.send-symbol { display:block; transform:scale(1.25); }
button.send {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-color: var(--line);
  color: var(--brand-blue-strong);
  background: var(--paper);
  font-weight: 600;
}

.message[data-role="assistant"] {
  justify-self: start;
  background: var(--brand-blue-soft);
}

.message[data-role="owner"] {
  justify-self: end;
  background: var(--paper);
  border: 1px solid var(--line);
}

.legal-acceptance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .workspace {
    grid-template-columns: 1fr;
  }
}
[id="account-toggle"] { display: inline-block; margin-left:auto; }
.page-header > #sign-in-link { margin-top:0; margin-left:auto; }
.account-nav[data-open="false"] { display:none; }
.page-header > #account-navigation { position:absolute; right:20px; top:100%; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; flex-direction:column; gap:4px; box-shadow:0 6px 20px #00000012; }
.application-shell:has(#artifact-sidebar:not([hidden])) { display:grid; grid-template-columns:224px minmax(0,1fr); }
.application-content { min-width:0; }
#artifact-sidebar { padding:24px 16px; }
#artifact-sidebar a { display:block; padding:8px 10px; color:var(--muted); text-decoration:none; font-size:14px; border-left:3px solid transparent; border-radius:0 6px 6px 0; }
#artifact-sidebar #artifact-home { font-weight:600; background:#eef2ff; color:var(--ink); border-left-color:var(--brand-blue); }
.artifact-navigation { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:1rem; margin:0 0 1rem; }
.artifact-navigation a { color:var(--muted); min-height:44px; display:inline-flex; align-items:center; font-size:13px; line-height:18px; text-decoration:none; }
.artifact-navigation a[aria-current="page"] { color:var(--brand-blue-strong); font-weight:400; box-shadow:inset 0 -2px 0 var(--brand-blue); }
#artifact-sidebar a[aria-current="page"] { font-weight:600; }
#artifact-sidebar .quiet-line { padding:8px; }
/* The sidebar collapses to its toggle; the content takes the freed width. */
/* One header centreline across the sidebar, conversation and Outcome: the
   workspace padding (16px), pane border (1px) and pane padding (16px) put each
   pane's 44px header row at 33px, so the sidebar's first row starts there too,
   label and toggle inline on one line. */
#artifact-sidebar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; column-gap:4px; padding:33px 12px 24px 16px; }
#artifact-sidebar > #artifact-home { grid-column:1; grid-row:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#artifact-sidebar > #entity-context { grid-column:1 / -1; }
#sidebar-toggle { display:grid; grid-column:2; grid-row:1; margin:0; }
.application-shell:has(#artifact-sidebar[data-collapsed="true"]:not([hidden])) { grid-template-columns:60px minmax(0,1fr); }
#artifact-sidebar[data-collapsed="true"] { padding:33px 8px 24px; }
#artifact-sidebar[data-collapsed="true"] > :not(#sidebar-toggle) { display:none; }
#artifact-sidebar[data-collapsed="true"] { grid-template-columns:1fr; }
#artifact-sidebar[data-collapsed="true"] #sidebar-toggle { grid-column:1; justify-self:center; }
.entity-switch { position:relative; min-width:0; }
.draft-actions { grid-column:1; min-width:0; }
.draft-action-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.draft-action-row button { margin:0; }
#entry-links button { display:inline; min-height:44px; padding:0; background:none; border:0; font:inherit; color:var(--brand-blue-strong); text-decoration:underline; }
#entry-links { font-size:13px; line-height:18px; }
#save-your-work { background:var(--surface); color:var(--ink); border-color:var(--line); border-radius:12px; }
#save-panel { padding:16px; margin-top:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
#entity-name,#entity-toggle { font-size:22px; line-height:1.2; font-weight:700; overflow-wrap:anywhere; }
#entity-toggle { color:inherit; margin:0; padding:5px 8px; border:0; background:transparent; }
#account-toggle { margin-top:0; padding:8px 10px; border:0; background:transparent; color:var(--muted); }
#account-toggle::after { content:' ▾'; }
.paned > .conversation,.paned > .record { padding:16px; border-radius:16px; }
.paned > .record { background:transparent; border-color:transparent; border-radius:0; }
.empty-record-shape { display:grid; gap:16px; color:var(--muted); white-space:normal; }
.empty-record-block { display:grid; gap:12px; padding:16px; border:1px dashed var(--line); border-radius:12px; background:var(--paper); }
.empty-record-block .field-label { margin:0; }
.empty-record-lines { display:grid; gap:8px; }
.empty-record-line { height:10px; border-radius:999px; background:var(--line); }
.empty-record-line.long { width:88%; }
.empty-record-line.medium { width:66%; }
.empty-record-line.short { width:42%; }
.conversation > .quiet-line { font-size:13px; line-height:18px; }
.conversation button.send { border-radius:12px; }
.conversation > .panel-head { justify-content:flex-end; }
#entity-menu { position:absolute; left:0; top:100%; width:min(340px,85vw); padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 20px #00000012; }
#entity-options { max-height:50vh; overflow-y:auto; }
#entity-search { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; }
#entity-search::placeholder { color:var(--muted); opacity:1; }
#entity-options button { display:flex; width:100%; text-align:left; justify-content:space-between; align-items:center; gap:12px; }
#entity-options small { color:var(--muted); font-size:12px; }
#entity-options button[aria-current] { font-weight:600; }
@media(max-width:700px) {
  .application-shell:has(#artifact-sidebar:not([hidden])), .application-shell:has(#artifact-sidebar[data-collapsed="true"]:not([hidden])) { grid-template-columns:1fr; }
  #artifact-sidebar, #artifact-sidebar[data-collapsed="true"] { border-right:0; border-bottom:1px solid var(--line); padding:8px 16px; }
}
@media (max-width: 700px) {
  [id="account-toggle"] { display: inline-block; }
  .account-nav[data-open="false"] { display: none; }
  .account-nav { flex-basis: 100%; }
}
.record-table { width:100%; border-collapse:collapse; white-space:normal; margin:0 0 1.5rem; }
.record-table th,.record-table td { padding:.65rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; overflow-wrap:anywhere; white-space:pre-wrap; }
.record-table th { width:30%; font-weight:600; }
.record-table thead th { width:auto; font-weight:600; color:var(--muted,#555); border-bottom:2px solid var(--line); }
.record-table { table-layout:fixed; }
.record-table thead th { overflow-wrap:break-word; }
.record-matrix td { overflow-wrap:anywhere; }
.record-matrix th,.record-matrix td { width:auto; }
.record-matrix tbody th { width:14%; }
.record-empty-value { display:block; width:60%; height:10px; border-radius:999px; background:var(--line); }
.record-table:not(.record-matrix) th { width:28%; }
.record-table th { background:color-mix(in srgb,var(--paper) 55%,var(--line)); }
.artifact-title-line > h2,.artifact-title-line > h3 { margin:0; }
.artifact-title-line { margin-bottom:16px; }
.artifact-title-line > .field-label { margin:0; }
.record-next-step { border-top:1px solid var(--line); padding-top:24px; margin-top:16px; }
.history-steps-title { margin:24px 0 16px; }
/* The prototype's phone pattern: each area stacks as labelled fields in the
   same order, so words and amounts stay whole. Labels and values unchanged. */
@media screen and (max-width:700px) {
  .record-matrix,.record-matrix thead,.record-matrix tbody,.record-matrix tr { display:block; width:100%; }
  .record-table.record-matrix th,.record-table.record-matrix td { display:block; width:100%; box-sizing:border-box;
    border-bottom:1px solid var(--line); overflow-wrap:break-word; }
  .record-matrix thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .record-matrix tr { margin-bottom:1rem; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; }
  .record-matrix tr > :last-child { border-bottom:0; }
  .record-matrix td[data-label]::before { display:block; margin-bottom:.25rem; content:attr(data-label); font-weight:600; }
}
.field-label { margin:1.25rem 0 .35rem; font-weight:600; }
/* Ruling 39: the one code field centres and spaces its six digits
   (prototype .one-time-code-input); the text indent balances the trailing spacing. */
input.code-field { max-width:220px; text-align:center; font-size:17px; font-weight:600; letter-spacing:.34em; text-indent:.34em; font-variant-numeric:tabular-nums; }
/* The approved Settings inline panel: a separated block whose steps keep 12px
   rhythm, with its failure in the gap-state colour below the field. */
.settings-inline-panel { margin:12px 0 24px; padding:12px 0 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:40rem; }
.settings-inline-panel p, .settings-inline-panel h4 { margin:12px 0 0; }
.settings-inline-panel .field-label { margin-top:0; }
.settings-inline-panel label { margin-top:12px; }
.field-error { color:var(--os-gap-state); }
/* The Account row: the email and its label beside Change and Sign out. */
.settings-value-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.settings-summary-copy { min-width:0; }
.settings-summary-copy p { margin:0; overflow-wrap:anywhere; }
.settings-summary-copy .field-label { margin:0 0 4px; }
.settings-value-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:12px; }
.settings-value-actions button { margin-top:0; }
/* Settings follows the prototype's open page and grouped profile layout. */
#settings-panel { box-sizing:border-box; max-width:none; margin:16px; background:transparent; border:0; border-radius:0; padding:16px; font-family:inherit; font-size:15px; line-height:22px; }
#settings-heading { margin-bottom:16px; }
#settings-panel h3 { margin:0 0 12px; }
#settings-panel input[type="text"],#settings-panel input[type="email"] { border-radius:12px; }
#settings-panel .settings-value-actions { gap:8px; }
#settings-panel .settings-inline-panel { margin:12px 0 0; padding:12px 0 0; border-bottom:0; max-width:520px; }
#settings-panel .settings-inline-panel .terminal-action { justify-content:flex-end; flex-wrap:wrap; gap:12px; }
#settings-panel .settings-profile { display:grid; gap:24px; padding:16px 0 24px; border-bottom:1px solid var(--line); }
#settings-panel .profile-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
#settings-panel .profile-field-grid label { display:grid; gap:4px; margin:0; min-width:0; }
#settings-panel .settings-footer-actions,#legal-panel .settings-footer-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
#settings-panel .settings-footer-actions > div,#legal-panel .settings-footer-actions > div { display:flex; flex-wrap:wrap; gap:12px; }
#settings-panel #save-profile,#legal-panel #continue-after-legal { margin-left:auto; }
#settings-panel button,#legal-panel button { margin-top:0; min-width:44px; padding:10px 16px; border-radius:12px; }
#settings-panel button:not(.quiet-button):not(.danger),#legal-panel button:not(.quiet-button):not(.danger) { background:#2f7d4a; border-color:#2f7d4a; }
/* The agreement screen shares the Settings page type and spacing. */
#legal-panel { font-size:15px; line-height:22px; }
#legal-heading { margin-bottom:16px; }
#legal-panel .legal-acceptance { margin:16px 0; font-weight:400; }
/* Disabled fields before a renewed agreement stay readable: full ink on paper. */
#settings-panel input:disabled { color:var(--ink); -webkit-text-fill-color:var(--ink); background:var(--paper); opacity:1; }
/* The prototype's notice: a brand-blue rule on the soft blue surface. */
.notice { padding:12px; border-left:4px solid var(--brand-blue); background:var(--brand-blue-soft); margin:0 0 16px; }
.notice > p { margin:0 0 8px; }
#settings-panel .settings-step-actions { display:grid; gap:12px; margin-top:12px; }
#settings-panel .settings-inline-actions { display:flex; gap:12px; flex-wrap:wrap; }
#settings-panel .settings-inline-actions:not(:has(button:not([hidden]))) { display:none; }
#change-email-complete,#change-verify-code { justify-self:end; }
#settings-panel .settings-inline-actions:has(#change-use-different[hidden]) #change-resend-code { width:100%; }
#settings-panel #change-email-cancel { margin-right:auto; }
#settings-panel #delete-account-panel { margin-top:12px; padding:16px; border:1px solid var(--gap); border-radius:12px; background:#f6e8df; }
/* The deletion confirmation: even top spacing, a sized DELETE field, and a gap before its actions. */
#settings-panel #delete-account-panel > .field-label { margin-top:0; }
#settings-panel #delete-account-panel .terminal-action { margin-top:16px; gap:12px; }
#settings-panel #delete-account-panel p { max-width:72ch; }
#settings-panel #delete-confirmation { max-width:320px; width:100%; box-sizing:border-box; }
/* Focused fields scroll clear of the sticky page header. */
html { scroll-padding-top:80px; }
#check-in-reminders { padding:24px 0; margin-bottom:24px; border-bottom:1px solid var(--line); }
#check-in-reminders label { display:flex; align-items:center; gap:8px; margin:0; }
#delete-account { margin-left:12px; }
@media(max-width:700px) { #settings-panel .profile-field-grid { grid-template-columns:1fr; } }
#model-assignments-panel { box-sizing:border-box; max-width:none; margin:16px; background:transparent; border:0; border-radius:0; padding:16px; font-family:inherit; font-size:15px; line-height:22px; }
#model-assignments-heading { margin-bottom:16px; scroll-margin-top:80px; }
#model-assignments-panel h3 { margin:24px 0 12px; }
#model-assignments-panel input[type="text"] { border-radius:12px; }
#model-assignments-panel button { margin-top:0; min-width:44px; padding:10px 16px; border-radius:12px; }
#model-assignments-panel button:not(.quiet-button):not(.danger) { background:#2f7d4a; border-color:#2f7d4a; }
#model-assignments-panel .terminal-action { justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:12px; }
#model-assignments-panel fieldset { margin:0 0 16px; padding:0; border:0; }
#model-assignments-panel fieldset label { display:flex; align-items:flex-start; gap:8px; margin:8px 0; }
#model-assignments-panel .settings-inline-panel { margin:12px 0 0; padding:12px 0 0; border-bottom:0; max-width:520px; }
#model-assignment-pending-list,#model-assignment-activate-list { display:grid; gap:12px; }
#model-assignment-pending-list p,#model-assignment-activate-list p { margin:0; }
.panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.record > .panel-head { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; padding:0 56px 16px 0; min-height:44px; }
/* The conversation has no visible heading, so its chevron takes no row of its
   own: it sits in the pane's top-right corner on the Outcome chevron's
   centreline, and the opening cue and messages keep a gutter clear of it. */
.paned > .conversation { position:relative; }
.paned > .conversation > .panel-head { position:absolute; top:16px; right:16px; z-index:1; min-height:0; padding:0; }
.paned > .conversation > #conversation-cue { max-width:calc(100% - 84px); }
.paned > .conversation > #messages { margin-right:52px; }
.paned > .conversation > .panel-head h2 { margin:0; }
.record > .panel-head > .artifact-title-line { grid-column:1; grid-row:1; margin:0; }
.record > .panel-head > .artifact-navigation { grid-column:2; grid-row:1; margin:0; gap:16px; }
.record > .panel-head > .pane-arrow { position:absolute; top:0; right:0; margin:0; }
.record > .panel-head .artifact-title-line > * { margin:0; }
.record > .panel-head .artifact-meta { white-space:normal; }
@media(min-width:561px){.record > .panel-head{align-items:start}.record > .panel-head .artifact-title-line{row-gap:0}.record > .panel-head .artifact-title-line > h2{line-height:44px}}
@media(max-width:1050px) { .record > .panel-head > .artifact-navigation { grid-column:1 / -1; grid-row:2; justify-content:flex-start; } }
.pane-arrow { display:inline-grid; place-items:center; background:transparent; border:0; padding:0; margin:0; width:44px; height:44px; min-width:44px; min-height:44px; cursor:pointer; color:var(--muted,#555); font-size:17px; font-weight:400; line-height:1; }
.pane-arrow:hover { color:var(--brand-blue-strong); background:var(--paper); }
.account-nav a[aria-current="page"] { font-weight:600; text-decoration:underline; }
.workspace[data-focus="conversation"] .record,
.workspace[data-focus="record"] .conversation { display:none; }
.workspace[data-focus="conversation"],.workspace[data-focus="record"] { grid-template-columns:1fr; }

/* Expanded chat: bubbles grow with the pane instead of staying at 560px. */
.workspace[data-focus="conversation"] .message { width:min(88%, 100%); }

.pane-switch { display:none; }
.pane-switch button { color:var(--brand-blue-strong); background:var(--surface); border-color:var(--brand-blue-strong); }
.pane-switch button[aria-pressed="true"] { background:var(--brand-blue-soft); }
/* Owner decision, 11-Sep-2026: panes are one window tall, about 400px at
   least, never taller than a short window. The history scrolls inside the
   conversation, so the reply box stays at its foot. Selectors stay weaker than
   the pane-hiding rules above and below. */
@media screen {
  .paned > .conversation,.paned > .record { box-sizing:border-box; height:var(--pane-height,calc(100dvh - 7rem));
    min-height:min(400px,var(--pane-height,calc(100dvh - 7rem))); }
  .paned > .conversation { display:flex; flex-direction:column; }
  .paned > .conversation > * { flex:none; }
  .paned > .conversation > #messages { flex:0 1 auto; min-height:0; overflow-y:auto; align-content:start; }
  .conversation > .composer-box { margin-top:12px; }
  .paned > .record { overflow-y:auto; }
}
#sharing-panel { box-sizing:border-box; max-width:none; width:calc(100% - 32px); margin:16px; padding:16px; background:transparent; border:0; border-radius:0; }
#sharing-panel > .artifact-navigation { margin:0 0 16px; justify-content:flex-end; }
#history-panel { box-sizing:border-box; max-width:none; margin:16px; padding:16px; background:transparent; border:0; }
#history-list { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; white-space:normal; }
.history-record-picker { display:flex; flex-direction:column; gap:0; align-self:start; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.history-record-picker button { margin:0; padding:12px; text-align:left; background:transparent; border:0; color:var(--ink); border-radius:8px; }
.history-record-picker button[aria-pressed="true"] { background:var(--brand-blue-soft); box-shadow:inset 3px 0 var(--brand-blue); }
.history-record-picker button { min-height:64px; border-radius:0; }
.history-record-picker button + button { border-top:1px solid var(--line); }
.history-record-detail { min-width:0; }
.history-record-detail .history-record-time { color:var(--muted); font-size:13px; margin:0 0 12px; }
@media(max-width:700px) { #history-list { grid-template-columns:1fr; } .history-record-picker { flex-direction:row; overflow-x:auto; } .history-record-picker button { flex:none; } .history-record-picker button + button { border-top:0; border-left:1px solid var(--line); } }
#sharing-panel #invite-email { max-width:520px; }
#sharing-panel #send-invite { margin:12px 0 24px; background:#2f7d4a; border-color:#2f7d4a; }
#sharing-current h3,#sharing-past-lead { color:var(--ink); margin:24px 0 0; padding-bottom:12px; border-bottom:1px solid var(--line); }
.sharing-person { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.sharing-person > div { min-width:0; overflow-wrap:anywhere; }
.sharing-person p { margin:0; }
.sharing-person .quiet-line { margin-top:4px; font-size:13px; line-height:18px; }
#sharing-panel .sharing-person button { flex:none; margin:0; border-radius:12px; }
@media(max-width:560px) { .sharing-person { align-items:flex-start; flex-wrap:wrap; gap:12px; } }
@media screen and (max-width:768px) { .paned > .record { height:auto; min-height:0; overflow:visible; } }
@media (max-width:560px) {
  .workspace { grid-template-columns:1fr; }
  /* One pane at a time on a phone. The switch is outside both panes, so it
     never disappears with the pane it would bring back. */
  .pane-switch { display:flex; gap:.5rem; }
  .pane-arrow { display:none; }
  /* With the arrow hidden, the record header no longer reserves its space. */
  .record > .panel-head { padding-right:0; }
  .paned > .conversation > #conversation-cue { max-width:none; }
  .paned > .conversation > #messages { margin-right:0; }
  /* Only the owner workspace carries the switch, so only it hides a pane.
     The reader page has no switch and must never hide its record. */
  .workspace.paned:not([data-focus="record"]) .record { display:none; }
  .workspace.paned[data-focus="record"] .conversation { display:none; }
}
.artifact-meta { margin:0 0 .75rem; color:var(--muted,#555); font-size:13px; line-height:18px; font-weight:400; }
/* The finalized date sits on the heading's own line. */
.artifact-title-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.artifact-title-line > * { margin-bottom:0; }
.artifact-title-line .artifact-meta { white-space:nowrap; }
.transparency-footer { max-width:none; padding:16px 16px 32px; margin:0; text-align:left; color:var(--muted); font-size:.8rem; line-height:1.9; overflow-wrap:anywhere; }
.transparency-footer a { color:var(--brand-blue-strong); }
#sign-in-panel,#load-failed-panel { max-width:42rem; margin:1rem auto; }
@media(max-width:560px) { #sign-in-panel,#load-failed-panel { margin:1rem; } .record-table th,.record-table td { padding:.5rem .3rem; } }
@media print { .page-header,.conversation,button,input,textarea,#sign-in-panel,#settings-panel,#sharing-panel,#artifact-sidebar,#artifact-navigation,.history-record-picker { display:none!important; } .application-shell,#history-list { display:block!important; } .workspace { display:block; padding:0; } .record { border:0; } .record:not([hidden]) { display:block!important; } tr { break-inside:avoid; } .transparency-footer { font-size:9pt; } }