/* ═══════════════════════════════════════════════════════════════════════════
   SHORTLIST CONTROLS (phase 5): the one shared control language of the Shortlist
   pages, the listing and guide v2. Style handle 'hm-sl-controls' (registered in
   inc/shortlist/meta.php); every Shortlist sheet depends on it and none copies it.

   Source: C:/temp/dir-revamp/mockups3/sl-controls.final.css, the block that sits
   byte-identical in all 24 round 6 boards (SITE-CONTROLS.md A-F: Londonly's live
   control language, curved). Two changes only, both from the phase 5 contract:
     1. every token is renamed --sl-<name> (--ink -> --sl-ink, --r-pill ->
        --sl-r-pill, --f-kick -> --sl-f-kick, --ring -> --sl-ring ...), so nothing
        here can collide with a parent or child token;
     2. the tokens are DEFAULTED to the parent's own tokens, on :where(:root),
        which weighs nothing: a child's plain `:root{ --sl-ink: ... }` wins
        whatever order the sheets load in. Londonly's values live in
        hey-child-londonly/style.css; another child that sets none still renders
        in its own colours and type.
   The class names are EXACTLY the block's (.sl-btn, .sl-btn-2, .is-icon,
   .sl-input, .sl-search, .on-panel, .sl-chip, .is-on, .sl-dot, .sl-pill,
   .sl-count, .is-hl, .sl-badge, .sl-label, .sl-select-wrap, .sl-select, .is-pill,
   .sl-img, .sl-band). No existing class is restyled here.

   Yellow (--sl-hl) is a FILL with ink text, never text on cream; dark amber
   (--sl-hl-2) is for kickers, rules, outlined labels, small links and the Open
   now chip's outline. Pictures take --sl-r-img (12px).
   ═══════════════════════════════════════════════════════════════════════════ */

