/* ============================================================
   Technopolis Command Center — Design System
   Carries the public site's language (deploy/www/styles.css)
   into the internal tool: same fonts, same palette, structural
   hairlines instead of rounded cards.
   ============================================================ */

@font-face{
  font-family:'Hanken Grotesk';
  src:url('/static/fonts/hanken-grotesk-latin.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/static/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight:600 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* palette — identical to the public site */
  --ink:#0E1116;
  --ink-soft:#22272F;
  --blue:#0B5CFF;
  --blue-press:#0A4FDB;
  --blue-wash:#E9F0FF;
  --sky:#3E9BF2;
  --paper:#FFFFFF;
  --cloud:#F3F5F8;
  --cloud-2:#E9EDF3;
  --line:#E2E7EE;
  --line-2:#CDD5DF;
  --mute:#565D67;
  --mute-2:#8A919B;

  /* status — five semantic roles, one wash each */
  --ok:#0F7A4A;        --ok-wash:#E7F3EC;
  --warn:#8A5200;      --warn-wash:#FAF1E3;
  --crit:#A8231B;      --crit-wash:#FAEAE8;
  --info:#0B5CFF;      --info-wash:#E9F0FF;
  --review:#4B3FCF;    --review-wash:#EDECFC;

  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --disp:'Plus Jakarta Sans','Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --side-w:246px;
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cloud);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- shared micro-typography ---------- */
/* The mono eyebrow is the site's signature label. Used here for
   column hints, KPI labels and table heads — small and quiet. */
.meta,.kpi .label,.matrix th,.health,.badge,.pill,.brand-tab,.step .num,.source-path,.nav-group{
  font-family:var(--mono);
}

/* ============================================================
   Shell
   ============================================================ */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}

.side{
  background:var(--paper);
  border-right:1px solid var(--line);
  padding:26px 0 20px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.brand{display:block;padding:0 22px 26px}
.brand img{display:block;width:154px;height:auto}
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute-2);
  font-weight:400;
  margin-top:10px;
}

.nav{display:block;padding:0 12px}
.nav-group{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute-2);
  padding:20px 10px 8px;
}
.nav-group:first-child{padding-top:0}
.nav-item{
  display:block;
  position:relative;
  padding:8px 10px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  border-left:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.nav-item:hover{color:var(--blue)}
.nav-item.active{color:var(--blue);border-left-color:var(--blue)}

.side-foot{
  margin-top:auto;
  padding:18px 22px 0;
  margin-left:12px;margin-right:12px;
  border-top:1px solid var(--line);
  display:grid;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
  padding-left:10px;padding-right:10px;
}
.side-foot a:hover{color:var(--blue)}

.main{min-width:0}
.top{
  height:66px;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  position:sticky;
  top:0;
  z-index:2;
}
.crumb{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
.top-actions{display:flex;align-items:center;gap:20px}
.health{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.health::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ok);
}
.logout{font-size:14px;color:var(--mute)}
.logout:hover{color:var(--blue)}

.content{min-width:0;padding:40px 40px 72px;max-width:1480px}

/* ============================================================
   Page head
   ============================================================ */
h1{
  font-family:var(--disp);
  font-weight:800;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 10px;
}
.sub{color:var(--mute);margin:0 0 30px;max-width:74ch;font-size:17px;line-height:1.5}

/* Several modules place bare section headings between blocks, outside any
   panel. They need the display face too, not the browser default. */
h2{
  font-family:var(--disp);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.028em;
  margin:36px 0 16px;
}
h3{
  font-family:var(--disp);
  font-weight:600;
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.02em;
  margin:24px 0 10px;
}

/* ============================================================
   KPI band — one ruled row, not four floating cards
   ============================================================ */
.kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  background:var(--paper);
  border:1px solid var(--line);
  border-top:1px solid var(--ink);
  margin:0 0 32px;
}
.kpi{padding:20px 24px;border-left:1px solid var(--line)}
.kpi:first-child{border-left:0}
.kpi .label{
  display:block;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.kpi .value{
  font-family:var(--disp);
  font-weight:800;
  font-size:38px;
  line-height:1;
  letter-spacing:-.04em;
  margin-top:14px;
}

/* ============================================================
   Panels — flat surfaces, hairline frames
   ============================================================ */
.panel,.table,.marketing-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0;
}
.panel{min-width:0;padding:22px 24px}
.panel h2,.marketing-card h3{
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:-.025em;
}
.panel h2{
  font-size:20px;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.panel p{color:var(--mute);margin:0 0 14px;font-size:15px}
.panel > *:last-child{margin-bottom:0}

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(240px,280px);
  gap:24px;
  align-items:start;
}

/* Dashboard leads are a reading list, not a five-column table squeezed
   next to the process rail. Channel is a badge; contact and summary
   stay on their own lines so a phone number never wraps the box open. */
