/* Meridian Portal — official PCON (Porsche Consulting) palette.
   Tokens extracted from the PCON TEMPLATE.pptx theme; documented in kb/templates/pcon-palette.md.
   Accent (#D5001C Porsche red) is used with consulting-grade restraint: primary buttons, active
   nav, focus rings, and small brand marks ONLY — never large fills. WCAG AA throughout. */
:root{
  --pcon-bg:#FFFFFF;          /* page background */
  --pcon-ink:#000000;         /* primary text + headers */
  --pcon-ink-2:#403F45;       /* secondary text */
  --pcon-muted:#737278;       /* muted/auxiliary text (AA on white) */
  --pcon-line:#DAD9DE;        /* borders / dividers */
  --pcon-panel:#ECEBF0;       /* subtle fills / panels */
  --pcon-disabled:#B5B4BA;    /* disabled / muted UI */
  --pcon-red:#D5001C;         /* single accent — Porsche red */
  --pcon-red-press:#A80016;   /* pressed/hover for the red accent */
  --sans:'Porsche Next TT', Arial, Helvetica, sans-serif;
  --display:'Porsche Next TT', 'Arial Black', Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
/* Reserve the scrollbar gutter ALWAYS so navigating between a short and a tall page never toggles
   the scrollbar — which otherwise shifts the whole centred layout sideways (guide left-menu jump). */
html{scrollbar-gutter:stable}
body{margin:0;font:15px/1.5 var(--sans);color:var(--pcon-ink);background:var(--pcon-bg);
  -webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:var(--pcon-ink-2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top bar: white with a divider; brand mark carries the only accent here ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;
  background:var(--pcon-bg);border-bottom:1px solid var(--pcon-line)}
.topbar nav{display:flex;align-items:center;gap:18px}
.topbar nav a{color:var(--pcon-ink-2);padding:2px 0;border-bottom:2px solid transparent}
.topbar nav a:hover{text-decoration:none;border-bottom-color:var(--pcon-line)}
.topbar nav a.active{color:var(--pcon-red);border-bottom-color:var(--pcon-red)}
.who{color:var(--pcon-muted);font-size:13px}

main{max-width:1040px;margin:24px auto;padding:0 24px}
.foot{max-width:1040px;margin:40px auto;padding:0 24px;color:var(--pcon-muted);font-size:12px;
  border-top:1px solid var(--pcon-line);padding-top:16px}
h1,h2,h3{font-family:var(--display);color:var(--pcon-ink)}
h1{font-size:24px;font-weight:900;margin:.2em 0 .6em;letter-spacing:.01em}
h2{font-size:16px;font-weight:700;margin:1.2em 0 .5em}

.card{background:var(--pcon-bg);border:1px solid var(--pcon-line);border-radius:10px;padding:20px;margin-bottom:20px}
.card.narrow{max-width:380px;margin:48px auto}

label{display:block;margin:12px 0;font-size:13px;color:var(--pcon-ink-2)}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--pcon-line);border-radius:7px;
  font:inherit;margin-top:4px;background:var(--pcon-bg);color:var(--pcon-ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pcon-red);
  box-shadow:0 0 0 3px rgba(213,0,28,.18)}            /* accent focus ring */

button{cursor:pointer;font:inherit}
button.primary{background:var(--pcon-red);color:#fff;border:0;border-radius:7px;padding:9px 16px;font-weight:700}
button.primary:hover{background:var(--pcon-red-press)}
button.primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(213,0,28,.30)}
button.link{background:none;border:0;color:var(--pcon-ink-2);padding:0;font-size:13px;text-decoration:underline}
button.link:hover{color:var(--pcon-ink)}
button.link.danger{color:var(--pcon-red)}
button.link.danger:hover{color:var(--pcon-red-press)}
.inline{display:inline}

.error{color:#fff;background:var(--pcon-red);padding:8px 12px;border-radius:7px}
.muted{color:var(--pcon-muted);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card.eng{display:block;transition:border-color .15s}
.card.eng:hover{border-color:var(--pcon-red);text-decoration:none}
.eng-title{font-family:var(--display);font-weight:700;font-size:16px;color:var(--pcon-ink)}
.eng-sub{color:var(--pcon-muted);font-size:13px;margin:4px 0 10px}
.eng-meta{display:flex;gap:6px;flex-wrap:wrap}

/* badges: neutral subtle fills — keep accent off large/ambient surfaces */
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--pcon-panel);color:var(--pcon-ink-2);text-transform:lowercase}
.badge.level{background:var(--pcon-panel);color:var(--pcon-ink)}
.badge.status-active,.badge.status-delivery{background:var(--pcon-panel);color:var(--pcon-ink)}
.badge.status-intake,.badge.status-disabled{background:var(--pcon-panel);color:var(--pcon-muted)}

