/* ------------------------------------------------------------------------
   HenchmanBot in-game GUI — HTML/CSS recreation of the in-game window.

   Every selector is prefixed with .winui so nothing leaks into the host page,
   and the palette is hard-coded rather than themed: this is a picture of a
   dark Win32 window, so it must look identical in a light page.

   Palette and metrics mirror the real window exactly.
   ------------------------------------------------------------------------ */

.winui{
/* ---- window palette ---- */
  --bg: rgb(30, 31, 34);
  --bg-raised: rgb(40, 42, 46);
  --ctrl-bg: rgb(48, 50, 55);
  --ctrl-hot: rgb(62, 65, 71);
  --ctrl-pressed: rgb(28, 92, 160);
  --border: rgb(75, 78, 85);
  --border-dim: rgb(56, 58, 64);
  --text: rgb(228, 230, 235);
  --text-dim: rgb(155, 158, 165);
  --text-disabled: rgb(110, 112, 118);
  --accent: rgb(0, 120, 215);
  --green: rgb(80, 200, 100);
  --orange: rgb(235, 165, 50);
  --red: rgb(225, 75, 75);
  --mana-blue: rgb(80, 140, 235);
  --bar-track: rgb(22, 23, 26);

  --ui-font: "Segoe UI", "Selawik", system-ui, sans-serif;
  --mono-font: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;

  container-type: inline-size;
  display: block;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  font: 12px/1 var(--ui-font);
  color: var(--text);
  text-align: left;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

.winui *,
.winui *::before,
.winui *::after{
  box-sizing: border-box; }

.winui [hidden]{ display: none !important; }

/* ---- Down-scale on narrow viewports without breaking the pixel layout ---- */
.winui .wu-fit{ --wu-s: 1; height: calc(740px * var(--wu-s)); }
.winui .wu-scale{ width: 600px; height: 740px; transform-origin: top left; transform: scale(var(--wu-s)); }
@container (max-width: 599px) { .winui .wu-fit { --wu-s: calc(100cqw / 600px); } }

/* ======================= window chrome ======================= *//* Fixed 600 x 740, a caption with minimise and close only, not resizable.
   The caption text is intentionally blank. */
.winui .wu-win{
  position: relative;
  width: 600px;
  height: 740px;
  background: var(--bg);
  border: 1px solid rgb(16, 17, 20);
  overflow: visible;
}

.winui .wu-cap{
  position: absolute;
  left: 0; top: 0;
  width: 598px; height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--bg);
}
.winui .wu-cap-title{ flex: 1; }
.winui .wu-cap-btns{ display: flex; align-items: center; height: 100%; }
.winui .wu-cap-min,
.winui .wu-cap-close{
  position: relative;
  width: 34px; height: 100%;
}
.winui .wu-cap-min::before{
  content: ""; position: absolute;
  left: 12px; top: 13px; width: 10px; height: 1px;
  background: var(--text-dim);
}
.winui .wu-cap-close::before,
.winui .wu-cap-close::after{
  content: ""; position: absolute;
  left: 11px; top: 12px; width: 11px; height: 1px;
  background: var(--text-dim);
}
.winui .wu-cap-close::before{ transform: rotate(45deg); }
.winui .wu-cap-close::after{ transform: rotate(-45deg); }

.winui .wu-client{
  position: absolute;
  left: 2px; top: 25px;
  width: 594px; height: 711px;
  background: var(--bg);
  overflow: hidden;
}

/* ======================= owner-drawn tab strip ======================= *//* TCM_SETITEMSIZE(tabWidth, TAB_STRIP_H - 4) with tabWidth clamped to 52..76;
   at 594px client it lands on 57. */
.winui .wu-tabs{
  position: absolute;
  left: 6px; top: 6px;
  width: 582px; height: 29px;
  display: flex;
  padding-left: 2px;
}
.winui .wu-tab{
  position: relative;
  flex: none;
  width: 57px; height: 26px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 12px/1 var(--ui-font);
  cursor: default;
  text-align: center;
}
.winui .wu-tab:hover{ background: var(--ctrl-bg); }
.winui .wu-tab[aria-selected="true"]{ background: var(--bg-raised); color: var(--text); }

/* RECT bar = {rc.left + 2, rc.bottom - 3, rc.right - 2, rc.bottom} */
.winui .wu-tab[aria-selected="true"]::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0; height: 3px;
  background: var(--accent);
}
.winui .wu-tab.is-featured{ color: var(--green); }
.winui .wu-tab:focus-visible{ outline: 1px dotted var(--text); outline-offset: -3px; }
.winui .wu-tabs-rule{
  position: absolute;
  left: 0; top: 28px;
  width: 582px; height: 1px;
  background: var(--border);
}

