/* ================================================================
   Teradive — Clean white design system
   ================================================================ */

:root {
  --white: #ffffff;
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f4;
  --gray-200: #e8eaed;
  --gray-300: #dadce0;
  --gray-400: #bdc1c6;
  --gray-500: #9aa0a6;
  --gray-600: #80868b;
  --gray-700: #5f6368;
  --gray-800: #3c4043;
  --gray-900: #202124;
  --blue-500: #1a73e8;
  --blue-600: #1765cc;
  --blue-50: #e8f0fe;
  --green-600: #1e8e3e;
  --green-50: #e6f4ea;
  --red-600: #d93025;
  --red-50: #fce8e6;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow: 0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow-lg: 0 4px 12px rgba(60, 64, 67, 0.15);
  --transition: 150ms ease;

  /* Editorial palette shared with the landing page. Slightly warmer ink
     and an off-white page background that the original bright white was
     missing. Mono stack used for measurement labels and code snippets. */
  --ink: #16191d;
  --ink-soft: #4a5057;
  --rule: #e6e8eb;
  --page-bg: #fbfbfc;
  --tint: #f6f8fb;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ---- Navigation ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.nav-logo:hover { text-decoration: none; color: var(--blue-600); }

.brand-mark {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}

.nav-link:hover {
  background: var(--tint);
  text-decoration: none;
  color: var(--ink);
}

/* Small flask icon marking Projects as fresh / experimental. */
.nav-link-exp { display: inline-flex; align-items: center; gap: 5px; }
.nav-flask { color: var(--blue-500); flex: none; margin-top: -1px; }
.nav-link-exp:hover .nav-flask { color: var(--blue-600); }

/* Tiny beta pill inside a nav-link label. */
.nav-link-beta {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-500);
  background: var(--blue-50);
  border: 1px solid #c5d9f5;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 14px;
}

/* ---- Social page (compose + share-intent links) ---- */

.social-textarea {
  font-family: 'Inter', sans-serif;
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.social-card-footer {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.social-ai-controls {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.social-ai-controls .form-input { flex: 1; min-width: 0; }
.social-ai-controls .btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.social-ai-controls .ai-icon { font-size: 14px; }

/* Social page mirrors the look of the Users/Sites management pages:
   no settings-card chrome, plain page header, fields rendered directly
   with the .form-group/.form-input/.form-hint classes the rest of the
   app's forms use. On wide screens, message and link sit side by side
   with the topic/brief row spanning both columns above them. */
.social-outro { max-width: 760px; margin-top: 24px; }
.social-actions-hint { margin: 20px 0 10px; max-width: 760px; }

.social-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}

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

@media (min-width: 900px) {
  .social-textarea { min-height: 180px; }
}

.social-drafts { margin-top: 40px; }
.social-drafts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-draft {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--white);
}
.social-draft-body { min-width: 0; flex: 1; }
.social-draft-message {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.social-draft-when {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.social-draft-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Branded share buttons. Each platform's hover state nudges into its
   brand color so the destination of the click is obvious. */
.social-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 150ms, color 150ms, background 150ms, box-shadow 150ms;
}

.social-share-btn svg { flex-shrink: 0; }

.social-share-btn:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(60, 64, 67, 0.04), 0 6px 14px -10px rgba(60, 64, 67, 0.22);
}

.social-share-btn.social-linkedin:hover { border-color: #0a66c2; color: #0a66c2; }
.social-share-btn.social-facebook:hover { border-color: #1877f2; color: #1877f2; }
.social-share-btn.social-x:hover        { border-color: var(--ink); color: var(--ink); background: #f6f8fb; }

.social-share-btn.is-disabled,
.social-share-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.copy-icon {
  font-size: 14px;
  display: inline-block;
  width: 14px;
  text-align: center;
}

#x-room.is-over { color: var(--red-600); font-weight: 500; }

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-500);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  max-width: min(240px, calc(100vw - 24px));
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.avatar-dropdown.show { display: block; }

.dropdown-header { padding: 16px; }
.dropdown-name { font-weight: 600; font-size: 14px; color: var(--gray-900); }
.dropdown-email { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.dropdown-divider { height: 1px; background: var(--gray-200); }
.dropdown-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--gray-800);
  transition: background var(--transition);
}
.dropdown-item:hover {
  background: var(--gray-50);
  text-decoration: none;
}


/* ---- Flash messages ---- */

.flash-container {
  max-width: 560px;
  margin: 16px auto;
  padding: 0 24px;
}

.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.flash-msg { flex: 1 1 auto; }

.flash-close {
  flex: none;
  border: none;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
  border-radius: 4px;
}
.flash-close:hover { opacity: 1; }

.flash.is-dismissing { opacity: 0; transform: translateY(-4px); }

.flash-success { background: var(--green-50); color: var(--green-600); }
.flash-error   { background: var(--red-50);   color: var(--red-600); }
.flash-info    { background: var(--blue-50);  color: var(--blue-500); }


/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 24px;
  min-height: 42px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
}

.btn-primary {
  background: var(--blue-500);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--blue-600);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.btn-secondary {
  background: var(--white);
  color: var(--blue-500);
  border: 1px solid var(--gray-300);
}
.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  text-decoration: none;
}

.btn-lg { padding: 12px 32px; font-size: 15px; }
.btn-full { width: 100%; }


/* ---- Forms ---- */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px var(--blue-50);
}

.form-input::placeholder {
  color: var(--gray-400);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  background: var(--white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 6px 32px 6px 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  outline: none;
  min-width: 96px;
}

.select:hover:not(:disabled) {
  border-color: var(--gray-400);
  background-color: var(--gray-50);
}

.select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px var(--blue-50);
}

.select:disabled {
  background-color: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.7;
}

.select-yes {
  color: var(--green-600);
  background-color: var(--green-50);
  border-color: transparent;
}

.select-no {
  color: var(--red-600);
  background-color: var(--red-50);
  border-color: transparent;
}

.select-admin {
  color: var(--blue-600);
  background-color: var(--blue-50);
  border-color: transparent;
  font-weight: 600;
}

.form-error {
  display: block;
  font-size: 12px;
  color: var(--red-600);
  margin-top: 4px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-500);
}


.form-row-split {
  justify-content: space-between;
}

.form-link {
  font-size: 13px;
  font-weight: 500;
}


/* ---- Auth pages ---- */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(26, 115, 232, 0.10), transparent 70%),
    radial-gradient(620px 420px at -8% 110%, rgba(26, 115, 232, 0.06), transparent 65%),
    var(--page-bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 1px 0 rgba(60, 64, 67, 0.04), 0 12px 28px -16px rgba(60, 64, 67, 0.18);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gray-900);
  text-align: center;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.auth-logo .brand-mark {
  width: 34px;
  height: 34px;
}

.auth-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-600);
  text-align: center;
  margin-bottom: 32px;
}

.auth-desc {
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 28px;
  line-height: 1.5;
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: var(--gray-600);
  margin-top: 24px;
}

.auth-fineprint {
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 12px;
}

.form-checkbox-group { margin: 4px 0 16px; }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  line-height: 1.45;
}

.form-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.form-checkbox a { color: var(--blue-500); }

.btn-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.legal-page { max-width: 760px; }

.legal-prose {
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.65;
}

.legal-prose h2 {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 32px 0 8px;
}

.legal-prose p { margin: 0 0 14px; }
.legal-prose ul { margin: 0 0 14px 22px; padding: 0; }
.legal-prose li { margin: 4px 0; }
.legal-prose a { color: var(--blue-500); }

.legal-prose code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--tint);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}

.api-version {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--blue-500);
  background: var(--blue-50);
  border: 1px solid #c5d9f5;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.api-method {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: #e6f4ea;
  color: var(--green-600);
  border: 1px solid #c8e2d2;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
}

.api-code {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #0f1217;
  color: #d6dde6;
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}

.api-code code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

.legal-tail {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  font-size: 13px;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.auth-divider span {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
}

.btn-google {
  background: var(--white);
  color: var(--gray-800);
  border: 1px solid var(--gray-300);
  font-weight: 500;
  gap: 10px;
}

.btn-google:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.google-icon { flex-shrink: 0; }

.resend-box {
  margin-top: 20px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
  text-align: center;
}

.resend-box p {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 10px;
}


/* ---- Landing page ---- */

.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.landing-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.landing-logo {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.landing-tagline {
  font-size: 20px;
  color: var(--gray-700);
  font-weight: 400;
  margin-bottom: 8px;
}

.landing-sub {
  font-size: 16px;
  color: var(--gray-500);
  max-width: 480px;
  margin-bottom: 40px;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-100);
}

.dot { margin: 0; }


/* ---- Dashboard / Pages ---- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px;
}

.page-narrow { max-width: 600px; }

.page-header { margin-bottom: 32px; }

.page-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}

.page-subtitle {
  font-size: 15px;
  color: var(--gray-600);
  margin-top: 4px;
}


/* ---- Cards ---- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

/* Compact headline KPI tiles — half the height of the old .card tiles
   (tighter padding, smaller value), shown at the top of the dashboard. */
.headline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.headline-stat {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.headline-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.headline-stat-value {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gray-900);
}
.headline-stat-value-sm {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 0;
}

.card-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Card header row — `card-label` aligned with a control on the right
   (e.g. a sort toggle). Eats the label's bottom margin so the row
   itself owns the spacing. */
.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-header-row .card-label { margin-bottom: 0; }

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sort-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gray-500);
  text-transform: uppercase;
  user-select: none;
}

