/* 2026-10-09 14:40 | y6y.io drop_zone v1.00 | soft hardware theme v1.2.0, light and dark
   Light is the theme as supplied. Dark keeps the same single top-left light source on a charcoal ground,
   with the three accents shifted to bright pale neon. Every colour lives in a token so components never
   hard-code a value. data-theme on <html> selects the palette (set by js/theme_boot.js before first paint). */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains_mono_variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- light (as specified) ---------- */
:root {
  color-scheme: light;
  --sh-ground: #E3E5E9;
  --sh-highlight: #FFFFFF;
  --sh-shadow: #ABB1BB;
  --sh-shadow-deep: #A3A9B3;
  --sh-shadow-inset: #B4BAC4;
  --sh-ink: #2B2F36;
  --sh-ink-strong: #000000;
  --sh-muted: #5B606A;
  --sh-tick: #8F959F;

  --sh-orange: #E07B2E;   /* active / uploading / primary accent */
  --sh-navy: #1F3A6B;     /* done */
  --sh-maroon: #7A1F2E;   /* failed */
  --sh-accent: var(--sh-orange);
  --sh-glow: 0 0 0 transparent;

  --sh-convex: linear-gradient(145deg, #EEF0F3, #D6D9DE);
  --sh-concave: linear-gradient(145deg, #D3D6DB, #EEF0F3);
  --sh-card: linear-gradient(160deg, #E9EBEF, #DCDFE4);
  --sh-dome: radial-gradient(circle at 34% 28%, #FAFBFC, #E3E5E9 45%, #CFD3D9 100%);
  --sh-knob: radial-gradient(circle at 32% 28%, #565C67, #2B2F36 48%, #17191D);
  --sh-knob-ink: #E3E5E9;
  --sh-gloss: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%);
  --sh-tube: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.18));

  --sh-primary-bg: linear-gradient(160deg, #474D57, #2B2F36 50%, #1C1F24);
  --sh-primary-bg-active: linear-gradient(160deg, #1C1F24, #2B2F36);
  --sh-primary-ink: #E3E5E9;
  --sh-primary-text-shadow: 0 -1px 0 #000000;
  --sh-primary-shadow-active: inset 3px 3px 6px #000000, inset -2px -2px 4px #3A3F48;
  --sh-hub-ink: var(--sh-ink);
  --sh-hub-icon-shadow: drop-shadow(1px 1px 0 var(--sh-highlight));

  --sh-scrim: rgba(43, 47, 54, 0.32);
  --sh-selection: rgba(224, 123, 46, 0.28);

  --sh-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.95), inset -1px -1px 0 rgba(0, 0, 0, 0.05);
  --sh-raised: 16px 16px 32px var(--sh-shadow), -12px -12px 26px var(--sh-highlight), var(--sh-bevel);
  --sh-raised-sm: 7px 7px 14px var(--sh-shadow), -6px -6px 12px var(--sh-highlight), var(--sh-bevel);
  --sh-tile: 4px 4px 9px var(--sh-shadow-inset), -3px -3px 7px var(--sh-highlight), inset 1px 1px 0 rgba(255, 255, 255, 0.95);
  --sh-inset: inset 11px 11px 22px var(--sh-shadow-inset), inset -10px -10px 20px var(--sh-highlight);
  --sh-inset-sm: inset 5px 5px 10px var(--sh-shadow-inset), inset -5px -5px 10px var(--sh-highlight);
  --sh-knob-shadow: 8px 8px 16px var(--sh-shadow), -6px -6px 12px var(--sh-highlight), inset 1px 1px 1px rgba(255, 255, 255, 0.28), inset -2px -2px 4px rgba(0, 0, 0, 0.4);
  --sh-sphere-shadow: 2px 3px 5px var(--sh-shadow-deep), -2px -2px 4px var(--sh-highlight), inset -1px -2px 3px rgba(0, 0, 0, 0.35);
  --sh-primary-shadow: var(--sh-knob-shadow);
  --sh-hub-shadow: 16px 18px 30px var(--sh-shadow-deep), -10px -10px 22px var(--sh-highlight), inset 1px 1px 1px var(--sh-highlight), inset -3px -4px 8px rgba(0, 0, 0, 0.08);
  --sh-hub-shadow-pressed: 4px 5px 10px var(--sh-shadow-deep), -3px -3px 8px var(--sh-highlight), inset 3px 3px 8px rgba(0, 0, 0, 0.08);
  --sh-emboss: 1px 1px 0 var(--sh-highlight);

  --sh-r-card: 40px;
  --sh-r-panel: 26px;
  --sh-r-row: 18px;
  --sh-r-field: 16px;
  --sh-r-pill: 999px;

  --sh-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sh-fs-display: 40px;
  --sh-fs-title: 24px;
  --sh-fs-body: 14px;
  --sh-fs-label: 13px;
  --sh-fs-meta: 11px;
}

/* ---------- dark: same geometry, charcoal ground, pale neon accents ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sh-ground: #1D2025;
  --sh-highlight: #2C3038;
  --sh-shadow: #0C0D10;
  --sh-shadow-deep: #08090B;
  --sh-shadow-inset: #101216;
  --sh-ink: #E6E9EE;
  --sh-ink-strong: #FFFFFF;
  --sh-muted: #9BA2AD;
  --sh-tick: #5E6570;

  --sh-orange: #FFB57D;   /* pale neon orange */
  --sh-navy: #8CC8FF;     /* pale neon blue */
  --sh-maroon: #FF8FAE;   /* pale neon rose */
  --sh-accent: var(--sh-orange);
  --sh-glow: 0 0 10px color-mix(in srgb, var(--sh-accent) 55%, transparent);

  --sh-convex: linear-gradient(145deg, #262A31, #191B20);
  --sh-concave: linear-gradient(145deg, #15171B, #252930);
  --sh-card: linear-gradient(160deg, #24272D, #1A1D21);
  --sh-dome: radial-gradient(circle at 34% 28%, #3A3F48, #262A31 45%, #17191D 100%);
  --sh-knob: radial-gradient(circle at 32% 28%, #F1F3F6, #C9CED6 48%, #8D939D);
  --sh-knob-ink: #1D2025;
  --sh-gloss: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);
  --sh-tube: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25));

  --sh-primary-bg: linear-gradient(160deg, #3A3F48, #2A2E35 50%, #1F2227);
  --sh-primary-bg-active: linear-gradient(160deg, #16181C, #23262C);
  --sh-primary-ink: var(--sh-orange);
  --sh-primary-text-shadow: 0 0 8px color-mix(in srgb, var(--sh-orange) 60%, transparent);
  --sh-primary-shadow-active: inset 3px 3px 6px #000000, inset -2px -2px 4px #33373F;
  --sh-primary-shadow: 8px 8px 16px var(--sh-shadow), -6px -6px 12px var(--sh-highlight), inset 1px 1px 1px rgba(255, 255, 255, 0.1), inset -2px -2px 4px rgba(0, 0, 0, 0.4);
  --sh-hub-ink: var(--sh-orange);
  --sh-hub-icon-shadow: drop-shadow(0 0 6px color-mix(in srgb, var(--sh-orange) 70%, transparent));

  --sh-scrim: rgba(0, 0, 0, 0.55);
  --sh-selection: rgba(255, 181, 125, 0.3);

  --sh-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.07), inset -1px -1px 0 rgba(0, 0, 0, 0.45);
  --sh-tile: 4px 4px 9px var(--sh-shadow-inset), -3px -3px 7px var(--sh-highlight), inset 1px 1px 0 rgba(255, 255, 255, 0.06);
  --sh-knob-shadow: 8px 8px 16px var(--sh-shadow), -6px -6px 12px var(--sh-highlight), inset 1px 1px 1px rgba(255, 255, 255, 0.6), inset -2px -2px 4px rgba(0, 0, 0, 0.35);
  --sh-sphere-shadow: 2px 3px 5px var(--sh-shadow-deep), -1px -1px 3px var(--sh-highlight), inset -1px -2px 3px rgba(0, 0, 0, 0.3);
  --sh-hub-shadow: 16px 18px 30px var(--sh-shadow-deep), -8px -8px 20px var(--sh-highlight), inset 1px 1px 1px rgba(255, 255, 255, 0.08), inset -3px -4px 8px rgba(0, 0, 0, 0.3);
  --sh-hub-shadow-pressed: 4px 5px 10px var(--sh-shadow-deep), -3px -3px 8px var(--sh-highlight), inset 3px 3px 8px rgba(0, 0, 0, 0.4);
  --sh-emboss: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sh-ground);
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-size: var(--sh-fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
a { color: var(--sh-ink); }
a:hover { color: var(--sh-ink-strong); }
:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 3px; }
::selection { background: var(--sh-selection); }

/* ---------- text ---------- */
.sh-display { font-size: var(--sh-fs-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; text-shadow: var(--sh-emboss); }
.sh-title { font-size: var(--sh-fs-title); font-weight: 700; letter-spacing: -0.02em; text-shadow: var(--sh-emboss); margin: 0; }
.sh-label { font-size: var(--sh-fs-label); color: var(--sh-muted); text-shadow: var(--sh-emboss); }
.sh-meta { font-size: var(--sh-fs-meta); color: var(--sh-muted); }
.sh-readout { display: inline-block; padding: 4px 14px; border-radius: 14px; background: var(--sh-concave); box-shadow: var(--sh-inset-sm); font-variant-numeric: tabular-nums; }

/* ---------- surfaces ---------- */
.sh-card { background: var(--sh-card); border-radius: var(--sh-r-card); box-shadow: var(--sh-raised); padding: 32px 28px; }
.sh-well { background: var(--sh-concave); border-radius: var(--sh-r-panel); box-shadow: var(--sh-inset); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sh-raised-sm { background: var(--sh-convex); box-shadow: var(--sh-raised-sm); }
.sh-pressed { background: var(--sh-concave); box-shadow: var(--sh-inset-sm); }

/* ---------- buttons ---------- */
.sh-btn {
  border: 0;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-convex);
  color: var(--sh-ink);
  font-size: var(--sh-fs-body);
  font-weight: 500;
  text-decoration: none;
  text-shadow: var(--sh-emboss);
  box-shadow: var(--sh-raised-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.sh-btn:active, .sh-btn[aria-pressed="true"] { background: var(--sh-concave); box-shadow: var(--sh-inset-sm); transform: translateY(1px); }
.sh-btn:disabled { opacity: 0.5; cursor: default; }
.sh-btn--sm { font-size: 12px; padding: 10px 16px; min-height: 40px; }
.sh-btn--primary {
  background: var(--sh-primary-bg);
  color: var(--sh-primary-ink);
  text-shadow: var(--sh-primary-text-shadow);
  border-radius: var(--sh-r-field);
  box-shadow: var(--sh-primary-shadow);
}
.sh-btn--primary:active { background: var(--sh-primary-bg-active); box-shadow: var(--sh-primary-shadow-active); }
.sh-btn--danger { color: var(--sh-maroon); }

.sh-knob {
  width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 50%;
  background: var(--sh-knob);
  color: var(--sh-knob-ink);
  box-shadow: var(--sh-knob-shadow);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease;
}
.sh-knob:active { transform: scale(0.95); }
.sh-knob__pip { width: 10px; height: 10px; border-radius: 50%; background: var(--sh-ground); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4); }

/* ---------- field ---------- */
.sh-field {
  width: 100%; min-height: 50px;
  padding: 14px 18px;
  border: 0; outline: none;
  border-radius: var(--sh-r-field);
  background: var(--sh-concave);
  color: var(--sh-ink);
  font-size: var(--sh-fs-body);
  box-shadow: var(--sh-inset-sm);
}
.sh-field::placeholder { color: var(--sh-tick); }
.sh-field:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
select.sh-field {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sh-muted) 50%), linear-gradient(135deg, var(--sh-muted) 50%, transparent 50%), var(--sh-concave);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------- segmented control ---------- */
.sh-segment { display: flex; gap: 6px; padding: 6px; border-radius: 20px; background: var(--sh-concave); box-shadow: var(--sh-inset-sm); }
.sh-segment > button {
  flex: 1 1 0; min-height: 44px; border: 0; border-radius: 14px;
  background: transparent; color: var(--sh-muted); font-size: var(--sh-fs-label);
  text-shadow: var(--sh-emboss); cursor: pointer; padding: 0 10px; white-space: nowrap;
}
.sh-segment > button[aria-pressed="true"] { background: var(--sh-convex); color: var(--sh-ink); font-weight: 700; box-shadow: var(--sh-raised-sm); }

/* ---------- switch ---------- */
.sh-switch {
  width: 84px; height: 46px; padding: 5px; border: 0; flex: none;
  border-radius: var(--sh-r-pill);
  background: var(--sh-concave);
  box-shadow: var(--sh-inset-sm);
  display: flex; justify-content: flex-start; cursor: pointer;
}
.sh-switch::after {
  content: ""; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sh-dome);
  box-shadow: 4px 4px 8px var(--sh-shadow-deep), -2px -2px 4px var(--sh-highlight);
}
.sh-switch[aria-checked="true"] { justify-content: flex-end; }
.sh-switch[aria-checked="true"]::after {
  background: var(--sh-gloss), var(--sh-accent);
  box-shadow: 4px 4px 8px var(--sh-shadow-deep), -2px -2px 4px var(--sh-highlight), inset -2px -3px 5px rgba(0, 0, 0, 0.3), var(--sh-glow);
}
.sh-switch:disabled { opacity: 0.5; cursor: default; }

/* ---------- progress ---------- */
.sh-progress { height: 14px; padding: 3px; border-radius: var(--sh-r-pill); background: var(--sh-concave); box-shadow: var(--sh-inset-sm); position: relative; }
.sh-progress__fill { height: 100%; width: 0; border-radius: var(--sh-r-pill); background: var(--sh-tube), var(--sh-accent); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25), var(--sh-glow); transition: width 200ms ease; }

/* ---------- status spheres ---------- */
.sh-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: var(--sh-sphere-shadow); }
.sh-dot--done { --sh-accent: var(--sh-navy); background: var(--sh-gloss), var(--sh-navy); box-shadow: var(--sh-sphere-shadow), var(--sh-glow); }
.sh-dot--active { --sh-accent: var(--sh-orange); background: var(--sh-gloss), var(--sh-orange); box-shadow: var(--sh-sphere-shadow), var(--sh-glow); }
.sh-dot--failed { --sh-accent: var(--sh-maroon); background: var(--sh-gloss), var(--sh-maroon); box-shadow: var(--sh-sphere-shadow), var(--sh-glow); }
.sh-dot--idle { background: var(--sh-dome); }

/* ---------- list rows ---------- */
.sh-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--sh-r-row); background: var(--sh-convex); box-shadow: var(--sh-tile); }
.sh-row__name { font-size: var(--sh-fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- drop dial ---------- */
.sh-bezel {
  width: 304px; height: 304px; border-radius: 50%;
  background: var(--sh-convex); box-shadow: var(--sh-raised);
  display: flex; align-items: center; justify-content: center;
}
.sh-dial {
  position: relative; width: 272px; height: 272px;
  border-radius: 50%; border: 0; padding: 0;
  background: var(--sh-concave);
  box-shadow: var(--sh-inset);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
.sh-dial__tick {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 8px; margin: -4px 0 0 -1px;
  border-radius: 2px; background: var(--sh-tick); box-shadow: var(--sh-emboss);
  transform: rotate(calc(var(--i) * 30deg)) translateY(-116px);
}
.sh-dial__tick--major { width: 3px; height: 13px; margin: -6.5px 0 0 -1.5px; background: var(--sh-ink); transform: rotate(calc(var(--i) * 30deg)) translateY(-114px); }
.sh-dial__hub {
  width: 136px; height: 136px; border-radius: 50%;
  background: var(--sh-dome);
  color: var(--sh-hub-ink);
  box-shadow: var(--sh-hub-shadow);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.sh-dial__hub svg { filter: var(--sh-hub-icon-shadow); }
.sh-dial.is-dragover { box-shadow: var(--sh-inset), 0 0 0 3px var(--sh-accent), var(--sh-glow); }
.sh-dial.is-dragover .sh-dial__hub, .sh-dial:active .sh-dial__hub { box-shadow: var(--sh-hub-shadow-pressed); transform: scale(0.96); }

/* ---------- utilities ---------- */
.sh-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}