@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --ink-950: #0f1115;
    --ink-900: #1a1d23;
    --ink-800: #2b2f36;
    --ink-700: #3f444d;
    --ink-500: #6b7280;
    --ink-400: #9ca3af;
    --ink-300: #d3d6db;
    --ink-200: #e4e6ea;
    --ink-100: #eef0f2;
    --ink-50: #f7f8f9;
    --surface: #ffffff;
    /* Gauge Teal — action roles only. */
    --brand-700: #0f6e68;
    --brand-800: #0b5751;
    --brand-tint: #e9f4f2;
    --brand-ondark: #56c4ba;
    --good: #15803d;
    --good-tint: #f0faf3;
    --warn: #b45309;
    --warn-tint: #fdf8ef;
    --bad: #b91c1c;
    --bad-tint: #fdf3f2;
    --radius-card: 16px;
    --radius-control: 10px;
  }

  html {
    @apply scroll-smooth bg-white antialiased;
  }

  body {
    @apply bg-white font-sans text-[15px] leading-[1.6] text-ink-700;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply text-ink-900;
    text-wrap: balance;
  }

  h1 {
    @apply font-semibold tracking-[-0.025em];
  }

  h2 {
    @apply font-semibold tracking-[-0.02em];
  }

  h3,
  h4 {
    @apply font-semibold;
  }

  ::selection {
    @apply bg-ink-200 text-ink-950;
  }
}

