/* anyaudioconvert — The Field Recorder
   The page is the machine that made your file. Body is the chrome; the backlit
   LCD is the working surface, which is what keeps it readable in daylight on a
   phone. Every control is a real transport key with travel. */

/* ---------- faces ---------- */
@font-face{font-family:Legend;src:url(../fonts/barlow-condensed-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Legend;src:url(../fonts/barlow-condensed-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Body;src:url(../fonts/archivo-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Body;src:url(../fonts/archivo-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Body;src:url(../fonts/archivo-600.woff2)format("woff2");font-weight:600;font-display:swap}

/* ---------- the machine ---------- */
:root{
  /* body shell */
  --shell:#2E3134; --shell-hi:#3C4044; --shell-lo:#212427; --shell-edge:#141618;
  --grip:#8E9499; --silkscreen:#D2D7D4; --silkscreen-dim:#A8AEB1;
  /* backlit lcd — the working surface */
  --lcd:#B8C2B4; --lcd-lo:#A7B2A4; --lcd-ink:#1B2119; --lcd-ink-dim:#394237;
  --lcd-rule:#8F9C8C; --lcd-glow:#D2DACE;
  /* signal */
  --rec:#C4362C; --rec-hi:#DC4A3E; --ok:#4E7A46; --fault-ink:#7C1E16;
  /* amber survives in exactly one role: the focus ring. A red ring on the red
     key would be invisible, so this is an accessibility carve-out, not a
     second signal colour. */
  --focus:#D8A03A;
  --radius:3px; --radius-lg:7px;
  --step:clamp(.9rem,.35vw + .82rem,1rem);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --shell:#191B1D; --shell-hi:#25282B; --shell-lo:#0F1112; --shell-edge:#000;
    --grip:#5E6469; --silkscreen:#C3C9C6; --silkscreen-dim:#9BA2A6;
    --lcd:#243026; --lcd-lo:#1C261E; --lcd-ink:#C8E0BE; --lcd-ink-dim:#9DB596;
    --fault-ink:#F5AFA6;
    --lcd-rule:#3B4C3C; --lcd-glow:#2E3D30;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--shell-edge); color:var(--silkscreen);
  font:400 var(--step)/1.6 Body,ui-sans-serif,system-ui,sans-serif;
  font-variant-numeric:tabular-nums; /* real measurements, everywhere */
  min-height:100dvh;
}

/* browser surfaces belong to the design, not to the browser */
::selection{background:var(--grip);color:#14171A}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
:where(a){color:inherit}
.lcd ::selection{background:var(--lcd-ink);color:var(--lcd)}
*{scrollbar-width:thin;scrollbar-color:var(--grip) var(--shell-lo)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--shell-lo)}
::-webkit-scrollbar-thumb{background:var(--grip);border:2px solid var(--shell-lo);border-radius:6px}

/* ---------- device shell ---------- */
.deck{
  max-width:52rem;margin:0 auto;padding:clamp(.75rem,2vw,1.5rem);
}
.body-shell{
  background:linear-gradient(180deg,var(--shell-hi),var(--shell) 18%,var(--shell) 82%,var(--shell-lo));
  border:1px solid var(--shell-edge);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 #ffffff14 inset,0 18px 40px -18px #000000a6;
  padding:clamp(.85rem,2.2vw,1.4rem);
}
/* the ribbed grip band, drawn not decorated */
.grip{
  height:9px;border-radius:2px;margin:0 0 clamp(.8rem,2vw,1.15rem);
  background:repeating-linear-gradient(90deg,var(--shell-lo) 0 2px,transparent 2px 5px);
  border-top:1px solid #ffffff10;border-bottom:1px solid #00000055;
}

/* ---------- silkscreen legends ---------- */
.legend{
  font-family:Legend,ui-sans-serif,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;
  font-size:.72rem;color:var(--silkscreen-dim);
}
.legend-b{color:var(--silkscreen)}

/* ---------- the LCD: working surface ---------- */
.lcd{
  background:
    repeating-linear-gradient(0deg,#00000008 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--lcd-glow),var(--lcd) 22%,var(--lcd-lo));
  color:var(--lcd-ink);
  border:1px solid var(--shell-edge);
  border-radius:var(--radius);
  box-shadow:0 2px 6px #00000059 inset,0 0 0 3px #0000002e;
  padding:clamp(.9rem,2.4vw,1.3rem);
}
.lcd h1{
  font-family:Legend,ui-sans-serif,sans-serif;font-weight:600;
  font-size:clamp(1.45rem,4.4vw,2.3rem);line-height:1.08;
  letter-spacing:.005em;margin:0 0 .35rem;color:var(--lcd-ink);text-wrap:balance;
}
.lcd p{margin:0 0 .9rem;max-width:68ch;color:var(--lcd-ink)}
.lcd p:last-child{margin-bottom:0}
.lcd-sub{color:var(--lcd-ink-dim)}
.lcd-rule{border:0;border-top:1px solid var(--lcd-rule);margin:1rem 0}

/* readout: the row of real numbers */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.7rem 1.1rem;margin:0}
.readout div{margin:0}
.readout dt{font-family:Legend,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:.66rem;color:var(--lcd-ink-dim);margin:0}
.readout dd{margin:.1rem 0 0;font-weight:600;font-size:1.02rem;color:var(--lcd-ink)}

/* ---------- the bay: drop target ---------- */
.bay{
  display:block;cursor:pointer;position:relative;
  margin:clamp(.85rem,2vw,1.15rem) 0 0;
  background:linear-gradient(180deg,var(--shell-lo),#1a1c1e);
  border:1px solid var(--shell-edge);border-radius:var(--radius);
  box-shadow:0 3px 9px #00000070 inset;
  padding:clamp(1.05rem,3.4vw,1.6rem) clamp(.9rem,2.4vw,1.15rem) clamp(1.15rem,3.6vw,1.7rem);
  text-align:left;
  transition:box-shadow .18s cubic-bezier(.16,1,.3,1),background .18s;
}
.bay[data-over="1"]{background:linear-gradient(180deg,#33383a,#24282a);box-shadow:0 0 0 2px var(--rec) inset}
.bay-label{display:block;margin-bottom:.7rem}
.bay input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- transport keys ---------- */
.transport{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(.85rem,2vw,1.15rem)}
.key{
  font-family:Legend,ui-sans-serif,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:.82rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.15rem;min-height:44px;
  color:var(--silkscreen);
  background:linear-gradient(180deg,var(--shell-hi),var(--shell-lo));
  border:1px solid var(--shell-edge);border-radius:var(--radius);
  box-shadow:0 1px 0 #ffffff1c inset,0 2px 0 var(--shell-edge),0 3px 5px #00000055;
  cursor:pointer;
  transition:transform .09s cubic-bezier(.16,1,.3,1),box-shadow .09s,background .15s;
}
.key:hover:not(:disabled){background:linear-gradient(180deg,#464a4e,var(--shell))}
/* the one authored moment: keys have real travel */
.key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #ffffff10 inset,0 0 0 var(--shell-edge),0 1px 2px #00000055}
.key:disabled{opacity:.42;cursor:not-allowed;box-shadow:0 1px 0 #ffffff10 inset}
.key-rec{
  background:linear-gradient(180deg,var(--rec-hi),var(--rec));
  border-color:#7d211a;color:#fff;flex:1 1 12rem;justify-content:center;
  box-shadow:0 1px 0 #ffffff2e inset,0 2px 0 #6d1c16,0 4px 9px #00000066;
}
.key-rec:hover:not(:disabled){background:linear-gradient(180deg,#e8564a,var(--rec-hi))}
.key-rec:active:not(:disabled){box-shadow:0 1px 0 #ffffff1c inset,0 0 0 #6d1c16,0 1px 3px #00000066}
.key-dot{width:9px;height:9px;border-radius:50%;background:#fff;flex:none}
.key:disabled .key-dot{background:#ffffff8c}

/* ---------- meter: honest about waits ---------- */
.meter{margin-top:.9rem}
.meter-track{
  height:15px;background:var(--shell-lo);border:1px solid var(--shell-edge);
  border-radius:2px;box-shadow:0 2px 5px #00000070 inset;overflow:hidden;
  display:flex;gap:2px;padding:2px;
}
.meter-seg{flex:1;background:#ffffff0f;border-radius:1px}
.meter-seg[data-lit="1"]{background:var(--ok)}
.meter-seg[data-lit="warm"]{background:var(--grip)}
.meter-cap{display:flex;justify-content:space-between;gap:1rem;margin-top:.42rem}

/* ---------- queue: rank by illumination, never by badge ---------- */
.queue{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:2px}
.queue li{
  display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;
  padding:.6rem .8rem;background:#0000001f;border-left:1px solid var(--lcd-rule);
  color:var(--lcd-ink-dim);font-size:.92rem;
}
.queue li[data-state="active"]{background:#00000045;color:var(--lcd-ink);border-left-color:var(--lcd-ink)}
.queue li[data-state="done"]{color:var(--lcd-ink)}
.queue-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-stat{font-family:Legend,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}

/* ---------- fault ---------- */
.fault{
  margin-top:.9rem;padding:.8rem .95rem;border-radius:var(--radius);
  background:#c4362c1f;border:1px solid #c4362c6b;color:var(--lcd-ink);
}
.fault strong{display:block;font-family:Legend,sans-serif;text-transform:uppercase;
  letter-spacing:.11em;font-size:.72rem;color:var(--fault-ink);margin-bottom:.2rem}

/* ---------- spec plate + bay legend (the format index) ---------- */
.plate{margin-top:clamp(.85rem,2vw,1.15rem);padding-top:.9rem;border-top:1px solid #ffffff14}
.plate h2{font-family:Legend,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:.72rem;color:var(--silkscreen-dim);margin:0 0 .6rem}
.bay-index{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:2px}
.bay-index a{
  display:flex;align-items:baseline;gap:.45rem;padding:.5rem .6rem;
  text-decoration:none;color:var(--silkscreen);background:#00000024;
  border:1px solid transparent;border-radius:2px;
  font-family:Legend,sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;
  transition:background .14s,border-color .14s;
}
.bay-index a:hover{background:#00000040;border-color:var(--grip)}
.bay-index a[aria-current=page]{background:#00000059;border-color:var(--grip);color:#fff}
.bay-index a[aria-current=page] .n{color:var(--silkscreen)}
.bay-index .n{color:var(--silkscreen-dim);font-size:.66rem}

/* ---------- prose below the deck ---------- */
.sheet{max-width:52rem;margin:0 auto;padding:0 clamp(.75rem,2vw,1.5rem) 3.5rem}
.sheet h2:first-child{margin-top:1.4rem}
.sheet h2{font-family:Legend,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.9rem;color:var(--silkscreen);margin:2.2rem 0 .55rem}
.sheet p,.sheet li{max-width:70ch;color:var(--silkscreen);opacity:.92}
.sheet a{color:var(--silkscreen);text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--rec)}
.foot{border-top:1px solid #ffffff14;margin-top:2.4rem;padding-top:1rem}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- nameplate: who made this machine, and the way home ---------- */
.nameplate{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Legend,ui-sans-serif,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.17em;font-size:.72rem;
  color:var(--silkscreen-dim);text-decoration:none;
  margin:0 0 .7rem;padding:.2rem 0;
  transition:color .14s;
}
.nameplate:hover{color:var(--silkscreen)}
.np-mark{
  width:11px;height:11px;flex:none;border-radius:2px;
  background:var(--rec);
  box-shadow:0 0 0 2px var(--shell-lo),0 0 5px #c4362c66;
}

/* ---------- narrow: the primary key gets its own row ---------- */
@media (max-width:540px){
  .transport{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
  .transport .key-rec{grid-column:1 / -1;order:2}
  #pick{order:1}
  #adjust{order:1}
  .key{justify-content:center}
}

/* ---------- form controls: the OS accent had no business inside the machine ---------- */
select,input[type=checkbox]{accent-color:var(--rec)}
select{
  font:500 .88rem/1 Body,ui-sans-serif,sans-serif;
  color:var(--silkscreen);background:linear-gradient(180deg,var(--shell-hi),var(--shell-lo));
  border:1px solid var(--shell-edge);border-radius:var(--radius);
  padding:.5rem 2rem .5rem .7rem;min-height:40px;
  appearance:none;
  background-image:linear-gradient(180deg,var(--shell-hi),var(--shell-lo)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none' stroke='%23A8AEB1' stroke-width='1.5'%3E%3Cpath d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,right .7rem center;
  background-size:100% 100%,9px 6px;
}
select:hover{background-image:linear-gradient(180deg,#464a4e,var(--shell)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none' stroke='%23D2D7D4' stroke-width='1.5'%3E%3Cpath d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E")}
#panel label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
#panel input[type=checkbox]{width:17px;height:17px;flex:none}

/* the LCD is a different ground: its dim text takes the LCD's own dim ink */
.lcd .legend{color:var(--lcd-ink-dim)}
.lcd .legend-b{color:var(--lcd-ink)}

/* ---------- the world continues below the shell ---------- */
.sheet-panel{
  background:linear-gradient(180deg,var(--shell) 0,var(--shell-lo) 100%);
  border:1px solid var(--shell-edge);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 18px 40px -22px #000000a6;
  padding:.35rem clamp(.85rem,2.2vw,1.4rem) clamp(1.1rem,2.4vw,1.5rem);
}
.deck{padding-bottom:0}
.body-shell{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:0}

/* the bay wears its own label along the top edge, so it is a labelled slot in a
   machine rather than the centred dashed card the thesis refuses */
.bay-strip{
  display:block;text-align:left;margin:-.35rem 0 .9rem;
  padding-bottom:.5rem;border-bottom:1px solid #ffffff10;
  font-size:.72rem;letter-spacing:.07em;line-height:1.45;
}
.bay:hover{background:linear-gradient(180deg,#292d30,#1d2022)}
.bay:focus-within{box-shadow:0 3px 9px #00000070 inset,0 0 0 2px var(--focus)}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}