/* ==========================================================================
   Site Change Intelligence — Raw Events Screen
   Developer handoff stylesheet
   Target visual: generated Raw Events dashboard mockup
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --bg: #f8fbff;
  --surface: #ffffff;
  --surface-soft: #f6f9fd;
  --surface-blue: #edf6ff;

  --text: #101a44;
  --text-2: #42527a;
  --text-3: #7483a7;
  --muted: #97a4bf;

  --border: #dce6f3;
  --border-strong: #cad8ea;

  --primary: #0b69ff;
  --primary-600: #075be0;
  --primary-soft: #e7f2ff;

  --success: #00a86b;
  --success-soft: #dcf8ea;
  --danger: #f04438;
  --danger-soft: #ffe4e2;
  --warning: #f79009;
  --warning-soft: #fff0d5;
  --purple: #7c3aed;
  --purple-soft: #eee5ff;
  --cyan-soft: #e5f4ff;
  --gray-badge: #eff3f8;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.03);
  --shadow-md: 0 8px 24px rgba(49, 82, 140, 0.06);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --sidebar-w: 204px;
  --topbar-h: 52px;
  --page-pad-x: 26px;
  --page-pad-y: 18px;

  --font:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset / global ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 1180px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

/* ---------- 3. App shell ---------- */
.sci-app {
  min-height: 100vh;
  background: var(--bg);
}

.sci-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-w);
  min-height: 100vh;
  padding: 14px 10px 14px;
  background: #fff;
  border-right: 1px solid var(--border);
}

.sci-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 10px 8px;
}

.sci-brand__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #1478ff, #0757e9);
  box-shadow: 0 7px 18px rgba(11, 105, 255, 0.2);
}

.sci-brand__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.sci-nav {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.sci-nav__item {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 38px;
  padding: 0 14px;
  border-radius: 7px;
  color: #31436d;
  font-size: 13px;
  font-weight: 500;
  transition: 140ms ease;
}

.sci-nav__item:hover {
  background: #f5f9ff;
  color: var(--primary);
}

.sci-nav__item.is-active {
  color: var(--primary);
  background: linear-gradient(90deg, #e9f4ff 0%, #dcedff 100%);
}

.sci-nav__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.sci-help {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #f9fcff;
}

.sci-help__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sci-help__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--primary);
  border-radius: 50%;
  background: #eef6ff;
}

.sci-help__title {
  margin: 1px 0 1px;
  font-size: 11px;
  font-weight: 600;
}

.sci-help__copy {
  margin: 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}

.sci-help__button {
  width: 100%;
  height: 34px;
  margin-top: 10px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
}

/* ---------- 4. Top bar ---------- */
.sci-topbar {
  position: fixed;
  inset: 0 0 auto var(--sidebar-w);
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 26px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.sci-topbar__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

@keyframes sci-spin { to { transform: rotate(360deg); } }
.sci-icon-button.is-loading svg { animation: sci-spin .6s linear infinite; }

.sci-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #25355f;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.sci-notification-dot {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #f04438;
}

.sci-user {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #17264e;
  font-size: 12px;
}

.sci-user__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
  background: #22b573;
}

/* ---------- 5. Main page ---------- */
.sci-main {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
}

.sci-page {
  width: 100%;
  padding: var(--page-pad-y) var(--page-pad-x) 24px;
}

.sci-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
}

.sci-page-title {
  margin: 0;
  font-size: 31px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.sci-page-subtitle {
  margin: 3px 0 0;
  color: #66779d;
  font-size: 15px;
  line-height: 1.35;
}

.sci-page-controls {
  display: flex;
  gap: 12px;
}

.sci-select-control {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 13px;
  color: #18264e;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.sci-select-control--site {
  width: 280px;
  justify-content: space-between;
}

.sci-site-filter input::placeholder {
  color: #18264e;
  opacity: 1;
}

.sci-site-filter__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: #18264e;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sci-site-filter__option.is-highlighted {
  background: #f0f5ff;
}

.sci-site-filter__option.is-active {
  color: var(--primary);
  font-weight: 600;
}

.sci-select-control--date {
  width: 346px;
  justify-content: space-between;
}

/* ---------- 6. KPI cards ---------- */
.sci-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.sci-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 122px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.sci-kpi__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  color: var(--primary);
  border-radius: 50%;
  background: #eaf4ff;
}

.sci-kpi__icon--purple {
  color: var(--purple);
  background: #f0e9ff;
}

.sci-kpi__icon--green {
  color: var(--success);
  background: var(--success-soft);
}

.sci-kpi__icon--orange {
  color: var(--warning);
  background: var(--warning-soft);
}

.sci-kpi__icon--red {
  color: var(--danger);
  background: var(--danger-soft);
}

.sci-kpi__content {
  padding-top: 2px;
  min-width: 0;
}

.sci-kpi__label {
  color: #52658d;
  font-size: 11px;
}

.sci-kpi__value {
  margin-top: 1px;
  color: #0e1741;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.sci-kpi__delta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: var(--success);
  font-size: 13px;
  font-weight: 650;
}

.sci-kpi__delta--danger {
  color: var(--danger);
}

.sci-kpi__delta--neutral {
  color: #4f5e7d;
}

.sci-kpi__meta {
  margin-top: 1px;
  color: #7b8aaa;
  font-size: 10px;
}

/* ---------- 7. Filter bar ---------- */
.sci-filterbar {
  display: grid;
  grid-template-columns:
    minmax(270px, 1.5fr)
    minmax(145px, 0.7fr)
    minmax(145px, 0.7fr)
    minmax(145px, 0.7fr)
    minmax(145px, 0.7fr)
    minmax(145px, 0.7fr)
    auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.sci-search {
  position: relative;
}

.sci-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: #6d7ea0;
  transform: translateY(-50%);
  pointer-events: none;
}

.sci-search input,
.sci-filter-select {
  width: 100%;
  height: 38px;
  color: #1f315a;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  outline: none;
  background: #fff;
}

.sci-search input {
  padding: 0 14px 0 42px;
}

.sci-search input::placeholder {
  color: #8a98b4;
}

.sci-filter-select {
  padding: 0 34px 0 13px;
}

.sci-search input:focus,
.sci-filter-select:focus {
  border-color: #9bc5ff;
  box-shadow: 0 0 0 3px rgba(11, 105, 255, 0.08);
}

.sci-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  color: var(--primary);
  font-weight: 600;
  border: 0;
  background: transparent;
}

/* ---------- 8. Workspace / cards ---------- */
.sci-workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.sci-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sci-card__header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.sci-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sci-card__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sci-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #56688f;
  font-size: 11px;
}

.sci-sort select {
  height: 34px;
  min-width: 145px;
  padding: 0 34px 0 12px;
  color: #23345e;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}

.sci-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  color: #17264d;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
}

