/* ==========================================================================
   f-say-something.css — CAT-12 only. Tokens only: no colours, no radii, no
   fonts declared here that are not already in tokens.css. Attached at
   runtime by js/features/say-something/lib.js, because index.html is shared.
   ========================================================================== */

.ss-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.ss-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.ss-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.ss-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.ss-block > * + * { margin-top: var(--s-4); }
.ss-foot { padding: var(--s-5) var(--gutter) var(--s-8); }
.ss-foot > * + * { margin-top: var(--s-4); }

.ss-frame { border: 1px solid var(--ink); padding: var(--s-4); }
.ss-frame > * + * { margin-top: var(--s-3); }
.ss-alarm { border-color: var(--ink-alarm); }
.ss-alarm .ss-count { color: var(--ink-alarm); }
.ss-quiet { border-color: var(--hairline); }

.ss-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ss-two > .field { margin-bottom: 0; }

.ss-check {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0; min-height: var(--tap);
  border-bottom: 1px solid var(--hairline);
}
.ss-check input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.ss-check-note { display: block; margin-top: 2px; }

.ss-star { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ss-stars { letter-spacing: 0.04em; white-space: nowrap; }

.ss-stat { display: flex; flex-direction: column; gap: 2px; padding-block: var(--s-2); }
.ss-stat-value { font-family: var(--font-display); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
.ss-kv { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-bottom: 1px solid var(--hairline); }
.ss-kv:last-child { border-bottom: 0; }

.ss-count {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-variant-numeric: tabular-nums;
}
.ss-num { font-family: var(--font-display); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }

/* ---- the histogram --------------------------------------------------------
   Five buttons. The bar is a plain ink fill whose width is set inline from
   the count, and the count is printed beside it. Nothing here is decorative. */

.ss-hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); align-items: end; }
.ss-bar {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  width: 100%; min-height: var(--tap); padding: var(--s-2) 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
}
.ss-bar-track { width: 100%; height: 104px; background: var(--wash); position: relative; }
.ss-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); }
.ss-bar[aria-pressed="true"] .ss-bar-fill { background: var(--accent); }
.ss-bar[aria-pressed="true"] { border-bottom-color: var(--accent); }
.ss-bar-n { font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.ss-bar-star { font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--ink-muted); }

/* ---- review cards ---------------------------------------------------------- */

.ss-card { padding: var(--s-5) var(--gutter); border-bottom: 1px solid var(--hairline); }
.ss-card:first-of-type { border-top: 1px solid var(--hairline); }
.ss-card-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.ss-card-body { margin-top: var(--s-3); max-width: var(--measure); }
.ss-card-body p + p { margin-top: var(--s-3); }
.ss-card-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ss-tag { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--hairline); padding: 2px var(--s-2); }
.ss-response { margin-top: var(--s-4); margin-left: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--ink); }
.ss-response > * + * { margin-top: var(--s-2); }
.ss-reply { margin-top: var(--s-4); margin-left: var(--s-6); padding-left: var(--s-4); border-left: 2px solid var(--hairline); }
.ss-reply > * + * { margin-top: var(--s-2); }
.ss-gap { margin-top: var(--s-3); padding: var(--s-3); border: 1px dashed var(--hairline); }
.ss-card[data-mine="true"] { background: var(--wash); }

/* ---- filter chip, dismissible ---------------------------------------------- */

.ss-active-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ss-active-filter .chip { min-height: var(--tap); }

/* ---- the identical pair (FR-243) -------------------------------------------
   Same grid track, same class, same weight. Neither is filled: one filled
   button would be a thumb on the scale, and the whole point is no thumb.    */

.ss-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ss-pair .btn { min-height: var(--tap-primary); }

/* ---- eleven buttons (FR-252) ---------------------------------------------- */

.ss-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; }
.ss-scale button {
  min-height: var(--tap); border: 1px solid var(--hairline); background: transparent;
  font-variant-numeric: tabular-nums; font-size: var(--t-small); padding: 0;
}
.ss-scale button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ss-scale-ends { display: flex; justify-content: space-between; margin-top: var(--s-2); }

/* ---- thumbs (FR-253) ------------------------------------------------------- */

.ss-thumbs { display: flex; gap: var(--s-2); flex-shrink: 0; }
.ss-thumb {
  min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--hairline);
  background: transparent; font-size: var(--t-body); padding: 0 var(--s-3);
}
.ss-thumb[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ss-dish { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.ss-dish-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- galleries (FR-255) ---------------------------------------------------- */

.ss-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ss-photo { border: 1px solid var(--hairline); }
.ss-photo .plate { width: 100%; }
.ss-photo figcaption, .ss-photo-cap { padding: var(--s-2) var(--s-3); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.ss-photo[data-state="pending"] { border-style: dashed; }
.ss-photo[data-state="rejected"] { opacity: 0.5; }
.plate[data-ratio="3/2"] { aspect-ratio: 3 / 2; overflow: hidden; }
.plate svg { width: 100%; height: 100%; }

/* ---- timelines (FR-254, FR-244) ------------------------------------------- */

.ss-timeline { border-left: 1px solid var(--hairline); padding-left: var(--s-4); margin-left: var(--s-1); }
.ss-event { position: relative; padding-bottom: var(--s-4); }
.ss-event::before {
  content: ''; position: absolute; left: calc(var(--s-4) * -1 - 4px); top: 7px;
  width: 7px; height: 7px; background: var(--hairline);
}
.ss-event[data-done="true"]::before { background: var(--accent); }
.ss-event[data-current="true"]::before { background: var(--ink); }

/* ---- rows of amounts, receipts ------------------------------------------- */

.ss-ledger { font-variant-numeric: tabular-nums; }
.ss-ledger-row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
.ss-ledger-rule { border-top: 1px solid var(--hairline); margin-block: var(--s-2); }
.ss-strike { text-decoration: line-through; color: var(--ink-muted); }

/* ---- staff roster rows ------------------------------------------------------ */

.ss-person { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); width: 100%; text-align: left; padding: var(--s-3) 0; min-height: var(--tap); border-bottom: 1px solid var(--hairline); background: transparent; }
.ss-person[aria-pressed="true"] { border-left: 3px solid var(--ink); padding-left: var(--s-3); }
.ss-person-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- misc ------------------------------------------------------------------ */

.ss-file { display: block; width: 100%; padding: var(--s-3) 0; }
.ss-file input { display: block; width: 100%; font-size: var(--t-small); }
.ss-doc p + p { margin-top: var(--s-3); }
.ss-doc h3 { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); margin-top: var(--s-4); }
.ss-scroll { overflow-x: auto; }
.ss-inline-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.ss-inline-actions .btn { flex: 1 1 auto; }
.ss-preview { border: 1px solid var(--hairline); padding: var(--s-4); }
.ss-preview > * + * { margin-top: var(--s-3); }
.ss-live { font-variant-numeric: tabular-nums; }
.ss-muted-score { color: var(--ink-muted); }