/* ==========================================================================
   AllPoints base — reset, element defaults, and the §6 component classes.
   Load after assets/allpoints-tokens.css, before any page stylesheet.

   The component classes below are marketing's own, from the bottom of their
   allpoints-tokens.css handoff, kept as they wrote them but expressed through
   the tokens. New markup should use these rather than inventing a button.

   House rules (settled 2026-09-12, see the allpoints-brand skill):
     [D1] Text on navy uses the primary tint ramp — --ap-color-primary-border
          for labels, --ap-color-primary-bg for copy. No dark-surface tokens
          exist and we don't invent any.
     [D2] The outline button on navy takes --ap-color-text-inverse on
          --ap-color-border-solid; the spec's hover is kept exactly.
     [D3] Small buttons are §6.1 at Base type on the 32px control height.
     [D4] One navy only — a footer sits on --ap-color-bg-layout rather than a
          second, darker navy.

   Accessibility: --ap-color-text-secondary is 3.36:1 on white and fails AA,
   so body copy uses --ap-color-text and hierarchy comes from size and weight.
   Amendment owed to marketing: rgba(0,0,0,0.65) = 7.00:1.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  font-family:var(--ap-font-family);
  font-size:var(--ap-text-base);
  line-height:var(--ap-leading-base);
  font-weight:var(--ap-font-weight-regular);
  color:var(--ap-color-text);
  background:var(--ap-color-bg-container);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%}
img{height:auto}

h1,h2,h3,h4,h5{
  font-weight:var(--ap-font-weight-bold);
  color:var(--ap-color-text);
  margin:0;
  letter-spacing:0;
  text-wrap:balance;
}
h1{font-size:var(--ap-text-h1);line-height:var(--ap-leading-h1)}
h2{font-size:var(--ap-text-h2);line-height:var(--ap-leading-h2)}
h3{font-size:var(--ap-text-h3);line-height:var(--ap-leading-h3)}
h4{font-size:var(--ap-text-h4);line-height:var(--ap-leading-h4)}
h5{font-size:var(--ap-text-h5);line-height:var(--ap-leading-h5)}

p{margin:0 0 var(--ap-space)}
p:last-child{margin-bottom:0}

a{
  color:var(--ap-color-primary);
  text-decoration:underline;
  text-underline-offset:4px;
  font-weight:var(--ap-font-weight-bold);
}
a:hover{color:var(--ap-color-primary-hover)}

:focus-visible{
  outline:2px solid var(--ap-color-primary);
  outline-offset:2px;
  box-shadow:var(--ap-focus-ring);
}
/* On a navy surface the navy outline is invisible — invert it. [D1] */
.ap-on-navy :focus-visible{outline-color:var(--ap-color-text-inverse)}

hr,.ap-rule{border:0;border-top:1px solid var(--ap-color-split);margin:var(--ap-space-lg) 0}

code,kbd,samp,pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--ap-text-sm);
}

/* ── §6.1 Primary CTA (solid red) ──────────────────────────────────────── */
.ap-button-primary{
  display:inline-block;
  background:var(--ap-color-cta);
  color:var(--ap-color-text-inverse);
  font:var(--ap-font-weight-regular) var(--ap-text-lg)/22px var(--ap-font-family);
  padding:6px var(--ap-space) var(--ap-space-xs);
  border:none;
  border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-button);
  text-decoration:none;
  cursor:pointer;
}
.ap-button-primary:hover,.ap-button-primary:focus{
  background:var(--ap-color-cta-hover);
  color:var(--ap-color-text-inverse);
}

/* ── §6.2 Default / outline ────────────────────────────────────────────── */
.ap-button-outline{
  display:inline-block;
  background:transparent;
  color:var(--ap-color-text);
  font:var(--ap-font-weight-regular) var(--ap-text-lg)/var(--ap-leading-lg) var(--ap-font-family);
  padding:7px var(--ap-space-sm);
  border:1px solid var(--ap-color-border-solid);
  border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-button);
  text-decoration:none;
  cursor:pointer;
}
.ap-button-outline:hover,.ap-button-outline:focus{
  background:var(--ap-color-bg-container);
  border-color:var(--ap-color-primary);
  color:var(--ap-color-primary);
}
/* [D2] the same button on a navy surface */
.ap-on-navy .ap-button-outline{color:var(--ap-color-text-inverse)}

/* ── §6.3 Link button ──────────────────────────────────────────────────── */
.ap-button-link{
  display:inline-block;
  color:var(--ap-color-primary);
  font:var(--ap-font-weight-bold) var(--ap-text-base)/19.5px var(--ap-font-family);
  text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer;
}
.ap-button-link:hover,.ap-button-link:focus{text-decoration:underline;text-underline-offset:5px}