.sort-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.sort-btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition);
}

.sort-btn:hover:not(.is-active) { color: var(--ink); }

.sort-btn.is-active {
  background: var(--white);
  color: var(--blue-500);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.sort-btn:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.card-value {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gray-900);
}

.card-note {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}


/* ---- Empty state ---- */

.empty-state {
  text-align: center;
  padding: 64px 24px;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-lg);
}

.empty-icon {
  color: var(--gray-400);
  margin-bottom: 16px;
}

.empty-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 8px;
}

.empty-text {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}


/* ---- Settings ---- */

.settings-form {
  margin-top: 8px;
}

/* ---- Settings page (card-based layout) ---- */

.page-settings {
  max-width: 760px;
}

.page-settings .page-header {
  margin-bottom: 28px;
}

.page-settings .page-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
}

.settings-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(60, 64, 67, 0.03);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.settings-card:hover {
  border-color: #d8dde2;
  box-shadow: 0 1px 0 rgba(60, 64, 67, 0.04), 0 8px 20px -16px rgba(60, 64, 67, 0.18);
}

.settings-card-header {
  padding: 22px 24px 6px;
}

.settings-card-subhead {
  padding-top: 18px;
}

.settings-card-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.settings-card-subtitle {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.settings-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.settings-card-desc code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--tint);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 4px;
}

.settings-card-body {
  padding: 16px 24px 4px;
}

.settings-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--tint);
  border-top: 1px solid var(--rule);
}

.settings-card-divider {
  height: 1px;
  background: var(--rule);
  margin: 8px 24px 0;
}

.settings-hint {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 6px 0 0;
}

/* Pretty toggle row inside Email preferences. */
.settings-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 10px 0 14px;
}

.settings-toggle input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--blue-500);
  width: 16px;
  height: 16px;
}

.settings-toggle-text { display: flex; flex-direction: column; gap: 2px; }

.settings-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.settings-toggle-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* API key display box. */
.settings-key-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}

.settings-key-box code {
  flex: 1;
  font-family: var(--mono);
  word-break: break-all;
  color: var(--ink);
}

.settings-key-copy { flex-shrink: 0; }

/* Inline link inside a card description (e.g. "View API documentation →"). */
.settings-inline-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--blue-500);
  font-weight: 500;
}

.settings-inline-link:hover { color: var(--blue-600); text-decoration: underline; }

/* Quiet-danger button: looks like a secondary button but signals
   destructiveness through red text. Used for "Disable API access" so it
   doesn't visually outweigh the primary "Regenerate" action. */
.btn.btn-danger-quiet {
  color: var(--red-600);
}

.btn.btn-danger-quiet:hover {
  color: var(--red-600);
  border-color: var(--red-600);
  background: var(--red-50);
}

/* Danger card: red-tinted header to signal the destructive intent. */
.settings-card-danger {
  border-color: #f1d6d2;
}

.settings-card-danger:hover {
  border-color: var(--red-600);
}

.settings-card-danger .settings-card-title {
  color: var(--red-600);
}

.settings-card-danger .settings-card-footer {
  background: var(--red-50);
  border-top-color: #f1d6d2;
}


/* ---- Site list ---- */

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}

.site-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.site-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gray-50);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-card-body { flex: 1; min-width: 0; }
.site-card-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Clear marker that a site has a public share link enabled. */
.site-public-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-600);
  background: var(--green-50);
  border: 1px solid #b7e0c2;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
}
.site-card-domain { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

.site-card-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  align-items: center;
}

.site-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 48px;
}

.site-stat-value {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
}

.site-stat-label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.site-stat-primary {
  min-width: 64px;
  padding: 6px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--gray-50);
  align-items: center;
}

.site-stat-primary .site-stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-stat-primary .site-stat-label {
  margin-top: 2px;
  color: var(--gray-700);
}

.site-stat-primary.is-active {
  background: var(--blue-50);
}

.site-stat-primary.is-active .site-stat-value {
  color: var(--blue-600);
}

.site-stat-secondary .site-stat-value {
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 500;
}

.site-stat-secondary .site-stat-label {
  font-size: 10px;
}

.site-card-arrow { color: var(--gray-400); flex-shrink: 0; }

/* Signup honeypot: moved off-screen rather than display:none, which some
   bots detect and skip. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Academic / Tech-company cards: stats.js locks each card to its tallest
   page; pin the prev/next row to the bottom so it never moves. */
.academic-section .card { display: flex; flex-direction: column; }
.academic-section .card .stat-list { flex: 1 0 auto; }

/* Drag grip for reordering site cards (static/js/dashboard.js). It sits
   inside the card's <a>, so the script swallows its clicks. */
.site-drag-handle {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: grab;
  align-self: stretch; /* full card height: an easy target to grab */
  padding: 0 6px;
  margin: -16px -10px -16px -14px;
  border-radius: var(--radius);
  touch-action: none; /* pointer events drive touch drags from the grip */
}
.site-drag-handle:hover { color: var(--gray-600); background: var(--gray-100); }
.site-drag-handle:active { cursor: grabbing; }
.site-card.is-settling {
  position: relative;
  z-index: 2;
  transition: transform 180ms ease;
}
.site-card.is-dragging {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
  transition: none;
}


/* ---- Geo stats ---- */

.geo-section { margin-top: 40px; }

.card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.stat-list { margin-top: 12px; }

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
}

.stat-row:last-child { border-bottom: none; }

/* Invisible filler that reserves a real row's height on short last pages
   so pagination doesn't jump. visibility:hidden keeps the layout box
   (including the border) without painting anything. */
.stat-row-placeholder { visibility: hidden; }

/* Language distribution pie (CSS conic-gradient) + legend. */
.pie-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 4px;
}
/* Bigger circle, narrower legend — give the chart itself more room. */
.pie-svg {
  width: 184px;
  height: 184px;
  flex-shrink: 0;
}
.pie-slice {
  transition: opacity 0.12s ease;
}
/* On hover, dim the rest so the pointed-at slice stands out (its native
   <title> tooltip names the language and its share). */
.pie-svg:hover .pie-slice { opacity: 0.4; }
.pie-svg .pie-slice:hover { opacity: 1; }
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 130px;
}
.pie-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
}
.pie-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.pie-legend-name {
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pie-legend-pct {
  margin-left: auto;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* World choropleth (Countries/Cities "Map" tab). The box carries .card,
   so the tab height-equalizer matches it to the Countries/Cities cards;
   the map is centered in whatever height that yields. */
.world-map-box {
  display: flex;
  flex-direction: column;
  /* Tighter than a default .card — a map needs little inner margin, so
     this hands the extra room to the map itself. */
  padding: 10px;
}
.world-map-mount {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--gray-500);
  font-size: 13px;
}
.world-map-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Base: light gray for no-visit countries (overrides the file's inherited
   fill:none), thin white borders. Visited countries fill blue — a class
   rule so it outranks the base by specificity. Binary: no shading, and no
   hover tone change (the <title> tooltip carries the count). */
.world-map-svg path[data-iso] {
  fill: var(--gray-100);
  stroke: var(--white);
  stroke-width: 0.5;
}
.world-map-svg path[data-iso].has-visits {
  fill: #2563eb;
}
.world-map-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.world-map-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray-500);
}
.world-map-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #2563eb;
}
.world-map-credit { font-size: 11px; color: var(--gray-400); }
.world-map-credit a { color: var(--gray-500); }

/* Language rows expand to show their per-locale breakdown (en-US, en-GB
   under English). The chevron is the affordance; sub-rows are indented
   and muted, mirroring the visits-table group/sub-row pattern. */
.stat-lang-row.is-clickable { cursor: pointer; }
.stat-lang-row.is-clickable:hover { background: var(--gray-50); }
.stat-lang-chevron {
  display: inline-block;
  width: 14px;
  margin-right: 4px;
  color: var(--gray-400);
  font-size: 11px;
}
.stat-lang-row.is-expanded .stat-lang-chevron { color: var(--blue-500); }
.stat-lang-subrow {
  padding-left: 26px;
  background: var(--gray-50);
}
.stat-lang-subrow .stat-name { font-size: 13px; color: var(--gray-500); }
.stat-lang-subrow .stat-count { font-size: 13px; color: var(--gray-500); }

.stat-row-aau {
  background: #f5f8fc;
  border-radius: 3px;
  border-bottom-color: #e6eef7;
}

/* Academic orgs that match no specific university list — slight gray so
   they don't read as plain unclassified rows. */
.stat-row-acad {
  background: #f6f7f9;
  border-radius: 3px;
  border-bottom-color: #e8eaef;
}

.aau-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 14px;
  text-decoration: none;
}

.aau-badge:hover {
  color: #374151;
  border-color: #9ca3af;
  text-decoration: none;
}

.stat-row-aua {
  background: #f5fbf7;
  border-radius: 3px;
  border-bottom-color: #e3f0e7;
}

.aua-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 14px;
  text-decoration: none;
}

.aua-badge:hover {
  color: #374151;
  border-color: #9ca3af;
  text-decoration: none;
}

.stat-row-the500 {
  background: #fbf7f5;
  border-radius: 3px;
  border-bottom-color: #f0e7e3;
}

.the500-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 14px;
}

.the500-badge,
.aau-badge,
.aua-badge { cursor: pointer; }

/* Institution-type row tints in the visits table — same palette and
   AAU > AUA > THE500 precedence as the academic panel's stat-row-* rows.
   Group rows tint at tr level (cells are transparent, so the row hover
   still shows through); sub-row cells paint their own white background,
   so tagged sub-rows need the tint at td level. */
