/*!
 * bedrock 1.3.0 — Minecraft-inventory theme (bevelled panels, slots, stone wall).
 * Demo: https://cdn.goldan.net/bedrock/1/
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* On-screen size of one 16px texture block: drives the whole wall. */
  --block: 64px;
  --bevel: 4px;

  /* Dimmed inventory palette: no pure white, muted greys, so long sessions
     stay easy on the eyes. Bevels: *-light is the lit top-left edge. */
  --panel: #9a9a9a;
  --panel-light: #c4c4c4;
  --panel-ink: #222222;
  --panel-soft: #383838;
  --panel-muted: #4a4a4a;
  --slot: #2b2b2b;
  --slot-hover: #3a3a3a;
  --slot-light: #6a6a6a;
  --outline: #121212;
  --item: #6e6e6e;
  --field: #0b0b0b;
  --field-border: #6f6f6f;
  --field-focus: #bdbdbd;
  --field-placeholder: #666666;

  --text: #e4e4e4;
  --text-soft: #c2c2c2;
  --text-muted: #939393;
  --ok: #67cf67;
  --warn: #dcc05c;
  --danger: #e06666;

  --button: #565656;
  --button-hover: #686868;
  --button-light: #858585;
  --button-dark: #363636;
  --button-hover-text: #eee3a6;
  --go: #337322;
  --go-hover: #3c8329;
  --go-light: #4c9a32;
  --go-dark: #183e10;
  --stop: #8c241f;
  --stop-hover: #9f2c26;
  --stop-light: #b23a34;
  --stop-dark: #4c100e;
  --off: #474747;

  --font: ui-monospace, "DejaVu Sans Mono", "Courier New", monospace;
}

/* -------------------------------------------------------------------- base */

* { box-sizing: border-box; }

