/* Theme: dark by default; [data-theme="light"] opts into the light palette. */
:root {
  color-scheme: dark;
  --bg: #0a0c10;
  --surface: #12151b;
  --raised: #181c24;
  --text: #e8eaf0;
  --muted: #8a93a6;
  --border: #232833;
  --accent: #7b8cff;
  --accent-strong: #5b6cf0;
  --on-accent: #fff;
  --accent-soft: rgb(123 140 255 / .14);
  --ok: #3ecf8e;
  --ok-soft: rgb(62 207 142 / .12);
  --danger: #f87171;
  --danger-soft: rgb(248 113 113 / .12);
  --warn: #f5b84a;
  --warn-soft: rgb(245 184 74 / .12);
  --warm: #fb923c;
  --chrome-bg: rgb(10 12 16 / .78);
  --shadow: 0 10px 30px rgb(0 0 0 / .5);
  --radius: .75rem;
  --tabs-height: 3.5rem;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f8;
  --surface: #fff;
  --raised: #f8f9fb;
  --text: #171b26;
  --muted: #667085;
  --border: #e1e4eb;
  --accent: #4452e0;
  --accent-strong: #3643cc;
  --accent-soft: rgb(68 82 224 / .1);
  --ok: #17803d;
  --ok-soft: rgb(23 128 61 / .1);
  --danger: #c0281c;
  --danger-soft: rgb(192 40 28 / .08);
  --warn: #a15c07;
  --warn-soft: rgb(161 92 7 / .1);
  --warm: #c2570c;
  --chrome-bg: rgb(255 255 255 / .8);
  --shadow: 0 10px 30px rgb(16 24 40 / .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-color: transparent; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }
h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; margin: 0 0 1rem; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* Forms and sign-up / log-in cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
main.auth { width: min(26rem, 100% - 2rem); margin: 3rem auto; }
form { display: grid; gap: .9rem; }
label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
input, select, textarea {
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  color: var(--text);
  background: var(--raised);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--border)); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
form button {
  padding: .65rem;
  border: 0;
  border-radius: .55rem;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
form button:hover:not(:disabled) { filter: brightness(1.12); }
form button:active:not(:disabled) { transform: translateY(1px); }
form button:disabled { opacity: .5; cursor: default; }
.note {
  margin: 0;
  padding: .7rem .85rem;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: .55rem;
  font-size: .85rem;
  color: var(--muted);
}

.narrow { max-width: 26rem; }

/* Members */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
button.small {
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--raised);
  color: var(--text);
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
button.small:hover { border-color: var(--muted); }
button.danger { color: var(--danger); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
form button.secondary { background: var(--raised); color: var(--text); border: 1px solid var(--border); }
form button.secondary:hover:not(:disabled) { filter: none; border-color: var(--muted); }
.card + .roster { margin-top: 1rem; }
.roster { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.roster > li { padding: .65rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; transition: border-color .15s; }
.roster > li:hover { border-color: color-mix(in srgb, var(--muted) 40%, var(--border)); }
.person { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.person .muted { font-size: .85rem; }
.badge { padding: .1rem .55rem; border-radius: 1rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.badge.leader { background: var(--accent-strong); color: var(--on-accent); }
.badge.core { background: var(--accent-soft); color: var(--accent); }
.left-list summary { cursor: pointer; padding: .5rem 0; color: var(--muted); }
.left-list summary:hover { color: var(--text); }

/* Header: brand, group switcher, menu */
.chrome { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); }
/* The blur lives on a pseudo-element: backdrop-filter on .chrome itself would trap the fixed bottom tabs inside it. */
.chrome::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--chrome-bg); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: .6rem 1rem;
}
.brand { margin-right: auto; font-weight: 650; letter-spacing: -.01em; }
.brand::before {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.group-switcher { padding: .35rem .6rem; border-radius: .55rem; max-width: 40vw; font-size: .875rem; }

.menu { position: relative; }
.menu summary {
  cursor: pointer;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: var(--raised);
  font-size: .875rem;
  list-style: none;
  transition: border-color .15s;
}
.menu summary:hover, .menu[open] summary { border-color: var(--muted); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 12rem;
  display: grid;
  gap: .1rem;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .7rem;
  box-shadow: var(--shadow);
}
.menu-panel p { margin: 0; padding: .25rem .5rem; }
.menu-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: .4rem !important; }
.menu-panel a { padding: .4rem .5rem; border-radius: .4rem; color: var(--text); text-decoration: none; }
.menu-panel a:hover, .menu-panel button.theme:hover { background: var(--raised); }
button.theme {
  padding: .4rem .5rem;
  border: 0;
  border-radius: .4rem;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
button.link {
  margin-top: .35rem;
  padding: .5rem .5rem .25rem;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--danger);
  text-align: left;
  cursor: pointer;
}

/* Tabs: bottom bar on phones */
.tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  height: var(--tabs-height);
  background: var(--chrome-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--border);
}
.tabs a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--accent); font-weight: 600; }

main { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem calc(var(--tabs-height) + 1.5rem); }

/* Tabs: top bar on laptops */
@media (min-width: 768px) {
  .tabs {
    position: static;
    height: auto;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 .5rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
  }
  .tabs a {
    flex: none;
    padding: .6rem 1rem;
    font-size: .9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .tabs a[aria-current] { border-bottom-color: var(--accent); }
  main { padding-bottom: 2rem; }
}

/* Log and History */
.pickers { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .9rem; }
.card h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .75rem; }
.register-row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; align-items: center; gap: .75rem; }
label.check { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--text); }

/* Paste and preview */
.paste-grid { display: grid; gap: 1rem; align-items: start; }
.pickers.three { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.card h2 { margin-top: .5rem; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.line { padding: .3rem .6rem; border-radius: .4rem; border-left: 3px solid var(--border); background: var(--raised); overflow-wrap: anywhere; }
.line .tag { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-right: .35rem; }
.line.present { background: var(--ok-soft); border-color: var(--ok); }
.line.absent { background: var(--danger-soft); border-color: var(--danger); }
.line.unsure { background: var(--warn-soft); border-color: var(--warn); }
.line.visitor { background: var(--accent-soft); border-color: var(--accent); }
.line.ignored { color: var(--muted); }
.paste-row { display: grid; gap: .4rem; }
.status-cell { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
button.small[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.keywords { margin-top: .75rem; }
.keywords summary { cursor: pointer; }
.actions select { width: auto; }
@media (min-width: 768px) {
  .paste-grid { grid-template-columns: 1fr 1fr; }
}

/* Dashboard */
.snapshots { display: grid; gap: 1rem; margin-bottom: 1rem; }
.snapshots .card h2 { margin: 0 0 .5rem; }
.snapshots p, .checklist { margin: 0 0 .4rem; }
.checklist { list-style: none; padding: 0; }
.card + .snapshots, .card + h2 { margin-top: 1rem; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--danger); }
h3 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.25rem 0 .5rem; }
.checkin form { margin-top: .6rem; }
.checkin.greyed { opacity: .55; }
@media (min-width: 768px) {
  .snapshots { grid-template-columns: 1fr 1fr; }
}

/* Heatmap */
.filter-bar p { margin: 0 0 .6rem; font-size: .85rem; }
.filter-bar .pickers { margin-bottom: 0; }
.heatmap-controls { justify-content: space-between; align-items: end; margin: 1rem 0 .5rem; }
.heatmap-controls .type-tabs { display: flex; gap: .4rem; }
.legend { font-size: .85rem; margin: 0 0 .5rem; }
.heatmap-scroll { overflow-x: auto; }
.heatmap { border-collapse: collapse; font-size: .75rem; }
.heatmap th, .heatmap td { padding: .2rem; text-align: center; white-space: nowrap; background: var(--surface); }
.heatmap thead th { color: var(--muted); font-weight: 400; line-height: 1.1; }
.heatmap th.name { position: sticky; left: 0; z-index: 1; text-align: left; padding-right: .6rem; border-right: 1px solid var(--border); font-weight: 400; font-size: .85rem; }
.heatmap td.rate { text-align: right; padding-left: .6rem; color: var(--muted); }
.cell { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--border); background: none; color: var(--muted); font-size: .85rem; line-height: 1; cursor: pointer; transition: transform .1s, border-color .15s; }
.cell:hover { transform: scale(1.12); }
.cell.present { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.cell.absent { color: var(--danger); border-color: var(--danger); }
.heatmap-controls .type-tabs { display: none; }
@media (max-width: 767px) {
  .heatmap-controls .type-tabs { display: flex; }
  .off-tab { display: none; }
}

/* Trends */
.trends-controls { justify-content: space-between; align-items: center; margin: 0 0 .5rem; }
.trends-controls .type-tabs { display: flex; gap: .4rem; }
.trends { display: block; width: 100%; max-width: 720px; font-size: 10px; fill: var(--muted); }
.trends .grid { stroke: var(--border); }
.trends .point { cursor: pointer; }

/* Person view */
.strip { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.cell.blank { display: inline-block; border-color: transparent; }
.card + .card { margin-top: 1rem; }

/* Insights */
.chat { display: grid; gap: .6rem; margin: 1rem 0; }
.bubble { margin: 0; padding: .65rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; overflow-wrap: anywhere; }
.bubble.user { background: var(--accent-soft); border-color: transparent; justify-self: end; max-width: 85%; }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; }
.answer table { border-collapse: collapse; font-size: .9rem; }
.answer th, .answer td { padding: .3rem .65rem; border: 1px solid var(--border); text-align: left; }
.answer th { background: var(--raised); }
.presets { margin-bottom: .75rem; }
.ask { grid-template-columns: 1fr auto; align-items: center; }