@layer components {
  /* Containers are selected by the job the page does. */
  .container-marketing {
    @apply mx-auto w-full max-w-marketing px-4 sm:px-6 lg:px-8;
  }

  .container-app {
    @apply mx-auto w-full max-w-app px-4 sm:px-6 lg:px-8;
  }

  .container-reading {
    @apply mx-auto w-full max-w-reading px-4 sm:px-6 lg:px-8;
  }

  .container-flow {
    @apply mx-auto w-full max-w-flow px-4 sm:px-6 lg:px-8;
  }

  .page-header {
    @apply flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between;
  }

  .page-kicker,
  .micro-label {
    @apply text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-400;
  }

  .page-title {
    @apply text-[28px] font-semibold leading-tight tracking-[-0.025em] text-ink-950;
  }

  .page-support {
    @apply mt-1 text-[13px] text-ink-500;
  }

  /* Canvas -> card -> inset is the complete surface hierarchy. */
  .canvas-app {
    @apply min-h-screen bg-ink-50;
  }

  .canvas-marketing {
    @apply min-h-screen bg-white;
  }

  .surface-card {
    @apply rounded-card border border-ink-200 bg-white p-6 shadow-sm;
  }

  .surface-card-interactive {
    @apply surface-card transition-colors duration-150 hover:border-ink-300;
  }

  .surface-inset {
    @apply rounded-control bg-ink-50 p-3.5;
  }

  .surface-overlay {
    @apply rounded-card border border-ink-200 bg-white shadow-lg;
  }

  /* A surface-overlay carried by a native <dialog>, so the focus trap, Esc and
     the top layer come from the platform rather than from a controller. The
     panel keeps no padding of its own — the form inside owns it, which also
     means any click landing on the dialog box itself came from the backdrop.
     Below md it becomes a bottom sheet, the reachable position on a phone. */
  .dialog-panel {
    @apply max-h-[85dvh] w-full max-w-[26rem] overflow-y-auto rounded-card border border-ink-200 bg-white p-0 text-ink-700 shadow-lg;
  }

  .dialog-panel::backdrop {
    background-color: rgb(15 17 21 / 45%);
  }

  .dialog-panel[open] {
    animation: dialog-in 150ms ease-out;
  }

  @media (max-width: 767px) {
    .dialog-panel {
      @apply mb-0 mt-auto max-w-none rounded-b-none;
    }
  }

  /* Presence: the single inverted moment on a page. Use ONCE per view —
     zero reads flat, two or more reads noisy. The footer does not count. */
  .surface-anchor {
    @apply bg-ink-950 text-white;
  }

  .surface-anchor .page-kicker,
  .surface-anchor .micro-label,
  .surface-anchor .section-kicker,
  .surface-card-inverted .page-kicker,
  .surface-card-inverted .micro-label,
  .surface-card-inverted .section-kicker {
    @apply text-brand-ondark;
  }

  .surface-anchor .metric-hero-bar,
  .surface-card-inverted .metric-hero-bar {
    @apply bg-brand-ondark;
  }

  .surface-anchor-card {
    @apply rounded-card border border-ink-800 bg-ink-900 p-5;
  }

  .surface-card-inverted {
    @apply rounded-card border border-ink-950 bg-ink-950 p-6 text-white;
  }

  /* Scale carries hierarchy where color no longer can. */
  .display-title {
    @apply font-semibold text-ink-950;
    font-size: clamp(2.5rem, 5.6vw, 4.25rem);
    letter-spacing: -0.045em;
    line-height: 1;
    text-wrap: balance;
  }

  .display-muted {
    @apply text-ink-400;
  }

  .metric-hero {
    @apply text-[30px] font-semibold leading-none tracking-[-0.04em] text-ink-950;
    font-variant-numeric: tabular-nums;
  }

  .metric-hero-label {
    @apply mt-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-ink-400;
  }

  .metric-hero-bar {
    @apply mt-1.5 h-[3px] w-7 rounded-full bg-ink-200;
  }

  /* Editorial section headers: left-aligned kicker + title.
     Centered headers are reserved for the hero and the closing CTA. */
  .section-header {
    @apply mb-10 max-w-2xl;
  }

  .section-kicker {
    @apply mb-3 block text-[11px] font-semibold uppercase tracking-[0.09em] text-ink-400;
  }

  .section-title {
    @apply text-[28px] font-semibold leading-[1.12] tracking-[-0.03em] text-ink-950 md:text-[34px];
  }

  .section-lead {
    @apply mt-3 text-base text-ink-500;
  }

  /* Hairline rows replace stacked insets inside a card. */
  .divider-list {
    @apply divide-y divide-ink-100;
  }

  .divider-row {
    @apply flex items-start gap-4 py-4 first:pt-0 last:pb-0;
  }

  .divider-index {
    @apply w-8 shrink-0 text-xl font-semibold leading-tight tracking-[-0.03em] text-ink-300;
    font-variant-numeric: tabular-nums;
  }

  /* One card divided by hairlines instead of N repeated cards. */
  .split-card {
    @apply grid overflow-hidden rounded-card border border-ink-200 bg-white divide-y divide-ink-100 md:divide-x md:divide-y-0;
  }

  .split-cell {
    @apply p-6;
  }

  .media-frame {
    @apply overflow-hidden rounded-card border border-ink-200 bg-white;
  }

  .surface-anchor .media-frame {
    @apply border-ink-800;
  }

  .surface-anchor h1,
  .surface-anchor h2,
  .surface-anchor h3,
  .surface-anchor h4,
  .surface-anchor .section-title,
  .surface-card-inverted h1,
  .surface-card-inverted h2,
  .surface-card-inverted h3,
  .surface-card-inverted h4 {
    @apply text-white;
  }

  .surface-anchor .section-lead,
  .surface-card-inverted .section-lead {
    @apply text-ink-400;
  }

  /* Product controls. */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-inverted,
  .btn-inverted-secondary,
  .btn-danger,
  .btn-disabled {
    @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-control border border-transparent px-[18px] py-2.5 text-sm font-semibold no-underline transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-700/25 focus-visible:ring-offset-2;
  }

  .btn-primary {
    @apply bg-brand-700 text-white hover:bg-brand-800;
  }

  .btn-secondary {
    @apply border-ink-200 bg-white text-ink-900 hover:border-ink-400 hover:bg-ink-50;
  }

  .btn-ghost {
    @apply bg-transparent text-ink-700 hover:bg-ink-100 hover:text-ink-950;
  }

  /* Primary/secondary equivalents for use on an anchor surface. */
  .btn-inverted {
    @apply bg-white text-ink-950 hover:bg-ink-100 focus-visible:ring-white/40;
  }

  /* Inline text links are an action role, so they carry the brand color. */
  .link {
    @apply font-medium text-brand-700 no-underline transition-colors duration-150 hover:underline;
  }

  .btn-inverted-secondary {
    @apply border-ink-700 bg-transparent text-white hover:border-ink-500 hover:bg-ink-900 focus-visible:ring-white/40;
  }

  .btn-danger {
    @apply bg-bad text-white hover:bg-bad/90;
  }

  .btn-disabled,
  .btn:disabled,
  .btn-primary:disabled,
  .btn-secondary:disabled {
    @apply pointer-events-none cursor-not-allowed border-transparent bg-ink-100 text-ink-400 shadow-none;
  }

  .btn-lg {
    @apply min-h-[48px] rounded-xl px-[26px] py-3.5 text-[15px];
  }

  .field {
    @apply grid gap-1.5;
  }

  .field-label {
    @apply text-[13px] font-medium text-ink-900;
  }

  .field-help {
    @apply text-xs text-ink-500;
  }

  .field-error {
    @apply text-xs text-bad;
  }

  .input,
  .select,
  .textarea {
    @apply w-full rounded-control border-ink-300 bg-white px-3 py-2.5 text-[15px] text-ink-950 shadow-none placeholder:text-ink-400 focus:border-brand-700 focus:ring-[3px] focus:ring-brand-700/20;
    min-height: 44px;
  }

  .textarea {
    min-height: 88px;
  }

  .dropzone {
    @apply rounded-control border border-dashed border-ink-300 bg-ink-50 p-6 text-center transition-colors duration-150 hover:border-brand-700;
  }

  .status-pill {
    @apply inline-flex items-center gap-2 rounded-full bg-ink-100 px-3 py-1 text-xs font-medium text-ink-700;
  }

  .status-pill::before {
    @apply block h-1.5 w-1.5 shrink-0 rounded-full bg-ink-400;
    content: "";
  }

  .status-good::before {
    @apply bg-good;
  }

  .status-warn::before {
    @apply bg-warn;
  }

  .status-bad::before {
    @apply bg-bad;
  }

  .status-outline {
    @apply border border-ink-200 bg-white;
  }

  .finding-gauge {
    @apply mt-3 flex gap-1;
  }

  .finding-gauge > span {
    @apply h-1.5 min-w-0 flex-1 rounded-sm bg-ink-200;
  }

  .finding-gauge .finding-gauge-severe {
    @apply bg-bad;
  }

  .finding-gauge .finding-gauge-warn {
    @apply bg-warn;
  }

  .finding-gauge .finding-gauge-clear {
    @apply bg-ink-300;
  }

  .finding-gauge .finding-gauge-unknown {
    background: repeating-linear-gradient(135deg, var(--ink-200) 0 3px, var(--ink-50) 3px 6px);
  }

  .finding-row-tile {
    @apply flex h-[26px] w-[26px] flex-none items-center justify-center rounded-[8px] bg-ink-100;
  }

  .findings-count-list > .divider-row:first-child {
    @apply pt-4;
  }

  .technique-score {
    @apply flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-[14px] border border-ink-200 bg-white;
    font-variant-numeric: tabular-nums;
  }

  .technique-score-value {
    @apply text-[22px] font-semibold leading-none tracking-[-0.02em] text-ink-950;
  }

  .technique-score-label {
    @apply mt-1 text-[9px] font-semibold uppercase tracking-[0.08em] text-ink-400;
  }

  .technique-score-bar {
    @apply mt-1.5 h-[3px] w-[26px] rounded-full bg-ink-200;
  }

  .score-good .technique-score-bar {
    @apply bg-good;
  }

  .score-warn .technique-score-bar {
    @apply bg-warn;
  }

  .score-bad .technique-score-bar {
    @apply bg-bad;
  }

  /* Reading surfaces use the same tokens without flattening rich content. */
  .exercise-content {
    @apply font-sans leading-relaxed text-ink-700;
  }

  .exercise-content h1 {
    @apply mb-6 mt-8 text-3xl font-semibold leading-tight tracking-[-0.025em] text-ink-950 first:mt-0;
  }

  .exercise-content h2 {
    @apply mb-4 mt-8 text-2xl font-semibold tracking-[-0.02em] text-ink-900 first:mt-0;
  }

  .exercise-content h3 {
    @apply mb-3 mt-6 text-xl font-semibold text-ink-900 first:mt-0;
  }

  .exercise-content h4 {
    @apply mb-2 mt-4 text-lg font-medium text-ink-900 first:mt-0;
  }

  .exercise-content p,
  .exercise-content li {
    @apply text-base leading-7 text-ink-700;
  }

  .exercise-content p {
    @apply mb-4;
  }

  .exercise-content ul,
  .exercise-content ol {
    @apply mb-6 space-y-2;
  }

  .exercise-content ul li {
    @apply relative pl-6;
  }

  .exercise-content ul li::before {
    @apply absolute left-0 top-3 h-1.5 w-1.5 rounded-full bg-ink-950;
    content: '';
  }

  .exercise-content ol {
    @apply list-none;
    counter-reset: list-counter;
  }

  .exercise-content ol li {
    @apply relative pl-6;
    counter-increment: list-counter;
  }

  .exercise-content ol li::before {
    @apply absolute left-0 top-0 font-medium text-ink-900;
    content: counter(list-counter) ".";
  }

  .exercise-content ul ul,
  .exercise-content ol ol,
  .exercise-content ul ol,
  .exercise-content ol ul {
    @apply mb-2 mt-2;
  }

  .exercise-content ul ul li {
    @apply pl-4;
  }

  .exercise-content ol ol {
    @apply list-none;
    counter-reset: nested-counter;
  }

  .exercise-content ol ol li {
    @apply relative pl-8;
    counter-increment: nested-counter;
  }

  .exercise-content ol ol li::before {
    @apply absolute left-0 top-0 font-medium text-ink-900;
    content: counter(nested-counter) ".";
  }

  .exercise-content table {
    @apply my-6 w-full border-collapse border border-ink-300;
  }

  .exercise-content th {
    @apply border border-ink-300 bg-ink-50 px-4 py-2 text-left font-semibold text-ink-900;
  }

  .exercise-content td {
    @apply border border-ink-300 px-4 py-2 text-ink-700;
  }

  .exercise-content tr:nth-child(even) {
    @apply bg-ink-50;
  }

  .exercise-content dl {
    @apply my-6;
  }

  .exercise-content dt {
    @apply mb-1 font-semibold text-ink-900;
  }

  .exercise-content dd {
    @apply mb-4 ml-4 text-ink-700;
  }

  .exercise-content .highlight-box {
    @apply my-6 rounded-r-control border-l-4 border-warn bg-warn-tint p-4;
  }

  .exercise-content .highlight-box p {
    @apply mb-0 text-warn;
  }

  .exercise-content .warning-box {
    @apply my-6 rounded-r-control border-l-4 border-bad bg-bad-tint p-4;
  }

  .exercise-content .warning-box p {
    @apply mb-0 text-bad;
  }

  .exercise-content .success-box {
    @apply my-6 rounded-r-control border-l-4 border-good bg-good-tint p-4;
  }

  .exercise-content .success-box p {
    @apply mb-0 text-good;
  }

  .exercise-content blockquote {
    @apply my-6 rounded-r-control border-l-4 border-ink-300 bg-ink-50 py-4 pl-6;
  }

  .exercise-content blockquote p {
    @apply mb-0 italic text-ink-700;
  }

  .exercise-content strong {
    @apply font-semibold text-ink-900;
  }

  .exercise-content em {
    @apply italic text-ink-700;
  }

  .exercise-content code {
    @apply rounded bg-ink-100 px-2 py-1 font-mono text-sm text-ink-800;
  }

  .exercise-content pre {
    @apply my-6 overflow-x-auto rounded-control bg-ink-950 p-4 text-ink-100;
  }

  .exercise-content pre code {
    @apply bg-transparent p-0 text-ink-100;
  }

  .exercise-content a {
    @apply text-brand-700 underline decoration-brand-700/40 underline-offset-2 transition-colors duration-150 hover:decoration-brand-700;
  }

  .exercise-content img {
    @apply my-6 h-auto max-w-full rounded-control;
  }

  .exercise-content hr {
    @apply my-8 border-ink-200;
  }

  .exercise-content .trix-content {
    @apply text-ink-700;
  }

  @media (max-width: 768px) {
    .exercise-content h1 {
      @apply mb-4 text-2xl;
    }

    .exercise-content h2 {
      @apply mb-3 text-xl;
    }

    .exercise-content h3 {
      @apply mb-2 text-lg;
    }

    .exercise-content p,
    .exercise-content li {
      @apply text-sm leading-6;
    }
  }
}

