/* The look of the controls of the emulator page and the disk manager: raised buttons with a light top edge and a dark outline, recessed
 * fields, sunken pressed buttons, joined groups (.segmented) and slide switches. Dark (the main look) and light share the same shapes;
 * only the tokens change. The page colours (--bg --panel --text --muted --accent --border) are in style.css. */
:root {
  --btn-top: #fdfdfc;
  --btn-bottom: #e6e6e2;
  --btn-hover-top: #ffffff;
  --btn-hover-bottom: #efefeb;
  --btn-sunk-top: #dcdcd7;
  --btn-sunk-bottom: #e6e6e1;
  --btn-border: #b0b0aa;
  --btn-edge: rgb(255 255 255 / 0.9);
  --btn-drop: rgb(0 0 0 / 0.07);
  --btn-sunk-shadow: rgb(0 0 0 / 0.28);
  --btn-text-shadow: 0 1px 0 rgb(255 255 255 / 0.9);
  --field: #efefec;
  --field-shadow: rgb(0 0 0 / 0.2);
  --scroll-thumb: #b4b4ae;
  --scroll-track: #ecece8;
  color-scheme: light;
  --accent-top: #2b6fdc;
  --accent-bottom: #0b57d0;
  --accent-glow: rgb(11 87 208 / 0.45);
  --on-accent: #ffffff;
  --led-off: #8d9a8f;
  --led-on: #1fb84a;
  --led-glow: rgb(31 184 74 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --btn-top: #3e3f42;
    --btn-bottom: #2d2e30;
    --btn-hover-top: #47484c;
    --btn-hover-bottom: #333437;
    --btn-sunk-top: #242527;
    --btn-sunk-bottom: #2c2d2f;
    --btn-border: #151516;
    --btn-edge: rgb(255 255 255 / 0.09);
    --btn-drop: rgb(255 255 255 / 0.05);
    --btn-sunk-shadow: rgb(0 0 0 / 0.65);
    --btn-text-shadow: 0 -1px 0 rgb(0 0 0 / 0.7);
    --field: #232426;
    --field-shadow: rgb(0 0 0 / 0.7);
    --scroll-thumb: #5a5c61;
    --scroll-track: #26272a;
    color-scheme: dark;
    --accent-top: #55b0f5;
    --accent-bottom: #2f8ddc;
    --accent-glow: rgb(61 155 233 / 0.6);
    --on-accent: #0b1620;
    --led-off: #1d2a21;
    --led-on: #3ddc6a;
    --led-glow: rgb(61 220 106 / 0.8);
  }
}

/* ---- buttons: <button>, a label or a link with class button, the Mount menu ---- */

button, .button, .menu > summary {
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text);
  text-shadow: var(--btn-text-shadow);
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--btn-border);
  border-radius: 5px;
  padding: 5px 11px;
  box-shadow: inset 0 1px 0 var(--btn-edge), 0 1px 0 var(--btn-drop);
  cursor: pointer;
  transition: box-shadow 80ms, color 80ms;
}

a.button, label.button { display: inline-flex; align-items: center; text-decoration: none; }

button:hover:not(:disabled), .button:hover, .menu > summary:hover {
  background: linear-gradient(var(--btn-hover-top), var(--btn-hover-bottom));
}

/* pressed, and "on" for the toggles (Sound, Mouse, Fit, Two panels) */
button:active:not(:disabled), .button:active, .menu[open] > summary, button[aria-pressed="true"] {
  background: linear-gradient(var(--btn-sunk-top), var(--btn-sunk-bottom));
  box-shadow: inset 0 2px 4px var(--btn-sunk-shadow);
  text-shadow: none;
}
button[aria-pressed="true"] {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* a button with a light: the light is on while the toggle is on (Power, Sound, Mouse); the text keeps its colour */
button.led { display: inline-flex; align-items: center; gap: 7px; }
button[hidden], .button[hidden] { display: none; }        /* the display of the skin must not show a button the page hid (Network without a server) */
button.led::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led-off);
  border: 1px solid var(--btn-border);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5);
  transition: background-color 80ms, box-shadow 80ms;
}
button.led[aria-pressed="true"] { color: var(--text); text-shadow: var(--btn-text-shadow); }
button.led[aria-pressed="true"]::before {
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--led-on) 45%);
  border-color: var(--led-on);
  box-shadow: 0 0 6px 1px var(--led-glow);
}

