/* ============================================================
   False Alarm control panel
   Tokens taken from the Axon Spark design system
   (colors_and_type.css in the Spark design-system project).
   ============================================================ */
:root{
  --blue100:#6bc1ff38; --blue900:#165a8a; --blue1000:#0088e9;
  --red100:#ff8a8a33; --red900:#a01313; --red1000:#e00000;
  --amber100:#f3c06840; --amber900:#7a4d00; --amber1000:#ea9400;
  --green100:#8dd56a3d; --green900:#2e5e18; --green1000:#56db18;
  --purple100:#c1aaf240; --purple900:#5632a4;
  --gold100:#e6a81740; --gold900:#e6a817; --axonian-gold:#fec62e;

  --surface100:#0f0f0b;
  --surface700:#efeee8; --surface800:#f4f3ef; --surface900:#f9f9f7; --surface1000:#ffffff;

  --neutral50:#36393d0a; --neutral100:#36393d14; --neutral150:#36393d1f; --neutral200:#36393d40;
  --neutral500:#36393d73; --neutral600:#36393d99; --neutral700:#36393dcc;
  --neutral900:#36393d; --neutral1000:#1a1a1a;
  --neutral200d:#f2f2f240; --neutral700d:#f2f2f2d9; --neutral900d:#f2f2f2;

  --cFillStrong:var(--neutral900);
  --cFillWeak:var(--neutral100);
  --cStrokeStrong:var(--neutral600);
  --cStrokeWeak:var(--neutral200);
  --cStrokeWeaker:var(--neutral100);
  --cTextStrong:var(--neutral900);
  --cTextWeak:var(--neutral700);
  --cTextKey:var(--blue900);
  --cTextError:var(--red900);
  --cTextWarning:var(--amber900);
  --cTextSuccess:var(--green900);
  --cElevationOverlay:var(--surface1000);
  --cElevationRaised:var(--surface900);
  --cElevationBase:var(--surface800);

  --shadowRaised:0 2px 4px rgba(0,0,0,0.15);
  --shadowOverlay:0 7px 18px rgba(0,0,0,0.15);
  --borderRadiusS:2px; --borderRadius:4px; --borderRadiusRounded:999px;
  --spacerXXS:4px; --spacerXS:8px; --spacerS:12px; --spacer:16px;
  --spacerL:24px; --spacerXL:32px;

  --fontFamily:'IBM Plex Sans', system-ui, sans-serif;
  --fontFamilyMono:'IBM Plex Mono', ui-monospace, monospace;
  --fontWeightR:400; --fontWeightM:500; --fontWeightSB:600;

  --focusOutline:2px solid var(--blue900);
  --railW:220px;
  --drawerW:400px;
  --easing:cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box;}
html{scroll-padding-top:68px;} /* sticky topbar — keep hash targets visible underneath */
html,body{margin:0;padding:0;font-family:var(--fontFamily);font-weight:var(--fontWeightR);
  color:var(--cTextStrong);background:var(--cElevationBase);-webkit-font-smoothing:antialiased;}
:focus-visible{outline:var(--focusOutline);outline-offset:2px;}

h1{margin:0;font-weight:var(--fontWeightM);font-size:20px;line-height:26px;letter-spacing:-0.25px;}
h4{margin:0;font-weight:var(--fontWeightM);font-size:16px;line-height:22px;}
.text-body-2{font-size:13px;line-height:18px;}
.text-caption{font-size:13px;line-height:18px;}
.text-mono{font-family:var(--fontFamilyMono);}
.text-weak{color:var(--cTextWeak);}
.text-success{color:var(--cTextSuccess);}
.text-error{color:var(--cTextError);}
.text-warning{color:var(--cTextWarning);}
.eyebrow{font-size:13px;line-height:17px;font-weight:var(--fontWeightSB);letter-spacing:1px;
  text-transform:uppercase;color:var(--cTextWeak);}