/* Stone wall with a few diamond ores. Add .bg-netherrack for the red one
   (5xx pages), .bg-plain for a flat gradient. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background-color: #7d7d7d;
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%232b8f88%22%20d%3D%22M21%204h2v1h-2zM20%205h1v1h-1zM23%205h1v1h-1zM19%206h1v1h-1zM24%206h1v1h-1zM19%207h1v1h-1zM24%207h1v1h-1zM20%208h1v1h-1zM23%208h1v1h-1zM56%208h2v1h-2zM21%209h2v1h-2zM55%209h1v1h-1zM58%209h1v1h-1zM55%2010h1v1h-1zM59%2010h1v1h-1zM56%2011h1v1h-1zM58%2011h1v1h-1zM57%2012h1v1h-1zM7%2034h2v1h-2zM6%2035h1v1h-1zM9%2035h1v1h-1zM5%2036h1v1h-1zM9%2036h1v1h-1zM6%2037h1v1h-1zM10%2037h1v1h-1zM6%2038h1v1h-1zM9%2038h1v1h-1zM7%2039h2v1h-2zM36%2054h2v1h-2zM35%2055h1v1h-1zM38%2055h1v1h-1zM34%2056h1v1h-1zM39%2056h1v1h-1zM34%2057h1v1h-1zM39%2057h1v1h-1zM35%2058h1v1h-1zM38%2058h1v1h-1zM36%2059h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%23a8f5ee%22%20d%3D%22M21%205h2v1h-2zM56%209h2v1h-2zM7%2035h2v1h-2zM36%2055h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%234ce0d5%22%20d%3D%22M20%206h4v1h-4zM20%207h4v1h-4zM21%208h2v1h-2zM56%2010h3v1h-3zM57%2011h1v1h-1zM6%2036h3v1h-3zM7%2037h3v1h-3zM7%2038h2v1h-2zM35%2056h4v1h-4zM35%2057h4v1h-4zM36%2058h2v1h-2z%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%238a8a8a%22%20d%3D%22M2%200h1v1h-1zM4%202h1v1h-1zM11%202h1v1h-1zM0%203h1v1h-1zM5%203h1v1h-1zM9%203h2v1h-2zM14%203h1v1h-1zM5%204h1v1h-1zM7%204h2v1h-2zM13%204h1v1h-1zM3%205h1v1h-1zM2%207h1v1h-1zM5%207h1v1h-1zM1%2010h1v1h-1zM5%2010h1v1h-1zM7%2010h1v1h-1zM7%2011h1v1h-1zM6%2012h1v1h-1zM9%2012h1v1h-1zM12%2012h1v1h-1zM6%2013h1v1h-1zM5%2014h1v1h-1z%22%2F%3E%3Cpath%20fill%3D%22%23727272%22%20d%3D%22M4%200h1v1h-1zM7%200h1v1h-1zM0%201h1v1h-1zM2%201h1v1h-1zM13%201h2v1h-2zM0%202h1v1h-1zM7%202h1v1h-1zM13%202h2v1h-2zM7%203h1v1h-1zM11%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM10%205h1v1h-1zM7%206h2v1h-2zM13%206h1v1h-1zM0%207h2v1h-2zM11%207h1v1h-1zM8%208h1v1h-1zM0%209h2v1h-2zM10%209h1v1h-1zM12%209h1v1h-1zM14%209h1v1h-1zM6%2010h1v1h-1zM1%2011h1v1h-1zM2%2012h1v1h-1zM5%2012h1v1h-1zM13%2012h1v1h-1zM1%2014h1v1h-1zM6%2014h1v1h-1z%22%2F%3E%3Cpath%20fill%3D%22%236b6b6b%22%20d%3D%22M13%200h1v1h-1zM6%201h1v1h-1zM11%201h1v1h-1zM10%202h1v1h-1zM12%203h1v1h-1zM2%204h1v1h-1zM10%204h1v1h-1zM7%205h1v1h-1zM11%205h3v1h-3zM1%206h1v1h-1zM4%207h1v1h-1zM6%207h2v1h-2zM7%208h1v1h-1zM14%208h1v1h-1zM6%209h1v1h-1zM0%2010h1v1h-1zM10%2010h1v1h-1zM12%2010h3v1h-3zM4%2012h1v1h-1zM7%2012h1v1h-1zM11%2012h1v1h-1zM1%2013h1v1h-1zM11%2013h1v1h-1zM13%2013h1v1h-1zM9%2014h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%235f5f5f%22%20d%3D%22M15%200h1v1h-1zM15%201h1v1h-1zM15%202h1v1h-1zM15%203h1v1h-1zM15%204h1v1h-1zM15%205h1v1h-1zM15%206h1v1h-1zM15%207h1v1h-1zM15%208h1v1h-1zM15%209h1v1h-1zM15%2010h1v1h-1zM15%2011h1v1h-1zM15%2012h1v1h-1zM15%2013h1v1h-1zM15%2014h1v1h-1zM0%2015h16v1h-16z%22%2F%3E%3Cpath%20fill%3D%22%23868686%22%20d%3D%22M1%201h1v1h-1zM4%201h1v1h-1zM2%203h1v1h-1zM3%204h1v1h-1zM9%204h1v1h-1zM2%206h1v1h-1zM14%206h1v1h-1zM9%209h1v1h-1zM11%2010h1v1h-1zM8%2011h1v1h-1zM10%2011h3v1h-3zM3%2012h1v1h-1zM10%2012h1v1h-1zM2%2013h1v1h-1zM5%2013h1v1h-1zM10%2013h1v1h-1zM14%2013h1v1h-1zM4%2014h1v1h-1zM7%2014h1v1h-1z%22%2F%3E%3C%2Fsvg%3E");
  background-size:
    cover,
    calc(var(--block) * 4) calc(var(--block) * 4),
    var(--block) var(--block);
  background-repeat: no-repeat, repeat, repeat;
  background-attachment: fixed;
  image-rendering: pixelated;
}
body.bg-netherrack {
  background-color: #6b2c2b;
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%239c9284%22%20d%3D%22M21%204h2v1h-2zM20%205h1v1h-1zM23%205h1v1h-1zM19%206h1v1h-1zM24%206h1v1h-1zM19%207h1v1h-1zM24%207h1v1h-1zM20%208h1v1h-1zM23%208h1v1h-1zM56%208h2v1h-2zM21%209h2v1h-2zM55%209h1v1h-1zM58%209h1v1h-1zM55%2010h1v1h-1zM59%2010h1v1h-1zM56%2011h1v1h-1zM58%2011h1v1h-1zM57%2012h1v1h-1zM7%2034h2v1h-2zM6%2035h1v1h-1zM9%2035h1v1h-1zM5%2036h1v1h-1zM9%2036h1v1h-1zM6%2037h1v1h-1zM10%2037h1v1h-1zM6%2038h1v1h-1zM9%2038h1v1h-1zM7%2039h2v1h-2zM36%2054h2v1h-2zM35%2055h1v1h-1zM38%2055h1v1h-1zM34%2056h1v1h-1zM39%2056h1v1h-1zM34%2057h1v1h-1zM39%2057h1v1h-1zM35%2058h1v1h-1zM38%2058h1v1h-1zM36%2059h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M21%205h2v1h-2zM56%209h2v1h-2zM7%2035h2v1h-2zM36%2055h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%23e6dfd5%22%20d%3D%22M20%206h4v1h-4zM20%207h4v1h-4zM21%208h2v1h-2zM56%2010h3v1h-3zM57%2011h1v1h-1zM6%2036h3v1h-3zM7%2037h3v1h-3zM7%2038h2v1h-2zM35%2056h4v1h-4zM35%2057h4v1h-4zM36%2058h2v1h-2z%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%237d3634%22%20d%3D%22M2%200h1v1h-1zM4%202h1v1h-1zM11%202h1v1h-1zM0%203h1v1h-1zM5%203h1v1h-1zM9%203h2v1h-2zM14%203h1v1h-1zM5%204h1v1h-1zM7%204h2v1h-2zM13%204h1v1h-1zM3%205h1v1h-1zM2%207h1v1h-1zM5%207h1v1h-1zM1%2010h1v1h-1zM5%2010h1v1h-1zM7%2010h1v1h-1zM7%2011h1v1h-1zM6%2012h1v1h-1zM9%2012h1v1h-1zM12%2012h1v1h-1zM6%2013h1v1h-1zM5%2014h1v1h-1z%22%2F%3E%3Cpath%20fill%3D%22%235f2625%22%20d%3D%22M4%200h1v1h-1zM7%200h1v1h-1zM0%201h1v1h-1zM2%201h1v1h-1zM13%201h2v1h-2zM0%202h1v1h-1zM7%202h1v1h-1zM13%202h2v1h-2zM7%203h1v1h-1zM11%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM10%205h1v1h-1zM7%206h2v1h-2zM13%206h1v1h-1zM0%207h2v1h-2zM11%207h1v1h-1zM8%208h1v1h-1zM0%209h2v1h-2zM10%209h1v1h-1zM12%209h1v1h-1zM14%209h1v1h-1zM6%2010h1v1h-1zM1%2011h1v1h-1zM2%2012h1v1h-1zM5%2012h1v1h-1zM13%2012h1v1h-1zM1%2014h1v1h-1zM6%2014h1v1h-1z%22%2F%3E%3Cpath%20fill%3D%22%23572220%22%20d%3D%22M13%200h1v1h-1zM6%201h1v1h-1zM11%201h1v1h-1zM10%202h1v1h-1zM12%203h1v1h-1zM2%204h1v1h-1zM10%204h1v1h-1zM7%205h1v1h-1zM11%205h3v1h-3zM1%206h1v1h-1zM4%207h1v1h-1zM6%207h2v1h-2zM7%208h1v1h-1zM14%208h1v1h-1zM6%209h1v1h-1zM0%2010h1v1h-1zM10%2010h1v1h-1zM12%2010h3v1h-3zM4%2012h1v1h-1zM7%2012h1v1h-1zM11%2012h1v1h-1zM1%2013h1v1h-1zM11%2013h1v1h-1zM13%2013h1v1h-1zM9%2014h2v1h-2z%22%2F%3E%3Cpath%20fill%3D%22%234a1c1b%22%20d%3D%22M15%200h1v1h-1zM15%201h1v1h-1zM15%202h1v1h-1zM15%203h1v1h-1zM15%204h1v1h-1zM15%205h1v1h-1zM15%206h1v1h-1zM15%207h1v1h-1zM15%208h1v1h-1zM15%209h1v1h-1zM15%2010h1v1h-1zM15%2011h1v1h-1zM15%2012h1v1h-1zM15%2013h1v1h-1zM15%2014h1v1h-1zM0%2015h16v1h-16z%22%2F%3E%3Cpath%20fill%3D%22%2377322f%22%20d%3D%22M1%201h1v1h-1zM4%201h1v1h-1zM2%203h1v1h-1zM3%204h1v1h-1zM9%204h1v1h-1zM2%206h1v1h-1zM14%206h1v1h-1zM9%209h1v1h-1zM11%2010h1v1h-1zM8%2011h1v1h-1zM10%2011h3v1h-3zM3%2012h1v1h-1zM10%2012h1v1h-1zM2%2013h1v1h-1zM5%2013h1v1h-1zM10%2013h1v1h-1zM14%2013h1v1h-1zM4%2014h1v1h-1zM7%2014h1v1h-1z%22%2F%3E%3C%2Fsvg%3E");
}
body.bg-plain { background: radial-gradient(circle at center, #6e6e6e, #3a3a3a) fixed; }
img { image-rendering: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ok); outline-offset: 2px; }

/* Page column. */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(0.75rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem) 3rem;
  display: grid;
  gap: 1.5rem;
}
.wrap.narrow { max-width: 1100px; }
/* One panel centred on the screen (error pages, login, single message). */
.center { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(0.75rem, 4vw, 2rem); }

