/* ================================================================
   Corky — 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;
}

/* The hidden attribute must always win, even over elements whose class
   sets display (e.g. the workspace panes, which are flex containers).
   Without this, JS toggling el.hidden has no visual effect on them. */
[hidden] {
  display: none !important;
}

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);
}

/* 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 {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.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;
}



.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;
}

.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 { font-weight: 600; font-size: 15px; color: var(--gray-900); }
.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; }


/* ---- 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; }

.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); }

.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%; }

  .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;
  }

  /* ---- Admin users table (mobile cards) ---- */
  .admin-users-table tbody tr {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .admin-users-table td {
    grid-template-columns: minmax(78px, 90px) minmax(0, 1fr);
    align-items: center;
    padding: 4px 0;
  }

  .admin-users-table td + td { margin-top: 0; }

  /* Card header: Name button + email get a tighter, prominent treatment so
     each card has a clear identity at a glance. */
  .admin-users-table td[data-label="Name"] {
    grid-template-columns: 1fr;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--rule);
    margin-bottom: 6px;
  }
  .admin-users-table td[data-label="Name"]::before { display: none; }
  .admin-users-table td[data-label="Name"] .link-button {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
  }

  .admin-users-table td[data-label="Email"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    margin-top: -6px;
    margin-bottom: 4px;
  }
  .admin-users-table td[data-label="Email"]::before { display: none; }
  .admin-users-table td[data-label="Email"] {
    font-size: 13px;
    color: var(--ink-soft);
  }

  /* Selects (Role / Confirmed) fill the value column for easier tapping. */
  .admin-users-table td .select {
    width: 100%;
    max-width: 220px;
    min-width: 0;
  }

  /* Action area: full-width tappable button, comfortable hit target. */
  .admin-users-table td[data-label="Actions"] {
    grid-template-columns: 1fr;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--rule);
  }
  .admin-users-table td[data-label="Actions"]::before { display: none; }
  .admin-users-table td[data-label="Actions"] form,
  .admin-users-table td[data-label="Actions"] > button {
    display: block;
    width: 100%;
  }
  .admin-users-table td[data-label="Actions"] .btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }
  .admin-users-table td[data-label="Actions"] .table-note {
    display: block;
    text-align: center;
    color: var(--gray-500);
    font-size: 13px;
  }

  /* De-emphasize secondary fields (ID, Timezone, Created) so the card is
     scannable: identity at the top, status in the middle, audit at the
     bottom. */
  .admin-users-table td[data-label="ID"],
  .admin-users-table td[data-label="Timezone"],
  .admin-users-table td[data-label="Created"],
  .admin-users-table td[data-label="Last active"] {
    font-size: 12px;
    color: var(--gray-600);
  }
}

/* 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;
}


/* ================================================================
   Project workspace — file tree + code viewer
   ================================================================ */

.ws {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 57px);   /* fill viewport under the 56px sticky nav */
  min-height: 420px;
  background: var(--white);
}

/* ---- Header bar ---- */

.ws-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
  flex: none;
}

.ws-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ws-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}

.ws-back:hover {
  background: var(--gray-100);
  color: var(--ink);
}

.ws-codename {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-head-sep {
  width: 1px;
  height: 16px;
  background: var(--rule);
  flex: none;
}

.ws-head-meta,
.ws-head-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  white-space: nowrap;
}

/* ---- Shell ---- */

.ws-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- Sidebar: file tree ---- */

.ws-side {
  width: 264px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: #faf9f7;             /* warm paper, a notch off the app white */
  border-right: 1px solid var(--rule);
  min-height: 0;
}

.ws-side-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-600);
  flex: none;
}

.ws-side-path {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-tree {
  flex: 1;
  overflow-y: auto;
  padding: 2px 6px 16px;
}

.ws-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 4px 8px;
  padding-left: calc(10px + var(--depth, 0) * 14px);
  border: none;
  border-radius: 6px;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--gray-800);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition);
}

.ws-row:hover {
  background: rgba(60, 64, 67, 0.06);
}

.ws-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Directory rows */

.ws-dir > summary {
  list-style: none;
  font-weight: 500;
  color: var(--gray-700);
}

.ws-dir > summary::-webkit-details-marker { display: none; }

.ws-chevron {
  flex: none;
  color: var(--gray-500);
  transition: transform 160ms ease;
}

.ws-dir[open] > summary .ws-chevron {
  transform: rotate(90deg);
}

.ws-ico-dir {
  flex: none;
  color: var(--gray-500);
}

/* File rows */

.ws-file.is-active {
  background: var(--blue-50);
  color: var(--blue-600);
  font-weight: 500;
}

.ws-file.is-active:hover {
  background: var(--blue-50);
}

.ws-file.is-loading {
  animation: ws-pulse 0.9s ease infinite;
}

