/* ============================================================
   NUTCH BRAND KIT  ·  nutch-brand.css
   Extracted from the soft canvas system (network-soft / v2 / org / spine).
   Drop into any page:  <link rel="stylesheet" href="nutch-brand.css">
   plus the two font families:
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">

   All classes are prefixed nb- so the kit can be linked into any
   existing page without collisions.

   Shape lock .... pills (999) for interactive, 20-34px for panels
   Accent lock ... one warm orange (#e0703a); steel teal is reserved
                   for the "between departments" data channel only
   Motion ........ springs, never linear; everything honors
                   prefers-reduced-motion
   ============================================================ */

:root{
  /* ---- ink ---- */
  --nb-ink:#211d18;
  --nb-ink-soft:#6f685e;
  --nb-ink-faint:#a89f92;

  /* ---- brand accent (the only accent) ---- */
  --nb-accent:#e0703a;
  --nb-accent-ink:#b9521f;
  --nb-accent-bg:#fdeee5;

  /* ---- semantic data channel (cross-department signals only) ---- */
  --nb-teal:#2f9fbe;

  /* ---- surfaces ---- */
  --nb-paper:#f4efe7;
  --nb-card:#fffdfa;
  --nb-glass:rgba(255,255,255,.58);
  --nb-hair:rgba(33,29,24,.07);

  /* ---- elevation (always warm-tinted, never black) ---- */
  --nb-soft:0 22px 50px -24px rgba(120,90,60,.28),0 4px 14px -6px rgba(120,90,60,.12);
  --nb-soft-lg:0 40px 90px -34px rgba(120,90,60,.42),0 10px 30px -12px rgba(120,90,60,.20);
  --nb-inh:inset 0 1px 1px rgba(255,255,255,.9);

  /* ---- type ---- */
  --nb-display:"Space Grotesk","Clash Display",system-ui,sans-serif;
  --nb-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* ---- motion ---- */
  --nb-spring:cubic-bezier(.32,.72,0,1);
  --nb-ease:cubic-bezier(.16,1,.3,1);

  /* ---- department tints (identity, not decoration) ---- */
  --nb-eng:#a07bd6;  --nb-mkt:#e58bb0;  --nb-dsg:#54b6ae;  --nb-fin:#5bb87f;
  --nb-leg:#9a948a;  --nb-sup:#9a948a;  --nb-ops:#6b9be0;  --nb-sal:#e0a23a;
}

/* ============ base ============ */
.nb-body{font-family:var(--nb-sans);color:var(--nb-ink);background:var(--nb-paper);
  -webkit-font-smoothing:antialiased;font-size:14px}