.visits-table tr.visit-row-aau    { background: #f5f8fc; }
.visits-table tr.visit-row-aua    { background: #f5fbf7; }
.visits-table tr.visit-row-the500 { background: #fbf7f5; }
.visits-table tr.visit-row-acad   { background: #f6f7f9; }
.visits-table tr.visit-group-subrow.visit-row-aau td    { background: #f5f8fc; }
.visits-table tr.visit-group-subrow.visit-row-aua td    { background: #f5fbf7; }
.visits-table tr.visit-group-subrow.visit-row-the500 td { background: #fbf7f5; }
.visits-table tr.visit-group-subrow.visit-row-acad td   { background: #f6f7f9; }

/* Academic visits are framed. The frame is drawn with inset box-shadows
   on the cells rather than row borders: the table is border-collapse, so
   adjacent rows *share* their edge line, and two stacked academic rows of
   different types mixed frame colors on the shared border. Shadows paint
   strictly inside each row, so neighbors never bleed.

   The frame color tracks the institution type (same hue family as the
   row tint), set per-group in JS via the visit-frame-* classes; generic
   acad rows have no tint, so their frame defaults to gray. Sub-rows
   inherit the group's frame class so an expanded block reads as one
   frame: the group row draws the top, sub-rows the sides (the recolored
   indent rail doubles as the left edge), the last sub-row the bottom. */
.visits-table tr.visit-row-academic,
.visits-table tr.visit-subrow-academic { --acad-frame: #dde0e6; }
.visits-table tr.visit-frame-aau    { --acad-frame: #d3deef; }
.visits-table tr.visit-frame-aua    { --acad-frame: #cfe6d8; }
.visits-table tr.visit-frame-the500 { --acad-frame: #ecdcd2; }

.visits-table tr.visit-row-academic td {
  box-shadow: inset 0 1px 0 var(--acad-frame), inset 0 -1px 0 var(--acad-frame);
}
.visits-table tr.visit-row-academic td:first-child {
  box-shadow: inset 0 1px 0 var(--acad-frame), inset 0 -1px 0 var(--acad-frame),
              inset 1px 0 0 var(--acad-frame);
}
.visits-table tr.visit-row-academic td:last-child {
  box-shadow: inset 0 1px 0 var(--acad-frame), inset 0 -1px 0 var(--acad-frame),
              inset -1px 0 0 var(--acad-frame);
}
/* Expanded group row: open bottom — top and sides only. */
.visits-table tr.visit-row-academic.is-expanded td {
  box-shadow: inset 0 1px 0 var(--acad-frame);
}
.visits-table tr.visit-row-academic.is-expanded td:first-child {
  box-shadow: inset 0 1px 0 var(--acad-frame), inset 1px 0 0 var(--acad-frame);
}
.visits-table tr.visit-row-academic.is-expanded td:last-child {
  box-shadow: inset 0 1px 0 var(--acad-frame), inset -1px 0 0 var(--acad-frame);
}
/* Sub-rows: right side only via shadow; the indent rail border is the
   left edge. */
.visits-table tr.visit-subrow-academic td:last-child {
  box-shadow: inset -1px 0 0 var(--acad-frame);
}
.visits-table tr.visit-subrow-academic td.visit-subrow-indent {
  border-left-color: var(--acad-frame);
}
/* Last sub-row closes the frame along its bottom. (Declared after the
   side rules so the equal-specificity :last-child override wins.) */
.visits-table tr.visit-subrow-academic-last td {
  box-shadow: inset 0 -1px 0 var(--acad-frame);
}
.visits-table tr.visit-subrow-academic-last td:last-child {
  box-shadow: inset 0 -1px 0 var(--acad-frame), inset -1px 0 0 var(--acad-frame);
}

/* In the visits table the badge lives in the leftmost toggle column —
   next to the chevron / page-count pill on groups, alone on single-page
   rows — so it never competes with the ellipsis-truncated org name. */
.visit-org-badge {
  margin-left: 0;
  margin-right: 0;
}
.visit-group-subrow td.visit-subrow-indent .visit-org-badge { margin-left: 8px; }

/* Generic academic marker on visits-table rows whose org classifies as
   academic but matches no specific university list. Same visual family
   as the AAU/AUA/THE500 badges, but not clickable (no modal behind it). */
.visit-acad-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2e7d52;
  background: transparent;
  border: 1px solid #b9dcc8;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 14px;
}

.tag-modal-name {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.tag-modal-link-wrap {
  margin-top: 12px;
}

.tag-modal-link {
  font-size: 13px;
  color: var(--blue-600, #1a73e8);
  text-decoration: none;
}

.tag-modal-link:hover {
  text-decoration: underline;
}

.stat-name {
  font-size: 14px;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stat-flag {
  display: inline-block;
  margin-right: 2px;
  font-size: 15px;
  line-height: 1;
  vertical-align: -1px;
}
.stat-detail {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stat-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}

.stat-empty {
  font-size: 13px;
  color: var(--gray-400);
  padding: 8px 0;
}

.card-value-sm {
  font-size: 16px;
  word-break: break-all;
}


/* ---- Daily histogram ---- */

.histogram-section {
  margin-bottom: 40px;
}

.histogram-card {
  padding: 24px;
}

.histogram-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.histogram-peak {
  font-size: 12px;
  color: var(--gray-600);
}

.histogram-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin: 8px 0 4px;
}

.histogram-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  cursor: default;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
}

.histogram-bar-fill {
  width: 100%;
  background: var(--blue-500);
  border-radius: 2px 2px 0 0;
  min-height: 1px;
  transition: background var(--transition);
}

.histogram-bar.is-zero .histogram-bar-fill {
  background: var(--gray-200);
  height: 2px;
}

.histogram-bar:hover .histogram-bar-fill,
.histogram-bar:focus-visible .histogram-bar-fill {
  background: var(--blue-600);
}

.histogram-bar:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.histogram-labels {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.histogram-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-600);
  letter-spacing: 0.02em;
}

.histogram-label.is-weekend {
  color: var(--blue-600, #1a73e8);
}

.histogram-bar.is-weekend .histogram-bar-fill {
  background: var(--blue-300, #8ab4f8);
}

.histogram-bar.is-weekend.is-zero .histogram-bar-fill {
  background: var(--gray-200);
}

.histogram-bar.is-weekend:hover .histogram-bar-fill,
.histogram-bar.is-weekend:focus-visible .histogram-bar-fill {
  background: var(--blue-500);
}

.histogram-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--gray-600);
}

@media (max-width: 480px) {
  .histogram-chart {
    height: 96px;
    gap: 2px;
  }
  .histogram-card {
    padding: 20px;
  }
}


/* ---- Snippet ---- */

.snippet-section, .visits-section {
  margin-top: 40px;
}

.section-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.section-desc {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 16px;
}

/* Tab bar combining the Academic / Tech visitor panels into one section
   (markup in _visitor_panels.html). Tabs replace the section titles, so
   they borrow the section-title type treatment; the active tab carries
   an accent underline on the shared baseline rule. */
.visitor-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.visitor-tab {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 12px 8px;
  cursor: pointer;
}

.visitor-tab:hover { color: var(--gray-900); }

.visitor-tab.is-active {
  color: var(--gray-900);
  border-bottom-color: var(--blue-500);
}

.visitor-tab-panel.is-hidden { display: none; }

.section-desc code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.snippet-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--transition);
}

.snippet-toggle:hover { background: var(--gray-50); }
.snippet-toggle .section-title { margin-bottom: 0; flex-shrink: 0; }

.toggle-hint {
  flex: 1 1 180px;
  font-size: 13px;
  color: var(--green-600);
  font-weight: 500;
}

.toggle-arrow {
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.toggle-arrow.open { transform: rotate(180deg); }

.snippet-body { overflow: hidden; }
.snippet-body.collapsed { display: none; }

.snippet-toggle + .snippet-body { margin-top: 16px; }

.header-snippet,
.header-opt-out,
.header-share {
  position: relative;
}

.header-snippet-trigger {
  gap: 8px;
  list-style: none;
}

.header-snippet-trigger::-webkit-details-marker {
  display: none;
}

.header-snippet-chevron {
  color: var(--gray-500);
  transition: transform var(--transition);
}

.header-snippet[open] .header-snippet-chevron,
.header-opt-out[open] .header-snippet-chevron,
.header-share[open] .header-snippet-chevron,
.actions-overflow[open] .header-snippet-chevron {
  transform: rotate(180deg);
}

.actions-overflow-trigger { gap: 8px; list-style: none; }
.actions-overflow-trigger::-webkit-details-marker { display: none; }

.header-snippet-panel,
.header-opt-out-panel,
.header-share-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  width: min(680px, calc(100vw - 48px));
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.header-snippet-panel .section-desc {
  margin-bottom: 12px;
}

.header-opt-out-panel,
.header-share-panel {
  width: min(480px, calc(100vw - 48px));
}

.header-share-panel .section-desc {
  margin-bottom: 12px;
}

.opt-out-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.snippet-box {
  position: relative;
  background: var(--gray-900);
  border-radius: var(--radius-lg);
  padding: 20px 24px 64px;
  overflow-x: auto;
}

.snippet-box pre {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #e8eaed;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

.snippet-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  padding: 4px 12px;
}

.snippet-copy:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}

.btn-sm { padding: 4px 12px; font-size: 12px; }


/* ---- Data table ---- */

.visit-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.visit-filter {
  display: grid;
  gap: 5px;
}

.visit-filter span {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.visit-filter input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-900);
  font: inherit;
  font-size: 13px;
}

.visit-filter input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-50);
}

.visit-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  /* Left-anchored with the Clear button pinned right: space-between
     re-distributed every item whenever the "N of M visits" count changed
     width, so toggling a checkbox made the whole row jump. Now the count
     only flexes into the empty middle. */
  justify-content: flex-start;
  gap: 16px;
}
.visit-filter-actions > .btn { margin-left: auto; }

.visit-filter-count {
  font-size: 13px;
  color: var(--gray-500);
}

.visit-bot-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}

.visit-bot-toggle input {
  margin: 0;
  cursor: pointer;
}

.visit-kind-col { width: 88px; }

/* Visits-table column widths. With table-layout: fixed, fixed-px columns
   take their width and the percentage columns share the remainder. The
   Page column gets no explicit width so it absorbs whatever's left —
   that's where long URLs need to breathe. Visitor column shrunk since it
   only ever shows an 8-char vid prefix. */
.visits-table .visit-col-toggle   { width: 120px; }
.visits-table .visit-col-kind     { width: 70px; }
.visits-table .visit-col-time     { width: 126px; }
.visits-table .visit-col-location { width: 130px; }
.visits-table .visit-col-org      { width: 14%; }
.visits-table .visit-col-ref      { width: 16%; }
.visits-table .visit-col-visitor  { width: 80px; }

.visit-bot-badge,
.visit-human-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: lowercase;
}

.visit-bot-badge {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-500);
}

.visit-human-badge {
  background: var(--blue-50);
  border: 1px solid #c5d9f5;
  color: var(--blue-600);
}

.data-table tr.visit-row-bot td { color: var(--gray-500); }

/* Grouped-by-visitor mode: a group row sums one vid's page-views. Multi-
   page groups become clickable to expand into indented sub-rows beneath
   them. The chevron + "N pages" pill in the leftmost column are the only
   affordance — no hover tint, which masked the institution-type row
   colors (a blue hover on a THE-tinted row read as an AAU row). */
.visit-group-row.is-clickable { cursor: pointer; }

/* Pill that announces the page count at a glance — same visual register
   as the "human" badge so users read it as a structured count, not as
   inline text. Sits in the leftmost toggle column next to the chevron. */
.visit-group-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid #c5d9f5;
  color: var(--blue-600);
  white-space: nowrap;
  vertical-align: middle;
}
.visit-row-bot .visit-group-count {
  background: transparent;
  border-color: var(--gray-300);
  color: var(--gray-500);
}

/* Leftmost toggle column: hosts the expand chevron and the "N pages"
   pill on multi-page groups, and the visual indent rail on sub-rows.
   Chevron + pill are laid out as flex children so they share a baseline
   regardless of font-metric variation between the unicode glyph and the
   surrounding text. */
.visit-toggle-cell {
  padding-left: 10px;
  padding-right: 6px;
  white-space: nowrap;
}
.visit-toggle-cell.has-chevron .visit-group-chevron,
.visit-toggle-cell.has-chevron .visit-group-count { vertical-align: middle; }
.visit-toggle-cell.has-chevron .visit-group-chevron { margin-right: 6px; }
.visits-table th.visit-toggle-col { padding: 0; }
.visit-group-chevron {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  user-select: none;
}
.visit-group-row.is-expanded .visit-group-chevron { color: var(--blue-600); }

/* Sub-rows: visually nested under the parent group. The first cell is
   empty but carries a left border to draw a connecting rail. */
.visit-group-subrow td {
  font-size: 13px;
  background: var(--white);
}
.visit-group-subrow td.visit-subrow-indent {
  border-left: 2px solid var(--blue-500);
  padding-left: 0;
}
.visit-group-subrow td.cell-url,
.visit-group-subrow td.cell-nowrap { color: var(--ink-soft); }
.visit-group-subrow.visit-row-bot td { color: var(--gray-500); }

.table-wrap {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.data-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table td[data-full] {
  cursor: pointer;
}

.data-table td[data-full]:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: -2px;
}

.data-table tbody tr:last-child td { border-bottom: none; }
/* Visits-table rows (.visit-group-row) are excluded: the hover gray
   also masked their institution-type tints. */
.data-table tbody tr:not(.visit-group-row):hover { background: var(--gray-50); }

.data-table .table-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--gray-500);
}

