/* ── Modal overlay ───────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 39, 74, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* The sensitive-data download warning can be triggered from within the in-app
   document viewer overlay (z-index: 1000), so it must stack above it — the
   default .modal-backdrop z-index (200) would render the warning behind the
   PDF/Excel preview. */
#sensitive-download-modal.modal-backdrop { z-index: 1100; }

/* Generic confirmation dialog (showConfirm in js/components.js) — the in-app
   replacement for the browser's native confirm(). It can be raised from any
   surface, so it stacks above the notes panel (150), the in-app document viewer
   (1000) and the In-Portal Editor overlay (1300), following the
   #sensitive-download-modal precedent above. */
#app-confirm-modal.modal-backdrop { z-index: 1400; }
.app-confirm-modal { max-width: 420px; }

/* PI-31 — the share flow can be launched from inside the In-Portal Editor
   overlay (z-index 1300, with editor sub-layers up to 1340). The default
   .modal-backdrop z-index (200) would open the share modal BEHIND the editor,
   making the Share button look broken. Raise every share-flow modal above the
   editor, but keep them below the generic confirm dialog (1400) so its
   confirmations still layer on top. */
#share-confirm-modal.modal-backdrop,
#share-modal.modal-backdrop,
#share-group-modal.modal-backdrop,
#share-recipient-pw-modal.modal-backdrop { z-index: 1350; }

/* These confirmations are launched from WITHIN the Manage Access panel that
   lives in the Share Confirm modal (z-index 1350), so they must stack above it —
   otherwise they open BEHIND the share modal and look broken. Kept below the
   generic confirm dialog (1400) so its confirmations still layer on top.
     • Create Group        — "+ Create group" button inside the Share modal
     • Revoke Share        — "Revoke" / "Revoke all" in Manage Access
     • Clear Credentials   — "Clear all credentials" / per-recipient unlock (🔓) */
#create-group-modal.modal-backdrop,
#revoke-share-confirm-modal.modal-backdrop,
#clear-credentials-confirm-modal.modal-backdrop { z-index: 1360; }

/* Version-restore preview is reachable from the in-portal editor's version-history
   dropdown (editor overlay z-index 1300, sub-layers up to 1340). The default
   .modal-backdrop z-index (200) would open the preview BEHIND the editor, so lift
   it above the editor layers (kept below the generic confirm dialog at 1400). */
#version-restore-modal.modal-backdrop { z-index: 1350; }
.app-confirm__message {
  font-size: .88rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  white-space: pre-line;
  word-break: break-word;
}

.modal {
  background: var(--wh);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: slideUp .18s ease;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--vb);
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
}
.modal__header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
}
.modal__close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--st);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: background .1s, color .1s;
}
.modal__close:hover { background: var(--bg); color: var(--heading); }

.modal__header--centered {
  position: relative;
  justify-content: center;
}
.modal__header--centered .modal__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Draft info banner — sits between the header and the body (Add Artifact).
   Light-blue tinted strip that tells the user nothing is published straight
   to live. */
.modal__note {
  background: var(--vb-tint);
  color: var(--heading);
  font-size: .78rem;
  line-height: 1.4;
  padding: 9px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal__note strong { font-weight: 700; }

.modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

/* Auto-set summary box at the bottom of the Add Artifact body — grey panel
   listing the fields the system derives on save. */
.modal__autoset {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--st);
}

/* ── PI-28 · Guided Upload → Approve → Share wizard ─────────────────────────
   The Add-Artifact modal is Step 1 of a stepper. These rules add the chrome
   (stepper, step panels, Done screen) using tokens only — no raw hex — so the
   flow re-themes light ↔ dark with the rest of the portal (brand-standard §1). */

/* Reuses the standard .modal shell; a hair more width lets the horizontal
   stepper breathe. */
.modal--wizard { max-width: 600px; }

