/* SCB CRAF Tap List - board styles v1.8.1. Scoped under .scb-taps. Pure ASCII.
 * Solari split-flap board. Flap tiles carry the name, style, ABV, status,
 * clock, board title and the updated time.
 * v1.7.0 adds the initial-load skeleton (see the "Skeleton loading" block at
 * the end of this file). The skeleton is purely presentational and shares no
 * class names with the live flap tiles. */

@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/BarlowCondensed-Bold.woff2') format('woff2');
}

.scb-taps{
  --c-lilac:#9d4a96; --c-melon:#e8335e; --c-emerald-dk:#3f9579; --c-amber-dk:#d6901c;
  --brd-bg:#0a0a0c; --brd-line:#1e1f27; --brd-amber:#ffc23a; --brd-green:#43d17a;
  --brd-aqua:#4bb3e0; --brd-grey:#9aa1b2; --brd-cream:#efe7d2;
  font-family:Arial, Helvetica, sans-serif; color:#cdd0dc;
  max-width:1000px; margin:0 auto; line-height:1.5;
}
.scb-taps *{ box-sizing:border-box; }

/* Board shell */
.scb-taps__board{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.04), rgba(0,0,0,0) 60%),
    var(--brd-bg);
  border:1px solid #000; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.4), inset 0 0 0 3px #131319, inset 0 0 0 4px #26262e;
}