a{color:var(--cTextKey);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacerXS);
  height:36px;padding:0 var(--spacer);border-radius:var(--borderRadius);
  border:1px solid transparent;cursor:pointer;font-family:var(--fontFamily);
  font-weight:var(--fontWeightSB);font-size:16px;line-height:22px;letter-spacing:-0.16px;
  background:none;transition:box-shadow 100ms var(--easing),background 100ms var(--easing);}
.btn:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,0.20);}
.btn--sm{height:26px;padding:0 var(--spacerS);font-size:13px;line-height:18px;letter-spacing:-0.13px;}
.btn--key{background:var(--blue900);color:#fff;}
.btn--filled{background:var(--cFillStrong);color:#fff;}
.btn--outline{border-color:var(--cStrokeStrong);color:var(--cTextStrong);}
.btn--ghost{color:var(--cTextStrong);}
.btn--ghost:hover{background:var(--cFillWeak);box-shadow:none;}
/* Ghost button sitting on the near-black top bar. */
.btn--dark{color:var(--neutral700d);}
.btn--dark:hover{background:#f2f2f214;color:var(--neutral900d);box-shadow:none;}
.btn--danger{background:var(--red900);color:#fff;}
.btn[disabled]{opacity:0.5;cursor:default;box-shadow:none;}
.btn__icon{width:16px;height:16px;flex-shrink:0;display:block;}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--railW) 1fr;min-height:100vh;min-width:0;
  /* Paint the rail column for the full document height, not just the
     viewport, so a long page does not end in a half-dark stripe. */
  background:linear-gradient(to right,var(--surface100) var(--railW),var(--cElevationBase) var(--railW));}
.rail{background:var(--surface100);padding:var(--spacer) 0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;min-width:0;}
.rail__brand{display:flex;align-items:center;gap:var(--spacerXS);padding:0 var(--spacer) 2px;
  min-width:0;}
.rail__mark{width:22px;height:22px;border-radius:var(--borderRadiusS);background:var(--axonian-gold);
  display:flex;align-items:center;justify-content:center;color:var(--surface100);
  font-weight:var(--fontWeightSB);font-size:13px;flex:0 0 auto;}
.rail__title{color:var(--neutral900d);font-weight:var(--fontWeightSB);font-size:13px;line-height:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail__sub{color:var(--neutral200d);font-size:13px;line-height:18px;padding:0 var(--spacer);
  margin-bottom:var(--spacerL);}
.rail__nav{display:flex;flex-direction:column;}
.rail__item{display:flex;align-items:center;padding:10px var(--spacer);color:var(--neutral700d);
  font-size:13px;line-height:18px;border-left:3px solid transparent;text-decoration:none;
  white-space:nowrap;}
.rail__item:hover{background:#f2f2f20a;color:var(--neutral900d);}
.rail__item--active{color:var(--neutral900d);font-weight:var(--fontWeightM);
  border-left-color:var(--axonian-gold);background:#f2f2f214;}
.rail__foot{margin-top:auto;padding:var(--spacer);border-top:1px solid #f2f2f21f;
  display:flex;flex-direction:column;gap:var(--spacerXS);}
.rail__stat{display:flex;align-items:baseline;justify-content:space-between;}
.rail__statlabel{color:var(--neutral200d);font-size:13px;}
.rail__statvalue{color:var(--neutral900d);font-size:13px;font-weight:var(--fontWeightSB);
  font-family:var(--fontFamilyMono);}
.rail__badges{display:flex;gap:var(--spacerXS);margin-top:var(--spacerXS);flex-wrap:wrap;}
.rail__live{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;
  border-radius:var(--borderRadiusRounded);font-size:13px;font-weight:var(--fontWeightSB);}
.rail__live[data-state="live"]{background:var(--green100);color:var(--green900);}
.rail__live[data-state="connecting"]{background:var(--amber100);color:var(--amber900);}
.rail__live[data-state="down"]{background:var(--red100);color:var(--red900);}

/* The drawer is fixed, so the main column is padded to make room for it.
   Content shrinks instead of being covered. */
.main{display:flex;flex-direction:column;min-width:0;
  transition:padding-right 200ms var(--easing);}
body.drawer-open .main{padding-right:min(var(--drawerW),100vw);}

.topbar{background:var(--surface100);padding:var(--spacer) var(--spacerL);display:flex;
  align-items:center;justify-content:space-between;gap:var(--spacer);flex-wrap:wrap;
  position:sticky;top:0;z-index:20;}
.topbar__left{display:flex;align-items:center;gap:var(--spacer);min-width:0;flex-wrap:wrap;}
.topbar__field{display:inline-flex;align-items:center;gap:var(--spacerXS);min-width:0;
  max-width:100%;padding:4px var(--spacerS);border:1px solid #f2f2f240;
  border-radius:var(--borderRadius);color:var(--neutral900d);font-size:13px;line-height:18px;}
.topbar__field .lbl{color:var(--neutral200d);flex:0 0 auto;}
.bare-select{background:transparent;border:none;color:var(--neutral900d);
  font-family:var(--fontFamily);font-size:13px;font-weight:var(--fontWeightSB);
  cursor:pointer;padding:0;min-width:0;max-width:220px;}
.bare-select option{color:var(--cTextStrong);background:var(--surface1000);}
.topbar__right{display:flex;align-items:center;gap:var(--spacerXS);flex-wrap:wrap;}
.topbar__sep{width:1px;height:24px;background:#f2f2f240;margin:0 var(--spacerXS);flex:0 0 auto;}

.content{padding:var(--spacerL);display:flex;flex-direction:column;gap:var(--spacerXL);
  min-width:0;}
.section__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--spacer);margin-bottom:var(--spacerS);flex-wrap:wrap;}
.section__head .text-caption{display:inline-flex;align-items:center;flex-wrap:wrap;
  gap:var(--spacerXS);min-width:0;}

/* ---------- device tiles ---------- */
/* min() keeps a single column from overflowing when the viewport is narrower
   than the preferred tile width. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:var(--spacer);}
.tile{background:var(--cElevationOverlay);border:1px solid var(--cStrokeWeak);
  border-radius:var(--borderRadius);box-shadow:var(--shadowRaised);overflow:hidden;
  display:flex;flex-direction:column;min-width:0;}
.tile__body{padding:var(--spacer);flex:1;min-width:0;}
.tile__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacerS);
  min-width:0;}
.tile__row > div{min-width:0;}
.tile__name{font-weight:var(--fontWeightM);font-size:16px;line-height:22px;
  overflow:hidden;text-overflow:ellipsis;}
.tile__loc{color:var(--cTextWeak);font-size:13px;line-height:18px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;}
.tile__state{display:flex;align-items:center;gap:var(--spacerXS);margin-top:var(--spacer);
  min-width:0;}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.dot--locked{background:var(--neutral600);}
.dot--unlocked{background:var(--green1000);}
.dot--acting{background:var(--amber1000);animation:pulse 1s ease-in-out infinite;}
.dot--offline{background:var(--red1000);}
.dot--lockdown{background:var(--red900);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.state{font-weight:var(--fontWeightSB);font-size:20px;line-height:26px;letter-spacing:-0.25px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;}
.tile__ids{display:flex;flex-direction:column;gap:var(--spacerXXS);margin-top:var(--spacerS);}
.tile__id{display:flex;align-items:center;gap:var(--spacerXS);
  min-width:0;}
.tile__idlabel{color:var(--cTextWeak);font-size:11px;line-height:16px;
  text-transform:uppercase;letter-spacing:0.4px;flex:0 0 auto;}
.tile__idvalue{font-family:var(--fontFamilyMono);font-size:12px;line-height:16px;
  color:var(--cTextWeak);min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile__foot{border-top:1px solid var(--cStrokeWeaker);padding:var(--spacerXS) var(--spacer);
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacerXS);
  background:var(--cElevationRaised);flex-wrap:nowrap;}
.tile__last{color:var(--cTextWeak);font-size:13px;line-height:18px;
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile__menu{width:auto;min-width:7.5rem;max-width:40%;flex:0 0 auto;height:26px;
  font-size:13px;padding-right:var(--spacerL);}

.pill{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;
  border-radius:var(--borderRadiusRounded);font-size:13px;line-height:18px;
  font-weight:var(--fontWeightSB);white-space:nowrap;flex:0 0 auto;}
.pill--ok{background:var(--green100);color:var(--green900);}
.pill--warn{background:var(--amber100);color:var(--amber900);}
.pill--err{background:var(--red100);color:var(--red900);}
.pill--info{background:var(--blue100);color:var(--blue900);}
.pill--neutral{background:var(--cFillWeak);color:var(--cTextWeak);}
.pill--purple{background:var(--purple100);color:var(--purple900);}

/* ---------- cards and forms ---------- */
.card{background:var(--cElevationOverlay);border:1px solid var(--cStrokeWeak);
  border-radius:var(--borderRadius);box-shadow:var(--shadowRaised);overflow:hidden;}
.card__head{padding:var(--spacerS) var(--spacer);border-bottom:1px solid var(--cStrokeWeaker);
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacerXS);}
.card__body{padding:var(--spacer);}
.field{margin-bottom:var(--spacer);}
.field:last-child{margin-bottom:0;}
.field__label{display:block;font-weight:var(--fontWeightSB);font-size:13px;line-height:17px;
  margin-bottom:var(--spacerXXS);}
.field__hint{color:var(--cTextWeak);font-size:13px;line-height:18px;margin-top:var(--spacerXXS);}
.select,.input{width:100%;height:36px;padding:0 var(--spacerS);
  border:1px solid var(--cStrokeStrong);border-radius:var(--borderRadius);
  background:var(--cElevationOverlay);color:var(--cTextStrong);
  font-family:var(--fontFamily);font-size:16px;line-height:22px;}
.input--sm,.select--sm{height:30px;font-size:13px;}
.select{appearance:none;-webkit-appearance:none;padding-right:var(--spacerXL);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2336393d' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right var(--spacerS) center;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacerS);
  padding:var(--spacerXS) 0;border-bottom:1px solid var(--cStrokeWeaker);}
.toggle-row:last-of-type{border-bottom:none;}
.switch{width:36px;height:20px;border-radius:var(--borderRadiusRounded);position:relative;
  flex:0 0 auto;border:none;cursor:pointer;padding:0;background:var(--neutral200);
  transition:background 100ms var(--easing);}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:left 100ms var(--easing);}
.switch[aria-checked="true"]{background:var(--blue900);}
.switch[aria-checked="true"]::after{left:18px;}
.divider{height:1px;background:var(--cStrokeWeaker);margin:var(--spacer) 0;}
.rail-actions{display:flex;gap:var(--spacerXS);margin-top:var(--spacer);}
.form-note{margin-top:var(--spacerXS);font-size:13px;line-height:18px;}
.form-note:empty{display:none;margin:0;}
.form-note[data-kind="err"]{color:var(--cTextError);}
.form-note[data-kind="ok"]{color:var(--cTextSuccess);}
.result{margin:var(--spacer) 0 0;padding:var(--spacerXS) var(--spacerS);
  background:var(--surface700);border-radius:var(--borderRadius);
  font-family:var(--fontFamilyMono);font-size:12px;line-height:17px;
  white-space:pre-wrap;word-break:break-all;max-height:260px;overflow:auto;}

/* ---------- drawer ---------- */
.drawer{position:fixed;top:0;right:0;width:min(var(--drawerW),100vw);height:100vh;
  max-width:100%;background:var(--cElevationBase);border-left:1px solid var(--cStrokeWeak);
  box-shadow:var(--shadowOverlay);z-index:50;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 200ms var(--easing);}
body.drawer-open .drawer{transform:translateX(0);}
.drawer__head{padding:var(--spacer) var(--spacer) var(--spacerS);
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacerXS);
  border-bottom:1px solid var(--cStrokeWeak);background:var(--cElevationOverlay);}
.drawer__body{padding:var(--spacer);overflow:auto;flex:1;min-width:0;}
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,15,11,0.45);
  z-index:45;border:0;padding:0;cursor:pointer;}
