/* ============================================================================
   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}
/* ============================================================================
   PERGUNTAR: a tela cheia do design do Fabio (31 Jul 2026), nas cores do Portal.
   Três colunas: trilho de ícones, conversa com o compositor embaixo, painel de evidências.
   Ela NÃO usa a moldura do Command Center: é uma tela de aplicação inteira, e foi exatamente
   por dentro dessa moldura que a primeira tentativa saiu com a cara antiga.
   ============================================================================ */
/* TWO COLUMNS, NOT THREE. The design draws its own icon rail and an earlier version built one --
   Fabio's correction: "você precisa manter o menu igual das outras e somente colocar o painel da
   direita, você está recriando o menu e tirando ele do padrão." The Command Center sidebar IS the
   navigation; what this screen adds is the conversation and the panel beside it.

   It fills the viewport so the composer can sit at the BOTTOM, which is the part of the design that
   makes it read as a conversation instead of a form above a result. */
/* A CADEIA DE ALTURAS PRECISA SER INTEIRA, e faltava o meio dela.
   `.hxc` pedia `height:100vh` dentro de `.hx-layout` (min-height:100vh) e `.main` (sem altura). Um
   filho flex só rola por dentro se o pai tiver altura DEFINIDA; com o pai apenas com altura MÍNIMA,
   a thread crescia em vez de rolar, o compositor era empurrado para fora da tela, e como `.hxc` é
   `overflow:hidden` o que passava do fim ficava cortado sem barra nenhuma. Fabio: "não tem barra de
   rolagem para ver o que ficou para baixo".
   Os dois `:has()` abaixo fecham a cadeia SÓ nesta tela: nenhuma outra superfície do Portal quer
   altura travada, e é por isso que a regra pergunta pela presença do `.hxc` em vez de mudar o
   shell para todo mundo. `dvh` porque no celular a barra do navegador some e volta, e `vh` fixo
   deixaria o compositor debaixo dela. */
/* A MESMA ARMADILHA, UM NÍVEL ACIMA. Medido no navegador: `.hx-layout` com 702px de altura e
   `.main` com 765 -- o item transbordando o próprio container. A linha implícita do grid é `auto`,
   e `auto` CRESCE até o item mais alto em vez de ser limitada pela altura declarada. Travar a
   altura sem travar a linha não trava nada. A barra lateral ganha rolagem própria: ela é a mais
   alta das duas colunas e, presa a uma linha limitada, seria ela a ficar cortada. */
.hx-layout:has(.hxc){
  height:100dvh;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr);
}
.hx-layout:has(.hxc) .main{min-height:0;overflow:hidden}
.hx-layout:has(.hxc) .side{min-height:0;overflow-y:auto}
.hxc{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;height:100%;min-height:0;
  /* `minmax(0,1fr)` E NÃO A LINHA IMPLÍCITA, e esta é a linha que realmente faltava.
     Uma linha `auto` -- o padrão quando não se declara `grid-template-rows` -- CRESCE além da
     altura do container em vez de ser limitada por ela. Medido no navegador com uma resposta longa:
     `.hxc` com clientHeight 765 e scrollHeight 3435, a thread com scrollHeight IGUAL ao clientHeight
     (ou seja, ela cresceu em vez de rolar) e o compositor 3.300px abaixo da dobra, tudo cortado por
     este mesmo `overflow:hidden` e sem barra em lugar nenhum.
     O `minmax(0,1fr)` prende a linha na altura do container, e o `0` é o que permite que o
     `min-height:0` desça até o filho flex que precisa rolar. */
  grid-template-rows:minmax(0,1fr);
  background:var(--bg);color:var(--ink);overflow:hidden;
}
/* `min-height:0` no item do grid: sem ele o item flex não encolhe abaixo do conteúdo, e a thread
   volta a crescer mesmo com a linha limitada. Os dois são necessários; nenhum basta sozinho. */
.hxc-main{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  border-right:1px solid var(--border);
}
.hxc-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px 28px;border-bottom:1px solid var(--border);
}
.hxc-head-title{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 auto}
.hxc-title{font:600 16px/1 var(--hf);white-space:nowrap}
.hxc-sub{
  font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hxc-head-acts{display:flex;align-items:center;gap:8px;flex:none}
.hxc-pill{
  font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);color:var(--muted);text-decoration:none;white-space:nowrap;
}
.hxc-pill:hover{border-color:var(--border-strong);color:var(--ink)}

.hxc-thread{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:26px 28px 10px;display:flex;
  flex-direction:column;gap:22px;
}
/* UMA BARRA QUE APARECE. No macOS o navegador esconde a barra até você rolar, então um contêiner
   que rola por dentro parece uma tela travada. Estilizar a barra a torna persistente, e é a
   diferença entre "não dá para ver o resto" e "dá, é só rolar". */
.hxc-thread::-webkit-scrollbar,.hxc-panel-body::-webkit-scrollbar{width:10px}
.hxc-thread::-webkit-scrollbar-thumb,.hxc-panel-body::-webkit-scrollbar-thumb{
  background:var(--border-strong);border-radius:999px;border:3px solid transparent;
  background-clip:content-box;
}
.hxc-thread::-webkit-scrollbar-thumb:hover,.hxc-panel-body::-webkit-scrollbar-thumb:hover{
  background:var(--muted);background-clip:content-box;
}
/* SEM `scrollbar-width` AQUI, de propósito. Medido: com ele o Chrome usa o desenho padrão e IGNORA
   o `::-webkit-scrollbar` acima, e no macOS o padrão é uma barra sobreposta que só aparece enquanto
   se rola -- ou seja, largura zero e a tela parecendo travada, que é exatamente o que o Fabio via.
   Deixar as pseudo-classes mandarem é o que produz uma barra permanente e visível. */