/* Visually-hidden polite live region for step announcements (WCAG). */
.uw-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Stepper */
.uw-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  overflow-x: auto;
}
.uw-step {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: max-content;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
}
.uw-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  min-width: 12px;
  background: var(--border);
  border-radius: 2px;
}
.uw-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  flex-shrink: 0;
}
.uw-step__label { white-space: nowrap; }
.uw-step.is-active { color: var(--heading); }
.uw-step.is-active .uw-step__dot {
  background: var(--vb);
  border-color: var(--vb);
  color: var(--on-brand);
}
.uw-step.is-done { color: var(--success); }
.uw-step.is-done .uw-step__dot {
  background: var(--success);
  border-color: var(--success);
  color: var(--on-brand);
}
.uw-step.is-done:not(:last-child)::after { background: var(--success-border); }

/* Step panels — the active one grows + scrolls like the old body did. */
.uw-panel { display: none; }
.uw-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Done (Step 4) screen */
.uw-done.is-active {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 34px 28px;
}
.uw-done__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background: var(--success-tint);
  color: var(--success);
  border: 1.5px solid var(--success-border);
  margin-bottom: 6px;
}
.uw-done__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0;
}
.uw-done__msg {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 400px;
  margin: 0;
}
.uw-done__countdown {
  font-size: .76rem;
  color: var(--muted);
  margin: 4px 0 0;
  min-height: 1em;
}
.uw-done__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tier segmented toggle inherits .segmented-toggle from components.css. */
.segmented-toggle--tier { margin-top: 2px; }

/* Processing (Step 2) screen */
.uw-processing.is-active {
  padding: 30px 28px;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.uw-processing__lead {
  font-size: .95rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0;
  text-align: center;
}
.uw-stages {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  width: 100%;
}
.uw-stage {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .86rem;
  color: var(--muted);
}
.uw-stage__icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
}
.uw-stage__icon::before { content: "○"; color: var(--muted); }
.uw-stage.is-done  { color: var(--text); }
.uw-stage.is-done  .uw-stage__icon::before { content: "✓"; color: var(--success); }
.uw-stage.is-failed { color: var(--danger); }
.uw-stage.is-failed .uw-stage__icon::before { content: "✕"; color: var(--danger); }
.uw-stage.is-active { color: var(--heading); font-weight: 600; }
.uw-stage.is-active .uw-stage__icon::before { content: ""; }
.uw-stage.is-active .uw-stage__icon {
  border: 2px solid var(--vb-tint);
  border-top-color: var(--vb);
  border-radius: 50%;
  animation: uwspin .7s linear infinite;
}
@keyframes uwspin { to { transform: rotate(360deg); } }

.uw-processing__error {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}
.uw-processing__error-msg {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--danger);
  margin: 0 0 10px;
}
.uw-processing__error-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Send-for-review (Step 3) screen */
.uw-review__lead {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 16px;
}
.uw-review__error {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--danger);
  margin: 12px 0 0;
}

/* Responsive — compact stepper + single-column actions on tablet/mobile
   (brand-standard / PI-28: single-column below 768px). */
@media (max-width: 768px) {
  .uw-stepper { padding: 10px 14px; }
  .uw-step__label { display: none; }
  .uw-step:not(:last-child)::after { min-width: 8px; }
  .uw-done__actions { flex-direction: column; width: 100%; }
  .uw-done__actions .btn-ghost,
  .uw-done__actions .btn-submit { width: 100%; }
}
.modal__autoset strong { color: var(--heading); font-weight: 700; }

/* Thumbnail picker row (Add Artifact) */
.thumb-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.thumb-input-row input[type=file] { font-size: .82rem; }
.thumb-input-row .thumb-input-selected {
  font-size: .78rem;
  color: var(--accent);
}

/* Static hint inside the Content dropzone */
.file-drop__hint {
  font-size: .78rem;
  color: var(--st);
  margin-top: 6px;
}

.modal__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Form elements */
.form-row {
  margin-bottom: 16px;
}
.form-row label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.form-row label .req { color: var(--or); margin-left: 2px; }
.form-row label .hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--st);
  font-size: .75rem;
  margin-left: 6px;
}
/* PI-95 (GV-8) — plain-language definition of the selected classification,
   shown directly under the classification select in the Add/Edit modals. */
