/* design-kit/css/portal-shell.css
   Top-level page chrome — topnav, brand, page-head, auth shell, footer.
   Lifted out of base.html's inline <style> block during the brand audit
   so styling lives with the rest of the design kit. All values via the
   --tdl-* tokens defined in tokens.css. */

    /* === App-level layout overrides on top of the kit === */
    body {
      background: var(--tdl-bg);
      color: var(--tdl-fg);
      font-family: var(--tdl-font-body);
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* === Brand logo (image) === */
    .tcp-brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }
    .tcp-brand img { display: block; height: 36px; width: auto; }
    .tcp-brand:hover { opacity: 0.85; }
    .tcp-auth-logo {
      display: block;
      height: 72px;
      width: auto;
      margin: 0 auto 20px;   /* centred horizontally */
    }
    @media (max-width: 720px) {
      .tcp-brand img { height: 28px; }
      .tcp-auth-logo { height: 56px; margin-bottom: 16px; }
    }

    /* === Topnav extensions: align with kit but add user dropdown === */
    .tcp-topnav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 32px;
      border-bottom: 1px solid var(--tdl-hairline);
      background: var(--tdl-surf-1);
      position: sticky;
      top: 0;
      z-index: var(--tdl-z-sticky);
    }
    .tcp-topnav-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
    .tcp-topnav-right { display: flex; align-items: center; gap: 12px; }
    .tcp-topnav-links {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .tcp-topnav-link {
      font-family: var(--tdl-font-display);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: var(--tdl-tracking-label);
      text-transform: uppercase;
      color: var(--tdl-fg-3);
      text-decoration: none;
      padding: 6px 10px;
      border-radius: var(--tdl-radius-sm);
      transition: color var(--tdl-dur-fast), background var(--tdl-dur-fast);
    }
    .tcp-topnav-link:hover { color: var(--tdl-fg); background: var(--tdl-surf-2); }
    .tcp-topnav-link.is-active { color: var(--tdl-fg); background: var(--tdl-surf-3); }

    .tcp-user-menu {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--tdl-font-display);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: var(--tdl-tracking-label);
      text-transform: uppercase;
      color: var(--tdl-fg-3);
      background: transparent;
      border: 1px solid var(--tdl-hairline-2);
      border-radius: var(--tdl-radius-md);
      padding: 6px 10px;
      cursor: pointer;
      transition: border-color var(--tdl-dur-fast);
    }
    .tcp-user-menu:hover { border-color: var(--tdl-hairline-3); }
    .tcp-user-menu .tdl-avatar { width: 22px; height: 22px; font-size: 9px; }

    /* === Page chrome === */
    .tcp-page {
      flex: 1;
      width: 100%;
      /* Time-style left-aligned shell: content sits flush against the sidebar
         (no auto-centring), max-width caps the line length, and unused space
         falls on the right of a wide monitor. Mirrors time.tidal.digital.
         Horizontal padding 40px aligns body content with the kit header's
         40px inner edge above (see chrome.css .tdl-header). The kit header
         sits at the TOP of .tdl-main as a DIRECT child — .tcp-page wraps
         only the page body below the header's bottom hairline. The 32px
         top padding gives the body breathing room below the hairline. */
      max-width: 1440px;
      margin: 0;
      padding: var(--tdl-space-8, 32px) 40px var(--tdl-space-16, 64px);
    }
    /* === Auth shell — login / set-password === */
    .tcp-auth {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      background: var(--tdl-hero-glow);
    }
    .tcp-auth-card {
      width: 100%;
      max-width: 440px;
      background: var(--tdl-surf-1);
      border: 1px solid var(--tdl-hairline);
      border-radius: var(--tdl-radius-xl);
      padding: 44px 40px;
      box-shadow: var(--tdl-shadow-2);
    }
    .tcp-auth-card .tdl-eyebrow {
      display: block;
      text-align: center;
      margin-bottom: 28px;
    }
    .tcp-auth-brand {
      font-family: var(--tdl-font-display);
      font-weight: 900;
      font-size: 26px;
      letter-spacing: -0.01em;
      color: var(--tdl-fg);
      margin: 0 0 4px;
    }
    .tcp-auth-brand .plus { color: var(--tdl-accent); }
    .tcp-auth-card h1 {
      font-family: var(--tdl-font-display);
      font-weight: 900;
      font-size: 22px;
      margin: 24px 0 8px;
      color: var(--tdl-fg);
    }
    .tcp-auth-card .lead {
      color: var(--tdl-fg-3);
      font-size: var(--tdl-fs-sm);
      line-height: var(--tdl-lh-body);
      margin: 0 0 24px;
    }


    /* === Footer === */
    .tcp-footer {
      padding: 24px 28px 32px;
      font-family: var(--tdl-font-display);
      font-weight: 700;
      font-size: var(--tdl-fs-2xs);
      letter-spacing: var(--tdl-tracking-label);
      text-transform: uppercase;
      color: var(--tdl-fg-5);
      text-align: center;
    }

    /* === Hamburger button (mobile nav) === */
    .tcp-topnav-burger {
      display: none;
      width: 36px;
      height: 36px;
      padding: 0;
      background: var(--tdl-surf-2);
      border: 1px solid var(--tdl-hairline-2);
      border-radius: var(--tdl-radius-sm, 4px);
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .tcp-topnav-burger span {
      display: block;
      width: 16px;
      height: 2px;
      background: var(--tdl-fg);
      border-radius: 1px;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .tcp-topnav-burger:hover { background: var(--tdl-surf-3); }
    .tcp-topnav-burger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    .tcp-topnav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .tcp-topnav-burger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    /* === Mobile === */
    @media (max-width: 720px) {
      .tcp-topnav {
        padding: 14px 18px;
        flex-wrap: wrap;
        row-gap: 0;
      }
      .tcp-topnav-burger { display: inline-flex; }
      /* Hidden by default on mobile; .is-open reveals the vertical stack
         beneath the topbar so the burger feels native. */
      .tcp-topnav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        order: 99;
        padding: 12px 0 4px;
        border-top: 1px solid var(--tdl-hairline);
        margin-top: 12px;
      }
      .tcp-topnav-links.is-open { display: flex; }
      .tcp-topnav-link {
        padding: 12px 14px;
        font-size: 12px;
        border-radius: 4px;
      }
      .tcp-page { padding: 16px 20px 48px; }
    }


/* ──────────────────────────────────────────────────────────
   Utilities — extracted from frequently-repeated inline styles
   ────────────────────────────────────────────────────────── */

.tcp-meta {
  color: var(--tdl-fg-3);
  margin: 0;
}

.tcp-link-reset {
  color: inherit;
  text-decoration: none;
}

.tcp-block-mb-2 {
  display: block;
  margin-bottom: var(--tdl-space-2, 8px);
}


/* ── Status pills — outlined, transparent, leading dot ───────────────
   Canonical TIDAL Connect+ status indicator. Originally lived in
   portal/home.html's <style> block (Clients HEALTHY/DECKS pills); lifted
   here so any portal page (Proposals list, Company Profile, future tools)
   can reuse the exact same chrome + colour tokens without duplicating CSS.
   --pos / --neg / --warn / --info take colour tokens from tokens.css;
   --muted uses --tdl-fg-4 for inactive/archived/dormant states (no pulse). */
.status-pill { background: transparent; gap: 8px; white-space: nowrap; }
.status-pill .pulse-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-pill.status-pill--pos { color: var(--tdl-pos); border-color: var(--tdl-pos); }
.status-pill--pos .pulse-dot {
  background: var(--tdl-pos);
  box-shadow: 0 0 0 0 rgba(149, 193, 31, 0.55);
  animation: status-pulse-pos 1.6s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes status-pulse-pos {
  0%   { box-shadow: 0 0 0 0 rgba(149, 193, 31, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(149, 193, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(149, 193, 31, 0); }
}
.status-pill.status-pill--neg { color: var(--tdl-neg); border-color: var(--tdl-neg); }
.status-pill--neg .pulse-dot {
  background: var(--tdl-neg);
  box-shadow: 0 0 0 0 rgba(255, 64, 0, 0.55);
  animation: status-pulse-neg 1.4s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes status-pulse-neg {
  0%   { box-shadow: 0 0 0 0 rgba(255, 64, 0, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 64, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 64, 0, 0); }
}
.status-pill.status-pill--warn { color: var(--tdl-warn); border-color: var(--tdl-warn); }
.status-pill--warn .pulse-dot {
  background: var(--tdl-warn);
  box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.55);
  animation: status-pulse-warn 1.2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes status-pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 176, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
}
.status-pill.status-pill--info { color: var(--tdl-info); border-color: var(--tdl-info); }
.status-pill--info .pulse-dot {
  background: var(--tdl-info);
  box-shadow: 0 0 0 0 rgba(80, 188, 189, 0.50);
  animation: status-pulse-info 1.6s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes status-pulse-info {
  0%   { box-shadow: 0 0 0 0 rgba(80, 188, 189, 0.50); }
  70%  { box-shadow: 0 0 0 9px rgba(80, 188, 189, 0); }
  100% { box-shadow: 0 0 0 0 rgba(80, 188, 189, 0); }
}
/* Muted variant — inactive/archived/dormant. Uses existing --tdl-fg-4
   token (no new colour values introduced). Static dot, no pulse — the
   pill should read quiet, not attention-seeking. */
/* No-pulse modifier — drops the ripple animation on any pulse-variant.
   Use when the pill is a label (role, report-type), not a live status.
   Example: <span class="tdl-pill status-pill status-pill--info no-pulse">. */
.status-pill.no-pulse .pulse-dot { animation: none; box-shadow: none; }

/* Filled variant — solid background, contrast-text. Used on dark
   surfaces where outlined pills risk looking faint (client-facing
   pages, Pulse-style ADMIN treatment). Each variant's dot inherits
   currentColor so the static-label dot stays visible against fill. */
.status-pill.is-filled.status-pill--pos    { background: var(--tdl-pos);    color: #0a0a0a; border-color: var(--tdl-pos); }
.status-pill.is-filled.status-pill--neg    { background: var(--tdl-neg);    color: #ffffff; border-color: var(--tdl-neg); }
.status-pill.is-filled.status-pill--warn   { background: var(--tdl-warn);   color: #0a0a0a; border-color: var(--tdl-warn); }
.status-pill.is-filled.status-pill--info   { background: var(--tdl-info);   color: #0a0a0a; border-color: var(--tdl-info); }
.status-pill.is-filled.status-pill--accent { background: var(--tdl-accent); color: #ffffff; border-color: var(--tdl-accent); }
.status-pill.is-filled.status-pill--muted  { background: var(--tdl-fg-4);   color: #0a0a0a; border-color: var(--tdl-fg-4); }
.status-pill.is-filled .pulse-dot { background: currentColor; }

/* Full-bleed shell for /c/<slug>/ — the client-facing gallery. The
   default .tcp-page caps at 1440px which leaves dead space on
   wider monitors; this shell caps at 2100px so wide viewports get
   more grid columns (5–6) without fragmenting into a 4K wall. */
.client-reports-shell {
  max-width: 2100px;
  margin: 0;
  padding: var(--tdl-space-8, 32px) var(--tdl-space-10, 40px) var(--tdl-space-16, 64px);
}

.status-pill.status-pill--muted { color: var(--tdl-fg-4); border-color: var(--tdl-fg-4); }
.status-pill--muted .pulse-dot { background: var(--tdl-fg-4); }
/* Accent variant — used for ROLE pills (admin = orange/accent) and any
   other label that needs the brand colour without the live-status pulse.
   No pulse animation: these are labels (admin/founder), not events. */
.status-pill.status-pill--accent { color: var(--tdl-accent); border-color: var(--tdl-accent); }

/* Deep/violet — a calm analytical colour, used for AUDIT pills on the
   client-facing page so they don't read as 'something's wrong' the way
   --neg (red) does. No semantic kit token because this colour is
   exclusive to this label use; if it spreads, promote to a token. */
.status-pill.status-pill--deep { color: #6E5BCE; border-color: #6E5BCE; }
.status-pill--deep .pulse-dot { background: #6E5BCE; }
.status-pill.is-filled.status-pill--deep { background: #6E5BCE; color: #ffffff; border-color: #6E5BCE; }
.status-pill--accent .pulse-dot { background: var(--tdl-accent); }