/* ==========================================================================
   Send My Demand — admin portal (admin.sendmydemand.com)
   Same foundation as the customer portal (base.css + portal.css): tokens, type,
   radii, motion. Light, dark and "follow the device" come from the same tokens;
   the few admin-only colours below have their own light and dark values.
   ========================================================================== */
:root {
  --internal-bg: #fff8e7; --internal-line: #efd8a6; --internal-ink: #6b4a00;
  --customer-line: color-mix(in srgb, var(--accent) 55%, var(--line));
  --chart-bar: var(--accent); --chart-grid: var(--line); --chart-text: var(--ink-3);
  --panel-highlight: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --internal-bg: #1d1709; --internal-line: #4a3913; --internal-ink: #f0c36b; --panel-highlight: inset 0 1px 0 rgba(255, 255, 255, .035); }
}
:root[data-theme="dark"] { --internal-bg: #1d1709; --internal-line: #4a3913; --internal-ink: #f0c36b; --panel-highlight: inset 0 1px 0 rgba(255, 255, 255, .035); }

.app--admin .panel, .app--admin .kpi { box-shadow: var(--shadow-1), var(--panel-highlight); }
.app--admin .side { gap: 4px; }
.app--admin .side nav { gap: 1px; }
.app--admin .nav-link { min-height: 40px; }
.side__foot .theme-switch { margin: 0 4px 10px; }

/* ---------- Appearance switch (Light / Dark / System) ---------- */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--line); }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); }
.theme-switch--compact { display: flex; }
.theme-switch--compact button { flex: 1; justify-content: center; padding: 0 8px; min-height: 32px; }
.theme-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---------- Mobile tab bar badge ---------- */
.app--admin .tab { position: relative; }
.tab__count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; }

/* ---------- Page header for records ---------- */
.app-head--case h1 { margin: 0; }
.case-sub { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 0; color: var(--ink-2); }
.case-sub > span:not(.pill) { overflow-wrap: anywhere; }
.who--lg .avatar { width: 44px; height: 44px; font-size: 1rem; }
.who--xl { padding: 0; gap: 14px; }
.who--xl .avatar { width: 56px; height: 56px; font-size: 1.125rem; }
.who--xl h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* Section shortcuts on long records: sticky, scrolls sideways on small screens */
.section-nav { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.section-nav::-webkit-scrollbar { display: none; }
@media (max-width: 959px) { .section-nav { top: var(--top-h); margin-inline: calc(-1 * clamp(16px, 1rem + 2vw, 48px)); padding-inline: clamp(16px, 1rem + 2vw, 48px); } }
.section-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); font-size: .8438rem; font-weight: 600; text-decoration: none; border: 1px solid var(--line); background: var(--surface-raised); white-space: nowrap; }
.section-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.section-nav a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.section-nav .count { color: var(--ink-3); font-weight: 600; }
.app--admin [id] { scroll-margin-top: 76px; }
@media (max-width: 959px) { .app--admin [id] { scroll-margin-top: calc(var(--top-h) + 70px); } }

