/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* Preserve native hidden semantics when component display rules apply. */
[hidden] {
    display: none !important;
}

/* Dark mode colors (default). House colours: --primary (green) and
   --secondary (orange) with hover and tint variants; spacing scale --sp-1..4
   (4/8/12/16 px). Plan 13. */
:root {
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --bg-primary: #141414;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #191919;
    --bg-hover: #3a3a3a;
    --bg-button: #3e3e3e;
    --text-primary: #ccc;
    --text-secondary: #aaa;
    --text-muted: #666;
    --text-dim: #888;
    --primary: #1fa13d;
    --primary-hover: #157030;
    --primary-tint: rgba(31, 161, 61, 0.18);
    --secondary: #d9822b;
    --secondary-hover: #ef6c00;
    --secondary-tint: rgba(217, 130, 43, 0.18);
    --secondary-deep: #9c540e;
    --danger: #ff6b6b;
    --danger-tint: rgba(208, 73, 73, 0.18);
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-hover-bg: #2a2a2a;
    --severity-high: #d04949;
    --severity-high-bg: #3a2f32;
    --severity-medium: #e99740;
    --severity-medium-bg: #3a342f;
    --severity-low: #359f47;
    --severity-low-bg: #2f3a33;
    --border-color: #444;
    --link: #5cc976;
    --border-selected: #ffffff;
    --spinner-track: #3e3e3e;
    --error-color: #ff6b6b;
}

/* Light mode colors - applied via .light-theme class on body */
body.light-theme {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-hover: #e0e0e0;
    --bg-button: #e0e0e0;
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #888;
    --text-dim: #777;
    --primary: #1fa13d;
    --primary-hover: #157030;
    --primary-tint: #e8f5e9;
    --secondary: #d9822b;
    --secondary-hover: #ef6c00;
    --secondary-tint: #fff3e0;
    --secondary-deep: #9c540e;
    --danger: #c62828;
    --danger-tint: #ffebee;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-hover-bg: #acacac;
    --severity-high: #c62828;
    --severity-high-bg: #ffebee;
    --severity-medium: #ef6c00;
    --severity-medium-bg: #fff3e0;
    --severity-low: #2e7d32;
    --severity-low-bg: #e8f5e9;
    --border-color: #ddd;
    --link: #286443;
    --border-selected: #333;
    --spinner-track: #ddd;
    --error-color: #d32f2f;
}

/* ═══════════════ Button and select system (plan 13) ═══════════════
   One .btn base; variants: .btn-primary (filled dark green, white text;
   outline when disabled), .btn-secondary (filled dark orange when enabled,
   outline when disabled), .btn-neutral (grey outline), .btn-danger (outline red),
   .btn-icon (square, icon only; add .btn-icon-primary / .btn-icon-secondary
   for a house colour), .btn-help (round "?" / "i"). Inline SVG icons inherit
   currentColor. Selects share .select. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color ease 0.15s, color ease 0.15s, border-color ease 0.15s;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-primary {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:disabled {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-secondary {
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-secondary:not(:disabled) {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.btn-neutral {
    border-color: var(--border-color);
    background: var(--bg-button);
    color: var(--text-primary);
}

.btn-neutral:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-tint);
}

.btn-icon {
    width: 26px;
    padding: 0;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-icon:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-icon.btn-icon-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon.btn-icon-primary:hover:not(:disabled) {
    background: var(--primary-tint);
    color: var(--primary-hover);
}

.btn-icon.btn-icon-secondary {
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-icon.btn-icon-secondary:hover:not(:disabled) {
    background: var(--secondary-tint);
    color: var(--secondary-hover);
}

.btn-icon.btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-icon.btn-danger:hover:not(:disabled) {
    background: var(--danger-tint);
    color: var(--danger);
}

.btn-help {
    width: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--text-muted);
    color: var(--text-muted);
    font-size: 11px;
}

.btn-help:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-sm {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 11px;
}

.select {
    min-width: 0;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
}

.select:focus {
    outline: none;
    border-color: var(--primary);
}

.select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.field-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ═══════════════ Top strip: logo with powered-by under it; account right ═══════════════ */
.brand-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    line-height: 1;
}

.brand-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}

.brand-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* The account (2026-10-02): organisation · email beside a person icon; the
   icon opens the menu (Web portal, support actions, Log out). */
.account-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1 1 auto;
}

.account-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
}

.account-menu-btn {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-menu-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Word is signed in with another account. */
.account-menu-btn.warn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    border: 1px solid var(--bg-primary);
}

.account-menu {
    position: fixed;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    width: max-content;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 16px));
    padding: var(--sp-3);
    box-sizing: border-box;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    line-height: 1.4;
}

.account-menu[hidden] {
    display: none;
}

.account-menu p {
    margin: 0;
    overflow-wrap: anywhere;
}

.account-menu-identity {
    color: var(--text-secondary);
}

.account-warning {
    color: var(--secondary);
}

.account-menu .btn {
    justify-content: center;
    text-align: center;
}

.brand-powered-by {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
}

.intranel-logo {
    height: 13px;
    vertical-align: middle;
}

/* The SmartReview logo (2026-09-29) holds the left of the strip. */
.smartreview-logo {
    height: 18px;
}

.local-test-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: #d13438;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Review and mode left; history right. Auxiliary actions wrap below. */
.action-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-2);
}

.action-row-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.review-polish-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
}

.review-polish-toggle input {
    margin: 0;
}

#review-history-btn {
    margin-left: auto;
}

/* Finish and Undo; takes no space while both are hidden. */
.review-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.review-secondary-actions > * {
    margin-top: var(--sp-2);
}

.reviewer-view-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.selection-help-buttons #undo-btn {
    margin-left: auto;
}

.action-group {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.action-row-model {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
}

/* Model/effort on the left, the reviewer-view link on the right, above the template box */
.settings-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-3);
    margin-top: var(--sp-3);
}

.model-selector-row,
.effort-selector-row {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.effort-slider {
    width: 80px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.effort-selector-value {
    font-size: 12px;
    color: var(--primary);
    min-width: 58px;
}

/* Pinned actions (plan 16 UI pass): the review buttons and selection row
   stay visible while results scroll; the bottom border is the subtle divider
   above the model selector. A plain full-width sibling so its content aligns
   exactly with the boxes below; the side box-shadows paint the panel's
   12px gutters so scrolling content never peeks past the edges. */
/* Document chat (plan 20): a slim row above Review document */
.document-chat-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.document-chat-btn {
    min-height: 22px;
    padding: 1px 10px 1px 6px;
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    gap: var(--sp-1);
}

.document-chat-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.document-chat-btn:hover:not(:disabled) {
    background: var(--primary-tint);
}

.pinned-actions {
    flex: 0 0 auto;
    max-height: 65vh;
    overflow-y: auto;
    z-index: 30;
    box-sizing: border-box;
    width: 100%;
    padding: var(--sp-2) 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow:
        var(--sp-3) 0 0 0 var(--bg-primary),
        calc(-1 * var(--sp-3)) 0 0 0 var(--bg-primary);
}

/* Document chat and the review actions share one aligned button column. */
#document-chat-btn,
#run,
#review-selection-btn {
    min-width: 124px;
}

/* Section help row (plan 03): Section brief / Example text + the section label */
.selection-help-row {
    width: 100%;
    margin-top: var(--sp-2);
}

/* Selection actions sit lower-profile than the primary action */
.selection-help-buttons .btn-secondary {
    min-height: 22px;
    padding: 2px 10px;
}

.selection-help-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}


.selection-help-context-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.selection-help-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    /* Clip sideways overflow without creating a body scroll container:
       overflow-x:hidden makes overflow-y:auto, breaking viewport sticky
       positioning for the pinned review controls. */
    overflow-x: clip;
}

.version-number {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Default text colour set on body and inherited — never `body *`, which
   paints every element directly and stops children inheriting explicit
   colours (a .btn-primary label span stayed grey instead of white). */
body,
body.ms-Fabric {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
}

ul {
    margin: 0;
    padding: 0;
}

.ms-welcome__header {
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 100px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
}

.ms-welcome__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    /* No top padding: the pinned action header sits flush with the viewport
       top when scrolled (the brand header carries its own top margin). */
    padding: 0 var(--sp-3) var(--sp-2);
}

