/* Console shell (UniFi-style): a 64px icon rail + a closable tab strip, wrapping the
   existing Studio section content. Scoped to `.studio-shell.dfc` so it overrides the old
   topbar/left-nav layout without touching the rest of studio.css. Dark-slate + orange, to
   match the device app. */

.studio-shell.dfc {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
  background: #070a0e;
  color: #eaf1f5;
}

/* ---- icon rail ---- */
.dfc-rail {
  width: 76px;
  flex: 0 0 76px;
  background: #070b0f;
  border-right: 1px solid #1c2a33;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 3;
}
.dfc-rail::-webkit-scrollbar { display: none; }
.dfc-brand {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  background: linear-gradient(160deg, #ff8a2e, #e7620a);
  color: #0b1116;
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 20px;
  flex: 0 0 auto;
}
.dfc-navbtn {
  position: relative;
  width: 54px;
  height: 46px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #5c6a75;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .14s, color .14s;
  flex: 0 0 auto;
}
.dfc-navbtn:hover { color: #8fa0ab; background: #0e161d; }
.dfc-navbtn.on { color: #ff7a1a; background: rgba(255, 122, 26, .13); }
.dfc-navbtn.on::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #ff7a1a;
}
.dfc-ico {
  display: grid;
  place-items: center;
}
.dfc-ico svg {
  width: 25px;
  height: 25px;
  display: block;
}
.dfc-rail-spacer { flex: 1 0 8px; }
.dfc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1c2a33;
  display: grid;
  place-items: center;
  color: #8fa0ab;
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 13px;
  border: 1px solid #22303a;
  margin-top: 6px;
  flex: 0 0 auto;
}

/* ---- content column (rail's sibling) ---- */
.studio-shell.dfc .studio-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  padding: 0;
  gap: 0;
}