/* Responsive grid of equal cells. */
.grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
/* Vertical stack: children one under the other, evenly spaced. */
.stack { display: grid; gap: 0.75rem; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ------------------------------------------------------- panels and slots */

/* Inventory panel: light face, bright top-left bevel, dark bottom-right. */
.panel {
  padding: clamp(0.6rem, 2vw, 1rem);
  color: var(--panel-ink);
  background: var(--panel);
  border: var(--bevel) solid;
  border-color: var(--panel-light) var(--panel-soft) var(--panel-soft) var(--panel-light);
  box-shadow: 0 0 0 var(--bevel) var(--outline), 0 12px 0 rgba(0, 0, 0, 0.35);
}
.panel h1, .panel h2, .panel h3 { margin: 0; letter-spacing: 0.05em; }
.panel h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.panel-title { margin: 0 0 0.6rem; display: flex; align-items: baseline; gap: 0.6rem; font-size: 1rem; }
.count { font-size: 0.8rem; font-weight: normal; color: var(--panel-muted); }
/* Direct text of a panel; a p.slot inside a panel keeps the slot colours. */
.panel > p:not(.slot), .brand p { color: var(--panel-soft); }

/* Header panel: title + subtitle on the left, actions on the right. */
.brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand p { margin: 0.25rem 0 0; font-size: 0.85rem; }

/* Inset slot: same bevel, inverted. Dark background, light text. */
.slot {
  color: var(--text);
  background: var(--slot);
  border: var(--bevel) solid;
  border-color: var(--outline) var(--slot-light) var(--slot-light) var(--outline);
}
.slot.pad { padding: clamp(0.75rem, 3vw, 1rem); }
.slot p { color: var(--text-soft); }
a.slot { text-decoration: none; }
a.slot:hover, .slot.hoverable:hover { background: var(--slot-hover); }

/* Inventory item: a square icon cell, with a letter fallback under the image. */
.item {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--item);
  border-top: 2px solid var(--panel-soft);
  border-left: 2px solid var(--panel-soft);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--panel-ink);
  overflow: hidden;
}
.item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--item); }

