/* Arising Media Portal - dashboard layer over the real site system.
   The component library only: base tokens (pt-tokens.css) and brand/pillar
   tokens (brand-tokens.css) are loaded separately, in that order, before this
   file - see dashboard/partials/head.php. No @import here: the old copy of
   this file pulled in the legacy hand-rolled main.css/brand-tokens.css via a
   relative path that only resolved by coincidence, and dragged the old
   light-theme button/panel CSS into every dashboard page. Removed. */

:root{
  /* Pillar palette - ALIASED to the canonical brand tokens in brand-tokens.css
     (generated from css.sqlite). One source of truth; AI is brand crimson #8E2042,
     NOT the off-brand #C0392B the portal previously hardcoded. */
  --pillar-web:        var(--am-web);             --pillar-web-dim:   rgba(34,166,79,0.16);
  --pillar-marketing:  var(--am-marketing);       --pillar-mkt-dim:   rgba(248,193,18,0.18);
  --pillar-infra:      var(--am-infrastructure);  --pillar-infra-dim: rgba(27,108,179,0.16);
  --pillar-ai:         var(--am-ai);              --pillar-ai-dim:    rgba(142,32,66,0.15);
  --pillar-partner:    var(--am-orange);          --pillar-partner-dim: rgba(240,128,30,0.16);
  /* --am-orange is a real logo color missing from brand-tokens.css (the orange wedges
     at the top of the A and base of the M). Defined here until css.sqlite regenerates it. */
  --am-orange: #F0801E;
  /* Brand ribbon = the FULL logo palette, left-to-right in mark reading order:
     blue -> green -> gold -> orange -> red -> crimson. Not a 3-stop subset. */
  --ribbon: linear-gradient(90deg,
    var(--am-blue) 0%, var(--am-green) 20%, var(--am-gold) 40%,
    var(--am-orange) 58%, var(--am-red) 78%, var(--am-crimson) 100%);

  /* portal surfaces (slightly deeper than marketing slate for app density) */
  --portal-rail:    #0d1322;
  --portal-canvas:  #131c30;
  --portal-card:    var(--color-slate);
  --portal-card-2:  var(--color-slate-mid);
  --portal-border:  var(--color-slate-border);

  /* gate-state semantics */
  --gate-free:  #F8C112;
  --gate-open:  #2fae5e;
  --gate-lock:  #6b7b91;
}

/* ============================================================
   ICON SYSTEM - stroke icons matching the site (sprite + states)
   stroke-width 1.8, round caps, currentColor so state = color.
   ============================================================ */