.lead-list{margin:0}
.lead-item{
  display:block;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.lead-item:last-child{border-bottom:0}
.lead-item:hover .lead-item-title{color:var(--blue)}
.lead-item-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.lead-channel{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
.lead-time{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--mute-2);
  white-space:nowrap;
}
.lead-item-title{
  font-family:var(--disp);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.02em;
  margin-top:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lead-item-summary{
  margin:4px 0 0;
  color:var(--mute);
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.panel-leads .empty{border:0;padding:12px 0}

/* ---------- pipeline steps ---------- */
.pipeline{display:block;border-top:1px solid var(--line)}
.step{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  padding:14px 2px;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step .num{font-size:12px;color:var(--blue);padding-top:2px}
.step strong{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.015em;
  line-height:1.25;
}
.step span{display:block;font-size:13px;color:var(--mute);margin-top:2px;line-height:1.4}

/* ============================================================
   Tables — the site's ruled index, not boxed rows
   ============================================================ */
.table{min-width:0;overflow:hidden;border-top:1px solid var(--ink)}
.row{
  min-width:0;
  display:grid;
  grid-template-columns:112px 140px 88px minmax(12rem,1fr) minmax(10rem,16rem);
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:background .15s;
}
.row-customer{
  grid-template-columns:minmax(8rem,1.1fr) minmax(9rem,12rem) minmax(12rem,1.4fr) minmax(8rem,1fr) 88px;
}
.value-contact,.value-nowrap{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--cloud)}
.meta{
  font-size:9.5px;
  color:var(--mute-2);
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:6px;
  font-weight:400;
}
.value{font-size:14.5px;min-width:0;overflow-wrap:break-word;line-height:1.4}
.summary{color:var(--ink-soft)}
.muted{color:var(--mute)}

/* ---------- matrix tables ---------- */
.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th,.matrix td{
  border-bottom:1px solid var(--line);
  padding:12px 10px;
  text-align:left;
  vertical-align:top;
  /* Registry tables reach ten columns and carry unbreakable paths and URLs.
     Without this the table's min-content width overflows the viewport. */
  overflow-wrap:break-word;
}
.matrix th{
  font-size:10px;
  color:var(--mute);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:400;
  border-bottom:1px solid var(--ink);
  padding-bottom:10px;
}
.matrix tr:last-child td{border-bottom:0}
.matrix tbody tr:hover{background:var(--cloud)}

/* Registry tables reach ten columns; the widest cannot fit any viewport.
   The table keeps its own layout and scrolls inside this container instead
   of pushing the page sideways. */
.table-scroll{
  overflow-x:auto;
  margin:0 0 8px;
  /* Keeps the scroll affordance visible on trackpads that hide bars. */
  scrollbar-width:thin;
}
.table-scroll .matrix{min-width:100%}

/* ============================================================
   Badges, pills, tabs — mono uppercase, hairline outline
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  background:var(--info-wash);
  color:var(--info);
}
.badge.new,.badge.partial,.badge.development{background:var(--warn-wash);color:var(--warn)}
.badge.done,.badge.verified,.badge.active{background:var(--ok-wash);color:var(--ok)}
.badge.failed_call,.badge.unverified,.badge.archived{background:var(--crit-wash);color:var(--crit)}
.badge.in_progress{background:var(--info-wash);color:var(--info)}
.badge.needs_review,.badge.experimental,.badge.unknown,.badge.unclear{background:var(--review-wash);color:var(--review)}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.pill,.brand-tab{
  border:1px solid var(--line-2);
  background:transparent;
  border-radius:999px;
  padding:7px 13px;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--mute);
  transition:border-color .15s,color .15s;
}
.pill:hover,.brand-tab:hover{border-color:var(--ink);color:var(--ink)}
.pill.active,.brand-tab.active{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.brand-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}

/* ============================================================
   Buttons
   ============================================================ */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.actions form{margin:0}
.button{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line-2);
  background:var(--paper);
  border-radius:6px;
  padding:10px 16px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  transition:border-color .15s,color .15s,background .15s;
}
.button:hover{border-color:var(--ink)}
.button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.button.primary:hover{background:var(--blue-press);border-color:var(--blue-press);color:#fff}

/* ============================================================
   Detail, code, notices, empty states
   ============================================================ */
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
pre{
  white-space:pre-wrap;
  background:var(--ink);
  color:var(--cloud);
  padding:20px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  border-radius:0;
  margin:0;
}
.source-path{font-size:11px;color:var(--mute);overflow-wrap:anywhere}

.empty{
  background:var(--paper);
  border:1px dashed var(--line-2);
  padding:32px;
  color:var(--mute);
  font-size:15px;
}
/* `.notice` carries two jobs: the page-level "Read-only" banner and the
   per-row detail block under each agent. Both are neutral statements, so it
   must not borrow the green that means verified elsewhere. */
.notice{
  border:1px solid var(--line);
  border-left:3px solid var(--mute-2);
  background:var(--paper);
  color:var(--ink-soft);
  padding:14px 18px;
  font-size:14px;
  margin:0 0 24px;
}
.notice p:last-child,.notice ul:last-child{margin-bottom:0}

.settings-list{display:grid;gap:0;background:var(--paper);border:1px solid var(--line);border-top:1px solid var(--ink)}
.setting{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:16px 22px;
  font-size:15px;
}
.setting:last-child{border-bottom:0}

.marketing-grid,.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:0 0 26px;
}
.marketing-card{padding:22px 24px}
.marketing-card h3{font-size:18px;margin:0 0 10px}
.marketing-card p{color:var(--mute);font-size:14.5px;margin:0;line-height:1.5}

/* ============================================================
   Login
   ============================================================ */
body.login-page{
  background:var(--cloud);
  display:grid;
  place-items:center;
  padding:24px;
  min-height:100vh;
}
.login{
  width:min(430px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:44px 42px 38px;
}
.login .brand{padding:0 0 30px}
.login .brand img{width:180px}
.login h1{font-size:32px;margin:0 0 10px}
.login p{color:var(--mute);line-height:1.55;margin:0 0 28px;font-size:16px}
.login label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--mute);
  margin:18px 0 8px;
}
.login input{
  width:100%;
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:13px 14px;
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
}
.login input:focus{outline:2px solid rgba(11,92,255,.2);border-color:var(--blue)}
.login button{
  width:100%;
  margin-top:26px;
  border:0;
  border-radius:6px;
  background:var(--blue);
  color:#fff;
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  padding:14px;
  cursor:pointer;
  transition:background .15s;
}
.login button:hover{background:var(--blue-press)}
.error{
  border:1px solid var(--line);
  border-left:3px solid var(--crit);
  background:var(--paper);
  color:var(--crit);
  padding:12px 14px;
  font-size:14px;
  margin:0 0 20px;
}
.back{
  display:inline-block;
  margin-top:24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
}
.back:hover{color:var(--blue)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1200px){
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .row,.row-customer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{padding:32px 28px 60px}
  .top{padding:0 28px}
}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}
  .brand{padding-bottom:18px}
  .nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-group{grid-column:1/-1;padding-top:14px}
  .side-foot{margin-top:18px;display:flex;gap:20px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .kpi:nth-child(-n+2){border-top:0}
  .kpi:nth-child(odd){border-left:0}
  .detail-grid,.marketing-grid,.portfolio-grid{grid-template-columns:minmax(0,1fr)}
  .row,.row-customer{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 18px}
  .top{padding:0 20px;height:60px}
  .content{padding:26px 18px 48px}
  h1{font-size:30px}
}

