/* ==========================================================================
   DynaMeet — styles
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* DESIGN TOKENS — light + dark. Swap these to re-theme the whole app.        */
/* -------------------------------------------------------------------------- */
:root {
  --surface-0:#faf9f5; --surface-1:#f1efe8; --surface-2:#ffffff;
  --text-primary:#2c2c2a; --text-secondary:#5f5e5a; --text-muted:#888780;
  --border:rgba(0,0,0,.12); --text-success:#3b6d11; --text-warning:#854f0b;
  --radius:8px; --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0:#1f1f1d; --surface-1:#2a2a27; --surface-2:#333330;
    --text-primary:#ecebe6; --text-secondary:#b4b2a9; --text-muted:#888780;
    --border:rgba(255,255,255,.15); --text-success:#97c459; --text-warning:#efb04f;
  }
}

/* The five availability states — the visual language we settled on.
   "some free": green diagonal stripes over the cell surface (low weight).
   "most free": solid dark green (same green as the stripes).
   "all free" : gold gradient (the standout best match).
   The stripe + gold backgrounds themselves are set in app.js (STRIPE / GOLD). */

* { box-sizing: border-box; }
body {
  font-family: var(--font); color: var(--text-primary);
  background: var(--surface-0); margin: 0; padding: 24px;
  line-height: 1.6; max-width: 760px; margin: 0 auto;
}
h1 { font-size: 22px; font-weight: 500; margin: 0 0 2px; }
.sub { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; }
label { font-size: 14px; color: var(--text-secondary); }
input, select, button {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: var(--radius);
  border: .5px solid var(--border); background: var(--surface-2);
  color: var(--text-primary);
}
button { cursor: pointer; }
button:hover { background: var(--surface-1); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chunk-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin: 0 0 5px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 12px; }
.cell {
  height: 38px; border-radius: 6px; position: relative;
  box-shadow: inset 0 0 0 .5px var(--border); transition: background .08s; cursor: pointer;
}
.cell .t { position: absolute; top: 2px; left: 4px; font-size: 11px; font-weight: 500; pointer-events: none; }
.card { background: var(--surface-1); border-radius: var(--radius); padding: 12px 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12px; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.muted { color: var(--text-muted); }
#stage { transition: opacity .15s; }
.hint { font-size: 13px; color: var(--text-warning); margin: 0 0 12px; }
.tip { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.danger { color: #a32d2d; border-color: #a32d2d; }