.drawer-backdrop[hidden]{display:none;}

/* ---------- filters ---------- */
.filters{display:flex;align-items:flex-end;gap:var(--spacerS);flex-wrap:wrap;
  margin-bottom:var(--spacerS);}
.filter{display:flex;flex-direction:column;gap:2px;min-width:0;}
.filter__label{font-size:13px;line-height:17px;font-weight:var(--fontWeightSB);
  color:var(--cTextWeak);}
.filter .select{width:auto;min-width:min(150px,100%);max-width:100%;}
.filter--check{flex-direction:row;align-items:center;gap:6px;height:30px;
  font-size:13px;cursor:pointer;}
.filter--check input{width:15px;height:15px;accent-color:var(--blue900);cursor:pointer;}
.filters .btn{margin-left:auto;}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
table{width:100%;border-collapse:collapse;background:var(--cElevationOverlay);
  table-layout:fixed;}
thead th{text-align:left;padding:var(--spacerXS) 10px;font-weight:var(--fontWeightSB);
  font-size:13px;line-height:17px;color:var(--cTextWeak);
  border-bottom:1px solid var(--cStrokeWeak);white-space:nowrap;}
thead th.sorted{color:var(--cTextStrong);box-shadow:inset 0 -2px 0 var(--axonian-gold);}
tbody td{padding:9px 10px;border-bottom:1px solid var(--cStrokeWeaker);
  font-size:13px;line-height:18px;vertical-align:middle;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
td.mono,code{font-family:var(--fontFamilyMono);color:var(--cTextWeak);}

/* Cells holding a badge must not clip: text-overflow would paint a stray
   ellipsis after the pill even though the text itself fits. */
td.cell-badge{overflow:visible;text-overflow:clip;}

.dir{display:inline-flex;align-items:center;justify-content:center;min-width:36px;
  padding:1px 6px;border-radius:var(--borderRadiusS);font-size:13px;
  font-weight:var(--fontWeightSB);}
.dir--in{background:var(--blue100);color:var(--blue900);}
.dir--out{background:var(--purple100);color:var(--purple900);}
.empty{padding:var(--spacerL);text-align:center;color:var(--cTextWeak);font-size:13px;}
.kv{display:flex;gap:var(--spacerXS);align-items:baseline;flex-wrap:wrap;min-width:0;}
.kv code{display:inline-block;max-width:100%;overflow-x:auto;white-space:nowrap;
  word-break:normal;vertical-align:bottom;}
.contract__creds{display:flex;flex-direction:column;gap:var(--spacerS);min-width:0;flex:1;}

/* integration credentials (runtime, not part of the vendor contract) */
.creds{display:flex;flex-direction:column;gap:var(--spacerS);}
.cred{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--spacerXS) var(--spacerS);
  align-items:start;}
