/* (c) Alpas Made LLC. All rights reserved.
 *
 * Kinetic Fill on the KC Tools design system.
 *
 * The tool's code reads these class names and toggles several of them
 * (on, bg-*, tool-pick, dragging, can-pan, picking-cut, drag, bad, active,
 * busy, loaded, chip, warn, ink-sw, sw, vrow, xcheck, toast, theme). They are
 * kept exactly and restyled here, scoped under .kf so nothing leaks into the
 * KC Tools shell (no store header or footer). Every value is a --kc-* or --kt-* token from design/tokens.css.
 */

.kf { --kf-view-h: clamp(360px, calc(100vh - 232px), 1000px); }
.kf [hidden] { display: none !important; }

/* ---------- type and small parts */
.kf .hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kc-muted); }
.kf .hint strong { color: var(--kc-text); font-weight: 600; }
.kf .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kf .row.tight { gap: 8px; }
.kf .pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--kc-radius-pill); background: var(--kc-raised); border: 1px solid var(--kc-hairline); font-size: 13px; color: var(--kc-prose); max-width: 100%; overflow-wrap: anywhere; }
.kf .subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 600 14px/1.3 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; }
.kf .ink-label { font: 700 11px/1.4 var(--kc-body); letter-spacing: 0.02em; text-transform: uppercase; color: var(--kc-muted); }
.kf vector-mark { flex: none; }

/* ---------- fields */
.kf label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; font-size: 14px; color: var(--kc-prose); }
.kf label.field, .kf .slider { display: flex; flex-direction: column; align-items: stretch; gap: 8px; font-size: 13px; color: var(--kc-muted); }
.kf label.slider { flex-direction: row; flex-wrap: wrap; }
.kf label.slider input { flex: 1 0 100%; }
.kf .slider output { margin-left: auto; color: var(--kc-text); font-variant-numeric: tabular-nums; }
.kf label.check { flex-wrap: nowrap; align-items: flex-start; min-height: var(--kt-target); padding-top: 12px; }
.kf label.check.small { font-size: 13px; color: var(--kc-muted); }
.kf input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--kc-red-button); }
.kf input[type="range"] { width: 100%; margin: 0; min-height: var(--kt-target); accent-color: var(--kc-red-button); }
.kf select, .kf input[type="number"], .kf #ink-hex, .kf #paint-hex {
  min-height: var(--kt-target); padding: 8px 12px; border-radius: var(--kc-radius-control); border: 1px solid var(--kc-hairline);
  background: var(--kc-raised); color: var(--kc-text); font: 400 16px/1.2 var(--kc-body); max-width: 100%; transition: border-color var(--kc-hover);
}
.kf select { width: 100%; }
.kf #units { width: auto; }
.kf input[type="number"] { width: 104px; font-variant-numeric: tabular-nums; }
.kf select:hover, .kf input[type="number"]:hover, .kf #ink-hex:hover, .kf #paint-hex:hover { border-color: var(--kc-line-hover); }
.kf #ink-hex, .kf #paint-hex { font: 600 16px/1.2 var(--kc-mono); text-transform: uppercase; }
.kf #ink-hex { flex: 1 1 104px; min-width: 0; }
.kf #paint-hex { flex: 0 1 128px; min-width: 0; }
.kf #ink-hex.bad, .kf #paint-hex.bad { border-color: var(--kc-red); }
.kf input[type="color"] { flex: none; width: 56px; height: var(--kt-target); padding: 4px; border-radius: var(--kc-radius-callout); border: 1px solid var(--kc-hairline); background: var(--kc-raised); cursor: pointer; }