.classification-def {
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
/* PI-95 (GV-8) — the scan-based classification proposal the author confirms.
   Layer-3 info tint pair (theme-aware in both light and dark). */
.classification-suggest {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--info);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  border-radius: 5px;
}
/* PI-109 — Regulated package requirements panel: shown under the
   classification select only while "Regulated" is selected. Same Layer-3
   info tint pair as .classification-suggest (theme-aware light/dark). */
.regulated-zip-hint {
  margin: 6px 0 0;
  padding: 8px 12px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  border-radius: 5px;
}
.regulated-zip-hint strong { color: var(--info); }
.regulated-zip-hint ul { margin: 4px 0; padding-left: 18px; }
.regulated-zip-hint li { margin: 2px 0; }
.regulated-zip-hint p { margin: 4px 0 0; }
.regulated-zip-hint code {
  font-size: .74rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
}
/* PI-109 — collapsed field-level spec inside the Regulated hint, so the
   plain-language copy leads and the manifest schema stays one click away. */
.regulated-zip-hint__spec { margin: 6px 0 0; }
.regulated-zip-hint__spec summary {
  cursor: pointer;
  color: var(--info);
  font-weight: 600;
}
.regulated-zip-hint__spec[open] summary { margin-bottom: 2px; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=tel],
.form-row input[type=url],
.form-row select,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .88rem;
  font-family: inherit;
  color: var(--gr);
  background: var(--wh);
  transition: border-color .12s, box-shadow .12s;
  outline: none;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,175,.12);
}
.form-row textarea { resize: vertical; min-height: 64px; }

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
  /* Align the inputs at the bottom of each cell so a label that wraps to two
     lines (e.g. "Classification — sensitivity of the content") doesn't push its
     select out of line with the sibling column's select. */
  align-items: end;
}
.form-row-2col .form-row { margin-bottom: 0; }
/* PI-95 (GV-8) — the definition/suggestion messages live as direct grid
   children spanning both columns, so showing them adds a new full-width row
   below the selects instead of stretching one cell and (with align-items:end)
   pushing the sibling select downward out of alignment. */
.form-row-2col > .classification-def,
.form-row-2col > .classification-suggest,
.form-row-2col > .regulated-zip-hint {
  grid-column: 1 / -1;
  margin: -6px 0 0; /* pull back part of the 14px grid gap */
}

/* File drop zone */
.file-drop {
  border: 2px dashed var(--fg);
  border-radius: 7px;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  position: relative;
}
.file-drop:hover, .file-drop.dragover {
  border-color: var(--accent);
  background: var(--wash-blue);
}
.file-drop input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.file-drop__icon { font-size: 1.4rem; margin-bottom: 2px; }
.file-drop__label { font-size: .85rem; color: var(--st); }
.file-drop__label strong { color: var(--accent); }
.file-drop__selected {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--heading);
  font-weight: 600;
}

/* Buttons */
.btn-ghost {
  padding: 8px 18px;
  background: none;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .88rem;
  color: var(--st);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .1s, color .1s;
}
.btn-ghost:hover { border-color: var(--heading); color: var(--heading); }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--vb);
  color: var(--on-brand);
  border: none;
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  white-space: nowrap;
}
.btn-add:hover { background: var(--accent-strong); }

.btn-submit {
  padding: 9px 22px;
  background: var(--vb);
  color: var(--on-brand);
  border: none;
  border-radius: 5px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.btn-submit:hover { background: var(--accent-strong); }
.btn-submit:disabled { background: var(--fg); cursor: not-allowed; }

/* Orange primary action (Add Artifact → "Save as draft") — matches the
   Option C mockup's accent button. */
.btn-submit--orange { background: var(--or); }
.btn-submit--orange:hover { background: var(--dn); }
.btn-submit--orange:disabled { background: var(--fg); }

/* Destructive primary action (delete / remove confirmations). Hover darkens the
   same token rather than introducing a second red, so it stays theme-correct in
   both light and dark. */
.btn-submit--danger { background: var(--solid-danger); }
.btn-submit--danger:hover { background: var(--solid-danger); filter: brightness(.9); }
.btn-submit--danger:disabled { background: var(--fg); filter: none; }

/* ── Clone in-progress loader ────────────────────────────────────────── */
.clone-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
}
.clone-loader__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,113,175,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: clone-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes clone-spin { to { transform: rotate(360deg); } }