/* ======================= tab panels ======================= */
.winui .wu-panels{
  position: absolute;
  left: 10px; top: 34px;
  width: 574px; height: 631px;
}
.winui .wu-panel{
  position: absolute;
  left: 0; top: 0;
  width: 574px; height: 531px;
  padding: 10px 5px 0;
  overflow: hidden;
}
.winui .wu-panel--tall{ height: 631px; }
.winui .wu-panel:focus-visible{ outline: none; }

.winui .t-equip,
.winui .t-tools,
.winui .t-scripts{ padding-top: 12px; }
.winui .t-alarm{ padding-top: 8px; }
.winui #wu-panel-info{ padding-top: 8px; }

/* ======================= rows & spacing utilities ======================= */
.winui .r{ display: flex; align-items: center; position: relative; flex: none; height: 22px; }
.winui .rauto{ height: auto; }
.winui .r16{ height: 16px; } .winui .r18{ height: 18px; } .winui .r20{ height: 20px; }
.winui .r22{ height: 22px; } .winui .r24{ height: 24px; } .winui .r25{ height: 25px; } .winui .r26{ height: 26px; }

/* Controls outside a group box start 5px in from the group column */
.winui .out{ padding-left: 5px; padding-right: 5px; }

.winui .cols{ display: flex; align-items: flex-start; }
.winui .col{ display: flex; flex-direction: column; }
.winui .push{ margin-left: auto; }

.winui .mt2{ margin-top: 2px; } .winui .mt3{ margin-top: 3px; } .winui .mt4{ margin-top: 4px; }
.winui .mt5{ margin-top: 5px; } .winui .mt6{ margin-top: 6px; } .winui .mt7{ margin-top: 7px; }
.winui .mt8{ margin-top: 8px; } .winui .mt10{ margin-top: 10px; } .winui .mt12{ margin-top: 12px; }

.winui .sp0{ margin-left: 0; } .winui .sp2{ margin-left: 2px; } .winui .sp3{ margin-left: 3px; }
.winui .sp4{ margin-left: 4px; } .winui .sp5{ margin-left: 5px; } .winui .sp6{ margin-left: 6px; }
.winui .sp7{ margin-left: 7px; } .winui .sp8{ margin-left: 8px; } .winui .sp9{ margin-left: 9px; }
.winui .sp10{ margin-left: 10px; } .winui .sp11{ margin-left: 11px; } .winui .sp12{ margin-left: 12px; }
.winui .sp13{ margin-left: 13px; } .winui .sp14{ margin-left: 14px; } .winui .sp15{ margin-left: 15px; }
.winui .sp17{ margin-left: 17px; } .winui .sp30{ margin-left: 30px; }
.winui .sp40{ margin-left: 40px; } .winui .sp50{ margin-left: 50px; }

/* ======================= group boxes ======================= *//* GroupBoxProc: RoundRect(8) in BORDER, caption text painted over the top edge
   at x = 10. The caption turns GREEN while its master
   checkbox is checked. */
