/*
 * Components ported from the Chambers Plan marketing site (chambers-plan.vercel.app/css/style.css):
 * reset, type utilities, .btn, .field, .choice, checkbox (.quote-form__consent), .tag, cards.
 * Changes from the site are marked "a11y:" and explained in the README contrast table.
 * Depends on tokens.css.
 */
@layer reset, base, components, page;

@layer reset {
  *, ::before, ::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  :is(ul, ol):where([class]) { padding: 0; list-style: none; }
  body { min-block-size: 100vh; line-height: 1.5; }
  h1, h2, h3, h4, button, input, label { line-height: 1.1; }
  p { text-wrap: pretty; }
  img, picture, video, canvas, svg { max-inline-size: 100%; display: block; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a:not([class]) {
    color: currentColor;
    text-decoration-skip-ink: auto;
    text-underline-offset: .15em;
    text-decoration-thickness: max(.08em, 1px);
  }
  /* a11y: site focus ring is coral (2.27:1 on cream). Plum heading colour is 9.22:1. */
  :focus-visible {
    outline: var(--outline-size) solid var(--color-focus);
    outline-offset: 2px;
  }
  [hidden] { display: none !important; }
}

@layer base {
  @font-face {
    font-family: "Host Grotesk";
    src: url("../fonts/host-grotesk-variable.woff2") format("woff2");
    font-weight: 300 800; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Host Grotesk";
    src: url("../fonts/host-grotesk-variable-italic.woff2") format("woff2");
    font-weight: 300 800; font-style: italic; font-display: swap;
  }
  @font-face {
    font-family: Leif;
    src: url("../fonts/leif-regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: Leif;
    src: url("../fonts/leif-italic.woff2") format("woff2");
    font-weight: 400; font-style: italic; font-display: swap;
  }
  @font-face {
    font-family: "Leif Symbols";
    src: url("../fonts/leif-symbols.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+2B, U+3C-3E, U+B1, U+D7, U+F7, U+2212;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--leading-md);
  }

  :focus { scroll-margin-block: 6rem; }
}

@layer components {
  /* ---------- Layout ---------- */
  .container {
    inline-size: 100%;
    max-inline-size: calc(var(--container) + var(--container-padding) * 2);
    padding-inline: var(--container-padding);
    margin-inline: auto;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: 1rem; inset-block-start: -10rem;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-xs);
    font-weight: 600;
  }
  .skip-link:focus { inset-block-start: 1rem; }

  /* ---------- Type utilities (site) ---------- */
  .text-heading { font-family: var(--font-display); font-weight: 400; }
  .text-heading--size-lg { font-size: clamp(1.375rem, 1.25rem + .4vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; }
  .text-heading--size-xl { font-size: var(--font-size-xl); line-height: var(--leading-xl); letter-spacing: var(--tracking-xl); }
  .text-heading--size-2xl { font-size: var(--font-size-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-2xl); }
  .text-heading--size-3xl { font-size: var(--font-size-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); }
  .text-heading--size-4xl { font-size: var(--font-size-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); }

  .text-body--size-xs { font-size: var(--font-size-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-xs); }
  .text-body--size-sm { font-size: var(--font-size-sm); line-height: var(--leading-sm); }
  .text-body--size-md { font-size: var(--font-size-md); line-height: var(--leading-md); }
  .text-body--size-lg { font-size: var(--font-size-lg); line-height: var(--leading-lg); }

  .text-label { font-family: var(--font-body); }
  .text-label--size-2xs { font-size: var(--font-size-2xs); line-height: var(--leading-2xs); letter-spacing: var(--tracking-2xs); }
  .text-label--size-xs { font-size: var(--font-size-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-xs); }

  .text-muted { color: var(--color-text-muted); }

  /* ---------- Buttons (site .btn, simplified hover choreography) ---------- */
  .btn {
    --btn-block-size: 2.75rem;          /* a11y: 2.5rem on the site; slightly larger touch target */
    --btn-gap: .125rem;
    --btn-padding-inline: 1.5rem;
    --btn-bg: transparent;
    --btn-color: currentcolor;
    --btn-color-engaged: var(--btn-color);
    --btn-stroke: transparent;
    --btn-icon-size: var(--btn-block-size);
    --btn-duration: .5s;
    --btn-ease: cubic-bezier(.3, 1, .3, 1);
    --btn-layer: var(--color-accent-deep);
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    max-inline-size: 100%;
    padding: 0; margin: 0;
    border: none;
    background: none;
    color: var(--btn-color);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color var(--btn-duration) var(--btn-ease);
  }
  .btn:focus-visible { outline: var(--outline-size) solid var(--color-focus); outline-offset: 4px; }
  .btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }

  .btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--btn-block-size);
    padding-inline: var(--btn-padding-inline);
    padding-block: .5rem;
    border-radius: calc(var(--btn-block-size) / 2);
    background-color: var(--btn-bg);
    box-shadow: inset 0 0 0 1px var(--btn-stroke);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;                /* a11y: site uses nowrap; French labels must wrap on phones */
    transition: translate var(--btn-duration) var(--btn-ease), background-color var(--btn-duration) var(--btn-ease);
  }

  .btn__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    block-size: var(--btn-icon-size);
    inline-size: var(--btn-icon-size);
    border-radius: 50%;
    background-color: var(--btn-bg);
    box-shadow: inset 0 0 0 1px var(--btn-stroke);
    isolation: isolate;
    overflow: clip;
    position: relative;
    transition: background-color var(--btn-duration) var(--btn-ease), scale var(--btn-duration) var(--btn-ease);
  }
  .btn__icon::before {
    content: "";
    position: absolute;
    inset-block: 0; inset-inline: -10%;
    z-index: -1;
    background-color: var(--btn-layer);
    transform: translate3d(0, 175%, 0) rotate(15deg);
    transition: transform var(--btn-duration) var(--btn-ease);
  }
  .btn__icon svg { inline-size: 1rem; block-size: 1rem; }
  .btn--direction-back .btn__icon svg { rotate: 180deg; }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover { color: var(--btn-color-engaged); }
    .btn:hover .btn__icon::before { transform: translate3d(0, 0, 0) rotate(0); }
  }

  .btn--accent { --btn-bg: var(--color-accent); --btn-color: var(--color-on-accent); }        /* 6.91:1 */
  .btn--outline {
    /* a11y: site stroke is 20% currentcolor (1.45:1); the label text identifies the button, stroke raised to 60% */
    --btn-stroke: var(--color-field-stroke);
    --btn-layer: var(--color-accent);
    --btn-color-engaged: var(--color-on-accent);
  }
  .btn--ghost { --btn-layer: transparent; --btn-color-engaged: var(--btn-color); }
  .btn--small { --btn-block-size: 2.25rem; --btn-padding-inline: 1rem; }

  /* Text-style button, used for secondary actions such as "I can't find my name" */
  .link-button {
    display: inline;
    padding: .25rem 0;
    border: 0;
    background: none;
    color: var(--color-heading);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: max(.08em, 1px);
    cursor: pointer;
    text-align: start;
  }
  .link-button:hover { text-decoration-thickness: 2px; }

  /* ---------- Fields (site .field) ---------- */
  .field { display: grid; gap: .375rem; min-inline-size: 0; }
  .field__label { font-weight: 500; font-size: var(--font-size-sm); line-height: var(--leading-sm); }
  .field__optional { font-weight: 400; color: var(--color-text-muted); }
  .field__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--leading-xs); max-inline-size: 42em; }

  .field__input {
    inline-size: 100%;
    min-block-size: 3rem;
    padding-inline: 1rem;
    border: 0;
    /* a11y: site underline is 12% currentcolor (1.24:1). 60% is 3.64:1. */
    border-block-end: 1px solid var(--color-field-stroke);
    border-radius: 0;
    background-color: color-mix(in oklch, var(--color-surface-warm) 60%, transparent);
    color: inherit;
    font-size: var(--font-size-md);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  }
  textarea.field__input { padding-block: .75rem; resize: vertical; line-height: var(--leading-md); }
  select.field__input {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23542434' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
  }
  .field__input::placeholder { color: var(--color-text-muted); }
  .field__input:focus-visible {
    outline: var(--outline-size) solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-focus);
  }
  .field__input[aria-invalid="true"] {
    border-block-end: 2px solid var(--color-error);
  }

  .field__error {
    display: flex;
    gap: .5rem;
    align-items: start;
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }
  .field__error::before {
    content: "";
    flex: none;
    inline-size: 1.125rem; block-size: 1.125rem;
    margin-block-start: .1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm0 6.25h1.5v1.5h-1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .field__counter { font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .field__counter[data-state="ok"] { color: var(--color-success); }
  .field__counter[data-state="over"] { color: var(--color-error); }

  .fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 1.5rem; }
  .fieldset__legend { padding: 0; margin-block-end: 1.25rem; color: var(--color-heading); }

  /* ---------- Choice chips (site .choice) ---------- */
  .choice { border: 0; min-inline-size: 0; padding: 0; margin: 0; }
  .choice__legend { padding: 0; margin-block-end: .75rem; font-weight: 500; font-size: var(--font-size-sm); }
  .choice__options { display: flex; flex-wrap: wrap; gap: .5rem; }
  .choice__option { display: flex; position: relative; }
  .choice__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .choice__label {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    border: 1px solid var(--color-field-stroke);                 /* a11y: 20% on the site */
    border-radius: var(--radius-pill);
    color: var(--color-text);                                    /* a11y: 60% on the site (3.64:1) */
    font-weight: 600;
    font-size: var(--font-size-2xs);
    letter-spacing: var(--tracking-2xs);
    text-transform: uppercase;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .choice__input:checked + .choice__label {
    border-color: var(--color-bg-inverse);
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
  }
  .choice__input:focus-visible + .choice__label { outline: var(--outline-size) solid var(--color-focus); outline-offset: 2px; }

  /* Larger option cards for the profile type choice */
  .choice-cards { display: grid; gap: .75rem; }
  @media (width >= 768px) { .choice-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
  .choice-card { position: relative; display: flex; }
  .choice-card__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .choice-card__body {
    display: grid;
    gap: .375rem;
    inline-size: 100%;
    padding: 1.25rem 1.25rem 1.25rem 3.25rem;
    border: 1px solid var(--color-field-stroke);
    border-radius: var(--radius-md);
    background: var(--color-surface-cool-raised);
    position: relative;
    transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }
  .choice-card__body::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.25rem; inset-block-start: 1.3rem;
    inline-size: 1.25rem; block-size: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-field-stroke);
    background: var(--color-bg);
  }
  .choice-card__title { font-weight: 600; }
  .choice-card__hint { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--leading-sm); }
  .choice-card__input:checked + .choice-card__body {
    border-color: var(--color-control-checked);
    box-shadow: inset 0 0 0 1px var(--color-control-checked);
    background: var(--color-surface-warm);
  }
  .choice-card__input:checked + .choice-card__body::before {
    border: 6px solid var(--color-control-checked);
  }
  .choice-card__input:focus-visible + .choice-card__body { outline: var(--outline-size) solid var(--color-focus); outline-offset: 3px; }

  /* ---------- Checkbox (site .quote-form__consent) ---------- */
  .checkbox { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; }
  .checkbox__input {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: 0; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .checkbox__box {
    display: grid;
    place-content: center;
    inline-size: 1.5rem; block-size: 1.5rem;          /* site: 1.125rem */
    margin-block-start: .05em;
    border: 1px solid var(--color-field-stroke);      /* a11y: 20% on the site */
    border-radius: var(--radius-xs);
    background: var(--color-bg);
    color: var(--color-text-inverse);
    transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  }
  .checkbox__tick { fill: currentColor; inline-size: 12px; block-size: auto; scale: 0; transition: scale var(--duration-base) var(--ease-standard); }
  .checkbox__input:checked + .checkbox__box {
    border-color: var(--color-control-checked);       /* a11y: coral on the site (2.27:1) */
    background-color: var(--color-control-checked);
  }
  .checkbox__input:checked + .checkbox__box .checkbox__tick { scale: 1; }
  .checkbox__input:focus-visible + .checkbox__box { outline: var(--outline-size) solid var(--color-focus); outline-offset: 2px; }
  .checkbox__input[aria-invalid="true"] + .checkbox__box { border: 2px solid var(--color-error); }
  .checkbox__text { font-size: var(--font-size-sm); line-height: var(--leading-sm); }

  /* ---------- Tags (site .tag) ---------- */
  .tag {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding-inline: .75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-tag);
    color: var(--color-on-tag);                       /* 4.57:1 */
    font-weight: 500;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }
  .tag--warm { background: var(--color-surface-warm); color: var(--color-heading); }
  .tag--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
  .tag--success { background: color-mix(in oklch, var(--color-success) 12%, var(--color-bg)); color: var(--color-success); }
  .tag--error { background: color-mix(in oklch, var(--color-error) 10%, var(--color-bg)); color: var(--color-error); }

  /* ---------- Cards (site .topic-card) ---------- */
  .card {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-warm);
    color: var(--color-text);
  }
  .card--cool { background-color: var(--color-surface-cool); }
  .card__title { color: var(--color-heading); }

  @supports (corner-shape: squircle) {
    .card, .choice-card__body { corner-shape: squircle; border-radius: calc(var(--radius-md) * 1.75); }
  }

  /* ---------- Notices ---------- */
  .notice {
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid var(--color-heading);
    border-radius: var(--radius-xs);
    background: var(--color-surface-warm);
  }
  .notice--error { border-color: var(--color-error); background: color-mix(in oklch, var(--color-error) 6%, var(--color-bg)); }
  .notice--success { border-color: var(--color-success); background: color-mix(in oklch, var(--color-success) 8%, var(--color-bg)); }
  .notice:focus { outline: var(--outline-size) solid var(--color-focus); outline-offset: 2px; }

  /* ---------- Header (site .site-header, static rather than absolute) ---------- */
  .site-header {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    padding-block: clamp(1rem, 3vw, 2rem);
  }
  .site-header :focus-visible { outline-color: var(--color-focus-inverse); }
  .site-header__container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .logo { display: inline-flex; color: inherit; }
  .logo__image { inline-size: clamp(8.75rem, 7.5rem + 4vw, 11.1875rem); block-size: auto; }
  .lang-toggle {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    border: 1px solid var(--color-stroke-inverse);
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--tracking-2xs);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
  }
  .lang-toggle:hover { background: var(--color-bg-inverse-raised); }
}