/* desktop-settings-shared.css — the shared engine styling for every
 * desktop-settings panel prototype. Translates the dupre instrument-console
 * palette (themes/dupre/panel.css) into browser-friendly component classes so
 * all five direction prototypes read as one system and port near-1:1 to svg.el.
 *
 * Palette: warm near-black ground, gold border/accent, slate blue selection,
 * silver/cream text, olive pass, terracotta fail. */

:root {
  --ground: #100f0f;
  --well: #0a0c0d;
  --well2: #101214;
  --plate: #1a1917;
  --plate-edge: #262320;
  --gold: #dab53d;
  --gold-bright: #f0d879;
  --slate: #424f5e;
  --slate-hi: #54677d;
  --silver: #bfc4d0;
  --cream: #f3e7c5;
  --steel: #969385;
  --dim: #7c838a;
  --line: #2c2f32;
  --pass: #74932f;
  --fail: #cb6b4d;
  --key-top: #23211e;
  --key-bot: #191715;
  --key-edge: #33302b;
  --mono: "BerkeleyMono Nerd Font", "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body.ds-stage {
  margin: 0;
  min-height: 100vh;
  zoom: 1.6;   /* the 360px capsule reads small on a large monitor (Craig, 2026-07-21) */
  background:
    radial-gradient(1200px 600px at 80% -10%, #17151322, transparent),
    #050505;
  color: var(--silver);
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px 48px;
}

/* A caption above each prototype naming the direction (prototype chrome only,
   not part of the panel). */
.ds-caption {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 360px;
}
.ds-caption b { color: var(--gold); font-weight: 700; }

/* The bar stub the panel drops from, so the prototype shows the anchor. */
.ds-bar {
  width: 360px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #17151388, #0d0c0b);
  border: 1px solid #201d17;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px;
  color: var(--steel);
  font-size: 13px;
}
.ds-bar .gear { color: var(--gold); }

/* ---- the panel capsule --------------------------------------------------- */
.ds-panel {
  width: 360px;
  background-color: var(--ground);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 18px 50px #000a, 0 0 0 1px #0006;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* Faceplate header: raised ID plate with title, gear glyph, close. */
.ds-face {
  background-color: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-face .glyph { color: var(--gold); font-size: 18px; }
.ds-face .title { color: var(--gold); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.ds-face .sub { color: var(--steel); font-size: 11px; margin-left: auto; }
.ds-face .x {
  color: var(--dim); cursor: pointer; font-size: 15px; padding: 2px 5px;
  border-radius: 50%; line-height: 1;
}
.ds-face .x:hover { color: var(--silver); background: var(--line); }

/* Engraved section label: steel small-caps + a thin rule. */
.ds-engrave {
  color: var(--steel);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 2px 2px;
}
.ds-engrave::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* Status lamp: retired 2026-07-21 (Craig: the glowing dot pulls the eye).
   State reads from the control's own gold glyph/text instead. The spans
   still render; this hides them everywhere at once. */
.ds-lamp { display: none; }
.ds-lamp-unused {
  width: 9px; height: 9px; border-radius: 50%;
  background-color: var(--pass);
  box-shadow: 0 0 6px 1px rgba(116,147,47,.55);
  flex: none;
}
.ds-lamp.gold { background-color: var(--gold); box-shadow: 0 0 6px 1px rgba(218,181,61,.55); }
.ds-lamp.red  { background-color: var(--fail); box-shadow: 0 0 6px 1px rgba(203,107,77,.55); }
.ds-lamp.off  { background-color: var(--line); box-shadow: none; }

/* Console key: a raised mechanical button that lights gold on hover/active. */
.ds-key {
  color: var(--silver);
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bot));
  background-color: var(--key-bot);
  border: 1px solid var(--key-edge);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .12s, color .12s, background-color .12s;
}
.ds-key:hover { color: var(--gold); border-color: var(--gold); }
.ds-key .k-glyph { font-size: 15px; color: var(--steel); }
.ds-key:hover .k-glyph { color: var(--gold); }
.ds-key .k-name { color: var(--silver); }
.ds-key .k-state { margin-left: auto; color: var(--dim); font-size: 11px; }

/* Console key in the ON state: gold cast + lit lamp glyph. */
.ds-key.on {
  border-color: var(--gold);
  background-image: linear-gradient(180deg, #2a2618, #1d1a12);
}
.ds-key.on .k-glyph { color: var(--gold); }
.ds-key.on .k-name { color: var(--cream); }
.ds-key.on .k-state { color: var(--gold); }

/* A brief verify flash: after a change, the control confirms the readback. */
.ds-key.verified { animation: dsVerify 0.9s ease-out; }
@keyframes dsVerify {
  0% { box-shadow: 0 0 0 0 rgba(116,147,47,.0); }
  20% { box-shadow: 0 0 0 2px rgba(116,147,47,.55); }
  100% { box-shadow: 0 0 0 0 rgba(116,147,47,0); }
}

/* Tile (grid layout): a squarer console key with the lamp top-left. */
.ds-tile {
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bot));
  border: 1px solid var(--key-edge);
  border-radius: 10px;
  padding: 10px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 62px;
  transition: border-color .12s, background-color .12s;
}
.ds-tile:hover { border-color: var(--gold); }
.ds-tile .t-top { display: flex; align-items: center; gap: 8px; }
.ds-tile .t-glyph { font-size: 17px; color: var(--steel); }
.ds-tile .t-name { color: var(--silver); font-size: 12.5px; }
.ds-tile .t-state { color: var(--dim); font-size: 11px; margin-top: auto; }
.ds-tile.on { border-color: var(--gold); background-image: linear-gradient(180deg, #2a2618, #1d1a12); }
.ds-tile.on .t-glyph { color: var(--gold); }
.ds-tile.on .t-name { color: var(--cream); }
.ds-tile.on .t-state { color: var(--gold); }
.ds-tile.verified { animation: dsVerify 0.9s ease-out; }
.ds-tile .t-detail {
  margin-left: auto; color: var(--dim); font-size: 11px; padding: 0 3px;
}
.ds-tile .t-detail:hover { color: var(--gold); }

/* Slider row: engraved name + machined fader + % readout. */
.ds-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.ds-slider .s-glyph { color: var(--steel); font-size: 15px; width: 18px; text-align: center; }
.ds-slider .s-name { color: var(--silver); font-size: 12.5px; width: 92px; }
.ds-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--well);
  border: 1px solid var(--line);
  outline: none;
}
.ds-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold);
  cursor: pointer;
  /* The old box-shadow fill hack bled a huge gold disc outside the 6px
     track (the thumb is taller than the input, so overflow can't clip it).
     The gold fill is now painted by slider() as an inline gradient. */
}
.ds-slider input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold); cursor: pointer;
}
.ds-slider input[type=range]::-moz-range-progress { background: var(--gold); height: 6px; border-radius: 6px; }
.ds-slider .s-pct { color: var(--cream); font-size: 12px; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* Segmented selector (power profile): joined keys, the current one lit gold. */
.ds-seg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--key-edge); }
.ds-seg button {
  flex: 1;
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bot));
  color: var(--silver);
  border: none;
  border-right: 1px solid var(--key-edge);
  padding: 7px 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  cursor: pointer;
}
.ds-seg button:last-child { border-right: none; }
.ds-seg button:hover { color: var(--gold); }
.ds-seg button.cur {
  background-image: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ground);
  font-weight: 700;
}

