/* 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
   - Light mode, no strokes. Shapes are told apart by fill, chosen against what they sit on:
       page grey  #f2f2f2  → things on it are white
       white      #ffffff  → things on it are grey (#efefef)
       sidebar    #e9e9e9  → things on it are white
       photos              → solid white badges, black text */

@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 {
  --bg: #f2f2f2;
  --side: #e9e9e9;
  --panel: #ffffff;
  --panel-2: #efefef;
  --hover: #e4e4e4;
  --line: transparent;
  --line-2: transparent;
  --text: #1c1c1c;
  --strong: #000000;
  --muted: #5e5e5e;
  --on-white: #efefef;       /* fill for controls sitting on white */
  --on-white-hover: #e2e2e2;
  --on-grey: #ffffff;        /* fill for controls sitting on the grey page or sidebar */
  --on-grey-hover: #fafafa;
  --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 (grey) */
.side { border: 0; }
.search { background: var(--on-grey); }
.search kbd { background: var(--on-white); border: 0; color: var(--text); }
.nav-item:hover, .tree-item:hover { background: rgba(255, 255, 255, .6); }
.nav-item[aria-current="true"], .tree-item[aria-current="true"] { background: var(--on-grey); color: var(--strong); }
.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(--strong); 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(--strong); 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: #000; 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: #000; }
.check input:checked + i::after { border-color: #fff; }

/* ---- primary buttons */
.btn.primary { background: #000; color: #fff; }
.btn.primary:hover { background: #2a2a2a; }

/* ---- 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: #000; }
mark { background: rgba(0, 0, 0, .1); }
dialog::backdrop { background: rgba(20, 20, 20, .45); }

/* ---- links: underline instead of a border line */
.eyebrow a, .about a, .facts a { border: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

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