.am-ico{
  width:20px;height:20px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.am-ico--sm{width:16px;height:16px}
.am-ico--lg{width:24px;height:24px;stroke-width:1.6}
.am-ico--xl{width:28px;height:28px;stroke-width:1.5}

/* icon chip - the 40x40 tile used on cards/nav (site .am-lm-icon pattern) */
.am-ico-chip{
  width:40px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-cobalt-dim);color:var(--accent-lit);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.am-ico-chip .am-ico{width:20px;height:20px}

/* ---- ICON STATES (the full set Andre asked to be defined) ---- */
/* default = inherited (.am-ico-chip above) */
.is-ico-hover,  .am-ico-chip:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,108,179,.35)}
.is-ico-active{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.is-ico-focus{outline:2px solid var(--accent-lit);outline-offset:2px}
.is-ico-disabled{background:rgba(255,255,255,.04);color:#46505f;cursor:not-allowed}
.is-ico-locked{background:rgba(107,123,145,.14);color:var(--gate-lock)}
.is-ico-loading .am-ico{animation:am-spin 900ms linear infinite}
@keyframes am-spin{to{transform:rotate(360deg)}}
/* pillar-tinted chips */
.is-ico-web{background:var(--pillar-web-dim);color:var(--pillar-web)}
.is-ico-mkt{background:var(--pillar-mkt-dim);color:#caa017}
.is-ico-infra{background:var(--pillar-infra-dim);color:var(--accent-lit)}
.is-ico-ai{background:var(--pillar-ai-dim);color:#e06054}

/* ============================================================
   APP SHELL
   ============================================================ */
.pt-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--portal-canvas)}
@media(max-width:900px){.pt-app{grid-template-columns:1fr}}

/* sidebar */
.pt-rail{
  background:var(--portal-rail);border-right:1px solid var(--portal-border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.pt-rail-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.pt-rail-head .am-logo-img{width:34px;height:34px;object-fit:contain}
.pt-rail-head .pt-wordmark{font-weight:800;color:#fff;font-size:var(--fs-base);letter-spacing:-.01em}
.pt-rail-head .pt-wordmark span{font-weight:500;color:var(--text-mute);display:block;font-size:var(--fs-xs);letter-spacing:.02em}
.pt-rail-grp{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5a6678;padding:var(--sp-4) var(--sp-5) var(--sp-2)}
.pt-nav{display:flex;flex-direction:column;padding:0 var(--sp-3) var(--sp-4)}
.pt-nav a{
  display:flex;align-items:center;gap:var(--sp-3);padding:9px 12px;border-radius:var(--radius);
  color:var(--text-mute);font-size:var(--fs-sm);font-weight:500;margin-bottom:2px;
  transition:background var(--dur),color var(--dur);position:relative;
}
.pt-nav a .am-ico{color:inherit;opacity:.85}
.pt-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.pt-nav a.is-active{background:rgba(255,255,255,.08);color:#fff}
.pt-nav a.is-active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--ac,var(--accent-lit))}
.pt-nav a .pt-pill{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);color:var(--text-mute)}
.pt-rail-foot{margin-top:auto;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--portal-border)}
.pt-userline{display:flex;align-items:center;gap:var(--sp-3)}
.pt-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
.pt-userline .nm{font-size:var(--fs-sm);color:#fff;font-weight:600;line-height:1.2}
.pt-userline .rl{font-size:var(--fs-xs);color:var(--text-mute)}

/* main column */
.pt-main{display:flex;flex-direction:column;min-width:0}
.pt-topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-4);
  height:var(--header-h);padding:0 var(--sp-6);
  background:rgba(9,9,15,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pt-topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ribbon)}
.pt-picker{display:flex;align-items:center;gap:8px;background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-pill);padding:6px 14px;font-size:var(--fs-sm);font-weight:600;color:#fff;cursor:pointer}
.pt-picker .dot{width:8px;height:8px;border-radius:50%;background:var(--gate-open)}
.pt-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-pill);padding:8px 14px;color:var(--text-mute)}
.pt-search input{flex:1;background:none;border:none;outline:none;color:#fff;font:inherit;font-size:var(--fs-sm)}
.pt-search input::placeholder{color:var(--text-mute)}
.pt-topbar .pt-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4);color:var(--text-mute)}
.pt-iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius);color:var(--text-mute);transition:background var(--dur),color var(--dur)}
.pt-iconbtn:hover{background:rgba(255,255,255,.06);color:#fff}

/* ============================================================
   CLICKABLE TOP NAV DROPDOWNS (reuse site megamenu look)
   ============================================================ */
.pt-mainnav{display:flex;align-items:center;gap:0}
/* Keep the category sub-menus reachable on laptop widths. The nav used to vanish
   at <=1100px (to free space for search), taking every sub-menu with it. Instead
   drop the search box first and keep the categories + dropdowns; only collapse the
   nav itself at true mobile, where the rail also collapses. */
@media(max-width:1100px){.pt-search{display:none}}
@media(max-width:760px){.pt-mainnav{display:none}}
.pt-navitem{position:relative}
.pt-navitem > button{display:flex;align-items:center;gap:5px;height:var(--header-h);padding:0 13px;color:var(--text-mute);font-size:var(--fs-sm);font-weight:500;background:none;border:none;cursor:pointer;transition:color var(--dur)}
.pt-navitem > button:hover,.pt-navitem.is-open > button{color:#fff}
.pt-navitem > button .am-ico{width:14px;height:14px;opacity:.6;transition:transform var(--dur)}
.pt-navitem.is-open > button .am-ico{transform:rotate(180deg);opacity:1}
.pt-drop{
  display:none;position:absolute;top:calc(var(--header-h) - 1px);left:0;
  min-width:300px;background:var(--color-slate);border:1px solid var(--portal-border);
  border-top:2px solid var(--accent);border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 24px 64px rgba(0,0,0,.55);padding:var(--sp-3);z-index:60;
}
.pt-navitem:last-child .pt-drop,.pt-navitem:nth-last-child(2) .pt-drop{left:auto;right:0}
.pt-navitem.is-open .pt-drop{display:block}
.pt-drop-wide{min-width:560px}
.pt-drop a{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:var(--radius);transition:background var(--dur)}
.pt-drop a:hover{background:rgba(255,255,255,.05)}
.pt-drop a .am-ico-chip{width:32px;height:32px}
.pt-drop a .am-ico-chip .am-ico{width:17px;height:17px}
.pt-drop .tt{font-size:var(--fs-sm);font-weight:600;color:#fff;display:block;line-height:1.3}
.pt-drop .ds{font-size:var(--fs-xs);color:var(--text-mute);display:block}
.pt-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:start}

/* ============================================================
   CONTENT
   ============================================================ */
.pt-body{padding:var(--sp-8) var(--sp-8) var(--sp-16);max-width:1240px;width:100%}
.pt-crumb{font-size:var(--fs-sm);color:var(--text-mute);margin-bottom:var(--sp-2)}
.pt-crumb a:hover{color:#fff}
.pt-h1{font-size:var(--fs-2xl);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:var(--sp-1)}
.pt-sub{color:var(--text-mute);font-size:var(--fs-base);margin-bottom:var(--sp-6)}
.pt-secttitle{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-8) 0 var(--sp-4);color:#fff;font-size:var(--fs-lg);font-weight:700}
.pt-secttitle .step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:800;flex-shrink:0}
.pt-secttitle .tag{font-size:var(--fs-xs);font-weight:600;color:var(--text-mute);background:var(--portal-card);border:1px solid var(--portal-border);padding:3px 10px;border-radius:var(--radius-pill)}

/* card base = site lead-magnet card */
.pt-card{background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-lg);overflow:hidden}
.pt-card-pad{padding:var(--sp-6)}
.pt-card-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--portal-border)}
.pt-card-head h3{font-size:var(--fs-md);font-weight:700;color:#fff}
.pt-card-head a{font-size:var(--fs-sm);font-weight:600;color:var(--accent-lit)}

/* audit cards row */
.pt-audits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
@media(max-width:1024px){.pt-audits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pt-audits{grid-template-columns:1fr}}
.pt-audit{background:var(--portal-card);border:1px solid var(--portal-border);border-top:3px solid var(--ac);border-radius:var(--radius-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.pt-audit:hover{box-shadow:0 10px 34px rgba(0,0,0,.34);transform:translateY(-2px)}
.pt-audit h4{font-size:var(--fs-base);font-weight:700;color:#fff}
.pt-audit p{font-size:var(--fs-sm);color:var(--text-mute);flex:1;line-height:1.5}
.pt-audit .ft{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2)}

/* chips / badges */
.pt-chip{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);letter-spacing:.02em}
.pt-chip-free{background:var(--color-badge-amber-bg);color:var(--color-badge-amber)}
.pt-chip-open{background:var(--color-badge-green-bg);color:var(--color-badge-green)}
.pt-chip-lock{background:var(--color-badge-neutral-bg);color:var(--color-badge-neutral)}
.pt-chip-new{background:var(--color-badge-blue-bg);color:var(--color-badge-blue)}
.pt-tag-web{background:var(--pillar-web-dim);color:var(--pillar-web)}
.pt-tag-mkt{background:var(--pillar-mkt-dim);color:#caa017}
.pt-tag-infra{background:var(--pillar-infra-dim);color:var(--accent-lit)}
.pt-tag-ai{background:var(--pillar-ai-dim);color:#e06054}

/* growth-tools banner + groups */
.pt-gt-banner{display:flex;align-items:center;gap:var(--sp-6);background:linear-gradient(120deg,#0d1322,#1c2c44);border:1px solid var(--portal-border);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6)}
.pt-gt-banner .big{font-size:var(--fs-3xl);font-weight:800;color:#fff;line-height:1}
.pt-gt-banner .lbl{font-size:var(--fs-sm);color:var(--text-mute)}
.pt-gt-banner .prog{flex:1;max-width:320px}
.pt-bar{height:8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.pt-bar span{display:block;height:100%;background:var(--ribbon)}
.pt-gt-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:1024px){.pt-gt-groups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pt-gt-groups{grid-template-columns:1fr}}
.pt-gt-card{background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--dur),box-shadow var(--dur)}
.pt-gt-card:hover{border-color:var(--accent);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.pt-gt-card .hd{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--portal-border)}
.pt-gt-card .hd h4{font-size:var(--fs-base);font-weight:700;color:#fff}
.pt-gt-card ul{padding:var(--sp-2) 0}
.pt-gt-card li{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-5);font-size:var(--fs-sm);color:var(--text)}
.pt-gt-card li .nm{flex:1}
.pt-gt-card li.locked{color:var(--text-mute)}
.pt-gt-card li .am-ico{width:16px;height:16px;opacity:.7}

/* KPI strip */
.pt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4)}
.pt-kpis--inline{grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}
.pt-kpis--inline .pt-kpi{padding:var(--sp-3) var(--sp-4)}
.pt-kpis--inline .pt-kpi .num{font-size:var(--fs-xl)}
.pt-kpi{background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-lg);padding:var(--sp-5);position:relative;overflow:hidden}
.pt-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--accent))}
.pt-kpi .num{font-size:var(--fs-2xl);font-weight:800;color:#fff;line-height:1}
.pt-kpi .lab{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);margin-top:6px}