/* ---------- buttons. .btn is the one red button (Download transparent PNG) */
.kf .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--kt-target); padding: 0 20px; border: 0; border-radius: var(--kc-radius-control); background: var(--kc-red-button); color: #ffffff; font: 600 15px/1 var(--kc-body); cursor: pointer; transition: background var(--kc-hover); }
.kf .btn:hover:not(:disabled) { background: var(--kc-red-hover); }
.kf .btn.dark, .kf button.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--kt-target); padding: 0 16px; border: 1px solid var(--kc-line-ui); border-radius: var(--kc-radius-control); background: var(--kc-card); color: var(--kc-text); font: 500 15px/1.2 var(--kc-body); cursor: pointer; text-align: center; transition: background var(--kc-hover); }
.kf .btn.dark:hover:not(:disabled), .kf button.ghost:hover:not(:disabled) { background: var(--kc-raised); }
.kf .btn:disabled, .kf button.ghost:disabled { opacity: 0.6; cursor: not-allowed; }
.kf button.ghost.small { padding: 0 12px; font-size: 14px; }
.kf button.ghost.sq { width: var(--kt-target); padding: 0; font-size: 20px; }
.kf button.ghost.active { background: rgba(255, 255, 255, 0.10); border-color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-text); }
.kf .btn.slim { width: 100%; padding: 0 12px; }
.kf .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kf .dl-stack { display: grid; gap: 8px; }
.kf .dl-stack .btn { width: 100%; }

/* ---------- segmented controls. .on is the pressed state the code sets */
.kf .seg { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; border-radius: var(--kc-radius-callout); background: var(--kc-ground); border: 1px solid var(--kc-hairline); }
.kf .seg.full { display: flex; }
.kf .seg button { position: relative; min-height: 36px; min-width: var(--kt-target); padding: 0 12px; border: 0; border-radius: var(--kc-radius-control); background: none; color: var(--kc-muted); font: 500 14px/1 var(--kc-body); white-space: nowrap; cursor: pointer; }
.kf .seg button::after { content: ""; position: absolute; inset: -4px 0; }
.kf .seg.full button { flex: 1 1 0; min-width: 0; }
.kf .seg button:hover { color: var(--kc-text); }
.kf .seg button.on { background: var(--kc-raised); color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-line-ui); }

/* ---------- head */
.kf .kt-ws__head { align-items: start; }
.kf #file-row { margin-top: 8px; gap: 8px; }
.kf .kf-legal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kc-muted); max-width: 72ch; }

/* ---------- before a file: drop zone */
.kf #drop-section { display: grid; gap: 16px; }
.kf #dropzone { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; text-align: center; border: 1px dashed var(--kc-line-ui); border-radius: var(--kc-radius-panel); background: var(--kc-card); cursor: pointer; transition: border-color var(--kc-hover), background var(--kc-hover); }
.kf #dropzone:hover, .kf #dropzone.drag { border-color: var(--kc-line-hover); background: var(--kc-raised); }
.kf #dropzone .big { margin: 0; font: 600 clamp(20px, 2.2vw, 24px)/1.1 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--kc-text); }
.kf #dropzone .hint { max-width: 56ch; }
.kf #dropzone .kf-drop-ic { width: 28px; height: 28px; color: var(--kc-muted); }
.kf #sample-row { justify-content: center; }
.loaded .kf #drop-section { display: none; }

