/* Lenci · Studio kit (v3/docs/STUDIO-KIT-CONTRACT.md §4, workstream F): the capture sheet (#kit-capture) and the fill sheet (#kit-fill)
   v3/kit.js builds on both the Studio and /kit, the dashed "Add your own" tile (.tile.kit-add) the inspector rows end with, the
   "My angles / My positions" preset rows and the QA flag lines. Linked after studio.css on both pages; additive only — nothing here
   restyles an existing control. Builds on studio.css (.modal, .modal-card, .gtab, .ggrid, .gcard, .gmedia, .gbadge, .gadd, .chip,
   .field, .tile). Logical properties, so Arabic mirrors by itself. */
.kit-sheet .kit-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 16px; width: min(100%, 980px); max-height: calc(100vh - 40px); }
.kit-head { padding-inline-end: 44px; }
.kit-head h2 { margin: 0 0 2px; }
.kit-head .muted { margin: 0; font-size: 12.5px; color: var(--muted); }
.kit-kicker { display: inline-block; margin-bottom: 6px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c9b8ff; }
[dir="rtl"] .kit-kicker { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.kit-tabs .gtab { padding: 8px 16px 8px 14px; font-size: 12px; }
.kit-tabs .gtab[disabled] { opacity: .4; cursor: default; transform: none; }
.kit-form { display: grid; gap: 10px; }
.kit-form-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.kit-field { flex: 0 1 180px; min-width: 0; }
.kit-field.grow { flex: 1 1 220px; }
.kit-field.small { flex: 0 1 120px; }
.kit-field input[type="range"] { padding: 0; accent-color: #a855f7; background: transparent; border: 0; box-shadow: none; }
.kit-range { display: flex; align-items: center; gap: 8px; }
.kit-range output { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 36px; text-align: end; }
.kit-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink); padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); cursor: pointer; align-self: flex-end; }
.kit-check input { width: 16px; height: 16px; flex: none; margin-top: 1px; accent-color: #d946ef; }
.kit-check.bad { border-color: rgba(248,113,113,.6); }
.note.kit-note { margin: 0; }
.kit-cards { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.kit-slot.bad { border-color: rgba(248,113,113,.55); box-shadow: 0 0 0 1px rgba(248,113,113,.25); }
.kit-slot .kit-media { padding-top: 100%; }
.kit-slot[data-kind="person"] .kit-media { padding-top: 125%; }
.kit-slot[data-kind="set"] .kit-media { padding-top: 66%; }
.kit-media .gsample, .kit-media .gmine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-media .gsample { opacity: .5; }
.kit-media.nosample::before { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--muted); background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.08)); }
/* the ribbon (top start), the required / optional badge (top end), the check (bottom start) and the remove button (bottom end) keep
   studio.css's capture-guide positions (.gribbon, .gbadge, .gcheck, .gremove); only the kit's own marks are placed here */