/* ── Dashboard export overlay ─────────────────────────────────────────── */
.download-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 39, 74, 0.35);
}
.download-loader-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wh);
  padding: 1rem 1.25rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading);
  max-width: min(90vw, 420px);
}

/* ── New domain inline creator ───────────────────────────────────────── */
.new-domain-creator {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 7px;
  padding: 12px 14px 10px;
}
.ndc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.ndc-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s;
  flex-shrink: 0;
}
.ndc-swatch:hover   { transform: scale(1.15); }
.ndc-swatch.active  { border-color: var(--heading); transform: scale(1.15); }
.ndc-swatch-custom {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border: 2px solid var(--fg);
  transition: border-color .1s;
}
.ndc-swatch-custom:hover { border-color: var(--heading); }
.ndc-swatch-custom input[type=color] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  cursor: pointer;
  border: none;
  padding: 0;
  opacity: 0;
}
.ndc-swatch-custom-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  pointer-events: none;
}
.ndc-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .85rem;
  font-family: inherit;
  color: var(--gr);
  outline: none;
  margin-bottom: 10px;
}
.ndc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,175,.12); }
.ndc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ndc-cancel { padding: 5px 12px; font-size: .8rem; }
.ndc-save-btn { padding: 6px 14px; font-size: .82rem; }

/* ── Edit modal thumbnail section ── */
.thumb-preview-wrap {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.thumb-preview-img {
  width: 100px; height: 56px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--border);
}
.thumb-preview-placeholder {
  width: 100px; height: 56px; border-radius: 4px;
  background: linear-gradient(135deg, var(--dn), var(--vb));
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: rgba(255,255,255,.7);
}

/* ── Access settings section (upload/edit modals) ───────────────────── */
.access-section {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 14px 16px;
  margin-top: 4px;
  background: var(--surface-2);
}
.access-section__title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 12px;
}
.access-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.access-toggle-row:last-child { margin-bottom: 0; }
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  margin-top: 1px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider { background: var(--vb); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }
.access-toggle-label {
  flex: 1;
}
.access-toggle-label strong {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 2px;
}
.access-toggle-label span {
  font-size: .75rem;
  color: var(--st);
  line-height: 1.4;
}
.pw-field-row {
  margin-top: 10px;
  display: none;
}
.pw-field-row.visible { display: block; }
.pw-field-row input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
}
.pw-field-row input:focus { border-color: var(--accent); }

/* ── Governance modals ───────────────────────────────────────────────── */
.gov-modal-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--st);
  margin-bottom: 5px;
}
.gov-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
  margin-bottom: 12px;
}
.gov-modal-input:focus { border-color: var(--accent); }
textarea.gov-modal-input { height: 80px; resize: vertical; }
.gov-modal-warning {
  background: var(--warning-tint);
  border: 1px solid var(--warning-border);
  border-radius: 6px;
  padding: 10px 13px;
  font-size: .8rem;
  color: var(--warning);
  margin-bottom: 12px;
  line-height: 1.5;
}
.gov-modal-warning strong { color: inherit; }

/* PI-6 — reviewer-facing change summary shown in the Approve modal. */
.gov-modal-summary {
  background: var(--chip);
  border: 1px solid var(--border);
  border-left: 3px solid var(--vb);
  border-radius: 6px;
  padding: 10px 13px;
  font-size: .82rem;
  color: var(--gr);
  margin-bottom: 16px;
  line-height: 1.5;
  word-break: break-word;
}
.gov-modal-summary__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--st);
  margin-bottom: 3px;
}

