/* ==========================================================================
   TRUE FORM — Client Portal-only styling (Phase 5A)
   --------------------------------------------------------------------------
   Loaded ONLY by dashboard.html and account.html. Uses the shared design
   tokens (CSS variables) from css/style.css but adds no rules that affect the
   public marketing site. Scoped to Portal-specific classes.
   ========================================================================== */

/* Linked client-account identity panel */
.portal-account-panel {
  margin-bottom: var(--space-5);
}
.portal-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.portal-dev-indicator {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.portal-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.portal-account-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.portal-account-item .portal-account-k {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.portal-account-item .portal-account-v {
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Truthful access/state notices (do not rely on colour alone — each has a
   text label and an icon-free prefix). */
.portal-state-notice {
  border: 1px solid var(--color-border, #2a2a2a);
  border-left-width: 3px;
  border-radius: var(--radius, 10px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-surface, rgba(255, 255, 255, 0.02));
}
.portal-state-notice .portal-state-title {
  font-weight: 700;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.portal-state-notice .portal-state-body {
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.portal-state-notice[data-tone="info"]    { border-left-color: var(--color-accent, #3ee089); }
.portal-state-notice[data-tone="warn"]     { border-left-color: #d8a24a; }
.portal-state-notice[data-tone="blocked"]  { border-left-color: var(--color-danger, #e5534b); }

/* Inline coaching status notice inside the identity panel */
.portal-coaching-note {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.portal-coaching-note[data-tone="warn"]    { color: #d8a24a; }
.portal-coaching-note[data-tone="blocked"] { color: var(--color-danger, #e5534b); }

/* Linked-only sections are hidden in blocked/unlinked states. The scoped
   !important guarantees the hide wins over grid/flex display rules from the
   shared stylesheet, and the [hidden] attribute keeps them out of the
   accessibility tree and tab order. */
[data-portal-linked-only][hidden] { display: none !important; }

/* Membership notice + blocked/empty state message (Phase 5B) */
.portal-demo-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  overflow-wrap: anywhere;
}
.portal-membership-message {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--radius, 10px);
  overflow-wrap: anywhere;
}
/* Non-clickable "Included in your plan" state for unlocked metadata-only items */
.member-card-included {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent, #3ee089);
  overflow-wrap: anywhere;
}
/* Ensure hidden member sections stay hidden over any grid/flex display rule */
#portal-membership .member-section[hidden] { display: none !important; }

/* Phase 5C — coaching assignment + client-document card metadata */
.portal-assignment-rows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
}
.portal-assignment-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.portal-assignment-note {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.portal-assignment-note[data-tone="warn"] { color: #d8a24a; }
.portal-assignment-note[data-tone="blocked"] { color: var(--color-danger, #e5534b); }
.portal-document-fileline {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* Phase 5D-B — authorized read-only resource controls (Open / Download /
   Open resource) on assignment + document cards, plus inline error + loading. */
.portal-resource-actions {
  margin-top: var(--space-3);
}
.portal-resource-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.portal-resource-btn {
  min-height: 44px;
}
.portal-resource-btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}
.portal-resource-btn[disabled] {
  cursor: not-allowed;
}
.portal-resource-error {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-danger, #e5534b);
  overflow-wrap: anywhere;
}

/* Phase 6B — read-only reviewed check-ins, client-visible coach feedback, and
   progress summary. Cards reuse the shared surface; layout mirrors the
   assignment/document grids for consistency. */
.portal-subsection-head {
  margin-top: var(--space-5);
}
.portal-checkins-grid,
.portal-feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.portal-checkin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.portal-checkin-head h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.portal-checkin-note {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.portal-feedback-card h3 {
  overflow-wrap: anywhere;
}
.portal-feedback-card p,
.portal-checkin-card p {
  overflow-wrap: anywhere;
}
/* A wider "recent update" tile inside the progress grid. */
.portal-progress-update {
  grid-column: 1 / -1;
}
.portal-progress-update p {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

/* Phase 7B — read-only message bubbles. Coach vs You are distinguished by
   alignment + an explicit text label (never by colour alone). */
.portal-messages-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.portal-message {
  max-width: 78%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--radius, 10px);
  background: var(--color-surface, rgba(255, 255, 255, 0.02));
}
.portal-message--coach {
  align-self: flex-start;
  border-left: 3px solid var(--color-accent, #3ee089);
}
.portal-message--client {
  align-self: flex-end;
  border-right: 3px solid var(--color-border, #2a2a2a);
}
.portal-message-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.portal-message-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.portal-message-time {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .portal-account-grid { grid-template-columns: 1fr; }
  .portal-resource-btn-row { flex-direction: column; align-items: stretch; }
  .portal-checkins-grid,
  .portal-feedback-grid { grid-template-columns: 1fr; }
  .portal-message { max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Pre-paint auth gate (Phase 8E-B)                                    */
/*   While the async client-portal guard runs, <html> carries          */
/*   data-portal-auth="pending" (set synchronously in <head> by         */
/*   portal-guard-boot.js in every non-demo mode). The protected page    */
/*   content (#main) is hidden and a neutral full-page loading overlay   */
/*   is shown, so portal content never flashes before authorization      */
/*   resolves. portal-auth.js removes the attribute for a confirmed      */
/*   active client. The public header/footer are covered by the overlay. */
/* ------------------------------------------------------------------ */
html[data-portal-auth="pending"] #main {
  visibility: hidden;
}
html[data-portal-auth="pending"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-bg, #0a0b0a);
  z-index: 10000;
}
html[data-portal-auth="pending"]::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid var(--color-border, #2a2a2a);
  border-top-color: var(--color-accent, #3ee089);
  animation: portal-spin 0.8s linear infinite;
  z-index: 10001;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-portal-auth="pending"]::after { animation: none; }
}