/* ─── Reset & Root ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:        #050d1a;
  --bg-mid:    #071324;
  --bg-card:   rgba(255,255,255,0.035);
  --bg-card-h: rgba(255,255,255,0.065);
  --border:    rgba(0,168,232,0.18);
  --border-h:  rgba(0,168,232,0.45);
  --cyan:      #00a8e8;
  --cyan-dim:  rgba(0,168,232,0.12);
  --gold:      #c9a84c;
  --gold-dim:  rgba(201,168,76,0.12);
  --text:      #dce8f4;
  --heading:   #ffffff;
  --muted:     #6b8caa;
  --nav-bg:    rgba(5,13,26,0.94);
  --hover-bg:  rgba(255,255,255,0.06);
  --input-bg:  #0a1a2a;
  --code-bg:   rgba(0,0,0,0.4);
  --code-text: #a8c7f0;
  --border-subtle: rgba(255,255,255,0.06);
  --action-text: #050d1a;
  --live:      #00e676;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --nav-bar:   68px;   /* the header's one-row height */
  --nav-h:     56px;   /* the header's MEASURED height (header.php's script), for anchors and the wiki sidebar */
  --max:       1160px;
  --radius:    10px;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f9fc;
  --bg-mid:#edf3f8;
  --bg-card:#ffffff;
  --bg-card-h:#f3f8fc;
  --border:rgba(0,80,130,0.2);
  --border-h:rgba(0,100,160,0.48);
  --cyan:#006b9e;
  --cyan-dim:rgba(0,107,158,0.1);
  --gold:#795e16;
  --gold-dim:rgba(121,94,22,0.1);
  --text:#26394b;
  --heading:#102436;
  --muted:#536d82;
  --nav-bg:rgba(247,249,252,0.96);
  --hover-bg:rgba(0,107,158,0.07);
  --input-bg:#ffffff;
  --code-bg:#edf3f8;
  --code-text:#163d5e;
  --border-subtle:rgba(0,80,130,0.11);
  --action-text:#ffffff;
}
[data-theme="dark"]{color-scheme:dark}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  min-height:100vh;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
.p-nav{
  position:sticky;top:0;
  min-height:var(--nav-bar);
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  z-index:1000;
  padding:0 1.5rem;
  gap:0.25rem;
}
.p-nav__brand{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.05rem;
  color:var(--heading);
  letter-spacing:-0.02em;
  margin-right:1.5rem;
  white-space:nowrap;
  display:flex;align-items:center;gap:0.5rem;
  text-decoration:none;
}
.p-nav__identity{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;margin-right:1.2rem}
/* The site logo is the way back to the website: bigger than the brand words beside it (Dave, 2026-10-17). */
.p-nav__site-logo{display:flex;align-items:center;justify-content:center;min-width:80px;height:64px;border-radius:6px}
.p-nav__site-logo img{display:block;max-height:60px;max-width:84px;width:auto;height:auto;object-fit:contain}
.p-nav__site-logo:hover,.p-nav__brand:hover{text-decoration:none;background:var(--hover-bg)}
.p-nav__brand{margin-right:0;padding:.25rem .4rem;border-radius:6px}
.p-nav__brand span{color:var(--cyan)}
.p-nav__links{display:flex;align-items:center;gap:0.1rem;flex:1;min-width:0;overflow-x:auto}
.p-nav__link{
  font-size:0.82rem;font-weight:500;
  color:var(--muted);
  padding:0.35rem 0.7rem;
  border-radius:6px;
  transition:color 0.15s,background 0.15s;
  white-space:nowrap;
  text-decoration:none;
}
.p-nav__link:hover{color:var(--text);background:var(--hover-bg);text-decoration:none}
/* The current entry: heading-coloured text on the tint, marked by a cyan bar (P21). Cyan text on the
   cyan tint measured 4.00:1 with the Exos theme, under the 4.5:1 text needs. */
