/* Core primitives: icon, button, icon button, pill link, tag, badge, section label */
.lab-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--lab-icon-url) center/contain no-repeat;mask:var(--lab-icon-url) center/contain no-repeat}

/* Icon set — Lucide 0.451.0, vendored to assets/icons/ and masked to currentColor.
   4A Lab supplied no icon library; see the design system readme → ICONOGRAPHY.
   PORT: the prototype set --lab-icon-url inline from a CDN URL. These paths are
   relative, and a relative url() inside a custom property resolves against the
   stylesheet, not the page — so the declarations live here beside the var() that
   consumes them rather than in a style attribute. */
.lab-icon--arrow-right{--lab-icon-url:url("../../assets/icons/arrow-right.svg")}
.lab-icon--check{--lab-icon-url:url("../../assets/icons/check.svg")}
.lab-icon--chevron-down{--lab-icon-url:url("../../assets/icons/chevron-down.svg")}
.lab-icon--x{--lab-icon-url:url("../../assets/icons/x.svg")}
.lab-icon--plus{--lab-icon-url:url("../../assets/icons/plus.svg")}
.lab-icon--circle{--lab-icon-url:url("../../assets/icons/circle.svg")}
.lab-icon--info{--lab-icon-url:url("../../assets/icons/info.svg")}
.lab-icon--alert-circle{--lab-icon-url:url("../../assets/icons/alert-circle.svg")}
.lab-icon--check-circle{--lab-icon-url:url("../../assets/icons/check-circle.svg")}
.lab-icon--sparkles{--lab-icon-url:url("../../assets/icons/sparkles.svg")}

.lab-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);box-sizing:border-box;padding:14px 26px;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1;border:1px solid transparent;border-radius:var(--radius-pill);background:none;color:inherit;cursor:pointer;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-editorial),color var(--dur-fast) var(--ease-editorial),border-color var(--dur-fast) var(--ease-editorial),transform var(--dur-fast) var(--ease-editorial),box-shadow var(--dur-fast) var(--ease-editorial)}
.lab-btn--sm{padding:9px 18px;font-size:var(--fs-micro);letter-spacing:var(--ls-micro)}
.lab-btn--lg{padding:19px 34px;font-size:var(--fs-body-s);letter-spacing:.1em}
.lab-btn--deep{background:var(--blue-deep);color:var(--text-on-deep)}
/* Hover fills bright blue, press fills it darker — the same answer for every
   navy button, whether navy is where it starts or where hovering took it.
   The kit's original move, navy to a barely darker navy, was invisible at
   button size. The border travels with the background on the outlined ones,
   or a navy hairline is left ringing a bright blue face. */
.lab-btn--deep:hover{background:var(--blue-bright)}
.lab-btn--deep:active{background:var(--blue-bright-press)}
.lab-btn--accent{background:var(--blue-bright);color:var(--text-on-accent)}
.lab-btn--accent:hover{background:var(--blue-bright-press)}
.lab-btn--outline{border-color:var(--blue-deep);color:var(--blue-deep)}
.lab-btn--outline:hover{background:var(--blue-bright);border-color:var(--blue-bright);color:var(--text-on-accent)}
.lab-btn--outline:active{background:var(--blue-bright-press);border-color:var(--blue-bright-press)}
.lab-btn--cream{background:var(--cream);color:var(--blue-deep)}
.lab-btn--cream:hover{background:var(--cream-deep)}
.lab-btn--ghost{color:var(--blue-deep)}
.lab-btn--ghost:hover{background:var(--blue-veil)}
.lab-btn--on-deep{background:var(--cream);color:var(--blue-deep)}
.lab-btn--on-deep:hover{background:var(--white)}
/* Hover lifts, press sinks — the same gesture the stickers make, and the half
   of it the kit was missing: :active already sank, nothing ever rose. The lift
   is shared by every variant; the shadow is not, because --ghost has no face to
   cast one and reads as floating grey nothing with it. */
.lab-btn:hover{transform:translateY(-2px)}
.lab-btn--deep:hover,.lab-btn--accent:hover,.lab-btn--outline:hover,
.lab-btn--cream:hover,.lab-btn--on-deep:hover{box-shadow:var(--shadow-card-hover)}
.lab-btn:active{transform:translateY(1px);box-shadow:var(--shadow-hairline)}
.lab-btn[disabled],.lab-btn[aria-disabled=true]{opacity:.42;pointer-events:none;transform:none;box-shadow:none}
.lab-btn__icon{font-size:1.15em}

/* Keyboard focus. The form controls in forms.css already ring like this; the
   buttons never did, so tabbing through the page left no trace of where you
   were. :focus-visible keeps it off mouse clicks. */
.lab-btn:focus-visible,.lab-iconbtn:focus-visible,.lab-pill:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px}

