/* Finger Mod — near-white ground, hairline borders, one near-black accent, and
   type that stays quiet so the geometry is the loud thing. The only saturated
   colour on the page is the two fingers themselves. */

:root {
  --bg: #fbfbfb;
  --panel: #fff;
  --line: #e5e6e8;
  --line-soft: #f0f0f2;
  --ink: #14181a;
  --ink-2: #5c6366;
  --ink-3: #8d9497;
  --accent: #1c2225;
  --accent-soft: #f1f2f3;
  --accent-line: #dcdee0;
  --on-accent: #fff;
  --bad: #c4314b;
  --bad-bg: #fdf2f4;
  --note-bg: #f8f6f0;
  --note-ink: #7d6a3c;
  --sk: #ecedee;
  --r: 7px;
  --shadow: 0 1px 2px rgba(20, 24, 26, .06), 0 0 0 1px rgba(20, 24, 26, .03);
}

* { box-sizing: border-box; }

/* Several things are hidden with the `hidden` attribute AND carry a `display`
   of their own, which would otherwise win. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 ui-sans-serif, -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; overflow: hidden; }

.spacer { flex: 1; }
.ico { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- header */

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.brand { font-weight: 650; font-size: 15px; letter-spacing: -0.03em; }
.tagline { color: var(--ink-3); font-size: 12px; }