@keyframes ws-pulse {
  50% { opacity: 0.45; }
}

/* Language dot: colored by file extension */

.ws-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.ws-dot[data-ext="py"]   { background: #3572a5; }
.ws-dot[data-ext="js"], .ws-dot[data-ext="mjs"] { background: #e7c54b; }
.ws-dot[data-ext="ts"], .ws-dot[data-ext="tsx"] { background: #3178c6; }
.ws-dot[data-ext="md"], .ws-dot[data-ext="markdown"] { background: #0b57d0; }
.ws-dot[data-ext="json"], .ws-dot[data-ext="jsonl"] { background: #8a8d31; }
.ws-dot[data-ext="html"], .ws-dot[data-ext="htm"] { background: #e34c26; }
.ws-dot[data-ext="css"]  { background: #663399; }
.ws-dot[data-ext="sh"], .ws-dot[data-ext="bash"] { background: #4d5a2a; }
.ws-dot[data-ext="yml"], .ws-dot[data-ext="yaml"], .ws-dot[data-ext="toml"] { background: #6d8086; }
.ws-dot[data-ext="tex"], .ws-dot[data-ext="bib"] { background: #2e7d32; }
.ws-dot[data-ext="csv"], .ws-dot[data-ext="tsv"] { background: #9a5b00; }
.ws-dot[data-ext="ipynb"] { background: #df7a26; }
.ws-dot[data-ext="r"]    { background: #1f65b7; }
.ws-dot[data-ext="c"], .ws-dot[data-ext="h"], .ws-dot[data-ext="cpp"], .ws-dot[data-ext="cc"] { background: #555599; }
.ws-dot[data-ext="txt"], .ws-dot[data-ext="log"] { background: var(--gray-400); }

/* Root-level files (README.md and friends), pinned above the sections */

.ws-root-files {
  padding: 2px 0 8px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.08);
  margin-bottom: 6px;
}

/* Sections: the standard project layout (Codebase, Data, Output, …) */

.ws-section {
  margin-top: 2px;
}

.ws-section + .ws-section {
  margin-top: 10px;
}

.ws-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 5px 8px 5px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition);
}

.ws-section-head::-webkit-details-marker { display: none; }

.ws-section-head:hover {
  background: rgba(60, 64, 67, 0.06);
  color: var(--ink);
}

.ws-section[open] > .ws-section-head .ws-chevron {
  transform: rotate(90deg);
}

.ws-section-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-section-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gray-500);
  background: rgba(60, 64, 67, 0.07);
  border-radius: 99px;
  padding: 1px 7px;
}

.ws-section-body {
  padding: 1px 0 2px;
}

.ws-section-empty {
  margin: 0;
  padding: 2px 10px 4px 26px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: italic;
  color: var(--gray-400);
  user-select: none;
}

/* ---- Main pane ---- */

.ws-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Welcome pane: the research direction, set like an epigraph */

.ws-welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow-y: auto;
}

.ws-welcome-inner {
  max-width: 580px;
  animation: ws-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ws-welcome-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 18px;
}

.ws-welcome-quote {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.ws-welcome-rule {
  width: 46px;
  height: 2px;
  background: var(--rule);
  margin: 26px 0 18px;
}

.ws-welcome-hint {
  font-size: 13.5px;
  color: var(--gray-600);
}

@keyframes ws-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Viewer ---- */

.ws-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  flex: none;
  background: #fcfcfb;
}

.ws-tab-name {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-tab-dirty {
  color: var(--blue-500);
  font-size: 11px;
  line-height: 1;
  flex: none;
}

.ws-tab-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Mode toggle: Preview / Code / Edit */

.ws-modes {
  display: flex;
  gap: 2px;
  flex: none;
  background: rgba(60, 64, 67, 0.06);
  border-radius: 7px;
  padding: 2px;
}

.ws-mode {
  border: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.ws-mode:hover {
  color: var(--ink);
}

.ws-mode.is-on {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.ws-save {
  flex: none;
  /* Wide enough for the widest label ("Saving…"), so the text swapping
     between Save / Saving… / Saved ✓ never resizes the button and
     reflows the controls sitting to its left. */
  min-width: 84px;
  text-align: center;
}

.ws-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Viewer content: Monaco editor, Markdown preview, or a notice. Monaco
   manages its own scrolling, gutter, and highlighting — it just needs a
   sized container. */

.ws-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-monaco {
  flex: 1;
  min-height: 0;
}

.ws-md-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

@keyframes ws-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ws-notice {
  padding: 40px 32px;
  font-size: 13.5px;
  color: var(--gray-600);
}

/* ---- Markdown preview ---- */

.ws-md {
  max-width: 760px;
  padding: 32px 40px 56px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  animation: ws-fade 200ms ease both;
}

.ws-md h1, .ws-md h2, .ws-md h3, .ws-md h4 {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 1.6em 0 0.5em;
}

.ws-md h1:first-child, .ws-md h2:first-child { margin-top: 0; }
.ws-md h1 { font-size: 26px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.ws-md h2 { font-size: 20px; }
.ws-md h3 { font-size: 16px; }
.ws-md h4 { font-size: 14px; }

.ws-md p { margin: 0 0 1em; }
.ws-md ul, .ws-md ol { margin: 0 0 1em; padding-left: 26px; }
.ws-md li { margin: 0.25em 0; }
.ws-md li > ul, .ws-md li > ol { margin-bottom: 0; }

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

.ws-md code {
  font-family: 'IBM Plex Mono', var(--mono);
  font-size: 0.85em;
  background: var(--gray-100);
  border-radius: 4px;
  padding: 1.5px 5px;
}

.ws-md pre {
  background: #faf9f7;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1.2em;
}

.ws-md pre code {
  background: none;
  padding: 0;
  font-size: 12.75px;
  line-height: 1.6;
}

.ws-md blockquote {
  border-left: 3px solid var(--gray-300);
  margin: 0 0 1em;
  padding: 2px 0 2px 16px;
  color: var(--ink-soft);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 16px;
}

.ws-md hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.6em 0;
}

.ws-md table {
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 13.5px;
}

.ws-md th, .ws-md td {
  border: 1px solid var(--rule);
  padding: 6px 12px;
  text-align: left;
}

.ws-md th {
  background: var(--gray-50);
  font-weight: 600;
}

.ws-md img {
  max-width: 100%;
  border-radius: var(--radius);
}


/* ---- Responsive: stack the tree above the viewer ---- */

@media (max-width: 880px) {
  .ws {
    height: auto;
    min-height: calc(100vh - 57px);
  }

  .ws-shell {
    flex-direction: column;
  }

  .ws-side {
    width: 100%;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }

  .ws-viewer,
  .ws-welcome {
    min-height: 320px;
  }

  .ws-head-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-welcome-inner,
  .ws-md { animation: none; }
  .ws-chevron { transition: none; }
}

/* ================================================================
   Remote Settings
   ================================================================ */

.remote-form-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.remote-form-row .form-group-wide { flex: 1; min-width: 0; }
.remote-form-row .form-group-narrow { width: 110px; flex: none; }

.form-optional {
  font-weight: 400;
  color: var(--gray-500);
  font-size: 12px;
}

.remote-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.remote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.remote-row + .remote-row {
  border-top: 1px solid var(--rule);
}

.remote-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.remote-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.remote-cmd {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  padding: 3px 8px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-jump {
  font-size: 12px;
  color: var(--gray-500);
}

.remote-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--gray-600);
}

/* Remote status badges + row actions */

.remote-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.remote-status {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 99px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

.remote-status-ok { background: var(--green-50); color: var(--green-600); }
.remote-status-fail { background: var(--red-50); color: var(--red-600); }
.remote-status-unknown { background: var(--gray-100); color: var(--gray-600); }

.remote-error {
  font-size: 12px;
  color: var(--red-600);
  font-family: var(--mono);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Muted variant of the auth page's switch line (signup disabled) */
.auth-switch-muted { color: var(--gray-500); }

/* Pre-login home: a minimal centered card (reuses .auth-card) */

.home-card { text-align: center; }

.home-tagline {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 4px 0 28px;
}

.home-secondary { margin-top: 10px; }

.home-note {
  color: var(--gray-500);
  font-size: 13px;
  margin-top: 14px;
}

.home-terms {
  display: inline-block;
  margin-top: 22px;
  color: var(--gray-500);
  font-size: 12.5px;
  text-decoration: none;
}

.home-terms:hover { color: var(--ink); text-decoration: underline; }

/* GitHub Settings */

.gh-account {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gh-mark { color: var(--ink); flex: none; }

.gh-account-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gh-login {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.gh-login:hover { text-decoration: underline; }

.gh-sub {
  font-size: 12.5px;
  color: var(--gray-500);
}

.gh-steps {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.7;
}

.gh-steps li { margin: 6px 0; }
.gh-steps code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--gray-100);
  border-radius: 4px;
  padding: 1px 5px;
}


/* Workspace: import-from-GitHub button (empty codebase section) */

.ws-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px 10px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.ws-import-btn:hover {
  background: var(--gray-50);
  color: var(--ink);
  border-color: var(--gray-300);
}

.ws-import-btn svg { color: var(--ink); flex: none; }

/* Workspace: image preview pane */

.ws-image {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  /* Checkerboard so transparent PNGs read clearly */
  background-color: var(--gray-50);
  background-image:
    linear-gradient(45deg, var(--gray-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-200) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.ws-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}