.cred__label{font-size:13px;line-height:18px;font-weight:var(--fontWeightSB);color:var(--cTextWeak);
  padding-top:7px;white-space:nowrap;}
.cred__field{position:relative;min-width:0;width:100%;}
.cred__value{display:block;width:100%;min-width:0;max-height:72px;overflow-y:auto;overflow-x:hidden;
  padding:7px 60px 7px 10px;margin:0;background:var(--cElevationRaised);
  border:1px solid var(--cStrokeWeaker);border-radius:var(--borderRadius);
  font-family:var(--fontFamilyMono);font-size:12px;line-height:17px;
  color:var(--cTextStrong);white-space:pre-wrap;word-break:break-all;}
.cred__value--secret[data-revealed="false"]{letter-spacing:0.08em;color:var(--cTextWeak);}
.cred__actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;
  gap:0;padding:0 4px;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  padding:0;border:none;border-radius:var(--borderRadiusS);cursor:pointer;
  background:transparent;color:var(--cTextWeak);transition:background 100ms var(--easing),color 100ms var(--easing);}
.icon-btn:hover{background:var(--neutral100);color:var(--cTextStrong);}
.icon-btn--success{color:var(--cTextSuccess);}
.icon-btn--success:hover{color:var(--cTextSuccess);background:var(--green100);}
.icon-btn__svg{width:14px;height:14px;display:block;}
.rail__item--optional[hidden]{display:none;}

