/* Art for a part, Kinetic Carving. The page on the Kinetic Carving design system and the KC Tools
   additions: every value is a --kc-* or --kt-* token (design/tokens.css). Scoped under .kp. Status
   lines, step names, tabs and buttons wear Oswald (the KC tool display type); reading text, labels
   and hints stay Inter. Spacing on the 4px grid, nothing tapped under 44px. */

.kp { color: var(--kc-text); font: 16px/1.5 var(--kc-body); }
.kp * { box-sizing: border-box; }
.kp [hidden] { display: none !important; }
.kp .kt-ws > * { min-width: 0; }
.kp h1, .kp h2, .kp h3 { font-family: var(--kc-display); text-transform: uppercase; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; color: var(--kc-heading); margin: 0; }
.kp :focus-visible { outline: 2px solid var(--kc-focus); outline-offset: 2px; }
.kp a { color: var(--kc-text); text-underline-offset: 3px; }
.kp .kp-tagline { margin: 4px 0 0; max-width: 60ch; }

/* ---------- small parts */
.kp .kp-hint { color: var(--kc-muted); font-size: 0.85rem; margin: 0; }
.kp .kp-dim { color: var(--kc-muted); font-weight: 400; }
.kp .kp-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.kp .kp-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--kc-muted); min-width: 0; }
.kp .kp-field > span:first-child { font-weight: 500; }
.kp .kp-inline { display: flex; align-items: center; gap: 8px; color: var(--kc-text); }
.kp .kp-inline input { width: 8em; }
.kp select, .kp input[type="number"], .kp textarea { background: var(--kc-ground); color: var(--kc-text); border: 1px solid var(--kc-line-hover); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 0.95rem; min-height: 44px; max-width: 100%; }
.kp textarea { width: 100%; resize: vertical; border-radius: var(--kc-radius-callout); min-height: 44px; }
.kp select:focus, .kp input:focus, .kp textarea:focus { outline: 2px solid var(--kc-focus); outline-offset: 1px; }
.kp .kp-pill { display: inline-flex; align-items: center; min-height: 28px; background: var(--kc-ground); border: 1px solid var(--kc-line-inner); border-radius: 8px; padding: 4px 12px; font-size: 0.8rem; color: var(--kc-muted); max-width: 100%; overflow-wrap: anywhere; }
.kp .kp-pill.warn { border-color: var(--kc-red); color: var(--kc-text); }
.kp .kp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kp .kp-chips .kp-pill { font-size: 0.82rem; }
/* Beta: the design system's Beta pill (20px, white at 0.12, Inter 600 12px) */
.kp .kp-beta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--kc-line-row); color: var(--kc-text); font: 600 12px/1 var(--kc-body); white-space: nowrap; }
.kp .kp-beta-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.kp .kp-beta-note .kp-beta { flex: none; margin-top: 0; }
.kp .kp-notice { background: var(--kc-red-tint); border: 1px solid var(--kc-red-edge); padding: 12px 16px; border-radius: var(--kc-radius-callout); font-size: 0.9rem; }