.hxc-blank{margin:auto 0;max-width:56ch}
.hxc-blank-lead{font-family:var(--hf);font-size:20px;color:var(--ink);margin:0 0 8px}
.hxc-blank-sub{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

.hxc-turn{display:flex;flex-direction:column;gap:18px}
.hxc-ask{display:flex;justify-content:flex-end}
.hxc-ask span{
  max-width:70%;background:var(--card2);padding:11px 16px;border-radius:14px 14px 4px 14px;
  font-size:14px;line-height:1.55;
}
.hxc-answer{display:flex;flex-direction:column;gap:15px;animation:hxin .3s ease both}
@keyframes hxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hxc-answer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hxc-answer-title{font-size:12.5px;font-weight:600}
.hxc-conf{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;
  border-radius:999px;background:var(--accent2-soft);color:var(--accent2);
}
.hxc-conf.weak{background:var(--accent3-soft);color:var(--accent3)}
.hxc-conf .dot{width:6px;height:6px;border-radius:999px;background:currentColor}
.hxc-hint{font-size:11.5px;color:var(--faint)}
.hxc-claims{display:flex;flex-direction:column;gap:3px}
.hxc-plain{font-family:var(--hf);font-size:17px;line-height:1.62;margin:0;max-width:62ch}
.hxc-none,.hxc-warn{
  font-size:13.5px;line-height:1.55;margin:0;padding:13px 15px;border-radius:12px;max-width:62ch;
}
.hxc-none{background:var(--card);color:var(--muted)}
.hxc-warn{background:var(--accent3-soft);color:#7a5a1f}
.hxc-withheld{font-size:12.5px;color:var(--muted);max-width:62ch}
.hxc-withheld span{display:block;font-weight:600;color:var(--ink);margin-bottom:4px}
.hxc-withheld ul{margin:0 0 0 18px;line-height:1.7}
.hxc-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hxc-act{
  font-size:12.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.hxc-act:hover{border-color:var(--border-strong);color:var(--ink)}
.hxc-act.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.hxc-act.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.hxc-acts-end{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}

.hxc-foot{flex:none;padding:12px 28px 20px}
.hxc-chips{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hxc-chip{
  font-size:12px;padding:6px 11px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;
  font-family:var(--bf);
}
.hxc-chip:hover{border-color:var(--border-strong);color:var(--ink)}
.hxc-composer{
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:22px;
  background:var(--card);border:1px solid var(--border-strong);box-shadow:var(--shadow);
}
.hxc-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
  font:400 14.5px var(--bf);
}
.hxc-input::placeholder{color:var(--faint)}
.hxc-send{
  width:36px;height:36px;flex:none;border:0;border-radius:999px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:16px;cursor:pointer;
}
.hxc-send:hover{background:var(--accent-deep)}
.hxc-send:disabled{opacity:.55;cursor:default}
.hxc-note{margin:9px 2px 0;font-size:11px;color:var(--faint)}

.hxc-panel{
  background:var(--card);display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-left:1px solid var(--border);
}
.hxc-panel-empty{padding:20px;display:flex;flex-direction:column;gap:10px}
.hxc-panel-empty p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
.hxc-panel-title{font:600 14px/1 var(--hf);color:var(--ink)}
.hxc-panel-head{flex:none;padding:18px 20px 16px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:14px}
.hxc-panel-body{flex:1;min-height:0;overflow:auto;padding:14px 20px 20px}

@media(max-width:1180px){
  .hxc{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh}
  .hxc-panel{border-top:1px solid var(--border)}
  .hxc-main{border-right:0}
  .hxc-thread{overflow:visible}
}

/* --- Perguntar: a resposta em AFIRMAÇÕES + o painel de evidências (formato do design de 31 Jul) ---
   O formato é o desenho do Fabio; a cor e a letra são as do Portal (D-005), a pedido dele.

   A SELEÇÃO É CSS, NÃO SCRIPT. Cada afirmação tem um radio, e `:has()` no contêiner acende o grupo
   de evidências correspondente. Todo o conteúdo dos dois lados é renderizado no servidor, então a
   página não consegue mostrar a memória de um trecho embaixo de outro nem com o script desligado.
   Um `:has()` sem suporte degrada para o primeiro grupo visível, que é a resposta certa e não uma
   tela vazia. ================================================================================= */
.ask-shell{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;
}
.ask-thread{
  background:var(--card);border-radius:18px;padding:26px 28px 28px;box-shadow:var(--shadow);
  min-width:0;
}
.ask-question{font-size:13.5px;color:var(--ink);margin:0 0 20px;line-height:1.6}
.ask-question span{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--faint);margin-bottom:4px;
}
.ask-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ask-head-title{font-family:var(--hf);font-size:16px;font-weight:600;color:var(--ink)}
.ask-conf-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--accent2-soft);color:var(--accent2);
}
.ask-conf-pill.weak{background:var(--accent3-soft);color:var(--accent3)}
.ask-conf-pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor}
.ask-head-hint{font-size:11.5px;color:var(--faint)}

.ask-claim-list{display:flex;flex-direction:column;gap:2px}
.ask-claim-pick{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ask-claim{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  cursor:pointer;background:transparent;transition:background .15s ease;
}
.ask-claim:hover{background:var(--card2)}
.ask-claim-rail{width:3px;flex:none;align-self:stretch;border-radius:999px;background:var(--border)}
.ask-claim-body{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
/* FIGTREE AQUI, NEWSREADER NO RESUMO, e a diferença é a resposta ao "as letras estão ruins e feias".
   Uma serifa grande é excelente para UMA frase que abre a resposta e cansa numa lista densa de
   afirmações curtas, que é exatamente o que os achados são. As duas fontes são as do D-005; o que
   muda é qual delas faz cada trabalho. */
.ask-claim-text{
  font-family:var(--bf);font-size:15px;line-height:1.62;color:var(--ink);max-width:60ch;
}
.ask-claim-count{
  margin-left:auto;flex:none;font-size:10.5px;font-weight:600;color:var(--faint);white-space:nowrap;
  padding-top:4px;
}
.ask-claim-pick:checked + .ask-claim{background:var(--card2)}
.ask-claim-pick:checked + .ask-claim .ask-claim-rail{background:var(--accent)}
/* Sem base citada: dourado, que na gramática desta interface é "relatado, não verificado", e nunca
   terracota, que é falha. Um trecho sem citação não é um erro do organismo: é ele dizendo que
   escreveu sem se apoiar em nada, e a cor precisa dizer a mesma coisa. */
.ask-claim-bare .ask-claim-rail{background:var(--accent3)}
.ask-claim-bare .ask-claim-count{color:var(--accent3)}
.ask-claim-pick:checked + .ask-claim-bare .ask-claim-rail{background:var(--accent3)}

/* --- O analista: resumo, tipo de cada achado, entidades, e o alarme de citação inventada --------
   O RESUMO É A FRASE QUE A PESSOA LÊ PRIMEIRO e muitas vezes a única. Ela ganha a serifa e o
   tamanho; tudo abaixo dela é o detalhamento. */
.hxc-lead{
  font-family:var(--hf);font-size:19px;line-height:1.6;color:var(--ink);margin:0;max-width:62ch;
}

/* --- "O Helix está pensando": a espera, dita em voz alta ---------------------------------------
   A análise leva MINUTOS (nove, medidos ao vivo, para uma pergunta). Um spinner sozinho lê como
   uma página travada; o que torna a espera legível é dizer o que ele está fazendo enquanto ela
   dura. Por isso a frase abaixo do pulso não é enfeite: é a única coisa que separa "está pensando"
   de "quebrou". */
.hxc-thinking{display:flex;align-items:center;gap:11px}
.hxc-thinking-lead{font-family:var(--hf);font-size:17px;color:var(--ink)}
.hxc-thinking-sub{
  font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:58ch;
}
.hxc-pulse{display:inline-flex;gap:4px;align-items:center}
.hxc-pulse i{
  width:6px;height:6px;border-radius:999px;background:var(--accent);display:block;
  animation:hxpulse 1.1s ease-in-out infinite;
}
.hxc-pulse i:nth-child(2){animation-delay:.15s}
.hxc-pulse i:nth-child(3){animation-delay:.3s}
@keyframes hxpulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* Respeita quem pediu para o sistema parar de animar: o pulso vira três pontos parados, e a frase
   continua dizendo tudo o que precisava dizer. */
@media(prefers-reduced-motion:reduce){
  .hxc-pulse i{animation:none;opacity:.55}
}
.hxc-ent{
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--accent2-soft);color:var(--accent2);white-space:nowrap;
}
/* COMO O HELIX CHEGOU NAQUILO, em uma palavra. As três cores são a gramática do Portal e não
   decoração: verde = ele leu, tinta = ele deduziu, dourado = ele não tem certeza. Um achado sem
   etiqueta leria como um achado comum, e a etiqueta existe justamente porque eles não são comuns
   do mesmo jeito. */
.hxc-kind{
  flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--border-strong);color:var(--faint);
  background:var(--white);cursor:help;
}
.hxc-kind-observado{color:var(--accent2);border-color:var(--accent2);background:var(--accent2-soft)}
.hxc-kind-inferido{color:var(--ink);border-color:var(--border-strong);background:var(--card2)}
.hxc-kind-incerto{color:var(--accent3);border-color:var(--accent3);background:var(--accent3-soft)}

