/* ============================================================================
   Helix Portal — component styles for the Command Center redesign (25 Jul 2026).

   The design tokens (the :root custom properties) are inlined in base.html so the layout is
   self-identifying before this sheet loads; this stylesheet CONSUMES them via var(--...) and must
   never redefine them (one source of truth, no drift).

   Structure, in order: reset -> shell -> page furniture -> shared atoms (card / btn / badge) ->
   per-surface blocks (landing, ask, vitals, profiles, agents, connections) -> auth -> responsive.

   The colour grammar is load-bearing and identical on every surface, because the owner learns it
   once and then reads it everywhere:
     olive  (--accent2) = the organism knows this, or this is a bound it cannot cross
     gold   (--accent3) = reported / unverified / not observed — NOT an error
     terracota (--accent) = a real failure, or a state that looks alive but perceives nothing
   ============================================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--bf);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
::selection{background:var(--accent-soft)}
@keyframes hx-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================ shell ============================ */
.hx-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

.side{
  background:var(--white);
  border-right:1px solid var(--border);
  padding:26px 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.side-brand{display:block}
.side-logo{
  display:block;
  font-family:var(--hf);
  font-size:22px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--accent);
}
.side-logo-sub{
  display:block;
  font-size:9.5px;
  color:var(--faint);
  text-transform:uppercase;
  letter-spacing:2.6px;
  font-weight:600;
  margin-top:3px;
}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:9px;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  transition:background .14s ease,color .14s ease;
}
.nav-link:hover{background:var(--card2);color:var(--ink)}
.nav-link.is-active,
.nav-link.is-active:hover{background:var(--accent);color:var(--white)}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.side-birth{
  display:block;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 15px;
  transition:border-color .14s ease;
}
.side-birth:hover{border-color:var(--border-strong)}
.side-birth-title{
  display:block;
  font-family:var(--hf);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.side-birth-sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.45;
}
.side-pulse{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:600;
  color:var(--accent2);
  padding:0 4px;
}
.side-pulse .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent2);
  animation:hx-pulse 2.4s ease-in-out infinite;
}
.side-exit{padding:10px 4px 0;border-top:1px solid var(--border)}
.side-exit-btn{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--bf);font-size:11px;font-weight:600;color:var(--faint);
}
.side-exit-btn:hover{color:var(--accent)}

.main{min-width:0}
.shell{max-width:980px;margin:0 auto;padding:44px 40px 90px}

/* ============================ page furniture ============================ */
/* USE THE SCREEN. A standing rule for every surface, not a tweak to one: content must not huddle in
   a narrow strip on the left of a wide monitor. Two mechanisms do the work together, and both are
   needed:

     1. .page is wide and CENTRED, so the column grows with the viewport instead of hugging the
        sidebar, and stops before it gets absurd on an ultrawide.
     2. Blocks inside a page lay out in COLUMNS (.page-cols and the per-surface grids) once there is
        room. This is the half that actually fills the space: stretching a paragraph to 1400px does
        not use the screen well, it just makes the text unreadable — a line beyond roughly 75
        characters is measurably harder to follow, which is why .tag keeps a ceiling.

   So: the PAGE gets wide, the PROSE stays legible, and the space that buys is spent on more content
   side by side. */
.page{
  max-width:1560px;
  margin:0 auto;
  padding:38px 48px 60px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
/* For surfaces that are mostly one reading column (Perguntar). Still far wider than the sidebar's
   shadow, and still centred. */
.page-narrow{max-width:1120px}
/* Any run of sibling blocks that should sit side by side once there is room. The minimum is what
   decides when they stack, so a panel never gets squeezed below the width its content needs. */
.page-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px;align-items:start}
/* Title and intro sit SIDE BY SIDE on a wide screen. This is the editorial answer to "use the
   space": the measure of the prose stays short and legible while the header spans the page, instead
   of a lone short paragraph hugging the left edge with half a monitor empty beside it. */
.page-head{
  display:grid;
  grid-template-columns:minmax(260px,auto) minmax(0,1fr);
  align-items:end;
  column-gap:56px;
  row-gap:10px;
}
.page-head h1{
  font-family:var(--hf);
  font-size:40px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.5px;
  margin:0;
  line-height:1.08;
}
/* Anything after the heading (the intro, a count) shares the second column. */
.page-head > :not(h1){grid-column:2}
.page-head h1 + .tag{padding-bottom:4px}
.page-head h1 span{color:var(--accent)}
/* A reading ceiling, in the unit that actually governs legibility. Deliberately NOT widened with
   the page: filling a wide screen is the job of columns, never of longer lines. */
.tag{font-size:14.5px;line-height:1.65;color:var(--muted);max-width:72ch;margin:0}
.eyebrow{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:2.2px;
  font-weight:600;
  color:var(--faint);
}
.rule{display:flex;align-items:center;gap:10px}
.rule span:last-child{flex:1;height:1px;background:var(--border)}

/* ============================ shared atoms ============================ */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px;
}
.card-lift{border-radius:18px;box-shadow:var(--shadow)}