.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacerS);
  margin:0 var(--spacerL) var(--spacerS);padding:var(--spacerXS) var(--spacerS);
  background:var(--blue100);color:var(--blue900);
  border-radius:var(--borderRadius);font-size:13px;line-height:18px;}
.banner[hidden]{display:none;}
.banner__text a{color:inherit;font-weight:var(--fontWeightSB);}

.guide-panel[hidden]{display:none;}
.guide-panel .section__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--spacerXS) var(--spacer);}
.guide-panel .section__head .btn{margin-left:auto;}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--spacer);}
.guide-card{background:var(--cElevationOverlay);border:1px solid var(--cStrokeWeaker);
  border-radius:var(--borderRadius);padding:var(--spacer);box-shadow:var(--shadowRaised);}
.guide-card__title{display:flex;align-items:baseline;gap:var(--spacerXS);
  font-size:16px;line-height:22px;font-weight:var(--fontWeightSB);margin-bottom:var(--spacerXS);}
.guide-card__step{font-size:13px;line-height:18px;font-weight:var(--fontWeightSB);
  color:var(--cTextWeak);flex:none;}
.guide__text{font-size:13px;line-height:18px;color:var(--cTextWeak);margin:0;}
.guide__text code{font-family:var(--fontFamilyMono);font-size:12px;}
.guide-card__actions{margin-top:var(--spacerS);display:flex;gap:var(--spacerXS);flex-wrap:wrap;}
.cred__hint{margin:0;padding:var(--spacerXS) var(--spacerS);font-size:13px;line-height:18px;
  color:var(--cTextWeak);background:var(--cElevationRaised);border:1px solid var(--cStrokeWeaker);
  border-radius:var(--borderRadius);}