/* A CITAÇÃO INVENTADA É TERRACOTA, e é a única coisa nesta tela que é. "Escrevi sem me apoiar em
   nada" é dourado, porque é o organismo sendo honesto; "apontei uma memória que eu nunca li" é
   vermelho, porque é o organismo afirmando uma prova que não existe. As duas nunca podem dividir
   a mesma cor. */
.hxc-alarm{
  font-size:13.5px;line-height:1.55;margin:0;padding:13px 15px;border-radius:12px;max-width:62ch;
  background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent);
}
.hxc-alarm-ids{display:block;margin-top:5px;font-size:11px;color:var(--accent);word-break:break-all}

.ask-panel{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);display:flex;
  flex-direction:column;overflow:hidden;position:sticky;top:24px;max-height:calc(100vh - 48px);
}
.ask-panel-head{padding:20px 20px 16px;border-bottom:1px solid var(--border);flex:none}
.ask-panel-title{
  display:block;font-family:var(--hf);font-size:15px;font-weight:600;color:var(--ink);
  margin-bottom:14px;
}
.conf-ring-row{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;
  background:var(--bg);margin-bottom:14px;
}
.conf-ring{
  flex:none;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;
  background:conic-gradient(var(--accent) 0 var(--pct),var(--border) var(--pct) 100%);
}
.conf-ring-in{
  width:40px;height:40px;border-radius:999px;background:var(--card);display:grid;place-items:center;
  font-family:var(--hf);font-size:13px;font-weight:700;color:var(--ink);
}
.conf-note{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

.ev-pick{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
/* UMA LINHA QUE ROLA, não duas linhas apertadas. Com quatro abas e contagens de dois dígitos elas
   quebravam e o cabeçalho do painel virava um bloco de botões. */
.ev-tabs{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.ev-tab{flex:none}
.ev-tab{
  font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border-strong);color:var(--muted);background:transparent;white-space:nowrap;
}
.ev-tab:hover{color:var(--ink)}
.ev-tab.warn{border-color:var(--accent3);color:var(--accent3)}
/* AS ABAS ESTAVAM MORTAS, e essa é metade do "visualmente ruim" que o Fabio viu na tela. Estas
   regras estavam presas a `.ask-panel`, a classe do painel ANTIGO; a tela redesenhada renderiza
   `.hxc-panel`, então nenhum `:has()` casava: os três botões apareciam, ficavam bonitos, e clicar
   neles não fazia absolutamente nada. Um controle que não responde é pior que um controle ausente,
   porque ensina a pessoa que a tela está quebrada. O escopo agora é o painel que existe. */
.hxc-panel:has(.ev-pick-used:checked) .ev-tab[for="ev-used"],
.hxc-panel:has(.ev-pick-trail:checked) .ev-tab[for="ev-trail"],
.hxc-panel:has(.ev-pick-diag:checked) .ev-tab[for="ev-diag"]{
  background:var(--ink);border-color:var(--ink);color:var(--bg);
}
.hxc-panel:has(.ev-pick-fenced:checked) .ev-tab[for="ev-fenced"]{
  background:var(--accent3);border-color:var(--accent3);color:var(--white);
}

.ev-pane{display:none;flex-direction:column;gap:10px}
.ev-pane-used{display:flex}
.hxc-panel:has(.ev-pick-fenced:checked) .ev-pane-used,
.hxc-panel:has(.ev-pick-trail:checked) .ev-pane-used,
.hxc-panel:has(.ev-pick-diag:checked) .ev-pane-used{display:none}
.hxc-panel:has(.ev-pick-fenced:checked) .ev-pane-fenced{display:flex}
.hxc-panel:has(.ev-pick-trail:checked) .ev-pane-trail{display:flex}
.hxc-panel:has(.ev-pick-diag:checked) .ev-pane-diag{display:flex}

/* Um grupo por afirmação. As REGRAS SÃO EMITIDAS PELO TEMPLATE, dimensionadas ao número real de
   trechos: aqui existia um mapa fixo de 1 a 8, e uma resposta com nove trechos deixava o nono
   selecionado mostrando as memórias do PRIMEIRO, sem sinal nenhum. Mostrar a proveniência errada
   embaixo de um trecho escolhido é a pior falha que esta tela consegue ter, e um teto silencioso
   era a forma mais discreta de chegar nela. */
.ev-group{display:none;flex-direction:column;gap:10px}

.ev-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:13px 14px}
.ev-card-fenced{border-color:var(--accent3)}
.ev-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.ev-rail{width:3px;height:12px;flex:none;border-radius:999px;background:var(--accent)}
.ev-kind{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.ev-trust{
  margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--muted);background:var(--white);white-space:nowrap;
}
.ev-trust.quarantined{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.ev-fence{
  display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
  border:1px solid var(--accent3);color:var(--accent3);background:var(--accent3-soft);
  margin-bottom:7px;
}
/* ESTOURAVA O CARTÃO. Uma memória traz nonce, URL de reunião e sublinhado corrido -- cadeias sem
   espaço nenhum, que não quebram em nada e empurram a largura do painel inteiro. `anywhere` é o
   único valor que quebra dentro de uma "palavra" dessas. */
.ev-snippet{
  margin:0;font-size:13px;line-height:1.55;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-word;
}
.ev-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ev-bar{
  width:52px;height:4px;flex:none;border-radius:999px;background:var(--border);display:block;
  overflow:hidden;
}
.ev-bar span{display:block;height:4px;border-radius:999px;background:var(--accent)}
.ev-metric{font-size:10.5px;color:var(--faint);white-space:nowrap}
.ev-metric-end{margin-left:auto}
.ev-id{display:block;font-size:10.5px;color:var(--faint);margin-top:6px;overflow-wrap:anywhere}
.ev-bare{
  margin:0;font-size:12.5px;line-height:1.55;color:var(--accent3);padding:12px 14px;
  border-radius:12px;background:var(--accent3-soft);
}
/* Uma NOTA, não um alerta. `.ev-bare` é dourado porque diz "isto não tem base"; esta diz apenas
   "eis por que não há um trecho único aqui", e pintá-la de dourado ensinaria a pessoa a ignorar o
   dourado justamente onde ele importa. */
.ev-soft{
  margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);padding:12px 14px;
  border-radius:12px;background:var(--bg);border:1px solid var(--border);
}
.ev-lead{margin:0 0 4px;font-size:12px;line-height:1.55;color:var(--muted)}

/* --- O caminho: cada passo que o analista deu, na ordem ----------------------------------------
   Esta aba é a diferença entre um buscador e um analista. O passo que voltou VAZIO fica marcado,
   porque é ali que a pessoa vê o organismo procurar uma pessoa no grafo e não encontrar, que é
   exatamente o que a fila de quarentena está causando hoje. */
.trail-step{
  display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);
}
.trail-n{
  flex:none;width:20px;height:20px;border-radius:999px;background:var(--card2);color:var(--faint);
  font-size:10.5px;font-weight:700;display:grid;place-items:center;
}
.trail-what{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.trail-what b{font-size:12px;font-weight:600;color:var(--ink)}
.trail-target{font-size:12px;color:var(--muted);word-break:break-word}
.trail-found{
  flex:none;font-size:10.5px;font-weight:700;color:var(--accent2);white-space:nowrap;padding-top:3px;
}
.trail-empty{border-color:var(--accent3)}
.trail-empty .trail-found{color:var(--accent3)}
.trail-empty .trail-n{background:var(--accent3-soft);color:var(--accent3)}
/* QUEBROU é diferente de VAZIO, e a cor tem que dizer isso. Dourado = "procurei e não achei", que
   é um fato sobre a memória. Terracota = "não consegui procurar", que é um fato sobre o sistema, e
   é o único dos dois em que você deve fazer alguma coisa. */
.trail-broken{border-color:var(--accent);background:var(--accent-soft)}
.trail-broken .trail-found{color:var(--accent)}
.trail-broken .trail-n{background:var(--accent);color:#fff}
.trail-error{font-size:11px;color:var(--accent);word-break:break-word}

.diag-row{
  display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;
  background:var(--bg);border:1px solid var(--border);font-size:12px;color:var(--muted);
}
.diag-row b{color:var(--ink);font-weight:600}
.diag-trace b{font-size:11px;word-break:break-all;text-align:right}
.diag-note{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--faint)}

@media(max-width:1100px){
  .ask-shell{grid-template-columns:minmax(0,1fr)}
  .ask-panel{position:static;max-height:none}
}

.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}
/* The card's action row. It carried exactly ONE button until the audience screen gave a source that
   awaits a decision a second one, and `align-self:flex-start` on a block container then let the two
   fall onto separate lines at their own widths -- a ragged stack that reads as a mistake.
   A real flex row with a gap keeps them side by side, and wraps them cleanly on a narrow card.
   `stretch` changes nothing for a single button (an inline-flex child still hugs its own text). */