/* ── Clone modal ── */
#clone-modal .modal { max-width: 440px; }

/* ── Password modal ──────────────────────────────────────────────────── */
.pw-modal-icon {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 10px;
}
.pw-modal-title {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  margin-bottom: 4px;
}
.pw-modal-sub {
  font-size: .82rem;
  color: var(--st);
  text-align: center;
  margin-bottom: 20px;
}
.pw-error {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: .82rem;
  margin-bottom: 14px;
  display: none;
}
.pw-input-row {
  display: flex;
  gap: 8px;
}
.pw-input-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: 1rem;
  letter-spacing: .15em;
  font-family: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.pw-input-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,175,.12);
}
.pw-input-row input.shake {
  animation: shake .35s ease;
  border-color: var(--danger);
}
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ── Share modal ─────────────────────────────────────────────────────── */
.share-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.share-preview__swatch {
  width: 6px;
  border-radius: 3px;
  align-self: stretch;
  flex-shrink: 0;
}
.share-preview__title {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 3px;
}
.share-preview__desc {
  font-size: .78rem;
  color: var(--st);
  line-height: 1.5;
}

.share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.share-link-input {
  flex: 1;
  padding: 8px 11px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .82rem;
  font-family: "Cascadia Code", Consolas, monospace;
  color: var(--st);
  background: var(--bg);
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-link-input:focus { border-color: var(--accent); }
.btn-copy {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--dn);
  color: var(--on-brand);
  border: none;
  border-radius: 5px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  white-space: nowrap;
}
.btn-copy:hover { background: var(--dn); }
.btn-copy.copied { background: var(--solid-success); }

.share-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.share-divider::before,
.share-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.share-hint {
  font-size: .74rem;
  color: var(--muted);
  margin-top: 5px;
}

.pw-input-wrap {
  position: relative;
  width: 100%;
}
.pw-input-wrap input {
  padding-right: 40px;
}
.pw-field-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--st);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.pw-field-toggle:hover {
  color: var(--heading);
  background: rgba(0, 0, 0, .05);
}
.pw-field-toggle .icon-eye-off {
  display: none;
}
.pw-field-toggle.is-visible .icon-eye {
  display: none;
}
.pw-field-toggle.is-visible .icon-eye-off {
  display: block;
}

.share-new-user-pw-match {
  margin: -2px 0 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--danger);
}

.share-new-user-pw-rules {
  margin: -4px 0 10px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--danger);
}
.share-new-user-pw-rules__title {
  font-weight: 600;
  margin-bottom: 2px;
}
.share-new-user-pw-rules ul {
  margin: 0;
  padding-left: 18px;
}
.share-new-user-pw-rules li {
  margin: 1px 0;
}
.share-new-user-pw-rules li.is-met {
  color: var(--success);
}

.share-confirm-msg {
  font-size: .92rem;
  color: var(--heading);
  line-height: 1.5;
  margin: 0 0 16px;
}

/* ── Share groups (address book) ───────────────────────────────────────── */
#share-confirm-modal .share-confirm-modal {
  max-width: 640px;
  overflow: hidden;
}

#share-confirm-modal .modal__body {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}

.share-group-row {
  min-width: 0;
}

.share-group-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.share-group-controls--inline {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.share-group-controls--inline select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

.share-group-controls--inline .share-group-icon-btn,
.share-group-controls--inline .share-group-create-btn {
  flex: 0 0 auto;
}

.share-group-controls select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.share-group-controls select:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

/* MyQone group search + dropdown results */
.myqone-group-search-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.myqone-group-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.myqone-group-search input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--heading);
}

.myqone-group-search input:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

.myqone-group-search-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: .82rem;
  white-space: nowrap;
}

.myqone-group-dropdown {
  display: block;
  width: 100%;
  box-sizing: border-box;
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

.myqone-group-dropdown[hidden] {
  display: none !important;
}

.myqone-group-dropdown__empty {
  margin: 0;
  width: 100%;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--st);
  font-style: italic;
}

.myqone-group-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--heading);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.35;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}

