/* Sniffer — visual design from the "Sniffer" design canvas (warm paper, ink sidebar, burnt
   orange accent; Space Grotesk / IBM Plex Sans / IBM Plex Mono). No inline styles: the CSP
   allows styles from 'self' only. */

:root {
  --paper: #f3efe6;       /* page background */
  --surface: #fffdf8;     /* cards, inputs */
  --ink: #1d1b17;         /* text, sidebar, dark buttons */
  --ink-2: #2a2722;       /* dark cards */
  --muted: #5e574b;       /* secondary text */
  --line: #ddd5c6;        /* card borders */
  --line-input: #cfc6b5;  /* input borders */
  --line-soft: #ece6da;   /* row separators */
  --chip: #efe9dd;        /* chips, tags */
  --placeholder: #e7e0d2; /* thumbnails without image, info boxes */
  --accent: #a8480c;      /* primary action, links */
  --accent-hover: #7e3508;
  --accent-light: #e08a4c; /* accent on dark */
  --on-dark: #f3efe6;
  --on-dark-2: #e9e3d7;
  --on-dark-muted: #a89f8e;
  --on-dark-soft: #c9c1b2;
  --line-dark: #3a362f;
  --ok-bg: #dcebe8;
  --ok-fg: #1e5a55;
  --error: #9f2a1c;
  --status-on: #2f8f6a;           /* running */
  --status-paused-bg: #f6e4cf;    /* paused: amber, reads as "not running" */
  --status-paused-fg: #7e3508;
  --status-paused-bar: #d9a066;
  --status-paused-light: #e3b27f; /* paused count on the dark sidebar */
  --error-bg: #f8e3dd;

  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 10px;
  --radius-s: 8px;
  --tap: 44px;            /* minimum touch target */
  --sidebar: 232px;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--font-body), sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { font-family: var(--font-display), sans-serif; letter-spacing: -0.02em; }

.mono { font-family: var(--font-mono), monospace; }
.muted { color: var(--muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

/* --- controls --------------------------------------------------------------------------- */

input, select, button { font: inherit; color: inherit; }

input[type="search"], input[type="text"], input[type="email"], input:not([type]), input[type="date"], input[type="time"], select {
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-size: 15px;
}

input::placeholder { color: #8a8272; }

input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
}
/* Pressed: a 1 px nudge, for mouse and touch alike. Hover colours: "pointer feedback" at the end. */
.btn:active:not(.is-disabled) { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--surface); }
.btn-dark { background: var(--ink); color: var(--on-dark); font-weight: 500; font-size: 14px; }
.btn-light { background: var(--accent-light); color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--line-input); color: var(--ink); font-weight: 500; }
.btn-large { min-height: 56px; padding: 0 28px; font-size: 17px; border-radius: var(--radius); }
.btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
.htmx-request.btn, .htmx-request .btn { opacity: 0.6; cursor: progress; }

/* --- shell: sidebar on desktop, top bar + tab bar on phones ------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 16px;
  background: var(--ink);
  color: var(--on-dark);
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--font-display), sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo svg { color: var(--accent-light); flex-shrink: 0; }
.logo:hover { color: var(--on-dark); }

.nav-group { display: flex; flex-direction: column; gap: 4px; }

.nav-heading {
  padding: 0 12px 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-s);
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: 15px;
}
.nav-item:hover { background: var(--ink-2); color: var(--on-dark); }
.nav-item[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 600; }

.user-box {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 8px 0;
  border-top: 1px solid var(--line-dark);
}
.user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  font-size: 14px;
}
.user-text { display: flex; flex-direction: column; }
.user-name { font-size: 14px; font-weight: 600; }
.user-role { font-size: 12px; color: var(--on-dark-muted); }
.dev-note { margin: 0; font-size: 12px; color: var(--on-dark-muted); }
/* "Odhlásit se": a POST form that looks like the other links of the account box. */
.logout-form { margin: 0; }
.logout-button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }

/* The login page (login.html): one card on the paper, without the app's navigation. */
.login-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.login-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-sizing: border-box;
}
.login-card h1 { margin: 0; font-family: var(--font-display), sans-serif; font-size: 28px; }
.login-card .lede, .login-card .notice { margin: 0; }
.login-logo { margin: 0; padding: 0; color: var(--ink); font-family: var(--font-display), sans-serif; font-size: 22px; font-weight: 600; }
.login-button { width: 100%; }

/* Connecting an app (4.2), on the login card: what it asks for, then the two answers. */
.consent-ask { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.consent-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 15px; }
.consent-facts dt { color: var(--muted); }
.consent-facts dd { margin: 0; overflow-wrap: anywhere; }
.consent-actions { display: flex; gap: 10px; margin: 0; }
.consent-actions .btn { flex: 1 1 0; }
.notice.warn { background: var(--status-paused-bg); color: var(--status-paused-fg); }