@layer utilities {
  .metric-numeral {
    font-variant-numeric: tabular-nums;
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

/* These element rules intentionally follow Tailwind utilities so legacy views
   inherit the guide while they move onto the named components above. */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  min-height: 44px;
  border-color: var(--ink-300);
  border-radius: var(--radius-control);
  background-color: var(--surface);
  color: var(--ink-950);
  box-shadow: none !important;
  font-family: inherit;
  font-size: 15px;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand-700) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgb(15 110 104 / 20%) !important;
  --tw-ring-color: transparent !important;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  border-color: var(--ink-200);
  background-color: var(--ink-50);
  color: var(--ink-400);
}

input[type="checkbox"],
input[type="radio"] {
  border-color: var(--ink-300);
  color: var(--brand-700) !important;
  accent-color: var(--brand-700);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  --tw-ring-color: rgb(15 110 104 / 25%) !important;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgb(15 110 104 / 30%);
}

a:hover,
button:hover,
[role="button"]:hover {
  transform: none !important;
}

a[class*="px-"][class*="py-"]:not(.rounded-full),
button[class*="px-"][class*="py-"]:not(.rounded-full),
input[type="submit"] {
  border-radius: var(--radius-control) !important;
}

.font-bold,
.font-extrabold,
.font-black {
  font-weight: 600 !important;
}