/* Current stage */
.stage-hero { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--line); }
.stage-hero__now { display: grid; gap: 4px; }
.stage-hero__label .pill { font-size: .9375rem; padding: 5px 12px; }
.stage-hero__hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; max-width: 52ch; color: var(--ink-2); font-size: .9375rem; }
.stage-hero__hint .icon { color: var(--info); margin-top: 3px; flex: none; }
.h5 { font-family: var(--font-sans); font-size: .9375rem; font-weight: 650; margin: 0 0 10px; color: var(--ink); }
.cols--even { display: grid; gap: 20px; }
.cols--even > .panel + .panel, .cols > .panel + .panel { margin-top: 0; } /* the grid gap spaces them */
@media (min-width: 1040px) { .cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- Who sees what: customer-visible vs internal ---------- */
.vis-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vis-tag--customer { background: var(--accent-soft); color: var(--accent); }
.vis-tag--internal { background: var(--internal-bg); color: var(--internal-ink); border: 1px solid var(--internal-line); }
.panel--customer { border-top: 3px solid var(--customer-line); }
.panel--internal { background: var(--internal-bg); border-color: var(--internal-line); }
.panel--internal .panel__head h2 { color: var(--internal-ink); display: inline-flex; gap: 8px; align-items: center; }
.panel--internal .note { background: color-mix(in srgb, var(--surface-raised) 70%, var(--internal-bg)); border: 1px solid var(--internal-line); }
.textarea--internal { background: var(--surface-raised); border-color: var(--internal-line); }
.app--admin .panel__head h2 { display: inline-flex; gap: 8px; align-items: center; }
.panel__head h2 .icon { width: 18px; height: 18px; }
@media (max-width: 559px) { .panel__head { flex-wrap: wrap; } }

/* ---------- Tables → readable cards on phones ---------- */
.cell-sub { display: block; color: var(--ink-3); font-size: .8125rem; overflow-wrap: anywhere; }
.row-link { font-weight: 650; }
@media (max-width: 759px) {
  .app--admin table.data--stack tr { padding: 14px 16px; }
  /* Label on the left, the whole value (name + email, pill...) together on the right */
  .app--admin table.data--stack td { display: block; position: relative; padding: 5px 0 5px 38%; text-align: right; min-height: 30px; }
  .app--admin table.data--stack td::before { position: absolute; left: 0; top: 7px; max-width: 36%; }
  .app--admin table.data--stack td .cell-sub { text-align: right; }
  .app--admin table.data--stack td[data-label="Case"], .app--admin table.data--stack td[data-label="Payment"], .app--admin table.data--stack td[data-label="Notification"] { padding-left: 0; text-align: left; padding-bottom: 8px; }
  .app--admin table.data--stack td[data-label="Case"]::before, .app--admin table.data--stack td[data-label="Payment"]::before, .app--admin table.data--stack td[data-label="Notification"]::before, .app--admin table.data--stack td[data-label=""]::before { display: none; }
  .app--admin table.data--stack td[data-label="Case"] .cell-sub, .app--admin table.data--stack td[data-label="Payment"] .cell-sub, .app--admin table.data--stack td[data-label="Notification"] .cell-sub { text-align: left; }
  .app--admin table.data--stack td[data-label=""] { padding-left: 0; text-align: left; min-height: 0; }
  .filters > select, .filters > .btn { flex: 1 1 40%; }
}
/* ---------- Filters ---------- */
.toolbar--stack { flex-direction: column; align-items: stretch; }
.seg--scroll { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; align-self: flex-start; }
.seg--scroll::-webkit-scrollbar { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .search { flex: 1 1 260px; }
.input--sm { min-height: 44px; width: auto; max-width: 100%; font-size: .9375rem; }
.check--inline { align-items: center; font-size: .875rem; }

/* ---------- Copyable IDs ---------- */
.copy-id { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copy-id code { font-family: var(--font-mono); font-size: .8125rem; padding: 2px 8px; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--line); overflow-wrap: anywhere; }
.icon-btn--sm { width: 32px; height: 32px; border-radius: 8px; }
.icon-btn.is-copied { color: var(--success); background: var(--success-bg); }
dl.kv--stack { grid-template-columns: minmax(0, 1fr) !important; }
dl.kv--stack dt { margin-top: 10px !important; padding: 0 !important; border: 0 !important; }
dl.kv--stack dd { padding: 2px 0 0 !important; border: 0 !important; }

/* ---------- Overview ---------- */
.alert-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.alert-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-2); font-size: .875rem; text-decoration: none; }
.alert-chips a:hover { border-color: var(--line-strong); color: var(--ink); }
.alert-chips strong { color: var(--ink); }
.kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi__value--sm { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 650; }

