/* M/ETH — the page is a clean laboratory intake sheet.
   All of the ugliness lives inside the images. */

@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2");
}

:root{
  --paper:      #dcded5;
  --sheet:      #eeefe9;
  --ink:        #181c14;
  --ink-soft:   #5c6153;
  --rule:       #a4a89a;
  --rule-faint: #c6c9bd;
  --stamp:      #8a2f1c;
  --toxic:      #8fdb00;

  --gap: clamp(1.5rem, 4vw, 3.25rem);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cond: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background-color: var(--paper);
  background-image: url("/bg-chem.svg");
  background-repeat: repeat;
  background-size: 340px 340px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--ink); color:var(--sheet); padding:.6rem 1rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.sheet{
  max-width: 74rem;
  margin: clamp(1rem, 3vw, 3rem) auto;
  padding: var(--gap);
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule-faint), 0 18px 40px -34px rgba(24,28,20,.9);
}

/* ---------- masthead ---------- */

.masthead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:.9rem;
  border-bottom:2px solid var(--ink);
}
.mark{ display:flex; align-items:center; gap:.9rem; }
.glyph{ width:112px; height:auto; color:var(--ink); display:block; }
.ticker{
  font-family:var(--cond); font-weight:700; font-size:1.35rem;
  letter-spacing:.02em; padding-left:.9rem; border-left:1px solid var(--rule);
}

.docmeta{
  margin:0; display:grid; grid-template-columns:auto auto;
  column-gap:.9rem; row-gap:.1rem;
  font-size:.75rem; color:var(--ink-soft);
}
.docmeta dt{ text-align:right; }
.docmeta dd{ margin:0; color:var(--ink); }

/* ---------- hero ---------- */

.hero{ padding: clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem); }
.hero h1{
  font-family:var(--cond); font-weight:700;
  font-size: clamp(2.9rem, 8.5vw, 6.5rem);
  line-height:.88; letter-spacing:-.025em;
  margin:0; text-indent:-.04em;
}
.hero .slash{ color:var(--toxic); -webkit-text-stroke:1px var(--ink); }
.lede{
  margin:1.4rem 0 0; max-width:36ch;
  font-size:1rem; color:var(--ink-soft);
}

/* ---------- workspace (controls left, output right on wide screens) ---------- */

.workspace{
  display:flex; flex-direction:column; gap:var(--gap);
}

/* ---------- intake ---------- */

.intake{ border-top:1px solid var(--rule); padding-top:1.2rem; }
.label dt, .field label{
  font-family:var(--mono); font-weight:500; font-size:.78rem;
  color:var(--ink-soft); margin:0;
}

.intake-grid{
  display:grid; gap:1.6rem;
  grid-template-columns: 1fr;
  align-items:start;
}
.field{ display:flex; flex-direction:column; gap:.55rem; }
.field-dose{ grid-column:1 / -1; }

.drop{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.6rem 1.25rem; cursor:pointer;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(164,168,154,.16) 9px 10px);
  border:1px dashed var(--rule);
  transition: border-color .12s, background-color .12s;
}
.drop:hover, .drop.is-over{ border-color:var(--ink); border-style:solid; }
.drop.is-over{ background-color:rgba(143,219,0,.14); }
.drop-text{ font-size:1.05rem; }
.drop-hint{ font-size:.75rem; color:var(--ink-soft); }

.btn{
  font:inherit; font-size:.9rem; cursor:pointer;
  padding:.72rem 1.1rem; text-align:center;
  background:var(--ink); color:var(--sheet); border:1px solid var(--ink);
}
.btn:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--sheet); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.note{ margin:0; font-size:.75rem; color:var(--ink-soft); max-width:34ch; }

/* dose */
.field-dose{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; }
#dose{ -webkit-appearance:none; appearance:none; background:transparent; width:100%; }
#dose::-webkit-slider-runnable-track{ height:1px; background:var(--ink); }
#dose::-moz-range-track{ height:1px; background:var(--ink); }
#dose::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-8px;
  background:var(--ink); border:0; border-radius:50%;
}
#dose::-moz-range-thumb{ width:16px; height:16px; background:var(--ink); border:0; border-radius:50%; }
#dose-read{ font-family:var(--cond); font-weight:700; font-size:1.5rem; min-width:5ch; text-align:right; }

/* ---------- stage ---------- */

.stage{ min-width:0; }