.p-nav__link.active{color:var(--heading);background:var(--cyan-dim);box-shadow:inset 0 -2px 0 var(--cyan)}
.p-nav__right{
  display:flex;align-items:center;gap:0.75rem;
  margin-left:auto;
}
.p-nav__theme{font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem}
.p-nav__theme:hover{border-color:var(--border-h);background:var(--bg-card-h)}
.p-nav__company{
  font-size:0.78rem;font-weight:500;color:var(--muted);
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-nav__signout{
  font-size:0.78rem;color:var(--muted);
  border:1px solid var(--border);
  padding:0.3rem 0.7rem;border-radius:6px;
  transition:all 0.15s;text-decoration:none;
}
.p-nav__signout:hover{color:var(--text);border-color:var(--border-h);background:var(--hover-bg);text-decoration:none}

/* ─── Main container ─────────────────────────────────────────────────────── */
.p-main{max-width:var(--max);margin:0 auto;padding:2rem 1.5rem 4rem}

/* ─── Section heading ────────────────────────────────────────────────────── */
.p-eyebrow{
  font-family:var(--font-mono);font-size:0.7rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:0.5rem;
}
.p-title{
  font-family:var(--font-head);font-size:clamp(1.6rem,3.5vw,2.8rem);
  font-weight:800;line-height:1.1;color:var(--heading);
  margin-bottom:0.6rem;letter-spacing:-0.02em;
}
.p-subtitle{font-size:1.05rem;color:var(--muted);max-width:640px;line-height:1.7}

/* ─── Status dots ────────────────────────────────────────────────────────── */
.dot{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:500;
  letter-spacing:0.06em;
  padding:0.28rem 0.7rem;border-radius:20px;
}
.dot::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot--live{background:rgba(0,230,118,0.1);color:var(--live);border:1px solid rgba(0,230,118,0.25)}
.dot--live::before{background:var(--live);box-shadow:0 0 6px var(--live);animation:pulse 2s infinite}
.dot--ready{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,168,232,0.3)}
.dot--ready::before{background:var(--cyan)}
.dot--soon{background:rgba(245,158,11,0.1);color:var(--warn);border:1px solid rgba(245,158,11,0.25)}
.dot--soon::before{background:var(--warn)}
.dot--done{background:rgba(16,185,129,0.1);color:#10b981;border:1px solid rgba(16,185,129,0.25)}
.dot--done::before{background:#10b981}

/* ─── Status bar strip ───────────────────────────────────────────────────── */
.p-statusbar{
  display:flex;flex-wrap:wrap;gap:0.5rem;
  margin:1rem 0 2rem;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.p-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  transition:border-color 0.2s,background 0.2s,transform 0.15s;
  text-decoration:none;color:var(--text);
  display:block;
}
.p-card:hover{
  border-color:var(--border-h);
  background:var(--bg-card-h);
  transform:translateY(-2px);
  text-decoration:none;color:var(--text);
}
.p-card__eyebrow{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem}
.p-card__title{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--heading);margin-bottom:0.35rem}
.p-card__desc{font-size:0.88rem;color:var(--muted);line-height:1.6}
.p-card__badge{
  display:inline-block;font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:0.2rem 0.55rem;border-radius:4px;
  margin-top:0.75rem;
}
.p-card__badge--live{background:rgba(0,230,118,0.12);color:var(--live);border:1px solid rgba(0,230,118,0.3)}
.p-card__badge--ready{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,168,232,0.3)}
.p-card__badge--gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(201,168,76,0.3)}

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.p-grid{display:grid;gap:1rem}
.p-grid--2{grid-template-columns:repeat(2,1fr)}
.p-grid--3{grid-template-columns:repeat(3,1fr)}
.p-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.p-grid--4{grid-template-columns:repeat(2,1fr)}.p-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.p-grid--2,.p-grid--3,.p-grid--4{grid-template-columns:1fr}}

/* ─── Section divider ────────────────────────────────────────────────────── */
.p-section{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--border-subtle)}
.p-section:first-child{margin-top:0;padding-top:0;border-top:none}

/* ─── Table ──────────────────────────────────────────────────────────────── */
.p-table-wrap{overflow-x:auto;margin:1.25rem 0}
.p-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.p-table th{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
  padding:0.65rem 1rem;border-bottom:1px solid var(--border);
  text-align:left;
}
.p-table td{padding:0.65rem 1rem;border-bottom:1px solid var(--border-subtle);color:var(--text)}
.p-table tr:last-child td{border-bottom:none}
.p-table tr:hover td{background:var(--hover-bg)}

/* ─── Metric ─────────────────────────────────────────────────────────────── */
/* One figure, large. --unknown is deliberately NOT an error colour: an unresolved
   value_key is a configuration problem for an administrator, not an alarm for the member
   of staff reading the dashboard — but it must not look like a confident zero either. */
.p-metric{padding:1.5rem 0 0.5rem}
.p-metric__value{
  font-family:var(--font-mono);font-size:2.75rem;line-height:1.1;
  color:var(--text);letter-spacing:-0.02em;
}
.p-metric__caption{
  font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);margin-top:0.5rem;
}
.p-metric--unknown .p-metric__value{color:var(--muted)}

/* ─── Code block ─────────────────────────────────────────────────────────── */
.p-code{
  font-family:var(--font-mono);font-size:0.82rem;
  background:var(--code-bg);border:1px solid var(--border-subtle);
  border-radius:8px;padding:1.25rem 1.5rem;
  white-space:pre;overflow-x:auto;
  color:var(--code-text);line-height:1.7;
  margin:1rem 0;
}