/* INLINE-FLEX, not inline-block, and that is not cosmetic: the busy spinner is a ::before pseudo
   element that grows from zero width, and it can only sit beside the label and stay centred inside a
   flex box. Everything a text-only button looked like before is preserved (justify-content:center
   replaces text-align:center). */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--bf);
  font-size:13.5px;
  font-weight:600;
  color:var(--white);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:10px;
  padding:10px 22px;
  cursor:pointer;
  text-align:center;
  transition:background .14s ease,border-color .14s ease,color .14s ease,
             box-shadow .14s ease,transform .07s ease,opacity .14s ease;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}
/* PRESSED. The single most-missed state on this Portal: a click was visually identical to a hover,
   so the owner released the mouse with no evidence the button had registered anything at all. The
   displacement is deliberately larger than a colour shift alone, because a colour shift under a
   moving cursor is easy to miss and a movement is not. */
.btn:active{transform:translateY(1px)}
/* Keyboard focus reuses the system's EXISTING ring (.ask-input:focus) verbatim rather than inventing
   a second focus idiom. :focus-visible, not :focus, so a mouse click does not leave a ring behind. */
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.btn.secondary{background:transparent;color:var(--accent);border-color:var(--border-strong)}
.btn.secondary:hover{background:var(--card2);color:var(--accent-deep);border-color:var(--accent)}

.badge{
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:3px 11px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--muted);
  background:var(--card2);
  white-space:nowrap;
}
.badge.ok{color:var(--accent2);border-color:var(--accent2);background:var(--accent2-soft)}
.badge.warn{color:var(--accent3);border-color:var(--accent3);background:var(--accent3-soft)}
.badge.bad{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ============================ interaction & feedback (29 Jul 2026) ============================
   THE GAP THIS CLOSES, stated as it was measured: this stylesheet had 775 lines and ZERO matches for
   htmx-request, :disabled, :active, :focus-visible, aria-busy or transition. Every state change was a
   hard cut, a click looked exactly like a hover, and nothing anywhere said "estou trabalhando".

   Worse, and this is the part that made the Portal feel broken rather than plain: htmx 2 does NOT
   swap on a 4xx/5xx by default. It fires htmx:responseError and stops. With no listener, a POST that
   failed produced literally no pixel of change -- indistinguishable from a POST that was never sent.
   portal.js supplies the listener; this section supplies what it renders.

   Four states, and every mutating control must be able to show all four:
     idle -> pressed (:active, a real displacement)
     -> busy (.htmx-request, a spinner IN the control that was clicked, plus the page progress bar)
     -> settled (the swap fades, so a row that changed LOOKS changed)
     -> failed (a toast that says what failed, because silence is the one answer that is never true)

   The toast colours obey the grammar at the top of this file and do not invent a fifth one:
   olive = it worked, gold = it happened but something is unverified, terracota = a real failure. */

@keyframes hx-spin{to{transform:rotate(360deg)}}
@keyframes hx-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hx-progress-slide{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(60%)}
  100%{transform:translateX(240%)}
}
@keyframes hx-fade-in{from{opacity:0}to{opacity:1}}

/* ---- disabled: a control that cannot act must not look like one that can ---- */
.btn:disabled,.btn[disabled]{cursor:not-allowed;opacity:.5}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn.secondary:disabled:hover,.btn.secondary[disabled]:hover{
  background:transparent;color:var(--accent);border-color:var(--border-strong);
}
.btn:disabled:active,.btn[disabled]:active{transform:none}

/* ---- busy ----
   The spinner grows from zero width so an idle button reserves no space for it and the label does
   not shift when it appears. currentColor means it is white on a primary button and terracota on a
   secondary one with no per-variant rule.

   TWO selectors because htmx puts .htmx-request on the element carrying hx-post: that is the BUTTON
   when the button posts, and the FORM when the form posts. Styling only the first is how a form's
   submit button ends up as the one control on the page with no busy state. */
.btn::before{
  content:"";
  width:0;height:0;
  flex:none;
  border:0 solid transparent;
  border-radius:50%;
  margin-right:0;
  transition:width .16s ease,height .16s ease,margin-right .16s ease,border-width .16s ease;
}
.btn.htmx-request,
.htmx-request .btn[type="submit"]{opacity:.9;cursor:progress}
.btn.htmx-request::before,
.htmx-request .btn[type="submit"]::before{
  width:13px;height:13px;
  border-width:2px;
  border-color:currentColor currentColor currentColor transparent;
  margin-right:9px;
  animation:hx-spin .62s linear infinite;
}
/* Any element (not just a button) can declare itself the busy surface. */
[aria-busy="true"]{cursor:progress}

/* ---- the swap ----
   A fragment that replaced itself must LOOK replaced. Without this, a successful action whose new
   markup happens to resemble the old one is indistinguishable from an action that did nothing, which
   is the same complaint as the silent error one layer down. Requires swap:/settle: timings on the
   element (see the templates); htmx removes the classes on its own schedule. */
.htmx-swapping{opacity:0;transition:opacity .15s ease}
.htmx-settling{animation:hx-fade-in .18s ease}

/* ---- the page-level progress bar ----
   Answers "a plataforma está pensando?" for requests whose busy state is off-screen or whose trigger
   was not a button at all (a load-triggered hx-get, a filter keystroke). */