.mobile-bar, .tabbar { display: none; }

.content {
  /* Lists and results use wide screens; past ~1600 px the column is centred, since rows
     stretched further would put a title too far from its price. */
  width: 100%;
  min-width: 0;
  max-width: 1680px;
  margin: 0 auto;
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- page header ------------------------------------------------------------------------ */

.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-head h1 { margin: 0; font-size: 34px; font-weight: 700; }
.lede { margin: 0; font-size: 15px; color: var(--muted); }

/* --- search form ------------------------------------------------------------------------ */

.search { display: flex; flex-direction: column; gap: 18px; }

.search-bar { display: flex; gap: 10px; }
.search-bar input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono), monospace;
  font-size: 20px;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-row { display: flex; gap: 12px; align-items: center; }
.filter-label { flex: 0 0 90px; font-size: 14px; font-weight: 500; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }

.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: 22px;
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pill input:focus-visible + span { outline: 3px solid var(--accent-light); outline-offset: 2px; }

.filter-fields {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); }
.field-price input { width: 120px; }
.field-currency select { width: 90px; }
.field-grow { flex: 1 1 200px; max-width: 560px; }
.field-grow input { width: 100%; }

.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 11px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }

.location { display: block; }
.location summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}
.location summary::-webkit-details-marker { display: none; }
.location summary .filter-label::after { content: " ▸"; color: var(--muted); }
.location[open] summary .filter-label::after { content: " ▾"; }
.summary-hint { font-size: 14px; color: var(--muted); }
.location[open] .summary-hint { display: none; }
.location-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 0 102px; }
.field-hint { flex-basis: 100%; }
.location-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.location-name { width: 90px; font-size: 14px; }
.location-row input { width: 110px; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }

/* --- notices and call to action --------------------------------------------------------- */

.notice {
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 14px;
}
.notice ul { margin: 0; padding-left: 18px; }
.notice.error { background: var(--error-bg); color: var(--error); }
.notice.info { background: var(--placeholder); color: var(--ink); }

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-dark);
}
.cta-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--on-dark-soft); }
.cta-title { font-family: var(--font-display), sans-serif; font-size: 18px; font-weight: 700; color: var(--on-dark); }

/* --- results ---------------------------------------------------------------------------- */

.results { display: flex; flex-direction: column; gap: 12px; }

.loading { margin: 0; padding: 18px; color: var(--muted); }
.loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border: 2px solid var(--line-input);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.results-summary { display: flex; flex-direction: column; gap: 6px; }
.results-summary p { margin: 0; font-size: 15px; }
.per-source { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.per-source strong { color: var(--ink); font-weight: 600; }

.sort { display: flex; align-items: center; gap: 8px; }
.sort label { font-size: 14px; color: var(--muted); }

/* One column on ordinary screens, two on wide ones, so a price stays near its title. */
.rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 640px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 180px 110px;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-s);
  background: var(--placeholder);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-title:hover { color: var(--accent); text-decoration: underline; }
.row-meta { font-size: 13px; color: var(--muted); }

.row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.price { font-family: var(--font-mono), monospace; font-size: 18px; font-weight: 500; }
.price-text { font-family: var(--font-body), sans-serif; font-size: 15px; color: var(--muted); }
.price-note { font-size: 12px; color: var(--muted); white-space: nowrap; }

.row-open { padding: 0 12px; }

.tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--chip);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.empty { margin: 0; padding: 24px 18px; background: var(--surface); border: 1px dashed var(--line-input); border-radius: var(--radius); color: var(--muted); }

.more { display: flex; justify-content: center; padding-top: 6px; }

/* --- sniffet editor ("Nový sniffet") ------------------------------------------------------ */

.back-link { font-size: 14px; text-decoration: none; }

.notice.ok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ok-bg);
  color: var(--ok-fg);
}
.notice.ok a { color: var(--ok-fg); font-weight: 600; text-decoration: none; white-space: nowrap; }
.notice.ok a:hover { text-decoration: underline; }