[dir="rtl"] .kit-media .gbadge { letter-spacing: 0; text-transform: none; }
.kit-media .gcheck { font-size: 11px; }
.kit-media .kit-busy { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 11px; color: #fff; background: rgba(10,10,15,.7); border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
[dir="rtl"] .kit-media .kit-busy { transform: translate(50%, -50%); }
.kit-hz-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(34,211,238,.9); pointer-events: none; }
.kit-hz-line::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 40px; background: linear-gradient(180deg, rgba(34,211,238,.18), transparent); }
.kit-floor-line { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 1px dashed rgba(245,176,65,.8); pointer-events: none; }
.kit-body { display: grid; gap: 6px; padding: 10px 10px 8px; }
.kit-body .glabel { font-family: var(--display); font-size: 12.5px; }
.kit-body .gtip { font-size: 11px; line-height: 1.4; color: var(--dim); }
.kit-pill { gap: 4px; }
.kit-pill .chip { padding: 3px 7px; font-size: 9px; }
.kit-pill .chip[disabled] { opacity: .45; cursor: default; }
.kit-flags { display: grid; gap: 4px; }
.kit-flag { display: grid; gap: 1px; padding: 6px 8px; border-radius: 9px; font-size: 11px; line-height: 1.35; border: 1px solid var(--line); }
.kit-flag b { font-family: var(--display); font-size: 11px; }
.kit-flag.hard { color: #fecaca; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.kit-flag.soft { color: #fde68a; border-color: rgba(245,176,65,.45); background: rgba(245,176,65,.08); }
.kit-flag.ref { color: #c9f3ff; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.kit-slot-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-slot-tools .ghost { padding: 5px 9px; font-size: 10.5px; }
.kit-slot .gadd { display: block; margin: 0 10px 10px; text-align: center; font-family: var(--display); font-size: 11px; font-weight: 600; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--muted); cursor: pointer; }
.kit-slot .gadd:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.kit-slot .gadd input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.kit-status { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--muted); flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.kit-status.err { color: #fca5a5; } .kit-status.ok { color: #86efac; } .kit-status.busy { color: #c9b8ff; }
.kit-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
html.kit-sheet-open { overflow: hidden; }

/* the fill sheet */
.kit-fill .kit-card { width: min(100%, 760px); }
.kit-fill-body { display: grid; gap: 12px; overflow: auto; min-height: 0; }
.kit-sub { margin: 4px 0 -4px; }
.kit-fill-slots .chip.rec { border-color: rgba(34,211,238,.5); }
.kit-brief { width: 100%; min-height: 96px; box-sizing: border-box; font: 12px/1.5 var(--mono); color: var(--ink); background: #0b0b12; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; resize: vertical; direction: ltr; text-align: left; }
.kit-fill-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-fill-refs img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: #0d0d13; border: 1px solid var(--line); }
.kit-fill-step strong { font-family: var(--display); font-size: 13.5px; }
.kit-fill-open { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kit-fill-open a.ghost { text-decoration: none; display: inline-flex; align-items: center; }
.kit-fill-open a.cur { color: #e8dfff; border-color: rgba(168,85,247,.7); }
.kit-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 110px; padding: 18px 12px; border: 1.5px dashed var(--line-2); border-radius: 14px; text-align: center; cursor: pointer; color: var(--muted); }
.kit-drop.over { border-color: rgba(168,85,247,.8); background: rgba(139,92,246,.08); }
.kit-drop strong { font-family: var(--display); font-size: 14px; color: var(--ink); }
.kit-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kit-fill-links { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.kit-qr { width: 112px; height: 112px; border-radius: 10px; background: #fff; padding: 4px; box-sizing: border-box; }
.kit-qr svg { width: 100%; height: 100%; display: block; }
.kit-qr:empty { display: none; }
.kit-fill-linktext { display: grid; gap: 6px; min-width: 0; }
.kit-fill-linktext .ext-label { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .kit-fill-linktext .ext-label { letter-spacing: 0; text-transform: none; }
.kit-fill-linktext p { margin: 0; font-size: 12px; }
.kit-fill-linktext input { width: 100%; box-sizing: border-box; font: 11px var(--mono); color: var(--muted); background: #0b0b12; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; direction: ltr; }
.kit-fill-linktext .ghost { justify-self: start; }

/* the inspector: "Add your own" tile + preset rows (appended by v3/ui.js, workstream D) */
.tile.kit-add { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 72px; text-decoration: none; color: var(--muted); background: rgba(255,255,255,.02); border-style: dashed; cursor: pointer; }
.tile.kit-add:hover { color: var(--ink); }
.tile.kit-add .kit-add-mark { font: 700 22px/1 var(--display); color: #a78bfa; }
.tile.kit-add span:last-child { position: static; padding: 0 8px 6px; font-family: var(--display); font-size: 10px; font-weight: 600; text-align: center; white-space: normal; line-height: 1.3; background: none; }
.kit-preset-row { display: grid; gap: 6px; }
.kit-preset-row .chips { align-items: center; }
.kit-preset-save { display: inline-flex; align-items: center; gap: 6px; }
.kit-preset-save input { width: 140px; max-width: 40vw; font: 500 12px var(--latin); color: var(--ink); background: #0b0b12; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; }
[dir="rtl"] .kit-preset-save input { font-family: var(--arabic); }
.kit-preset-save .ghost { padding: 5px 10px; font-size: 10.5px; }
.kit-matrix { display: flex; flex-wrap: wrap; gap: 4px; }
.kit-matrix .kit-slot-chip { font-family: var(--display); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: rgba(255,255,255,.03); white-space: nowrap; }
.kit-matrix .kit-slot-chip.have { color: #e9e4ff; border-color: rgba(168,85,247,.6); background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(139,92,246,.08)); }
.kit-matrix .kit-slot-chip.missing { border-style: dashed; }
.kit-matrix .kit-slot-chip.rec { border-color: rgba(34,211,238,.45); }
.kit-matrix .kit-slot-chip.ref { font-style: italic; }

@media (max-width: 700px) {
  .kit-sheet .kit-card { padding: 18px 14px 14px; border-radius: 16px; }
  .kit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kit-field, .kit-field.grow, .kit-field.small { flex: 1 1 100%; }
  .kit-fill-links { grid-template-columns: minmax(0, 1fr); }
  .kit-tabs .gtab { padding: 7px 12px; font-size: 11px; }
  .kit-foot .kit-actions { width: 100%; } .kit-foot .kit-actions .primary, .kit-foot .kit-actions .ghost { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .kit-slot, .tile.kit-add { transition: none !important; } }