/* ------------------------------------------------------------------- text */

.shadowed { text-shadow: 2px 2px 0 var(--outline); }
.hint { margin: 0.6rem 0 0; font-size: 0.8rem; }
.muted { color: var(--text-muted); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }
.empty { margin: 0; padding: 1rem; text-align: center; color: var(--text-soft); }
.footer { text-align: center; font-size: 0.8rem; color: var(--text-soft); text-shadow: 2px 2px 0 var(--outline); }
code { font-family: var(--font); }

kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.3em;
  font: inherit;
  text-align: center;
  color: var(--panel-ink);
  background: #b5b5b5;
  border: 2px solid;
  border-color: #d0d0d0 #777777 #777777 #d0d0d0;
}

/* Green-on-black block: commands, credentials, secrets to copy. */
.terminal {
  margin: 0;
  width: 100%;
  padding: 0.75rem;
  background: var(--field);
  border: 2px solid var(--panel-soft);
  font: 0.8rem/1.5 var(--font);
  color: var(--ok);
  white-space: pre;
  overflow-x: auto;
}
.terminal.wrap-text { white-space: pre-wrap; word-break: break-all; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--panel-ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--button);
  border: 3px solid;
  border-color: var(--button-light) var(--button-dark) var(--button-dark) var(--button-light);
  box-shadow: 0 0 0 2px #000000;
  cursor: pointer;
}
@media (hover: hover) { .btn:hover { background: var(--button-hover); color: var(--button-hover-text); } }
.btn:disabled { opacity: 0.55; cursor: default; color: var(--text); background: var(--button); }
.btn.go { background: var(--go); border-color: var(--go-light) var(--go-dark) var(--go-dark) var(--go-light); }
@media (hover: hover) { .btn.go:hover { background: var(--go-hover); } }
.btn.stop { background: var(--stop); border-color: var(--stop-light) var(--stop-dark) var(--stop-dark) var(--stop-light); }
@media (hover: hover) { .btn.stop:hover { background: var(--stop-hover); } }
.btn:disabled.go, .btn:disabled.stop { filter: grayscale(0.6); }
.btn.small { min-height: 1.9rem; padding: 0 0.6rem; font-size: 0.8rem; }
.btn.icon { padding: 0; width: 2.25rem; }
.btn.small.icon { width: 1.9rem; }
.btn svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- status */