.editor { display: flex; gap: 24px; align-items: flex-start; max-width: 1360px; }
.editor-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.section {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.section legend {
  padding: 0 6px;
  font-family: var(--font-display), sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.section .location-body { padding-left: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }

.field-lg { gap: 6px; }
.field-lg label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field-lg input, .field-lg select { width: 100%; }

.source-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 14px;
  cursor: pointer;
}
.tile:has(input:checked) { border-color: var(--ink); }

.field-error { margin: 0; color: var(--error); font-size: 13px; font-weight: 500; }
input[aria-invalid="true"], select[aria-invalid="true"], .source-groups[aria-invalid="true"] .tile {
  border-color: var(--error);
}

/* The source pickers (_sources.html): a row per country, its label on the left of the pills
   (Hledat) or above the tiles (editor, Nastavení). The label's checkbox, shown by app.js, ticks
   the whole row. */
.source-groups { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.source-group { display: flex; align-items: flex-start; gap: 12px; }
.group-label {
  flex: 0 0 110px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  font-size: 14px;
  font-weight: 500;
}
.group-label:has(.group-toggle:not([hidden])) { cursor: pointer; }
.source-group .pills { flex: 1; min-width: 0; }
.source-groups-tiles { gap: 16px; }
.source-groups-tiles .source-group { flex-direction: column; gap: 8px; }
.source-groups-tiles .group-label { flex: none; min-height: 0; }
.source-groups-tiles .source-tiles { align-self: stretch; }
.filter-row-sources { align-items: flex-start; }
.filter-row-sources .filter-label { display: flex; align-items: center; min-height: var(--tap); }

/* Nastavení → Upozornění: the Discord the DMs go to, above the modes. */
.discord-link { display: flex; flex-direction: column; gap: 12px; }
.discord-state { margin: 0; }
.discord-link .actions form { margin: 0; }

/* Nastavení's tabs: links, one per page. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.preview {
  position: sticky;
  top: 24px;
  width: 340px;
  flex-shrink: 0;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.preview-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.btn-dark-outline {
  background: transparent;
  border-color: var(--line-dark);
  color: var(--on-dark-2);
  font-size: 13px;
  font-weight: 500;
  padding: 0 12px;
}
#preview-body { display: flex; flex-direction: column; gap: 12px; }
.preview-items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.preview-items li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-s);
  background: var(--ink-2);
}
.preview-items a { color: var(--on-dark); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.preview-items a:hover { text-decoration: underline; }
.preview-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--on-dark-soft); }
.preview-meta .mono { color: var(--on-dark); white-space: nowrap; }
.preview-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  color: var(--on-dark-soft);
}
.preview-foot strong { color: var(--on-dark); }
.preview-hint, .preview-error { margin: 0; font-size: 14px; color: var(--on-dark-soft); }
.preview-error { color: #ffb4a6; }
.loading.on-dark { padding: 0; color: var(--on-dark-soft); }

@media (max-width: 1100px) {
  .editor { flex-direction: column; align-items: stretch; }
  .preview { position: static; width: auto; }
}

/* --- sniffet list ("Sniffety") --------------------------------------------------------------- */

.page-head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; }
.nav-counts { display: inline-flex; align-items: center; gap: 8px; }
.nav-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono), monospace; font-size: 13px; }
.nav-count-active::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-on);
}
.nav-count-paused { color: var(--status-paused-light); }
.nav-item[aria-current="page"] .nav-count-paused { color: var(--status-paused-fg); }

.btn-small { min-height: var(--tap); padding: 0 12px; font-size: 14px; font-weight: 500; }
.btn-danger { background: transparent; border-color: var(--error); color: var(--error); font-weight: 500; }
.actions .btn-danger { margin-left: auto; }
.btn-danger-solid { background: var(--error); color: var(--surface); }

/* The trash can in the Sniffety list: quiet until pointed at (or focused). */
.btn-trash { width: var(--tap); padding: 0; color: var(--muted); }
.btn-trash:focus-visible { border-color: var(--error); color: var(--error); background: var(--error-bg); }

/* Sniffer's confirmation dialog (static/app.js, for hx-confirm). */
.confirm-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 40px rgb(29 27 23 / 0.28);
}
.confirm-dialog::backdrop { background: rgb(29 27 23 / 0.45); }
.confirm-dialog form { display: flex; flex-direction: column; gap: 12px; }
.confirm-dialog h2 { margin: 0; font-size: 22px; font-weight: 700; }
.confirm-dialog p { margin: 0; font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.delete-confirm { max-width: 560px; }
.delete-confirm p { margin: 0; }
.delete-name { font-family: var(--font-display), sans-serif; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--chip);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }

.sniffets {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sniffets th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}
.sniffets th { padding: 12px; }
.sniffets th:first-child, .sniffets td:first-child { padding-left: 18px; }
.sniffets th:last-child, .sniffets td:last-child { padding-right: 18px; }
.sniffets td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 14px; line-height: 1.4; }
.sniffets tbody tr:last-child td { border-bottom: 0; }
.sniffets .th-actions { text-align: right; }
.sniffets td:nth-child(3), .sniffets td:nth-child(4), .sniffets td:nth-child(6) > span:first-child { white-space: nowrap; }
.sniffets td > span { display: block; }
.sniffets td > span.chips { display: flex; }
.sniffets td:first-child { min-width: 160px; }
/* Extra width goes to the name and the sources, not into gaps between short columns. */
.sniffets th:nth-child(1) { width: 26%; }
.sniffets th:nth-child(2) { width: 22%; }

