/* =====================================================
   PHASE K.E — CLIENT PORTAL
   Reuses .client-* tokens from styles.css for consistency.
   These rules add the portal-specific surfaces:
     - portal-dropzone (upload area)
     - portal-queue (in-flight uploads)
     - portal-properties (submitted properties list)
     - portal-toast (non-blocking error/success messages)
   ===================================================== */

.portal-card {
  /* Slightly wider than the doc-upload card — the property list rows
     have more horizontal content (thumb + address + status). */
  max-width: 640px;
}

/* ── DROPZONE ─────────────────────────────────────── */

.portal-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg-2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.portal-dropzone:hover { border-color: var(--accent-strong); }
.portal-dropzone.is-drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.005);
}

.portal-dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--avatar-text);
  font-size: 1.5rem; font-weight: 600;
  margin-bottom: 0.25rem;
}
.portal-dropzone-title {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
}
.portal-dropzone-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.portal-dropzone-warn {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--st-amber);
  font-weight: 500;
  line-height: 1.35;
  max-width: 380px;
}
.portal-dropzone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ── UPLOAD QUEUE ─────────────────────────────────── */

.portal-queue {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.portal-queue-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: portal-fade-in .25s ease;
}
.portal-queue-item.is-error { border-color: rgba(239, 68, 68, 0.4); background: var(--danger-soft); }
.portal-queue-item.is-added,
.portal-queue-item.is-duplicate {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.05);
}

.portal-queue-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.portal-queue-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portal-queue-thumb-placeholder { font-size: 1.25rem; opacity: 0.6; }

.portal-queue-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.125rem;
}
.portal-queue-title {
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-queue-status {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.portal-queue-action { flex-shrink: 0; display: flex; align-items: center; }
.portal-queue-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--success);
  color: white;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 700;
}
.portal-queue-retry {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
}
.portal-queue-retry:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── SECTION DIVIDER + TITLE ──────────────────────── */

.portal-section-divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0 1rem 0;
}
.portal-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ── EMPTY STATE ──────────────────────────────────── */

.portal-empty {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--text-secondary);
}
.portal-empty p { margin: 0.125rem 0; }

/* ── HOUSED-CLIENT CLOSED PAGE (2026-07) ──────────── */

.portal-closed {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
}
.portal-closed .portal-closed-title {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.35;
}
.portal-closed p { margin: 0.25rem 0; }

/* ── PROPERTIES LIST ──────────────────────────────── */

.portal-properties {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.625rem;
}
.portal-property {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  align-items: stretch;
}
.portal-property:hover { border-color: var(--border-strong); }
.portal-property.is-highlight {
  background: rgba(178, 34, 34, 0.08);
  border-color: var(--accent-strong);
  transform: translateX(2px);
}

.portal-property-thumb {
  /* K.F.3.A.5 — 16:9 thumbnail. OneHome screenshots place the photo
     near the top of the layout, so we cover-fit and pin the crop to
     center-top so the building stays visible. */
  width: 120px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: flex-start;
}
.portal-property-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.portal-property-thumb-placeholder { font-size: 1.5rem; opacity: 0.4; }
.portal-property-specs { margin-top: 0.0625rem; }

.portal-property-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
  justify-content: center;
}
.portal-property-address {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.portal-property-meta {
  display: flex; flex-wrap: wrap;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.portal-property-price { font-weight: 500; color: var(--text-primary); }
.portal-property-notes {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-style: italic;
}

.portal-property-status {
  flex-shrink: 0;
  display: flex; align-items: flex-start;
}
.portal-status-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.portal-status-badge.portal-status-inquired {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--st-blue);
}
.portal-status-badge.portal-status-outreach_sent,
.portal-status-badge.portal-status-showing_set,
.portal-status-badge.portal-status-submitted {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--st-amber);
}
.portal-status-badge.portal-status-approved {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--st-green2);
}
.portal-status-badge.portal-status-denied,
.portal-status-badge.portal-status-withdrawn {
  background: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

/* ── TOASTS ───────────────────────────────────────── */

.portal-toasts {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  display: flex; flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 100;
}
.portal-toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  color: var(--text-primary);
  animation: portal-fade-in .25s ease;
  max-width: 480px;
  margin: 0 auto;
  width: calc(100% - 0px);
}
.portal-toast-success { border-color: rgba(16, 185, 129, 0.4); }
.portal-toast-error   { border-color: rgba(239, 68, 68, 0.5); background: var(--danger-soft); }
.portal-toast-info    { border-color: var(--border-strong); }

@keyframes portal-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE TIGHTENING ────────────────────────────── */