/* ─── Callout ────────────────────────────────────────────────────────────── */
.p-callout{
  border-radius:var(--radius);padding:1.25rem 1.5rem;
  margin:1.25rem 0;border-left:3px solid;
}
.p-callout--info{background:var(--cyan-dim);border-color:var(--cyan)}
.p-callout--warn{background:rgba(245,158,11,0.08);border-color:var(--warn)}
.p-callout--gold{background:var(--gold-dim);border-color:var(--gold)}
.p-callout__title{font-family:var(--font-head);font-weight:700;font-size:0.9rem;margin-bottom:0.35rem}
.p-callout p,.p-callout li{font-size:0.88rem;color:var(--muted)}

/* ─── Logo strip ─────────────────────────────────────────────────────────── */
.p-logos{
  display:flex;align-items:center;flex-wrap:wrap;gap:2rem;
  padding:1.25rem 0;
}
.p-logos img{
  height:28px;width:auto;
  opacity:0.55;filter:brightness(0) invert(1);
  transition:opacity 0.2s;
}
.p-logos img:hover{opacity:0.85}

/* ─── Activation tracker ─────────────────────────────────────────────────── */
.p-tracker{
  display:flex;align-items:center;gap:0;
  margin:1.5rem 0;
}
.p-tracker__step{
  display:flex;align-items:center;gap:0.6rem;
  font-size:0.83rem;font-weight:500;
}
.p-tracker__num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.7rem;font-weight:600;
  flex-shrink:0;
}
.p-tracker__step--done .p-tracker__num{background:var(--live);color:#000}
.p-tracker__step--done{color:var(--live)}
.p-tracker__step--active .p-tracker__num{background:var(--cyan);color:#000}
.p-tracker__step--active{color:var(--cyan)}
.p-tracker__step--pending .p-tracker__num{background:var(--hover-bg);color:var(--muted)}
.p-tracker__step--pending{color:var(--muted)}
.p-tracker__arrow{margin:0 0.5rem;color:var(--muted);font-size:0.85rem}

/* ─── Button ─────────────────────────────────────────────────────────────── */
.p-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-body);font-size:0.9rem;font-weight:600;
  padding:0.65rem 1.4rem;border-radius:8px;
  cursor:pointer;text-decoration:none;border:none;
  transition:all 0.15s;
}
.p-btn--primary{background:var(--cyan);color:var(--action-text)}
.p-btn--primary:hover{filter:brightness(1.15);text-decoration:none;color:var(--action-text)}
.p-btn--outline{background:transparent;color:var(--cyan);border:1px solid var(--border-h)}
.p-btn--outline:hover{background:var(--cyan-dim);text-decoration:none}
.p-btn--gold{background:var(--gold);color:var(--action-text)}
.p-btn--gold:hover{filter:brightness(1.15);text-decoration:none;color:var(--action-text)}
.p-btn--lg{font-size:1rem;padding:0.85rem 2rem}

/* ─── Stats row ──────────────────────────────────────────────────────────── */
.p-stats{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin:1.5rem 0;
}
.p-stats__item{
  flex:1;min-width:120px;
  padding:1.25rem 1rem;text-align:center;
  border-right:1px solid var(--border);
}
.p-stats__item:last-child{border-right:none}
.p-stats__val{
  font-family:var(--font-head);font-size:1.6rem;font-weight:800;
  color:var(--heading);display:block;
}
.p-stats__label{font-size:0.75rem;color:var(--muted);margin-top:0.2rem;font-family:var(--font-mono);letter-spacing:0.04em}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.p-hero{
  padding:2.5rem 0 2rem;
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:2rem;
}
.p-hero .p-eyebrow{margin-bottom:0.4rem}

/* ─── TMF badge ──────────────────────────────────────────────────────────── */
.tmf-badge{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.25rem;
  display:flex;flex-direction:column;gap:0.35rem;
}
.tmf-badge__std{
  font-family:var(--font-mono);font-size:1rem;font-weight:500;
  color:var(--cyan);
}
.tmf-badge__name{font-weight:600;color:var(--heading);font-size:0.9rem}
.tmf-badge__ver{font-family:var(--font-mono);font-size:0.72rem;color:var(--muted)}
.tmf-badge__link{
  font-size:0.78rem;color:var(--cyan);margin-top:0.5rem;
  display:inline-flex;align-items:center;gap:0.3rem;
}
.tmf-badge__link:hover{text-decoration:underline}