.data-table .table-empty::before {
  display: none;
}

.cell-nowrap { white-space: nowrap; }
.cell-url { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: var(--gray-500); }

/* Admin: user card grid (replaces the old wide users table) */
.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.users-count-line { color: var(--gray-500); font-size: 13px; margin: 0; }

.user-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.user-sort-label { font-size: 12px; color: var(--gray-500); margin-right: 2px; }
.user-sort-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.user-sort-pill:hover { color: var(--ink); border-color: var(--gray-400); }
.user-sort-pill.is-active { color: var(--white); background: var(--blue-500); border-color: var(--blue-500); }

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  align-items: start;   /* cards size to their content — no stretched gaps */
  gap: 12px;
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 13px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.user-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.user-card-identity { min-width: 0; }
.user-card-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.user-card-email {
  margin-top: 1px;
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.user-card-id {
  flex: none;
  color: var(--gray-400);
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.user-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 6px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.user-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.user-stat-num { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1; }
.user-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-500); white-space: nowrap; }

.user-card-fields { display: flex; gap: 10px; }
.user-card-field { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-card-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-500); font-weight: 600; }
.user-card-field .role-form, .user-card-field .confirmed-form { display: block; }
.user-card-field .select { width: 100%; min-width: 0; padding-top: 5px; padding-bottom: 5px; }

.user-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-card-meta {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  font-size: 11px;
  color: var(--gray-500);
  min-width: 0;
}
.user-card-meta-item { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Leading separator (not trailing) so ellipsis truncation never clips it. */
.user-card-meta-item:not(:first-child)::before { content: "·"; margin: 0 6px; color: var(--gray-300); }
.user-card-self { flex: none; color: var(--gray-500); font-size: 12px; }
/* (pagination reuses the shared .pagination component defined below) */

.visit-cell-popover {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(640px, calc(100vw - 24px));
  max-height: 220px;
  overflow: auto;
  padding: 12px 14px;
  background: var(--gray-900);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

.visit-cell-popover-text {
  flex: 1 1 auto;
  min-width: 0;
}

.visit-cell-popover-copy {
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
}
.visit-cell-popover-copy:hover {
  background: rgba(255, 255, 255, 0.14);
}

.visit-cell-popover[hidden] {
  display: none;
}

.table-note {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 12px;
  text-align: center;
}

.empty-state-sm { padding: 40px 24px; }


/* ---- Form extras ---- */

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}


/* ---- Danger zone ---- */

.danger-zone {
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--red-50);
  border-radius: var(--radius-lg);
  background: var(--red-50);
}

.danger-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--red-600);
  margin-bottom: 4px;
}

.danger-text {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 16px;
}

.btn-danger {
  background: var(--red-600);
  color: var(--white);
  border: none;
}

.btn-danger:hover {
  background: #c5221f;
  text-decoration: none;
}


/* ---- Modal ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 33, 36, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-backdrop.show { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 100%;
  padding: 24px;
}

.modal-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.modal-body {
  color: var(--gray-700);
  font-size: 14px;
  margin-bottom: 24px;
}

/* Optional list of items (e.g. email recipients) shown under the body. */
.modal-detail-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 8px 4px;
  max-height: 220px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.modal-detail-list li {
  padding: 3px 10px;
  word-break: break-all;
}

/* Small count badge sitting inside a button label, e.g. "Email install
   reminders [3]". */
.btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: 999px;
  letter-spacing: 0;
}

.modal-typed {
  margin-bottom: 20px;
}

/* Auxiliary link sitting in the actions row, e.g. "Preview email →". */
.modal-extra-action {
  margin-right: auto;
  font-size: 13px;
  color: var(--blue-500);
  text-decoration: none;
  align-self: center;
}

.modal-extra-action:hover { text-decoration: underline; }

/* ---- Admin email-preview page ---- */
.email-preview-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 18px;
  padding: 16px 20px;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.email-preview-meta > div {
  display: contents;
}

.email-preview-meta-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gray-600);
  text-transform: uppercase;
  align-self: center;
}

.email-preview-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 8px;
  box-shadow: 0 1px 0 rgba(60, 64, 67, 0.04), 0 12px 28px -16px rgba(60, 64, 67, 0.18);
}

.modal-typed-label {
  display: block;
  font-size: 13px;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.modal-typed input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-900);
}

.modal-typed input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px var(--blue-50);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--blue-500);
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.link-button:hover { text-decoration: underline; }

.user-sites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  max-height: 320px;
  overflow-y: auto;
}

.user-sites-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
}

.user-sites-meta { min-width: 0; }

