/*
  Mark Maker's instrument panel, carried over: the same nine tokens, DM Sans and
  DM Mono, hairline rules, no radius except the stadium pills, and one accent
  that only ever means "this needs you".

  The one departure is size. Mark Maker is set at 13px for a designer at a desk;
  this is for someone who is not, so every type style is a step larger. The
  proportions between them are kept.
*/

@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 500;
  font-display: swap;
  src: url("vendor/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-weight: 500;
  font-display: swap;
  src: url("vendor/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
}

:root,
[data-mode="dark"] {
  --color-surface: #1a1a19;
  --color-panel: #222221;
  --color-raised: #2b2b29;
  --color-rule: #383836;
  --color-rule-bright: #4d4d4a;
  --color-dim: #82807b;
  --color-mid: #a6a49f;
  --color-ink: #f2f0ec;
  --color-signal: #ff4436;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --bar-h: 52px;
}

[data-mode="light"] {
  --color-surface: #c9c7c1;
  --color-panel: #d3d1cb;
  --color-raised: #dedcd6;
  --color-rule: #a8a59e;
  --color-rule-bright: #8b8881;
  --color-dim: #6b6862;
  --color-mid: #4a4843;
  --color-ink: #131311;
  --color-signal: #c4160a;
}

* { box-sizing: border-box; }

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

body {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-ink);
  font: 15px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--color-ink); color: var(--color-surface); }

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

button { font-family: inherit; }
button:not(:disabled), label, [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Type */
.t-micro {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.t-display {
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.t-data {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dim { color: var(--color-dim); }
.mid { color: var(--color-mid); }
.lead { font-size: 17px; }
.signal { color: var(--color-signal); }

/* The one curved form. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.pill-big { padding: 15px 28px; font-size: 13px; }
.pill-solid {
  background: var(--color-ink);
  color: var(--color-surface);
  border: 1px solid var(--color-ink);
}
.pill-solid:disabled {
  background: transparent;
  color: var(--color-dim);
  border-color: var(--color-rule);
}
.pill-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-bright);
}
.pill-ghost:hover:not(:disabled), .pill-ghost:active { border-color: var(--color-ink); }

/* A lit caption: solid ink with the words knocked out. */
.chip {
  background: transparent;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--color-rule);
  color: var(--color-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip:hover { border-color: var(--color-rule-bright); color: var(--color-ink); }
.chip.on, .chip.on:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }

/* Top bar */
.bar {
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-rule);
}
.steps { display: flex; gap: 6px; list-style: none; }
.bar-end { margin-left: auto; display: flex; gap: 8px; }
.bar .pill { padding: 7px 16px; font-size: 11px; }
.bar-end { align-items: center; }

/* The light/dark square from jacksongraphic.com: half-filled on the diagonal,
   and the filled half swaps corners with the mode. */
.mode {
  display: flex;
  margin-left: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
}
.mode:hover { color: var(--color-mid); }
.mode-box {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  background: linear-gradient(to bottom right, transparent 50%, currentColor 50%);
}
[data-mode="dark"] .mode-box {
  background: linear-gradient(to bottom right, currentColor 50%, transparent 50%);
}

main { flex: 1; min-height: 0; display: flex; }
main > section { flex: 1; min-width: 0; }

/* Start screen */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px;
  text-align: center;
}
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(600px, 100%);
  padding: 64px 32px;
  border: 1px solid var(--color-rule-bright);
}
.drop.over, .drop:hover { border-color: var(--color-ink); }
.drop.over { background: var(--color-panel); }
.drop-text { display: flex; flex-direction: column; gap: 8px; max-width: 42ch; }

/* Work screens */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.stage {
  display: grid;
  place-items: center;
  padding: 32px;
  min-height: 0;
  overflow: hidden;
}
.panel {
  background: var(--color-panel);
  border-left: 1px solid var(--color-rule);
  overflow-y: auto;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-dim);
}
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 22px;
  border-bottom: 1px solid var(--color-rule);
}
.panel-body:last-child { border-bottom: 0; }
.note { font-size: 13.5px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row .pill { flex: 1 1 auto; }
#sliders, #fineSliders { display: flex; flex-direction: column; gap: 12px; }

/* Corner picker */
.photo-wrap { position: relative; line-height: 0; touch-action: none; }
#photo { width: 100%; height: 100%; display: block; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#shade { fill: rgba(0, 0, 0, 0.55); }
#quad { fill: none; stroke: #f2f0ec; stroke-width: 1; vector-effect: non-scaling-stroke; }
.handle { cursor: grab; outline: none; }
.handle .hit { fill: transparent; }
/* Fixed light-on-dark rather than ink-on-surface: these sit on the photo, not the app. */
.handle .dot { fill: #f2f0ec; stroke: #131311; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.handle:focus .dot { stroke-width: 3; }
.handle.drag { cursor: grabbing; }
.handle.drag .dot { fill-opacity: 0.2; }

#loupe {
  position: fixed;
  width: 160px;
  height: 160px;
  border: 1px solid #f2f0ec;
  outline: 1px solid #131311;
  pointer-events: none;
  z-index: 10;
}

#result { display: block; }

/* Sliders: a hairline track and a fader cap. */
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.slider label {
  color: var(--color-mid);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: default;
}
.slider .num {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 6ch;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px solid var(--color-rule-bright);
  background: transparent;
  color: var(--color-ink);
  font: 13px var(--font-mono);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: text;
}
.slider .num::-webkit-inner-spin-button, .slider .num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slider .num:hover, .slider .num:focus { border-bottom-color: var(--color-ink); }
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--color-rule-bright); }
.slider input[type="range"]::-moz-range-track { height: 1px; background: var(--color-rule-bright); }
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 22px;
  margin-top: -11px;
  background: var(--color-ink);
  border: 0;
  border-radius: 0;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 22px;
  background: var(--color-ink);
  border: 0;
  border-radius: 0;
}

.check { display: flex; gap: 12px; align-items: center; color: var(--color-mid); }
.check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--color-rule-bright);
  background: transparent;
  cursor: pointer;
}
.check input:checked { background: var(--color-ink); border-color: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-panel); }

@media (max-width: 820px) {
  .steps { display: none; }
  main { display: block; overflow-y: auto; }
  .work { display: block; }
  .stage { height: 56vh; padding: 16px; }
  .panel { border-left: 0; border-top: 1px solid var(--color-rule); overflow: visible; }
  .t-display { font-size: 36px; }
}

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