/* ---------- 9. Raw Events table ---------- */
.sci-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sci-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Tables whose declared column widths can legitimately exceed a narrow
   container (e.g. Change Sets' 10 columns) — grow to fit them instead of
   forcing width:100% to crush every column down, which collapses any
   unspecified/auto column to near-zero and wraps its text one letter per
   line. .sci-table-wrap's overflow-x:auto then scrolls it on narrow screens
   instead. */
.sci-table--wide {
  width: max-content;
  min-width: 100%;
}

.sci-table col.select { width: 42px; }
.sci-table col.timestamp { width: 95px; }
.sci-table col.domain { width: 170px; }
.sci-table col.server { width: 90px; }
.sci-table col.event { width: 82px; }
.sci-table col.path { width: 340px; }
.sci-table col.type { width: 74px; }
.sci-table col.size { width: 82px; }
.sci-table col.author { width: 104px; }
.sci-table col.change { width: 92px; }
.sci-table col.status { width: 94px; }
.sci-table col.actions { width: 36px; }

.sci-table thead th {
  height: 38px;
  padding: 0 8px;
  color: #56688f;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  background: #fbfdff;
  border-bottom: 1px solid var(--border);
}

.sci-th-sort {
  padding: 0;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.sci-th-sort:hover {
  color: var(--primary);
}

.sci-table tbody td {
  height: 50px;
  padding: 6px 8px;
  color: #334873;
  font-size: 10.5px;
  vertical-align: middle;
  border-bottom: 1px solid #e8eef6;
}

.sci-table tbody tr:last-child td {
  border-bottom: 0;
}

.sci-table tbody tr:hover td {
  background: #f8fbff;
}

.sci-table tbody tr.is-selected td {
  background: linear-gradient(90deg, #e8f4ff 0%, #eef7ff 100%);
}

.sci-table__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sci-table__date {
  white-space: nowrap;
  line-height: 1.3;
}

.sci-table__path {
  display: block;
  color: #3e5787;
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}

.sci-table__link {
  color: var(--primary);
  font-weight: 600;
}

.sci-more {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #4d6087;
  border: 0;
  background: transparent;
}

/* ---------- 10. Badges ---------- */
.sci-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.sci-badge--updated {
  color: #028a58;
  background: var(--success-soft);
}

.sci-badge--created {
  color: #0065d8;
  background: #e2f0ff;
}

.sci-badge--deleted {
  color: #ba6800;
  background: var(--warning-soft);
}

.sci-badge--mapped {
  color: #028a58;
  background: var(--success-soft);
}

.sci-badge--unmapped {
  color: #d92d20;
  background: var(--danger-soft);
}

.sci-badge--php {
  color: #0065d8;
  background: #e5f3ff;
}

.sci-badge--css {
  color: #7839ee;
  background: #eee7ff;
}

.sci-badge--html {
  color: #a15c00;
  background: #fff0d2;
}

.sci-badge--png {
  color: #c4320a;
  background: #ffe6df;
}

.sci-badge--md {
  color: #596579;
  background: var(--gray-badge);
}

/* severity badges — not in the original mockup's badge set (which only covers
   event type / mapping status), added for raw_events.severity */
.sci-badge--critical { color: #b42318; background: var(--danger-soft); }
.sci-badge--warning   { color: #b54708; background: var(--warning-soft); }
.sci-badge--notice    { color: #175cd3; background: var(--cyan-soft); }
.sci-badge--info      { color: #475467; background: var(--gray-badge); }

/* ---------- 11. Table footer / pagination ---------- */
.sci-table-footer {
  min-height: 57px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-top: 1px solid var(--border);
}

.sci-table-footer__summary {
  color: #52658d;
  font-size: 10px;
}

.sci-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sci-page-btn {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  color: #354a73;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.sci-page-btn.is-current {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.sci-rows {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #52658d;
  font-size: 10px;
}

.sci-rows select {
  height: 32px;
  min-width: 70px;
  padding: 0 28px 0 10px;
  color: #23345e;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

/* ---------- 12. Event details drawer ---------- */
.sci-drawer {
  min-height: 657px;
}

.sci-drawer__header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.sci-drawer__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sci-drawer__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #4d6087;
  border: 0;
  background: transparent;
}

.sci-drawer__body {
  padding: 12px 14px 14px;
}

.sci-event-summary {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}

.sci-event-summary__top,
.sci-event-summary__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sci-event-summary__top {
  margin-bottom: 6px;
}

.sci-event-summary__meta {
  color: #65779e;
  font-size: 10.5px;
}

.sci-mapped-link {
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- 13. Detail sections ---------- */
.sci-detail-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.sci-detail-section:last-child {
  border-bottom: 0;
}

.sci-detail-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  color: #17264e;
  font-size: 12px;
  font-weight: 700;
}

.sci-detail-heading__icon {
  color: var(--primary);
}

.sci-detail-grid {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: start;
}

.sci-detail-grid dt {
  color: #63759b;
  font-size: 10.5px;
}

.sci-detail-grid dd {
  min-width: 0;
  margin: 0;
  color: #263a65;
  font-size: 10.5px;
  font-weight: 500;
}

.sci-code-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  color: #3c4f76;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.35;
  word-break: break-all;
  border-radius: 4px;
  background: #edf2f8;
}

.sci-positive {
  color: var(--success);
  font-weight: 700;
}

.sci-negative {
  color: var(--danger);
  font-weight: 700;
}

.sci-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.sci-detail-row__label {
  width: 105px;
  flex: 0 0 105px;
  color: #63759b;
  font-size: 10.5px;
}

.sci-detail-row__value {
  color: #263a65;
  font-size: 10.5px;
  font-weight: 500;
}

.sci-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--success);
}

/* ---------- 14. AI summary ---------- */
.sci-ai-header,
.sci-json-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.sci-ai-edit,
.sci-json-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 600;
  border: 0;
  background: transparent;
}

.sci-ai-box {
  padding: 11px 12px;
  color: #52658d;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 7px;
  background: linear-gradient(180deg, #edf7ff 0%, #e9f4ff 100%);
}

/* ---------- 15. JSON preview ---------- */
.sci-json-box {
  position: relative;
  max-height: 180px;
  overflow: auto;
  padding: 10px 12px;
  color: #44557b;
  border: 1px solid #dfe8f4;
  border-radius: 7px;
  background: #fbfdff;
}

.sci-json-box pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.3px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.sci-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #50638a;
  border: 0;
  background: transparent;
}

/* ---------- 16. Utility classes ---------- */
.u-text-primary { color: var(--primary) !important; }
.u-text-success { color: var(--success) !important; }
.u-text-danger { color: var(--danger) !important; }
.u-text-muted { color: var(--text-3) !important; }

.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 17. Recommended responsive behavior ---------- */
@media (max-width: 1450px) {
  :root {
    --page-pad-x: 20px;
  }

  .sci-kpis {
    gap: 9px;
  }

  .sci-kpi {
    padding-inline: 13px;
  }

  .sci-filterbar {
    grid-template-columns:
      minmax(240px, 1.35fr)
      repeat(5, minmax(130px, 0.7fr))
      auto;
  }
}

@media (max-width: 1260px) {
  .sci-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .sci-drawer {
    min-height: auto;
  }

  .sci-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 18. Interaction polish ---------- */
.sci-nav__item,
.sci-button,
.sci-page-btn,
.sci-help__button,
.sci-icon-button,
.sci-reset,
.sci-ai-edit,
.sci-json-link {
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.sci-button:hover,
.sci-help__button:hover,
.sci-page-btn:hover:not(.is-current) {
  border-color: #aecbf0;
  background: #f7fbff;
}

.sci-button:active,
.sci-page-btn:active,
.sci-help__button:active {
  transform: translateY(1px);
}

.sci-reset:hover,
.sci-ai-edit:hover,
.sci-json-link:hover {
  color: var(--primary-600);
}

/* ---------- 19. Accessibility ---------- */
.sci-button:focus-visible,
.sci-page-btn:focus-visible,
.sci-icon-button:focus-visible,
.sci-reset:focus-visible,
.sci-ai-edit:focus-visible,
.sci-json-link:focus-visible,
.sci-help__button:focus-visible,
.sci-nav__item:focus-visible {
  outline: 3px solid rgba(11, 105, 255, 0.18);
  outline-offset: 2px;
}

/* ==========================================================================
   Expected page structure

   .sci-app
     .sci-sidebar
     .sci-topbar
     .sci-main
       .sci-page
         .sci-page-header
         .sci-kpis
         .sci-filterbar
         .sci-workspace
           .sci-card            -> Raw Events table
           .sci-card.sci-drawer -> Event Details

   Notes:
   - Use Inter for closest typography match.
   - Use a 1536×1024 reference viewport for visual QA.
   - Keep the Raw Events table and Event Details drawer visible side-by-side
     at desktop widths.
   - Icon geometry depends on the icon library; Lucide is a close match.
   ========================================================================== */


/* ==========================================================================
   Sign-in screen (docs/design-image/signIn.png) — split panel, no sidebar
   ========================================================================== */
.sci-auth {
  display: grid;
  grid-template-columns: minmax(360px, 42%) 1fr;
  min-height: 100vh;
  background: #fff;
}

.sci-auth__intro {
  position: relative;
  overflow: hidden;
  padding: 48px 44px 32px;
  background: linear-gradient(165deg, #eaf3ff 0%, #dcebff 55%, #cfe3ff 100%);
}

.sci-auth__intro::before,
.sci-auth__intro::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 220px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: rgba(255, 255, 255, 0.5);
}
.sci-auth__intro::before { bottom: -40px; background: rgba(255,255,255,.55); }
.sci-auth__intro::after  { bottom: -120px; background: rgba(180, 210, 255, .55); }

.sci-auth__brandrow { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }

.sci-auth__tagline {
  position: relative; z-index: 1;
  margin: 18px 0 34px;
  color: #42527a;
  font-size: 16px;
  line-height: 1.45;
  max-width: 30ch;
}

.sci-auth__feature {
  position: relative; z-index: 1;
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.sci-auth__feature-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  color: var(--primary);
  background: #dceafe;
}
.sci-auth__feature-icon--purple { color: var(--purple); background: #e6dcfe; }
.sci-auth__feature-icon--green  { color: var(--success); background: #d7f5e6; }

.sci-auth__feature h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--text); }
.sci-auth__feature p  { margin: 0; font-size: 13px; color: #5b6a90; line-height: 1.4; }

.sci-auth__preview {
  position: relative; z-index: 1;
  margin-top: 20px;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(30, 70, 160, .18);
}
.sci-auth__preview-dots span {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #cbd6e8; margin-right: 5px;
}
.sci-auth__preview svg { width: 100%; height: 90px; margin: 10px 0; }
.sci-auth__preview-stats { display: flex; gap: 8px; }
.sci-auth__stat {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 11px;
}
.sci-auth__stat b { display: block; font-size: 15px; }

.sci-auth__footer {
  position: relative; z-index: 1;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 2px solid rgba(255,255,255,.7);
  font-size: 11px;
  letter-spacing: .08em;
  color: #5b6a90;
  text-transform: uppercase;
}

.sci-auth__form-panel {
  display: flex;
  flex-direction: column;
}

.sci-auth__form-topbar {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 22px 40px 0;
  color: #7483a7; font-size: 12px;
}

.sci-auth__form-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 40px 60px;
}

.sci-auth__form { width: 100%; max-width: 420px; }
.sci-auth__form h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sci-auth__form > p { margin: 0 0 28px; color: #66779d; font-size: 14.5px; }

.sci-field { margin-bottom: 18px; }
.sci-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: #17264e; }

.sci-field-input {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: #fff;
}
.sci-field-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11,105,255,.12); }
.sci-field-input svg { color: #8a98b4; flex: 0 0 auto; }
.sci-field-input input { flex: 1; border: 0; outline: 0; font-size: 14px; background: transparent; }
.sci-field-input button { border: 0; background: transparent; color: #8a98b4; cursor: pointer; }

.sci-field-error { margin-top: 6px; font-size: 12.5px; color: var(--danger); }

.sci-auth__row { display: flex; justify-content: flex-end; margin: -8px 0 18px; }
.sci-auth__row a { font-size: 13px; font-weight: 600; color: var(--primary); }

.sci-btn-primary {
  width: 100%; height: 48px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.sci-btn-primary:hover { background: var(--primary-600); }
.sci-btn-primary:disabled { opacity: .6; cursor: progress; }

.sci-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #97a4bf; font-size: 12px; }
.sci-divider::before, .sci-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.sci-btn-google {
  width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff;
  font-size: 14.5px; font-weight: 600; color: #33415e; cursor: not-allowed; opacity: .65;
}

.sci-auth__policy { margin-top: 22px; text-align: center; font-size: 12.5px; color: #7483a7; }
.sci-auth__policy a { color: var(--primary); font-weight: 600; }

@media (max-width: 900px) {
  .sci-auth { grid-template-columns: 1fr; }
  .sci-auth__intro { display: none; }
}

[x-cloak] { display: none !important; }


/* Change Sets — category / weight / outcome badges (not in the original
   mockup's badge set, which only covered raw-event type + mapping status) */
.sci-badge--content   { color: #175cd3; background: var(--cyan-soft); }
.sci-badge--seo       { color: #028a58; background: var(--success-soft); }
.sci-badge--design    { color: #7839ee; background: var(--purple-soft); }
.sci-badge--bugfix    { color: #d92d20; background: var(--danger-soft); }
.sci-badge--infra     { color: #b54708; background: var(--warning-soft); }
.sci-badge--migration { color: #475467; background: var(--gray-badge); }

.sci-badge--small  { color: #175cd3; background: var(--cyan-soft); }
.sci-badge--medium { color: #b54708; background: var(--warning-soft); }
.sci-badge--large  { color: #d92d20; background: var(--danger-soft); }

/* ---------- Change Sets (docs/design-image/changes-set-1.png) ---------- */

/* Segmented date-range control replacing the plain <select> — a bordered
   pill group with the active preset filled solid, matching the mockup. */
.sci-range-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.sci-range-tab {
  height: 100%;
  padding: 0 12px;
  color: #52658d;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.sci-range-tab:hover {
  color: #18264e;
}

.sci-range-tab.is-active {
  color: #fff;
  background: var(--primary);
}

.sci-icon-button.is-active {
  color: var(--primary);
  border-color: var(--primary) !important;
  background: #eaf4ff;
}

/* Quick-filter row: a category/weight <select> paired with clickable badge
   pills bound to the same underlying filter — either entry point sets the
   same state, so the pills always reflect what the dropdown says. */
.sci-quickfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sci-quickfilters__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.sci-quick-pill {
  border: 1.5px solid transparent;
  font: inherit;
  cursor: pointer;
}

.sci-quick-pill.is-active {
  border-color: currentColor;
}

.sci-badge--measuring       { color: #0065d8; background: #e2f0ff; }
.sci-badge--no-gsc-data     { color: #7483a7; background: var(--gray-badge); }
.sci-badge--not-connected   { color: #7483a7; background: var(--gray-badge); }
.sci-badge--awaiting-data   { color: #b54708; background: var(--warning-soft); }
.sci-badge--resolved        { color: #028a58; background: var(--success-soft); }

.sci-badge--high { color: #028a58; background: var(--success-soft); }
.sci-badge--low  { color: #d92d20; background: var(--danger-soft); }

.sci-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 14px 0 12px; }
.sci-tab {
  padding: 8px 4px 10px; margin-right: 18px; font-size: 12.5px; font-weight: 600;
  color: #7483a7; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
}
.sci-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.sci-gsc-windows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.sci-gsc-window-label { font-size: 10px; color: #97a4bf; text-transform: uppercase; letter-spacing: .04em; }
.sci-gsc-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #edf2f8; font-size: 12.5px; }


/* ==========================================================================
   Client Management (docs/design-image/client-management.png,
   add-client-management.png) — list + slide-over "Add New Client" panel
   ========================================================================== */
.sci-btn-fill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  color: #fff; font-weight: 700; font-size: 13.5px;
  border: 0; border-radius: 7px; background: var(--primary); cursor: pointer;
}
.sci-btn-fill:hover { background: var(--primary-600); }

.sci-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
}
.sci-status-pill--active   { color: #028a58; background: var(--success-soft); }
.sci-status-pill--inactive { color: #d92d20; background: var(--danger-soft); }
.sci-status-pill--dot { width: 7px; height: 7px; border-radius: 50%; }
.sci-status-pill--dot.on  { background: var(--success); }
.sci-status-pill--dot.off { background: #97a4bf; }

.sci-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; margin: 2px 3px 2px 0; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; color: #33415e; background: var(--gray-badge);
}

/* slide-over panel, overlaying the workspace rather than sitting beside it */
.sci-overlay {
  position: fixed; inset: 0; background: rgba(16, 26, 68, .35); z-index: 60;
  display: flex; justify-content: flex-end;
}
.sci-slideover {
  width: 460px; max-width: 100%; height: 100vh; overflow-y: auto;
  background: #fff; box-shadow: -12px 0 40px rgba(16,26,68,.18);
}
.sci-slideover__header {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; background: #fff; border-bottom: 1px solid var(--border);
}
.sci-slideover__header h2 { margin: 0; font-size: 19px; font-weight: 800; }
.sci-slideover__body { padding: 20px 22px 90px; }

.sci-form-section h3 {
  margin: 22px 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #52658d;
}
.sci-form-section:first-child h3 { margin-top: 0; }

.sci-form-field { margin-bottom: 16px; }
.sci-form-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #17264e; }
.sci-form-field .req { color: var(--danger); }
.sci-form-field input[type=text],
.sci-form-field input[type=url],
.sci-form-field input[type=email],
.sci-form-field input[type=tel],
.sci-form-field select,
.sci-form-field textarea {
  width: 100%; padding: 10px 13px; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; outline: 0;
}
.sci-form-field textarea { resize: vertical; min-height: 70px; }
.sci-form-field input:focus, .sci-form-field select:focus, .sci-form-field textarea:focus {
  border-color: #9bc5ff; box-shadow: 0 0 0 3px rgba(11,105,255,.08);
}
.sci-form-field-icon { position: relative; }
.sci-form-field-icon svg { position: absolute; left: 12px; top: 12px; color: #8a98b4; }
.sci-form-field-icon input { padding-left: 38px !important; }
.sci-form-hint { text-align: right; font-size: 10.5px; color: #97a4bf; margin-top: 4px; }
.sci-form-error { font-size: 12px; color: var(--danger); margin-top: 5px; }

.sci-tag-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
}
.sci-tag-input input {
  flex: 1; min-width: 120px; border: 0; outline: 0; font-size: 13px; padding: 4px;
}
.sci-tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-600);
}
.sci-tag-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; display: flex; }

.sci-gsc-connect {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft);
}
.sci-gsc-connect__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: #fff; font-size: 12.5px; font-weight: 600; color: #33415e; cursor: pointer;
}

.sci-slideover__footer {
  position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 22px; background: #fff; border-top: 1px solid var(--border);
}
.sci-btn-ghost {
  height: 42px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: #fff; font-weight: 700; font-size: 13.5px; color: #33415e; cursor: pointer;
}
.sci-btn-fill-lg { height: 42px; padding: 0 22px; border-radius: 7px; }


/* Settings page tabs + toggle-connected panels */
.sci-settings-nav { display: flex; flex-direction: column; gap: 3px; }
.sci-settings-nav button {
  text-align: left; padding: 10px 14px; border: 0; border-radius: 7px;
  background: transparent; font-size: 13.5px; font-weight: 600; color: #52658d; cursor: pointer;
}
.sci-settings-nav button.is-active { background: var(--primary-soft); color: var(--primary-600); }

.sci-connected-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
  background: var(--success-soft); color: #028a58; font-size: 13px; font-weight: 600;
}
.sci-saved-banner {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 16px;
  background: var(--success-soft); color: #028a58; font-size: 13px;
}

/* ==========================================================================
   Dashboard v2 — global search, date range, donut, toggle bars, alerts,
   insights, GSC mini-panel, scheduled jobs, system status
   ========================================================================== */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ---------- Global search (topbar) ---------- */
.sci-global-search { position: relative; width: 400px; flex: 0 1 400px; }
.sci-global-search input {
  width: 100%; height: 36px; padding: 0 46px 0 38px;
  color: var(--text-2); border: 1px solid var(--border-strong); border-radius: 7px;
  outline: none; background: #fff;
}
.sci-global-search input::placeholder { color: #8a98b4; }
.sci-global-search input:focus { border-color: #9bc5ff; box-shadow: 0 0 0 3px rgba(11, 105, 255, 0.08); }
.sci-global-search__icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: #6d7ea0; transform: translateY(-50%); pointer-events: none; }
.sci-shortcut {
  position: absolute; top: 50%; right: 8px; padding: 2px 6px; color: #8491ac; font-size: 9.5px;
  font-weight: 600; border-radius: 4px; background: #f1f4f8; transform: translateY(-50%); pointer-events: none;
}
.sci-search-group-label {
  margin: 6px 8px 3px; padding-top: 6px; color: #8a98b7; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--border);
}
.sci-search-group-label:first-child { border-top: 0; padding-top: 0; margin-top: 2px; }
.sci-search-result {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px;
}
.sci-search-result:hover { background: var(--surface-soft); }
.sci-search-result strong { display: block; color: var(--text); font-weight: 600; }
.sci-search-result__meta { display: block; color: var(--text-3); font-size: 11px; margin-top: 1px; }

/* ---------- System status (sidebar) ---------- */
.sci-system-status {
  position: absolute; right: 12px; bottom: 12px; left: 12px;
  padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #f9fcff;
}
.sci-system-status__row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.sci-status-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--success); }
.sci-status-dot--warn { background: var(--warning); }
.sci-status-dot--danger { background: var(--danger); }
.sci-system-status__title { font-size: 11px; font-weight: 700; }
.sci-system-status__copy { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.5; }
.sci-system-status__meta { margin-top: 4px; color: var(--text-3); font-size: 9.5px; }

/* ---------- Date range popover ---------- */
.sci-date-popover {
  position: absolute; top: 44px; right: 0; z-index: 60; padding: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px; width: 260px;
}
.sci-date-popover label { font-size: 11px; font-weight: 600; color: var(--text-2); display: block; margin-bottom: 3px; }
.sci-date-popover input[type="date"] {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text);
}

/* ---------- Donut (pure CSS conic-gradient) ---------- */
.sci-donut-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.sci-donut { position: relative; width: 150px; height: 150px; margin: auto; border-radius: 50%; }
.sci-donut::after { content: ""; position: absolute; inset: 30px; border-radius: 50%; background: #fff; }
.sci-donut__center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.sci-donut__value { font-size: 19px; font-weight: 760; color: var(--text); }
.sci-donut__label { color: var(--text-3); font-size: 10px; }
.sci-legend { display: grid; gap: 9px; }
.sci-legend__item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--text-2); font-size: 12px; }
.sci-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.sci-legend__value { color: var(--text); font-weight: 650; }

/* ---------- Toggle switch (Outcome / Confidence) ---------- */
.sci-toggle { display: flex; align-items: center; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-soft); }
.sci-toggle__button { height: 27px; padding: 0 12px; color: var(--text-2); font-size: 11.5px; font-weight: 600; border: 0; border-radius: 5px; background: transparent; }
.sci-toggle__button.is-active { color: var(--primary); background: #fff; box-shadow: 0 1px 3px rgba(32, 52, 89, .1); }

/* ---------- Pure-CSS bar chart (Outcome / Confidence values) ---------- */
/* position:relative is load-bearing: the "no resolved outcomes" empty-state
   paragraph inside this container uses position:absolute;inset:0, and
   without a positioned ancestor here it expands to the page's initial
   containing block — an invisible full-page overlay that silently
   swallowed clicks everywhere, including the Outcome/Confidence toggle
   itself, whenever confidence had no data yet. Do not remove. */
.sci-bars { position: relative; height: 178px; display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; padding: 26px 10px 30px; }
.sci-bar { position: relative; width: 44px; min-height: 2px; border-radius: 5px 5px 0 0; }
.sci-bar__value { position: absolute; top: -20px; left: 50%; color: var(--text); font-size: 11.5px; font-weight: 650; transform: translateX(-50%); white-space: nowrap; }
.sci-bar__label { position: absolute; top: calc(100% + 8px); left: 50%; width: 84px; color: var(--text-3); font-size: 10.5px; text-align: center; transform: translateX(-50%); }

/* ---------- Alerts list ---------- */
.sci-alert-list { display: grid; }
.sci-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #e9eff6; }
.sci-alert:last-child { border-bottom: 0; }
.sci-alert__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.sci-alert__title { color: var(--text); font-size: 12.5px; font-weight: 650; margin: 0; }
.sci-alert__meta { margin-top: 1px; color: var(--text-3); font-size: 11px; }
.sci-alert__time { color: var(--text-3); font-size: 10.5px; text-align: right; white-space: nowrap; }

/* ---------- AI Insights list ---------- */
.sci-insights { display: grid; }
.sci-insight { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #e9eff6; }
.sci-insight:last-child { border-bottom: 0; }
.sci-insight__icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--warning); border-radius: 50%; background: var(--warning-soft); }
.sci-insight__client { font-size: 12.5px; font-weight: 650; }
.sci-insight__copy { margin-top: 2px; color: var(--text-2); font-size: 11.5px; line-height: 1.4; }
.sci-insight__time { color: var(--text-3); font-size: 10px; white-space: nowrap; }

/* ---------- GSC mini panel ---------- */
.sci-gsc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sci-gsc-kpi { min-height: 62px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.sci-gsc-kpi__value { font-size: 16px; font-weight: 730; color: var(--text); }
.sci-gsc-kpi__label { margin-top: 1px; color: var(--text-3); font-size: 9.5px; }
.sci-gsc-kpi__delta { margin-top: 5px; color: var(--success); font-size: 10.5px; font-weight: 650; }
.sci-gsc-kpi__delta--danger { color: var(--danger); }

/* ---------- Scheduled jobs ---------- */
.sci-jobs { display: grid; }
.sci-job { display: grid; grid-template-columns: 11px minmax(0, 1.3fr) minmax(70px, .8fr) minmax(90px, 1fr); gap: 8px; align-items: center; min-height: 36px; color: var(--text-2); font-size: 11.5px; border-bottom: 1px solid #e9eff6; }
.sci-job:last-of-type { border-bottom: 0; }
.sci-job__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sci-job__dot--warn { background: var(--warning); }
.sci-job__dot--danger { background: var(--danger); }
.sci-job__dot--idle { background: #c4cede; }
.sci-job__schedule, .sci-job__last-run { color: var(--text-3); }
.sci-jobs__footer { padding: 10px 0 1px; text-align: center; }

.sci-table__summary { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ---------- Custom hover tooltip ----------
   Teleported to <body> (see Alpine.data('hoverTip') in layouts/app.blade.php)
   and positioned via inline top/left/transform computed from the trigger's
   real getBoundingClientRect() — deliberately NOT position:absolute inside
   the trigger, since every .sci-card has overflow:hidden for its rounded
   corners, which silently clips any ordinary absolutely-positioned child. */
.sci-hover-tip {
  position: fixed;
  z-index: 9999;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  background: #16213f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.22);
  pointer-events: none;
  white-space: normal;
}

/* ==========================================================================
   Team Activity (docs/design-image/team-activity.png)
   Scoped under .ta-app instead of :root — this page's tokens are visually
   near-identical to the shared design system's but not byte-identical
   (e.g. --text here is #11183f vs the shared --text's #101a44), and :root
   custom properties cascade globally regardless of which stylesheet or
   selector defines them. Redefining them at :root would have quietly
   recolored every other page in the app.
   ========================================================================== */
.ta-app {
  --bg: #f8fbff;
  --surface: #fff;
  --border: #dce6f3;
  --border-strong: #cad8ea;
  --text: #11183f;
  --text-2: #34466f;
  --text-3: #6b7ba0;
  --blue: #0b69ff;
  --blue-dark: #075ce0;
  --blue-soft: #e6f2ff;
  --green: #0cb176;
  --green-soft: #dff8ec;
  --red: #ef4444;
  --red-soft: #ffe3e3;
  --orange: #f79009;
  --orange-soft: #fff0d6;
  --purple: #8b5cf6;
  --purple-soft: #efe7ff;
}

.ta-page-header { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.ta-page-title { margin: 0; font-size: 29px; line-height: 1.05; font-weight: 760; letter-spacing: -.035em; color: var(--text); }
.ta-page-subtitle { margin: 3px 0 0; color: #68799f; font-size: 14px; }

.ta-range-tabs { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: #fff; height: 35px; }
.ta-range-tab { min-width: 98px; height: 100%; padding: 0 14px; border: 0; border-right: 1px solid var(--border); background: #fff; color: #425579; font-size: 11px; font-weight: 600; cursor: pointer; }
.ta-range-tab:last-child { border-right: 0; }
.ta-range-tab.is-active { color: #fff; background: var(--blue); }

.ta-view-tabs { display: flex; margin-bottom: 11px; flex-wrap: wrap; }
/* Centred by the box, not by the element's default behaviour: a <button>
   centres its own label while an <a> does not, so the link tabs sat 2px from
   the top with 19px of below them while every button read 10/11. */
.ta-view-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 125px; padding: 0 16px; border: 1px solid var(--border); border-right: 0;
  background: #fff; color: #30426b; font-size: 11px; font-weight: 600; line-height: 1;
  text-align: center; cursor: pointer; }
.ta-view-tab:first-child { border-radius: 7px 0 0 7px; }
.ta-view-tab:last-child { border-right: 1px solid var(--border); border-radius: 0 7px 7px 0; }
.ta-view-tab.is-active { color: var(--blue); font-weight: 650; background: var(--blue-soft); }

.ta-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 11px; }
.ta-kpi { display: flex; gap: 12px; min-height: 121px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ta-kpi__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); }
.ta-kpi__icon--green { color: var(--green); background: var(--green-soft); }
.ta-kpi__icon--purple { color: var(--purple); background: var(--purple-soft); }
.ta-kpi__icon--red { color: var(--red); background: var(--red-soft); }
.ta-kpi__label { color: #607198; font-size: 10.5px; }
.ta-kpi__value { margin-top: 2px; font-size: 23px; line-height: 1.1; font-weight: 760; color: var(--text); }
.ta-kpi__delta { margin-top: 6px; color: var(--green); font-size: 10.5px; font-weight: 650; }
.ta-kpi__delta--neutral { color: var(--text-3); }
.ta-kpi__meta { margin-top: 1px; color: #8491ad; font-size: 9px; }

.ta-layout { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(320px, .9fr); gap: 11px; align-items: start; }
.ta-right { display: grid; gap: 11px; }

.ta-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.ta-card__header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--border); gap: 10px; }
.ta-card__title { margin: 0; font-size: 14px; font-weight: 720; color: var(--text); }
.ta-card__tools { display: flex; align-items: center; gap: 8px; }

.ta-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: #1d315d; font-size: 11px; font-weight: 600; cursor: pointer; }
/* also used on <button> elements (tab-switching "View all" links), which
   need the native button chrome (border/background/padding) reset — an <a>
   never had any of that to begin with, so this is safe either way. */
.ta-view-all { color: var(--blue); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; }

.ta-table-wrap { width: 100%; overflow-x: auto; }
.ta-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ta-table th { height: 37px; padding: 0 10px; background: #fbfdff; border-bottom: 1px solid var(--border); color: #607198; font-size: 10px; font-weight: 500; text-align: left; }
.ta-table td { height: 43px; padding: 6px 10px; border-bottom: 1px solid #e9eff6; color: #334873; font-size: 11px; }
.ta-table tbody tr:hover td { background: #fafcff; }
.ta-th-sort { padding: 0; color: inherit; font: inherit; font-weight: 500; border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.ta-th-sort:hover { color: var(--blue); }

.ta-member-cell { display: flex; align-items: center; gap: 8px; }
.ta-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 650; }
.ta-avatar--pink { background: #f66d9b; }
.ta-avatar--green { background: #49c894; }
.ta-avatar--blue { background: #5f9df3; }
.ta-avatar--orange { background: #ff932a; }
.ta-avatar--purple { background: #a56cf1; }

.ta-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.ta-link:hover { text-decoration: underline; }

.ta-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.ta-badge--content { color: #0067da; background: #e5f2ff; }
.ta-badge--seo { color: #087d56; background: #dff8ec; }
.ta-badge--design { color: #7132d4; background: #efe6ff; }
.ta-badge--bugfix { color: #d92d20; background: #ffe2e0; }
.ta-badge--infra { color: #a85d00; background: #fff0d6; }
.ta-badge--migration { color: #475467; background: #eff3f8; }

.ta-table-footer { min-height: 62px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 0 14px; border-top: 1px solid var(--border); }
.ta-records { display: flex; align-items: center; gap: 8px; color: #53668d; font-size: 11px; }
.ta-records select { height: 33px; min-width: 62px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.ta-table-count { text-align: center; color: #607198; font-size: 11px; }
.ta-pagination { display: flex; gap: 5px; justify-content: flex-end; }
.ta-page-btn { display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: #344873; font-size: 11px; cursor: pointer; }
.ta-page-btn.is-active { color: #fff; border-color: var(--blue); background: var(--blue); }

.ta-summary-table { width: 100%; border-collapse: collapse; }
.ta-summary-table th, .ta-summary-table td { padding: 5px 11px; border-bottom: 1px solid #e9eff6; font-size: 10.5px; }
.ta-summary-table th { height: 31px; background: #fbfdff; color: #607198; font-weight: 500; text-align: left; }
.ta-summary-table td { height: 35px; color: #334873; }

.ta-work, .ta-clients { padding: 11px 13px 13px; }
.ta-work__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 8px; }
.ta-work__select { height: 26px; border: 1px solid var(--border); border-radius: 5px; background: #fff; font-size: 10px; }

.ta-work-list { display: grid; gap: 9px; }
.ta-work-row { display: grid; grid-template-columns: 12px 74px minmax(0, 1fr) 34px 33px; gap: 7px; align-items: center; font-size: 10.5px; }
.ta-work-dot { width: 9px; height: 9px; border-radius: 50%; }
.ta-progress { height: 7px; border-radius: 99px; background: #edf2f8; overflow: hidden; }
.ta-progress__bar { display: block; height: 100%; border-radius: inherit; }

.ta-client-row { display: grid; grid-template-columns: 133px minmax(0, 1fr) 34px; gap: 9px; align-items: center; min-height: 28px; color: #435985; font-size: 10.5px; }
.ta-client-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-client-row__count { text-align: right; font-weight: 600; color: #263c68; }
.ta-progress__bar--blue { background: #4a92f2; }
.ta-progress__bar--green { background: #55c99c; }
.ta-progress__bar--purple { background: #9564ee; }
.ta-progress__bar--red { background: #ef5a62; }
.ta-progress__bar--orange { background: #f59a23; }

@media (max-width: 1440px) {
  .ta-kpis { gap: 8px; }
  .ta-kpi { padding-inline: 12px; }
  .ta-kpi__icon { width: 42px; height: 42px; flex-basis: 42px; }
  .ta-kpi__value { font-size: 20px; }
}
@media (max-width: 1280px) {
  .ta-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-layout { grid-template-columns: 1fr; }
}

/* ---------- Dashboard density pass ----------
   Scoped to .sci-dashboard so the compaction below only ever affects the
   Dashboard page — .sci-kpi/.sci-card/.sci-table are shared primitives
   used by Clients, Change Sets, Raw Events, GSC, Reports and Settings too,
   and those pages are intentionally left at their existing density. */
.sci-dashboard .sci-kpi {
  min-height: 104px;
  padding: 12px 14px;
  gap: 11px;
}
.sci-dashboard .sci-kpi__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
.sci-dashboard .sci-kpi__value { font-size: 20px; }
.sci-dashboard .sci-kpi__label { font-size: 10.5px; }
.sci-dashboard .sci-kpi__delta { margin-top: 4px; font-size: 11px; }
.sci-dashboard .sci-kpi__meta { font-size: 9.5px; }

.sci-dashboard .sci-card__header { min-height: 42px; }

.sci-dashboard .sci-table thead th { height: 35px; font-size: 9.5px; }
.sci-dashboard .sci-table tbody td { height: 39px; padding: 5px 8px; font-size: 10px; }

.sci-dashboard .sci-alert-list { align-content: start; }
.sci-dashboard .sci-alert { min-height: 50px; padding: 8px 4px; }
.sci-dashboard .sci-alert__icon { width: 27px; height: 27px; }

.sci-dashboard .sci-insights { align-content: start; }
.sci-dashboard .sci-insight { min-height: 50px; padding: 8px 4px; }

.sci-dashboard .sci-gsc-kpis { gap: 6px; }
.sci-dashboard .sci-gsc-kpi { min-height: 56px; padding: 7px 8px; }
.sci-dashboard .sci-gsc-kpi__value { font-size: 14px; }

.sci-dashboard .sci-jobs { align-content: start; }
.sci-dashboard .sci-job { min-height: 32px; font-size: 11px; }

/* Attribution confidence — spec §11. The By Member table infers who did the
   work from the client assignment pivot; file events carry no author, so the
   badge exists to stop the number reading as proof. */
.ta-attr-badge { display: inline-block; padding: 2px 7px; border-radius: 3px; background: #eef2f8;
  color: #5b6b8c; font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid #dde4ef; }

/* Column help (spec §4) — several of these columns look like productivity but
   are not: change sets are groupings, platform updates are one click, touches
   are iteration. The tooltip states outright whether a column is work effort,
   so nobody has to infer it from the header. */
.ta-info { position: relative; display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; }
.ta-info__dot { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid #b9c4d6; color: #7c8aa3; font-size: 9px; font-weight: 700; line-height: 1;
  cursor: help; background: transparent; padding: 0; font-family: inherit; }
.ta-info__dot:hover, .ta-info__dot:focus-visible { border-color: var(--blue, #0b69ff); color: var(--blue, #0b69ff); outline: none; }
.ta-info__tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 250px; padding: 9px 11px; border-radius: 6px; background: #1f2d45; color: #e8eef7;
  font-size: 11.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none;
  white-space: normal; text-align: left; box-shadow: 0 6px 20px rgba(16,27,48,.26);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 40; }
.ta-info__tip::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: #1f2d45; }
.ta-info__dot:hover + .ta-info__tip, .ta-info__dot:focus-visible + .ta-info__tip { opacity: 1; visibility: visible; }
.ta-info__effort { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.16); }
.ta-info__effort b { color: #7ee0b0; }
.ta-info__effort b.is-no { color: #ffb4a8; }
.ta-info__effort b.is-partial { color: #ffd88a; }
/* The tooltip opens DOWNWARD on purpose: .ta-table-wrap sets overflow-x:auto,
   which makes the browser clip the vertical axis too, so a tip above the header
   was cut off by its own scroll container. Header cells sit above the rows, so
   downward has room. */
/* first columns' tips would clip off the left edge of the table */
th:nth-child(-n+4) .ta-info__tip { left: 0; transform: none; }
th:nth-child(-n+4) .ta-info__tip::after { left: 16px; }
th:nth-last-child(-n+2) .ta-info__tip { left: auto; right: 0; transform: none; }
th:nth-last-child(-n+2) .ta-info__tip::after { left: auto; right: 16px; }

/* Columns are ordered by whether they represent work effort — yes, then
   partial, then no, then the attribution label. The divider marks where one
   group ends so the ordering reads as deliberate rather than arbitrary. */
.ta-table th.ta-col-start, .ta-table td.ta-col-start { border-left: 1px solid #e3e9f2; }

/* Effort tinting — the green columns are what output should be judged on,
   amber is context rather than production. Columns that are NOT work effort
   (change sets, platform updates, generated output) are off this table
   entirely; they remain visible inside the row drill-down. */
.ta-table th.ta-eff-yes, .ta-table td.ta-eff-yes { background: #eefaf3; }
.ta-table th.ta-eff-total, .ta-table td.ta-eff-total { background: #d8f3e3; }
.ta-table td.ta-eff-total strong { color: #12734a; font-size: 12px; }
.ta-table th.ta-eff-partial, .ta-table td.ta-eff-partial { background: #fdf6e3; }
.ta-table tbody tr:hover td.ta-eff-yes { background: #e6f7ee; }
.ta-table tbody tr:hover td.ta-eff-total { background: #cdefda; }
.ta-table tbody tr:hover td.ta-eff-partial { background: #fbf0d6; }
.ta-bulk-badge { display:inline-block; margin-left:5px; padding:1px 5px; border-radius:3px; background:#fdf0d6;
  color:#8a6100; font-size:9.5px; font-weight:700; letter-spacing:.03em; vertical-align:middle; }
/* Detection coverage (§11/§22) — a low number is the detector's gap, not the
   member's. Colour makes that legible without implying anyone underperformed. */
.ta-cov { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10.5px; font-weight:700; }
.ta-cov--ok  { background:#d8f3e3; color:#12734a; }
.ta-cov--mid { background:#fdf0d6; color:#8a6100; }
.ta-cov--low { background:#fde4e0; color:#a33527; }
/* The "+" on Implementation Actions: the count is a verified floor, not a
   total, and the mark has to be visible enough that nobody reads it as final. */
.ta-plus { color:#8a6100; font-weight:800; }

/* ---------------------------------------------------------------------------
   By Member — the simple table.
   A manager opens this to answer one question: how much implementation work
   did each person complete? Three columns, one prominent number, everything
   technical folded into the drill-down where it explains rather than competes.
--------------------------------------------------------------------------- */
.ta-table--simple th, .ta-table--simple td { padding: 12px 16px; }
.ta-table--simple tbody tr.is-open td { background: #f4f8fd; }

.ta-work-total { display:inline-flex; align-items:baseline; gap:6px; padding:4px 8px; margin:-4px -8px;
  border:0; background:transparent; border-radius:6px; cursor:pointer; font: inherit; color:#12734a; }
.ta-work-total:hover:not(:disabled) { background:#e6f7ee; }
.ta-work-total:disabled { cursor:default; color:#97a4bf; }
.ta-work-total__n { font-size:19px; font-weight:800; letter-spacing:-.01em; font-variant-numeric: tabular-nums; }
.ta-work-total__caret { font-size:11px; font-weight:400; color:#5b6b8c; }

.ta-drill-row > td { background:#f7f9fc; padding:0 !important; }
.ta-drill { padding:16px 18px; }
.ta-drill__lead { margin:0 0 12px; font-size:13px; color:#5b6b8c; }
.ta-drill__empty { margin:0; color:#97a4bf; font-size:13px; }
.ta-drill__foot { margin:12px 0 0; font-size:12px; color:#8a6100; }

.ta-drill__client { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; margin:0 0 6px; border:1px solid #e3e9f2; border-radius:6px; background:#fff;
  font: inherit; font-size:13px; color:#1f2d45; cursor:pointer; text-align:left; }
.ta-drill__client:hover { border-color:#c7d6ea; background:#fbfdff; }
.ta-drill__client.is-open { border-color:#c7d6ea; border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
.ta-drill__client-name { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.ta-drill__client-n { font-weight:800; font-variant-numeric: tabular-nums; color:#12734a; }
/* Actions and reach are different measures, so reach is set quieter and beside
   the count rather than replacing it: one edit to a shared footer is one action
   and several hundred pages, and a client is owed both. */
/* A client we are not watching must not print a number that reads like one. */
.ta-untracked { display:inline-block; padding:1px 7px; border-radius:3px;
  background:#fdf0e3; color:#8a5a1b; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; }
.ta-drill__client-pages { display:block; margin-top:1px; font-weight:600; font-size:10.5px;
  letter-spacing:.01em; color:#6b7a94; font-variant-numeric: tabular-nums; }
.ta-mode-badge { padding:1px 5px; border-radius:3px; background:#eef2fb; color:#4a5b7d;
  font-size:9.5px; font-weight:700; letter-spacing:.03em; }

.ta-drill__detail { padding:12px 14px 14px; margin:0 0 6px;
  border:1px solid #c7d6ea; border-top:0; border-radius:0 0 6px 6px; background:#fff; }
.ta-action-list { margin:0; padding:0; list-style:none; max-width:420px; font-size:12.5px; }
.ta-action-list li { display:flex; justify-content:space-between; gap:16px; padding:4px 0; color:#34435e; }
.ta-action-list li + li { border-top:1px solid #f0f3f8; }
.ta-action-list__n { font-weight:700; font-variant-numeric: tabular-nums; }
.ta-action-list__total { margin-top:2px; border-top:1.5px solid #dce4f0 !important; font-weight:700; color:#1f2d45; }

.ta-evidence { display:flex; flex-wrap:wrap; gap:4px 14px; margin:14px 0 0; padding-top:10px;
  border-top:1px dashed #e3e9f2; font-size:11.5px; color:#97a4bf; }
.ta-evidence__label { font-weight:700; color:#5b6b8c; letter-spacing:.02em; text-transform:uppercase; font-size:10px; align-self:center; }

.ta-unresolved { margin:12px 0 0; padding:10px 12px; border:1px solid #f0dcc0; border-radius:6px; background:#fffaf1; }
.ta-unresolved__title { margin:0 0 7px; font-weight:700; font-size:12.5px; color:#8a6100; }
.ta-unresolved ul { margin:0; padding-left:18px; font-size:12px; color:#5b5341; }
.ta-unresolved li { margin-bottom:3px; }
.ta-unresolved__note { margin:8px 0 0; font-size:11.5px; color:#7c6a4a; }

@media (max-width: 700px) {
  .ta-table--simple th, .ta-table--simple td { padding: 10px 12px; }
  .ta-work-total__n { font-size:17px; }
  .ta-action-list { max-width:none; }
}

/* Deepest level: the raw artifacts behind the actions. Collapsed by default so
   the drill-down stays readable, but never removed — this is the audit trail. */
.ta-artifacts { margin:14px 0 0; padding-top:10px; border-top:1px dashed #e3e9f2; font-size:12px; }
.ta-artifacts > summary { cursor:pointer; color:#5b6b8c; font-weight:600; font-size:11.5px; }
.ta-artifacts__group { margin:9px 0 3px; font-weight:600; font-size:11.5px; color:#5b6b8c; }
.ta-artifacts__list { margin:0; padding-left:18px; columns:2; font-size:12px; color:#34435e; }
.ta-artifacts__list li { break-inside:avoid; margin-bottom:2px; }
.ta-artifacts__x { color:#97a4bf; }
@media (max-width: 700px) { .ta-artifacts__list { columns:1; } }

/* GSC coverage per member: how much of their book actually reports Search
   Console data. Colour separates "all", "some" and "none" at a glance —
   a member with none is not underperforming, their clients are unconnected. */
.ta-gsc { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px;
  font-weight:700; font-variant-numeric: tabular-nums; }
.ta-gsc--all  { background:#d8f3e3; color:#12734a; }
.ta-gsc--some { background:#fdf0d6; color:#8a6100; }
.ta-gsc--none { background:#eef2fb; color:#5b6b8c; }

/* Period-over-period on the By Member row. The previous figure stays quiet and
   the change carries the colour, so a row reads as "this much, and it moved". */
.ta-col-note { display:block; font-weight:400; font-size:10px; color:#97a4bf; letter-spacing:0; text-transform:none; }
.ta-prev { margin-left:7px; color:#97a4bf; font-size:11.5px; font-variant-numeric: tabular-nums; }
.ta-delta { display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:11px; font-weight:700; font-variant-numeric: tabular-nums; }
.ta-delta--up   { background:#d8f3e3; color:#12734a; }
.ta-delta--down { background:#fde4e0; color:#a33527; }
.ta-delta--flat { background:#eef2fb; color:#5b6b8c; font-weight:600; }
.ta-client-n { min-width:52px; text-align:right; font-variant-numeric: tabular-nums; color:#12734a; }

/* ---------------------------------------------------------------------------
   Work x Search Console.
   An outcome here is association, never proof of cause, so the palette stays
   deliberately calm: "review" is amber, not alarm red, because it means look
   at this pair — not that someone broke a page.
--------------------------------------------------------------------------- */
.wg-coverage { display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 14px;
  padding:10px 14px; border:1px solid var(--border); border-radius:8px;
  background:#fbfdff; font-size:12px; color:#5b6b8c; }
.wg-coverage strong { color:#1f2d45; font-variant-numeric: tabular-nums; }

.wg-states { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:16px 18px; }
.wg-state-card { display:flex; flex-direction:column; gap:6px; padding:12px;
  border:1px solid var(--border); border-radius:8px; background:#fff; }
.wg-state-card strong { font-size:20px; font-variant-numeric: tabular-nums; color:#1f2d45; }

.wg-state { display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:.01em; }
.wg-state--positive   { background:#d8f3e3; color:#12734a; }
.wg-state--review     { background:#fdf0d6; color:#8a6100; }
.wg-state--mixed      { background:#eae4fb; color:#5b3fa8; }
.wg-state--neutral    { background:#eef2fb; color:#4a5b7d; }
.wg-state--confounded { background:#f3eee6; color:#7c6a4a; }
.wg-state--unsettled  { background:#f2f4f8; color:#97a4bf; }

.wg-delta { margin-left:6px; font-size:11px; font-weight:700; font-variant-numeric: tabular-nums; color:#97a4bf; }
.wg-delta.is-up   { color:#12734a; }
.wg-delta.is-down { color:#a33527; }

/* One bar per day: impressions behind, clicks in front. */
.wg-trend { display:flex; align-items:flex-end; gap:2px; height:52px; padding:3px 0;
  overflow-x:auto; border-bottom:1px solid var(--border); }
.wg-trend__day { position:relative; flex:0 0 7px; height:48px; display:flex; align-items:flex-end; }
.wg-trend__impr { position:absolute; bottom:0; left:0; right:0; background:#dbe7f8; border-radius:1px; }
.wg-trend__clicks { position:absolute; bottom:0; left:1px; right:1px; background:#0b69ff; border-radius:1px; }
.wg-trend__day.is-partial { opacity:.45; }
.wg-flag { display:block; margin-top:4px; padding:0; border:0; background:none;
  color:#8a6100; font-size:10.5px; font-weight:700; cursor:pointer; text-decoration:underline; }
.wg-status { padding:2px 7px; border:1px solid var(--border); border-radius:4px; background:#fff;
  font-size:10.5px; color:#5b6b8c; cursor:pointer; }
.wg-status:hover { border-color:#c7d6ea; background:#fbfdff; }
.wg-status.is-current { background:#eef2fb; border-color:#c7d6ea; color:#1f2d45; font-weight:700; }
.wg-evidence-note { margin:0 0 14px; padding:10px 14px; border:1px solid #f0dcc0;
  border-radius:8px; background:#fffaf1; font-size:12px; color:#7c6a4a; }
.wg-evidence-note strong { color:#8a6100; }
.wg-queries { padding:14px 18px; border-top:1px solid var(--border); }
.wg-queries__note { margin:0 0 12px; font-size:11.5px; color:#97a4bf; }
.wg-queries__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.wg-queries__head { margin:0 0 6px; font-size:11.5px; font-weight:700; color:#5b6b8c; }
.wg-query { padding:4px 0; border-top:1px solid #f0f3f8; font-size:11.5px; }
.wg-query__text { display:block; color:#34435e; }
.wg-query__meta { display:block; color:#97a4bf; font-size:10.5px; font-variant-numeric: tabular-nums; }

/* A heading and its info dot are one unit. Letting the dot wrap on its own
   dropped it to a second line and knocked every other heading out of
   alignment, which is exactly the sort of thing a reader blames the data for. */
.ta-table th { vertical-align: middle; }
.ta-table th:has(.ta-info) { white-space: nowrap; }
.ta-info { flex: 0 0 auto; }
.wg-span { display:flex; flex-wrap:wrap; gap:6px 26px; margin:0 0 6px; padding:10px 14px;
  border:1px solid var(--border); border-radius:8px 8px 0 0; background:#fff;
  font-size:12.5px; color:#1f2d45; font-variant-numeric: tabular-nums; }
.wg-span__label { display:block; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#97a4bf; }
.wg-span__note { color:#8a6100; font-size:11.5px; }
.wg-span__foot { margin:0 0 14px; padding:0 14px; font-size:11px; color:#97a4bf; }

/* GSC Performance — per-client page breakdown (the row toggle) */
.gsc-caret { display: inline-block; transition: transform .15s; color: #7483a7; font-size: 15px; line-height: 1; }
.gsc-caret.is-open { transform: rotate(90deg); }
.gsc-expand:hover { color: var(--blue, #0b69ff); }
/* One list above the other, never side by side. Two columns were tried first
   and the URL — the only thing that identifies the row — was squeezed to 96px
   at 1280px wide and 46px at 1024px. Full width gives it ~740px and costs
   nothing but height inside a panel that is already opt-in. */
.gsc-movers { display: grid; grid-template-columns: 1fr; gap: 18px; }
.gsc-movers__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 7px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: #607198; }
/* Four columns so the numbers line up down the list instead of ragging */
.gsc-mover__url:hover { text-decoration: underline; }
.gsc-mover span { font-variant-numeric: tabular-nums; }

/* Copy button beside a one-time password. Sized to the code chip it sits next
   to so the pair reads as one control rather than a chip with a stray link. */
.sci-copy { margin-left: 7px; padding: 2px 9px; border: 1px solid currentColor; border-radius: 5px;
  background: transparent; color: inherit; font: inherit; font-size: 11px; line-height: 1.5;
  cursor: pointer; opacity: .75; vertical-align: 1px; }
.sci-copy:hover { opacity: 1; }

/* Movers table. A real table rather than a grid of divs, so every column
   carries a header — Work Done is empty on most rows, and an unlabelled empty
   column reads as data that failed to load rather than as "nothing was done". */
.gsc-mtable { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; }
.gsc-mtable th { padding: 5px 8px 6px; text-align: left; font-size: 9.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em; color: #8491ad;
  border-bottom: 1px solid var(--border, #dce6f3); white-space: nowrap; }
.gsc-mtable td { padding: 6px 8px; border-bottom: 1px solid #edf1f7;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gsc-mtable tbody tr:last-child td { border-bottom: 0; }
.gsc-mtable th:nth-child(2), .gsc-mtable td:nth-child(2) { width: 200px; }
.gsc-mtable th:nth-child(3), .gsc-mtable td:nth-child(3) { width: 108px; }
.gsc-mtable th:nth-child(4), .gsc-mtable td:nth-child(4) { width: 180px; }
.gsc-mtable th:nth-child(5), .gsc-mtable td:nth-child(5) { width: 136px; }
.gsc-mtable th:nth-child(6), .gsc-mtable td:nth-child(6) { width: 126px; }
.gsc-mtable__page a { color: #2f6bd8; text-decoration: none; }
.gsc-mtable__page a:hover { text-decoration: underline; }
/* Narrow: the six tracks stop fitting long before the numbers stop mattering,
   so each row becomes a stack and the header is dropped. */
@media (max-width: 620px) {
  .gsc-mtable, .gsc-mtable thead, .gsc-mtable tbody, .gsc-mtable tr,
  .gsc-mtable th, .gsc-mtable td { display: block; width: auto; }
  .gsc-mtable thead { display: none; }
  .gsc-mtable td { white-space: normal; padding: 2px 0; border-bottom: 0; }
  .gsc-mtable tbody tr { padding: 8px 0; border-bottom: 1px solid #edf1f7; }
  .gsc-movers__head { flex-wrap: wrap; }
}

/* Whether a client takes part in sync. Off is the quiet default because most
   of the 270 domains on these servers are parked or staging, not work. */
.sci-sync-toggle { min-width:44px; padding:2px 10px; border-radius:11px; cursor:pointer;
  border:1px solid #d3dbe7; background:#f4f6fa; color:#73819b;
  font-size:11px; font-weight:700; letter-spacing:.03em; }
.sci-sync-toggle.is-on { border-color:#9fd3b4; background:#e9f7ef; color:#12734a; }
.sci-sync-toggle:hover { filter:brightness(.97); }