.user-sites-name {
  font-weight: 500;
  color: var(--gray-900);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-sites-domain {
  font-size: 12px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-sites-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-sites-private {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

.user-sites-empty {
  padding: 20px;
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
}


/* ---- Header actions row ---- */
.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.header-action-form { display: contents; }

/* Mobile overflow menu wrapper. On desktop the toggle is hidden and the
   panel renders as a flex row, so all actions appear inline as before.
   On mobile (see media query below) the toggle becomes a full-width
   button and the panel stacks vertically when open. JS keeps the `open`
   attribute in sync with the viewport so desktop is always expanded. */
.actions-overflow-trigger { display: none; }
.actions-overflow-panel {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* ---- Responsive ---- */

@media (max-width: 720px) {
  .nav-inner {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
  }

  .nav-right {
    gap: 10px;
  }

  .flash-container,
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .page-header {
    margin-bottom: 24px;
  }

  .page-title {
    font-size: 22px;
  }

  .auth-page {
    padding: 16px;
    align-items: flex-start;
  }

  .auth-card {
    padding: 28px 20px;
  }

  .form-row-split,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .page-header-actions { width: 100%; }

  .actions-overflow { position: relative; width: 100%; }

  .actions-overflow-trigger {
    display: inline-flex;
    width: 100%;
  }

  .actions-overflow:not([open]) .actions-overflow-panel { display: none; }

  .actions-overflow[open] .actions-overflow-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
    gap: 8px;
  }

  .actions-overflow[open] .actions-overflow-panel > * { width: 100%; }
  .actions-overflow[open] .actions-overflow-panel .btn { width: 100%; }

  .landing-hero {
    padding: 64px 20px 48px;
  }

  .landing-logo {
    font-size: 40px;
  }

  .landing-tagline {
    font-size: 17px;
  }

  .landing-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .landing-actions .btn {
    width: 100%;
  }

  .dot {
    display: none;
  }

  .card-grid,
  .card-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .card,
  .empty-state {
    padding: 20px;
  }

  .site-card {
    padding: 16px;
    flex-wrap: wrap;
  }

  .site-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    flex: 1 1 100%;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
  }

  .site-stat {
    align-items: flex-start;
    min-width: 0;
  }

  .site-stat-value {
    font-size: 15px;
  }

  .site-stat-primary {
    align-items: flex-start;
    padding: 8px 10px;
  }

  .site-stat-primary .site-stat-value {
    font-size: 22px;
  }

  .site-stat-secondary .site-stat-value {
    font-size: 14px;
  }

  .period-picker {
    flex-wrap: wrap;
  }

  .period-pill {
    min-height: 36px;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  .visit-filters {
    grid-template-columns: 1fr;
  }

  .visit-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .visit-filter-actions .btn {
    width: 100%;
  }

  .snippet-toggle {
    align-items: flex-start;
  }

  .header-snippet,
  .header-opt-out,
  .header-share {
    width: 100%;
  }

  .page-header-actions .header-snippet[open],
  .page-header-actions .header-opt-out[open],
  .page-header-actions .header-share[open] {
    grid-column: 1 / -1;
  }

  .header-snippet-panel,
  .header-opt-out-panel,
  .header-share-panel {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  .toggle-hint {
    flex-basis: 100%;
    order: 3;
  }

  .snippet-box {
    padding: 16px;
  }

  .snippet-copy {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .data-table {
    min-width: 0;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .data-table tbody tr {
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  .data-table td {
    padding: 0;
    border-bottom: none;
    display: grid;
    grid-template-columns: minmax(80px, 96px) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
  }

  .data-table td + td {
    margin-top: 10px;
  }

  .data-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gray-500);
  }

  .cell-nowrap,
  .cell-url,
  .cell-mono {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .cell-mono {
    font-size: 12px;
  }

  .visit-kind-cell-empty {
    display: none;
  }

  /* Visits-grouped: in card mode the leftmost toggle column anchors the
     card header when it has content (chevron/page-count on multi-page
     groups, org badge on academic rows) and disappears entirely when
     empty — a blank cell adds noise when columns become rows. */
  .visit-toggle-cell:not(.has-chevron):not(.has-badge) {
    display: none;
  }
  .visit-toggle-cell.has-chevron,
  .visit-toggle-cell.has-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 4px;
  }
  /* No label "::before" for the toggle cell — its data-label is empty
     and the existing rule would render a blank gutter. */
  .visit-toggle-cell.has-chevron::before,
  .visit-toggle-cell.has-badge::before { content: none; }
  .visit-toggle-cell.has-chevron .visit-group-chevron { font-size: 26px; }
  .visit-toggle-cell.has-chevron .visit-group-count { font-size: 12px; padding: 3px 10px; }

  /* Sub-row cells without content become blank rows in card layout —
     drop the empty toggle/kind cells so the expanded view reads as a
     clean per-page card (Time + Page + Location + Org + Referrer +
     Visitor). */
  .visit-group-subrow .visit-toggle-cell,
  .visit-group-subrow .visit-kind-cell {
    display: none;
  }
  /* In card mode the desktop frame logic (open bottoms, side-only
     borders) would leave academic cards half-bordered — every academic
     card just gets the full frame. */
  .visits-table tr.visit-row-academic,
  .visits-table tr.visit-row-academic.is-expanded,
  .visits-table tr.visit-subrow-academic,
  .visits-table tr.visit-subrow-academic-last {
    border: 1px solid var(--acad-frame);
  }
  /* Cards use real block borders (no collapse sharing) — drop the
     desktop cell shadows so they don't draw stray lines inside cards.
     !important because the desktop :first/:last-child rules outrank a
     plain reset here. */
  .visits-table tr.visit-row-academic td,
  .visits-table tr.visit-subrow-academic td {
    box-shadow: none !important;
  }
  /* Sub-row cards visually nest under their parent group card with a
     left accent stripe instead of the desktop indent rail. */
  .visit-group-subrow {
    border-left: 3px solid var(--blue-500) !important;
    padding-left: 14px !important;
  }

}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.pagination-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-500);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}

.pagination-link:hover {
  background: var(--gray-100);
}

.pagination-disabled {
  color: var(--gray-500);
  pointer-events: none;
}

.pagination-info {
  font-size: 13px;
  color: var(--gray-500);
}

/* Period picker */
.period-picker {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.period-pill {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--gray-500);
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: all 0.15s;
}

.period-pill:hover {
  color: var(--gray-900);
  border-color: var(--gray-500);
}

.period-pill.active {
  color: #fff;
  background: var(--blue-500);
  border-color: var(--blue-500);
}

/* Public dashboard badge */
.public-badge {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: -12px;
  margin-bottom: 16px;
}


/* =================================================================
   Landing page (.lp-*)
   Editorial / instrument-panel aesthetic. Tabular figures,
   measurement-mark micro-labels, a working-looking dashboard mock
   in the hero. Cohesive with the existing Material-ish palette.
   ================================================================= */

.lp {
  --lp-ink: #16191d;
  --lp-ink-soft: #4a5057;
  --lp-rule: #e6e8eb;
  --lp-tint: #f6f8fb;
  --lp-bg: #fbfbfc;
  --lp-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--lp-ink);
  background: var(--lp-bg);
}

.lp main, .lp { /* the wrapper itself, defensive */ }

.lp h1, .lp h2, .lp h3 {
  font-family: 'Google Sans', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.lp em { font-style: italic; }

/* ---- Landing nav ---- */

.lp-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--lp-rule);
}

.lp-nav-inner {
  max-width: 1200px;
  height: 64px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
}

.lp-nav-links a:hover {
  background: var(--lp-tint);
  color: var(--lp-ink);
  text-decoration: none;
}

.lp-nav-links .lp-nav-cta {
  color: var(--blue-600);
  background: var(--blue-50);
}

/* ---- Hero ---- */

.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 40px 60px;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(26, 115, 232, 0.10), transparent 70%),
    radial-gradient(700px 480px at -8% 110%, rgba(26, 115, 232, 0.06), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--lp-bg) 100%);
  border-bottom: 1px solid var(--lp-rule);
}

/* Subtle dotted measurement grid behind the hero. */
.lp-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(26, 115, 232, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%);
}

.lp-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.lp-hero-text { animation: lp-rise 600ms cubic-bezier(.2,.7,.2,1) both; }
.lp-mock      { animation: lp-rise 700ms cubic-bezier(.2,.7,.2,1) 120ms both; }

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--lp-ink);
  letter-spacing: 0;
}

.lp-brand:hover {
  color: var(--blue-600);
  text-decoration: none;
}

.lp-brand .brand-mark {
  width: 26px;
  height: 26px;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
}

.lp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 0 rgba(30, 142, 62, 0.55);
  animation: lp-pulse 2.6s ease-out infinite;
}

@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 142, 62, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(30, 142, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 142, 62, 0); }
}

.lp-headline {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 600;
  line-height: 1.04;
  margin: 22px 0 18px;
  color: var(--lp-ink);
}

.lp-headline-em {
  background: linear-gradient(90deg, var(--blue-500) 0%, #5b8def 60%, var(--blue-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  max-width: 520px;
  margin-bottom: 28px;
}

.lp-sub em {
  color: var(--lp-ink);
  font-style: normal;
  background: linear-gradient(transparent 64%, rgba(26, 115, 232, 0.18) 64%);
  padding: 0 2px;
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.lp-claims {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--lp-ink-soft);
}

.lp-claims li { display: inline-flex; align-items: center; gap: 6px; }

.lp-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--green-50);
  color: var(--green-600);
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
}

/* ---- Hero mock dashboard ---- */

.lp-mock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  position: relative;
}

.lp-mock-card {
  background: #ffffff;
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  box-shadow:
    0 1px 0 rgba(60, 64, 67, 0.04),
    0 12px 28px -16px rgba(60, 64, 67, 0.18);
}

.lp-mock-histogram { grid-column: span 2; }
.lp-mock-orgs     { grid-column: span 2; }
.lp-mock-bots     { grid-column: span 2; }