.sn-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.sn-line { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.chips { flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 8px; border-radius: 6px; background: var(--chip); color: #3b362e; font-size: 12px; white-space: nowrap; }
.fresh { font-size: 12px; font-weight: 600; color: var(--ok-fg); }
.run-bad { color: var(--error); font-weight: 600; }
.run-warn { color: var(--accent); font-weight: 600; }

.sn-actions { text-align: right; white-space: nowrap; }
/* `.sniffets td > span` makes cell text blocks; badges stay inline. */
.sniffets .sn-actions .status { display: inline-flex; margin-bottom: 8px; }

/* Status: a badge with an icon, a bar at the row's start, and paused rows dimmed. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.status-active { background: var(--ok-bg); color: var(--ok-fg); }
.status-paused { background: var(--status-paused-bg); color: var(--status-paused-fg); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-on); }
.srow.is-active td:first-child { box-shadow: inset 4px 0 0 var(--status-on); }
.srow.is-paused td:first-child { box-shadow: inset 4px 0 0 var(--status-paused-bar); }
.srow.is-paused td:not(.sn-actions) { opacity: 0.55; }
.sn-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.sn-buttons form { margin: 0; }
/* "Pozastavit" and "Obnovit" share one width, so the Upravit buttons line up. */
.sn-buttons form .btn { min-width: 7.2em; }
.row-error { margin: 0 0 8px; color: var(--error); font-size: 13px; text-align: right; white-space: normal; }

.srow.is-highlight td { background: #fbf3e8; }

/* --- sniffet list as cards: phones and windows too narrow for the table ------------------- */

@media (max-width: 1199px) {
  .sniffets, .sniffets tbody, .sniffets tr, .sniffets td { display: block; width: 100%; }
  .sniffets { background: transparent; border: 0; overflow: visible; }
  .sniffets thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sniffets tr {
    margin-bottom: 10px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .sniffets td, .sniffets td:first-child, .sniffets td:last-child { padding: 4px 0; border: 0; }
  #sniffet-summary { display: block; }
  .sniffets td[data-label]:not(:first-child) { display: flex; gap: 10px; align-items: baseline; }
  .sniffets td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    flex: 0 0 100px;
    font-size: 12px;
    color: var(--muted);
  }
  .sniffets td[data-label]:not(:first-child) > span { display: inline; }
  .sniffets td:first-child { padding-bottom: 8px; }
  .sn-actions { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px !important; text-align: left; }
  .sniffets .sn-actions .status { margin-bottom: 0; }
  .row-error { flex-basis: 100%; text-align: left; }
  .srow td:first-child, .srow.is-active td:first-child, .srow.is-paused td:first-child { box-shadow: none; }
  .srow.is-active { box-shadow: inset 4px 0 0 var(--status-on); }
  .srow.is-paused { box-shadow: inset 4px 0 0 var(--status-paused-bar); }
  .srow.is-highlight { background: #fbf3e8; }
  .srow.is-highlight td { background: transparent; }
  .sniffets tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sniffets tr { margin-bottom: 0; }
}

@media (max-width: 860px) {
  .sniffets tbody { grid-template-columns: minmax(0, 1fr); }
}

/* --- phones and narrow windows ---------------------------------------------------------- */

@media (max-width: 860px) {
  body { font-size: 15px; }
  /* The bar keeps its height and the page takes the rest: on a short page (a new user's empty
     list) the rows would otherwise share the screen and stretch the bar. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar { display: none; }

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 20; /* above the tab bar, so the open account menu's backdrop covers it too */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--on-dark);
  }
  .mobile-bar .logo { font-size: 20px; padding: 0; min-height: var(--tap); }
  .mobile-actions { display: flex; gap: 8px; }
  .icon-button {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-s);
    color: var(--on-dark);
  }

  /* Account menu: the sidebar's account and admin links as a dark sheet under the top bar. */
  .account-menu > summary { list-style: none; cursor: pointer; }
  .account-menu > summary::-webkit-details-marker { display: none; }
  .account-button .avatar { width: 30px; height: 30px; font-size: 13px; }
  .account-button.is-current, .account-menu[open] > .account-button { border-color: var(--accent-light); }
  /* While open, the button stretches a backdrop over the page below the bar: a tap outside the
     panel lands on the button and closes the menu. */
  .account-menu[open] > summary::before {
    content: "";
    position: fixed;
    inset: calc(var(--tap) + 20px) 0 0; /* the bar's height */
    background: rgb(29 27 23 / 0.45);
    cursor: default;
  }
  .account-menu[open] .avatar { position: relative; } /* stays bright above the backdrop */
  .account-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 20px;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.25);
  }
  .account-panel .user { padding: 0 8px; }
  .account-panel .dev-note { margin-top: -10px; padding: 0 8px 0 50px; }

  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .tabbar .nav-item {
    justify-content: center;
    min-height: 56px;
    border-radius: 0;
    color: var(--ink);
    font-size: 14px;
  }
  .tabbar .nav-item[aria-current="page"] { background: transparent; color: var(--accent); font-weight: 600; }
  /* Counts beside the labels, like the sidebar: new finds as an accent badge. Tight spacing, so
     "Sniffety ● 2 ⏸ 1" fits a third of a 360 px screen. */
  .tabbar .nav-item { gap: 4px; padding: 0 4px; }
  .tabbar .nav-counts { gap: 4px; }
  .tabbar .nav-count { font-size: 12px; font-weight: 500; color: var(--muted); }
  .tabbar .nav-count-paused { color: var(--status-paused-fg); }
  .tabbar .nav-count-new {
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--surface);
    font-weight: 600;
  }

  .content { padding: 18px 16px 88px; gap: 14px; }
  .page-head h1 { font-size: 28px; }
  .lede { display: none; }
  .back-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--tap); }

  .search-bar input { font-size: 17px; min-height: 52px; }
  .btn-large { min-height: 52px; padding: 0 18px; }

  .filter-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-label { flex-basis: auto; }
  .field-price { flex: 1 1 40%; }
  .field-price input, .field-currency select { width: 100%; }
  .field-currency { flex: 1 1 20%; }
  .checks { padding-bottom: 0; gap: 0 18px; }
  .check { min-height: var(--tap); }
  .location-body { padding-left: 0; gap: 14px; }
  .summary-hint { display: none; }
  /* Per source: the name on its own line, then postcode and radius side by side, the category
     under them. */
  .location-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .location-name { grid-column: 1 / -1; width: auto; font-weight: 500; }
  .location-row input, .location-row select { width: 100%; }
  .location-row select[name^="cat."] { grid-column: 1 / -1; }

  .cta { flex-direction: column; align-items: stretch; }
  .page-head-row { flex-direction: column; align-items: stretch; }
  .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A country's label above its pills; the tabs scroll sideways instead of wrapping. */
  .source-group { flex-direction: column; gap: 6px; }
  .group-label { flex: none; min-height: 32px; }
  .filter-row-sources .filter-label { min-height: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs .pill-link { flex-shrink: 0; }
  .notice.ok { flex-direction: column; align-items: flex-start; }
  .section { padding: 16px; }
  .results-head { flex-direction: column; align-items: stretch; }

  /* The price takes the width left of the button: an auction's notes may wrap under it. */
  .row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "thumb main main" "price price open";
    gap: 10px 14px;
    padding: 14px;
  }
  .thumb { grid-area: thumb; width: 64px; height: 64px; }
  .row-main { grid-area: main; }
  .row-title { white-space: normal; font-size: 15px; line-height: 1.35; }
  .row-price {
    grid-area: price;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    justify-self: start;
    min-width: 0;
  }
  .row-open { grid-area: open; justify-self: end; }
}