/* ─── Arch diagram ───────────────────────────────────────────────────────── */
.p-arch{
  font-family:var(--font-mono);font-size:0.78rem;
  background:var(--code-bg);border:1px solid var(--border-subtle);
  border-radius:8px;padding:1.5rem;
  color:var(--code-text);line-height:1.75;
  overflow-x:auto;white-space:pre;
  margin:1.25rem 0;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.p-tabs__nav{
  display:flex;flex-wrap:wrap;gap:0.5rem;
  margin-bottom:1.5rem;border-bottom:1px solid var(--border);
  padding-bottom:0.75rem;
}
.p-tab-btn{
  font-size:0.83rem;font-weight:500;
  background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:6px;
  padding:0.4rem 0.85rem;cursor:pointer;
  transition:all 0.15s;font-family:var(--font-body);
}
.p-tab-btn:hover{color:var(--text);border-color:var(--border)}
.p-tab-btn.active{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(0,168,232,0.35)}
.p-tab-pane{display:none}
.p-tab-pane.active{display:block}

/* ─── Resource doc card ──────────────────────────────────────────────────── */
.doc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.75rem}
.doc-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:1rem 1.1rem;
  display:flex;align-items:flex-start;gap:0.8rem;
  text-decoration:none;color:var(--text);
  transition:border-color 0.15s,background 0.15s;
}
.doc-item:hover{border-color:var(--border-h);background:var(--bg-card-h);text-decoration:none;color:var(--text)}
.doc-item__icon{font-size:1.1rem;flex-shrink:0;margin-top:0.1rem}
.doc-item__title{font-size:0.88rem;font-weight:600;color:var(--heading);margin-bottom:0.2rem;line-height:1.3}
.doc-item__desc{font-size:0.78rem;color:var(--muted)}
.doc-item--ext .doc-item__title::after{content:' ↗';font-size:0.75rem;color:var(--muted)}

/* ─── Team card ──────────────────────────────────────────────────────────── */
.team-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:1.25rem;
}
.team-card img{width:100%;height:180px;object-fit:cover;object-position:center top}
.team-card__name{font-family:var(--font-head);font-weight:700;color:var(--heading);margin:0.9rem 1rem 0.2rem}
.team-card__role{font-size:0.8rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:0.04em}

/* ─── Demo iframe ────────────────────────────────────────────────────────── */
.p-iframe-wrap{
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:#000;
  position:relative;
}
.p-iframe-bar{
  background:rgba(5,13,26,0.95);padding:0.6rem 1rem;
  display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--border);font-size:0.8rem;
}
.p-iframe-url{font-family:var(--font-mono);color:var(--muted);font-size:0.75rem}
.p-iframe-wrap iframe{display:block;width:100%;border:none}

/* ─── Roadmap item ───────────────────────────────────────────────────────── */
.roadmap-item{
  display:flex;align-items:flex-start;gap:1rem;
  padding:0.85rem 0;border-bottom:1px solid var(--border-subtle);
}
.roadmap-item:last-child{border-bottom:none}
.roadmap-item__icon{font-size:1.1rem;width:24px;flex-shrink:0;margin-top:0.1rem}
.roadmap-item__label{font-weight:600;color:var(--heading);font-size:0.9rem}
.roadmap-item__sub{font-size:0.8rem;color:var(--muted);margin-top:0.1rem}

/* ─── Logo strip label ───────────────────────────────────────────────────── */
.p-logo-strip{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.5rem;
  margin:1.5rem 0;
}
.p-logo-strip__label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.85rem}

/* ─── Wide card (full width) ─────────────────────────────────────────────── */
.p-card--wide{grid-column:1/-1}

/* ─── Highlight ──────────────────────────────────────────────────────────── */
.p-hl{color:var(--cyan)}
.p-gold{color:var(--gold)}
.p-live{color:var(--live)}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.p-main{animation:fadeIn 0.4s ease}

/* caveauPORTAL: Sign Out became a POST form (a GET that changes state is the wrong
   pattern to copy forward), so the button needs the anchor's appearance. */
.p-nav__signout-form{display:inline;margin:0}
button.p-nav__signout{font:inherit;cursor:pointer;background:none;border:1px solid var(--border);color:var(--text);padding:.4rem .9rem;border-radius:6px}
button.p-nav__signout:hover{border-color:var(--border-h);background:var(--bg-card-h)}