@media (min-width: 1024px) {
  .lp-mock-histogram { grid-column: 1 / -1; }
  .lp-mock-orgs     { grid-column: 1 / 2; }
  .lp-mock-bots     { grid-column: 2 / 3; }
}

.lp-mock-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--lp-rule);
}

.lp-mock-label {
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gray-600);
  text-transform: uppercase;
}

.lp-mock-peak {
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--blue-500);
  text-transform: uppercase;
}

.lp-mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
}

.lp-mock-bar {
  flex: 1;
  height: 0;
  background: linear-gradient(180deg, var(--blue-500), #5b8def);
  border-radius: 3px 3px 1px 1px;
  animation: lp-bar-rise 700ms cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both;
}

.lp-mock-bar.is-weekend {
  background: linear-gradient(180deg, #c4d2ed, #d8e1f0);
}

@keyframes lp-bar-rise {
  from { height: 0; opacity: 0.2; }
  to   { height: var(--h, 0%); opacity: 1; }
}

.lp-mock-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--lp-mono);
  font-size: 10px;
  color: var(--gray-500);
  letter-spacing: 0.06em;
}

.lp-mock-orglist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.lp-mock-org {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 6px;
  border-bottom: 1px solid var(--lp-rule);
}

.lp-mock-org:last-child { border-bottom: none; }

.lp-mock-org.is-aau    { background: #f5f8fc; border-radius: 4px; border-color: #e6eef7; }
.lp-mock-org.is-aua    { background: #f5fbf7; border-radius: 4px; border-color: #e3f0e7; }
.lp-mock-org.is-the500 { background: #fbf7f5; border-radius: 4px; border-color: #f0e7e3; }

.lp-mock-org-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-ink);
  font-weight: 500;
}

.lp-mock-flag { font-size: 14px; line-height: 1; }

.lp-mock-tag {
  font-style: normal;
  font-family: var(--lp-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  color: #6b7280;
  text-transform: uppercase;
}

.lp-mock-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-mock-split { display: flex; flex-direction: column; gap: 12px; }

.lp-mock-split-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gray-100);
}

.lp-mock-split-human { width: 79.5%; background: var(--blue-500); }
.lp-mock-split-bot   { width: 20.5%; background: #c0c4ca; }

.lp-mock-split-rows { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.lp-mock-split-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-mock-split-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-ink);
}

.lp-mock-mono { font-family: var(--lp-mono); font-size: 12px; color: var(--gray-700); }

.lp-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.lp-mock-dot-human { background: var(--blue-500); }
.lp-mock-dot-bot   { background: #c0c4ca; }

/* ---- Measurement band ---- */

.lp-band {
  background: #ffffff;
  border-bottom: 1px solid var(--lp-rule);
  padding: 28px 40px;
}

.lp-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.lp-band-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--lp-rule);
  padding-left: 18px;
}

.lp-band-cell:first-child { border-left: none; padding-left: 0; }

.lp-band-num {
  font-family: 'Google Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lp-ink);
  letter-spacing: -0.01em;
}

.lp-band-cap {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gray-600);
}

/* ---- Section heads ---- */

.lp-features, .lp-how, .lp-pricing {
  padding: 80px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.lp-section-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.lp-section-eyebrow {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--blue-500);
  margin-bottom: 12px;
}

.lp-section-title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--lp-ink);
  margin: 0 0 12px;
}

.lp-section-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
}

/* ---- Features grid ---- */

.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.lp-feature {
  background: #ffffff;
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.lp-feature:hover {
  transform: translateY(-2px);
  border-color: #cfd6dd;
  box-shadow: 0 12px 28px -16px rgba(60, 64, 67, 0.18);
}

.lp-feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-500);
  margin-bottom: 14px;
}

.lp-feature-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 8px;
}

.lp-feature-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  margin-bottom: 12px;
}

.lp-feature-text-sm {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-600);
  margin-top: 8px;
}

.lp-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--lp-ink-soft);
}

.lp-feature-list li {
  position: relative;
  padding-left: 16px;
  padding-top: 4px;
}

.lp-feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--blue-500);
  border-radius: 50%;
}

.lp-feature-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.lp-tag-aau, .lp-tag-aua, .lp-tag-the {
  font-family: var(--lp-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid;
}

.lp-tag-aau { background: #f5f8fc; border-color: #cfdcf0; color: #2d4f8a; }
.lp-tag-aua { background: #f5fbf7; border-color: #c8e2d2; color: #25734c; }
.lp-tag-the { background: #fbf7f5; border-color: #ebd7cc; color: #8a4423; }

.lp-feature-tag-note {
  font-size: 12px;
  color: var(--gray-600);
  font-style: italic;
}

.lp-feature-mini-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 8px;
  background: var(--gray-100);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin: 6px 0 4px;
}

.lp-feature-mini-bar > span {
  display: block;
  height: 100%;
  background: var(--blue-500);
}

.lp-feature-mini-bar > em {
  position: absolute;
  right: -4px;
  top: -22px;
  font-style: normal;
  font-family: var(--lp-mono);
  font-size: 10px;
  color: #c0c4ca;
  background: #ffffff;
  padding: 0 4px;
  border-radius: 3px;
}

.lp-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-feature-pills span {
  font-size: 12px;
  font-weight: 500;
  color: var(--lp-ink);
  background: var(--gray-50);
  border: 1px solid var(--lp-rule);
  padding: 3px 9px;
  border-radius: 999px;
}

.lp-feature-pill-more {
  background: var(--blue-50) !important;
  color: var(--blue-500) !important;
  border-color: #c5d9f5 !important;
}

/* ---- How it works (steps) ---- */

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}

.lp-step {
  background: #ffffff;
  border: 1px solid var(--lp-rule);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  position: relative;
}

.lp-step-num {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gray-500);
  margin-bottom: 12px;
}

.lp-step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--lp-ink);
  margin-bottom: 8px;
}

.lp-step-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
}

.lp-snippet {
  margin: 0;
  padding: 14px 16px;
  background: #0f1217;
  color: #d6dde6;
  font-family: var(--lp-mono);
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  overflow-x: auto;
}

.lp-snippet code { white-space: pre; }
.lp-tok-tag { color: #7aa7ff; }
.lp-tok-com { color: #6a737d; font-style: italic; }
.lp-tok-str { color: #98c379; }

/* ---- Pricing / beta band ---- */

.lp-pricing {
  padding-top: 0;
}

.lp-pricing-card {
  background: linear-gradient(135deg, var(--blue-500), #2a7ce6 60%, var(--blue-600));
  color: #fff;
  border-radius: 20px;
  padding: 48px 48px;
  position: relative;
  overflow: hidden;
}

.lp-pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.lp-eyebrow-on-blue {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  position: relative;
}

.lp-status-dot-on-blue {
  background: #cfffd6;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
}

.lp-pricing-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  margin: 18px 0 12px;
  position: relative;
}

.lp-pricing-text {
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
}

.lp-pricing-text em { color: #ffffff; font-weight: 500; font-style: normal; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }

.lp-pricing-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  position: relative;
}

.lp-pricing-cta .btn-primary {
  background: #ffffff;
  color: var(--blue-600);
  border: none;
}

.lp-pricing-cta .btn-primary:hover { background: #f1f5fb; color: var(--blue-600); }

.lp-pricing-fineprint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
}

.lp-pricing-fineprint:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* ---- Footer ---- */

.lp-footer {
  border-top: 1px solid var(--lp-rule);
  background: #ffffff;
  padding: 28px 40px;
  margin-top: 40px;
}

.lp-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--gray-600);
}

.lp-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--lp-ink);
  letter-spacing: 0;
}

.lp-footer-brand .brand-mark {
  width: 22px;
  height: 22px;
}

.lp-footer-nav { display: flex; gap: 18px; }
.lp-footer-nav a { color: var(--gray-700); }
.lp-footer-nav a:hover { color: var(--blue-500); }

