/* ============================================================
   Ferret Trimz - shared booking modal (mock back-end)
   Mobile-first. Themed per page via --bk-accent on :root.
   ============================================================ */
:root{
  --bk-accent:#ff2e6e;          /* each page overrides this */
  --bk-accent-ink:#0a0a0a;
  --bk-bg:#101014;
  --bk-surface:#17171d;
  --bk-surface2:#1e1e26;
  --bk-line:#2c2c35;
  --bk-fg:#ececf2;
  --bk-dim:#8f8d9b;
  --bk-ok:#3ddc84;
  --bk-ease:cubic-bezier(.2,.85,.2,1);
}

/* ---- sticky mobile book bar ---- */
.bk-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(12,12,16,.92);backdrop-filter:blur(12px);border-top:1px solid var(--bk-line)}
.bk-bar a,.bk-bar button{flex:1;font:700 14px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  border-radius:12px;padding:15px 10px;border:0;cursor:pointer;text-align:center;text-decoration:none}
.bk-bar .bk-bar-dm{background:transparent;color:var(--bk-fg);border:1.5px solid var(--bk-line)}
.bk-bar .bk-bar-book{background:var(--bk-accent);color:var(--bk-accent-ink)}
.bk-bar .bk-bar-book:active{transform:scale(.98)}
@media(max-width:720px){
  .bk-bar{display:flex}
  body{padding-bottom:74px}
}

/* ---- overlay + sheet ---- */
.bk-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(4,4,7,.74);backdrop-filter:blur(8px);padding:0}
.bk-overlay.open{display:flex}
.bk-sheet{position:relative;width:100%;max-width:600px;max-height:100dvh;height:100dvh;overflow:hidden;
  background:var(--bk-bg);color:var(--bk-fg);display:flex;flex-direction:column;
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif}
@media(min-width:600px){
  .bk-sheet{height:auto;max-height:92vh;border-radius:20px;border:1px solid var(--bk-line);
    box-shadow:0 40px 100px rgba(0,0,0,.6)}
}
@media(prefers-reduced-motion:no-preference){
  .bk-overlay.open .bk-sheet{animation:bk-up .4s var(--bk-ease)}
  @keyframes bk-up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
}

/* guard against page CSS / UA button defaults bleeding into the modal */
.bk-sheet h3,.bk-sheet p{margin:0}

/* ---- header ---- */
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--bk-line);background:var(--bk-bg);flex-shrink:0}
.bk-title{font-weight:700;font-size:18px;letter-spacing:.01em}
.bk-title small{display:block;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bk-accent);margin-top:3px}
.bk-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--bk-line);background:var(--bk-surface);
  color:var(--bk-fg);font-size:18px;cursor:pointer;line-height:1;flex-shrink:0;transition:.2s var(--bk-ease)}
.bk-x:hover{background:var(--bk-surface2);transform:rotate(90deg)}

/* ---- scroll body ---- */
.bk-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px;flex:1}
.bk-step{margin-bottom:26px}
.bk-step:last-child{margin-bottom:0}
.bk-label{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bk-dim);margin-bottom:14px}
.bk-label .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bk-surface2);
  color:var(--bk-fg);font-size:11px;font-weight:700;border:1px solid var(--bk-line)}
.bk-label.done .n{background:var(--bk-accent);color:var(--bk-accent-ink);border-color:var(--bk-accent)}

/* service chips */
.bk-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:480px){.bk-chips{grid-template-columns:1fr 1fr 1fr}}
.bk-chip{cursor:pointer;border:1px solid var(--bk-line);background:var(--bk-surface);border-radius:12px;
  padding:13px 14px;transition:.2s var(--bk-ease);text-align:left;color:var(--bk-fg)}
.bk-chip:hover{border-color:var(--bk-accent)}
.bk-chip.sel{border-color:var(--bk-accent);background:color-mix(in srgb,var(--bk-accent) 16%,var(--bk-surface))}
.bk-chip .nm{font-weight:600;font-size:14px;display:block}
.bk-chip .pr{font-size:12px;color:var(--bk-dim);margin-top:3px}
.bk-chip.sel .pr{color:var(--bk-fg)}

/* calendar */
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-cal-month{font-weight:600;font-size:15px}
.bk-nav{display:flex;gap:8px}
.bk-nav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--bk-line);background:var(--bk-surface);
  color:var(--bk-fg);cursor:pointer;font-size:16px;transition:.2s var(--bk-ease)}
.bk-nav button:hover:not(:disabled){border-color:var(--bk-accent)}
.bk-nav button:disabled{opacity:.3;cursor:not-allowed}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bk-dow{text-align:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bk-dim);padding-bottom:4px}
.bk-day{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--bk-surface);
  color:var(--bk-fg);font-size:14px;font-weight:500;cursor:pointer;display:grid;place-items:center;position:relative;
  transition:.15s var(--bk-ease);min-height:40px}
.bk-day:hover:not(.off):not(.empty){border-color:var(--bk-accent)}
.bk-day.empty{background:transparent;cursor:default}
.bk-day.off{color:var(--bk-dim);background:transparent;cursor:not-allowed;opacity:.45}
.bk-day.today::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--bk-accent)}
.bk-day.sel{background:var(--bk-accent);color:var(--bk-accent-ink);border-color:var(--bk-accent);font-weight:700}
.bk-closed-note{font-size:11px;color:var(--bk-dim);margin-top:10px;text-align:center}

/* time slots */
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:480px){.bk-slots{grid-template-columns:repeat(4,1fr)}}
.bk-slot{border:1px solid var(--bk-line);background:var(--bk-surface);color:var(--bk-fg);border-radius:10px;
  padding:12px 6px;font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:.15s var(--bk-ease)}
.bk-slot:hover:not(:disabled){border-color:var(--bk-accent)}
.bk-slot.sel{background:var(--bk-accent);color:var(--bk-accent-ink);border-color:var(--bk-accent)}
.bk-slot:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.bk-slot.brk{opacity:.5;cursor:not-allowed;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bk-dim)}
.bk-hint{font-size:12px;color:var(--bk-dim);padding:8px 0}

/* fields */
.bk-field{margin-bottom:14px}
.bk-field label{display:block;font-size:12px;letter-spacing:.04em;color:var(--bk-dim);margin-bottom:6px}
.bk-field input,.bk-field textarea{width:100%;background:var(--bk-surface);border:1px solid var(--bk-line);border-radius:10px;
  color:var(--bk-fg);font:inherit;font-size:15px;padding:12px 14px;transition:.2s var(--bk-ease)}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--bk-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-accent) 25%,transparent)}
.bk-field textarea{resize:vertical;min-height:64px}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:#5f5d6a}

/* pronouns quick-picks - reuse .bk-slot so every concept skin themes them */
.bk-pn-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.bk-pn{width:auto;padding:9px 14px;font-size:13px;min-height:40px;text-decoration:none}
.bk-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--bk-dim)}

/* footer / confirm */
.bk-foot{flex-shrink:0;border-top:1px solid var(--bk-line);background:var(--bk-bg);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;justify-content:space-between}
.bk-summary{font-size:12px;color:var(--bk-dim);line-height:1.4;min-width:0}
.bk-summary b{color:var(--bk-fg);font-weight:600}
.bk-confirm{flex-shrink:0;background:var(--bk-accent);color:var(--bk-accent-ink);border:0;border-radius:12px;
  padding:15px 22px;font:700 14px/1 inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.2s var(--bk-ease)}
.bk-confirm:hover:not(:disabled){filter:brightness(1.08)}
.bk-confirm:active:not(:disabled){transform:scale(.98)}
.bk-confirm:disabled{opacity:.4;cursor:not-allowed}

/* demo banner */
.bk-demo{font-size:11px;color:var(--bk-dim);text-align:center;padding:8px 20px;background:var(--bk-surface);
  border-bottom:1px solid var(--bk-line);letter-spacing:.02em}
.bk-demo b{color:var(--bk-accent)}

/* success */
.bk-success{padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.bk-tick{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--bk-ok) 20%,transparent);
  display:grid;place-items:center;margin-bottom:8px;color:var(--bk-ok);font-size:30px}
.bk-success h3{font-size:22px;font-weight:700}
.bk-success p{color:var(--bk-dim);font-size:14px;max-width:36ch;line-height:1.6}
.bk-recap{margin:14px 0;width:100%;max-width:340px;border:1px solid var(--bk-line);border-radius:12px;overflow:hidden}
.bk-recap div{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;font-size:13px;border-bottom:1px solid var(--bk-line)}
.bk-recap div:last-child{border-bottom:0}
.bk-recap span:first-child{color:var(--bk-dim)}
.bk-recap span:last-child{font-weight:600;text-align:right}
.bk-ref{font-family:'Space Mono',ui-monospace,monospace;color:var(--bk-accent)}

/* ============================================================
   PER-CONCEPT BOOKING SKINS (added 2026-06-07)
   Activated per page via <html data-bk-theme="..."> . Base styles
   above are the default for any page without a theme.
   ============================================================ */

