/* JustSo Vector — justso.biz brand over the cutting-mat workshop layout.
   Chrome: justso.biz dark header grey with the real white+orange logo.
   Canvas: white sidebar + light grey mat. One accent: JustSo orange #ee8f00
   (buttons get orange bg + white text, exactly like the main site).
   Type: Open Sans (self-hosted, variable) for UI; monospace stays for the
   plotter-style readouts, slider values and labels — the app's utility voice. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/open-sans-latin-var.woff2") format("woff2");
}

:root {
  --chrome: #545559;        /* topbar — justso.biz fixed-header grey family */
  --chrome-ink: #ffffff;
  --chrome-dim: #c7c8ca;
  --bg0: #f3f3f3;           /* page behind the stage */
  --bg1: #ffffff;           /* sidebar / cards */
  --mat: #e9eaeb;           /* the cutting mat */
  --line: #d8d8d8;
  --grid-minor: rgba(49, 49, 49, 0.045);
  --grid-major: rgba(49, 49, 49, 0.10);
  --ink: #313131;
  --dim: #666666;
  --acc: #ee8f00;           /* JustSo orange — CTA / interactive only */
  --acc-hover: #f1a533;     /* site hover = orange at 0.8 alpha over white */
  --acc-ink: #ffffff;       /* text on orange, per justso.biz buttons */
  --acc-text: #b56c00;      /* darkened orange for small text on white */
  --err: #cf2e2e;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
  --sans: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }

/* the hidden attribute must always win over display rules below */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  background: var(--chrome);
  flex: none;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.22em;
}

.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.wordmark .mark-b {
  color: var(--chrome-ink);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: 12px;
}

.empty-glyph {
  overflow: visible;
}
.empty-glyph .curve { fill: none; stroke: var(--acc); stroke-width: 2; }
.empty-glyph .handle { stroke: #9b9c9e; stroke-width: 1; stroke-dasharray: 2 2; }
.empty-glyph .anchor { fill: var(--ink); }
.empty-glyph .cp { fill: var(--acc); }

.privacy {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
  text-align: right;
}

/* ---------- layout ---------- */

.app {
  display: grid;
  grid-template-columns: 272px 1fr;
  flex: 1;
  min-height: 0;
}

.sidebar {
  background: var(--bg1);
  border-right: 1px solid var(--line);
  padding: 16px;
  overflow-y: auto;
}

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 18px 12px;
  gap: 10px;
}

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

.group { margin-bottom: 22px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mode-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 0;
  background: var(--bg1);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.mode-btn.active {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-ink);
}

.ctl { margin-bottom: 14px; }

.ctl label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.ctl output {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--acc-text);
}

input[type="range"] {
  width: 100%;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--acc);
  border: 2px solid var(--bg1);
  box-shadow: 0 0 0 1px rgba(49, 49, 49, 0.18);
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acc);
  border: 2px solid var(--bg1);
  box-shadow: 0 0 0 1px rgba(49, 49, 49, 0.18);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 10px;
  cursor: pointer;
}

.check input { accent-color: var(--acc); }

select, input[type="number"] {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
}

.select-ctl label { margin-bottom: 4px; display: block; font-size: 12.5px; }
.select-ctl select { width: 100%; }

.size-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 6px;
}
.size-row input { width: 100%; }

.hint {
  font-size: 11px;
  color: var(--dim);
  margin: 6px 0 12px;
}

.fmt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fmt {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  transition: border-color 120ms ease, color 120ms ease;
}

.fmt small {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--dim);
  text-align: center;
}

.fmt:hover:not(:disabled) { border-color: var(--acc); color: var(--acc-text); }
.fmt:disabled { opacity: 0.45; cursor: not-allowed; }

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

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
}

.views, .zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.views button, .zoom button {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--dim);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}

.views button.active {
  color: var(--acc-ink);
  background: var(--acc);
  border-color: var(--acc);
}

.zoom button:hover, .views button:hover:not(.active) { color: var(--ink); border-color: #b9babc; }

#zoom-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  min-width: 44px;
  text-align: center;
}

/* ---------- the cutting mat ---------- */

.mat {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  box-shadow: inset 0 1px 10px rgba(49, 49, 49, 0.07);
  overflow: hidden;
}

.mat.panning { cursor: grabbing; }

/* crop-mark corners */
.mat::before, .mat::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--acc);
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}
.mat::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.mat::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ---------- empty state ---------- */

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}

.empty-glyph { width: 68px; height: 40px; margin-bottom: 8px; }

.empty h1 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}

.empty p {
  max-width: 420px;
  color: var(--dim);
  margin: 0 0 10px;
}

.browse {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc);
  border: none;
  border-radius: var(--radius);
  padding: 11px 26px;
  cursor: pointer;
  transition: background-color 300ms ease;
}

.browse:hover { background: var(--acc-hover); }

.samples-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin: 14px 0 2px !important;
}

.samples { display: flex; gap: 8px; }

.samples button {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--dim);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}

.samples button:hover { color: var(--acc-text); border-color: var(--acc); }

/* ---------- panes ---------- */

.panes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.panes[data-view="original"] { grid-template-columns: 1fr; }
.panes[data-view="original"] #pane-vector { display: none; }
.panes[data-view="vector"] { grid-template-columns: 1fr; }
.panes[data-view="vector"] #pane-original { display: none; }

.pane {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pane + .pane { border-left: 1px dashed #c3c4c6; }
.panes[data-view="original"] .pane, .panes[data-view="vector"] .pane { border-left: none; }

.pane-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.82);
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.pane-content {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
}

.zoomable {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* checkerboard behind the artwork so transparency reads correctly */
  background-image:
    linear-gradient(45deg, rgba(49, 49, 49, 0.07) 25%, transparent 25%, transparent 75%, rgba(49, 49, 49, 0.07) 75%),
    linear-gradient(45deg, rgba(49, 49, 49, 0.07) 25%, transparent 25%, transparent 75%, rgba(49, 49, 49, 0.07) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.zoomable img, .zoomable svg { display: block; image-rendering: auto; }

/* ---------- spinner / busy ---------- */

.spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--acc-text);
  background: rgba(255, 255, 255, 0.55);
  z-index: 4;
  pointer-events: none;
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  animation: scan 1.6s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes scan {
  0%   { top: 12%; }
  50%  { top: 86%; }
  100% { top: 12%; }
}

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

.readout {
  flex: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-align: center;
  min-height: 16px;
}

.readout.error { color: var(--err); letter-spacing: 0.04em; }

/* ---------- drop overlay ---------- */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  border: 3px dashed var(--acc);
  border-radius: 12px;
  margin: 10px;
  pointer-events: none;
}

.drop-overlay span {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.32em;
  color: var(--acc-text);
}

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

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

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* narrow screens: stack the sidebar above the mat */
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 45vh;
  }
  .stage { min-height: 60vh; }
  .privacy { display: none; }
}