.status { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.status.busy { color: var(--ink-2); }
.status.bad { color: var(--bad); }

.by {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.by:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }

/* ------------------------------------------------------------- buttons */

.btn {
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.btn:hover { background: #f7f7f8; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover { background: #2c3438; }
.btn.big { width: 100%; height: 42px; font-size: 14px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }

.seg { display: flex; gap: 2px; padding: 2px; background: #f1f2f2; border-radius: var(--r); }
.seg button {
  height: 23px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ grid
   Three anchored columns. The centre is the only one that flexes, so the
   viewer can never be covered by a panel. The left column is wide because a
   short slider is a slider you cannot aim. */

.grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 310px;
  grid-template-areas: "left stage right";
}

.panel {
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
}
.panel.left { grid-area: left; border-right: 1px solid var(--line); }
.panel.right { grid-area: right; border-left: 1px solid var(--line); }
.stage { grid-area: stage; }

.block { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.block h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- templates */

.templates { display: flex; flex-wrap: wrap; gap: 5px; }
.tpl {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.tpl:hover { border-color: #d5d7d8; background: #fcfcfc; color: var(--ink); }
.tpl.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.tpl b { font-weight: 550; }

.tpl-blurb { margin: 9px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.tpl-blurb:empty { display: none; }

/* ---------------------------------------------------------------- switches */

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #dfe1e1;
  transition: background .13s ease;
}
.switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform .13s ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .knob { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch-txt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.switch-txt b { font-weight: 550; }
.switch.small .track { width: 30px; height: 18px; }
.switch.small .knob { width: 14px; height: 14px; }
.switch.small input:checked + .track .knob { transform: translateX(12px); }

.tabs { display: flex; gap: 2px; margin-top: 12px; padding: 2px; background: #f1f2f2; border-radius: var(--r); }
.tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.tabs button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.tabs .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ----------------------------------------------------------------- sliders */

.ctl { margin-bottom: 16px; }
.ctl:last-child { margin-bottom: 0; }

.ctl-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ctl-head .ico { color: var(--ink-3); }
.ctl-label { font-weight: 550; }
.ctl-val {
  margin-left: auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}
.ctl-val::after {
  content: attr(data-unit);
  margin-left: 2px;
  color: var(--ink-3);
  font-weight: 400;
}

.ctl-blurb {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

/* The track is the full width of the panel: a 150 px slider cannot be aimed at
   0.05 mm. */
.rng {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.rng::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--fill, 0%), #e4e5e6 var(--fill, 0%) 100%);
}
.rng::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--fill, 0%), #e4e5e6 var(--fill, 0%) 100%);
}
.rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--accent), 0 1px 3px rgba(20, 24, 26, .28);
}
.rng::-moz-range-thumb {
  width: 15px; height: 15px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--accent), 0 1px 3px rgba(20, 24, 26, .28);
}
.rng:active::-webkit-slider-thumb,
.rng:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px var(--accent-soft);
}

.ctl-bool .switch-txt .ico { color: var(--ink-3); }

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

.stage { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.stagebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

/* Says which of the two geometries is on screen. The preview is exact, but it
   is not the file you print. */
.pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 550;
}

.canvaswrap { position: relative; flex: 1; min-height: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#cv.grabbing { cursor: grabbing; }

.stagemsg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 12px;
  pointer-events: none;
}

.hint {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  color: var(--ink-3);
  font-size: 11px;
  pointer-events: none;
}

/* --------------------------------------------------------------- summary */

.facts { padding: 13px 15px; border-bottom: 1px solid var(--line-soft); }
.fact { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.fact:last-child { margin-bottom: 0; }
.fact dt { color: var(--ink-2); }
.fact dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.verdict { margin: 14px 15px 0; padding: 11px 12px; border-radius: var(--r); }
.verdict b { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.verdict .ico { width: 15px; height: 15px; stroke-width: 2; }
.verdict ul { margin: 8px 0 0; padding-left: 17px; }
.verdict li { margin-bottom: 7px; font-size: 12px; line-height: 1.5; }
.verdict li:last-child { margin-bottom: 0; }
.verdict.good { background: var(--accent-soft); color: var(--ink); }
.verdict.bad { background: var(--bad-bg); color: var(--bad); }

.act { padding: 14px 15px 0; }

.notes { margin: 14px 15px 0; padding: 10px 12px; border-radius: var(--r); background: var(--note-bg); }
.notes p { margin: 0 0 6px; color: var(--note-ink); font-size: 12px; line-height: 1.5; }
.notes p:last-child { margin-bottom: 0; }

.files { padding: 16px 15px 0; }
.files h3, .howto h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}
.dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
}
.dl:hover { background: #e8eaeb; }
.dl em { font-style: normal; font-weight: 400; color: var(--ink-2); font-size: 11.5px; }

/* ------------------------------------------------------------ loading state */

.sk {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sk) 25%, #f6f7f7 50%, var(--sk) 75%);
  background-size: 240% 100%;
  animation: sweep 1.2s linear infinite;
}
.sk-a { width: 62px; }
.sk-b { width: 44px; }
.sk-c { height: 15px; width: 130px; }
.sk-btn { height: 42px; border-radius: 8px; }
.verdict.loading { background: var(--accent-soft); }

@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------------------------------------------------------------- how to print */

.howto { padding: 18px 15px 20px; }
.howto p { margin: 0 0 8px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.howto p:last-child { margin-bottom: 0; }
.howto b { color: var(--ink); font-weight: 600; }
.howto a { color: var(--ink); }

/* -------------------------------------------------------------- scrollbar */

.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-thumb { background: #e2e3e3; border: 3px solid var(--panel); border-radius: 6px; }
.panel::-webkit-scrollbar-thumb:hover { background: #d2d4d4; }
.panel::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1240px) {
  .grid { grid-template-columns: 296px minmax(0, 1fr) 280px; }
  .tagline { display: none; }
}

/* ------------------------------------------------------------------ mobile
   One column that the page itself scrolls: the preview on top and sticky, the
   settings under it, and the panel that says whether it prints at the bottom.
   That last one is cut back to the two things you act on — the problems and
   the files. */

@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; overflow: visible; }
  body { display: block; }

  .grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "left" "right";
  }

  .stage {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 44vh;
    border-bottom: 1px solid var(--line);
  }
  .hint { display: none; }

  .panel { overflow: visible; }
  .panel.left { border-right: 0; }
  .panel.right { border-left: 0; border-top: 1px solid var(--line); }

  .facts, .notes, .howto { display: none; }
  .verdict { margin-top: 15px; }
  .act { padding-bottom: 4px; }
  .files { padding-bottom: 20px; }
  .btn.big { height: 46px; }
}