@media (max-width: 480px) {
  .portal-card { padding: 1.5rem 1.125rem; }
  .portal-dropzone { padding: 1.5rem 0.75rem; }
  .portal-property {
    padding: 0.625rem;
    gap: 0.625rem;
  }
  .portal-property-thumb { width: 96px; }
  .portal-property-address { font-size: 0.875rem; }
  .portal-property-meta { font-size: 0.75rem; gap: 0.5rem; }
  .portal-status-badge { font-size: 0.6875rem; padding: 0.125rem 0.4375rem; }
  .portal-pill { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; }
  .portal-section-title { font-size: 0.875rem; }
}

/* ── K.F.3.B.4 ASYNC UPLOAD HINT ──────────────────── */

.portal-upload-busy {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-3);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ── K.F.3.A.8 STATUS PILLS ────────────────────────── */

/* Locked color spec from SPEC §A.8. Background at ~14% alpha, border
   at full alpha, text at full alpha. Mirrors the property header
   "Available" badge style on the admin side. */
.portal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
.portal-pill-gray {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.55);
  color: rgb(148, 163, 184);
}
.portal-pill-yellow {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.65);
  color: rgb(245, 158, 11);
}
.portal-pill-green {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.65);
  color: rgb(16, 185, 129);
}
.portal-pill-red {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.65);
  color: rgb(239, 68, 68);
}
.portal-pill-leased {
  background: rgba(71, 85, 105, 0.20);
  border-color: rgba(71, 85, 105, 0.85);
  color: rgb(148, 163, 184);
}
/* UI/UX overhaul — off-market now reads as a "not available" state and
   shares the red treatment with declined / not-pursuing. data-pill-state
   stays "off_market" so the client filter can still bucket it. */
.portal-pill-off-market {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.65);
  color: rgb(239, 68, 68);
}

/* ── UI/UX overhaul: client status filter + status display ─────────── */

/* Client 3-state filter chips (separate label set from admin's 4-color). */
.portal-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0 0.875rem;
}
.portal-filter-chip {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.portal-filter-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.portal-filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Not-available rows: dim + strike the address (pill stays solid red). */
.portal-property-unavailable { opacity: 0.62; }
.portal-property-unavailable .portal-property-address { text-decoration: line-through; }

/* "Getting access" subtext + plain-language access-type line. */
.portal-getting-access-sub { margin-top: 0.125rem; font-style: italic; }
.portal-access-hint {
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--st-amber, #f59e0b);
}

/* Amber tour / open-house badge (prominent, NOT red). */
.portal-tour-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--st-amber, #f59e0b);
  white-space: nowrap;
}
.portal-tour-badge-done {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: var(--st-green2, #10b981);
  font-weight: 600;
}

/* Detail status section extras. */
.portal-detail-status-sub { margin-top: 0.25rem; font-style: italic; }
.portal-detail-access-hint {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--st-amber, #f59e0b);
}
.portal-detail-status .portal-tour-badge { margin-top: 0.5rem; }
/* Off-market detail accent (red) — mirrors the recolored pill. */
.portal-detail-status-off-market { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }

/* ── PHASE K.F: STATUS DASHBOARD ───────────────────── */

/* Top bar: logo + language toggle (list view) / back link + language toggle (detail).
   K.F.1 — center the logo. The toggle and (in detail view) the back
   link are positioned absolutely against the topbar, leaving the
   centered child (the logo on list view, empty space on detail view)
   to sit dead-center regardless of toggle width. */
.portal-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  min-height: 2.25rem;
}
.portal-topbar .client-brand {
  margin-bottom: 0;  /* override the 1.75rem default used on the login page */
}
.portal-lang-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.portal-lang-btn {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.04em;
}
.portal-lang-btn.is-active {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portal-lang-sep { color: var(--text-muted); }
.portal-back-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
}
.portal-back-link:hover { color: var(--accent); }