.hx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
.hx-progress.is-on{opacity:1}
.hx-progress::after{
  content:"";display:block;height:100%;width:35%;
  background:var(--accent);
  animation:hx-progress-slide 1.15s ease-in-out infinite;
}

/* ---- toasts: the answer to "nem sabemos se o comando foi" ---- */
.hx-toasts{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;gap:10px;
  width:min(430px,calc(100vw - 40px));
  pointer-events:none;
}
.hx-toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:12px;
  background:var(--white);
  border:1px solid var(--border-strong);
  border-left:4px solid var(--faint);
  border-radius:12px;
  padding:13px 15px;
  box-shadow:var(--shadow-lift);
  animation:hx-toast-in .22s ease;
}
.hx-toast.ok{border-left-color:var(--accent2)}
.hx-toast.warn{border-left-color:var(--accent3)}
.hx-toast.bad{border-left-color:var(--accent)}
.hx-toast-body{flex:1;min-width:0}
.hx-toast-title{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.hx-toast.ok .hx-toast-title{color:var(--accent2)}
.hx-toast.bad .hx-toast-title{color:var(--accent)}
.hx-toast-text{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--muted);
  overflow-wrap:anywhere;
}
.hx-toast-close{
  flex:none;background:none;border:none;padding:0 2px;cursor:pointer;line-height:1;
  font-family:var(--bf);font-size:17px;color:var(--faint);
  transition:color .14s ease;
}
.hx-toast-close:hover{color:var(--ink)}
.hx-toast-close:focus-visible{outline:none;color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft);border-radius:6px}

/* ---- placeholder for a fragment that has not landed yet ----
   The .land-signals comment already promised the placeholder and the loaded strip occupy the same
   space; this is that placeholder. A shimmer says "carregando", an empty box says "vazio", and those
   are opposite claims about the organism. */
.hx-skeleton{
  border-radius:14px;
  background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%);
  background-size:400% 100%;
  animation:hx-shimmer 1.4s ease-in-out infinite;
}
@keyframes hx-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.hx-skeleton-signals{height:118px}

/* ---- classes the templates already used and this sheet never defined ----
   Both shipped as dead references (grep: used in a template, 0 rules here). Giving them the meaning
   the template's own comment states is the honest repair; deleting the attribute would delete the
   warning the comment says it is making. */
/* _quarantine_list.html: a name every character of which the SENDER chose. It is escaped, so this is
   not about injection: the owner is being asked to recognise a source and must be able to see which
   text is the sender's own words. */
.conn-untrusted{border-bottom:1px dotted var(--accent3);cursor:help}
/* A run of blocks that should span the page rather than sit in the auto-fit column grid. */
.page-cols-full{display:block}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.nav-link,.side-birth,.land-ask-cta,.profile-card,.hx-toast-close{transition-duration:.01ms}
  .btn:active{transform:none}
  .side-pulse .dot,.meta-chip.pulse::before,
  .hx-progress::after,.hx-skeleton,
  .btn.htmx-request::before,.htmx-request .btn[type="submit"]::before{animation:none}
  .hx-toast,.htmx-settling{animation:none}
  .htmx-swapping{transition:none}
}

/* ============================ landing ============================ */
/* The htmx swap host for the signal strip. Owns its own stacking so the placeholder and the loaded
   strip occupy the same space — otherwise the page jumps when the fragment lands. */