.lab-iconbtn{display:inline-grid;place-items:center;box-sizing:border-box;width:44px;height:44px;font-size:18px;border:1px solid transparent;border-radius:var(--radius-circle);background:none;color:inherit;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-editorial),color var(--dur-fast) var(--ease-editorial),border-color var(--dur-fast) var(--ease-editorial),transform var(--dur-fast) var(--ease-editorial),box-shadow var(--dur-fast) var(--ease-editorial)}
.lab-iconbtn--sm{width:34px;height:34px;font-size:15px}
.lab-iconbtn--lg{width:56px;height:56px;font-size:22px}
.lab-iconbtn--outline{border-color:var(--blue-deep);color:var(--blue-deep)}
.lab-iconbtn--outline:hover{background:var(--blue-bright);border-color:var(--blue-bright);color:var(--text-on-accent)}
.lab-iconbtn--outline:active{background:var(--blue-bright-press);border-color:var(--blue-bright-press)}
.lab-iconbtn--deep{background:var(--blue-deep);color:var(--text-on-deep)}
.lab-iconbtn--deep:hover{background:var(--blue-bright)}
.lab-iconbtn--deep:active{background:var(--blue-bright-press)}
.lab-iconbtn--accent{background:var(--blue-bright);color:var(--text-on-accent)}
.lab-iconbtn--accent:hover{background:var(--blue-bright-press)}
.lab-iconbtn--ghost{color:var(--blue-deep)}
.lab-iconbtn--ghost:hover{background:var(--blue-veil)}
.lab-iconbtn:hover{transform:translateY(-2px)}
.lab-iconbtn--deep:hover,.lab-iconbtn--accent:hover,
.lab-iconbtn--outline:hover{box-shadow:var(--shadow-card-hover)}
.lab-iconbtn:active{transform:translateY(1px);box-shadow:var(--shadow-hairline)}

.lab-pill{display:inline-flex;align-items:center;gap:var(--space-4);box-sizing:border-box;padding:6px 22px 6px 6px;border:1.5px solid var(--blue-deep);border-radius:var(--radius-pill);font-family:var(--font-display);font-style:italic;font-size:22px;line-height:1.1;color:var(--blue-deep);text-decoration:none;background:none;cursor:pointer;transition:background-color var(--dur-base) var(--ease-editorial),color var(--dur-base) var(--ease-editorial),transform var(--dur-base) var(--ease-editorial),box-shadow var(--dur-base) var(--ease-editorial)}
.lab-pill--sm{font-size:17px;padding:4px 18px 4px 4px}
.lab-pill--lg{font-size:28px;padding:8px 28px 8px 8px}
.lab-pill__dot{display:grid;place-items:center;flex:none;width:2em;height:2em;border:1.5px solid currentColor;border-radius:var(--radius-circle);font-size:.62em}
.lab-pill--reverse{flex-direction:row-reverse;padding:6px 6px 6px 22px}
.lab-pill:hover{background:var(--blue-bright);border-color:var(--blue-bright);color:var(--text-on-accent)}
.lab-pill:active{background:var(--blue-bright-press);border-color:var(--blue-bright-press)}
.lab-pill--on-deep{border-color:var(--cream);color:var(--cream)}
.lab-pill--on-deep:hover{background:var(--cream);color:var(--blue-deep)}
.lab-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.lab-pill:active{transform:translateY(1px);box-shadow:var(--shadow-hairline)}

.lab-tag{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;padding:6px 12px;font-family:var(--font-sans);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1;border:1px solid transparent;border-radius:var(--radius-pill)}
.lab-tag--light{background:var(--blue-light);color:var(--blue-deep)}
.lab-tag--pale{background:var(--blue-pale);color:var(--blue-deep)}
.lab-tag--cream{background:var(--cream);color:var(--blue-deep)}
.lab-tag--deep{background:var(--blue-deep);color:var(--cream)}
.lab-tag--accent{background:var(--blue-bright);color:var(--white)}
.lab-tag--peri{background:var(--blue-peri);color:var(--white)}
.lab-tag--outline{border-color:var(--border-hairline);color:var(--blue-deep)}
.lab-tag--square{border-radius:var(--radius-0)}

.lab-badge{display:inline-grid;place-items:center;box-sizing:border-box;min-width:22px;height:22px;padding:0 7px;font-family:var(--font-sans);font-size:var(--fs-micro);font-weight:var(--fw-medium);line-height:1;border-radius:var(--radius-pill)}
.lab-badge--accent{background:var(--blue-bright);color:var(--white)}
.lab-badge--deep{background:var(--blue-deep);color:var(--cream)}
.lab-badge--light{background:var(--blue-light);color:var(--blue-deep)}
.lab-badge--error{background:var(--feedback-error);color:var(--white)}
.lab-badge--success{background:var(--feedback-success);color:var(--white)}
.lab-badge--dot{min-width:8px;width:8px;height:8px;padding:0}

.lab-seclabel{display:flex;align-items:center;gap:var(--space-5);width:100%;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-deep)}
.lab-seclabel__rule{flex:1;height:var(--rule-weight);background:currentColor;opacity:.42}
.lab-seclabel--serif{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-body-s);letter-spacing:.16em}
.lab-seclabel--on-deep{color:var(--cream)}
.lab-seclabel--muted{color:var(--text-muted)}