/* ── 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; }

/* PI-184 — Submit/Withdraw can be launched from inside the editor top bar. */
#gov-submit-modal.modal-backdrop,
#gov-withdraw-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);
  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;
  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;
}
.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 {
  /* PI-172 (AC 7) — below 820px the columns stack and the list caps at 420px
     (was a 180px box; at ≥820px the pane owns the height instead). */
  max-height: 420px;
  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;
  flex: 1 1 auto;
  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);
  /* PI-171 (AC 1) — a 40-character email is fully readable at 1280px and
     390px: names/emails WRAP, never truncate (was ellipsis + nowrap).
     Merged with origin/development: line-height + white-space from the
     server-side PI-169 follow-up. */
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.share-manage-row__email {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
  margin-top: 1px;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ── PI-171 · Unified "Who has access" row (js/access-list.js) ── */
.access-row__identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.access-row__email {
  font-size: .74rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* PI-171 — one role pill per row (Owner / Editor / View only). */
.access-role {
  flex: 0 0 auto;
  font-size: .66rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--st);
  background: var(--wash);
}
.access-role--owner {
  color: var(--heading);
  border-color: var(--heading);
  background: var(--surface);
}
.access-role--editor {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-tint);
}
.access-row--expired .share-manage-row__name,
.access-row--expired .access-row__email { opacity: .6; }

/* ── PI-172 · Group rows — the "Group" tag is one of the two tinted tokens. ── */
.access-group-tag {
  flex: 0 0 auto;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent);
  background: var(--wash-blue);
  border: 1px solid var(--info-border);
}
.access-row__expand {
  border: none;
  background: transparent;
  padding: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline dotted;
  cursor: pointer;
}
.access-row__members {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.access-row__member {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: .74rem;
  color: var(--text);
}
.access-row__member-name { font-weight: 600; overflow-wrap: anywhere; }
.access-row__member-direct { color: var(--accent); font-size: .7rem; }
.access-row__member-opened { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.access-row__group-note {
  margin: 4px 0 0;
  font-size: .7rem;
  color: var(--muted);
  font-style: italic;
}
.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;
}
/* PI-172 (AC 8) — explicit "Group" tag on group recipient chips. */
.share-chip__tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 5px;
  border-radius: 4px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--info-border);
}

/* ── PI-172 (AC 8) · Saved-group quick picks under the recipient input ── */
.share-quickpicks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.share-quickpicks__label {
  font-size: .72rem;
  color: var(--muted);
}
.share-quickpicks__pill {
  font-size: .74rem;
  color: var(--heading);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.share-quickpicks__pill:hover {
  background: var(--wash-blue);
  border-color: var(--accent);
}
.share-quickpicks__pill--new { color: var(--accent); }

/* ── PI-172 (AC 8) · Per-recipient notes (group semantics / higher grant) ── */
.share-recipient-notes:empty { display: none; }
.share-recipient-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* The group note is the tinted invitation-style token (accent left bar). */
.share-recipient-note--group {
  background: var(--wash-blue);
  border-color: var(--info-border);
  border-left: 3px solid var(--accent);
}
.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;
}

/* PI-143 (AC 2) — custom expiry date input, revealed by "Pick a date…";
   mirrors the select's styling so the row reads as one control. */
.share-expiry-custom-date {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--heading);
}
.share-expiry-custom-date:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}

/* PI-143 (AC 1) — the concrete end date under the picker ("Access ends …"). */
.share-expiry-date-note {
  margin: 4px 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.4;
}

/* 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; }

/* PI-172 (AC 7) — two columns from 820px (was 960px): the pane takes the LEFT
   column's height and only its list scrolls; the left column never scrolls.
   Below 820px the columns stack and .share-manage-list caps at 420px. */
@media (min-width: 820px) {
  #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: stretch;
  }
  /* The pane fills the right column, whose height is driven by the left
     column's content — head and foot stay pinned, the list scrolls. */
  #share-confirm-modal .share-layout__right {
    position: relative;
    /* Floor from the at-scale mock so a short left column can't crush the pane. */
    min-height: 520px;
  }
  #share-confirm-modal .share-layout__right .share-access-pane {
    position: absolute;
    inset: 0;
  }
  #share-confirm-modal .share-layout__right .share-manage-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    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;
}
/* PI-172 (AC 2) — facet counts under the summary: groups · direct · pending. */
.share-access-pane__facets {
  font-size: .72rem;
  color: var(--muted);
}
.share-access-pane .share-manage-list { background: var(--surface); }