/* Square status light. */
.dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; margin-right: 0.5rem; vertical-align: middle; background: var(--off); box-shadow: 0 0 0 2px #000000; }
.dot.on { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--danger); }

/* Outlined label; takes the colour of the text. */
.tag { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.4rem; border: 2px solid currentColor; }

/* Inline banner inside a panel. */
.alert { padding: 0.6rem 0.8rem; color: var(--warn); }
.alert.err { color: var(--danger); }
.alert.ok { color: var(--ok); }

/* ------------------------------------------------------------------ forms */

/* <label class="field">Name <input class="input"></label> */
.field { display: grid; gap: 0.25rem; font-size: 0.75rem; }
.slot .field { color: var(--text-soft); }
.input {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--field);
  border: 3px solid var(--field-border);
  border-radius: 0;
  outline: none;
}
textarea.input { padding: 0.5rem 0.6rem; min-height: 5rem; resize: vertical; }
.input:focus { border-color: var(--field-focus); }
.input::placeholder { color: var(--field-placeholder); }
.input:disabled { opacity: 0.55; }
.field-error { margin: 0; font-size: 0.8rem; color: var(--danger); }

/* Search bar: icon + borderless input + extras, one bordered box. */
.search { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem; background: var(--field); border: 3px solid var(--field-border); }
.search:focus-within { border-color: var(--field-focus); }
.search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); }
.search input { flex: 1; min-width: 0; height: 2rem; background: transparent; border: 0; outline: none; font: inherit; font-size: 1rem; color: var(--text); }
.search input::placeholder { color: var(--field-placeholder); }
.search input::-webkit-search-cancel-button { display: none; }

/* <label class="switch"><input type="checkbox"><span class="track"></span> Label</label> */
.switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 2.6rem; height: 1.3rem; flex: 0 0 auto; background: var(--off); box-shadow: 0 0 0 2px #000000; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); background: var(--panel); }
.switch input:checked + .track { background: var(--go); }
.switch input:checked + .track::after { left: calc(2.6rem - 1.3rem + 3px); }
.switch input:focus-visible + .track { outline: 3px solid var(--ok); outline-offset: 2px; }
.switch input:disabled + .track { opacity: 0.5; }
.switch:has(input:disabled) { cursor: default; }

/* ------------------------------------------------------------------ table */

/* Put it in a .slot; wrap in .table-scroll for wide tables on phones. */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th, .table td { padding: 0.45rem 0.6rem; text-align: left; white-space: nowrap; }
.table th { color: var(--text-muted); font-weight: normal; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.table tbody tr + tr td { border-top: 2px solid #1f1f1f; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- dialog, toast */

/* <dialog class="dialog"><form class="panel" method="dialog">
     <div class="slot dialog-body">…</div><div class="dialog-actions">…</div>
   </form></dialog> */
.dialog { padding: 0; border: 0; background: transparent; color: inherit; width: 420px; max-width: calc(100vw - 2rem); }
.dialog.wide { width: 46rem; }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog .panel { box-shadow: 0 0 0 var(--bevel) var(--outline); }
.dialog-body { padding: 1rem; display: grid; gap: 0.8rem; }
.dialog-body h2 { margin: 0; font-size: 1.05rem; }
.dialog-body h2:focus { outline: none; }
.dialog-body p { margin: 0; font-size: 0.85rem; line-height: 1.6; }
.dialog-body .input { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }

.toasts { position: fixed; z-index: 10; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: grid; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem); }
.toast { padding: 0.6rem 1rem; font-size: 0.85rem; box-shadow: 0 0 0 2px #000000; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  :root { --block: 40px; --bevel: 3px; }
  .panel { box-shadow: 0 0 0 var(--bevel) var(--outline); }
}
@media (max-height: 420px) {
  :root { --block: 32px; }
}
@media (pointer: coarse) {
  .btn.small { min-height: 2.25rem; }
  .btn.small.icon { width: 2.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .slot, .input, .search { transition: background-color 0.1s, border-color 0.1s, color 0.1s; }
  .switch .track::after { transition: left 0.12s; }
}