.winui fieldset.gb{
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 12px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.winui fieldset.gb > legend{
  float: none;
  width: auto;
  margin: 0 0 0 6px;
  padding: 0 4px;
  font: 12px/1 var(--ui-font);
  color: var(--text);
  background: var(--bg);
}
.winui fieldset.gb.is-active > legend{ color: var(--green); }
.winui .gb--full{ height: 511px; }
.winui .gb--tight{ padding-top: 10px; padding-bottom: 8px; }

/* ======================= nesting bracket ======================= *//* Indent 20, rule 7px from the master's x,
   tick stops 4px short of the dependent row. */
.winui .nest{
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  --nh: 11px;
}
.winui .nest--h22{ --nh: 11px; }
.winui .nest--h20{ --nh: 10px; }
.winui .nest::before{
  content: "";
  position: absolute;
  left: 7px; top: 0; bottom: var(--nh);
  width: 1px;
  background: var(--border-dim);
}
.winui .nest > .r::before{
  content: "";
  position: absolute;
  left: -13px; top: 50%;
  width: 9px; height: 1px;
  background: var(--border-dim);
}
.winui .nest.is-active::before,
.winui .nest.is-active > .r::before{ background: var(--border); }

/* Equip tab: the e-ring Dynamic master sits at x = 100 in panel coordinates */
.winui .ind100{ margin-left: 85px; }

/* ======================= static labels ======================= */
.winui .lb{
  flex: none;
  color: var(--text);
  font: 12px/16px var(--ui-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.winui .dim{ color: var(--text-dim); }

/* ======================= edits (flat 1px frame) ======================= */
.winui .ed{
  flex: none;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--ctrl-bg);
  color: var(--text);
  font: 12px/1 var(--ui-font);
  outline: none;
}
.winui .ed:focus,
.winui .ed:focus-visible{ border-color: var(--accent); }
.winui .ed[readonly]{ cursor: default; }

.winui .ed--multi{ height: auto; padding: 2px 4px; overflow: hidden; }
.winui .ed--multi pre{
  margin: 0;
  font: 12px/16px var(--ui-font);
  color: var(--text);
  white-space: pre;
}
/* The log is trimmed to a whole number of text
   lines so the bottom entry is never sliced in half. */
.winui .ed--log pre{ font: 11.5px/18px var(--mono-font); }

/* ======================= list boxes ======================= */
.winui .lst{
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--ctrl-bg);
  overflow: hidden;
  outline: none;
}
.winui .lst:focus-visible{ border-color: var(--accent); }
.winui .lst > li{
  height: 16px;
  padding: 0 3px;
  font: 12px/16px var(--ui-font);
  color: var(--text);
  white-space: pre;
  overflow: hidden;
}
.winui .lst > li.is-sel{ background: var(--accent); color: #fff; }

/* ======================= checkboxes & radios ======================= *//* CheckRadioProc: 15px glyph box, label text at boxSize + 6 */
.winui .ck,
.winui .rd{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  cursor: default;
}
.winui .ck > input,
.winui .rd > input{
  position: absolute;
  left: 0; top: 50%;
  width: 15px; height: 15px;
  margin: -7px 0 0;
  opacity: 0;
}
.winui .bx{
  position: relative;
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--ctrl-bg);
}
.winui .rd .bx{ border-radius: 50%; }
.winui .ck:hover > input:not(:checked) ~ .bx,
.winui .rd:hover > input:not(:checked) ~ .bx{ border-color: var(--text-dim); }
.winui .ck > input:checked ~ .bx,
.winui .rd > input:checked ~ .bx{ background: var(--accent); border-color: var(--accent); }

/* 2px white polyline (3,7) -> (6,10) -> (12,4) */
.winui .ck > input:checked ~ .bx::after{
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(42deg);
}

/* inner dot painted in BG */
.winui .rd > input:checked ~ .bx::after{
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bg);
}
.winui .ck > input:focus-visible ~ .bx,
.winui .rd > input:focus-visible ~ .bx{ box-shadow: 0 0 0 1px var(--accent); }
.winui .ck > .lb,
.winui .rd > .lb{ margin-left: 6px; }
.winui .ck > input:focus-visible ~ .lb,
.winui .rd > input:focus-visible ~ .lb{ outline: 1px dotted var(--text); outline-offset: 1px; }

/* ======================= combo boxes ======================= *//* ComboProc: DrawRoundedBox(CTRL_BG, BORDER, radius 4) + chevron at right-12 */
.winui .cbo{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--ctrl-bg);
  overflow: hidden;
}
.winui .cbo:hover{ border-color: var(--text-dim); }
.winui .cbo:focus-within{ border-color: var(--accent); }
.winui .cbo > select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 18px 0 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 12px/1 var(--ui-font);
  outline: none;
  cursor: default;
  text-overflow: ellipsis;
}
.winui .cbo > select > option{ background: var(--ctrl-bg); color: var(--text); }
.winui .chev{
  position: absolute;
  right: 8px; top: 7px;
  width: 7px; height: 7px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg);
  pointer-events: none;
}

/* CBS_DROPDOWN (editable) combos are not subclassed by the theme: square frame */
.winui .cbo--edit{ border-radius: 0; }
.winui .cbo-input{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 18px 0 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 12px/1 var(--ui-font);
  outline: none;
  cursor: default;
}

/* ======================= push buttons ======================= *//* PushButtonProc: DrawRoundedBox(radius 5), CTRL_HOT on hover,
   CTRL_PRESSED while down, ACCENT frame when focused */
.winui .btn{
  flex: none;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--ctrl-bg);
  color: var(--text);
  font: 12px/16px var(--ui-font);
  cursor: default;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.winui .btn:hover{ background: var(--ctrl-hot); }
.winui .btn:active{ background: var(--ctrl-pressed); }
.winui .btn:focus-visible{ border-color: var(--accent); outline: none; }
.winui .btn--h22{ height: 22px; }

/* Alarm tab: every Test button is placed at the same x (375 in panel
   coordinates) regardless of how wide the row's own controls are. */
.winui .at-test{ position: absolute; left: 360px; top: 50%; margin-top: -11px; }
.winui .btn--h25{ height: 25px; }