/* data grid + table */
.pt-grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:start}
@media(max-width:900px){.pt-grid2{grid-template-columns:1fr}}
.pt-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.pt-table th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute);padding:10px var(--sp-6);border-bottom:1px solid var(--portal-border)}
.pt-table td{padding:11px var(--sp-6);border-bottom:1px solid var(--portal-border);color:var(--text)}
.pt-table tr:last-child td{border-bottom:none}
.pt-table tbody tr:hover td{background:rgba(255,255,255,.03)}

/* service tier cards (pillar pages) */
.pt-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:1024px){.pt-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pt-svc-grid{grid-template-columns:1fr}}
.pt-svc{background:var(--portal-card);border:1px solid var(--portal-border);border-radius:var(--radius-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.pt-svc:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.pt-svc h4{font-size:var(--fs-base);font-weight:700;color:#fff}
.pt-svc p{font-size:var(--fs-sm);color:var(--text-mute);flex:1;line-height:1.5}
.pt-svc .mt{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2)}
.pt-svc .ref{font-size:var(--fs-xs);color:#5a6678;font-family:ui-monospace,monospace}

.pt-note{font-size:var(--fs-sm);color:var(--text-mute);margin-top:var(--sp-5);line-height:1.6}
.pt-hero-band{border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-8);background:linear-gradient(120deg,#0d1322,#1c2c44);border:1px solid var(--portal-border);border-left:4px solid var(--ac,var(--accent));margin-bottom:var(--sp-6)}

/* ============================================================
   WELCOME GREETING (Welcome Back, [First Name]) - dashboard top
   ============================================================ */
.pt-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.pt-welcome h1{font-size:var(--fs-2xl);font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1}
.pt-welcome h1 .nm{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pt-welcome .sub{font-size:var(--fs-sm);color:var(--text-mute);margin-top:6px}
.pt-welcome .role-flag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--portal-border)}
.pt-welcome .role-flag.is-admin{color:#e3b7c2;background:rgba(142,32,66,.18);border-color:rgba(142,32,66,.5)}
.pt-welcome .role-flag.is-staff{color:#9fc2e6;background:rgba(27,108,179,.18);border-color:rgba(27,108,179,.5)}
.pt-welcome .role-flag.is-customer{color:#9fe0b6;background:rgba(34,166,79,.16);border-color:rgba(34,166,79,.45)}
.pt-welcome .role-flag.is-partner{color:#f3c08a;background:rgba(240,128,30,.16);border-color:rgba(240,128,30,.5)}

/* ============================================================
   TEAM / THIRD-PARTY ASSOCIATION (invite by email domain)
   ============================================================ */
.pt-team-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--portal-border)}
.pt-team-row:last-child{border-bottom:0}
.pt-team-row .who{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pt-team-row .who .nm{color:#fff;font-weight:600;font-size:var(--fs-sm);display:block}
.pt-team-row .who .em{color:var(--text-mute);font-size:var(--fs-xs)}
.pt-domain-pill{font-family:ui-monospace,monospace;font-size:var(--fs-xs);color:var(--accent-lit);background:var(--color-cobalt-dim);border:1px solid var(--portal-border);padding:3px 9px;border-radius:var(--radius-pill)}
.pt-invite-field{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.pt-invite-field input{flex:1}
.pt-disc{display:flex;align-items:center;gap:12px;padding:var(--sp-3) var(--sp-4);border:1px dashed var(--portal-border);border-radius:var(--radius);background:rgba(255,255,255,.02);margin-top:var(--sp-3)}
.pt-disc .li-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);background:#0a66c2;color:#fff;font-weight:800;font-size:var(--fs-sm);flex-shrink:0}

/* ============================================================
   BOTTOM PREVIEW BAR (wireframe switcher across the experience)
   ============================================================ */
body{padding-bottom:56px}
.pt-preview{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;gap:4px;
  padding:0 var(--sp-4);height:48px;background:rgba(9,9,15,.96);backdrop-filter:blur(8px);
  border-top:2px solid transparent;border-image:var(--ribbon) 1;box-shadow:0 -8px 24px rgba(0,0,0,.4)}
.pt-preview-lbl{font-size:10px;font-weight:800;letter-spacing:.14em;color:#5a6678;padding-right:var(--sp-3);flex-shrink:0}
.pt-preview-note{margin-left:auto;font-size:var(--fs-xs);color:#5a6678;flex-shrink:0}
.pt-preview a{font-size:var(--fs-sm);font-weight:600;color:var(--text-mute);text-decoration:none;
  padding:7px 14px;border-radius:var(--radius-pill);transition:color var(--dur),background var(--dur)}
.pt-preview a:hover{color:#fff;background:rgba(255,255,255,.06)}
.pt-preview a.is-on{color:#fff;background:var(--accent)}
@media(max-width:760px){.pt-preview{overflow-x:auto;gap:2px}.pt-preview-note{display:none}.pt-preview a{padding:7px 10px;white-space:nowrap}}

/* ============================================================
   PER-STATE DIVISION COLOR - each app state owns a signature color
   admin=crimson, staff=infra blue, customer=web green. Drives the
   rail accent so you always know which division/state you're in.
   ============================================================ */
.pt-app{--state:var(--accent)}
.pt-app[data-role="admin"]   {--state:var(--am-crimson)}
.pt-app[data-role="staff"]   {--state:var(--am-infrastructure)}
.pt-app[data-role="customer"]{--state:var(--am-web)}
.pt-app[data-role="partner"] {--state:var(--am-orange)}
.pt-rail-head{border-bottom:1px solid var(--portal-border);position:relative}
.pt-rail-head:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--state)}
.pt-nav a.is-active{box-shadow:inset 3px 0 0 var(--state)}
.pt-userline .rl{color:var(--state);font-weight:600}

/* ============================================================
   COLLAPSIBLE RAIL - icons-only minimized mode (persisted)
   ============================================================ */
.pt-railtoggle{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--text-mute);
  display:inline-flex;padding:6px;border-radius:var(--radius-sm);transition:color var(--dur),background var(--dur)}
.pt-railtoggle:hover{color:#fff;background:rgba(255,255,255,.06)}
.pt-app.is-rail-collapsed{grid-template-columns:64px 1fr}
.pt-app.is-rail-collapsed .pt-wordmark,
.pt-app.is-rail-collapsed .pt-rail-grp,
.pt-app.is-rail-collapsed .pt-nav a .lbl,
.pt-app.is-rail-collapsed .pt-nav a .pt-pill,
.pt-app.is-rail-collapsed .pt-userline span:not(.pt-avatar){display:none}
.pt-app.is-rail-collapsed .pt-rail{padding-left:6px;padding-right:6px}
.pt-app.is-rail-collapsed .pt-rail-head{justify-content:center}
.pt-app.is-rail-collapsed .pt-railtoggle{margin:0}
.pt-app.is-rail-collapsed .pt-nav a{justify-content:center;padding-left:0;padding-right:0;position:relative}
.pt-app.is-rail-collapsed .pt-userline{justify-content:center}
/* tooltip on hover when collapsed */
.pt-app.is-rail-collapsed .pt-nav a[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:58px;
  white-space:nowrap;background:#09090f;color:#fff;font-size:var(--fs-xs);padding:6px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--portal-border);z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* ============================================================
   AI INSIGHT / VALUE CARD - the thing that sets us apart.
   Insight + metric + source (case study). Reused on dashboards.
   ============================================================ */
.pt-insight{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(27,108,179,.10),rgba(28,44,68,.4));border:1px solid var(--portal-border);
  border-left:3px solid var(--ac,var(--accent))}
.pt-insight .ai-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#cdd6e0;background:rgba(255,255,255,.06);
  padding:4px 9px;border-radius:var(--radius-pill)}
.pt-insight .ai-tag svg{width:12px;height:12px}
.pt-insight h4{color:#fff;font-size:var(--fs-md);font-weight:700;line-height:1.3}
.pt-insight p{color:var(--text-mute);font-size:var(--fs-sm);line-height:1.55}
.pt-insight .metric{display:flex;align-items:baseline;gap:10px}
.pt-insight .metric .big{font-size:var(--fs-2xl);font-weight:800;color:var(--ac,var(--accent-lit));line-height:1}
.pt-insight .metric .cap{font-size:var(--fs-xs);color:var(--text-mute)}
.pt-insight .src{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:#7d8aa0;
  padding-top:var(--sp-3);border-top:1px solid var(--portal-border)}
.pt-insight .src a{color:var(--accent-lit);text-decoration:none}
.pt-insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:1024px){.pt-insights-grid{grid-template-columns:1fr}}

/* ============================================================
   PER-PAGE AUDIT BREAKDOWN - an audit translates down by page
   ============================================================ */
.pt-pagescores{display:flex;flex-direction:column;border:1px solid var(--portal-border);border-radius:var(--radius-lg);overflow:hidden}
.pt-pagescore{display:grid;grid-template-columns:1fr 120px 64px;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--portal-border);background:var(--portal-card)}
.pt-pagescore:last-child{border-bottom:0}
.pt-pagescore .url{font-family:ui-monospace,monospace;font-size:var(--fs-sm);color:var(--text)}
.pt-pagescore .track{height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);overflow:hidden}
.pt-pagescore .track span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--ac,var(--accent))}
.pt-pagescore .score{font-weight:800;color:#fff;text-align:right;font-size:var(--fs-md)}
.pt-pagescore.is-low .score{color:#e0a14f}
.pt-pagescore.is-bad .score{color:#e06054}

/* ============================================================
   SUB-NAV - second-level sections under each pillar/service tab
   ============================================================ */
.pt-subnav{display:flex;gap:4px;flex-wrap:wrap;margin:var(--sp-4) 0 var(--sp-6);border-bottom:1px solid var(--portal-border);padding-bottom:0}
.pt-subnav a{font-size:var(--fs-sm);font-weight:600;color:var(--text-mute);text-decoration:none;
  padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur),border-color var(--dur)}
.pt-subnav a:hover{color:#fff}
.pt-subnav a.is-on{color:#fff;border-bottom-color:var(--ac,var(--accent))}

/* ============================================================
   FREE UPTIME MONITORING - mirror of our Uptime Kuma status page
   ============================================================ */
.pt-uptime{border:1px solid var(--portal-border);border-radius:var(--radius-lg);background:var(--portal-card);
  padding:var(--sp-5);border-left:3px solid var(--ac,var(--gate-open))}
.pt-uptime-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.pt-uptime-head .who{display:flex;align-items:center;gap:12px}
.pt-uptime-head .who h4{color:#fff;font-size:var(--fs-md);font-weight:700}
.pt-uptime-head .who .meta{display:block;color:var(--text-mute);font-size:var(--fs-xs);margin-top:2px}
.pt-uptime .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.pt-uptime .dot.is-up{background:var(--gate-open)}
.pt-uptime .dot.is-warn{background:#e0a14f}
.pt-uptime .dot.is-down{background:#e06054}
.pt-uptime .figs{display:flex;align-items:center;gap:var(--sp-5)}
.pt-uptime .fig{display:flex;flex-direction:column;text-align:right}
.pt-uptime .fig .n{font-size:var(--fs-lg);font-weight:800;color:#fff;line-height:1}
.pt-uptime .fig .l{font-size:var(--fs-xs);color:var(--text-mute)}
.pt-uptime-bars{display:flex;gap:2px;margin-top:var(--sp-4);height:34px;align-items:stretch}
.pt-uptime-bars .hb{flex:1;border-radius:2px;min-width:3px;background:var(--gate-open);opacity:.85}
.pt-uptime-bars .hb.is-warn{background:#e0a14f}
.pt-uptime-bars .hb.is-down{background:#e06054}
@media(max-width:640px){.pt-uptime-head{align-items:flex-start}.pt-uptime .figs{width:100%;justify-content:space-between}}

/* state-toggle pills (styles showcase) */
.pt-statetoggle{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);border:1px solid var(--portal-border);background:var(--portal-card)}
.pt-statetoggle button{border:0;background:none;cursor:pointer;color:var(--text-mute);font-weight:700;font-size:var(--fs-sm);
  padding:8px 16px;border-radius:var(--radius-pill);transition:color var(--dur),background var(--dur)}
.pt-statetoggle button.is-on{color:#fff;background:var(--ac,var(--accent))}

/* ---- DRY marketing footer (Cloudflare-style, dark; built by shell.js marketingFooter()) ---- */
.mk-ft{background:#09090f;color:#cbd2dc;border-top:1px solid var(--color-line-dark,#1c1f2b);margin-top:72px}
.mk-ft-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:56px 32px 40px}
.mk-ft-col h4{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8c96a6}
.mk-ft-col a{display:block;text-decoration:none;color:#cbd2dc;font-size:14px;margin:0 0 11px;transition:color .15s}
.mk-ft-col a:hover{color:#fff}
.mk-ft-bar{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:22px 32px;border-top:1px solid #1c1f2b}
.mk-ft-brand{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#8c96a6}
.mk-ft-brand img{height:24px}
.mk-ft-social{display:flex;gap:8px}
.mk-ft-social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;
  background:#15171f;color:#cbd2dc;font-size:11px;font-weight:700;text-decoration:none;text-transform:lowercase}
.mk-ft-social a:hover{background:var(--ribbon,#1B6CB3);color:#fff}
.mk-ft-legal{margin-left:auto;display:flex;gap:18px}
.mk-ft-legal a{color:#8c96a6;font-size:12.5px;text-decoration:none}
.mk-ft-legal a:hover{color:#fff}
@media(max-width:860px){.mk-ft-grid{grid-template-columns:repeat(2,1fr)}.mk-ft-legal{margin-left:0;width:100%}}