.conn-action{
  align-self:stretch;margin-top:auto;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.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}
/* What is waiting and unreadable. Gold, the colour this screen already uses for "waiting on you",
   because that is what it is: content the organism is holding and cannot yet turn into a memory. */
/* --accent3 is the gold in D-005; there is no --gold token, so this rule had been silently
   inheriting its colour since it was written. Found while auditing the new organ page's tokens. */
.wa-waiting{color:var(--accent3);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}

/* ---------------------------------------------------------------------------
   Modelos: the routing chain, and the measurement of who really answered
   ---------------------------------------------------------------------------
   The chain is the point of this surface, so it is laid out as a chain: legs in
   order, arrows between them, wrapping on a narrow screen instead of scrolling
   the page sideways. The primary leg is weighted because "what answers on a good
   day" is the first thing an eye looks for; the legs on our own hardware are
   marked because that is what makes a vendor outage slow instead of mute (D-037). */
.model-chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px 0 4px;
}
.model-arrow{color:var(--muted);font-size:13px;line-height:1}
.model-leg{
  display:inline-flex;flex-direction:column;gap:1px;
  padding:6px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--card2);
}
/* The configured primary: what answers when nothing is wrong. */
.model-leg.is-primary{border-color:var(--accent);background:var(--accent-soft)}
/* Hardware we own — the reason a chain degrades instead of stopping. */
.model-leg.is-owned{border-style:dashed;border-color:var(--accent2)}
/* The one sentence read during an outage: how many chains survive it. Olive when they all do,
   terracota when any does not — a chain ending at a vendor is a real failure mode, not a note. */
.tail-summary{margin-bottom:14px}
.tail-line{margin:0;font-size:14px;line-height:1.6}
.tail-line.tail-ok{color:var(--accent2)}
.tail-line.tail-warn{color:var(--accent)}

/* Nobody declared where this leg runs. GOLD, per the vocabulary at the top of this file: not
   observed, and deliberately NOT the same reading as "it is a vendor". Collapsing the two is the
   defect this state exists to prevent (A18-01). */
.model-leg.is-undeclared{border-style:dotted;border-color:var(--accent3)}
.agent-kind.kind-undeclared{color:var(--accent3);border-color:var(--accent3);background:var(--accent3-soft)}
.model-leg-id{font-size:13px;font-weight:600;color:var(--ink);word-break:break-word}
.model-leg-meta{font-size:11px;color:var(--muted)}

.model-measure{margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.model-measure form{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0}
.model-measure-hint{font-size:12px;color:var(--muted);line-height:1.5}

/* Three outcomes, three readings. None of them is ever a blank: a measurement that
   failed still says what it measured. */
.model-measure-ok{margin:0;font-size:13.5px;color:var(--accent2)}
.model-measure-fell{margin:0;font-size:13.5px;color:var(--gold, var(--accent3))}
.model-measure-problem{margin:0;font-size:13.5px;color:var(--accent)}

/* ---------------------------------------------------------------------------
   The alert bar: the one surface that speaks without being visited
   ---------------------------------------------------------------------------
   Fabio, 02 Aug 2026: "se algo ficar 15 horas parado sem ninguem ver, ferrou."

   It renders NOTHING when clean. A bar that is always on screen is wallpaper,
   and wallpaper is what a person stops seeing -- which would make this component
   the cause of the exact failure it exists to prevent. */
.alert-bar{
  display:flex;gap:13px;align-items:flex-start;
  margin:0 0 26px;padding:15px 18px;
  border-radius:12px;border:1px solid var(--accent);
  background:var(--accent-soft);
}
.alert-mark{
  flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-radius:50%;
  background:var(--accent);
}
.alert-body{min-width:0}
.alert-head{
  margin:0 0 5px;font-family:var(--hf);font-size:15.5px;font-weight:600;color:var(--accent);
}
.alert-line{
  margin:0 0 3px;font-size:13.5px;line-height:1.55;color:var(--ink);
  overflow-wrap:anywhere;  /* a finding may carry a long identifier; it must wrap, never scroll */
}
.alert-line:last-child{margin-bottom:0}

/* THE WATCHDOG ITSELF STOPPED. Louder than any finding it may have left behind: those describe a
   moment that has passed, and what is true now is that nobody is looking at all. */
.alert-bar.is-stalled,
.alert-bar.is-never{
  border-width:2px;
  background:repeating-linear-gradient(
    135deg, var(--accent-soft), var(--accent-soft) 10px,
    transparent 10px, transparent 20px
  );
}
.alert-bar.is-stalled .alert-mark,
.alert-bar.is-never .alert-mark{
  /* This one pulses, and it is the only motion in the component. It marks the state where the
     absence of other alarms means nothing, which is the one an eye must not slide past. */
  animation:alert-pulse 1.8s ease-in-out infinite;
}
@keyframes alert-pulse{50%{opacity:.25}}

.alert-undelivered{
  display:inline-block;margin-left:9px;padding:1px 9px;border-radius:999px;
  font-family:var(--bf);font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--accent3);background:var(--accent3-soft);border:1px solid var(--accent3);
}

