/* The web panel's look. The panel itself is the game's (drawn from the runtime, see
   panel/render.ts); these are its frames, and the pages around it (pairing, servers,
   training), in the panel's own style (client/ControlPanel/Style.lua): black, thin grey
   borders, Code (Inconsolata) in capitals at one size, grey text, the describers' orange
   for what's on, nothing rounded. */

@font-face {
  font-family: "Code";
  src: url("/fonts/inconsolata-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Code";
  src: url("/fonts/inconsolata-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Code";
  src: url("/fonts/inconsolata-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
}
/* Builder Sans, the panel's words (Roblox's Enum.Font.BuilderSans, Medium, Bold): the
   machine's own copy if it has one, else the files web/client/build.mjs copies in when
   they're given it; failing both, the stack in --builder. Roblox's text size is the font's
   whole height (ascender to descender, 1.26 em), so render.ts sets its em at size / 1.26. */
@font-face {
  font-family: "Builder Sans";
  src: local("Builder Sans"), local("BuilderSans-Regular"), url("/fonts/BuilderSans-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Builder Sans";
  src: local("Builder Sans Medium"), local("BuilderSans-Medium"), url("/fonts/BuilderSans-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "Builder Sans";
  src: local("Builder Sans Bold"), local("BuilderSans-Bold"), url("/fonts/BuilderSans-Bold.otf") format("opentype");
  font-weight: 700;
}

:root {
  color-scheme: dark;
  --background: #000000;
  --raised: #0e0e0e;
  --band: #151515;
  --control: #1c1c1c;
  --control-hover: #343434;
  --border: #4e4e4e;
  --text: #c8c8c8;
  --text-dim: #787878;
  --text-off: #484848;
  --accent: #ff8c00;
  --good: #1ed760;
  --warn: #f0d21e;
  --bad: #e0241b;
  --select: #00c8ff;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--text);
  font-family: "Code", "Inconsolata", ui-monospace, monospace;
  font-size: 14px;
  overflow: hidden;
}

/* --- The emulated Roblox GUI -------------------------------------------------- */
.panel-surface {
  position: fixed;
  inset: 0;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.rbx-root,
.rbx {
  position: absolute;
  left: 0;
  top: 0;
}
.rbx-root {
  width: 100%;
  height: 100%;
}
.rbx-text {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: "Code", "Inconsolata", ui-monospace, monospace;
}
/* (Text in Builder Sans: render.ts gives its layer this class.) */
.rbx-text.builder {
  font-family: "Builder Sans", "Segoe UI", system-ui, sans-serif;
}
.rbx-line {
  position: absolute;
  white-space: pre;
}
.rbx-bar {
  position: absolute;
  z-index: 100000;
}
.rbx-input {
  position: absolute;
  z-index: 1000000;
  margin: 0;
  padding: 0 6px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: "Code", "Inconsolata", ui-monospace, monospace;
}

/* --- The pages around the panel ------------------------------------------------ */
.page {
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: 16px;
  text-transform: uppercase;
}
.card {
  max-width: 640px;
  margin: 8vh auto 0;
  background: var(--background);
  border: 1px solid var(--border);
}
.card.wide {
  max-width: 920px;
}
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  background: var(--raised);
  border-bottom: 1px solid var(--border);
}
.bar .title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.heading {
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  height: 24px;
  line-height: 24px;
}
.dim {
  color: var(--text-dim);
}
.row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  flex-wrap: wrap;
}
.row .grow {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button,
.button {
  height: 24px;
  padding: 0 8px;
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
button:hover:not(:disabled),
.button:hover {
  background: var(--control-hover);
}
button.on {
  background: var(--accent);
  color: #000;
}
button:disabled {
  color: var(--text-off);
  cursor: default;
}
input.field {
  height: 24px;
  padding: 0 6px;
  background: var(--background);
  color: var(--text);
  border: 1px solid var(--border);
  font: inherit;
  text-transform: uppercase;
  outline: none;
}
input.field:focus {
  border-color: var(--accent);
}
input.code {
  font-size: 28px;
  height: 44px;
  width: 9ch;
  letter-spacing: 0.3ch;
  text-align: center;
}
.chip {
  display: inline-block;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  font-size: 13px;
  color: #000;
  background: var(--text-dim);
}
.chip.good {
  background: var(--good);
}
.chip.warn {
  background: var(--warn);
}
.chip.bad {
  background: var(--bad);
  color: #fff;
}
.chip.accent {
  background: var(--accent);
}
.message {
  min-height: 22px;
  line-height: 22px;
}
.message.bad {
  color: var(--bad);
}
.list > .row {
  border-bottom: 1px solid #222;
  padding: 2px 0;
}
.big {
  font-size: 28px;
  color: var(--text);
}
table.metrics {
  border-collapse: collapse;
  width: 100%;
}
table.metrics td,
table.metrics th {
  border-bottom: 1px solid #222;
  height: 22px;
  padding: 0 6px;
  text-align: left;
  font-weight: 400;
}
table.metrics th {
  color: var(--text-dim);
}
.timeline .row .at {
  width: 10ch;
  color: var(--text-dim);
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.overlay .card {
  margin: 0;
  min-width: 360px;
}
.corner {
  position: fixed;
  z-index: 1500000;
  right: 8px;
  bottom: 40px;
  display: flex;
  gap: 4px;
  text-transform: uppercase;
}
.rbx-canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.reopen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000001;
}

/* The live mock-up's window (ui/panelPage.ts mockPage): one design size, scaled by the page. */
.mock-stage {
  position: fixed;
  inset: 0;
  background: #0b0b0b;
  overflow: hidden;
}
.mock-window {
  position: absolute;
  left: 0;
  top: 0;
  width: 744px;
  height: 1133px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
  user-select: none;
  touch-action: none;
}