/* The art lies on a board, the settings in a narrow column beside it (under
   it on a phone). Colours and type are the sticker sheet simulator's and
   ふち文字's. The board is the checkerboard that stands for transparency,
   faint so the art reads first, and stays light in the dark scheme. */
:root {
  --board: #ececec;
  --board-alt: #e3e3e3;
  --board-ink: #5a6862;
  --line-strong: #aebfb4;
  --panel: #f7f9f7;
  --ink: #1b2420;
  --sub: #5a6862;
  --rule: #d3dcd6;
  --accent: #1d6a53;
  --accent-ink: #ffffff;
  --danger: #b3261e;
  --font-body: 'Roboto', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line-strong: #2c3a32; --panel: #1c2621;
    --ink: #e2e9e5; --sub: #9aaaa2; --rule: #2d3933; --accent: #6fc3a4; --accent-ink: #0e1713;
    --danger: #f2877e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --line-strong: #2c3a32; --panel: #1c2621;
  --ink: #e2e9e5; --sub: #9aaaa2; --rule: #2d3933; --accent: #6fc3a4; --accent-ink: #0e1713;
  --danger: #f2877e;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; height: 100%; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 14px/1.65 var(--font-body);
  font-variant-numeric: tabular-nums;
  padding-top: env(safe-area-inset-top, 0px);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
button, input { font: inherit; color: inherit; }
button, label { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px 12px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--rule);
}
h1 { font-size: 20px; font-weight: 700; margin: 0; }
.top-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.file-btn, .help-open { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; position: relative; }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* How to use: a sheet of paper over the bench, as in ふち文字 */
.help {
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 720px);
  overflow-y: auto;
  padding: 22px 24px 24px;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 20px 60px rgb(10 20 15 / .3);
}
.help::backdrop { background: rgb(20 30 25 / .45); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help h2 { font-size: 18px; margin: 0; }
.help h2:focus { outline: none; }
.help-close {
  appearance: none; border: 0; background: none; color: var(--sub); font-size: 22px; line-height: 1;
  width: 36px; height: 36px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .help-close:hover { color: var(--ink); } }
.help-lead { margin: 12px 0 0; font-size: 14px; text-wrap: pretty; }
.help-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.help-steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
.help-steps li::before {
  content: counter(step); grid-row: span 2;
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent);
  font: 500 13px/1 var(--font-body);
}
.help-steps b { font-weight: 700; }
.help-steps p { margin: 2px 0 0; color: var(--sub); font-size: 13px; text-wrap: pretty; }
.help[open] { animation: help-in 250ms var(--ease-out); }
.help[open]::backdrop { animation: fade-in 250ms var(--ease-out); }
@keyframes help-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes fade-in { from { opacity: 0; } }

/* 書き出し: the PNGs as cards, each saved by itself; a bottom sheet on a phone. */
.sheet { width: min(880px, calc(100vw - 32px)); padding-bottom: 0; }
.pieces {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.piece { display: grid; gap: 6px; min-width: 0; }
.thumb {
  position: relative; aspect-ratio: 1;
  background-color: #ececec;
  background-image: conic-gradient(#e3e3e3 25%, transparent 0 50%, #e3e3e3 0 75%, transparent 0);
  background-size: 14px 14px;
}
/* Laid over the square rather than in it, so a tall picture cannot stretch the card. */
.thumb img {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: contain; opacity: 0; transition: opacity 200ms var(--ease-out);
}
.thumb .num { z-index: 1; }
.piece.ready .thumb img { opacity: 1; }
.num {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--font-body);
}
.piece-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.size { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece-foot .btn { flex: none; padding: 4px 12px; font-size: 13px; text-decoration: none; }
.piece:not(.ready) .piece-foot .btn { opacity: .45; pointer-events: none; }
.sheet-foot {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end;
  margin: 16px -24px 0; padding: 12px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--rule);
}
@media (max-width: 899px) {
  .sheet {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding-inline: 16px;
  }
  .sheet[open] { animation: sheet-up 400ms cubic-bezier(0.32, 0.72, 0, 1); }
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sheet-foot { margin-inline: -16px; padding-inline: 16px; }
  .sheet-foot .btn { width: 100%; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

.bench { flex: 1; display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.stage {
  position: relative;
  background-color: var(--board);
  background-image: conic-gradient(var(--board-alt) 25%, transparent 0 50%, var(--board-alt) 0 75%, transparent 0);
  background-size: 20px 20px;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#view { display: block; width: 100%; height: 100%; touch-action: pinch-zoom; }
#view.over-sticker { cursor: pointer; }
.empty {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px;
  color: var(--board-ink); text-align: center; pointer-events: none;
}
.drop-hint {
  position: absolute; inset: 12px; display: grid; place-items: center;
  border: 2px dashed #1d6a53; color: #1d6a53; font-weight: 700;
  background: rgb(247 249 247 / .7); pointer-events: none;
}
.status { margin: 0; padding: 6px 16px 10px; text-align: center; font-size: 13px; color: var(--board-ink); min-height: 1.65em; }
.status.error { color: #b3261e; }

.panel {
  display: grid; gap: 14px; align-content: start; min-width: 0;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .bench { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: none; }
  .panel { border-top: 0; border-left: 1px solid var(--rule); padding-top: 18px; }
}
.field { display: grid; gap: 3px; font-size: 12px; color: var(--sub); min-width: 0; }
.field.range { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.field.range > span { grid-column: 1 / -1; }
.field output { font-size: 12px; color: var(--ink); min-width: 4.5em; text-align: right; }
.field input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.count { color: var(--sub); }
.btn {
  appearance: none; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font-weight: 700; padding: 9px 14px; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { filter: brightness(1.08); } }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .help[open], .sheet[open] { animation-name: fade-in; }
  .thumb img { transition: none; }
}