/* ---------- workspace */
.kf #workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.kf #wb-main { min-width: 0; }
.kf .kf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--kc-hairline); }
.kf .kf-bar + .kf-bar { border-top: 0; }
.kf .tool-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.kf .kf-bar--sub { background: var(--kc-card); }
.kf .kf-bar__gap { flex: 1 1 auto; }
.kf .viewport { position: relative; height: var(--kf-view-h); overflow: hidden; touch-action: none; user-select: none; cursor: crosshair; contain: strict; }
.kf .viewport.bg-checker { background-color: var(--kt-stage-checker-a); background-image: linear-gradient(45deg, var(--kt-stage-checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--kt-stage-checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--kt-stage-checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--kt-stage-checker-b) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.kf .viewport.bg-white { background: #ffffff; }
.kf .viewport.bg-black { background: #000000; }
.kf .viewport.tool-pick { cursor: default; }
.kf .viewport.can-pan { cursor: grab; }
.kf .viewport.dragging { cursor: grabbing; }
.kf .viewport.picking-cut { cursor: crosshair; outline: 2px solid var(--kt-cut-line); outline-offset: -2px; }
.kf #marquee { position: absolute; z-index: 3; pointer-events: none; border: 1.5px dashed var(--kt-select); background: var(--kt-select-tint); }
.kf #view-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kf .stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kf .stage canvas, .kf .stage #svg-host { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kf .kf-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid var(--kc-hairline); font-size: 14px; color: var(--kc-prose); }
.kf .kf-status #status-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.kf .kf-status #tool-hint { flex-basis: 100%; }
.kf .kf-status #tool-hint:empty { display: none; }
.kf #quick-check { display: flex; flex-wrap: wrap; gap: 8px; }
.kf #quick-check:empty { display: none; }
.kf #quick-check .chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--kc-radius-pill); background: var(--kc-raised); border: 1px solid var(--kc-hairline); font-size: 13px; color: var(--kc-prose); }
.kf #quick-check .chip.warn { border-color: var(--kc-flag); color: var(--kc-flag); }
.kf .kf-under { display: grid; gap: 12px; margin-top: 12px; }
.kf .notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--kc-radius-callout); background: var(--kc-red-tint); border: 1px solid var(--kc-red-edge); font-size: 14px; color: var(--kc-prose); }
.kf .notice span { flex: 1 1 220px; min-width: 0; }
.kf .busy-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; color: var(--kc-text); }
.kf .busy-box p { margin: 0; font: 600 20px/1.1 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; }
.kf .busy-box.overlay { position: absolute; inset: 0; justify-content: center; background: var(--kt-dim); opacity: 0; pointer-events: none; transition: opacity 0.2s ease 0.2s; }
body.busy .kf .busy-box.overlay { opacity: 1; }

/* paint bar: a tool option, so it sits in the bar family, not in a color of its own */
.kf .paint-bar { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--kc-hairline); background: var(--kc-raised); }
.kf .ink-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kf .paint-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- controls column */
.kf #wb-side { min-width: 0; display: grid; border-radius: var(--kc-radius-panel); background: var(--kc-card); border: 1px solid var(--kc-hairline); }
.kf #wb-side > * + * { border-top: 1px solid var(--kc-hairline); }
.kf .panel, .kf #export-section { padding: 16px; background: none; border-radius: 0; }
.kf .panel-body { display: grid; gap: 12px; margin-top: 12px; }
.kf #export-section { display: grid; gap: 12px; }
.kf .side-title, .kf .sum-title { font: 600 16px/1.2 var(--kc-display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--kc-heading); }
.kf .sum-hint { font-size: 13px; color: var(--kc-muted); }
.kf details > summary { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--kt-target); cursor: pointer; color: var(--kc-text); }
.kf details > summary::-webkit-details-marker { display: none; }
.kf details > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--kc-muted); border-bottom: 2px solid var(--kc-muted); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.kf details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.kf .panel > summary { margin: -12px 0; }
.kf details.sub { border-top: 1px solid var(--kc-line-inner); }
.kf details.sub > summary { font-size: 14px; font-weight: 500; color: var(--kc-prose); }
.kf details.sub > summary:hover { color: var(--kc-text); }
.kf .cut-btns { display: grid; gap: 8px; }
.kf .ink-panel { display: grid; gap: 12px; padding: 12px; border-radius: var(--kc-radius-callout); background: var(--kc-raised); border: 1px solid var(--kc-hairline); }