.lp-footer-meta {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.lp-footer-meta strong {
  color: var(--gray-700);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---- Responsive ---- */

@media (max-width: 960px) {
  .lp-nav-inner { padding: 0 24px; }
  .lp-hero { padding: 56px 24px 40px; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .lp-band { padding: 24px; }
  .lp-band-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .lp-band-cell:nth-child(3) { border-left: none; padding-left: 0; }
  .lp-features, .lp-how, .lp-pricing { padding: 56px 24px; }
  .lp-pricing-card { padding: 32px 24px; border-radius: 16px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-footer { padding: 24px; }
  .lp-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .lp-nav-inner {
    min-height: 60px;
    height: auto;
    padding: 12px 18px;
  }
  .lp-nav-links a { padding: 0 10px; }
  .lp-headline { font-size: 38px; }
  .lp-sub { font-size: 16px; }
  .lp-band-inner { grid-template-columns: 1fr; }
  .lp-band-cell { border-left: none !important; padding-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-text, .lp-mock { animation: none; }
  .lp-mock-bar { animation: none; height: var(--h, 0%); }
  .lp-status-dot { animation: none; }
}

/* ── Projects ─────────────────────────────────────────────────────────── */
/* Width comes from the shared `.page` rule so Projects matches Sites. */

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Group tabs — one tab per group; only the active group's panel shows. */
.project-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 22px;
}
.project-tab {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.project-tab:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -3px; border-radius: 4px; }
.project-tab:hover { color: var(--gray-900); }
.project-tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-500); }
.project-tab-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 1px 7px;
  border-radius: 10px;
}
.project-tab.is-active .project-tab-count { background: var(--blue-50); color: var(--blue-600); }
.project-group.is-hidden { display: none; }

/* Pin toggle on each tab: hidden until hover, persistent + blue when pinned. */
.project-tab-pin {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  color: var(--gray-400);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.project-tab:hover .project-tab-pin { opacity: 0.55; pointer-events: auto; }
.project-tab-pin:hover { color: var(--gray-700); opacity: 1; }
.project-tab.is-pinned .project-tab-pin { opacity: 1; pointer-events: auto; color: var(--blue-500); }
.project-tab.is-pinned .project-tab-pin:hover { color: var(--blue-600); }

/* Group chooser combobox (dropdown + "New group…" input) */
.group-combo-select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  color: var(--gray-900);
  box-sizing: border-box;
}
.group-combo-select:focus { outline: none; border-color: var(--blue-500); }
.group-combo-new { margin-top: 8px; }
.group-combo-new.is-hidden { display: none; }

/* Draggable masonry via Muuri. The grid container is relative; Muuri
   absolutely-positions each .project-item. The responsive column count comes
   from the item width, and box-sizing keeps the 8px gutter inside it (so the
   container's -8px margin flushes the cards to the edges). */
.project-list { position: relative; margin: 0 -8px; }
.project-item {
  display: block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  z-index: 1;
}
/* Muuri positions items with transforms but does NOT set position itself —
   the items must be absolutely positioned for the transforms to place them.
   Scoped to .is-muuri so the no-JS fallback stays in normal flow. */
.project-list.is-muuri .project-item { position: absolute; top: 0; left: 0; }
/* Multi-column widths apply only once Muuri is active (the JS adds .is-muuri
   on successful init). Without it the cards fall back to a clean single
   column instead of broken narrow blocks. */
@media (min-width: 680px) { .project-list.is-muuri .project-item { width: 50%; } }
@media (min-width: 1000px) { .project-list.is-muuri .project-item { width: 33.3333%; } }
.project-item.muuri-item-dragging { z-index: 3; }
.project-item.muuri-item-releasing { z-index: 2; }
.project-item.muuri-item-hidden { z-index: 0; }
/* While its settings menu is open, a card floats above its grid siblings so
   the dropdown isn't covered by later cards. */
.project-item.menu-open { z-index: 40; }
.project-item-content { position: relative; }

.project-card {
  padding: 18px 20px;
  position: relative;
}

/* In-card delete-to-do confirmation (scoped to the panel, not full screen) */
.todo-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  z-index: 20;
}
.todo-confirm-box {
  max-width: 240px;
  padding: 16px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.todo-confirm-msg { margin: 0 0 12px; font-size: 14px; color: var(--gray-800); }
.todo-confirm-actions { display: flex; gap: 8px; justify-content: center; }

.project-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.project-drag-handle {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: grab;
  padding: 2px;
  border-radius: var(--radius);
  touch-action: none; /* let Muuri handle touch drags from the grip */
}
.project-drag-handle:hover { color: var(--gray-600); background: var(--gray-100); }
.project-drag-handle:active { cursor: grabbing; }
.project-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Project link — its own line, shows the full URL as a text link. */
.project-link {
  display: block;
  margin-top: 6px;
  color: var(--blue-500);
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
}
.project-link:hover { color: var(--blue-600); text-decoration: underline; }

.project-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
  word-break: break-word;
}
.project-desc > :first-child { margin-top: 0; }
.project-desc > :last-child { margin-bottom: 0; }
.project-desc p { margin: 0 0 6px; }
.project-desc ul, .project-desc ol { margin: 4px 0; padding-left: 20px; }
.project-desc a { color: var(--blue-500); }
.project-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 4px;
}


.project-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.todo-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
}
/* Per-card actions (settings) menu */
.project-menu { position: relative; flex: none; }
.project-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius);
}
.project-menu-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.project-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 212px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.project-menu-dropdown.is-hidden { display: none; }
.project-menu-form { display: block; margin: 0; }
.project-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--gray-800);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.project-menu-item:hover { background: var(--gray-100); }
.project-menu-item-danger { color: var(--red-600); }
.project-menu-item-danger:hover { background: var(--red-50); }
.project-menu-divider { height: 1px; margin: 4px 0; background: var(--gray-200); }
.project-menu-label {
  padding: 4px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
/* Status options carry a checkmark slot so the current one is marked. */
.project-menu-status::before {
  content: "✓";
  display: inline-block;
  width: 14px;
  margin-right: 4px;
  color: var(--blue-500);
  visibility: hidden;
}
.project-menu-status.is-current::before { visibility: visible; }
.project-menu-status.is-current { font-weight: 600; }

/* Working-status tints — off-white only, just a hint of tone. */
.project-card.status-working    { background: #f1f8f3; }
.project-card.status-next_week  { background: #eef3fb; }
.project-card.status-next_month { background: #fbf7ee; }
.project-card.status-paused     { background: #f5f5f6; }
/* "Not working on it right now" — dim the card; restore on hover so it's
   still fully readable when you focus on it. */
.project-item .project-card.status-paused { opacity: 0.55; transition: opacity 0.15s ease; }
.project-item .project-card.status-paused:hover { opacity: 1; }

/* Inline edit-project form */
.project-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.project-edit.is-hidden { display: none; }
.project-edit input,
.project-edit textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.project-edit textarea { resize: vertical; }
.project-edit input:focus,
.project-edit textarea:focus { outline: none; border-color: var(--blue-500); }
.project-edit-actions { display: flex; gap: 8px; }

/* To-do list */
.todo-list { list-style: none; margin: 14px 0 0; padding: 0; }
.todo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--gray-100);
}
.todo:first-child { border-top: none; }
.todo-checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--blue-500);
}
.todo-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--gray-800);
  word-break: break-word;
}
.todo.is-done .todo-text { text-decoration: line-through; color: var(--gray-500); }
/* Dim a completed to-do's checkbox to match its muted, struck-through text. */
.todo.is-done .todo-checkbox { opacity: 0.5; }

/* Rendered Markdown inside a to-do — keep it tight in the list. */
.todo-text > :first-child { margin-top: 0; }
.todo-text > :last-child { margin-bottom: 0; }
.todo-text p { margin: 0 0 6px; }
.todo-text ul, .todo-text ol { margin: 4px 0; padding-left: 20px; }
.todo-text h3, .todo-text h4, .todo-text h5, .todo-text h6 { font-size: 14px; margin: 6px 0 2px; }
.todo-text a { color: var(--blue-500); }
.todo-text a:hover { color: var(--blue-600); }
.todo-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 4px;
}
.todo-text pre {
  background: var(--gray-100);
  padding: 8px 10px;
  border-radius: var(--radius);
  overflow-x: auto;
}
.todo-text pre code { background: none; padding: 0; }
.todo-text blockquote {
  margin: 4px 0;
  padding-left: 10px;
  border-left: 3px solid var(--gray-300);
  color: var(--gray-600);
}

/* Edit / delete affordances on a to-do row */
.todo-edit, .todo-del {
  border: none;
  background: none;
  color: var(--gray-400);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  flex: none;
  margin-top: 1px;
}
.todo-edit { font-size: 13px; padding: 2px 4px; }
.todo-del { font-size: 18px; padding: 0 6px; }
.todo-edit:hover { color: var(--blue-500); background: var(--blue-50); }
.todo-del:hover { color: var(--red-600); background: var(--red-50); }

/* In-line edit textarea (edits the raw Markdown source) */
.todo-edit-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 6px 8px;
  border: 1px solid var(--blue-500);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.todo-edit-input:focus { outline: none; }

/* Add-to-do: collapsed to a button until clicked */
.todo-add-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}
.todo-add-btn {
  border: none;
  background: none;
  color: var(--blue-500);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0;
}
.todo-add-btn:hover { color: var(--blue-600); text-decoration: underline; }
.todo-add-btn.is-hidden { display: none; }
.todo-add { display: block; }
.todo-add.is-hidden { display: none; }
.todo-add-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Fallback when EasyMDE isn't mounted (no JS): a plain textarea */
.todo-add > .todo-md {
  width: 100%;
  min-height: 70px;
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}
.todo-add > .todo-md:focus { outline: none; border-color: var(--blue-500); }

/* EasyMDE: compact it for our short fields (to-dos, project descriptions),
   and draw toolbar glyphs from our own ::before content (custom classNames)
   so no Font Awesome is needed. */
