/* cool-toolbox — NIGHT KIOSK design system
   Deep night blue/black · machine-glow white · one candy accent per tool.
   Tool pages run the "daylight" build of this system: night palette + accent glow
   + dispense moment, no heavy canvas (hub only). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-var.woff2) format('woff2');
}

:root {
  /* night */
  --night-0: #04060c;   /* the corridor — page ground */
  --night-1: #0a101d;   /* machine body */
  --night-2: #101a2e;   /* recessed panel */
  --night-3: #182440;   /* raised edge / hairline base */
  --glass: #0d1526;
  --hairline: rgba(140, 170, 220, 0.14);
  --hairline-bright: rgba(160, 190, 235, 0.28);

  /* glow whites */
  --white: #eef4ff;
  --text: #c3d0e7;
  --dim: #7d8ca6;
  --faint: #4d5a72;

  /* candy accents — one per tool, the roster system */
  --acc-resize:   #4fe3ff;  /* A1 electric cyan */
  --acc-compress: #ffb03a;  /* A2 citrus orange */
  --acc-convert:  #ff5ca8;  /* A3 candy magenta */
  --acc-qr:       #8cff57;  /* A4 acid green */
  --acc-pdf:      #9d7cff;  /* A5 soda grape */
  --acc-timer:    #9ecbff;  /* B5 ice blue */
  --acc-grade:    #ff4f7b;  /* D1 raspberry */
  --acc-pick:     #4dffd2;  /* D2 mint */
  --acc-group:    #5e9bff;  /* D3 azure */
  --acc-bingo:    #ffe14d;  /* D4 lemon */
  --acc-unit:     #52e0a0;  /* C3 jade */
  --acc-map:      #ff6a4d;  /* E1 blood orange */
  --acc-urine:    #e6c33f;  /* E2 amber */
  --acc-gcs:      #c77dff;  /* E3 bright violet */
  --acc-mil:      #8ad0ff;  /* E4 sky */
  --acc-shift:    #ffd28a;  /* E5 pale gold */
  --acc-sched:    #8affc4;  /* F1 seafoam */
  --acc-brain:    #ff8ab8;  /* F2 rose */
  --acc-card:     #6ad9e6;  /* reference cards, shared teal */
  --acc-imgpdf:   #ffb27a;  /* B1 peach */
  --acc-words:    #b8ff5c;  /* B2 lime */
  --acc-pass:     #ff5252;  /* B3 signal red */
  --acc-exif:     #3ce0c0;  /* B4 aqua */
  --acc-diff:     #e05cff;  /* C1 electric purple */
  --acc-sign:     #ff85c2;  /* C2 ink pink */
  --acc-pct:      #57c7ff;  /* C4 sky blue */
  --acc-tz:       #7d8bff;  /* C5 periwinkle */
  --acc-noise:    #ff784f;  /* D5 siren orange */
  --acc-tip:      #ffd166;  /* C6 coin gold */

  /* the active page sets --acc; neutral fallback = glow white */
  --acc: var(--white);

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;

  --r-panel: 14px;
  --r-slot: 10px;
  --r-ctl: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: var(--font);
  background: var(--night-0);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: color-mix(in srgb, var(--acc) 35%, transparent); color: var(--white); }

/* ---------- signage type ---------- */

.sign {
  font-stretch: 118%;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.sign-condensed {
  font-stretch: 66%;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.readout {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.readout b { color: var(--acc); font-weight: 600; }

a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white); }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- tool page chrome ---------- */

.tool-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.machine-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 34px;
}
.machine-top .back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dim);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.machine-top .back:hover { color: var(--white); }
.machine-top .back .arrow { color: var(--acc); font-size: 1rem; }
.slot-code {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  border-radius: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 60%, transparent);
}

.tool-head { margin-bottom: 30px; }
.tool-head h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.tool-head h1 em {
  font-style: normal;
  color: var(--acc);
  text-shadow: 0 0 22px color-mix(in srgb, var(--acc) 55%, transparent);
}
.tool-head .sub { max-width: 60ch; color: var(--dim); font-size: 1.02rem; }

/* ---------- the slot window (main tool panel) ---------- */

.slot-window {
  background: linear-gradient(180deg, var(--night-2), var(--night-1) 70%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 1px 0 var(--hairline-bright),
    0 24px 60px -30px rgba(0, 0, 0, 0.9),
    0 0 90px -40px color-mix(in srgb, var(--acc) 30%, transparent);
  padding: 26px;
  position: relative;
}

/* dropzone = the glass */
.glass-drop {
  border: 1.5px dashed color-mix(in srgb, var(--acc) 42%, var(--hairline));
  border-radius: var(--r-slot);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 65%),
    var(--glass);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  cursor: pointer;
  padding: 30px 20px;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.glass-drop:hover, .glass-drop.dragover {
  border-color: var(--acc);
  box-shadow:
    inset 0 0 60px -20px color-mix(in srgb, var(--acc) 25%, transparent),
    0 0 40px -12px color-mix(in srgb, var(--acc) 40%, transparent);
}
.glass-drop .drop-icon { color: var(--acc); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc) 65%, transparent)); }
.glass-drop .drop-title { font-weight: 700; color: var(--white); font-size: 1.05rem; }
.glass-drop .drop-hint { font-size: 0.85rem; color: var(--dim); }
.glass-drop input[type="file"] { display: none; }