/* ---- Activity & Progress ------------------------------------------------ */
/* activity dot: red == a live session is working now; amber == recent file activity. */
.dot{font-size:11px;line-height:1;vertical-align:middle}
.dot.live{color:var(--pcon-red)}
.dot.recent{color:#B8860B}            /* amber — recent but no live session */
.dot.idle{color:var(--pcon-disabled)}
.eng-titlerow{display:flex;align-items:center;gap:8px;justify-content:space-between}
.eng-titlerow .eng-title{flex:1}
.eng-happening{color:var(--pcon-ink-2);font-size:13px;margin:2px 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eng-progress{margin-top:12px}
.pbar{height:5px;background:var(--pcon-panel);border-radius:3px;overflow:hidden}
.pbar>span{display:block;height:100%;background:var(--pcon-red);border-radius:3px}
.pnote{display:block;margin-top:5px;color:var(--pcon-muted);font-size:11px}

.eng-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.activity-flag{font-size:13px;color:var(--pcon-ink-2);white-space:nowrap;padding-top:30px}
.activity-flag .flag-on{color:var(--pcon-red);font-weight:700}

.progress-card .progress-head{display:flex;justify-content:space-between;align-items:baseline}
.progress-card .progress-head h2{margin:0}
.happening{background:var(--pcon-panel);border-left:4px solid var(--pcon-red);
  padding:8px 12px;border-radius:8px;margin:12px 0;font-size:14px;color:var(--pcon-ink-2)}
.happening-label{color:var(--pcon-muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;margin-right:6px}
ol.milestones{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px}
ol.milestones li{display:flex;align-items:center;gap:8px;font-size:14px;flex:1 1 240px}
ol.milestones li.pending{color:var(--pcon-muted)}
ol.milestones .ms-mark{font-weight:700;width:14px;text-align:center}
ol.milestones li.done .ms-mark{color:var(--pcon-red)}
ol.milestones li.pending .ms-mark{color:var(--pcon-disabled)}
ol.milestones .ms-label{flex:1}
ol.milestones .ms-date{font-size:11px}

/* ---- coherent state pill (Active / Waiting on Eduardo / Closed) ---- */
.state-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;
  border:1px solid var(--pcon-line);letter-spacing:.02em}
.state-pill.state-active{background:#fff;color:var(--pcon-red);border-color:var(--pcon-red)}
.state-pill.state-waiting{background:var(--pcon-red);color:#fff;border-color:var(--pcon-red)}
.state-pill.state-closed{background:var(--pcon-panel);color:var(--pcon-muted);border-color:var(--pcon-line)}
.badge.needs{background:var(--pcon-red);color:#fff;font-weight:700;text-transform:none}

/* ---- Review & Approval (review/ staging) ---- */
.review-card .badge.needs{margin-left:6px}
.badge.approved{background:var(--pcon-panel);color:var(--pcon-ink-2)}
ul.review-list{list-style:none;padding:0;margin:8px 0 0}
ul.review-list li.review-item{padding:12px 0;border-bottom:1px solid var(--pcon-line)}
ul.review-list li.review-item:last-child{border-bottom:0}
.review-item.ri-changes_requested{border-left:3px solid var(--pcon-red);padding-left:12px}
.ri-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ri-comment{font-size:13px;margin:4px 0 0}
.ri-actions{display:flex;align-items:flex-start;gap:14px;margin-top:8px;flex-wrap:wrap}
.ri-actions form.inline{display:inline}
.ri-rc{font-size:13px}
.ri-rc summary{cursor:pointer;color:var(--pcon-ink-2);text-decoration:underline}
.ri-rc .rc-form{margin-top:6px;max-width:420px}
.ri-rc .rc-form textarea{width:100%}
.ri-source{margin-left:8px;font-size:12px;text-decoration:underline}
.ri-rendering{margin-left:8px;font-style:italic}

/* ---- Now / Next / Needs-you panel ---- */
.nnn{padding:0}
.nnn-row{display:grid;grid-template-columns:1.4fr 1fr 1fr}
.nnn-cell{padding:16px 18px;border-right:1px solid var(--pcon-line)}
.nnn-cell:last-child{border-right:0}
.nnn-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pcon-muted);
  font-weight:700;margin-bottom:5px}
.nnn-now{font-size:15px;color:var(--pcon-ink);font-weight:600}
.nnn-cell.needs{background:#FAFAFB}
.nnn-cell.needs.has-need{background:var(--pcon-panel);border-left:4px solid var(--pcon-red)}
.nnn-cell.needs.has-need .nnn-label{color:var(--pcon-red)}
/* Awaiting input (engagement-centric, not on the viewer): a quieter amber rule, not the red
   personal one — the engagement awaits a collaborator, but nothing is assigned to YOU. */
.nnn-cell.needs.awaiting{background:#FCFBF7;border-left:4px solid #d9a300}
.nnn-cell.needs.awaiting .nnn-label{color:#7a5c00}
/* ---- open-item assignment control ---- */
.assign-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--pcon-line)}
.assign-who{font-size:12px;color:var(--pcon-ink-2);font-weight:600}
.assign-who.unassigned{color:var(--pcon-muted);font-weight:400}
.assign-ctl{font-size:12px}
.assign-ctl>summary{cursor:pointer;color:var(--pcon-red);font-weight:600;list-style:none}
.assign-ctl>summary::-webkit-details-marker{display:none}
.assign-form{display:flex;gap:6px;align-items:center;margin:8px 0 4px}
.assign-form select{font-size:13px;padding:4px 6px;border:1px solid var(--pcon-line);
  border-radius:6px;background:#fff;max-width:180px}
.badge.assigned{background:var(--pcon-panel);color:var(--pcon-ink-2);text-transform:none}

/* ---- plain-language activity feed ---- */
ul.feed{list-style:none;padding:0;margin:0}
ul.feed li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--pcon-line);font-size:14px}
ul.feed li:last-child{border-bottom:0}
.feed-date{color:var(--pcon-muted);font-size:12px;white-space:nowrap;min-width:78px;padding-top:1px}
.feed-text{color:var(--pcon-ink)}
/* ---- parsed message thread (clean bubbles) ---- */
ul.msg-thread{list-style:none;padding:0;margin:0 0 14px;max-height:560px;overflow-y:auto}
.msg{border:1px solid var(--pcon-line);border-radius:10px;padding:12px 14px;margin:10px 0;background:#fff}
.msg-meridian{background:var(--pcon-panel)}                 /* Meridian replies sit on a subtle fill */
.msg-system{background:var(--pcon-bg);border-style:dashed} /* system/kickoff note, lighter weight */
.msg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.msg-sender{font-weight:700;font-size:13px;color:var(--pcon-ink)}
.msg-meridian .msg-sender{color:var(--pcon-red)}
.msg-when{font-size:12px}
.msg-body{white-space:pre-wrap;word-break:break-word;font-size:14px;color:var(--pcon-ink-2);line-height:1.55}
/* collapse very long replies (~15 lines) until "Show more" */
.msg-body.is-collapsed{max-height:21em;overflow:hidden;position:relative}
.msg-body.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;
  background:linear-gradient(transparent,var(--pcon-panel))}
.msg:not(.msg-meridian) .msg-body.is-collapsed::after{background:linear-gradient(transparent,#fff)}
.msg-more{background:none;border:0;color:var(--pcon-red);font-size:13px;font-weight:600;
  cursor:pointer;padding:4px 0;margin-top:2px}
/* copy-block: a verbatim-use deliverable (e.g. an email draft) set apart with a one-tap Copy */
.seg-text{white-space:pre-wrap;word-break:break-word}
.seg-text + .copy-block,.copy-block + .seg-text{margin-top:10px}
.copy-block{border:1px solid var(--pcon-line);border-left:3px solid var(--pcon-red);
  border-radius:8px;background:#fff;margin:10px 0;overflow:hidden}
.copy-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;background:var(--pcon-bg);border-bottom:1px solid var(--pcon-line)}
.copy-block-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pcon-muted)}
.copy-btn{background:#fff;border:1px solid var(--pcon-line);border-radius:6px;color:var(--pcon-ink);
  font-size:12px;font-weight:600;cursor:pointer;padding:4px 12px;line-height:1.4;min-height:30px;
  -webkit-tap-highlight-color:transparent}
.copy-btn:hover{border-color:var(--pcon-ink-2);color:var(--pcon-ink)}
.copy-btn.copied{color:#1a8a3a;border-color:#1a8a3a}
.copy-block-body{white-space:pre-wrap;word-break:break-word;padding:12px;font-size:14px;
  color:var(--pcon-ink);line-height:1.55}

details.rawthread,details.milestones-detail{margin-top:12px}
details.rawthread>summary,details.milestones-detail>summary{cursor:pointer;color:var(--pcon-muted);
  font-size:13px;padding:4px 0}
details.rawthread>summary:hover,details.milestones-detail>summary:hover{color:var(--pcon-ink)}
details.rawthread .thread{margin-top:8px}
details.milestones-detail ol.milestones{margin-top:10px}

.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.thread{white-space:pre-wrap;word-break:break-word;background:var(--pcon-panel);
  border:1px solid var(--pcon-line);border-radius:8px;padding:14px;max-height:460px;overflow:auto;font-size:14px}
.chat-form,.upload-form{margin-top:12px}
.chat-form button,.upload-form button{margin-top:8px}

/* Working-state banner: RED, glowing, alive — signals the system is actively thinking, not stuck.
   Red-tinted fill, red edge, dark-red text, a breathing box-shadow glow + a pulsing dot. */
.working{display:flex;align-items:center;gap:11px;
  background:#FDECEE;border:1px solid var(--pcon-red);
  color:#8A0012;padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;
  box-shadow:0 0 0 0 rgba(213,0,28,.30);animation:workingGlow 2.2s ease-in-out infinite}
/* hidden=means hidden: author display:flex above would otherwise beat the UA [hidden] rule, so the
   banner must NEVER show at 0 pending — specificity (0,2,0) here wins over .working (0,1,0). */
.working[hidden]{display:none!important}
.working .working-msg{font-weight:600}
/* TACHOMETER — a clean rev gauge that reads unmistakably as an instrument at ~20px (the piston engine
   read as tally-marks this small). Arc + a few ticks + a subtle redline near the top of the range +
   a short red needle that sweeps up off rest and quivers in the lower-mid rev band: an engine ALIVE
   at idle, NOT a smooth full-scale spin. Thin red strokes (house one-colour iconography). Pure CSS
   rotate on the needle (transform-origin at the gauge pivot); GPU-friendly, no JS timers. The same
   `.tach` markup is reused for the in-thread "working on your reply" cue at the composer. */
.tach{flex:none;height:18px;width:auto;display:block}
.tach .tach-arc{fill:none;stroke:var(--pcon-red);stroke-width:1.2;stroke-linecap:round;opacity:.5}
.tach .tach-redline{fill:none;stroke:var(--pcon-red);stroke-width:1.9;stroke-linecap:round;opacity:.9}
.tach .tach-ticks line{stroke:var(--pcon-red);stroke-width:.9;stroke-linecap:round;opacity:.45}
.tach .tach-ticks .tk-red{opacity:.85;stroke-width:1.1}
.tach .tach-needle line{stroke:var(--pcon-red);stroke-width:1.6;stroke-linecap:round}
.tach .tach-needle circle{fill:var(--pcon-red)}
/* The needle pivots at the gauge centre (12,14 in the viewBox). transform-box:view-box makes
   transform-origin resolve in viewBox units, so the rotation pivot is exact across browsers. */
.tach .tach-needle{transform-box:view-box;transform-origin:12px 14px;
  animation:tachIdle 4.5s ease-in-out infinite;will-change:transform}
@keyframes workingGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(213,0,28,.10);border-color:var(--pcon-red)}
  50%{box-shadow:0 0 14px 3px rgba(213,0,28,.38);border-color:#A80016}}
/* rotate(0deg) = needle at the lower-mid idle reading; +deg = clockwise toward the redline. The loop
   lives ENTIRELY in the idle band and never returns to full rest (a parked needle would read as the
   engine cutting out) — restless jitter + one gentle rev blip per loop. Calm, precise, not frantic.
   Stylised for legibility at icon scale — noted, per the design-language rule. */
@keyframes tachIdle{
  0%   {transform:rotate(-7deg)}
  9%   {transform:rotate(0deg)}    /* sweep up off rest into the idle band */
  16%  {transform:rotate(4deg)}    /* restless idle jitter … */
  22%  {transform:rotate(-2deg)}
  28%  {transform:rotate(3deg)}
  34%  {transform:rotate(-1deg)}
  44%  {transform:rotate(26deg)}   /* an occasional rev blip toward the redline */
  52%  {transform:rotate(8deg)}    /* … falling back off the blip */
  60%  {transform:rotate(2deg)}    /* settle, jitter again … */
  68%  {transform:rotate(5deg)}
  76%  {transform:rotate(0deg)}
  84%  {transform:rotate(4deg)}
  92%  {transform:rotate(-3deg)}
  100% {transform:rotate(-7deg)}}
@media (prefers-reduced-motion: reduce){
  /* static red variant — no breathing/pulse; needle parked at a low-mid reading so it still reads
     unmistakably as a tach, just not moving. Same discipline as the banner glow above. */
  .working{animation:none;box-shadow:0 0 10px 1px rgba(213,0,28,.22)}
  .tach .tach-needle{animation:none;transform:rotate(3deg)}}
/* In-thread working cue — the SAME tach motif at the FOOT of the conversation thread, right by the
   composer, so a collaborator gets immediate, PROXIMATE confirmation their message landed and a
   reply is coming (the top banner is far from where their eyes are). Created/toggled by JS. */
.thread-working{display:flex;align-items:center;gap:9px;margin:12px 2px 2px;
  color:#8A0012;font-size:13px;font-weight:600}
.thread-working .tach{height:20px}
.thread-working[hidden]{display:none!important}
.thread-working.failed{color:var(--pcon-ink-2);font-weight:500}
.thread-working.failed .tach{display:none}
.livebanner{background:var(--pcon-panel);border:1px solid var(--pcon-line);border-left:4px solid var(--pcon-red);
  color:var(--pcon-ink-2);padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.livebanner .dot{margin-right:6px}
.files{list-style:none;padding:0;margin:0}
.files li{padding:6px 0;border-bottom:1px solid var(--pcon-line)}

table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--pcon-line);vertical-align:top}
th{color:var(--pcon-muted);font-weight:700}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row input,.row select{width:auto;flex:1;min-width:140px}
.actions{display:flex;gap:10px}
.mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.invite-link{display:block;margin-top:6px;word-break:break-all;background:var(--pcon-bg);
  border:1px solid var(--pcon-line);padding:6px 8px;border-radius:6px}
.back{font-size:13px}
table.audit td{font-size:12px}

/* disabled controls use the muted-UI token */
button:disabled,input:disabled,select:disabled,[aria-disabled="true"]{color:var(--pcon-disabled);
  border-color:var(--pcon-line);cursor:not-allowed}

/* ---- phone / small-screen (colleagues open the funnel URL on mobile) ---- */
@media(max-width:760px){
  .topbar{flex-wrap:wrap;gap:8px 14px;padding:12px 16px}
  .topbar nav{gap:14px;flex-wrap:wrap;width:100%}
  .who{order:3;width:100%}
  main{margin:16px auto;padding:0 16px}
  .foot{margin:28px auto;padding:14px 16px 0}
  .card{padding:16px;overflow-x:auto}          /* wide admin/audit tables scroll inside the card */
  .card.narrow{margin:28px auto}
  h1{font-size:21px}
  .two-col{grid-template-columns:1fr}
  .eng-header{flex-direction:column;gap:6px}
  .activity-flag{padding-top:0}
  ol.milestones li{flex:1 1 100%}
  .nnn-row{grid-template-columns:1fr}
  .nnn-cell{border-right:0;border-bottom:1px solid var(--pcon-line)}
  .nnn-cell:last-child{border-bottom:0}
  .row input,.row select{flex:1 1 100%;min-width:0}
  /* comfortable touch targets; 16px inputs stop iOS Safari zoom-on-focus */
  button.primary{min-height:44px;width:100%}
  input,textarea,select{min-height:44px;font-size:16px}
  .actions{gap:14px}
  table.audit{font-size:12px}
}
@media(max-width:420px){
  .grid{grid-template-columns:1fr}
  .topbar .brand-word{font-size:15px;letter-spacing:.10em}
  .who{font-size:12px}
}

/* ===== Collaboration layer (Whirlpool build) ===================================== */
/* Flash banners after a chat POST — guardrails #1/#3/#4. */
.flash{padding:10px 14px;border-radius:8px;margin:0 0 16px;font-size:14px;border:1px solid var(--pcon-line)}
.flash.sent{background:var(--pcon-panel);color:var(--pcon-ink-2)}
.flash.warn{background:#FFF6E5;border-color:#E0A100;color:#6b4e00}
.flash.blocked{background:#FDE7EA;border-color:var(--pcon-red);color:var(--pcon-red-press)}
.flash.declined{background:var(--pcon-panel);border-color:var(--pcon-disabled);color:var(--pcon-ink-2)}

/* Owner escalation banner + collaborator digest on the dashboard. */
.escalation-banner{background:#FDE7EA;border:1px solid var(--pcon-red);border-radius:8px;
  padding:12px 16px;margin-bottom:20px;color:var(--pcon-red-press);font-size:14px}
.escalation-banner .esc-link{margin-left:10px;color:var(--pcon-red);font-weight:700;text-decoration:underline}
.collab-digest summary{cursor:pointer;font-family:var(--display);font-weight:700}
.collab-digest .feed{margin:12px 0 0}

/* Admin: needs-action card + budget/tier badges + inline limit forms. */
.card.needs-action{border-color:var(--pcon-red);border-width:2px}
.badge.budget-ok{background:var(--pcon-panel);color:var(--pcon-ink-2)}
.badge.budget-warn{background:#FFF6E5;color:#6b4e00}
.badge.budget-blocked{background:#FDE7EA;color:var(--pcon-red-press)}
.badge.needs{background:var(--pcon-red);color:#fff}
.badge.tier-light{background:var(--pcon-panel);color:var(--pcon-ink-2)}
.badge.tier-mid{background:#E5EEF7;color:#1d4e7a}
.badge.tier-full{background:#FDE7EA;color:var(--pcon-red-press)}
.limitform{display:inline-flex;align-items:center;gap:4px}
.limitform input[type=number]{width:96px;margin:0;padding:4px 6px;font-size:12px}
button.link.primary-link{color:var(--pcon-red);font-weight:700}

/* ===== Portal redesign (2026-06-12): shell + side menu + Home + nav pages ========= */
/* ---- topbar: logo mark + hamburger ---- */
.topbar-left{display:flex;align-items:center;gap:11px}
/* the M mark IS the drawer toggle (no hamburger) — accessible button, subtle hover */
.brand-toggle{display:flex;align-items:center;justify-content:center;background:none;border:0;
  padding:3px;border-radius:8px;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.brand-toggle:hover{filter:brightness(1.15);transform:scale(1.06)}
.brand-toggle:focus-visible{outline:2px solid var(--pcon-red);outline-offset:2px}
.brand-mark{display:block}
.brand-word{font-family:var(--display);font-weight:900;letter-spacing:.14em;font-size:17px;
  color:var(--pcon-ink)}
a.primary-link{color:var(--pcon-red);font-weight:700}

/* ---- drawer ---- */
.drawer{position:fixed;top:0;left:0;bottom:0;width:264px;background:var(--pcon-bg);z-index:40;
  border-right:1px solid var(--pcon-line);transform:translateX(-100%);transition:transform .18s ease;
  display:flex;flex-direction:column;box-shadow:2px 0 18px rgba(0,0,0,.06)}
body.drawer-open .drawer{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .18s ease;z-index:35}
body.drawer-open .scrim{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--pcon-line)}
.drawer-user{display:flex;flex-direction:column;line-height:1.3;overflow:hidden}
.drawer-user strong{font-family:var(--display);font-size:14px}
.drawer-user span{color:var(--pcon-muted);font-size:12px;text-transform:capitalize}
.drawer-nav{display:flex;flex-direction:column;padding:10px 0;flex:1;overflow-y:auto}
.drawer-nav a,.navlink-locked{display:flex;align-items:center;gap:12px;padding:11px 22px;font-size:14px;
  color:var(--pcon-ink-2);border-left:3px solid transparent}
.drawer-nav a:hover{text-decoration:none;background:var(--pcon-panel);color:var(--pcon-ink)}
.drawer-nav a.active{color:var(--pcon-red);border-left-color:var(--pcon-red);font-weight:700}
.drawer-nav .ic{width:18px;text-align:center;color:var(--pcon-muted);font-size:14px}
.drawer-nav a.active .ic{color:var(--pcon-red)}
.navlink-locked{color:var(--pcon-disabled);cursor:not-allowed}
.navlink-locked .lock{font-size:11px;margin-left:auto}
.navbadge{margin-left:auto;background:var(--pcon-red);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.drawer-foot{border-top:1px solid var(--pcon-line);padding:8px 0}
.drawer-foot a{display:flex;align-items:center;gap:12px;padding:11px 22px;font-size:14px;color:var(--pcon-ink-2)}
.drawer-foot a:hover{background:var(--pcon-panel);text-decoration:none}
.drawer-foot a .ic{width:18px;text-align:center;color:var(--pcon-muted)}
.drawer-foot form{padding:6px 22px}
.main-plain{max-width:1040px}

/* ---- Home: needs strip / live now / heads ---- */
.home-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.home-head h1,.home-head h2{margin:.2em 0 .5em}
.feed-text{min-width:0;overflow-wrap:anywhere}
ul.feed li{min-width:0}
.seeall{font-size:13px;color:var(--pcon-red)}
/* ---- Home: Needs-you red cards / deck ---- */
.needs-deck{margin-bottom:20px}
.needs-card{display:flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--pcon-red);color:#fff;border:1px solid var(--pcon-red-press);border-radius:12px;
  padding:15px 18px;box-shadow:0 2px 10px rgba(213,0,28,.20)}
.needs-card:focus-visible{outline:none;box-shadow:0 2px 10px rgba(213,0,28,.20),0 0 0 3px rgba(213,0,28,.35)}
.needs-card .needs-ic{flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:#fff}
.needs-card-body{flex:1;min-width:0}
.needs-card-eng{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.01em}
.needs-card-line{font-size:14px;color:#fff;opacity:.92;margin-top:2px;overflow-wrap:anywhere}
.needs-card-count{flex:none;font-size:12px;font-weight:700;color:#fff;opacity:.85;
  white-space:nowrap;letter-spacing:.04em}

/* Stacked deck: every card occupies the same grid cell (so the deck auto-sizes to the tallest
   card); the others peek out below + behind the top one via transform (no layout impact). The
   extra bottom padding reserves room for the peek so the deck never overlaps the next block. */
.needs-deck.is-stack{display:grid;padding-bottom:30px}
.needs-deck.is-stack .needs-card{grid-area:1/1;cursor:pointer;outline:none;
  transform:translateY(calc(var(--depth,0) * 9px)) scale(calc(1 - var(--depth,0) * 0.035));
  transform-origin:top center;
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease}
.needs-deck.is-stack .needs-card:not(.is-top){box-shadow:0 1px 6px rgba(213,0,28,.16);filter:brightness(.96)}
.needs-deck.is-stack .needs-card.is-top{box-shadow:0 6px 18px rgba(213,0,28,.30)}
.needs-deck.is-stack .needs-card.is-top:focus-visible{box-shadow:0 6px 18px rgba(213,0,28,.30),0 0 0 3px rgba(213,0,28,.35)}

@media (prefers-reduced-motion: reduce){
  .needs-deck.is-stack .needs-card{transition:none}}

.livebanner .pulse{animation:pulse 1.8s ease-in-out infinite}
.live-item{font-size:13px}.live-sep{margin:0 6px;color:var(--pcon-muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- greyed cards (greyed-but-full-detail rule) ---- */
.card.eng.greyed{opacity:.62;filter:grayscale(.35);cursor:not-allowed;background:#FBFBFC}
.card.eng.greyed:hover{border-color:var(--pcon-line)}
.badge.locked{background:var(--pcon-panel);color:var(--pcon-muted);text-transform:none}
.recent-activity .feed-eng{font-weight:700;color:var(--pcon-ink-2)}
.recent-activity .feed-eng:hover{color:var(--pcon-red)}
a.feed-eng{color:var(--pcon-ink-2);font-weight:700}

/* ---- filters (Engagements / Activity) ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 20px}
.filter-pill{font-size:13px;padding:4px 12px;border:1px solid var(--pcon-line);border-radius:20px;
  color:var(--pcon-ink-2);background:var(--pcon-bg)}
.filter-pill:hover{text-decoration:none;border-color:var(--pcon-red)}
.filter-pill.on{background:var(--pcon-ink);color:#fff;border-color:var(--pcon-ink)}
.filter-sep{width:1px;height:20px;background:var(--pcon-line);margin:0 4px}
.badge.bucket-active{background:#E9F2EA;color:#1f6b35}
.badge.bucket-completed{background:var(--pcon-panel);color:var(--pcon-muted)}
.badge.bucket-dormant{background:#FBF1DF;color:#7a5c00}

/* ---- Needs page / empty states ---- */
.needs-page-list{list-style:none;padding:0;margin:0}
.needs-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.needs-eng-label{font-family:var(--display);font-weight:700;font-size:14px}
.needs-text-full{color:var(--pcon-ink-2);font-size:14px;margin-top:3px}
.needs-budget{border-color:var(--pcon-red)}
.empty-state{text-align:center;padding:48px 20px;color:var(--pcon-muted)}
.empty-mark{opacity:.5;margin-bottom:12px}

/* ---- My usage ---- */
.usage-bars{display:flex;flex-direction:column;gap:16px;margin:8px 0 16px}
.usage-bar-label{font-size:13px;margin-bottom:6px}
.usage-bars .pbar{height:8px}
.usage-bars .pbar>span.warn{background:#E0A100}
.usage-bars .pbar>span.over{background:var(--pcon-red)}

.auth-card{text-align:center}
.auth-logo{display:block;margin:0 auto 14px;max-width:200px;height:auto}
.auth-card form,.auth-card .muted{text-align:left}

/* ---- Dark Sign-in (Porsche template style) — full black page, red accent kept ---- */
body.auth-dark{background:#0B0B0D;color:#EDEDF0;min-height:100vh;display:flex;flex-direction:column}
/* full-height centering of the card — horizontally AND vertically, balanced at narrow too */
body.auth-dark .main-plain{flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:none;padding:24px}
body.auth-dark .foot{margin:0;text-align:center}
.auth-tagline{color:#fff;font-family:var(--display);font-weight:300;font-size:16px;
  letter-spacing:.04em;margin:6px 0 20px}
/* modest heading on the invite/set-password screen (shares the dark auth layout) */
.auth-subhead{color:#fff;font-family:var(--display);font-weight:300;font-size:16px;
  letter-spacing:.04em;margin:6px 0 16px}
.auth-account{margin:0 0 14px}
body.auth-dark .auth-account{color:#A6A6AD}
body.auth-dark .auth-account strong{color:#EDEDF0}
/* field hint as fine print under the input (not in the label) */
.auth-card .field-hint{font-size:12px;margin:-6px 0 12px}
body.auth-dark .field-hint{color:#8A8A92}
/* Ignition START button — circular Porsche-red with a white power glyph, centered in the card */
.ignition-wrap{text-align:center;margin-top:22px}
.ignition{display:inline-flex;align-items:center;justify-content:center;width:78px;height:78px;
  border-radius:50%;background:var(--pcon-red);border:0;cursor:pointer;
  box-shadow:0 8px 22px rgba(213,0,28,.38);transition:transform .14s ease,filter .14s ease}
.ignition:hover{filter:brightness(1.09);transform:scale(1.045)}
.ignition:active{transform:scale(.98)}
.ignition:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ignition .power-ic{width:36px;height:36px}
.auth-card .ignition-cap{display:block;margin-top:11px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;text-align:center}
body.auth-dark .ignition-cap{color:#8A8A92}
body.auth-dark .auth-card{background:#141417;border:1px solid #26262B;border-radius:14px;
  padding:34px 32px;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
body.auth-dark h1{color:#fff;letter-spacing:.01em}
body.auth-dark label{color:#A6A6AD}                       /* muted light label */
body.auth-dark input{background:#0E0E11;border:1px solid #303036;color:#EDEDF0}
body.auth-dark input::placeholder{color:#6A6A72}
body.auth-dark input:focus{border-color:var(--pcon-red);
  box-shadow:0 0 0 3px rgba(213,0,28,.22)}               /* refined red focus ring */
body.auth-dark .muted{color:#8A8A92}                       /* invite-only line, muted gray */
/* notices: keep AA contrast on dark */
body.auth-dark .signout-note{background:#1B1B1F;border:1px solid #2C2C32;
  border-left:3px solid var(--pcon-red);color:#D7D7DD}
body.auth-dark .error{background:var(--pcon-red);color:#fff}
body.auth-dark .foot{color:#5C5C64;border-top-color:#26262B}
body.auth-dark button.primary{background:var(--pcon-red)}
body.auth-dark button.primary:hover{background:var(--pcon-red-press)}

/* ---- shell: BLACK topbar, ELEGANT WHITE drawer (premium PCON minimalism) ---- */
.topbar{background:#0A0A0A;border-bottom-color:#26262B}
.topbar .brand-word{color:#fff}
.topbar .who{color:#9C9BA2}
.topbar nav .link{color:#C8C7CC}
.topbar nav .link:hover{color:#fff}

/* white drawer, lots of air, refined type, thin line icons, subtle red-rule active state */
.drawer{background:#fff;border-right:1px solid var(--pcon-line);box-shadow:2px 0 24px rgba(0,0,0,.08)}
.drawer-head{display:flex;align-items:center;gap:14px;padding:24px 24px 20px;border-bottom:1px solid var(--pcon-line)}
.drawer-user strong{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--pcon-ink)}
.drawer-user span{color:var(--pcon-muted);font-size:11px;letter-spacing:.10em;text-transform:uppercase;margin-top:2px}
.drawer-nav{display:flex;flex-direction:column;padding:14px 0;flex:1;
  overflow-y:auto;scrollbar-width:none}
.drawer-nav::-webkit-scrollbar{width:0;height:0}        /* kill the visible scrollbar */
.drawer-nav a,.navlink-locked,.drawer-foot a{display:flex;align-items:center;gap:14px;
  padding:11px 24px;font-size:14px;font-weight:400;letter-spacing:.01em;color:var(--pcon-ink-2);
  border-left:2px solid transparent}
.nlabel{flex:1}
.nic{color:var(--pcon-muted);flex:none}
.drawer-nav a:hover,.drawer-foot a:hover{background:#F6F6F7;color:var(--pcon-ink);text-decoration:none}
.drawer-nav a:hover .nic,.drawer-foot a:hover .nic{color:var(--pcon-ink)}
.drawer-nav a.active{color:var(--pcon-ink);font-weight:600;border-left-color:var(--pcon-red);background:transparent}
.drawer-nav a.active .nic{color:var(--pcon-ink)}
.navlink-locked{color:var(--pcon-disabled);cursor:not-allowed}
.navlink-locked .nic{color:var(--pcon-disabled)}
.navlink-locked .lock{font-size:11px}
.navbadge{margin-left:auto;background:var(--pcon-red);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.drawer-foot{border-top:1px solid var(--pcon-line);padding:10px 0}
.drawer-foot form{padding:6px 24px}
.drawer-foot .link{color:var(--pcon-ink-2)}
.drawer-foot .link:hover{color:var(--pcon-ink)}

/* ---- Admin users table cleanup (contained columns, floppy save, toggle switch) ---- */
.ta-right{text-align:right}
/* Always contain the wide users table INSIDE its card — it scrolls horizontally within the card
   rather than spilling past the right edge (Eduardo: actions overflowed the card). */
.tscroll{overflow-x:auto;max-width:100%}
.users-table{font-size:13px;width:100%;border-collapse:collapse}
.users-table th,.users-table td{vertical-align:middle;padding:8px 7px}
.users-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;line-height:1.25;
  white-space:nowrap}
/* tight, consistent inputs so all 9 columns + the action icons fit inside the 1040px card */
.users-table input.namebox{margin:0;padding:5px 7px;font-size:13px;width:74px}
.users-table .col-alias input.namebox{width:112px}
.users-table select{font-size:12px;padding:4px 4px;max-width:104px}
/* Columns sit inside the card: email + last-login never wrap, the table scrolls if it must. */
.users-table .col-email{white-space:nowrap;font-size:12px}
.users-table .col-login{white-space:nowrap}
.users-table .col-create{text-align:center;white-space:nowrap}
.users-table select{font-size:13px}
/* first-name cell holds the input + the floppy save button on one baseline */
.users-table .namesave{display:flex;align-items:center;gap:6px}
.users-table .iconbtn{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:1px solid var(--line,#e2e2e2);border-radius:6px;
  background:#fff;color:#777;cursor:pointer;flex:0 0 auto;transition:color .12s,border-color .12s}
.users-table .iconbtn:hover{color:#111;border-color:#bbb}
.users-table .iconbtn.danger{color:#a6a6a6}
.users-table .iconbtn.danger:hover{color:var(--pcon-red,#D5001C);border-color:var(--pcon-red,#D5001C)}
/* actions cell: compact icon buttons on one centered baseline */
.users-table td.actions form.inline{margin:0 0 0 6px}
.users-table .saved-flash{font-size:11px;color:#1a8a3a;font-weight:600;white-space:nowrap;
  animation:savedfade 2.4s ease forwards}
@keyframes savedfade{0%,55%{opacity:1}100%{opacity:0}}
/* "Can create engagements" toggle switch — red on / gray off, house style */
.switch{position:relative;display:inline-block;width:38px;height:21px;vertical-align:middle;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#cfcfcf;border-radius:21px;transition:background .15s}
.switch .slider::before{content:"";position:absolute;height:15px;width:15px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:var(--pcon-red,#D5001C)}
.switch input:checked + .slider::before{transform:translateX(17px)}
.switch input:focus-visible + .slider{outline:2px solid var(--pcon-red,#D5001C);outline-offset:2px}
/* on narrow screens the table scrolls cleanly inside its card (.card overflow-x:auto kicks in at
   the SAME 760px breakpoint, so there's no width gap where the table overflows the card) */
@media(max-width:760px){.users-table{min-width:760px}}
/* Actions cell: a normal middle-aligned, right-aligned table cell — NOT a flex box (the global
   .actions flex rule top-aligns content in tall rows and leaves stray gaps). Inline forms sit on
   one centered baseline; the row's bottom divider spans the full width via border-collapse. */
.users-table td.actions,.grants-table td.actions{display:table-cell;vertical-align:middle;
  text-align:right;white-space:nowrap}
.users-table td.actions form.inline,.grants-table td.actions form.inline{display:inline-block;
  vertical-align:middle;margin:0 0 0 16px}
.users-table td.actions form.inline:first-child{margin-left:0}
.users-table td.actions .link,.grants-table td.actions .link{vertical-align:middle}

/* ---- engagement screen: header progress + tabs + tab content ---- */
.eng-head-progress{min-width:180px;text-align:right}
.eng-head-progress .pbar{height:5px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--pcon-line);margin:6px 0 22px}
.tabs a{padding:10px 16px;font-size:14px;color:var(--pcon-ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{text-decoration:none;color:var(--pcon-ink)}
.tabs a.on{color:var(--pcon-ink);font-weight:600;border-bottom-color:var(--pcon-red)}
.tab-count{background:var(--pcon-panel);color:var(--pcon-ink-2);font-size:11px;border-radius:10px;padding:0 6px;margin-left:3px}
h2.mt{margin-top:24px}

/* milestone timeline */
ol.timeline{list-style:none;padding:0;margin:8px 0 0}
ol.timeline li{display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:14px}
ol.timeline .tl-mark{width:16px;text-align:center;color:var(--pcon-disabled)}
ol.timeline li.done .tl-mark{color:var(--pcon-red)}
ol.timeline li.current .tl-mark{color:var(--pcon-red);animation:pulse 1.8s ease-in-out infinite}
ol.timeline li.upcoming{color:var(--pcon-muted)}
ol.timeline li.current{font-weight:600}
ol.timeline .tl-label{flex:1}
ol.timeline .tl-date{font-size:12px}

/* decisions + versions */
ul.decisions,ol.versions{list-style:none;padding:0;margin:8px 0 0}
ul.decisions li,ol.versions li{padding:10px 0;border-bottom:1px solid var(--pcon-line)}
ul.decisions li:last-child,ol.versions li:last-child{border-bottom:0}
.dec-text,.ver-sum{font-size:14px;color:var(--pcon-ink)}
.dec-meta,.ver-trig{font-size:12px;margin-top:3px}
.ver-head{display:flex;gap:8px;align-items:baseline}
.decision-form,.answer-inline form{margin-top:12px}
.decision-form input{margin-top:8px}
.answer-inline label,.decision-form label{font-weight:600;font-size:13px}

/* ---- Decision Log: detected "Proposed decision" candidates (outlined, not bold) ---- */
ul.proposed-list{list-style:none;padding:0;margin:6px 0 14px}
.proposed-card{border:1px solid var(--pcon-line);border-left:3px solid var(--pcon-red,#D5001C);
  border-radius:8px;padding:12px 14px;margin-bottom:10px;background:#fff}
.pc-tag{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--pcon-red,#D5001C);
  font-weight:700;margin-bottom:4px}
.pc-text{font-size:14px;color:var(--pcon-ink);font-weight:400}   /* NOT bold — it's a candidate */
.pc-meta{font-size:12px;margin-top:4px}
.pc-actions{display:flex;align-items:center;gap:14px;margin-top:10px}
button.primary.sm{padding:5px 12px;font-size:13px}
.pc-amend-form{margin-top:10px}
.pc-amend-form textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--pcon-line);
  border-radius:7px;margin-bottom:8px}
.record-manual{margin-top:14px}
.record-manual>summary{cursor:pointer;color:var(--pcon-ink-2);font-size:13px;list-style:none;
  display:inline-block;border-bottom:1px dashed var(--pcon-line)}
.record-manual>summary::-webkit-details-marker{display:none}
.record-manual>summary:hover{color:var(--pcon-ink)}
.record-manual[open]>summary{margin-bottom:8px}

/* brief */
.brief-doc{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6;
  background:var(--pcon-panel);border:1px solid var(--pcon-line);border-radius:8px;padding:16px;max-height:520px;overflow:auto}
/* rendered (markdown->HTML) brief: real headings/lists/quotes, no raw markup */
.brief-doc.rendered{white-space:normal;background:var(--pcon-bg)}
.brief-doc.rendered h2{font-size:15px;margin:18px 0 7px}
.brief-doc.rendered h2:first-child{margin-top:0}
.brief-doc.rendered h3,.brief-doc.rendered h4{font-size:13.5px;margin:14px 0 6px}
.brief-doc.rendered p{margin:0 0 10px;color:var(--pcon-ink-2)}
.brief-doc.rendered ul{margin:0 0 10px;padding-left:20px}
.brief-doc.rendered li{margin:3px 0;color:var(--pcon-ink-2)}
.brief-doc.rendered blockquote{margin:0 0 10px;padding:2px 0 2px 12px;border-left:3px solid var(--pcon-line);
  color:var(--pcon-muted)}
.brief-doc.rendered hr{border:0;border-top:1px solid var(--pcon-line);margin:14px 0}
.brief-doc.rendered strong{color:var(--pcon-ink)}
details.brief-update{margin-top:14px}
details.brief-update>summary{cursor:pointer;color:var(--pcon-red);font-weight:600}
details.brief-update textarea{margin-top:8px}

/* files: tiles + crumbs + search + filed banner */
.file-search{display:flex;gap:8px;margin-bottom:16px}
.file-search input{flex:1}
.crumbs{font-size:13px;color:var(--pcon-muted);margin-bottom:12px}
.crumbs a{color:var(--pcon-ink-2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tile{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--pcon-line);border-radius:10px;
  padding:16px 18px;background:var(--pcon-bg)}
.tile:hover{border-color:var(--pcon-red);text-decoration:none}
.tile-ic{flex:0 0 auto;color:var(--pcon-ink-2);margin-top:1px}
.tile:hover .tile-ic{color:var(--pcon-red)}
.tile-name{font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.tile-meta{margin-top:6px}
.badge.new{background:var(--pcon-red);color:#fff;text-transform:none;font-size:10px;padding:1px 6px}
.filed-banner form{display:inline}
.filed-banner .link{margin-left:8px}
.recent-strip .files li{display:flex;justify-content:space-between;gap:12px}

/* slim, compact upload bar (no-JS fallback + legacy) */
.upload-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}

/* ---- unified upload component (uploadkit) — drop zone + classify-and-stage ---- */
.ukit{margin:0 0 16px}
.ukit-zone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  border:1.5px dashed var(--pcon-line);border-radius:10px;padding:18px 16px;
  color:var(--pcon-ink-2);background:var(--pcon-bg);cursor:pointer;
  transition:border-color .12s,background .12s}
.ukit-zone:hover{border-color:var(--pcon-ink-2)}
.ukit-zone:focus{outline:none;border-color:var(--pcon-red)}
.ukit-zone.dragover{border-color:var(--pcon-red);background:var(--pcon-panel);color:var(--pcon-ink)}
.ukit-ic{color:var(--pcon-muted)}
.ukit-zone.dragover .ukit-ic{color:var(--pcon-red)}
.ukit-prompt{font-size:14px}
.ukit-browse,.ukit-browse-folder{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--pcon-red);font-weight:600}
.ukit-browse:hover,.ukit-browse-folder:hover{text-decoration:underline}
.ukit-sep{color:var(--pcon-muted);margin:0 2px}
.ukit-note{display:block;font-size:12px;margin-top:2px}

.ukit-staging{margin-top:12px;border:1px solid var(--pcon-line);border-radius:10px;padding:12px 14px;
  background:#fff}
.ukit-staging-head{font-size:12px;margin-bottom:8px}
.ukit-list{list-style:none;margin:0;padding:0}
.ukit-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--pcon-line)}
.ukit-row:last-child{border-bottom:0}
.ukit-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ukit-icn{margin-right:4px}
.ukit-dest{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ukit-select{width:auto;margin:0;padding:4px 6px;font-size:12px}
.ukit-conf{font-size:11px;white-space:nowrap}
.ukit-conf.ok{color:var(--pcon-muted)}
.ukit-conf.low{color:#7a5c00}
.ukit-remove{background:none;border:0;color:var(--pcon-muted);font-size:18px;line-height:1;cursor:pointer;
  padding:0 4px}
.ukit-remove:hover{color:var(--pcon-red)}
.ukit-actions{display:flex;align-items:center;gap:14px;margin-top:12px}
.ukit-msg{margin-top:10px}
@media (max-width:560px){
  .ukit-row{flex-wrap:wrap;align-items:flex-start}
  .ukit-name{flex:1 1 100%}
  .ukit-dest{flex-wrap:wrap}
}

/* ---- Methods card (structured catalogue-item renderer) ---- */
.method-block{margin:0 0 20px}
.method-block:last-of-type{margin-bottom:8px}
.method-block h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--pcon-red);
  margin:0 0 7px}
.method-block p{margin:0;font-size:15px;line-height:1.55;color:var(--pcon-ink-2)}
.method-data{margin:0;padding-left:18px}
.method-data li{font-size:14px;line-height:1.5;color:var(--pcon-ink-2);margin:3px 0}
.method-tags{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}
.method-tag{font-size:11px;background:var(--pcon-panel);color:var(--pcon-ink-2);
  border-radius:20px;padding:2px 10px}
.method-prov{margin-top:12px;font-size:12px;border-top:1px solid var(--pcon-line);padding-top:10px}

/* ---- Library ---- */
ul.lib-list{list-style:none;padding:0;margin:8px 0 0}
ul.lib-list li{padding:8px 0;border-bottom:1px solid var(--pcon-line);display:flex;align-items:center;gap:8px}
ul.lib-list li:last-child{border-bottom:0}
.lib-ext{text-transform:uppercase;font-size:10px;letter-spacing:.05em;border:1px solid var(--pcon-line);
  border-radius:4px;padding:0 5px;margin-left:auto}
.badge.under-rev{background:#FFF6E5;color:#7a5c00;text-transform:none;font-size:10px}
.contribute-form .row{margin-bottom:8px}
.contribute-form textarea{margin-bottom:8px}
.inline-field{display:inline-flex;flex-direction:column;font-size:12px;color:var(--pcon-ink-2);gap:4px;width:auto}
.inline-field input{width:auto;min-width:120px;margin-top:0}
.mt{margin-top:14px}
.users-table select{width:auto;padding:4px 6px;font-size:12px;margin:0}

/* ---- New engagement form ---- */
.new-eng-form .field{display:block;margin:18px 0}
.new-eng-form .row .field{flex:1;min-width:200px}
.new-eng-form .field.mt{margin-top:16px}
.new-eng-form .field.wide input{width:100%}
.new-eng-form .field > .hint{display:block;margin-top:5px;font-size:12px}
.new-eng-form label.field{font-weight:600;font-size:13px;color:var(--pcon-ink)}
.new-eng-form label.field input,.new-eng-form label.field textarea{font-weight:400}
.new-eng-form .title-input{font-size:16px;padding:11px 12px}
.new-eng-form .card{margin-bottom:18px;overflow:visible}   /* let the suggestion dropdown escape */

/* client type-ahead picker */
.client-picker{position:relative;margin-top:6px}
.client-picker input[type=text],.client-picker > input{width:100%}
.client-suggest{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;
  list-style:none;background:#fff;border:1px solid var(--pcon-line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);max-height:280px;overflow-y:auto}
.client-suggest li{padding:9px 11px;border-radius:7px;font-size:14px;cursor:pointer;color:var(--pcon-ink)}
.client-suggest li:hover,.client-suggest li.on{background:var(--pcon-panel)}
.client-suggest li.suggest-new{color:var(--pcon-red);font-weight:600;border-top:1px solid var(--pcon-line);
  border-radius:0 0 7px 7px;margin-top:2px}

/* type picker — three lifecycle stages as selectable cards */
.type-picker{border:0;padding:0;margin:18px 0 4px}
.type-picker legend{font-weight:600;font-size:13px;color:var(--pcon-ink);padding:0;margin-bottom:8px}
.type-option{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin:8px 0;cursor:pointer;
  border:1px solid var(--pcon-line);border-radius:10px;transition:border-color .12s,background .12s}
.type-option:hover{border-color:var(--pcon-ink-2)}
.type-option input{margin:2px 0 0;accent-color:var(--pcon-red);width:auto;min-width:0;flex:0 0 auto}
.type-option:has(input:checked){border-color:var(--pcon-red);background:var(--pcon-panel)}
/* min-width:0 lets the long description wrap instead of forcing the card wider than the viewport */
.type-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.type-name{font-weight:600;font-size:14px;color:var(--pcon-ink)}
.type-desc{font-size:12.5px}

/* similarity interrupt */
.similar-flash{border-left:4px solid var(--pcon-red)}
.similar-flash p{margin:4px 0 10px}
.similar-options{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{background:#fff;border:1px solid var(--pcon-line);border-radius:999px;padding:7px 14px;
  font-size:13px;cursor:pointer;color:var(--pcon-ink)}
.chip-btn:hover{border-color:var(--pcon-ink-2)}
.chip-new{border-color:var(--pcon-red);color:var(--pcon-red);font-weight:600}

/* idle sign-out note on the login card */
.signout-note{background:var(--pcon-panel);border:1px solid var(--pcon-line);
  border-left:3px solid var(--pcon-red);border-radius:7px;padding:9px 12px;font-size:13px;
  margin:0 0 14px;text-align:left}

/* Grant-access form: four labelled dropdowns, no free text. Stacks full-width on narrow. */
.grant-form{align-items:flex-end}
.grant-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--pcon-ink-2);
  font-weight:600;flex:1;min-width:150px}
.grant-field select{margin:0;font-weight:400;font-size:13px}
@media(max-width:760px){
  .grant-field{flex:1 1 100%;min-width:0}
}

/* ---- Overview guide ---- */
.guide-layout{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
/* Left menu is fixed-width (grid track) and STICKY — identical metrics on every topic, so clicking a
   topic only swaps the right panel; it never moves. Pairs with html{scrollbar-gutter:stable}. */
.guide-nav{display:flex;flex-direction:column;gap:2px;border:1px solid var(--pcon-line);border-radius:10px;
  padding:8px;background:var(--pcon-bg);position:sticky;top:16px}
.guide-nav a{padding:9px 12px;border-radius:7px;font-size:14px;color:var(--pcon-ink-2)}
.guide-nav a:hover{background:var(--pcon-panel);text-decoration:none;color:var(--pcon-ink)}
.guide-nav a.on{background:var(--pcon-ink);color:#fff;font-weight:600}
.guide-content h2{margin-top:0}
.guide-content p,.guide-content li{font-size:14px;line-height:1.65;color:var(--pcon-ink-2)}
ol.guide-steps,ul.guide-list{margin:10px 0 0;padding-left:20px}
ol.guide-steps li,ul.guide-list li{margin:6px 0}

/* Needs-you stepper: numbered sub-questions split out of a blob */
ol.needs-steps{margin:6px 0 0;padding-left:22px;list-style:decimal}
ol.needs-steps li{margin:3px 0;line-height:1.45;list-style:decimal;padding-left:2px}
ol.needs-steps li::marker{color:var(--pcon-red);font-weight:700}
.needs-list ol.needs-steps{font-size:13px}
.nnn-cell ol.needs-steps{font-size:13px}
/* answered intake question: stays visible, de-emphasised, with a green tick (Eduardo 2026-06-12) */
ol.needs-steps li.answered{color:var(--pcon-muted)}
ol.needs-steps li.answered::marker{color:#1a8a3a}
.needs-steps .tick{color:#1a8a3a;font-weight:700}
.needs-steps .ans{font-style:italic}

/* engagement-page Needs-you stepper: clean rows, hairline dividers, red accent on the ACTIVE
   (first unanswered) question; answered rows ticked + muted (Eduardo-approved mockup 2026-06-12). */
ul.needs-rows{list-style:none;margin:8px 0 0;padding:0}
.needs-row{display:flex;align-items:baseline;gap:10px;padding:8px 10px;
  border-top:1px solid var(--pcon-line)}
.needs-row:first-child{border-top:0}
.needs-row .nr-mark{flex:0 0 auto;width:18px;text-align:center;font-size:12px;font-weight:700;
  color:var(--pcon-muted)}
.needs-row .nr-text{flex:1;font-size:13px;line-height:1.45}
.needs-row .nr-by{flex:0 0 auto;font-size:11px;color:#1a8a3a;font-weight:600}
.needs-row.answered{color:var(--pcon-muted)}
.needs-row.answered .nr-mark{color:#1a8a3a}                         /* green ✓ */
.needs-row.answered .nr-ans{font-style:italic}
.needs-row.active{border-left:3px solid var(--pcon-red,#D5001C);padding-left:10px;
  background:#fdf6f7;border-radius:0 6px 6px 0}
.needs-row.active .nr-mark{color:var(--pcon-red,#D5001C)}
.needs-row.active .nr-text{font-weight:600;color:var(--pcon-ink)}
.needs-intro{font-size:12px;color:var(--pcon-muted);margin-bottom:2px}

/* guide icon-list (six folders, library shelves) — thin-line icon + label */
ul.icon-list{list-style:none;margin:14px 0;padding:0}
ul.icon-list li{display:flex;align-items:flex-start;gap:11px;margin:11px 0;font-size:14px;
  line-height:1.55;color:var(--pcon-ink-2)}
.il-ic{flex:0 0 auto;color:var(--pcon-ink-2);margin-top:1px}

/* guide team cards (the eight agents) — stack at narrow */
.team-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0}
.team-card{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--pcon-line);
  border-radius:10px;padding:15px 16px;background:var(--pcon-bg)}
.team-ic{flex:0 0 auto;color:var(--pcon-red);margin-top:2px}
.team-body{min-width:0}
.team-name{font-family:var(--display);font-weight:700;font-size:14px;color:var(--pcon-ink)}
.team-desc{margin:5px 0 9px;font-size:13px;line-height:1.5;color:var(--pcon-ink-2)}
.team-stage{display:inline-block;font-size:11px;letter-spacing:.04em;background:var(--pcon-panel);
  color:var(--pcon-ink-2);border-radius:20px;padding:2px 10px}
.team-close{margin-top:14px;font-style:italic}

/* ---- guide FLIP CARDS (shared component: team · folders · Library) ----
   Front = black card, white name, red icon (matches the topbar + dark sign-in chrome). Click / tap /
   Enter / Space flips it (CSS 3D rotateY) to a light back face = what's inside + the governing rule. */
.flip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0}
.flip{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;text-align:left;
  cursor:pointer;perspective:1200px;outline:none;display:block;width:100%}
.flip:focus-visible{outline:2px solid var(--pcon-red);outline-offset:3px;border-radius:13px}
.flip-inner{position:relative;display:grid;min-height:104px;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.15,.2,1)}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:12px;padding:15px 16px;box-sizing:border-box;overflow:hidden}
/* FRONT — black, white title, red icon */
.flip-front{background:#0B0B0D;border:1px solid #0B0B0D;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:10px}
.flip-front .flip-ic{color:var(--pcon-red)}
.flip-title{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;letter-spacing:.01em}
.flip-cue{position:absolute;top:11px;right:13px;color:#6a6a72;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase}
/* BACK — light card with the detail + the governing rule */
.flip-back{background:var(--pcon-bg);border:1px solid var(--pcon-line);color:var(--pcon-ink-2);
  transform:rotateY(180deg);display:flex;flex-direction:column;overflow:auto}
.flip-back .fb-name{font-family:var(--display);font-weight:700;font-size:13px;color:var(--pcon-ink);margin-bottom:5px}
.flip-desc{display:block;margin:0 0 9px;font-size:12.5px;line-height:1.5}
.flip-stage,.flip-rule{align-self:flex-start;display:inline-block;font-size:11px;letter-spacing:.03em;
  border-radius:20px;padding:2px 10px;background:var(--pcon-panel);color:var(--pcon-ink-2)}
.flip-rule{background:#fdeff1;color:var(--pcon-red-press)}
.flip-stage+.flip-rule,.flip-rule+.flip-stage{margin-top:6px}
/* AI Review Board — richer, taller back; let the roster scroll if it overflows */
.flip.tall .flip-inner{min-height:150px}
.flip.tall .flip-back{max-height:300px}
.fb-group{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--pcon-muted);font-weight:700;margin:9px 0 4px}
.fb-roster{display:block}
.fb-row{display:block;font-size:12px;line-height:1.4;margin:5px 0}
.fb-row b{color:var(--pcon-ink);font-weight:700}
@media(max-width:760px){.flip-grid{grid-template-columns:1fr}}

/* ---- guide · "The team": TWO-TREE ORG CHART (Working | Quality connector | Review) ----
   The architecture made visible: ONE Opus Lead heads the Working tree (hats fused as pills + a row
   of charter-backed subagent BOXES it runs in sequence); the Executive Review Board heads the Review
   tree as a PEER at the SAME top level (independent, cold). They meet at the ONE Quality connector.
   Two heads at equal height = equals; the single link = the only maker→judge handoff. */
.orgchart{margin:18px 0 4px}
.org-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start}
.otree{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
/* tree tag — small uppercase banner so WORKING vs REVIEW reads instantly */
.otree-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;background:var(--pcon-ink);border-radius:20px;padding:3px 14px;margin-bottom:12px}
.otree-tag.tag-review{background:var(--pcon-red)}
/* HEAD node — the Opus level: a solid black node, bigger than the boxes */
.ohead{width:100%;max-width:320px;background:#0B0B0D;border:1.5px solid #0B0B0D;border-radius:13px;
  padding:15px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:3px;box-sizing:border-box}
.ohead-board{border-top:4px solid var(--pcon-red)}     /* the independent head reads distinct */
.ohead-ic{color:var(--pcon-red);margin-bottom:4px}
.ohead-name{font-family:var(--display);font-weight:700;font-size:16px;color:#fff;letter-spacing:.01em}
.ohead-meta{font-size:11px;color:#c9c9d0;display:flex;align-items:center;gap:6px;margin-top:1px}
.ohead-sub{font-size:11.5px;color:#9a9aa2;line-height:1.45;margin-top:4px}
/* fused HATS — modes of the Lead itself: pills inside the head, divided off, NOT flip cards */
.hat-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#6a6a72;
  margin-top:11px;padding-top:10px;border-top:1px solid #26262b;width:100%}
.hat-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:7px}
.hat{font-size:11px;color:#eaeaee;background:#1c1c21;border:1px solid #33333a;border-radius:6px;
  padding:3px 9px;font-weight:600}
/* model tag chips */
.mtag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:5px;padding:1px 6px;background:var(--pcon-panel);color:var(--pcon-ink-2)}
.mtag-opus{background:var(--pcon-red);color:#fff}
/* per-tree SPINE: head → branch label → boxes (a clean vertical stem; per-box elbows break on wrap) */
.ostem{width:1.5px;height:18px;background:var(--pcon-line)}
.obranch-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--pcon-muted);
  font-weight:700;margin:0 0 9px}
.otree-review .obranch-label:not(:first-of-type){margin-top:16px}
/* subagent BOX column — wide, short flip cards stacked under the head (a clean tree branch) */
.onodes{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}

/* CONNECTOR — the single Quality handoff in the central gutter, pinned at HEAD level (peers meet here) */
.oconnector{align-self:start;margin-top:96px;display:flex;flex-direction:column;align-items:center;
  text-align:center;width:150px;padding:0 8px;gap:4px}
.oconn-cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pcon-red)}
.oconn-arrow{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--pcon-ink) 0 7px,transparent 7px 12px);
  position:relative;margin:5px 0}
.oconn-arrow::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:7px solid var(--pcon-ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.oconn-text{font-size:11px;color:var(--pcon-ink-2);line-height:1.4;font-style:italic}

/* CAPTION + LEGEND */
.org-caption{margin:20px auto 0;max-width:680px;text-align:center;font-size:12.5px;line-height:1.6;
  color:var(--pcon-ink-2)}
.org-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:14px 0 2px;
  padding-top:13px;border-top:1px solid var(--pcon-line);font-size:11.5px;color:var(--pcon-ink-2)}
.org-legend .leg-item{display:flex;align-items:center;gap:7px}
.leg-hat{font-size:10.5px;color:#eaeaee;background:#1c1c21;border:1px solid #33333a;border-radius:6px;
  padding:2px 7px;font-weight:600}
.leg-box{width:22px;height:15px;border-radius:4px;background:#0B0B0D;border:1px solid #0B0B0D;
  flex:0 0 auto;box-shadow:inset 0 0 0 1px #2a2a30}

/* flip CHIPS — the shared flip card as a wide, short subagent/seat box: FRONT = icon + name in a row
   (compact); BACK = name + what-it-does + model tag (height follows the text, no awkward scroll). */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.flip.chip{width:100%;max-width:268px}
.flip.chip .flip-inner{min-height:52px}
.flip.chip .flip-face{padding:11px 13px;border-radius:11px}
.flip.chip .flip-front{flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;text-align:left}
.flip.chip .flip-ic{width:20px;height:20px;flex:0 0 auto}
.flip.chip .flip-title{font-size:13px;line-height:1.2}
.flip.chip .flip-cue{top:9px;right:11px;font-size:9px}
.flip.chip .flip-back{padding-top:10px}
.flip.chip .flip-desc{font-size:11.5px;line-height:1.5;margin-bottom:7px}
.flip-tag{align-self:flex-start;display:inline-block;font-size:9.5px;letter-spacing:.03em;
  border-radius:5px;padding:1px 7px;background:var(--pcon-panel);color:var(--pcon-muted)}

/* RESPONSIVE: stack the two trees (Working over Review); the connector becomes a down-arrow band */
@media(max-width:820px){
  .org-grid{grid-template-columns:1fr;gap:0;justify-items:center}
  .oconnector{width:100%;max-width:320px;flex-direction:column;margin:6px 0;padding:12px 0}
  .oconn-arrow{width:2px;height:26px;background:repeating-linear-gradient(180deg,var(--pcon-ink) 0 7px,transparent 7px 12px);margin:5px 0}
  .oconn-arrow::after{right:auto;top:auto;left:50%;bottom:-1px;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--pcon-ink);border-bottom:0}
}

/* ---- guide: onboarding progress + "Any other questions?" box ---- */
.guide-ask{margin-top:26px;padding-top:20px;border-top:1px solid var(--pcon-line)}
.guide-ask h2{margin:0 0 4px}
.ob-progress{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pcon-ink-2);
  background:#faf7f7;border:1px solid var(--pcon-line);border-radius:8px;padding:9px 12px;margin-bottom:18px}
.ob-progress.done{color:#1a8a3a;background:#f3faf5;border-color:#cfe9d6}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--pcon-red,#D5001C);flex:0 0 auto;
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.ask-form{display:flex;gap:10px;margin:6px 0 4px}
.ask-form input{flex:1;padding:9px 12px;font-size:14px;border:1px solid var(--pcon-line);border-radius:8px}
.ask-form input:focus{outline:none;border-color:var(--pcon-red,#D5001C);box-shadow:0 0 0 2px rgba(213,0,28,.12)}
.ask-note{font-size:13px;margin:8px 0 0}
.qa-list{list-style:none;padding:0;margin:18px 0 0}
.qa-item{padding:12px 0;border-top:1px solid var(--pcon-line)}
.qa-q{font-weight:600;font-size:14px;margin-bottom:5px}
.qa-a{font-size:14px;line-height:1.6;color:var(--pcon-ink-2)}
.qa-a.pending{color:#999}
.qa-think{display:inline-block;font-style:italic}
/* drawer Overview pulse until onboarding complete */
.nav-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pcon-red,#D5001C);
  margin-left:7px;vertical-align:middle;animation:pulse 1.6s ease-in-out infinite}
/* admin onboarding badge */
.ob-badge{display:inline-block;font-size:11px;font-weight:600;color:#777;border:1px solid var(--pcon-line);
  border-radius:10px;padding:1px 7px;white-space:nowrap}
.ob-badge.done{color:#1a8a3a;border-color:#cfe9d6;background:#f3faf5}
.users-table .col-onb{text-align:center;white-space:nowrap}

@media(max-width:760px){.guide-layout{grid-template-columns:1fr}
  .guide-nav{flex-direction:row;flex-wrap:wrap}
  .team-cards{grid-template-columns:1fr}}

@media(max-width:760px){
  .drawer{width:84vw}
  .who{display:none}
  .needs-list li{flex-wrap:wrap}
  .needs-eng{min-width:0}
  .needs-jump{margin-left:auto}
  .feed li{flex-wrap:wrap;gap:2px 12px}
  .feed-date{min-width:0}
  .seeall{font-size:12px}
}

/* ====================================================================
   Notification bell (top bar) + presence (PCON Team) — 2026-06-13
   Dark-topbar chrome + the single red accent; glow obeys reduced-motion.
   ==================================================================== */
.bellwrap{position:relative;display:inline-flex;align-items:center}
.bell{background:none;border:0;padding:6px;cursor:pointer;display:inline-flex;align-items:center;
  position:relative;color:#C8C7CC;border-radius:8px}
.bell:hover{color:#fff;background:rgba(255,255,255,.06)}
.bell .nic{color:currentColor}
/* glowing red dot — only shown when there are unread notifications (.on) */
.bell-dot{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;
  background:var(--pcon-red);border:1.5px solid #0A0A0A;display:none;
  box-shadow:0 0 0 0 rgba(213,0,28,.65);animation:bellGlow 2s ease-in-out infinite}
.bell-dot.on{display:block}
@keyframes bellGlow{
  0%,100%{box-shadow:0 0 3px 1px rgba(213,0,28,.55)}
  50%{box-shadow:0 0 7px 3px rgba(213,0,28,.85)}
}
/* unread count chip beside the username */
.bell-count{display:none;margin-left:-2px;background:var(--pcon-red);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:8px;align-items:center;
  justify-content:center;padding:0 4px;line-height:1}
.bell-count.on{display:inline-flex}

/* dropdown panel — elegant white card (premium PCON minimalism), like the drawer */
.bell-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:86vw;background:#fff;
  border:1px solid var(--pcon-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease;
  z-index:60;overflow:hidden}
.bellwrap.open .bell-panel{opacity:1;visibility:visible;transform:translateY(0)}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--pcon-line)}
.bell-head strong{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--pcon-ink)}
.bell-allread{background:none;border:0;color:var(--pcon-muted);font-size:12px;cursor:pointer;padding:2px 4px}
.bell-allread:hover{color:var(--pcon-red)}
.bell-list{max-height:60vh;overflow-y:auto}
.bell-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 12px 14px;
  border-bottom:1px solid #F0EFF2;position:relative;color:var(--pcon-ink-2)}
.bell-item:hover{background:#F6F6F7;text-decoration:none}
.bell-item:last-child{border-bottom:0}
.bell-item.unread{background:#FCF2F3}
.bell-item.unread:hover{background:#FAE9EB}
/* a small left mark coloured by kind: allocation = red (you're involved), activity = grey */
.bell-kind{flex:none;width:7px;height:7px;border-radius:50%;margin-top:6px;background:var(--pcon-disabled)}
.bell-allocation{background:var(--pcon-red)}
.bell-activity{background:var(--pcon-muted)}
.bell-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bell-title{font-size:13px;font-weight:600;color:var(--pcon-ink);line-height:1.3}
.bell-text{font-size:12px;color:var(--pcon-ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bell-ago{font-size:11px;color:var(--pcon-muted);margin-top:2px}
.bell-x{flex:none;background:none;border:0;color:var(--pcon-disabled);font-size:16px;line-height:1;
  cursor:pointer;padding:0 2px;align-self:flex-start}
.bell-x:hover{color:var(--pcon-ink)}
.bell-empty{padding:26px 16px;text-align:center;color:var(--pcon-muted);font-size:13px}

@media (prefers-reduced-motion: reduce){
  .bell-dot{animation:none;box-shadow:0 0 4px 1px rgba(213,0,28,.7)}
  .bell-panel{transition:none}
}
@media (max-width:640px){
  /* the top bar wraps on narrow, so the bell can sit anywhere — pin the panel across the viewport
     below the bar instead of right-anchoring it (which clipped off the left edge). */
  .bell-panel{position:fixed;top:54px;left:8px;right:8px;width:auto;max-width:none}
}

/* ---- PCON Team roster (presence read-view) ---- */
.team-grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--pcon-line);
  border-radius:12px;overflow:hidden;background:#fff}
.team-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #F0EFF2}
.team-row:last-child{border-bottom:0}
.team-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--pcon-panel);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;
  color:var(--pcon-ink-2)}
.team-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.team-name{font-weight:600;font-size:14px;color:var(--pcon-ink)}
.team-role{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pcon-muted)}
.team-presence{display:flex;align-items:center;gap:8px;flex:none}
.pdot{width:9px;height:9px;border-radius:50%;flex:none}
.pdot-online{background:#1FA971;box-shadow:0 0 0 3px rgba(31,169,113,.15)}
.pdot-idle{background:#E0A800}
.pdot-offline{background:var(--pcon-disabled)}
.team-status{font-size:13px;color:var(--pcon-ink-2);min-width:54px}
.team-seen{font-size:12px;color:var(--pcon-muted);min-width:84px;text-align:right}
@media (max-width:640px){
  .team-seen{display:none}
  .team-row{padding:12px 14px;gap:10px}
}