.ms-welcome__main>h2 {
    width: 100%;
    text-align: center;
}

/* A separate viewport keeps every control above the divider fixed even when
   Word or another stylesheet changes the outer page's scrolling behaviour. */
#app-body {
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
}

#review-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--sp-2);
}

#review-content > * { flex-shrink: 0; }

#review-notices:empty,
#shared-session-slot:empty { display: none; }

#review-notices { font-size: 12px; }

/* Track Changes is on (plan 38 D1): what was paused and how to continue */
.tracking-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--secondary);
    background: var(--secondary-tint);
    color: var(--text-primary);
    border-radius: 4px;
}
.tracking-notice p { margin: 0; flex: 1 1 200px; overflow-wrap: anywhere; }

.review-history-field textarea {
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    padding: var(--sp-2);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.review-history-note {
    border-top: 1px solid var(--border-color);
    margin-top: var(--sp-3);
    overflow-wrap: anywhere;
}

.ms-welcome__features {
    list-style-type: none;
    margin-top: 20px;
}

.ms-welcome__features.ms-List .ms-ListItem {
    padding-bottom: 20px;
    display: -webkit-flex;
    display: flex;
}

.ms-welcome__features.ms-List .ms-ListItem>.ms-Icon {
    margin-right: 10px;
}

b {
    font-weight: bold;
}

/* Loading spinner styles */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    /* The parent (.ms-welcome__main) centres its flex children, which would
       size this box to its content; stretch it so the progress panel keeps
       the taskpane's width no matter what text streams into it. */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--spinner-track);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* A review is running: a small indicator at the right, just above the
   pinned header's bottom rule (the big wheel below the fold is gone) */
.review-activity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 2px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

.spinner.spinner-sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

.loading-container p {
    margin-top: 15px;
    color: var(--text-dim);
}

/* Exemplar viewer: DI tables rebuilt as real HTML tables (merged cells) */
.exemplar-table {
    border-collapse: collapse;
    margin: 8px 0 12px 0;
    font-size: 11px;
    width: 100%;
}

.exemplar-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 0;
}

.exemplar-table th,
.exemplar-table td {
    border: 1px solid var(--border-color);
    padding: 3px 6px;
    vertical-align: top;
    text-align: left;
}

.exemplar-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

/* Exemplar viewer: stored figure crops (shown to humans only) */
.exemplar-figure {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    cursor: zoom-in;
    margin: 8px 0 4px 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: #fff;
}

/* Ingest log viewer */
.ingest-log-body {
    font-size: 12px;
}

.ingest-log-summary {
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

/* The exemplar's ingest summary at the top of the ingest-log panel (2026-09-07). */
.ingest-summary {
    margin: 0 0 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.08));
}

.ingest-summary-doc {
    margin: 0;
}

.ingest-summary-note,
.ingest-summary-missing {
    margin: 6px 0 8px 0;
    color: var(--secondary);
}

.ingest-summary-sections {
    margin-top: 6px;
    color: var(--text-secondary);
}

.ingest-summary-sections summary {
    cursor: pointer;
}

.ingest-summary-sections ul {
    margin: 4px 0 0 14px;
    padding: 0;
}

.ingest-summary-heading {
    color: var(--text-muted);
    font-size: 11px;
}

.ingest-log-entry {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid var(--border-color);
}

.ingest-log-step {
    flex: 0 0 90px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ingest-log-message {
    flex: 1;
    color: var(--text-secondary);
}

.ingest-log-message ul {
    margin: 3px 0 0 14px;
    padding: 0;
}

.ingest-log-seams code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.12));
    padding: 0 3px;
    border-radius: 3px;
    white-space: pre-wrap;
}

.ingest-log-seam-arrow {
    font-weight: 600;
}

.ingest-log-entry.corrected .ingest-log-message,
.ingest-log-entry.corrected .ingest-log-step {
    color: #2f9e55;
}

.ingest-log-entry.failed .ingest-log-message {
    color: #ff6b6b;
}

.ingest-log-button {
    font-weight: 600;
}

/* Word tabs in the viewers: a real tab stop every 1.27 cm (Word's default
   w:defaultTabStop of 720 twips); measured from the block start, as in Word */
.doc-tab {
    white-space: pre;
    tab-size: 1.27cm;
    -moz-tab-size: 1.27cm;
}

.context-viewer-markdown p,
.context-viewer-markdown li {
    tab-size: 1.27cm;
}

/* Markdown from models and exemplars (section briefs, chat replies, the
   exemplar viewer): the global `ul` reset left no room for list markers, so
   they drew outside the box and vanished - a brief's lists read as bare
   lines. Bold-only paragraphs (**Typically covers**) read as headings. */
.context-viewer-markdown ul,
.context-viewer-markdown ol {
    margin: var(--sp-1) 0 var(--sp-2);
    padding-left: 20px;
}

.context-viewer-markdown ul {
    list-style: disc;
}

.context-viewer-markdown ol {
    list-style: decimal;
}

.context-viewer-markdown li {
    margin-bottom: 4px;
}

.context-viewer-markdown p > strong:only-child {
    display: inline-block;
    margin-top: var(--sp-1);
}

/* Machine-inferred content in exemplar viewer ([METADATA: ...] lines) */
.exemplar-metadata {
    color: #2f9e55;
}

.exemplar-metadata-tag {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Context template manager */
.template-manager-body {
    font-size: 12px;
}

.template-manager-create {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.template-manager-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
}

.template-manager-row {
    border-top: 1px solid var(--border-color);
    padding: 7px 0;
}

.template-manager-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.template-manager-name {
    color: var(--text-primary);
    font-weight: 600;
}

.template-manager-count {
    color: var(--text-muted);
    font-weight: 400;
}

.template-manager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.template-manager-exemplars {
    margin: 6px 0 2px 12px;
}

.template-manager-exemplar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 2px 0;
    color: var(--text-secondary);
}