/* ---------- controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-end;
  margin-top: 22px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
input[type="text"], input[type="number"], input[type="url"], select, textarea {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--white);
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  padding: 9px 12px;
  transition: border-color 0.15s;
}
textarea { font-family: var(--mono); font-size: 0.9rem; line-height: 1.5; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--hairline-bright); }
input:focus, select:focus, textarea:focus { border-color: var(--acc); outline: none; }
input[type="number"] { width: 96px; }
select { cursor: pointer; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-ctl); overflow: hidden; background: var(--glass); }
.seg button {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dim);
  background: transparent;
  border: 0;
  padding: 9px 14px;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.seg button + button { border-left: 1px solid var(--hairline); }
.seg button:hover { color: var(--white); }
.seg button[aria-pressed="true"] {
  color: var(--night-0);
  background: var(--acc);
  text-shadow: none;
}

/* the big accent action — plain label, glowing render */
.vend-btn {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--night-0);
  background: var(--acc);
  border: 0;
  border-radius: var(--r-ctl);
  padding: 14px 30px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent),
    0 6px 30px -8px color-mix(in srgb, var(--acc) 70%, transparent);
  transition: transform 0.12s, box-shadow 0.2s, filter 0.15s;
}
.vend-btn:hover { filter: brightness(1.12); box-shadow: 0 0 0 1px var(--acc), 0 8px 40px -8px color-mix(in srgb, var(--acc) 90%, transparent); }
.vend-btn:active { transform: translateY(1px) scale(0.99); }
.vend-btn:disabled { filter: grayscale(0.8) brightness(0.5); cursor: not-allowed; box-shadow: none; }

.ghost-btn {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.ghost-btn:hover { color: var(--white); border-color: var(--hairline-bright); }

/* ---------- file list (queue) ---------- */

.queue { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.queue li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--r-slot);
  padding: 10px 14px;
  font-size: 0.9rem;
}
.queue .fname { color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.queue .fmeta { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); white-space: nowrap; }
.queue .qbtn {
  background: transparent; border: 1px solid var(--hairline); color: var(--dim);
  border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.queue .qbtn:hover { color: var(--white); border-color: var(--hairline-bright); }
.queue li.dragging { opacity: 0.4; }

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

.status-line {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  min-height: 1.2em;
}
.status-line.working { color: var(--acc); }
.status-line.error { color: #ff7a6b; }

/* ---------- THE TRAY — dispense choreography ---------- */

.tray-unit { margin-top: 30px; }
.tray-flap {
  height: 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--night-3), var(--night-1));
  border: 1px solid var(--hairline);
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}
.tray-flap::after {
  content: "";
  position: absolute; inset: 3px 40%;
  border-radius: 3px;
  background: var(--night-0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.tray {
  position: relative;
  min-height: 86px;
  background:
    radial-gradient(80% 130% at 50% 115%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night-1), var(--night-0));
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  box-shadow: inset 0 10px 24px -14px rgba(0,0,0,0.95);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  overflow: hidden;
}
.tray:empty::before {
  content: "YOUR FINISHED FILES APPEAR HERE";
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--faint);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vended {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--night-3), var(--night-2));
  border: 1px solid color-mix(in srgb, var(--acc) 50%, var(--hairline));
  border-radius: var(--r-slot);
  padding: 11px 16px;
  box-shadow:
    0 0 24px -6px color-mix(in srgb, var(--acc) 45%, transparent),
    0 8px 18px -10px rgba(0,0,0,0.9);
  animation: dispense 0.55s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.vended:hover { border-color: var(--acc); }
.vended .v-ico { color: var(--acc); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 70%, transparent)); flex: none; }
.vended .v-name { color: var(--white); font-weight: 700; font-size: 0.9rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vended .v-size { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); }
.vended .v-get {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc);
}

@keyframes dispense {
  0%   { transform: translateY(-90px) rotate(-2deg); opacity: 0; }
  55%  { transform: translateY(6px) rotate(0.5deg); opacity: 1; }
  75%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* glow pulse on the tray when something lands */
.tray.landed { animation: tray-pulse 0.7s ease-out; }
@keyframes tray-pulse {
  0% { box-shadow: inset 0 10px 24px -14px rgba(0,0,0,0.95), inset 0 -30px 50px -30px color-mix(in srgb, var(--acc) 55%, transparent); }
  100% { box-shadow: inset 0 10px 24px -14px rgba(0,0,0,0.95); }
}

/* ---------- fact plate + footer ---------- */

.fact-plate {
  margin-top: 34px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-slot);
  background: var(--night-1);
  padding: 16px 18px;
  font-size: 0.88rem;
  color: var(--dim);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fact-plate .lamp {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
  background: var(--acc);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--acc) 75%, transparent);
}
.fact-plate b { color: var(--text); font-weight: 600; }

.kiosk-footer {
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--faint);
}
.kiosk-footer a { color: var(--dim); }
.kiosk-footer a:hover { color: var(--white); }
.kiosk-footer .made b { font-weight: 700; color: var(--dim); }

/* seo copy block under the tool */
.tool-notes { margin-top: 44px; max-width: 64ch; }
.tool-notes h2 {
  font-size: 1.05rem; font-weight: 800; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--white); margin: 26px 0 8px;
}
.tool-notes p { color: var(--dim); font-size: 0.94rem; margin-bottom: 10px; }
.tool-notes b { color: var(--text); font-weight: 600; }
.tool-notes ol { margin: 4px 0 12px 22px; display: flex; flex-direction: column; gap: 7px; }
.tool-notes li { color: var(--dim); font-size: 0.94rem; }
.tool-notes li::marker { color: var(--acc); font-weight: 700; }

/* ---------- misc ---------- */

.hidden { display: none !important; }

@media (max-width: 560px) {
  .slot-window { padding: 18px; }
  .controls { gap: 12px; }
  .vended .v-name { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .vended { animation: none; }
  .tray.landed { animation: none; }
  * { transition-duration: 0.01ms !important; }
}