/* The smallest phones (320 px): the counts go under the tab labels. */
@media (max-width: 359px) {
  .tabbar .nav-item { flex-direction: column; gap: 0; line-height: 1.25; }
}

/* --- finds ("Nálezy") ---------------------------------------------------------------------- */

.finds-lede { margin: 0; font-size: 15px; color: var(--muted); }
.finds-lede strong { color: var(--ok-fg); font-weight: 600; }

.finds-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.finds-chips { gap: 8px; }
.finds-only-new { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 14px; cursor: pointer; }
.finds-options { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.pill-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--line-input);
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.pill-link[aria-current="true"], .pill-link[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 500; }

/* One column; two only on very wide screens, where each card still has room for its title. */
.finds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 1100px), 1fr));
  gap: 10px;
  align-items: start;
}
.finds > .more { grid-column: 1 / -1; }

.find {
  display: grid;
  /* A fixed button column keeps the prices aligned whether or not "Viděno" is there. */
  grid-template-columns: 72px minmax(0, 1fr) 150px 232px;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.find-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.find-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.find-sniffets { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.find-also { font-size: 13px; color: var(--muted); }
.find-also a { color: var(--accent); }
.find-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.find-actions form { margin: 0; }

.find-hidden {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 18px;
  background: transparent;
  border-style: dashed;
  border-color: var(--line-input);
  color: var(--muted);
  font-size: 14px;
}
.find-hidden-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.find-hidden form { margin: 0; }

/* Mid widths: the buttons move under the price, so the title keeps its room. */
@media (max-width: 1199px) {
  .find {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "thumb main price" "thumb actions actions";
    gap: 10px 20px;
  }
  .find .thumb { grid-area: thumb; align-self: start; }
  .find-main { grid-area: main; }
  .find .row-price { grid-area: price; align-self: start; }
  .find-actions { grid-area: actions; }
}

/* Phones, like the "Nálezy — mobil" board: no photo, the price beside the badges. */
@media (max-width: 860px) {
  .finds-search { display: none; }
  /* The chips scroll sideways inside their row. The form must not wrap: a wrapping column is as
     wide as its widest item, which would widen the page. */
  .finds-filter { flex-direction: column; flex-wrap: nowrap; align-items: stretch; min-width: 0; }
  .finds-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .finds-chips .pill-link { flex-shrink: 0; padding: 0 14px; }
  .find {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tags price" "title title" "meta meta" "also also" "actions actions";
    gap: 8px 12px;
    padding: 14px;
  }
  .find .thumb { display: none; }
  .find-main { display: contents; }
  .find-tags { grid-area: tags; align-self: start; min-height: 24px; }
  .find .row-title { grid-area: title; white-space: normal; font-size: 15px; line-height: 1.35; }
  .find .row-meta { grid-area: meta; }
  .find-also { grid-area: also; }
  /* "dříve …" and "≈ Kč" under the price, so the badges keep their line. */
  .find .row-price { grid-area: price; align-self: start; justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; }
  .find .price { font-size: 16px; }
  .find-actions { grid-area: actions; flex-wrap: wrap; }
}

/* --- favourites ("Oblíbené") on Nálezy ---------------------------------------------------- */

.btn-star { min-width: var(--tap); padding: 0 12px; font-size: 18px; line-height: 1; }
.btn-star.is-on { color: var(--accent); border-color: var(--accent); background: #fbf3e8; }
.pill-count { margin-left: 6px; font-family: var(--font-mono), monospace; font-size: 13px; }
.pill-count:empty { display: none; }

.fav-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--accent);
}
.fav-strip.is-empty { display: none; }
.fav-strip-title { margin: 0; font-family: var(--font-body), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--accent); }
.fav-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fav-list li { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.fav-title { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.fav-title:hover { color: var(--accent); text-decoration: underline; }
.fav-meta { flex-shrink: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fav-all { align-self: flex-start; font-size: 14px; font-weight: 600; text-decoration: none; }
.fav-all:hover { text-decoration: underline; }
.fav-gone { font-weight: 600; color: var(--muted); }
.fav-hint { max-width: 780px; }

/* Watching favourites (M16): a price move, and a listing that is gone. */
.badge-up { background: var(--status-paused-bg); color: var(--status-paused-fg); }
.badge-gone { background: var(--ink); color: var(--on-dark); }
.find.is-gone { background: var(--paper); border-style: dashed; }
.find.is-gone .row-title { color: var(--muted); }
.find.is-gone .price { color: var(--muted); text-decoration: line-through; }
.find.is-gone .thumb img { filter: grayscale(1); opacity: 0.6; }

@media (max-width: 860px) {
  .fav-strip { padding: 12px 14px; }
  .fav-list li { flex-direction: column; gap: 0; }
  .fav-title { max-width: 100%; }
  .fav-meta { white-space: normal; }
}

/* --- settings ("Nastavení") and the sniffet's own notification setting --------------------- */

.settings { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings .section .hint strong { color: var(--ink); font-weight: 600; }

.pref-rows { display: flex; flex-direction: column; }
.pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.pref-row:first-child { border-top: 0; padding-top: 4px; }
.pref-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pref-label { font-size: 15px; font-weight: 600; }
/* One choice of three, as pills (radio buttons). */
.segmented { display: flex; gap: 6px; flex-shrink: 0; }
.segmented .pill span { padding: 0 14px; }

.quiet-times { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 14px; }
.snooze-field { max-width: 220px; }
.snooze-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-weight: 600; color: var(--status-paused-fg); }

#test-result:empty { display: none; }

/* Obecné → Připojené aplikace (4.3): a row per connection, "Odpojit" on the right. */
.connected-apps .pref-row form { margin: 0; flex-shrink: 0; }
.app-name { overflow-wrap: anywhere; }
.app-meta > span { white-space: nowrap; }
.apps-empty { margin: 0; }
/* How to connect Claude: an address or a command per app; a click selects the whole line. */
.connect-steps {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  font-size: 14px;
}
.connect-steps dt { font-weight: 600; }
.connect-steps dd { margin: 0; min-width: 0; }
.copy-line {
  display: block;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-family: var(--font-mono), monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
  user-select: all;
}
.copy-line > span { white-space: nowrap; }
@media (max-width: 860px) {
  .connect-steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .connect-steps dd { margin-bottom: 8px; }
}

.notify-field { max-width: 420px; }
.sn-notify { font-weight: 600; }
.sn-notify-off { color: var(--status-paused-fg); }

@media (max-width: 860px) {
  .pref-row { flex-direction: column; align-items: stretch; }
  .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segmented .pill span { justify-content: center; width: 100%; padding: 0 6px; }
  .quiet-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snooze-field, .notify-field { max-width: none; }
}

/* --- sources & usage ("Zdroje a spotřeba") ------------------------------------------------ */

.attention { padding: 6px 12px; border-radius: 16px; background: #f6e7c8; color: #6e4205; font-size: 14px; font-weight: 600; white-space: nowrap; align-self: flex-end; }

/* As many cards per row as fit (3 at the usual width, all 4 on wide screens, 1 on phones). */
.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.source-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.source-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.source-card-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.health { padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.health-ok { background: var(--ok-bg); color: var(--ok-fg); }
.health-warn { background: #f6e7c8; color: #6e4205; }
.health-slow { background: #dce7f3; color: #1f4e79; }
.health-idle { background: var(--chip); color: var(--muted); }
.source-message { margin: 0; min-height: 34px; font-size: 13px; color: var(--muted); }
.source-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.source-metrics div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.source-metrics dt { font-size: 12px; color: var(--muted); }
.source-metrics dd { margin: 0; font-size: 15px; }
.source-metrics dd.source-split { font-size: 12px; color: var(--muted); }
.budget { display: flex; flex-direction: column; gap: 6px; }
.budget-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.source-last { margin: 0; font-size: 12px; color: var(--muted); }

/* Bars are <meter>s: inline styles (widths) are not allowed by the CSP. */
.bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--line-soft); -webkit-appearance: none; appearance: none; }
.bar::-webkit-meter-bar { height: 8px; border: 0; border-radius: 4px; background: var(--line-soft); }
.bar::-webkit-meter-optimum-value,
.bar::-webkit-meter-suboptimum-value,
.bar::-webkit-meter-even-less-good-value { border-radius: 4px; background: var(--accent); }
.bar::-moz-meter-bar { border-radius: 4px; background: var(--accent); }
.bar-teal::-webkit-meter-optimum-value,
.bar-teal::-webkit-meter-suboptimum-value,
.bar-teal::-webkit-meter-even-less-good-value { background: var(--ok-fg); }
.bar-teal::-moz-meter-bar { background: var(--ok-fg); }

.usage-head { align-items: baseline; margin-top: 8px; }
.usage-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.usage-saving { font-size: 14px; color: var(--muted); }
.usage {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.usage th { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; color: var(--muted); }
.usage td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.usage tbody tr:last-child td { border-bottom: 0; }
.usage th:last-child { width: 32%; }
.usage-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.usage-share { display: flex; align-items: center; gap: 10px; }
.usage-share .mono { width: 44px; flex-shrink: 0; text-align: right; font-size: 13px; }
.prune-note { margin: 0; font-size: 13px; color: var(--muted); }

/* "Co která čísla znamenají?": a closed explanation under the heading. */
.legend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.legend summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.legend summary::-webkit-details-marker { display: none; }
.legend summary::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--accent);
  font-family: var(--font-mono), monospace;
  font-size: 12px;
}
.legend summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.legend[open] summary::after { content: "▴"; }
.legend-body { padding: 0 18px 16px; }
.legend dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 20px; margin: 0; font-size: 14px; }
.legend dt { font-weight: 600; }
.legend dd { margin: 0; color: var(--muted); line-height: 1.5; }
.legend dd strong, .legend dd em { color: var(--ink); }
@media (max-width: 860px) {
  .legend dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legend dd { margin-bottom: 10px; }
}

@media (max-width: 860px) {
  .attention { align-self: flex-start; white-space: normal; }
  .usage, .usage tbody, .usage tr, .usage td { display: block; width: 100%; }
  .usage { background: transparent; border: 0; overflow: visible; }
  .usage thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .usage tr { margin-bottom: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .usage td, .usage tbody tr:last-child td { padding: 4px 0; border: 0; }
  .usage td[data-label] { display: flex; gap: 10px; align-items: center; }
  .usage td[data-label]::before { content: attr(data-label); flex: 0 0 120px; font-family: var(--font-body), sans-serif; font-size: 12px; color: var(--muted); }
  .usage-share { flex: 1; }
}

/* --- users ("Uživatelé", admin, 3.3) ----------------------------------------------------------- */

.invite-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.invite-email { flex: 1 1 260px; min-width: 0; }
.invite-role { flex: 0 0 180px; }
.invite-form .field-error { flex-basis: 100%; }

.users {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.users th { padding: 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.users td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.users th:first-child, .users td:first-child { padding-left: 18px; }
.users th:last-child, .users td:last-child { padding-right: 18px; }
.users tbody tr:last-child td { border-bottom: 0; }
/* Extra width goes to the name and e-mail, not into gaps between short columns. */
.users th:first-child { width: 28%; }
.users .th-actions { text-align: right; }
.users td > span { display: block; }
.user-cell-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.user-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.user-no-discord { color: var(--status-paused-fg); }
/* Room for "Pozvánka, čeká na login" on two lines, also next to the no-JavaScript "Uložit". */
.user-state { min-width: 9em; font-size: 13px; font-weight: 600; }
.user-state.is-active { color: var(--ok-fg); }
.user-state.is-invited { color: var(--status-paused-fg); }
.user-state.is-blocked { color: var(--error); }
.urow.is-blocked td:not(.user-actions) { opacity: 0.6; }
.urow.is-highlight td { background: #fbf3e8; }
.role-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.user-actions { text-align: right; white-space: nowrap; }
.user-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.user-buttons form { margin: 0; }

/* Everyone's sniffets (3.4), the same table under its own heading: a narrow owner column,
   the rest shared by the sniffet's name and its sources. */
/* A change without JavaScript comes back to #all-sniffets; on phones below the sticky bar. */
.users-head { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 8px; scroll-margin-top: 80px; }
.users-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.users-head-note { font-size: 14px; color: var(--muted); }
.all-sniffets th:first-child { width: 14%; }
.all-sniffets th:nth-child(2) { width: 24%; }
.as-owner-text > span { display: block; overflow-wrap: anywhere; }
/* Breaks only between words, so a comma stays with its source name. */
.as-sources { font-size: 13px; color: var(--muted); }
.user-state.is-paused { color: var(--muted); }
.user-blocked { color: var(--error); }

/* As cards, like the Sniffety list: phones and windows too narrow for the table. */
@media (max-width: 1199px) {
  .users, .users tbody, .users tr, .users td { display: block; width: 100%; }
  .users { background: transparent; border: 0; overflow: visible; }
  .users thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .users tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .users tr { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .users td, .users td:first-child, .users td:last-child, .users tbody tr:last-child td { padding: 4px 0; border: 0; }
  .users td:first-child { padding-bottom: 8px; }
  .users td[data-label]:not(:first-child) { display: flex; gap: 10px; align-items: center; }
  .users td[data-label]:not(:first-child)::before { content: attr(data-label); flex: 0 0 100px; font-family: var(--font-body), sans-serif; font-size: 12px; color: var(--muted); }
  .user-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 10px !important; text-align: left; white-space: normal; }
  .urow.is-highlight { background: #fbf3e8; }
  .urow.is-highlight td { background: transparent; }
  /* A sniffet's card starts with its name; the owner follows, labelled like the other lines. */
  .users.all-sniffets tr { display: flex; flex-direction: column; }
  .users.all-sniffets td.as-name { order: -1; padding-bottom: 8px; }
  .users.all-sniffets td.as-owner { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
  .users.all-sniffets td.as-owner::before { content: "Vlastník"; flex: 0 0 100px; font-family: var(--font-body), sans-serif; font-size: 12px; color: var(--muted); }
}

@media (max-width: 860px) {
  .users tbody { grid-template-columns: minmax(0, 1fr); }
  .invite-role, .invite-form .btn { flex: 1 1 100%; }
}

/* --- pointer feedback -------------------------------------------------------------------------
   Every button and button-like toggle reacts to the mouse, so it reads as clickable. Only on
   devices that can hover: a tap on a phone mustn't leave a button stuck in its hover colour
   (touch gets the pressed nudge of .btn:active instead). Kept last and in this order, because
   several rules share one specificity and the later one wins (the trash can's red over the
   outline's grey). */

.pill span, .tile, .pill-link { transition: background-color 120ms ease, border-color 120ms ease; }

@media (hover: hover) {
  .btn-outline:hover { border-color: var(--ink); background: var(--chip); color: var(--ink); }
  .btn-dark:hover { background: #4a443c; color: var(--on-dark); }
  .btn-accent:hover { background: var(--accent-hover); color: var(--surface); }
  .btn-light:hover { background: #eba06a; color: var(--ink); }
  .btn-danger:hover { background: var(--error-bg); color: var(--error); }
  .btn-danger-solid:hover { background: #7a1f14; color: var(--surface); }
  .btn-trash:hover { border-color: var(--error); color: var(--error); background: var(--error-bg); }
  .btn-star.is-on:hover { color: var(--accent-hover); background: var(--status-paused-bg); }
  .btn-dark-outline:hover { border-color: var(--on-dark-muted); background: var(--ink-2); color: var(--on-dark); }
  .icon-button:hover { border-color: var(--on-dark-muted); background: var(--ink-2); color: var(--on-dark); }
  .pill-link:hover { border-color: var(--ink); background: var(--chip); color: var(--ink); }
  .pill-link[aria-current="true"]:hover, .pill-link[aria-current="page"]:hover { background: var(--ink); color: var(--on-dark); }
  /* Toggles: the unchecked ones; a checked one already looks pressed. */
  .pill:hover input:not(:checked) + span { border-color: var(--ink); background: var(--chip); }
  .tile:not(:has(input:checked)):hover { border-color: var(--muted); background: var(--chip); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .pill span, .tile, .pill-link { transition: none; }
  .btn:active:not(.is-disabled) { transform: none; }
}