/* ---------- nesting: a framed element inside a panel would double the rule ---------- */
.panel .table,.panel .settings-list{border-left:0;border-right:0;border-bottom:0}
.panel .table .row,.panel .settings-list .setting{padding-left:0;padding-right:0}
.panel .matrix{margin-top:-2px}

@media (max-width:600px){
  /* The breadcrumb has no room next to the session actions and is the
     least useful of the three — the page headline says the same thing. */
  .crumb{display:none}
  .top{padding:0 16px;height:56px}
  .top-actions{gap:14px}
  .health{font-size:10px;letter-spacing:.08em}
  .content{padding:22px 16px 44px}
  h1{font-size:26px}
  .sub{font-size:16px;margin-bottom:24px}
  .kpi{padding:16px 18px}
  .kpi .value{font-size:30px}
  .nav{grid-template-columns:minmax(0,1fr)}
  .panel{padding:18px 18px}
  .side-foot{flex-wrap:wrap}
}

/* ---------- bare lists and inline code ---------- */
/* company_ops styles its lists inline; ai_ops emits a plain <ul> that would
   otherwise fall back to the browser's 40px indent. */
ul,ol{margin:10px 0;padding-left:20px}
li{margin:3px 0;line-height:1.5}
li::marker{color:var(--mute-2)}
code{
  font-family:var(--mono);
  font-size:.92em;
  background:var(--cloud-2);
  padding:1px 5px;
  border-radius:3px;
}

/* ============================================================
   Element-qualified overrides — must stay last
   ------------------------------------------------------------
   `.panel p` and `.marketing-card p` are (0,1,1) and would beat a bare
   `.meta` / `.source-path` (0,1,0), so a <p class="meta"> inherited body
   size. These restate the label typography at equal specificity, later in
   source order. Card section labels sit a little larger than table-cell
   labels — they carry more weight in the reading order.
   ============================================================ */
p.meta{
  font-size:10.5px;
  color:var(--mute);
  letter-spacing:.12em;
  margin-bottom:4px;
}
p.source-path{font-size:11px;color:var(--mute);line-height:1.45}