/* Social content kit: form + live artboards. Brand tokens come from ../styles.css */
.kit-tpl{margin:0 0 56px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--ink)}
.kit-title{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--cream);margin:0 0 4px}
.kit-intro{color:var(--stone);font-size:15px;margin:0 0 18px;max-width:70ch}
.kit-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;margin-bottom:22px}
.kit-field{display:flex;flex-direction:column;gap:6px}
.kit-field.wide{grid-column:1/-1}
.kit-label{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gilt)}
.kit-hint{font-size:12px;color:var(--stone)}
.kit-field input,.kit-field select,.kit-field textarea{
  font:16px/1.4 var(--font-body);color:var(--cream);background:var(--stout);
  border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:100%;min-height:44px}
.kit-field textarea{font-family:ui-monospace,Consolas,monospace;font-size:14px;resize:vertical}
.kit-field input:focus,.kit-field select:focus,.kit-field textarea:focus{outline:2px solid var(--gilt);outline-offset:1px}
.kit-boards{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.kit-board{display:flex;flex-direction:column;gap:10px;max-width:100%}
.kit-board-cap{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--stone)}
.kit-stage{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.45);background:#000;max-width:100%}
/* previews shrink with their box on a phone; kit.js scales the 1080px artboard to whatever width the stage gets */
.kit-stage-feed{width:324px;aspect-ratio:1080/1350}
.kit-stage-story{width:243px;aspect-ratio:1080/1920}
.kit-stage .ab{position:absolute;top:0;left:0;transform-origin:0 0}
.kit-stage-feed .ab{transform:scale(.3)}
.kit-stage-story .ab{transform:scale(.225)}
.ab{overflow:hidden}
.ab.fmt-feed{width:1080px;height:1350px}
.ab.fmt-story{width:1080px;height:1920px}
.kit-dl{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:600;
  color:var(--fascia);background:var(--gilt);border:0;border-radius:6px;padding:12px 16px;cursor:pointer;min-height:44px}
.kit-dl:hover{background:var(--gilt-light)}
.kit-dl:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.kit-dl:disabled{opacity:.6;cursor:progress}
@media (max-width:600px){
  .kit-tpl{padding:16px}
  .kit-boards{gap:16px}
}