.EasyMDEContainer { width: 100%; }
.EasyMDEContainer .CodeMirror {
  min-height: 70px;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.EasyMDEContainer .CodeMirror-scroll { min-height: 70px; }
.EasyMDEContainer .editor-preview { font-size: 14px; }
.editor-toolbar { border-radius: var(--radius) var(--radius) 0 0; }
.editor-toolbar button.mde-ic { font-family: inherit; }
.editor-toolbar button.mde-ic::before { font-size: 13px; line-height: 1; }
.editor-toolbar button.mde-bold::before { content: "B"; font-weight: 700; }
.editor-toolbar button.mde-italic::before { content: "I"; font-style: italic; font-family: Georgia, serif; }
.editor-toolbar button.mde-code::before { content: "</>"; font-size: 11px; }
.editor-toolbar button.mde-link::before { content: "🔗"; }
.editor-toolbar button.mde-ul::before { content: "•  •"; letter-spacing: -1px; font-size: 11px; }
.editor-toolbar button.mde-preview::before { content: "👁"; }

/* New-project modal */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-head .modal-title { margin-bottom: 0; }
.modal-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.modal-close:hover { color: var(--gray-900); background: var(--gray-100); }

.modal-field {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}
.modal-field input,
.modal-field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.modal-field textarea { resize: vertical; }
.modal-field input:focus,
.modal-field textarea:focus { outline: none; border-color: var(--blue-500); }

/* "Use with an LLM" prompt modal */
.modal-wide { max-width: 640px; }
.prompt-modal-body { max-height: 62vh; overflow-y: auto; }
.prompt-section-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 20px 0 4px;
}
.prompt-modal-body > .prompt-section-title:first-child { margin-top: 0; }
.prompt-section-desc { font-size: 13px; color: var(--gray-600); margin: 0 0 8px; }
.prompt-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-800);
  background: var(--gray-50);
  resize: vertical;
}
.prompt-textarea:focus { outline: none; border-color: var(--blue-500); }
.prompt-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.prompt-copied { font-size: 13px; font-weight: 500; color: var(--green-600); }
.prompt-steps, .prompt-providers {
  font-size: 13px;
  color: var(--gray-700);
  margin: 4px 0 8px;
  padding-left: 20px;
}
.prompt-steps li, .prompt-providers li { margin: 3px 0; line-height: 1.5; }
.prompt-code {
  background: var(--gray-100);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  overflow-x: auto;
  margin: 0 0 8px;
}
.prompt-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray-800); white-space: pre; }

/* ── Deadlines (Gantt-style timeline) ─────────────────────────────────── */
.deadlines-page { max-width: 1120px; }

.deadline-gantt {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 4px 16px 12px;
  overflow: hidden;
}

/* Upcoming / Past tabs */
.deadline-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.deadline-tab {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.deadline-tab:hover { color: var(--gray-900); }
.deadline-tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-500); }
.deadline-tab:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -3px; border-radius: 4px; }
.deadline-tab-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 1px 7px;
  border-radius: 10px;
}
.deadline-tab.is-active .deadline-tab-count { background: var(--blue-50); color: var(--blue-600); }

/* Past (delivered) list — reuses .deadline-row, but the label spans the row */
.deadline-past-list {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 0 16px;
}
.deadline-past-list .deadline-row:first-child { border-top: none; }
.deadline-past-list .deadline-row-label { width: auto; flex: 1; }

/* Axis */
.deadline-axis-row { display: flex; align-items: flex-end; }
.deadline-axis-spacer {
  width: 280px;
  flex: none;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5px;
}
/* Double-arrow span indicators under the timeline (next 7 / next 30 days). */
.deadline-spans-row { display: flex; align-items: flex-start; }
.deadline-spans { flex: 1; position: relative; height: 20px; min-width: 0; margin-top: 4px; }
.deadline-span { position: absolute; display: flex; align-items: center; height: 15px; }
.deadline-span-30 { top: 2px; }
.dl-span-line { flex: 1; height: 0; border-top: 1px solid var(--gray-400); }
.dl-span-arrow { width: 0; height: 0; border-style: solid; flex: none; }
.dl-span-arrow-l { border-width: 4px 6px 4px 0; border-color: transparent var(--gray-400) transparent transparent; }
.dl-span-arrow-r { border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--gray-400); }
.dl-span-text { font-size: 11px; color: var(--gray-600); padding: 0 7px; white-space: nowrap; }
.deadline-span-30 .dl-span-text { color: #b45309; }
.deadline-axis {
  flex: 1;
  min-width: 0;
}
/* Two-tier axis: a year row centered over each year's months, a month row below. */
.deadline-axis-years {
  position: relative;
  height: 15px;
}
.deadline-axis-months {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--gray-200);
}
.deadline-axis-year {
  position: absolute;
  bottom: 1px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.deadline-axis-tick {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--gray-500);
  white-space: nowrap;
}
.deadline-axis-today {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

/* Rows */
.deadline-rows { }
.deadline-row {
  display: flex;
  align-items: center;
  height: 44px;
  border-top: 1px solid var(--gray-100);
}
.deadline-row:hover { background: var(--gray-50); }
.deadline-row.is-done { opacity: 0.6; }

.deadline-row-label {
  width: 280px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 14px;
  min-width: 0;
  box-sizing: border-box;
}
.deadline-check { width: 16px; height: 16px; flex: none; cursor: pointer; accent-color: var(--green-600); }
.deadline-row-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deadline-title {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deadline-title:hover { color: var(--blue-600); }
.deadline-row.is-done .deadline-title { text-decoration: line-through; }
.deadline-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deadline-meta .is-overdue { color: var(--red-600); font-weight: 600; }
.deadline-meta .is-soon { color: #c2710c; font-weight: 600; }
.deadline-meta .is-done { color: var(--gray-400); }
.deadline-cat { font-weight: 600; }

/* Track + bar */
.deadline-row-track { flex: 1; position: relative; height: 100%; min-width: 0; }
/* Urgency bands near today: red = next 7 days, amber = next 30 days. */
.deadline-zone { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.deadline-zone-urgent { background: rgba(220, 38, 38, 0.07); }
.deadline-zone-soon { background: rgba(217, 119, 6, 0.07); }
.deadline-gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px solid var(--gray-100);
  pointer-events: none;
}
/* Soft day dividers across the magnified next-7-days band. */
.deadline-dayline {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed var(--gray-200);
  opacity: 0.7;
  pointer-events: none;
}
.deadline-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed var(--gray-400);
  pointer-events: none;
}
.deadline-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  min-width: 6px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: filter 0.12s ease;
}
.deadline-bar:hover { filter: brightness(1.07); }
/* Pre-deadline milestone marker (e.g. an abstract deadline before the paper). */
.deadline-pre {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--white);
  border: 2px solid var(--gray-700);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.deadline-row.is-done .deadline-pre { border-color: var(--gray-400); }
.deadline-pre-meta { color: var(--gray-600); }

/* Modal: two date fields side by side, and a left-aligned Delete button */
.modal-row { display: flex; gap: 12px; }
.modal-row .modal-field { flex: 1; }
.modal-actions-spacer { flex: 1; }

/* Read-only deadline view modal */
.dv-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--gray-100);
  font-size: 14px;
}
.dv-row:first-child { border-top: none; }
.dv-label { width: 90px; flex: none; color: var(--gray-500); font-weight: 500; font-size: 13px; }
.dv-value { flex: 1; min-width: 0; color: var(--gray-800); word-break: break-word; }
.dv-value a { color: var(--blue-500); word-break: break-all; }
.dv-notes { white-space: pre-wrap; }
.dv-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-600);
  background: var(--green-50);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}
.dv-milestones { list-style: none; margin: 0; padding: 0; }
.dv-milestones li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.dv-diamond {
  width: 9px; height: 9px;
  flex: none;
  transform: rotate(45deg);
  background: var(--white);
  border: 2px solid var(--gray-700);
  border-radius: 2px;
}

/* Dynamic milestone rows in the deadline modal */
.dl-milestones { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; }
.dl-milestone-row { display: flex; gap: 8px; align-items: center; }
/* Scoped under .dl-milestone-row so these win over `.modal-field input`
   (which otherwise forces the date input to display:block; width:100%). */
.dl-milestone-row .dl-ms-date,
.dl-milestone-row .dl-ms-label {
  margin-top: 0;
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.dl-milestone-row .dl-ms-date { flex: none; width: 150px; }
.dl-milestone-row .dl-ms-label { flex: 1 1 auto; width: auto; min-width: 0; }
.dl-milestone-row .dl-ms-date:focus,
.dl-milestone-row .dl-ms-label:focus { outline: none; border-color: var(--blue-500); }
.dl-ms-remove {
  flex: none;
  border: none;
  background: none;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: var(--radius);
}
.dl-ms-remove:hover { color: var(--red-600); background: var(--red-50); }

@media (max-width: 720px) {
  .deadline-axis-spacer, .deadline-row-label { width: 180px; }
  .modal-row { flex-direction: column; gap: 0; }
}

/* On narrow viewports the track is too short for the "next 30 days"
   double-arrow span to read clearly — hide it rather than cram it. */
@media (max-width: 560px) {
  .deadline-spans-row { display: none; }
}

/* Narrower still: month labels crowd and overlap — drop them and keep only
   the year row. The monthly gridlines stay as unlabeled guides, and the
   "Today" marker stays put. */
@media (max-width: 640px) {
  .deadline-axis-tick { display: none; }
}

/* Share-deadlines modal */
#deadline-share-btn.is-active { background: var(--blue-50); color: var(--blue-600); }
.share-help { color: var(--gray-600); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; }
.share-link-row { display: flex; gap: 8px; align-items: center; }
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--gray-800);
  background: var(--gray-50);
}
.share-actions { display: flex; gap: 8px; margin-top: 12px; }

/* "Log in with Teradive" OIDC consent screen */
.oauth-consent-page { max-width: 560px; }
.oauth-consent { padding: 22px 24px; }
.oauth-consent-user { margin: 0 0 14px; color: var(--gray-700); font-size: 14px; }
.oauth-consent-label { margin: 0 0 6px; font-weight: 600; color: var(--gray-800); font-size: 14px; }
.oauth-scope-list { margin: 0 0 14px; padding-left: 20px; color: var(--gray-700); font-size: 14px; }
.oauth-scope-list li { padding: 2px 0; }
.oauth-scope-note { color: var(--green-600); font-size: 12px; }
.oauth-consent-fineprint { margin: 0 0 20px; color: var(--gray-500); font-size: 12.5px; line-height: 1.5; }
.oauth-consent-actions { display: flex; gap: 10px; justify-content: flex-end; }