/* Scene key: a wider console key with the scene name; active is gold-lit. */
.ds-scene {
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bot));
  border: 1px solid var(--key-edge);
  border-radius: 9px;
  padding: 9px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: border-color .12s, background-color .12s;
}
.ds-scene:hover { border-color: var(--gold); }
.ds-scene .sc-glyph { font-size: 18px; color: var(--steel); }
.ds-scene .sc-name { font-size: 11px; color: var(--silver); letter-spacing: 0.03em; }
.ds-scene.cur { border-color: var(--gold); background-image: linear-gradient(180deg, #2a2618, #1d1a12); }
.ds-scene.cur .sc-glyph { color: var(--gold); }
.ds-scene.cur .sc-name { color: var(--cream); }

/* Momentary action buttons (lock / suspend). */
.ds-act {
  background: transparent;
  border: 1px solid var(--slate);
  color: var(--silver);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ds-act:hover { border-color: var(--gold); color: var(--gold); background: #dab53d12; }
.ds-act.danger { border-color: var(--fail); color: var(--fail); }
.ds-act.danger:hover { background: var(--fail); color: var(--ground); }

/* Generic grid + row helpers. */
.ds-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ds-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.ds-col { display: flex; flex-direction: column; gap: 6px; }
.ds-well { background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }

/* Toast: a slate feedback strip that names what was applied + verified. */
.ds-toast {
  color: var(--cream);
  background-color: var(--slate);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  min-height: 18px;
  transition: opacity .3s;
}
.ds-toast .ok { color: #cfe08c; }
.ds-toast.empty { background: transparent; color: var(--dim); }

/* Wallpaper sub-view overlay: slides over the panel body, Back returns. */
.ds-subview {
  position: absolute;
  inset: 0;
  background: var(--ground);
  border-radius: 16px;
  padding: 14px 16px 16px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
.ds-subview.open { display: flex; }
.ds-sub-head { display: flex; align-items: center; gap: 10px; }
.ds-sub-head .back { color: var(--dim); cursor: pointer; font-size: 13px; }
.ds-sub-head .back:hover { color: var(--gold); }
.ds-sub-head .title { color: var(--gold); font-weight: 700; font-size: 14px; }
.ds-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ds-thumb {
  aspect-ratio: 16/10;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ds-thumb.cur { border-color: var(--gold); }
.ds-thumb .tag {
  position: absolute; bottom: 3px; left: 4px;
  font-size: 9px; color: #fff; text-shadow: 0 1px 2px #000;
}
.ds-daynight { display: flex; gap: 8px; }
.ds-daynight .dn {
  flex: 1; border-radius: 8px; border: 1px solid var(--line);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.ds-daynight .dn .lbl { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: 0.08em; }
.ds-daynight .dn .sw { width: 100%; aspect-ratio: 16/9; border-radius: 6px; }
.ds-dirs { display: flex; flex-direction: column; gap: 4px; }
.ds-dir { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--silver); padding: 3px 4px; }
.ds-dir .path { color: var(--dim); }
.ds-note { color: var(--dim); font-size: 11px; }