/* Content pages use the same portal palette as the original dashboard chrome. */
.p-main{padding:2.4rem 1.5rem 5rem}
.p-hero{padding:1.4rem 0 2rem;margin-bottom:1.5rem;border-color:var(--border)}
.p-hero .p-title{max-width:900px;text-wrap:balance}
.p-lead{font-size:1.05rem;line-height:1.65;color:var(--text);max-width:760px;text-wrap:pretty}
.p-hero .p-lead{color:var(--text)}
.p-section{margin-top:1.1rem;padding-top:0;border:0}
.p-section:first-child{margin-top:0}
.p-section--narrow{max-width:700px;margin-left:auto;margin-right:auto}
.p-card{padding:1.55rem 1.8rem;background:var(--bg-card)}
.p-card:hover{transform:none}
.p-card__title{font-size:1.24rem;line-height:1.35;text-wrap:balance}
.p-card__desc{font-size:.93rem;color:var(--muted);line-height:1.6}
.p-prose{max-width:78ch;color:var(--text);text-wrap:pretty}
.p-prose p{margin:.55rem 0 0}
.p-prose h3,.p-prose h4{margin:1.1rem 0 .4rem;font-family:var(--font-head);color:var(--heading)}
.p-prose ul,.p-prose ol{padding-left:1.35rem;margin:.6rem 0}
.p-prose li{margin:.35rem 0}
.p-list{margin:.9rem 0 0;padding:0;list-style:none}
.p-list li{padding:.55rem 0;border-bottom:1px solid var(--border);line-height:1.5}
.p-list li:last-child{border-bottom:0}
.p-list li strong{color:var(--heading)}
ol.p-list{padding-left:1.4rem;list-style:decimal}
ol.p-list li{padding-left:.25rem}
.p-list p{margin:.35rem 0;color:var(--text)}
.p-list small,.p-muted{font-size:.84rem;color:var(--muted)}
.p-folder-group{margin-top:1.2rem;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}
.p-folder-group__title{margin:0;color:var(--heading);font-family:var(--font-head);font-size:.95rem;line-height:1.45}
.p-folder-group .p-list{margin-top:.35rem}
.p-link{color:var(--cyan);font-weight:600}
.p-form{display:grid;gap:.65rem;margin-top:1.2rem;max-width:640px}
.p-label{font-size:.88rem;font-weight:600;color:var(--text)}
.p-input{
  width:100%;min-height:44px;padding:.62rem .82rem;
  color:var(--text);background:var(--input-bg);border:1px solid var(--border-h);
  border-radius:7px;font:inherit;font-size:.95rem;
}
.p-input:focus-visible,.p-btn:focus-visible,.p-nav a:focus-visible,
.p-nav button:focus-visible,.p-link:focus-visible,.p-list a:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;
}
.p-form .p-btn{justify-self:start;margin-top:.2rem}
.p-card--auth{max-width:560px;margin:2rem auto}
.p-card--auth .p-title{font-size:2.1rem}
.p-card--auth .p-form{max-width:none}
.p-card--auth .p-muted{margin-top:1rem}
.p-card .p-callout{margin-top:1rem}
@media (max-width:640px){
  .p-main{padding:1.2rem 1rem 3rem}
  .p-hero{padding:1.2rem 0 1.6rem}
  .p-card{padding:1.2rem}
  .p-nav{padding:0 .9rem}
  .p-nav__company{display:none}
  .p-list li{overflow-wrap:anywhere}
}
.p-footer{padding:2rem 1.5rem;text-align:center;color:var(--muted);font-size:.85rem}
/* Public pages (portal/explore.php): the demo button in the nav, sized to sit beside "Sign in". */
.p-nav__cta{font-size:.8rem;padding:.4rem .9rem;white-space:nowrap;flex:0 0 auto;margin-left:.75rem}
@media (max-width:480px){.p-nav--public .p-nav__brand{display:none}}
/* The bigger site logo still leaves the logo, "Menu" and the main call to action one row on a 320px
   phone: below 361px it steps down to 44px tall (still above the old 40px). */
@media (max-width:360px){.p-nav__site-logo{min-width:60px;height:52px}.p-nav__site-logo img{max-height:44px;max-width:60px}}

/* Mermaid diagram blocks (block_type=diagram).
   The panel stays LIGHT in both portal themes, and that is deliberate, not an oversight:
   assets/js/loop-diagram.js initialises Mermaid with theme:'default', which draws dark text
   and dark strokes. On the portal's dark surface that renders as near-black on near-black.
   Re-theming Mermaid per portal theme would mean re-rendering every diagram on a theme
   toggle and keeping two colour sets in step; pinning one legible panel is cheaper and is
   exactly what the public loop pages already do, so a diagram looks the same either side of
   the login. Palette matches assets/css/style.css so the two never drift apart. */
