/* =====================================================================
   EMOSE Backoffice — styles.css
   EMOSE Clarity design system: institutional red brand, warm mahogany
   neutrals, light-first with a full dark override via [data-theme="dark"].

   SOURCE: ported from docs/design/emose-backoffice-cockpit.html (the
   design mockup one level up from this folder). Tokens, shell, login wall
   and the pipeline/station pattern are reused byte-for-byte where the
   mockup already defined them; the fila/consola/blueprints-only rules
   below (table, filter chips, HITL cards, blueprint detail panel) are new
   but built exclusively from the same token set — no new colors were
   invented.

   OWNERSHIP / WHO USES WHAT (read this before editing):
     This file is the ONE shared stylesheet for the whole EMOSE FE app.
     - index.html   loads this BEFORE any screen script.
     - app.js       shell chrome: #loginWall, .shell/.rail/.topbar/.content
     - fila.js      queue table: .screen-head, .filter-bar, .case-table
     - consola.js   HITL cards: .hitl-grid, .hitl-card, .hitl-reason
     - blueprints.js the pipeline: .pipeline/.station/.connector (+ the
                     read-only ".is-defined" modifier added here)
     - caso.js (OTHER AGENT, via its own caso.css, NOT this file):
                     reuses the design tokens (section 1) and the shell
                     classes (section 5) from here, AND is expected to
                     reuse the SAME .pipeline/.station/.connector pattern
                     (section 8) to render a live case's progress — do
                     NOT rename or duplicate those classes in caso.css.
                     caso.css should only ADD case-only classes that don't
                     exist here: .case-header-card, .category-chip,
                     .info-request-card, .receipt*, .deliverable*,
                     .timeline*, .context-row*, .cockpit-grid, form
                     primitives (.field/.chip-group/.checkbox-group/
                     .input-suffix), etc.

   SECTIONS
     1. Design tokens (:root + [data-theme="dark"])
     2. Reset & base typography
     3. Shared primitives: .card, .pill, .btn, .icon-btn, spinner
     4. Login wall
     5. Shell: rail + topbar + content container
     6. Screen: Fila (queue table + filter chips)
     7. Screen: Consola (HITL cards)
     8. Screen: Blueprints — pipeline/station/connector (SHARED with caso.js)
     9. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens — extracted verbatim from the design source so colors
      match exactly. (The source file's internal comment called this
      "NORTIA CLARITY", an earlier codename; the product name is EMOSE
      Clarity — values are unchanged, only the label below is corrected.)
--------------------------------------------------------------------- */
:root{
  /* brand */
  --red-primary:#D42B2B;
  --red-deep:#A61C1C;
  --red-bright:#E23A32;
  --red-pale:#FDEAEA;
  --red-soft:#FAD9D9;
  --red-on:#FFFFFF;
  --hero-grad-start:#E23A32;
  --hero-grad-end:#C0201F;

  /* category accents */
  --cat-auto:#2F6DF0;
  --cat-health:#1F9D6B;
  --cat-home:#E0821E;
  --cat-life:#E5484D;
  --cat-travel:#0EA5A5;
  --cat-accident:#7A5AF0;
  --cat-savings:#C026A6;
  --cat-neutral:#6B4F4F;

  /* semantic */
  --success:#1F9D6B;   --success-surf:#E2F4EC;
  --warning:#B9721A;   --warning-surf:#FBEEDC;
  --error:#C8152E;     --error-surf:#FBE3E6;
  --info:#2F6DF0;      --info-surf:#E7EEFD;

  /* light surface system */
  --text:#1A0808;
  --text2:#6B4F4F;
  --text3:#9C8080;
  --bg:#FBF5F4;
  --surface:#FFFFFF;
  --surface-alt:#FBEEED;
  --sunken:#F3E7E7;
  --selected:#FAD9D9;
  --border:#F0CFCF;
  --border-strong:#E7B9B9;
  --hairline:#F1E1E1;

  /* structure */
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:11px;
  --radius-pill:999px;
  --rail-width:252px;

  --shadow-sm:0 1px 2px rgba(26,8,8,.07);
  --shadow-md:0 10px 28px -10px rgba(166,28,28,.20), 0 2px 8px rgba(26,8,8,.06);
  --shadow-lg:0 20px 46px -14px rgba(166,28,28,.26), 0 4px 12px rgba(26,8,8,.08);
}