/* The file name gets its own line; its details and buttons wrap below it. */
.template-manager-exemplar-name {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-manager-exemplar-meta {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.template-manager-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.template-manager-progress {
    color: var(--text-muted);
    font-size: 11px;
}

.template-manager-empty {
    color: var(--text-secondary);
    margin: 8px 0;
}

/* Live review-progress checklist (streamed pass status) */
.review-progress {
    /* Fixed to the taskpane width so streamed text never resizes the panel. */
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    text-align: left;
}

/* A completed row's detail goes to its own line when the panel is narrow,
   in every checklist (2026-10-06: Review changes' results cut it off at the
   panel's edge; only the section panel's checklist wrapped). */
.review-progress-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    padding: 3px 0;
    color: var(--text-secondary);
    min-width: 0;
}

.review-progress-label {
    flex: 1 1 160px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.review-progress-row.running {
    color: var(--text-primary);
}

.review-progress-row.done .review-progress-label {
    color: var(--text-primary);
}

.review-progress-icon {
    flex: 0 0 14px;
    text-align: center;
}

.review-progress-row.running .review-progress-icon {
    display: inline-block;
    animation: spin 1.2s linear infinite;
}

.review-progress-row.done .review-progress-icon {
    color: #1fa13d;
}

.review-progress-row.warn .review-progress-icon,
.review-progress-row.warn .review-progress-label {
    color: #d9822b;
}

.provider-fallback-notice {
    color: #d9822b;
    margin-top: 6px;
}

/* A background write of the review record failed and is being retried. */
.review-write-problem {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2);
    border-left: 3px solid var(--secondary);
    background: var(--secondary-tint);
    color: var(--text-primary);
}

.review-progress-row.error .review-progress-icon {
    color: #ff6b6b;
}

.review-progress-detail {
    margin-left: auto;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 11px;
    white-space: normal;
}

/* Streamed "still working" text: grey italic, on the row's own line where the
   result will go, cut with an ellipsis (2026-10-04: a second line reserved for
   it appeared with the first progress line and vanished when the pass
   finished, so lines popped in and out while passes ran). The row keeps one
   height from start to finish. */
.review-progress-row.running {
    flex-wrap: nowrap;
}

.review-progress-row.running .review-progress-label {
    white-space: nowrap;
}

.review-progress-detail.live {
    font-style: italic;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-progress-group {
    margin: 4px 0 2px 0;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.review-diagnostics-section {
    width: 100%;
    margin: 10px 0 6px 0;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.review-diagnostics-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.review-diagnostics-toggle span {
    color: var(--text-primary);
}

/* Plan 25: the diagnostics row holds the toggle and the review-memory button. */
.review-diagnostics-row {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding-right: var(--sp-2);
}

.review-diagnostics-row .review-diagnostics-toggle {
    flex: 1;
    width: auto;
}

.review-memory-btn {
    position: relative;
}

.review-memory-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--secondary);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}

.review-memory-count:empty {
    display: none;
}

.review-memory-kind {
    margin: var(--sp-3) 0 var(--sp-1);
    font-size: 12px;
}

.review-memory-entry {
    position: relative;
    padding: var(--sp-2) 28px var(--sp-2) var(--sp-2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: var(--sp-1);
    font-size: 12px;
}

.review-memory-where,
.review-memory-meta {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 2px;
}

.review-memory-delete {
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-1);
}

.review-memory-footer {
    margin-top: var(--sp-3);
    color: var(--text-secondary);
    font-size: 11px;
}

.diagnostics-arrow.expanded {
    transform: rotate(90deg);
}

.review-diagnostics-content {
    border-top: 1px solid var(--border-color);
    padding: 10px;
    font-size: 11px;
    line-height: 1.4;
}

.diagnostics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.diagnostics-metric {
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 6px;
}

.diagnostics-label {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
}

.diagnostics-value {
    color: var(--text-primary);
    font-weight: 600;
}

.diagnostics-plan {
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
}

.diagnostics-plan-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 3px;
}

.diagnostics-plan-subtitle {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 6px;
}

.diagnostics-plan-list {
    color: var(--text-secondary);
    margin-top: 6px;
}

.diagnostics-pass {
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
}

.diagnostics-pass:first-child {
    border-top: 0;
}

.diagnostics-pass-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 3px;
}

.diagnostics-pass-detail {
    color: var(--text-secondary);
    margin: 1px 0;
}

.source-pass-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 400;
}

/* Results styles */
.results-container {
    margin-top: 20px;
    padding: 15px;
    width: 100%;
    /* Its padding inside the 100% (2026-10-06: Review changes' results ran
       30px past the panel's right edge). */
    box-sizing: border-box;
    text-align: left;
}

.anchor-map-timing {
    font-size: 10px;
    color: var(--text-muted);
}

/* After Review changes with nothing left to verify: the round's end, with
   Finish review right there */
.review-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--primary-tint);
    color: var(--text-primary);
}

.results-container h3 {
    color: var(--accent);
    margin-bottom: 10px;
}

.results-container ul {
    list-style-type: disc;
    padding-left: 20px;
}

.results-container li {
    margin-bottom: 8px;
    color: var(--text-primary);
}

/* Comments section */
#comments-section {
    width: 100%;
    margin-top: 20px;
}

#comments-section h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 14px;
}

#comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-item {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: all ease 0.15s;
    border: 2px solid transparent;
}

.comment-item:hover {
    border-color: var(--bg-hover);
}

.comment-item.selected {
    border-color: var(--border-selected);
    background: var(--bg-secondary);
}

/* Severity colors */
.comment-item.severity-high {
    border-left: 4px solid var(--severity-high);
}

.comment-item.severity-high .comment-header {
    color: var(--severity-high);
}

.comment-item.severity-medium {
    border-left: 4px solid var(--severity-medium);
}

.comment-item.severity-medium .comment-header {
    color: var(--severity-medium);
}

.comment-item.severity-low {
    border-left: 4px solid var(--severity-low);
}

.comment-item.severity-low .comment-header {
    color: var(--severity-low);
}


/* Severity colors selected */
.comment-item.severity-high.selected {
    border-color: var(--severity-high);
    background: var(--severity-high-bg);
}

.comment-item.severity-medium.selected {
    border-color: var(--severity-medium);
    background: var(--severity-medium-bg);
}

.comment-item.severity-low.selected {
    border-color: var(--severity-low);
    background: var(--severity-low-bg);
}


/* The card's buttons keep its top right; the number, badges and location chip
   wrap beside them (2026-10-06: a long chip pushed the buttons to a second line). */
.comment-header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 4px;
}

.comment-header-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    min-height: 22px;
}

.comment-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.comment-feedback {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    margin-top: 8px;
    margin-left: 8px;
}

.comment-feedback.severity-high {
    color: var(--severity-high);
    font-weight: bold;
}

.comment-feedback.severity-medium {
    color: var(--severity-medium);
    font-weight: bold;
}

.comment-feedback.severity-low {
    color: var(--severity-low);
    font-weight: bold;
}

.comment-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
}

.comment-delete:hover {
    color: var(--error-color);
}

.comment-group-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.comment-group-toggle {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    text-align: left;
}

.comment-group-toggle:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.comment-group-arrow {
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    transition: transform ease 0.2s;
}

.comment-group-arrow.expanded {
    transform: rotate(90deg);
}

.comment-location-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* One location: no divider needed between the comment text and its single
   row, and the correction content sits close under the text. */
.comment-location-list.single {
    border-top: none;
    padding-top: 0;
    margin-top: var(--sp-1);
}

.comment-location-list.single .grouped-ac-list {
    margin-top: 0;
}

.comment-location-row {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 4px;
}

/* A location with nothing but its anchor renders as a compact chip:
   "#105 ID_P247_S3" inline, wrapping left to right (plan 16 UI pass). */
.comment-location-row.compact {
    width: auto;
    padding: 4px 8px;
}

.comment-location-row.compact .comment-location-main {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-1);
    width: auto;
}

.comment-location-row.compact .comment-location-delete {
    position: static;
    margin-left: 2px;
}

.comment-location-row.selected {
    border-color: var(--accent);
}

.comment-location-main {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-1);
    width: calc(100% - 24px);
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.comment-location-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.comment-location-anchor {
    color: var(--accent);
    font-family: monospace;
    font-size: 11px;
}

.comment-location-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
}

.comment-location-delete:hover {
    color: var(--error-color);
}

.grouped-apply-all {
    margin-bottom: 0;
}