.cred__hint[hidden]{display:none;}
.onboarding{display:flex;flex-direction:column;gap:var(--spacerXS);}
.onboarding__fields{display:grid;grid-template-columns:1fr;gap:var(--spacerS);}
.onboarding__steps{margin:0;padding-left:1.2rem;font-size:13px;line-height:18px;color:var(--cTextWeak);}
.onboarding__steps li{margin:4px 0;}
.onboarding__steps li.is-current{color:var(--cTextStrong);font-weight:var(--fontWeightSB);}
.onboarding__steps li.is-done{color:var(--cTextSuccess);}
.onboarding__steps[hidden]{display:none;}
.onboarding__phase{display:flex;align-items:flex-start;gap:var(--spacerS);
  margin:0;padding:var(--spacerXS) var(--spacerS);
  border-radius:var(--borderRadius);border-left:3px solid var(--amber1000);
  background:var(--amber100);color:var(--amber900);font-size:13px;line-height:18px;}
.onboarding__phase[hidden]{display:none;}
.onboarding__phase[data-state="done"]{border-left-color:var(--green1000);
  background:var(--green100);color:var(--green900);}
.onboarding__phase-label{flex:none;font-weight:var(--fontWeightSB);letter-spacing:0.04em;
  text-transform:uppercase;}
.onboarding__phase-text{min-width:0;}
.onboarding__status{display:flex;align-items:baseline;gap:var(--spacerXS) var(--spacerS);
  flex-wrap:wrap;}
.onboarding__status code{word-break:break-all;}
.onboarding__actions{display:flex;gap:var(--spacerXS);flex-wrap:wrap;}
.onboarding__replay{display:flex;align-items:end;gap:var(--spacerS);}
.onboarding__replay .field{min-width:280px;margin:0;}
.onboarding__replay[hidden]{display:none;}
.onboarding__result{margin:0;max-height:260px;overflow:auto;white-space:pre-wrap;
  word-break:break-word;}
@media(max-width:900px){
  .onboarding__fields{grid-template-columns:1fr;}
}
.contract__note{margin:0;padding:var(--spacerS) var(--spacer) var(--spacer);}