.land-signals{display:block}
.land-ask{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 24px 20px;
  box-shadow:var(--shadow);
}
.land-ask-cta{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:13px;
  padding:15px 18px;
  margin-top:12px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.land-ask-cta:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.land-ask-hint{font-family:var(--hf);font-size:18px;color:var(--faint);flex:1}
.land-ask-go{
  font-size:13.5px;font-weight:600;color:var(--white);
  background:var(--accent);border-radius:9px;padding:9px 20px;white-space:nowrap;
}
.land-ask-foot{margin-top:11px;font-size:12px;color:var(--muted)}

.signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.signal{
  display:flex;flex-direction:column;height:100%;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
}
.signal-label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:7px}
.signal-value{
  display:block;
  font-family:var(--hf);
  font-size:30px;
  font-weight:700;
  color:var(--ink);
  line-height:1;
}
.signal-value small{font-size:16px;color:var(--faint);font-weight:700}
.signal-note{display:block;margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.signal-note.ok{color:var(--accent2)}
.signal-note.warn{color:var(--accent3)}
.signal-note.bad{color:var(--accent)}
/* A signal whose read FAILED. The value is not a number and must never look like one: an unread
   panel says so in words, because a zero here would be a lie about the organism. */
.signal-unread .signal-value{font-size:17px;color:var(--accent);line-height:1.3}

.land-split{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.land-panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.land-panel-title{font-family:var(--hf);font-size:19px;font-weight:600;color:var(--ink)}
.land-panel-link{font-size:12px;font-weight:600;color:var(--accent)}
.land-conn-row{
  display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);
}
.land-conn-row:last-child{border-bottom:none}
.land-conn-name{font-family:var(--hf);font-size:16px;font-weight:600;color:var(--ink);flex:1}
.land-conn-meta{font-size:12px;color:var(--muted)}
.land-start{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px;
  display:flex;flex-direction:column;gap:10px;
}
.land-start-title{font-family:var(--hf);font-size:19px;font-weight:600;color:var(--ink)}
.land-start-text{font-size:13.5px;line-height:1.6;color:var(--muted)}
.land-start .btn{margin-top:auto;align-self:flex-start}

/* ============================ ask ============================ */
.ask-form{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.ask-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:2.2px;
  font-weight:600;color:var(--faint);margin-bottom:10px;
}
.ask-input{
  width:100%;
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:13px;
  padding:14px 16px;
  font-family:var(--hf);
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  resize:vertical;
}
.ask-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ask-input::placeholder{color:var(--faint)}
.ask-form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;
}
.ask-form-note{font-size:12px;color:var(--faint)}
.ask-result{display:flex;flex-direction:column;gap:20px}
.ask-answer{border-radius:18px;padding:26px 28px 28px}
.ask-question{font-size:12.5px;color:var(--faint);margin:0 0 14px}
.ask-text{font-family:var(--hf);font-size:21px;line-height:1.6;color:var(--ink);margin:0}
.ask-empty{
  font-size:14px;line-height:1.6;color:var(--muted);
  border-left:3px solid var(--border-strong);padding-left:14px;margin:0;
}
.ask-unsupported,
.ask-evidence-warn,
.ask-error{
  font-size:13px;line-height:1.6;color:var(--accent);
  border-left:3px solid var(--accent);padding-left:14px;margin:18px 0 0;
}
.ask-evidence{
  font-size:13px;line-height:1.6;color:var(--muted);
  border-left:3px solid var(--accent2);padding-left:14px;margin:18px 0 0;
}
.ask-withheld{margin-top:18px}
.ask-withheld-title{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ask-withheld ul{margin:0 0 0 18px;font-size:13px;line-height:1.7;color:var(--muted)}
.cite-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cite-card{background:var(--card2);border:none;border-radius:14px;padding:16px 18px}
.cite-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cite-kind{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--faint);
}
.cite-trust{
  font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--muted);background:var(--white);
}
.cite-trust.quarantined{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.cite-fenced{
  font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px;
  border:1px solid var(--accent3);color:var(--accent3);background:var(--accent3-soft);
}
.cite-snippet{font-size:14px;line-height:1.6;color:var(--ink);margin:0}
.cite-foot{font-size:12px;color:var(--faint);margin:8px 0 0}
.ask-blankstate,.ask-failure{border-radius:18px}
.ask-blank{font-size:14px;color:var(--muted);margin:0}
.ask-error-hint{font-size:13px;color:var(--muted);margin:10px 0 0}

/* ============================ vitals ============================ */
/* The verdict leads at full width (it is the page's headline and its findings are long lines);
   the four evidence panels below it sit two-up on a wide screen. */
.vitals-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px;align-items:start}
.vitals-panel{display:block}
.vitals-title{font-family:var(--hf);font-size:22px;font-weight:600;color:var(--ink);margin:0 0 4px}
.vitals-sub{font-size:13px;color:var(--faint);margin:0 0 16px;max-width:620px}
.vitals-rows{display:flex;flex-direction:column;gap:10px}
.vitals-stat{font-size:14px;color:var(--muted)}
.vitals-number{font-family:var(--hf);font-size:19px;font-weight:700;color:var(--ink)}
/* A read that FAILED vs. a read that legitimately found nothing. Opposite statements, opposite
   colours: terracota is "eu não consegui olhar", neutral is "olhei e não há nada". */
.vitals-failed{
  font-size:13.5px;line-height:1.6;color:var(--accent);margin:0;
  border-left:3px solid var(--accent);padding-left:12px;
}
.vitals-empty{
  font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;
  border-left:3px solid var(--border-strong);padding-left:12px;
}
.vitals-sense{padding:11px 0;border-bottom:1px solid var(--border)}
.vitals-sense:last-child{border-bottom:none}
.vitals-sense-name{
  font-family:var(--hf);font-size:18px;font-weight:600;color:var(--ink);margin-right:10px;
}
.sense-blinded .vitals-sense-name{color:var(--accent)}
.vitals-sense-meta{font-size:14px;color:var(--muted)}
.vitals-alarm{
  display:block;margin-top:6px;font-size:13px;color:var(--accent);font-weight:500;line-height:1.55;
}
.vitals-alarm .vitals-number{color:var(--accent)}
.vitals-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px}
.vitals-decision{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  padding:2px 10px;border-radius:999px;border:1px solid var(--border-strong);
  color:var(--muted);background:var(--card2);
}
.vitals-reason{color:var(--ink);font-weight:500}
.vitals-when{color:var(--faint);font-size:12px}
.vitals-verdict-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.vitals-badge{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  padding:3px 12px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--muted);background:var(--card2);
}
.vitals-badge.verdict-healthy{color:var(--accent2);border-color:var(--accent2);background:var(--accent2-soft)}
.vitals-badge.verdict-degraded{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.vitals-badge.verdict-unobserved{color:var(--accent3);border-color:var(--accent3);background:var(--accent3-soft)}
.vitals-findings{display:flex;flex-direction:column;gap:9px}
.vitals-finding{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13px;
  padding-left:13px;border-left:3px solid var(--border-strong);
}
.vitals-finding.finding-healthy{border-left-color:var(--accent2)}
.vitals-finding.finding-degraded{border-left-color:var(--accent)}
.vitals-finding.finding-unobserved{border-left-color:var(--accent3)}
.finding-state{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);
}
.finding-healthy .finding-state{color:var(--muted)}
.finding-degraded .finding-state{color:var(--accent)}
.finding-unobserved .finding-state{color:var(--accent3)}
.finding-name{font-weight:600;color:var(--ink)}
.finding-detail{color:var(--muted)}
.vitals-trend{
  display:flex;flex-direction:column;gap:5px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
}
.vitals-trend-title{
  font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:1.2px;
}
.vitals-trend-point{font-size:13px;color:var(--muted)}
.vitals-trend-point .vitals-number{font-size:14px}

