/* TC-001 R2, R4, R6, R9, R11, R14 — see docs/TC/records/TC-001-11-12-26-mcskin-browser-skin-maker/tc_record.html
   MCSKIN's own parts. Dense, heavy and high-contrast on dark (the owner is low-vision); works with or without
   the shared kit. */
:root { --bg: #090c1a; --panel: #121729; --line: #3a4266; --text: #ffffff; --dim: #d6dcf2; --yellow: #ffd600;
  --cyan: #00e5ff; --green: #69f0ae; --pink: #ff6fae; --orange: #ffab40; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 700 16px/1.35 system-ui, "Segoe UI", sans-serif; background: var(--bg); }
.dpt-main { padding: 12px 16px 32px; }
.nokit { margin: 8px 16px; }
.nokit a, a { color: var(--cyan); }
.title { margin: 4px 0 2px; font-size: 2rem; font-weight: 900; color: var(--yellow); letter-spacing: .02em; } /* ai.html */
body.dpt-ready .nokit { display: none; } /* TC-001 R9 (defect D3): the kit bar has its own way back */

.editor { display: grid; gap: 10px; grid-template-columns: minmax(260px, 340px) minmax(300px, 1fr) minmax(280px, 520px); align-items: start; }
@media (max-width: 1150px) { .editor { grid-template-columns: 1fr 1fr; } .tools { grid-column: 1 / -1; } }
@media (max-width: 700px) { .editor { grid-template-columns: 1fr; } }
/* TC-001 R11: with the kit its grey panel shows (kit.css defines --dpt-panel); without it, MCSKIN's own dark panel */
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 8px; padding: 10px; }
/* R11: once the kit has run, its grey bevelled panel, with lighter tints so dim text and labels stay readable on grey
   (#f7f7f7 7.2:1, orange #ffc670 5.0:1). Everything switches together, so kit.css without kit.js keeps the dark panel. */
body.dpt-ready .panel { background: var(--dpt-panel, #535353); border: 0; border-radius: 0; padding: 14px; --dim: var(--dpt-on-panel-dim, #f7f7f7); }
/* R11 review (adversary 2): coloured text cannot reach 7:1 on the grey, so labels, headings and readouts go near-white there,
   as the kit does (kit.css: text on panels is white); colour stays on buttons and swatches. */
body.dpt-ready .panel .label, body.dpt-ready .panel .cellline strong, body.dpt-ready .panel .spec summary,
body.dpt-ready .filegroups h2, body.dpt-ready .spec summary { color: #ffffff; }
/* R11 review (adversary 4): without the kit the sky header has no drawing and no chip styling */
body:not(.dpt-ready) .dpt-sky > canvas { display: none; }
body:not(.dpt-ready) .dpt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
body:not(.dpt-ready) .dpt-chip { border: 2px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.row[hidden] { display: none; }
.label { color: var(--orange); font-weight: 900; margin-right: 2px; }

button, .file, select { font: inherit; font-weight: 800; color: var(--text); background: #222a47; border: 2px solid #5a6699;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover, .file:hover { border-color: var(--cyan); }
button:focus-visible, .file:focus-within, select:focus-visible, canvas:focus-visible, .stage:focus-visible, textarea:focus-visible,
input:focus-visible, summary:focus-visible, a:focus-visible { /* TC-001 R9 (defect D4): every control gets this ring without the kit;
  with the kit, its own .dpt :focus-visible ring (more specific) wins for all of them alike */
  outline: 3px solid var(--yellow); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--yellow); color: #000; border-color: var(--yellow); }
button:disabled { opacity: .45; cursor: default; }
body:not(.dpt-ready) button.dpt-go { background: var(--green); color: #000; border-color: var(--green); font-size: 1.1rem; padding: 9px 16px; } /* R11: Download without the kit */
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file { position: relative; display: inline-block; }
.custom { display: inline-flex; gap: 6px; align-items: center; }
.custom input[type=color] { width: 44px; height: 36px; border: 2px solid #fff; border-radius: 6px; padding: 0; background: none; }

.current { gap: 10px; }
.sw { width: 34px; height: 34px; padding: 0; border: 2px solid #000; outline: 1px solid #fff; border-radius: 4px; }
.sw.small { width: 26px; height: 26px; }
.sw.big { width: 48px; height: 48px; display: inline-block; }
/* TC-001 R14: the Clear swatch and a clear current colour show a checkerboard */
.sw.clear { background: repeating-conic-gradient(#bdbdbd 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; }
.currentText { font-size: 1.15rem; font-weight: 900; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 5px; margin: 0 0 8px; }
.recent { display: flex; gap: 4px; min-height: 26px; }

.stage { height: 520px; perspective: 1400px; display: grid; place-items: center; touch-action: none; cursor: grab; user-select: none;
  background: radial-gradient(circle at 50% 40%, #1d2546, #0b0f20 70%); border-radius: 6px; overflow: hidden; }
.model { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.box { position: absolute; transform-style: preserve-3d; }
/* faces never take pointer events: app.js picks by casting a ray at the boxes (TC-001 R2) */
.face { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; backface-visibility: hidden; pointer-events: none; }
.model.paint-overlay .box.overlay .face { outline: 1px dashed rgba(0, 229, 255, .35); }
.model.hide-overlay .box.overlay { display: none; }
.turn button { min-width: 44px; }

#net { width: 100%; max-width: 512px; aspect-ratio: 1; image-rendering: pixelated; display: block; touch-action: none; cursor: crosshair; }
.cellline { margin: 6px 0 0; color: var(--dim); }
.cellline strong { color: var(--cyan); }

.status { min-height: 1.4em; margin: 10px 0; font-size: 1.1rem; color: var(--green); }
.status.bad { color: var(--pink); }
.files { margin-top: 4px; }
.note { color: var(--dim); }
.spec { margin-top: 10px; }
.spec summary { cursor: pointer; color: var(--cyan); font-weight: 900; }
.spec textarea { width: 100%; box-sizing: border-box; font: 700 14px/1.4 ui-monospace, Consolas, monospace; color: var(--text);
  background: #0b0f20; border: 2px solid var(--line); border-radius: 6px; padding: 8px; }

/* TC-001 R4: fill options, turn cursor, labelled file groups */
.fillbox { border-left: 4px solid var(--yellow); padding-left: 8px; margin: 0 0 8px; }
.stage.turning { cursor: grab; }
.stage:not(.turning) { cursor: crosshair; }
.stage.dragging { cursor: grabbing; } /* last, so it wins while any tool drags (R4 review) */
.hint { margin: 8px 0 6px; color: var(--dim); }
.filegroups { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 4px; }
.filegroups h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 900; color: var(--yellow); }
.filegroups .note { margin: 4px 0 10px; }
.filegroups .file, .filegroups button { margin-top: 2px; }
/* TC-001 R6: Minecraft name import */
.mcimport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mcimport label { font-weight: 800; }
.mcimport input { font: inherit; font-weight: 800; color: var(--text); background: #11152a; border: 2px solid #5a6699;
  border-radius: 6px; padding: 6px 8px; width: 11em; }