/* Kiln & Crate demo — isolated brand (prefix kc-, no Lofty tokens). */
:root{
  --kc-clay:#B5532E;
  --kc-charcoal:#2E2A27;
  --kc-celadon:#7BA098;
  --kc-bisque:#F2EBDE;
  --kc-ink:#211E1B;
  --kc-line:#D8CFBE;
  --kc-thrown:#C9A07A;
  --kc-bisquec:#D8C4A8;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#E8E0D0;color:var(--kc-ink);
  font-family:"Segoe UI",system-ui,Arial,sans-serif;line-height:1.5}

.kc-header{display:flex;align-items:center;gap:14px;background:var(--kc-charcoal);
  color:var(--kc-bisque);padding:14px 22px;flex-wrap:wrap}
.kc-mark{width:40px;height:40px;flex:none}
.kc-head-text{flex:1 1 auto}
.kc-header h1{margin:0;font-size:1.15rem}
.kc-tag{margin:2px 0 0;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#B9AF9C}
.kc-sync{margin:0;font-size:.74rem;padding:.3rem .7rem;border-radius:2px;
  background:#3C5B53;color:#EAF1EE}
.kc-sync.is-queued{background:var(--kc-clay);color:#fff}

.kc-main{max-width:74rem;margin:0 auto;padding:18px 14px 36px}
.kc-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:16px}
.kc-filter{font-size:.82rem;display:flex;flex-direction:column;gap:.2rem;color:var(--kc-charcoal)}
.kc-filter select{font:inherit;padding:.45rem .5rem;border:1.5px solid var(--kc-charcoal);
  border-radius:2px;background:#fff;min-height:44px}
.kc-capacity{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--kc-charcoal)}
.kc-cap-label{font-weight:700}
.kc-cap-track{width:150px;height:16px;background:#E4DBC9;border:1px solid var(--kc-charcoal);border-radius:2px;overflow:hidden}
.kc-cap-fill{display:block;height:100%;width:0;background:var(--kc-clay);transition:width .3s ease}
.kc-cap-fill.is-full{background:var(--kc-charcoal)}
.kc-reset{margin-left:auto;font:inherit;font-size:.8rem;padding:.45rem .8rem;min-height:44px;
  background:#fff;border:1.5px solid var(--kc-charcoal);border-radius:2px;cursor:pointer;color:var(--kc-charcoal)}
.kc-reset:hover{background:var(--kc-charcoal);color:var(--kc-bisque)}

.kc-board{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.kc-col{background:#EFE7D7;border:1px solid var(--kc-line);border-radius:3px;min-width:150px}
.kc-col-head{padding:.5rem .6rem;font-size:.78rem;font-weight:700;color:#fff;
  border-radius:3px 3px 0 0;display:flex;justify-content:space-between;align-items:center}
.kc-col[data-stage="0"] .kc-col-head{background:var(--kc-thrown);color:var(--kc-charcoal)}
.kc-col[data-stage="1"] .kc-col-head{background:var(--kc-bisquec);color:var(--kc-charcoal)}
.kc-col[data-stage="2"] .kc-col-head{background:var(--kc-celadon)}
.kc-col[data-stage="3"] .kc-col-head{background:var(--kc-clay)}
.kc-col[data-stage="4"] .kc-col-head{background:#8A8070}
.kc-col[data-stage="5"] .kc-col-head{background:var(--kc-charcoal)}
.kc-col-count{font-size:.7rem;opacity:.85}
.kc-col-body{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px}

.kc-card{background:#fff;border:1px solid var(--kc-line);border-radius:3px;padding:8px 9px;
  box-shadow:2px 2px 0 0 rgba(46,42,39,.08)}
.kc-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.kc-id{font-weight:700;font-size:.82rem;color:var(--kc-charcoal)}
.kc-due{font-size:.68rem;color:#6B645A}
.kc-card-bq{font-size:.76rem;color:var(--kc-charcoal);margin:2px 0}
.kc-card-meta{font-size:.7rem;color:#6B645A}
.kc-flag{display:inline-block;margin-top:5px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:.12rem .4rem;border-radius:2px;
  background:var(--kc-clay);color:#fff}
.kc-card-actions{display:flex;gap:5px;margin-top:7px}
.kc-adv,.kc-back{font:inherit;font-size:.72rem;padding:.3rem .5rem;min-height:32px;cursor:pointer;border-radius:2px}
.kc-adv{background:var(--kc-charcoal);color:var(--kc-bisque);border:1px solid var(--kc-charcoal);flex:1}
.kc-back{background:#fff;color:var(--kc-charcoal);border:1px solid var(--kc-line)}
.kc-adv:hover{background:var(--kc-clay);border-color:var(--kc-clay)}
.kc-adv:disabled{opacity:.4;cursor:default}
.kc-adv:focus-visible,.kc-back:focus-visible,.kc-reset:focus-visible,.kc-filter select:focus-visible{
  outline:2px solid var(--kc-clay);outline-offset:2px}

.kc-note{margin-top:16px;font-size:.78rem;color:#6B645A}
.kc-footer{background:var(--kc-charcoal);color:var(--kc-bisque);text-align:center;padding:18px 16px;font-size:.82rem}
.kc-footer a{color:#E08A5B}

@media (prefers-reduced-motion:reduce){.kc-cap-fill{transition:none}}