/* ============================ profiles ============================ */
.profile-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
/* EQUAL HEIGHTS, AND NOTHING SPILLING. Three things do it together:
     - the card is a column flexbox filling its grid cell (the grid stretches by default), so every
       card in a row is as tall as the tallest;
     - the foot is pushed down with margin-top:auto, so the dates line up across the row instead of
       floating wherever the text above happened to end;
     - long unbroken names (CLAUDE_CODE_AUTO_MODE_GIT_STATUS, anthropics/claude-code#44868) break
       inside the word rather than widening the track or escaping the border. */
.profile-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  height:100%;
  min-width:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:15px 17px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.profile-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.profile-card:hover{border-color:var(--border-strong)}
.profile-card.profile-quarantined{background:var(--accent-tint);border-color:var(--accent)}
.profile-name{
  font-family:var(--hf);font-size:18px;font-weight:600;color:var(--ink);
  min-width:0;overflow-wrap:anywhere;
}
.profile-kind{
  font-size:11px;text-transform:uppercase;letter-spacing:1.3px;font-weight:600;
  color:var(--faint);white-space:nowrap;
}
.profile-flag{
  font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:600;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:1px 8px;white-space:nowrap;flex:none;
}
.profile-counts{font-size:12.5px;color:var(--muted)}
.index-known{color:var(--accent2);font-weight:600}
/* Fase 6: a section heading INSIDE a page, for the Rede surface, whose two halves are two
   directions of the same network and must not read as one list. */