@media (prefers-reduced-motion: reduce){
  /* The state is carried by the stripes, the border weight and the words as well, so nothing is
     lost by stopping the only thing that moves. */
  .alert-bar.is-stalled .alert-mark,
  .alert-bar.is-never .alert-mark{animation:none}
}

/* ---------------------------------------------------------------------------
   Agentes: the bedside monitor
   ---------------------------------------------------------------------------
   Fabio's design ("Agentes - Monitor de Leito", Claude Design, 02 Aug 2026),
   rebuilt here in the Portal's own palette and type at his instruction:
   "adapte para nossas cores, letras e para o que temos." Not one hex code from
   the design file survives -- every colour below is a D-005 token. What is
   imported is the structure and the metaphor, which is what carries the meaning.

   THE MONITOR'S VOICE IS MONOSPACE, and it comes from the SYSTEM stack rather
   than a fourth webfont: a readout whose digits do not line up stops reading as
   an instrument, and that is worth zero bytes of download.

   AND NOTHING HERE MOVES WITHOUT A REASON. Only a LIVE lane sweeps; a lane that
   has never worked is flat and says so. A monitor that animates on a timer is a
   screensaver, which is the failure this whole surface exists to prevent. */
:root{
  --mf:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}

.mon-page{max-width:none}

.mon-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 0 16px;margin-bottom:20px;border-bottom:1px solid var(--border-strong);
}
.mon-ident-id{
  display:block;font-family:var(--mf);font-size:12.5px;letter-spacing:.06em;color:var(--ink);
}
.mon-ident-sub{
  display:block;margin-top:3px;font-family:var(--mf);font-size:9.5px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
}
.mon-window{font-family:var(--mf);font-size:11px;color:var(--muted)}

/* --- the alarm strip: it owns the top of the monitor ---------------------- */
.mon-alarm{
  display:flex;gap:13px;align-items:flex-start;margin:0 0 18px;padding:13px 17px;
  border:1px solid var(--accent);border-radius:5px;background:var(--accent-soft);
}
.mon-alarm.is-grave{
  border-width:2px;
  background:repeating-linear-gradient(135deg,
    var(--accent-soft),var(--accent-soft) 10px,transparent 10px,transparent 20px);
}
.mon-alarm-dot{
  flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--accent);
  animation:mon-blink 1.1s ease-in-out infinite;
}
@keyframes mon-blink{0%,45%{opacity:1}55%,100%{opacity:.15}}
.mon-alarm-body{min-width:0}
.mon-alarm-head{
  margin:0 0 5px;font-family:var(--mf);font-size:11.5px;letter-spacing:.14em;
  color:var(--accent-deep);text-transform:uppercase;
}
.mon-alarm-line{
  margin:0 0 3px;font-size:13px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;
}
.mon-alarm-line:last-child{margin-bottom:0}
.mon-alarm-undelivered{
  display:inline-block;margin-left:9px;padding:1px 9px;border-radius:999px;
  font-size:10px;letter-spacing:.08em;
  color:var(--accent3);background:var(--accent3-soft);border:1px solid var(--accent3);
}

/* --- the grid: traces left, vitals right ---------------------------------- */
.mon-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:0;
  border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;
  background:var(--card);
}
@media (max-width:900px){.mon-grid{grid-template-columns:minmax(0,1fr)}}