/* Property card status badges */
.portal-property-link {
  display: flex;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  align-items: center;
}
.portal-property-mls { margin-top: 0.125rem; }
.portal-property-tour {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.portal-status-locked       { color: #10b981; border-color: rgba(16, 185, 129, 0.5); }
.portal-status-declined     { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.portal-status-unavailable  { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); }
.portal-status-pending      { color: var(--text-secondary); border-color: var(--border-strong); }

/* Detail view */
.portal-detail-address {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}
.portal-detail-section {
  margin-top: 1.25rem;
}
.portal-detail-section-title {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}
.portal-detail-status {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
}
.portal-detail-status-headline {
  font-weight: 600;
  font-size: 1rem;
}
.portal-detail-status-detail {
  margin-top: 0.25rem;
}
.portal-detail-status-locked       { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08); }
.portal-detail-status-declined     { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }
.portal-detail-status-unavailable  { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.portal-detail-status-pending      { }

/* K.F.4.A.1 — five-state pill on the detail page mirrors the list. */
.portal-detail-status-gray   { }
.portal-detail-status-yellow { border-color: rgba(234, 179, 8, 0.5); background: rgba(234, 179, 8, 0.08); }
.portal-detail-status-green  { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08); }
.portal-detail-status-red    { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }
.portal-detail-status-leased { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.portal-detail-status-pill   { font-size: 0.875rem; padding: 0.25rem 0.625rem; }

.portal-detail-tour,
.portal-detail-fields {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

.portal-detail-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.portal-detail-actions button {
  flex: 1 1 160px;
  min-height: 48px;
  font-weight: 600;
}

/* K.F.5.A — portal approve/decline buttons. Both stack on .primary
   to inherit shape (border-radius, padding, font-size); these
   modifiers override only the background + hover so the two buttons
   are visually paired and color-coded to their target state. The
   green/red tokens match the K.F.3 status pill spec. */
.portal-action-approve {
  background: rgb(16, 185, 129);
}
.portal-action-approve:hover:not(:disabled) {
  background: rgb(5, 150, 105);
  color: white;
}
.portal-action-decline {
  background: rgb(239, 68, 68);
}
.portal-action-decline:hover:not(:disabled) {
  background: rgb(220, 38, 38);
  color: white;
}

/* ── K.F.5.B — ACCESS DETAILS SECTION ────────────────────────────
   Renders only when admin has opted in AND the interest is yellow
   AND lockbox info is set (server-side gating). Distinct subtle
   green tint draws the eye since this is the only actionable info
   on the page when ready-to-view. */
.portal-detail-access {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}
.portal-detail-access .portal-detail-section-title {
  color: rgb(16, 185, 129);
  margin-bottom: 0.625rem;
}
.portal-detail-access-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.875rem;
  row-gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
}
.portal-detail-access-fields dt {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  align-self: center;
}
.portal-detail-access-fields dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}
.portal-access-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.0625rem 0.375rem;
  background: rgba(16, 185, 129, 0.16);
  color: rgb(16, 185, 129);
  border-radius: 4px;
}
/* UI/UX overhaul Increment C — free-text notes now live inside the green
   "How to view this home" box. When structured rows precede them, add a
   subtle divider so the two parts read as one section, not a jumble. */
.portal-detail-access .portal-detail-access-fields + .portal-detail-client-notes-body {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(16, 185, 129, 0.18);
}

@media (max-width: 480px) {
  .portal-detail-access { padding: 0.75rem 0.875rem; }
  .portal-detail-access-fields {
    grid-template-columns: 1fr;
    row-gap: 0.1875rem;
  }
  .portal-detail-access-fields dt { margin-top: 0.375rem; }
  .portal-detail-access-fields dt:first-child { margin-top: 0; }
}

/* Notes thread */
.portal-notes-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.portal-notes-add-btn {
  align-self: flex-start;
}
.portal-notes-composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.portal-notes-textarea {
  width: 100%;
  min-height: 84px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--text-primary);
  padding: 0.5rem 0.625rem;
  font: inherit;
  resize: vertical;
}
.portal-notes-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.portal-notes-composer-actions {
  display: flex;
  gap: 0.5rem;
}
.portal-notes-counter {
  font-variant-numeric: tabular-nums;
}
.portal-notes-error {
  color: var(--danger);
  font-size: 0.8125rem;
  margin: 0;
}
.portal-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.portal-note {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
}
.portal-note-client {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}
.portal-note-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.portal-note-author {
  font-weight: 600;
  font-size: 0.875rem;
}
.portal-note-body {
  font-size: 0.9375rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.portal-notes-empty { margin: 0; }

/* Modal overlay (used by both lock-in and decline modals) */
.portal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 200;
  animation: portal-fade-in .15s ease;
}
.portal-modal {
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  max-width: 480px;
  width: 100%;
}
.portal-modal-title {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}
.portal-modal-en-only {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.portal-modal-intro {
  margin: 0 0 0.5rem;
}
.portal-modal-bullets {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}
.portal-modal-bullets li + li { margin-top: 0.5rem; }
.portal-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.portal-modal-actions button {
  min-height: 44px;
  padding: 0.5rem 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────
   K.F.4.B — sticky failure banners (top of portal card)
   ───────────────────────────────────────────────────────────────── */

.portal-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1rem;
}
.portal-banner-stack:empty { margin: 0; }

.portal-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.portal-banner-info {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.10);
}
.portal-banner-warn {
  border-color: rgba(234, 179, 8, 0.5);
  background: rgba(234, 179, 8, 0.10);
}
.portal-banner-icon { font-size: 1.125rem; line-height: 1.2; }
.portal-banner-text { flex: 1; min-width: 0; }
.portal-banner-close {
  background: transparent;
  border: none;
  padding: 0 0.375rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.portal-banner-close:hover { color: var(--text-primary); }
.portal-banner-more {
  text-align: center;
  border: none;
  background: transparent;
  padding: 0.25rem;
}