/* PI-172 (AC 3/4) — filter + sort share one row in the at-scale pane. */
.share-access-pane__filter {
  display: flex;
  gap: 6px;
  align-items: center;
}
.share-access-pane__filter input { flex: 1 1 auto; }
.share-access-pane__sort {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .76rem;
  background: var(--surface);
  color: var(--heading);
}

/* ── 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;
}

/* PI-172 — explicit [hidden] guards: these elements set their own display, so
   without the guard the author display would defeat the hidden attribute
   (matches the .pi-ed-*[hidden] pattern in editor.css). */
.share-access-pane__filter[hidden],
.share-access-pane__facets[hidden],
.share-quickpicks[hidden],
.share-access-bulkbar[hidden],
.share-access-bulkbar__menu[hidden] {
  display: none;
}

/* ── S6 · Bulk bar — replaces the Revoke all block while rows are ticked ── */
.share-access-bulkbar {
  display: flex;
  /* PI-172 (AC 6) — the bar now stacks its action row and the Change role /
     Set expiry option menus. */
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--dn);
  color: var(--on-brand);
}
.share-access-bulkbar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.share-access-bulkbar__count {
  font-size: .78rem;
  font-weight: 600;
  margin-right: auto;
}
/* PI-172 (AC 6) — ghost bulk actions: Change role · Set expiry. */
.share-access-bulkbar__ghost {
  border: 1px solid var(--on-brand);
  background: transparent;
  color: var(--on-brand);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.share-access-bulkbar__ghost:hover {
  background: var(--on-brand);
  color: var(--dn);
}
/* PI-172 (AC 6) — option menus for the ghost actions. */
.share-access-bulkbar__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-access-bulkbar__option {
  border: 1px solid var(--on-brand);
  background: transparent;
  color: var(--on-brand);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .74rem;
  cursor: pointer;
}
.share-access-bulkbar__option:hover {
  background: var(--on-brand);
  color: var(--dn);
}
.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 ──
   PI-170 — one column, fixed header, bottom action bar, 48px recipient rows,
   every tap target at least 24px, and the access list reachable without
   horizontal scroll at 390px. */
@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;
  }
  /* PI-170 (AC 1) — the header stays fixed while the sheet body scrolls. */
  #share-confirm-modal .modal__header {
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
  }
  #share-confirm-modal .modal__body {
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    /* PI-170 (AC 3) — no horizontal scroll at 390px. */
    overflow-x: hidden;
  }
  /* 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,
  #share-confirm-modal .share-access-pane__sort {
    min-height: 48px;
  }
  /* PI-170 (AC 2) — recipient rows are 48px touch rows in the sheet. */
  #share-confirm-modal .share-manage-row { min-height: 48px; }
  /* PI-170 (AC 2) — every tap target is at least 24px. */
  #share-confirm-modal .share-manage-row__actions button,
  #share-confirm-modal .share-access-bulkbar__row button,
  #share-confirm-modal .share-access-bulkbar__option,
  #share-confirm-modal .share-quickpicks__pill,
  #share-confirm-modal .access-row__expand,
  #share-confirm-modal .share-access-danger button {
    min-height: 24px;
    min-width: 24px;
  }
  #share-confirm-modal .share-manage-row__pick {
    width: 24px;
    height: 24px;
  }
  #share-confirm-modal .share-chip__remove {
    width: 24px;
    height: 24px;
  }
  #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; }
}

/* -- PI-163 (D4) � "Send feedback" dialog -------------------------------- */
/* Optional 1�5 star rating; buttons so keyboard users can rate too. */
.feedback-stars { display: flex; gap: 4px; }
.feedback-star {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--border);
  transition: color .1s;
}
.feedback-star:hover,
.feedback-star.active { color: var(--warning); }
.feedback-star:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

/* Live 20�1000 counter under the details textarea (chat-product parity). */
.feedback-counter {
  margin-top: 4px;
  font-size: .74rem;
  color: var(--fg);
  text-align: right;
}
.feedback-counter--invalid { color: var(--danger); font-weight: 600; }

/* The chat product'\''s privacy note, verbatim. */
.feedback-privacy-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: .76rem;
  color: var(--heading);
  background: var(--warning-tint);
  border: 1px solid var(--warning);
  border-radius: 6px;
  line-height: 1.4;
}

/* "About this artifact (<id>)." context line when opened from the viewer. */
.feedback-artifact-note {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
}