/* CitedLink design system. Product register: one family, fixed rem scale, restrained color.
   The rose primary (hue 357) is for actions and focus; verdict colors carry the data. */

:root {
  color-scheme: light;

  --bg: oklch(1 0 0);
  --surface: oklch(0.975 0.004 357);
  --surface-2: oklch(0.955 0.006 357);
  --ink: oklch(0.21 0.02 357);
  --ink-2: oklch(0.34 0.02 357);
  --muted: oklch(0.47 0.02 357);
  --border: oklch(0.89 0.008 357);
  --border-strong: oklch(0.78 0.012 357);

  --primary: oklch(0.52 0.19 357);
  --primary-hover: oklch(0.46 0.18 357);
  --primary-soft: oklch(0.95 0.03 357);
  --on-primary: oklch(0.99 0.005 357);
  --focus: oklch(0.52 0.19 357 / 0.45);

  /* Verdicts: counted (green), weak (amber), vanity (neutral), dead (brick). */
  --counted: oklch(0.4 0.12 155);
  --counted-bg: oklch(0.94 0.06 155);
  --weak: oklch(0.45 0.12 75);
  --weak-bg: oklch(0.95 0.07 85);
  --vanity: oklch(0.42 0.02 357);
  --vanity-bg: oklch(0.94 0.005 357);
  --dead: oklch(0.42 0.13 25);
  --dead-bg: oklch(0.95 0.04 25);
  --unchecked: oklch(0.5 0.02 357);
  --unchecked-bg: oklch(0.965 0.004 357);

  /* Landing hero: the brand carries the surface there. */
  --brand-deep: oklch(0.32 0.12 357);
  --brand-deep-2: oklch(0.27 0.11 357);
  --brand-deep-ink: oklch(0.97 0.012 357);
  --brand-deep-muted: oklch(0.82 0.04 357);

  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-s: 4px;
  --radius: 6px;
  --radius-l: 10px;
  --shadow-1: 0 1px 2px oklch(0.2 0.02 357 / 0.06), 0 1px 1px oklch(0.2 0.02 357 / 0.04);
  --shadow-2: 0 4px 16px oklch(0.2 0.02 357 / 0.1), 0 1px 3px oklch(0.2 0.02 357 / 0.06);

  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 220ms;

  --measure: 68ch;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.375rem;
}
h3 {
  font-size: 1.125rem;
}
h4 {
  font-size: 1rem;
}

p {
  margin: 0;
}

.prose p + p {
  margin-top: 0.75em;
}
.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.875em;
}

small,
.small {
  font-size: 0.8125rem;
}
.muted {
  color: var(--muted);
}
.ink-2 {
  color: var(--ink-2);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.num {
  font-variant-numeric: tabular-nums;
}
.nowrap {
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout primitives */
.stack > * + * {
  margin-top: var(--gap, 1rem);
}
.stack-s {
  --gap: 0.5rem;
}
.stack-l {
  --gap: 2rem;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--gap, 0.75rem);
  flex-wrap: wrap;
}
.row-between {
  justify-content: space-between;
}
.row-end {
  justify-content: flex-end;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
}
/* Grid and flex children default to min-width:auto, which lets a table or a long URL push the
   column past the viewport. Every layout child starts at zero and scrolls inside itself instead. */
.grid-2 > *,
.grid-3 > *,
.row > * {
  min-width: 0;
}
.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}
.container-narrow {
  width: min(100% - 2.5rem, 44rem);
  margin-inline: auto;
}
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* App chrome */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  background: var(--primary);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 0.3rem 0.35rem 0.3rem 0.35rem;
  border: 2px solid var(--on-primary);
  border-radius: 999px;
  border-right-color: transparent;
  transform: rotate(-45deg);
}
.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}
.nav a {
  color: var(--ink-2);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  font-weight: 500;
}
.nav a:hover {
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--surface-2);
}
.topbar-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--surface-2);
  object-fit: cover;
}