.section-title{font-family:var(--hf);font-size:20px;font-weight:600;color:var(--ink);
  margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.index-reported{color:var(--accent3);font-weight:600}
/* Pushed to the bottom so the dates align across a row of unequal-length cards. */
.profile-when{margin-top:auto;padding-top:4px;font-size:11.5px;color:var(--faint)}
.profiles-failed{
  font-size:13.5px;line-height:1.6;color:var(--accent);margin:0;
  border-left:3px solid var(--accent);padding-left:12px;
}
.profiles-empty{
  font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;
  border-left:3px solid var(--border-strong);padding-left:12px;
}
.profile-detail-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.profile-detail-head h2{font-family:var(--hf);font-size:26px;font-weight:700;color:var(--ink);margin:0}
.profile-detail-meta{font-size:12.5px;color:var(--faint);margin:6px 0 0}
.profile-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
/* The two buckets are the same component, differing ONLY by the top rule's colour and their heading.
   That is deliberate: the reader must be able to compare them, and a visual hierarchy between them
   would quietly say one is more true than the other. */
.profile-facts{border-top:3px solid var(--accent2)}
.profile-reported{border-top:3px solid var(--accent3)}
.profile-bucket-head{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.profile-bucket-head h2{font-family:var(--hf);font-size:19px;font-weight:600;color:var(--ink);margin:0}
.profile-bucket-count{font-family:var(--hf);font-size:18px;font-weight:700}
.profile-facts .profile-bucket-count{color:var(--accent2)}
.profile-reported .profile-bucket-count{color:var(--accent3)}
.profile-bucket-sub{font-size:12px;color:var(--faint);margin:0 0 14px}
.claim-list{display:flex;flex-direction:column;gap:11px}
.claim-card{padding-bottom:11px;border-bottom:1px solid var(--border)}
.claim-card:last-child{padding-bottom:0;border-bottom:none}
.claim-text{
  display:block;font-family:var(--hf);font-size:15.5px;color:var(--ink);line-height:1.4;
}
.claim-origin{
  display:block;margin-top:4px;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;
  font-weight:600;color:var(--muted);
}
.claim-origin.origin-known{color:var(--accent2)}
.claim-origin.origin-reported{color:var(--accent3)}
.claim-origin.origin-unattributed{color:var(--accent)}
.claim-basis{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
.claim-basis-none{color:var(--accent);line-height:1.45}
.profile-identity-origin{border-left:3px solid var(--accent3)}
.profile-identity-origin.origin-unattributed{border-left-color:var(--accent)}
.identity-title{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.identity-origin-label{
  display:block;margin-top:4px;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;
  font-weight:600;color:var(--accent3);
}
.profile-truncated{font-size:12.5px;color:var(--faint);margin:0}
.profile-failed{color:var(--accent)}
.profile-notfound{color:var(--muted)}

/* ============================ agents ============================ */
.agents-count{font-size:13px;color:var(--faint);margin:0}
.agent-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:16px}
.agent-card{
  display:flex;flex-direction:column;height:100%;min-width:0;
  border-left:4px solid var(--border-strong);box-shadow:0 1px 2px rgba(60,50,40,.05);
}
/* A judge holds no tools; an actor reads and proposes. The left rule carries that distinction so the
   card's most important fact is legible before a single word is read. */
.agent-card.kind-judge{border-left-color:var(--accent2)}
.agent-card.kind-actor{border-left-color:var(--accent3)}
.agent-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.agent-id{font-family:var(--hf);font-size:22px;font-weight:600;color:var(--ink)}
.agent-kind{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;font-weight:600;
  border-radius:999px;padding:2px 11px;
  color:var(--muted);border:1px solid var(--border-strong);background:var(--card2);
}
.agent-kind.kind-judge{color:var(--accent2);border-color:var(--accent2);background:var(--accent2-soft)}
.agent-kind.kind-actor{color:var(--accent3);border-color:var(--accent3);background:var(--accent3-soft)}
.agent-tier{font-size:12px;color:var(--faint)}
.agent-responsibility{
  font-family:var(--hf);font-size:17px;line-height:1.55;color:var(--ink);margin:0 0 16px;
}
.agent-bounds{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.agent-bound{font-size:13px;color:var(--muted);padding-left:12px;border-left:3px solid var(--border)}
.agent-notools,.agent-nocortex{color:var(--accent2);font-weight:600;border-left-color:var(--accent2)}
.agents-failed{
  font-size:13.5px;line-height:1.6;color:var(--accent);margin:0;
  border-left:3px solid var(--accent);padding-left:12px;
}
.agents-empty{
  font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;
  border-left:3px solid var(--border-strong);padding-left:12px;
}

/* ============================ connections ============================ */
/* Sits in the header's second column, under the intro, aligned with it. */
.conn-count{
  display:inline-flex;align-items:center;gap:10px;align-self:start;
  background:var(--white);border:1px solid var(--border);border-radius:999px;padding:8px 18px;
}
.conn-count-num{font-family:var(--hf);font-size:20px;font-weight:700;color:var(--ink)}
.conn-count-label{font-size:12.5px;color:var(--muted)}
.conn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.conn-row{
  display:flex;flex-direction:column;gap:14px;
  border-top:3px solid var(--border-strong);
  box-shadow:0 1px 2px rgba(60,50,40,.05);
  padding:20px 22px;
}
.conn-row.is-connected{border-top-color:var(--accent2)}
/* Authorized but not perceiving. The most dangerous state on this page — it looks alive — so it is
   the one card that changes its whole surface, not just a word. */
.conn-row.is-blind{border-color:var(--accent);border-top-color:var(--accent);background:var(--accent-tint)}
.conn-row.is-absent{background:var(--card);border:1px dashed var(--border-strong)}
.conn-meta{display:flex;flex-direction:column}
.conn-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.conn-name{font-family:var(--hf);font-size:21px;font-weight:600;color:var(--ink)}
.conn-status{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;font-weight:600;
  color:var(--faint);white-space:nowrap;
}
.conn-status.connected{color:var(--accent2)}
.conn-accounts{margin-top:4px;font-size:12.5px;color:var(--muted)}
.conn-senses{display:flex;flex-direction:column}
.conn-sense{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--border);
}
.conn-sense-name{font-size:13.5px;color:var(--ink)}
.conn-sense-status{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--faint);
}
.conn-sense-status .dot{width:7px;height:7px;border-radius:50%;background:var(--border-strong)}
.conn-sense-status.connected{color:var(--accent2)}
.conn-sense-status.connected .dot{background:var(--accent2)}
.conn-blind-note{font-size:12.5px;line-height:1.55;color:var(--accent);margin:0}
.conn-absent-note{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
.conn-action{align-self:flex-start;margin-top:auto}
.conn-note{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
.conn-aside{
  background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:18px 20px;
}
.conn-aside p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.conn-aside b{color:var(--ink);font-weight:600}

/* ============================ error surfaces ============================ */
/* "Não consegui ler" and "o Helix não conhece isto" are opposite statements. The terracota panel is
   only ever the first one — reading a failure as an absence would tell the owner something false
   about the organism's memory. */
.state-panel{border-radius:18px;padding:30px 32px}
.state-fail{background:var(--accent-tint);border:1px solid var(--accent)}
.state-quiet{background:var(--white);border:1px solid var(--border)}
.state-panel h1{
  font-family:var(--hf);font-size:32px;font-weight:700;line-height:1.15;color:var(--ink);margin:0 0 12px;
}
.state-panel h1 span{color:var(--accent)}
.state-panel .tag{margin-bottom:20px}
.state-reassure{font-size:12.5px;color:var(--accent2);font-weight:600;margin:0 0 20px}

/* ============================ auth (login / nascimento) ============================ */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-aside{
  background:var(--card2);
  border-right:1px solid var(--border);
  padding:64px 56px;
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.auth-brand{display:flex;align-items:baseline;gap:14px}
.auth-logo{font-family:var(--hf);font-size:26px;font-weight:700;color:var(--accent)}
.auth-logo-sub{
  font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:3px;font-weight:600;
}
.auth-claim{
  font-family:var(--hf);font-size:26px;line-height:1.45;color:var(--ink);margin:0;max-width:400px;
}
.auth-points{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.auth-point{display:flex;gap:11px;align-items:baseline;font-size:13.5px;line-height:1.55;color:var(--muted)}
.auth-point .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent2);flex:none;
}
.auth-main{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;gap:26px}
.auth-main h1{
  font-family:var(--hf);font-size:36px;font-weight:700;line-height:1.15;color:var(--ink);margin:0 0 14px;
}
.auth-main h1 span{color:var(--accent)}
.auth-lead{font-family:var(--hf);font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
/* flex, not block: .btn's own align-items/justify-content then still centre the label AND the busy
   spinner. display:block would silently opt the login buttons out of the busy state. */
.auth-actions .btn{display:flex;width:100%;font-size:15px;padding:13px 24px;border-radius:11px;box-shadow:var(--glow)}
.auth-actions .btn.secondary{box-shadow:none}
.auth-status{font-size:13px;color:var(--muted);margin:14px 0 0;min-height:20px;text-align:center}

.birth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:72px 64px}
.birth h1{
  font-family:var(--hf);font-size:46px;font-weight:700;line-height:1.1;letter-spacing:-.9px;
  color:var(--ink);margin:0 0 20px;
}
.birth h1 span{color:var(--accent)}
.birth-lead{font-family:var(--hf);font-size:20px;line-height:1.62;color:var(--muted);margin:0;max-width:520px}
.birth-brand{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.meta-bar{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 28px}
.meta-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;
  padding:6px 15px;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--card);color:var(--muted);
}
.meta-chip b{color:var(--ink);font-weight:600}
.meta-chip.pulse b{color:var(--accent)}
.meta-chip.pulse::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:hx-pulse 2.4s ease-in-out infinite;
}
.birth .btn{font-size:15px;padding:13px 30px;border-radius:11px;box-shadow:var(--glow)}
.birth-steps{
  background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:28px 30px;box-shadow:var(--shadow-lift);
}
.birth-steps-title{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:2.4px;
  font-weight:600;color:var(--faint);margin-bottom:20px;
}
.birth-step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--border)}
.birth-step:first-of-type{padding-top:0;border-top:none}
.birth-step:last-of-type{padding-bottom:0}
.birth-step-num{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border-strong);color:var(--faint);
  font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.birth-step.is-now .birth-step-num{background:var(--accent);border-color:var(--accent);color:var(--white)}