.myqone-group-btn:last-child {
  border-bottom: none;
}

.myqone-group-btn:hover {
  background: var(--surface-2);
}

.myqone-group-btn.is-selected {
  background: var(--dn);
  color: var(--on-brand);
}

.myqone-group-selected {
  margin: 0;
  font-size: .8rem;
  color: var(--st);
}

.myqone-group-selected strong {
  color: var(--heading);
}

.share-group-create-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 600;
  padding: 8px 12px;
}

/* Compact icon-only buttons for Edit / Delete on a selected group. */
.share-group-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.share-group-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--fg);
}
.share-group-icon-btn svg { display: block; }

.share-group-delete-btn {
  color: var(--danger);
  border-color: var(--danger-border);
}
.share-group-delete-btn:hover {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* ── Manage shared access (revoke) ─────────────────────────────────────── */
.share-manage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.share-manage-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.share-manage-clear-credentials {
  font-size: .74rem;
  font-weight: 600;
  color: var(--warning);
  background: transparent;
  border: 1px solid var(--warning-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.share-manage-clear-credentials:hover:not(:disabled) {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: var(--warning);
}
.share-manage-clear-credentials:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.share-manage-revoke-all {
  font-size: .74rem;
  font-weight: 600;
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--danger-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.share-manage-revoke-all:hover:not(:disabled) {
  background: var(--solid-danger);
  color: var(--on-brand);
  border-color: var(--solid-danger);
}
.share-manage-revoke-all:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.share-manage-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
}

.share-manage-row {
  display: flex;
  /* PI-169: allow the actions block to wrap onto its own horizontal line in
     the narrow "Who has access" pane instead of crushing the who column. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 12px;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.share-manage-row:last-child { border-bottom: none; }

.share-manage-row__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 220px; /* PI-169: claim the row's width so meta reads horizontally */
}
.share-manage-row__name {
  font-weight: 500;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-manage-row__when {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
  /* PI-169: inline flow, not flex — the markup mixes text nodes ("Granted …
     · Shared by … ·") with badge spans, and flex turned every text run and
     lone "·" separator into its own flex item, stacking one token per line
     in the narrow pane. Inline flow reads as one horizontal sentence. */
  display: block;
  line-height: 1.8;
}

.share-manage-row__credential {
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 100px;
}
.share-manage-row__credential--set {
  color: var(--success);
  background: var(--success-tint);
}
.share-manage-row__credential--none {
  color: var(--st);
  background: var(--wash);
}

.share-manage-row__actions {
  display: flex;
  align-items: center;
  /* PI-169: compact gap + button sizing below keep all four actions on ONE
     horizontal row within the 380px pane; wrap remains only as an overflow
     safety net (was flex-shrink: 0 on a ~340px block → horizontal scrollbar). */
  gap: 4px;
  flex-wrap: wrap;
}

.share-manage-row__edit {
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px; /* PI-169: compacted so all row actions fit on one line */
  cursor: pointer;
  line-height: 1;
  transition: background .15s, border-color .15s;
}
.share-manage-row__edit:hover {
  background: var(--wash-blue);
  border-color: var(--accent);
}

.share-manage-row__clear-credential {
  color: var(--warning);
  border-color: var(--warning-border);
}
.share-manage-row__clear-credential:hover {
  background: var(--warning-tint);
  border-color: var(--warning);
}

.share-manage-row__revoke {
  font-size: .72rem; /* PI-169: compacted so all row actions fit on one line */
  font-weight: 600;
  color: var(--danger);
  background: var(--surface);
  border: 1px solid var(--danger-border);
  border-radius: 4px;
  padding: 4px 7px; /* PI-169: compacted so all row actions fit on one line */
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.share-manage-row__revoke:hover {
  background: var(--solid-danger);
  color: var(--on-brand);
  border-color: var(--solid-danger);
}

.share-manage-empty {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  padding: 10px 4px 0;
}

/* PI-31 (v1.4) — per-recipient co-edit toggle in the Manage Access list. */
.share-manage-row__coedit-toggle {
  font-size: .72rem; /* PI-169: compacted so all row actions fit on one line */
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px; /* PI-169: compacted so all row actions fit on one line */
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.share-manage-row__coedit-toggle:hover {
  background: var(--wash-blue);
  border-color: var(--accent);
}
.share-manage-row__coedit-toggle--grant {
  color: var(--success);
  border-color: var(--success-border);
}
.share-manage-row__coedit-toggle--grant:hover {
  background: var(--success-tint);
  border-color: var(--success);
}

/* PI-31 (v1.4) — view-only policy note shown atop the Manage Access list when
   the document is Locked / Governed / Regulated (co-edit toggles suppressed). */
.share-manage-policy-note {
  font-size: .76rem;
  color: var(--warning);
  background: var(--warning-tint);
  border: 1px solid var(--warning-border);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.share-recipient-pw-recipient {
  font-size: .86rem;
  color: var(--heading);
  margin: 0 0 14px;
  line-height: 1.45;
}

.share-recipient-pw-hint {
  font-size: .72rem;
  color: var(--st);
  margin-top: 6px;
  line-height: 1.4;
}

.share-recipient-pw-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: .78rem;
  margin-top: 10px;
}

/* ── TM-9984 — Share recipient typeahead + chips + expiry ───────────────── */
.share-typeahead {
  position: relative;
  width: 100%;
  min-width: 0;
}

.share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.share-chips:empty {
  margin-bottom: 0;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--wash);
  font-size: .8rem;
  color: var(--heading);
  line-height: 1.3;
}
.share-chip--group {
  background: var(--wash-blue);
  border-color: var(--info-border);
}
.share-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-chip__count {
  color: var(--st);
  font-size: .72rem;
}
.share-chip__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--st);
  font-size: .72rem;
  cursor: pointer;
}
.share-chip__remove:hover {
  background: rgba(16, 24, 40, .1);
  color: var(--heading);
}

.share-typeahead__control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.share-typeahead__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--heading);
}
.share-typeahead__input:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

.share-typeahead__spinner {
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: share-typeahead-spin .7s linear infinite;
}
.share-typeahead__spinner[hidden] {
  display: none;
}
@keyframes share-typeahead-spin {
  to { transform: rotate(360deg); }
}

.share-typeahead__results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  box-sizing: border-box;
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
}
.share-typeahead__results[hidden] {
  display: none !important;
}