/* swatches: selected gets a ring in the text color, never color alone */
.kf .ink-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kf .ink-sw, .kf .sw { position: relative; min-height: var(--kt-target); aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: var(--kc-radius-control); outline: 1px solid var(--kc-line-ui); outline-offset: -1px; cursor: pointer; }
.kf .paint-row .ink-sw { width: var(--kt-target); height: var(--kt-target); aspect-ratio: auto; }
.kf .ink-sw.on, .kf .sw.on { outline: 2px solid var(--kc-text); outline-offset: 2px; }
.kf .ink-sw:focus-visible, .kf .sw:focus-visible { outline: 2px solid var(--kc-focus, #69b3ff); outline-offset: 2px; }
.kf .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.kf .sw { width: var(--kt-target); }
.kf .sw .role { position: absolute; left: 0; right: 0; bottom: 2px; font: 700 8px var(--kc-body); text-align: center; pointer-events: none; }
.kf .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kf .tags button { min-height: var(--kt-target); padding: 0 12px; border-radius: var(--kc-radius-pill); border: 1px solid var(--kc-hairline); background: var(--kc-raised); color: var(--kc-prose); font: 500 14px/1 var(--kc-body); cursor: pointer; }
.kf .tags button.on { border-color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-text); color: var(--kc-text); }
.kf #theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 320px; overflow-y: auto; }
.kf .theme { min-width: 0; padding: 8px; border-radius: var(--kc-radius-callout); border: 1px solid var(--kc-hairline); background: var(--kc-raised); color: var(--kc-text); font: inherit; text-align: left; cursor: pointer; }
.kf .theme.on { border-color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-text); }
.kf .theme .strip { display: flex; height: 24px; border-radius: 4px; overflow: hidden; }
.kf .theme .strip i { flex: 1; }
.kf .theme .strip i:first-child { flex: 2.2; }
.kf .theme .name { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

/* lines */
.kf .sel-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--kc-radius-callout); background: var(--kc-raised); border: 1px solid var(--kc-line-ui); }
.kf .sel-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.kf #vec-list { display: grid; gap: 4px; max-height: 240px; margin-top: 8px; overflow-y: auto; }
.kf .vrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--kt-target); padding: 0 8px; border: 1px solid transparent; border-radius: var(--kc-radius-control); background: none; color: var(--kc-muted); font: 400 13px/1.3 var(--kc-body); text-align: left; cursor: pointer; }
.kf .vrow:hover { background: var(--kc-raised); color: var(--kc-text); }
.kf .vrow.on { border-color: var(--kc-text); color: var(--kc-text); }
.kf .vrow.removed .vn { text-decoration: line-through; opacity: 0.6; }
.kf .vrow .vn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf .vrow .tagc { flex: none; padding: 0 8px; border-radius: var(--kc-radius-pill); border: 1px solid var(--kt-cut-line); color: var(--kc-prose); font-size: 11px; }
.kf .xcheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: var(--kc-radius-callout); background: var(--kc-raised); border: 1px solid var(--kc-hairline); font-size: 13px; line-height: 1.45; color: var(--kc-prose); }
.kf .xcheck.warn { border-color: var(--kc-flag); }
.kf .xcheck span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }

/* toast: the store's floating panel */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--kc-radius-panel); background: var(--kc-card); border: 1px solid var(--kc-hairline); box-shadow: var(--kt-float-shadow); color: var(--kc-text); font: 400 14px/1.45 var(--kc-body); }

/* ---------- widths
   Preview and controls sit side by side only where the preview keeps at least
   about 480px: 900 to 1023 (no sidebar yet) and from 1200. From 1024 to 1199
   the sidebar takes 264px, so they stack rather than squeeze the art to 320px. */
@media (min-width: 900px) and (max-width: 1023px), (min-width: 1200px) {
  .kf #workbench { grid-template-columns: minmax(0, 1fr) var(--kt-panel-w); gap: 24px; }
}
@media (min-width: 1200px) {
  .kf #wb-main { position: sticky; top: 16px; }
  .kf #wb-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 599px) {
  .kf { --kf-view-h: 360px; }
  .kf #dropzone { padding: 48px 16px; }
  /* Phones: the preview comes right after the tool choice. Same rule as the
     original tool (background switch and Redo off below 600px), plus the
     history row moves under the preview. */
  .kf #bg-seg, .kf #redo-btn { display: none; }
  .kf .kt-view { display: flex; flex-direction: column; }
  .kf .kt-view > .kf-bar:first-child { order: 1; }
  .kf #paint-bar { order: 2; }
  .kf #viewport { order: 3; }
  .kf .kf-bar--sub { order: 4; border-bottom: 0; border-top: 1px solid var(--kc-hairline); }
  .kf .kf-status { order: 5; }
}

/* the embers container the tool still fills on load; the store look has no hero */
.kf #embers { display: none; }

/* Start over means nothing until a file is in */
.kf #clear-btn { display: none; }
.loaded .kf #clear-btn { display: inline-flex; }