/* rows that expand */
tr.row--clickable{cursor:pointer;}
tr.row--clickable:hover td{background:var(--neutral50);}
tr.row--open td{background:var(--cFillWeak);}
tr.detail td{padding:0;border-bottom:1px solid var(--cStrokeWeak);white-space:normal;
  overflow:visible;}
.detail__wrap{padding:var(--spacerS) var(--spacer) var(--spacer);background:var(--cElevationRaised);
  display:flex;flex-direction:column;gap:var(--spacerS);}
.detail__block{min-width:0;}
.detail__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--spacerXS);margin-bottom:var(--spacerXXS);flex-wrap:wrap;}
.detail__label{font-size:13px;line-height:17px;font-weight:var(--fontWeightSB);
  color:var(--cTextWeak);}
.detail__pre{margin:0;padding:var(--spacerXS) var(--spacerS);background:var(--surface1000);
  border:1px solid var(--cStrokeWeaker);border-radius:var(--borderRadius);
  font-family:var(--fontFamilyMono);font-size:12px;line-height:17px;
  white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto;}
.detail__pre--snippet{max-height:220px;min-height:88px;overflow-y:auto;overflow-x:hidden;
  white-space:pre-wrap;word-break:break-all;}
.detail__note{font-size:13px;line-height:18px;color:var(--cTextWeak);}
.chev{display:inline-block;width:10px;color:var(--cTextWeak);}

/* activity column widths. Sized to their content so nothing gets clipped. */
.logtable{min-width:640px;}
.logtable .c-time{width:136px;}
.logtable .c-dir{width:64px;}
.logtable .c-prof{width:88px;}
.logtable .c-req{width:280px;}
.logtable .c-dev{width:16%;}
.logtable .c-res{width:162px;}
.logtable .c-lat{width:76px;}
.logtable .c-det{width:auto;}

/* With the drawer open there is less room, so the columns that carry the least
   go first. Percentages below are for the four visible columns and must leave
   device a real share - a wide request % plus fixed time/result used to crush
   it to zero. */
body.drawer-open .logtable{min-width:0;width:100%;}
body.drawer-open .logtable .c-dir,
body.drawer-open .logtable .c-lat,
body.drawer-open .logtable .c-det{display:none;}
body.drawer-open .logtable .c-time{width:20%;}
body.drawer-open .logtable .c-prof{width:16%;}
body.drawer-open .logtable .c-req{width:32%;}
body.drawer-open .logtable .c-dev{width:20%;}
body.drawer-open .logtable .c-res{width:12%;}

/* contract table
   Auto layout here, not fixed. The content is short and predictable, and with
   table-layout:fixed a display:none column leaves its width unallocated rather
   than handing it to the auto column, which clipped the path. */
.contract__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--spacer);flex-wrap:wrap;border-bottom:1px solid var(--cStrokeWeaker);}
.contracttable{table-layout:auto;min-width:520px;}
.contracttable .k-path{width:100%;}
.contracttable .k-copy{text-align:right;white-space:nowrap;}
.contracttable td.k-copy{text-align:right;}
body.drawer-open .contracttable{min-width:360px;}
body.drawer-open .contracttable .k-scope,
body.drawer-open .contracttable .k-effect{display:none;}

/* ---------- confirmation dialog ---------- */
.dialog{border:none;border-radius:var(--borderRadius);padding:var(--spacerL);
  width:calc(100% - 2 * var(--spacer));max-width:420px;
  background:var(--cElevationOverlay);color:var(--cTextStrong);
  box-shadow:var(--shadowOverlay);}
.dialog::backdrop{background:rgba(15,15,11,0.45);}
.dialog__body{margin:var(--spacerXS) 0 0;font-size:16px;line-height:22px;
  color:var(--cTextWeak);}
.dialog__foot{display:flex;justify-content:flex-end;gap:var(--spacerXS);flex-wrap:wrap;
  margin-top:var(--spacerL);}

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Narrow desktop / large tablet: drawer overlays instead of pushing. */
@media (max-width:1100px){
  body.drawer-open .main{padding-right:0;}
  body.drawer-open{overflow:hidden;}
}