.birth-step-title{font-family:var(--hf);font-size:18px;font-weight:600;color:var(--ink)}
.birth-step-text{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}

/* ============================ responsive ============================ */
@media(max-width:1080px){
  .page-head{grid-template-columns:1fr;align-items:start}
  .page-head > :not(h1){grid-column:1}
  .page-head h1{font-size:34px}
  .signal-grid{grid-template-columns:repeat(2,1fr)}
  .land-split,.profile-layout{grid-template-columns:1fr}
  .ask-notes{grid-template-columns:1fr}
}
@media(max-width:860px){
  .hx-layout{grid-template-columns:1fr}
  .side{
    border-right:none;border-bottom:1px solid var(--border);
    padding:20px 22px;gap:18px;
  }
  .nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .nav-link{padding:8px 12px}
  .side-foot{margin-top:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
  .side-birth{flex:1;min-width:200px}
  .side-exit{border-top:none;padding:0}
  .page{padding:28px 22px 60px}
  .shell{padding:28px 22px 60px}
  .auth-split,.birth{grid-template-columns:1fr;min-height:0}
  .auth-aside{border-right:none;border-bottom:1px solid var(--border);padding:40px 26px}
  .auth-main{padding:40px 26px}
  .birth{padding:40px 26px;gap:32px}
  .birth h1{font-size:34px}
  .page-head h1{font-size:28px}
}
@media(max-width:560px){
  .signal-grid{grid-template-columns:1fr}
  .conn-list{grid-template-columns:1fr}
}

/* --- Modelos: the Anthropic usage window (28 Jul 2026) ---------------------
   Bars are rendered ONLY when a percentage was actually read; the "could not
   read" state is prose, never an empty bar. An empty bar reads as 0% used,
   which is the exact wrong conclusion this page exists to prevent. */
.usage-row{padding:14px 0;border-bottom:1px solid var(--border)}
.usage-row:last-child{border-bottom:none}
.usage-label{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.usage-label .tag{margin:0;font-size:12px}
.usage-bar{height:8px;border-radius:99px;background:rgba(44,40,35,.10);overflow:hidden}
.usage-bar>span{display:block;height:100%;border-radius:99px;background:var(--accent2)}
.usage-pct{margin-top:6px;font-size:13px;color:var(--muted)}

/* --- WhatsApp: quem o Helix escuta (D-040, 29 Jul 2026) ---------------------
   The colour grammar at the top of this file governs here and gains no fifth meaning:
     olive     = the organism has this / a bound it cannot cross -> an authorised chat
     gold      = reported, not yet decided                       -> a chat waiting on him
     neutral   = an answered question                            -> an ignored chat
     terracota = a real failure                                  -> ONLY a name that drifted, and
                                                                    "não consegui ler a lista"
   DENIED IS DELIBERATELY NOT TERRACOTA. A decision he made is not a fault, and painting his own
   choices as a wall of errors would teach him to stop reading the colour at all. */
.wa-body{display:flex;flex-direction:column;gap:22px}
.wa-summary{display:flex;flex-wrap:wrap;gap:12px}
.wa-count-waiting{border-color:var(--accent3);background:var(--accent3-soft)}
.wa-count-waiting .conn-count-num{color:var(--accent3)}
.wa-alert{border-color:var(--accent);background:var(--accent-tint)}
.wa-section-note{max-width:72ch}

/* The row's whole surface carries its state, the same idea .conn-row already uses for a blinded
   connection: a top rule is legible before a single word is read. */
.wa-row{gap:11px}
.wa-row.is-allowed{border-top:3px solid var(--accent2)}
.wa-row.is-pending{border-top:3px solid var(--accent3)}
/* An ignored chat recedes rather than alarms. It is settled work. */
.wa-row.is-denied{border-top:3px solid var(--border-strong);background:var(--card)}
.wa-row.is-denied .conn-name{color:var(--muted)}

/* THE ADDRESS. Monospace and selectable on purpose: it is the thing he is actually authorising, it
   is what tells two people with the same display name apart, and he may want to copy it. Never
   truncated -- a shortened JID is a JID you cannot verify. */
.wa-address{
  display:block;margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--faint);
  overflow-wrap:anywhere;user-select:all;
}
.wa-facts{margin-top:6px}
.wa-kind{font-weight:600;color:var(--muted)}
.wa-mine{color:var(--accent2);font-weight:600}

/* The rename warning: the one alarm a row can carry, and the reason decided_as_name exists. */
.wa-drift{
  font-size:12.5px;line-height:1.55;color:var(--accent);margin:0;
  border-left:3px solid var(--accent);padding-left:12px;
}
.wa-replay{display:flex;align-items:center;gap:8px;color:var(--accent2)}
.wa-replay .wa-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent2);flex:none;
  animation:hx-pulse 2.4s ease-in-out infinite;
}

