/* Nest Brain — Phase 8 visual layer.
   Scoped to #nest-brain-section. Contains NO keyframe animations: every moving
   thing is painted inside the canvas, so the browser never animates or
   repaints DOM elements for this section. */

#nest-brain-section .nest-brain-shell{
  background:
    radial-gradient(120% 90% at 70% 18%, rgba(16,185,129,.09), transparent 62%),
    linear-gradient(168deg,#f7fffc 0%,#ffffff 48%,#f3fdf8 100%);
  border:1px solid rgba(15,118,110,.13);
  box-shadow:0 22px 56px -46px rgba(15,23,42,.32);
}
html.dark #nest-brain-section .nest-brain-shell{
  background:
    radial-gradient(120% 95% at 72% 14%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(85% 65% at 10% 96%, rgba(13,148,136,.12), transparent 58%),
    linear-gradient(168deg,#05131c 0%,#071c27 54%,#040f18 100%);
  border-color:rgba(52,211,153,.18);
  box-shadow:0 28px 66px -48px rgba(0,0,0,.7);
}
#nest-brain-section .nest-brain-canvas{margin-top:.25rem;padding:0;}
#nest-brain-section .nest-brain-canvas::after{content:none;}
/* the old four-family legend describes node types this phase no longer shows,
   and its helper paragraph now duplicates the note rendered under the canvas */
#nest-brain-section .nest-brain-legend{display:none;}
#nest-brain-section .nest-brain-foot [data-i18n="brain-helper"]{display:none;}

/* ---------- stage ---------- */
.nest-neuro{position:relative;width:100%;}
.nest-neuro-canvas{display:block;width:100%;aspect-ratio:16/7;height:auto;}
.nest-neuro-layer{position:absolute;left:0;right:0;top:0;bottom:auto;aspect-ratio:16/7;z-index:2;pointer-events:none;}

/* ---------- cells: real buttons, so labels translate and stay focusable ---------- */
.nest-neuro-cell{
  position:absolute;transform:translate(-50%,-50%);
  width:42px;height:42px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;touch-action:manipulation;pointer-events:auto;z-index:3;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:opacity .25s ease;
}
.nest-neuro-cell.is-hub{width:54px;height:54px;}
/* the visible ring must clear the glow, or keyboard users lose their place */
.nest-neuro-cell:focus-visible{outline:2px solid #10b981;outline-offset:4px;border-radius:50%;}
html.dark .nest-neuro-cell:focus-visible{outline-color:#6ee7b7;}
.nest-neuro-cell:focus-visible .nest-neuro-label{opacity:1;color:#047857;}
html.dark .nest-neuro-cell:focus-visible .nest-neuro-label{color:#a7f3d0;}
.nest-neuro-label{
  position:absolute;white-space:nowrap;
  font-size:.74rem;font-weight:800;line-height:1;letter-spacing:.005em;
  color:#0f172a;transition:color .2s ease,opacity .2s ease;
}
html.dark .nest-neuro-label{color:#e8fff7;}
.nest-neuro-cell.is-hub .nest-neuro-label{font-size:.82rem;font-weight:900;}
.nest-neuro-cell.is-above .nest-neuro-label{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:.3rem;}
.nest-neuro-cell.is-below .nest-neuro-label{top:100%;left:50%;transform:translateX(-50%);margin-top:.3rem;}
.nest-neuro-cell.is-right .nest-neuro-label{left:100%;top:50%;transform:translateY(-50%);margin-left:.05rem;}
.nest-neuro-cell.is-left  .nest-neuro-label{right:100%;top:50%;transform:translateY(-50%);margin-right:.05rem;}
.nest-neuro-cell:hover .nest-neuro-label,
.nest-neuro-cell.is-active .nest-neuro-label{color:#047857;}
html.dark .nest-neuro-cell:hover .nest-neuro-label,
html.dark .nest-neuro-cell.is-active .nest-neuro-label{color:#a7f3d0;}
/* a subsystem the learner has not used yet — visibly present, visibly unused */
.nest-neuro-cell.is-dormant .nest-neuro-label{opacity:.5;font-weight:700;}
/* a directly-connected cell stays readable while a path is traced; only the
   unrelated ones recede. A single flat dim used to erase the whole map. */
.nest-neuro-cell.is-near .nest-neuro-label{opacity:.9;}
.nest-neuro-cell.is-faded{opacity:.3;}
.nest-neuro-cell.is-active .nest-neuro-label{
  text-shadow:0 0 14px rgba(16,185,129,.45);
}
.nest-neuro-cell.is-brain-focus{
  transition:opacity .25s ease;
}
.nest-neuro-cell.is-brain-focus .nest-neuro-label{
  text-shadow:0 0 15px rgba(16,185,129,.48);
}
.nest-neuro-cell.is-brain-focus .nest-neuro-label::after{
  content:'';display:block;width:4px;height:4px;margin:.32rem auto 0;border-radius:50%;
  background:currentColor;opacity:.75;
}
html.dark .nest-neuro-cell.is-brain-focus .nest-neuro-label{
  text-shadow:0 0 16px rgba(110,231,183,.55);
}

/* the hub is the one cell everything reads from — it should look like it */
.nest-neuro-cell.is-hub .nest-neuro-label{
  letter-spacing:.01em;
  text-shadow:0 0 16px rgba(16,185,129,.28);
}
html.dark .nest-neuro-cell.is-hub .nest-neuro-label{text-shadow:0 0 16px rgba(110,231,183,.4);}
/* the label is the visible affordance, so make it feel tappable */
.nest-neuro-label{cursor:pointer;}

/* ---------- tier key + status line ---------- */
.nest-neuro-foot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .9rem;
  margin-top:.5rem;
}
.nest-neuro-key{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#64748b;
}
html.dark .nest-neuro-key{color:#8fa79e;}
.nest-neuro-key i{width:7px;height:7px;border-radius:50%;background:#0d9488;flex:none;}
html.dark .nest-neuro-key i{background:#34d399;}
.nest-neuro-key.tier-core i{width:9px;height:9px;}
.nest-neuro-key.tier-applied i{opacity:.62;}
.nest-neuro-key.is-dormant i{background:transparent;border:1.5px solid #0d9488;opacity:.6;}
html.dark .nest-neuro-key.is-dormant i{border-color:#34d399;}
.nest-neuro-note{
  text-align:center;font-size:.68rem;margin:.45rem 0 0;color:#64748b;
}
html.dark .nest-neuro-note{color:#8fa79e;}

/* ---------- second-brain insight ---------- */
.nest-brain-insight{
  margin-top:.75rem;padding:.8rem .9rem;border:1px solid rgba(13,148,136,.16);
  border-radius:1rem;background:rgba(236,253,245,.58);
  box-shadow:0 12px 28px -22px rgba(15,118,110,.28);
}
.nest-brain-insight-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.nest-brain-insight-kicker{font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#0f766e;}
.nest-brain-insight-confidence{font-size:.62rem;font-weight:800;color:#64748b;white-space:nowrap;}
.nest-brain-insight-title{margin-top:.32rem;font-size:.82rem;font-weight:900;color:#0f172a;}
.nest-brain-insight-reason{margin-top:.2rem;font-size:.71rem;line-height:1.5;color:#475569;}
.nest-brain-insight-meta{margin-top:.35rem;font-size:.61rem;line-height:1.45;color:#64748b;}
html.dark .nest-brain-insight{background:rgba(4,31,28,.56);border-color:rgba(110,231,183,.18);box-shadow:0 16px 32px -24px rgba(0,0,0,.65);}
html.dark .nest-brain-insight-kicker{color:#6ee7b7;}
html.dark .nest-brain-insight-confidence{color:#93aaa2;}
html.dark .nest-brain-insight-title{color:#f8fafc;}
html.dark .nest-brain-insight-reason{color:#b7c9c2;}
html.dark .nest-brain-insight-meta{color:#8fa79e;}
@media (max-width:760px){
  .nest-brain-insight{padding:.72rem .78rem;}
  .nest-brain-insight-title{font-size:.76rem;}
  .nest-brain-insight-reason{font-size:.68rem;}
}

/* ---------- detail panel ---------- */
/* The close button was a plain sibling after the CTA, so it dropped onto its
   own row bottom-left and read as a stray glyph. Pin it to the corner. */
#nest-brain-section .nest-brain-detail{position:relative;}
#nest-brain-section .nest-brain-detail-close{
  position:absolute;top:.55rem;inset-inline-end:.6rem;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:.85rem;line-height:1;opacity:.55;
  transition:opacity .18s ease,background-color .18s ease;
}
#nest-brain-section .nest-brain-detail-close:hover{opacity:1;background:rgba(15,118,110,.10);}
html.dark #nest-brain-section .nest-brain-detail-close:hover{background:rgba(110,231,183,.12);}
#nest-brain-section .nest-brain-detail [data-brain-detail-cta]{margin-inline-end:2rem;}

/* who feeds this cell and who it feeds — the written half of the trace */
.nest-brain-detail-wire{
  font-size:.7rem;line-height:1.5;margin-top:.35rem;color:#64748b;
}
html.dark .nest-brain-detail-wire{color:#93aaa2;}
.nest-brain-detail-wire b{font-weight:800;color:#0f766e;}
html.dark .nest-brain-detail-wire b{color:#6ee7b7;}
.nest-brain-wire-sep{display:inline-block;padding:0 .4rem;opacity:.45;}

.nest-brain-detail-stat{
  font-size:.72rem;font-weight:800;margin-top:.3rem;color:#047857;
  font-variant-numeric:tabular-nums;
}
html.dark .nest-brain-detail-stat{color:#6ee7b7;}
html.dark #nest-brain-section .nest-brain-detail{background:rgba(6,20,28,.86);border-color:rgba(110,231,183,.2);}
html.dark #nest-brain-section .nest-brain-detail h3{color:#f8fafc;}
html.dark #nest-brain-section .nest-brain-detail p{color:#9db3ab;}
html.dark #nest-brain-section .nest-brain-detail-kind{color:#6ee7b7;}

@media (max-width:760px){
  .nest-neuro-canvas{aspect-ratio:3/4;}
  .nest-neuro-layer{aspect-ratio:3/4;}
  .nest-neuro-cell{width:36px;height:36px;}
  .nest-neuro-cell.is-hub{width:46px;height:46px;}
  .nest-neuro-label{font-size:.66rem;}
  .nest-neuro-cell.is-hub .nest-neuro-label{font-size:.72rem;}
  .nest-neuro-key{font-size:.56rem;}
}

/* ---------- active-cell ring ----------
   A selected node should feel like a deliberate focus change. The breathing
   ring is the only true CSS keyframe animation in this file — everything
   else moves inside the canvas — so it is paused under reduced motion. */
#nest-brain-section .nest-neuro-cell.is-active .nest-neuro-label{
  text-shadow:0 0 16px rgba(16,185,129,.55), 0 0 3px rgba(16,185,129,.18);
}
#nest-brain-section .nest-neuro-cell.is-active::after{
  content:'';
  position:absolute;left:50%;top:50%;width:calc(100% - 10px);height:calc(100% - 10px);
  transform:translate(-50%,-50%);
  border:1px solid rgba(16,185,129,.32);
  border-radius:50%;
  opacity:.9;
  pointer-events:none;
  animation:nest-brain-focus-breathe 2.4s ease-in-out infinite;
}
@keyframes nest-brain-focus-breathe{
  0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(16,185,129,0)}
  50%{opacity:.9;box-shadow:0 0 0 3px rgba(16,185,129,.08)}
}
html.dark #nest-brain-section .nest-neuro-cell.is-active::after{
  border-color:rgba(110,231,183,.38);
}
html.dark #nest-brain-section .nest-neuro-cell.is-active .nest-neuro-label{
  text-shadow:0 0 18px rgba(110,231,183,.62), 0 0 4px rgba(110,231,183,.16);
}

/* ---------- detail panel: enter / exit ----------
   ONE transition, declared once. JS toggles a single class
   (.is-detail-visible); base = hidden state, class present = shown state.
   The asymmetry between opening and closing is handled in JS (a shorter
   timeout on the way out), not by a second competing CSS duration — that
   split-source-of-truth was what made the previous version feel inconsistent. */
#nest-brain-section .nest-brain-detail{
  position:relative;
  box-sizing:border-box;
  min-width:0;
  opacity:0;
  transform:translateY(14px);
  will-change:opacity,transform;
  /* ENTER duration/curve — this is what applies when .is-detail-visible is
     ADDED, per how CSS resolves transitions (the "before" style is read from
     whichever rule was active first). Material's "standard decelerate" curve:
     starts soft, settles in — deliberately NOT front-loaded, so the opacity
     and the 14px rise both stay visible for the full 300ms instead of
     resolving in the first couple of frames. Kept in step with the canvas
     cross-fade (Scene.fadeDur, also 0.30s) so both layers land together. */
  transition:opacity .30s cubic-bezier(0,0,.2,1), transform .30s cubic-bezier(0,0,.2,1);
}
#nest-brain-section .nest-brain-detail > *{min-width:0;box-sizing:border-box;}
#nest-brain-section .nest-brain-detail.is-detail-visible{
  opacity:1;
  transform:translateY(0);
  /* EXIT duration/curve — applies when this class is REMOVED (leaving is
     shorter and quicker than arriving reads as natural, not as a mirror of
     the entrance). Material's "accelerate" curve. */
  transition:opacity .16s cubic-bezier(.4,0,1,1), transform .16s cubic-bezier(.4,0,1,1);
}
#nest-brain-section .nest-brain-insight{min-width:0;overflow:hidden;}
#nest-brain-section .nest-brain-insight-head,
#nest-brain-section .nest-brain-insight-title,
#nest-brain-section .nest-brain-insight-reason,
#nest-brain-section .nest-brain-insight-meta,
#nest-brain-section .nest-brain-detail-wire{
  min-width:0;overflow-wrap:anywhere;word-break:normal;
}
#nest-brain-section .nest-brain-detail [data-brain-detail-cta]{max-width:100%;white-space:normal;}

@media (prefers-reduced-motion: reduce){
  #nest-brain-section .nest-neuro-cell.is-active::after{animation:none;}
  #nest-brain-section .nest-brain-detail,
  #nest-brain-section .nest-brain-detail.is-detail-visible{will-change:auto;transition:none;transform:none;}
}

/* ---------- detail panel: mobile layout ----------
   Below 760px the two-column info block collapses to a single stacked card
   pinned to the section, with room reserved on the end side for the close
   button. The !important rules override the desktop grid/flex utility
   classes already present on these elements in the page markup. */
@media (max-width:760px){
  #nest-brain-section .nest-brain-detail{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto;
    align-items:start;
    gap:.75rem;
    width:calc(100% - 1.5rem) !important;
    margin:1rem .75rem 0 !important;
    padding:1rem 2.75rem 1.15rem 1rem !important;
    overflow:hidden;
  }
  #nest-brain-section .nest-brain-detail > *{
    display:block !important;
    grid-column:1 / -1;
    width:100% !important;
    max-width:100% !important;
    margin-inline:0 !important;
  }
  #nest-brain-section .nest-brain-detail > :not(:first-child){margin-top:.78rem !important;}
  #nest-brain-section .nest-brain-detail-kind{line-height:1.2;width:auto !important;}
  #nest-brain-section .nest-brain-detail h3{font-size:1rem;line-height:1.25;}
  #nest-brain-section .nest-brain-detail p{font-size:.76rem;line-height:1.55;}
  #nest-brain-section .nest-brain-detail [data-brain-detail-cta]{
    margin-inline:0 !important;
    margin-top:.95rem !important;
    justify-self:stretch;
    width:100%;
    min-height:46px;
    white-space:normal;
  }
  #nest-brain-section .nest-brain-insight{margin-top:0 !important;}
  #nest-brain-section .nest-brain-detail-close{
    position:absolute !important;
    top:.65rem;inset-inline-end:.65rem;
    width:28px !important;height:28px !important;
    margin:0 !important;
  }
}

/* ---------- disabled fallback ----------
   If the Brain's safety net ever has to disable it (canvas allocation
   failure, an unexpected exception), the section collapses cleanly instead
   of leaving a blank, oddly-spaced hole where the canvas used to be. */
#nest-brain-section .nest-neuro-failed{display:none;}