/* Legacy badges inherit the one-pill pattern even before their templates are
   converted to status-pill. Existing child dots are reused when present. */
.rounded-full[class*="px-"].bg-good-tint,
.rounded-full[class*="px-"].bg-warn-tint,
.rounded-full[class*="px-"].bg-bad-tint,
.rounded-full[class*="px-"].bg-ink-50,
.rounded-full[class*="px-"].bg-ink-100 {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--ink-100) !important;
  color: var(--ink-700) !important;
  font-size: .75rem;
  font-weight: 500 !important;
}

.rounded-full[class*="px-"].bg-good-tint:not(:has(.bg-good))::before,
.rounded-full[class*="px-"].bg-warn-tint:not(:has(.bg-warn))::before,
.rounded-full[class*="px-"].bg-bad-tint:not(:has(.bg-bad))::before,
.rounded-full[class*="px-"].bg-ink-50:not(:has([class*="bg-ink-"]))::before,
.rounded-full[class*="px-"].bg-ink-100:not(:has([class*="bg-ink-"]))::before {
  width: .375rem;
  height: .375rem;
  flex: none;
  border-radius: 9999px;
  background: var(--ink-400);
  content: "";
}

.rounded-full[class*="px-"].bg-good-tint:not(:has(.bg-good))::before { background: var(--good); }
.rounded-full[class*="px-"].bg-warn-tint:not(:has(.bg-warn))::before { background: var(--warn); }
.rounded-full[class*="px-"].bg-bad-tint:not(:has(.bg-bad))::before { background: var(--bad); }

/* Older cards often used a Tailwind ring as a border. Render those as the
   single L1 hairline instead of introducing another depth treatment. */
[class*="ring-1"][class*="ring-ink-200"][class*="bg-white"] {
  border: 1px solid var(--ink-200);
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

.prose {
  --tw-prose-body: var(--ink-700);
  --tw-prose-headings: var(--ink-950);
  --tw-prose-lead: var(--ink-500);
  --tw-prose-links: var(--brand-700);
  --tw-prose-bold: var(--ink-900);
  --tw-prose-counters: var(--ink-500);
  --tw-prose-bullets: var(--ink-400);
  --tw-prose-hr: var(--ink-200);
  --tw-prose-quotes: var(--ink-900);
  --tw-prose-quote-borders: var(--ink-300);
  --tw-prose-captions: var(--ink-500);
  --tw-prose-code: var(--ink-900);
  --tw-prose-pre-code: var(--ink-100);
  --tw-prose-pre-bg: var(--ink-950);
  --tw-prose-th-borders: var(--ink-300);
  --tw-prose-td-borders: var(--ink-200);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes dialog-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}