/* Chart: one series, thin bars with rounded ends, direct labels only on bars that have value */
.chart { margin: 0; }
.chart__cap { font-weight: 650; font-size: .9375rem; margin-bottom: 8px; }
.chart__svg { width: 100%; height: 150px; display: block; }
.chart__axis { stroke: var(--chart-grid); stroke-width: 1; }
.chart__bar rect { fill: var(--chart-bar); transition: opacity var(--dur) var(--ease); }
.chart__bar:hover rect { opacity: .78; }
.chart__labels { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); text-align: center; }
.chart__labels li { display: grid; gap: 1px; min-width: 0; }
.chart__val { color: var(--ink); font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.chart__lbl { color: var(--chart-text); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Conversations list ---------- */
.conv { display: flex; gap: 12px; align-items: flex-start; }
.conv__text { min-width: 0; }
.conv__last { color: var(--ink-2); font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.row--conv.is-unread .conv__last { color: var(--ink); font-weight: 550; }
.email-st { font-weight: 600; }
.email-st--failed, .email-st--bounced { color: var(--danger); }
.email-st--sent, .email-st--delivered { color: var(--success); }
.email-st--test_logged { color: var(--info); }

/* ---------- Reconciliation ---------- */
.choice__hints { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.hint { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: .8125rem; font-weight: 600; }
.hint .icon { width: 14px; height: 14px; }

/* ---------- Activity log ---------- */
.diff { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.diff__from { text-decoration: line-through; color: var(--ink-3); }
.diff__to { font-weight: 600; color: var(--ink); }
.kvp { display: block; color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- Files ---------- */
.rows--files .row { border-top: 1px solid var(--line); padding-inline: 0; }

/* ---------- Sign-in pages ---------- */
.auth-admin .auth-top a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

@media print {
  .section-nav, .composer, .actions, form { display: none !important; }
}

/* Authenticator setup */
.mfa-key { font-family: var(--font-mono); font-weight: 650; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--line); overflow-wrap: anywhere; }
.steps-plain { padding-left: 20px; display: grid; gap: 6px; }
.d-inline { display: inline; }
/* Sub-sections inside a settings panel */
h3.sub-head { margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.session-list { margin: 0 0 14px; }
.session-list li + li { margin-top: 10px; }

/* ---------- Notification center ---------- */
.notify-tabs { margin: 4px 0 4px; }
.notify-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.status-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); overflow: hidden; }
.status-strip__item { display: grid; gap: 2px; padding: 12px 14px; text-decoration: none; color: var(--ink-2); border-left: 1px solid var(--line); }
.status-strip__item:first-child { border-left: 0; }
.status-strip__item:hover { background: var(--surface-sunken); }
.status-strip__n { font-size: 1.375rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.status-strip__l { font-size: .8125rem; font-weight: 600; }
.status-strip__item.is-danger .status-strip__n { color: var(--danger); }
.status-strip__item.is-warning .status-strip__n { color: var(--warning); }
@media (max-width: 900px) { .status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .status-strip__item:nth-child(5) { border-left: 0; } .status-strip__item:nth-child(n+5) { border-top: 1px solid var(--line); } }
.tag-test { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--warning); background: var(--warning-bg); border: 1px dashed color-mix(in srgb, var(--warning) 45%, transparent); vertical-align: middle; white-space: nowrap; }
.email-frame { display: block; width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #f3f5f8; }
.test-tools { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-s); background: var(--surface-sunken); }
.timeline__item--danger .timeline__dot { border-color: var(--danger); background: var(--danger-bg); }
.timeline__item--ok .timeline__dot { border-color: var(--success); background: var(--success-bg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-actions form { margin: 0; }
.mini-pop { position: relative; }
.mini-pop > summary { list-style: none; cursor: pointer; }
.mini-pop > summary::-webkit-details-marker { display: none; }
.mini-pop__body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-raised); box-shadow: var(--shadow-2); }
@media (max-width: 720px) { .mini-pop__body { position: static; margin-top: 6px; box-shadow: none; } }
.requests { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface-sunken); }
.rows--plain .row { padding-left: 0; padding-right: 0; }
.rows--plain .row + .row, .rows--plain li + li { border-top: 1px solid var(--line); }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; border: 0; padding: 0; margin: 0; }
.radio-row legend { font-weight: 600; font-size: .9375rem; margin-bottom: 6px; width: 100%; }
.radio-row .field__hint { width: 100%; }
.composer--update { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.reminder-form { border-top: 1px solid var(--line); }
.input-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.input--num { max-width: 9rem; font-variant-numeric: tabular-nums; }
.input-pair .input--num { max-width: none; }
.cols--editor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .cols--editor { grid-template-columns: minmax(0, 1fr); } }
.switches { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-sunken); }
dl.kv--tight dt code { font-size: .8125rem; }
.mono-ish { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .875rem; line-height: 1.55; }
@media (max-width: 720px) {
  .app--admin table.data--stack td[data-label="Email"], .app--admin table.data--stack td[data-label="Template"], .app--admin table.data--stack td[data-label="Address"] { padding-left: 0; text-align: left; padding-bottom: 8px; }
  .app--admin table.data--stack td[data-label="Email"]::before, .app--admin table.data--stack td[data-label="Template"]::before, .app--admin table.data--stack td[data-label="Address"]::before { display: none; }
  .app--admin table.data--stack td[data-label="Email"] .cell-sub, .app--admin table.data--stack td[data-label="Template"] .cell-sub, .app--admin table.data--stack td[data-label="Address"] .cell-sub { text-align: left; }
  .app--admin table.data--stack td .row-actions { justify-content: flex-start; }
}
.copy-id .icon-btn { flex: none; }
@media (max-width: 480px) { .vis-tag, .tag-test { white-space: normal; } }

/* ---------- Case page: what to do now, progress, tabs ---------- */
.case-who { color: var(--ink-2); font-weight: 600; }
.nextstep { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.nextstep__body { display: grid; gap: 22px; padding: 22px; }
@media (min-width: 1000px) { .nextstep__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 32px; } }
.nextstep__now h2 { margin: 0 0 6px; font-size: 1.25rem; }
.nextstep__hint { margin: 0 0 6px; font-size: 1.0625rem; color: var(--ink); max-width: 52ch; }
.nextstep__now .actions form { display: inline; }
.nextstep__manual { margin: 0 22px 18px; }
.section-nav--tabs { margin-top: 20px; }
.section-nav .count--alert { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--warning, #b26a00); color: #fff; font-size: .6875rem; }
.has-tabs [data-tabpanel]:not(.is-active) { display: none; }
[data-tabpanel] > .panel:first-child, [data-tabpanel] > .cols:first-child { margin-top: 0; }
[data-tabpanel] > * + * { margin-top: 20px; }

/* ---------- Cases list: one clean line per case, a plain "Next step" ---------- */
.data--cases .row-link { display: inline; min-height: 0; }
.data--cases .row-link b { font-weight: 700; }
.data--cases td { vertical-align: middle; }
.cell-clip { display: block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.data--cases td[data-label="Case"] .cell-clip { max-width: 30ch; }
.next { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .875rem; }
.next--you { color: var(--accent); font-weight: 650; }
.next .icon { flex: none; }
.data--cases tr.is-yours td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.nowrap { white-space: nowrap; }
@media (min-width: 760px) {
  /* The whole row opens the case. */
  .data--cases tbody tr { position: relative; }
  .data--cases tbody tr:hover { background: var(--surface-sunken); }
  .data--cases .row-link::after { content: ""; position: absolute; inset: 0; }
}
@media (max-width: 759px) {
  .cell-clip { max-width: 100%; }
  .data--cases td[data-label="Customer"] .cell-clip, .data--cases td[data-label="Service"] .cell-clip { margin-left: auto; }
  .data--cases tr.is-yours { box-shadow: inset 3px 0 0 var(--accent); }
  .data--cases tr.is-yours td:first-child { box-shadow: none; }
}
/* Case list columns: fixed widths so everything fits without sideways scrolling */
@media (min-width: 760px) {
  .data--cases { table-layout: fixed; width: 100%; }
  .data--cases th:nth-child(1) { width: 24%; } .data--cases th:nth-child(2) { width: 19%; } .data--cases th:nth-child(3) { width: 14%; }
  .data--cases th:nth-child(4) { width: 16%; } .data--cases th:nth-child(5) { width: 17%; } .data--cases th:nth-child(6) { width: 10%; }
  .data--cases .pill { white-space: normal; text-align: left; line-height: 1.25; }
  .data--cases .cell-clip { max-width: 100%; }
  .data--cases td, .data--cases th { overflow: hidden; }
}
@media (min-width: 760px) {
  .data--cases-own th:nth-child(1) { width: 34%; } .data--cases-own th:nth-child(2) { width: 18%; } .data--cases-own th:nth-child(3) { width: 17%; }
  .data--cases-own th:nth-child(4) { width: 19%; } .data--cases-own th:nth-child(5) { width: 12%; }
}

/* ---------- Attorney portal ---------- */
.kpis--att { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .kpis--att { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis--att .kpi__value { font-size: 1.5rem; }
.data--att td[data-label="Case"] .pill { margin-left: 4px; vertical-align: 1px; }
/* The letter editor reads like the page it becomes: letter type on white paper, in both themes. */
.letter-editor { min-height: min(70vh, 640px); font-family: var(--font-letter, Georgia, "Times New Roman", serif); font-size: 1rem; line-height: 1.65; background: #fff; color: #111; padding: clamp(14px, 3vw, 28px); resize: vertical; tab-size: 4; }
:root[data-theme="dark"] .letter-editor { background: #fbfbf8; color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .letter-editor { background: #fbfbf8; color: #111; } }
/* Save stays reachable while editing a long letter on a phone. */
.letter-work__bar { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 72px); z-index: 2; padding: 10px 0; background: linear-gradient(to top, var(--surface-raised) 70%, transparent); }
@media (min-width: 960px) { .letter-work__bar { bottom: 0; } }
/* Version comparison */
.diff { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-family: var(--font-letter, Georgia, serif); font-size: .9375rem; background: var(--surface-raised); }
.diff__line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 2px 12px 2px 6px; min-height: 1.6em; }
.diff__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff__mark { color: var(--ink-3); text-align: center; font-family: var(--font-mono); }
.diff__line--add { background: var(--success-bg); }
.diff__line--add .diff__mark { color: var(--success); }
.diff__line--del { background: var(--danger-bg); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.diff__line--del .diff__mark { color: var(--danger); text-decoration: none; }
.diff-key { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .75rem; }
.diff-key--add { background: var(--success-bg); color: var(--success); }
.diff-key--del { background: var(--danger-bg); color: var(--danger); }
.note__tag { font-size: .75rem; font-weight: 650; color: var(--internal-ink, var(--ink-2)); margin-bottom: 2px; }
.sign-confirm dl.kv dd { overflow-wrap: anywhere; }
.case-att { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); margin: 2px 0 6px; }