/* the light of a drive: on while the PC reads or writes it (app.js showActivity) */
.drive-led {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led-off);
  border: 1px solid var(--btn-border);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5);
}
.drive-led[data-on="true"] {
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--led-on) 45%);
  border-color: var(--led-on);
  box-shadow: 0 0 6px 1px var(--led-glow);
}

button:disabled, .button.disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

button.primary {
  background: linear-gradient(var(--accent-top), var(--accent-bottom));
  color: var(--on-accent);
  border-color: var(--accent-bottom);
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 1px 0 var(--btn-drop);
}
button.primary:hover:not(:disabled) { background: linear-gradient(var(--accent-top), var(--accent-bottom)); filter: brightness(1.1); }
button.primary:active:not(:disabled) { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.4); filter: none; }

/* a button that is plain text: the path bar of the manager and the items of its menus */
.pathbar button, .pathbar button:hover:not(:disabled), .pathbar button:active:not(:disabled), #menu button, #menu button:active:not(:disabled) {
  background: none;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ---- fields: recessed ---- */

select, input[type="text"], input[type="number"] {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--btn-border);
  border-radius: 5px;
  padding: 4px 8px;
}
input[type="text"], input[type="number"] {
  background: var(--field);
  box-shadow: inset 0 1px 3px var(--field-shadow), 0 1px 0 var(--btn-drop);
}
::placeholder { color: var(--muted); opacity: 0.85; }

/* a select is a raised button with a caret (two gradients in the text colour, so that it follows the theme) */
select {
  appearance: none;
  cursor: pointer;
  padding-right: 26px;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 13px) 55% / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) 55% / 5px 5px no-repeat,
    linear-gradient(var(--btn-top), var(--btn-bottom));
  box-shadow: inset 0 1px 0 var(--btn-edge), 0 1px 0 var(--btn-drop);
}
select:disabled { opacity: 0.45; cursor: default; }

/* ---- joined groups ---- */

.segmented { display: inline-flex; flex-wrap: nowrap; align-items: stretch; }
.segmented > * { border-radius: 0; margin-left: -1px; }
.segmented > :first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
.segmented > :last-child { border-radius: 0 5px 5px 0; }
.segmented > :only-child { border-radius: 5px; }
.segmented > :hover, .segmented > :focus-visible, .segmented > [aria-pressed="true"] { position: relative; z-index: 1; }

/* the readout of the zoom: a recessed box like the "4 AM" field of a hardware panel */
.zoom-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--btn-border);
  box-shadow: inset 0 1px 3px var(--field-shadow);
}

/* ---- slide switch (Allow changes in the manager) ---- */

.switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 20px;
  margin: 0;
  border-radius: 10px;
  background: var(--field);
  border: 1px solid var(--btn-border);
  box-shadow: inset 0 1px 3px var(--field-shadow), 0 1px 0 var(--btn-drop);
  cursor: pointer;
  transition: background-color 120ms, box-shadow 120ms;
}
.switch input::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--btn-border);
  box-shadow: inset 0 1px 0 var(--btn-edge), 0 1px 2px rgb(0 0 0 / 0.4);
  transition: transform 120ms;
}
.switch input:checked {
  background: linear-gradient(var(--accent-bottom), var(--accent-top));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45), 0 0 7px var(--accent-glow);
}
.switch input:checked::before { transform: translateX(18px); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { opacity: 0.5; cursor: default; }

/* a check box: a recessed square, blue with a check mark when it is on */
input[type="checkbox"]:not([role="switch"]) {
  appearance: none;
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  background: var(--field);
  box-shadow: inset 0 1px 3px var(--field-shadow), 0 1px 0 var(--btn-drop);
  cursor: pointer;
  transition: background-color 80ms, box-shadow 80ms;
}
input[type="checkbox"]:not([role="switch"]):hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]:not([role="switch"]):checked {
  background: linear-gradient(var(--accent-bottom), var(--accent-top));
  border-color: var(--accent-bottom);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35), 0 0 6px var(--accent-glow);
}
input[type="checkbox"]:not([role="switch"]):checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not([role="switch"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:not([role="switch"]):disabled { opacity: 0.5; cursor: default; }

/* the list of a select, and the scroll bars, follow the theme (the browser draws them in the dark colours with color-scheme) */
select option, select optgroup { background-color: var(--panel); color: var(--text); }
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
  button, button.led::before, .button, .menu > summary, .switch input, .switch input::before, input[type="checkbox"] { transition: none; }
}