/* ============================================================================
   Pattern Studio — LIGHT port of the standalone Pattern Maker, restyled to the
   Kumiko Workshop warm-paper brand. All component rules are scoped under
   `.maker-app`; the app JS (assets/maker-app.js) is untouched. Tokens below are
   the maker-internal names the app CSS/markup expect, remapped to light values.
   ========================================================================== */
.maker-app{
  /* surfaces */
  --paper:#F6F1E6; --paper-2:#FBF8F1;
  --bg2:#F8F7F3; --bg3:#EFE7DA;
  /* ink */
  --ink:#241D14; --ink2:#574B3B; --fg:#241D14; --fg-dim:#4A3E2E;
  --muted:#6E6152; --faint:#B4A88F;
  /* accent (warm wood) */
  --amber:#8A5626; --amber-bright:#A06D34; --amber-ink:#F7F1E5;
  /* lines + canvas ink */
  --line:rgba(58,42,24,.14); --line2:rgba(58,42,24,.26);
  --tint:rgba(138,86,38,.10); --guide:rgba(58,42,24,.13); --strip:#241D14;
  --warn:#8A4B26; --warn-soft:rgba(138,86,38,.12);
  /* type — the site's fonts */
  --serif:'Cormorant Garamond','Iowan Old Style',Palatino,Georgia,serif;
  --jp:'Shippori Mincho','Iowan Old Style',serif;
  --sans:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-s:6px; --r-m:9px; --r-l:14px; --ease:cubic-bezier(.16,.8,.24,1);

  background:transparent; color:var(--fg);
  font:15px/1.6 var(--sans); font-weight:300;
}
.maker-app *{ box-sizing:border-box; }
.maker-app .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---- chips / controls ---------------------------------------------------- */
.maker-app .kp-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.04em; background:var(--bg3); color:var(--fg-dim); border:1px solid var(--line);
  border-radius:var(--r-m); padding:8px 13px; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.maker-app .kp-chip:hover{ border-color:var(--line2); color:var(--fg); background:#F2EBDC; }
.maker-app .kp-chip:active{ transform:translateY(1px); }
.maker-app .kp-chip.on{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber); font-weight:500; }
.maker-app .kp-chip:disabled{ opacity:.4; cursor:default; }
.maker-app .kp-chip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* palette: little washi swatches */
.maker-app .pal{ width:64px; height:64px; padding:0; justify-content:center; background:var(--paper-2); border:1px solid var(--line); }
.maker-app .kp-chip.pal:hover{ background:#fff; border-color:var(--line2); }
.maker-app .kp-chip.pal.on{ background:#fff; border:2px solid var(--amber); box-shadow:0 0 0 3px rgba(138,86,38,.15); }
.maker-app .pal-add{ font-size:26px; color:var(--muted); font-weight:300; background:var(--bg3); }
.maker-app .pal-add:hover{ color:var(--amber); }
.maker-app .pal-erase{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); background:var(--bg3); }

.maker-app .kdiv{ width:1px; height:20px; background:var(--line2); }

/* ---- selected-pattern preview ------------------------------------------- */
.maker-app .kpreview{ display:flex; align-items:center; gap:16px; margin:2px 0 12px; padding:12px 14px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-l); }
.maker-app .kpreview-tile{ flex:0 0 auto; width:96px; height:96px; border-radius:var(--r-m); background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; padding:8px; box-shadow:inset 0 1px 4px rgba(58,42,24,.10); }
.maker-app .kpreview-tile svg{ width:100%; height:100%; display:block; }
.maker-app .kpreview-meta{ min-width:0; }
.maker-app .kpreview-meta .lbl{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.maker-app .kpreview-meta .nm{ font-family:var(--serif); font-size:22px; color:var(--fg); margin-top:2px; line-height:1.1; }
.maker-app .kpreview-meta .hint{ margin-top:6px; }

/* ---- the drawing island: light washi paper ------------------------------ */
.maker-app .kpanel{ background:var(--paper); border:1px solid var(--line2); border-radius:var(--r-l); padding:12px; box-shadow:inset 0 1px 6px rgba(58,42,24,.08); }

.maker-app .hint{ font-size:12px; color:var(--muted); line-height:1.55; }
.maker-app .hint strong{ font-weight:500 !important; color:var(--ink) !important; }

/* ---- inputs -------------------------------------------------------------- */
.maker-app input[type=range]{ -webkit-appearance:none; appearance:none; height:3px; border-radius:3px; background:var(--line2); outline:none; }
.maker-app input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--amber); cursor:pointer; box-shadow:0 1px 3px rgba(58,42,24,.35); }
.maker-app input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:var(--amber); cursor:pointer; }
.maker-app input[type=range]:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.maker-app input[type=text],.maker-app input[type=number]{ background:#fff; color:var(--fg); border:1px solid var(--line2); border-radius:var(--r-s); font-family:inherit; outline:none; }
.maker-app input[type=text]{ padding:8px 11px; font-size:13px; }
.maker-app input[type=number]{ width:58px; padding:4px 7px; font-size:12.5px; text-align:right; font-weight:400; -moz-appearance:textfield; font-variant-numeric:tabular-nums; }
.maker-app input[type=number]::-webkit-inner-spin-button,.maker-app input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.maker-app input[type=text]:focus,.maker-app input[type=number]:focus{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(138,86,38,.12); }
.maker-app textarea{ background:#fff; color:var(--ink2); border:1px solid var(--line2); border-radius:var(--r-s); padding:8px; font-family:var(--mono); }

/* ---- dimensions bar ------------------------------------------------------ */
.maker-app .kdimsbar{ border:1px solid var(--line); border-radius:var(--r-l); padding:16px 18px; margin-top:14px; background:var(--bg2); }
.maker-app .kdimhead{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.maker-app .kdims{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px 24px; }
.maker-app .kdim{ display:flex; flex-direction:column; gap:8px; }
.maker-app .kdim .row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.maker-app .kdim label{ font-size:12px; color:var(--muted); }
.maker-app .vbox{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.maker-app .kdim input[type=range]{ width:100%; }
.maker-app .edsize label{ color:var(--muted); }

/* ---- composer canvas ----------------------------------------------------- */
.maker-app .cm-guide{ fill:none; stroke:var(--guide); stroke-width:.7; pointer-events:none; }
.maker-app .cm-frame{ fill:none; stroke:var(--line2); stroke-width:1; pointer-events:none; }
.maker-app .cm-edge{ fill:var(--strip); stroke:var(--strip); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; pointer-events:none; }
.maker-app .cm-hit{ fill:transparent; cursor:pointer; }
.maker-app .cm-hit:hover{ fill:var(--tint); }

/* ---- editor canvas ------------------------------------------------------- */
.maker-app .kp-tri{ fill:rgba(58,42,24,.05); stroke:none; pointer-events:none; }
.maker-app .kp-edge{ stroke:var(--strip); stroke-width:2.5; stroke-linecap:round; pointer-events:none; }
.maker-app .kp-edge.sel{ stroke:var(--amber); stroke-width:4; }
.maker-app .kp-hit{ stroke:transparent; stroke-width:15; pointer-events:stroke; cursor:pointer; }
.maker-app .kp-hit:hover{ stroke:var(--tint); }
.maker-app .kp-jx{ fill:var(--amber); stroke:none; opacity:.6; pointer-events:none; }
.maker-app .kp-pt{ fill:#fff; stroke:#b8ac97; stroke-width:1.3; cursor:pointer; }
.maker-app .kp-pt:hover{ stroke:var(--amber); stroke-width:2.2; }
.maker-app .kp-pt.sel{ fill:var(--amber); stroke:var(--amber); }

/* ---- offline/load banner (hidden unless the JS shows it) ----------------- */
.maker-app .kload{ display:none; font-size:12.5px; color:var(--warn); background:var(--warn-soft); border:1px solid rgba(138,86,38,.2); border-radius:var(--r-m); padding:9px 12px; margin-bottom:13px; line-height:1.5; }

@media (max-width:560px){ .maker-app .kpreview{ flex-wrap:wrap; } }