[data-theme="dark"]{
  /* Warm mahogany dark — lifted well off near-black (owner: the old
     #160707/#241010 ramp read "too dark"). Clear step between page (--bg),
     cards (--surface) and recesses (--sunken); text2/3 nudged up for
     readability on the lighter surfaces. Single token source → the whole
     app (every screen + caso.css) lightens from just this block. */
  --text:#F9EEEE;
  --text2:#D0AAAA;
  --text3:#A07E7E;
  --bg:#211616;
  --surface:#2D1F1F;
  --surface-alt:#392727;
  --sunken:#281A1A;
  --selected:#4A2E2E;
  --border:#4C3030;
  --border-strong:#5E3D3D;
  --hairline:#3E2424;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 10px 28px -10px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 20px 46px -14px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------------
   2. Reset & base
--------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Spline Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* body never scrolls horizontally — wide content (the
                         case table) scrolls inside its own .table-scroll */
  transition:background .2s ease, color .2s ease;
}
svg{display:block;}
button{font:inherit;cursor:pointer;}
input{font:inherit;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

.i-stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.i-fill{fill:currentColor;stroke:none;}
.tabular{font-variant-numeric:tabular-nums;}

.title{font-size:20px;font-weight:700;letter-spacing:-0.01em;color:var(--text);margin:0;}
.subtitle-muted{font-size:13.5px;color:var(--text2);font-weight:600;margin:2px 0 0;}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin:0 0 10px;}

/* ---------------------------------------------------------------------
   3. Shared primitives
--------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;}

.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;}
.pill-warning{background:var(--warning-surf);color:var(--warning);}
.pill-success{background:var(--success-surf);color:var(--success);}
.pill-error{background:var(--error-surf);color:var(--error);}
.pill-info{background:var(--info-surf);color:var(--info);}
.pill-neutral{background:var(--sunken);color:var(--text2);}
.pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:14px;border-radius:999px;padding:12px 22px;border:1.5px solid transparent;cursor:pointer;transition:all .15s ease;}
.btn svg{width:16px;height:16px;}
.btn-primary{background:linear-gradient(135deg, var(--red-bright), var(--red-deep));color:#fff;box-shadow:0 6px 16px -6px rgba(166,28,28,.5);}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(166,28,28,.6);}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border);}
.btn-ghost:hover{background:var(--sunken);border-color:var(--border-strong);}
.btn-sm{padding:8px 15px;font-size:12.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none !important;filter:none !important;box-shadow:none;}

.icon-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text2);display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s,border-color .15s;}
.icon-btn:hover{background:var(--sunken);border-color:var(--border-strong);}
.icon-btn svg{width:18px;height:18px;}
.icon-btn .icon-moon{display:none;}
[data-theme="dark"] .icon-btn .icon-moon{display:block;}
[data-theme="dark"] .icon-btn .icon-sun{display:none;}
.notif-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red-primary);border:2px solid var(--surface);}

/* Generic loading / empty / error panel, used inside a .card by every
   screen via APP.ui.loading()/empty()/error() in app.js. */
.state-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 24px;text-align:center;color:var(--text2);}
.state-panel svg{width:34px;height:34px;color:var(--text3);}
.state-panel .state-title{font-size:15px;font-weight:700;color:var(--text);}
.state-panel .state-sub{font-size:13px;color:var(--text2);max-width:380px;}
.state-panel.is-error svg{color:var(--error);}
.state-panel.is-error .state-title{color:var(--error);}

.spinner{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--red-primary);animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------------------------------------------------------------
   4. Login wall