.wa-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:4px}
.wa-actions form{display:contents}

/* Bulk decline. A CHECKED box means "act on this one" -- affirmative selection only, so an
   untouched form changes nothing rather than deciding everything it rendered. */
.wa-bulk{display:flex;flex-direction:column;gap:10px;background:var(--card2)}
.wa-bulk-title{font-family:var(--hf);font-size:18px;font-weight:600;color:var(--ink)}
.wa-bulk-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;
  max-height:320px;overflow-y:auto;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px 0;
}
.wa-pick{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;
  padding:7px 9px;border-radius:9px;cursor:pointer;
  transition:background .14s ease;
}
.wa-pick:hover{background:var(--white)}
.wa-pick:has(input:checked){background:var(--accent-soft)}
.wa-pick input{accent-color:var(--accent);cursor:pointer;width:15px;height:15px}
.wa-pick input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.wa-pick-name{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.wa-pick-address{
  grid-column:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--faint);overflow-wrap:anywhere;
}
.wa-bulk .btn{align-self:flex-start}

/* An answered question stops asking, but must stay reachable: a decision he can never revisit is
   not a decision, it is a trap. */
.wa-denied{
  background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:4px 18px;
}
.wa-denied[open]{padding-bottom:18px}
.wa-denied-summary{
  cursor:pointer;padding:13px 0;list-style:none;
  font-family:var(--hf);font-size:17px;font-weight:600;color:var(--muted);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.wa-denied-summary::-webkit-details-marker{display:none}
.wa-denied-summary::before{
  content:"▸";font-family:var(--bf);font-size:12px;color:var(--faint);
  transition:transform .16s ease;display:inline-block;
}
.wa-denied[open] .wa-denied-summary::before{transform:rotate(90deg)}
.wa-denied-summary:hover{color:var(--ink)}
.wa-denied-summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-radius:8px}
.wa-denied-hint{font-family:var(--bf);font-size:12px;font-weight:400;color:var(--faint)}
/* The one line on /connections that says the organism is ligado and deliberately deaf. Gold, not
   terracota: waiting on a decision is not a fault, it is the designed state until he decides. */
.wa-waiting-note{color:var(--accent3);border-left:3px solid var(--accent3);padding-left:12px}
/* Where you are. Added because the audience screen read as a Portal-wide setting when it governs
   exactly one connector: a rule that SEEMS to govern every source while governing one is how
   somebody ends up saying "I thought I had turned that off". */
.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--faint);flex-wrap:wrap}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--accent)}
.crumb-sep{color:var(--border-strong)}
.crumb-here{color:var(--ink);font-weight:600}