/* ── §6.4 Inputs and selects ───────────────────────────────────────────── */
.ap-input,.ap-select{
  height:var(--ap-control);
  padding:var(--ap-space-xxs) 11px;
  font:var(--ap-font-weight-regular) var(--ap-text-base)/var(--ap-leading-base) var(--ap-font-family);
  color:var(--ap-color-text);
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border);
  border-radius:var(--ap-radius);
  max-width:100%;
}
.ap-input-lg{height:var(--ap-control-lg)}
.ap-input::placeholder{color:var(--ap-color-text-placeholder)}
.ap-input:hover,.ap-select:hover{border-color:var(--ap-color-primary-border-hover)}
.ap-input:focus,.ap-select:focus{
  outline:none;
  border-color:var(--ap-color-primary);
  box-shadow:var(--ap-focus-ring);
}
.ap-input:disabled,.ap-select:disabled{
  background:var(--ap-color-bg-container-disabled);
  color:var(--ap-color-text-disabled);
}
.ap-input[aria-invalid="true"]{border-color:var(--ap-color-error);box-shadow:var(--ap-focus-ring-error)}

.ap-label{
  display:block;
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  font-weight:var(--ap-font-weight-bold);
  margin-bottom:var(--ap-space-xxs);
}

/* ── §6.5 Cards and panels ─────────────────────────────────────────────── */
.ap-card{
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space);
}
.ap-card-roomy{padding:var(--ap-space-lg)}
.ap-card-dense{padding:var(--ap-space-sm)}

/* ── §6.6 Tags / badges ────────────────────────────────────────────────── */
.ap-tag{
  display:inline-block;
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  padding:1px var(--ap-space-xs);
  border-radius:var(--ap-radius-sm);
  border:1px solid var(--ap-color-border);
  background:var(--ap-color-bg-container);
  color:var(--ap-color-text);
  white-space:nowrap;
}
.ap-tag-success{background:var(--ap-color-success-bg);border-color:var(--ap-color-success-border);color:var(--ap-color-success-text)}
.ap-tag-warning{background:var(--ap-color-warning-bg);border-color:var(--ap-color-warning-border);color:var(--ap-color-warning-text)}
.ap-tag-error  {background:var(--ap-color-error-bg);  border-color:var(--ap-color-error-border);  color:var(--ap-color-error-text)}
.ap-tag-info   {background:var(--ap-color-info-bg);   border-color:var(--ap-color-info-border);   color:var(--ap-color-info-text)}
.ap-tag-primary{background:var(--ap-color-primary-bg);border-color:var(--ap-color-primary-border);color:var(--ap-color-primary)}

/* ── §6.7 Tables ───────────────────────────────────────────────────────── */
.ap-table{
  border-collapse:collapse;width:100%;
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
}
.ap-table th,.ap-table td{
  text-align:left;
  padding:var(--ap-space-xs) var(--ap-space-sm);
  border-bottom:1px solid var(--ap-color-split);
  vertical-align:top;
}
.ap-table th{
  background:var(--ap-color-table-header);
  font-weight:var(--ap-font-weight-bold);
  white-space:nowrap;
}
.ap-table tbody tr:hover{background:var(--ap-color-control-hover)}
.ap-table tbody tr[aria-selected="true"]{background:var(--ap-color-control-active)}
.ap-num{font-variant-numeric:tabular-nums;text-align:right}
.ap-scroll{overflow-x:auto}

/* ── Layout helpers ────────────────────────────────────────────────────── */
.ap-container{max-width:var(--ap-container-max);margin:0 auto;padding:0 var(--ap-space)}
.ap-stack{display:flex;flex-direction:column;gap:var(--ap-space)}
.ap-row{display:flex;flex-wrap:wrap;gap:var(--ap-space-sm);align-items:center}
.ap-muted{font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm)}
.ap-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Phone step-down (§6.1 / §6.2, ≤601px) ─────────────────────────────── */
@media (max-width:601px){
  .ap-button-primary{
    font-size:var(--ap-text-base);line-height:20px;
    padding:5px 14px;border-radius:var(--ap-radius-sm);
  }
  .ap-button-outline{font-size:var(--ap-text-base);line-height:20px}
  h1{font-size:var(--ap-text-h2);line-height:var(--ap-leading-h2)}
  h2{font-size:var(--ap-text-h3);line-height:var(--ap-leading-h3)}
}