/* The Board – UI Kit (mobile-first) */
:root{
  --ink:#0b2a43;           /* navy */
  --ink-2:#1e293b;         /* slate */
  --brand:#1db6a6;         /* teal */
  --accent:#10b981;        /* emerald */
  --royal:#1e40af;         /* royal */
  --bg:#ffffff;
  --muted:#f5f7f9;
  --line:#e6edf2;
  --danger:#a92a2a;
  --warning:#b45309;
  --success:#059669;

  --radius:16px;
  --space:14px;
  --shadow:0 8px 24px rgba(2,8,23,.07);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
}

/* Dark scheme support */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --muted:#0f172a;
    --ink:#e2e8f0;
    --ink-2:#cbd5e1;
    --line:#1f2a44;
  }
}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:980px;margin:0 auto;padding:16px;}
.hidden{display:none !important;}
.surface{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Headings */
.h1{font-size:clamp(24px,4.5vw,34px); font-weight:800; letter-spacing:-0.02em; margin:6px 0 12px;}
.h2{font-size:clamp(20px,3.8vw,28px); font-weight:700; margin:10px 0;}
.p{font-size:16px; line-height:1.55; color:var(--ink-2);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  font-weight:600; text-decoration:none; user-select:none; transition:.2s ease;
}
.btn:disabled{opacity:.6; cursor:not-allowed;}
.btn.primary{background:var(--royal); color:#fff;}
.btn.secondary{background:var(--brand); color:#06373b;}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn.ghost:hover{background:var(--muted);}
.btn.warn{background:var(--warning); color:#fff;}
.btn.danger{background:var(--danger); color:#fff;}

/* Inputs */
.input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); outline:none; transition:.15s;
}
.input:focus, select:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,182,166,.18);}
.label{font-weight:600; font-size:13px; color:var(--ink-2); margin:10px 0 6px; display:block;}
.help{font-size:12px; color:var(--ink-2);}

/* Cards & lists */
.card{padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow);}
.list{display:flex; flex-direction:column; gap:10px;}
.item{display:flex; align-items:center; justify-content:space-between; padding:12px; border:1px solid var(--line); border-radius:12px;}

/* Chips / Stepper */
.stepper{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:var(--muted); color:var(--ink-2); font-weight:600; border:1px solid var(--line);
}
.chip.active{background:var(--brand); color:#06373b;}

/* Responsive: on small screens show only the active step chip */
@media (max-width: 480px){
  .stepper .chip{display:none;}
  .stepper .chip.active{display:inline-flex;}
}

/* Utilities */
.grid{display:grid; gap:12px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width: 768px){ .grid-2, .grid-3 {grid-template-columns:1fr;} }

.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--muted); color:var(--ink-2); font-weight:600;}
.note{padding:10px 12px; border-left:4px solid var(--brand); background:var(--muted); border-radius:10px; color:var(--ink-2);}
.muted{color:var(--ink-2);}

/* Spacing utils */
.mt-1{margin-top:8px;} .mt-2{margin-top:12px;} .mt-3{margin-top:16px;} .mt-4{margin-top:22px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:12px;} .mb-3{margin-bottom:16px;} .mb-4{margin-bottom:22px;}
.p-1{padding:8px;} .p-2{padding:12px;} .p-3{padding:16px;} .p-4{padding:22px;}