--------------------------------------------------------------------- */
.brand-logo{width:30px;height:30px;object-fit:contain}
body[data-auth="out"] .shell{display:none}
#loginWall{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#E23A32 0%,#A61C1C 100%);font-family:inherit}
body[data-auth="in"] #loginWall{display:none}
.login-card{background:#fff;border-radius:24px;padding:40px 36px;width:372px;max-width:90vw;box-shadow:0 40px 90px rgba(26,8,8,.4);text-align:center}
.login-card .lc-logo{width:80px;height:80px;object-fit:contain;margin-bottom:4px}
.login-title{font-size:22px;font-weight:700;color:#1A0808;margin:10px 0 2px;letter-spacing:-.3px}
.login-sub{font-size:13.5px;color:#6B4F4F;margin-bottom:24px}
.login-field{display:block;width:100%;box-sizing:border-box;padding:13px 15px;margin-bottom:12px;border:1px solid #F0CFCF;border-radius:13px;background:#FBF5F4;font-size:15px;color:#1A0808;outline:none}
.login-field:focus{border-color:#E7B9B9;background:#fff}
.login-hint{font-size:12px;color:#9C8080;margin:4px 0 20px}
.login-btn{width:100%;padding:14px;border:none;border-radius:13px;background:#D42B2B;color:#fff;font-size:15.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.login-btn:hover{background:#A61C1C}

/* ---------------------------------------------------------------------
   5. Shell: rail + topbar + content
--------------------------------------------------------------------- */
.shell{display:flex;min-height:100vh;}

.rail{
  width:var(--rail-width);flex:0 0 var(--rail-width);
  background:linear-gradient(180deg, var(--red-primary), var(--red-deep));
  color:#fff;
  display:flex;flex-direction:column;
  padding:22px 16px 18px;
  position:sticky;top:0;align-self:flex-start;height:100vh;
}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}

.rail-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-0.01em;}
.brand-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.06em;}

.rail-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:rgba(255,255,255,.78);font-weight:600;font-size:14.5px;transition:background .15s,color .15s;position:relative;}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav-item.is-active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.nav-icon{width:20px;height:20px;flex:0 0 20px;}
.nav-item span.nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-badge{flex:0 0 auto;background:#fff;color:var(--red-deep);font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;}

.rail-bottom{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);}
.tenant-switcher{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;text-align:left;}
.tenant-switcher:hover{background:rgba(255,255,255,.13);}
.tenant-switcher svg{width:16px;height:16px;flex:0 0 16px;opacity:.85;}
.tenant-switcher span.t-label{flex:1;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tenant-switcher .chev{width:14px;height:14px;flex:0 0 14px;opacity:.7;}

.rail-user{display:flex;align-items:center;gap:10px;padding:8px 6px;}
.user-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--red-deep);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.user-info{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.user-name{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-role{font-size:11.5px;color:rgba(255,255,255,.68);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.topbar{
  height:70px;flex:0 0 70px;
  display:flex;align-items:center;gap:18px;
  padding:0 32px;
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:20;
}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text3);font-weight:600;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;}
.breadcrumb .crumb-current{color:var(--text);font-weight:700;}
.breadcrumb svg{width:14px;height:14px;flex:0 0 14px;opacity:.6;}

.topbar-search{flex:1;max-width:380px;position:relative;}
.topbar-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text3);}
.topbar-search input{width:100%;padding:9px 14px 9px 38px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface-alt);color:var(--text);font-size:13.5px;}
.topbar-search input::placeholder{color:var(--text3);}
.topbar-search input:focus{outline:none;border-color:var(--red-primary);background:var(--surface);}

.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.topbar-avatar{width:38px;height:38px;border-radius:50%;background:var(--cat-neutral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 38px;}

.content{padding:26px 32px 56px;max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:22px;width:100%;min-width:0;}

/* #view is the router's mount point (see app.js). It gets its own flex
   column so every screen's top-level blocks (screen-head, filter-bar,
   card...) space consistently without each screen re-declaring gap. */
#view{display:flex;flex-direction:column;gap:22px;min-width:0;}

/* Generic screen header used by fila/consola/blueprints. */
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.screen-head .headings{display:flex;flex-direction:column;gap:2px;min-width:0;}

/* ---------------------------------------------------------------------
   6. Screen: Fila (case queue table + filter chips)
--------------------------------------------------------------------- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;}
.filter-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;}
.filter-chip:hover{border-color:var(--border-strong);background:var(--sunken);}
.filter-chip .f-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:currentColor;}
.filter-chip .f-count{font-variant-numeric:tabular-nums;opacity:.7;}
.filter-chip.is-active{background:linear-gradient(135deg, var(--red-bright), var(--red-deep));border-color:transparent;color:#fff;box-shadow:0 6px 16px -8px rgba(166,28,28,.55);}

.table-card{padding:0;overflow:hidden;}
.table-scroll{width:100%;overflow-x:auto;} /* keeps the body itself from ever scrolling horizontally */
.case-table{width:100%;min-width:760px;border-collapse:collapse;}
.case-table thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);padding:14px 20px;border-bottom:1px solid var(--hairline);background:var(--surface-alt);white-space:nowrap;}
.case-table th.col-premium{text-align:right;}
.case-table tbody td{padding:15px 20px;border-bottom:1px solid var(--hairline);font-size:14px;color:var(--text);vertical-align:middle;white-space:nowrap;}
.case-table tbody tr{cursor:pointer;transition:background .12s;}
.case-table tbody tr:hover{background:var(--surface-alt);}
.case-table tbody tr:last-child td{border-bottom:none;}
.case-table .col-code{font-weight:700;color:var(--red-deep);}
.case-table .col-premium{font-weight:700;text-align:right;}
.case-table .col-step{color:var(--text2);font-weight:600;font-size:13px;white-space:normal;}
.case-table .col-channel{color:var(--text2);font-size:13px;}
.case-table .row-arrow{width:32px;color:var(--text3);}

