/* Kismet branding
   - Type: TT Hoves Pro Regular only (one weight, everywhere; no bold, no italic, no faux bold)
   - Sentence case: nothing is forced to capitals
   - Colours from kismet.healthcare (about-us, Nov 2026): page #e5e5e5, surfaces #ffffff,
     ink is black at 80% (never pure black), secondary text 64%, faint 27%; dark surfaces #1c1c1c;
     hovers: primary 80% → 55%, light controls get a 6% tint (11% stronger); overlays #161616 at 80%
   - No strokes. Shapes are told apart by fill, chosen against what they sit on:
       page #e5e5e5  → things on it are white
       white         → things on it are tinted (black 6%, hover 11%)
       sidebar white → items tinted on hover, 11% when current
       photos        → solid white badges */

@font-face { font-family: "TT Hoves Pro"; src: url("fonts/TT_Hoves_Pro_Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: rgba(0, 0, 0, .8);
  --ink-hover: rgba(0, 0, 0, .55);
  --ink-2: rgba(0, 0, 0, .64);
  --ink-3: rgba(0, 0, 0, .27);
  --tint: rgba(0, 0, 0, .06);
  --tint-2: rgba(0, 0, 0, .11);
  --dark: #1c1c1c;
  --accent: rgba(0, 0, 0, .8);
  --dark-2: #262626;
  --bg: #e5e5e5;
  --side: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f0f0;        /* 6% tint on white, as a solid colour for image placeholders */
  --hover: var(--tint);
  --line: transparent;
  --line-2: transparent;
  --text: var(--ink);
  --strong: var(--ink);
  --muted: var(--ink-2);
  --on-white: var(--tint);   /* fill for controls sitting on white */
  --on-white-hover: var(--tint-2);
  --on-grey: #ffffff;        /* fill for controls sitting on the #e5e5e5 page */
  --on-grey-hover: rgba(255, 255, 255, .67);
  --good: #079455; --good-hover: #067647;
  --bad: #d92d20;  --bad-hover: #b42318;
  --sans: "TT Hoves Pro", ui-sans-serif, system-ui, sans-serif;
  --display: var(--sans);
  --mono: var(--sans);
  color-scheme: light;
}

/* one font, one weight, sentence case */
*, *::before, *::after, button, input, select, textarea {
  font-family: "TT Hoves Pro", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  text-transform: none !important;
}
h1 { letter-spacing: -0.02em; }
.eyebrow, .stat-top, .ev-series, .feature-label, .pill { letter-spacing: 0; }
.stat-num, .ev-name, .detail-info h2 { letter-spacing: -0.01em; }

/* ---- sidebar (white) */
.side { border: 0; }
.search { background: var(--tint); }
.search:hover, .search:focus-within { background: var(--tint-2); }
.search kbd { background: #fff; border: 0; color: var(--ink-2); }
.search input::placeholder { color: var(--ink-3); }
.nav-item:hover, .tree-item:hover { background: var(--tint); color: var(--ink); }
.nav-item[aria-current="true"], .tree-item[aria-current="true"] { background: var(--tint-2); color: var(--ink); }
.side-foot, .side-foot a { color: var(--ink-2); }
.tree-sub { border: 0; }

/* ---- page (grey): controls are white */
select, .toggle, .btn.ghost, .chips button, .folder, .stat, .row:hover, .row:focus-visible, .nav-arrow { background: var(--on-grey); }
.btn.ghost:hover, .chips button:hover, .folder:hover, .stat:hover { background: var(--on-grey-hover); color: var(--strong); }
.toggle button[aria-pressed="true"] { background: var(--on-white); box-shadow: none; color: var(--strong); }
.chips button { color: var(--text); }
.chips button[aria-pressed="true"], .folder[aria-current="true"] { background: var(--ink); color: #fff; }
.chips button[aria-pressed="true"]:hover, .folder[aria-current="true"]:hover { background: var(--ink-hover); color: #fff; }
.row.sel { background: var(--on-grey); }

/* ---- cards (white): buttons inside are grey */
.card, .ev-card, .feature-video { background: var(--panel); }
.card:hover, .card:focus-visible, .ev-card:hover, .ev-card:focus-visible { background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.card.sel { background: var(--on-white); }
.act { background: var(--on-white); color: var(--text); }
.act:hover { background: var(--on-white-hover); color: var(--strong); }
.act.done { background: var(--ink); color: #fff; }
.thumb, .row .mini { background: var(--on-white); }
.pill { background: var(--on-white); }

/* ---- on photos: solid white, black text */
.ev-n, .vbadge { background: #fff; color: var(--ink); border: 0; backdrop-filter: none; }
.feature-poster:hover .vbadge.lg { background: #fff; }
.check i { border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.check input:checked + i { background: var(--ink); }
.check input:checked + i::after { border-color: #fff; }

/* ---- primary buttons */
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-hover); }

/* ---- lightbox and pop-ups (white): inner controls are grey */
dialog { background: var(--panel); }
dialog .btn:not(.primary), .tag, .close:hover, .detail-note { background: var(--on-white); color: var(--text); }
dialog .btn:not(.primary):hover, .tag:hover { background: var(--on-white-hover); color: var(--strong); }
.detail-img, .detail-media, .feature-media, .feature-media video, .feature-poster { background: var(--on-white); }
.nav-arrow { color: var(--strong); }
.selbar, .toast { background: var(--panel); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.bar { background: var(--on-white); }
.bar i { background: var(--ink); }
mark { background: var(--tint-2); color: inherit; }
dialog::backdrop { background: rgba(22, 22, 22, .8); }

/* ---- links: underline instead of a border line */
.eyebrow a, .about a, .facts a { border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.eyebrow a:hover, .about a:hover, .facts a:hover { color: var(--ink-hover); }

/* Kismet heart logo fills the profile tile */
.mark { padding: 0; overflow: hidden; border: 0; background: transparent; }
.mark img { width: 100%; height: 100%; object-fit: cover; }

/* people + review (white cards on grey; buttons on white are grey) */
.person-card, .rv { background: var(--panel); }
.person-card:hover, .person-card:focus-visible { background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.avatar, .rv-face { background-color: var(--on-white); }
.rv-btn { background: var(--on-white); }
.rv-btn:hover { background: var(--on-white-hover); }
.folder.person, .folder[data-review], .folder[data-rf] { background: var(--on-grey); }
.folder[data-rf][aria-current="true"] { background: var(--ink); color: #fff; }
.rv-btn.yes[aria-pressed="true"] { background: var(--good); color: #fff; }
.rv-btn.yes[aria-pressed="true"]:hover { background: var(--good-hover); }
.rv-btn.no[aria-pressed="true"] { background: var(--bad); color: #fff; }
.rv-btn.no[aria-pressed="true"]:hover { background: var(--bad-hover); }
.person-sub, .person-title { color: var(--ink-2); }

.person-card.off:hover { box-shadow: none; }

/* no outline strokes on selected states (fill shows the state instead) */
.card.sel, .folder[aria-current="true"], .act.done, .chips button[aria-pressed="true"], .check input:checked + i, .btn.primary { border-color: transparent; }