/* ---------- display type: steps, tabs, buttons, status */
.kp .kp-step { background: var(--kc-card); border: 1px solid var(--kc-line-inner); border-radius: var(--kc-radius-panel); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.kp .kp-step__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kp .kp-step__head h2 { font-size: 1.5rem; }
.kp .kp-num { width: 32px; height: 32px; border-radius: 50%; background: var(--kc-red-button); color: #ffffff; font: 600 1rem var(--kc-display); display: grid; place-items: center; flex: none; }
.kp .kp-sub-status { margin-left: auto; font: 600 0.95rem var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--kc-muted); }
.kp .kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--kt-target); padding: 0 24px; border: 1px solid var(--kc-red-button); border-radius: var(--kc-radius-control); background: var(--kc-red-button); color: #ffffff; font: 600 1rem/1.2 var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; transition: background var(--kc-hover); }
.kp .kp-btn:hover { background: var(--kc-red-hover); border-color: var(--kc-red-hover); }
.kp .kp-btn:disabled { opacity: 0.5; cursor: default; }
.kp .kp-btn.dark { background: var(--kc-card); border-color: var(--kc-line-ui); color: var(--kc-text); }
.kp .kp-btn.dark:hover { background: var(--kc-raised); border-color: var(--kc-line-hover); }
.kp .kp-btn .arrow { font-weight: 700; }
.kp .kp-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: var(--kt-target); background: none; border: 1px solid var(--kc-line-hover); color: var(--kc-text); border-radius: 8px; padding: 8px 16px; cursor: pointer; font: 600 0.85rem var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; }
.kp .kp-ghost:hover { border-color: var(--kc-red); }
.kp .kp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--kc-line-hover); border-radius: 8px; overflow: hidden; background: var(--kc-ground); align-self: flex-start; max-width: 100%; }
.kp .kp-seg button { background: none; border: none; color: var(--kc-muted); padding: 8px 16px; min-height: var(--kt-target); cursor: pointer; font: 600 0.88rem var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; }
.kp .kp-seg button[aria-pressed="true"], .kp .kp-seg button[aria-selected="true"] { background: var(--kc-red-button); color: #ffffff; }
.kp .kp-seg button:focus-visible { outline-offset: -4px; }
.kp .kp-seg--tabs button { font-size: 1rem; padding: 12px 20px; }
.kp .kp-go { display: flex; justify-content: flex-end; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.kp .kp-go--art { justify-content: space-between; }
.kp .kp-go--art .kp-btn { order: 2; }
.kp .kp-busy { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
.kp .kp-busy p { margin: 0; font: 600 1.1rem var(--kc-display); text-transform: uppercase; letter-spacing: 0.04em; }
.kp .kp-busy vector-mark { filter: drop-shadow(0 0 16px var(--kc-red-edge)); }
.kp vector-mark { flex: none; }
.kp .kp-step__head vector-mark { margin-left: -4px; }
.kp details.kp-sub > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: var(--kt-target); font: 600 0.95rem var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--kc-muted); }
.kp details.kp-sub > summary::-webkit-details-marker { display: none; }
.kp details.kp-sub > summary::before { content: "\25B8"; color: var(--kc-red); font-size: 0.9rem; flex: none; }
.kp details.kp-sub[open] > summary::before { content: "\25BE"; }
.kp details.kp-sub > summary:hover { color: var(--kc-text); }
.kp .kp-more { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; align-items: flex-start; }
.kp .kp-more > * { max-width: 100%; }

/* ---------- step 1: the part */
.kp .kp-part { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px 24px; align-items: start; }
.kp .kp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kp .kp-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px 12px; align-items: end; }
.kp .kp-params input { width: 100%; }
.kp #part-pick { width: 100%; }
.kp .kp-fig { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kp #part-preview { background: #ffffff; border: 1px solid var(--kc-line-inner); border-radius: var(--kc-radius-callout); padding: 8px; display: grid; place-items: center; height: 140px; }
.kp #part-preview svg { width: 100%; height: 100%; display: block; }
.kp #part-preview .kp-preview-empty { margin: 0; color: #3a3a3a; font-size: 0.9rem; text-align: center; }
.kp .kp-fig figcaption { display: flex; flex-wrap: wrap; gap: 4px; }
.kp .kp-fig .kp-pill { font-size: 0.72rem; padding: 4px 8px; min-height: 24px; }
.kp .kp-fig .kp-seg { display: flex; width: 100%; }
.kp .kp-fig .kp-seg button { flex: 1 1 0; padding: 8px; }
.kp #machine, .kp #bit-angle { display: flex; }
.kp #machine button, .kp #bit-angle button { flex: 1 1 auto; padding: 8px 12px; }
.kp #part-status:empty { display: none; }
/* the bit links are tapped at the bench: 44px tall inside the hint line */
.kp .kp-bits a { display: inline-block; padding: 12px 0; color: var(--kc-text); }

/* ---------- step 2: the art */
.kp .kp-panel { display: flex; flex-direction: column; gap: 12px; }
.kp .kp-art { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; }
.kp .kp-art .kp-seg { display: flex; }
.kp .kp-art .kp-seg button { flex: 1 1 0; }
.kp .kp-ai-rule { margin-top: -4px; }
.kp .kp-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.kp .kp-refs figure { margin: 0; position: relative; }
.kp .kp-refs img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--kc-line-inner); display: block; background: #ffffff; }
.kp .kp-refs button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--kc-line-hover); background: var(--kc-card); color: var(--kc-text); font: 600 12px/1 var(--kc-body); cursor: pointer; padding: 0; }
.kp #mine-thumb { width: 64px; height: 64px; object-fit: contain; background: #ffffff; border-radius: 6px; border: 1px solid var(--kc-line-inner); }
.kp #art-uses { font-size: 0.85rem; }
.kp #art-uses.warn { border-color: var(--kc-red); color: var(--kc-text); }