/* ---------------------------------------------------------------------
   7. Screen: Consola (HITL operator console)
--------------------------------------------------------------------- */
.hitl-grid{display:flex;flex-direction:column;gap:14px;}
.hitl-card{display:flex;flex-direction:column;gap:14px;transition:opacity .15s;}
.hitl-card .hc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.hitl-card .hc-id{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);font-size:15px;}
.hitl-card .hc-client{color:var(--text2);font-weight:600;font-size:13.5px;margin-top:2px;}
.hitl-reason{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--warning-surf);color:var(--warning);font-size:13px;font-weight:700;}
.hitl-reason svg{width:16px;height:16px;flex:0 0 16px;}
.hitl-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text2);font-weight:600;}
.hitl-meta b{color:var(--text);font-weight:700;}
.hitl-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.hitl-card.is-approving{opacity:.65;pointer-events:none;}
.hitl-error{font-size:12.5px;color:var(--error);font-weight:700;text-align:right;}

/* ---------------------------------------------------------------------
   8. Screen: Blueprints — pipeline / station / connector pattern
   SHARED with caso.js (case cockpit): caso.js reuses these exact classes
   to render a LIVE case's per-step progress via .is-done/.is-active/
   .is-pending/.is-locked. blueprints.js (this app) has no live progress
   to show, so it uses the ".is-defined" modifier added at the bottom of
   this section instead — every station "solid-colored" by its type, with
   no progress semantics. Do not rename anything above the "Blueprints-
   only additions" subsection.
--------------------------------------------------------------------- */
.pipeline-card{position:relative;overflow:hidden;padding-top:27px;}
.pipeline-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--hero-grad-start), var(--hero-grad-end));}
.pipeline-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
.pipeline-legend{display:flex;gap:16px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text2);}
.legend-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;}
.legend-dot.info{background:var(--info);}
.legend-dot.action{background:var(--red-primary);}
.legend-dot.decision{background:var(--warning);}
.legend-dot.deliverable{background:var(--success);}
.legend-dot.event{background:var(--cat-neutral);}

.pipeline{display:flex;flex-direction:column;gap:2px;}
.pipeline-row{display:flex;align-items:flex-start;flex-wrap:wrap;}
.row-continue{display:flex;align-items:center;gap:5px;color:var(--text3);padding:5px 0 9px 40px;}
.row-continue svg{width:13px;height:13px;}
.row-continue span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

.station{flex:0 1 84px;min-width:62px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5px 3px;position:relative;border-radius:16px;}
.station.is-active{background:var(--red-pale);padding-top:11px;padding-bottom:8px;box-shadow:var(--shadow-sm);}
[data-theme="dark"] .station.is-active{background:var(--selected);}

