.appShell {
  height: 100svh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr) 354px;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* Collaboration and administration capability surfaces */
.capabilityState { min-height: 140px; align-content: center; }
/* minmax(0, 1fr) rather than the implicit auto track: an auto track takes its minimum
   from the widest child's min-content, which let the register table and the filter
   toolbar push these panels wider than the organisation-settings drawer. */
.connectorAdmin, .libraryAdmin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.connectorGroup { display: grid; gap: 10px; }
.connectorGroup h4 { color: var(--textSubtle); font-size: 11px; text-transform: uppercase; }
.connectorList { display: grid; gap: 8px; }
.connectorRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.connectorRow > div:first-child, .connectorState { min-width: 0; display: grid; gap: 3px; }
.connectorRow strong { font-size: 12px; }
.connectorRow small, .connectorError { color: var(--textSubtle); font-size: 10px; overflow-wrap: anywhere; }
.connectorState { justify-items: end; text-align: right; }
.connectorError { grid-column: 1 / -1; margin: 0; color: var(--statusDanger); }
.adminStatus { width: fit-content; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 4px; background: var(--panelStrong); color: var(--muted); font-size: 9px; font-weight: 800; text-transform: capitalize; }
.adminStatus.status-ready, .adminStatus.status-approved, .adminStatus.status-current { background: color-mix(in srgb, var(--statusSuccess) 14%, var(--surface)); color: var(--statusSuccess); }
.adminStatus.status-disabled, .adminStatus.status-unknown, .adminStatus.status-pending { background: var(--panelStrong); color: var(--muted); }
.adminStatus.status-misconfigured, .adminStatus.status-rejected, .adminStatus.status-superseded { background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); }
.libraryMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.libraryMetrics div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.libraryMetrics div:last-child { border-right: 0; }
.libraryMetrics span, .libraryMetrics strong { display: block; }
.libraryMetrics span { color: var(--textSubtle); font-size: 10px; }
.libraryMetrics strong { margin-top: 3px; font-size: 15px; }
.libraryPriorityHierarchy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.libraryPriorityHierarchy div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.libraryPriorityHierarchy span { color: var(--statusSuccess); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.libraryPriorityHierarchy strong { font-size: 11px; }
.libraryPriorityToolbar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(140px, 190px)) auto; gap: 10px; align-items: end; }
.libraryPriorityToolbar label { display: grid; gap: 5px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.libraryPriorityToolbar input, .libraryPriorityToolbar select, .libraryPriorityCell input, .libraryPriorityCell select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; }
.librarySubmissionQueue { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--brass); border-radius: 7px; background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); }
.librarySubmissionList { display: grid; gap: 8px; }
.librarySubmissionList article { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) auto; align-items: end; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.librarySubmissionList article > div:first-child { min-width: 0; display: grid; gap: 3px; }
.librarySubmissionList strong, .librarySubmissionList small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.librarySubmissionList small { color: var(--muted); font-size: 9px; }
.librarySubmissionList label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 750; }
.librarySubmissionList input { min-height: 34px; padding: 7px 8px; border: 1px solid var(--lineStrong); border-radius: 5px; }
.librarySubmissionList article > div:last-child { display: flex; gap: 6px; }
.libraryPriorityNotice { min-height: 16px; margin: -10px 0 0; color: var(--statusSuccess); font-size: 10px; font-weight: 700; }
.libraryTableWrap { min-width: 0; max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.libraryTable { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 10px; }
.libraryTable th, .libraryTable td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.libraryTable thead th { position: sticky; top: 0; z-index: 1; background: var(--panelStrong); color: var(--textSubtle); font-size: 9px; text-transform: uppercase; }
.libraryTable tbody tr:last-child > * { border-bottom: 0; }
.libraryTable tbody th { width: 240px; max-width: 240px; font-weight: 750; }
.libraryTable th span, .libraryTable th small, .libraryTable td span, .libraryTable td small { display: block; overflow-wrap: anywhere; }
.libraryTable small { margin-top: 3px; color: var(--textSubtle); font-size: 9px; font-weight: 400; }
.libraryPriorityCell { width: 320px; min-width: 320px; }
.libraryPriorityCell form { display: grid; gap: 6px; }
.libraryPrioritySummary { display: grid; gap: 4px; justify-items: start; }
.libraryPrioritySummary > div { display: flex; align-items: baseline; gap: 6px; }
.libraryTierBadge { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--lineStrong); border-radius: 4px; background: var(--panelStrong); color: var(--textSubtle); font-size: 9px; font-weight: 750; white-space: nowrap; }
.libraryTierLabel { font-weight: 700; }
.libraryPrioritySummary .quietButton { min-height: 26px; padding: 4px 10px; font-size: 9px; }
.libraryPriorityActions { display: flex; flex-wrap: wrap; gap: 6px; }
.libraryPriorityActions .quietButton { min-height: 30px; padding: 5px 8px; font-size: 9px; }
.libraryPrioritySummary .libraryPriorityActions .quietButton { min-height: 26px; padding: 4px 10px; font-size: 9px; }
.libraryDeleteButton:hover, .libraryDeleteButton:focus-visible { border-color: var(--statusDanger); background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); }
.libraryTable tr[hidden] { display: none; }
.libraryAdminHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.libraryAdminHeading > div { min-width: 0; }
.libraryAddSourceButton { min-height: 36px; padding: 0 14px; white-space: nowrap; }
.libraryAddSourcePanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.libraryAddSourcePanel label { min-width: 0; display: grid; gap: 5px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.libraryAddSourcePanel .libraryAddSourceFile { grid-column: 1 / -1; }
/* Drop target for the Add Source file. Dashed to read as "drop here"; the file input
   inside it stays the real control, so the picker and keyboard route are untouched. */
.libraryDropZone { display: grid; gap: 7px; padding: 12px; border: 1px dashed var(--lineStrong); border-radius: 7px; background: var(--surface); transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.libraryDropZone.libraryDropZoneActive { border-color: var(--jade); border-style: dashed; background: color-mix(in srgb, var(--jade) 14%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jade) 55%, transparent); }
.libraryDropHint { margin: 0; color: var(--textSubtle); font-size: 10px; font-weight: 650; line-height: 1.45; }
.libraryDropZone.libraryDropZoneActive .libraryDropHint { color: var(--jade); }
.libraryDropFile { margin: 0; color: var(--ink); font-size: 10px; font-weight: 750; }
.libraryDropFile:empty { display: none; }
.libraryAddSourcePanel input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 11px; }
.libraryAddSourcePanel input[type="file"] { padding: 6px 9px; }
.libraryAddSourceActions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.libraryAddSourceActions .attachButton { padding: 0 14px; }
.libraryAddSourcePanel .formError { grid-column: 1 / -1; margin: 0; min-height: 0; color: var(--statusDanger); }
.libraryAddSourcePanel .formError:empty { display: none; }
.libraryRegister { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* The register table keeps its min-width and scrolls inside .libraryTableWrap. Without
   min-width: 0 the grid item would take its automatic minimum size from that table and
   drag the whole panel past the edge of the drawer instead. */
.libraryBookGroup { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.libraryBookGroup > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; cursor: pointer; }
.libraryBookGroup > summary strong { font-size: 11px; font-weight: 800; }
.libraryBookGroup > summary span { color: var(--textSubtle); font-size: 9px; font-weight: 700; white-space: nowrap; }
.libraryBookGroup[open] > summary { border-bottom: 1px solid var(--line); }
.libraryBookGroup .libraryTableWrap { border: 0; border-radius: 0 0 7px 7px; }
/* Subordinate to the book title: pushed to the trailing edge of the summary row and
   sized down so the book name stays the primary thing in the row. */
.libraryBookRenameButton { margin-left: auto; min-height: 26px; padding: 4px 10px; font-size: 9px; }
.libraryBookRenameForm { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.libraryBookRenameForm label { min-width: 0; display: grid; gap: 5px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.libraryBookRenameForm input { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 11px; font-weight: 400; }
.libraryBookRenameWarning { margin: 0; color: var(--textSubtle); font-size: 9px; font-weight: 700; }
.libraryBookRenameActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.libraryBookRenameActions .quietButton { min-height: 30px; padding: 5px 10px; font-size: 9px; }
.libraryBookRenameForm .formError { margin: 0; min-height: 0; color: var(--statusDanger); }
.libraryBookRenameForm .formError:empty { display: none; }
.librarySourceRenameForm { display: grid; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.librarySourceRenameForm label { min-width: 0; display: grid; gap: 4px; color: var(--textSubtle); font-size: 9px; font-weight: 750; }
.librarySourceRenameForm input { width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 11px; font-weight: 400; }
.librarySourceRenameActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.librarySourceRenameActions .quietButton { min-height: 28px; padding: 4px 10px; font-size: 9px; }
.librarySourceRenameForm .formError { margin: 0; min-height: 0; color: var(--statusDanger); font-size: 9px; }
.librarySourceRenameForm .formError:empty { display: none; }

/* Extracted-text viewer. The original files are not retained, so this overlay is the
   only place a practitioner can see exactly what GramyLex reads and cites. The text
   column keeps a readable measure and the excerpt list scrolls inside the dialog. */
.libraryPreviewScrim { position: fixed; inset: 0; z-index: 118; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.libraryPreviewDialog { width: min(880px, 100%); height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 60px var(--shadowColor); }
.libraryPreviewDialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.libraryPreviewDialog > header > div { min-width: 0; display: grid; gap: 3px; }
.libraryPreviewDialog > header strong { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.libraryPreviewDialog > header strong:focus-visible { outline: 2px solid var(--lineStrong); outline-offset: 3px; }
.libraryPreviewDialog > header small { color: var(--textSubtle); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.libraryPreviewDialog > header p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.libraryPreviewOcrWarning { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--brass); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); font-size: 11px; line-height: 1.5; }
.libraryPreviewOcrWarning strong { font-weight: 800; }
.libraryPreviewProvenance { margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--panelStrong); color: var(--textSubtle); font-size: 10px; }
.libraryPreviewBody { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.libraryPreviewBody:focus-visible { outline: 0; }
.libraryPreviewExcerpts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.libraryPreviewExcerpts li { max-width: 68ch; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.libraryPreviewPinpoint { color: var(--textSubtle); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.libraryPreviewText { margin-top: 7px; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.libraryPreviewTruncated { display: block; margin-top: 6px; color: var(--textSubtle); font-size: 9px; font-weight: 700; }
.libraryPreviewState { display: grid; gap: 10px; justify-items: start; padding: 26px 0; color: var(--muted); font-size: 12px; }
.libraryPreviewError { color: var(--statusDanger); }
.libraryPreviewPager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.libraryPreviewRange { color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.libraryPreviewPagerControls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.libraryPreviewPagerControls .quietButton { min-height: 30px; padding: 5px 12px; font-size: 10px; }
.libraryPreviewPageJump select { min-height: 30px; padding: 4px 8px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 10px; }
.libraryPreviewActions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }

/* Queries Library (class names keep the older prompt* prefix, which the client, the
   API routes and the store all still use). Same dialog shell as the extracted-text
   viewer: fixed scrim,
   header, one scrolling body and a footer. */
.promptLibraryScrim { position: fixed; inset: 0; z-index: 118; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.promptLibraryDialog { width: min(880px, 100%); height: min(800px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 60px var(--shadowColor); }
.promptLibraryDialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.promptLibraryDialog > header > div { min-width: 0; display: grid; gap: 4px; }
.promptLibraryDialog > header strong { font-size: 15px; font-weight: 800; }
.promptLibraryDialog > header strong:focus-visible { outline: 2px solid var(--lineStrong); outline-offset: 3px; }
.promptLibraryDialog > header p { color: var(--textSubtle); font-size: 11px; line-height: 1.5; }
.promptLibraryBody { flex: 1; min-height: 0; display: grid; align-content: start; gap: 20px; overflow-y: auto; padding: 16px 20px 22px; }
.promptLibraryActions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.promptLibraryNotice { padding: 8px 11px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--panel); color: var(--jade); font-size: 11px; font-weight: 720; }
.promptLibraryToolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promptLibraryToolbar .primaryButton { min-height: 36px; padding: 0 14px; font-size: 12px; }
.promptLibraryToolbar .quietButton { min-height: 36px; font-size: 12px; }
.promptLibraryState { display: grid; gap: 10px; justify-items: start; padding: 22px 0; color: var(--muted); font-size: 12px; }
.promptLibraryStateError { color: var(--statusDanger); }
.promptLibrarySection { display: grid; gap: 10px; }
.promptLibrarySectionHeading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.promptLibrarySectionHeading h3 { color: var(--jade); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.promptLibrarySectionHeading small { color: var(--textSubtle); font-size: 10px; }
.promptLibraryEmpty { color: var(--muted); font-size: 11px; line-height: 1.55; }
.promptLibraryList {
  /* Height of a card whose prompt is clamped to two lines: 12px + 14px padding,
     2px borders, a 20px title row, two 12px/1.5 prompt lines, a 30px action row and
     the two 9px gaps between them. Pinning the grid rows to this height is what stops a
     hover-expanded card from reflowing the list. */
  --promptCardHeight: calc(26px + 2px + 20px + 36px + 30px + 18px);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.promptLibraryCard {
  display: grid;
  gap: 9px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 7px;
  background: var(--surface);
}
.promptLibraryCardHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promptLibraryCardHead strong { color: var(--jade); font-size: 12px; font-weight: 780; line-height: 1.35; overflow-wrap: anywhere; }
.promptWorkflowChip { padding: 2px 8px; border: 1px solid var(--lineStrong); border-radius: 999px; background: var(--panel); color: var(--jade); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.promptLibraryText { color: var(--textSubtle); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.promptLibraryCardActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promptLibraryMeta { color: var(--muted); font-size: 10px; }
.promptLibraryCardButtons { margin-inline-start: auto; display: flex; gap: 6px; }
.promptLibraryCardButtons .quietButton { min-height: 30px; padding: 0 10px; font-size: 10px; }

/* Same clamp-and-expand technique as the starter cards: every prompt is clamped to two
   lines and the full text is revealed on hover or keyboard focus. `grid-auto-rows` pins
   each row to the clamped height, so an expanded card overflows its own grid area and no
   sibling ever moves. Scoped to fine pointers, which are the only ones with a hover
   state; touch devices keep the unclamped cards and show every prompt in full. */
@media (hover: hover) and (pointer: fine) {
  .promptLibraryList { grid-auto-rows: var(--promptCardHeight); align-items: start; }
  .promptLibraryCard { position: relative; height: var(--promptCardHeight); transition: border-color 140ms ease, box-shadow 140ms ease; }
  .promptLibraryText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .promptLibraryCard:hover,
  .promptLibraryCard:focus-visible,
  .promptLibraryCard:focus-within {
    height: auto;
    min-height: var(--promptCardHeight);
    z-index: 4;
    border-color: var(--lineStrong);
    border-left-color: var(--brass);
    box-shadow: 0 14px 30px var(--shadowColor);
  }
  .promptLibraryCard:hover .promptLibraryText,
  .promptLibraryCard:focus-visible .promptLibraryText,
  .promptLibraryCard:focus-within .promptLibraryText { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .promptLibraryCard { transition: none; }
}

.promptLibraryForm { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--surface); }
.promptLibraryForm h3 { color: var(--jade); font-size: 13px; font-weight: 800; }
.promptLibraryForm h3:focus-visible { outline: 2px solid var(--lineStrong); outline-offset: 3px; }
.promptLibraryForm label { display: grid; gap: 5px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.promptLibraryForm label small { color: var(--muted); font-weight: 600; }
.promptLibraryForm input, .promptLibraryForm textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; font-weight: 400; }
.promptLibraryForm textarea { line-height: 1.5; resize: vertical; }
.promptLibraryCounter { justify-self: end; margin-top: -6px; color: var(--muted); font-size: 10px; }
.promptLibraryForm .formError { margin: 0; min-height: 0; font-size: 11px; }
.promptLibraryForm .formError:empty { display: none; }
.promptLibraryScopeNote { color: var(--textSubtle); font-size: 11px; line-height: 1.5; }
.promptScopeField { display: grid; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.promptScopeField legend { padding: 0 4px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.promptScopeField label { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; font-weight: 500; }
.promptScopeField input { width: 16px; min-width: 16px; margin-top: 2px; padding: 0; accent-color: var(--jade); }
.promptScopeField span { display: grid; gap: 2px; }
.promptScopeField strong { font-size: 11px; font-weight: 780; }
.promptScopeField small { color: var(--textSubtle); font-size: 10px; }
.promptLibraryFormActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.promptLibraryFormActions .quietButton, .promptLibraryFormActions .primaryButton { min-height: 36px; padding: 0 14px; font-size: 12px; }

.collaborationScrim { position: fixed; inset: 0; z-index: 89; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.collaborationWorkspace { width: min(960px, 100%); height: min(820px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 60px var(--shadowColor); }
.collaborationWorkspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.collaborationWorkspace header small { color: var(--jade); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.collaborationWorkspace h2 { margin-top: 3px; font-size: 22px; }
.collaborationWorkspace header p { margin-top: 5px; color: var(--textSubtle); font-size: 12px; }
.collaborationBody { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: auto; background: var(--line); }
.collaborationFeedback { grid-column: 1 / -1; background: var(--panel); }
.collaborationFeedback:empty { display: none; }
.collaborationSection { min-width: 0; display: grid; align-content: start; gap: 13px; padding: 20px 22px; background: var(--surface); }
.accessModeSection, .finalLockSection { grid-column: 1 / -1; }
.accessModeSection { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.segmentedControl { display: inline-grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); padding: 3px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--panelStrong); }
.segmentedControl button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--textSubtle); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.segmentedControl button[aria-pressed="true"] { background: var(--surface); color: var(--jade); box-shadow: 0 1px 3px var(--shadowColor); }
.compactAdminForm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr) auto; align-items: end; gap: 8px; }
.reviewAssignmentForm { grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) minmax(120px, .7fr) auto; }
.compactAdminForm label, .finalVersionForm label, .finalVersionForm fieldset { min-width: 0; display: grid; gap: 5px; color: var(--textSubtle); font-size: 10px; font-weight: 750; }
.compactAdminForm input, .compactAdminForm select, .commentComposer textarea, .finalVersionForm input, .finalVersionForm textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 11px; }
.memberAdminList, .commentList, .reviewAssignmentList, .finalVersionList { display: grid; gap: 8px; }
.memberAdminRow { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(105px, auto) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.memberAdminRow > div { min-width: 0; display: grid; }
.memberAdminRow strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.memberAdminRow small { color: var(--textSubtle); font-size: 9px; overflow-wrap: anywhere; }
.memberAdminRow select { min-height: 32px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); font: inherit; font-size: 10px; }
.memberAdminRow button, .matterComment button, .reviewDecisionActions button { min-height: 32px; padding: 0 8px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--textSubtle); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.commentComposer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.commentComposer textarea, .finalVersionForm textarea { resize: vertical; line-height: 1.45; }
.matterComment, .reviewAssignment, .finalVersionList article { display: grid; gap: 6px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.matterComment > div, .reviewAssignment > div:first-child, .finalVersionList article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.matterComment strong, .reviewAssignment strong, .finalVersionList strong { font-size: 11px; }
.matterComment time, .matterComment small, .reviewAssignment small, .finalVersionList small { color: var(--textSubtle); font-size: 9px; }
.matterComment p, .reviewAssignment p, .finalVersionList p { margin: 0; color: var(--textSubtle); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.matterComment.resolved { opacity: .72; }
.reviewAssignment blockquote { margin: 0; padding-left: 9px; border-left: 2px solid var(--lineStrong); color: var(--textSubtle); font-size: 10px; }
.reviewDecisionActions { display: flex; gap: 6px; }
.finalVersionForm { display: grid; gap: 10px; }
.finalVersionForm fieldset { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.finalVersionForm fieldset label { grid-template-columns: auto minmax(0, 1fr); align-items: center; font-weight: 500; }
.finalVersionForm fieldset input { width: 16px; }

@media (max-width: 760px) {
  .accessTabs { gap: 12px; overflow-x: auto; }
  .accessTabs button { flex: 0 0 auto; }
  .collaborationBody { grid-template-columns: 1fr; }
  .accessModeSection, .finalLockSection, .collaborationFeedback { grid-column: 1; }
  .compactAdminForm, .reviewAssignmentForm { grid-template-columns: 1fr; align-items: stretch; }
  /* The .libraryAdmin layouts are governed by the container queries near the end of this
     stylesheet, not by viewport width: the panel also renders inside the ~560px
     organisation-settings drawer on a wide screen. */
  .libraryPreviewScrim { padding: 0; }
  .libraryPreviewDialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .libraryPreviewDialog > header, .libraryPreviewOcrWarning, .libraryPreviewProvenance, .libraryPreviewBody, .libraryPreviewPager, .libraryPreviewActions { padding-inline: 16px; }
  .promptLibraryScrim { padding: 0; }
  .promptLibraryDialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .promptLibraryDialog > header, .promptLibraryBody, .promptLibraryActions { padding-inline: 16px; }
  .promptLibraryCardButtons { margin-inline-start: 0; }
  .libraryPreviewPager { flex-direction: column; align-items: stretch; }
  .libraryPreviewPagerControls { justify-content: space-between; }
}

@media (max-width: 560px) {
  .collaborationScrim { padding: 0; }
  .collaborationWorkspace { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .collaborationWorkspace > header, .collaborationSection { padding-inline: 16px; }
  .accessModeSection { grid-template-columns: 1fr; }
  .segmentedControl { width: 100%; }
  .memberAdminRow { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .memberAdminRow label { grid-column: 2; }
  .commentComposer, .matterFieldGrid { grid-template-columns: 1fr; }
  .connectorRow { grid-template-columns: 1fr; }
  .connectorState { justify-items: start; text-align: left; }
}

/* Platform administration is intentionally separate from tenant administration. */
.platformAdmin { position: fixed; inset: 0; z-index: 120; display: grid; grid-template: auto minmax(0, 1fr) / 220px minmax(0, 1fr); background: var(--panel); color: var(--ink); }
.platformAdminHeader { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.platformAdminHeader p { margin: 0 0 3px; color: var(--jade); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.platformAdminHeader h1 { margin: 0; font-size: 24px; }
.platformAdminNav { min-height: 0; display: grid; align-content: start; gap: 5px; padding: 20px 12px; border-right: 1px solid color-mix(in srgb, var(--onJade) 18%, transparent); background: var(--jadeDark); }
.platformAdminNav button { min-height: 42px; padding: 0 13px; border: 0; border-radius: 5px; background: transparent; color: var(--onJade); font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.platformAdminNav button:hover, .platformAdminNav button[aria-current="page"] { background: color-mix(in srgb, var(--onJade) 16%, var(--jadeDark)); color: var(--onJade); }
.platformNavBadge { float: right; min-width: 21px; margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: var(--brass); color: var(--bg); font-size: 10px; line-height: 17px; text-align: center; }
.platformAdminBody { min-width: 0; min-height: 0; overflow: auto; padding: 28px clamp(18px, 3vw, 44px) 56px; }
.platformAdminFeedback { position: fixed; right: 24px; bottom: 20px; z-index: 122; }
.platformAdminFeedback p { margin: 0; padding: 11px 14px; border: 1px solid var(--statusSuccess); border-radius: 6px; background: color-mix(in srgb, var(--statusSuccess) 14%, var(--surface)); color: var(--statusSuccess); box-shadow: 0 8px 24px var(--shadowColor); font-size: 12px; font-weight: 700; }
.platformSectionHeading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.platformSectionHeading h2, .platformFirmSection h2, .platformDetailGrid h2 { margin: 0; font-size: 19px; }
.platformSectionHeading p { margin: 5px 0 0; color: var(--textSubtle); font-size: 12px; }
.platformMetricGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platformMetricGrid article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformMetricGrid span, .platformMetricGrid strong { display: block; }
.platformMetricGrid span { color: var(--textSubtle); font-size: 11px; }
.platformMetricGrid strong { margin-top: 8px; font-size: 24px; }
.platformPlanGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.platformPlanCard { min-width: 0; display: grid; align-content: start; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformPlanCard.isArchived { opacity: .68; background: var(--panelStrong); }
.platformPlanCard header, .platformPlanCard footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.platformPlanCard h3 { margin: 9px 0 0; font-size: 18px; }
.platformPlanCard header > strong { color: var(--ink); font-size: 20px; text-align: right; white-space: nowrap; }
.platformPlanCard header > strong small { display: block; margin-top: 2px; color: var(--textSubtle); font-size: 10px; font-weight: 600; }
.platformPlanCard dl { margin: 0; display: grid; gap: 10px; }
.platformPlanCard dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.platformPlanCard dt { color: var(--textSubtle); font-size: 11px; }
.platformPlanCard dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.platformPlanCard footer { margin-top: auto; justify-content: flex-end; }
.platformPlanFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.platformPlanFields label:first-child, .platformOverageToggle { grid-column: 1 / -1; }
.platformOverageToggle { min-height: 42px; display: flex !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.platformOverageToggle input { width: 18px !important; min-height: 18px !important; margin: 0; }
.platformCreditUsage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.platformCreditUsage div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.platformCreditUsage span { color: var(--textSubtle); font-size: 9px; text-transform: uppercase; }
.platformCreditUsage strong { font-size: 14px; }
.platformCreditUsage progress { grid-column: 1 / -1; width: 100%; height: 7px; accent-color: var(--jade); }
.platformDashboardGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.platformDashboardGrid > section, .platformDetailGrid > section, .platformFirmSection, .billingEvents { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformDashboardGrid h3, .billingEvents h3 { margin: 0 0 13px; font-size: 14px; }
.platformFirmSummary, .platformAttentionRow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.platformFirmSummary:last-child, .platformAttentionRow:last-child { border-bottom: 0; }
.platformFirmSummary > span:first-child, .platformAttentionRow > span:first-child { min-width: 0; display: grid; gap: 3px; }
.platformFirmSummary strong, .platformAttentionRow strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.platformFirmSummary small, .platformAttentionRow small { color: var(--textSubtle); font-size: 10px; }
.platformFilters { display: grid; grid-template-columns: minmax(240px, 1fr) 170px 170px; gap: 10px; margin-bottom: 14px; }
.platformFilters label, .platformDetailGrid form label, .wizardBody label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.platformFilters input, .platformFilters select, .platformDetailGrid input, .platformDetailGrid select, .wizardBody input, .wizardBody select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; }
.platformTableWrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformTable { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
.platformTable th, .platformTable td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.platformTable thead th { background: var(--panelStrong); color: var(--muted); font-size: 10px; text-transform: uppercase; }
.platformTable tbody tr:last-child > * { border-bottom: 0; }
.platformTable tbody th { max-width: 280px; }
.platformTable tbody th strong, .platformTable tbody th small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platformTable tbody th small { margin-top: 3px; color: var(--textSubtle); font-size: 10px; font-weight: 400; }
.platformActions { display: flex; flex-wrap: wrap; gap: 5px; }
.platformActions button, .backButton { min-height: 32px; padding: 0 8px; border: 1px solid var(--lineStrong); border-radius: 4px; background: var(--surface); color: var(--jade); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.platformState { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--textSubtle); text-align: center; }
.platformState p, .platformEmpty { margin: 0; color: var(--textSubtle); font-size: 12px; }
.platformError { color: var(--statusDanger); }
.platformSpinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--jade); border-radius: 50%; animation: platformSpin .8s linear infinite; }
@keyframes platformSpin { to { transform: rotate(360deg); } }
.platformFirmDetail { display: grid; gap: 18px; }
.platformFirmTitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.platformFirmTitle > div { display: flex; align-items: center; gap: 8px; }
.platformFirmTitle p { margin: 0; color: var(--textSubtle); font-size: 11px; }
.platformDetailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.platformDetailGrid dl { margin: 14px 0 0; display: grid; gap: 10px; }
.platformDetailGrid dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.platformDetailGrid dt { color: var(--textSubtle); font-size: 11px; }
.platformDetailGrid dd { margin: 0; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.platformDetailGrid form { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: end; gap: 8px; margin: 14px 0; }
.dangerButton { min-height: 38px; padding: 0 12px; border: 1px solid var(--statusDanger); border-radius: 5px; background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.billingEvents { margin-top: 18px; }
.billingEvents ol { margin: 0; padding: 0; list-style: none; }
.billingEvents li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.billingEvents li:last-child { border-bottom: 0; }
.billingEvents li div { display: grid; gap: 3px; }
.billingEvents li strong { font-size: 11px; }
.billingEvents li small { color: var(--textSubtle); font-size: 9px; }
.platformModalScrim { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; background: var(--scrim); }
.platformWizard { width: min(560px, 100%); overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--surface); box-shadow: 0 24px 70px var(--shadowColor); }
.platformWizard header, .platformWizard footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.platformWizard header { border-bottom: 1px solid var(--line); }
.platformWizard header span { color: var(--jade); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.platformWizard h2 { margin: 3px 0 0; font-size: 20px; }
.wizardProgress { height: 3px; background: var(--panelStrong); }
.wizardProgress i { height: 100%; display: block; background: var(--jadeDark); transition: width .2s ease; }
.wizardBody { min-height: 220px; display: grid; align-content: start; gap: 14px; padding: 24px 20px; }
.platformWizard footer { border-top: 1px solid var(--line); }
.wizardReview { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.wizardReview span { color: var(--textSubtle); font-size: 11px; }
.platformOpsSection { display: grid; gap: 18px; }
.platformOpsSection > .platformOpsSection { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformOpsSection > .platformOpsSection .platformSectionHeading { margin-bottom: 0; }
.platformCapabilityState { min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 28px; border: 1px dashed var(--lineStrong); border-radius: 7px; background: var(--surface); text-align: center; }
.platformCapabilityState p { max-width: 520px; margin: 0; color: var(--textSubtle); font-size: 12px; line-height: 1.55; }
.platformUsageChart { min-height: 220px; display: flex; align-items: end; gap: 8px; padding: 22px 18px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformUsageChart > div { min-width: 22px; height: 170px; flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) 26px; align-items: end; justify-items: center; gap: 6px; }
.platformUsageChart i { width: min(34px, 80%); height: var(--usage-height); min-height: 4px; display: block; border-radius: 3px 3px 0 0; background: var(--jadeDark); }
.platformUsageChart span { max-width: 70px; overflow: hidden; color: var(--textSubtle); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.platformUsageChart > p { align-self: center; margin: auto; color: var(--textSubtle); font-size: 12px; }
.platformTable progress { width: 90px; height: 7px; accent-color: var(--jade); vertical-align: middle; }
.platformControlGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.platformControlGrid article { min-width: 0; display: grid; align-content: start; justify-items: start; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformControlGrid h3 { margin: 0; font-size: 14px; }
.platformControlGrid p { min-height: 34px; margin: 0; color: var(--textSubtle); font-size: 11px; line-height: 1.5; }
.platformSwitch { display: flex; align-items: center; gap: 8px; color: var(--textSubtle); font-size: 11px; font-weight: 800; }
.platformSwitch input { width: 34px; height: 18px; accent-color: var(--jade); }
.platformSettingsForm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.platformSettingsForm fieldset { min-width: 0; display: grid; align-content: start; gap: 13px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformSettingsForm legend { padding: 0 5px; font-size: 13px; font-weight: 850; }
.platformSettingsForm label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.platformSettingsForm input, .platformSettingsForm select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; }
.platformSettingsForm footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.platformRequestQueue { display: grid; gap: 10px; }
.platformRequestQueue > article { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.platformRequestQueue > article.isComplete { background: var(--panel); }
.platformRequestCheck { display: flex; align-items: flex-start; gap: 8px; color: var(--textSubtle); font-size: 11px; font-weight: 800; cursor: pointer; }
.platformRequestCheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--jade); }
.platformRequestMain { min-width: 0; display: grid; gap: 7px; }
.platformRequestMain > div { display: flex; align-items: center; gap: 8px; }
.platformRequestMain p { margin: 0; color: var(--textSubtle); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.platformRequestMain small { color: var(--textSubtle); font-size: 10px; }

@media (max-width: 900px) {
  .platformAdmin { grid-template: auto auto minmax(0, 1fr) / 1fr; }
  .platformAdminNav { display: flex; overflow-x: auto; padding: 7px 12px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--onJade) 18%, transparent); }
  .platformAdminNav button { flex: 0 0 auto; padding-inline: 16px; }
  .platformMetricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platformDashboardGrid, .platformDetailGrid { grid-template-columns: 1fr; }
  .platformPlanGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platformControlGrid, .platformSettingsForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platformRequestQueue > article { grid-template-columns: 100px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .platformAdminHeader { min-height: 60px; padding: 9px 14px; }
  .platformAdminHeader h1 { max-width: 75vw; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  .platformAdminBody { padding: 18px 12px 56px; }
  .platformSectionHeading { align-items: flex-start; }
  .platformMetricGrid { gap: 8px; }
  .platformMetricGrid article { padding: 13px; }
  .platformMetricGrid strong { font-size: 18px; }
  .platformFilters { grid-template-columns: 1fr; }
  .platformDetailGrid form { grid-template-columns: 1fr; }
  .platformPlanGrid, .platformPlanFields { grid-template-columns: 1fr; }
  .platformControlGrid, .platformSettingsForm { grid-template-columns: 1fr; }
  .platformPlanFields label:first-child, .platformOverageToggle { grid-column: auto; }
  .platformFirmTitle { align-items: flex-start; flex-direction: column; }
  .platformFirmTitle > div { align-items: flex-start; flex-direction: column; }
  .platformModalScrim { padding: 0; }
  .platformWizard { width: 100%; min-height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border: 0; border-radius: 0; }
  .platformRequestQueue > article { grid-template-columns: 1fr; }
}

/* Production workspace pass: one matter model, reading-first workspace, observable uploads. */
.loginFrameSite {
  width: min(100%, 1440px);
  gap: 0;
}

.publicNav {
  min-height: 72px;
  padding-inline: clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.siteHero {
  min-height: min(680px, calc(100svh - 72px));
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(36px, 7vw, 92px) clamp(22px, 6vw, 88px);
}

.siteHero::after {
  background: linear-gradient(90deg,
    rgba(6, 30, 33, calc(.94 + var(--heroVeil))) 0%,
    rgba(6, 30, 33, calc(.8 + var(--heroVeil))) 50%,
    rgba(6, 30, 33, calc(.45 + var(--heroVeil))) 100%);
}

.siteHeroCopy { align-self: center; }
.siteHeroCopy .siteEyebrow { border-color: rgba(255,255,255,.5); background: rgba(9,42,45,.72); color: var(--onJade); }
.siteHeroCopy h1 { max-width: 18ch; font-size: clamp(42px, 5vw, 66px); line-height: 1.02; }
.siteLead { max-width: 58ch; }

.heroProductProof {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 16, 18, .28);
  backdrop-filter: blur(14px);
}
.heroProofHeader, .heroProofBody, .heroProofSources { display: flex; align-items: center; gap: 12px; }
.heroProofHeader { justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.heroProofHeader span { color: var(--muted); }
.heroProofMark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; background: var(--jadeDark); color: var(--onJade); font-size: 11px; font-weight: 850; }
.heroProofBody p { display: grid; gap: 3px; margin: 0; }
.heroProofBody small { color: var(--muted); }
.heroProofSources { flex-wrap: wrap; }
.heroProofSources span { padding: 6px 8px; border: 1px solid var(--lineStrong); border-radius: 5px; color: var(--jade); font-size: 11px; font-weight: 750; }

.publicFooter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 32px clamp(18px, 4vw, 64px);
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.publicFooter > div { display: flex; align-items: center; gap: 16px; }
.publicFooter img { width: 132px; height: auto; }
.publicFooter p { margin: 0; color: var(--muted); font-size: 12px; }
.publicFooter > p { grid-column: 1 / -1; }
.publicFooter nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.publicFooter a { color: var(--textSubtle); font-size: 13px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.topbar { min-height: 66px; padding-block: 8px; }
.topbarActions { gap: 8px; }

/* The theme toggle is a single glyph, so it needs an explicit floor to reach the
   44px minimum touch target rather than shrinking to the glyph's width. */
.topbarActions [data-theme-cycle] {
  min-width: 44px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding-inline: 8px;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 780px) {
  .topbarActions [data-theme-cycle] { min-height: 44px; }
}
.identityBadge { padding-right: 4px; }
.accountMenu { position: relative; }
.accountMenu > summary {
  min-width: 40px; min-height: 40px; display: grid; place-items: center; list-style: none;
  border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--surface); cursor: pointer;
}
.accountMenu > summary::-webkit-details-marker { display: none; }
.accountMenu > div {
  position: absolute; z-index: 55; top: calc(100% + 8px); right: 0; width: min(280px, calc(100vw - 24px));
  display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); box-shadow: 0 18px 44px var(--shadowColor);
}
.accountMenuIdentity { display: grid; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); }
.accountMenuIdentity small { color: var(--muted); font-size: 12px; }
.accountCreditSummary { display: grid; gap: 8px; padding: 12px 10px; border-bottom: 1px solid var(--line); background: var(--panelStrong); }
.accountCreditSummary > div, .accountCreditSummary > p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.accountCreditSummary > div span { color: var(--muted); font-size: 12px; font-weight: 700; }
.accountCreditSummary > div strong { color: var(--jade); font-size: 21px; }
.accountCreditSummary progress { width: 100%; height: 8px; accent-color: var(--jade); }
.accountCreditSummary > p, .accountCreditSummary > small { color: var(--muted); font-size: 11px; }
.accountCreditSummary.isLoading { color: var(--muted); font-size: 12px; }
.accountMenu button, .accountMenu .headerTrainingToggle { min-height: 40px; width: 100%; justify-content: flex-start; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.accountMenu button:hover { background: var(--jadeDark); color: var(--onJade); }
.accountMenu button:focus-visible { outline: 2px solid var(--focusRing); outline-offset: -2px; }
.mobileAccountMenu, .desktopAccountAction, .userControls > .headerTrainingToggle { display: none !important; }

.chatArea { padding-top: clamp(24px, 5vh, 54px); padding-bottom: 28px; }
.chatArea > .message, .chatArea > .promptStarters, .chatArea > .trainingExercises { width: min(100%, 900px); }
.chatArea > .message:first-child:last-of-type { margin-top: min(8vh, 64px); }
.promptStarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.singleChatShell.initialConversation .workspace {
  /* Rows are topbar / noticeRail / chatArea / starter section / composer / status row.
     max-content rows cannot be squeezed below their content when the viewport is
     short (auto rows can, which made the starter cards render under the composer);
     the workspace scrolls instead so the welcome content and composer never overlap.
     The starter row is the one flexible track -- `minmax(max-content, 1fr)` keeps its
     floor at the cards' own height while letting it soak up the free space on a tall
     window, so the composer and status row settle at the bottom of the viewport
     instead of leaving dead space beneath them. */
  grid-template-rows: repeat(3, max-content) minmax(max-content, 1fr) repeat(2, max-content);
  align-content: start;
  overflow-y: auto;
}

.singleChatShell.initialConversation .chatArea {
  min-height: auto;
  overflow: visible;
  padding-top: 18px;
  padding-bottom: 30px;
}

.singleChatShell.initialConversation .chatArea > .message:first-child:last-of-type {
  margin-top: 0;
}

.singleChatShell.initialConversation .composerGuidance {
  margin-top: 0;
}

.singleChatShell.initialConversation .promptStarterSection {
  align-self: start;
  /* Breathing room so the last card row never butts against the composer. */
  padding-bottom: 22px;
}

/* The welcome view uses the full workspace width instead of the compact reading
   column: the starter cards and composer spread out on large displays. Long-form
   answers in an active conversation keep the narrower column for readability. */
.singleChatShell.initialConversation .chatArea > .message {
  width: 100%;
  /* The base .message grid caps its content column at 880px; release it so the
     welcome text genuinely stretches with the full-width layout. */
  grid-template-columns: 34px minmax(0, 1fr);
}
.singleChatShell.initialConversation .promptStarterSection { width: calc(100% - 46px); }
.singleChatShell.initialConversation .composer,
.singleChatShell.initialConversation .composerGuidance,
.singleChatShell.initialConversation .statusRow { width: calc(100% - 40px); }

.composer { width: min(calc(100% - 40px), 980px); margin-inline: auto; border-color: var(--lineStrong); background: var(--panelStrong); box-shadow: 0 10px 28px var(--shadowColor); }
.composerGuidance { width: min(calc(100% - 40px), 980px); margin: 0 auto 9px; color: var(--textSubtle); font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; }
.composerContext { min-height: 46px; padding-inline: 14px; }
.composerMain { padding: 10px 12px; }
.composer textarea { font-size: 15px; line-height: 1.5; }
.sendButton { min-width: 92px; }
.statusRow { width: min(calc(100% - 40px), 980px); }

.uploadQueue { width: 100%; display: grid; gap: 8px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); list-style: none; }
.uploadItem { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, .9fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.uploadIdentity { min-width: 0; display: grid; gap: 3px; }
.uploadItem strong, .uploadItem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploadItem strong { font-size: 12px; }
.uploadItem small { color: var(--muted); font-size: 11px; }
.uploadProgress { min-width: 0; display: grid; grid-template-columns: minmax(90px, 1fr) auto; align-items: center; gap: 9px; }
.uploadProgress progress { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: var(--panelStrong); accent-color: var(--jade); }
.uploadProgress progress::-webkit-progress-bar { border-radius: 999px; background: var(--panelStrong); }
.uploadProgress progress::-webkit-progress-value { border-radius: 999px; background: var(--jadeDark); }
.uploadProgress progress::-moz-progress-bar { border-radius: 999px; background: var(--jadeDark); }
.uploadPercent { min-width: 36px; color: var(--jade); text-align: right; font-size: 11px !important; font-variant-numeric: tabular-nums; }
.uploadControls { min-width: 52px; display: flex; justify-content: flex-end; }
.uploadItem button { min-height: 32px; padding: 0 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--textSubtle); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.upload-failed { border-color: var(--statusDanger); background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); }
.upload-processing { border-color: var(--lineStrong); background: var(--panel); }
.uploadProgressIndeterminate { grid-template-columns: minmax(90px, 1fr) auto; }
.uploadProgressIndeterminate > span { position: relative; height: 12px; overflow: hidden; border-radius: 999px; background: var(--panelStrong); }
.uploadProgressIndeterminate > span::after { content: ""; position: absolute; inset: 0 auto 0 -42%; width: 42%; border-radius: inherit; background: var(--jadeDark); animation: uploadProcessing 1.35s ease-in-out infinite; }
.uploadProgressIndeterminate .uploadPercent { min-width: 62px; }
@keyframes uploadProcessing { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .uploadProgressIndeterminate > span::after { left: 0; width: 55%; animation: none; }
}

.rightPanel .panelSection { padding: 22px; }
.rightPanel .panelSection h2 { font-size: 18px; line-height: 1.25; }
.rightPanel p, .rightPanel li, .rightPanel dd, .rightPanel strong { font-size: 14px; line-height: 1.5; }
.rightPanel small, .researchScope dt, .artifactList p, .artifactList small, .verificationRecord { font-size: 12px; line-height: 1.45; }
.citationItem { padding: 16px; }
.citationActions { gap: 8px; }
.citationActions button, .citationActions a, .panelTextButton, .panelAddButton { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.authorityEditor label { font-size: 13px; }
.authorityEditor input, .authorityEditor select, .authorityEditor textarea { min-height: 40px; font-size: 14px; }
.authorityEditorActions button { min-height: 36px; font-size: 12px; }

@media (min-width: 781px) {
  .appShell.singleChatShell.sourcesOpen {
    grid-template-columns: clamp(320px, var(--history-width, 360px), min(42vw, 560px)) minmax(420px, 1fr) clamp(340px, var(--sources-width, 420px), min(48vw, 700px));
  }
  .singleChatShell.sourcesOpen .rightPanel {
    position: relative; grid-column: 3; inset: auto; width: auto; max-width: none; height: 100svh;
    transform: none; visibility: visible; box-shadow: none; transition: none;
  }
}

@media (max-width: 960px) {
  .siteHero { grid-template-columns: 1fr; align-content: center; min-height: calc(100svh - 72px); }
  .heroProductProof { width: min(100%, 520px); }
  .publicFooter { grid-template-columns: 1fr; }
  .publicFooter nav { justify-content: flex-start; }
}

@media (max-width: 780px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .modeMenu { display: block; }
  .modeMenu summary { min-width: 40px; min-height: 40px; padding: 0 9px; }
  .modeMenu summary span:first-child { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
  .modeMenuPopover { position: fixed; top: 64px; right: 12px; left: auto; width: min(300px, calc(100vw - 24px)); }
  .identityBadge { display: none; }
  .accountMenu > summary { min-width: 40px; min-height: 40px; }
  .singleChatShell .rightPanel { inset: 0; width: 100vw; max-width: 100vw; height: 100svh; border: 0; }
  .rightPanel .panelMobileHeader { position: sticky; top: 0; z-index: 3; padding: 14px 16px; background: var(--sideRail); }
  .chatArea { padding-top: 20px; }
  .uploadItem { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .uploadProgress { grid-column: 1 / -1; grid-row: 2; }
  .uploadControls { grid-column: 2; grid-row: 1; }
  .promptStarters { grid-template-columns: 1fr; padding-left: 0; }
  .promptStarterHeading { flex-direction: column; align-items: stretch; }
  .promptLibraryButton { align-self: flex-start; }
  .statusRow { flex-wrap: wrap; }
  .composerPromptActions { margin-inline-start: 0; gap: 12px; }
  /* The narrow layout re-orders the rows -- composer above the starter cards -- so the
     flexible track moves with it: the starter section is last here and keeps a
     max-content floor so the cards are never squeezed. */
  .singleChatShell.initialConversation .workspace {
    grid-template-rows: repeat(5, max-content) minmax(max-content, 1fr);
  }
  .singleChatShell.initialConversation .chatArea { grid-row: 3; }
  .singleChatShell.initialConversation .composer { grid-row: 4; }
  .singleChatShell.initialConversation .statusRow { grid-row: 5; }
  .singleChatShell.initialConversation .promptStarterSection {
    width: calc(100% - 20px);
    grid-row: 6;
    padding-left: 0;
    padding-bottom: 20px;
  }
  .composer { width: calc(100% - 20px); margin-bottom: 4px; }
  .statusRow { width: calc(100% - 20px); }
  .composerContext { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attachmentToolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attachmentToolbar .attachButton { grid-column: 1 / -1; }
  .uploadItem { grid-template-columns: minmax(0, 1fr) auto; }
  .uploadItem progress { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .publicNav { min-height: 60px; padding: 8px 14px; }
  .publicNav .loginBrandLogo { width: 128px; }
  .publicNav nav a:not(.navTrialButton) { display: none; }
  .publicNav a.navTrialButton { min-height: 40px; padding-inline: 12px; }
  .siteHero { min-height: calc(100svh - 60px); align-content: end; gap: 20px; padding: 30px 18px; }
  .siteHeroCopy h1 { max-width: 19ch; font-size: clamp(32px, 10vw, 42px); }
  .siteLead { font-size: 15px; line-height: 1.45; }
  .siteHeroActions { display: grid; grid-template-columns: 1fr 1fr; }
  .siteHeroActions a { width: auto; min-width: 0; padding-inline: 10px; font-size: 12px; }
  .siteTrustList li { padding: 6px 8px; font-size: 10px; }
  .heroProductProof { padding: 14px; gap: 10px; }
  .heroProofSources { display: none; }
  .productStudio { grid-template-columns: 1fr; }
  .landingPreview { padding: 16px; }
  .publicFooter > div { align-items: flex-start; flex-direction: column; }
  .publicFooter nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbarActions { flex-wrap: nowrap; }
  .conversationExportButton { display: none; }
  .composerContext { grid-template-columns: 1fr; }
  .matterContextSummary { display: none; }
  .attachmentToolbar { grid-template-columns: 1fr; }
  .attachmentToolbar .attachButton { grid-column: auto; }
  .attachmentBar { align-items: flex-start; }
  .uploadQueue { flex-basis: 100%; }
}

.appShell.singleChatShell {
  grid-template-columns: clamp(320px, var(--history-width, 360px), min(42vw, 560px)) minmax(0, 1fr);
}

.singleChatShell .rightPanel {
  position: fixed;
  z-index: 30;
  inset: 0 0 0 auto;
  width: clamp(300px, var(--sources-width, 390px), 70vw);
  height: 100svh;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 180ms ease;
  box-shadow: -18px 0 48px var(--shadowColor);
}

.singleChatShell .rightPanel.mobileOpen {
  transform: translateX(0);
  visibility: visible;
}

.singleChatShell .mobileTopActions,
.singleChatShell .rightPanel .panelMobileHeader {
  display: flex;
}

.singleChatShell .panelScrim {
  position: fixed;
  z-index: 25;
  inset: 0;
  border: 0;
  background: var(--scrim);
}

.singleChatShell.panelOpen .panelScrim {
  display: block;
}

.panelScrim,
.panelMobileHeader,
.mobileTopActions {
  display: none;
}

.panelResizeHandle {
  position: fixed;
  z-index: 35;
  top: 0;
  width: 9px;
  height: 100svh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.panelResizeHandle::after {
  content: '';
  position: absolute;
  inset: 0 4px;
  background: var(--line);
  transition: background 120ms ease, inset 120ms ease;
}

.panelResizeHandle:hover::after,
.panelResizeHandle:focus-visible::after,
.resizingPanel .panelResizeHandle::after {
  inset-inline: 3px;
  background: var(--jade);
}

.historyResizeHandle {
  left: calc(clamp(320px, var(--history-width, 360px), min(42vw, 560px)) - 5px);
}

.sourcesResizeHandle {
  position: absolute;
  left: 0;
}

body.resizingPanel {
  cursor: col-resize;
  user-select: none;
}

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skipLink {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.skipLink:focus {
  transform: translateY(0);
}

.sidebar,
.rightPanel {
  height: 100svh;
  background: var(--sideRail);
  border-color: var(--line);
  overflow: auto;
}

.sidebar {
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.historySidebar {
  gap: 14px;
  padding: 16px 12px 12px;
  overflow: hidden;
}

.historySidebar .panelMobileHeader {
  top: -14px;
  margin: -14px -12px 0;
  padding: 10px 12px 12px;
}

.historyBrand {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

.brandLogo {
  width: min(184px, 100%);
  height: 48px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.historyBrandText {
  min-width: 0;
  flex: 1;
}

.sidebarCollapseButton {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.sidebarCollapseButton:hover,
.sidebarCollapseButton:focus-visible {
  border-color: var(--lineStrong);
  background: var(--panelStrong);
}

.sidebarCollapseButton span {
  display: block;
  font-size: 24px;
  line-height: 1;
  transform: rotate(180deg);
}

@media (min-width: 781px) {
  .appShell.singleChatShell.sidebarCollapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .sidebarCollapsed .historySidebar {
    padding: 12px 8px;
  }

  .sidebarCollapsed .historySidebar > :not(.historyBrand):not(.panelResizeHandle) {
    display: none;
  }

  .sidebarCollapsed .historyBrand {
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  .sidebarCollapsed .brandLogo {
    display: none;
  }

  .sidebarCollapsed .historyBrandText,
  .sidebarCollapsed .historyResizeHandle {
    display: none;
  }

  .sidebarCollapsed .sidebarCollapseButton span {
    transform: none;
  }
}

.historyBrand .brandMark {
  flex: 0 0 auto;
}

.newChatButton,
.historyToggle {
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.newChatButton {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
  box-shadow: 0 6px 16px var(--shadowColor);
}

.newChatButton:hover,
.historyToggle:hover {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
}

.myMattersButton {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--textSubtle);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.myMattersButton:hover { border-color: var(--lineStrong); background: var(--panel); }
.mattersIcon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--panelStrong); color: var(--jade); font-size: 10px; font-weight: 850; }

.historyToggle {
  display: none;
  min-width: 58px;
  min-height: 40px;
  padding: 0 10px;
  background: var(--surface);
}

.historySection {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historyTools { display: grid; gap: 8px; }
.historySearch input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; box-shadow: 0 1px 2px var(--shadowColor); }
.historySearch input:focus { border-color: var(--lineStrong); }
.archivedToggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.archivedItem { opacity: 0.72; }
.favouriteMark { margin-right: 5px; color: var(--amber); }

.historySectionHeader {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 0 7px;
}

.historyIconButton {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.historyIconButton:hover,
.historyIconButton.open {
  border-color: var(--lineStrong);
  background: var(--panelStrong);
}

.historySidebar .historyIconButton:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
}

.historyList {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 2px;
}

.conversationGroup {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.groupHeader {
  position: relative;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 3px 0 7px;
}

.groupTitle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.groupTitle:hover strong {
  color: var(--jade);
}

.groupTitle:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
  border-radius: 4px;
}

.groupTitle strong {
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The matter name is the parent of the queries listed beneath it, so it must not
   read as lighter than them. It was already font-weight 700; what made it recede
   was the muted colour and the smaller size, so both now match the query rows. */
.projectGroup .groupTitle strong {
  min-width: 0;
  flex: 1;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

.groupTitle .groupCount {
  min-width: 19px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--panelStrong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.groupTitle .disclosureIcon {
  width: 12px;
  min-width: 12px;
  height: auto;
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.groupTitle[aria-expanded="false"] .disclosureIcon {
  transform: rotate(0deg);
}

.groupChats {
  display: grid;
  gap: 2px;
}

.projectGroup > .groupChats {
  padding-left: 18px;
}

.dropChatGroup.dragOver {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
  background: var(--panelStrong);
}

.historyRow[draggable="true"] {
  cursor: grab;
}

.historyRow.dragging {
  opacity: 0.45;
}

.subChatList {
  display: grid;
  gap: 2px;
  margin-left: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.subChatList[hidden] {
  display: none;
}

.subChatRow .historyItem {
  padding-top: 6px;
  padding-bottom: 6px;
}

.mobileMoveControl {
  display: grid;
  gap: 5px;
}

.mobileMoveControl small { color: var(--muted); font-size: 9px; line-height: 1.35; }

.groupChats[hidden] {
  display: none;
}

.groupEmpty {
  margin: 0;
  padding: 5px 8px 7px;
  color: var(--muted);
  font-size: 11px;
}

.historyRow {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  border: 1px solid transparent;
  border-radius: 7px;
}

.historyRow.hasSubChats {
  grid-template-columns: minmax(0, 1fr) 28px 32px;
}

.subChatToggle {
  align-self: start;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.subChatToggle span {
  display: block;
  font-size: 22px;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.subChatToggle[aria-expanded="false"] span { transform: rotate(0deg); }
.subChatToggle:hover { background: var(--panelStrong); }

.historyRow:hover {
  background: var(--panelStrong);
}

.historyRow.active {
  border-color: var(--lineStrong);
  background: var(--panelStrong);
}

.historyRow.activeEdit {
  display: block;
}

.historyItem {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 8px;
  padding: 8px 4px 8px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.historyItem strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyItem strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.historyItem small {
  grid-column: 1;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.historyRow > .itemMenuButton {
  align-self: start;
  margin: 4px 3px 0 0;
  opacity: 0;
}

.historyRow:hover > .itemMenuButton,
.historyRow:focus-within > .itemMenuButton,
.historyRow.active > .itemMenuButton,
.itemMenuButton.open {
  opacity: 1;
}

.historyMenu {
  position: absolute;
  z-index: 12;
  top: 31px;
  right: 3px;
  width: min(188px, calc(100% - 12px));
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 10px 26px var(--shadowColor);
}

.historyMenu button,
.historyMenu label {
  min-width: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--textSubtle);
  font-size: 12px;
  text-align: left;
}

.historyMenu button {
  min-height: 32px;
  padding: 0 8px;
  cursor: pointer;
}

.historyMenu button:hover {
  background: var(--jadeDark);
  color: var(--onJade);
}

.historyMenu button:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: -2px;
}

.projectActionsMenu {
  width: min(290px, calc(100% - 12px));
}

.projectMenuSecondary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
}

.projectMenuSecondary > img {
  width: 22px;
  height: 22px;
  margin: 6px 0 0 4px;
  object-fit: contain;
}

.projectMenuSecondary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.projectMenuSecondary button {
  width: 100%;
}

.projectMenuSecondary .projectPrimaryAction {
  min-height: 0;
  padding: 6px 8px 8px;
  font-weight: 800;
  line-height: 1.35;
}

.projectPeripheralActions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 5px;
}

.projectPeripheralActions button {
  width: auto;
  min-height: 28px;
  padding: 0;
  font-weight: 800;
  white-space: nowrap;
}

.projectPeripheralActions button:hover {
  background: transparent;
  text-decoration: underline;
}

.projectPeripheralActions span {
  color: var(--muted);
  font-weight: 800;
}

.historyMenu label {
  display: grid;
  gap: 3px;
  padding: 5px 8px;
}

.historyMenu label span,
.historyEdit label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.historyMenu select {
  width: 100%;
  height: 30px;
  border: 1px solid var(--lineStrong);
  border-radius: 5px;
  background: var(--inputBg);
  color: var(--ink);
  font-size: 12px;
}

.historyMenu p {
  margin: 0;
  padding: 0 8px 5px;
  color: var(--statusDanger);
  font-size: 10px;
  line-height: 1.35;
}

.historyEdit {
  display: grid;
  gap: 4px;
  padding: 5px 6px 7px;
}

.historyEdit > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 28px;
  column-gap: 10px;
}

.historyEdit input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--lineStrong);
  border-radius: 5px;
  background: var(--inputBg);
  color: var(--ink);
  font-size: 12px;
}

.saveEditButton {
  border-color: var(--lineStrong);
  background: var(--panelStrong);
  color: var(--jade);
}

.historyState,
.historyFootnote {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.historyState {
  padding: 9px 7px;
}

.historyError {
  border-left: 2px solid var(--statusDanger);
  color: var(--statusDanger);
}

.historyNotice { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-left: 2px solid var(--jade); color: var(--jade); }
.historyNotice button { flex: 0 0 auto; min-height: 28px; padding: 0 8px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--jade); font: inherit; font-weight: 800; cursor: pointer; }

.historyEmpty {
  padding-top: 3px;
}

.historyFootnote {
  padding: 0 7px;
}

.sidebarFooter {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.manageMattersButton {
  width: 100%; min-height: 42px; border: 1px solid var(--jadeDark); border-radius: 7px;
  background: var(--jadeDark); color: var(--onJade); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 16px var(--shadowColor);
}
.manageMattersButton:hover { background: var(--jadeDark); border-color: var(--jadeDark); }

.sidebarAccountMenu {
  min-width: 0;
}

.sidebarAccountMenu > summary.sidebarProfile {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: initial;
  list-style: none;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  box-shadow: 0 6px 16px var(--shadowColor);
}

.sidebarAccountMenu > summary.sidebarProfile::-webkit-details-marker {
  display: none;
}

.sidebarAccountMenu[open] > summary.sidebarProfile {
  background: var(--jadeDark);
}

.sidebarAccountMenu > summary.sidebarProfile .userAvatar {
  background: var(--surface);
  color: var(--jade);
}

.sidebarAccountMenu > summary.sidebarProfile .identityText strong,
.sidebarAccountMenu > summary.sidebarProfile .identityText small,
.sidebarAccountMenu > summary.sidebarProfile .sidebarProfileChevron {
  color: var(--onJade);
}

.sidebarAccountMenu > summary.sidebarProfile .identityText small { opacity: .82; }

.sidebarAccountMenu[open] .sidebarProfileChevron {
  transform: rotate(-90deg);
}

.sidebarAccountMenu > div.sidebarAccountPopover {
  position: absolute;
  z-index: 60;
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(280px, calc(100vw - 24px));
  max-height: min(520px, calc(100svh - 110px));
  overflow-y: auto;
}

.sidebarAccountMenu .organizationSwitcher {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.sidebarAccountMenu .organizationSwitcher > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.sidebarProfile {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.sidebarProfile:hover,
.sidebarProfile:focus-visible {
  background: var(--panelStrong);
}

.sidebarProfile .identityText strong,
.sidebarProfile .identityText small {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebarProfile .identityText small {
  color: var(--muted);
  font-size: 10px;
}

.sidebarProfileChevron {
  color: var(--muted);
  font-size: 20px;
  transition: transform 140ms ease;
}

.brand,
.sectionTitle,
.matterLine,
.topbarActions,
.noticeRail {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  min-height: 48px;
}

.brandMark {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 9px;
  object-fit: contain;
  box-shadow: 0 10px 22px var(--shadowColor);
}

.brandName {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.brandMeta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sidebarSection {
  display: grid;
  gap: 10px;
}

.historySearch {
  display: block;
  margin: 0 12px;
}

.historySearch input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--inputBg);
  color: var(--ink);
  font-size: 12px;
}

.historySearch input:focus {
  border-color: var(--jade);
  outline: 2px solid color-mix(in srgb, var(--jade) 16%, transparent);
  outline-offset: 1px;
}

.sectionTitle {
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

#history-title {
  color: var(--textSubtle);
  font-weight: 900;
}

.matterList,
.citationList {
  display: grid;
  gap: 8px;
}

button,
select,
textarea,
input {
  font: inherit;
}

button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.matterButton {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
}

.matterButton {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

.matterButton span,
.matterButton small,
.citationItem small,
.messageMeta span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matterButton strong {
  font-size: 13px;
  line-height: 1.25;
}

.matterButton.selected {
  background: var(--panel);
  border-color: var(--line);
}

.policyBox {
  margin-top: auto;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--brass);
  background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface));
  border-radius: 8px;
  color: var(--amber);
}

.policyBox p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.workspace {
  min-width: 0;
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  background: var(--surface);
}

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--sideRail);
}

.workspaceHeading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.compactBrand {
  flex: 0 0 auto;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.titleBlock {
  min-width: 0;
}

.matterLine {
  gap: 7px;
  color: var(--muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.15;
  font-weight: 780;
}

.topbarActions {
  gap: 8px;
  align-self: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.analysisTypeControl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analysisTypeLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.modeMenu {
  position: relative;
  color: var(--onJade);
  font-size: 13px;
}

.modeMenu summary {
  min-width: 190px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-weight: 720;
  list-style: none;
  cursor: pointer;
}

.modeMenu summary::-webkit-details-marker { display: none; }
.modeMenu summary:hover,
.modeMenu[open] summary { background: var(--jadeDark); border-color: var(--jadeDark); }
.modeMenu summary:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.modeChevron {
  color: rgba(255, 255, 255, .84);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-2px);
}

.modeMenu[open] .modeChevron { transform: rotate(180deg) translateY(1px); }

.modeMenuPopover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  width: 254px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 38px var(--shadowColor);
}

.modeMenuPopover button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.modeMenuPopover button:hover { background: var(--jadeDark); color: var(--onJade); }
.modeMenuPopover button:focus-visible { outline: 2px solid var(--focusRing); outline-offset: -2px; }
/* Muted sub-labels and the tick must lift off the green fill too. */
.modeMenuPopover button:hover small,
.modeMenuPopover button:hover .modeCheck { color: var(--onJade); }
.modeMenuPopover button > span:first-child { display: grid; gap: 2px; }
.modeMenuPopover strong { font-size: 13px; }
.modeMenuPopover small { color: var(--muted); font-size: 11px; font-weight: 500; }
.modeCheck { color: var(--jade); font-size: 15px; font-weight: 800; }
.modeMenuDisabled {
  min-width: 190px;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-weight: 700;
}

.noticeRail {
  gap: 12px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.noticeRail .libraryStatus {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.noticeRail div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.noticeRail .roleNotice {
  margin-left: auto;
  color: var(--amber);
  font-weight: 720;
}

.noticeRail svg {
  color: var(--jade);
  flex: 0 0 auto;
}

.chatArea {
  min-height: 0;
  overflow: auto;
  padding: 30px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.promptStarters {
  /* Height of a starter card whose prompt is clamped to two lines:
     14px + 16px padding + 2px borders + label (11px * 1.3) + 10px gap
     + two prompt lines (2 * 12px * 1.5). Locking the grid rows to this
     height is what keeps a hover-expanded card from reflowing the grid. */
  --starterCardHeight: calc(30px + 2px + 14.3px + 10px + 36px);
  width: min(calc(100% - 46px), 914px);
  margin: 0 auto 0;
  padding-left: 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.promptStarterSection {
  width: min(calc(100% - 46px), 914px);
  margin: 0 auto;
  padding-left: 46px;
}

.promptStarterSection .promptStarters { width: 100%; margin: 0; padding-left: 0; }

/* Heading row: the instruction line plus a secondary control that opens the saved
   Queries Library. It reuses the dark-jade fill of the other primary controls
   (.attachButton / .matterLibraryButton) but stays shorter than the composer's
   Submit button, so it reads as a real action without competing with it. */
.promptStarterHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.promptStarterHeading h3 { margin-bottom: 0; }

/* Scoped to the heading row so this whole rule outranks the shared `.quietButton`
   white-fill/40px block, which is declared further down the file. Without the extra
   class the button inherited the quiet fill and grew taller than Submit. */
.promptStarterHeading .promptLibraryButton {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--jadeDark);
  border-radius: 6px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.promptStarterHeading .promptLibraryButton:hover {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
}

.promptStarterSection h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
}

.promptStarters button {
  max-width: 100%;
  min-height: 62px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 7px;
  background: var(--bg);
  color: var(--textSubtle);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}

.promptStarters button:hover {
  border-color: var(--lineStrong);
  background: var(--panel);
}

.promptStarters button strong, .promptStarters button span { display: block; }
.promptStarters button strong { color: var(--jade); font-size: 11px; line-height: 1.3; }
.promptStarters button span { align-self: start; font-size: 12px; line-height: 1.5; text-align: left; }

/* Starter cards: clamped preview that expands in flow.

   The practitioner prompts run to several sentences, so at full length the
   cards are tall and the two grid rows end up wildly uneven. Every prompt is
   therefore clamped to two lines, and the full text is revealed on hover or
   keyboard focus.

   The expansion happens *in flow*: the grid rows are sized by their contents
   (no `grid-auto-rows` pinning, no stacking context), so unclamping a card
   grows its own row and pushes the row below down. Nothing is ever painted
   over a neighbour -- the earlier overlay treatment covered the heading of the
   card underneath and read as a rendering fault. At rest every card is exactly
   `--starterCardHeight`, so all six line up.

   `interpolate-size` is scoped to the grid so the height transition to the
   `auto` keyword can be interpolated where the browser supports it; elsewhere
   the card simply snaps open. `overflow: hidden` keeps the newly unclamped
   text inside the card while the height is still travelling.

   Scoped to `(hover: hover) and (pointer: fine)`: on touch/coarse pointers
   there is no hover state that could reveal the rest of the text, so those
   devices keep the unclamped cards and show every prompt in full. */
@media (hover: hover) and (pointer: fine) {
  .promptStarters {
    interpolate-size: allow-keywords;
  }

  .promptStarters button {
    height: var(--starterCardHeight);
    overflow: hidden;
    transition: height 160ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  .promptStarters button span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* The label is held to one line at rest for the same reason the prompt is held
     to two: on a narrow desktop column a wrapped label pushes its card past the
     shared clamped height, which leaves the two rows of cards visibly different
     heights. It unwraps with the prompt on hover or focus. */
  .promptStarters button strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* :focus-within covers browsers without :focus-visible on buttons and keeps
     the affordance identical for keyboard users. */
  .promptStarters button:hover,
  .promptStarters button:focus-visible,
  .promptStarters button:focus-within {
    height: auto;
    background: var(--panel);
    border-color: var(--lineStrong);
    /* Keep the gold accent so the expanded card still reads as a starter card. */
    border-left-color: var(--brass);
    box-shadow: 0 14px 30px var(--shadowColor);
  }

  .promptStarters button:hover span,
  .promptStarters button:focus-visible span,
  .promptStarters button:focus-within span {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
  }

  .promptStarters button:hover strong,
  .promptStarters button:focus-visible strong,
  .promptStarters button:focus-within strong {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promptStarters button { transition: none; }
}

.message {
  width: min(100%, 960px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 34px minmax(0, 880px);
  gap: 12px;
}

.message.user {
  justify-content: end;
  grid-template-columns: minmax(0, 640px) 34px;
}

.message.user .messageAvatar {
  grid-column: 2;
  grid-row: 1;
  background: var(--jadeDark);
  color: var(--onJade);
}

.message.user .messageBubble {
  grid-column: 1;
  grid-row: 1;
  background: var(--panel);
}

.messageAvatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panelStrong);
  color: var(--jade);
}

.messageAvatar img {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 8px;
}

.message:not(.user) .messageAvatar {
  font-size: 11px;
  font-weight: 800;
}

.messageBubble {
  min-width: 0;
  padding: 4px 0 10px;
}

.message.user .messageBubble {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  background: var(--panel);
}

.messageMeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.messageMeta strong {
  font-size: 13px;
}

.messageContent {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.messageContent .answerLink {
  color: var(--jade);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.messageContent .answerLink:hover { color: var(--jade); }
.messageContent .answerLink:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 2px; }

.messageContent .personalWelcome {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
}

.messageContent > * + * {
  margin-top: 12px;
}

.messageContent h3 {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.messageContent ul {
  margin-bottom: 0;
  padding-left: 20px;
}

.messageContent li + li {
  margin-top: 5px;
}

.messageContent code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--panelStrong);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

.reasoningSummary {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--textSubtle);
}

.reasoningSummary summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--textSubtle);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.reasoningSummary summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.reasoningSummary > p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.reasoningSummary .qualityRecord {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid var(--lineStrong);
  border-radius: 5px;
  background: var(--panelStrong);
  color: var(--jade);
}

.reasoningSummary .qualityRecord.isPartial {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface));
  color: var(--amber);
}

.reasoningSummary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.reasoningSummary dl > div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.reasoningSummary dt { color: var(--muted); font-size: 10px; }
.reasoningSummary dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 750; }

.reasoningSummary ul {
  margin: 8px 0 2px;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
  font-size: 11px;
  line-height: 1.55;
}

.reasoningSummary li { display: flex; justify-content: space-between; gap: 12px; }
.reasoningSummary li span { color: var(--muted); text-align: right; }
.reasoningSummary .qualityFindings {
  padding: 8px 10px 8px 28px;
  border: 1px solid var(--brass);
  border-radius: 5px;
  background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface));
  color: var(--amber);
  list-style: disc;
}
.reasoningSummary .qualityFindings li { display: list-item; }

.answerFooter {
  min-height: 40px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.answerFooter button {
  min-height: 36px;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--textSubtle);
  padding: 0 11px;
  font-weight: 700;
  cursor: pointer;
}

.answerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.answerActions button[data-export-format] {
  background: var(--panel);
  color: var(--jade);
}

.answerActions button[data-share-message] {
  background: var(--jadeDark);
  border-color: var(--jadeDark);
  color: var(--onJade);
}

.answerActions .answerPrimaryAction {
  border-color: var(--lineStrong);
  background: var(--panelStrong);
  color: var(--jade);
}

.answerActions .answerPrimaryAction:hover { border-color: var(--jade); background: var(--panelStrong); }
.answerActions .answerExportMenu > div { min-width: 210px; }
.answerActions .answerExportMenu > div button { white-space: nowrap; }

.documentComposerScrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}

.documentComposer {
  width: min(820px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto auto minmax(240px, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 55px var(--shadowColor);
}

.documentComposer > header,
.documentComposer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.documentComposer > header { border-bottom: 1px solid var(--line); }
.documentComposer > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.documentComposer h2 { margin: 2px 0 0; font-size: 20px; }
.documentComposer header small { color: var(--muted); }

.editorToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.editorToolbar button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.documentEditor {
  width: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  overflow: auto;
  padding: 24px 28px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  outline: none;
}

.confirmationScrim { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--scrim); }
.confirmationDialog { width: min(430px, 100%); padding: 22px; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--surface); box-shadow: 0 20px 55px var(--shadowColor); }
.confirmationDialog h2 { font-size: 19px; }
.confirmationDialog p { margin-top: 10px; color: var(--muted); line-height: 1.5; }
.confirmationDialog > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dangerButton { border-color: var(--statusDanger); background: var(--statusDanger); color: var(--bg); }
.inheritedContextNotice { color: var(--textSubtle); background: var(--panelStrong); }

.featureRequestLauncher {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 88px;
  min-width: 132px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  box-shadow: 0 10px 28px var(--shadowColor);
  font: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.featureRequestLauncher strong { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.featureRequestLauncher:hover { background: var(--jadeDark); }
.featureRequestLauncher:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 3px; }
.featureRequestLauncher.isDragging { cursor: grabbing; box-shadow: 0 14px 34px var(--shadowColor); }

.featureRequestScrim {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}

.featureRequestWorkspace {
  width: min(940px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 55px var(--shadowColor);
}

.featureRequestWorkspace > header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.featureRequestWorkspace > header span {
  color: var(--jade);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.featureRequestWorkspace h2,
.featureRequestWorkspace h3 { margin: 0; letter-spacing: 0; }
.featureRequestWorkspace h2 { margin-top: 3px; font-size: 22px; }
.featureRequestWorkspace h3 { font-size: 16px; }

.featureRequestBody {
  min-height: 0;
  max-height: calc(100dvh - 126px);
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(340px, 1.2fr);
  overflow: hidden;
}

.featureRequestForm,
.featureRequestHistory {
  min-width: 0;
  overflow-y: auto;
  padding: 22px;
}

.featureRequestForm {
  display: grid;
  align-content: start;
  gap: 14px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.featureRequestForm > div p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.featureRequestForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.featureRequestForm input,
.featureRequestForm textarea,
.featureRequestForm select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--inputBg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

.featureRequestScreenshotField {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--lineStrong);
  border-radius: 7px;
  background: var(--panel);
}
.featureRequestScreenshotField > span { color: var(--textSubtle); font-size: 12px; font-weight: 800; }
.featureRequestScreenshotField > span small { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.featureRequestScreenshotField > div { display: flex; flex-wrap: wrap; gap: 8px; }
.featureRequestScreenshotField label.quietButton { width: auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 11px; cursor: pointer; }
.featureRequestScreenshotField > small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.featureRequestScreenshotField figure { margin: 0; display: grid; gap: 5px; }
.featureRequestScreenshotField figure img { width: 100%; max-height: 180px; object-fit: contain; object-position: left center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.featureRequestScreenshotField figcaption { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.featureRequestForm button { justify-self: end; }
.featureRequestError { min-height: 18px; margin: 0; color: var(--statusDanger); font-size: 11px; }

.featureRequestHistory { display: grid; align-content: start; gap: 14px; }
.featureRequestHistory > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.featureRequestHistory > div > span { min-width: 28px; padding: 4px 7px; border-radius: 6px; background: var(--panelStrong); color: var(--textSubtle); font-size: 11px; font-weight: 800; text-align: center; }
.featureRequestNotice { margin: 0; padding: 9px 11px; border-left: 3px solid var(--statusSuccess); background: var(--panel); color: var(--jade); font-size: 12px; }
.featureRequestEmpty { margin: 20px 0; color: var(--muted); font-size: 13px; }
.featureRequestState { min-height: 160px; display: grid; place-content: center; justify-items: center; gap: 9px; color: var(--muted); font-size: 12px; }

.featureRequestList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.featureRequestList li {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.featureRequestList li.isComplete { background: var(--panel); }
.featureRequestList li > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.featureRequestList li p { margin: 0; color: var(--textSubtle); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.featureRequestList li small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.featureRequestScreenshotLink, .platformRequestScreenshot { width: min(260px, 100%); display: block; }
.featureRequestScreenshotLink img, .platformRequestScreenshot img { width: 100%; max-height: 150px; display: block; object-fit: contain; object-position: left center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.featureRequestScreenshotLink:focus-visible, .platformRequestScreenshot:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 3px; }
.requestStatus { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--statusSuccess) 14%, var(--surface)); color: var(--statusSuccess); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.isComplete .requestStatus { background: var(--panelStrong); color: var(--muted); }

@media (max-width: 900px) {
  .featureRequestBody { grid-template-columns: 1fr; overflow-y: auto; }
  .featureRequestForm, .featureRequestHistory { overflow: visible; }
  .featureRequestForm { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .featureRequestLauncher {
    right: 12px;
    bottom: 80px;
    min-width: 126px;
    min-height: 42px;
    padding: 0 13px;
  }
  .featureRequestScrim { padding: 0; }
  .featureRequestWorkspace { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .featureRequestBody { max-height: calc(100dvh - 76px); }
}

.practitionerProfileScrim {
  position: fixed;
  z-index: 122;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}

.practitionerProfileDialog {
  width: min(880px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 55px var(--shadowColor);
}

.practitionerProfileHeader {
  min-height: 96px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.practitionerProfileHeader h2 {
  margin: 4px 0 0;
  font-size: 22px;
  letter-spacing: 0;
}

.practitionerProfileHeader p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.practitionerProfileHeaderActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.profileActionButton {
  min-width: 112px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--jadeDark);
  border-radius: 6px;
  background: var(--jadeDark);
  color: var(--onJade);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.profileActionButton:hover { background: var(--jadeDark); border-color: var(--jadeDark); }
.profileActionButton:disabled { cursor: wait; opacity: .62; }

.practitionerContextLine {
  max-width: 680px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.practitionerProfileForm {
  max-height: calc(100dvh - 145px);
  overflow-y: auto;
  padding: 20px 22px;
}

.practitionerProfileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.profileField {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profileFieldWide { grid-column: 1 / -1; }
.profileField > span > small { color: var(--muted); font-size: 9px; font-weight: 650; text-transform: uppercase; }

.profileField input,
.profileField select,
.profileField textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--inputBg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.profileCustomInstructions { grid-column: 1 / -1; max-width: calc(50% + 9px); }
.profileField.profileCustomInstructions textarea { min-height: 42px; height: 42px; resize: vertical; }

.starterQueries { margin-top: 22px; }
.starterQueries h3 { margin: 0 0 12px; font-size: 14px; font-weight: 850; }
.starterQueries > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.starterQueries button { min-width: 0; min-height: 116px; padding: 13px; border: 1px solid var(--lineStrong); border-left: 4px solid var(--brass); border-radius: 7px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.starterQueries button:hover { border-color: var(--lineStrong); background: var(--panel); }
.starterQueries strong, .starterQueries span { display: block; }
.starterQueries strong { margin-bottom: 8px; color: var(--jade); font-size: 11px; }
.starterQueries span { font-size: 11px; line-height: 1.45; }

/* Currency and OCR remain in the index for audit/export, but are intentionally
   omitted from the streamlined priority-review table. */
.libraryTable th:nth-child(6), .libraryTable td:nth-child(6),
.libraryTable th:nth-child(7), .libraryTable td:nth-child(7) { display: none; }

.statusRow { align-items: flex-start; }
.statusRow > #composer-help { order: -1; }
.composerContext { padding-top: 6px; }

.profileField textarea {
  min-height: 118px;
  line-height: 1.5;
  resize: vertical;
}

.profileField input:focus,
.profileField select:focus,
.profileField textarea:focus {
  border-color: var(--jade);
  outline: 2px solid color-mix(in srgb, var(--jade) 17%, transparent);
  outline-offset: 1px;
}

.profileField > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.profileMultiSelect {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.profileMultiSelect legend {
  margin: 0 0 6px;
  padding: 0;
}

.profileMultiSelect details {
  position: relative;
}

.profileMultiSelect summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.profileMultiSelect summary::-webkit-details-marker { display: none; }
.profileMultiSelect details[open] summary { border-color: var(--jade); outline: 2px solid color-mix(in srgb, var(--jade) 17%, transparent); outline-offset: 1px; }

.profileMultiSelectMenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 270px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 14px 30px var(--shadowColor);
}

.profileOptionSearch { padding: 8px; border-bottom: 1px solid var(--line); }
.profileOptionSearch input { min-height: 36px; }
.profileOptionList { min-height: 0; overflow-y: auto; padding: 5px; }

.profileOptionList > label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.profileOptionList > label:hover { background: var(--panelStrong); }
.profileOptionList input { width: 16px; min-width: 16px; min-height: 16px; margin: 0; accent-color: var(--jade); }

.practitionerProfileMessages {
  min-height: 30px;
  padding-top: 12px;
}

.practitionerProfileMessages p { margin: 0; }

.practitionerProfileForm footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}

.practitionerProfileForm footer .profileActionButton { min-width: 112px; }

.practitionerProfileLoading {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 700px) {
  .practitionerProfileScrim { padding: 0; }
  .practitionerProfileDialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 0;
    border-radius: 0;
  }
  .practitionerProfileHeader { min-height: 106px; flex-direction: column; padding: 15px 16px; }
  .practitionerProfileHeader h2 { font-size: 19px; }
  .practitionerProfileHeaderActions { width: 100%; }
  .practitionerProfileHeaderActions .profileActionButton { flex: 1 1 0; min-width: 0; }
  .practitionerProfileForm { min-height: 0; max-height: none; padding: 17px 16px 0; }
  .practitionerProfileGrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profileFieldWide { grid-column: auto; }
  .profileMultiSelectMenu {
    position: static;
    max-height: min(320px, 48dvh);
    margin-top: 5px;
    box-shadow: none;
  }
  .practitionerProfileForm footer { position: sticky; bottom: 0; margin: 4px -16px 0; padding: 13px 16px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
}

.documentEditor:focus { box-shadow: inset 0 0 0 2px var(--jade); }
.documentEditor h1, .documentEditor h2, .documentEditor h3 { letter-spacing: 0; }

.documentFormat {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 13px 20px;
  border: 0;
  border-top: 1px solid var(--line);
}

.documentFormat legend { float: left; margin-right: 18px; font-weight: 700; }
.documentFormat label { display: flex; align-items: center; gap: 7px; }

/* Both footer actions share the filled treatment the send button used to carry,
   so the dialog no longer mixes three button styles in one row. */
.documentComposerButton {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-weight: 700;
  cursor: pointer;
}

.documentComposerButton:hover { background: var(--jade); border-color: var(--jade); }
.documentComposerButton:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }

.documentComposerActions { display: flex; gap: 8px; }

.projectEditorScrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}

.projectEditor {
  width: min(820px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 55px var(--shadowColor);
}

.projectEditor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.projectEditor > header > div:first-child { min-width: 0; }
.projectEditor > header > div:first-child > strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.4; }
.projectEditor > header > div:first-child > p { max-width: 620px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.projectEditor h2 { margin-top: 3px; font-size: 20px; }
.projectEditorHeaderActions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.projectEditorHeaderActions .primaryButton { min-height: 38px; padding: 0 14px; }
.matterSetupProgress {
  max-width: 170px;
  padding: 7px 9px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--panelStrong);
  color: var(--textSubtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.projectEditor form { display: grid; gap: 18px; padding: 12px 20px 20px; }
.projectEditorSectionNav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.projectEditorSectionNav a {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 5px;
  color: var(--textSubtle);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}
.projectEditorSectionNav a:hover, .projectEditorSectionNav a:focus-visible { background: var(--panelStrong); color: var(--jade); }
.projectEditorSection { display: grid; gap: 14px; }
.projectEditorSectionHeading { display: grid; gap: 3px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.projectEditorSectionHeading h3 { font-size: 15px; }
.projectEditorSectionHeading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.projectEditorGroup {
  min-width: 0;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 13px;
  scroll-margin-top: 64px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}
.projectEditorGroup legend {
  padding: 0 5px;
  color: var(--textSubtle);
  font-size: 12px;
  font-weight: 800;
}
.projectFieldGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.projectPartiesGrid input,
.matterPartiesGrid input { min-height: 42px; }
.projectConfidentialityGroup label { max-width: none; }
.projectEditor label { display: grid; gap: 6px; color: var(--textSubtle); font-size: 12px; font-weight: 750; }
.projectEditor label small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.projectEditor input,
.projectEditor select,
.projectEditor textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 13px; }
.projectEditor input,
.projectEditor select { min-height: 40px; }
.projectEditor textarea { resize: vertical; line-height: 1.5; }
.matterContextFields textarea { min-height: 104px; }
.projectEditor input:focus,
.projectEditor select:focus,
.projectEditor textarea:focus { border-color: var(--jade); outline: 2px solid color-mix(in srgb, var(--jade) 17%, transparent); outline-offset: 1px; }
.projectEditor footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.projectEditor footer > span { color: var(--muted); font-size: 11px; }
.projectEditor footer > div { display: flex; flex: 0 0 auto; gap: 8px; }
.projectDocuments { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--panelStrong); scroll-margin-top: 64px; }
.projectDocumentsHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.projectDocumentsHeading > div { display: grid; gap: 3px; }
.projectDocumentsHeading span { color: var(--ink); font-size: 15px; font-weight: 800; }
.projectDocumentsHeading small, .projectDocumentState { color: var(--muted); font-size: 10px; line-height: 1.45; }
.projectDocumentsHeading button { min-height: 36px; padding: 0 12px; border: 1px solid var(--jadeDark); border-radius: 6px; background: var(--jadeDark); color: var(--onJade); font-size: 11px; font-weight: 750; cursor: pointer; }
.matterUploadStatus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 38%); align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); }
.matterUploadStatus > div:first-child { min-width: 0; display: grid; gap: 3px; }
.matterUploadStatus strong { color: var(--ink); font-size: 11px; }
.matterUploadStatus span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.matterUploadStatus .matterUploadPercent { min-width: 34px; color: var(--jade); font-size: 10px; text-align: right; }
.matterLibraryTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.matterLibraryTabs button { min-width: 0; min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 4px 8px; padding: 10px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); color: var(--textSubtle); text-align: left; cursor: pointer; }
.matterLibraryTabs button[aria-selected="true"] { border-color: var(--jade); background: var(--panelStrong); box-shadow: inset 0 0 0 1px var(--jade); color: var(--jade); }
.matterLibraryTabs span { overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.matterLibraryTabs strong { min-width: 22px; height: 20px; display: grid; place-items: center; border-radius: 4px; background: var(--panelStrong); font-size: 10px; }
.matterLibraryTabs small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.35; }
.matterLibraryActiveSummary { margin: 0; color: var(--muted); font-size: 10px; }
.projectDocumentRow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.projectDocumentRow > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.projectDocumentRow strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.projectDocumentRow small { color: var(--muted); font-size: 9px; }
.projectDocumentRow > button { width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.projectDocumentRow > button:hover { background: var(--panelStrong); color: var(--ink); }
.duplicateDocumentFlag { margin-left: 5px; color: var(--amber); font-size: 9px; font-style: normal; }
.projectDocumentMetadata { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 6px; }
.projectDocumentMetadata summary { color: var(--textSubtle); font-size: 10px; font-weight: 750; cursor: pointer; }
.projectDocumentMetadataGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 9px 0; }
.projectDocumentMetadataGrid label { gap: 3px; font-size: 10px; }
.projectDocumentMetadataGrid input, .projectDocumentMetadataGrid select { min-height: 34px; padding: 7px 8px; font-size: 11px; }
.projectDocumentMetadata > button { min-height: 32px; }
.librarySubmissionFields { grid-column: 1 / -1; display: grid; gap: 8px; margin: 10px 0; padding: 12px; border: 1px solid var(--brass); border-radius: 6px; background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); }
.librarySubmissionFields legend { padding: 0 5px; color: var(--amber); font-size: 11px; font-weight: 800; }
.librarySubmissionFields p { margin: 0; color: var(--amber); font-size: 10px; line-height: 1.45; }
.librarySubmissionFields .libraryConsent { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 7px; }
.librarySubmissionFields .libraryConsent input { width: 16px; min-height: 16px; margin-top: 1px; }
.submissionStatus.status-approved { color: var(--jade); }
.submissionStatus.status-rejected { color: var(--statusDanger); }

.documentLibraryScrim { position: fixed; inset: 0; z-index: 87; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.documentLibraryDialog { width: min(820px, 100%); height: min(720px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--surface); box-shadow: 0 22px 60px var(--shadowColor); }
.documentLibraryHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.documentLibraryHeader h2 { margin: 3px 0 0; font-size: 22px; }
.documentLibraryHeader p { max-width: 660px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.documentLibraryToolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.documentLibraryToolbar label { min-width: 220px; flex: 1; }
.documentLibraryToolbar input { width: min(360px, 100%); min-height: 38px; padding: 0 11px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font-size: 12px; }
.documentLibraryToolbar select { min-height: 38px; padding: 0 28px 0 10px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font-size: 11px; }
.documentLibraryFilter { min-width: 150px !important; flex: 0 0 auto !important; }
.documentLibraryToolbar > div, .documentLibraryFooter > div { display: flex; align-items: center; gap: 8px; }
.documentLibraryToolbar strong { color: var(--textSubtle); font-size: 11px; }
.documentLibraryToolbar button { min-height: 32px; padding: 0 9px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); color: var(--textSubtle); font-size: 10px; font-weight: 750; cursor: pointer; }
.documentLibraryBody { min-height: 0; overflow: auto; padding: 0 22px; }
.documentLibraryList { margin: 0; padding: 0; list-style: none; }
.documentLibraryList li { border-bottom: 1px solid var(--line); }
.documentLibraryList li.selected { background: var(--panelStrong); }
.documentLibraryList label { min-width: 0; display: grid; grid-template-columns: 20px 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 13px 10px; cursor: pointer; }
.documentLibraryList label > span:last-child { min-width: 0; display: grid; gap: 3px; }
.documentLibraryList strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.documentLibraryList small { color: var(--muted); font-size: 10px; }
.documentLibraryType { min-height: 26px; display: grid; place-items: center; border-radius: 5px; background: var(--panelStrong); color: var(--jade); font-size: 9px; font-weight: 800; }
.documentLibraryEmpty { display: grid; place-items: center; gap: 5px; min-height: 220px; margin: 0; color: var(--muted); text-align: center; }
.documentLibraryEmpty strong { color: var(--ink); }
.documentLibraryMatterPicker { height: min(620px, calc(100dvh - 48px)); }
.documentLibraryMatterList { margin: 0; padding: 8px 0; list-style: none; }
.documentLibraryMatterList li { border-bottom: 1px solid var(--line); }
.documentLibraryMatterList button { width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 10px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.documentLibraryMatterList button:hover, .documentLibraryMatterList button:focus-visible { background: var(--panelStrong); }
.documentLibraryMatterList button > span:first-child { min-width: 0; display: grid; gap: 4px; }
.documentLibraryMatterList strong, .documentLibraryMatterList small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documentLibraryMatterList small { color: var(--muted); font-size: 10px; }
.documentLibraryMatterList button > span:last-child { color: var(--textSubtle); font-size: 24px; }
.documentLibraryError { min-height: 20px; margin: 0; padding: 4px 22px; color: var(--statusDanger); font-size: 11px; }
.documentLibraryFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface); }

@media (max-width: 700px) {
  .documentLibraryScrim { padding: 0; }
  .documentLibraryDialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .documentLibraryHeader, .documentLibraryToolbar, .documentLibraryFooter { padding-inline: 14px; }
  .documentLibraryToolbar { align-items: stretch; flex-direction: column; }
  .documentLibraryToolbar input { width: 100%; }
  .projectDocumentsHeading { align-items: stretch; flex-direction: column; }
  .projectDocumentsHeading button { width: 100%; }
  .matterUploadStatus { grid-template-columns: minmax(0, 1fr); }
  .matterLibraryTabs { grid-template-columns: minmax(0, 1fr); }
  .librarySubmissionList article { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .librarySubmissionList article > div:last-child { justify-content: flex-end; }
  .documentLibraryBody { padding-inline: 14px; }
  .documentLibraryFooter { align-items: stretch; flex-direction: column; }
  .documentLibraryFooter > div { justify-content: flex-end; }
}

.mattersWorkspaceScrim { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.mattersWorkspace { width: min(1040px, 100%); height: min(780px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--lineStrong); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 60px var(--shadowColor); }
.mattersWorkspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mattersWorkspace header small { color: var(--jade); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mattersWorkspace h2 { margin-top: 3px; font-size: 22px; }
.mattersWorkspace header p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.mattersWorkspaceBody { min-height: 0; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); }
.matterDirectory, .matterCreate { min-height: 0; padding: 20px 22px; overflow: auto; }
.matterDirectory { border-right: 1px solid var(--line); background: var(--panel); }
.matterCreate { background: var(--surface); }
.matterSectionHeading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.matterSectionHeading h3 { font-size: 14px; }
.matterSectionHeading p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.matterSectionHeading > span { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: var(--panelStrong); color: var(--textSubtle); font-size: 11px; font-weight: 750; }
.matterDirectoryList, .matterCreate form { display: grid; gap: 12px; }
.matterSummary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.matterSummary.editing { border-color: var(--jade); background: var(--panelStrong); }
.matterSummary > div { min-width: 0; display: grid; gap: 3px; }
.matterSummary span { color: var(--jade); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.matterSummary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.matterSummary small, .matterEmpty { color: var(--muted); font-size: 10px; }
.matterSummary button { min-height: 30px; padding: 0 8px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--textSubtle); font-size: 10px; font-weight: 750; cursor: pointer; }
.matterSummaryActions { display: flex; align-items: center; gap: 6px; }

.inlineAuthorities { display: inline; }
.propositionRef { display: inline; min-height: 24px; margin: 0 2px; padding: 2px 5px; border: 1px solid var(--lineStrong); border-radius: 4px; background: var(--panelStrong); color: var(--jade); font: inherit; font-size: .76em; font-weight: 750; line-height: 1.45; text-align: left; overflow-wrap: anywhere; cursor: pointer; vertical-align: baseline; }
.propositionRef:hover, .propositionRef:focus-visible { border-color: var(--jade); background: var(--panelStrong); outline: 2px solid color-mix(in srgb, var(--jade) 18%, transparent); outline-offset: 1px; }
.citationItem.highlightedCitation { border-color: var(--jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 14%, transparent); }
.propositionMarkers, .verificationRecord { display: block; margin-top: 4px; color: var(--jade); font-size: 10px; font-weight: 750; }
.authorityBadges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.authorityTypeBadge, .citationPriorityBadge { width: max-content; max-width: 100%; padding: 3px 6px; border-radius: 4px; background: var(--panelStrong); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.citationPriorityBadge { border: 1px solid var(--brass); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); }
.priorityReason { color: var(--textSubtle); font-size: 10px; line-height: 1.35; }
.authorityWarnings { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; padding: 0; list-style: none; }
.authorityWarnings li { padding: 2px 5px; border: 1px solid var(--brass); border-radius: 4px; background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); font-size: 8px; font-weight: 750; }
.citationBody blockquote { margin: 9px 0 2px; padding: 8px 10px; border-left: 3px solid var(--brass); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--textSubtle); font-size: 11px; line-height: 1.45; }
.researchScope dl { display: grid; gap: 7px; margin: 10px 0 0; }
.researchScope dl > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 10px; font-size: 11px; }
.researchScope dt { color: var(--muted); }
.researchScope dd { margin: 0; color: var(--ink); font-weight: 700; }
/* "Sources consulted": what retrieval read, kept visually distinct from the List of
   Authorities the answer cites. min-width: 0 down the grid chain because the right panel
   is ~390px and a long book-and-chapter label must wrap, never widen the panel. */
.consultedSources { min-width: 0; display: grid; gap: 7px; margin: 12px 0 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.consultedSourcesHeading { min-width: 0; display: grid; gap: 4px; }
.consultedSources h3 { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; }
.consultedSourcesNote, .consultedSourcesLegacy { margin: 0; color: var(--textSubtle); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.consultedSourceList { min-width: 0; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.consultedSourceList li { min-width: 0; display: grid; gap: 2px; padding-left: 9px; border-left: 2px solid var(--lineStrong); }
.consultedSourceList li strong, .consultedSourceList li a { color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.consultedSourceList li a { color: var(--jade); text-decoration: underline; }
.consultedSourceList li a:hover, .consultedSourceList li a:focus-visible { text-decoration-thickness: 2px; }
.consultedSourceList li span { color: var(--muted); font-size: 10px; font-weight: 750; }
.consultedSourcesMore { min-width: 0; display: grid; gap: 7px; }
.consultedSourcesMore > summary { width: fit-content; max-width: 100%; padding: 2px 0; color: var(--jade); font-size: 10px; font-weight: 800; cursor: pointer; }
.consultedSourcesMore > summary:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }
.consultedSourcesMore .disclosureOpenLabel { display: none; }
.consultedSourcesMore[open] .disclosureClosedLabel { display: none; }
.consultedSourcesMore[open] .disclosureOpenLabel { display: inline; }
.scopeLimitations { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 18px; color: var(--amber); font-size: 10px; line-height: 1.45; }
.artifactList { display: grid; gap: 8px; margin-top: 10px; }
.artifactList article { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.artifactList strong { color: var(--ink); font-size: 11px; }
.artifactList p, .artifactList small { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.artifactStatus, .disputedFlag { width: fit-content; padding: 2px 5px; border-radius: 4px; background: var(--panelStrong); color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.chronologyList article { border-left: 3px solid var(--lineStrong); }
.chronologyList time { color: var(--jade); font-size: 9px; font-weight: 800; }
.disputedFlag { background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); }
.answerExportMenu { position: relative; }
.answerExportMenu summary { min-height: 38px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); color: var(--textSubtle); font-size: 11px; font-weight: 750; cursor: pointer; list-style: none; }
.answerExportMenu summary::-webkit-details-marker { display: none; }
.answerExportMenu > div { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 6px); min-width: 170px; display: grid; padding: 5px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); box-shadow: 0 12px 28px var(--shadowColor); }
.answerExportMenu > div button { min-height: 38px; padding: 0 10px; border: 0; background: transparent; text-align: left; }
/* Popup menu items highlight in the brand green rather than a neutral grey, so
   the active row is unmistakable. Declared once for the whole menu family
   (export, account, history, mode) to keep them consistent. */
/* Popup menu items highlight in the brand green rather than a neutral grey, so
   the active row is unmistakable. Declared once for the whole menu family
   (export, account, history, mode) to keep them consistent.
   The green fill is HOVER ONLY: a menu that opens with a green row looks like
   something is already selected. Keyboard focus gets a ring instead, so it is
   still clearly visible without claiming to be the pointer target. */
.answerExportMenu > div button:hover {
  background: var(--jadeDark);
  color: var(--onJade);
}

.answerExportMenu > div button:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: -2px;
}
.conversationExportButton {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--textSubtle);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.conversationExportButton:hover { border-color: var(--lineStrong); background: var(--panelStrong); }

.conversationExportScrim {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}
.conversationExportDialog {
  width: min(820px, 100%);
  max-height: min(780px, calc(100dvh - 48px));
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 64px var(--shadowColor);
}
.conversationExportHeader,
.conversationExportToolbar,
.conversationExportFooter { padding: 17px 20px; background: var(--surface); }
.conversationExportHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.dialogEyebrow { color: var(--jade); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.conversationExportHeader h2 { margin: 3px 0 0; font-size: 21px; letter-spacing: 0; }
.conversationExportHeader p { margin: 5px 0 0; color: var(--textSubtle); font-size: 12px; }
.dialogCloseButton {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--textSubtle);
  font-size: 25px;
  cursor: pointer;
}
.dialogCloseButton:hover { background: var(--panelStrong); }
.conversationExportToolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.selectionActions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.selectionActions button { min-height: 36px; padding: 0 10px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--textSubtle); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.selectionActions button:disabled { cursor: not-allowed; opacity: .48; }
.includeQuestionsToggle { display: flex; align-items: center; gap: 8px; color: var(--textSubtle); font-size: 11px; font-weight: 750; }
.includeQuestionsToggle input,
.exportAnswerSelection input { width: 19px; height: 19px; accent-color: var(--jade); }
.conversationExportBody { min-height: 0; overflow: auto; padding: 10px 20px 16px; }
.conversationExportList { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.conversationExportItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.conversationExportItem.selected { border-color: var(--lineStrong); background: var(--panel); }
.exportAnswerSelection { align-self: start; padding-top: 2px; }
.exportAnswerSummary { min-width: 0; display: grid; gap: 4px; }
.exportAnswerSummary > span { color: var(--jade); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.exportAnswerSummary strong,
.exportAnswerSummary p { overflow-wrap: anywhere; }
.exportAnswerSummary strong { font-size: 12px; line-height: 1.4; }
.exportAnswerSummary p { margin: 0; color: var(--textSubtle); font-size: 11px; line-height: 1.45; }
.exportOrderActions { display: flex; gap: 5px; }
.exportOrderActions button { width: 38px; height: 38px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--surface); color: var(--textSubtle); font-size: 16px; cursor: pointer; }
.exportOrderActions button:disabled { cursor: not-allowed; opacity: .36; }
.conversationExportEmpty { display: grid; place-items: center; min-height: 220px; padding: 28px; color: var(--textSubtle); text-align: center; }
.conversationExportEmpty strong { color: var(--ink); }
.conversationExportEmpty p { margin: 6px 0 0; font-size: 12px; }
.conversationExportFooter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 18px; border-top: 1px solid var(--line); }
.conversationExportFooter fieldset { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.conversationExportFooter legend { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.conversationExportFooter label { display: flex; align-items: center; gap: 6px; color: var(--textSubtle); font-size: 11px; font-weight: 700; }
.conversationExportFooter > div { display: flex; gap: 8px; }
.conversationExportError { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--statusDanger); font-size: 11px; }
.conversationExportError:empty { display: none; }

@media (max-width: 700px) {
  .conversationExportScrim { padding: 0; }
  .conversationExportDialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .conversationExportHeader,
  .conversationExportToolbar,
  .conversationExportFooter { padding-inline: 14px; }
  .conversationExportToolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .conversationExportBody { padding-inline: 14px; }
  .conversationExportItem { grid-template-columns: 28px minmax(0, 1fr); }
  .exportOrderActions { grid-column: 2; justify-content: flex-end; }
  .conversationExportFooter { grid-template-columns: 1fr; align-items: stretch; }
  .conversationExportFooter > div { justify-content: flex-end; }
}

@media (max-width: 420px) {
  .conversationExportHeader h2 { font-size: 18px; }
  .conversationExportItem { padding: 10px 9px; }
  .conversationExportFooter > div > * { flex: 1 1 0; }
  .conversationExportButton { max-width: 126px; overflow: hidden; text-overflow: ellipsis; }
}
.matterCreate form > label, .matterFieldGrid label { display: grid; gap: 5px; color: var(--textSubtle); font-size: 11px; font-weight: 750; }
.matterCreate input, .matterCreate select, .matterCreate textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; }
.matterCreate textarea { resize: vertical; line-height: 1.45; }
.matterCreate input:focus, .matterCreate select:focus, .matterCreate textarea:focus { border-color: var(--jade); outline: 2px solid color-mix(in srgb, var(--jade) 15%, transparent); outline-offset: 1px; }
.matterFieldGrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.matterCreateActions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 13px; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  .documentComposerScrim { padding: 0; }
  .documentComposer {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .documentComposer > header,
  .documentComposer > footer,
  .editorToolbar,
  .documentFormat { padding-left: 14px; padding-right: 14px; }
  .documentEditor { padding: 20px 16px; }
  .documentFormat { flex-wrap: wrap; gap: 12px 18px; }
  .projectEditorScrim { padding: 0; }
  .projectEditor { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .projectEditor > header { align-items: flex-start; flex-direction: column; }
  .projectEditorHeaderActions { width: 100%; flex-wrap: wrap; }
  .projectEditorHeaderActions .primaryButton { flex: 1 1 120px; }
  .matterSetupProgress { width: 100%; max-width: none; text-align: left; }
  .projectFieldGrid { grid-template-columns: 1fr; }
  .projectDocumentMetadataGrid { grid-template-columns: 1fr; }
  .projectEditor footer { align-items: stretch; flex-direction: column; }
  .projectEditor footer > div { justify-content: flex-end; }
  .mattersWorkspaceScrim { padding: 0; }
  .mattersWorkspace { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .mattersWorkspaceBody { display: block; overflow: auto; }
  .matterDirectory, .matterCreate { overflow: visible; }
  .matterDirectory { border-right: 0; border-bottom: 1px solid var(--line); }
  .matterFieldGrid { grid-template-columns: 1fr; }
}

.message.pending .messageBubble {
  padding: 13px 15px;
  border: 1px dashed var(--lineStrong);
  border-radius: 8px;
  border-style: dashed;
  background: var(--panel);
}

.message.pending .messageMeta span::after {
  content: '...';
  display: inline-block;
  width: 16px;
  overflow: hidden;
  vertical-align: bottom;
  animation: thinkingDots 1.3s steps(4, end) infinite;
}

.message.pending .messageAvatar {
  animation: thinkingPulse 1.8s ease-in-out infinite;
}

.thinkingIndicator {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.thinkingIndicator > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.thinkingIndicator small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.thinkingBars {
  width: 34px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.thinkingBars i {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--jade);
  animation: thinkingBar 1s ease-in-out infinite;
}

.thinkingBars i:nth-child(2) { animation-delay: 120ms; }
.thinkingBars i:nth-child(3) { animation-delay: 240ms; }
.thinkingBars i:nth-child(4) { animation-delay: 360ms; }

.processingStatus {
  display: grid;
  gap: 12px;
}

.processingStatus .thinkingIndicator strong {
  color: var(--ink);
  font-size: 13px;
}

.processingReassurance {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.analysisProgress {
  display: grid;
  gap: 5px;
}

.analysisProgress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.analysisProgress strong { color: var(--jade); font-variant-numeric: tabular-nums; }

.analysisProgress progress {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panelStrong);
}

.analysisProgress progress::-webkit-progress-bar { background: var(--panelStrong); }
.analysisProgress progress::-webkit-progress-value { background: var(--jadeDark); transition: width .4s ease; }
.analysisProgress progress::-moz-progress-bar { background: var(--jadeDark); }

.processingStages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.processingStages li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.processingStages li > span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--lineStrong);
  border-radius: 50%;
  background: var(--surface);
}

.processingStages li.complete { color: var(--muted); }
.processingStages li.complete > span { border-color: var(--statusSuccess); background: var(--statusSuccess); }
.processingStages li.active { color: var(--ink); font-weight: 750; }
.processingStages li.active > span { border-color: var(--jade); background: var(--jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 12%, transparent); }

@keyframes thinkingBar {
  0%, 100% { height: 7px; opacity: 0.45; }
  50% { height: 21px; opacity: 1; }
}

@keyframes thinkingPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--jade) 12%, transparent); }
}

@keyframes thinkingDots {
  0% { width: 0; }
  100% { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .message.pending .messageAvatar,
  .message.pending .messageMeta span::after,
  .thinkingBars i {
    animation: none;
  }
  .thinkingBars i { height: 12px; opacity: 0.75; }
}

.composer {
  width: min(calc(100% - 48px), 960px);
  margin: 0 auto 10px;
  min-height: 98px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid var(--lineStrong);
  background: var(--panelStrong);
  border-radius: 8px;
  box-shadow: 0 14px 34px var(--shadowColor);
  overflow: visible;
}

.composerContext {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.composerContext input, .composerContext select {
  min-width: 0;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

.jurisdictionContext, .matterContextSummary { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.jurisdictionContext > span, .matterContextSummary > span { color: var(--textSubtle); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.composerContext select { min-width: 92px; cursor: pointer; }
.matterContextSummary strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.composerJurisdictionSelect { min-width: 0; position: relative; }
.composerJurisdictionSelect summary { min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.composerJurisdictionSelect summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composerJurisdictionSelect summary::-webkit-details-marker { display: none; }
.composerJurisdictionSelect[open] summary { border-color: var(--jade); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 16%, transparent); }
.composerJurisdictionMenu { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; width: min(340px, 82vw); max-height: 360px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; padding: 9px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--surface); box-shadow: 0 16px 38px var(--shadowColor); }
.composerJurisdictionSearch input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); }
.composerJurisdictionOptions { min-height: 0; display: grid; gap: 1px; overflow-y: auto; }
.composerJurisdictionOptions label { min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; }
.composerJurisdictionOptions label:hover { background: var(--panelStrong); }
.composerJurisdictionOptions label[hidden] { display: none; }
.composerJurisdictionOptions input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--jade); }
.composerJurisdictionOptions hr { width: 100%; margin: 5px 0; border: 0; border-top: 1px solid var(--line); }
.composerJurisdictionMenu > small { color: var(--muted); font-size: 10px; font-weight: 650; }

.composerContext small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.attachmentBar {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 7px 10px 9px 12px;
  border-bottom: 1px solid var(--line);
}

.attachmentToolbar { min-width: 0; display: grid; grid-template-columns: minmax(150px, auto) minmax(180px, auto) minmax(220px, auto); justify-content: start; gap: 7px; }
.matterLibraryButton { min-height: 34px; display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 11px; border: 1px solid var(--jadeDark) !important; border-radius: 6px; background: var(--jadeDark) !important; color: var(--onJade) !important; font-size: 11px; font-weight: 800; cursor: pointer; }
.matterLibraryButton strong { min-width: 28px; height: 22px; display: grid; place-items: center; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.16); color: var(--onJade); font-size: 10px; }
.matterLibraryButton:disabled { cursor: wait; opacity: .65; }

.attachmentContent {
  min-width: 0;
}

.attachmentToggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  padding: 0 11px;
  border: 1px solid var(--jadeDark) !important;
  border-radius: 6px;
  background: var(--jadeDark) !important;
  color: var(--onJade) !important;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.attachmentToggle:disabled {
  cursor: wait;
  opacity: .7;
}

.attachmentToggleIcon {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 120ms ease;
}

.attachmentsCollapsed .attachmentToggleIcon {
  transform: rotate(-45deg);
}

.attachmentCount {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(255,255,255,.16);
  color: var(--onJade);
  font-size: 10px;
}

.attachmentViewport {
  min-width: 0;
  min-height: 24px;
  max-height: 174px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px 3px 1px 0;
  scrollbar-gutter: stable;
}

.attachmentViewport[hidden] {
  display: none;
}

.documentDropZone { position: relative; transition: border-color 120ms ease, background 120ms ease; }
.dropPrompt { display: inline-flex; align-items: center; min-height: 20px; color: var(--muted); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.dropPrompt strong { color: var(--textSubtle); }
.touchDropPrompt { display: none; }
.documentDropZone.fileDragOver { border-color: var(--jade); background: var(--panelStrong); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jade) 22%, transparent); }
.dropOverlay { position: absolute; inset: 6px; z-index: 2; display: none; place-items: center; border: 2px dashed var(--jade); border-radius: 6px; background: color-mix(in srgb, var(--panel) 96%, transparent); color: var(--jade); font-size: 12px; font-weight: 800; pointer-events: none; }
.projectDocuments.fileDragOver .dropOverlay { display: grid; }

@media (hover: none), (pointer: coarse) {
  .desktopDropPrompt { display: none; }
  .touchDropPrompt { display: inline; }
}

.attachmentList {
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.documentChip {
  min-width: 0;
  max-width: 240px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--textSubtle);
  font-size: 11px;
}

.documentType {
  color: var(--jade);
  font-size: 9px;
  font-weight: 800;
}

.documentName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documentPartial {
  color: var(--amber);
  font-size: 9px;
  font-weight: 750;
}

.documentReady {
  color: var(--jade);
  font-size: 9px;
  font-weight: 750;
}

.documentChip button {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.documentChip button:hover {
  background: var(--panelStrong);
  color: var(--ink);
}

.documentMaintenanceMenu {
  position: relative;
  flex: 0 0 23px;
}

.documentMaintenanceMenu > summary {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  list-style: none;
}

.documentMaintenanceMenu > summary::-webkit-details-marker { display: none; }
.documentMaintenanceMenu > summary:hover { background: var(--panelStrong); color: var(--ink); }

.documentMaintenanceMenu > div {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  right: 0;
  width: 218px;
  padding: 8px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 12px 30px var(--shadowColor);
}

.documentChip .documentMaintenanceMenu button {
  width: 100%;
  height: auto;
  min-height: 32px;
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--lineStrong);
  color: var(--jade);
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
}

.documentMaintenanceMenu small {
  display: block;
  padding: 6px 3px 1px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.matterDocumentChip { border-color: var(--lineStrong); background: var(--panelStrong); }
.documentSource { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }

.attachButton {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--jadeDark) !important;
  border-radius: 6px;
  background: var(--jadeDark) !important;
  color: var(--onJade) !important;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.attachButton:hover {
  border-color: var(--jadeDark) !important;
  background: var(--jadeDark) !important;
}

.documentInput {
  display: none;
}

.composerMain {
  min-width: 0;
  /* One comfortable line of input (40px, see `.composer textarea`) plus this
     row's 14px vertical padding. The old 88px floor stretched the auto-sized
     grid row to 60px, leaving a band of dead white space under the placeholder.
     Typing still grows the row: autoSizePrompt() sets an explicit height up to
     the textarea's 180px cap and the row follows it. */
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.composerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  gap: 8px;
}

.composer button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}

.sendButton {
  min-width: 38px;
  /* Same control height as the composer toolbar buttons (.attachButton). */
  min-height: 34px;
  display: grid;
  place-items: center;
}

.composer textarea {
  width: 100%;
  resize: none;
  border: 0;
  outline: 0;
  /* Resting height of a single line: 14px * 1.45 line-height = 20.3px of text
     plus the 14px vertical padding = ~35px, rounded up to 40px so descenders
     and the focus ring clear comfortably. Auto-grow up to max-height is
     unaffected -- autoSizePrompt() writes an explicit height from scrollHeight. */
  min-height: 40px;
  max-height: 180px;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 0;
  background: var(--inputBg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.composer:focus-within {
  border-color: var(--jade);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 18%, transparent), 0 18px 45px var(--shadowColor);
}

.composer textarea::placeholder {
  color: var(--muted);
}

.sendButton {
  width: auto;
  min-width: 74px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 750;
  background: var(--jadeDark) !important;
  color: var(--onJade) !important;
  border-color: var(--jadeDark) !important;
}

.sendButton:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.cancelRequestButton {
  min-height: 38px;
  padding: 0 12px;
  border-color: var(--lineStrong) !important;
  background: var(--surface) !important;
  color: var(--textSubtle) !important;
  font-weight: 750;
}

.cancelRequestButton:hover,
.cancelRequestButton:focus-visible {
  border-color: var(--lineStrong) !important;
  background: var(--panelStrong) !important;
}

.statusRow {
  min-height: 24px;
  width: min(calc(100% - 48px), 960px);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

/* "Save query as prompt" lives in the existing status row rather than in a new button
   row, because the composer stack is already visually tight. */
/* Both composer prompt actions sit together at the end of the status row, so the
   auto margin belongs to the group rather than to each button. */
.composerPromptActions {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}

.savePromptButton {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jade);
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.savePromptButton:hover:not(:disabled) { color: var(--jade); }

.savePromptButton:disabled {
  color: var(--muted);
  text-decoration: none;
  cursor: not-allowed;
  opacity: .7;
}

.statusRow > span {
  margin-left: 0;
}

.statusRow > span:last-child {
  margin-left: auto;
}

.composerStatusLeft { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--textSubtle); font-weight: 700; }
.composerStatusLeft p:empty { display: none; }

.documentNotice {
  margin: 0;
  color: var(--jade);
  font-weight: 650;
}

.readOnlyComposer {
  margin: 0 30px 22px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}

.lockMark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.readOnlyComposer strong {
  display: block;
  font-size: 13px;
}

.readOnlyComposer p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.userControls,
.identityBadge {
  display: flex;
  align-items: center;
}

.userControls {
  min-height: 34px;
  gap: 7px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.organizationSwitcher select {
  max-width: 180px;
  height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.identityBadge {
  min-width: 0;
  gap: 8px;
  padding-right: 3px;
}

.userAvatar,
.directoryAvatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--panelStrong);
  color: var(--jade);
  font-weight: 800;
}

.userAvatar {
  width: 30px;
  height: 30px;
  font-size: 10px;
}

.identityText {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.identityText strong {
  max-width: 140px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trainingNotice {
  color: var(--amber);
}

.headerTrainingToggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
}

.headerTrainingToggle > span:last-child {
  display: inline-flex;
  gap: 4px;
}

.headerTrainingToggle strong {
  color: var(--ink);
  font-size: inherit;
}

.headerTrainingToggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggleTrack {
  width: 30px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--lineStrong);
  border-radius: 9px;
  background: var(--panelStrong);
  transition: background 150ms ease, border-color 150ms ease;
}

.toggleTrack i {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadowColor);
  transition: transform 150ms ease;
}

.headerTrainingToggle input:checked + .toggleTrack {
  border-color: var(--jade);
  background: var(--jadeDark);
}

.headerTrainingToggle input:checked + .toggleTrack i {
  transform: translateX(12px);
}

.headerTrainingToggle input:focus-visible + .toggleTrack {
  outline: 3px solid var(--jade);
  outline-offset: 2px;
}

.trainingControlError {
  color: var(--statusDanger);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.mobileAccountMenu {
  display: none;
  position: relative;
}

.mobileAccountMenu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--jade);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.mobileAccountMenu summary::-webkit-details-marker { display: none; }

.mobileAccountMenu > div {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 10px 24px var(--shadowColor);
}

.mobileAccountMenu button {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mobileAccountMenu button:hover,
.mobileAccountMenu button:focus-visible { background: var(--panelStrong); }

.headerTrainingToggle:has(input:disabled) {
  cursor: wait;
  opacity: .62;
}

.trainingExercises {
  width: min(calc(100% - 46px), 914px);
  margin: 0 auto;
  padding-left: 46px;
}

.trainingExercises header {
  margin-bottom: 12px;
}

.trainingExercises header > span {
  color: var(--jade);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.trainingExercises h2 {
  margin-top: 3px;
  font-size: 16px;
}

.trainingExercises header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.trainingExercises > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.trainingExercises button {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.trainingExercises button:hover,
.trainingExercises button:focus-visible {
  border-color: var(--lineStrong);
  background: var(--panel);
}

.trainingExercises button small {
  color: var(--jade);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.trainingExercises button strong {
  font-size: 13px;
}

.trainingExercises button span {
  color: var(--muted);
  font-size: 11px;
}

.identityText small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.quietButton,
.drawerClose {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--textSubtle);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.iconCloseButton {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  /* Stated rather than left to the user agent: with `color-scheme: dark` the
     default button chrome is a light grey plate, which strands this control on
     an otherwise dark dialog header. These values match the light-mode default
     it used to inherit. */
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.confirmClear {
  border-color: var(--statusDanger);
  color: var(--statusDanger);
}

.mobileLabel {
  display: none;
}

.quietButton:hover,
.drawerClose:hover {
  border-color: var(--lineStrong);
  background: var(--panel);
}

.quietButton:disabled,
.drawerClose:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dangerText {
  color: var(--statusDanger);
}

.primaryButton {
  min-height: 42px;
  border: 1px solid var(--jadeDark);
  border-radius: 7px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-weight: 760;
  cursor: pointer;
}

.primaryButton:hover {
  background: var(--jadeDark);
}

.formError,
.formNotice {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.4;
}

.formError {
  color: var(--statusDanger);
}

.formNotice {
  color: var(--jade);
}

.authScreen,
.loginScreen {
  min-height: 100svh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 20%, transparent), var(--panel) 420px),
    var(--panel);
  color: var(--ink);
}

.authScreen {
  display: grid;
  place-items: center;
}

.authLoading {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.authBrandMark {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 14px 30px var(--shadowColor);
}

.authBrandLogo,
.loginBrandLogo {
  display: block;
  object-fit: contain;
  object-position: left center;
}

.authBrandLogo {
  width: min(248px, 72vw);
  height: 62px;
}

.loginBrandLogo {
  width: min(330px, 84vw);
  max-width: 100%;
  height: 80px;
}

.loginScreen {
  padding: 30px 22px 44px;
}

.loginBrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.loginBrand > span:last-child {
  display: grid;
  gap: 2px;
}

.loginBrand strong {
  font-size: 16px;
  line-height: 1.2;
}

.loginBrand small {
  color: var(--muted);
  font-size: 11px;
}

.loginFrame {
  width: min(100%, 410px);
  display: grid;
  gap: 18px;
  margin: 0 auto;
}

.loginFrameSite {
  width: min(100%, 1180px);
  gap: 38px;
}

.publicNav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px;
}

.publicNav .loginBrandLogo {
  width: min(300px, 52vw);
  height: 74px;
}

.publicNav nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.publicNav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--textSubtle);
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.publicNav a:hover,
.publicNav a:focus-visible {
  background: var(--panelStrong);
  color: var(--jade);
}

.publicNav a.navTrialButton {
  border: 1px solid var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
}

.publicNav a.navTrialButton:hover,
.publicNav a.navTrialButton:focus-visible {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
}

.siteHero {
  width: 100vw;
  min-height: clamp(560px, 72svh, 720px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: flex-end;
  padding:
    clamp(30px, 5vw, 62px)
    max(22px, calc((100vw - 1180px) / 2));
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(90deg,
      rgba(11, 30, 34, calc(0.9 + var(--heroVeil))),
      rgba(11, 30, 34, calc(0.66 + var(--heroVeil))) 48%,
      rgba(11, 30, 34, calc(0.2 + var(--heroVeil)))),
    url('/assets/hk-legal-library.png') center / cover no-repeat;
  box-shadow: 0 30px 82px var(--shadowColor);
}

.siteHeroCopy {
  display: grid;
  gap: 20px;
  max-width: 760px;
}

.siteEyebrow {
  width: max-content;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  color: var(--jade);
  background: var(--surface);
  font-size: 12px;
  font-weight: 840;
  text-transform: uppercase;
}

.siteHeroCopy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--onJade);
  font-size: clamp(46px, 6.4vw, 82px);
  line-height: 0.98;
  text-wrap: balance;
}

.siteLead {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.65;
}

.siteHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.siteHeroActions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 7px;
  color: var(--onJade);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(12px);
}

.siteHeroActions a:first-child {
  border-color: var(--onJade);
  background: var(--onJade);
  color: var(--jadeDark);
}

.siteTrustList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.siteTrustList li {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 760;
  backdrop-filter: blur(10px);
}

.productStudio {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(26px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}

.productStudio h2,
.librarySection h2 {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  text-wrap: balance;
}

.productStudio p:not(.siteEyebrow),
.librarySection p:not(.siteEyebrow) {
  max-width: 580px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.landingPreview {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 74px var(--shadowColor);
}

.previewToolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.previewToolbar span,
.previewGrid small,
.previewDocument small {
  color: var(--muted);
  font-size: 11px;
}

.previewToolbar strong {
  max-width: 210px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-align: right;
}

.previewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.previewGrid div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.previewGrid strong,
.previewGrid small {
  display: block;
}

.previewGrid strong {
  margin-top: 3px;
  font-size: 13px;
}

.previewDocument {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.previewDocument > span {
  flex: 0 0 46px;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--jadeDark);
  color: var(--onJade);
  font-size: 10px;
  font-weight: 900;
}

.previewDocument p,
.previewAuthorities p {
  margin: 0;
}

.previewDocument strong,
.previewDocument small {
  display: block;
}

.previewAuthorities {
  display: grid;
  gap: 8px;
}

.previewAuthorities p {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.previewAuthorities span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--brass);
}

.previewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.previewActions span {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--panelStrong);
  color: var(--jade);
  font-size: 11px;
  font-weight: 800;
}

.loginPanel {
  display: block;
}

.loginForm,
.trialForm {
  width: 100%;
  display: grid;
  gap: 17px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 46px var(--shadowColor);
}

.loginFrameSite .loginForm,
.loginFrameSite .trialForm {
  padding: 30px;
}

.landingAccess {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--panel) 84%, transparent)),
    var(--surface);
  box-shadow: 0 18px 54px var(--shadowColor);
}

.loginAccess {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
}

.landingAccess h2,
.workflowSection h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}

.landingAccess p:not(.siteEyebrow) {
  max-width: 600px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.loginFormHeader {
  margin-bottom: 4px;
}

.loginFormHeader p {
  color: var(--jade);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.loginFormHeader h1,
.loginFormHeader h2 {
  margin-top: 7px;
  font-size: 23px;
  line-height: 1.2;
}

.loginFormHeader h2 {
  margin-bottom: 0;
}

.loginFormHeader span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.trialFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.trialTerms {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.45;
}

.trialTerms input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--jade);
}

.siteCapabilityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.siteCapabilityGrid article,
.siteAssurance div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.siteCapabilityGrid article {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
}

.siteCapabilityGrid span {
  color: var(--brass);
  font-size: 12px;
  font-weight: 900;
}

.siteCapabilityGrid h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.siteCapabilityGrid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.librarySection {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.librarySection img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: cover;
}

.librarySection > div {
  display: grid;
  align-content: center;
  padding: clamp(26px, 4vw, 52px);
}

.workflowSection {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: start;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panelStrong);
}

.workflowSection ol {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  list-style: none;
}

.workflowSection li {
  display: grid;
  gap: 5px;
  padding: 17px;
  background: var(--surface);
}

.workflowSection strong {
  color: var(--ink);
  font-size: 14px;
}

.workflowSection span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.siteAssurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.siteAssurance div {
  display: grid;
  gap: 5px;
  padding: 17px 18px;
  border: 0;
  border-radius: 0;
}

.siteAssurance strong {
  color: var(--ink);
  font-size: 13px;
}

.siteAssurance span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.loginFootnote {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.loginForm label,
.trialForm label:not(.trialTerms),
.createUserForm label {
  display: grid;
  gap: 6px;
  color: var(--textSubtle);
  font-size: 12px;
  font-weight: 720;
}

.loginForm input,
.trialForm input,
.trialForm select,
.createUserForm input,
.createUserForm select,
.userActions select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--inputBg);
  color: var(--ink);
  padding: 0 11px;
  font-size: 13px;
}

.loginForm input:focus,
.trialForm input:focus,
.trialForm select:focus,
.createUserForm input:focus,
.createUserForm select:focus,
.userActions select:focus {
  border-color: var(--jade);
  outline: 2px solid color-mix(in srgb, var(--jade) 17%, transparent);
  outline-offset: 1px;
}

.accessDrawer {
  position: fixed;
  z-index: 40;
  inset: 0 0 0 auto;
  width: min(560px, 96vw);
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--panel);
  border-left: 1px solid var(--lineStrong);
  box-shadow: -20px 0 55px var(--shadowColor);
}

.accessTabs { display: flex; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.accessTabs button { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.accessTabs button[aria-selected="true"] { border-bottom-color: var(--jade); color: var(--jade); }
.organizationOverview { display: grid; gap: 24px; }
.orgIdentity { display: flex; align-items: center; gap: 13px; }
.orgIdentity h3 { font-size: 17px; }
.orgIdentity p { margin-top: 3px; color: var(--muted); font-size: 12px; text-transform: capitalize; }
.orgMonogram { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: var(--panelStrong); color: var(--jade); font-size: 13px; font-weight: 800; }
.orgLogo { width: 72px; height: 48px; object-fit: contain; object-position: left center; }
.orgMetrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.orgMetrics div { min-width: 0; padding: 15px; border-bottom: 1px solid var(--line); }
.orgMetrics div:nth-child(odd) { border-right: 1px solid var(--line); }
.orgMetrics span, .orgMetrics strong { display: block; overflow-wrap: anywhere; }
.orgMetrics span { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.orgMetrics strong { margin-top: 5px; font-size: 15px; }
.firmProfile { display: grid; gap: 17px; padding-top: 20px; border-top: 1px solid var(--line); }
.firmProfile .sectionHeading h3 { font-size: 14px; }
.firmProfile .sectionHeading p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.firmLogoEditor { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.firmLogoEditor > div { width: 54px; height: 42px; display: grid; place-items: center; }
.firmLogoEditor img { max-width: 54px; max-height: 42px; object-fit: contain; }
.firmLogoEditor > span { min-width: 0; }
.firmLogoEditor strong, .firmLogoEditor small { display: block; }
.firmLogoEditor strong { font-size: 12px; }
.firmLogoEditor small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.firmLogoEditor button { min-height: 34px; padding: 6px 9px; font-size: 11px; }
.firmProfileForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.firmProfileForm label { display: grid; gap: 6px; min-width: 0; }
.firmProfileForm label > span { font-size: 11px; font-weight: 750; color: var(--inkSoft); }
.firmProfileForm input, .firmProfileForm textarea { width: 100%; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--inputBg); padding: 10px 11px; color: var(--ink); font: inherit; font-size: 12px; resize: vertical; }
.firmProfileForm input:focus, .firmProfileForm textarea:focus { outline: 2px solid color-mix(in srgb, var(--jade) 22%, transparent); border-color: var(--jade); }
.firmProfileWide, .firmProfileActions { grid-column: 1 / -1; }
.firmProfileActions { display: flex; justify-content: flex-end; }
.firmProfileActions .primaryButton { min-height: 38px; }
.roleGuide { padding-top: 20px; border-top: 1px solid var(--line); }
.roleGuide h3 { font-size: 14px; }
.roleGuide dl { display: grid; gap: 12px; margin-top: 13px; }
.roleGuide dl div { display: grid; gap: 3px; }
.roleGuide dt { font-size: 12px; font-weight: 750; }
.roleGuide dd { color: var(--muted); font-size: 12px; line-height: 1.45; }
.firmAdministration { display: grid; gap: 20px; }
.createFirmForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.createFirmForm label { display: grid; gap: 6px; min-width: 0; }
.createFirmForm label > span { color: var(--inkSoft); font-size: 11px; font-weight: 750; }
.createFirmForm input { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 12px; }
.createFirmForm .primaryButton { grid-column: 1 / -1; justify-self: end; min-width: 130px; }
.firmDirectory { display: grid; gap: 10px; }
.firmDirectoryRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.firmDirectoryRow strong, .firmDirectoryRow small, .firmOwners span { display: block; overflow-wrap: anywhere; }
.firmDirectoryRow > div > strong { font-size: 13px; }
.firmDirectoryRow small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.firmOwners { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
.firmOwners span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.firmOwners strong { margin-top: 4px; font-size: 12px; }

@media (max-width: 560px) {
  .firmLogoEditor { grid-template-columns: 48px minmax(0, 1fr); }
  .firmLogoEditor button { grid-column: auto; }
  .firmProfileForm { grid-template-columns: 1fr; }
  .firmProfileWide, .firmProfileActions { grid-column: 1; }
  .createFirmForm { grid-template-columns: 1fr; }
  .createFirmForm .primaryButton { grid-column: 1; width: 100%; }
}

.accessHeader {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.accessHeader p {
  color: var(--jade);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.accessHeader h2 {
  margin-top: 4px;
  font-size: 20px;
}

.accessBody {
  overflow: auto;
  padding: 22px;
}

/* Administration panels render at two very different widths: the ~560px
   organisation-settings drawer and the full-width platform console. Both bodies are
   query containers so the panels inside them (notably .libraryAdmin) answer to the
   space they actually have rather than to the viewport. Both already establish an
   independent formatting context via overflow: auto, and every dialog and scrim is
   rendered as a sibling of these bodies, so the layout containment that
   container-type implies traps nothing. */
.accessBody,
.platformAdminBody {
  container-type: inline-size;
  container-name: adminPanel;
}

.createUserSection,
.userDirectory {
  display: grid;
  gap: 15px;
}

.userDirectory {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.sectionHeading h3 {
  font-size: 14px;
}

.sectionHeading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.directoryHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.createUserForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.createUserForm .primaryButton {
  align-self: end;
}

.accessFeedback:empty {
  display: none;
}

.directoryState {
  min-height: 150px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed var(--lineStrong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.directoryState strong {
  color: var(--ink);
  font-size: 13px;
}

.directoryState p {
  font-size: 12px;
}

.loadingLine {
  width: 180px;
  height: 8px;
  border-radius: 4px;
  background: var(--panelStrong);
  animation: loadingPulse 1.1s ease-in-out infinite alternate;
}

.loadingLine.short {
  width: 126px;
}

@keyframes loadingPulse {
  to { opacity: 0.42; }
}

.userList {
  display: grid;
  gap: 8px;
}

.userRow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.directoryAvatar {
  width: 36px;
  height: 36px;
  font-size: 11px;
}

.userSummary {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.userSummary strong,
.userSummary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userSummary strong {
  font-size: 13px;
}

.userSummary span {
  color: var(--muted);
  font-size: 11px;
}

.statusLabel {
  width: max-content;
  margin-top: 3px;
  color: var(--jade);
  font-size: 10px;
  font-weight: 800;
}

.statusLabel.disabled {
  color: var(--statusDanger);
}

.userActions {
  display: flex;
  align-items: center;
  gap: 7px;
}


.userActions select {
  min-height: 34px;
  width: 132px;
  padding-right: 5px;
  font-size: 11px;
}

.noticeText {
  color: var(--muted);
}

.errorText {
  color: var(--statusDanger);
}

.emptyPanel {
  padding: 11px;
  border: 1px dashed var(--lineStrong);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rightPanel {
  min-width: 0;
  max-width: 100vw;
  border-left: 1px solid var(--line);
  padding: 22px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rightPanel > *,
.rightPanel .panelSection,
.rightPanel .artifactList,
.rightPanel .artifactList article,
.rightPanel .citationItem,
.rightPanel .limitationList,
.rightPanel .limitationList li {
  min-width: 0;
  max-width: 100%;
}

.rightPanel p,
.rightPanel li,
.rightPanel dd,
.rightPanel strong,
.rightPanel small {
  overflow-wrap: anywhere;
}

.panelMobileHeader {
  position: sticky;
  z-index: 2;
  top: -22px;
  margin: -22px -18px 0;
  padding: 14px 18px;
  background: var(--sideRail);
}

.panelMobileHeader > span {
  display: grid;
  gap: 2px;
}

.panelMobileHeader small {
  color: var(--muted);
  font-size: 11px;
}

.panelMobileHeader .panelCloseButton {
  min-width: max-content;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--lineStrong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--textSubtle);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.panelMobileHeader .panelCloseButton:hover {
  border-color: var(--lineStrong);
  background: var(--panel);
  color: var(--jade);
}

.panelMobileHeader .panelCloseButton:focus-visible {
  outline: 3px solid var(--focusRing);
  outline-offset: 2px;
}

.practitionerWorkspace {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.practitionerTabs {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--lineStrong);
  scrollbar-width: thin;
}

.practitionerTabs button {
  min-height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 740;
  cursor: pointer;
}

.practitionerTabs button small {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 10px;
  background: var(--panelStrong);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
}

.practitionerTabs button:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink); }
.practitionerTabs button[aria-selected="true"] { border-color: var(--lineStrong); background: var(--surface); color: var(--jade); }
.practitionerTabs button[aria-selected="true"] small { background: var(--panelStrong); color: var(--jade); }
.practitionerTabs button:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 1px; }

.practitionerTabPanel {
  min-width: 0;
  display: grid;
  gap: 20px;
  outline: none;
}

.practitionerTabPanel:focus-visible {
  border-radius: 7px;
  outline: 3px solid var(--focusRing);
  outline-offset: 4px;
}

.practitionerEmptyState {
  justify-items: start;
  padding: 18px;
  border: 1px dashed var(--lineStrong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.practitionerEmptyState .emptyStateIcon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--panelStrong);
  color: var(--jade);
  font-weight: 800;
}

.practitionerEmptyState p,
.practitionerEmptyState small { margin: 0; color: var(--muted); }
.documentCoverageList { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.documentCoverageList li { color: var(--muted); }

.panelSection {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 10px;
}

.panelSection h2 {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

.panelSectionHeading,
.authorityEditorHeading,
.citationTitle,
.citationActions,
.authorityEditorActions,
.authorityHeaderActions {
  display: flex;
  align-items: center;
}

.panelSectionHeading { min-width: 0; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.panelSectionHeading > div:first-child { min-width: 0; display: grid; gap: 2px; }
.panelSectionHeading small { color: var(--muted); font-size: 10px; }
.authorityHeaderActions { flex: 0 1 auto; flex-wrap: wrap; gap: 4px; }

.panelTextButton,
.panelAddButton {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--textSubtle);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.panelTextButton:hover,
.panelAddButton:hover { background: var(--panelStrong); border-color: var(--line); }
.authorityError:empty { display: none; }
.authorityError { color: var(--statusDanger); font-size: 11px; }

.citationItem {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
}

.citationItem {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
}

.citationBadge {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--panelStrong);
  color: var(--jade);
  font-size: 10px;
  font-weight: 800;
}

.citationBody { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.propositionEvidence { overflow: hidden; }
.propositionEvidence label,
.propositionEvidence select { min-width: 0; max-width: 100%; width: 100%; }
.propositionEvidence select { min-height: 40px; padding: 7px 9px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--inputBg); color: var(--ink); font: inherit; text-overflow: ellipsis; }
.propositionEvidence > p { min-width: 0; overflow-wrap: break-word; }
.propositionCitation .citationBody > strong { word-break: normal; overflow-wrap: break-word; }
.citationTitle { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.citationTitle strong { min-width: 0; overflow-wrap: anywhere; }
.verificationBadge { flex: 0 0 auto; color: var(--amber); font-size: 9px; font-weight: 800; }
.verificationBadge.verified { color: var(--jade); }
.verifiedCitation { border-color: var(--lineStrong); background: var(--panel); }

.citationActions {
  grid-column: 2;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.citationActions button,
.citationActions a {
  padding: 3px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--textSubtle);
  font-size: 9px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.citationActions button:hover,
.citationActions a:hover { background: var(--panelStrong); }

.authorityEditor {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--lineStrong);
  border-radius: 8px;
  background: var(--panel);
}

.authorityEditorHeading { justify-content: space-between; }
.authorityEditorHeading > button { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.authorityEditor label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.authorityEditor input,
.authorityEditor select,
.authorityEditor textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--lineStrong);
  border-radius: 5px;
  background: var(--inputBg);
  color: var(--ink);
  font-size: 11px;
  resize: vertical;
}

.authorityEditorGrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.authorityEditorActions { justify-content: flex-end; gap: 6px; }
.authorityEditorActions button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 10px; cursor: pointer; }
.authorityEditorActions .primaryButton { background: var(--jadeDark); border-color: var(--jadeDark); color: var(--onJade); }

.unlinkedCitation {
  color: inherit;
}

.citationItem svg {
  color: var(--jade);
}

.citationItem span {
  display: grid;
  gap: 3px;
}

.citationItem strong {
  font-size: 13px;
  line-height: 1.25;
}

.citationItem em {
  color: var(--statusDanger);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.limitationList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.limitationList li {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px;
  border: 1px solid var(--brass);
  border-radius: 8px;
  background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface));
  color: var(--amber);
  font-size: 12px;
  line-height: 1.42;
}

.spin {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1360px) {
  .appShell {
    grid-template-columns: 246px minmax(0, 1fr);
  }

  .appShell.singleChatShell {
    grid-template-columns: clamp(320px, var(--history-width, 360px), min(42vw, 560px)) minmax(0, 1fr);
  }

  .rightPanel {
    position: fixed;
    z-index: 30;
    inset: 0 0 0 auto;
    width: clamp(300px, var(--sources-width, 390px), 70vw);
    height: 100svh;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 180ms ease;
    box-shadow: -18px 0 48px var(--shadowColor);
  }

  .rightPanel.mobileOpen {
    transform: translateX(0);
    visibility: visible;
  }

  .mobileTopActions,
  .panelMobileHeader {
    display: flex;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbarActions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .sidebar .panelMobileHeader {
    display: none !important;
  }

  .mobileTopActions {
    margin-left: auto;
    align-items: center;
    gap: 8px;
  }

  .mobileTopActions button,
  .panelMobileHeader button:not(.panelCloseButton) {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--lineStrong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .panelMobileHeader {
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .panelScrim {
    position: fixed;
    z-index: 25;
    inset: 0;
    border: 0;
    background: var(--scrim);
  }

  .panelOpen .panelScrim {
    display: block;
  }
}

@media (min-width: 1101px) {
  .appShell.singleChatShell.sourcesOpen {
    grid-template-columns:
      clamp(320px, var(--history-width, 360px), min(42vw, 560px))
      minmax(0, 1fr)
      clamp(300px, var(--sources-width, 390px), min(50vw, 700px));
  }

  .singleChatShell.sourcesOpen .rightPanel {
    position: relative;
    grid-column: 3;
    inset: auto;
    width: auto;
    height: 100svh;
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }
}

@media (min-width: 781px) and (max-width: 1100px) {
  .singleChatShell .rightPanel {
    width: min(var(--sources-width, 390px), 70vw, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 780px) {
  .citationActions { gap: 6px; }
  .citationActions button, .citationActions a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 10px; font-size: 11px; }
  .panelResizeHandle,
  .sidebarCollapseButton {
    display: none;
  }
  .appShell {
    display: block;
    height: 100svh;
    overflow: hidden;
  }

  .workspace {
    width: 100%;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: min(330px, 90vw);
    height: 100svh;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 180ms ease;
    box-shadow: 18px 0 48px var(--shadowColor);
  }

  .sidebar.mobileOpen {
    transform: translateX(0);
    visibility: visible;
  }

  .singleChatShell .rightPanel {
    width: min(94vw, 620px);
    max-width: 94vw;
  }

  .sidebar .panelMobileHeader {
    display: flex !important;
  }

  .historyRow > .itemMenuButton {
    opacity: 1;
  }

  .topbar,
  .noticeRail {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar,
  .topbarActions {
    align-items: stretch;
  }

  .userControls {
    width: auto;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border-top: 0;
    border-left: 0;
  }

  .desktopAccountAction {
    display: none;
  }

  .mobileAccountMenu {
    display: block;
  }

  .identityBadge {
    display: none;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: auto;
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .workspaceHeading {
    align-items: center;
    gap: 10px;
  }

  .historyToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .compactBrand {
    padding-right: 12px;
  }

  .compactBrand .brandMeta {
    display: none;
  }

  .compactBrand .brandMark {
    width: 34px;
    height: 34px;
  }

  .matterLine {
    display: none;
  }

  .topbarActions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modeMenu { display: block; }
  .analysisTypeControl { display: flex; }
  .analysisTypeLabel { display: none; }

  .userControls .quietButton { min-width: 44px; padding: 0 8px; font-size: 12px; }
  #openAccess::after,
  #logoutButton::after { content: none; }
  .titleBlock h1 { font-size: 17px; }

  .titleBlock h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .practitionerContextLine {
    overflow: hidden;
    max-width: min(64vw, 430px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quietButton,
  .drawerClose,
  .sendButton,
  .answerFooter button {
    min-height: 44px;
  }

  .desktopLabel {
    display: none;
  }

  .historyRow[draggable="true"] {
    cursor: default;
  }

  .mobileLabel {
    display: inline;
  }

  .noticeRail {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .noticeRail .libraryStatus,
  .noticeRail .inheritedContextNotice ~ .libraryStatus {
    display: none;
  }

  .noticeRail div {
    display: block;
    font-size: 12px;
  }

  .chatArea {
    padding: 16px 14px 20px;
    gap: 14px;
  }

  .message,
  .message.user {
    grid-template-columns: 30px minmax(0, 1fr);
    justify-content: stretch;
  }

  .message.user .messageAvatar {
    grid-column: 1;
  }

  .message.user .messageBubble {
    grid-column: 2;
  }

  .composer {
    width: calc(100% - 28px);
    margin: 0 auto 6px;
    min-height: 100px;
  }

  .composerContext {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    gap: 8px;
    min-height: 42px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .matterContextSummary { grid-column: 1 / -1; }

  .composerContext input {
    height: 34px;
  }

  .attachmentBar {
    padding-left: 8px;
  }

  .attachmentViewport {
    max-height: 156px;
  }

  .documentChip {
    max-width: 180px;
  }

  .composerActions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .cancelRequestButton,
  .sendButton {
    min-height: 44px;
  }

  .readOnlyComposer {
    margin: 0 18px 16px;
  }

  .promptStarters {
    /* Narrow layout trims the card padding to 8px/11px, so the clamped card
       is correspondingly shorter than on the wide layout. */
    --starterCardHeight: calc(16px + 2px + 14.3px + 10px + 36px);
    width: 100%;
    margin: 0;
    padding-left: 42px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .promptStarters button {
    min-height: 56px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .trainingExercises {
    width: 100%;
    padding-left: 42px;
  }

  .trainingExercises > div {
    grid-template-columns: 1fr;
  }

  .statusRow {
    min-height: 18px;
    width: calc(100% - 28px);
    margin: 0 auto 5px;
  }

  .statusRow > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .composer textarea {
    min-height: 40px;
  }

  .messageMeta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .messageContent {
    font-size: 15px;
  }

  .answerFooter {
    align-items: flex-start;
    flex-direction: column;
  }

  .answerActions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .answerActions button {
    flex: 1 1 auto;
  }

  .answerActions details { flex: 1 1 auto; }
  .answerActions details > summary { justify-content: center; }
  .processingStages { grid-template-columns: 1fr; }

  .noticeRail .roleNotice {
    margin-left: 0;
  }

  .loginScreen {
    padding: 28px 14px;
  }

  .loginFrameSite {
    gap: 24px;
  }

  .publicNav {
    min-height: auto;
    justify-content: center;
  }

  .publicNav .loginBrandLogo {
    width: min(330px, 90vw);
    height: 80px;
  }

  .publicNav nav {
    display: none;
  }

  .siteHero {
    min-height: auto;
    align-items: flex-end;
    padding: 26px 14px;
    background:
      linear-gradient(180deg,
        rgba(11, 30, 34, calc(0.9 + var(--heroVeil))),
        rgba(11, 30, 34, calc(0.72 + var(--heroVeil)))),
      url('/assets/hk-legal-library.png') center / cover no-repeat;
  }

  .siteHeroCopy {
    justify-items: center;
    text-align: center;
  }

  .siteHeroCopy h1 {
    font-size: 37px;
  }

  .siteLead {
    font-size: 15px;
  }

  .siteHeroActions {
    justify-content: center;
  }

  .siteHeroActions a {
    flex: 1 1 150px;
  }

  .siteCapabilityGrid,
  .siteAssurance,
  .landingAccess,
  .workflowSection,
  .productStudio,
  .librarySection {
    grid-template-columns: 1fr;
  }

  .landingAccess,
  .workflowSection {
    padding: 20px;
  }

  .productStudio {
    gap: 20px;
    padding: 8px 0 18px;
  }

  .productStudio > div:first-child,
  .librarySection > div {
    text-align: left;
  }

  .productStudio h2,
  .librarySection h2 {
    font-size: 30px;
  }

  .librarySection {
    min-height: 0;
  }

  .librarySection img {
    min-height: 220px;
  }

  .landingPreview {
    padding: 18px;
  }

  .previewToolbar {
    display: grid;
  }

  .previewToolbar strong {
    max-width: none;
    text-align: left;
  }

  .trialFormGrid {
    grid-template-columns: 1fr;
  }

  .loginForm,
  .trialForm {
    padding: 24px;
  }

  .accessDrawer {
    width: 100vw;
  }

  .accessHeader,
  .accessBody {
    padding-left: 18px;
    padding-right: 18px;
  }

  .createUserForm {
    grid-template-columns: 1fr;
  }

  .userRow {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .userActions {
    grid-column: 1 / -1;
    padding-top: 9px;
    border-top: 1px solid var(--line);
  }

  .userActions label {
    flex: 1;
  }

  .userActions select {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspaceHeading {
    grid-column: 1;
    grid-row: 1;
  }

  .topbarActions {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-end;
  }

  .userControls {
    width: 100%;
    justify-content: flex-end;
  }

  .compactBrand > div {
    display: none;
  }

  .compactBrand {
    padding-right: 10px;
  }
}

@media (min-width: 781px) and (max-width: 1080px) {
  .identityText {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.desktopApp body {
  overscroll-behavior: none;
  user-select: none;
}

.desktopApp input,
.desktopApp textarea,
.desktopApp .messageContent,
.desktopApp .citationItem {
  user-select: text;
}

.desktopApp .appShell,
.desktopApp .workspace,
.desktopApp .sidebar,
.desktopApp .rightPanel {
  height: 100vh;
}

/* Dedicated authentication workspace */
.loginPortal {
  min-height: 100svh;
  padding: 0;
  background: var(--panelStrong);
}

.loginPortalFrame {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(480px, 1.08fr);
}

.loginPortalVisual {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: clamp(34px, 5vw, 68px);
  overflow: hidden;
  color: var(--onJade);
  background:
    linear-gradient(180deg,
      rgba(8, 39, 43, calc(.74 + var(--heroVeil))),
      rgba(8, 39, 43, calc(.94 + var(--heroVeil)))),
    url('/assets/hk-legal-library.png') center / cover no-repeat;
}

.loginPortalLogo {
  width: min(250px, 70%);
  height: auto;
  padding: 12px 16px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
}

.loginPortalCopy {
  max-width: 580px;
  display: grid;
  gap: 15px;
  margin-block: auto;
}

.loginPortalCopy p,
.loginPortalCopy h1,
.loginPortalCopy span { margin: 0; }
.loginPortalCopy p { color: var(--onJade); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.loginPortalCopy h1 { max-width: 12ch; color: var(--onJade); font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
.loginPortalCopy span { max-width: 52ch; color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.6; }

.loginPortalAssurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  background: rgba(255, 255, 255, .2);
  list-style: none;
}

.loginPortalAssurance li { min-width: 0; display: grid; align-content: start; gap: 5px; padding: 14px; background: rgba(6, 35, 39, .66); }
.loginPortalAssurance strong { color: var(--onJade); font-size: 12px; }
.loginPortalAssurance span { color: rgba(255, 255, 255, .7); font-size: 10px; line-height: 1.45; }

.loginPortalAccess {
  min-width: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(30px, 6vw, 84px);
  background: var(--panel);
}

.loginPortalAccessInner { width: min(100%, 430px); display: grid; gap: 24px; margin: auto; }
.loginPortalMobileLogo { display: none; width: 190px; height: auto; }
.loginPortalForm { padding: 0; border: 0; background: transparent; box-shadow: none; }
.loginPortalForm .loginFormHeader { margin-bottom: 10px; }
.loginPortalForm .loginFormHeader p { margin: 0; }
.loginPortalForm .loginFormHeader h2 { margin-top: 9px; color: var(--ink); font-size: 30px; }
.loginPortalForm .loginFormHeader span { max-width: 38ch; line-height: 1.5; }
.loginPortalForm label { gap: 8px; color: var(--ink); font-size: 13px; }
.loginPortalForm input { min-height: 48px; padding-inline: 13px; border-color: var(--lineStrong); background: var(--inputBg); font-size: 14px; }

.passwordField { min-width: 0; position: relative; display: block; }
.passwordField input { padding-right: 68px; }
.passwordField button {
  position: absolute;
  top: 50%;
  right: 6px;
  min-width: 54px;
  min-height: 36px;
  padding: 0 9px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--jade);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.passwordField button:hover, .passwordField button:focus-visible { background: var(--panelStrong); outline: none; }

.loginPortalForm .formError { min-height: 20px; margin: -3px 0; font-size: 12px; line-height: 1.45; }
.loginSubmitButton { width: 100%; min-height: 48px; border-radius: 7px; font-size: 14px; }
.loginPortalHelp { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.loginPortalHelp p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.loginPortalHelp a { width: max-content; max-width: 100%; color: var(--jade); font-size: 12px; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.loginPortalNotice { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.loginPortalFooter { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding-top: 28px; }
.loginPortalFooter a { color: var(--muted); font-size: 11px; text-decoration: none; }
.loginPortalFooter a:hover, .loginPortalFooter a:focus-visible { color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .loginPortalFrame { grid-template-columns: minmax(330px, .8fr) minmax(420px, 1.2fr); }
  .loginPortalVisual { padding: 34px; }
  .loginPortalAssurance { grid-template-columns: 1fr; }
  .loginPortalAssurance li { padding: 10px 12px; }
}

@media (max-width: 760px) {
  .loginPortalFrame { display: block; }
  .loginPortalVisual { display: none; }
  .loginPortalAccess { min-height: 100svh; padding: 28px 20px 18px; }
  .loginPortalAccessInner { align-self: center; gap: 20px; }
  .loginPortalMobileLogo { display: block; }
  .loginPortalForm .loginFormHeader h2 { font-size: 27px; }
  .loginPortalFooter { padding-top: 20px; }
}

@media (max-width: 420px) {
  .loginPortalAccess { padding-inline: 16px; }
  .loginPortalMobileLogo { width: 168px; }
  .loginPortalForm { gap: 14px; }
}

/* Audit roadmap: research assurance and matter workflow surfaces. */
.answerResearchStatus,
.researchStatus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--lineStrong);
  border-left: 4px solid var(--statusSuccess);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.answerResearchStatus::before,
.researchStatus::before {
  content: '\2713';
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--statusSuccess);
  /* --statusSuccess is dark in light mode and light in dark mode, so the glyph
     has to be the page colour rather than a fixed near-white. */
  color: var(--bg);
  font-size: 12px;
  font-weight: 850;
}

.answerResearchStatus strong,
.researchStatus strong { display: block; color: var(--ink); }
.answerResearchStatus small,
.researchStatus small { display: block; margin-top: 2px; color: var(--textSubtle); font-size: 12px; }
.answerResearchStatus.secondary,
.researchStatus.secondary { border-color: var(--brass); border-left-color: var(--statusWarning); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); }
.answerResearchStatus.secondary::before,
.researchStatus.secondary::before { content: '!'; background: var(--statusWarning); }
.answerResearchStatus.incomplete,
.researchStatus.incomplete { border-color: var(--statusDanger); border-left-color: var(--statusDanger); background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); }
.answerResearchStatus.incomplete::before,
.researchStatus.incomplete::before { content: '!'; background: var(--statusDanger); }

.scopePreflight {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-block: 1px solid var(--lineStrong);
  background: var(--panel);
}

.scopePreflightHeader,
.scopePreflightActions,
.collaborationIndicators,
.presenceStack,
.authorityWorkflowHeader,
.artifactEditorActions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.scopePreflightHeader { justify-content: space-between; }
.scopePreflightHeader h2,
.scopePreflightHeader h3 { font-size: 13px; }
.scopePreflightFields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 8px;
}
.scopePreflight label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 750; }
.scopePreflight input,
.scopePreflight select { width: 100%; min-width: 0; min-height: 40px; padding: 7px 9px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; }
.scopePreflightWarning { margin: 0; padding: 8px 10px; border-left: 3px solid var(--statusWarning); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--amber); font-size: 12px; }
.scopePreflightActions { justify-content: flex-end; }

.evidenceViewer {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--lineStrong);
  border-radius: 7px;
  background: var(--surface);
}
.evidenceViewerHeader { min-width: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.evidenceViewerBody { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); }
.evidenceProposition,
.evidenceDocument { min-width: 0; min-height: 0; padding: 14px; overflow: auto; }
.evidenceProposition { border-right: 1px solid var(--line); background: var(--panel); }
.evidenceQuote { margin: 10px 0; padding: 12px; border-left: 4px solid var(--brass); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--textSubtle); font-size: 13px; line-height: 1.6; }
.evidencePage { width: 100%; max-width: 100%; height: auto; display: block; border: 1px solid var(--lineStrong); background: var(--surface); }
.evidenceMetadata { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 6px 12px; margin: 12px 0 0; font-size: 12px; }
.evidenceMetadata dt { color: var(--textSubtle); }
.evidenceMetadata dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 700; }

.authorityWorkflow,
.verificationQueue { min-width: 0; display: grid; gap: 10px; }
.authorityWorkflowHeader { justify-content: space-between; }
.authorityWorkflowRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(100px, .8fr) minmax(110px, .8fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
}
.authorityWorkflowRow > * { min-width: 0; overflow-wrap: anywhere; }
.authorityWorkflowRow select,
.authorityWorkflowRow input { width: 100%; min-width: 0; min-height: 38px; }
.workflowBadge,
.statusBadge,
.matterStatusBadge {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--lineStrong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--textSubtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}
.workflowBadge::before,
.statusBadge::before,
.matterStatusBadge::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.workflowBadge.located,
.statusBadge.active,
.matterStatusBadge.open { border-color: var(--lineStrong); background: var(--panel); color: var(--statusSuccess); }
.workflowBadge.pending,
.statusBadge.review,
.matterStatusBadge.onHold { border-color: var(--brass); background: color-mix(in srgb, var(--statusWarning) 14%, var(--surface)); color: var(--statusWarning); }
.workflowBadge.blocked,
.statusBadge.overdue { border-color: var(--statusDanger); background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); }
.workflowBadge.approved,
.statusBadge.complete,
.matterStatusBadge.closed { border-color: var(--lineStrong); background: var(--panel); color: var(--statusInfo); }

.legalArtifact.editable,
.editableIssuePanel,
.editableChronologyPanel { padding: 12px; border: 1px solid var(--lineStrong); border-radius: 7px; background: var(--panel); }
.artifactEditor { min-width: 0; display: grid; gap: 9px; }
.artifactEditor input,
.artifactEditor select,
.artifactEditor textarea,
.legalArtifact [contenteditable="true"] { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--lineStrong); border-radius: 5px; background: var(--inputBg); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; }
.legalArtifact [contenteditable="true"] { min-height: 44px; overflow-wrap: anywhere; }
.artifactEditorActions { justify-content: flex-end; }
.artifactList article:focus-within { border-color: var(--focusRing); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 14%, transparent); }

.matterFilterButton { min-height: 40px; padding: 0 11px; border: 1px solid var(--lineStrong); border-radius: 6px; background: var(--surface); color: var(--textSubtle); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.matterFilterButton[aria-pressed="true"] { border-color: var(--jade); background: var(--panelStrong); color: var(--jade); }

.collaborationIndicators { color: var(--textSubtle); font-size: 12px; }
.presenceStack { flex-wrap: nowrap; padding-left: 6px; }
.presenceAvatar { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--jadeDark); color: var(--onJade); font-size: 10px; font-weight: 850; }
.presenceAvatar:first-child { margin-left: 0; }
.collaborationNotice { padding: 8px 10px; border-left: 3px solid var(--statusInfo); background: var(--panel); color: var(--statusInfo); font-size: 12px; line-height: 1.45; }
.ethicalWallNotice { border-left-color: var(--statusDanger); background: color-mix(in srgb, var(--statusDanger) 14%, var(--surface)); color: var(--statusDanger); }

/* Existing compact legal metadata remains legible without changing panel density. */
.matterSummary span,
.matterSummary small,
.matterEmpty,
.propositionMarkers,
.verificationRecord,
.scopeLimitations,
.consultedSourcesNote,
.consultedSourcesLegacy,
.consultedSourceList li span,
.consultedSourcesMore > summary,
.artifactList p,
.artifactList small,
.chronologyList time,
.panelSectionHeading small,
.verificationBadge,
.authorityEditor label,
.citationActions button,
.citationActions a { font-size: max(11px, .6875rem); }
.artifactStatus,
.disputedFlag { font-size: max(10px, .625rem); }
.rightPanel { color: var(--ink); }
.rightPanel small,
.researchScope dt,
.artifactList p,
.artifactList small { color: var(--textSubtle); }

@media (max-width: 900px) {
  .evidenceViewerBody { grid-template-columns: 1fr; }
  .evidenceProposition { border-right: 0; border-bottom: 1px solid var(--line); }
  .authorityWorkflowRow { grid-template-columns: minmax(0, 1fr) minmax(110px, auto); }
}

@media (max-width: 560px) {
  .answerResearchStatus,
  .researchStatus { margin-inline: 0; }
  .scopePreflightFields,
  .authorityWorkflowRow,
  .evidenceMetadata { grid-template-columns: 1fr; }
  .scopePreflightActions,
  .artifactEditorActions { align-items: stretch; flex-direction: column; }
  .scopePreflightActions > *,
  .artifactEditorActions > * { width: 100%; }
}

@media (hover: none), (pointer: coarse) {
  .panelTextButton,
  .panelAddButton,
  .matterSummary button,
  .answerExportMenu summary,
  .answerExportMenu > div button,
  .authorityEditorActions button,
  .authorityEditorHeading > button,
  .matterFilterButton,
  .scopePreflight button,
  .artifactEditorActions button,
  .evidenceViewer button,
  .authorityWorkflow button { min-width: 44px; min-height: 44px; }
}

@media (forced-colors: active) {
  .answerResearchStatus,
  .researchStatus,
  .workflowBadge,
  .statusBadge,
  .matterStatusBadge { border: 2px solid CanvasText; }
  .workflowBadge::before,
  .statusBadge::before,
  .matterStatusBadge::before { forced-color-adjust: none; }
}

/* Public entry: keep the real-image hero compact enough to expose its full offer. */
.siteHero {
  min-height: clamp(520px, calc(100svh - 130px), 660px);
}
.siteHeroCopy { max-width: 680px; gap: 14px; }
.siteHeroCopy h1 {
  max-width: 20ch;
  font-size: 50px;
  line-height: 1.06;
}
.siteLead {
  max-width: 62ch;
  color: rgba(255, 255, 255, .94);
  font-size: 17px;
  line-height: 1.55;
}
.siteTrustList li {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(8, 27, 30, .58);
  color: var(--onJade);
}
.landingAccess > *,
.loginForm,
.trialForm,
.trialFormGrid,
.trialFormGrid > label { min-width: 0; }
.loginFormHeader span,
.loginFootnote { color: var(--textSubtle); }
.loginForm label,
.trialForm label:not(.trialTerms) { color: var(--textSubtle); }
.loginForm input,
.trialForm input,
.trialForm select { min-height: 44px; border-color: var(--lineStrong); }
.loginForm input::placeholder,
.trialForm input::placeholder { color: var(--muted); opacity: 1; }
.trialTerms { border-color: var(--lineStrong); color: var(--textSubtle); }
.trialTerms input { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .landingAccess,
  .loginAccess { grid-template-columns: minmax(0, 1fr); }
  .landingAccess > .loginForm,
  .landingAccess > .trialForm { width: min(100%, 680px); }
}

@media (max-width: 780px) {
  .siteHero { min-height: min(620px, calc(100svh - 110px)); }
  .siteHeroCopy { gap: 12px; }
  .siteHeroCopy h1 { max-width: 22ch; font-size: 36px; line-height: 1.1; }
  .siteLead { max-width: 58ch; font-size: 16px; line-height: 1.5; }
}

@media (max-width: 560px) {
  .loginScreen { padding-inline: 12px; }
  .siteHero { min-height: auto; padding-block: 24px; }
  .siteHeroCopy h1 { font-size: 32px; }
  .siteHeroActions { width: 100%; }
  .siteHeroActions a { width: 100%; flex-basis: 100%; }
  .siteTrustList { justify-content: center; }
  .landingAccess { padding: 16px; }
  .loginFrameSite .loginForm,
  .loginFrameSite .trialForm { padding: 20px 16px; }
  .trialTerms { grid-template-columns: 22px minmax(0, 1fr); padding: 11px; }
}

/* Final responsive constraints intentionally follow legacy landing-page overrides. */
@media (max-width: 960px) {
  .siteHero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .siteHeroCopy, .heroProductProof { width: 100%; max-width: 560px; }
}

@media (max-width: 560px) {
  .loginScreen { padding-inline: 0; }
  .publicNav { min-height: 60px; padding: 8px 14px; }
  .publicNav .loginBrandLogo { width: 132px; max-width: 46vw; height: auto; }
  .publicNav nav { flex: 0 0 auto; }
  .publicNav nav a:not(.navTrialButton) { display: none; }
  .siteHero { min-height: calc(100svh - 60px); align-content: end; gap: 18px; padding: 28px 18px; }
  .siteHeroCopy { gap: 12px; }
  .siteHeroCopy h1 { max-width: 19ch; font-size: clamp(31px, 9vw, 40px); line-height: 1.04; }
  .siteLead { font-size: 15px; line-height: 1.45; }
  .siteHeroActions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .siteHeroActions a { width: auto; min-width: 0; flex-basis: auto; padding-inline: 9px; font-size: 12px; }
  .siteTrustList { justify-content: flex-start; }
.heroProductProof { padding: 13px; }
}

/* Matter workspace refinement */
.myMattersButton {
  display: flex;
  grid-template-columns: none;
  justify-content: space-between;
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
  text-align: center;
  box-shadow: 0 6px 16px var(--shadowColor);
}
.myMattersButton strong { padding: 5px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 5px; color: var(--onJade); font-size: 11px; }

@media (max-width: 1100px) {
  .starterQueries > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profileCustomInstructions { max-width: none; }
}

.myMattersButton:hover {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
}

.historySectionHeader {
  min-height: 40px;
  padding: 5px 7px 5px 11px;
  border-radius: 6px;
  background: var(--jadeDark);
  color: var(--onJade);
}

.historySectionHeader .sectionTitle,
#history-title {
  color: var(--onJade);
  font-weight: 850;
}

.historyAddMatterButton {
  width: 112px;
  max-width: 112px;
  min-height: 28px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 5px;
  background: var(--jadeDark);
  color: var(--onJade);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.historyAddMatterButton:hover,
.historyAddMatterButton:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.matterInformationButton,
.matterNewQueryButton {
  width: 112px;
  max-width: 112px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--jadeDark);
  border-radius: 5px;
  background: var(--jadeDark);
  color: var(--onJade);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.matterNewQueryButton {
  width: 82px;
  max-width: 82px;
  border-color: var(--lineStrong);
  background: var(--surface);
  color: var(--jade);
  font-size: 10px;
}

.matterInformationButton:hover,
.matterInformationButton.open,
.matterNewQueryButton:hover,
.matterNewQueryButton:focus-visible {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
}

.matterNameLine {
  overflow: hidden;
  margin-top: 2px;
  color: var(--textSubtle);
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyEditStatus {
  margin: 2px 0 0;
  color: var(--jade);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
}

.projectEditor {
  width: min(1100px, 100%);
}

.projectDocumentsHeading small {
  max-width: 820px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}

.matterLibraryTabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.matterLibraryTabs button {
  min-height: 92px;
}

.matterLibraryTabs span {
  white-space: normal;
}

.matterLibraryDocumentList {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.matterLibraryDocumentList > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--textSubtle);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.matterLibraryDocumentList > summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.matterConfidentialityChoice {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.matterConfidentialityChoice legend {
  padding: 0 5px;
  color: var(--textSubtle);
  font-size: 12px;
  font-weight: 750;
}

.matterConfidentialityChoice label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
}

.matterConfidentialityChoice input {
  width: 16px;
  min-height: 16px;
}

.mattersWorkspace > header,
.matterDirectory {
  background: var(--sideRail);
}

.mattersWorkspace h2 {
  color: var(--jade);
}

.mattersWorkspace header p {
  color: var(--ink);
  line-height: 1.45;
}

.matterSummary {
  align-items: start;
}

.matterSummary > div {
  gap: 5px;
}

.matterSummary > div > strong {
  color: var(--ink);
  font-size: 13px;
}

.matterSummary > div > span {
  color: var(--jade);
  font-size: 10px;
  font-weight: 850;
}

.matterSummaryActions {
  align-items: stretch;
  flex-direction: column;
}

.matterSummaryActions .primaryButton {
  border-color: var(--jadeDark);
  background: var(--jadeDark);
  color: var(--onJade);
}

.projectEditor footer > span {
  max-width: 680px;
  line-height: 1.45;
}

.featureRequestLauncher {
  display: none !important;
}

@media (max-width: 980px) {
  .matterLibraryTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .matterLibraryTabs,
  .projectFieldGrid,
  .matterFieldGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .projectGroup > .groupHeader {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .projectGroup > .groupHeader > .groupTitle {
    grid-column: 1 / -1;
  }

  .projectGroup > .groupHeader > .matterNewQueryButton {
    grid-column: 2;
  }

  .projectGroup > .groupHeader > .matterInformationButton {
    grid-column: 3;
  }

  .matterInformationButton {
    padding: 0 6px;
    font-size: 8px;
  }

  .matterNewQueryButton {
    width: 70px;
    max-width: 70px;
    padding: 0 5px;
    font-size: 8px;
  }

  .matterSummaryActions {
    flex-direction: row;
  }

  .projectEditor footer {
    align-items: stretch;
  }
}

/* 2026-08-04 production workspace upgrade: keep all three legal-work panes usable. */
.rightPanel {
  container-type: inline-size;
}

@media (min-width: 1101px) and (max-width: 1439px) {
  .appShell.singleChatShell.sourcesOpen {
    grid-template-columns:
      clamp(260px, min(var(--history-width, 360px), 22vw), 340px)
      minmax(480px, 1fr)
      clamp(360px, min(var(--sources-width, 390px), 30vw), 430px);
  }

  .singleChatShell.sourcesOpen .historyResizeHandle {
    left: calc(clamp(260px, min(var(--history-width, 360px), 22vw), 340px) - 5px);
  }

  .singleChatShell.sourcesOpen .attachmentToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .singleChatShell.sourcesOpen .attachmentToolbar .attachButton {
    grid-column: 1 / -1;
  }

  .singleChatShell.sourcesOpen .answerActions {
    flex-wrap: wrap;
  }
}

@media (min-width: 1440px) {
  .appShell.singleChatShell.sourcesOpen {
    grid-template-columns:
      clamp(320px, var(--history-width, 360px), min(36vw, 520px))
      minmax(560px, 1fr)
      clamp(380px, var(--sources-width, 390px), min(34vw, 600px));
  }
}

@container (max-width: 470px) {
  .practitionerTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 8px;
  }

  .practitionerTabs button {
    min-width: 0;
    justify-content: center;
    padding-inline: 6px;
  }
}

@media (max-width: 780px) {
  .singleChatShell .rightPanel {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
  }

  /* Keep compact controls legible and contain the composer at tablet widths. */
  .modeMenu summary {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
  }

  .modeMenu summary span:first-child {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .jurisdictionContext {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .composerJurisdictionSelect,
  .composerJurisdictionSelect summary {
    width: 100%;
  }

  .attachmentToolbar {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attachmentToolbar > *,
  .matterLibraryButton,
  .attachmentToggle {
    min-width: 0;
    width: 100%;
  }

  .attachmentToolbar .attachButton {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspaceHeading {
    grid-column: 1;
    grid-row: 1;
  }

  .topbarActions {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: stretch;
  }

  .analysisTypeControl,
  .modeMenu {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
  }

  .attachmentToolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .attachmentToolbar .attachButton {
    grid-column: auto;
  }

  .projectEditorSectionNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .projectEditorSectionNav a {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
 * Dark-mode corrections that a token swap alone cannot express.
 *
 * Everything above this block reads its colour from the tokens in index.css, so
 * it follows the theme on its own. The two cases below do not:
 *
 *   1. The wordmark is a bitmap, not CSS.
 *   2. The hero photograph is a fixed image whose scrim has to get deeper in
 *      dark mode for the copy laid over it to keep its contrast.
 *
 * Both are stated twice: once for the explicit `data-theme="dark"` opt-in and
 * once for the operating-system preference, exactly as index.css states the
 * dark palette twice. KEEP THE TWO COPIES IN SYNC.
 * ------------------------------------------------------------------------- */

/* Extra opacity added to every stop of the hero scrims. 0 in light. */
:root {
  --heroVeil: 0;
}

/* --- Dark corrections (1 of 2: explicit opt-in) -------------------------- */
/* KEEP IN SYNC with the prefers-color-scheme block immediately below. */

/* gramylex-logo.png is near-black artwork on transparency, so it vanishes on a
   dark surface. Inverting it and rotating the hue back keeps the mark's own
   colour relationships while lifting it off the dark chrome. `.loginPortalLogo`
   is deliberately absent: it carries its own opaque light plate and is already
   legible. `gramylex-mark.svg` is a self-contained dark tile and is left alone. */
:root[data-theme="dark"] .brandLogo,
:root[data-theme="dark"] .authBrandLogo,
:root[data-theme="dark"] .loginBrandLogo,
:root[data-theme="dark"] .loginPortalMobileLogo {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

:root[data-theme="dark"] {
  --heroVeil: .06;
}

/* --- Dark corrections (2 of 2: OS preference, no explicit choice yet) ----- */
/* KEEP IN SYNC with the :root[data-theme="dark"] rules immediately above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandLogo,
  :root:not([data-theme="light"]) .authBrandLogo,
  :root:not([data-theme="light"]) .loginBrandLogo,
  :root:not([data-theme="light"]) .loginPortalMobileLogo {
    filter: invert(1) hue-rotate(180deg) brightness(1.1);
  }

  :root:not([data-theme="light"]) {
    --heroVeil: .06;
  }
}

/* --- Legal-library admin: container-driven layout -------------------------- */
/* The "Legal-library source priorities" panel renders in two places: the ~560px
   organisation-settings drawer and the full-width Platform administration console.
   Viewport media queries cannot tell those apart — on a 1500px screen the drawer copy
   kept the wide desktop layout and overflowed to about 1122px, cutting off the register
   and the right-hand filter controls. These rules query the `adminPanel` container
   (.accessBody / .platformAdminBody) instead, so the panel collapses on the drawer and
   is untouched in the console, where the container stays around 1190px wide. */

@container adminPanel (max-width: 1000px) {
  .libraryPriorityToolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libraryPriorityToolbar > label:first-child { grid-column: 1 / -1; }
  .libraryPriorityToolbar > button { grid-column: 1 / -1; justify-self: stretch; }
}

@container adminPanel (max-width: 900px) {
  .libraryMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libraryMetrics div:nth-child(2n) { border-right: 0; }
  .libraryMetrics div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .libraryPriorityHierarchy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libraryAdminHeading { flex-direction: column; }
  .libraryAddSourcePanel { grid-template-columns: minmax(0, 1fr); }
  .librarySubmissionList article { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .librarySubmissionList article > div:last-child { justify-content: flex-end; }
}

@container adminPanel (max-width: 560px) {
  .libraryPriorityToolbar { grid-template-columns: minmax(0, 1fr); }
  .libraryPriorityHierarchy { grid-template-columns: minmax(0, 1fr); }
}

@container adminPanel (max-width: 420px) {
  .libraryMetrics { grid-template-columns: minmax(0, 1fr); }
  .libraryMetrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .libraryMetrics div:last-child { border-bottom: 0; }
}