:where(:root){
  --sl-cream:var(--white, #FAFAF8); --sl-panel:var(--grey-bg, #EEF1EC); --sl-ink:var(--black, #15221B);
  --sl-ink-2:var(--grey-text, #5F6B62); --sl-line:var(--grey-mid, #D9DED7);
  --sl-brand:var(--green, #1B7A50); --sl-bark:var(--black, #16311F); --sl-bronze:#A9885A;
  --sl-hl:#FFC21A; --sl-hl-ink:var(--black, #15221B); --sl-hl-2:#7A5200;
  --sl-f-serif:var(--font-serif, 'Fraunces', Georgia, serif);
  --sl-f-body:var(--font-body, 'DM Sans', sans-serif);
  --sl-f-kick:var(--font-display, 'Bebas Neue', sans-serif);
  --sl-r-pill:100px;   /* chips, tags, badges, counts, standalone buttons (P:227, P:1040) */
  --sl-r-field:12px;   /* search / email field shell (P:313, N:120) */
  --sl-r-ctl:10px;     /* selects (P:1435; E:686 is 9px) */
  --sl-r-nest:8px;     /* a button nested inside a field (N:150) */
  --sl-r-img:12px; --sl-r-card:14px; --sl-r-band:16px; --sl-r-panel:18px;
  --sl-ring:0 0 0 3px color-mix(in srgb,var(--sl-brand) 8%,transparent);   /* P:319 */
}
.sl-btn,.sl-btn-2,.sl-chip,.sl-pill,.sl-badge,.sl-label,.sl-count{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; box-sizing:border-box; text-decoration:none;
}
:is(.sl-btn,.sl-btn-2,.sl-chip,.sl-pill,.sl-select,.sl-search button):focus-visible{
  outline:2px solid var(--sl-ink); outline-offset:3px;                   /* P:1113 */
}
/* Primary: the header Subscribe pill (P:223-230, C:249-250, C:329-332) */
.sl-btn{
  height:38px; padding:0 18px; border:0; border-radius:var(--sl-r-pill); cursor:pointer;
  background:var(--sl-brand); color:#fff;
  font:400 16px/1 var(--sl-f-kick); letter-spacing:.08em; text-transform:uppercase;
  transition:background .14s, transform .1s;
}
.sl-btn:hover{ background:var(--sl-bark); color:#fff; transform:translateY(-1px); }
/* Secondary: the header Trending pill, outlined (P:209-217, C:324-327) */
.sl-btn-2{
  height:38px; padding:0 16px; border-radius:var(--sl-r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--sl-line); color:var(--sl-ink-2);
  font:500 13px/1 var(--sl-f-body);
  transition:background .14s, color .14s, border-color .14s;
}
.sl-btn-2:hover{ background:var(--sl-ink); border-color:var(--sl-ink); color:#fff; }
.sl-btn-2.is-icon{ width:38px; padding:0; }   /* an icon-only round button */
/* Text field: the search overlay field (P:311-327) */
.sl-input{
  width:100%; height:46px; padding:0 16px; box-sizing:border-box; outline:none;
  background:var(--sl-panel); border:1.5px solid transparent; border-radius:var(--sl-r-field);
  font:400 15px/1.2 var(--sl-f-body); color:var(--sl-ink);
  transition:border-color .15s, background .15s;
}
.sl-input::placeholder{ color:var(--sl-ink-2); }
.sl-input:focus{ background:var(--sl-cream); border-color:var(--sl-brand); box-shadow:var(--sl-ring); }
/* Search: field and button as ONE piece = the newsletter shell (N:115-162) in the search colours (P:311-320) */
.sl-search{
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  height:52px; padding:5px 5px 5px 16px;
  background:var(--sl-panel); border:1.5px solid transparent; border-radius:var(--sl-r-field);
  transition:border-color .15s, background .15s;
}
.sl-search:focus-within{ background:var(--sl-cream); border-color:var(--sl-brand); box-shadow:var(--sl-ring); }
.sl-search svg{ flex:none; width:18px; height:18px; color:var(--sl-ink-2); }
.sl-search input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:400 16px/1.2 var(--sl-f-body); color:var(--sl-ink);
}
.sl-search input::placeholder{ color:var(--sl-ink-2); }
.sl-search button{
  flex:none; height:100%; padding:0 18px; border:0; border-radius:var(--sl-r-nest); cursor:pointer;
  background:var(--sl-brand); color:#fff;
  font:400 16px/1 var(--sl-f-kick); letter-spacing:.08em; text-transform:uppercase;
  transition:background .14s;
}
.sl-search button:hover{ background:var(--sl-bark); color:#fff; }
/* Toggle chip, e.g. "Open now": the Trending pill and its live dot (P:209-222, C:324-327) */
.sl-chip{
  height:34px; padding:0 13px; border-radius:var(--sl-r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--sl-hl-2); color:var(--sl-ink);   /* off: amber outline, ink text (BRIEF-R6 2) */
  font:500 13px/1 var(--sl-f-body);
  transition:background .14s, color .14s, border-color .14s;
}
.sl-chip .sl-dot{ width:6px; height:6px; border-radius:50%; background:var(--sl-brand); }
.sl-chip:hover{ border-color:var(--sl-ink); }
.sl-chip.is-on{ background:var(--sl-hl); border-color:var(--sl-hl); color:var(--sl-hl-ink); }   /* on: the Shortlist yellow fill, ink text */
.sl-chip.is-on .sl-dot{ background:var(--sl-brand); }                                    /* the dot stays green */
/* Type / filter pill: the hood pill + the article-tag hover (E:1478, P:1704-1710) */
.sl-pill{
  height:34px; padding:0 14px; border-radius:var(--sl-r-pill); cursor:pointer;
  background:var(--sl-cream); border:1px solid var(--sl-line); color:var(--sl-ink);
  font:600 12.5px/1 var(--sl-f-body);
  transition:background .13s, color .13s, border-color .13s;
}
.sl-pill:hover{ border-color:var(--sl-brand); color:var(--sl-brand); }
.sl-pill.is-on{ background:var(--sl-hl); border-color:var(--sl-hl); color:var(--sl-hl-ink); }   /* the active pill is yellow, ink text (BRIEF-R6 1) */
/* Count: the search-tab count bubble (P:406-410) */
.sl-count{
  min-width:18px; height:18px; padding:0 7px; border-radius:var(--sl-r-pill);
  background:var(--sl-panel); color:var(--sl-ink-2); font:700 10.5px/1 var(--sl-f-body);
}
.is-on .sl-count{ background:var(--sl-ink); color:#fff; }
.sl-count.is-hl{ background:var(--sl-hl); color:var(--sl-hl-ink); }   /* the count tag's yellow number block */
/* Shortlisted badge: the FILLED half of the card chip pair (P:1038-1046, C:561-566) */
.sl-badge{
  padding:2px 10px; border-radius:var(--sl-r-pill);
  background:var(--sl-hl); color:var(--sl-hl-ink);
  font:400 13.5px/1.2 var(--sl-f-kick); letter-spacing:.1em; text-transform:uppercase;
}
/* Outlined label: the OUTLINE half (P:1055-1063). 1px less padding, so it matches the badge's height (P:1047-1054) */
.sl-label{
  padding:1px 9px; border-radius:var(--sl-r-pill);
  background:var(--sl-cream); border:1px solid var(--sl-hl-2); color:var(--sl-hl-2);
  font:400 13.5px/1.2 var(--sl-f-kick); letter-spacing:.1em; text-transform:uppercase;
}
/* Select: the events category select (E:682-692), chevron as in P:2724 */
.sl-select-wrap{ position:relative; display:inline-block; }
.sl-select-wrap::after{ content:''; position:absolute; right:14px; top:50%; width:7px; height:7px; pointer-events:none;
  border-right:1.5px solid var(--sl-ink-2); border-bottom:1.5px solid var(--sl-ink-2); transform:translateY(-70%) rotate(45deg); }
.sl-select{
  -webkit-appearance:none; appearance:none; height:38px; padding:0 34px 0 12px; cursor:pointer; outline:none;
  background:var(--sl-cream);   /* the chevron is drawn by .sl-select-wrap::after */
  border:1.5px solid var(--sl-line); border-radius:var(--sl-r-ctl);
  font:600 13px/1 var(--sl-f-body); color:var(--sl-ink);
}
.sl-select:hover{ border-color:var(--sl-ink-2); }
.sl-select:focus{ border-color:var(--sl-brand); box-shadow:var(--sl-ring); }
.sl-select.is-pill{ border-radius:var(--sl-r-pill); padding-left:14px; }   /* only when it sits inside a row of pills */
/* Pictures and boxes */
.sl-img{ border-radius:var(--sl-r-img); overflow:hidden; }                 /* C:242-246 */
.sl-band{ border-radius:var(--sl-r-band); }                                /* N:28, P:1187 */
/* Round 6 additions (designer B's read) */
.sl-search.on-panel{ background:var(--sl-cream); }                      /* a search or email field that sits on a --sl-panel band */
.sl-search.on-panel:focus-within{ background:#fff; }
a.sl-badge:hover{ color:var(--sl-hl-ink); } a.sl-label:hover{ color:var(--sl-hl-2); }   /* a board's link hover never recolours a badge or label */

/* ── Phase 5 additions (not in the board block) ─────────────────────────────── */
/* The Open now chip's filter (assets/js/dir-hours.js) marks a dropped item with
   data-hours-out and never touches `hidden`, so a "Show more" reveal keeps its own. */
[data-hours-out]{ display:none !important; }
/* The label row (template-parts/sl-labels.php): one row of pills, wrapping. */
.sl-labels{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sl-labels > li{ margin:0; padding:0; display:flex; }
.sl-labels .sl-badge-t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
/* compact = the small and row card forms: smaller pills (T1's sl-card size small | row). */
.sl-labels.is-compact{ gap:6px; }
.sl-labels.is-compact .sl-badge{ padding:1px 8px; font-size:12px; letter-spacing:.08em; }
.sl-labels.is-compact .sl-label{ padding:0 7px; font-size:12px; letter-spacing:.08em; }
.sl-labels.is-compact .sl-badge,.sl-labels.is-compact .sl-label{ white-space:normal; text-align:left; }