/* --- the traces ----------------------------------------------------------- */
.mon-traces{
  min-width:0;border-right:1px solid var(--border-strong);
  /* The graph paper is the monitor's bed. Two gradients, no image. */
  background-image:
    linear-gradient(rgba(44,40,35,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,40,35,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
@media (max-width:900px){.mon-traces{border-right:none;border-bottom:1px solid var(--border-strong)}}

.mon-lane{
  position:relative;height:96px;overflow:hidden;
  border-bottom:1px solid var(--border);
}
.mon-lane:last-child{border-bottom:none}
.mon-wave{position:absolute;inset:0;width:100%;height:100%}

/* A quiet lane keeps its shape but loses its confidence: the trace is there, the
   organ is not working. Drawing it identically to a live one is how a dashboard
   looks calm while something has stopped. */
.mon-lane.is-quiet .mon-wave{opacity:.3}
.mon-lane.is-blind .mon-wave{opacity:.18}

/* ASSÍSTOLE. The lane that has never run gets its own bed colour so the eye
   lands on it before reading a single word. */
.mon-lane.is-flat{background:var(--accent-tint)}
.mon-asystole{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--hf);font-style:italic;font-size:24px;color:var(--accent);
  animation:mon-glow 1.4s ease-in-out infinite;
}
@keyframes mon-glow{0%,100%{opacity:.6}50%{opacity:1}}

/* The sweep, on LIVE lanes only. */
.mon-sweep{
  position:absolute;top:0;bottom:0;width:64px;pointer-events:none;
  background:linear-gradient(90deg,var(--card) 0%,rgba(253,250,242,0) 100%);
  animation:mon-sweep 6s linear infinite;
}
@keyframes mon-sweep{0%{transform:translateX(-14%)}100%{transform:translateX(1140%)}}

.mon-lane-head{position:absolute;left:15px;top:11px;display:flex;align-items:baseline;gap:12px}
.mon-code{font-family:var(--mf);font-size:12px;letter-spacing:.16em;color:var(--lane)}
.mon-reading{font-family:var(--mf);font-size:10px;color:var(--muted)}
.mon-lane-name{
  position:absolute;right:15px;top:11px;font-family:var(--mf);font-size:10px;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
}
.mon-lane.is-flat .mon-lane-name,
.mon-lane.is-flat .mon-reading{color:var(--accent)}

/* --- the vitals column ---------------------------------------------------- */
.mon-vitals{display:flex;flex-direction:column;min-width:0}
.mon-vital{
  flex:1;min-height:96px;padding:13px 18px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.mon-vital:last-child{border-bottom:none}
.mon-vital.is-alarm{background:var(--accent-soft)}
.mon-vital-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mon-vital-code{font-family:var(--mf);font-size:11px;letter-spacing:.18em;color:var(--ink)}
.mon-vital-lim{font-family:var(--mf);font-size:9.5px;color:var(--muted);text-align:right}
.mon-vital-num{
  font-family:var(--mf);font-size:44px;line-height:.9;letter-spacing:-.02em;
  color:var(--ink);text-align:right;
}
.mon-vital-of{font-size:18px;color:var(--muted);margin-left:5px}
.mon-vital-unit{font-size:18px;color:var(--muted);margin-left:4px}
/* An unmeasured number is a DASH, never a zero and never a hopeful 100. */
.mon-vital-none{font-size:34px;color:var(--faint)}
.mon-vital-foot{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--mf);font-size:9.5px;color:var(--muted);
}

.mon-spark{display:flex;align-items:flex-end;gap:3px;height:20px}
.mon-spark-bar{flex:1;min-width:2px;height:var(--h,4%);background:var(--accent2);opacity:.55}
.mon-spark-bar:last-child{opacity:1}

.mon-ticks{display:flex;gap:4px}
.mon-tick{flex:1;height:5px;background:var(--border-strong);border-radius:1px}
.mon-tick.is-live{background:var(--accent2)}
.mon-tick.is-quiet{background:var(--border-strong)}
.mon-tick.is-flat{background:var(--accent)}
.mon-tick.is-blind{background:var(--accent3)}

.mon-bar{height:5px;background:var(--border);border-radius:2px;overflow:hidden}
.mon-bar-fill{display:block;height:5px;background:var(--accent2)}

/* --- what is running right now, and the log ------------------------------- */
.mon-now,.mon-log{
  display:flex;align-items:center;gap:22px;margin-top:14px;padding:11px 17px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  overflow-x:auto;white-space:nowrap;
}
.mon-now{background:var(--accent2-soft);border-color:var(--accent2)}
.mon-now-label,.mon-log-label{
  flex:none;font-family:var(--mf);font-size:10px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
}
.mon-now-item,.mon-log-item{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mf);font-size:11.5px;color:var(--ink);
}
.mon-log-item{color:var(--muted)}
.mon-log-dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.mon-log-item.is-succeeded .mon-log-dot{background:var(--accent2)}
.mon-log-item.is-failed .mon-log-dot,
.mon-log-item.is-dead_letter .mon-log-dot{background:var(--accent)}
.mon-log-item.is-failed,.mon-log-item.is-dead_letter{color:var(--accent)}
.mon-log-item.is-running .mon-log-dot{background:var(--accent3)}

/* --- the index: the door from the alarm into the explanation ---------------- */
.mon-index{
  display:flex;align-items:stretch;gap:10px;margin-top:14px;padding:11px 17px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  overflow-x:auto;
}
.mon-index-label{
  flex:none;align-self:center;font-family:var(--mf);font-size:10px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
}
.mon-index-item{
  flex:none;display:flex;flex-direction:column;gap:2px;padding:6px 12px;
  border:1px solid var(--border);border-radius:7px;text-decoration:none;
  background:var(--bg);transition:border-color .14s ease,transform .14s ease;
}
.mon-index-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.mon-index-code{font-family:var(--mf);font-size:10px;letter-spacing:.16em;color:var(--accent)}
.mon-index-name{font-size:12.5px;color:var(--ink);white-space:nowrap}

/* === one organ, explained ==================================================
   Fabio's "Ficha do Orgao" design, rebuilt in D-005 tokens. Structure and metaphor are his; the
   palette, the type and the mono voice are ours (D-052).

   --organ IS A READING, NOT A DECORATION. The design paints every organ in one gold. Gold in D-005
   is --accent3, which the monitor already means "quiet" by -- so a working organ painted gold would
   be the screen contradicting itself one page over. Here the accent follows the STATE, so the
   colour of the page is one more way of saying how the organ is. */
.org-page{--organ:var(--accent2);max-width:1180px}
.org-page.is-quiet{--organ:var(--accent3)}
.org-page.is-flat{--organ:var(--accent)}
.org-page.is-blind{--organ:var(--muted)}

/* --- the bar: where you are, and how to walk to the next organ ------------- */
.org-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;border-bottom:1px solid var(--border);
}
.org-crumb{
  display:flex;align-items:center;gap:10px;font-family:var(--mf);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.org-crumb a{color:var(--muted);text-decoration:none}
.org-crumb a:hover{color:var(--accent)}
.org-crumb span:last-child{color:var(--ink)}
.org-sep{color:var(--border-strong)}
.org-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.org-step{
  padding:6px 11px;border:1px solid var(--border-strong);border-radius:4px;
  font-family:var(--mf);font-size:10.5px;color:var(--muted);text-decoration:none;white-space:nowrap;
}
.org-step:hover{border-color:var(--accent);color:var(--accent)}
.org-step.is-solid{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  letter-spacing:.12em;text-transform:uppercase;
}
.org-step.is-solid:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* --- the hero: the name, and the trace beside it --------------------------- */
.org-hero{
  display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,546px);
  border-bottom:1px solid var(--border);
}
.org-hero-say{padding:28px 26px 24px 0}
.org-kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.org-code{
  font-family:var(--mf);font-size:11px;letter-spacing:.28em;color:var(--organ);
  text-transform:uppercase;
}
.org-rule{width:26px;height:1px;background:var(--organ);opacity:.5;flex:none}
.org-cad{font-family:var(--mf);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.org-name{
  margin:12px 0 0;font-family:var(--hf);font-weight:500;
  font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.org-isa{margin:14px 0 0;max-width:44ch;font-size:15px;line-height:1.55;color:var(--muted)}

.org-trace{
  position:relative;overflow:hidden;border-left:1px solid var(--border);min-height:186px;
  background-color:var(--card2);
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:24px 24px;
}
.org-wave{position:absolute;left:0;top:34px;width:100%;height:118px}
.org-sweep{
  position:absolute;left:0;top:34px;height:118px;width:60px;
  background:linear-gradient(90deg,var(--card) 0%,transparent 100%);
  animation:orgsweep 6s linear infinite;
}
@keyframes orgsweep{from{transform:translateX(-14%)}to{transform:translateX(560%)}}
.org-trace-top{
  position:absolute;left:18px;top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.org-chan{font-family:var(--mf);font-size:11px;letter-spacing:.16em;color:var(--organ);text-transform:uppercase}
.org-win{font-family:var(--mf);font-size:10px;color:var(--muted)}
.org-trace-foot{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:9px}
.org-dot{width:8px;height:8px;border-radius:50%;background:var(--organ);flex:none}
.org-page.is-live .org-dot{animation:orgglow 2s ease-in-out infinite}
@keyframes orgglow{0%,100%{opacity:.55}50%{opacity:1}}
.org-reading{font-family:var(--mf);font-size:11.5px;color:var(--muted)}
.org-trace-tag{
  position:absolute;right:18px;bottom:14px;font-family:var(--mf);font-size:10px;
  letter-spacing:.14em;color:var(--faint);text-transform:uppercase;
}

/* --- the four facts -------------------------------------------------------- */
.org-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border)}
.org-fact{padding:15px 20px;border-right:1px solid var(--border);min-width:0}
.org-fact:last-child{border-right:none}
.org-fact.is-limit{background:color-mix(in srgb,var(--organ) 8%,transparent)}
.org-fact-k{
  display:block;font-family:var(--mf);font-size:9.5px;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;
}
.org-fact-v{display:block;margin-top:6px;font-size:14.5px;line-height:1.35;color:var(--ink)}
.org-fact-n{display:flex;align-items:flex-end;gap:6px;margin-top:2px;font-family:var(--mf);font-size:32px;line-height:1.05;color:var(--ink)}
.org-fact-u{font-size:11px;color:var(--muted);padding-bottom:6px}
.org-fact.is-limit .org-fact-v{color:var(--organ)}

/* --- the two columns ------------------------------------------------------- */
.org-body{display:grid;grid-template-columns:minmax(340px,1fr) minmax(0,412px);gap:0}
.org-say{padding:24px 30px 26px 0;display:flex;flex-direction:column;gap:22px;min-width:0}
.org-h{display:flex;align-items:center;gap:10px}
.org-h span:first-child{
  font-family:var(--mf);font-size:10px;letter-spacing:.24em;color:var(--organ);
  text-transform:uppercase;white-space:nowrap;
}
.org-hr{flex:1;height:1px;background:var(--border)}
.org-say p{margin:11px 0 0;font-size:16px;line-height:1.6;color:var(--ink)}
.org-loss{
  margin-top:auto;display:flex;align-items:center;gap:15px;padding:15px 17px;border-radius:6px;
  border:1px solid var(--accent);background:var(--accent-tint);
}
.org-loss-mark{
  flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--mf);font-size:15px;
  color:var(--accent);
}
.org-loss-k{font-family:var(--mf);font-size:9.5px;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
.org-loss-v{margin-top:5px;font-family:var(--hf);font-size:20px;line-height:1.35;color:var(--accent-deep)}

/* --- the circuit ----------------------------------------------------------- */
.org-circuit{
  border-left:1px solid var(--border);background:var(--card2);padding:22px 22px 26px;
  display:flex;flex-direction:column;min-width:0;
}
.org-circuit .org-h span:first-child{color:var(--muted)}
.org-side{margin-top:15px}
.org-side-k{font-family:var(--mf);font-size:9.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.org-pill{
  display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 13px;border-radius:5px;
  background:var(--white);border:1px solid var(--border);font-size:13.5px;color:var(--ink);
}
.org-pip{flex:none;width:6px;height:6px;border-radius:50%}
.org-pip.in{background:var(--accent2)}
.org-pip.out{background:var(--accent)}
.org-flow{width:100%;height:32px;margin:5px 0;flex:none}
.org-spark{animation:orgflow 2.2s linear infinite}
.org-spark.slow{animation-duration:2.8s}
@keyframes orgflow{to{stroke-dashoffset:-320}}

.org-node-wrap{display:flex;justify-content:center;flex:none}
.org-node{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.org-halo{position:absolute;inset:0;border-radius:50%;border:1px solid var(--organ);opacity:0}
.org-node.is-beating .org-halo{animation:orghalo 3s ease-out infinite}
@keyframes orghalo{0%{transform:scale(.72);opacity:.5}70%{opacity:0}100%{transform:scale(1.8);opacity:0}}
.org-orbit{position:absolute;inset:12px;border-radius:50%;border:1px dashed var(--border-strong)}
.org-node.is-beating .org-orbit{animation:orgspin 60s linear infinite}
@keyframes orgspin{to{transform:rotate(360deg)}}
.org-core{
  width:112px;height:112px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 10px;
  background:radial-gradient(circle at 38% 32%,
      color-mix(in srgb,var(--organ) 72%,var(--white)),
      var(--organ) 62%,
      color-mix(in srgb,var(--organ) 72%,var(--ink)));
  box-shadow:0 10px 30px color-mix(in srgb,var(--organ) 30%,transparent);
}
.org-node.is-beating .org-core{animation:orgbeat 2.6s ease-in-out infinite}
@keyframes orgbeat{0%{transform:scale(1)}8%{transform:scale(1.05)}18%{transform:scale(1.005)}26%{transform:scale(1.03)}40%,100%{transform:scale(1)}}
.org-core-name{font-family:var(--hf);font-size:18px;color:var(--white)}
.org-core-motion{
  margin-top:3px;font-family:var(--mf);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);opacity:.78;
}
.org-who{margin-top:auto;padding-top:18px;border-top:1px solid var(--border)}
.org-model{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.org-model-tag{
  flex:none;font-family:var(--mf);font-size:10.5px;padding:6px 10px;border-radius:4px;
  border:1px solid var(--border-strong);background:var(--white);color:var(--ink);
}
.org-model-say{font-size:12.5px;line-height:1.45;color:var(--muted);flex:1 1 160px;min-width:0}

/* --- acting, and its feedback ---------------------------------------------- */
.org-run{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:24px}
.org-run-note{font-size:12.5px;color:var(--muted)}
/* A click with no feedback reads as broken, and this Portal has already shipped that once. */
.org-run.htmx-request .btn{opacity:.55;pointer-events:none}
.org-run.htmx-request .org-run-note::after{content:" acionando…";color:var(--accent)}
.org-said{
  margin-top:22px;padding:12px 15px;border-radius:8px;font-size:14.5px;line-height:1.55;
  border:1px solid var(--accent2);background:var(--accent2-soft);color:var(--ink);
}
.org-said.is-bad{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.org-back{margin-top:26px;font-size:13.5px}
.org-back a{color:var(--muted)}
.org-back a:hover{color:var(--accent)}

@media (max-width: 1000px){
  .org-hero,.org-body{grid-template-columns:minmax(0,1fr)}
  .org-hero-say,.org-say{padding-right:0}
  .org-trace{border-left:none;border-top:1px solid var(--border)}
  .org-circuit{border-left:none;border-top:1px solid var(--border);margin-top:22px}
  .org-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-fact:nth-child(2n){border-right:none}
}
@media (max-width: 560px){
  .org-facts{grid-template-columns:minmax(0,1fr)}
  .org-fact{border-right:none;border-bottom:1px solid var(--border)}
}

@media (prefers-reduced-motion: reduce){
  /* Every state is carried by colour, bed and words as well, so nothing is lost. */
  .mon-sweep,.mon-asystole,.mon-alarm-dot{animation:none}
  .mon-sweep{opacity:.35}
  .mon-index-item:hover{transform:none}
  /* The organ page's motion is all decorative: every state is also a colour and a word. */
  .org-sweep,.org-spark,.org-halo,.org-orbit,.org-core,.org-dot{animation:none}
  .org-sweep{opacity:.3}
}

/* --- Quarentena: the window on the judge (03 Aug 2026) ----------------------
   The screen this replaces was a work queue with a release button, which D-039 had already
   abolished. Nothing here changes state, so nothing here is a control: no buttons, no forms, and
   the only affordance is reading.

   The colour grammar at the top of this sheet is obeyed literally, and on this surface it does
   real work: a HELD memory is contained-and-unverified, which is gold and NOT an error, while a
   memory the judge could not READ is a failure and is terracota. Painting those two the same is
   how a stalled judge would pass for a strict one. */
/* --- THE EXPLAINER: four answers, scannable, never a wall ------------------
   SHARED, not per-surface. It was born on the Quarentena screen and the Perfis screen
   needs the identical thing, so it is one block rather than two that drift. Every page
   that has to teach before it can report uses it.
   The first cut was four prose sections at full page width. Two faults, and the second is the one
   that matters. LAYOUT: the section rules sat flush against the previous paragraph, so every
   heading read as if it belonged to the text above it, and lines ran the full width of a wide
   screen (~150 characters, roughly twice the legible measure). CONTENT: the ask was a GOOD
   explanation, and I answered with a LONG one. A wall of text explains less than three tight
   lines, because nobody reads it.

   The grid is what makes it read as organised: four equal answers, each bounded, each headed by a
   question. Two columns on a wide screen, one on a narrow one. */
.explain{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin:0 0 26px;border:1px solid var(--border);border-radius:6px;overflow:hidden;
  background:var(--border);
}
.explain-card{
  position:relative;padding:20px 22px 21px;background:var(--card);
}
.explain-n{
  display:block;font-family:var(--mf);font-size:10px;letter-spacing:.22em;
  color:var(--accent);margin-bottom:9px;
}
/* The heading is a HEADING: bigger than its paragraph, in the display face. The old block inverted
   this -- a 10px mono kicker over 16px body -- which is what "título pequeno e texto gigante"
   named exactly. */
.explain-card h2{
  font-family:var(--hf);font-size:19px;font-weight:600;line-height:1.15;
  color:var(--ink);margin:0 0 8px;letter-spacing:-.2px;
}
.explain-card p{
  font-size:13.5px;line-height:1.62;color:var(--muted);margin:0;max-width:46ch;
}
.explain-card b{color:var(--ink);font-weight:600}

.qua-counts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px;
}
.qua-count{
  padding:16px 17px;border:1px solid var(--border);border-left-width:3px;border-radius:5px;
  background:var(--card);
}
/* THE EDGE CARRIES THE READING, not four different fills. The first cut tinted two tiles and left
   two plain, which made the pair look like a category rather than a colour scale -- an accident of
   implementation reading as meaning. */
.qua-count.is-held{border-left-color:var(--accent3)}
.qua-count.is-free{border-left-color:var(--accent2)}
.qua-count.is-kept{border-left-color:var(--accent3)}
.qua-count.is-blind{border-left-color:var(--accent)}
/* Zero unreadable memories is the healthy case and must not shout: the terracota edge stays (the
   category IS a failure category) but the alarm colour only appears when the count is real. The
   ``is-zero`` class is emitted by the template, not derived here -- CSS cannot read a number, and
   the `:has(:empty)` trick this replaced silently painted every healthy zero as an alarm. */
.qua-count.is-blind .qua-count-n{color:var(--accent)}
.qua-count.is-blind.is-zero .qua-count-n{color:var(--muted)}
.qua-count-n{
  display:block;font-family:var(--hf);font-size:30px;line-height:1.05;color:var(--ink);
}
.qua-count-k{
  display:block;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--ink);
}
.qua-count-say{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--muted)}

.qua-rate{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 26px;padding:11px 15px;border:1px solid var(--border);border-radius:5px;
  background:var(--card2);font-size:12.5px;color:var(--ink);
}
.qua-rate-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent2);flex:none;
  animation:qua-pulse 2.4s ease-in-out infinite;
}
.qua-rate-dot.is-flat{background:var(--accent);animation:none}
@keyframes qua-pulse{0%,100%{opacity:1}50%{opacity:.32}}
.qua-rate-when{margin-left:auto;font-family:var(--mf);font-size:10.5px;color:var(--muted)}

