/* /posters/feelings/ , browse the poster wall by the feeling you are having.

   Only the chooser and the page furniture live here. The poster cards are the
   site's own cards (KCGallery.posterCard) inside the site's own
   .kc-gallery__grid, so the light-card-on-dark-mode rule, the language globe,
   the flip and the un-clipped rotation all come from cdo-watchtower.css and
   kc-card-system.css exactly as they do on the wall. Nothing here touches a
   card.

   Every color is a shell token, so both themes are covered by one rule.
   CONTRAST, measured 2026-08-01 off the real rendered pixels in Chrome (a WCAG
   relative-luminance calculation on getComputedStyle, not an eyeball), light
   theme / dark theme:
     pill text        --wt-ink on the pill            13.42 : 1  /  12.68 : 1
     pill edge        --wt-field-border on the pill    4.17 : 1  /   3.96 : 1
     pill edge        --wt-field-border on the page    3.86 : 1  /   4.66 : 1
     selected pill    on-accent ink on --wt-accent     7.24 : 1  /   9.92 : 1
     count            --wt-ink-quiet on the pill       5.56 : 1  /   5.73 : 1
     focus ring       --wt-ink on the page            12.42 : 1  /  14.94 : 1
     feeling heading  --wt-ink on the page            12.42 : 1  /  14.94 : 1
     tip and lede     --wt-ink-soft on the page        7.62 : 1  /  10.93 : 1
   Text needs 4.5 and a control's edge needs 3, so every pair clears AA in both
   themes. The ring sits OUTSIDE the pill with a 3px offset, so the color it
   has to clear is the page, selected or not. */

.kcf {
  --kcf-on-accent: #fffdf9;          /* text on a selected pill, light theme */
  max-width: 1140px;
  margin: 0 auto;
  padding: 4px 4vw 72px;
}
html[data-mode="batman"] .kcf { --kcf-on-accent: #161a18; }

.kcf__head { text-align: center; margin: 8px auto 26px; max-width: 720px; }
.kcf__eyebrow {
  font: 700 12px var(--wt-font-ui);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wt-eyebrow);
  margin: 0 0 8px;
}
.kcf__h1 {
  font-family: var(--wt-font-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  color: var(--wt-ink);
  margin: 0 0 12px;
}
.kcf__lede { font: 400 17px/1.55 var(--wt-font-ui); color: var(--wt-ink-soft); margin: 0; }

/* ---- the feelings ---- */
.kcf__chooser { margin: 0 auto 34px; }
.kcf__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.kcf__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--wt-field-border);
  border-radius: 999px;              /* a control, so a pill; tags are rectangles */
  background: var(--wt-surface);
  color: var(--wt-ink);
  font: 600 15px var(--wt-font-ui);
  line-height: 1.15;
  text-decoration: none;
}
.kcf__pill:hover { border-color: var(--wt-accent); color: var(--wt-accent); }
.kcf__pill[aria-current="true"] {
  background: var(--wt-accent);
  border-color: var(--wt-accent);
  color: var(--kcf-on-accent);
}
/* A visible ring in BOTH themes, outside the pill so it always sits on the
   page color. :focus-visible alone would leave older engines with nothing, so
   :focus carries the same ring and :focus:not(:focus-visible) removes it only
   where the browser understands both. */
.kcf__pill:focus { outline: 3px solid var(--wt-ink); outline-offset: 3px; }
.kcf__pill:focus:not(:focus-visible) { outline: none; }
.kcf__pill:focus-visible { outline: 3px solid var(--wt-ink); outline-offset: 3px; }
.kcf__pill-emoji { font-size: 1.05em; line-height: 1; }
.kcf__pill-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--wt-ink-quiet);
}
.kcf__pill:hover .kcf__pill-count { color: inherit; }
.kcf__pill[aria-current="true"] .kcf__pill-count { color: inherit; opacity: .82; }

/* ---- the results ---- */
.kcf__results { padding-top: 0; }
.kcf__now {
  font-family: var(--wt-font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.15;
  text-align: center;
  color: var(--wt-ink);
  margin: 0 0 6px;
}
.kcf__tip {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 22px;
  font: 400 16px/1.55 var(--wt-font-ui);
  color: var(--wt-ink-soft);
}
.kcf__status { text-align: center; margin: 0 0 20px; font: 500 15px var(--wt-font-ui); color: var(--wt-ink-soft); }
.kcf__make { text-align: center; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.kcf__wall { font: 600 15px var(--wt-font-ui); color: var(--wt-link); }
.kcf__wall:focus-visible { outline: 3px solid var(--wt-ink); outline-offset: 3px; }

@media (max-width: 520px) {
  .kcf__pill { padding: 8px 13px; font-size: 14px; gap: 6px; }
  .kcf__pills { gap: 8px; }
}