.connector{flex:0 1 16px;min-width:8px;height:3px;border-radius:2px;margin-top:20px;background:var(--border);}
.connector.is-done{background:linear-gradient(90deg, var(--red-bright), var(--red-primary));}
.connector.is-transition{background:linear-gradient(90deg, var(--red-bright), var(--border));}
.connector.is-pending{background:var(--border);}

.station-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:var(--sunken);color:var(--text3);border:1.5px dashed var(--border-strong);margin-bottom:8px;}
.station-icon svg{width:18px;height:18px;}
.station.is-pending .station-icon svg{opacity:.65;}
.station.is-done .station-icon,.station.is-active .station-icon{border:none;color:#fff;box-shadow:var(--shadow-sm);}

.station.type-info.is-done .station-icon,.station.type-info.is-active .station-icon{background:var(--info);}
.station.type-action.is-done .station-icon,.station.type-action.is-active .station-icon{background:var(--red-primary);}
.station.type-decision.is-done .station-icon,.station.type-decision.is-active .station-icon{background:var(--warning);}
.station.type-deliverable.is-done .station-icon,.station.type-deliverable.is-active .station-icon{background:var(--success);}
.station.type-event.is-done .station-icon,.station.type-event.is-active .station-icon{background:var(--cat-neutral);}

.station.is-active .station-icon{animation:pulseRing 2.2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(212,43,43,.5);}
  70%{box-shadow:0 0 0 11px rgba(212,43,43,0);}
  100%{box-shadow:0 0 0 0 rgba(212,43,43,0);}
}