.grouped-ac-list {
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Autocorrect ("Fix") items
   --------------------------------------------------------------------------- */
.ac-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #fff9c4;
    color: #5d4d00;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.ac-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* Apply all + Skip all side by side above a group's correction rows */
.ac-group-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.ac-group-actions .ac-apply-all {
    flex: 1 1 auto;
    width: auto;
    margin-bottom: 0;
}

.ac-skip-all {
    flex: 0 0 auto;
    padding: 5px 12px;
    background: var(--bg-button);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* Applied/skipped progress on a collapsed multi-location card */
.comment-actioned {
    color: var(--severity-low);
    font-weight: 600;
}

/* A correction whose in-document preview could not be drawn says why */
.ac-preview-issue {
    flex: 1 1 100%;
    font-size: 10px;
    color: var(--severity-medium);
    padding: 2px 0;
}

/* Card end-states in the header (plan 19): Resolve and Remove icon buttons */
/* Single-location cards: the anchor follows the badges in the header and,
   wrapped on a narrow pane, starts its line under the card number (2026-10-09). */
.comment-header-anchor {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-family: monospace;
    font-size: 11px;
    cursor: pointer;
}

/* "See also" references (2026-10-02): plain links, apart from the card's
   own locations - no fix, highlight or recheck. */
.comment-missed-note {
    margin-top: 4px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
}
/* Plan 38 Part F: a card the duplicate check combined from several findings */
/* A disabled choice's reason, under its button (Finish review in Word for the web). */
.choice-note {
    margin: calc(-1 * var(--sp-1)) 0 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary);
}

.comment-combined-note {
    margin-top: var(--sp-1);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: help;
}

.comment-see-also {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.comment-see-also-chip {
    padding: 1px 6px;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    color: var(--accent);
    font-family: monospace;
    font-size: 11px;
    cursor: pointer;
}

/* A location the review named but no bookmark could be placed for (2026-09-28). */
.comment-header-anchor.unavailable {
    color: var(--text-muted);
    text-decoration: line-through dotted;
    cursor: default;
}

.comment-header-anchor + .comment-header-actions {
    margin-left: 0;
}

.comment-header .comment-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.comment-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.comment-header .comment-discuss {
    min-height: 20px;
    padding: 1px 8px 1px 6px;
    border-color: var(--primary);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.comment-header .comment-discuss:hover:not(:disabled) {
    background: var(--primary-tint);
}

/* The card's state (plan 38): one chip - checking edits, may need review,
   update due / updating / update failed */
.comment-header .comment-recheck-badge {
    margin-left: auto;
}

.comment-header-anchor + .comment-recheck-badge,
.comment-recheck-badge + .comment-header-actions {
    margin-left: 0;
}

.comment-recheck-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--secondary-tint);
    color: var(--secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    cursor: default;
}

/* Plan 38: automatic card updates - the scope line's switch and the selected
   card's note while it updates */
.auto-update-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}

.comment-updating-note,
.comment-fix-removed-note {
    margin-top: var(--sp-1);
    color: var(--text-secondary);
    font-size: 11px;
    font-style: italic;
}

/* Impact triage (2026-09-29): an edit may have changed a card nobody tried to
   fix - grey, not the amber of an attempt; a still-applies result is quiet green */
.comment-recheck-badge.impact {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.comment-impact-mark {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--primary-tint);
    color: var(--primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    cursor: default;
}

.comment-header .comment-impact-mark {
    margin-left: auto;
}

.comment-header-anchor + .comment-impact-mark,
.comment-recheck-badge + .comment-impact-mark,
.comment-impact-mark + .comment-edited-badge,
.comment-impact-mark + .comment-header-actions {
    margin-left: 0;
}

.comment-recheck-badge .recheck-spinner {
    display: inline-block;
    animation: spin 1.2s linear infinite;
}

/* "3 cards impacted — Recheck now" under the scope line and above the chat composer */
.impacted-recheck,
.card-chat-recheck {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
}

.impacted-recheck {
    flex: 1 0 100%;
}

.card-chat-recheck {
    margin-top: var(--sp-2);
}

/* Resolve is the everyday button: labelled, in the house green; Remove is a
   small trash icon set apart from it so a slip does not delete the card. */
.comment-header .comment-resolve {
    min-height: 20px;
    padding: 1px 8px 1px 6px;
    border-color: var(--primary);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.comment-header .comment-resolve:hover:not(:disabled) {
    background: var(--primary-tint);
}

.comment-header .comment-remove {
    width: 22px;
    min-height: 20px;
    margin-left: var(--sp-1);
    color: var(--text-muted);
}

/* A collapsed card's Review changes verdict, first line only */
.comment-feedback-preview {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.comment-feedback-preview.severity-high {
    color: var(--severity-high);
}

.comment-feedback-preview.severity-medium {
    color: var(--severity-medium);
}

.comment-feedback-preview.severity-low {
    color: var(--severity-low);
}

.comment-header .comment-remove:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-tint);
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.comments-header-actions {
    display: inline-flex;
    gap: var(--sp-1);
}

/* Resolved roll-up under the Comments section. The main column centres
   its children (align-items: center), so a section without an explicit
   width is content-sized and centred: with long single-line rows it grew
   wider than the pane and spilled off both edges (2026-09-08: "lved (3)",
   the row prefixes gone). Full width, like #comments-section. */
#resolved-comments-section,
#earlier-issues-section,
#document-feedback-section {
    width: 100%;
}

/* Still open from earlier rounds (2026-10-02): grey, below the Resolved list. */
.earlier-issues-summary {
    cursor: pointer;
    margin: var(--sp-3) 0 var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.earlier-issues-note {
    margin: 0 0 var(--sp-2);
    font-size: 11px;
    color: var(--text-muted);
}

.earlier-issue {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2) 6px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}

.earlier-issue-quote {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-style: italic;
    text-align: left;
    text-decoration: underline dotted;
    cursor: pointer;
}

.earlier-issue-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.earlier-issue-status {
    flex: 1 1 auto;
    font-size: 11px;
}

.review-history-quote {
    display: block;
    margin-top: var(--sp-1);
    color: var(--text-muted);
    font-style: italic;
}

.resolved-comment-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 4px 6px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

/* This row uses flex layout; the shared location-delete rule is absolute
   for card overlays and otherwise places this control over the page header. */
.resolved-comment-row .comment-location-delete {
    position: static;
    flex: 0 0 auto;
}

.resolved-comment-row:hover {
    background: var(--bg-hover);
}

.resolved-comment-id {
    flex: 0 0 auto;
}

/* Reopen: small and grey, shown when the row is hovered */
.resolved-comment-reopen {
    flex: 0 0 auto;
    visibility: hidden;
    min-height: 18px;
    padding: 0 6px;
    border-color: var(--border-color);
    color: var(--text-muted);
    font-size: 10px;
}

.resolved-comment-row:hover .resolved-comment-reopen {
    visibility: visible;
}

.resolved-comment-reopen:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-tint);
}

.resolved-comment-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-apply-all {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 5px 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ac-apply-all:hover {
    background: var(--accent-hover);
}

.ac-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-correction {
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 6px 8px;
}

.ac-loc {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-family: monospace;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}

.ac-suggested {
    margin: 4px 0 6px;
    padding: 3px 6px;
    background: #fff9c4;
    color: #2b2b2b;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
}

.ac-actions {
    display: flex;
    gap: 6px;
}

.ac-accept,
.ac-reject {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-button);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}

.ac-accept:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.ac-reject:hover {
    background: var(--error-color);
    color: #fff;
    border-color: var(--error-color);
}

/* Change control (plan 17): amend a suggestion before applying it. */
.ac-change {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-button);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}

.ac-change:hover {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}

.ac-change-input {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 6px;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--secondary);
    border-radius: 3px;
    background: #fff9c4;
    color: #2b2b2b;
    resize: vertical;
}

.ac-similarity-note {
    margin: 0 0 6px;
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--secondary-tint);
    color: var(--secondary-deep);
    font-size: 11px;
}

.no-comments {
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
}

/* Document Level Feedback */
#document-feedback-section {
    width: 100%;
    margin-top: 20px;
}

#document-feedback-section h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 14px;
}

.document-feedback-box {
    padding: 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.5;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.document-feedback-box h1,
.document-feedback-box h2,
.document-feedback-box h3,
.document-feedback-box h4,
.document-feedback-box h5,
.document-feedback-box h6 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.document-feedback-box h1 {
    font-size: 18px;
}

.document-feedback-box h2 {
    font-size: 16px;
}

.document-feedback-box h3 {
    font-size: 14px;
}

.document-feedback-box p {
    margin: 0 0 8px 0;
}

.document-feedback-box p:last-child {
    margin-bottom: 0;
}

.document-feedback-box ul,
.document-feedback-box ol {
    margin: 0 0 8px 0;
    padding-left: 20px;
}

.document-feedback-box li {
    margin-bottom: 4px;
}

.document-feedback-box code {
    background-color: var(--bg-hover);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
}

.document-feedback-box pre {
    background-color: var(--bg-hover);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 8px 0;
}

.document-feedback-box pre code {
    background: none;
    padding: 0;
}

.document-feedback-box blockquote {
    border-left: 3px solid var(--accent);
    margin: 0 0 8px 0;
    padding-left: 12px;
    color: var(--text-secondary);
}

/* Anchor navigation */
.comment-anchor-nav {
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 0px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.anchor-nav-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 2px;
    transition: color ease 0.15s;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    align-items: center;
}

.anchor-nav-btn:hover {
    color: var(--accent);
}

.anchor-nav-btn:disabled {
    color: var(--border-color);
    cursor: default;
}

.anchor-nav-indicator {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 40px;
    text-align: center;
}

/* Clickable ID links in comment text */
.id-link {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: color ease 0.15s;
}

.id-link:hover {
    color: var(--accent-hover);
    text-decoration-style: solid;
}

.upload-instructions-btn input[type="file"] {
    display: none;
}

.save-instructions-btn:hover {
    background-color: var(--accent-hover);
}

/* ═══════════════ Review template box (plan 13) ═══════════════ */
.review-template-box {
    width: 100%;
    margin-top: var(--sp-3);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.review-template-header {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    box-sizing: border-box;
    transition: background-color ease 0.15s;
}

.review-template-header .toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-template-header .toggle-name {
    color: var(--text-primary);
    font-weight: 600;
}

.review-template-header .toggle-arrow {
    font-size: 10px;
    display: inline-block;
    flex-shrink: 0;
    transition: transform ease 0.2s;
}

.review-template-header .toggle-arrow.expanded {
    transform: rotate(90deg);
}

.review-template-header:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.review-template-body {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0 var(--sp-3) var(--sp-3);
}

.review-template-body.collapsed {
    display: none;
}

.review-template-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.review-template-select {
    flex: 1 1 140px;
}

#document-context-selector:disabled {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
}

.exemplar-set-row .field-label {
    margin-right: var(--sp-1);
}

#review-prompt-textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--sp-2);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

#review-prompt-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

#review-prompt-textarea::placeholder {
    color: var(--text-muted);
}