/* ======================= compact status log ======================= *//* Shown below every panel except Info, which keeps its own larger log. */
.winui .wu-loglbl{
  position: absolute;
  left: 20px; top: 569px;
  width: 100px; height: 18px;
  font: 12px/18px var(--ui-font);
  color: var(--text);
}
.winui .wu-log{
  position: absolute;
  left: 20px; top: 589px;
  width: 554px; height: 78px;
  /* The newest entries stay in view. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.winui .wu-win.is-info .wu-logwrap{ display: none; }

/* ======================= bottom info bar (owner-drawn) ======================= */
.winui .wu-bar{
  position: absolute;
  left: 6px; top: 675px;
  width: 582px; height: 30px;
  display: flex;
  align-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.winui .wu-bar-lbl{
  flex: none;
  width: 24px;
  margin-left: 7px;
  font: 12px/1 var(--ui-font);
  color: var(--text-dim);
}
.winui .wu-bar-lbl2{ margin-left: 14px; }
.winui .wu-bar-track{
  position: relative;
  flex: none;
  width: 185px; height: 16px;
  margin-left: 2px;
  background: var(--bar-track);
  border: 1px solid var(--border);
}
.winui .wu-bar-fill{ position: absolute; left: 1px; top: 1px; bottom: 1px; }

/* hp 1180/1450 = 81.4% of 183px; mp 640/1890 = 33.9% */
.winui .wu-bar-hp .wu-bar-fill{ width: 149px; background: var(--green); }
.winui .wu-bar-mp .wu-bar-fill{ width: 62px; background: var(--mana-blue); }
.winui .wu-bar-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 12px/1 var(--ui-font);
  color: var(--text);
}
.winui .wu-bar-pos{
  margin-left: auto;
  margin-right: 7px;
  font: 12px/1 var(--ui-font);
  color: var(--text-dim);
}

/* ======================= tooltip (comctl32 info tip) ======================= *//* TTM_SETMAXTIPWIDTH 360; AddTooltip puts the feature name on the first line
   and the description under it, with no icon and no bold title. */
.winui .wu-tip{
  position: absolute;
  z-index: 50;
  max-width: 360px;
  padding: 2px 5px 3px;
  border: 1px solid rgb(118, 118, 118);
  background: rgb(255, 255, 225);
  color: #000;
  font: 12px/15px var(--ui-font);
  pointer-events: none;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}
.winui .wu-tip-t{ display: block; }
.winui .wu-tip-b{ display: block; }
.winui .wu-tip-t:empty,
.winui .wu-tip-b:empty{ display: none; }

/* ======================= width / height utilities ======================= */
.winui .w10{width:10px}.winui .w12{width:12px}.winui .w15{width:15px}.winui .w22{width:22px}.winui .w25{width:25px}
.winui .w30{width:30px}.winui .w32{width:32px}.winui .w34{width:34px}.winui .w35{width:35px}.winui .w36{width:36px}
.winui .w38{width:38px}.winui .w40{width:40px}.winui .w42{width:42px}.winui .w44{width:44px}.winui .w45{width:45px}
.winui .w48{width:48px}.winui .w50{width:50px}.winui .w52{width:52px}.winui .w55{width:55px}.winui .w57{width:57px}
.winui .w58{width:58px}.winui .w60{width:60px}.winui .w62{width:62px}.winui .w64{width:64px}.winui .w65{width:65px}
.winui .w66{width:66px}.winui .w70{width:70px}.winui .w72{width:72px}.winui .w74{width:74px}.winui .w75{width:75px}
.winui .w76{width:76px}.winui .w80{width:80px}.winui .w82{width:82px}.winui .w85{width:85px}.winui .w90{width:90px}
.winui .w92{width:92px}.winui .w95{width:95px}.winui .w100{width:100px}.winui .w105{width:105px}.winui .w110{width:110px}
.winui .w115{width:115px}.winui .w118{width:118px}.winui .w120{width:120px}.winui .w125{width:125px}.winui .w130{width:130px}
.winui .w135{width:135px}.winui .w136{width:136px}.winui .w140{width:140px}.winui .w145{width:145px}.winui .w148{width:148px}
.winui .w150{width:150px}.winui .w155{width:155px}.winui .w160{width:160px}.winui .w165{width:165px}.winui .w170{width:170px}
.winui .w180{width:180px}.winui .w185{width:185px}.winui .w200{width:200px}.winui .w210{width:210px}.winui .w218{width:218px}
.winui .w220{width:220px}.winui .w226{width:226px}.winui .w230{width:230px}.winui .w240{width:240px}.winui .w250{width:250px}
.winui .w272{width:272px}.winui .w279{width:279px}.winui .w320{width:320px}.winui .w340{width:340px}.winui .w380{width:380px}
.winui .w396{width:396px}.winui .w400{width:400px}.winui .w436{width:436px}.winui .w444{width:444px}.winui .w534{width:534px}
.winui .w544{width:544px}.winui .w554{width:554px}
.winui .h80{height:80px}.winui .h108{height:108px}.winui .h110{height:110px}.winui .h129{height:129px}
.winui .h140{height:140px}.winui .h402{height:402px}.winui .h421{height:421px}.winui .h456{height:456px}