.compare{
  position:relative; overflow:hidden; line-height:0;
  border:1px solid var(--ink); background:var(--paper);
  touch-action:pan-y;
  margin:0 auto; max-width:100%;
  max-height:min(58vh, 620px);
}
.compare img{ display:block; width:100%; height:100%; }
.plate-after{
  position:absolute; inset:0;
  clip-path: inset(0 0 0 var(--wipe, 50%));
}
.plate-after img{ position:absolute; inset:0; width:100%; height:100%; }
.handle{
  position:absolute; top:0; bottom:0; left:var(--wipe,50%);
  width:1px; background:var(--toxic); pointer-events:none;
  box-shadow:0 0 0 1px rgba(24,28,20,.55);
}
.handle::after{
  content:""; position:absolute; top:50%; left:50%;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--toxic); background:rgba(24,28,20,.6);
  transform:rotate(45deg);
}
#wipe{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize;
}
/* the range fills the frame and is invisible; show focus on the frame itself */
.compare:has(#wipe:focus-visible){ outline:2px solid var(--ink); outline-offset:3px; }
.compare:focus-within .handle{ background:#fff; box-shadow:0 0 0 2px var(--ink); }

.plate-tag{
  position:absolute; bottom:0; line-height:1;
  font-size:.7rem; padding:.4rem .55rem; pointer-events:none;
}
.tag-l{ left:0; background:var(--ink); color:var(--sheet); }
.tag-r{ right:0; background:var(--toxic); color:#101408; }

.label{
  display:flex; gap:2rem; flex-wrap:wrap; justify-content:space-between;
  padding-top:.85rem; margin-top:.85rem;
  border-top:1px solid var(--rule);
}
.label dl{
  margin:0; display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:1.1rem; row-gap:.15rem; font-size:.8rem; max-width:38rem;
}
.label dd{ margin:0; overflow-wrap:anywhere; }

.source-link{
  color:inherit; text-decoration:underline; text-underline-offset:.15em;
  text-decoration-color:var(--rule); display:inline-flex; align-items:center; gap:.4em;
}
.source-link:hover{ text-decoration-color:var(--ink); }
.pexels-logo{ height:2em; width:auto; display:inline-block; opacity:.75; }
.actions{ display:flex; gap:.5rem; align-items:flex-start; flex-wrap:wrap; }

.download-group{ position:relative; }

.download-menu{
  position:absolute; bottom:calc(100% + .5rem); left:0; z-index:30;
  min-width:15.5rem; max-width:min(20rem, 84vw);
  background:var(--sheet); border:1px solid var(--ink);
  box-shadow:0 14px 28px -16px rgba(24,28,20,.45);
  padding:.3rem;
}
.download-menu:not([hidden]){ display:flex; flex-direction:column; }
.download-menu::after{
  content:""; position:absolute; top:100%; left:1.2rem;
  width:9px; height:9px; background:var(--sheet);
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
}
.download-menu-item{
  font:inherit; text-align:left; cursor:pointer;
  background:none; border:0; padding:.6rem .65rem;
  display:flex; flex-direction:column; gap:.15rem;
  color:var(--ink);
}
.download-menu-item:hover, .download-menu-item:focus-visible{
  background:var(--ink); color:var(--sheet); outline:none;
}
.download-menu-item:hover .dmi-hint, .download-menu-item:focus-visible .dmi-hint{
  color:var(--rule-faint);
}
.dmi-label{ font-size:.88rem; font-weight:500; }
.dmi-hint{ font-size:.72rem; color:var(--ink-soft); }

@media (max-width: 30rem){
  .download-menu{ left:auto; right:0; }
  .download-menu::after{ left:auto; right:1.2rem; }
}

/* ---------- working / error ---------- */

.working{
  margin-top:2.5rem; padding:2rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.working p{
  margin:0; font-family:var(--cond); font-weight:600;
  font-size:clamp(1.25rem,4vw,2rem); letter-spacing:-.01em;
}
.working p::after{
  content:""; display:inline-block; width:.6em; height:1em;
  margin-left:.25em; background:var(--ink);
  vertical-align:-.12em; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.error{
  margin-top:1.5rem; padding:.8rem 1rem;
  border-left:3px solid var(--stamp); color:var(--stamp);
  background:rgba(138,47,28,.07); font-size:.85rem;
}

/* ---------- footer ---------- */

.foot{ margin-top:3.5rem; border-top:2px solid var(--ink); padding-top:.9rem; }
.tally{ margin:0 0 1.2rem; font-size:.85rem; }
.colophon{
  margin:0; display:flex; flex-wrap:wrap; justify-content:center; text-align:center;
  gap:.4rem 1.6rem;
  font-size:.72rem; color:var(--ink-soft);
}

/* ---------- responsive ---------- */

@media (min-width: 64rem){
  .workspace{
    flex-direction:row; align-items:flex-start;
    border-top:1px solid var(--rule); padding-top:1.2rem;
  }
  .workspace .intake{ flex:0 0 320px; max-width:320px; border-top:0; padding-top:0; }
  .workspace .stage{ flex:1 1 auto; }
}

@media (max-width: 46rem){
  .sheet{ margin:0; border-left:0; border-right:0; }
  .field-dose{ grid-template-columns:1fr auto; }
  .field-dose label{ grid-column:1 / -1; }
  .docmeta{ font-size:.7rem; }
  .actions .btn{ flex:1 1 auto; }
}

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