.share-typeahead__empty {
  margin: 0;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--st);
}

.share-typeahead__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.share-typeahead__option:hover,
.share-typeahead__option:focus {
  background: var(--wash);
  outline: none;
}
.share-typeahead__option-icon {
  flex: 0 0 auto;
  font-size: .95rem;
}
.share-typeahead__option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.share-typeahead__option-label {
  font-size: .85rem;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-typeahead__option-sub {
  font-size: .72rem;
  color: var(--st);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-expiry-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}
.share-expiry-select:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

/* TM-9984 — "Share with password" checkbox. */
.share-pw-choice-title {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.share-pw-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  color: var(--heading);
  cursor: pointer;
}
.share-pw-check input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Secondary "Manage saved groups" row sits below the primary typeahead. */
.share-group-manage {
  margin-top: 4px;
}

/* Expiry badges in the Manage Access list. */
.share-manage-row__expiry {
  font-size: .72rem;
  color: var(--st);
  white-space: nowrap;
}
.share-manage-row__expiry--expired {
  color: var(--danger);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   PI-169 — Share dialog redesign (2026-09-03 selection, Design View C)
   ----------------------------------------------------------------------
   S1  Two columns on desktop: the sharing decision on the left, "who has
       access" on the right — no scroll at ≥960px, one primary CTA.
   S3  Tag-aware classification banner + locked defaults (notes below the
       locked controls).
   S2  Inline invitation notice replaces the nested Add-New-User modal.
   S5  "Who has access" pane with count summary + boxed destructive area.
   S6  At scale: filter, Active/Expired sections, bulk selection bar.
   S4  Below 680px the dialog becomes a one-column full-screen sheet.
══════════════════════════════════════════════════════════════════════ */

/* ── S3 · Classification banner (between header and body) ── */
.share-class-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 24px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  flex-shrink: 0;
}
.share-class-banner--locked {
  background: var(--danger-tint);
  border-color: var(--danger-border);
}
.share-class-banner--locked strong { color: var(--danger); }
.share-class-banner .pi-pill { flex-shrink: 0; margin-top: 1px; }

/* ── S3 · Inline "locked by classification" notes ── */
.share-lock-note {
  margin: 4px 0 0;
  font-size: .74rem;
  color: var(--danger);
  line-height: 1.4;
}

/* ── S1 · Two-column layout ── */
.share-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.share-layout__left { min-width: 0; }
.share-layout__right { min-width: 0; }

@media (min-width: 960px) {
  #share-confirm-modal .share-confirm-modal { max-width: 1000px; }
  #share-confirm-modal .share-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  /* The pane owns its own scroll; the left column never scrolls at ≥960px. */
  #share-confirm-modal .share-layout__right .share-manage-list {
    max-height: 46vh;
    overflow-y: auto;
  }
}

