/* ==========================================================================
   SAMPLE — clinic appointment booking
   ==========================================================================
   The demo exists for one problem: two people tapping the same slot at the
   same instant. Everything visual here is in service of making that race
   visible, so the palette is calm and clinical and gets out of the way.

   Scoped under .bkg.
   ========================================================================== */

.bkg {
  --paper:  #f6f8f9;
  --card:   #ffffff;
  --ink:    #10201f;
  --ink-2:  #4a5f5e;
  --ink-3:  #5f7473;   /* 4.96:1 on white; #6b8180 was 4.14 and failed */
  --line:   #dde6e6;
  --line-2: #c3d2d2;

  --brand:  #0d7a6f;
  --brand-w:#e4f2f0;
  --taken:  #94a6a5;
  --clash:  #c2410c;
  --clash-w:#fdf0e7;
  --mine:   #0d7a6f;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.bkg *, .bkg *::before, .bkg *::after { box-sizing: border-box; }
.bkg svg { display: block; }
.bkg a { color: var(--brand); }
.bkg :focus-visible { outline-color: var(--brand); }

.bkg-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding: 0 clamp(1rem, 3vw, 2rem) 5rem; }

/* ------------------------------------------------------------------ head --- */

.bkg-top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 2.2rem; z-index: 40;
}
.bkg-brand { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1rem; font-weight: 700; }
.bkg-brand i {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .78rem;
}
.bkg-top .sp { margin-left: auto; }
.bkg-who { font-size: .8rem; color: var(--ink-2); }
.bkg-who b { color: var(--ink); }

.bkg-hero { padding-block: clamp(2rem, 5vw, 3rem) 1.25rem; max-width: 44rem; }
.bkg-hero h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
.bkg-hero h1 em { font-style: normal; color: var(--brand); }
.bkg-hero p { margin: .9rem 0 0; color: var(--ink-2); line-height: 1.7; }

/* --------------------------------------------------------------- layout --- */

.bkg-cols { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .bkg-cols { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.bcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bcard__head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.bcard__head h2 { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bcard__head .sp { margin-left: auto; }
.bcard__body { padding: .9rem; }

/* -------------------------------------------------------------- the week --- */

.bkg-week { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); padding: .9rem; }
.bkg-day { display: grid; gap: .35rem; align-content: start; }
.bkg-day h3 {
  margin: 0 0 .15rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: baseline; gap: .3rem;
}
.bkg-day h3 b { color: var(--ink); font-size: .82rem; }

.slot {
  font: inherit; font-family: var(--mono); font-size: .78rem;
  padding: .45rem .3rem; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  cursor: pointer; text-align: center;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.slot:hover:not([disabled]) { border-color: var(--brand); background: var(--brand-w); }
.slot:active:not([disabled]) { transform: scale(.97); }
/* A taken slot is a disabled control, which WCAG 1.4.3 exempts from the
   contrast minimum — but the text is a time, and the time is still
   information the reader needs. #6e8685 came to 3.44:1; this is 4.8:1. */
.slot[data-s="taken"] {
  background: #eef2f2; border-color: #e2e9e9; color: #586e6d;
  cursor: not-allowed; text-decoration: line-through;
}
.slot[data-s="mine"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.slot[data-s="clash"] { background: var(--clash-w); border-color: var(--clash); color: var(--clash); animation: bkg-shake .3s; }
@keyframes bkg-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ------------------------------------------------------------- the race --- */

.bkg-race { display: grid; gap: .6rem; }
.bkg-race p { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.65; }

.bkg-mode { display: grid; gap: .4rem; }
.bkg-mode label {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  padding: .6rem .7rem; border: 1px solid var(--line-2); border-radius: 9px;
  cursor: pointer; font-size: .82rem; line-height: 1.55;
  transition: border-color .15s, background .15s;
}
.bkg-mode label:hover { border-color: var(--ink-3); }
.bkg-mode input:checked + span { color: var(--ink); }
.bkg-mode label:has(input:checked) { border-color: var(--brand); background: var(--brand-w); }
.bkg-mode b { display: block; font-weight: 700; }
.bkg-mode span { color: var(--ink-2); }
/* The colour matters: without it these inherit the site-wide teal accent,
   which is tuned for a dark ground and reads 2.2:1 on this light chip. */
.bkg-mode code { font-family: var(--mono); font-size: .88em; background: #eef2f2; border-radius: 3px; padding: .05em .3em; color: #0a6459; }

.bbtn {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.bbtn:hover { background: #eef4f4; border-color: var(--ink-3); }
.bbtn:active { transform: scale(.97); }
.bbtn[disabled] { opacity: .45; cursor: not-allowed; }
.bbtn--go { background: var(--brand); border-color: var(--brand); color: #fff; }
.bbtn--go:hover { background: #0a6459; border-color: #0a6459; }
.bkg-btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------- the log --- */

.bkg-log { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-family: var(--mono); font-size: .7rem; max-height: 17rem; overflow-y: auto; }
.bkg-log li { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; padding: .3rem .1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); animation: bkg-in .22s ease-out; }
@keyframes bkg-in { from { opacity: 0; transform: translateY(-3px); } }
.bkg-log time { color: var(--ink-3); }
.bkg-log b { font-weight: 700; }
.bkg-log .k-ok     { color: var(--brand); }
.bkg-log .k-reject { color: var(--clash); }
.bkg-log .k-double { color: #b91c1c; }
.bkg-log .k-info   { color: var(--ink-3); }
.bkg-empty { color: var(--ink-3); font-size: .76rem; }

.bkg-count {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-2); margin-top: .7rem;
  padding-top: .7rem; border-top: 1px solid var(--line);
}
.bkg-count b { font-family: var(--mono); color: var(--ink); }
.bkg-count .bad { color: #b91c1c; }

/* --------------------------------------------------------------- notes --- */

.bkg-note { margin-top: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.1rem, 3vw, 2rem); }
.bkg-note h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.bkg-note h3 { margin: 1.6rem 0 .4rem; font-size: .95rem; }
.bkg-note p  { margin: 0 0 .7rem; color: var(--ink-2); line-height: 1.7; max-width: 46rem; }
.bkg-note code { font-family: var(--mono); font-size: .86em; background: #eef2f2; border-radius: 4px; padding: .1em .35em; color: #0a6459; }
.bkg-note pre {
  margin: .9rem 0; padding: .9rem 1rem; overflow-x: auto;
  background: #10201f; color: #d7e4e3; border-radius: 10px;
  font-family: var(--mono); font-size: .76rem; line-height: 1.7;
}
.bkg-note pre .c { color: #7f9a98; }
.bkg-note pre .k { color: #7dd3c0; }

@media (prefers-reduced-motion: reduce) {
  .bkg *, .bkg *::before, .bkg *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}