/* ---- tab strip ---- */
.dfc-tabs {
  height: 44px;
  flex: 0 0 44px;
  background: #0b1116;
  border-bottom: 1px solid #1c2a33;
  display: flex;
  align-items: stretch;
}
.dfc-crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 18px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.crumb-area { color: #7c8b96; }
.crumb-sep { color: #3a4750; font-size: 13px; }
.crumb-page { color: #eaf1f5; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfc-tabstrip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-left: 10px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
.dfc-tabstrip::-webkit-scrollbar { display: none; }
.dfc-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin-top: 7px;
  padding: 0 8px 0 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  color: #8fa0ab;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12.5px;
  transition: background .12s, color .12s;
}
.dfc-tab:hover { color: #eaf1f5; background: #0e161d; }
.dfc-tab.on { color: #eaf1f5; background: #070a0e; border-color: #1c2a33; }
.dfc-x {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #5c6a75;
  font-size: 14px;
  line-height: 1;
}
.dfc-x:hover { background: #22303a; color: #eaf1f5; }
.dfc-tabmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: #8fa0ab;
  font-size: 12px;
}
.dfc-org { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.dfc-org strong { color: #eaf1f5; font-weight: 600; font-size: 12.5px; }
.dfc-org span { color: #5c6a75; font-size: 11px; }

/* ---- content region: let the existing section pages fill + scroll ---- */
.studio-shell.dfc .studio-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ---- Dashboard ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 4px 0 22px;
}
.dash-card {
  text-align: left;
  background: #0b1116;
  border: 1px solid #1c2a33;
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .06s;
}
.dash-card:hover { border-color: #33454f; background: #0e161d; }
.dash-card:active { transform: translateY(1px); }
.dash-num {
  font-size: 34px;
  font-weight: 700;
  color: #eaf1f5;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-label { font-size: 11px; letter-spacing: .09em; color: #8fa0ab; }
.dash-sub { font-size: 12px; color: #5c6a75; }
.dash-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.dash-panel {
  background: #0b1116;
  border: 1px solid #1c2a33;
  border-radius: 12px;
  padding: 18px;
}
.dash-panel > .eyebrow { margin-bottom: 14px; }
.dash-clear { color: #6fd08c; font-size: 13px; }
.dash-attention {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid #141e26;
  padding: 12px 2px;
  color: #cbd6dd;
  font-size: 13px;
  cursor: pointer;
}
.dash-attention:first-of-type { border-top: none; }
.dash-attention:hover { color: #eaf1f5; }
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0b429;
  flex: 0 0 auto;
}
.dash-go { margin-left: auto; color: #ff7a1a; }

/* ---- Devices page: summary tiles + fleet table ---- */
.dev-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 20px;
}
.dev-stat {
  flex: 1 1 120px;
  min-width: 110px;
  background: #0b1116;
  border: 1px solid #1c2a33;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dev-stat strong {
  font-size: 24px;
  font-weight: 700;
  color: #eaf1f5;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dev-stat span {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #5c6a75;
}

.dev-table {
  border: 1px solid #1c2a33;
  border-radius: 10px;
  overflow: hidden;
  background: #0b1116;
}
.dev-row {
  display: grid;
  grid-template-columns: 1.3fr 1.1fr 1.6fr 0.8fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid #141e26;
  font-size: 13px;
  color: #cbd6dd;
}
.dev-group-select {
  width: 100%;
  max-width: 190px;
  background: #0e161d;
  color: #cbd6dd;
  border: 1px solid #22303a;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.dev-group-select:hover { border-color: #33454f; }
.dev-row:first-child { border-top: none; }
.dev-head {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #5c6a75;
  background: #091016;
}
.dev-name { color: #eaf1f5; font-weight: 600; }
.dev-serial { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #9fb0bb; }
.dev-seen { color: #7c8b96; font-variant-numeric: tabular-nums; }
.dev-pill {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dev-pill.registered { color: #6fd08c; background: rgba(111, 208, 140, .1); border-color: rgba(111, 208, 140, .3); }
.dev-pill.imaging { color: #f0b429; background: rgba(240, 180, 41, .1); border-color: rgba(240, 180, 41, .3); }
.dev-pill.active { color: #4aa3ff; background: rgba(74, 163, 255, .1); border-color: rgba(74, 163, 255, .3); }
.dev-pill.retired { color: #8593a0; background: rgba(133, 147, 160, .08); border-color: rgba(133, 147, 160, .25); }
.dev-actions {
  display: flex;
  gap: 12px;
  justify-self: end;
  /* Five actions, one of them two words: on a narrow screen they wrap onto a second line rather
     than widening the grid and giving the table a horizontal scrollbar. */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dev-link {
  border: 0;
  background: transparent;
  color: #8fa0ab;
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 0;
}
.dev-link:hover { color: #ff7a1a; }
.dev-link.danger:hover { color: #ff5b5b; }
.dev-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.dev-form-row label { flex: 1 1 160px; }

/* ---- Application import: grouped form + return-code editor ---- */
.form-section {
  border: 1px solid #1c2a33;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #0b1116;
}
.form-section-title {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c6a75;
}
/* Two-column editor so the whole form fits the viewport without scrolling. */
.app-editor-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.app-editor-col { min-width: 0; display: flex; flex-direction: column; }
.app-editor .form-section { margin-bottom: 16px; padding: 14px 16px; }
.app-editor-col .form-section:last-child { margin-bottom: 0; }
.app-editor textarea { min-height: 130px; }
@media (max-width: 900px) {
  .app-editor-cols { grid-template-columns: 1fr; }
}
.upload-bar {
  margin: 8px 0;
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
  height: 20px;
  position: relative;
  overflow: hidden;
}
.upload-bar-fill { height: 100%; background: #e8a33d; transition: width .15s linear; }
.upload-bar-label { position: absolute; top: 0; left: 8px; line-height: 20px; font-size: 12px; }
.archive-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  color: #9fb0bb;
}
.archive-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #4aa3ff;
  background: rgba(74, 163, 255, .1);
  border: 1px solid rgba(74, 163, 255, .3);
  white-space: nowrap;
}
.quickfill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.quickfill-label { font-size: 12px; color: #7c8b96; }
.rc-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rc-row { display: flex; align-items: center; gap: 8px; }
.rc-code {
  width: 120px;
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
}
.rc-kind { width: 130px; }
.rc-remove {
  border: 1px solid #26333d;
  background: transparent;
  color: #8593a0;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 1;
}
.rc-remove:hover { color: #ff5b5b; border-color: #ff5b5b; }
.rc-add {
  border: 1px dashed #2a3a45;
  background: transparent;
  color: #8fa0ab;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
}
.rc-add:hover { color: #ff7a1a; border-color: #ff7a1a; }

/* ---- Applications table ---- */
.app-table { border: 1px solid #1c2a33; border-radius: 10px; overflow: hidden; background: #0b1116; }
.app-row {
  display: grid; grid-template-columns: 1.5fr 0.8fr 1.1fr 1.6fr 0.8fr auto;
  align-items: center; gap: 14px; padding: 12px 16px;
  border-top: 1px solid #141e26; font-size: 13px; color: #cbd6dd; cursor: pointer;
}
.app-row:first-child { border-top: none; }
.app-row:not(.app-head):hover { background: #0e151b; }
.app-head { font-size: 10.5px; letter-spacing: .08em; color: #5c6a75; background: #091016; text-transform: uppercase; cursor: default; }
.app-name { color: #eaf1f5; font-weight: 600; }
.app-ver { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #9fb0bb; font-variant-numeric: tabular-nums; }
.app-pkg { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #9fb0bb; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-open { justify-self: end; color: #5c6a75; font-size: 12px; }
.app-row:hover .app-open { color: #ff7a1a; }
@media (max-width: 820px) {
  .app-row { grid-template-columns: 1.4fr 1fr 0.8fr auto; }
  .app-row > :nth-child(3), .app-row > :nth-child(4) { display: none; }
}
/* Application groups table (same style, its own columns) */
.app-row.ag { grid-template-columns: 1.6fr 0.7fr 2fr auto; }
.ag-desc { color: #7c8b96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) {
  .app-row.ag { grid-template-columns: 1.5fr 0.7fr auto; }
  .app-row.ag > :nth-child(3) { display: none; }
  .app-row.ag > :nth-child(4) { display: block; } /* keep the arrow (base rule hides 4th) */
}

/* ---- Autopilot: tenant-connection tables ---- */
.ap-section { margin-bottom: 34px; }
.ap-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ap-bar h2 { font-size: 16px; margin: 0; color: #eaf1f5; font-weight: 700; }
.ap-row { display: grid; gap: 16px; align-items: center; padding: 15px 18px; border-top: 1px solid #141e26; font-size: 13px; color: #cbd6dd; cursor: pointer; }
.ap-row.enroll { grid-template-columns: 1.8fr 1fr 1.2fr 0.8fr auto; }
.ap-row.dereg { grid-template-columns: 1.8fr 1fr 0.8fr auto; }
.ap-row:first-child { border-top: none; }
.ap-row:not(.ap-head):hover { background: #0e151b; }
.ap-head { font-size: 10.5px; letter-spacing: .08em; color: #5c6a75; background: #091016; text-transform: uppercase; cursor: default; }
.ap-mono { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #eaf1f5; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tags { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #9fb0bb; }
.ap-secret-ok { color: #6fd08c; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11.5px; }
.ap-secret-na { color: #5c6a75; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11.5px; }
.ap-open { justify-self: end; color: #5c6a75; font-size: 16px; }
.ap-row:hover .ap-open { color: #ff7a1a; }
.ap-empty { border: 1px dashed #1c2a33; border-radius: 10px; background: #091016; padding: 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ap-empty strong { display: block; color: #cbd6dd; font-size: 14px; margin-bottom: 3px; }
.ap-empty small { color: #7c8b96; font-size: 12.5px; }
@media (max-width: 820px) {
  .ap-row.enroll { grid-template-columns: 1.6fr 1fr 0.8fr auto; }
  .ap-row.enroll > :nth-child(3) { display: none; }
}

/* ---- Application import: drawer wizard ---- */
.app-wizard {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(1040px, 96vw);
  background: #0b1116; border-left: 1px solid #1c2a33;
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
  z-index: 41; display: flex; flex-direction: column;
}
.wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid #141e26; }
.wiz-head h2 { margin: 2px 0 0; font-size: 20px; color: #eaf1f5; }
.wiz-body { flex: 1; display: grid; grid-template-columns: 224px 1fr; min-height: 0; }
.wiz-rail { border-right: 1px solid #141e26; padding: 16px 12px; background: #091016; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.wiz-step { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: #7c8b96; background: transparent; border: 0; text-align: left; width: 100%; }
.wiz-step:hover { background: #0e151b; }
.wiz-step.active { background: #0e151b; color: #eaf1f5; }
.wiz-num { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1px solid #26333d; display: grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; color: #5c6a75; background: #0b1116; }
.wiz-step.active .wiz-num { border-color: #ff7a1a; color: #ff7a1a; }
.wiz-step.done .wiz-num { border-color: #6fd08c; color: #04120a; background: #6fd08c; }
.wiz-lbl { font-size: 13px; padding-top: 2px; }
.wiz-lbl small { display: block; color: #5c6a75; font-size: 11px; }
.wiz-step.active .wiz-lbl small { color: #7c8b96; }
.wiz-step.locked { opacity: .4; cursor: not-allowed; }
.wiz-step.locked:hover { background: transparent; }
.wiz-content { padding: 24px 28px; overflow-y: auto; min-height: 0; }
.wiz-content h3 { margin: 0 0 4px; font-size: 17px; color: #eaf1f5; }
.wiz-desc { margin: 0 0 20px; color: #7c8b96; font-size: 13px; max-width: 64ch; }
.wiz-panel { display: none; }
.wiz-panel.on { display: block; }
/* Edit mode = tabbed properties view; each tab fits the drawer (no page scroll). */
.props-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 28px 0; }
.props-tabs { display: flex; gap: 2px; border-bottom: 1px solid #141e26; margin-bottom: 18px; flex: none; }
.props-tab { border: 0; background: transparent; color: #7c8b96; padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.props-tab:hover { color: #cbd6dd; }
.props-tab.on { color: #eaf1f5; border-bottom-color: #ff7a1a; }
.props-pane { display: none; }
.props-pane.on { display: block; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.props-pane-fill.on { display: block; overflow: hidden; }
.app-wizard label.props-fill-field { margin-bottom: 0; }
.app-wizard label.props-fill-field textarea { height: calc(100vh - 348px); min-height: 200px; resize: none; box-sizing: border-box; }
/* ---- Media page ---- */
.media-card { display: flex; gap: 20px; align-items: flex-start; border: 1px solid #1c2a33; border-radius: 12px; background: #0b1116; padding: 20px 22px; margin-bottom: 16px; }
.media-card.soon { opacity: .75; border-style: dashed; }
.media-ic { flex: none; width: 50px; height: 50px; border-radius: 11px; background: linear-gradient(160deg,#12202b,#0b1116); border: 1px solid #1c2a33; display: grid; place-items: center; font-size: 24px; }
.media-body { flex: 1; min-width: 0; }
.media-name { font-size: 16px; font-weight: 700; color: #eaf1f5; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.media-file { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12.5px; color: #9fb0bb; font-weight: 400; }
.media-pill { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.media-pill.soon { color: #f0b429; background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.3); }
.media-desc { color: #7c8b96; font-size: 13px; margin: 0; max-width: 64ch; line-height: 1.5; }
.media-meta { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: flex-start; }
.media-meta > div { min-width: 0; }
.media-meta .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; margin-bottom: 2px; }
.media-meta .v { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12.5px; color: #cbd6dd; word-break: break-all; }
.media-actions { flex: none; }
.media-sec { font-size: 13px; font-family: Consolas, "SF Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #7c8b96; margin: 0 0 4px; font-weight: 600; }
.media-admin { border-top: 1px solid #141e26; padding-top: 18px; margin-top: 26px; }
.media-upl { border: 1px dashed #1c2a33; border-radius: 10px; background: #091016; padding: 16px 18px; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.media-upl label.fld { display: block; margin: 0; }
.media-upl label.fld:last-of-type, .media-upl .upload-bar { grid-column: 1 / -1; }
.media-upl label.fld > span { display: block; font-size: 12px; color: #cbd6dd; margin-bottom: 6px; }
.media-upl input { width: 100%; background: #0b1116; border: 1px solid #1c2a33; color: #eaf1f5; border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: inherit; }
.media-upl input:focus { outline: none; border-color: #ff7a1a; box-shadow: 0 0 0 3px rgba(255,122,26,.12); }
@media (max-width: 700px) { .media-card { flex-wrap: wrap; } .media-upl { grid-template-columns: 1fr; } }

/* Detection header row + "Detection help" button */
.det-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.det-head h3 { margin: 0; }
.det-templates-label { font-size: 11px; letter-spacing: .04em; color: #7c8b96; }
.help-btn { border: 1px solid #26333d; background: #091016; color: #8fbfe0; border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.help-btn:hover { border-color: #4aa3ff; color: #cfe6ff; }

/* Help drawer (per-page Help) */
.help-scrim { position: fixed; inset: 0; background: rgba(4,8,11,.55); z-index: 59; }
.help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 96vw); background: #0b1116;
  border-left: 1px solid #1c2a33; box-shadow: -18px 0 44px rgba(0,0,0,.5); z-index: 60; display: flex; flex-direction: column; }
.help-body { flex: 1; overflow-y: auto; padding: 20px 26px 40px; }
.help-lead { margin: 0 0 16px; color: #cbd6dd; font-size: 13.5px; line-height: 1.5; }
.help-warn { border: 1px solid rgba(240,180,41,.35); background: rgba(240,180,41,.07); border-radius: 9px;
  padding: 12px 14px; font-size: 12.5px; color: #f0d9a0; line-height: 1.5; margin-bottom: 22px; }
.help-warn strong { color: #ffe6ad; }
.help-ex { margin-bottom: 22px; }
.help-ex h4 { margin: 0 0 4px; font-size: 13.5px; color: #eaf1f5; }
.help-ex-note { margin: 0 0 8px; font-size: 12.5px; color: #7c8b96; line-height: 1.45; }
.help-ex pre { margin: 0; background: #060a0e; border: 1px solid #1c2a33; border-radius: 8px; padding: 12px 14px;
  overflow-x: auto; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #cbd6dd;
  line-height: 1.45; white-space: pre; }
.app-wizard label.fld { display: block; margin-bottom: 14px; }
.app-wizard label.fld > span { display: block; font-size: 12.5px; color: #cbd6dd; margin-bottom: 6px; }
.app-wizard input[type=text], .app-wizard input:not([type]), .app-wizard input[type=file], .app-wizard textarea, .app-wizard select {
  width: 100%; background: #091016; border: 1px solid #1c2a33; color: #eaf1f5;
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.app-wizard textarea { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12.5px; resize: vertical; }
.app-wizard input:focus, .app-wizard textarea:focus, .app-wizard select:focus { outline: none; border-color: #ff7a1a; box-shadow: 0 0 0 3px rgba(255,122,26,.12); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.typecards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tcard { border: 1px solid #1c2a33; background: #091016; border-radius: 10px; padding: 16px; cursor: pointer; text-align: left; color: #cbd6dd; }
.tcard:hover { border-color: #26333d; }
.tcard.sel { border-color: #ff7a1a; box-shadow: 0 0 0 1px #ff7a1a inset; }
.tcard-ic { font-size: 20px; display: block; margin-bottom: 8px; }
.tcard strong { display: block; color: #eaf1f5; font-size: 14px; margin-bottom: 3px; }
.tcard small { color: #7c8b96; font-size: 12px; line-height: 1.4; }
.wiz-callout { border: 1px solid rgba(74,163,255,.3); background: rgba(74,163,255,.06); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; color: #bcd4ec; margin-bottom: 16px; }
.rev { display: grid; grid-template-columns: 160px 1fr; gap: 6px 18px; font-size: 13px; align-items: start; }
.rev .k { color: #7c8b96; }
.rev .v { color: #eaf1f5; word-break: break-word; }
.rev-mono { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; }
.wiz-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid #141e26; background: #091016; }
.delete-confirm { font-size: 12.5px; color: #ffb4b4; }
.wiz-spacer { flex: 1; }
.wiz-prog { font-size: 12px; color: #5c6a75; font-family: Consolas, "SF Mono", ui-monospace, monospace; }
@media (max-width: 820px) {
  .wiz-body { grid-template-columns: 1fr; }
  .wiz-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #141e26; }
  .typecards, .two { grid-template-columns: 1fr; }
}

/* ---- Per-device deployment-event drawer ---- */
.dev-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 11, .55);
  z-index: 40;
}
.dev-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: #0b1116;
  border-left: 1px solid #1c2a33;
  box-shadow: -18px 0 44px rgba(0, 0, 0, .45);
  z-index: 41;
  display: flex;
  flex-direction: column;
}
.dev-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid #141e26;
}
.dev-drawer-head h2 { margin: 4px 0 2px; font-size: 18px; color: #eaf1f5; }
.dev-drawer-serial {
  margin: 0;
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #7c8b96;
}
.dev-drawer-close {
  border: 0;
  background: transparent;
  color: #7c8b96;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.dev-drawer-close:hover { color: #ff7a1a; }
.dev-drawer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: .05em;
  color: #7c8b96;
}
.dev-live {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #465561;
}
.dev-live.on { background: #6fd08c; box-shadow: 0 0 0 3px rgba(111, 208, 140, .18); }
.dev-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px 24px;
}
.dev-drawer-empty {
  text-align: center;
  color: #7c8b96;
  padding: 48px 12px;
}
.dev-drawer-empty strong { display: block; color: #cbd6dd; margin-bottom: 6px; }
.dev-drawer-empty p { margin: 0; font-size: 13px; }
.dev-event {
  border-left: 2px solid #2a3a45;
  padding: 8px 0 8px 14px;
  margin-left: 4px;
  position: relative;
}
.dev-event + .dev-event { border-top: 1px solid #10181f; }
.dev-event-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}
.dev-event-time {
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #7c8b96;
  font-variant-numeric: tabular-nums;
}
.dev-event-stage {
  font-size: 10px;
  letter-spacing: .06em;
  color: #8fa0ab;
}
.dev-event-msg { margin: 0; font-size: 13px; color: #cbd6dd; line-height: 1.4; }
.dev-event-warn { border-left-color: #f0b429; }
.dev-event-warn .dev-event-stage { color: #f0b429; }
.dev-event-error { border-left-color: #ff5b5b; }
.dev-event-error .dev-event-stage { color: #ff7a7a; }
.dev-event-error .dev-event-msg { color: #ffc9c9; }
/* Error-catalog code chip + plain-language problem/resolution under a coded event. */
.dev-event-code {
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #7c8b96;
  background: #131c24;
  border: 1px solid #22303a;
  border-radius: 4px;
  padding: 1px 6px;
}
.dev-event-help {
  margin: 6px 0 1px;
  padding: 7px 10px;
  background: #131c24;
  border: 1px solid #22303a;
  border-radius: 6px;
}
.dev-event-problem { margin: 0; font-size: 12px; color: #cbd6dd; line-height: 1.45; }
.dev-event-fix { margin: 4px 0 0; font-size: 12px; color: #9fb0bb; line-height: 1.45; }
.dev-event-fix b { color: #cbd6dd; font-weight: 600; }
.dev-event-error .dev-event-help { border-color: #4a2626; background: #1a1113; }
.dev-event-warn .dev-event-help { border-color: #4a3d1a; background: #191509; }

@media (max-width: 820px) {
  .dev-row { grid-template-columns: 1.3fr 1.2fr 0.8fr auto; }
  /* Hide serial on narrow; keep name, site/tags, status, actions. */
  .dev-row > :nth-child(2) { display: none; }
  .org-row { grid-template-columns: 1.3fr 0.8fr auto !important; }
  .org-row > :nth-child(2), .org-row > :nth-child(3), .org-row > :nth-child(5) { display: none; }
}

/* ---- Organization members table ---- */
.org-row {
  grid-template-columns: 1.3fr 1.5fr 1.6fr 0.8fr 0.9fr auto;
}
.org-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.org-role-badge {
  font-size: 11px;
  font-weight: 600;
  color: #cbd6dd;
  background: #14202a;
  border: 1px solid #26343e;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.org-role-none { color: #5c6a75; font-style: normal; }
.invite-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 18px;
}
.org-role-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}
.org-check {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd6dd;
}
.org-check input { width: auto; margin: 0; }
.org-check.org-check-lg { font-size: 15px; }
.org-check.org-check-lg input { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: #e8913a; }
.org-invites {
  margin-top: 24px;
  border-top: 1px solid #1c2a33;
  padding-top: 18px;
}
.org-invites > .eyebrow { margin-bottom: 10px; }
.org-invite-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-top: 1px solid #141e26;
  font-size: 13px;
}
.org-invite-row:first-of-type { border-top: none; }

/* ---- Windows Configuration / Join: prompts, rules, conditions ---- */
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.rules-head.mt { margin-top: 26px; }
.rules-head > span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #7c8b96; font-weight: 700; }
.rule-card { border: 1px solid #1c2a33; border-radius: 9px; background: #091016; padding: 12px 13px; margin-bottom: 9px; }
.rule-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rc-when, .rc-then { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 10px; color: #5c6a75; letter-spacing: .05em; }
.rule-then { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.cond-list { display: flex; flex-direction: column; gap: 7px; }
.cond-row { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr auto; gap: 7px; align-items: center; }
.cond-any { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11.5px; color: #5c6a75; }
.cond-add { align-self: flex-start; background: none; border: 1px dashed #1c2a33; color: #9fb0bb; border-radius: 7px; padding: 5px 10px; font-size: 11.5px; cursor: pointer; margin-top: 2px; }
.cond-add:hover { border-color: #ff7a1a; color: #ff7a1a; }
.cond-x { background: none; border: 0; color: #5c6a75; font-size: 15px; cursor: pointer; line-height: 1; padding: 0 4px; }
.cond-x:hover { color: #e8695f; }
/* Phase 5: AND/OR condition groups, predefined-var picks, and prompt visibility. */
.groups { display: flex; flex-direction: column; gap: 8px; }
.cond-group { border: 1px solid #17222b; border-radius: 9px; background: #091016; padding: 10px 11px; }
.cg-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #5c6a75; font-weight: 700; margin-bottom: 8px; }
.or-sep { align-self: center; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: #b78cff; margin: 1px 0; }
.or-add { align-self: flex-start; margin-top: 2px; }
.tsvar-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 9px 0 2px; }
.chip-pick { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11.5px; color: #b78cff; border: 1px solid rgba(183,140,255,.4); background: rgba(183,140,255,.1); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.chip-pick:hover { background: rgba(183,140,255,.2); }
.chip-pick.prompt { color: #ff9a4d; border-color: rgba(255,122,26,.45); background: rgba(255,122,26,.1); }
.chip-pick.prompt:hover { background: rgba(255,122,26,.2); }
/* Two chip rows, two jobs: the NAME chips overwrite the variable name (solid, badge-like); the
   token chips insert into the value template (outlined, with a leading + affordance). */
.tsvar-cap { flex-basis: 100%; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }
.tsvar-picks.names { border-left: 2px solid #22303a; padding-left: 9px; }
.chip-pick.name { color: #cfe3f2; border-color: #2f4a5c; background: #14212b; font-weight: 600; border-radius: 5px; }
.chip-pick.name:hover { border-color: #8fbfe0; background: #1a2c39; }
.tsvar-picks.tokens .chip-pick::before { content: "+ "; opacity: .55; }
/* Set Task Sequence Variable: purpose banner (what naming it does) + live sample-machine preview. */
.tsvar-purpose { font-size: 12px; line-height: 1.5; color: #cbd6dd; background: #0e1b16; border: 1px solid #1e3a2c; border-left: 3px solid #3fae7a; border-radius: 8px; padding: 8px 11px; margin: 8px 0 2px; }
.tsvar-purpose.apply { background: #14110a; border-color: #3a2f14; border-left-color: #ff7a1a; }
.tsvar-purpose code { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11px; color: #ff9a4d; }
.tsvar-preview { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 9px 11px; background: #0b1116; border: 1px solid #1c2a33; border-radius: 8px; }
.tsvar-preview .tp-label { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }
.tsvar-preview b { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 14px; color: #8fbfe0; }
/* Choice options: label the tech sees -> the code it stores */
.pd-optcap { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; margin: 4px 0 7px; }
.pd-opts { display: flex; flex-direction: column; gap: 6px; }
.pd-optrow { display: flex; align-items: center; gap: 8px; }
/* The default-answer marker on a choice option row: a radio the author clicks, not a form control. */
.pd-optdef { flex: none; appearance: none; background: transparent; border: 0; color: #3a4b57; font-size: 14px; line-height: 1; padding: 4px 2px; cursor: pointer; }
.pd-optdef:hover { color: #8fbfe0; }
.pd-optdef.on { color: #ff7a1a; }
.pd-optrow .mini { flex: 1; min-width: 0; }
.pd-optrow .mini.mono { flex: 0 0 42%; color: #8fbfe0; }
.pd-optarrow { color: #5c6a75; font-family: Consolas, "SF Mono", ui-monospace, monospace; flex: none; }
.pd-optadd { align-self: flex-start; appearance: none; background: transparent; border: 1px dashed #2b3a44; color: #8fbfe0; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pd-optadd:hover { color: #ff7a1a; border-color: #3a4a55; }
/* "What the technician sees": a read-only mock of the wizard screen this prompt produces. Deliberately
   unlike the surrounding form controls so it reads as a picture, not another set of fields. */
.pd-preview { margin-top: 16px; }
.pdp-cap { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; margin-bottom: 7px; }
.pdp-card { border: 1px dashed #2f4a5c; border-radius: 10px; background: #0a141c; padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; }
.pdp-q { display: flex; align-items: baseline; gap: 9px; font-size: 14px; font-weight: 600; color: #eaf1f5; line-height: 1.4; }
.pdp-req { font-size: 9.5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #ff9a4d; border: 1px solid rgba(255,122,26,.45); border-radius: 5px; padding: 1px 5px; flex: none; }
.pdp-help { font-size: 12px; color: #7c8b96; margin: -4px 0 0; line-height: 1.45; }
.pdp-empty { font-size: 12px; color: #5c6a75; font-style: italic; margin: 0; }
.pdp-choice { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #a9b7c0; }
.pdp-radio { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #3a4b57; background: #0b1116; }
.pdp-choice.on { color: #eaf1f5; }
.pdp-choice.on .pdp-radio { border-color: #8fbfe0; box-shadow: inset 0 0 0 3px #8fbfe0; }
.pdp-default { font-size: 9.5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #5c6a75; }
.pdp-input { border: 1px solid #22303a; border-radius: 7px; background: #0b1116; padding: 8px 11px; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12.5px; color: #cfe3f2; }
.pdp-input.muted { color: #5c6a75; }
.pdp-toggle { display: flex; gap: 6px; }
.pdp-pill { font-size: 12px; color: #7c8b96; border: 1px solid #22303a; border-radius: 7px; padding: 5px 14px; }
.pdp-pill.on { color: #eaf1f5; border-color: #8fbfe0; background: #14212b; }
.pdp-prefill { color: #8fbfe0; font-style: italic; }
/* The Set Dynamic Variables panel's "Advanced" fold: regex + pre-fill, out of the way until wanted. */
.dv-adv { margin-top: 16px; border-top: 1px solid #141e26; padding-top: 12px; }
.dv-adv summary { cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fbfe0; font-weight: 700; }
.dv-adv summary:hover { color: #ff7a1a; }
.dv-adv > label { margin-top: 10px; }
.pd-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-f > span { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }
.pd-f.full { grid-column: 1 / -1; }
.pd-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #cbd6dd; white-space: nowrap; padding-bottom: 8px; }
.import-lib { margin-top: 16px; border-top: 1px solid #141e26; padding-top: 12px; }
.import-lib summary { cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fbfe0; font-weight: 700; }
.import-lib summary:hover { color: #ff7a1a; }
.import-lib .attach-row { margin-top: 8px; }
.field-hint code { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #8fbfe0; }
.wiz-preview-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.wpn { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #26333d; display: grid; place-items: center; font-size: 11px; color: #7c8b96; }
.wpl { color: #eaf1f5; }
.prompt-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 7px; align-items: center; }
.prompt-grid2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 8px; }
.check-inline { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #cbd6dd; white-space: nowrap; }
.check-inline input { width: auto; }
.rule-card .mini, .rules-head + * .mini { width: 100%; background: #0b1116; border: 1px solid #1c2a33; border-radius: 6px; color: #eaf1f5; font-size: 12px; padding: 7px 9px; }
.rule-card .mini:focus { outline: none; border-color: #ff7a1a; }
.rule-card input.mono, .rule-card .mono, input.mono { font-family: Consolas, "SF Mono", ui-monospace, monospace; }
.rule-card .area { min-height: 58px; resize: vertical; margin-top: 8px; }
.rule-then .grow { flex: 1; }
.field-hint.muted { color: #5c6a75; font-style: italic; }
.rule-preview { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; border: 1px solid #16303f; background: #0a141c; border-radius: 8px; padding: 10px 13px; margin-bottom: 12px; }
.rule-preview > span { font-size: 10px; letter-spacing: .08em; color: #7fb2e8; font-weight: 700; }
.rule-preview > b { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 14px; color: #6fd08c; }
.rule-preview > small { color: #5c6a75; font-size: 11px; margin-left: auto; }
.var-palette { border: 1px solid #141e26; border-radius: 9px; background: #091016; padding: 11px 13px; margin-top: 14px; }
.vp-label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }
.vp-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.vp { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11px; border-radius: 6px; padding: 3px 8px; }
.vp.prompt { border: 1px solid #3a2a18; background: #16110a; color: #ff7a1a; }
.vp.auto { border: 1px solid #16303f; background: #0a1620; color: #7fb2e8; }
.vp-hint { font-size: 11px; color: #5c6a75; font-family: Consolas, "SF Mono", ui-monospace, monospace; }

/* Rule summary rows (compact) that open the editor drawer */
.rule-row { display: flex; align-items: center; gap: 8px; border: 1px solid #1c2a33; border-radius: 9px; background: #091016; padding: 10px 12px; margin-bottom: 8px; }
.rule-row:hover { border-color: #2a3f4d; background: #0e151b; }
.rr-body { flex: 1; min-width: 0; cursor: pointer; }
.rr-when { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #cbd6dd; }
.rr-when .rc-when { flex: none; }
.rr-then { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.rr-then code { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #ff9d4d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rule editor drawer (popout) */
.rule-drawer-scrim { position: fixed; inset: 0; background: rgba(2,5,8,.6); z-index: 60; }
.rule-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 96vw); background: #0b1116; border-left: 1px solid #1c2a33; box-shadow: -24px 0 60px rgba(0,0,0,.5); z-index: 61; display: flex; flex-direction: column; }
.rd-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #141e26; }
.rd-head h3 { margin: 0; font-size: 17px; color: #eaf1f5; }
.rd-x { background: none; border: 0; color: #7c8b96; font-size: 22px; cursor: pointer; line-height: 1; }
.rd-x:hover { color: #eaf1f5; }
.rd-body { flex: 1; overflow: auto; padding: 20px 22px; }
.rd-body .grouplbl { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #5c6a75; font-weight: 700; margin: 0 0 11px; }
.rd-body .grouplbl.mt { margin-top: 24px; }
.rd-foot { display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-top: 1px solid #141e26; }
.rule-drawer .cond-row { grid-template-columns: 1.2fr 1fr 1.2fr auto; }
.rule-drawer .mini, .cond-row input, .cond-row select, .mini.full { width: 100%; background: #091016; border: 1px solid #1c2a33; border-radius: 6px; color: #eaf1f5; font-size: 12.5px; padding: 8px 10px; }
.rule-drawer .mini:focus, .cond-row input:focus, .cond-row select:focus, .mini.full:focus { outline: none; border-color: #ff7a1a; }
.mini.full { margin-bottom: 4px; }
.rule-preview.mt { margin-top: 16px; }
.rule-preview b.small { font-size: 11.5px; }

/* Directory Join config page */
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.form-actions .wiz-spacer { flex: 1; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.save-notice.standalone { display: block; margin: 4px 0 18px; padding: 9px 13px; border: 1px solid #23404f; border-radius: 8px; background: #0e1a22; color: #d6e6f0; font-size: 12.5px; }
.save-notice.standalone.error { border-color: #5a2f2b; background: #1a1110; color: #f0cfcb; }

/* ---- accordion primary nav (replaces the flat icon rail) ---- */
.dfc-rail.acc { width: 214px; flex: 0 0 214px; align-items: stretch; padding: 12px 10px 10px; gap: 2px; }
.dfc-rail.acc .dfc-brand-row { display: flex; align-items: center; gap: 11px; padding: 4px 6px 16px; text-decoration: none; }
.dfc-rail.acc .brand-mark { grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; padding: 7px; box-shadow: inset 0 0 0 3px #10171c; transform: none; flex: none; }
.dfc-rail.acc .brand-copy { line-height: 1; }
.dfc-rail.acc .brand-name { font-size: 0.86rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; color: #eaf1f5; }
.dfc-rail.acc .brand-tagline { margin-top: 4px; font-size: 0.54rem; color: #79b8dc; }
.dfc-group { display: flex; flex-direction: column; }
.dfc-primary { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; color: #9fb0bb; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; text-align: left; }
.dfc-primary:hover { background: #0e161d; color: #cbd6dd; }
.dfc-primary.cur { color: #eaf1f5; }
.dfc-primary .dfc-ico { color: #7c8b96; }
.dfc-primary.cur .dfc-ico { color: #ff7a1a; }
.dfc-rail.acc .dfc-ico svg { width: 20px; height: 20px; }
.dfc-primary-label { flex: 1; }
.dfc-chev { color: #5c6a75; font-size: 13px; transition: transform .15s; }
.dfc-primary.open .dfc-chev { transform: rotate(90deg); }
.dfc-kids { overflow: hidden; max-height: 0; transition: max-height .18s ease; }
.dfc-kids.open { max-height: 260px; }
.dfc-kid { display: block; width: 100%; border: 0; background: transparent; color: #7c8b96; padding: 7px 10px 7px 42px; border-radius: 7px; cursor: pointer; font-size: 12.5px; text-align: left; font-family: inherit; }
.dfc-kid:hover { background: #0e161d; color: #cbd6dd; }
.dfc-kid.on { color: #eaf1f5; background: rgba(255,122,26,.10); position: relative; }
.dfc-kid.on::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #ff7a1a; }
.dfc-railfoot { display: flex; padding: 8px 6px 2px; }

/* ---- Prompt Library table ---- */
.prompt-table { border: 1px solid #1c2a33; border-radius: 10px; overflow: hidden; background: #0b1116; margin-top: 4px; }
.prompt-row { display: grid; grid-template-columns: 1.4fr 0.9fr 0.7fr 1.6fr; gap: 14px; align-items: center; padding: 13px 16px; border-top: 1px solid #141e26; font-size: 13px; color: #cbd6dd; cursor: pointer; }
.prompt-row:first-child { border-top: none; }
.prompt-row.head { font-size: 10.5px; letter-spacing: .08em; color: #5c6a75; background: #091016; text-transform: uppercase; cursor: default; }
.prompt-row:not(.head):hover { background: #0e151b; }
.pr-label { color: #eaf1f5; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pr-req { font-style: normal; font-size: 10px; color: #ff7a1a; border: 1px solid #3a2a18; border-radius: 5px; padding: 1px 6px; }
.pr-key { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #ff7a1a; font-size: 12px; }
.pr-type { color: #9fb0bb; font-size: 12px; }
.pr-detail { color: #7c8b96; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-empty { padding: 22px 16px; color: #5c6a75; font-size: 12.5px; font-style: italic; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-drawer .area { min-height: 70px; resize: vertical; }

/* ---- value-source editor (Static | By-rule) ---- */
.grouplbl { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #5c6a75; font-weight: 700; margin: 0 0 10px; }
.grouplbl.mt { margin-top: 22px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mode { border: 1px solid #1c2a33; border-radius: 9px; background: #091016; padding: 11px 12px; cursor: pointer; }
.mode:hover { border-color: #2a3f4d; }
.mode.on { border-color: #ff7a1a; background: #16110a; }
.mode .mt { color: #eaf1f5; font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.mode .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #5c6a75; flex: none; }
.mode.on .dot { background: #ff7a1a; border-color: #ff7a1a; }
.mode p { margin: 6px 0 0; font-size: 11px; color: #7c8b96; }

/* ---- sequence prompts drawer ---- */
.attach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid #141e26; font-size: 12.5px; color: #cbd6dd; }
.attach-row:first-of-type { border-top: none; }
.attach-row .pr-key { font-size: 11.5px; }
.attach-row .pr-type { color: #7c8b96; font-size: 11px; }
.seq-name-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ax-act { display: flex; gap: 12px; color: #5c6a75; font-size: 13px; }
.ax-act span { cursor: pointer; }
.ax-act span:hover { color: #ff7a1a; }
.ax-n { color: #5c6a75; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11px; margin-right: 7px; }

/* ---- Task Sequences table + read-only expand ---- */
.ts-table { border: 1px solid #1c2a33; border-radius: 11px; overflow: hidden; background: #0b1116; }
.ts-row { display: grid; grid-template-columns: 26px 1.6fr 1.3fr 0.8fr 0.9fr 0.9fr; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid #141e26; font-size: 13px; color: #cbd6dd; cursor: pointer; }
.ts-row.dg { grid-template-columns: 1.6fr 2fr 0.7fr auto; }
.ts-row.dj { grid-template-columns: 1.5fr 1.4fr 1fr auto; }
.ts-row:first-child { border-top: none; }
.ts-row.head { font-size: 10.5px; letter-spacing: .08em; color: #5c6a75; background: #091016; text-transform: uppercase; cursor: default; }
.ts-row:not(.head):hover { background: #0e151b; }
.ts-row .chev { color: #5c6a75; transition: transform .15s; }
.ts-row.open .chev { transform: rotate(90deg); color: #ff7a1a; }
.ts-name { color: #eaf1f5; font-weight: 600; }
.ts-row .dim { color: #7c8b96; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-pill { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 10.5px; border-radius: 20px; padding: 2px 9px; justify-self: start; }
.ts-pill.published { background: #0f2016; color: #6fd08c; border: 1px solid #204b30; }
.ts-pill.draft { background: #241d0c; color: #e8b54a; border: 1px solid #4a3c18; }
.ts-expand { border-top: 1px solid #141e26; background: #070d12; padding: 16px 18px 18px 56px; }
.ts-exp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.ts-exp-head > span { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }
.ts-exp-actions { display: flex; gap: 8px; }
.ro-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #101a22; font-size: 12.5px; }
.ro-k { width: 26px; height: 26px; border-radius: 7px; background: #16222c; display: flex; align-items: center; justify-content: center; color: #7c8b96; font-size: 9px; font-weight: 700; font-family: Consolas, "SF Mono", ui-monospace, monospace; }
.ro-t b { color: #eaf1f5; font-weight: 600; }
.ro-t small { color: #5c6a75; margin-left: 8px; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11px; }
.ro-note { font-size: 11.5px; color: #5c6a75; margin-top: 11px; }
.ts-empty { padding: 26px 16px; color: #5c6a75; font-size: 13px; text-align: center; }
.btn { border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: "Segoe UI", system-ui, sans-serif; border: 1px solid #23404f; background: #12202a; color: #d6e6f0; }
.btn:hover { border-color: #ff7a1a; color: #ff7a1a; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.danger { border-color: #3a2622; color: #e8695f; background: none; }
.btn.danger:hover { border-color: #e8695f; color: #e8695f; }
.btn.primary { background: #ff7a1a; border-color: #ff7a1a; color: #1a1206; }
.btn.primary:hover { background: #ff8c3a; color: #1a1206; }

/* ---- Deployment wizard ---- */
.wz-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #cbd6dd; cursor: pointer; }
.wz-check input { width: auto; }
.wz-toggle { display: flex; gap: 10px; }
.wz-toggle button { border: 1px solid #1c2a33; border-radius: 8px; background: #091016; padding: 8px 18px; cursor: pointer; font-size: 12.5px; color: #9fb0bb; font-family: inherit; }
.wz-toggle button.on { border-color: #ff7a1a; background: #16110a; color: #eaf1f5; }

/* OOBE Experience settings form (Intune-style toggle rows) */
.oobe-form { display: flex; flex-direction: column; padding: 8px 22px 20px; }
.oobe-form.nested { padding: 2px 0 8px; }
.oobe-form.nested .oobe-label { max-width: 62%; }
.oobe-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid #141e26; }
.oobe-row:last-child { border-bottom: 0; }
.oobe-label { display: flex; flex-direction: column; gap: 3px; max-width: 58%; }
.oobe-label strong { font-size: 13.5px; color: #eaf1f5; font-weight: 600; }
.oobe-label small { font-size: 12px; color: #7c8b96; line-height: 1.45; }
.oobe-form input[type=text], .oobe-form input[type=password], .oobe-form select { width: 260px; background: #091016; border: 1px solid #1c2a33; border-radius: 8px; color: #eaf1f5; padding: 8px 12px; font-size: 13px; font-family: inherit; }
.oobe-form select { cursor: pointer; }
.oobe-form input:focus, .oobe-form select:focus { outline: none; border-color: #ff7a1a; }
.oobe-sub-head { margin-top: 18px; padding: 16px 0 2px; border-top: 1px solid #1c2a33; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #7c8b96; }
.lbl-hint { font-style: normal; font-weight: 400; color: #5c6a75; font-size: 11px; margin-left: 8px; }
.key-echo { font-size: 11.5px; color: #7c8b96; margin: -4px 0 12px; }
.key-echo code { font-family: Consolas, "SF Mono", ui-monospace, monospace; color: #ff7a1a; }
.field-warn { font-size: 12px; color: #e8b54a; background: #14110a; border: 1px solid #2a2418; border-radius: 7px; padding: 8px 11px; margin: 4px 0 14px; }
.vp-hint.tip { display: block; margin: 8px 0 0; }

/* step editor: vertical ordered step list (replaces the wired canvas) */
.se-list { display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 20px; overflow: auto; min-height: 0; }
.se-empty { border: 1px dashed #23303a; border-radius: 10px; padding: 26px; text-align: center; color: #5c6a75; font-size: 13px; }
.se-row { display: flex; align-items: center; gap: 12px; border: 1px solid #1c2a33; border-radius: 11px; background: #0b1116; padding: 12px 13px; cursor: pointer; }
.se-row:hover { border-color: #2a3f4d; }
.se-row.sel { border-color: #ff7a1a; background: #120d07; }
/* A step just added from Add ▾ pulses briefly, so the canonical-order sort can't hide it. */
.se-row.flash { animation: se-row-flash 1.5s ease-out 1; }
@keyframes se-row-flash {
  0%   { border-color: #ff7a1a; background: #2a1a08; box-shadow: 0 0 0 3px rgba(255, 122, 26, .22); }
  70%  { border-color: #ff7a1a; background: #1a1209; box-shadow: 0 0 0 2px rgba(255, 122, 26, .12); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
}
.se-ord { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #5c6a75; width: 22px; flex: none; text-align: right; }
.se-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.se-body strong { color: #eaf1f5; font-size: 13.5px; font-weight: 600; }
.se-body small { color: #7c8b96; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The headline line of a row: the title, and (for an ATTACHED step) the HUB chip beside it. */
.se-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.se-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* HUB · <Name> — this step's definition lives in Provisioning → Variables, not on the step. Steel
   blue, the same colour the hub gives a site or a tag, so the two places read as one system. */
.se-hub {
  flex: none;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--steel);
  background: rgba(121, 184, 220, 0.12);
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An attachment that no longer resolves. Publish will refuse it, so the row must say so first. */
.se-hub.warn { color: #e8b54a; background: rgba(232, 181, 74, 0.13); }
.se-off { font-size: 10px; letter-spacing: .04em; color: #8a6a2a; border: 1px solid #2a2418; border-radius: 5px; padding: 2px 6px; flex: none; }
.se-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.se-mv { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #1c2a33; background: #091016; color: #9fb0bb; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.se-mv:hover:not(:disabled) { border-color: #ff7a1a; color: #eaf1f5; }
.se-mv:disabled { opacity: .3; cursor: default; }
.se-del { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #2a1c1a; background: none; color: #b06a62; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.se-del:hover { border-color: #e8695f; color: #e8695f; }
/* Editor folders — SCCM-style collapsible groups (organization only; steps still auto-snap). */
.se-folder { display: flex; align-items: center; gap: 9px; padding: 7px 11px; margin-top: 2px; border: 1px solid #22303a; border-left: 3px solid #3a4b57; border-radius: 9px; background: #0d151b; }
.se-fold { width: 22px; height: 22px; border: 0; background: transparent; color: #8fbfe0; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.se-fold:hover { color: #ff7a1a; }
.se-fname { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #eaf1f5; font-size: 13px; font-weight: 600; padding: 4px 7px; }
.se-fname:hover { border-color: #22303a; }
.se-fname:focus { border-color: #ff7a1a; background: #0b1116; outline: none; }
.se-fcount { font-size: 11px; color: #5c6a75; flex: none; letter-spacing: .03em; }
.se-row.grouped { margin-left: 20px; border-left: 2px solid #22303a; }
.se-grp { max-width: 120px; height: 26px; border-radius: 7px; border: 1px solid #1c2a33; background: #091016; color: #9fb0bb; font-size: 11px; cursor: pointer; padding: 0 4px; }
.se-grp:hover { border-color: #2a3f4d; color: #eaf1f5; }
.se-fdel { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #2a1c1a; background: none; color: #7c8b96; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.se-fdel:hover { border-color: #e8695f; color: #e8695f; }
.se-folder.empty { border-style: dashed; border-left-color: #2a3a44; background: #0b1116; }
.se-folder.empty .se-fold { color: #5c6a75; cursor: default; }
.se-folder.empty .se-fcount { color: #5c6a75; font-style: italic; }
.se-folder:hover { border-color: #2a3f4d; cursor: pointer; }
.se-folder.sel { border-color: #ff7a1a; border-left-color: #ff7a1a; background: #140f08; }
/* Lit while a dragged step is over the header, so the drop target is obvious before letting go. */
.se-folder.dragover { border-style: solid; border-color: #ff7a1a; border-left-color: #ff7a1a; background: #1c1409; box-shadow: inset 0 0 0 1px rgba(255,122,26,.35); }
.se-folder.dragover .se-fcount { color: #ff9a4d; font-style: normal; }
.se-grip { color: #33424d; font-size: 12px; letter-spacing: -3px; cursor: grab; flex: none; user-select: none; }
.se-grip:active { cursor: grabbing; }
.se-row:hover .se-grip { color: #7c8b96; }
.se-ungroup { margin-top: 8px; border: 1px dashed #3a4b57; border-radius: 10px; padding: 14px; text-align: center; color: #8fbfe0; font-size: 12.5px; background: #0d151b; }
.se-ungroup:hover { border-color: #ff7a1a; color: #ff7a1a; }
/* "Can't publish yet": the API's validation rejection, one actionable row per problem. Same shape
   as the coach card so it reads as the same kind of guidance, but with a red accent. */
.se-blocked { margin: 10px 0 6px; border: 1px solid #4a2a26; border-left: 3px solid #e8695f; border-radius: 10px; background: #16100f; padding: 12px 14px; }
.se-blocked-head { display: flex; align-items: center; gap: 10px; }
.se-blocked-head > span:first-child { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #e8958c; font-weight: 700; }
.se-blocked-count { margin-left: auto; font-size: 11px; letter-spacing: .04em; color: #7c8b96; font-family: Consolas, "SF Mono", ui-monospace, monospace; }
.se-blocked-x { width: 22px; height: 22px; border: 0; background: transparent; color: #5c6a75; cursor: pointer; font-size: 15px; border-radius: 6px; flex: none; }
.se-blocked-x:hover { color: #eaf1f5; }
.se-blocked > p { font-size: 12.5px; color: #a9b7c0; margin: 6px 0 10px; line-height: 1.5; }
.se-blocked-list { display: flex; flex-direction: column; gap: 7px; }
.se-blocked-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #1a1211; border: 1px solid #3a2523; border-radius: 9px; padding: 9px 13px; cursor: pointer; font: inherit; }
.se-blocked-row:hover:not(:disabled) { border-color: #e8695f; background: #21100e; }
.se-blocked-row.plain { cursor: default; }
.se-blocked-row:disabled { cursor: default; }
.se-blocked-step { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #e8958c; border: 1px solid #4a2a26; border-radius: 6px; padding: 2px 7px; }
.se-blocked-msg { flex: 1; min-width: 0; font-size: 12.5px; color: #d8c5c2; line-height: 1.45; }
.se-blocked-go { flex: none; color: #7c8b96; font-size: 12px; }
.se-blocked-row:hover:not(:disabled) .se-blocked-go { color: #e8695f; }
.folder-insp { display: flex; flex-direction: column; gap: 12px; }
.folder-insp label { display: flex; flex-direction: column; gap: 5px; }
.folder-insp label > span { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #5c6a75; font-weight: 700; }

/* ---- Variable Sets designer (Prompt Library) ---- */
.vs-section { margin-top: 42px; padding-top: 30px; border-top: 1px solid #141e26; }
.vs-section .page-heading { margin-bottom: 4px; }
.vs-h2 { font-size: 21px; margin: 2px 0 6px; color: #eaf1f5; }
.vs-section .page-heading code { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #ff9a4d; background: #16110a; border: 1px solid #2a2012; border-radius: 5px; padding: 1px 5px; }
.prompt-row.vs-row { grid-template-columns: 1.1fr 1.3fr 1.9fr; }
.vs-varlist { color: #9fb0bb; font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-drawer.wide { width: min(760px, 96vw); }

.vs-facts { margin: 6px 0 4px; padding: 12px 14px; border: 1px solid #16232c; border-radius: 10px; background: #091016; }
.vs-fact-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-fact-chips code { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11.5px; color: #7fd7c4; background: #0b1a17; border: 1px solid #16302a; border-radius: 6px; padding: 3px 8px; }

.modes.sm { display: inline-flex; grid-template-columns: none; gap: 0; margin: 0; border: 1px solid #1c2a33; border-radius: 8px; overflow: hidden; }
.modes.sm .mode { border: 0; border-radius: 0; padding: 7px 13px; font-size: 12px; font-weight: 600; color: #9fb0bb; background: #091016; }
.modes.sm .mode + .mode { border-left: 1px solid #1c2a33; }
.modes.sm .mode.on { background: #16110a; color: #ff9a4d; }

.vs-ask { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.vs-ask .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.vs-ask label > span { display: block; font-size: 11.5px; color: #9fb0bb; margin-bottom: 5px; }
.vs-ask .area { min-height: 62px; resize: vertical; }
.vs-ask .field-hint { margin: 0; }
.vs-req { align-self: center; padding-top: 12px; }
.vs-req > span { margin-bottom: 0 !important; font-size: 12.5px; color: #cbd6dd; }
.vs-rules { margin-top: 11px; display: flex; flex-direction: column; gap: 10px; }
.vs-rule { border: 1px solid #16232c; border-radius: 9px; background: #091016; padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.vs-rule-when { display: flex; flex-direction: column; gap: 7px; }
.vs-rule-when .kw, .vs-rule-then .kw { font-size: 10px; letter-spacing: .1em; font-weight: 800; color: #ff7a1a; }
.vs-rule-then { display: flex; align-items: center; gap: 9px; }
.vs-rule-then .full { flex: 1; }
.cond-any { font-size: 12px; color: #7c8b96; font-style: italic; }
.mini.full { width: 100%; }

.vs-preview { margin-top: 20px; padding: 13px 14px; border: 1px solid #16302a; border-radius: 10px; background: #0a1512; }
.vs-out { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px dashed #13241f; }
.vs-out:first-of-type { border-top: 0; }
.vs-out .k { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 12px; color: #7fd7c4; min-width: 160px; }
.vs-out b { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 13px; color: #eaf1f5; font-weight: 600; }
.field-hint.muted { color: #5c6a75; font-style: italic; }

/* ---- Admit confirmation card polish (mobile technician console) ---------------------------- */
.admit-card h1 {
  margin: 6px 0 10px;
}
.admit-card .pairing-tag {
  margin: 4px 0 10px;
}
.admit-card .lede {
  margin-top: 12px;
}

/* The reported machine identity — make · model on one line, serial on its own monospace line so a
   long serial fits and only ever breaks cleanly at a hyphen. */
.device-spec {
  max-width: 100%;
  margin: 2px auto 8px;
  text-align: center;
}
.device-spec-model {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--steel);
  word-break: break-word;
}
.device-spec-serial {
  display: block;
  margin-top: 3px;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  overflow-wrap: normal;
  word-break: normal;
}

/* An error (e.g. a refused admission) should read as an error, not a neutral note. */
.notice.is-error {
  border-left-color: var(--orange);
  background: rgba(255, 122, 26, 0.10);
  color: #f6c9a3;
}

/* Tighten the shell on small screens so the card isn't boxed in by heavy padding. */
@media (max-width: 560px) {
  .device-shell { padding: 12px 12px 10px; }
  .device-main { padding: 6px 0; }
  .device-card { padding: 24px 20px; }
  footer { flex-direction: column; gap: 2px; align-items: center; text-align: center; }
}

/* ---- Sites / Tags / derived device groups ------------------------------------------------- */
.ts-table.grp-table .ts-row { grid-template-columns: 2fr 1.3fr 1.3fr 0.7fr auto; }
.ts-row .dim.mono { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 12px; }
/* Devices table: the site + tag chips cell */
.dev-sitetags { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dev-site { font-size: 13px; color: #cbd6dd; }
.dev-site.none { color: #5c6a75; }
.dev-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dev-tag {
  font-size: 10.5px; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
  background: rgba(121, 184, 220, 0.12); color: #9fc8e2; border: 1px solid rgba(121, 184, 220, 0.25);
  font-style: normal;
}

/* An imported answer, in the same cell as the tags. Deliberately NOT a tag: a square mono chip in
   neutral slate, beside the round blue tag pills, so "Dept=IT" reads as a fact the device carries
   rather than another label it was given. */
.dev-answer {
  font-style: normal; font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  background: #131c24; color: #9fb2bf; border: 1px solid #2b3a46;
}

/* Device tag-picker drawer */
.tag-picker { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.tag-check { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.tag-check:hover { background: rgba(255, 255, 255, 0.03); }
.tag-check input { width: 16px; height: 16px; accent-color: var(--orange); }
.tag-check span { font-size: 14px; color: #cbd6dd; }

/* The metadata drawer's two section headings (Tags, Imported answers). */
.dev-meta-head {
  margin: 0 0 8px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #6d7c87;
}
.dev-meta-head + .field-hint { margin-top: -4px; }
.tag-picker + .dev-meta-head { margin-top: 18px; }
.field-hint + .dev-meta-head { margin-top: 18px; }

/* Answer rows: Name = Value, with the name in the same mono the wizards use for a variable. The
   grid gives the value the slack, so a long answer wraps the row rather than the drawer. */
.dev-ans-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; }
.dev-ans-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr) auto; gap: 6px; align-items: center; }
/* `.mini` is only ever styled inside the editor it belongs to, so the drawer states its own. */
.dev-ans-row input {
  width: 100%; min-width: 0; background: #091016; border: 1px solid #1c2a33; border-radius: 6px;
  color: #eaf1f5; font-size: 12.5px; padding: 8px 10px;
}
.dev-ans-row input:focus { outline: none; border-color: #ff7a1a; }
.dev-ans-row input.mono { color: #8fbfe0; }
.dev-ans-eq { color: #5c6a75; font-size: 13px; }
.dev-ans-none { margin: 8px 0 0; font-size: 13px; color: #5c6a75; }

/* ---- Bulk device import drawer ------------------------------------------------------------ */
/* Two heading buttons where there used to be one. */
.page-heading-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The preview table needs the room the 460px event drawer does not have. */
.dev-drawer.wide { width: min(920px, 96vw); }

/* The step's buttons, pinned under the scrolling body. A 25-row preview must never be the reason
   IMPORT is off the bottom of the screen: the table scrolls, the decision does not move. */
.dev-drawer-foot {
  flex: none;
  padding: clamp(10px, 1.6vh, 16px) 22px clamp(12px, 1.8vh, 18px);
  border-top: 1px solid #141e26;
  background: #0b1116;
}
/* The body owns the gap above the footer rule now, so it stops carrying its own bottom padding.
   It is also the column step 1 fills: flex, so the paste box can take the leftover height instead
   of leaving a third of the drawer empty under it. */
.dev-drawer-body.imp-body {
  padding-bottom: clamp(8px, 1.4vh, 14px);
  display: flex;
  flex-direction: column;
}
/* Only step 1 stretches. Everything else in this body (the status line, the preview chips, the
   preview table) keeps its own height and lets the body scroll — a flex column would otherwise
   squash a 40-row table to fit instead of scrolling it. */
.dev-drawer-body.imp-body > * { flex: 0 0 auto; }
.dev-drawer-body.imp-body > .imp-step1 { flex: 1 1 auto; min-height: 0; }
/* The step's buttons read like a wizard's: the way out, then the forward action, right-aligned and
   the same height. .primary-button is shaped for a full-width form submit (54px, space-between,
   its own top margin), so here it is trimmed to the wizards' 46px and sized to its label. */
.imp-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
}
.imp-actions .primary-button {
  min-height: 46px;
  margin: 0;
  padding: 0 22px;
  justify-content: center;
  font-family: Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.imp-actions .secondary-button { padding: 0 22px; }

/* Step 1: a column that fills the drawer body. Everything below the paste box has a natural
   height, so the box itself absorbs whatever the window has spare. */
.imp-step1 { display: flex; flex-direction: column; }
.dev-drawer-body .device-field.imp-paste-field {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin-bottom: clamp(12px, 2vh, 20px);
}
/* The paste box is for a whole fleet list, so it takes every row the drawer can spare rather than
   stopping at a fixed cap. The floor is about six rows: on a short window it gives way (the body
   scrolls) instead of pushing the step's buttons below the fold. */
.device-field textarea.imp-paste {
  flex: 1;
  min-height: 140px;
  height: auto;
  line-height: 1.55;
  resize: none;
  margin-bottom: 6px;
}
.imp-paste-hint {
  display: block; font-size: 11.5px; line-height: 1.45; color: #7c8b96;
}

/* The two ways to get a list in here — a template to fill in, a file to load — as one block under
   the paste box, on a shared rhythm. */
.imp-sources {
  flex: none;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: clamp(10px, 1.6vh, 14px);
  border-top: 1px solid #141e26;
}
.imp-source-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: #8b9aa5;
}
.imp-source-row > span { flex: 1; min-width: 200px; }
/* The native picker cannot be made to match anything else in this drawer, so the styled button
   in front of it opens it and the filename is reported alongside. */
.imp-file-input { display: none; }
.imp-file-name {
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 11.5px; color: #cbd6dd; overflow-wrap: anywhere;
}
.imp-file-name.none { color: #5c6a75; }

/* The template download lives with the paste box: "what are the field names" is the whole question
   a first import asks, and a filled-in copy of this file is itself a valid import. */
.imp-tmpl-btn {
  /* The two source buttons share a width so their captions start on the same column. */
  flex: none; min-width: 196px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel); color: #cbd6dd;
  font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .05em; cursor: pointer;
}
.imp-tmpl-btn:hover { border-color: #ff7a1a; color: #eaf1f5; }

.imp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.imp-chip {
  font-size: 11.5px; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px;
  background: rgba(133, 147, 160, .08); border: 1px solid rgba(133, 147, 160, .25); color: #8593a0;
}
.imp-chip.ok { background: rgba(111, 208, 140, .1); border-color: rgba(111, 208, 140, .3); color: #6fd08c; }
.imp-chip.upd { background: rgba(74, 163, 255, .1); border-color: rgba(74, 163, 255, .3); color: #4aa3ff; }
.imp-chip.err { background: rgba(232, 92, 74, .1); border-color: rgba(232, 92, 74, .32); color: #e8705c; }
.imp-chip.new { background: rgba(255, 122, 26, .1); border-color: rgba(255, 122, 26, .3); color: #ff9a4d; }

.imp-table { border: 1px solid #16222a; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
/* minmax(0, …) rather than bare fr: a long serial, tag list or answer wraps inside its cell instead
   of widening the grid and giving the drawer a horizontal scrollbar. */
.imp-row {
  display: grid;
  grid-template-columns:
    34px minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
  gap: 10px; align-items: start;
  padding: 10px 12px; border-top: 1px solid #16222a; font-size: 13px; color: #cbd6dd;
}
.imp-row > span { min-width: 0; overflow-wrap: anywhere; }
.imp-row:first-child { border-top: none; }
.imp-head {
  background: #0a1015; font-size: 10.5px; letter-spacing: .09em;
  color: #6d7c87; text-transform: uppercase;
}
.imp-row.err { background: rgba(232, 92, 74, .07); }
.imp-line, .imp-serial {
  font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-size: 12px;
}
.imp-line { color: #5c6a75; }
.imp-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; word-break: break-word; }
.imp-warn { font-style: normal; font-size: 11px; line-height: 1.35; color: #e8b54a; }
/* Imported answers: a compact Name=Value list, one per line, so a row with three of them reads as
   three facts rather than a run-on string. Wraps inside the cell like every other column. */
.imp-answers { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imp-answer {
  font-style: normal; font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.35; color: #9fb2bf; overflow-wrap: anywhere;
}
.imp-answer b { font-weight: 600; color: #cbd6dd; }
.imp-none { color: #4c5a65; }
.imp-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.imp-pill {
  font-style: normal; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(133, 147, 160, .08); border: 1px solid rgba(133, 147, 160, .25); color: #8593a0;
}
.imp-pill.new { color: #6fd08c; background: rgba(111, 208, 140, .1); border-color: rgba(111, 208, 140, .3); }
.imp-pill.upd { color: #4aa3ff; background: rgba(74, 163, 255, .1); border-color: rgba(74, 163, 255, .3); }
.imp-pill.err { color: #e8705c; background: rgba(232, 92, 74, .1); border-color: rgba(232, 92, 74, .32); }
.imp-msg { font-size: 11.5px; line-height: 1.4; color: #8593a0; }
.dev-tag.new { border-style: dashed; }
.imp-newmark {
  font-style: normal; margin-left: 5px; padding-left: 5px;
  border-left: 1px solid rgba(121, 184, 220, .3); color: #ff9a4d;
}
.imp-done { margin: 0 0 16px; font-size: 13px; color: #cbd6dd; }

/* Drawer form fields: selects + textareas alongside the existing .device-field input */
.dev-drawer-body .device-field { margin-bottom: 14px; }
.device-field select, .device-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: #eaf1f5;
  font-family: inherit; font-size: 14px;
}
.device-field textarea {
  resize: vertical; min-height: 90px;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
}
.device-field select:focus-visible, .device-field textarea:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
}

/* Autopilot config: the group-tag section now carries a pointer at the hub, not a list. */
.ap-flagged { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ap-flagged .fld-label { display: block; font-size: 12px; letter-spacing: .04em; color: #8b9aa5; margin-bottom: 8px; text-transform: uppercase; }

/* Source picker (the hub's advanced variable editor) */
.srcpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.srcpick-opt { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 11.5px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }
.srcpick-opt:hover { color: #eaf1f5; border-color: #37474f; }
.srcpick-opt.on { color: #eaf1f5; border-color: rgba(255,122,26,0.5); background: rgba(255,122,26,0.08); }

/* ---- The hub's advanced variable editor: name reference + value composer ------------------ */
.tsvar-ref { font-family: "Cascadia Code","Consolas",ui-monospace,monospace; font-size: 12px; color: var(--orange); margin: -4px 0 14px; }
.vcode { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0c1218; margin-bottom: 8px; }
.vcode-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); font-family: "Cascadia Code","Consolas",ui-monospace,monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.vcode-dot { width: 8px; height: 8px; border-radius: 50%; background: #2b3942; flex: none; }
.vcode-area { display: block; width: 100%; border: none; background: transparent; color: #dbe6ec; font-family: "Cascadia Code","Consolas",ui-monospace,monospace; font-size: 13px; line-height: 1.7; padding: 13px 14px; resize: vertical; min-height: 120px; }
.vcode-area:focus-visible { outline: none; }
.vcode:focus-within { border-color: rgba(255,122,26,0.4); }

/* ---- Provisioning → Variables: the authoring hub -----------------------------------------------
   Card grids, one section per kind of thing a build reads. Every card is the same shape whether it
   holds a question, a value, a site or a tag, so the page reads as one catalog rather than four
   pages stapled together. */
.vh-new { position: relative; }
.vh-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 31;
  min-width: 296px;
  background: #0f171d;
  border: 1px solid #2c3a42;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.vh-sect { margin-top: 30px; }
.vh-sect-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.vh-sect-h h2 {
  margin: 0;
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.vh-n { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 11px; color: #5c6a75; }
.vh-why { margin-left: auto; font-size: 12px; color: #5c6a75; }
/* On a narrow viewport the "why" line wraps under the heading rather than squeezing it. */
@media (max-width: 760px) { .vh-why { margin-left: 0; flex-basis: 100%; } }

.vh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.vh-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}
.vh-card:hover { border-color: #3a4b57; background: var(--panel-raised); }
/* A tag has no editor of its own (the tags API has no rename), so its card is not clickable. */
.vh-card.static { cursor: default; }
.vh-card.static:hover { border-color: var(--line); background: var(--panel); }
.vh-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vh-kind {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 5px;
}
.vh-kind.ask { color: #ff9a4d; background: rgba(255, 122, 26, 0.12); }
.vh-kind.set { color: #74d6a2; background: rgba(116, 214, 162, 0.13); }
.vh-kind.site,
.vh-kind.tag { color: var(--steel); background: rgba(121, 184, 220, 0.12); }
.vh-name {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: #eaf1f5;
  overflow-wrap: anywhere;
}
.vh-x {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: #4d5a65;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
  cursor: pointer;
}
.vh-x:hover { color: #f0b4b4; background: rgba(208, 154, 154, 0.12); }
.vh-desc { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.vh-desc.mono { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 12px; }
.vh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.vh-chip {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0d141a;
  color: var(--muted);
}
.vh-chip.opt { border-color: rgba(255, 122, 26, 0.28); color: #ff9a4d; }
.vh-chip.used { color: #5c6a75; }
.vh-chip.code { border-color: rgba(121, 184, 220, 0.3); color: var(--steel); }
.vh-chip.ansc { border-color: rgba(176, 131, 222, 0.3); background: rgba(176, 131, 222, 0.12); color: #c9a6e8; }
.vh-chip.ap { border-color: rgba(116, 214, 162, 0.45); background: rgba(116, 214, 162, 0.13); color: #74d6a2; }
.vh-link {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: #5c6a75;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vh-link:hover:not(:disabled) { color: var(--orange); }
.vh-link:disabled { opacity: 0.5; cursor: default; }
.vh-empty { margin: 0 0 6px; font-size: 13px; color: #5c6a75; }
.vh-builtins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vh-bchip {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0d141a;
  color: var(--muted);
}

/* ---- attach picker (task-sequence editor → Add ▾ → Attach a variable…) -------------------------
   The editor authors no variables: it lists what Provisioning → Variables owns and attaches it.
   Same popup shell as the two hub wizards, so the two surfaces read as one — and the same
   fit-any-screen contract: the card never exceeds the viewport, and the LIST is the only part that
   gives way, because it is the only part with no natural end. */
.attach-picker {
  width: min(620px, 94vw);
  max-height: min(760px, 90vh);
  max-height: min(760px, 90dvh);
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.4vh, 24px) clamp(16px, 2vw, 26px) clamp(13px, 2.2vh, 22px);
  border-color: #2a3a44;
  border-top-color: #ff7a1a;
}
.attach-picker h2,
.attach-picker > p,
.attach-picker .ask-wiz-head,
.attach-picker .modal-actions { flex: none; }
.attach-picker h2 { margin: clamp(6px, 1vh, 10px) 0 clamp(4px, 0.8vh, 7px); font-size: clamp(0.95rem, 1.5vw, 1.02rem); }
.attach-picker > p { margin-bottom: clamp(8px, 1.4vh, 14px); }
.attach-picker .ask-wiz-head .vh-link { margin-left: auto; }
.attach-picker .modal-actions { margin-top: clamp(10px, 1.8vh, 18px); }
.at-body { display: flex; flex-direction: column; gap: 14px; }
.at-empty { margin: 0; font-size: 13px; color: #5c6a75; }
.at-sect { display: flex; flex-direction: column; gap: 6px; }
.at-sect-h {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5c6a75;
}
/* A whole row is the hit target — the checkbox is the state, not the only way to set it. */
.at-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b1116;
  cursor: pointer;
}
.at-row:hover { border-color: #2a3f4d; }
/* Already in this draft: ticked, locked, and visibly settled rather than merely greyed out. */
.at-row.done { cursor: default; opacity: 0.62; }
.at-row.done:hover { border-color: var(--line); }
.at-row > input[type="checkbox"] { margin-top: 3px; flex: none; }
.at-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.at-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.at-detail { font-size: 12px; color: #7c8b96; overflow-wrap: anywhere; }
/* The one either/or in the picker: a PROMPTABLE static/rule variable can be attached as the
   question the technician answers, or as the value the device just applies. Question is the
   default because that is the reason the author made it promptable in the first place. */
.at-seg { display: flex; flex: none; align-self: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.at-seg-b {
  appearance: none;
  border: 0;
  background: transparent;
  color: #7c8b96;
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.at-seg-b.on { background: rgba(255, 122, 26, 0.14); color: #ff9a4d; font-weight: 600; }
.at-seg-b:disabled { cursor: default; }

/* ---- inspector card for an ATTACHED step -------------------------------------------------------
   Read-only on purpose: the step is a link, and editing the definition here would be editing a copy
   nobody else would ever see. */
.hub-ro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: 10px;
  background: #0b1116;
}
.hub-ro-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-ro-h .se-hub { margin-left: auto; }
.hub-ro-d { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.hub-ro-d.mono { font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 12px; color: #7c8b96; }
.hub-ro-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: #5c6a75; }
.hub-ro-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
/* The gap owns the spacing in this card, so the shared warning box drops its own margins. */
.hub-ro .field-warn { margin: 0; }
/* CANCEL scales with the forward button, or the footer keeps its full height on the one screen
   that cannot spare it (same rule the wizards apply to their own back/cancel). */
.attach-picker .modal-actions .secondary-button { min-height: clamp(38px, 4.4vh, 46px); }