/* periomaxer.com/txp theme (build_site.py adds this after style.css).
   No orange anywhere on this page except the PerioMaxer logo (Max,
   2026-10-24): white and light grey surfaces, ink type, and shadows for
   depth and selection. Light only. The accent is light blue: underlines,
   outlines and the slider's fill. A selected tab, list item or button
   is filled grey (--accent-soft). Text stays ink, never blue. */

:root[data-site="1"] {
  --bg: #FFFFFF;
  --panel: #F6F6F7;
  --line: #E4E4E7;
  --text: #1A1206;
  --muted: #5F5F66;
  --accent: #6CB4F5;
  --accent-soft: #E6E6E9;
  --good: #047857;
  --warn: #1A1206;
  --bad: #B3261E;
  --chip: #F4F4F5;
  --shadow: 0 24px 60px rgba(24, 24, 40, 0.14), 0 8px 20px rgba(24, 24, 40, 0.08);
  color-scheme: light;
}

[data-site="1"] body {
  font-family: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #FFFFFF;
  color: var(--text);
}
[data-site="1"] h1, [data-site="1"] h2, [data-site="1"] h3 {
  font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Header: the round logo, the page name, no developer tag. */
[data-site="1"] .top { border-bottom-color: var(--line); }
[data-site="1"] .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: inherit; text-decoration: none; }
[data-site="1"] .brand img { width: 34px; height: 34px; border-radius: 50%; }
[data-site="1"] #tabs button[data-tab="problems"] { display: none; }
[data-site="1"] #tabs button.on { background: var(--accent-soft); color: var(--text); }

/* Links and small actions: ink with a light blue underline. */
[data-site="1"] a,
[data-site="1"] .linkish,
[data-site="1"] .leads button,
[data-site="1"] .tag,
[data-site="1"] .stat .adj {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
[data-site="1"] .count {
  color: var(--text);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 0 6px;
}
[data-site="1"] .count:empty { display: none; }
[data-site="1"] .side .item.on,
[data-site="1"] .src:hover,
[data-site="1"] .badge.fit,
[data-site="1"] .seg button.on { background: var(--accent-soft); color: var(--text); }
[data-site="1"] .tree .p,
[data-site="1"] .choices .btn.on,
[data-site="1"] .pb-toggle .pb-edit { color: var(--text); }

/* Buttons: quiet outlines; the main one is a light grey fill. */
[data-site="1"] .btn { border-radius: 8px; border-color: var(--line); }
[data-site="1"] .btn:hover { border-color: #A1A1AA; }
[data-site="1"] .btn.primary { background: #EDEDEF; border-color: #D4D4D8; color: var(--text); font-weight: 600; }
[data-site="1"] .btn.primary:hover { background: #E4E4E7; border-color: #A1A1AA; }

[data-site="1"] .details select.set { border-color: var(--accent); }
[data-site="1"] .gate { border-width: 1px; background: var(--panel); }

[data-site="1"] .mapwrap { border-color: var(--line); }
[data-site="1"] .drawer { border-left-color: var(--line); }
[data-site="1"] .foot { color: var(--muted); border-top-color: var(--line); }

@media (max-width: 640px) {
  [data-site="1"] #tabs { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }
  [data-site="1"] #tabs button { flex: none; }
}