/* ═══════════════════════════════════════════════════════════
   PORTAL SHOWCASE — illustrative client-portal mock (S5)
   Mirrors the real portal shell (brand rail, workspaces, hero, stats,
   attention, active work) with FAKE companies. The three tenant palettes
   below are fictional brands, the one documented exception to the Third i
   palette rule (DESIGN.md → Components → Portal showcase).
   ═══════════════════════════════════════════════════════════ */
.portal-mock { --t-bg: #0d1420; --t-panel: #142033; --t-line: rgba(255, 255, 255, 0.08); --t-ink: #eef3fb; --t-muted: #9aa8bd; --t-accent: #4c8dff; --t-accent-ink: #06142b;
  position: relative; display: grid; grid-template-columns: 172px 1fr; min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--t-line);
  background: var(--t-bg); color: var(--t-ink); font: 400 13px/1.45 "Inter", sans-serif; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: background 700ms ease, color 700ms ease; }
.portal-mock[data-tenant="halcyon"] { --t-bg: #0b1a19; --t-panel: #12292a; --t-ink: #ecf8f6; --t-muted: #8fb3ae; --t-accent: #2dd4bf; --t-accent-ink: #032b26; }
.portal-mock[data-tenant="atlas"] { --t-bg: #1a140b; --t-panel: #2a2012; --t-ink: #fbf4e8; --t-muted: #bfae8f; --t-accent: #f5a524; --t-accent-ink: #2e1d02; }
.portal-mock * { transition: background-color 700ms ease, color 700ms ease, border-color 700ms ease; }
.pm-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--t-line); background: color-mix(in srgb, var(--t-bg) 85%, black); }
.pm-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pm-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--t-accent); color: var(--t-accent-ink); font: 700 14px/1 "Space Grotesk", sans-serif; }
.pm-brand b { display: block; font: 600 13px/1.2 "Space Grotesk", sans-serif; }
.pm-brand small { color: var(--t-muted); font-size: 11px; }
.pm-nav span { display: block; padding: 7px 10px; border-radius: 8px; color: var(--t-muted); }
.pm-nav span.on { background: var(--t-panel); color: var(--t-ink); box-shadow: inset 2px 0 0 var(--t-accent); }
.pm-foot { margin-top: auto; font-size: 10px; color: var(--t-muted); }
.pm-main { display: grid; gap: 12px; align-content: start; padding: 16px; }
.pm-top { display: flex; justify-content: space-between; align-items: center; color: var(--t-muted); font-size: 11px; }
.pm-top b { color: var(--t-ink); font: 600 14px/1.2 "Space Grotesk", sans-serif; }
.pm-pill { padding: 6px 10px; border-radius: 9999px; background: var(--t-accent); color: var(--t-accent-ink); font-weight: 600; font-size: 11px; }
.pm-hero { padding: 16px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 26%, var(--t-panel)), var(--t-panel)); border: 1px solid var(--t-line); }
.pm-hero small { color: var(--t-accent); font: 600 10px/1 "Space Grotesk", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.pm-hero .pm-title { margin: 8px 0 6px; font: 500 18px/1.2 "Space Grotesk", sans-serif; color: var(--t-ink); }
.pm-hero p { color: var(--t-muted); font-size: 12px; }
.pm-phase { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 12px; }
.pm-phase i { height: 4px; border-radius: 9999px; background: var(--t-line); }
.pm-phase i.done { background: var(--t-accent); }
.pm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pm-stats div { padding: 10px; border-radius: 10px; background: var(--t-panel); border: 1px solid var(--t-line); }
.pm-stats b { display: block; font: 600 16px/1.1 "Space Grotesk", sans-serif; }
.pm-stats span { color: var(--t-muted); font-size: 10px; }
.pm-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.pm-card { padding: 12px; border-radius: 10px; background: var(--t-panel); border: 1px solid var(--t-line); }
.pm-card small { color: var(--t-muted); font: 600 10px/1 "Space Grotesk", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.pm-card p { margin-top: 6px; font-size: 12px; }
.pm-card .who { color: var(--t-accent); font-weight: 600; }
.pm-thumb { margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 8px; background:
  radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--t-accent) 70%, white), transparent 34%),
  radial-gradient(circle at 75% 65%, color-mix(in srgb, var(--t-accent) 40%, transparent), transparent 40%),
  linear-gradient(160deg, color-mix(in srgb, var(--t-accent) 30%, var(--t-bg)), var(--t-bg)); position: relative; }
.pm-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); clip-path: polygon(38% 28%, 38% 72%, 74% 50%); }
@media (max-width: 720px) {
  .portal-mock { grid-template-columns: 1fr; min-height: 0; font-size: 12px; }
  .pm-side { display: none; }
  .pm-stats { grid-template-columns: repeat(2, 1fr); }
  .pm-row { grid-template-columns: 1fr; }
}

/* R2 Q07: desktop and phone previews share the same fictional tenant state. */
.portal-previews { position: relative; min-width: 0; padding-right: 56px; padding-bottom: 28px; }
.portal-phone { position: absolute; right: -20px; bottom: -8px; width: 196px; display: block; min-height: 0; border: 5px solid var(--t-panel); border-radius: 28px; z-index: 1; }
.phone-speaker { width: 42px; height: 4px; margin: 8px auto 0; border-radius: 9999px; background: var(--t-muted); }
.portal-phone .pm-main { padding: 10px; gap: 9px; }
.phone-top { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.phone-top b { flex: 1; }
.phone-top .pm-logo { width: 24px; height: 24px; flex: none; font-size: 12px; }
.portal-phone .pm-top b { font-size: 12px; }
.portal-phone .pm-hero { padding: 12px; }
.portal-phone .pm-hero .pm-title { font-size: 15px; }
.portal-phone .pm-hero p { font-size: 10px; }
.portal-phone .pm-stats { grid-template-columns: 1fr 1fr; }
.portal-phone .pm-stats div { padding: 8px; }
.portal-phone .pm-card { padding: 10px; }
.portal-phone .pm-card p { font-size: 11px; }
.phone-tabs { display: flex; justify-content: space-between; padding: 8px 0 4px; border-top: 1px solid var(--t-line); font-size: 10px; color: var(--t-muted); }
.phone-tabs span:first-child { color: var(--t-ink); }
@media (max-width: 959px) {
  .portal-previews { padding: 0; }
  .portal-desktop { display: none; }
  .portal-phone { position: relative; right: auto; bottom: auto; width: min(264px, 100%); margin: 0 auto; }
  .portal-phone .pm-main { gap: 10px; padding: 12px; }
  .portal-phone .pm-hero .pm-title { font-size: 17px; }
  .portal-phone .pm-card p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .portal-mock, .portal-mock * { transition: none; } }

@media (max-width: 959px) {
  .portal-phone { width: min(240px, 100%); }
  .portal-phone .pm-main { gap: 8px; padding: 10px; }
  .portal-phone .pm-hero { padding: 10px; }
  .portal-phone .pm-hero .pm-title { font-size: 15px; }
  .portal-phone .pm-card { padding: 8px; }
  .portal-phone .pm-card p { font-size: 11px; }
  .phone-tabs { padding: 6px 0 2px; }
}