/* Festival banner */
.scb-taps__banner{ line-height:0; background:#0a0a0c; border-bottom:1px solid var(--brd-line); }
.scb-taps__banner img{ display:block; width:100%; height:auto; }

/* Masthead */
.scb-taps__masthead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:linear-gradient(#15161d,#0d0d12); color:#fff; padding:14px 20px; border-bottom:1px solid var(--brd-line);
}
.scb-taps__masthead-title{ display:inline-flex; flex-wrap:wrap; }
.scb-taps__masthead-sub{ display:block; font-size:.78rem; color:#8b90a6; margin-top:6px; letter-spacing:.02em; }
.scb-taps__masthead-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.scb-taps__meta{ display:flex; align-items:center; gap:8px; }
.scb-taps__updated-label{ color:#8b90a6; font-size:.72rem; font-family:"Courier New", monospace; text-transform:uppercase; letter-spacing:.05em; }
.scb-taps__refresh{
  appearance:none; cursor:pointer; border:1px solid #33384a; background:#171827; color:var(--brd-amber);
  font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  padding:5px 11px; border-radius:6px; transition:background .15s, border-color .15s, opacity .15s;
}
.scb-taps__refresh:hover{ border-color:var(--brd-amber); }
.scb-taps__refresh.is-busy{ opacity:.5; cursor:default; }

/* Split-flap tiles (shared) */
.scb-flap{ display:inline-flex; flex-wrap:wrap; column-gap:7px; row-gap:3px; align-items:center; vertical-align:middle; }
.scb-flap__word{ display:inline-flex; gap:2px; }
.scb-flap__tile{
  display:inline-block; min-width:.66em; padding:2px 3px; text-align:center;
  font-family:'Barlow Condensed', Arial, Helvetica, sans-serif; font-weight:700;
  color:var(--brd-cream); background:linear-gradient(#31323a 0%, #26272e 49%, #191a1f 51%, #101116 100%);
  border-radius:3px; position:relative; line-height:1.1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.55);
}
.scb-flap__tile::after{ /* mechanical seam */
  content:""; position:absolute; left:2px; right:2px; top:50%;
  border-top:1px solid rgba(0,0,0,.7); box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.scb-flap__tile.is-cycling{ animation:scb-flap-roll 120ms linear infinite; transform-origin:50% 50%; }
@keyframes scb-flap-roll{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.58); } }
@media (prefers-reduced-motion:reduce){ .scb-flap__tile.is-cycling{ animation:none; } }

/* Per-context tile sizing / colour */
.scb-taps__masthead-title .scb-flap__tile{ font-size:1.02rem; color:var(--brd-amber); letter-spacing:.02em; }
.scb-taps__clock .scb-flap__tile{ font-size:1.3rem; min-width:.72em; padding:4px 5px; color:var(--brd-amber); }
.scb-taps__updated .scb-flap__tile{ font-size:.74rem; min-width:.62em; padding:1px 2px; color:#8b90a6; }
.scb-taps__brewery .scb-flap__tile{ font-size:.94rem; color:var(--brd-amber); }
.scb-taps__beer .scb-flap__tile{ font-size:1.06rem; color:var(--brd-cream); }
.scb-taps__style .scb-flap__tile{ font-size:.78rem; min-width:.62em; padding:1px 2px; color:#8b90a6; }
.scb-taps__abv .scb-flap__tile{ font-size:1rem; color:var(--brd-cream); }
.scb-taps__status .scb-flap__tile{ font-size:.82rem; min-width:.7em; padding:2px 2px; }

/* Filters */
.scb-taps__filters{ background:#0f1017; padding:14px 18px; border-bottom:1px solid var(--brd-line); }
.scb-taps__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.scb-taps__chip{
  appearance:none; cursor:pointer; border:1px solid #2c2f3d; background:#15161f; color:#cfd3e6;
  font-weight:700; font-size:.86rem; padding:8px 16px; border-radius:6px; transition:background .15s, border-color .15s, color .15s;
}
.scb-taps__chip:hover{ border-color:var(--brd-amber); }
.scb-taps__chip.is-active{ background:var(--brd-amber); border-color:var(--brd-amber); color:#1c1400; }
.scb-taps__selects{ display:flex; flex-wrap:wrap; gap:12px; }
.scb-taps__field{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:150px; }
.scb-taps__field span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:#7d8299; font-weight:700; }
.scb-taps__field select, .scb-taps__field input{
  appearance:none; background:#15161f; border:1px solid #2c2f3d; color:#eef0fa; border-radius:6px;
  padding:10px 11px; font-size:.95rem; font-family:inherit; width:100%;
}
.scb-taps__field select:focus, .scb-taps__field input:focus{ outline:2px solid var(--brd-amber); outline-offset:1px; }

/* Column header */
.scb-taps__head{
  display:grid; grid-template-columns:104px 1fr 90px 208px; gap:12px; align-items:center;
  padding:10px 20px; background:#0d0e14; color:#7d8299; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.09em; font-weight:700; border-bottom:1px solid var(--brd-line);
}
.scb-taps__col-abv{ text-align:right; }
.scb-taps__col-status{ text-align:left; }

/* Rows */
.scb-taps__rows{ padding:2px 0; }
.scb-taps__row{
  display:grid; grid-template-columns:104px 1fr 90px 208px; gap:12px; align-items:center;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05);
}
.scb-taps__row:last-child{ border-bottom:none; }

.scb-taps__bar{
  display:inline-block; text-align:center; font-family:Arial, Helvetica, sans-serif;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; padding:6px 0; border-radius:5px; width:100%; align-self:start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5);
}
.scb-taps__bar--Cask{ background:var(--c-lilac); }
.scb-taps__bar--Keg{ background:var(--c-melon); }
.scb-taps__bar--Cider{ background:var(--c-emerald-dk); }
.scb-taps__bar--Bottle{ background:var(--c-amber-dk); }

.scb-taps__svc{ min-width:0; display:flex; flex-direction:column; gap:5px; align-items:stretch; }
/* Name flaps fill the column so words wrap within it (never mid-word). */
.scb-taps__brewery, .scb-taps__beer, .scb-taps__style, .scb-taps__abv{ display:flex; }
.scb-taps__tags{ align-self:flex-start; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.scb-taps__perry{
  display:inline-block; font-family:Arial, Helvetica, sans-serif;
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:#2a2100; background:var(--brd-amber); border:1px solid #e0a512;
  border-radius:4px; padding:2px 9px;
}
.scb-taps__gf, .scb-taps__vegan, .scb-taps__lactose, .scb-taps__sulphites{
  display:inline-block; font-family:Arial, Helvetica, sans-serif;
  font-size:.58rem; font-weight:800; letter-spacing:.04em; line-height:1.35;
  border-radius:4px; padding:1px 6px;
}
.scb-taps__gf{ color:#fff; background:#5b6fb3; border:1px solid #45589a; }
.scb-taps__vegan{ color:#06301f; background:#5ec39a; border:1px solid #3f9e7a; }
.scb-taps__lactose{ color:#2a2100; background:#f9b13c; border:1px solid #e0871a; }
.scb-taps__sulphites{ color:#fff; background:#e8335e; border:1px solid #c81f47; }
.scb-taps__abv{ justify-content:flex-end; }

/* Allergen Information panel (static, foot of the board) */
.scb-taps__allergen{
  border-top:1px solid var(--brd-line);
  padding:16px 18px 18px;
  background:#0d0d10;
}
.scb-taps__allergen-title{
  margin:0 0 10px; font-family:Arial, Helvetica, sans-serif;
  font-size:1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brd-cream);
}
.scb-taps__note{
  margin:0 0 12px; padding:12px 14px;
  background:#fef7ea; color:#2a2100;
  border-left:5px solid #f9b13c; border-radius:4px;
  font-size:.95rem; font-weight:700; line-height:1.5;
}
.scb-taps__legend{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.scb-taps__legend li{
  display:flex; align-items:center; gap:8px;
  font-size:.9rem; color:#cdd0dc;
}
.scb-taps__allergen-foot{
  margin:0; font-size:.85rem; color:var(--brd-grey);
}

/* Status = split-flap word + optional departed time */
.scb-taps__status{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.scb-taps__deptime{ color:#8b90a6; font-family:"Courier New", monospace; font-size:.92rem; font-weight:700; font-variant-numeric:tabular-nums; }
.scb-taps__status--on   .scb-flap__tile{ color:var(--brd-green); }
.scb-taps__status--soon .scb-flap__tile{ color:var(--brd-aqua); }
.scb-taps__status--low  .scb-flap__tile{ color:var(--brd-amber); }
.scb-taps__status--off  .scb-flap__tile{ color:var(--brd-grey); }
.scb-taps__status--low  .scb-taps__flap{ animation:scb-taps-blink 1.15s steps(1) infinite; }
@keyframes scb-taps-blink{ 50%{ opacity:.32; } }
@media (prefers-reduced-motion:reduce){ .scb-taps__status--low .scb-taps__flap{ animation:none; } }

.scb-taps__empty{ color:#8b90a6; text-align:center; padding:26px 20px; margin:0; font-size:.95rem; }

/* Departed */
.scb-taps__departed{ border-top:1px solid var(--brd-line); background:#08080b; }
.scb-taps__departed-toggle{
  appearance:none; cursor:pointer; width:100%; text-align:left; background:transparent; border:none;
  color:#a6abc2; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  padding:12px 20px; display:flex; align-items:center; gap:10px;
}
.scb-taps__departed-dot{ width:10px; height:10px; border-radius:50%; background:var(--brd-grey); box-shadow:0 0 0 3px rgba(154,161,178,.2); flex-shrink:0; }
.scb-taps__row.is-departed{ opacity:.6; }
.scb-taps__row.is-departed .scb-taps__beer .scb-flap__tile,
.scb-taps__row.is-departed .scb-taps__brewery .scb-flap__tile{ color:#b0b4c6; }

/* Ticker */
.scb-taps__ticker{ display:flex; align-items:stretch; background:#08080b; border-top:1px solid var(--brd-line); overflow:hidden; }
.scb-taps__ticker-label{
  flex-shrink:0; background:var(--c-melon); color:#fff; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; padding:0 14px;
}
.scb-taps__ticker-track{ position:relative; overflow:hidden; flex:1; }
.scb-taps__ticker-move{
  display:inline-block; white-space:nowrap; padding:9px 0; color:var(--brd-amber);
  font-family:"Courier New", ui-monospace, Consolas, monospace; font-size:.9rem;
  will-change:transform; animation:scb-taps-marquee 26s linear infinite;
}
.scb-taps__ticker:hover .scb-taps__ticker-move{ animation-play-state:paused; }
@keyframes scb-taps-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .scb-taps__ticker-move{ animation:none; } }

/* Mobile */
@media (max-width:640px){
  .scb-taps__board{ border-radius:0; }
  .scb-taps__head{ display:none; }
  .scb-taps__row{
    grid-template-columns:74px auto 1fr;
    grid-template-areas:"bar svc svc" "bar abv status";
    row-gap:8px; padding:14px 16px; align-items:center;
  }
  .scb-taps__bar{ grid-area:bar; font-size:.82rem; }
  .scb-taps__svc{ grid-area:svc; }
  .scb-taps__beer .scb-flap__tile{ font-size:1.05rem; }
  .scb-taps__brewery .scb-flap__tile{ font-size:.94rem; }
  .scb-taps__abv{ grid-area:abv; justify-content:flex-start; margin-right:12px; }
  .scb-taps__status{ grid-area:status; }
  .scb-taps__masthead-right{ align-items:flex-start; }
}

/* ------------------------------------------------------------------ */
/* Skeleton loading (initial load only)                               */
/* Presentational only. No shared class names with the flap engine so */
/* teardown can never collide with a pending tile timer.              */
/* ------------------------------------------------------------------ */
.scb-taps__list{ position:relative; }
/* Reserve height while the placeholder rows are showing so nothing on the
   board jumps when the real rows land. Sized just above the 6-row skeleton so
   the board's overflow:hidden never clips the last placeholder. Cleared by JS
   on first data (is-loading removed), after which the real rows set height. */
.scb-taps__list.is-loading{ min-height:520px; }

.scb-taps__skeleton{
  position:absolute; top:0; left:0; right:0;
  background:var(--brd-bg);
  opacity:1; transition:opacity .35s ease;
}
/* JS adds is-hiding on first data; the node is removed after the fade. */
.scb-taps__skeleton.is-hiding{ opacity:0; pointer-events:none; }

/* One placeholder row - same grid as .scb-taps__row so columns line up. */
.scb-taps__skrow{
  display:grid; grid-template-columns:104px 1fr 90px 208px; gap:12px; align-items:center;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05);
}
.scb-taps__skrow:last-child{ border-bottom:none; }
.scb-taps__sk-svc{ min-width:0; display:flex; flex-direction:column; gap:8px; align-items:stretch; }

/* Shimmer bars. Base/highlight tuned to sit on the black board. */
.scb-taps__sk{
  display:block; border-radius:5px; background:#191a1f;
  background-image:linear-gradient(100deg, #191a1f 30%, #2c2e38 48%, #191a1f 66%);
  background-size:220% 100%; background-repeat:no-repeat;
  animation:scb-taps-shimmer 1.5s linear infinite;
}
.scb-taps__sk--bar{ align-self:start; width:100%; height:30px; }
.scb-taps__sk--brewery{ height:12px; width:42%; }
.scb-taps__sk--beer{ height:17px; width:78%; }
.scb-taps__sk--style{ height:11px; width:30%; }
.scb-taps__sk--abv{ justify-self:end; width:52px; height:16px; }
.scb-taps__sk--status{ width:130px; height:22px; border-radius:11px; }

/* Slight width variation row-to-row so it reads as real content. */
.scb-taps__skrow:nth-child(2n) .scb-taps__sk--beer{ width:64%; }
.scb-taps__skrow:nth-child(3n) .scb-taps__sk--beer{ width:88%; }
.scb-taps__skrow:nth-child(2n) .scb-taps__sk--brewery{ width:52%; }
.scb-taps__skrow:nth-child(3n) .scb-taps__sk--style{ width:24%; }
.scb-taps__skrow:nth-child(4n) .scb-taps__sk--status{ width:150px; }

@keyframes scb-taps-shimmer{
  0%{ background-position:180% 0; }
  100%{ background-position:-80% 0; }
}

/* Reduced motion: no shimmer, flat muted fill. */
@media (prefers-reduced-motion:reduce){
  .scb-taps__sk{ animation:none; background-image:none; background:#20222b; }
  .scb-taps__skeleton{ transition:none; }
}

/* Mobile: mirror the real row's stacked layout so alignment matches. */
@media (max-width:640px){
  .scb-taps__list.is-loading{ min-height:710px; }
  .scb-taps__skrow{
    grid-template-columns:74px auto 1fr;
    grid-template-areas:"bar svc svc" "bar abv status";
    row-gap:10px; padding:14px 16px;
  }
  .scb-taps__sk--bar{ grid-area:bar; height:34px; }
  .scb-taps__sk-svc{ grid-area:svc; }
  .scb-taps__sk--abv{ grid-area:abv; justify-self:start; width:46px; }
  .scb-taps__sk--status{ grid-area:status; width:120px; }
}