/* Style-guide dialog editor (plan 15): same look as the prompt editor. */
.style-guide-editor {
    width: 100%;
    min-height: 320px;
    padding: var(--sp-2);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.style-guide-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.style-guide-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.review-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.review-prompt-actions-spacer {
    flex: 1 1 0;
}

/* Prompt preview (markdown rendered) */
.prompt-preview {
    padding: var(--sp-2) var(--sp-3);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.5;
    min-height: 60px;
    max-height: 300px;
    overflow-y: auto;
}

.prompt-preview h1,
.prompt-preview h2,
.prompt-preview h3,
.prompt-preview h4,
.prompt-preview h5,
.prompt-preview h6 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.prompt-preview h1 {
    font-size: 18px;
}

.prompt-preview h2 {
    font-size: 16px;
}

.prompt-preview h3 {
    font-size: 14px;
}

.prompt-preview p {
    margin: 0 0 8px 0;
}

.prompt-preview p:last-child {
    margin-bottom: 0;
}

.prompt-preview ul,
.prompt-preview ol {
    margin: 0 0 8px 0;
    padding-left: 20px;
}

.prompt-preview li {
    margin-bottom: 4px;
}

.prompt-preview code {
    background-color: var(--bg-hover);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
}

.prompt-preview pre {
    background-color: var(--bg-hover);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 8px 0;
}

.prompt-preview pre code {
    background: none;
    padding: 0;
}

.prompt-preview blockquote {
    border-left: 3px solid var(--accent);
    margin: 0 0 8px 0;
    padding-left: 12px;
    color: var(--text-secondary);
}

/* ═══════════════ Document context viewer (read-only) ═══════════════ */

.context-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.context-viewer-dialog {
    background: var(--bg-secondary);
    border-radius: 8px;
    width: calc(100% - 24px);
    max-width: 1500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.context-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #555);
}

.context-viewer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.context-viewer-close {
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.context-viewer-body {
    padding: 12px 16px;
    overflow: auto;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.review-history-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.review-history-field input,
.review-history-field select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--sp-2);
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.review-history-actions,
.review-history-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.review-history-decision .review-history-field {
    flex: 1 1 220px;
}

.review-history-list details {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-color);
}

.review-history-list {
    overflow-wrap: anywhere;
}

/* An expanded history issue: its facts, then each sentence in context. */
.review-history-facts p,
.review-history-sentence p {
    margin: var(--sp-1) 0;
    color: var(--text-secondary);
}

.review-history-context {
    margin-top: var(--sp-2);
}

.review-history-see-also {
    margin: var(--sp-3) 0 0;
    color: var(--text-muted);
    font-weight: 600;
}

.review-history-sentence + .review-history-sentence {
    margin-top: var(--sp-3);
}

.review-history-sentence blockquote {
    margin: var(--sp-1) 0;
    padding: var(--sp-1) var(--sp-2);
    border-left: 3px solid var(--primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.review-history-sentence blockquote.review-history-recorded {
    border-left-color: var(--border-color);
    color: var(--text-secondary);
    font-style: italic;
}

.review-history-sentence mark {
    background: var(--secondary-tint);
    color: inherit;
}

.review-history-status[data-status="missing"] {
    color: var(--danger);
}

.review-history-status[data-status="reworded"],
.review-history-status[data-status="repeated"] {
    color: var(--secondary);
}

.context-viewer-body h1,
.context-viewer-body h2,
.context-viewer-body h3 {
    color: var(--text-primary);
    margin: 14px 0 6px 0;
    line-height: 1.3;
}

.context-viewer-body h1 { font-size: 17px; }
.context-viewer-body h2 { font-size: 15px; }
.context-viewer-body h3 { font-size: 13px; }

.context-viewer-body ul,
.context-viewer-body ol {
    margin: 6px 0;
    padding-left: 22px;
}

.context-viewer-body table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
    display: block;
    overflow-x: auto;
}

.context-viewer-body th,
.context-viewer-body td {
    border: 1px solid var(--border-color, #555);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}

.context-viewer-body th {
    background: var(--accent-hover-bg);
    font-weight: 600;
}

.context-viewer-body tr:nth-child(even) td {
    background: rgba(128, 128, 128, 0.08);
}

.context-viewer-note {
    font-style: italic;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent);
    padding-left: 8px;
}

.context-viewer-json {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
}

/* Font/size shifts and custom character styles in the reviewer-view; a
   colour-only span (.text-colour) shows the colour itself via inline style */
.font-shift {
  border-bottom: 1px dotted #8a8886;
  cursor: help;
}
.text-colour {
  cursor: help;
}

/* Click a figure image to toggle full size (zoom) */
.exemplar-figure.expanded {
    max-height: none;
    cursor: zoom-out;
}

/* Running session cost beside the Review Diagnostics title */
.review-cost-badge {
    margin-left: auto;
    margin-right: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #605e5c);
}

.selection-section-label {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The bold review-scope line just above the divider: which part of the
   document the visible cards actually reviewed (section reviews only). */
.active-review-scope {
    margin-top: var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resolved list header: title on the left, Clear on the right */
.resolved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

/* Matches the review-template box's spacing so the panels read as one family */
.section-help-panel {
    width: 100%;
    /* Include the frame in the scroll viewport's available width. */
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: anywhere;
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary);
}

.section-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.section-help-title {
    min-width: 0;
    font-weight: 600;
    font-size: 12px;
}

.section-help-close {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.section-help-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.section-help-tab {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}

.section-help-tab.active {
    border-color: var(--accent);
    color: var(--accent);
}

.section-help-body {
    max-height: 60vh;
    overflow: auto;
}

.section-help-body .exemplar-figure {
    max-width: 100%;
}

.section-help-match {
    font-size: 11px;
    color: var(--text-muted);
    margin: 8px 0 4px 0;
}

/* Two lines are reserved so the boxes below don't jump as the streamed
   status text grows/shrinks between one and two lines. */
.section-help-status {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.35;
    min-height: 2.7em;
}

.section-help-error {
    color: #ff6b6b;
}

.section-help-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.section-help-finding {
    border-left: 3px solid var(--border-color);
    padding: 6px 8px;
    margin: 6px 0;
    background-color: var(--bg-primary, transparent);
}

.section-help-finding.HIGH { border-left-color: var(--severity-high, #d13438); }
.section-help-finding.MEDIUM { border-left-color: var(--severity-medium, #ffb900); }
.section-help-finding.LOW { border-left-color: var(--severity-low, #107c10); }

.section-help-finding-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.section-help-finding-add {
    margin-top: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
}

.section-help-finding-add:disabled {
    opacity: 0.5;
    cursor: default;
}

.section-help-finding-dismiss {
    margin-top: 4px;
    margin-left: var(--sp-1);
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.section-help-finding-dismiss:disabled {
    opacity: 0.5;
    cursor: default;
}

.section-help-finding {
    cursor: pointer;
}

/* Autocorrect rows on a selection finding: suggested text + Accept button */
.section-help-corrections {
    margin: 4px 0;
}

.section-help-correction {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 0;
    font-size: 11px;
}

.section-help-correction-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-style: italic;
}

/* Session cost beside the effort slider: click opens the diagnostics
   breakdown. Styled as quiet text, not a button. */
.session-cost-badge {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
}

.session-cost-badge:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Figure crops placed inside a table cell: signatures and seals (plan 08)
   but also side-by-side photos laid out in a table - so the cell's width,
   not a thumbnail height, bounds them. */
.exemplar-table td .exemplar-figure,
.exemplar-table th .exemplar-figure {
  display: block;
  max-width: 100%;
  max-height: 45vh;
  width: auto;
  margin: 0.25rem 0;
}

/* Footnotes / endnotes rendered after the paragraph that cites them (grey tint) */
.exemplar-footnote {
  color: #6b6b6b;
  font-size: 0.92em;
}
.exemplar-footnote-tag {
  font-weight: 600;
  margin-right: 0.35em;
}

/* ===== Card chat (plan 17): "Discuss this issue" in the section-help panel ===== */
.card-chat-finding {
    border-left: 4px solid var(--severity-medium);
    padding: var(--sp-2);
    margin-bottom: var(--sp-2);
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
}

.card-chat-finding.severity-high {
    border-left-color: var(--severity-high);
}

.card-chat-finding.severity-low {
    border-left-color: var(--severity-low);
}

.card-chat-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
}

/* The anchor chips sit together (the header variant pushes itself right) */
.card-chat-anchors .comment-header-anchor {
    margin-left: 0;
}

.card-chat-finding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    font-size: 11px;
    color: var(--text-muted);
}

.card-chat-resolved {
    color: var(--primary);
    font-weight: 600;
}

/* The header's right side: the cost badge, then the end-state / New chat */
.card-chat-header-right {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.card-chat-cost {
    color: var(--text-muted);
    white-space: nowrap;
}

/* The verdict's sentences (2026-09-06): chips under the feedback */
.comment-feedback[onclick] {
    cursor: pointer;
}

.comment-feedback-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
}

.comment-feedback-anchors .comment-header-anchor {
    margin-left: 0;
}

/* A delete correction's target as shown in the row / the stepper */
.ac-suggested.ac-delete {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* An insert correction's lead-in: "New paragraph after this sentence:" */
.ac-insert-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* "on card #12": where the stepped edit lives in the pane */
.card-chat-step-card {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

/* The brief's Rebuild button beside its sources line */
.section-help-rebuild {
    margin-left: var(--sp-2);
    vertical-align: middle;
}

/* The document chat's header (plan 20): a neutral strip, no severity */
.card-chat-document {
    border-left-color: var(--primary);
}

.card-chat-summary {
    font-size: 12px;
    color: var(--text-primary);
}

.card-chat-history {
    max-width: 180px;
    font-size: 11px;
    padding: 1px 4px;
}

/* Everything that navigates on click (IDs, chips, the stepper's edit block) */
.card-chat [data-anchor] {
    cursor: pointer;
}

/* What a navigation did in the document, shown briefly under the finding */
.card-chat-notice {
    margin: 0 0 var(--sp-1);
    min-height: 14px;
    font-size: 11px;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.3s;
}

.card-chat-notice.visible {
    opacity: 1;
}

.card-chat-turns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.card-chat-turn {
    padding: var(--sp-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.card-chat-turn.user {
    background: var(--primary-tint);
    align-self: flex-end;
    max-width: 90%;
    white-space: pre-wrap;
}

.card-chat-turn.assistant {
    background: var(--bg-tertiary);
}

.card-chat-live {
    white-space: pre-wrap;
}

.card-chat-status {
    margin: var(--sp-1) 0 0;
}

/* A reply in progress: three dots pulse beside the status line, so a long
   silent think still shows something happening (2026-10-12). */
.card-chat-status-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}

.card-chat-status-row .card-chat-status {
    margin: 0;
}

.card-chat-thinking {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
}

.card-chat-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: card-chat-thinking 1.2s ease-in-out infinite;
}

.card-chat-thinking span:nth-child(2) {
    animation-delay: 0.15s;
}

.card-chat-thinking span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes card-chat-thinking {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-chat-thinking span {
        animation-duration: 2.4s;
    }
}

.card-chat-composer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}

.card-chat-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 12px;
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: vertical;
}

.card-chat-actions {
    display: flex;
    gap: var(--sp-1);
    justify-content: flex-end;
}

.card-chat-stepper {
    margin: var(--sp-2) 0;
    padding: var(--sp-2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.card-chat-step-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
}

/* Prev / next through a walk of several edits (2026-09-08). */
.card-chat-step-nav {
    display: inline-flex;
    gap: 2px;
}

.card-chat-step-nav .btn-icon {
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 1;
}

.card-chat-current {
    margin: var(--sp-1) 0;
    font-size: 12px;
    color: var(--text-muted);
}

.card-chat-step-correction {
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 6px 8px;
}

.card-chat-dropped {
    margin-top: var(--sp-1);
    font-size: 11px;
    color: var(--text-muted);
}

/* The chat window (plan 19): the same chat laid out full-height in an Office
   dialog - the conversation scrolls, the composer stays at the bottom. */
body.chat-dialog {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    font-size: 12px;
    color: var(--text-primary);
}

body.chat-dialog .chat-dialog-title {
    flex: 0 0 auto;
    margin-bottom: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
}

/* Plan 20: the window's tabs - the document chat and a card's chat, both
   live at once (Office allows one dialog per taskpane) */
body.chat-dialog .chat-dialog-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-color);
}

body.chat-dialog .chat-tab {
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.chat-dialog .chat-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    border-color: var(--primary);
    cursor: default;
}

body.chat-dialog .card-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body.chat-dialog .card-chat-turns {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

body.chat-dialog .card-chat-finding,
body.chat-dialog .card-chat-notice,
body.chat-dialog .card-chat-stepper,
body.chat-dialog .card-chat-composer,
body.chat-dialog .provider-fallback-notice,
body.chat-dialog .section-help-error {
    flex: 0 0 auto;
}

/* The stepper can be tall (Change opens an editor): it scrolls on its own
   rather than squeezing the conversation to nothing. */
body.chat-dialog .card-chat-stepper {
    max-height: 45vh;
    overflow: auto;
}

body.chat-dialog .card-chat-input {
    min-height: 56px;
}

/* Brief self-dismissing notice (showToast). */
.toast {
    position: fixed;
    left: 50%;
    bottom: var(--sp-4);
    transform: translateX(-50%);
    max-width: 90%;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
}

.toast.visible {
    opacity: 0.95;
}

/* ===== Issue capture (pilot feedback): under the account in the header ===== */
.brand-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1 1 auto;
}

.brand-account .account-area {
    width: 100%;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.issue-shot-box {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.issue-shot {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: zoom-in;
}

.issue-shot.thumb {
    max-height: 120px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

.issue-paste {
    padding: var(--sp-3);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    outline: none;
}

.issue-paste:focus {
    border-color: var(--primary);
}

.issue-upload,
.issue-attach {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin: var(--sp-1) 0;
}

.issue-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.issue-comment {
    font-size: 12px;
    white-space: pre-wrap;
}

.issue-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.issue-actions {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

/* Opening the section-help panel from far down the list: a visible flash. */
.section-help-panel.flash {
    animation: panel-flash 1.2s ease-out;
}

@keyframes panel-flash {
    from {
        box-shadow: 0 0 0 3px var(--secondary);
    }
    to {
        box-shadow: none;
    }
}

.active-review-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.active-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-left: auto;
}
.active-review-actions .btn { white-space: nowrap; }

.active-review-scope.document {
    color: var(--primary);
}
.shared-session-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
}
.shared-session-controls span { flex-basis: 100%; overflow-wrap: anywhere; }

/* Account recovery is rendered before the main review UI is available. */
body > p,
body > .shared-session-controls {
    padding: 12px 16px;
    box-sizing: border-box;
}

.shared-session-controls {
    color: var(--text-primary);
    line-height: 1.5;
    width: 100%;
    min-width: 0;
}

.shared-session-controls a,
.shared-session-controls a:visited {
    color: var(--text-primary);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.shared-session-controls .btn {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--border-color);
    white-space: normal;
    min-height: 34px;
}

.shared-session-controls .btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.shared-session-controls :focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.shared-support {
    flex-basis: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.shared-support h3 {
    margin-top: 0;
}

.shared-picker-fields,
.shared-picker-fields label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.shared-picker-fields {
    gap: 16px;
}

.shared-picker-fields input,
.shared-picker-fields select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px;
    font: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* The impersonation picker's user combobox (2026-10-01). */
.shared-user-search {
    position: relative;
    min-width: 0;
}

.shared-user-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shared-user-suggestions [role="option"] {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
}

.shared-user-suggestions [role="option"]:hover,
.shared-user-suggestions [role="option"][aria-selected="true"] {
    background: var(--primary-tint);
}

.shared-user-name {
    font-weight: 600;
}

.shared-user-detail,
.shared-user-empty {
    font-size: 12px;
    color: var(--text-secondary);
}

.shared-user-empty {
    padding: 8px 12px;
}

.shared-picker-fields > .btn {
    justify-self: end;
}

.shared-picker-fields input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.shared-support .btn:disabled {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: var(--bg-secondary);
    opacity: 1;
}

.office-tool-action {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--border-color, #888);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.office-tool-action pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}
.office-tool-action .btn {
  margin: 8px 8px 0 0;
}

.review-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#review-entry-history {
  margin-top: 16px;
  overflow-wrap: anywhere;
}

#document-storage-error {
  padding: 20px;
  max-width: 640px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
#document-storage-error h2 {
  font-size: 20px;
}
#document-storage-error p {
  line-height: 1.5;
}
#document-storage-error details {
  margin-top: 20px;
}


/* ===== Resource library: review templates and exemplar sets (2026-09-30) =====
   One look in the portal and the Word pane, which shows the same library in a
   dialog. Moved here from shared.html, which loads this file too. */
.resource-library-layout { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 24px; }
.resource-library [data-library-list] { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.resource-library [data-library-list] .btn { text-align: left; overflow-wrap: anywhere; }
/* Long names wrap inside the list's column (2026-10-02): the pane's base .btn
   keeps text on one line, and a long set name pushed the list under the set page. */
.resource-library [data-library-list] { min-width: 0; }
.resource-library [data-library-list] .btn { white-space: normal; min-width: 0; max-width: 100%; justify-content: flex-start; }
.resource-library [data-library-list] .library-empty { margin: 4px 0; color: var(--text-secondary); }
.resource-library-detail { min-width: 0; max-height: 76vh; overflow: auto; padding: 4px 12px; }
.resource-library-detail h3 { margin-top: 0; }
/* 2026-09-30: the library's lists have a title with New above them. */
.library-intro { max-width: 80ch; }
.library-intro p { margin: 6px 0; }
.library-column { display: grid; gap: 10px; align-content: start; min-width: 0; }
.library-column-head { display: grid; gap: 8px; }
.library-column-head h3 { margin: 0; font-size: 16px; }
.resource-library .library-new { display: inline-flex; align-items: center; gap: 6px; justify-content: center; margin: 0; border-style: dashed; }
.library-new svg { width: 16px; height: 16px; }
/* Status chips: coloured, a warning with its icon. */
.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.status-chip svg { width: 13px; height: 13px; flex: none; }
.status-chip-ok { background: var(--primary-tint); color: var(--primary-hover); }
.status-chip-warn { background: #fff1db; color: #8a4b00; }
.status-chip-danger { background: #fdecec; color: #b42318; }
.status-chip-muted { background: #eef1ef; color: #4b5b52; }
.status-chip-busy { background: #e6ecfb; color: #243f8f; }
a.guide-link { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.guide-link svg { width: 14px; height: 14px; }
/* Wins over the library's full-width input rule, which had stretched the
hidden file input past the page edge. */
.resource-library .visually-hidden { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drop-zone-pick { position: relative; }
/* An exemplar set's page (2026-09-30). */
.set-head { display: flex; gap: 16px; align-items: flex-start; }
.set-head-text { flex: 1 1 auto; min-width: 0; }
.set-head-text h3 { margin: 0 0 4px; font-size: 22px; }
.set-head-text p { margin: 2px 0; }
.set-linked { font-size: 13px; }
.set-head-actions { display: flex; gap: 8px; flex: none; }
.resource-library .set-head-actions .btn { margin: 0; }
.set-intro { max-width: 75ch; }
.set-overview { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.set-overview-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); font: 600 14px/1.4 "Segoe UI", sans-serif; color: var(--text-primary); cursor: pointer; }
.set-overview-item:hover { background: var(--primary-tint); border-color: var(--link); }
.set-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid #f0c98a; border-left: 4px solid #d98a00; border-radius: 8px; background: var(--secondary-tint); }
.set-attention p { margin: 0; flex: 1 1 280px; color: var(--text-primary); }
.set-attention-icon svg { width: 22px; height: 22px; color: #b86e00; display: block; }
.resource-library [data-library-list] .btn { margin: 0; }
.resource-library .set-attention .btn { margin: 0; }
.resource-library .set-part { border: 1px solid var(--border-color); background: var(--bg-primary); padding: 16px 18px; margin-top: 16px; border-radius: 10px; scroll-margin-top: 12px; }
.resource-library .set-part[data-focused] { border-color: var(--link); box-shadow: 0 0 0 2px #cfe3d6; }
.set-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set-part-head h4 { margin: 0; font-size: 17px; }
.set-part > p { margin: 8px 0; max-width: 75ch; }
.set-hint { font-size: 13px; }
.set-stale-note { color: var(--severity-medium) !important; }
.set-view { margin-top: 8px; }
.set-view > summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 4px 0; }
.drop-zone { margin: 12px 0 6px; padding: 16px; border: 2px dashed var(--border-color); border-radius: 10px; background: var(--bg-secondary); display: grid; gap: 8px; }
.drop-zone-over { border-color: var(--link); background: var(--primary-tint); }
.drop-zone-ready { border-style: solid; border-color: var(--link); }
.drop-zone-prompt { margin: 0 !important; color: var(--text-primary) !important; }
.drop-zone-advice { display: block; font-size: 13px; color: var(--text-primary); }
.drop-zone-prompt svg { width: 20px; height: 20px; color: var(--link); vertical-align: -4px; margin-right: 8px; }
.resource-library .drop-zone-pick { display: inline; margin: 0; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.drop-zone-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drop-zone-files:empty { display: none; }
.drop-zone-files li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; overflow-wrap: anywhere; }
.resource-library .drop-zone-files .btn { margin: 0; width: 32px; min-width: 32px; min-height: 32px; }
.drop-zone-actions .btn { margin: 0 !important; }
.report-list { display: grid; gap: 8px; margin-top: 10px; }
.report-row { border: 1px solid var(--border-color); border-radius: 8px; padding: 0 12px; background: var(--bg-primary); }
.report-row[open] { padding-bottom: 10px; }
.report-row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; cursor: pointer; }
.report-name { font-weight: 600; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.report-facts { font-size: 13px; margin: 0 0 6px !important; }
.report-actions, .template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.resource-library .report-actions .btn, .resource-library .template-actions .btn { margin: 0; }
.actions-spacer { flex: 1 1 auto; }
/* The structure profile as an outline (2026-09-30). */
.profile-view h5 { font-size: 14px; margin: 14px 0 6px; }
.profile-outline { margin: 0; padding-left: 22px; }
.profile-outline .profile-outline { margin-top: 4px; border-left: 2px solid var(--border-color); padding-left: 20px; }
.profile-outline li { margin: 6px 0; }
.profile-outline p { margin: 2px 0 !important; font-size: 13px; }
.profile-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.profile-agreement { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 8px; padding: 0 7px; }
.profile-glossary { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 4px 14px; }
.profile-glossary dt { font-weight: 600; }
.profile-glossary dd { margin: 0; }
@media (max-width: 720px) { .profile-glossary { grid-template-columns: minmax(0, 1fr); } .set-head { flex-wrap: wrap; } }
.resource-library label { display: grid; gap: 6px; margin: 12px 0; }
.resource-library :is(input,textarea,select) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; font: inherit; padding: 8px; }
.resource-library .btn { margin: 4px 6px 4px 0; }
.resource-library .workflow-markdown { overflow: auto; }
/* 2026-09-30: an editor's Save and Cancel stay at the top with its state. */
.resource-library .editor-actions { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 8px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
.resource-library .editor-actions > strong { margin-right: auto; }
.resource-library .editor-actions [role="status"] { font-size: 13px; color: var(--text-secondary); flex-basis: 100%; }
.resource-library .action-help { margin: 4px 0 16px; font-size: 13px; color: var(--text-secondary); display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.resource-library .action-help dt { font-weight: 600; color: var(--text-primary); }
.resource-library .action-help dd { margin: 0; }
.resource-library [data-set-summary] h4 { margin-top: 0; }
@media (max-width: 720px) { .resource-library .action-help { grid-template-columns: minmax(0, 1fr); } .resource-library .action-help dd { margin-bottom: 6px; } }
@media (max-width: 720px) { .resource-library-layout { grid-template-columns: minmax(0, 1fr); } }
.workflow-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); padding: 0; margin: 20px 0 0; background: transparent; }
.workflow-tab { flex: 1 1 0; min-width: 0; padding: 13px 10px; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; background: transparent; font: 500 14px/1.4 "Segoe UI", sans-serif; color: var(--text-secondary); cursor: pointer; overflow-wrap: anywhere; border-radius: 8px 8px 0 0; }
.workflow-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.workflow-tab[aria-selected="true"] { background: var(--primary-tint); color: var(--text-primary); font-weight: 700; border-bottom-color: var(--link); }
.workflow-tab-panel { border: 1px solid var(--border-color); border-top: 0; padding: 16px; min-width: 0; border-radius: 0 0 8px 8px; }
.workflow-markdown { line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.workflow-markdown h1, .workflow-markdown h2 { font-size: 1.25rem; }
.workflow-markdown h3, .workflow-markdown h4 { font-size: 1.1rem; }
.workflow-markdown pre { background: var(--bg-secondary); padding: 12px; }
.workflow-markdown.exemplar-document { overflow-wrap: normal; overflow: auto; }
.workflow-markdown.exemplar-document .exemplar-table { display: table; font-size: inherit; }
.workflow-markdown table { display: block; overflow: auto; max-width: 100%; border-collapse: collapse; }
.workflow-markdown th, .workflow-markdown td { border: 1px solid var(--border-color); padding: 8px; }
.workflow-readable dt { font-weight: 600; margin-top: 10px; }
.workflow-readable dd { margin: 4px 0 12px 12px; overflow-wrap: anywhere; }
.workflow-readable ul { padding-left: 20px; }
.workflow-json { background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 12px; line-height: 1.6; }
/* Raw text and JSON wrap in the pane as in the portal (2026-10-11: one long raw
   Markdown line stretched the Word dialog's report viewer and its tabs). */
.workflow-json { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
.json-key { color: #1e40af; font-weight: 600; }
.json-string { color: #166534; }
.json-literal { color: #9a3412; }

/* The library's own base look, so it matches in the pane (the portal's
   .shared-shell rules add its larger buttons on top). */
.resource-library .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.resource-library .btn[aria-pressed="true"]:not(.btn-primary):not(.btn-danger) { background: var(--primary-tint); border-color: var(--link); color: var(--text-primary); font-weight: 700; }
.resource-library .btn.admin-icon { width: 36px; min-width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); }
.resource-library .btn.admin-icon svg { width: 18px; height: 18px; }
.resource-library .btn.admin-icon.admin-icon-danger { color: var(--danger); border-color: #e3a3a3; }
.resource-library .btn.admin-icon.admin-icon-danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger); }
.resource-library .btn.admin-icon:disabled { opacity: 0.45; }
.resource-library button:not(:disabled), .resource-library summary { cursor: pointer; }
/* Narrow (phone, Word pane): the list of templates or sets wraps as a few
   rows of names instead of a tall column above the page. */
@media (max-width: 720px) {
  .resource-library [data-library-list] { flex-direction: row; flex-wrap: wrap; }
  .resource-library [data-library-list] .btn { width: auto; flex: 0 1 auto; }
  .resource-library .workflow-tab { font-size: 12px; padding: 10px 5px; }
  .resource-library .workflow-tab-panel { padding: 10px; }
}
/* In the Word pane's dialog the dialog scrolls, not the page inside it. */
.context-viewer-body .resource-library-detail { max-height: none; overflow: visible; padding: 4px 0; }

.context-viewer-body .resource-library .library-intro { font-size: 13px; }

/* Pane forms and the set row (2026-09-30): the portal's labelled fields and
   house buttons, in place of hand-styled dialogs. */
.pane-form-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pane-form { background: var(--bg-secondary); border-radius: 8px; padding: 18px; width: 90%; max-width: 320px; display: grid; gap: 10px; box-sizing: border-box; }
.pane-form h3 { margin: 0; font-size: 15px; color: var(--text-primary); }
.pane-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pane-form input, .pane-form select { width: 100%; box-sizing: border-box; padding: 7px 8px; font: inherit; font-weight: 400; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; }
.pane-form input[aria-invalid="true"] { border-color: var(--danger); }
.pane-form-hint { margin: 0; font-size: 12px; color: var(--text-secondary); }
.pane-form-error { font-size: 12px; color: var(--danger); }
.pane-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.exemplar-set-status:empty { display: none; }
.exemplar-set-status .status-chip { cursor: help; }
[data-review-confirm] .btn { min-width: 84px; }
.library-dialog { max-width: 100%; }
.context-viewer-body .resource-library > h2 { display: none; }

/* The pane's plain buttons in the library look like its neutral buttons. */
.context-viewer-body .resource-library .btn:not(.btn-primary):not(.btn-danger):not(.admin-icon):not([aria-pressed="true"]) { border: 1px solid var(--border-color); background: var(--bg-button); color: var(--text-primary); }
.context-viewer-body .resource-library .btn:not(.btn-primary):not(.btn-danger):not(.admin-icon):hover:not(:disabled) { background: var(--bg-hover); }
.context-viewer-body .resource-library .library-new { border-style: dashed; }
.drop-zone-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.drop-zone-files li { justify-content: flex-start; }
.drop-zone-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.resource-library .drop-zone-files .btn.btn-sm { width: auto; min-width: 0; padding: 4px 10px; margin: 0; }
/* The template box header (2026-10-01): name, then the web-portal link at the right. */
.review-template-header .toggle-text { flex: 1 1 auto; min-width: 0; }
.review-template-header .header-portal-link { display: inline-flex; align-items: center; gap: 4px; flex: none; text-decoration: none; padding: 2px 8px; font-size: 12px; }
.review-template-header .header-portal-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Choices in the library's list stay white, as in the portal (2026-10-01). */
.context-viewer-body .resource-library [data-library-list] .btn:not([aria-pressed="true"]) { background: var(--bg-primary); }

/* The house dialogs (src/shared/dialogs.ts, 2026-10-11): every confirmation and
   notice, in the pane, the chat page and the portal, instead of the browser's. */
.sr-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 30, 23, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}
.sr-dialog {
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    padding: 18px 20px 16px;
    width: min(440px, 100%);
}
.sr-dialog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sr-dialog-logo {
    height: 22px;
    width: auto;
}
.sr-dialog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.sr-dialog-message {
    margin: 0 0 18px;
    white-space: pre-line;
    line-height: 1.45;
}
.sr-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}