.loop-diagram{margin:0;padding:1rem;overflow-x:auto;border:1px solid #b8d1df;border-radius:var(--radius);background:#f4f9fc;color:#18384d}
.loop-diagram pre.mermaid{margin:0;color:#18384d;white-space:pre;background:none;border:0;padding:0;overflow-x:auto;overflow-y:hidden}
.loop-diagram__expand{margin-bottom:.75rem;border:1px solid #85b5cb;border-radius:.4rem;background:#fff;color:#075477;padding:.5rem .8rem;font:inherit;cursor:pointer}
.loop-diagram__expand:hover{background:#e6f2f8}
.loop-diagram__expand:focus-visible{outline:2px solid #075477;outline-offset:2px}
/* The full-screen zoom viewer styles itself: assets/js/diagram-viewer.js.
   A diagram too wide to fit at a readable size (assets/js/loop-diagram.js readableSize(), P21) keeps
   that size and its panel scrolls sideways: the panel is then a focusable, labelled region with a
   focus ring, edge shadows (the covers ride on the content and hide each shadow at its own end, in
   the panel's fixed light colour) and a one-line hint. Before the script runs, and without it, the
   source text simply scrolls inside the panel. */
.loop-diagram__hint{display:none;margin:0 0 .5rem;color:#36576a;font-size:.84rem}
.loop-diagram--scroll .loop-diagram__hint{display:block}
.loop-diagram--scroll pre.mermaid{padding-bottom:.6rem;
  background:linear-gradient(to right,#f4f9fc 30%,rgba(244,249,252,0)) left center/2.5rem 100% no-repeat local,
    linear-gradient(to left,#f4f9fc 30%,rgba(244,249,252,0)) right center/2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(7,84,119,.28),rgba(7,84,119,0)) left center/.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(7,84,119,.28),rgba(7,84,119,0)) right center/.9rem 100% no-repeat scroll}
.loop-diagram--scroll pre.mermaid:focus-visible{outline:2px solid #075477;outline-offset:2px}

/* Footer links (portal_footer_links, kit/010). */
.p-footer__links{display:inline-flex;flex-wrap:wrap;gap:6px 18px;margin-left:18px}
.p-footer__links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.p-footer__links{margin:8px 0 0;display:flex}}

/* Nav groups (nav_group / portal_nav_links, kit/010). Only a GROUPED nav changes overflow:
   the default horizontal scroll would clip the dropdown, so it wraps instead. */
.p-nav__links--grouped{overflow:visible;flex-wrap:wrap}
.p-nav__group{position:relative}
.p-nav__group>summary{list-style:none;cursor:pointer;display:inline-block}
.p-nav__group>summary::-webkit-details-marker{display:none}
.p-nav__group>summary::after{content:"";display:inline-block;margin-left:.4rem;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.p-nav__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:50;min-width:190px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
[data-theme="dark"] .p-nav__menu{background:var(--bg-mid)}

/* Header menu (P21, 2026-10-11). portal/includes/header.php MEASURES the bar and sets data-menu:
     inline     every entry and action fits on one row: the bar is that row;
     collapsed  the entries do not fit: they fold behind "Menu" and open as a panel under the bar;
     compact    not even the actions fit beside "Menu": they fold into the panel too, leaving the
                logo, "Menu" and the main call to action in one row (a phone).
   With no script there is no data-menu: the header stays in the flow and WRAPS, the entries on their
   own full-width row(s) under 1100px, so every entry is reachable and nothing covers the page. The
   header is sticky in every mode, so it never sits on top of the content below it; its measured
   height is --nav-h, which the anchors below and the wiki sidebar keep clear of. */
.p-nav__panel{display:contents}
.p-nav__toggle{display:none;flex:0 0 auto;align-items:center;gap:.5rem;min-height:36px;margin-left:.4rem;padding:.4rem .8rem;font:inherit;font-size:.85rem;font-weight:600;color:var(--heading);background:var(--bg-card);border:1px solid var(--border-h);border-radius:6px;cursor:pointer}
.p-nav__toggle::before{content:"";flex:none;width:15px;height:11px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.p-nav__toggle:hover{background:var(--bg-card-h)}
.p-nav__toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.p-nav:not([data-menu]){flex-wrap:wrap;row-gap:.35rem;padding-top:.4rem;padding-bottom:.4rem}
.p-nav:not([data-menu]) .p-nav__links{flex-wrap:wrap;overflow:visible}
@media (max-width:1099px){.p-nav:not([data-menu]) .p-nav__links{order:3;flex:1 1 100%}}
:root:has(.p-nav:not([data-menu])){--nav-h:9rem}
@media (max-width:640px){:root:has(.p-nav:not([data-menu])){--nav-h:16rem}}
.p-nav[data-menu]{flex-wrap:nowrap;height:var(--nav-bar)}
.p-nav[data-menu] .p-nav__links{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:visible}
.p-nav[data-menu] .p-nav__links>*,.p-nav[data-menu] .p-nav__right{flex:0 0 auto}
.p-nav[data-menu="collapsed"] .p-nav__toggle,.p-nav[data-menu="compact"] .p-nav__toggle{display:inline-flex}
.p-nav[data-menu="collapsed"] .p-nav__links,.p-nav[data-menu="compact"] .p-nav__panel{display:none}
.p-nav[data-menu="compact"] .p-nav__cta{margin-left:auto}
.p-nav--tight .p-nav__brand{display:none}
.p-nav[data-menu="collapsed"].is-open .p-nav__links,.p-nav[data-menu="compact"].is-open .p-nav__panel{
  display:flex;flex-direction:column;align-items:stretch;gap:.15rem;
  position:absolute;top:100%;left:0;right:0;
  max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;
  padding:.6rem 1.5rem 1rem;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 18px 30px rgba(0,0,0,.18)}
.p-nav[data-menu="compact"].is-open .p-nav__links{display:flex;flex-direction:column;align-items:stretch;gap:.15rem;flex:none}
.p-nav[data-menu="compact"].is-open .p-nav__right{margin:.6rem 0 0;padding-top:.75rem;border-top:1px solid var(--border);justify-content:flex-start;flex-wrap:wrap}
.p-nav.is-open .p-nav__link{display:block;padding:.6rem .75rem;font-size:.95rem;white-space:normal}
.p-nav.is-open .p-nav__group>summary{display:block}
.p-nav.is-open .p-nav__menu{position:static;min-width:0;padding:0 0 .3rem 1rem;background:transparent;border:0;box-shadow:none}
@media (max-width:640px){
  .p-nav[data-menu="collapsed"].is-open .p-nav__links,.p-nav[data-menu="compact"].is-open .p-nav__panel{padding:.5rem .9rem 1rem}
}

/* Block anchors (every layout): "On this page" and shared #b-<block_key> links land below the
   sticky header instead of under it. The page's scroll padding is the header's measured height
   (--nav-h), so a keyboard focus scrolled into view is never hidden under the header either. */
html{scroll-padding-top:var(--nav-h)}
.p-section[id]{scroll-margin-top:1rem}

/* Wiki layout (site_portal_pages.layout = 'wiki', kit/019; markup from lib/portal_wiki.php).
   A sidebar of the viewer's pages beside the hero and blocks; under 900px the sidebar folds into
   a "Pages" disclosure above the content. Nothing here may be wider than the viewport at 360px:
   every column is minmax(0, …) and long labels wrap. */
.p-wiki{display:grid;grid-template-columns:minmax(0,14.5rem) minmax(0,1fr);gap:2.5rem;align-items:start}
.p-wiki__main{min-width:0}
.p-wiki__nav{position:sticky;top:calc(var(--nav-h) + 1.2rem);max-height:calc(100vh - var(--nav-h) - 2.4rem);overflow:auto;padding:1.4rem 0 1rem;font-size:.9rem}
.p-wiki__nav-toggle{display:none}
.p-wiki__group+.p-wiki__group{margin-top:1.1rem}
.p-wiki__group-title{margin:0 0 .35rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p-wiki__pages{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.p-wiki__page{display:block;margin-left:-1px;padding:.32rem .8rem;border-left:2px solid transparent;color:var(--text);line-height:1.4;overflow-wrap:anywhere}
.p-wiki__page:hover{color:var(--cyan);text-decoration:none;background:var(--hover-bg)}
.p-wiki__page.is-current{color:var(--heading);font-weight:600;border-left-color:var(--cyan);background:var(--cyan-dim)}
.p-wiki__page:focus-visible,.p-wiki__toc a:focus-visible,.p-wiki__pager-link:focus-visible,.p-wiki__nav-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.p-wiki__updated{margin:-.6rem 0 1.2rem;font-size:.84rem;color:var(--muted)}
.p-wiki__toc{margin:0 0 1.4rem;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}
.p-wiki__toc-title{margin:0 0 .4rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p-wiki__toc ol{margin:0;padding-left:1.3rem;columns:2 16rem;column-gap:2rem}
.p-wiki__toc li{margin:.2rem 0;break-inside:avoid;overflow-wrap:anywhere}
.p-wiki__pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.p-wiki__pager-link{flex:1 1 14rem;max-width:100%;padding:.85rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--heading);font-weight:600;overflow-wrap:anywhere}
.p-wiki__pager-link:hover{border-color:var(--border-h);text-decoration:none}
.p-wiki__pager-link--next{text-align:right;margin-left:auto}
.p-wiki__pager-dir{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media (max-width:900px){
  .p-wiki{grid-template-columns:minmax(0,1fr);gap:0}
  .p-wiki__nav{position:static;max-height:none;overflow:visible;margin:0 0 1rem;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}
  .p-wiki__nav-toggle{display:block;padding:.75rem 1rem;cursor:pointer;font-weight:600;color:var(--heading)}
  .p-wiki__tree{padding:0 1rem 1rem}
  .p-wiki__pager-link--next{text-align:left}
}

/* Rich text tables, quotes and rules (portal_safe_html() keeps them since 2026-10-11, with no
   attributes, so every look comes from here). The table itself is width:auto: it takes the column
   and wraps its cells, like any text, and only a table whose NARROWEST layout is still wider than the
   column scrolls (never width:max-content, which lays every table out at its one-line width and
   scrolled even a 3-column table on a wide desktop). A wide table scrolls inside its own region
   (div.p-table-scroll: focusable and labelled, P21) instead of widening the page; the edge shadows
   show there is more to scroll to: the covers ride on the content (local) and hide each shadow
   once that edge is reached. The cover is the card on the page (bg-card over bg), so it matches a
   translucent dark card as well as an opaque light one. */
.p-table-scroll,.p-table-wrap{max-width:100%;overflow-x:auto;margin:1rem 0;
  --p-cover-l:linear-gradient(to right,var(--bg-card) 30%,transparent);--p-cover-r:linear-gradient(to left,var(--bg-card) 30%,transparent);
  --p-under-l:linear-gradient(to right,var(--bg) 30%,transparent);--p-under-r:linear-gradient(to left,var(--bg) 30%,transparent);
  background:var(--p-cover-l) left center/2.5rem 100% no-repeat local,var(--p-cover-r) right center/2.5rem 100% no-repeat local,
    var(--p-under-l) left center/2.5rem 100% no-repeat local,var(--p-under-r) right center/2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent) left center/.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) right center/.75rem 100% no-repeat scroll}
.p-table-scroll:focus-visible,.p-table-wrap:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.p-prose table{width:auto;margin:0;border-collapse:collapse;font-size:.92rem}
.p-prose th,.p-prose td{padding:.5rem .8rem;border:1px solid var(--border);text-align:left;vertical-align:top}
.p-prose th{color:var(--heading);background:var(--cyan-dim);font-weight:600}
.p-prose tr:nth-child(even) td{background:var(--hover-bg)}
.p-prose blockquote{margin:1rem 0;padding:.4rem 0 .4rem 1rem;border-left:3px solid var(--cyan);color:var(--text);font-style:italic}
.p-prose blockquote p:first-child{margin-top:0}
.p-prose hr{margin:1.5rem 0;border:0;border-top:1px solid var(--border)}

/* Links inside text are underlined (P21, WCAG 1.4.1): the link colour alone measured 2.38:1 against
   the body text, too close to tell apart. Buttons keep their own look. */
.p-prose a:not(.p-btn),.p-card a:not(.p-btn){text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.p-prose a:not(.p-btn):hover,.p-card a:not(.p-btn):hover{text-decoration-thickness:2px}

/* link_list with config.style "buttons": a call-to-action row (the first link is the main one). */
.p-list--buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.p-list--buttons li{padding:0;border:0;display:flex;flex-direction:column;gap:.3rem;max-width:100%}
.p-list--buttons .p-btn{justify-content:center;white-space:normal;text-align:center}

/* diagram config.caption, under the figure (the panel is light in both themes). */
.loop-diagram__caption{margin:.75rem 0 0;color:#36576a;font-size:.88rem;line-height:1.5}

/* public_resources ("Public downloads", kit/021): one entry per white paper or demo, its two
   actions in a row that wraps on a phone. A single group prints no folder box of its own. */
.p-public-resources .p-folder-group:only-child{margin-top:.5rem;padding:0;border:0;background:transparent}
.p-resource-list{list-style:none;margin:.35rem 0 0;padding:0}
.p-resource{padding:.9rem 0;border-top:1px solid var(--border)}
.p-resource:first-child{border-top:0}
.p-resource__title{margin:0;color:var(--heading);font-family:var(--font-head);font-size:1rem;line-height:1.4}
.p-resource__desc{margin:.3rem 0 0;color:var(--muted);line-height:1.55}
.p-resource__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 0}
.p-resource__actions .p-btn{white-space:normal;text-align:center}

/* The sign-in page of a site with public pages (kit/021): the form and the "Open to everyone"
   panel side by side, the panel below the form on a narrow screen. */
.p-section--login-open{max-width:980px;margin-left:auto;margin-right:auto}
.p-login-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.p-login-open .p-card--auth{margin:0;max-width:none}
.p-login-open__panel{margin:0}
.p-login-open__panel .p-list{margin-top:.6rem}
@media (max-width:720px){.p-login-open{grid-template-columns:minmax(0,1fr)}}