/* ---- graffiti ---- */
/* ============================================================
   BOOKING SKIN - Concept 01: Spray-paint Graffiti Wall  (slug: graffiti)
   A flyer spray-stencilled and taped to a near-black concrete wall.
   Acid-green #c6ff00 + hot-pink/cyan tags. Dark sheet. Scoped to
   html[data-bk-theme="graffiti"] only. Restyle-only, layout untouched.
   ============================================================ */

/* ---- token overrides cascade from the two roots ---- */
html[data-bk-theme="graffiti"] .bk-overlay,
html[data-bk-theme="graffiti"] .bk-bar{
  --bk-accent:#c6ff00;
  --bk-accent-ink:#0a0a0a;
  --bk-bg:#15140f;
  --bk-surface:#1f1d16;
  --bk-surface2:#2a2820;
  --bk-line:#3a382b;
  --bk-fg:#f4f2e9;
  --bk-dim:#b6b2a3;
  --bk-ok:#c6ff00;
  --bk-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- sticky book bar: a strip of tape on concrete ---- */
html[data-bk-theme="graffiti"] .bk-bar{
  background:
    linear-gradient(180deg,rgba(12,11,8,.86),rgba(12,11,8,.96)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  border-top:2px solid var(--bk-accent);
}
html[data-bk-theme="graffiti"] .bk-bar a,
html[data-bk-theme="graffiti"] .bk-bar button{
  font-family:'Archivo Black',system-ui,sans-serif;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;border-radius:0}
html[data-bk-theme="graffiti"] .bk-bar .bk-bar-dm{
  color:var(--bk-fg);border:2px solid var(--hot,#ff2e6e);
  clip-path:polygon(1% 0,99% 5%,100% 95%,2% 100%);background:transparent}
html[data-bk-theme="graffiti"] .bk-bar .bk-bar-book{
  background:var(--bk-accent);color:var(--bk-accent-ink);
  clip-path:polygon(2% 7%,98% 0,100% 92%,1% 100%);
  box-shadow:3px 4px 0 #0c0b08}

/* ---- overlay: alley behind torn glass ---- */
html[data-bk-theme="graffiti"] .bk-overlay{
  background:rgba(4,4,2,.82);backdrop-filter:blur(7px)}

/* ---- the sheet: a flyer on porous concrete ---- */
html[data-bk-theme="graffiti"] .bk-sheet{
  background:
    radial-gradient(130% 90% at 8% -8%,rgba(60,58,45,.5),transparent 55%),
    radial-gradient(140% 120% at 92% 112%,rgba(0,0,0,.6),transparent 60%),
    var(--bk-bg);
  color:var(--bk-fg);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif}
/* fine concrete grain over the whole sheet, never blocks taps */
html[data-bk-theme="graffiti"] .bk-sheet::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px}
@media(min-width:600px){
  html[data-bk-theme="graffiti"] .bk-sheet{
    border:2px solid var(--bk-accent);border-radius:4px;
    box-shadow:10px 14px 0 #0c0b08,0 40px 90px rgba(0,0,0,.7)}
}

/* keep real content above the grain */
html[data-bk-theme="graffiti"] .bk-head,
html[data-bk-theme="graffiti"] .bk-body,
html[data-bk-theme="graffiti"] .bk-foot,
html[data-bk-theme="graffiti"] .bk-demo,
html[data-bk-theme="graffiti"] .bk-success{position:relative;z-index:1}

/* ---- header: spray-stencil masthead with marker subtitle ---- */
html[data-bk-theme="graffiti"] .bk-head{
  background:linear-gradient(180deg,rgba(12,11,8,.6),transparent);
  border-bottom:1px solid rgba(198,255,0,.28)}
html[data-bk-theme="graffiti"] .bk-title{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:24px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--bk-fg);line-height:.95;
  -webkit-text-stroke:1px #0c0b08;text-shadow:2px 3px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-title small{
  font-family:'Permanent Marker',cursive;
  font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:none;
  color:var(--cyan,#36e0ff);margin-top:5px;-webkit-text-stroke:0;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
/* close button: a stamped stencil disc */
html[data-bk-theme="graffiti"] .bk-x{
  border:2px solid var(--bk-accent);background:rgba(12,11,8,.6);
  color:var(--bk-accent);font-family:'Archivo Black',sans-serif;font-size:16px}
html[data-bk-theme="graffiti"] .bk-x:hover{
  background:var(--bk-accent);color:var(--bk-accent-ink)}

/* ---- demo banner: fly-posted notice ---- */
html[data-bk-theme="graffiti"] .bk-demo{
  background:rgba(12,11,8,.5);border-bottom:1px dashed rgba(198,255,0,.3);
  font-family:'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-size:10px;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-demo b{color:var(--bk-accent)}

/* ---- step labels: stencilled section tags ---- */
html[data-bk-theme="graffiti"] .bk-label{
  font-family:'Archivo Black',sans-serif;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-label .n{
  border:1px solid var(--bk-line);background:rgba(12,11,8,.55);
  color:var(--bk-fg);border-radius:0;font-family:'Anton',sans-serif;font-weight:400}
html[data-bk-theme="graffiti"] .bk-label.done{color:var(--bk-accent)}
html[data-bk-theme="graffiti"] .bk-label.done .n{
  background:var(--bk-accent);color:var(--bk-accent-ink);border-color:var(--bk-accent);
  box-shadow:2px 2px 0 #0c0b08}

/* ---- service chips: torn stickers taped to the wall ---- */
html[data-bk-theme="graffiti"] .bk-chip{
  background:linear-gradient(180deg,var(--bk-surface2),var(--bk-surface));
  border:1px solid rgba(255,255,255,.09);
  border-bottom:3px solid rgba(0,0,0,.55);border-radius:0;
  clip-path:polygon(3% 2%,99% 0,100% 96%,1% 100%);
  box-shadow:3px 4px 0 #0c0b08;color:var(--bk-fg)}
html[data-bk-theme="graffiti"] .bk-chip:nth-child(3n+1){transform:rotate(-1.2deg)}
html[data-bk-theme="graffiti"] .bk-chip:nth-child(3n+2){transform:rotate(.9deg)}
html[data-bk-theme="graffiti"] .bk-chip:nth-child(3n){transform:rotate(-.4deg)}
/* strip of tape across the top corner of each sticker */
html[data-bk-theme="graffiti"] .bk-chip::before{
  content:"";position:absolute;top:-6px;left:18%;width:38px;height:13px;
  background:rgba(231,226,208,.34);transform:rotate(-3deg);
  box-shadow:0 1px 3px rgba(0,0,0,.4);pointer-events:none}
html[data-bk-theme="graffiti"] .bk-chip{position:relative;overflow:visible}
html[data-bk-theme="graffiti"] .bk-chip:hover{border-color:var(--bk-accent)}
html[data-bk-theme="graffiti"] .bk-chip.sel{
  border-color:var(--bk-accent);border-bottom-color:var(--bk-accent);
  background:color-mix(in srgb,var(--bk-accent) 16%,var(--bk-surface));
  box-shadow:3px 4px 0 #0c0b08,0 0 18px rgba(198,255,0,.32)}
html[data-bk-theme="graffiti"] .bk-chip .nm{
  font-family:'Archivo Black',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;font-size:13px}
html[data-bk-theme="graffiti"] .bk-chip .pr{
  font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.02em;
  color:var(--bk-accent);-webkit-text-stroke:.5px #0c0b08}
html[data-bk-theme="graffiti"] .bk-chip.sel .pr{color:var(--bk-fg)}

/* ---- calendar head + nav ---- */
html[data-bk-theme="graffiti"] .bk-cal-month{
  font-family:'Anton',sans-serif;font-weight:400;font-size:18px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--bk-fg)}
html[data-bk-theme="graffiti"] .bk-nav button{
  border:1px solid var(--bk-line);background:rgba(12,11,8,.55);
  color:var(--bk-accent);border-radius:0;box-shadow:2px 2px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-nav button:hover:not(:disabled){
  border-color:var(--bk-accent);background:rgba(198,255,0,.1)}

/* ---- day grid: concrete tiles, acid hit on select ---- */
html[data-bk-theme="graffiti"] .bk-dow{
  font-family:'Archivo Black',sans-serif;font-weight:400;
  letter-spacing:.1em;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-day{
  background:rgba(12,11,8,.5);border:1px solid rgba(255,255,255,.06);
  border-radius:0;color:var(--bk-fg);font-weight:600}
html[data-bk-theme="graffiti"] .bk-day.empty{background:transparent;border-color:transparent}
html[data-bk-theme="graffiti"] .bk-day:hover:not(.off):not(.empty){
  border-color:var(--bk-accent)}
html[data-bk-theme="graffiti"] .bk-day.today::after{background:var(--hot,#ff2e6e)}
html[data-bk-theme="graffiti"] .bk-day.sel{
  background:var(--bk-accent);color:var(--bk-accent-ink);
  border-color:var(--bk-accent);font-weight:700;
  box-shadow:inset 0 0 0 1px #0c0b08,2px 2px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-closed-note{
  font-family:'Permanent Marker',cursive;color:var(--bk-dim);font-size:12px}

/* ---- time slots: marker-tagged chips ---- */
html[data-bk-theme="graffiti"] .bk-slot{
  background:rgba(12,11,8,.5);border:1px solid rgba(255,255,255,.07);
  border-radius:0;color:var(--bk-fg);
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.01em}
html[data-bk-theme="graffiti"] .bk-slot:hover:not(:disabled){border-color:var(--bk-accent)}
html[data-bk-theme="graffiti"] .bk-slot.sel{
  background:var(--bk-accent);color:var(--bk-accent-ink);border-color:var(--bk-accent);
  box-shadow:2px 2px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-slot:disabled{opacity:.3}
html[data-bk-theme="graffiti"] .bk-slot.brk{
  font-family:'Permanent Marker',cursive;text-transform:uppercase;
  letter-spacing:.04em;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-hint{
  font-family:'Permanent Marker',cursive;color:var(--bk-dim);font-size:13px}

/* ---- fields: scrawl labels, taped inputs ---- */
html[data-bk-theme="graffiti"] .bk-field label{
  font-family:'Archivo Black',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-field input,
html[data-bk-theme="graffiti"] .bk-field textarea{
  background:rgba(12,11,8,.5);border:1px solid var(--bk-line);border-radius:0;
  color:var(--bk-fg);font-family:'Space Grotesk',sans-serif}
html[data-bk-theme="graffiti"] .bk-field input:focus,
html[data-bk-theme="graffiti"] .bk-field textarea:focus{
  border-color:var(--bk-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-accent) 28%,transparent)}
html[data-bk-theme="graffiti"] .bk-field input::placeholder,
html[data-bk-theme="graffiti"] .bk-field textarea::placeholder{color:#6a6754}

/* ---- footer + summary ---- */
html[data-bk-theme="graffiti"] .bk-foot{
  background:linear-gradient(0deg,rgba(12,11,8,.65),transparent);
  border-top:1px dashed rgba(198,255,0,.3)}
html[data-bk-theme="graffiti"] .bk-summary{
  font-family:'Permanent Marker',cursive;font-size:12px;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-summary b{color:var(--bk-accent);font-weight:400}

/* ---- the confirm: drippy acid-green stencil ---- */
html[data-bk-theme="graffiti"] .bk-confirm{
  position:relative;overflow:visible;
  background:var(--bk-accent);color:var(--bk-accent-ink);border-radius:0;
  font-family:'Archivo Black',sans-serif;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;
  clip-path:polygon(2% 8%,98% 0,100% 90%,1% 100%);
  box-shadow:4px 5px 0 #0c0b08}
/* three wet paint drips hanging off the bottom edge */
html[data-bk-theme="graffiti"] .bk-confirm::after{
  content:"";position:absolute;left:14%;right:14%;bottom:-7px;height:9px;
  pointer-events:none;
  background:
    radial-gradient(5px 8px at 16% 0,var(--bk-accent) 60%,transparent 62%),
    radial-gradient(4px 7px at 52% 0,var(--bk-accent) 60%,transparent 62%),
    radial-gradient(5px 9px at 84% 0,var(--bk-accent) 60%,transparent 62%)}
html[data-bk-theme="graffiti"] .bk-confirm:hover:not(:disabled){
  filter:brightness(1.06) saturate(1.1);
  box-shadow:4px 5px 0 #0c0b08,0 0 22px rgba(198,255,0,.45)}
html[data-bk-theme="graffiti"] .bk-confirm:disabled{opacity:.42}

/* ---- success: spray-can hit landed ---- */
html[data-bk-theme="graffiti"] .bk-tick{
  background:color-mix(in srgb,var(--bk-accent) 22%,transparent);
  color:var(--bk-accent);border:2px solid var(--bk-accent);
  box-shadow:0 0 26px rgba(198,255,0,.4)}
html[data-bk-theme="graffiti"] .bk-success h3{
  font-family:'Anton',sans-serif;font-weight:400;font-size:30px;
  text-transform:uppercase;letter-spacing:.01em;color:var(--bk-fg);
  -webkit-text-stroke:1px #0c0b08;text-shadow:3px 3px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-success p{
  font-family:'Permanent Marker',cursive;color:var(--bk-dim);font-size:15px;line-height:1.5}
html[data-bk-theme="graffiti"] .bk-recap{
  border:1px solid var(--bk-line);border-radius:0;
  background:rgba(12,11,8,.45);box-shadow:4px 5px 0 #0c0b08}
html[data-bk-theme="graffiti"] .bk-recap div{border-bottom:1px dashed rgba(198,255,0,.22)}
html[data-bk-theme="graffiti"] .bk-recap span:first-child{
  font-family:'Archivo Black',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--bk-dim)}
html[data-bk-theme="graffiti"] .bk-ref{
  font-family:'Anton',sans-serif;color:var(--bk-accent);letter-spacing:.08em;
  -webkit-text-stroke:.4px #0c0b08}

/* ---- stencil ---- */
/* ============================================================
   ANARCHO STENCIL  -  booking skin  (scope: html[data-bk-theme="stencil"])
   Crass-zine spray-stencil handbill. Off-black sheet, blood-red stencil
   buttons, hard 2px paper-white borders, square corners, photocopy grain.
   Fonts already loaded on page: Saira Stencil One / Oswald / Special Elite.
   ============================================================ */

/* ---- token overrides (cascade into the whole modal + bar) ---- */
html[data-bk-theme="stencil"] .bk-overlay,
html[data-bk-theme="stencil"] .bk-bar{
  --bk-accent:#e11414;
  --bk-accent-ink:#ffffff;
  --bk-bg:#0b0b0b;
  --bk-surface:#141414;
  --bk-surface2:#1d1d1b;
  --bk-line:#ece9e2;           /* hard paper-white borders */
  --bk-fg:#ece9e2;             /* paper ink */
  --bk-dim:#b8b4a8;            /* warm photocopy grey, AA on off-black */
  --bk-ok:#e11414;            /* success reads in the same blood-red */
  --bk-ease:cubic-bezier(.2,.85,.2,1);
}

/* ============================================================
   STICKY BOOK BAR
   ============================================================ */
html[data-bk-theme="stencil"] .bk-bar{
  background:#0b0b0b;
  border-top:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-bar a,
html[data-bk-theme="stencil"] .bk-bar button{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:0;
}
html[data-bk-theme="stencil"] .bk-bar .bk-bar-dm{
  background:transparent;
  color:var(--bk-fg);
  border:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-bar .bk-bar-book{
  background:var(--bk-accent);
  color:var(--bk-accent-ink);
  border:2px solid var(--bk-accent);
}

/* ============================================================
   OVERLAY + SHEET  (the stencilled handbill)
   ============================================================ */
html[data-bk-theme="stencil"] .bk-overlay{
  background:rgba(4,3,3,.82);
}
html[data-bk-theme="stencil"] .bk-sheet{
  background:var(--bk-bg);
  color:var(--bk-fg);
  font-family:'Oswald',system-ui,sans-serif;
  border:2px solid var(--bk-line);
  border-radius:0;
}
/* photocopy grain + halftone speckle laid over the whole sheet (non-blocking) */
html[data-bk-theme="stencil"] .bk-sheet::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(#ece9e2 1px,transparent 1.4px);
  background-size:160px 160px,9px 9px;
}
@media(min-width:600px){
  html[data-bk-theme="stencil"] .bk-sheet{
    border:2px solid var(--bk-line);
    border-radius:0;
    box-shadow:10px 10px 0 var(--bk-accent),0 40px 90px rgba(0,0,0,.7);
  }
}

/* ============================================================
   HEADER  -  stencilled masthead with circle-A stamp
   ============================================================ */
html[data-bk-theme="stencil"] .bk-head{
  background:var(--bk-bg);
  border-bottom:2px solid var(--bk-line);
  position:relative;
}
html[data-bk-theme="stencil"] .bk-title{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:20px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
html[data-bk-theme="stencil"] .bk-title small{
  font-family:'Special Elite',monospace;
  font-weight:400;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#ff4040;          /* blood-red kicker, AA on off-black */
  margin-top:4px;
}
/* hand-stamped circle-A behind the close button */
html[data-bk-theme="stencil"] .bk-x{
  width:40px;height:40px;
  border:2px solid var(--bk-line);
  border-radius:0;
  background:transparent;
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
  font-size:20px;
  font-weight:600;
}
html[data-bk-theme="stencil"] .bk-x:hover{
  background:var(--bk-accent);
  color:var(--bk-accent-ink);
  border-color:var(--bk-accent);
  transform:none;
}

/* keep real content above the grain layer */
html[data-bk-theme="stencil"] .bk-head,
html[data-bk-theme="stencil"] .bk-body,
html[data-bk-theme="stencil"] .bk-foot{position:relative;z-index:1}

/* ============================================================
   DEMO BANNER
   ============================================================ */
html[data-bk-theme="stencil"] .bk-demo{
  font-family:'Special Elite',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bk-dim);
  background:#141414;
  border-bottom:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-demo b{color:#ff4040}

/* ============================================================
   STEP LABELS
   ============================================================ */
html[data-bk-theme="stencil"] .bk-label{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bk-fg);
}
html[data-bk-theme="stencil"] .bk-label .n{
  width:24px;height:24px;
  border-radius:0;
  background:transparent;
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:12px;
  border:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-label.done .n{
  background:var(--bk-accent);
  color:var(--bk-accent-ink);
  border-color:var(--bk-accent);
}

/* ============================================================
   SERVICE CHIPS  -  cut-out handbill tiles
   ============================================================ */
html[data-bk-theme="stencil"] .bk-chip{
  background:var(--bk-surface);
  border:2px solid var(--bk-line);
  border-radius:0;
  color:var(--bk-fg);
}
html[data-bk-theme="stencil"] .bk-chip:hover{
  border-color:var(--bk-accent);
  background:#1d1d1b;
}
html[data-bk-theme="stencil"] .bk-chip.sel{
  border-color:var(--bk-accent);
  background:var(--bk-accent);
  color:#ffffff;
  box-shadow:4px 4px 0 var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-chip .nm{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
html[data-bk-theme="stencil"] .bk-chip .pr{
  font-family:'Special Elite',monospace;
  font-size:12px;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-chip.sel .pr{color:#ffffff}

/* ============================================================
   CALENDAR
   ============================================================ */
html[data-bk-theme="stencil"] .bk-cal-month{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
html[data-bk-theme="stencil"] .bk-nav button{
  width:38px;height:38px;
  border:2px solid var(--bk-line);
  border-radius:0;
  background:transparent;
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
  font-weight:600;
}
html[data-bk-theme="stencil"] .bk-nav button:hover:not(:disabled){
  border-color:var(--bk-accent);
  background:var(--bk-accent);
  color:var(--bk-accent-ink);
}
html[data-bk-theme="stencil"] .bk-dow{
  font-family:'Special Elite',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-day{
  background:var(--bk-surface);
  border:2px solid transparent;
  border-radius:0;
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
  font-weight:500;
  font-size:14px;
}
html[data-bk-theme="stencil"] .bk-day:hover:not(.off):not(.empty){
  border-color:var(--bk-accent);
}
html[data-bk-theme="stencil"] .bk-day.empty{background:transparent}
html[data-bk-theme="stencil"] .bk-day.off{
  color:var(--bk-dim);
  background:transparent;
}
html[data-bk-theme="stencil"] .bk-day.today::after{
  border-radius:0;
  width:5px;height:5px;
  background:var(--bk-accent);
}
html[data-bk-theme="stencil"] .bk-day.sel{
  background:var(--bk-accent);
  color:#ffffff;
  border-color:var(--bk-accent);
  font-weight:700;
}
html[data-bk-theme="stencil"] .bk-closed-note{
  font-family:'Special Elite',monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--bk-dim);
}

/* ============================================================
   TIME SLOTS
   ============================================================ */
html[data-bk-theme="stencil"] .bk-slot{
  background:var(--bk-surface);
  border:2px solid var(--bk-line);
  border-radius:0;
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
}
html[data-bk-theme="stencil"] .bk-slot:hover:not(:disabled){
  border-color:var(--bk-accent);
  background:#1d1d1b;
}
html[data-bk-theme="stencil"] .bk-slot.sel{
  background:var(--bk-accent);
  color:#ffffff;
  border-color:var(--bk-accent);
  box-shadow:3px 3px 0 var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-slot:disabled{
  border-color:#3a3a36;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-slot.brk{
  font-family:'Special Elite',monospace;
  font-size:11px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bk-dim);
  border-color:#3a3a36;
}
html[data-bk-theme="stencil"] .bk-hint{
  font-family:'Special Elite',monospace;
  font-size:12px;
  color:var(--bk-dim);
}

/* ============================================================
   FIELDS  -  typewriter intake
   ============================================================ */
html[data-bk-theme="stencil"] .bk-field label{
  font-family:'Special Elite',monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-field input,
html[data-bk-theme="stencil"] .bk-field textarea{
  background:#141414;
  border:2px solid var(--bk-line);
  border-radius:0;
  color:var(--bk-fg);
  font-family:'Special Elite',monospace;
  font-size:15px;
  letter-spacing:.01em;
}
html[data-bk-theme="stencil"] .bk-field input:focus,
html[data-bk-theme="stencil"] .bk-field textarea:focus{
  border-color:var(--bk-accent);
  box-shadow:4px 4px 0 var(--bk-accent);
}
html[data-bk-theme="stencil"] .bk-field input::placeholder,
html[data-bk-theme="stencil"] .bk-field textarea::placeholder{
  color:#6f6c63;
}

/* ============================================================
   FOOTER + CONFIRM  -  the red stencil stamp
   ============================================================ */
html[data-bk-theme="stencil"] .bk-foot{
  background:var(--bk-bg);
  border-top:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-summary{
  font-family:'Special Elite',monospace;
  font-size:12px;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-summary b{
  color:var(--bk-fg);
  font-weight:400;
}
html[data-bk-theme="stencil"] .bk-confirm{
  background:var(--bk-accent);
  color:var(--bk-accent-ink);
  border:2px solid var(--bk-accent);
  border-radius:0;
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
html[data-bk-theme="stencil"] .bk-confirm:hover:not(:disabled){
  filter:none;
  background:#ffffff;
  color:var(--bk-accent);
  border-color:#ffffff;
}
html[data-bk-theme="stencil"] .bk-confirm:disabled{
  background:transparent;
  color:var(--bk-dim);
  border-color:#3a3a36;
}

/* ============================================================
   SUCCESS  -  booked / stamped CONFIRMED
   ============================================================ */
html[data-bk-theme="stencil"] .bk-tick{
  border-radius:0;
  background:var(--bk-accent);
  color:#ffffff;
  border:2px solid var(--bk-line);
}
html[data-bk-theme="stencil"] .bk-success h3{
  font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400;
  font-size:24px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
html[data-bk-theme="stencil"] .bk-success p{
  font-family:'Special Elite',monospace;
  font-size:14px;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-recap{
  border:2px solid var(--bk-line);
  border-radius:0;
}
html[data-bk-theme="stencil"] .bk-recap div{
  border-bottom:2px solid var(--bk-line);
  font-family:'Oswald',sans-serif;
}
html[data-bk-theme="stencil"] .bk-recap span:first-child{
  font-family:'Special Elite',monospace;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--bk-dim);
}
html[data-bk-theme="stencil"] .bk-recap span:last-child{
  color:var(--bk-fg);
  font-weight:600;
}
html[data-bk-theme="stencil"] .bk-ref{
  font-family:'Special Elite',monospace;
  letter-spacing:.06em;
  color:#ff4040;
}

/* ---- tartan ---- */
/* ============================================================
   SKIN: tartan  -  Seditionaries / Westwood SEX-shop punk
   A cream muslin bondage-shirt panel, a woven-tartan header band,
   brass D-rings, steel safety pins, ransom-note labels.
   LIGHT sheet: dark ink on muslin, full var override for AA.
   Scoped entirely under html[data-bk-theme="tartan"].
   ============================================================ */

/* ---- token overrides (cascade from overlay + bar) ---- */
html[data-bk-theme="tartan"] .bk-overlay,
html[data-bk-theme="tartan"] .bk-bar{
  --bk-bg:#e9e2d2;              /* muslin sheet ground */
  --bk-surface:#f2ecde;         /* lifted muslin */
  --bk-surface2:#ded3b9;        /* worn cream / pressed seam */
  --bk-line:#b6a984;            /* thread / brass-grey seam line */
  --bk-fg:#1a1410;              /* near-black ink */
  --bk-dim:#5e4a30;             /* dark brass-brown, AA on cream */
  --bk-accent:#b3122a;          /* Westwood tartan red */
  --bk-accent-ink:#ffffff;      /* white on red */
  --bk-ok:#5a0a14;              /* blood-red success, AA on cream */
  --bk-ease:cubic-bezier(.2,.85,.2,1);
}

/* ---- sticky book bar: pinned bondage placket ---- */
html[data-bk-theme="tartan"] .bk-bar{
  background:rgba(26,20,16,.94);
  border-top:2px solid #b3122a;
  box-shadow:0 -2px 0 #000,0 -10px 26px rgba(0,0,0,.5);
}
html[data-bk-theme="tartan"] .bk-bar a,
html[data-bk-theme="tartan"] .bk-bar button{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-radius:2px;
}
html[data-bk-theme="tartan"] .bk-bar .bk-bar-dm{
  background:transparent;color:#e9e2d2;
  border:1.5px solid #b89758;
}
html[data-bk-theme="tartan"] .bk-bar .bk-bar-book{
  background:#b3122a;color:#fff;border:1px solid #000;
  box-shadow:2px 2px 0 #000;
}

/* ---- overlay: dark King's Road street behind the panel ---- */
html[data-bk-theme="tartan"] .bk-overlay{
  background:rgba(8,6,7,.82);
}

/* ---- sheet: muslin bondage-shirt panel, hand-pressed ---- */
html[data-bk-theme="tartan"] .bk-sheet{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 5px),
    linear-gradient(150deg,#efe8d8,#e2d8c0);
  color:#1a1410;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
}
@media(min-width:600px){
  html[data-bk-theme="tartan"] .bk-sheet{
    border:1px solid #9c8f6a;border-radius:3px;
    box-shadow:0 40px 100px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.4);
  }
}

/* ---- header: a woven tartan band (crossing warp + weft) ---- */
html[data-bk-theme="tartan"] .bk-head{
  position:relative;
  border-bottom:2px solid #000;
  color:#e9e2d2;
  background:
    /* fine twill so it reads woven, not printed */
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 1.5px, transparent 1.5px 4px),
    /* cream over-check, both directions */
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(233,226,210,.34) 46px 48px, transparent 48px 96px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(233,226,210,.30) 46px 48px, transparent 48px 96px),
    /* WARP - vertical coloured bands (semi-transparent so layers cross) */
    repeating-linear-gradient(90deg,
      rgba(126,13,29,.62) 0 24px, rgba(90,10,20,.62) 24px 50px,
      rgba(12,10,11,.66) 50px 56px, rgba(179,18,42,.55) 56px 64px,
      rgba(12,10,11,.66) 64px 70px, rgba(90,10,20,.62) 70px 100px),
    /* WEFT - horizontal coloured bands underneath */
    repeating-linear-gradient(0deg,
      #5a0a14 0 24px, #7e0d1d 24px 50px,
      #0c0a0b 50px 56px, #b3122a 56px 64px,
      #0c0a0b 64px 70px, #5a0a14 70px 100px),
    #0c0a0b;
  background-blend-mode:overlay,multiply,normal,normal,normal,normal,normal;
}
/* brass D-ring rivet riding the seam at the band's foot */
html[data-bk-theme="tartan"] .bk-head::after{
  content:"";position:absolute;left:20px;bottom:-9px;width:16px;height:16px;
  border-radius:50%;border:3px solid #b89758;
  background:radial-gradient(circle at 35% 30%,#d9c08a,#8a6f3a);
  box-shadow:0 2px 3px rgba(0,0,0,.5);pointer-events:none;
}

/* ---- title: Anton display, ransom red label ---- */
html[data-bk-theme="tartan"] .bk-title{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:22px;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;text-shadow:2px 2px 0 #000;
}
html[data-bk-theme="tartan"] .bk-title small{
  font-family:'Special Elite',monospace;
  font-weight:400;font-size:11px;letter-spacing:.18em;
  color:#e9e2d2;text-shadow:none;margin-top:5px;
}

/* ---- close: steel safety-pin coil ---- */
html[data-bk-theme="tartan"] .bk-x{
  border-radius:50%;border:2px solid #c8ccd2;
  background:radial-gradient(circle at 38% 32%,#eef1f5,#7d828b);
  color:#1a1410;font-weight:700;
  box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 0 0 3px rgba(12,10,11,.0);
}
html[data-bk-theme="tartan"] .bk-x:hover{
  background:radial-gradient(circle at 38% 32%,#fff,#9097a0);
}

/* ---- demo banner: typed shop ticket ---- */
html[data-bk-theme="tartan"] .bk-demo{
  font-family:'Special Elite',monospace;
  font-size:11px;letter-spacing:.05em;color:#3a2e1e;
  background:#ded3b9;border-bottom:1px solid #b6a984;
}
html[data-bk-theme="tartan"] .bk-demo b{color:#b3122a;font-weight:400}

/* ---- step labels: ransom eyebrow + brass numeral ---- */
html[data-bk-theme="tartan"] .bk-label{
  font-family:'Special Elite',monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-label .n{
  border-radius:50%;font-family:'Archivo',sans-serif;font-weight:800;
  background:#f2ecde;color:#1a1410;border:2px solid #8a6f3a;
}
html[data-bk-theme="tartan"] .bk-label.done .n{
  background:#b3122a;color:#fff;border-color:#000;
}

/* ---- service chips: muslin swatch tickets ---- */
html[data-bk-theme="tartan"] .bk-chip{
  border:1px solid #b6a984;border-radius:2px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 5px),
    linear-gradient(135deg,#f4eee0,#e6dcc6);
  color:#1a1410;box-shadow:1px 2px 0 rgba(120,100,60,.35);
}
html[data-bk-theme="tartan"] .bk-chip:hover{
  border-color:#b3122a;
}
html[data-bk-theme="tartan"] .bk-chip.sel{
  border-color:#b3122a;border-left:4px solid #b3122a;
  background:linear-gradient(135deg,#f6e9e6,#efd9d4);
  box-shadow:2px 2px 0 #000;
}
html[data-bk-theme="tartan"] .bk-chip .nm{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;
}
html[data-bk-theme="tartan"] .bk-chip .pr{
  font-family:'Special Elite',monospace;font-size:12px;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-chip.sel .pr{color:#7e0d1d}

/* ---- calendar header ---- */
html[data-bk-theme="tartan"] .bk-cal-month{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:#1a1410;
}
html[data-bk-theme="tartan"] .bk-nav button{
  border-radius:2px;border:2px solid #8a6f3a;
  background:linear-gradient(180deg,#f2ecde,#e2d8c0);
  color:#1a1410;font-weight:700;
}
html[data-bk-theme="tartan"] .bk-nav button:hover:not(:disabled){
  border-color:#b3122a;background:#f6e9e6;
}

/* ---- day-of-week + days ---- */
html[data-bk-theme="tartan"] .bk-dow{
  font-family:'Special Elite',monospace;
  letter-spacing:.1em;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-day{
  border:1px solid #cbbf9d;border-radius:2px;
  background:#f4eee0;color:#1a1410;
  font-family:'Archivo',sans-serif;font-weight:700;
}
html[data-bk-theme="tartan"] .bk-day:hover:not(.off):not(.empty){
  border-color:#b3122a;background:#fbf6ea;
}
html[data-bk-theme="tartan"] .bk-day.empty{background:transparent}
html[data-bk-theme="tartan"] .bk-day.off{color:#8a7f62;background:transparent}
html[data-bk-theme="tartan"] .bk-day.today::after{background:#b3122a}
html[data-bk-theme="tartan"] .bk-day.sel{
  background:#b3122a;color:#fff;border-color:#000;font-weight:800;
  box-shadow:1px 1px 0 #000;
}
html[data-bk-theme="tartan"] .bk-closed-note{
  font-family:'Special Elite',monospace;color:#5e4a30;
}

/* ---- time slots: pinned ticket buttons ---- */
html[data-bk-theme="tartan"] .bk-slot{
  border:1px solid #b6a984;border-radius:2px;
  background:linear-gradient(180deg,#f4eee0,#e6dcc6);
  color:#1a1410;font-family:'Archivo',sans-serif;font-weight:700;
}
html[data-bk-theme="tartan"] .bk-slot:hover:not(:disabled){
  border-color:#b3122a;background:#fbf6ea;
}
html[data-bk-theme="tartan"] .bk-slot.sel{
  background:#b3122a;color:#fff;border-color:#000;
  box-shadow:1px 1px 0 #000;
}
html[data-bk-theme="tartan"] .bk-slot:disabled{color:#8a7f62}
html[data-bk-theme="tartan"] .bk-slot.brk{
  font-family:'Special Elite',monospace;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:#5e4a30;
  background:#ded3b9;
}
html[data-bk-theme="tartan"] .bk-hint{
  font-family:'Special Elite',monospace;color:#5e4a30;
}

/* ---- fields: muslin slips with typed labels ---- */
html[data-bk-theme="tartan"] .bk-field label{
  font-family:'Special Elite',monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-field input,
html[data-bk-theme="tartan"] .bk-field textarea{
  background:#fbf7ec;border:1px solid #b6a984;border-radius:2px;
  color:#1a1410;font-family:'Archivo',sans-serif;
}
html[data-bk-theme="tartan"] .bk-field input:focus,
html[data-bk-theme="tartan"] .bk-field textarea:focus{
  border-color:#b3122a;
  box-shadow:0 0 0 3px rgba(179,18,42,.28),2px 2px 0 #000;
}
html[data-bk-theme="tartan"] .bk-field input::placeholder,
html[data-bk-theme="tartan"] .bk-field textarea::placeholder{color:#8a7f62}

/* ---- footer ---- */
html[data-bk-theme="tartan"] .bk-foot{
  border-top:2px solid #000;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.022) 0 2px, transparent 2px 5px),
    linear-gradient(180deg,#e6dcc6,#ddd2b8);
}
html[data-bk-theme="tartan"] .bk-summary{
  font-family:'Special Elite',monospace;font-size:12px;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-summary b{
  font-family:'Archivo',sans-serif;font-weight:800;color:#1a1410;
}

/* ---- confirm: the blood-red book button, pinned ---- */
html[data-bk-theme="tartan"] .bk-confirm{
  background:#b3122a;color:#fff;border:1px solid #000;border-radius:2px;
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:3px 3px 0 #000;
}
html[data-bk-theme="tartan"] .bk-confirm:hover:not(:disabled){
  background:#cf1733;filter:none;
  transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;
}
html[data-bk-theme="tartan"] .bk-confirm:active:not(:disabled){
  transform:translate(1px,1px);box-shadow:1px 1px 0 #000;
}

/* ---- success: fastened-the-pin recap ---- */
html[data-bk-theme="tartan"] .bk-tick{
  background:rgba(90,10,20,.14);color:#7e0d1d;
  border:2px solid #b89758;
}
html[data-bk-theme="tartan"] .bk-success h3{
  font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:26px;
  letter-spacing:.02em;text-transform:uppercase;color:#1a1410;
}
html[data-bk-theme="tartan"] .bk-success p{
  font-family:'Special Elite',monospace;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-recap{
  border:1px solid #b6a984;border-radius:2px;background:#f4eee0;
}
html[data-bk-theme="tartan"] .bk-recap div{
  border-bottom:1px dashed #b6a984;
}
html[data-bk-theme="tartan"] .bk-recap span:first-child{
  font-family:'Special Elite',monospace;color:#5e4a30;
}
html[data-bk-theme="tartan"] .bk-recap span:last-child{
  font-family:'Archivo',sans-serif;font-weight:700;color:#1a1410;
}
html[data-bk-theme="tartan"] .bk-ref{
  font-family:'Special Elite',monospace;color:#b3122a;letter-spacing:.06em;
}

/* ---- jacket ---- */
/* ============================================================
   BATTLE JACKET booking skin  (scoped: html[data-bk-theme="jacket"])
   Indigo denim sheet, cream sewn-on back-patch header, red running
   stitch, metal studs, embroidered red confirm patch. DARK sheet.
   ============================================================ */

/* ---- theme tokens, set on overlay + bar so they cascade ---- */
html[data-bk-theme="jacket"] .bk-overlay,
html[data-bk-theme="jacket"] .bk-bar{
  --bk-accent:#e0413f;
  --bk-accent-ink:#ffffff;
  --bk-bg:#14151c;
  --bk-surface:#1c1e29;
  --bk-surface2:#262a3a;
  --bk-line:#3a3140;
  --bk-fg:#ece6d6;
  --bk-dim:#a6a293;
  --bk-ok:#4cc98a;
  --bk-thread:#e0413f;
  --bk-thread-dk:#c0282d;
  --bk-cream:#e9e2d2;
  --bk-cream2:#d8cfb8;
  --bk-ink:#181818;
}

/* denim weave applied to the dark surfaces of the modal */
html[data-bk-theme="jacket"] .bk-overlay{
  background:rgba(7,8,12,.8);
  backdrop-filter:blur(8px);
}

/* ---- sticky mobile bar = strip of denim with a stud rail ---- */
html[data-bk-theme="jacket"] .bk-bar{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 2px, transparent 2px 5px),
    linear-gradient(#15161e,#101119);
  border-top:2px solid var(--bk-thread-dk);
}
html[data-bk-theme="jacket"] .bk-bar a,
html[data-bk-theme="jacket"] .bk-bar button{
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:4px;
}
html[data-bk-theme="jacket"] .bk-bar .bk-bar-dm{
  color:var(--bk-fg);
  border:2px dashed var(--bk-thread);
  background:rgba(20,21,28,.6);
}
html[data-bk-theme="jacket"] .bk-bar .bk-bar-book{
  background:var(--bk-thread-dk);color:#fff;
  border:2px solid #8d1c20;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}

/* ---- sheet = a denim panel ---- */
html[data-bk-theme="jacket"] .bk-sheet{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px),
    radial-gradient(130% 90% at 50% 0%, #20222e, #14151c 70%, #0f1016 100%);
  color:var(--bk-fg);
  font-family:'Oswald',sans-serif;
}
@media(min-width:600px){
  html[data-bk-theme="jacket"] .bk-sheet{
    border-radius:8px;
    border:2px solid #2a2c38;
    box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
  }
}

/* ---- header = cream sewn-on back-patch ---- */
html[data-bk-theme="jacket"] .bk-head{
  background:radial-gradient(150% 130% at 50% 0%, var(--bk-cream) 0%, var(--bk-cream2) 100%);
  border-bottom:2px solid var(--bk-thread-dk);
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(120,100,70,.18);
}
/* dashed running-stitch ring inside the patch */
html[data-bk-theme="jacket"] .bk-head::before{
  content:"";position:absolute;inset:6px;pointer-events:none;border-radius:4px;
  border:2px dashed rgba(192,40,45,.55);
}
html[data-bk-theme="jacket"] .bk-title{
  font-family:'Pirata One',system-ui,serif;font-weight:400;
  font-size:26px;line-height:1;letter-spacing:.01em;color:var(--bk-ink);
}
html[data-bk-theme="jacket"] .bk-title small{
  font-family:'Special Elite',monospace;color:var(--bk-thread-dk);
  letter-spacing:.22em;font-size:10px;margin-top:5px;
}
/* close button = a metal stud */
html[data-bk-theme="jacket"] .bk-x{
  color:#2a2a2a;font-weight:700;
  border:1px solid rgba(0,0,0,.35);
  background:radial-gradient(circle at 34% 30%, #fff 0 3px, #d7dae2 6px, #9aa0ac 60%, #6b6f7a 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
}
html[data-bk-theme="jacket"] .bk-x:hover{
  background:radial-gradient(circle at 34% 30%, #fff 0 3px, #e6e9f0 6px, #aab0bc 60%, #777b86 100%);
}

/* ---- demo banner = typewritten tape ---- */
html[data-bk-theme="jacket"] .bk-demo{
  background:#101119;border-bottom:1px solid var(--bk-line);
  font-family:'Special Elite',monospace;color:var(--bk-dim);letter-spacing:.08em;
}
html[data-bk-theme="jacket"] .bk-demo b{color:var(--bk-thread);}

/* ---- step labels ---- */
html[data-bk-theme="jacket"] .bk-label{
  font-family:'Oswald',sans-serif;font-weight:600;
  letter-spacing:.18em;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-label .n{
  font-family:'Oswald',sans-serif;font-weight:700;color:var(--bk-fg);
  background:var(--bk-surface2);
  border:1px solid var(--bk-line);
}
html[data-bk-theme="jacket"] .bk-label.done .n{
  background:var(--bk-thread-dk);color:#fff;border-color:#8d1c20;
}

/* ---- service chips = dashed-stitch patches with a stud ---- */
html[data-bk-theme="jacket"] .bk-chip{
  background:var(--bk-surface);
  border:2px dashed rgba(160,150,140,.4);
  border-radius:5px;color:var(--bk-fg);
  position:relative;
}
html[data-bk-theme="jacket"] .bk-chip::after{
  content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 34% 30%, #fff 0 1px, #d7dae2 1.8px, #8a8f9a 70%, #5a5e68 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
html[data-bk-theme="jacket"] .bk-chip:hover{border-color:var(--bk-thread);}
html[data-bk-theme="jacket"] .bk-chip.sel{
  border:2px dashed var(--bk-thread);
  background:color-mix(in srgb, var(--bk-thread) 16%, var(--bk-surface));
}
html[data-bk-theme="jacket"] .bk-chip .nm{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--bk-fg);
}
html[data-bk-theme="jacket"] .bk-chip .pr{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-chip.sel .pr{color:var(--bk-fg);}

/* ---- calendar ---- */
html[data-bk-theme="jacket"] .bk-cal-month{
  font-family:'Pirata One',system-ui,serif;font-weight:400;
  font-size:20px;letter-spacing:.02em;color:var(--bk-fg);
}
html[data-bk-theme="jacket"] .bk-nav button{
  background:var(--bk-surface);border:1px solid var(--bk-line);
  color:var(--bk-fg);border-radius:4px;
}
html[data-bk-theme="jacket"] .bk-nav button:hover:not(:disabled){border-color:var(--bk-thread);}
html[data-bk-theme="jacket"] .bk-dow{
  font-family:'Special Elite',monospace;color:var(--bk-dim);letter-spacing:.12em;
}
html[data-bk-theme="jacket"] .bk-day{
  background:var(--bk-surface);border:1px solid transparent;border-radius:4px;
  color:var(--bk-fg);font-family:'Oswald',sans-serif;font-weight:600;
}
html[data-bk-theme="jacket"] .bk-day:hover:not(.off):not(.empty){
  border:1px dashed var(--bk-thread);
}
html[data-bk-theme="jacket"] .bk-day.off{color:var(--bk-dim);}
html[data-bk-theme="jacket"] .bk-day.today::after{background:var(--bk-thread);}
html[data-bk-theme="jacket"] .bk-day.sel{
  background:var(--bk-thread-dk);color:#fff;border-color:#8d1c20;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
html[data-bk-theme="jacket"] .bk-closed-note{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}

/* ---- time slots = small dashed patches ---- */
html[data-bk-theme="jacket"] .bk-slot{
  background:var(--bk-surface);
  border:2px dashed rgba(160,150,140,.4);
  border-radius:4px;color:var(--bk-fg);
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.04em;
}
html[data-bk-theme="jacket"] .bk-slot:hover:not(:disabled){border-color:var(--bk-thread);}
html[data-bk-theme="jacket"] .bk-slot.sel{
  background:var(--bk-thread-dk);color:#fff;
  border:2px solid #8d1c20;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
html[data-bk-theme="jacket"] .bk-slot:disabled{color:var(--bk-dim);}
html[data-bk-theme="jacket"] .bk-slot.brk{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
  border-style:dotted;
}
html[data-bk-theme="jacket"] .bk-hint{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}

/* ---- fields ---- */
html[data-bk-theme="jacket"] .bk-field label{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-field input,
html[data-bk-theme="jacket"] .bk-field textarea{
  background:#15161e;border:2px dashed rgba(160,150,140,.38);
  border-radius:5px;color:var(--bk-fg);font-family:'Oswald',sans-serif;
}
html[data-bk-theme="jacket"] .bk-field input:focus,
html[data-bk-theme="jacket"] .bk-field textarea:focus{
  border:2px solid var(--bk-thread);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bk-thread) 28%, transparent);
}
html[data-bk-theme="jacket"] .bk-field input::placeholder,
html[data-bk-theme="jacket"] .bk-field textarea::placeholder{color:#6e6a60;}

/* ---- footer / confirm = red embroidered back-patch button ---- */
html[data-bk-theme="jacket"] .bk-foot{
  background:linear-gradient(#15161e,#101119);
  border-top:2px solid var(--bk-thread-dk);
}
html[data-bk-theme="jacket"] .bk-summary{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-summary b{color:var(--bk-fg);font-weight:400;}
html[data-bk-theme="jacket"] .bk-confirm{
  position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    linear-gradient(#d83c3a, #c0282d);
  color:#fff;
  border:2px solid #8d1c20;
  border-radius:5px;
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
/* dashed embroidery edge inside the patch */
html[data-bk-theme="jacket"] .bk-confirm::after{
  content:"";position:absolute;inset:3px;pointer-events:none;border-radius:3px;
  border:1px dashed rgba(255,255,255,.45);
}
html[data-bk-theme="jacket"] .bk-confirm:hover:not(:disabled){filter:brightness(1.08);}

/* ---- success ---- */
html[data-bk-theme="jacket"] .bk-tick{
  background:color-mix(in srgb, var(--bk-ok) 22%, transparent);
  color:var(--bk-ok);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--bk-ok) 45%, transparent);
}
html[data-bk-theme="jacket"] .bk-success h3{
  font-family:'Pirata One',system-ui,serif;font-weight:400;
  font-size:30px;letter-spacing:.01em;color:var(--bk-fg);
}
html[data-bk-theme="jacket"] .bk-success p{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-recap{
  border:2px dashed rgba(160,150,140,.4);border-radius:6px;
  background:rgba(21,22,30,.6);
}
html[data-bk-theme="jacket"] .bk-recap div{border-bottom:1px dashed rgba(160,150,140,.28);}
html[data-bk-theme="jacket"] .bk-recap span:first-child{
  font-family:'Special Elite',monospace;color:var(--bk-dim);
}
html[data-bk-theme="jacket"] .bk-recap span:last-child{
  font-family:'Oswald',sans-serif;font-weight:600;color:var(--bk-fg);
}
html[data-bk-theme="jacket"] .bk-ref{
  font-family:'Special Elite',monospace;color:var(--bk-thread);letter-spacing:.06em;
}

/* ---- zine ---- */
/* ============================================================
   XEROX ZINE booking skin  (scoped: html[data-bk-theme="zine"])
   A photocopied, stapled paper sheet. Warm paper white, halftone
   dot screen, heavy black hairlines, taped header, ransom-note
   Anton/Archivo headers, Special Elite body, Caveat handwriting,
   hot-pink rubber-stamp confirm. LIGHT sheet: black-on-paper, AA.
   ============================================================ */

/* ---- token overrides (cascade from overlay + bar) ---- */
html[data-bk-theme="zine"] .bk-overlay,
html[data-bk-theme="zine"] .bk-bar{
  --bk-accent:#ff2e88;
  --bk-accent-ink:#0a0a0a;          /* black ink on pink reads ~6:1, AA for all sizes */
  --bk-bg:#efece3;                  /* recycled photocopy paper */
  --bk-surface:#f7f5ef;             /* lighter sheet panels */
  --bk-surface2:#e6e2d6;            /* pressed / toner-grey panels */
  --bk-line:#141210;               /* heavy black hairline ink */
  --bk-fg:#141210;                  /* near-black ink, ~14:1 on paper */
  --bk-dim:#4a463e;                 /* dark toner grey, ~7.4:1 on paper, AA */
  --bk-ok:#1f7a3d;                  /* stamped green, AA on paper */
  --bk-ease:cubic-bezier(.2,.85,.2,1);
}

/* ---- sticky book bar : torn paper strip ---- */
html[data-bk-theme="zine"] .bk-bar{
  background:#efece3;
  border-top:3px solid #141210;
  background-image:radial-gradient(circle at 1px 1px,rgba(20,18,16,.16) 1px,transparent 1.6px);
  background-size:5px 5px;
}
html[data-bk-theme="zine"] .bk-bar a,
html[data-bk-theme="zine"] .bk-bar button{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:0;
}
html[data-bk-theme="zine"] .bk-bar .bk-bar-dm{
  background:#f7f5ef;
  color:#141210;
  border:2.5px solid #141210;
}
html[data-bk-theme="zine"] .bk-bar .bk-bar-book{
  background:#ff2e88;
  color:#0a0a0a;
  border:2.5px solid #141210;
  box-shadow:4px 4px 0 #141210;
}

/* ---- overlay : darkroom ---- */
html[data-bk-theme="zine"] .bk-overlay{
  background:rgba(14,14,14,.8);
}

/* ---- the sheet : stapled photocopy paper ---- */
html[data-bk-theme="zine"] .bk-sheet{
  background:#efece3;
  color:#141210;
  font-family:'Special Elite',ui-monospace,monospace;
  border:3px solid #141210;
}
@media(min-width:600px){
  html[data-bk-theme="zine"] .bk-sheet{
    border-radius:0;
    border:3px solid #141210;
    box-shadow:14px 16px 0 rgba(20,18,16,.85),0 40px 90px rgba(0,0,0,.55);
  }
}
/* halftone dot screen + faint fibre, never blocks input */
html[data-bk-theme="zine"] .bk-sheet::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(20,18,16,.14) 1.05px,transparent 1.6px),
    repeating-linear-gradient(96deg,rgba(20,18,16,.04) 0 1px,transparent 1px 4px);
  background-size:5px 5px,100% 100%;
  mix-blend-mode:multiply;
}
/* keep real content above the toner screen */
html[data-bk-theme="zine"] .bk-head,
html[data-bk-theme="zine"] .bk-body,
html[data-bk-theme="zine"] .bk-foot,
html[data-bk-theme="zine"] .bk-demo,
html[data-bk-theme="zine"] .bk-success{position:relative;z-index:1}

/* ---- header : taped masthead ---- */
html[data-bk-theme="zine"] .bk-head{
  background:#f7f5ef;
  border-bottom:3px solid #141210;
}
/* strip of tape slapped across the header top */
html[data-bk-theme="zine"] .bk-head::before{
  content:"";position:absolute;top:-9px;left:24px;z-index:3;pointer-events:none;
  width:104px;height:24px;
  background:rgba(233,255,58,.9);
  border-left:1px dashed rgba(20,18,16,.25);
  border-right:1px dashed rgba(20,18,16,.25);
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  transform:rotate(-3deg);
}
html[data-bk-theme="zine"] .bk-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:23px;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-title small{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:16px;
  letter-spacing:.01em;
  text-transform:none;
  color:#d11d6f;                    /* darker pink, ~4.7:1 on paper, AA */
  margin-top:1px;
}
html[data-bk-theme="zine"] .bk-x{
  width:40px;height:40px;
  border-radius:0;
  border:2.5px solid #141210;
  background:#efece3;
  color:#141210;
  font-family:'Archivo Black',sans-serif;
}
html[data-bk-theme="zine"] .bk-x:hover{
  background:#ff2e88;
  color:#0a0a0a;
}

/* ---- demo banner : photocopier slip ---- */
html[data-bk-theme="zine"] .bk-demo{
  background:#e6e2d6;
  color:#3b372f;
  border-bottom:2px dashed #141210;
  font-family:'Special Elite',monospace;
  letter-spacing:.02em;
}
html[data-bk-theme="zine"] .bk-demo b{color:#d11d6f}

/* ---- step labels : numbered ransom tabs ---- */
html[data-bk-theme="zine"] .bk-label{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-label .n{
  border-radius:0;
  width:24px;height:24px;
  background:#141210;
  color:#f4f1e8;
  font-family:'Archivo Black',sans-serif;
  font-weight:400;
  border:2px solid #141210;
}
html[data-bk-theme="zine"] .bk-label.done .n{
  background:#ff2e88;
  color:#0a0a0a;
  border-color:#141210;
}

/* ---- service chips : stamped cards ---- */
html[data-bk-theme="zine"] .bk-chip{
  border:2.5px solid #141210;
  background:#f7f5ef;
  border-radius:0;
  color:#141210;
  box-shadow:3px 3px 0 rgba(20,18,16,.9);
}
html[data-bk-theme="zine"] .bk-chip:hover{
  border-color:#141210;
  background:#fff;
  box-shadow:4px 4px 0 #ff2e88;
}
html[data-bk-theme="zine"] .bk-chip.sel{
  border-color:#141210;
  background:#ffd9e8;               /* pale pink wash, black ink ~11:1 */
  box-shadow:3px 3px 0 #d11d6f;
}
html[data-bk-theme="zine"] .bk-chip .nm{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  font-size:14px;
  letter-spacing:.01em;
}
html[data-bk-theme="zine"] .bk-chip .pr{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:16px;
  color:#4a463e;
  margin-top:1px;
}
html[data-bk-theme="zine"] .bk-chip.sel .pr{color:#141210}

/* ---- calendar ---- */
html[data-bk-theme="zine"] .bk-cal-month{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-nav button{
  border-radius:0;
  border:2.5px solid #141210;
  background:#f7f5ef;
  color:#141210;
  font-family:'Archivo Black',sans-serif;
}
html[data-bk-theme="zine"] .bk-nav button:hover:not(:disabled){
  background:#ff2e88;
  color:#0a0a0a;
  border-color:#141210;
}
html[data-bk-theme="zine"] .bk-dow{
  font-family:'Special Elite',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4a463e;
}
html[data-bk-theme="zine"] .bk-day{
  border-radius:0;
  border:1.5px solid #cdc8ba;
  background:#f7f5ef;
  color:#141210;
  font-family:'Special Elite',monospace;
  font-weight:400;
  font-size:14px;
}
html[data-bk-theme="zine"] .bk-day:hover:not(.off):not(.empty){
  border-color:#141210;
  background:#fff;
}
html[data-bk-theme="zine"] .bk-day.empty{
  background:transparent;
  border-color:transparent;
}
html[data-bk-theme="zine"] .bk-day.off{
  color:#7a7468;
  background:transparent;
  border-color:transparent;
}
html[data-bk-theme="zine"] .bk-day.today{
  border-color:#141210;
}
html[data-bk-theme="zine"] .bk-day.today::after{
  background:#d11d6f;
}
html[data-bk-theme="zine"] .bk-day.sel{
  background:#ff2e88;
  color:#0a0a0a;                    /* black on pink, AA at any size */
  border-color:#141210;
  font-weight:400;
  box-shadow:inset 0 0 0 2px #141210;
}

html[data-bk-theme="zine"] .bk-closed-note{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:15px;
  color:#4a463e;
}

/* ---- time slots ---- */
html[data-bk-theme="zine"] .bk-slot{
  border:2px solid #141210;
  background:#f7f5ef;
  color:#141210;
  border-radius:0;
  font-family:'Special Elite',monospace;
  font-weight:400;
  letter-spacing:.01em;
}
html[data-bk-theme="zine"] .bk-slot:hover:not(:disabled){
  border-color:#141210;
  background:#fff;
  box-shadow:2px 2px 0 #ff2e88;
}
html[data-bk-theme="zine"] .bk-slot.sel{
  background:#ff2e88;
  color:#0a0a0a;
  border-color:#141210;
  box-shadow:inset 0 0 0 2px #141210;
}
html[data-bk-theme="zine"] .bk-slot:disabled{
  border-color:#cdc8ba;
  color:#7a7468;
}
html[data-bk-theme="zine"] .bk-slot.brk{
  border:2px dashed #b8b2a4;
  color:#5a554b;
  font-family:'Special Elite',monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
}
html[data-bk-theme="zine"] .bk-hint{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:16px;
  color:#4a463e;
}

/* ---- fields : carbon-copy form blanks ---- */
html[data-bk-theme="zine"] .bk-field label{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-field input,
html[data-bk-theme="zine"] .bk-field textarea{
  background:#fbfaf5;
  border:2px solid #141210;
  border-radius:0;
  color:#141210;
  font-family:'Special Elite',monospace;
  font-size:15px;
}
html[data-bk-theme="zine"] .bk-field input:focus,
html[data-bk-theme="zine"] .bk-field textarea:focus{
  border-color:#d11d6f;
  box-shadow:3px 3px 0 #ff2e88;
}
html[data-bk-theme="zine"] .bk-field input::placeholder,
html[data-bk-theme="zine"] .bk-field textarea::placeholder{
  color:#8a8475;
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:17px;
}

/* ---- footer + confirm ---- */
html[data-bk-theme="zine"] .bk-foot{
  background:#f7f5ef;
  border-top:3px solid #141210;
}
html[data-bk-theme="zine"] .bk-summary{
  font-family:'Special Elite',monospace;
  font-size:12px;
  color:#4a463e;
}
html[data-bk-theme="zine"] .bk-summary b{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  color:#141210;
}
/* the rubber-stamp confirm : hot pink, heavy black edge, pressed slam */
html[data-bk-theme="zine"] .bk-confirm{
  background:#ff2e88;
  color:#0a0a0a;                    /* black on pink ~6:1, AA */
  border:2.5px solid #141210;
  border-radius:0;
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:5px 5px 0 #141210;
}
html[data-bk-theme="zine"] .bk-confirm:hover:not(:disabled){
  filter:none;
  background:#ff4f9b;
  box-shadow:6px 6px 0 #141210;
}
html[data-bk-theme="zine"] .bk-confirm:active:not(:disabled){
  box-shadow:0 0 0 #141210;
}
html[data-bk-theme="zine"] .bk-confirm:disabled{
  background:#e6e2d6;
  color:#7a7468;
  border-color:#b8b2a4;
  box-shadow:none;
}

/* ---- success : stamped APPROVED slip ---- */
html[data-bk-theme="zine"] .bk-tick{
  border-radius:0;
  background:#dff0e2;
  border:2.5px solid #1f7a3d;
  color:#1f7a3d;
  transform:rotate(-4deg);
}
html[data-bk-theme="zine"] .bk-success h3{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:30px;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-success p{
  font-family:'Special Elite',monospace;
  color:#4a463e;
}
html[data-bk-theme="zine"] .bk-recap{
  border:2.5px solid #141210;
  border-radius:0;
  background:#f7f5ef;
  box-shadow:4px 4px 0 rgba(20,18,16,.9);
}
html[data-bk-theme="zine"] .bk-recap div{
  border-bottom:1.5px dashed #141210;
  font-family:'Special Elite',monospace;
}
html[data-bk-theme="zine"] .bk-recap span:first-child{color:#4a463e}
html[data-bk-theme="zine"] .bk-recap span:last-child{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  color:#141210;
}
html[data-bk-theme="zine"] .bk-ref{
  font-family:'Archivo Black','Special Elite',monospace;
  font-weight:400;
  letter-spacing:.04em;
  color:#d11d6f;                    /* darker pink, AA on paper */
}

/* ============================================================
   Reference photos (optional) - added with the email rework.
   Themed via the same --bk-* tokens, so every concept skin
   picks it up automatically.
   ============================================================ */
.bk-refs{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;padding:0!important;margin:0!important;border:0!important;left:0;top:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bk-refs-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;
  border:1px dashed var(--bk-line);background:var(--bk-surface);color:var(--bk-fg);
  border-radius:10px;padding:10px 16px;font-size:13px;letter-spacing:.02em;
  transition:border-color .2s,background .2s}
.bk-refs-btn:hover{border-color:var(--bk-accent)}
.bk-refs:focus-visible + .bk-refs-btn{border-color:var(--bk-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-accent) 25%,transparent)}
.bk-refs-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bk-refs-grid:empty{margin-top:0}
.bk-ref-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--bk-line);background:var(--bk-surface2)}
.bk-ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bk-ref-rm{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(8,8,10,.78);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center;padding:0}
.bk-ref-rm:hover{background:var(--bk-accent);color:var(--bk-accent-ink)}
.bk-refs-note{margin-top:8px;font-size:11px;color:var(--bk-dim);letter-spacing:.02em;line-height:1.5}