/* ── S5 · "Who has access" pane ── */
.share-access-pane {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-access-pane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.share-access-pane__title {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.share-access-pane__summary {
  font-size: .76rem;
  color: var(--muted);
  text-align: right;
}
.share-access-pane .share-manage-list { background: var(--surface); }

/* ── S6 · Filter (shown from 8 grants) ── */
.share-access-pane__filter input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
  background: var(--surface);
  color: var(--heading);
}
.share-access-pane__filter input:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

/* ── S6 · Section headers (Active / Expired) ── */
.share-access-section {
  margin: 2px 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── S6 · Row selection ── */
.share-manage-row__pick {
  flex: 0 0 auto;
  margin: 3px 8px 0 0;
  cursor: pointer;
}

/* ── S6 · Bulk bar — replaces the Revoke all block while rows are ticked ── */
.share-access-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--dn);
  color: var(--on-brand);
}
.share-access-bulkbar__count {
  font-size: .78rem;
  font-weight: 600;
  margin-right: auto;
}
.share-access-bulkbar__revoke {
  border: 1px solid var(--danger-soft);
  background: transparent;
  color: var(--danger-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.share-access-bulkbar__revoke:hover {
  background: var(--solid-danger);
  border-color: var(--solid-danger);
  color: var(--on-brand);
}
.share-access-bulkbar__clear {
  border: none;
  background: transparent;
  color: var(--on-brand);
  font-size: .76rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 5px 4px;
}

/* ── S5 · Boxed destructive controls with the audit-log sentence ── */
.share-access-danger {
  border: 1px solid var(--danger-border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface);
}
.share-access-danger .share-manage-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-access-danger__note {
  margin: 8px 0 0;
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── S2 · Invitation notice (inline; no nested modal) ── */
.share-invite-notice {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-tint);
  font-size: .82rem;
  color: var(--text);
  line-height: 1.5;
}
.share-invite-notice ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.share-invite-notice li { margin: 2px 0; }

/* ── S4 · Mobile sheet — below 680px the dialog fills the screen ── */
@media (max-width: 680px) {
  #share-confirm-modal.modal-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #share-confirm-modal .share-confirm-modal {
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  #share-confirm-modal .modal__header { border-radius: 0; }
  #share-confirm-modal .modal__body {
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 48px touch rows + a thumb-reachable full-width primary action. */
  #share-confirm-modal .share-typeahead__input,
  #share-confirm-modal .share-expiry-select,
  #share-confirm-modal .share-access-pane__filter input {
    min-height: 48px;
  }
  #share-confirm-modal .share-pw-check { min-height: 40px; align-items: center; }
  #share-confirm-modal .modal__footer { position: sticky; bottom: 0; background: var(--wh); }
  #share-confirm-modal .modal__footer .btn-submit { flex: 1 1 auto; min-height: 48px; }
}