.subnav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.subnav-inner {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav a {
  color: var(--muted);
  padding: 0.7rem 0.6rem 0.6rem;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.subnav a:hover {
  color: var(--ink);
  text-decoration: none;
}
.subnav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

.main {
  padding: 2rem 0 4rem;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-head p {
  color: var(--muted);
  margin-top: 0.25rem;
  max-width: var(--measure);
}
.crumbs {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.crumbs a {
  color: var(--muted);
}
.crumbs span {
  margin: 0 0.4em;
}

.section {
  margin-top: 2.5rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.section-head p {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:hover {
  background: var(--surface);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
}
.btn-danger {
  color: var(--dead);
  border-color: var(--border-strong);
}
.btn-danger:hover {
  background: var(--dead-bg);
  border-color: var(--dead);
}
.btn-sm {
  height: 1.875rem;
  padding: 0 0.65rem;
  font-size: 0.8125rem;
}
.btn-lg {
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 1rem;
}
.btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  color: var(--ink);
  animation: spin 700ms linear infinite;
}
.btn-primary.is-loading::after {
  color: var(--on-primary);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Forms */
.field {
  display: block;
}
.field + .field {
  margin-top: 1rem;
}
.field > .label,
label.field > span:first-child {
  display: block;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.input,
.select,
.textarea {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.textarea {
  height: auto;
  min-height: 6rem;
  padding: 0.5rem 0.65rem;
  line-height: 1.45;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: oklch(0.55 0.015 357);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: oklch(0.65 0.02 357);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--dead);
}
.input[disabled],
.select[disabled] {
  background: var(--surface);
  color: var(--muted);
}
.hint {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.3rem;
}
.error-text {
  display: block;
  color: var(--dead);
  font-size: 0.8125rem;
  margin-top: 0.3rem;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  margin: 0;
}
.switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--border-strong);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
  flex: none;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out);
}
.switch[aria-checked='true'] {
  background: var(--primary);
}
.switch[aria-checked='true']::after {
  transform: translateX(1rem);
}
.switch[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badges and verdicts */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}
.badge-counted {
  background: var(--counted-bg);
  color: var(--counted);
}
.badge-weak {
  background: var(--weak-bg);
  color: var(--weak);
}
.badge-vanity {
  background: var(--vanity-bg);
  color: var(--vanity);
}
.badge-dead {
  background: var(--dead-bg);
  color: var(--dead);
}
.badge-unchecked,
.badge-unverifiable {
  background: var(--unchecked-bg);
  color: var(--unchecked);
}
.badge-plain::before {
  display: none;
}

.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.delta-up {
  color: var(--counted);
}
.delta-down {
  color: var(--dead);
}
.delta-flat {
  color: var(--muted);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th,
.table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  background: var(--surface);
  white-space: nowrap;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover td {
  background: oklch(0.985 0.003 357);
}
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .cell-url {
  max-width: 28rem;
}

/* Lists */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
}
.list > li {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list > li + li {
  border-top: 1px solid var(--border);
}
.list-main {
  min-width: 0;
  flex: 1;
}
.list-title {
  font-weight: 500;
}
.list-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.1rem;
}

/* Panels: used where a group needs a boundary. Never nest them. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  padding: 1.25rem;
}
.panel-tinted {
  background: var(--surface);
}
.panel h3 {
  margin-bottom: 0.5rem;
}

/* Key/value facts */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;
}
.kv dt {
  color: var(--muted);
}
.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Notices */
.notice {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  font-size: 0.875rem;
}
.notice-error {
  border-color: oklch(0.8 0.08 25);
  background: var(--dead-bg);
  color: var(--dead);
}
.notice-success {
  border-color: oklch(0.8 0.08 155);
  background: var(--counted-bg);
  color: var(--counted);
}
.notice-warn {
  border-color: oklch(0.82 0.1 85);
  background: var(--weak-bg);
  color: var(--weak);
}

/* Empty states teach the next action. */
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-l);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.empty h3 {
  margin-bottom: 0.4rem;
}
.empty p {
  color: var(--muted);
  max-width: 40ch;
  margin-inline: auto;
}
.empty .btn {
  margin-top: 1rem;
}

/* Inline stats: a number with its label, sized like text, never a hero. */
.stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6rem;
}
.stat b {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.stat-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Sparklines are inline SVG rendered on the server. */
.sparkline {
  display: block;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}
.sparkline path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sparkline .marker {
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.sparkline .after {
  stroke: var(--primary);
}

/* The receipt: a link's verdict with its reasons. Used on link detail, the checker, the landing. */
.receipt {
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  max-width: min(34rem, 100%);
}
.receipt-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.receipt-head .from {
  min-width: 0;
}
.receipt-head .from small {
  display: block;
  color: var(--muted);
}
.receipt-body {
  padding: 1rem 1.25rem;
}
.receipt-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.receipt-body li {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.875rem;
}
.receipt-body li::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-top: 0.45rem;
  background: var(--border-strong);
}
.receipt-body li.ok::before {
  background: var(--counted);
}
.receipt-body li.bad::before {
  background: var(--dead);
}
.receipt-body li.warn::before {
  background: var(--weak);
}
.receipt-foot {
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* Tabs used inside a page (not the site subnav) */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tabs a {
  padding: 0.5rem 0.6rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.tabs a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tabs a:hover {
  text-decoration: none;
  color: var(--ink);
}

/* Skeletons for loading rows */
.skeleton {
  display: block;
  height: 0.9em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 0);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  box-shadow: var(--shadow-2);
  animation: rise var(--t-base) var(--ease-out);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translate(-50%, 0.5rem);
  }
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer a {
  color: var(--muted);
}

/* Marketing shell: same family, more weight and air. Sections are art-directed in landing.css. */
.mk-header {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}
.mk-header .nav {
  margin-left: auto;
  gap: 0.15rem;
}
.mk-header .brand {
  font-size: 1.0625rem;
}
@media (max-width: 480px) {
  .mk-header .nav a {
    padding-inline: 0.5rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 0.9375rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  .main {
    padding-top: 1.25rem;
  }
  /* Phone top bar: brand, three nav words, avatar. Sign out lives on the Account page. */
  .topbar-inner {
    gap: 0.5rem;
  }
  .topbar-user .email,
  .topbar-user form {
    display: none;
  }
  .topbar-user {
    min-width: 0;
  }
  .nav {
    margin-left: 0;
    gap: 0;
  }
  .nav a {
    padding: 0.35rem 0.45rem;
    font-size: 0.875rem;
  }
  .list > li {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .page-head .row {
    width: 100%;
  }
  .kv {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  .kv dt {
    margin-top: 0.5rem;
  }
  .stat-row {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Auth: the sign-in card, the not-configured page and the account screen. */

.auth-main {
  padding: 3rem 0 5rem;
}

.auth-card {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
  box-shadow: var(--shadow-1);
}
.auth-card h1 {
  font-size: 1.375rem;
}
.auth-card p {
  max-width: var(--measure);
}
.auth-card .notice {
  width: 100%;
}

.auth-google {
  width: 100%;
}

.auth-scopes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.auth-scopes li {
  display: flex;
  gap: 0.6rem;
}
.auth-scopes li::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--border-strong);
}

.auth-stack {
  margin-top: 1.5rem;
}
.auth-actions {
  margin-top: 1rem;
}
.auth-name-form {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  max-width: 26rem;
}

/* The delete panel earns its own border colour: it is the one place data leaves for good. */
.danger-zone {
  border-color: oklch(0.86 0.05 25);
}
.danger-zone .field {
  max-width: 26rem;
}

.auth-inline-form {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}


/* Sites: the list rows, the add form and the overview sections. */

.plan-line {
  margin-top: 1rem;
}

.site-counts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  white-space: nowrap;
}
.site-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 0 0.15rem;
}

.site-form {
  max-width: 34rem;
}
.site-form .kv {
  margin-bottom: 1rem;
}
.site-form .notice {
  margin-bottom: 1rem;
}

.site-actions {
  margin-top: 1.25rem;
}
.site-actions form {
  display: inline;
}

.site-stack {
  margin-top: 1.5rem;
}

.site-engines-off {
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  .list > li {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .site-counts {
    font-size: 0.8125rem;
  }
}


/* Links, ref links and the public checker. Tokens come from styles.css; nothing new is invented
   here, only the few shapes these pages need. */

/* Verdict filter chips above the links table. */
.chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.875rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--bg);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chip:hover {
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.chip[aria-current='page'] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink);
}
.chip-count {
  color: var(--muted);
  font-size: 0.75rem;
}
.chip[aria-current='page'] .chip-count {
  color: var(--ink-2);
}

.ref-filter {
  margin-bottom: 0.75rem;
}

/* Links table: URLs stay on one line and lose their tail rather than wrapping the row. */
.table .cell-url {
  max-width: 26rem;
}
.table .cell-path {
  max-width: 14rem;
}
.link-source {
  display: block;
  max-width: 100%;
  color: var(--ink);
}
.link-source:hover {
  color: var(--primary);
}
.table .cell-spark {
  width: 9rem;
  min-width: 7rem;
}

/* Link detail: the receipt next to the facts, then the outcome section below. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.detail-grid .receipt {
  max-width: none;
}
.outcome-chart {
  padding: 1rem 1.25rem;
}
.chart-axis {
  margin-top: 0.5rem;
}
.outcome-note {
  margin-top: 0.75rem;
  max-width: var(--measure);
}

/* Forms on these pages sit in a panel and never run wider than a comfortable measure. */
.form-narrow {
  max-width: 34rem;
}
.form-actions {
  margin-top: 1.25rem;
}
.input.file {
  height: auto;
  padding: 0.45rem 0.65rem;
}
.import-note {
  margin-top: 1rem;
}

/* Public checker: brand register, one column, the receipt as the answer. */
.checker {
  padding: 3rem 0 4rem;
}
.checker h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.checker-form {
  margin-top: 1.5rem;
}
.checker-result {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}
.checker-result .receipt {
  max-width: none;
}
.checker-cta {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.checker-cta p {
  color: var(--muted);
  max-width: var(--measure);
}
.checker-note {
  margin-top: 2rem;
  max-width: var(--measure);
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}


/* Citations: engine stats, share of voice, the prompt grid. Tokens only, no new colors. */

.cite-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
}
.cite-stat small {
  max-width: 16rem;
  overflow-wrap: anywhere;
}

.cite-snapshot {
  margin-top: 1rem;
  text-align: center;
}
.cite-snapshot .hint {
  margin-top: 0.5rem;
}

/* Share of voice: one row per host, the bar is decoration behind the count. */
.sov {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}
.sov > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
}
.sov > li + li {
  border-top: 1px solid var(--border);
}
.sov > li.is-own {
  background: var(--surface);
}
.sov-host {
  flex: 0 1 18rem;
  min-width: 0;
}
.sov-bar {
  flex: 1 1 6rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.sov-bar > span {
  display: block;
  height: 100%;
  background: var(--border-strong);
}
.sov > li.is-own .sov-bar > span {
  background: var(--primary);
}
.sov-count {
  flex: none;
  min-width: 2rem;
  text-align: right;
  color: var(--ink-2);
}

.cite-spark {
  width: 16rem;
}

/* The prompt grid: one row per question, one cell per engine. */
.cite-table .cite-prompt {
  min-width: 18rem;
  max-width: 26rem;
}
.cite-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.cite-cell details {
  font-size: 0.8125rem;
}
.cite-cell summary {
  color: var(--muted);
  cursor: pointer;
}
.cite-excerpt {
  margin-top: 0.35rem;
  max-width: 30rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cite-caveat {
  margin-top: 0.75rem;
}

.prompt-add {
  max-width: var(--measure);
}
.prompt-add .btn {
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .sov-host {
    flex-basis: 10rem;
  }
  .cite-spark {
    width: 12rem;
  }
}


/* Billing and engines. Two screens, both dense tables and one switch per row. */

.billing-notices:empty {
  display: none;
}
.billing-notices > * + * {
  margin-top: 0.5rem;
}

.plan-table th[scope='row'] {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.plan-table td {
  vertical-align: middle;
}
.plan-table .plan-action {
  text-align: right;
  white-space: nowrap;
}

.billing-totals {
  grid-template-columns: max-content max-content;
  gap: 0.35rem 2rem;
}
.billing-totals .billing-grand {
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 0.35rem;
}

/* Engines list: name and note on the left, price and switch pinned right. */
.engines > li {
  gap: 1.25rem;
}
.engines .engine-price {
  color: var(--ink-2);
  min-width: 5rem;
  text-align: right;
}
.engines form {
  display: flex;
  align-items: center;
}

.engine-total {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.engine-total b {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .engines > li {
    gap: 0.75rem;
  }
  .engines .engine-price {
    min-width: 0;
  }
  .billing-totals {
    grid-template-columns: max-content max-content;
  }
}


/* Landing and pricing: brand register. The app is restrained; these two pages commit to the deep
   rose ground, sturdy display type, and real product artifacts as the imagery. Both pages set
   body class "mk", so the public header sits on the brand ground instead of on white. */

/* The header band carries the brand ground, whatever height the header wraps to. */
body.mk .mk-band {
  background: var(--brand-deep);
}
body.mk .mk-header {
  color: var(--brand-deep-ink);
}
body.mk .mk-header .brand {
  color: var(--brand-deep-ink);
}
body.mk .mk-header .brand-mark {
  background: var(--brand-deep-ink);
}
body.mk .mk-header .brand-mark::after {
  border-color: var(--brand-deep);
  border-right-color: transparent;
}
body.mk .mk-header .nav a {
  color: var(--brand-deep-muted);
}
body.mk .mk-header .nav a:hover {
  color: var(--brand-deep-ink);
  background: oklch(1 0 0 / 0.12);
}
body.mk .mk-header .btn {
  background: transparent;
  border-color: oklch(1 0 0 / 0.38);
  color: var(--brand-deep-ink);
}
body.mk .mk-header .btn:hover {
  background: oklch(1 0 0 / 0.14);
}
body.mk .mk-header a:focus-visible {
  outline-color: var(--brand-deep-ink);
}

/* Both brand pages close on a tinted footer, so the last section has an edge to land on. */
body.mk .footer {
  background: var(--surface);
  border-top-color: transparent;
  padding-block: 2.5rem;
}

/* Hero: drenched, one viewport on a laptop, stacked on a phone. */
.lp-hero {
  background: var(--brand-deep);
  color: var(--brand-deep-ink);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}
.lp-hero-inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.lp-hero-inner > *,
.lp-split > *,
.lp-ref > *,
.lp-head-split > * {
  min-width: 0;
}
.lp-display {
  color: var(--brand-deep-ink);
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
}
.lp-lede {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--brand-deep-muted);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.lp-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.lp-hero .btn-primary,
.lp-close .btn-primary {
  background: var(--brand-deep-ink);
  border-color: var(--brand-deep-ink);
  color: var(--brand-deep);
}
.lp-hero .btn-primary:hover,
.lp-close .btn-primary:hover {
  background: oklch(1 0 0);
  border-color: oklch(1 0 0);
}
.lp-hero :focus-visible,
.lp-close :focus-visible {
  outline-color: var(--brand-deep-ink);
}
.lp-quiet {
  color: var(--brand-deep-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 0.45);
  text-underline-offset: 0.28em;
}
.lp-quiet:hover {
  text-decoration-color: currentColor;
}

.lp-hero-art {
  position: relative;
  width: 100%;
  max-width: min(34rem, 100%);
  justify-self: start;
}
.lp-hero-art::before {
  content: '';
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(closest-side, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0));
  pointer-events: none;
}
.lp-hero-art .receipt {
  position: relative;
  box-shadow: 0 24px 48px oklch(0.14 0.06 357 / 0.45), 0 2px 6px oklch(0.14 0.06 357 / 0.35);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.lp-hero-art .receipt:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 60px oklch(0.14 0.06 357 / 0.5), 0 2px 6px oklch(0.14 0.06 357 / 0.35);
}
.lp-hero-note {
  position: relative;
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--brand-deep-muted);
  font-size: 0.8125rem;
}

@media (min-width: 62rem) {
  .lp-hero {
    display: grid;
    align-content: center;
    min-height: min(calc(100vh - 3.5rem), 46rem);
    min-height: min(calc(100svh - 3.5rem), 46rem);
  }
  .lp-hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .lp-hero-art {
    justify-self: end;
  }
}

/* Sections below the hero alternate white and surface, with three spacing steps for rhythm. */
.lp-sec {
  padding-block: var(--pad, 4rem);
}
.lp-sec-white {
  background: var(--bg);
}
.lp-sec-tint {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.lp-pad-s {
  --pad: clamp(3rem, 6vw, 4.25rem);
}
.lp-pad-m {
  --pad: clamp(3.5rem, 7vw, 5.5rem);
}
.lp-pad-l {
  --pad: clamp(4.5rem, 9vw, 7rem);
}

.lp-sec h2,
.lp-ref-copy h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.lp-head {
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.lp-head p {
  margin-top: 0.65rem;
  color: var(--ink-2);
  font-size: 1.0625rem;
  text-wrap: pretty;
}
.lp-head-split {
  max-width: none;
  display: grid;
  gap: 0.65rem 3rem;
  align-items: start;
}
@media (min-width: 54rem) {
  .lp-head-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .lp-head-split p {
    margin-top: 0.3rem;
    max-width: 56ch;
  }
}

.lp-note {
  margin-top: 1.5rem;
  max-width: 72ch;
  color: var(--muted);
  text-wrap: pretty;
}
.lp-more {
  margin-top: 1.1rem;
  font-weight: 500;
}

/* Verdict definitions: a ruled two-column list, no cards. */
.lp-defs {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border-strong);
}
.lp-defs dt {
  padding: 1.1rem 0 0.35rem;
}
.lp-defs dd {
  margin: 0;
  padding: 0 0 1.1rem;
  color: var(--ink-2);
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
  text-wrap: pretty;
}
@media (min-width: 46rem) {
  .lp-defs {
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  .lp-defs dt {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }
  .lp-defs dd {
    padding: 1.1rem 0;
    max-width: 68ch;
  }
}

/* The links table sits next to the chart it explains. */
.lp-split {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .lp-split {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.lp-chart {
  margin: 0;
  max-width: 34rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
}
/* Lock the box to the viewBox ratio so the plot always fills the width and the axis rule below it
   lands exactly on the marker. */
.lp-chart .sparkline {
  height: auto;
  aspect-ratio: 240 / 40;
}
.lp-chart .sparkline path {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.lp-chart .sparkline .marker {
  vector-effect: non-scaling-stroke;
}
.lp-chart-axis {
  display: grid;
  grid-template-columns: 28fr 41fr;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.lp-chart-axis span:first-child {
  text-align: right;
  padding-right: 0.5rem;
  border-right: 1px solid var(--primary);
}
.lp-chart-axis span:last-child {
  padding-left: 0.5rem;
}
.lp-chart figcaption {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
  text-wrap: pretty;
}

/* Ref links: copy on the left, the tag table on the right. */
.lp-ref {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.lp-ref-copy p {
  margin-top: 0.85rem;
  max-width: 54ch;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 58rem) {
  .lp-ref {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.lp-cite-prompt {
  min-width: 17rem;
}

/* Sources: a ruled list, name and sentence. */
.lp-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.lp-sources li {
  display: grid;
  gap: 0.15rem 2.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--border);
}
.lp-sources b {
  font-weight: 600;
}
.lp-sources span {
  color: var(--ink-2);
  max-width: 66ch;
}
@media (min-width: 46rem) {
  .lp-sources li {
    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  }
}

/* Plans: a ruled list, never a card grid. */
.lp-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
}
.lp-plans li {
  display: grid;
  gap: 0.15rem 1.75rem;
  padding: 0.95rem 0.5rem 0.95rem 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease-out);
}
.lp-plans li:hover {
  background: var(--bg);
}
.lp-plan-name {
  font-weight: 600;
  font-size: 1.0625rem;
}
.lp-plan-price {
  color: var(--ink);
  font-weight: 500;
}
.lp-plan-blurb {
  color: var(--ink-2);
}
@media (min-width: 46rem) {
  .lp-plans li {
    grid-template-columns: minmax(5rem, 7rem) minmax(7rem, 9rem) minmax(0, 1fr);
    align-items: baseline;
    padding-left: 0.5rem;
  }
}

/* Closing bookend: the brand ground returns, one sentence, one button. */
.lp-close {
  background: var(--brand-deep);
  color: var(--brand-deep-ink);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}
.lp-close-inner {
  display: grid;
  justify-items: start;
  gap: 1.75rem;
}
.lp-close-line {
  max-width: 24ch;
  color: var(--brand-deep-ink);
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The "after the link" segment draws itself as the chart scrolls in. Scroll-driven only, so a
   browser without it (and anyone who asked for less motion) gets the finished line. */
@keyframes lp-draw {
  from {
    stroke-dashoffset: 420;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-chart .sparkline .after {
      stroke-dasharray: 420;
      animation: lp-draw linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 60%;
    }
  }
}

/* Pricing page. Same brand ground on the masthead, then documents: two tables and a question list. */
.pr-hero {
  background: var(--brand-deep);
  color: var(--brand-deep-ink);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}
.pr-title {
  color: var(--brand-deep-ink);
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.pr-lede {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--brand-deep-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}
h2.pr-h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.pr-sub {
  margin-top: -0.4rem;
  margin-bottom: 1.25rem;
  max-width: 62ch;
  color: var(--ink-2);
}
.pr-table td {
  vertical-align: middle;
}
.pr-plan {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.pr-table td.num {
  font-size: 1rem;
  font-weight: 500;
}
.pr-included {
  color: var(--ink-2);
  min-width: 20rem;
}
.table tbody tr.pr-bundle td {
  background: var(--surface);
}

.pr-faq {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border-strong);
}
.pr-faq dt {
  padding: 1.1rem 0 0.35rem;
  font-weight: 600;
  font-size: 1.0625rem;
}
.pr-faq dd {
  margin: 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  max-width: 70ch;
  text-wrap: pretty;
}
@media (min-width: 54rem) {
  .pr-faq {
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    column-gap: 3rem;
  }
  .pr-faq dt {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
  }
  .pr-faq dd {
    padding: 1.25rem 0;
  }
}