/*
 * Element defaults and layout/type utilities. Ported from minutes/frontend/src/styles/base.css,
 * with every class prefixed `cp-` so a product can adopt this sheet alongside its own while it
 * migrates, without two `.btn`s or two `.stack`s fighting.
 *
 * Controls (buttons, fields, tables, notices) are in controls.css.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  /* A sticky bar (the app shell's header, --shell-bar tall) must not cover the item that
     keyboard focus or an anchor scrolls to (WCAG 2.4.11). Harmless on a page without one. */
  scroll-padding-top: var(--shell-bar);
  /* A sticky cp-action-bar publishes its height here, so focus never lands under it either. */
  scroll-padding-bottom: var(--cp-action-bar-height, 0px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}
h1 {
  font-size: var(--text-xl);
}
h2 {
  font-size: var(--text-lg);
}
h3,
h4 {
  font-size: var(--text-md);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--interactive);
}

/* The global ring: a backstop for anything not styled below. Every class in controls.css
   also carries its own, so it does not depend on this sheet. */
:focus-visible {
  outline: var(--focus-ring) solid var(--interactive);
  outline-offset: var(--focus-offset);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-4) 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

/* --- Layout --- */

/* The page's column: centred, at most --frame wide, with gutters that shrink on a handset. */
.cp-frame {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 600px) {
  .cp-frame {
    padding: 0 var(--space-3);
  }
}
.cp-frame--page {
  padding-bottom: var(--space-7);
}
.cp-frame--narrow {
  max-width: 820px;
}
.cp-frame--mid {
  max-width: 980px;
}
.cp-measure {
  max-width: var(--measure);
}

.cp-stack > * + * {
  margin-top: var(--space-3);
}
.cp-stack-sm > * + * {
  margin-top: var(--space-2);
}
.cp-stack-lg > * + * {
  margin-top: var(--space-5);
}
.cp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cp-row-between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cp-spacer {
  flex: 1;
}

/* A section's heading sits on a hairline. */
.cp-section-title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
/* Something set apart on the page: a confirmation, a form that opened. */
.cp-panel {
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
}
/* A dl of facts in columns; a page sets --facts-min for wider columns. */
.cp-facts {
  --facts-min: 140px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--facts-min), 1fr));
  gap: var(--space-4);
  margin: 0;
}
.cp-facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted-ink);
}
.cp-facts dd {
  margin: var(--space-1) 0 0;
}
/* A list, or a fieldset, with the browser's own box taken off. */
.cp-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}
fieldset.cp-plain {
  border: 0;
}

/* --- Type --- */

/* The small uppercase mono label over a section, a field, a figure. */
.cp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  /* --fg-secondary (--muted-ink is now an alias of it): 11px labels need 4.5:1. */
  color: var(--fg-secondary);
}
.cp-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cp-secondary {
  color: var(--fg-secondary);
}
.cp-small {
  font-size: var(--text-sm);
}
.cp-signal {
  color: var(--signal);
}
.cp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Forced colours: the browser supplies the colours; keep the ring visible on any surface. */
@media (forced-colors: active) {
  :focus-visible {
    outline-color: CanvasText;
  }
}

/* --- Quiet link: the site's nav and footer links. Mono, small, tracked, muted turning to the
   foreground on hover, no underline. A link in prose keeps the default underlined look. --- */
.cp-link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-link);
  color: var(--fg-secondary);
  text-decoration: none;
}
.cp-link-quiet:hover,
.cp-link-quiet[aria-current] {
  color: var(--fg);
}
.cp-link-quiet:focus-visible {
  outline: var(--focus-ring) solid var(--interactive);
  outline-offset: var(--focus-offset);
}

/* --- Motion: an entrance and a nudge, only for people who have not asked for less. ---
   `.cp-enter` rises 8px and fades in over 0.6s; stagger with --enter-delay set inline.
   `.cp-nudge-left` is finite (three passes): it reports an arrival and then stops. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cp-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes cp-nudge-left {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-4px);
    }
  }
  .cp-enter {
    animation: cp-enter 0.6s ease-out both;
    animation-delay: var(--enter-delay, 0ms);
  }
  .cp-nudge-left {
    animation: cp-nudge-left 1.1s ease-in-out 3;
  }
}

/* --- Page grid (the site's): breakpoints tablet 834px, desktop 1512px, xl 1920px. ---
   `.cp-app-frame` is the page column with growing gutters; `.cp-grid` has 6, 8 then 12
   columns; `.cp-grid-full` spans all of them, `.cp-grid-content` the middle ten at desktop. */
.cp-app-frame {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 16px;
}
.cp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.cp-grid-full,
.cp-grid-content {
  grid-column: span 6;
}
@media (min-width: 834px) {
  .cp-app-frame {
    padding: 0 32px;
  }
  .cp-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
  }
  .cp-grid-full,
  .cp-grid-content {
    grid-column: span 8;
  }
}
@media (min-width: 1512px) {
  .cp-app-frame {
    padding: 0 48px;
  }
  .cp-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }
  .cp-grid-full {
    grid-column: span 12;
  }
  .cp-grid-content {
    grid-column: 2 / span 10;
  }
}
@media (min-width: 1920px) {
  .cp-app-frame {
    padding: 0 64px;
  }
}

/* A vertical hairline between neighbours in a row (a toolbar, a footer's links). */
.cp-divider-v {
  align-self: stretch;
  flex: none;
  width: 0;
  min-height: 1em;
  border: 0;
  border-left: 1px solid var(--hairline);
  margin: 0;
}

/* --- Card: flat. A hairline edge (decoration; the content inside carries the meaning), no
   radius, no shadow, and the surface colour on hover. `.cp-card--link` marks a card whose
   whole area is a link (see the cpCardLink directive): it shows the pointer, and the focus
   ring is drawn on the card when the heading link is focused. --- */
.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cp-card {
    transition: background-color var(--duration) var(--ease);
  }
}
.cp-card:hover {
  background: var(--surface);
}
.cp-card--link {
  cursor: pointer;
}
.cp-card--link:has(.cp-card-link:focus-visible) {
  outline: var(--focus-ring) solid var(--interactive);
  outline-offset: var(--focus-offset);
}
/* The stretched link (cpCardLink): its ::after covers the card, and the ring is the card's. */
.cp-card-link {
  color: inherit;
  text-decoration: none;
}
.cp-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.cp-card-link:focus-visible {
  outline: none;
}
/* Anything else interactive in the card sits above the cover, so it stays clickable. */
.cp-card :is(a, button, input, select, textarea, summary, [tabindex]):not(.cp-card-link) {
  position: relative;
  z-index: 1;
}
@media (forced-colors: active) {
  .cp-card {
    border-color: CanvasText;
  }
  .cp-card--link:has(.cp-card-link:focus-visible) {
    outline-color: CanvasText;
  }
  .cp-divider-v {
    border-left-color: CanvasText;
  }
}

/* A stage section (tokens.css re-points the palette inside it). */
.cp-stage {
  background: var(--bg);
  color: var(--fg);
}