/* DataLookout dashboard -- base: typography, navigation, footer, utilities, responsive. Needs tokens.css. */
/* === Base === */
body {
  font-family: var(--dl-font-sans);
  background: var(--dl-canvas);
  color: var(--dl-ink-1);
  font-size: var(--dl-fs-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dl-font-sans);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--dl-ink-1);
}
/* DESIGN.md §1: the serif is for a trial's title and nothing else. */
.dl-trial-title {
  font-family: var(--dl-font-serif);
  font-size: var(--dl-fs-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--dl-ink-1);
}
a { color: var(--dl-link); text-decoration: none; }
a:hover { color: var(--dl-link-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--dl-focus-ring); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* === Navigation (DESIGN.md §5 Nav): paper bar, 3px brand rule on the top edge, no dark chrome === */
.dl-topline { height: 3px; background: var(--dl-brand-mark); }
.navbar {
  background: var(--dl-panel) !important;
  border-bottom: 1px solid var(--dl-rule);
  padding: 0;
  min-height: 52px;
  position: relative;
  z-index: 1050;
}
.navbar > .container {
  height: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.navbar-brand {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--dl-ink-1) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.navbar-brand .brand-data, .navbar-brand .brand-lookout { color: var(--dl-ink-1); }
.navbar-brand img { width: 22px; height: 22px; }
.navbar .nav-link {
  color: var(--dl-ink-2) !important;
  font-size: 0.84rem;
  font-weight: 400;
  padding: 15px 10px !important;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dl-transition), border-color var(--dl-transition);
}
.navbar .nav-link:hover { color: var(--dl-ink-1) !important; text-decoration: none; }
.navbar .nav-link.active { color: var(--dl-action) !important; border-bottom-color: var(--dl-action); }
.navbar-toggler { border-color: var(--dl-rule-strong); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2340403c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-text { font-size: 0.84rem; color: var(--dl-ink-3); }
.navbar .btn-outline-secondary {
  border-color: var(--dl-rule-strong);
  color: var(--dl-ink-1) !important;
  background: var(--dl-panel);
  font-size: 0.82rem;
  padding: 0.3rem 0.65rem;
}
.navbar .btn-outline-secondary:hover { background: var(--dl-panel-2); border-color: var(--dl-rule-strong); color: var(--dl-ink-1) !important; }
.navbar .dropdown-toggle::after { opacity: 0.6; }
@media (max-width: 991.98px) {
  .navbar .nav-link { padding: 10px 4px !important; border-bottom: none; }
  .navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--dl-action); padding-left: 10px !important; }
  .navbar-collapse { padding-bottom: 12px; }
}

/* === Footer (DESIGN.md §5): paper, rule above === */
footer {
  background: var(--dl-canvas);
  color: var(--dl-ink-3);
  padding: 1.25rem 0 1.5rem;
  margin-top: 3rem;
  font-size: 0.78rem;
  border-top: 1px solid var(--dl-rule);
  letter-spacing: 0;
}
footer a { color: var(--dl-ink-2); text-decoration: none; transition: color var(--dl-transition); }
footer a:hover { color: var(--dl-ink-1); text-decoration: underline; }
footer .dl-wordmark { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--dl-ink-1); }
footer .dl-wordmark:hover { text-decoration: none; }
footer .dl-fineprint { margin-top: 10px; font-size: 0.72rem; color: var(--dl-ink-3); text-align: center; }

/* === Utility === */
.text-label {
  font-size: var(--dl-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-ink-3);
}
.font-mono { font-family: var(--dl-font-mono); }
.badge-count {
  background: transparent;
  color: var(--dl-ink-3);
  border: 1px solid var(--dl-rule-strong);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15em 0.5em;
  border-radius: var(--dl-radius-sm);
  font-variant-numeric: tabular-nums;
}

/* === Inbox state (DESIGN.md tokens only): unread dot, row focus, done affordance, nav count. === */
.dl-unread {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dl-action);
  margin-right: 6px;
  vertical-align: middle;
}
.dl-row--focus { background: var(--dl-panel-2); }
.dl-save-error {
  font-size: 0.75rem;
  color: var(--dl-critical-ink);
  margin-top: 2px;
}
.dl-row__done {
  padding: 9px 0;
  font-size: 0.8125rem;
  color: var(--dl-ink-3);
  display: flex; align-items: center; gap: 8px;
}
.dl-row__done .dl-undo-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--dl-link); font: inherit; text-decoration: underline;
}
.dl-row__done .dl-undo-btn:hover { color: var(--dl-link-hover); }
.btn-quiet {
  background: none; border: none; cursor: pointer;
  padding: 2px 8px; margin: 0;
  color: var(--dl-ink-3); font-size: 0.75rem;
  border-radius: var(--dl-radius-sm);
  transition: color var(--dl-motion-fast) ease, background var(--dl-motion-fast) ease;
}
.btn-quiet:hover { color: var(--dl-ink-1); background: var(--dl-panel-2); }
/* Watchlist dropdown: a one-line description under each item. */
.dl-watchlist-menu .dropdown-item { padding-top: 6px; padding-bottom: 6px; }
.dl-watchlist-menu .dl-menu-sub { display: block; font-size: .75rem; color: var(--dl-ink-3); }
.dl-show-done-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--dl-ink-3); font-size: 0.78rem;
  padding: 0; margin: 0 0 8px;
}
.dl-show-done-toggle:hover { color: var(--dl-ink-1); text-decoration: underline; }