/* ---------- step 3: the files */
.kp .kp-result { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px 24px; align-items: start; }
.kp .kp-stage { background: #ffffff; border: 1px solid var(--kc-line-hover); border-radius: var(--kc-radius-callout); padding: 12px; display: grid; place-items: center; min-height: 240px; }
.kp .kp-stage svg { width: 100%; height: auto; max-height: 560px; display: block; }
.kp .kp-stage #result-host { width: 100%; display: grid; place-items: center; }
/* the Dark preview: the same paths shown light on a dark ground (the files do not change) */
.kp .kp-stage.is-dark { background: #000000; }
.kp .kp-stage.is-dark g#Cut { fill: #ffffff; }
.kp .kp-result__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kp .kp-result__side .kp-seg { display: flex; }
.kp .kp-result__side .kp-seg button { flex: 1 1 0; padding: 8px; }
.kp .kp-bgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kp .kp-bgrid .kp-btn { width: 100%; padding: 0 8px; }
.kp .kp-xcheck { border-left: 3px solid var(--kc-ok); background: var(--kc-raised); padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.kp .kp-xcheck.warn { border-color: var(--kc-flag); }
.kp .kp-warnline { padding: 8px 12px; border-left: 3px solid var(--kc-flag); background: var(--kc-raised); color: var(--kc-text); }
.kp .kp-field.is-missing input { border-color: var(--kc-red); box-shadow: 0 0 0 1px var(--kc-red); }
.kp .kp-field.is-missing > span:first-child, .kp .kp-field.is-missing { color: var(--kc-text); }
.kp .kp-xcheck span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.kp .kp-xcheck button { flex: none; }
/* the part and keep-outs drawn on the art, in the overlay colors (on the art, never on interface) */
.kp #result-host g#PART_OUTLINE path { stroke: var(--kt-wire); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.kp #result-host g#Keep_out path { stroke: var(--kc-red); stroke-width: 1.2px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* ---------- earlier results */
.kp .kp-earlier__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.kp .kp-earlier__card { margin: 0; background: var(--kc-ground); border: 1px solid var(--kc-line-inner); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kp .kp-earlier__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #ffffff; border-radius: 6px; }
.kp .kp-earlier__card figcaption { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.8rem; color: var(--kc-muted); }
.kp .kp-earlier__card figcaption b { color: var(--kc-text); font-weight: 600; overflow-wrap: anywhere; }
.kp .kp-earlier__card .kp-bgrid { margin-top: auto; }
.kp .kp-earlier__card .kp-ghost { width: 100%; padding: 8px 4px; font-size: 0.78rem; }

.kp .kp-legal { margin: 0; }
.kp .kp-legal a { display: inline-block; padding: 12px 0; }
.kp .kp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--kc-raised); border: 1px solid var(--kc-red); color: var(--kc-text); padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; z-index: 10; max-width: 90vw; }

/* ---------- signed-out demo: hidden unless the page shows a members gate card */
.kp .kp-demo { display: none; }
body.kt-gated:has(#ktGate .kt-pill--member) .kp .kp-demo { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 640px; }
.kp .kp-demo__head { display: flex; flex-direction: column; gap: 4px; }
.kp .kp-demo__title { margin: 0; font: 600 1.25rem/1.1 var(--kc-display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--kc-heading); }
.kp .kp-demo__head .kt-meta { margin: 0; }
.kp .kp-demo__fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kp .kp-ba { --pos: 50%; position: relative; aspect-ratio: 720 / 480; border: 1px solid var(--kc-border); border-radius: var(--kc-radius-panel); overflow: hidden; background: #ffffff; user-select: none; touch-action: pan-y; }
.kp .kp-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp .kp-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.kp .kp-ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-50%); background: var(--kc-red); pointer-events: none; }
.kp .kp-ba__knob { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: var(--kc-radius-pill); background: var(--kc-red-button); color: #ffffff; display: flex; align-items: center; justify-content: center; }
.kp .kp-ba__knob svg { width: 20px; height: 20px; }
.kp .kp-ba__tag { position: absolute; top: 8px; padding: 4px 8px; border-radius: var(--kc-radius-tag); background: var(--kt-dim); color: #ffffff; font: 600 0.75rem/1.2 var(--kc-display); text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; }
.kp .kp-ba__tag--l { left: 8px; }
.kp .kp-ba__tag--r { right: 8px; }
.kp .kp-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.kp .kp-ba:has(.kp-ba__range:focus-visible) { outline: 2px solid var(--kc-focus); outline-offset: 2px; }
.kp .kp-demo__cap { margin: 0; font: 400 0.85rem/1.5 var(--kc-body); color: var(--kc-muted); }
.kp .kp-demo__gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kp .kp-demo__gets li { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--kc-line-row); border-radius: var(--kc-radius-callout); background: var(--kc-card); }
.kp .kp-demo__gets b { font: 600 0.85rem/1.2 var(--kc-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--kc-text); overflow-wrap: anywhere; }
.kp .kp-demo__gets span { font: 400 0.85rem/1.4 var(--kc-body); color: var(--kc-prose); }
/* the membership offer under the examples: the design system's membership card, red frame and soft red glow */
.kp .kp-join { display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: var(--kc-radius-card); background: var(--kc-card); border: 1.5px solid rgba(232, 52, 51, 0.45); box-shadow: 0 0 32px rgba(232, 52, 51, 0.08); }
.kp .kp-join__tag { justify-self: start; padding: 4px 8px; border-radius: var(--kc-radius-tag); background: var(--kc-red-button); color: #ffffff; font: 700 11px/1.2 var(--kc-body); letter-spacing: 0.02em; text-transform: uppercase; }
.kp .kp-join__price { margin: 0; font: 400 15px/1.5 var(--kc-body); color: var(--kc-prose); }
.kp .kp-join__price b { font: 600 24px/1 var(--kc-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--kc-heading); }
.kp .kp-join__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 400 15px/1.5 var(--kc-body); color: var(--kc-prose); }
.kp .kp-join__list b { font-weight: 600; color: var(--kc-text); }

/* ---------- phones and narrow columns */
@media (max-width: 900px) {
  .kp .kp-result { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kp .kp-step { padding: 16px; }
  .kp select, .kp input[type="number"], .kp textarea { font-size: 16px !important; }
  .kp .kp-go .kp-btn { width: 100%; }
  .kp .kp-go--art .kp-btn { order: 0; }
  .kp .kp-go--art #art-uses { width: 100%; justify-content: center; }
  .kp .kp-sub-status { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .kp .kp-part { grid-template-columns: 1fr; }
  .kp .kp-seg--tabs { display: flex; width: 100%; }
  .kp .kp-seg--tabs button { flex: 1 1 0; padding: 12px 4px; font-size: 0.8rem; }
  .kp .kp-art { grid-template-columns: 1fr; }
  .kp #machine { display: grid; grid-template-columns: 1fr 1fr; }
  .kp #machine button, .kp #bit-angle button { padding: 8px 4px; font-size: 0.8rem; }
  .kp .kp-demo__gets { grid-template-columns: 1fr; }
}
/* the narrowest phones: the three art tabs stack, so no label breaks across two lines */
@media (max-width: 360px) {
  .kp .kp-seg--tabs { display: grid; grid-template-columns: 1fr; }
  .kp .kp-seg--tabs button { font-size: 0.92rem; }
}