.station-check{position:absolute;bottom:-1px;right:26%;transform:translateX(50%);width:16px;height:16px;border-radius:50%;background:var(--success);border:2px solid var(--surface);align-items:center;justify-content:center;color:#fff;display:none;}
.station.is-done .station-check{display:flex;}
.station-check svg{width:9px;height:9px;stroke-width:3.2;}

.station-lock{position:absolute;top:-2px;right:26%;transform:translateX(50%);width:16px;height:16px;border-radius:50%;background:var(--warning);border:2px solid var(--surface);align-items:center;justify-content:center;color:#fff;display:none;}
.station.is-locked .station-lock{display:flex;}
.station-lock svg{width:9px;height:9px;}

.station-step{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--text3);text-transform:uppercase;}
.station.is-active .station-step{color:var(--red-deep);}
.station-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.28;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.station.is-pending .station-name{color:var(--text2);}
.station-note{font-size:10px;font-weight:700;color:var(--text3);margin-top:3px;}
.station.is-active .station-note{color:var(--red-primary);}
.station.is-locked .station-note{color:var(--warning);}

/* ---- Blueprints-only additions (new). A blueprint has no per-case
   progress, so every station is shown "defined" = solid-colored by type,
   clickable to open the detail panel below the diagram. ---- */
.station.is-defined{cursor:pointer;}
.station.is-defined .station-icon{border:none;color:#fff;box-shadow:var(--shadow-sm);}
.station.type-info.is-defined .station-icon{background:var(--info);}
.station.type-action.is-defined .station-icon{background:var(--red-primary);}
.station.type-decision.is-defined .station-icon{background:var(--warning);}
.station.type-deliverable.is-defined .station-icon{background:var(--success);}
.station.type-event.is-defined .station-icon{background:var(--cat-neutral);}
.station.is-defined:hover{background:var(--sunken);}
.station.is-defined.is-selected{background:var(--red-pale);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .station.is-defined.is-selected{background:var(--selected);}
/* blueprints.js gives each station role="button" tabindex="0" (keyboard
   parity with the mouse click) — a branded focus ring instead of the
   browser default, only shown for keyboard focus (not mouse clicks). */
.station.is-defined:focus{outline:none;}
.station.is-defined:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
.connector.is-defined{background:linear-gradient(90deg, var(--border-strong), var(--border));}

.blueprint-detail{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;margin-top:16px;border-top:1px solid var(--hairline);}
.blueprint-detail .bd-icon{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;}
.blueprint-detail .bd-icon svg{width:20px;height:20px;}
.blueprint-detail .bd-icon.type-info{background:var(--info);}
.blueprint-detail .bd-icon.type-action{background:var(--red-primary);}
.blueprint-detail .bd-icon.type-decision{background:var(--warning);}
.blueprint-detail .bd-icon.type-deliverable{background:var(--success);}
.blueprint-detail .bd-icon.type-event{background:var(--cat-neutral);}
.blueprint-detail .bd-body{display:flex;flex-direction:column;gap:2px;}
.blueprint-detail .bd-step{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
.blueprint-detail .bd-name{font-size:16px;font-weight:700;color:var(--text);}
.blueprint-detail .bd-type{font-size:12.5px;font-weight:700;margin-left:auto;padding:5px 12px;border-radius:999px;}
.blueprint-detail .bd-type.type-info{background:var(--info-surf);color:var(--info);}
.blueprint-detail .bd-type.type-action{background:var(--red-pale);color:var(--red-deep);}
.blueprint-detail .bd-type.type-decision{background:var(--warning-surf);color:var(--warning);}
.blueprint-detail .bd-type.type-deliverable{background:var(--success-surf);color:var(--success);}
.blueprint-detail .bd-type.type-event{background:var(--sunken);color:var(--cat-neutral);}

/* ---------------------------------------------------------------------
   9. Responsive (shell + this app's screens only — case-cockpit-specific
      responsive rules, e.g. for .cockpit-grid, belong in caso.css)
--------------------------------------------------------------------- */
@media (max-width:1400px){
  :root{--rail-width:224px;}
  .content{padding:24px 24px 48px;}
}

@media (max-width:1300px){
  :root{--rail-width:78px;}
  .rail{padding:18px 12px;align-items:center;}
  .rail-brand{padding:4px 0 20px;justify-content:center;}
  .brand-text{display:none;}
  .nav-item{justify-content:center;padding:12px;}
  .nav-item span.nav-text,.nav-badge{display:none;}
  .rail-bottom{align-items:center;}
  .tenant-switcher{justify-content:center;padding:9px;}
  .tenant-switcher .t-label,.tenant-switcher .chev{display:none;}
  .rail-user{justify-content:center;padding:8px 0;}
  .user-info{display:none;}
  .topbar{padding:0 20px;}
  .breadcrumb span:not(.crumb-current):not(.crumb-first){display:none;}
  .breadcrumb svg{display:none;}
}

@media (max-width:760px){
  .topbar-search{display:none;}
  .screen-head{flex-direction:column;align-items:flex-start;}
  .hitl-actions{justify-content:flex-start;}
}

/* ---------------------------------------------------------------------
   9. Blueprints → live board (open cases per step). Additive to §8's
   pipeline/station/blueprint-detail — same tokens, no color invented.
--------------------------------------------------------------------- */
.station-icon{position:relative;}
.station-count{
  position:absolute;top:-7px;right:-9px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--red-primary);color:#fff;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 6px -1px rgba(166,28,28,.5);border:2px solid var(--surface);
}
.station.has-cases .station-icon{box-shadow:0 0 0 3px var(--selected);}
.pipeline-hint{margin-top:20px;color:var(--text3);font-size:13.5px;font-weight:600;text-align:center;}
.bd-summary{margin:14px 2px 0;color:var(--text2);font-size:14px;line-height:1.55;font-weight:500;}
.bd-cases{margin-top:18px;border-top:1px solid var(--hairline);padding-top:16px;}
.bd-cases .eyebrow{margin-bottom:12px;}
.bd-case{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface-alt);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:11px 14px;margin-bottom:8px;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.bd-case:last-child{margin-bottom:0;}
.bd-case:hover{background:var(--sunken);border-color:var(--border-strong);transform:translateX(2px);}
.bd-case:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;}
.bd-case-code{font-weight:800;color:var(--text);font-size:14px;letter-spacing:-.01em;flex:0 0 auto;}
.bd-case-client{color:var(--text2);font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bd-case-arrow{width:16px;height:16px;color:var(--text3);flex:0 0 16px;}
.bd-empty{color:var(--text3);font-size:13.5px;font-weight:600;padding:4px 2px;}