/* Tablet: rail becomes a sticky top bar so main content gets full width. */
@media (max-width:900px){
  html{scroll-padding-top:120px;} /* sticky rail replaces the topbar offset */
  .app{grid-template-columns:1fr;background:var(--cElevationBase);}
  .rail{position:sticky;top:0;height:auto;z-index:40;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:var(--spacerXS) var(--spacerS);
    padding:var(--spacerS) var(--spacer);border-bottom:1px solid #f2f2f21f;}
  .rail__brand{padding:0;}
  .rail__sub{display:none;}
  .rail__nav{flex-direction:row;flex-wrap:wrap;order:3;width:100%;
    margin:var(--spacerXXS) 0 0;gap:0;}
  .rail__item{border-left:none;border-bottom:3px solid transparent;
    padding:8px var(--spacerS);}
  .rail__item--active{border-left-color:transparent;border-bottom-color:var(--axonian-gold);}
  .rail__foot{margin-top:0;margin-left:auto;flex-direction:row;align-items:center;
    gap:var(--spacer);padding:0;border-top:none;}
  .rail__stat{flex-direction:column;align-items:flex-end;gap:0;}
  .rail__badges{margin-top:0;}

  .topbar{padding:var(--spacerS) var(--spacer);position:static;}
  .banner{margin:0 var(--spacer) var(--spacerS);}
  .content{padding:var(--spacer) var(--spacer);gap:var(--spacerL);}

  .logtable{min-width:0;width:100%;}
  .logtable .c-dir,
  .logtable .c-lat,
  .logtable .c-det{display:none;}
  .logtable .c-time{width:22%;}
  .logtable .c-req{width:36%;}
  .logtable .c-dev{width:24%;}
  .logtable .c-res{width:18%;}

  .contracttable{min-width:0;}
  .contracttable .k-scope,
  .contracttable .k-effect{display:none;}
}

/* Phone: tighten spacing, stack chrome, full-width drawer. */
@media (max-width:640px){
  .rail__stat{display:none;}
  .rail__foot{gap:var(--spacerXS);}
  .rail__nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
    scrollbar-width:none;}
  .rail__nav::-webkit-scrollbar{display:none;}

  .topbar__left{width:100%;}
  .topbar__field{flex:1 1 auto;}
  .bare-select{max-width:100%;width:100%;}
  .topbar__right{width:100%;}
  .topbar__sep{display:none;}
  .topbar__right .btn{flex:1 1 auto;}

  .banner{margin:0 var(--spacerS) var(--spacerXS);}
  .content{padding:var(--spacerS);gap:var(--spacerL);}
  .section__head{flex-direction:column;align-items:flex-start;}

  .tiles{grid-template-columns:1fr;}

  .filters{display:grid;grid-template-columns:1fr 1fr;align-items:end;}
  .filter .select{width:100%;min-width:0;}
  .filter--check,
  .filters .btn{grid-column:1 / -1;margin-left:0;justify-self:start;}

  .logtable .c-dev{display:none;}
  .logtable .c-time{width:28%;}
  .logtable .c-req{width:44%;}
  .logtable .c-res{width:28%;}

  .contracttable .k-method{display:none;}
  .contracttable .k-copy{display:none;}
  .contracttable td.k-path,
  .contracttable th.k-path{white-space:normal;overflow:visible;text-overflow:clip;
    word-break:break-all;}
  .contract__head .filter{width:100%;}
  .contract__head .filter .select{width:100%;}

  .drawer{width:100%;border-left:none;}
  .rail-actions{flex-wrap:wrap;}
  .rail-actions .btn{flex:1 1 auto;}

  .dialog__foot{justify-content:stretch;}
  .dialog__foot .btn{flex:1 1 auto;}
}

/* Very small phones: keep chrome readable. */
@media (max-width:400px){
  .rail__title{max-width:140px;}
  .btn{font-size:14px;}
  .btn--sm{font-size:12px;padding:0 var(--spacerXS);}
  .state{font-size:18px;line-height:24px;}
}