/* warm stage backdrop with the hub glow */
.nb-stage{background:
  radial-gradient(55% 46% at 50% 40%,rgba(224,112,58,.13),transparent 72%),
  radial-gradient(130% 110% at 50% 50%,#fefcf8 0%,#f5f0e8 58%,#ece4d8 100%)}

/* optional sky motif (pixel clouds, top corners, very faint) */
.nb-clouds{position:absolute;inset:0 0 auto 0;height:260px;pointer-events:none;opacity:.4;
  image-rendering:pixelated;
  background:
    radial-gradient(circle at 11% 26%,#fff 0 11px,transparent 12px),
    radial-gradient(circle at 16% 34%,#fff 0 8px,transparent 9px),
    radial-gradient(circle at 7% 33%,#fff 0 7px,transparent 8px),
    radial-gradient(circle at 86% 20%,#fff 0 12px,transparent 13px),
    radial-gradient(circle at 91% 28%,#fff 0 8px,transparent 9px),
    radial-gradient(circle at 80% 26%,#fff 0 7px,transparent 8px);
  -webkit-mask-image:linear-gradient(#000 0%,transparent 80%);
  mask-image:linear-gradient(#000 0%,transparent 80%)}

/* ============ type ============ */
.nb-display{font-family:var(--nb-display);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.nb-eyebrow{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--nb-accent-ink);background:var(--nb-accent-bg);
  padding:4px 9px;border-radius:999px}
.nb-label{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nb-ink-faint)}
.nb-muted{color:var(--nb-ink-soft)}
.nb-faint{color:var(--nb-ink-faint)}

/* ============ surfaces ============ */
/* floating glass island (nav, toolbars, composers) */
.nb-island{background:var(--nb-glass);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  box-shadow:var(--nb-soft),inset 0 1px 1px rgba(255,255,255,.8)}

/* double-bezel card: glass shell + warm core */
.nb-shell{padding:7px;border-radius:26px;background:var(--nb-glass);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--nb-soft)}
.nb-core-card{background:var(--nb-card);border-radius:20px;padding:16px;box-shadow:var(--nb-inh)}

/* large slide-over pane shell (panels, drawers) */
.nb-pane{padding:8px;border-radius:34px;background:var(--nb-glass);
  backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);
  border:1px solid rgba(255,255,255,.72);box-shadow:var(--nb-soft-lg)}
.nb-pane-inner{background:var(--nb-card);border-radius:26px;box-shadow:var(--nb-inh)}

@media (prefers-reduced-transparency: reduce){
  .nb-island,.nb-shell,.nb-pane{background:rgba(255,255,255,.96);
    backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============ the brand orb (CEO / hub mark) ============ */
.nb-orb{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;
  text-align:center;color:#fff;font-family:var(--nb-display);font-weight:600;font-size:16px;
  background:radial-gradient(circle at 38% 30%,#ffe9d2 0%,#f4a972 46%,#df6f39 100%);
  box-shadow:0 34px 64px -22px rgba(224,112,58,.55),0 0 0 9px rgba(255,255,255,.5),
    0 0 0 10px rgba(33,29,24,.04),inset 0 2px 12px rgba(255,255,255,.6),
    inset 0 -8px 18px rgba(150,60,20,.22);
  animation:nb-orbpulse 4s var(--nb-ease) infinite}
.nb-orb small{display:block;font-family:var(--nb-sans);font-size:8.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;opacity:.82;margin-top:3px}
@keyframes nb-orbpulse{
  0%,100%{box-shadow:0 34px 64px -22px rgba(224,112,58,.5),0 0 0 9px rgba(255,255,255,.5),0 0 0 10px rgba(33,29,24,.04),inset 0 2px 12px rgba(255,255,255,.6),inset 0 -8px 18px rgba(150,60,20,.22),0 0 0 0 rgba(224,112,58,0)}
  50%{box-shadow:0 40px 72px -22px rgba(224,112,58,.62),0 0 0 9px rgba(255,255,255,.55),0 0 0 10px rgba(33,29,24,.04),inset 0 2px 12px rgba(255,255,255,.65),inset 0 -8px 18px rgba(150,60,20,.22),0 0 0 22px rgba(224,112,58,.06)}}

/* small brand seed (logo block in nav, composer) */
.nb-seed{width:18px;height:18px;border-radius:6px;
  background:radial-gradient(circle at 35% 30%,#ffd9b8,#e0703a)}

/* ============ node pill (department style entity) ============ */
.nb-node{position:relative;display:inline-block;border:none;background:transparent;padding:0;
  cursor:pointer;transition:transform .55s var(--nb-spring);font-family:var(--nb-sans)}
.nb-node::before{content:"";position:absolute;inset:-5px;border-radius:999px;z-index:-1;
  background:rgba(255,255,255,.5);border:1px solid var(--nb-hair);box-shadow:var(--nb-soft)}
.nb-node .nb-node-pill{display:flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;
  border-radius:999px;background:linear-gradient(180deg,#ffffff,#fbf7f2);
  box-shadow:var(--nb-inh);white-space:nowrap}
.nb-node .nb-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;flex-shrink:0;box-shadow:var(--nb-inh),0 1px 3px rgba(120,90,60,.12);color:#3a342c}
.nb-node .nb-badge{font-size:10px;color:var(--nb-ink-faint);background:rgba(33,29,24,.05);
  border-radius:7px;padding:2px 6px;font-weight:600}
.nb-node:hover{transform:scale(1.06)}
.nb-node:active{transform:scale(.99)}

/* the signature "working" state: slow glow + label buzz */
.nb-working .nb-node-pill{box-shadow:var(--nb-inh),0 0 0 1px rgba(224,112,58,.35);
  animation:nb-glow 2.6s var(--nb-ease) infinite}
.nb-working .nb-buzz{animation:nb-buzz .2s steps(2,end) infinite;display:inline-block}
@keyframes nb-glow{
  0%,100%{box-shadow:var(--nb-inh),0 0 0 1px rgba(224,112,58,.30),0 0 0 0 rgba(224,112,58,0)}
  50%{box-shadow:var(--nb-inh),0 0 0 1px rgba(224,112,58,.45),0 0 30px 5px rgba(224,112,58,.36)}}
@keyframes nb-buzz{0%{transform:translate(0,0)}33%{transform:translate(.5px,-.4px)}
  66%{transform:translate(-.45px,.5px)}100%{transform:translate(.3px,.35px)}}
.nb-selected::before{border-color:rgba(224,112,58,.5);
  box-shadow:var(--nb-soft-lg),0 0 0 4px rgba(224,112,58,.12)}

/* ============ buttons ============ */
/* primary: ink pill with the button-in-button trailing icon */
.nb-btn{display:inline-flex;align-items:center;gap:11px;padding:9px 9px 9px 18px;
  border-radius:999px;border:none;cursor:pointer;font-family:var(--nb-sans);
  font-size:13px;font-weight:500;background:var(--nb-ink);color:#fff;
  transition:transform .5s var(--nb-spring)}
.nb-btn:active{transform:scale(.97)}
.nb-btn .nb-ic{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:13px;transition:transform .5s var(--nb-spring)}
.nb-btn:hover .nb-ic{transform:translate(2px,-2px) scale(1.1)}
.nb-btn.nb-ghost{background:transparent;color:var(--nb-ink);box-shadow:inset 0 0 0 1px var(--nb-hair)}
.nb-btn.nb-ghost .nb-ic{background:rgba(33,29,24,.06)}
.nb-btn.nb-ghost:hover{background:rgba(33,29,24,.03)}

/* round action (send, add) */
.nb-action{width:42px;height:42px;border-radius:999px;border:none;background:var(--nb-accent);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:16px;
  transition:transform .5s var(--nb-spring);box-shadow:0 8px 20px -8px rgba(224,112,58,.6)}
.nb-action:hover{transform:translate(1px,-1px) scale(1.07)}
.nb-action:active{transform:scale(.95)}

/* ============ status + chips ============ */
.nb-status{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(33,29,24,.05);color:var(--nb-ink-soft)}
.nb-status.nb-on{background:var(--nb-accent-bg);color:var(--nb-accent-ink)}
.nb-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
  color:var(--nb-ink);background:rgba(33,29,24,.04);padding:4px 10px;border-radius:999px}

/* ============ inputs + chat ============ */
.nb-input{border:none;background:rgba(33,29,24,.04);border-radius:999px;padding:12px 16px;
  font-family:var(--nb-sans);font-size:13.5px;color:var(--nb-ink);outline:none;
  transition:box-shadow .4s var(--nb-spring)}
.nb-input:focus{box-shadow:inset 0 0 0 1.5px rgba(224,112,58,.4)}
.nb-input::placeholder{color:var(--nb-ink-faint)}

.nb-msg{font-size:13.5px;line-height:1.55;padding:11px 15px;border-radius:18px;max-width:540px;
  word-wrap:break-word;animation:nb-msg-in .55s var(--nb-ease)}
.nb-msg.nb-them{background:#f4efe7;color:var(--nb-ink);border-bottom-left-radius:6px}
.nb-msg.nb-me{background:var(--nb-ink);color:#fff;border-bottom-right-radius:6px;margin-left:auto}
@keyframes nb-msg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ============ progress + steps ============ */
.nb-meter{height:7px;border-radius:999px;background:rgba(33,29,24,.07);overflow:hidden}
.nb-meter span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#f0a973,#e0703a);transition:width .9s var(--nb-ease)}

.nb-step{position:relative;padding:0 0 24px 32px}
.nb-step:last-child{padding-bottom:0}
.nb-step::before{content:"";position:absolute;left:9px;top:24px;bottom:0;width:2px;background:var(--nb-hair)}
.nb-step:last-child::before{display:none}
.nb-step .nb-node-dot{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(33,29,24,.18);background:#fff;display:grid;place-items:center;
  font-size:10px;color:#fff;font-weight:700}
.nb-step.nb-done .nb-node-dot{background:var(--nb-accent);border-color:var(--nb-accent)}
.nb-step.nb-doing .nb-node-dot{border-color:var(--nb-accent);
  box-shadow:0 0 0 4px rgba(224,112,58,.14);animation:nb-steppulse 2.6s var(--nb-ease) infinite}
@keyframes nb-steppulse{50%{box-shadow:0 0 0 7px rgba(224,112,58,.05)}}

/* ============ connection strokes (SVG class hooks) ============ */
.nb-wire{fill:none;stroke:rgba(120,105,90,.22);stroke-width:1.5;stroke-linecap:round;
  transition:stroke .4s ease}
.nb-wire.nb-live{stroke:rgba(224,112,58,.85);stroke-width:2.4;
  filter:drop-shadow(0 0 5px rgba(224,112,58,.5))}
.nb-wire-dot{fill:#ffbb8a;filter:drop-shadow(0 0 7px rgba(224,112,58,.95))}
.nb-xwire{fill:none;stroke:rgba(47,159,190,0);stroke-width:1.8;stroke-linecap:round;
  transition:stroke .25s linear}
.nb-xwire.nb-live{stroke:rgba(47,159,190,.82);filter:drop-shadow(0 0 6px rgba(60,180,210,.65))}
.nb-xwire-dot{fill:#7fd6ec;filter:drop-shadow(0 0 7px rgba(90,200,230,.95))}

/* ============ reveal (staggered pane entrance) ============ */
.nb-reveal{opacity:0;transform:translateY(22px);filter:blur(8px);
  transition:opacity .7s var(--nb-ease),transform .7s var(--nb-ease),filter .7s var(--nb-ease)}
.nb-in .nb-reveal{opacity:1;transform:none;filter:none}

/* ============ dept tint utilities ============ */
.nb-t-eng{background:#e6dcfb}.nb-t-mkt{background:#fbdce7}.nb-t-dsg{background:#d3eeec}
.nb-t-fin{background:#d8efdf}.nb-t-leg{background:#ece9e2}.nb-t-sup{background:#ece9e2}
.nb-t-ops{background:#dbe7fb}.nb-t-sal{background:#fbe7c9}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  .nb-orb,.nb-working .nb-node-pill,.nb-working .nb-buzz,
  .nb-step.nb-doing .nb-node-dot,.nb-msg{animation:none}
  .nb-reveal{transition:none}
}