/* Shared presentation rules for the recording workspace.
   Loaded after the version-specific layouts. Layout/behavior remain owned by
   shell, detail and v4; shared controls and alignment are defined here. */
:root {
  --ui-font: "Microsoft YaHei", "Segoe UI", "PingFang SC", sans-serif;
  --ui-ink: #243a33;
  --ui-muted: #64756e;
  --ui-green: #216b5b;
  --ui-bg: #f6f8f7;
  --ui-line: #dfe7e2;
  --ui-soft: #eaf3ee;
  --ui-radius: 8px;
  --ui-control: 36px;
  --ui-field: 40px;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --green: var(--ui-green);
  --green-dark: #185646;
  --green-soft: var(--ui-soft);
  --border: var(--ui-line);
  --reader-ink: var(--ui-ink);
  --reader-muted: var(--ui-muted);
  --reader-line: var(--ui-line);
}
body, .v4-root {
  font-family: var(--ui-font);
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.6;
}
.v4-root {
  --ink: var(--ui-ink); --ink-2: #465c52; --muted: var(--ui-muted);
  --green: var(--ui-green); --line: var(--ui-line); --bg: var(--ui-bg);
  --green-soft: var(--ui-soft);
}
body:not([data-mode="meeting"]), .v4-root { background: var(--ui-bg); }
button, input, select, textarea { font-family: var(--ui-font); }
button, .v4-root button { font-size: 14px; line-height: 20px; }
button.primary, button.secondary, a.primary, a.secondary,
.v4-root .btn.primary, .v4-root .btn.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ui-control); min-height: var(--ui-control);
  padding: 0 14px; border: 1px solid transparent;
  border-radius: var(--ui-radius); font-size: 14px; line-height: 20px;
  font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: none;
}
button.primary, a.primary, .v4-root .btn.primary { background: var(--ui-green); color: #fff; }
button.secondary, a.secondary, .v4-root .btn.ghost { background: #fff; color: var(--ui-ink); border-color: var(--ui-line); }
button:disabled, a[aria-disabled="true"] { cursor: not-allowed; }
.icon, .v4-root .icon { width: 18px; height: 18px; flex: none; }
.icon-button, .title-edit, .v4-root .v4-more summary {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  padding: 8px; border-radius: var(--ui-radius); display: inline-grid; place-items: center;
  box-sizing: border-box;
}
.quiet-link, .text-button, .v4-root .btn.text {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 6px; min-height: 28px; font-size: 13px; line-height: 20px;
  color: var(--ui-green); font-weight: 500; border-radius: 6px; text-decoration: none;
}
h1[tabindex="-1"]:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #438c79; outline-offset: 2px;
}
.library-heading h1, .settings-home>h1, .v4-root .h1 { font-size: 26px; line-height: 36px; font-weight: 600; letter-spacing: 0; }

/* Header and list: one control baseline, fixed metadata columns. */
.app-bar { height: 56px; padding: 0 24px; border-color: var(--ui-line); }
.app-bar .brand { gap: 10px; }
.app-bar .brand-mark, .v4-root .brand-mark { width: 34px; height: 34px; border-radius: 8px; }
.app-bar .brand-mark .icon, .v4-root .brand-mark .icon { width: 23px; height: 23px; }
.app-bar .brand-copy { flex-direction: column; align-items: flex-start; gap: 0; }
.app-bar .brand-copy .brand-company { font-size: 13px; line-height: 18px; letter-spacing: .04em; }
.app-bar .brand-copy>.brand-product { margin: 0; font-size: 11px; line-height: 16px; letter-spacing: 0; color: var(--ui-muted); }
.app-tools { gap: 8px; }
.app-bar .connection-dot { width: 36px; height: 36px; }
.library-link { font-size: 14px; line-height: 20px; padding: 8px 14px; }
body[data-mode="library"] .workspace>main, body[data-mode="settings"] .workspace>main { padding: 28px 32px 64px; }
.library-home, .settings-home { max-width: 1080px; margin: 0 auto; }
.library-heading { margin-bottom: 18px; }
.library-heading h1 { display: flex; align-items: center; gap: 10px; margin: 0; }
.library-heading .count { margin: 0; padding: 2px 8px; border-radius: 6px; font-size: 13px; line-height: 20px; }
.library-board { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; }
.library-toolbar { padding: 16px 20px; gap: 16px; align-items: center; }
.filters { gap: 8px; }
.filters button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 12px; font-size: 14px; line-height: 20px; }
.library-board .record-search { height: 36px; width: 272px; max-width: 30%; padding: 0 12px; border: 1px solid var(--ui-line); background: #f8faf9; gap: 8px; }
.library-board .record-search input { height: 34px; min-height: 0; font-size: 13px; line-height: 20px; }
.recordings { padding-bottom: 8px; }
.group-label { margin: 8px 20px; font-size: 12px; line-height: 20px; color: var(--ui-muted); }
.record-row { min-height: 66px; }
.record-link { grid-template-columns: 20px minmax(0,1fr) 190px 52px 64px; gap: 12px; min-height: 66px; padding: 10px 8px 10px 20px; }
.record-copy { gap: 2px; }
.record-copy strong { font-size: 15px; line-height: 22px; font-weight: 600; }
.record-customer, .record-meta, .record-status, .record-duration, .record-time { color: var(--ui-muted); font-size: 12px; line-height: 20px; }
.record-customer { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.record-status { white-space: normal; text-align: left; }
.record-duration, .record-time { text-align: right; font-variant-numeric: tabular-nums; }
.row-more { margin-right: 12px; }

/* Forms and dialogs share label spacing, field height and action alignment. */
.field, .settings-grid .field { gap: 6px; margin: 0 0 16px; font-size: 13px; line-height: 18px; color: #465c52; }
.field input, .field select, .settings-grid .field input, .settings-grid .field select,
.upload-customer-entry>input {
  box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--ui-line); border-radius: 8px; background: #fff;
  color: var(--ui-ink); font-size: 14px; line-height: 20px;
}
.field input::placeholder, .upload-customer-entry>input::placeholder { font-size: 13px; color: #7a8b83; }
.settings-layout { grid-template-columns: 184px minmax(0,1fr); gap: 24px; margin-top: 20px; }
.settings-nav a, .settings-segment a { min-height: 40px; padding: 8px 12px; font-size: 14px; line-height: 20px; }
.settings-main { padding: 24px; background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; min-width: 0; }
.settings-main h2 { margin: 0 0 12px; font-size: 18px; line-height: 26px; font-weight: 600; }
.settings-summary { margin: 0 0 16px; color: var(--ui-muted); font-size: 13px; line-height: 22px; }
.settings-intro { padding: 12px 14px; margin: 0 0 20px; font-size: 12px; line-height: 20px; border-radius: 8px; }
.settings-body .preset-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 16px; }
.settings-body .model-lookup { margin: 0 0 20px; gap: 12px; }
.model-lookup>span, .model-lookup button { font-size: 12px; line-height: 20px; }
.settings-grid { gap: 20px; }
.settings-grid fieldset { margin: 0; padding: 16px; min-width: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; }
.settings-grid legend { padding: 0 6px; font-size: 14px; line-height: 20px; color: var(--ui-ink); font-weight: 600; }
.settings-grid legend span { font-size: 11px; color: var(--ui-muted); }
.settings-grid .field:last-child { margin-bottom: 0; }
.settings-grid .check { box-sizing: border-box; min-height: 64px; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 12px; line-height: 20px; color: var(--ui-muted); }
.settings-grid .check input { width: 16px; height: 16px; margin: 0; }
.settings-footer { align-items: flex-start; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ui-line); gap: 12px; }
.probe-wrap { align-items: flex-start; gap: 6px; }
.probe-wrap .tiny { font-size: 12px; line-height: 20px; }
#crmSettingsForm { display: flex; flex-direction: column; max-height: none; }
#crmSettingsForm>p { margin: 0 0 16px; color: var(--ui-muted); font-size: 13px; line-height: 22px; }
#crmSettingsForm>small { margin: -8px 0 16px; color: var(--ui-muted); font-size: 12px; line-height: 20px; }
.crm-status-line { margin: 0 0 20px; color: var(--ui-green); font-size: 13px; line-height: 22px; font-weight: 500; }
#crmConfigMessage { padding: 0; margin: 0; min-height: 0; }
#crmConfigMessage:empty, #settingsMessage:empty { display: none; }
.crm-footer { align-items: center; }
.settings-back { margin-top: 12px; }
#uploadDialog { border-radius: 12px; }
#uploadDialog form { padding: 20px 24px; }
.upload-dialog-head { padding: 0; margin-bottom: 16px; }
.upload-dialog-head h2, .summary-editor-head h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
#uploadDialog .file-zone { min-height: 160px; padding: 16px; margin: 0 0 20px; gap: 8px; }
#uploadDialog .file-zone .upload-symbol { width: 34px; height: 34px; }
#uploadDialog .file-zone strong { font-size: 15px; line-height: 22px; }
#uploadDialog .file-help { margin: 0; font-size: 12px; line-height: 20px; }
#uploadDialog .title-field { margin-bottom: 20px; }
#uploadCustomerField { margin-top: 0; }
.upload-customer-heading { align-items: center; margin-bottom: 6px; }
.upload-customer-entry { align-items: center; gap: 8px; }
#uploadCustomerSearch { height: 40px; min-height: 40px; font-size: 13px; }
.upload-customer-hint { margin-top: 8px; color: var(--ui-muted); font-size: 12px; line-height: 20px; }
.upload-dialog-footer { margin-top: 20px; gap: 8px; }
.summary-editor-head, .summary-editor-footer { padding: 16px 24px; }
.summary-editor-body { padding: 20px 24px; }
.summary-editor-body label, #v4HeadlineField { font-size: 13px; line-height: 20px; margin: 0 0 8px; color: #465c52; }
#v4HeadlineField { display: flex; gap: 6px; margin-bottom: 16px; }
.summary-editor-body textarea { min-height: 200px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; font-size: 14px; line-height: 1.75; }
.summary-editor-body p { margin: 12px 0 0; font-size: 12px; line-height: 20px; }

/* Version-specific pages keep their layouts, with the same control baseline. */
@media(min-width:761px) {
  .detail-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 16px; padding: 12px 24px; margin: 0; }
  .detail-back { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; min-height: 36px; white-space: nowrap; font-size: 13px; }
  .detail-title-line { grid-column: 2; grid-row: 1; margin: 0; gap: 8px; }
  .detail-title { font-size: 24px; line-height: 34px; }
  .detail-meta { grid-column: 2; margin: 0; font-size: 12px; line-height: 20px; }
  .detail-head>.history-banner, .detail-head>.version-notice:not(.is-tucked) { grid-column: 1 / -1; }
  .detail-actions { align-items: center; }
  .version-picker select, .export-menu>summary { box-sizing: border-box; height: 36px; min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: 13px; line-height: 22px; }
  .version-picker select { max-width: 196px; }
  .summary-pane { padding: 16px 24px 24px; }
  .source-pane { padding: 12px 16px 24px; container-type: inline-size; }
  .source-pane .player-shell { margin-bottom: 12px; padding: 8px; gap: 6px; border-radius: 10px; }
  .source-pane .skip-button, .source-pane .rate-button, .source-pane #muteButton { min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 6px; font-size: 12px; }
  .source-pane .play-button { width: 36px; height: 36px; }
  .source-pane .player-times { font-size: 12px; }
  .source-pane .player-seek { min-width: 40px; margin: 0 4px; }
  #collapseSource { height: 32px; min-height: 32px; padding: 0 8px; font-size: 12px; }
}
@container(max-width:420px) { .source-pane .player-shell .skip-button { display: none; } }
.section-anchors button, .source-tabs button { font-size: 13px; line-height: 20px; }
.summary-section { border-color: var(--ui-line); }
.glance-caption, .section-label, .item-meta, .missing-line, .timing-hint { font-size: 12px; line-height: 20px; }
.glance-lead { font-size: 18px; line-height: 1.5; }
.item-text, .glance-rest, .transcript-segment p { font-size: 14px; line-height: 1.65; }
.v4-root .top { height: 56px; min-height: 56px; padding: 10px 24px; gap: 10px; }
.v4-root .ver { height: 36px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; line-height: 20px; }
.v4-root .brand { gap: 10px; font-size: 14px; line-height: 20px; }
.v4-root .brand small { font-size: 11px; line-height: 16px; }
.v4-root .nav button { font-size: 14px; line-height: 20px; }
.v4-root .page { padding-top: 28px; gap: 24px; }
.v4-root .page>section { scroll-margin-top: 80px; }
.v4-root .meta { gap: 6px 12px; margin-top: 6px; font-size: 12px; line-height: 20px; }
.v4-root .hero h2 { font-size: 20px; line-height: 1.5; }
.v4-root .hero p, .v4-root .li { font-size: 14px; line-height: 1.65; }
.v4-root .sec-h h3 { font-size: 18px; line-height: 26px; }
.v4-root .row { padding: 12px 18px; gap: 12px; }
.v4-root .row b { font-size: 15px; line-height: 22px; }
.v4-root .row small { font-size: 12px; line-height: 20px; }
.v4-root .ev, .v4-root .fact-evidence { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; height: 32px; min-height: 32px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.v4-root .ev { border-left: 0; border-radius: 6px; }
.v4-root .ev:hover, .v4-root .fact-evidence:hover { background: var(--ui-soft); }
.v4-root .param { font-size: 13px; line-height: 20px; }
.v4-root .player { gap: 12px; height: 64px; padding: 0 24px; }
.v4-root .player .tm { font-size: 12px; line-height: 20px; }

/* Project fields keep space between columns and give long progress text room. */
.v4-root .pj { container-type: inline-size; }
.v4-root .opp {
  grid-template-columns: minmax(0,.7fr) minmax(0,2fr) minmax(0,.7fr) minmax(0,1.2fr);
  gap: 20px 28px; padding: 16px 20px; align-items: start;
}
.v4-root .opp>div { min-width: 0; }
.v4-root .opp>div>b { display: block; margin-top: 4px; line-height: 1.7; overflow-wrap: anywhere; }
@container(max-width:640px) {
  .v4-root .opp { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
  .v4-root .opp>div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .v4-root .opp>div:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

/* Resource tables: identical column tracks and centered cell contents. */
.v4-root .resource-page { gap: 16px; }
.v4-root .resource-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.v4-root .resource-heading .h1 { margin: 0; }
.v4-root .resource-hint { margin: -4px 0 0; padding: 0; font-size: 12px; line-height: 20px; }
.v4-root .v4-data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ui-line); border-radius: 10px; font-size: 14px; line-height: 22px; }
.v4-root .v4-data-table th, .v4-root .v4-data-table td { vertical-align: middle; padding: 12px 10px; border-bottom: 1px solid var(--ui-line); line-height: 22px; text-align: left; }
.v4-root .v4-data-table th { padding-top: 10px; padding-bottom: 10px; color: var(--ui-muted); font-size: 12px; font-weight: 600; background: #f4f8f5; white-space: nowrap; }
.v4-root .v4-data-table th:first-child { border-top-left-radius: 10px; }
.v4-root .v4-data-table th:last-child { border-top-right-radius: 10px; }
.v4-root .v4-data-table tbody tr:last-child td { border-bottom: 0; }
.v4-root .v4-data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.v4-root .v4-data-table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.v4-root .v4-data-table th:first-child, .v4-root .v4-data-table td:first-child { width: 56px; min-width: 56px; padding-left: 10px; padding-right: 10px; text-align: center; }
.v4-root .v4-data-table th:last-child, .v4-root .v4-data-table td:last-child { width: 84px; min-width: 84px; text-align: center; }
.v4-root .v4-data-table td:first-child { position: relative; }
.v4-root .v4-data-table td:nth-child(2) { font-weight: 500; }
.v4-root .v4-data-table .v4-state-toggle { display: inline-grid; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; margin: 0; border-radius: 6px; vertical-align: middle; }
.v4-root .v4-data-table .review-state { margin: 0; }
.v4-root .v4-data-table .ev { min-width: 64px; width: 64px; margin: 0 auto; padding: 0 6px; vertical-align: middle; }
.v4-root .v4-data-table .row-review-actions { position: absolute; z-index: 15; top: calc(50% + 18px); left: 8px; display: flex; align-items: center; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; box-shadow: 0 6px 20px #1b39251a; }
.v4-root .v4-data-table .row-review-actions button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; }
.v4-root .v4-data-table .row-review-actions button:hover { background: var(--ui-soft); }

/* Review context: long quotes scroll above a stable, non-overlapping action area. */
.v4-root.is-review .top { height: 56px; min-height: 56px; padding: 10px 24px; }
.v4-root.is-review .wrap { height: calc(100dvh - 120px); }
.v4-root.is-review .queue { padding: 24px; }
.v4-root.is-review .card { align-items: center; padding: 12px 16px; }
.v4-root.is-review .card .txt b { font-size: 15px; line-height: 22px; }
.v4-root.is-review .card .txt small { font-size: 12px; line-height: 20px; }
.v4-root.is-review .review-state { margin: 0; }
.v4-root.is-review .acts { gap: 4px; }
.v4-root.is-review .acts button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; }
.v4-root.is-review .ctx { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.v4-root.is-review .ctx>header { flex: none; padding: 16px 20px; }
.v4-root.is-review .ctx .full { flex: none; max-height: 25vh; overflow: auto; padding: 12px 20px; }
.v4-root.is-review .ctx .quotes { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.v4-root.is-review .ctx .mini { flex: none; padding: 8px 20px; min-height: 44px; }
.v4-root.is-review .ctx .decide { flex: none; position: static; margin: 0; padding: 12px 20px 4px; border-top: 1px solid var(--ui-line); }
.v4-root.is-review .ctx #v4Restore { flex: none; align-self: center; min-height: 32px; margin: 4px 0 8px; }
.v4-root .quote-time { min-height: 32px; margin: 0 0 8px; align-items: center; font-size: 12px; }
.v4-root .quote-time .btn { height: 32px; min-height: 32px; padding: 0 6px; }
.v4-root .quote-card p, .v4-root.is-review .full p { font-size: 14px; line-height: 1.75; }
.v4-root .drawer header { min-height: 56px; padding: 10px 20px; }
.v4-root .drawer header .btn { height: 36px; min-height: 36px; }
.v4-root .drawer .claim { padding: 16px 20px; font-size: 14px; }
.v4-root .drawer footer { padding: 12px 20px; font-size: 12px; line-height: 20px; }

@media(max-width:760px) {
  :root { --ui-control: 44px; --ui-field: 44px; }
  .app-bar { height: 52px; padding: 0 12px; }
  .app-bar .brand-copy>.brand-product { font-size: 14px; line-height: 20px; }
  .app-bar .brand-mark { width: 32px; height: 32px; }
  .app-bar .connection-dot, .icon-button, .title-edit, .v4-root .v4-more summary { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  body[data-mode="library"] .workspace>main, body[data-mode="settings"] .workspace>main { padding: 16px 16px 96px; }
  .library-heading { margin-bottom: 16px; }
  .library-heading h1, .settings-home>h1, .v4-root .h1 { font-size: 21px; line-height: 30px; }
  .library-board { border: 0; background: transparent; }
  .library-toolbar { padding: 0; align-items: stretch; gap: 10px; }
  .library-board .record-search { width: 100%; max-width: none; height: 44px; }
  .library-board .record-search input { height: 42px; font-size: 16px; }
  .filters button { min-height: 44px; padding: 0 12px; }
  .record-link { grid-template-columns: 20px minmax(0,1fr); padding: 12px 44px 12px 14px; gap: 10px; }
  .record-row { position: relative; min-height: 80px; border: 1px solid var(--ui-line); border-radius: 10px; }
  .record-row .row-more { position: absolute; right: 4px; top: 10px; margin: 0; }
  .record-copy strong { font-size: 15px; line-height: 22px; }
  .record-customer, .record-meta { font-size: 12px; line-height: 20px; }
  .group-label { margin: 16px 2px 8px; }
  .settings-layout { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .settings-main { padding: 18px 16px; border-radius: 10px; }
  .settings-segment { gap: 8px; }
  .settings-segment a { min-height: 44px; }
  .settings-grid { grid-template-columns: 1fr; gap: 16px; }
  .settings-grid fieldset { padding: 16px 12px; }
  .field input, .field select, .settings-grid .field input, .settings-grid .field select, .upload-customer-entry>input { height: 44px; min-height: 44px; font-size: 16px; }
  .settings-grid .check { min-height: 44px; margin-bottom: 16px; }
  .settings-footer { align-items: flex-start; padding-top: 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .settings-footer .primary { width: auto; flex: none; }
  .probe-wrap { min-width: 0; }
  .probe-wrap .tiny { font-size: 11px; line-height: 18px; }
  .settings-footer button { padding: 0 10px; font-size: 13px; }
  .crm-footer { flex-wrap: wrap; align-items: center; }
  .crm-footer #crmClearToken { margin-right: auto; }
  #uploadDialog { border-radius: 16px 16px 0 0; }
  #uploadDialog form { padding: 16px; }
  #uploadDialog .file-zone { min-height: 144px; margin-bottom: 18px; }
  #uploadDialog .title-field { margin-bottom: 18px; }
  #uploadCustomerSearch { height: 44px; min-height: 44px; }
  .upload-customer-heading .quiet-link { min-height: 44px; }
  .upload-dialog-footer { padding-top: 12px; margin-top: 16px; }
  .summary-editor-head, .summary-editor-footer { padding: 12px 16px; }
  .summary-editor-body { padding: 16px; }
  .summary-editor-body textarea { font-size: 16px; min-height: 200px; }
  #v4HeadlineField input { height: 44px; font-size: 16px; }
  .detail-title { font-size: 20px; line-height: 28px; }
  .detail-meta { font-size: 12px; line-height: 20px; }
  .item-text, .transcript-segment p { font-size: 15px; line-height: 1.65; }
  .detail-dock .player-seek { min-width: 24px; margin: 0 4px; }
  .v4-root .top, .v4-root.is-review .top { min-height: 56px; height: 56px; padding: 6px 14px; }
  .v4-root.is-review .top { height: auto; }
  .v4-root .page { padding: 18px 16px 90px; gap: 20px; }
  .v4-root .resource-page { gap: 12px; }
  .v4-root .page>section { scroll-margin-top: 112px; }
  .v4-root .resource-heading { flex-wrap: wrap; gap: 8px; }
  .v4-root .resource-heading .h1 { flex: 1; }
  .v4-root .resource-hint { margin: 0; }
  .v4-root .hero h2 { font-size: 19px; }
  .v4-root .row { padding: 12px 14px; grid-template-columns: 28px minmax(0,1fr) 44px; gap: 10px; }
  .v4-root .ev, .v4-root .fact-evidence, .v4-root .param .fact-evidence, .v4-root .btn.text { min-height: 44px; min-width: 44px; padding: 0 6px; }
  .v4-root .v4-data-table { display: block; border: 0; background: transparent; border-radius: 0; }
  .v4-root .v4-data-table tbody { gap: 12px; }
  .v4-root .v4-data-table tr { background: #fff; padding: 12px; border: 1px solid var(--ui-line); border-radius: 10px; }
  .v4-root .v4-data-table td, .v4-root .v4-data-table td:first-child, .v4-root .v4-data-table td:last-child { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 12px; width: auto; min-width: 0; padding: 6px 0; border: 0; text-align: left; font-size: 14px; line-height: 22px; }
  .v4-root .v4-data-table td::before { min-width: 0; font-size: 12px; line-height: 20px; color: var(--ui-muted); }
  .v4-root .v4-data-table .v4-state-toggle, .v4-root .v4-data-table .ev { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; justify-self: start; }
  .v4-root .v4-data-table .row-review-actions { top: calc(50% + 22px); left: 80px; }
  .v4-root .v4-data-table .row-review-actions button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .v4-root .player { height: calc(64px + env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .v4-root .player .tm { font-size: 11px; line-height: 15px; }
  .v4-root .player .btn { padding: 0 8px; }
  .v4-root.is-review .wrap { height: auto; }
  .v4-root.is-review .queue { padding: 16px 14px 90px; }
  .v4-root.is-review .card { padding: 12px; align-items: start; }
  .v4-root.is-review .acts button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .v4-root.is-review .ctx { display: none; height: 72vh; }
  .v4-root.is-review .ctx.shown { display: flex; }
  .v4-root.is-review .ctx .quotes { min-height: 0; overflow: auto; }
  .v4-root.is-review .ctx .full { max-height: 18vh; }
  .v4-root.is-review .ctx #v4Restore { min-height: 44px; margin: 0; }
  .v4-root .quote-time .btn, .v4-root .drawer header .btn { min-height: 44px; min-width: 44px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media(min-width:761px) {
  .v4-root .v4-context-close, .v4-root .player .v4-mobile-confirm { display: none; }
}
@media(max-width:760px) {
  .app-tools .upload-top, .v4-root .top>.v4-confirm,
  .v4-root .player .v4-transcript { display: none; }
}
/* Text wrapping and responsive-only controls must beat shared button styles. */
.v4-root .v4-tip-quote, .v4-root .v4-tip-quote span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.v4-root .v4-data-table .ev { font-size: 14px; line-height: 22px; }
.settings-home .field { scroll-margin-bottom: 112px; }
@media(min-width:761px) {
  .v4-root.is-review .ctx .v4-context-close { display: none; }
}
@media(max-width:760px) {
  button.quiet-link, button.text-button, button.more-items, button.expand-text { min-height: 44px; min-width: 44px; }
}
/* Name association runs inside the narrower legacy transcript pane. */
#associationsView .crm-association-grid { align-items: stretch; gap: 20px; }
#associationsView .crm-mentions-pane { width: 100%; border-right: 0; border-bottom: 1px solid var(--ui-line); padding: 0 0 16px; }
#associationsView .crm-candidate-pane { width: 100%; min-width: 0; }
#associationsView .crm-mention-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
#associationsView .crm-mention { width: 100%; min-width: 0; padding: 10px; border-radius: 8px; }
#associationsView .crm-mention strong { font-size: 14px; line-height: 22px; }
#associationsView .crm-mention-kind, #associationsView .crm-link-state { font-size: 12px; line-height: 20px; }
.crm-search-form, .crm-manual-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; align-items: center; }
.crm-manual-form button { grid-column: 1 / -1; justify-self: start; }
.crm-search-form input, .crm-search-form select, .crm-manual-form input, .crm-manual-form select { box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 10px; border-radius: 8px; border-color: var(--ui-line); font-size: 14px; line-height: 20px; }
#crmSearchSubmit { height: 40px; min-height: 40px; }
@media(max-width:760px) {
  .crm-search-form, .crm-manual-form { grid-template-columns: minmax(0,1fr); }
  .crm-search-form input, .crm-search-form select, .crm-manual-form input, .crm-manual-form select, #crmSearchSubmit { height: 44px; min-height: 44px; font-size: 16px; }
}
:root { --ui-warm: #856122; }
.v4-root { --warm: var(--ui-warm); }
.settings-intro, .model-lookup>span, #uploadDialog .file-help, .empty-hint, .upload-customer-hint { color: var(--ui-muted); }

/* Searchable model pickers retain the existing field height and label baseline. */
.model-field>label { font-size: 13px; line-height: 18px; }
.model-picker, .model-control { position: relative; min-width: 0; }
.settings-grid .model-control input { width: 100%; padding-right: 46px; }
.model-toggle { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted); }
.model-toggle:hover { background: var(--ui-soft); color: var(--ui-green); }
.model-popup { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; overflow: hidden; max-height: 300px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #163b2526; }
.model-popup[hidden] { display: none; }
.model-popup.opens-up { top: auto; bottom: calc(100% + 6px); }
.model-options { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.model-option { display: block; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 5px; background: #fff; color: var(--ui-ink); font-size: 13px; line-height: 20px; text-align: left; overflow-wrap: anywhere; }
.model-option:hover, .model-option[aria-selected="true"] { background: var(--ui-soft); color: var(--ui-green); }
.model-empty { flex: none; margin: 0; padding: 8px 10px; font-size: 12px; line-height: 20px; color: var(--ui-muted); }

/* Recording metadata is independent of the original upload and analysis result. */
.v4-root .v4-record-heading { display: flex; align-items: flex-start; gap: 16px; }
.v4-root .v4-record-heading .h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v4-root .v4-edit-info { flex: none; margin-top: 2px; }
.v4-root .top .crumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v4-root .side { overflow-y: auto; overscroll-behavior: contain; }
.v4-root .cur strong { overflow-wrap: anywhere; }
.recording-info-dialog { width: min(560px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border-radius: 12px; }
.recording-info-dialog form { display: flex; flex-direction: column; padding: 0; max-height: calc(100dvh - 32px); }
.recording-info-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 16px 24px; border-bottom: 1px solid var(--ui-line); }
.recording-info-head h2 { font-size: 20px; line-height: 28px; }
.recording-info-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; }
.recording-info-body .field input { width: 100%; min-width: 0; }
.recording-info-date { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#useAnalysisTitle { margin: -10px 0 16px; }
.recording-info-hint, .recording-info-original { margin: 0 0 16px; color: var(--ui-muted); font-size: 12px; line-height: 20px; }
.recording-info-original { white-space: pre-wrap; overflow-wrap: anywhere; margin: 16px 0 0; }
.recording-info-footer { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 16px 24px; border-top: 1px solid var(--ui-line); background: #fff; }
#recordingInfoError { margin: 0 0 16px; }
@media(max-width:760px) {
  .v4-root .v4-record-heading { gap: 8px; }
  .v4-root .v4-record-heading .v4-edit-info { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .v4-root .v4-record-heading .v4-edit-info span { display: none; }
  .recording-info-head, .recording-info-footer { padding: 12px 16px; }
  .recording-info-body { padding: 16px; }
  .recording-info-body .field input { height: 44px; min-height: 44px; font-size: 16px; }
}
@media(max-width:480px) { .recording-info-date { grid-template-columns: 1fr; gap: 0; } }
@media(max-width:760px) {
  .model-toggle { top: 0; right: 0; width: 44px; height: 44px; }
  .model-option { min-height: 44px; font-size: 14px; }
}

/* Keep the legacy player inside its available width; extras share one anchored panel. */
#playerMorePanel { display: contents; }
@media(max-width:760px) {
  .detail-dock #dockPlayer { flex: 1; min-width: 0; order: 1; }
  .detail-dock #dockReview { flex: none; order: 2; }
  .detail-dock .player-shell { width: 100%; min-width: 0; gap: 6px; margin: 0; border: 0; border-radius: 0; }
  .detail-dock .player-times { display: flex; flex-direction: column; flex: none; width: 38px; font-size: 11px; line-height: 16px; }
  .detail-dock .time-divider { display: none; }
  .detail-dock .player-seek { flex: 1; width: 0; min-width: 28px; height: 44px; margin: 0; background: none; }
  .detail-dock .player-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right,#216b5b var(--seek,0%),#e4ebe7 var(--seek,0%)); }
  .detail-dock .player-seek::-webkit-slider-thumb { margin-top: -3.5px; }
  .detail-dock .player-seek::-moz-range-track { height: 4px; border-radius: 4px; background: #e4ebe7; }
  .detail-dock #playerMore, .detail-dock #playerMore[open] { position: relative; flex: none; }
  .detail-dock #playerMorePanel { display: none; }
  .detail-dock #playerMore[open] #playerMorePanel { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; position: absolute; right: 0; bottom: calc(100% + 8px); width: 184px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; box-shadow: 0 6px 20px #1b39251a; z-index: 21; }
  .detail-dock #playerMore[open] #playerMorePanel>button { position: static; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
}

/* Edit fields scroll independently; the action row stays inside the visible sheet. */
.v4-root.is-review .ctx .v4-edit-form { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; padding: 0; }
.v4-root .v4-edit-fields { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.v4-root .v4-edit-fields>label { flex: none; }
.v4-root .v4-edit-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ui-line); background: #fff; }
.v4-root .v4-edit-actions .btn { justify-content: center; }
.v4-root .v4-row-tools { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; }
.v4-root .v4-project-tools { display: flex; gap: 8px; justify-content: flex-end; }
.v4-root .v4-read-error { width: min(640px,calc(100% - 32px)); margin: 32px auto; padding: 24px; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; }
.v4-root .v4-read-error p { margin: 0 0 16px; line-height: 1.7; }
.v4-root .v4-read-error .v4-row-tools { justify-content: flex-start; flex-wrap: wrap; }
.catalog-stage { display: flex; align-items: center; flex: none; gap: 8px; font-size: 13px; }
.catalog-stage select { min-height: 36px; width: 130px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; color: var(--ui-ink); font: inherit; }
@media(max-width:760px) { .catalog-stage { width: 100%; } .catalog-stage select { flex: 1; min-height: 44px; font-size: 16px; } }
.v4-root .v4-opportunity-block + .v4-opportunity-block { border-top: 1px solid var(--ui-line); }
.v4-root .v4-opportunity-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; }
.v4-root .v4-opportunity-heading>strong { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
.v4-root .v4-field-edit { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: 32px; padding: 4px 8px; white-space: nowrap; font-size: 13px; }
.v4-root .li>span { min-width: 0; overflow-wrap: anywhere; }
.v4-root .li .v4-row-tools { margin-left: auto; }
.v4-root .v4-edit-form select { width: 100%; min-height: 42px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.v4-root .v4-edit-form textarea { min-height: 88px; resize: vertical; }
.v4-root .v4-edit-form .v4-field-check { flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; }
.v4-root .v4-field-check input { width: 20px; height: 20px; }
.v4-root .v4-field-error { color: #9a432b; background: #fff6f1; padding: 10px; margin: 0; grid-column: 1 / -1; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.v4-root .v4-field-notice { color: var(--ink-2); background: var(--green-tint); padding: 8px 10px; margin: 0; grid-column: 1 / -1; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.v4-root #v4ContextError { flex: none; margin: 8px 16px; }
.v4-root .v4-original-fields { flex: none; margin-top: 8px; font-size: 12px; color: var(--muted); }
.v4-root .v4-original-fields summary { cursor: pointer; min-height: 32px; }
.v4-root .v4-original-fields dl { margin: 8px 0; }
.v4-root .v4-original-fields dt { font-weight: 600; margin-top: 8px; }
.v4-root .v4-original-fields dd { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:760px) {
  .v4-root .row { grid-template-columns: 28px minmax(0,1fr); }
  .v4-root .row .v4-row-tools { grid-column: 2; justify-content: flex-end; }
  .v4-root .v4-field-edit { min-height: 44px; }
  .v4-root .li { flex-wrap: wrap; gap: 4px; }
  .v4-root .li>span { flex-basis: 100%; }
  .v4-root .v4-edit-form select { font-size: 16px; }
  .v4-root .pj-h .v4-field-edit { flex: 0 0 auto; }
  .v4-root .v4-project-tools { flex-basis: 100%; }
}
.v4-root .v4-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: #163b2526; }
body.v4-modal-open { overflow: hidden; }
.v4-root [aria-modal="true"] { z-index: 70; }
@media(max-width:1100px) {
  .v4-root .main.shift { padding-right: 0; }
}
@media(max-width:760px) {
  .v4-root.is-review .ctx, .v4-root .drawer { height: var(--v4-sheet-height,72dvh); max-height: calc(100dvh - 12px); bottom: var(--v4-sheet-bottom,0px); }
  .v4-root .v4-edit-fields input, .v4-root .v4-edit-fields textarea { font-size: 16px; }
  .v4-root .v4-edit-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* A pushed-aside resource page reflows from its actual width, not the window width. */
.v4-root .resource-page { container: v4-resources / inline-size; }
@container v4-resources (max-width:760px) {
  .v4-root .v4-data-table { display: block; border: 0; border-radius: 0; background: transparent; }
  .v4-root .v4-data-table thead { display: none; }
  .v4-root .v4-data-table tbody { display: grid; gap: 12px; }
  .v4-root .v4-data-table tr { display: block; padding: 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; }
  .v4-root .v4-data-table td, .v4-root .v4-data-table td:first-child, .v4-root .v4-data-table td:last-child { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; width: auto; min-width: 0; padding: 6px 0; border: 0; text-align: left; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
  .v4-root .v4-data-table td::before { content: attr(data-label); min-width: 0; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
  .v4-root .v4-data-table .v4-state-toggle, .v4-root .v4-data-table .ev { width: 64px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; justify-self: start; }
  .v4-root .v4-data-table .v4-state-toggle { width: 44px; }
  .v4-root .v4-data-table .row-review-actions { top: calc(50% + 22px); left: 80px; }
  .v4-root .v4-data-table .row-review-actions button { width: 44px; height: 44px; min-height: 44px; }
}

.employee-identity { color: var(--ui-muted); font-size: 12px; white-space: nowrap; margin-right: 8px; }
@media (max-width: 560px) { .employee-identity { max-width: 86px; overflow: hidden; text-overflow: ellipsis; } }