.qua-h{display:flex;align-items:center;gap:13px;margin:0 0 13px}
.qua-h span:first-child{
  font-family:var(--mf);font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.qua-hr{flex:1;height:1px;background:var(--border)}

.qua-empty{
  padding:17px;border:1px dashed var(--border-strong);border-radius:5px;
  font-size:13px;line-height:1.6;color:var(--muted);
}

.qua-card{padding:16px 18px;margin-bottom:12px;border-left:3px solid var(--border-strong)}
.qua-card.is-release{border-left-color:var(--accent2)}
.qua-card.is-hold{border-left-color:var(--accent3)}
.qua-card.is-revoke,.qua-card.is-unread{border-left-color:var(--accent)}

.qua-card-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.qua-verdict{font-family:var(--hf);font-size:16px;color:var(--ink)}
.is-release .qua-verdict{color:var(--accent2)}
.is-hold .qua-verdict{color:var(--accent3)}
.is-revoke .qua-verdict,.is-unread .qua-verdict{color:var(--accent)}
.qua-when{font-size:11.5px;color:var(--muted)}
.qua-mem{margin-left:auto;font-family:var(--mf);font-size:10.5px;color:var(--muted)}

.qua-meaning{margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* THE JUDGE'S PROSE, MARKED AS QUOTED. It is model output quoting content the model judged, and
   the memories most worth reading here are the ones held BECAUSE that content was hostile. The
   indent, the rule and the label exist so the boundary between "Helix says" and "the judge
   reports" is read without effort. */
.qua-reason{
  margin:11px 0 0;padding:10px 14px;border-left:2px solid var(--border-strong);
  background:var(--card2);border-radius:0 4px 4px 0;
  font-size:13px;line-height:1.62;color:var(--ink);
}
.qua-reason-k{
  display:block;margin-bottom:5px;font-family:var(--mf);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.qua-cut{color:var(--muted);font-style:italic}

.qua-findings{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.qua-findings-k{
  font-family:var(--mf);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.qua-finding{
  padding:3px 9px;border:1px solid var(--accent3);border-radius:3px;
  background:var(--accent3-soft);font-family:var(--mf);font-size:10.5px;color:var(--ink);
}

.qua-who{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--border);
}
.qua-who-leg{font-family:var(--mf);font-size:11px;color:var(--ink)}
.qua-who-k{
  display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.qua-who-arrow{color:var(--muted);font-size:12px}
/* A verdict nobody reviewed is one model agreeing with itself, and D-037 makes that the property
   worth naming. Terracota because it IS the weaker case, not because a hold is wrong. */
.qua-who-alone{
  margin-left:auto;padding:3px 9px;border:1px solid var(--accent);border-radius:3px;
  background:var(--accent-soft);font-size:10.5px;color:var(--accent-deep);
}

@media (max-width: 900px){
  .qua-counts{grid-template-columns:repeat(2,1fr)}
  .explain{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 560px){
  .qua-counts{grid-template-columns:1fr}
  .qua-mem{margin-left:0;width:100%}
}
@media (prefers-reduced-motion: reduce){
  .qua-rate-dot{animation:none}
}

/* --- the closing note: two short answers, not a paragraph nobody finishes --- */
.qua-after{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;
}
.qua-after-item{
  padding:17px 19px;border:1px solid var(--border);border-left:3px solid var(--accent2);
  border-radius:5px;background:var(--card);
}
.qua-after-item.is-open{border-left-color:var(--accent3)}
.qua-after-item h3{
  font-family:var(--hf);font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 7px;
}
.qua-after-item p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.qua-after-item b{color:var(--ink);font-weight:600}
@media (max-width: 900px){
  .qua-after{grid-template-columns:minmax(0,1fr)}
}

.alert-when{
  margin-top:5px;font-size:12px;line-height:1.5;color:var(--muted);font-style:italic;
}

/* --- the alert bar's one control: look again -------------------------------
   The bar shows an hourly snapshot, so without this the owner fixes something and then waits for
   the clock. It sits top-right of the bar, quiet until wanted, and it decides nothing. */
.alert-bar{position:relative}
.alert-recheck{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:9px}
.alert-recheck-btn{
  font-family:var(--bf);font-size:11.5px;padding:5px 12px;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:4px;background:var(--card);color:var(--ink);
}
.alert-recheck-btn:hover{border-color:var(--accent);color:var(--accent)}
.alert-recheck-btn[disabled]{opacity:.45;cursor:progress}
/* The busy word appears only while htmx has the request in flight, so "nothing happened" is never
   a state this control can be in (the Portal shipped exactly that once). */
.alert-recheck-busy{
  display:none;font-family:var(--mf);font-size:10.5px;letter-spacing:.14em;color:var(--muted);
}
.alert-recheck.htmx-request .alert-recheck-busy{display:inline}
@media (max-width: 700px){
  .alert-recheck{position:static;margin-top:10px}
}