/*
Theme Name: Claim Blog
Theme URI: https://claimmoney.com/blog
Description: Custom theme for the Claim blog + glossary. Header/footer adopt Claim's official component handoff 1:1 (reference/claim-component-handoff). Built by GLUSKA.co.
Author: GLUSKA.co
Version: 0.7.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: claim-blog
*/

/* ---- self-hosted Inter (matches Claim's @fontsource/inter) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/inter-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/inter-900.woff2") format("woff2"); }

/* ---- design tokens (from claimmoney.com compiled CSS) ---- */
:root {
  --font-family: "Inter", "SF Pro", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --blue: #0051FF;
  --blue-hover: #1c46d8;
  --blue-dark: #0F2A5F;
  --blue-light: #859FFF;
  --ink: #121212;
  --ink-2: #6A6A6A;
  --ink-3: #98A2B3;
  --surface: #FFFFFF;
  --surface-2: #F0F2F6;
  --line: #E6E9EF;
  --radius-pill: 100px;
  --radius-card: 16px;
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* ==========================================================================
   Header / footer — Claim's official component handoff, adopted 1:1.
   Source: reference/claim-component-handoff/claim-brand.css (extracted from the
   React app's PublicLayout). Everything below is namespaced .claim-* / --claim-*
   and is safe to carry verbatim; the only theme additions are the header nav
   row (.claim-header__nav) and its mobile hide, noted inline.
   ========================================================================== */

:root {
  --claim-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
    sans-serif;

  /* Typography (weight size/line-height family) */
  --claim-typography-body: 400 16px/24px var(--claim-font-family);
  --claim-typography-body-medium: 500 16px/24px var(--claim-font-family);
  --claim-typography-body-bold: 600 16px/24px var(--claim-font-family);
  --claim-typography-label: 400 14px/21px var(--claim-font-family);
  --claim-typography-label-medium: 500 14px/21px var(--claim-font-family);

  /* Colors */
  --claim-color-bg: #fff;
  --claim-color-brand: #0051ff;
  --claim-color-surface: #f0f2f6;
  --claim-color-text: #121212;
  --claim-color-text-inverted: #fff;
  --claim-color-text-secondary: #6a6a6a;
  --claim-color-border: #f0f2f6;
  --claim-color-btn-primary-hover: #1c46d8;
}

.claim-header,
.claim-header *,
.claim-footer,
.claim-footer *,
.claim-footer-mobile,
.claim-footer-mobile *,
.claim-btn {
  box-sizing: border-box;
}

/* Header — logo left, "Get started" CTA right */
.claim-header {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 32px 0;
  background: var(--claim-color-bg);
  font: var(--claim-typography-body);
  color: var(--claim-color-text);
}

.claim-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.claim-header__logo {
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.claim-header__logo:hover {
  transform: scale(1.05);
}

.claim-header__logo img {
  display: block;
  width: 127px;
  height: 41px;
}

@media (max-width: 768px) {
  .claim-header__logo img {
    width: 90px;
    height: 30px;
  }
}

/* Header nav row (theme addition — the handoff ships these as inline text
   buttons; hidden on mobile to match the app, which shows logo + CTA only) */
.claim-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .claim-header__nav {
    display: none;
  }
}

/* Buttons (pill-shaped, radius 100px) */
.claim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.claim-btn:hover {
  text-decoration: none;
}

.claim-btn--primary-inverted {
  background: var(--claim-color-bg);
  color: var(--claim-color-text);
}

.claim-btn--primary-inverted:hover {
  opacity: 0.8;
}

.claim-btn--primary {
  background: var(--claim-color-brand);
  color: var(--claim-color-text-inverted);
}

.claim-btn--primary:hover {
  background: var(--claim-color-btn-primary-hover);
}

.claim-btn--tertiary {
  background: transparent;
  color: var(--claim-color-text);
}

.claim-btn--tertiary:hover {
  color: var(--claim-color-brand);
}

.claim-btn--medium {
  height: 52px;
  padding: 20px 28px;
  font: var(--claim-typography-body-bold);
}

.claim-btn--small {
  height: 40px;
  padding: 12px 16px;
  font: var(--claim-typography-label-medium);
}

@media (max-width: 768px) {
  .claim-header .claim-btn--medium {
    height: 40px;
    padding: 12px 16px;
    font: var(--claim-typography-label-medium);
  }
}

/* Desktop footer (hidden <=768px, replaced by .claim-footer-mobile) */
.claim-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 48px 32px 100px;
  border-top: 1px solid var(--claim-color-border);
  background: var(--claim-color-bg);
}

.claim-footer__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  align-self: center;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
}

.claim-footer__logo-col {
  width: 228px;
  flex-shrink: 0;
}

.claim-footer__logo {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.claim-footer__logo:hover {
  transform: scale(1.05);
}

.claim-footer__logo img {
  display: block;
  width: 82px;
  height: 26px;
}

.claim-footer__menu {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  align-self: center;
  gap: 16px;
  width: 100%;
}

.claim-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claim-footer__title {
  margin: 0;
  padding: 0;
  font: var(--claim-typography-body-medium);
  color: var(--claim-color-text);
}

.claim-footer__link {
  width: 228px;
  font: var(--claim-typography-body);
  color: var(--claim-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.claim-footer__link:hover {
  color: var(--claim-color-text);
  text-decoration: none;
}

/* Mobile footer (the app swaps to this compact strip <=768px) */
.claim-footer-mobile {
  display: none;
}

@media (max-width: 768px) {
  .claim-footer {
    display: none;
  }

  .claim-footer-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    padding: 0 24px 28px;
    background: var(--claim-color-bg);
  }

  .claim-footer-mobile a {
    font: var(--claim-typography-label);
    color: var(--claim-color-text-secondary);
    text-decoration: none;
    cursor: pointer;
  }

  .claim-footer-mobile a:hover {
    color: var(--claim-color-text);
  }
}

/* ---- content ---- */
main { min-height: 40vh; }
.page-hero { padding: 56px 0 24px; }
.page-hero h1 { font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.01em; }
.page-hero p { color: var(--ink-2); font-size: 18px; margin: 0; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; padding: 24px 0 40px; }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
/* Stretched link: the title anchor's overlay makes the whole card clickable. */
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover { border-color: var(--blue-light); background: var(--surface-2); box-shadow: 0 4px 18px rgba(16,24,40,.06); }
.card:hover .card__thumb { background: #e7ebf3; }
.card__thumb { aspect-ratio: 16/9; background: var(--surface-2); display: block; }
.card__body { padding: 20px; }
.card__body h3 { font-weight: 700; font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.card__body h3 a { color: var(--ink); }
.card__meta { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
.card__excerpt { color: var(--ink-2); font-size: 15px; margin: 0; }

/* =========================================================
   Single post — authoritative article layout
   Reusable buttons + measure token declared first.
   ========================================================= */
:root { --post-measure: 720px; }

.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: var(--radius-pill); transition: background-color .15s ease; }
.btn:hover { background: var(--blue-hover); text-decoration: none; }

article.post-single { max-width: var(--post-measure); margin: 0 auto; padding: 0 0 8px; }

/* --- post header (generous offset below the fixed blue bar) --- */
.post-head { padding: clamp(40px, 6vw, 68px) 0 0; }
/* Generic pages (page.php, e.g. /disclaimer/) have no .post-head, so the
   article itself carries the same top rhythm below the header. Selector
   must out-rank article.post-single's padding reset. */
article.post-single.page-single { padding: clamp(40px, 6vw, 68px) 0 96px; }

.post-cat-pill { display: inline-flex; align-items: center; background: rgba(0,81,255,.10); color: var(--blue); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill); margin: 0 0 16px; }

article.post-single h1 { font-weight: 800; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 24px; }

/* --- byline --- */
.post-byline { display: flex; align-items: center; gap: 14px; padding: 20px 0 28px; border-bottom: 1px solid var(--line); }
.byline-avatar-link { display: inline-flex; flex: none; border-radius: 50%; }
.byline-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,42,95,.10); }
img.byline-avatar { display: block; object-fit: cover; object-position: center; background: var(--surface-2); }
.byline-avatar--initials { background: var(--blue); color: #fff; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.byline-avatar-link:hover .byline-avatar { box-shadow: 0 0 0 2px var(--blue); }
.post-byline__meta { min-width: 0; }
.post-byline__name { margin: 0; font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.post-byline__author { color: var(--ink); }
.post-byline__author:hover { color: var(--blue); text-decoration: none; }
.post-byline__role { color: var(--ink-2); font-weight: 500; }
.post-byline__role::before { content: "· "; color: var(--ink-3); }
.post-byline__dates { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
.post-byline__dot { margin: 0 6px; color: #cfd5e2; }
.post-byline__updated { color: var(--ink-2); font-weight: 600; }
/* Verified author seal — keep the name + badge on one line, optically centered on the text */
.post-byline__author { white-space: nowrap; }
.byline-verified { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -0.16em; flex: none; }
.author-bio__name .byline-verified { width: 18px; height: 18px; margin-left: 5px; vertical-align: -0.15em; }

/* --- hero image --- */
.post-hero-img { margin: 32px 0 8px; }
.post-hero-img img { width: 100%; border-radius: var(--radius-card); display: block; }

/* --- table of contents (long posts) --- */
.post-toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; margin: 32px 0; }
.post-toc__title { margin: 0 0 12px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.post-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.post-toc li { counter-increment: toc; margin: 0 0 9px; padding-left: 26px; position: relative; font-size: 15.5px; line-height: 1.4; }
.post-toc li:last-child { margin-bottom: 0; }
.post-toc li::before { content: counter(toc); position: absolute; left: 0; top: 0; font-weight: 800; font-size: 12.5px; color: var(--blue); background: rgba(0,81,255,.10); width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.post-toc a { color: var(--ink); text-decoration: none; }
.post-toc a:hover { color: var(--blue); text-decoration: underline; }

/* --- content typography --- */
.post-single .content { font-size: 18px; line-height: 1.75; color: var(--ink); margin-top: 32px; }
.post-single .content > *:first-child { margin-top: 0; }
.post-single .content p { margin: 0 0 1.35em; }
.post-single .content h2 { font-weight: 800; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin: 44px 0 14px; scroll-margin-top: 96px; }
.post-single .content h3 { font-weight: 700; font-size: 22px; line-height: 1.25; margin: 32px 0 10px; scroll-margin-top: 96px; }
.post-single .content h4 { font-weight: 700; font-size: 18px; margin: 26px 0 8px; }
.post-single .content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.post-single .content a:hover { text-decoration-thickness: 2px; }
.post-single .content ul, .post-single .content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.post-single .content li { margin: 0 0 .5em; padding-left: 4px; }
.post-single .content li::marker { color: var(--blue); font-weight: 700; }
.post-single .content img { border-radius: 12px; }
.post-single .content figure { margin: 28px 0; }
.post-single .content figcaption { font-size: 14px; color: var(--ink-3); text-align: center; margin-top: 10px; }
.post-single .content hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
.post-single .content blockquote { margin: 28px 0; padding: 20px 24px; background: var(--surface-2); border-radius: var(--radius-card); font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.post-single .content blockquote p:last-child { margin-bottom: 0; }
.post-single .content blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.post-single .content code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: .9em; }
.post-single .content pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px 20px; overflow-x: auto; }
.post-single .content pre code { background: none; border: 0; padding: 0; }
.post-single .content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.post-single .content th { text-align: left; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); background: var(--surface-2); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.post-single .content td { padding: 12px 16px; border-bottom: 1px solid var(--border-2, var(--line)); }
.post-single .content tr:last-child td { border-bottom: 0; }
.post-single .content tr:nth-child(even) td { background: #fafbfd; }

/* --- reusable sources / citations list (author-applied class) --- */
.post-single .content .post-sources { list-style: none; counter-reset: src; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.post-single .content .post-sources li { counter-increment: src; position: relative; margin: 0; padding: 14px 18px 14px 46px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; font-size: 15px; }
.post-single .content .post-sources li::before { content: counter(src); position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.post-single .content .post-sources li::marker { content: none; }

/* --- disclosure box (reusable component) --- */
.post-disclosure { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 22px; margin: 40px 0; }
.post-disclosure__icon { flex: none; margin-top: 2px; }
.post-disclosure__body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.post-disclosure__body strong { color: var(--ink); }
.post-disclosure__date { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

/* --- author bio --- */
.author-bio { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; margin: 32px 0 8px; }
.author-bio .byline-avatar { margin-top: 2px; }
.author-bio__body { min-width: 0; }
.author-bio__name { margin: 0; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.author-bio__name a { color: var(--ink); }
.author-bio__name a:hover { color: var(--blue); text-decoration: none; }
.author-bio__role { margin: 2px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.author-bio__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.author-bio__link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--blue); }
.author-bio__link:hover { text-decoration: none; }

/* --- author profile --- */
.author-profile { max-width: 980px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) 0 88px; }
.author-profile__hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.author-profile__photo-wrap { position: relative; }
.author-profile__photo-wrap::after { content: ""; position: absolute; z-index: -1; inset: 14px -14px -14px 14px; border-radius: 32px; background: rgba(0,81,255,.10); }
.author-profile__photo { display: block; width: 220px; height: 220px; border-radius: 32px; object-fit: cover; box-shadow: 0 14px 35px rgba(15,42,95,.14); }
.author-profile__eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.author-profile__intro h1 { display: flex; align-items: center; margin: 0; font-size: clamp(38px, 6vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
.author-profile__intro h1 .byline-verified { width: 23px; height: 23px; margin-left: 9px; }
.author-profile__title { margin: 12px 0 18px; color: var(--blue-dark); font-size: 17px; font-weight: 700; }
.author-profile__lede { max-width: 650px; margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.7; }
.author-profile__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.author-profile__links a { display: inline-flex; padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.author-profile__links a:hover { border-color: var(--blue-light); color: var(--blue); text-decoration: none; }
.author-profile__section { padding-top: 56px; }
.author-profile__section-head { max-width: 680px; margin-bottom: 26px; }
.author-profile__section h2, .author-profile__standards h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -.025em; }
.author-profile__credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.author-credential { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.author-credential__label { margin: 0 0 14px; color: var(--blue); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.author-credential h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.author-credential p:not(.author-credential__label) { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.author-credential a { margin-top: auto; font-size: 13px; font-weight: 700; }
.author-credential a:hover { text-decoration: none; }
.author-profile__standards { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; margin-top: 56px; padding: 36px; border-radius: 24px; background: var(--blue-dark); color: #fff; }
.author-profile__standards .author-profile__eyebrow { color: #9eb7ff; }
.author-profile__standards ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.author-profile__standards li { color: #c8d2eb; font-size: 15px; line-height: 1.6; }
.author-profile__standards strong { color: #fff; }
.author-profile__articles { padding-top: 64px; }
.author-article-list { border-top: 1px solid var(--line); }
.author-article { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; gap: 20px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.author-article:hover { color: var(--blue); text-decoration: none; }
.author-article__date { color: var(--ink-3); font-size: 13px; }
.author-article__title { font-weight: 700; line-height: 1.35; }
.author-article__arrow { color: var(--blue); font-size: 20px; text-align: right; }

/* --- related posts --- */
.post-related { max-width: var(--post-measure); margin: 56px auto 0; }
.post-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.post-related__head h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.post-related__all { font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.post-related__all:hover { text-decoration: none; }
.post-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.rel-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.rel-card:hover { border-color: var(--blue-light); background: var(--surface-2); box-shadow: 0 4px 18px rgba(16,24,40,.06); text-decoration: none; }
.rel-card__tag { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
.rel-card__title { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 10px 0 6px; }
.rel-card__excerpt { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* --- app CTA band --- */
.post-cta { max-width: var(--post-measure); margin: 40px auto 64px; }
.post-cta__inner { display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; align-items: center; background: var(--blue); border-radius: var(--radius-card); padding: 40px 40px; }
.post-cta__copy h2 { font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; }
.post-cta__copy p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #b9c6e8; }
.post-cta__acts { display: flex; flex-direction: column; gap: 11px; }
.btn--on-navy { background: #fff; color: var(--blue-dark); }
.btn--on-navy:hover { background: #eef2ff; }
.btn--ghost-navy { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.34); }
.btn--ghost-navy:hover { background: transparent; border-color: #fff; }

/* ---- responsive: single breakpoint at 768px, matching claimmoney.com ---- */
@media (max-width: 768px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  body { font-size: 17px; }

  /* single post */
  .post-head { padding-top: 32px; }
  article.post-single.page-single { padding: 32px 0 48px; }
  .post-single .content { font-size: 17px; }
  .post-cta__inner { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .post-related__grid { grid-template-columns: 1fr; }
  .author-bio { flex-direction: row; padding: 20px; }
  .post-byline { flex-wrap: wrap; }

  /* author profile */
  .author-profile { padding: 40px 0 56px; }
  .author-profile__hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; }
  .author-profile__photo, .author-profile__photo-wrap { width: 160px; height: 160px; }
  .author-profile__photo { border-radius: 24px; }
  .author-profile__credentials { grid-template-columns: 1fr; }
  .author-profile__standards { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding: 28px 24px; }
  .author-profile__section { padding-top: 44px; }
  .author-article { grid-template-columns: 1fr 24px; gap: 12px; }
  .author-article__date { grid-column: 1; }
  .author-article__title { grid-column: 1; }
  .author-article__arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* =========================================================
   Settlement pages — single-settlement.php + archive-settlement.php
   Redesign 0.5.1: archive is claimmoney.com's settlements list (their
   SettlementCardLarge anatomy — radius-32 brand tile, weight-600 payout, their
   sentence-case #15BA00 "No proof" badge, calm humanized deadline meta), but
   each row is wrapped as a crisp bordered card (1px hairline, card radius,
   comfortable padding, gentle bg/border/shadow hover) rather than borderless,
   matching the blog card language. A left category rail (their
   DesktopSettlementTypes) filters the list and sticks on desktop. Detail page
   kept structurally (no kicker above the H1, all-caps merged status pill, three
   stat cards, one bordered facts card, "Get started" CTA, footnote
   sources/disclosure) and retuned to their tokens. No left-border accents;
   hover shifts bg/border/shadow/color only (never transform).
   Token values from reference/claim-settlement-styles/SPEC.md.
   ========================================================= */
:root {
  --st-green: #15ba00; --st-green-soft: rgba(21,186,0,.10); --st-green-ink: #0f8f00;
  --st-amber: #d6a13a; --st-amber-soft: rgba(214,161,58,.12); --st-amber-ink: #9a6f17;
  --st-red: #dc2626; --st-red-soft: rgba(220,38,38,.10); --st-red-ink: #b91c1c;
  --st-border: #e6e9ef;    /* hairline for the facts table + pagination, aligned to their #F0F2F6 border language */
  --st-radius-tile: 32px;  /* their card/hero image radius */
  --st-radius-tile-sm: 16px; /* their mobile hero + mini/compact tile radius */
}

article.settlement-single { max-width: var(--post-measure); margin: 0 auto; padding: 0 0 8px; }

/* --- status pill (color-coded, all-caps, merged with the deadline) --- */
.st-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--radius-pill); padding: 7px 13px; white-space: nowrap; }
.st-pill .st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st-pill--open { background: var(--st-green-soft); color: var(--st-green-ink); }
.st-pill--open .st-dot { background: var(--st-green); }
.st-pill--closing { background: var(--st-amber-soft); color: var(--st-amber-ink); }
.st-pill--closing .st-dot { background: var(--st-amber); }
.st-pill--upcoming { background: rgba(0,81,255,.10); color: var(--blue); }
.st-pill--upcoming .st-dot { background: var(--blue); }
.st-pill--closed { background: var(--st-red-soft); color: var(--st-red-ink); }
.st-pill--closed .st-dot { background: var(--st-red); }
.st-pill--unknown { background: var(--surface-2); color: var(--ink-2); }
.st-pill--unknown .st-dot { background: var(--ink-3); }

/* --- header --- */
.settlement-head { padding: clamp(40px, 6vw, 68px) 0 0; }
/* Single row: the last crumb takes the leftover width and ellipsizes rather than
   wrapping the trail onto a second line on narrow screens. */
.st-crumbs { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 18px; }
.st-crumbs a { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-crumbs a:hover { color: var(--ink-2); text-decoration: none; }
.st-crumbs__sep { margin: 0 8px; color: #cfd5e2; flex: none; }
.st-crumbs__current { flex: 1 1 auto; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
article.settlement-single h1 { font-weight: 800; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; }
.st-answer { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 620px; }

/* Row 1 is the tile beside the kicker + H1 only. Everything after it spans both
   columns so it starts at the container's left edge, under the tile. The tile
   centers against the kicker + H1 block so multi-line titles don't leave it
   floating high with dead space beneath. */
.st-single-hero { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: start; }
.st-single-hero > .st-tile { align-self: center; }
.st-single-hero__body { min-width: 0; }
.st-single-hero__body h1 { margin-bottom: 0; }
.st-single-hero__brand { margin: 0 0 8px; font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--ink); }
.st-single-hero > .st-answer,
.st-single-hero > .st-matter-notice,
.st-single-hero__meta,
.st-single-hero__actions { grid-column: 1 / -1; }
.st-single-hero > .st-answer { margin: 22px 0 0; }

/* Disclosure for matters that are NOT class action settlements (attorney
   intake, live litigation). Deliberately above the fold and visually distinct
   from body copy: it corrects the section the page sits in, so a reader who
   only sees the hero still learns there is no settlement here. */
.st-single-hero > .st-matter-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  max-width: 620px;
  border: 1px solid #F0D9A8;
  border-left: 3px solid #D99B1C;
  border-radius: 8px;
  background: #FDF8EE;
  color: #6B4E12;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}
.st-single-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.st-single-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.st-single-hero__meta .st-meta__star { color: #ffc400; }
.st-single-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }

/* Share control: same pill geometry as the primary CTA, outlined so it reads as
   secondary beside it. Confirmation swaps the label in place (no toast). */
.st-share { background: #fff; color: var(--ink); border: 1px solid var(--line); gap: 8px; }
.st-share:hover { border-color: var(--ink-3); color: var(--blue); }
.st-share.is-copied { border-color: var(--blue); color: var(--blue); background: rgba(0, 81, 255, 0.06); }
.st-share__icon { flex: none; }
.st-share__label { white-space: nowrap; }

/* --- stat cards (exactly three: money, claim deadline, proof) ---
   Their settlement UI floats on the #F0F2F6 surface with no card borders, so
   these read as filled surface tiles rather than white bordered boxes. Figures
   are weight 700 (never their 900, which is reserved for the italic stat band). */
.st-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 0; }
.st-metric { background: var(--surface-2); border: 0; border-radius: var(--radius-card); padding: 20px 20px 18px; }
.st-metric__v { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.st-metric__v--brand { color: var(--blue); }
.st-metric__v--green { color: var(--st-green); }
.st-metric__v--red { color: var(--st-red-ink); }
.st-metric--passed { background: var(--st-red-soft); }

/* inline red chip for passed deadlines in the key-facts table */
.st-flag { display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; border-radius: var(--radius-pill); padding: 5px 10px; margin-left: 6px; vertical-align: middle; }
.st-flag--passed { background: var(--st-red-soft); color: var(--st-red-ink); }
.st-metric__l { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); margin-top: 8px; }

/* --- section scaffolding (one heading per section, no kicker) --- */
.st-section { margin: 44px 0 0; }
.st-h2 { font-weight: 700; font-size: clamp(22px, 3vw, 26px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }

/* --- key facts (one bordered card, consistent with the stat cards) --- */
.st-facts { border: 1px solid var(--st-border); border-radius: var(--radius-card); overflow: hidden; }
.st-facts__row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--st-border); }
.st-facts__row:last-child { border-bottom: 0; }
.st-facts__row:nth-child(even) { background: #fafbfd; }
.st-facts__k { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.st-facts__v { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* --- editor body (mirrors the single-post reading styles) --- */
.settlement-single .content { font-size: 18px; line-height: 1.75; color: var(--ink); }
.settlement-single .content > *:first-child { margin-top: 0; }
.settlement-single .content p { margin: 0 0 1.35em; }
.settlement-single .content h2 { font-weight: 700; font-size: clamp(21px, 3vw, 25px); line-height: 1.2; letter-spacing: -0.02em; margin: 38px 0 12px; }
/* Narrative Q&A sub-heads ("What Happened?") stay understated, matching their
   body-bold 16/600 rather than shouting a second heading tier. */
.settlement-single .content h3 { font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; margin: 30px 0 8px; }
.settlement-single .content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.settlement-single .content a:hover { text-decoration-thickness: 2px; }
.settlement-single .content ul, .settlement-single .content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.settlement-single .content li { margin: 0 0 .5em; padding-left: 4px; }
.settlement-single .content li::marker { color: var(--blue); font-weight: 700; }
.settlement-single .content blockquote { margin: 28px 0; padding: 20px 24px; background: var(--surface-2); border-radius: var(--radius-card); font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.settlement-single .content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.settlement-single .content th { text-align: left; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); background: var(--surface-2); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.settlement-single .content td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.settlement-single .content tr:last-child td { border-bottom: 0; }
/* FAQ via the Details block (also powers FAQPage schema) */
.settlement-single .content details { border-bottom: 1px solid var(--line); }
.settlement-single .content details summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 2px; font-weight: 700; font-size: 16.5px; position: relative; color: var(--ink); }
.settlement-single .content details summary::-webkit-details-marker { display: none; }
.settlement-single .content details summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 24px; font-weight: 400; color: var(--blue); transition: transform .2s ease; }
.settlement-single .content details[open] summary::after { transform: rotate(45deg); }
.settlement-single .content details > *:not(summary) { margin: 0 40px 18px 2px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* --- eligibility --- */
.st-eligibility__text { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin: 14px 0 0; }
.st-eligibility__text p { margin: 0 0 1em; }
.st-eligibility__text p:last-child { margin-bottom: 0; }
.st-eligibility__text ul { margin: 0 0 1.35em; padding-left: 1.4em; }
.st-eligibility__text ul:last-child { margin-bottom: 0; }
.st-eligibility__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* --- Get started CTA (primary action = sign up for Claim) --- */
.st-cta { margin: 44px 0 0; padding: 34px 32px; background: var(--surface-2); border-radius: var(--radius-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.st-cta__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 520px; }
.st-cta .claim-btn { text-decoration: none; }

/* --- footnotes (sources + last reviewed + minimal disclosure) --- */
.st-footnotes { margin: 44px 0 0; padding: 20px 0 0; border-top: 1px solid var(--st-border); }
.st-footnotes__sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; }
.st-footnotes__label { font-weight: 700; color: var(--ink-2); }
.st-footnotes__sources a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.st-footnotes__sources a:hover { color: var(--blue); }
.st-footnotes__sep { color: var(--ink-3); }
.st-footnotes__meta { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* --- detail two-column shell + right promo rail (v0.5.2) ---
   The content column keeps its exact ~720px measure; a sticky ~320px rail sits
   beside it inside the 1200px wrap and carries Claim's own house banners (never
   third-party ads). Desktop: two columns, rail sticky and clear of the (non-fixed)
   header. <=1024px: rail drops below the content as a side-by-side band. <=768px:
   everything stacks. No left-border accents; hover shifts color/bg only. */
.settlement-layout { display: flex; align-items: flex-start; justify-content: center; gap: 40px; }
.settlement-layout .settlement-single { flex: 0 1 var(--post-measure); max-width: var(--post-measure); min-width: 0; margin: 0; }
/* margin-top aligns banner 1 with the content's status-pill line instead of
   hugging the header; sticky offset keeps it comfortable while scrolling. */
.settlement-rail { flex: none; width: 320px; position: sticky; top: 24px; margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }

/* shared banner shell */
.st-banner { border-radius: 24px; }

/* Banner 1 — tall brand-blue promo, CTA pinned to the bottom like an ad unit */
.st-banner--primary { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 380px; padding: 40px 28px; background: var(--blue); color: #fff; }
.st-banner__logo { position: relative; z-index: 1; display: block; width: 104px; height: auto; margin: 0 0 6px; }
.st-banner__title { position: relative; z-index: 1; margin: 0; font-weight: 800; font-size: 25px; line-height: 1.16; letter-spacing: -0.02em; color: #fff; }
.st-banner__sub { position: relative; z-index: 1; margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); }
.st-banner__btn { position: relative; z-index: 1; width: 100%; margin-top: auto; }

/* Banner 2 — lighter surface card that internally links into the taxonomy */
.st-banner--browse { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border-radius: var(--radius-card); background: var(--surface-2); }
.st-banner__title2 { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.st-banner__lead { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.st-banner__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-banner__links li { margin: 0; }
.st-banner__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: color .15s ease, box-shadow .15s ease; }
.st-banner__links a:hover { color: var(--blue); text-decoration: none; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.st-banner__links a::after { content: "\2192"; flex: none; color: var(--ink-3); font-weight: 400; transition: color .15s ease; }
.st-banner__links a:hover::after { color: var(--blue); }
.st-banner__all { align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--blue); }
.st-banner__all:hover { text-decoration: none; }

/* rail drops below the content as a side-by-side band on narrower desktops */
@media (max-width: 1024px) {
  .settlement-layout { flex-direction: column; align-items: stretch; gap: 44px; }
  .settlement-layout .settlement-single { flex: none; width: 100%; max-width: var(--post-measure); margin: 0 auto; }
  .settlement-rail { position: static; top: auto; width: 100%; max-width: var(--post-measure); margin: 0 auto; flex-direction: row; align-items: stretch; gap: 20px; }
  .settlement-rail > .st-banner { flex: 1 1 0; min-width: 0; }
  .st-banner--primary { min-height: 0; padding: 32px 26px; }
  .st-hub__head { flex-direction: column; align-items: stretch; }
  .st-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-hub__trust { grid-template-columns: 1fr; }
}

/* --- shared brand tile (logo-led anchor for every row + card) ---
   The data carries no logo asset, so a deterministic hashed monogram stands in
   for their full-bleed brand image. Square, their radius-32 (row) / radius-16
   (compact) with the 2px #00000013 hairline overlay ring. */
.st-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--tile-bg, var(--blue)); color: #fff; font-weight: 800; line-height: 1; box-shadow: inset 0 0 0 2px #00000013; overflow: hidden; }
.st-tile--row { width: 128px; height: 128px; border-radius: var(--st-radius-tile); font-size: 52px; }
.st-tile--card { width: 64px; height: 64px; border-radius: var(--st-radius-tile-sm); font-size: 28px; }
.st-tile--archive { width: 96px; height: 96px; border-radius: 24px; font-size: 42px; }
.st-tile--detail { width: 112px; height: 112px; border-radius: 28px; font-size: 50px; }
.st-tile--image { object-fit: cover; object-position: center; display: block; }

/* --- "No proof" badge (their sentence-case #15BA00 pill, ~16px radius) --- */
.st-noproof { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; background: var(--st-green-soft); color: var(--st-green); border-radius: 16px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.st-noproof__seal { flex: none; }
.st-card .st-noproof { font-size: 12px; padding: 3px 8px 3px 6px; }

/* --- settlements hub shell (archive) --- */
.st-hub { padding-bottom: 96px; }
.st-hub__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: clamp(28px, 5vw, 52px) 0 0; }
.st-hub__copy { min-width: 0; }
.st-hub__head h1 { font-weight: 800; font-size: clamp(32px, 4.5vw, 50px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
.st-hub__intro { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 720px; }
.st-hub__stats { flex: none; }
.st-hub__stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 128px; min-height: 92px; padding: 14px 18px; border-radius: var(--radius-card); background: var(--surface-2); text-align: center; }
.st-hub__stats strong { font-weight: 900; font-size: 30px; line-height: 1; color: var(--blue); }
.st-hub__stats span { margin-top: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.st-hub__body { display: flex; align-items: flex-start; gap: 32px; margin: 34px 0 0; }
.st-hub__list { flex: 1 1 auto; min-width: 0; }
.st-hub__list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.st-hub__list-head h2 { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--ink); }
.st-hub__list-head p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.st-hub__empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 44px 24px; color: var(--ink-2); text-align: center; background: var(--surface-2); border-radius: var(--radius-card); }
.st-hub__empty p { margin: 0; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.st-search { max-width: 920px; margin: 36px auto 0; }
.st-search__box { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px 0 18px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-3); }
.st-search__box input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: var(--claim-typography-body); }
.st-search__box input::placeholder { color: var(--ink-3); opacity: 1; }
.st-search__box button { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.st-search__box button:hover { background: var(--blue-hover); }
/* sort is the only dropdown; status and proof are the chips below */

.st-quicklinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.st-quicklinks a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 15px; border-radius: var(--radius-pill); background: rgba(0,81,255,.08); color: var(--blue); font-size: 13.5px; font-weight: 700; }
.st-quicklinks a:hover { background: var(--blue); color: #fff; text-decoration: none; }
.st-quicklinks .st-quicklinks__clear { background: #fff; color: var(--ink-2); border: 1px solid var(--st-border); }
.st-quicklinks .st-quicklinks__clear:hover { color: var(--blue); border-color: var(--blue-light); }
/* an active chip is the applied filter, and clicking it clears that filter */
.st-quicklinks .st-quicklinks__item--active { background: var(--blue); color: #fff; }
.st-quicklinks .st-quicklinks__item--active:hover { background: var(--blue-hover); color: #fff; }

/* left category rail (their DesktopSettlementTypes) — renders only when the
   settlement_category taxonomy actually has terms; otherwise the list is full
   width. Sticks alongside the list on desktop. */
.st-hub__rail { flex: none; width: 244px; display: flex; flex-direction: column; gap: 12px; padding-top: 2px; position: sticky; top: 24px; }
.st-rail__item { font-size: 14px; font-weight: 400; color: var(--ink); transition: color .3s ease-in-out; }
.st-rail__item:hover { color: var(--blue); text-decoration: none; }
.st-rail__item--active { color: var(--blue); font-weight: 500; cursor: default; }

/* --- settlement list cards (their SettlementCardLarge, wrapped as a card) --- */
.st-list { display: flex; flex-direction: column; gap: 16px; }
.st-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-row { position: relative; display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: #fff; border: 1px solid var(--st-border); border-radius: var(--radius-card); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.st-row:hover { border-color: var(--blue-light); background: var(--surface-2); box-shadow: 0 4px 18px rgba(16,24,40,.06); }
.st-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.st-row__lead { display: flex; flex-direction: column; gap: 8px; }
.st-row__title { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Stretched link makes the whole row navigate to the detail page (the SEO link);
   the CTA sits above it (z-index) and routes to onboarding (conversion). */
.st-row__link { color: inherit; text-decoration: none; }
.st-row__link:hover { text-decoration: none; }
.st-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-row__amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 32px; line-height: 1; color: var(--ink); }
.st-row__desc { margin: 0; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-row__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.st-row__cta { position: relative; z-index: 2; width: 200px; }
.st-row__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.st-meta__clock { flex: none; }
/* the card handles the hover (border/bg/shadow); the title also shifts to blue */
.st-row:hover .st-row__title { color: var(--blue); }

/* --- three-up archive cards --- */
/* min-height is a floor for short cards only; the grid equalizes each row, so it
   must not exceed the natural content height or the card renders half empty */
.st-archive-card { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 20px; border: 1px solid var(--st-border); border-radius: 24px; background: #fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.st-archive-card:hover { border-color: var(--blue-light); background: #fbfcff; box-shadow: 0 8px 26px rgba(16,24,40,.08); }
.st-archive-card__link { position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.st-archive-card__link:hover { text-decoration: none; }
.st-archive-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.st-archive-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.st-archive-card__body { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; }
.st-archive-card__title { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.22; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-archive-card__payout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0 0; font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--ink); }
.st-archive-card__facts { display: grid; gap: 8px; margin: auto 0 0; padding: 18px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.st-archive-card__facts span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.st-archive-card__facts .st-meta__clock { color: var(--ink-3); }
.st-archive-card__facts .st-meta__star { color: #ffc400; }
.st-archive-card:hover .st-archive-card__title { color: var(--blue); }
.st-archive-card:hover .st-tile { opacity: .9; }

.st-hub__trust { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; margin: 56px 0 0; padding: 32px; border-radius: 24px; background: var(--surface-2); }
.st-hub__trust h2 { margin: 0 0 10px; font-weight: 800; font-size: 24px; line-height: 1.15; color: var(--ink); }
.st-hub__trust p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.st-hub__trust ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-hub__trust li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.st-hub__trust li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* --- compact settlement cards (detail-page related section) --- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 8px 0 0; }
.st-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--st-border); border-radius: var(--radius-card); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.st-card:hover { border-color: var(--blue-light); background: var(--surface-2); box-shadow: 0 4px 18px rgba(16,24,40,.06); }
.st-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.st-card__title { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-card__link { color: inherit; text-decoration: none; }
.st-card__link:hover { text-decoration: none; }
.st-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-card:hover .st-tile { opacity: .88; }
.st-card:hover .st-card__title { color: var(--blue); }

/* --- pagination (shared with the blog index) --- */
.navigation.pagination { margin: 40px 0 8px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--st-border); border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.navigation.pagination a.page-numbers:hover { border-color: var(--blue-light); background: var(--surface-2); text-decoration: none; }
.navigation.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.st-hub ul.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 40px 0 8px; padding: 0; list-style: none; }
.st-hub ul.page-numbers li { margin: 0; padding: 0; }
.st-hub ul.page-numbers .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--st-border); border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.st-hub ul.page-numbers a.page-numbers:hover { border-color: var(--blue-light); background: var(--surface-2); text-decoration: none; }
.st-hub ul.page-numbers .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.st-hub ul.page-numbers .page-numbers.dots { border-color: transparent; background: transparent; }

.settlement-single,
.settlement-single *,
.st-hub,
.st-hub * {
  letter-spacing: 0;
}

/* --- responsive (their 768px breakpoint) --- */
@media (max-width: 768px) {
  .settlement-head { padding-top: 32px; }
  .st-single-hero { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; }
  .st-tile--detail { width: 72px; height: 72px; border-radius: 18px; font-size: 32px; }
  .st-single-hero__brand { margin-bottom: 5px; font-size: 14px; }
  .st-single-hero > .st-answer { margin-top: 18px; }
  .st-single-hero > .st-matter-notice { margin-top: 14px; font-size: 14px; }
  .st-single-hero__actions { margin-top: 18px; gap: 10px; }
  .st-single-hero__btn,
  .st-share { flex: 1 1 100%; }
  .st-metrics { grid-template-columns: 1fr; }
  .settlement-single .content { font-size: 17px; }
  .st-facts__row { grid-template-columns: 1fr; gap: 3px; }
  .st-cta { padding: 26px 20px; }

  /* right rail: banners stack single-column below the content. Reset the
     band's flex:1 1 0 so each banner sizes to its content on the column's
     height axis (a 0 basis would otherwise collapse it to just its padding). */
  .settlement-rail { flex-direction: column; gap: 16px; }
  .settlement-rail > .st-banner { flex: none; }
  .st-banner--primary { min-height: 0; padding: 32px 24px; }

  /* hub: category rail (when present) collapses to a wrapped chip row above the
     list, and the bottom gap tightens to the page rhythm */
  .st-hub { padding-bottom: 48px; }
  .st-hub__head { padding-top: 32px; gap: 24px; }
  .st-hub__stats div { min-height: 74px; padding: 10px 14px; }
  .st-hub__stats strong { font-size: 24px; }
  .st-hub__stats span { font-size: 10.5px; }
  .st-search { margin-top: 28px; }
  .st-search__box { height: auto; min-height: 56px; gap: 8px; padding: 0 7px 0 14px; }
  .st-search__box svg { flex: 0 0 18px; width: 18px; height: 18px; }
  .st-search__box input { font-size: 15px; }
  .st-search__box button { height: 40px; padding: 0 13px; font-size: 13px; }
  .st-hub__body { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 28px; }
  .st-hub__rail { position: static; top: auto; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 10px 16px; padding-top: 0; }

  /* cards reflow to an app-style block: small tile + text side by side, CTA below */
  .st-list { gap: 14px; }
  .st-row { display: grid; grid-template-columns: 72px 1fr; grid-template-areas: "media main" "side side"; align-items: start; gap: 14px 16px; padding: 16px; }
  .st-tile--row { grid-area: media; width: 72px; height: 72px; border-radius: var(--st-radius-tile-sm); font-size: 30px; }
  .st-row__main { grid-area: main; }
  .st-row__title { font-size: 17px; }
  .st-row__amount { font-size: 26px; }
  .st-row__side { grid-area: side; flex-direction: row; align-items: center; gap: 12px; }
  .st-row__cta { flex: 1 1 auto; width: auto; }
  .st-row__meta { margin-left: auto; }

  .st-list--grid { grid-template-columns: 1fr; gap: 14px; }
  .st-archive-card { min-height: 0; border-radius: var(--radius-card); padding: 16px; }
  .st-archive-card__link { border-radius: var(--radius-card); }
  .st-tile--archive { width: 72px; height: 72px; border-radius: var(--st-radius-tile-sm); font-size: 30px; }
  .st-archive-card__meta { align-items: flex-end; }
  .st-archive-card__title { font-size: 18px; }
  .st-archive-card__payout { font-size: 26px; }
  .st-hub__list-head { margin-bottom: 14px; }
  .st-hub__trust { margin-top: 36px; padding: 24px 20px; border-radius: var(--radius-card); }

  /* related compact cards go two-up */
  .st-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 420px) {
  .st-search__box { min-height: 54px; padding-left: 12px; }
  .st-search__box input,
  .st-search__box input::placeholder { font-size: 14px; }
  .st-search__box button { height: 38px; padding: 0 12px; }
}

/* =========================================================
   Glossary — single-glossary.php + archive-glossary.php
   Definition pages + an A-Z index, in the theme's design
   language: shared tokens, bordered cards, stretched links,
   the footnote disclosure block. No left-border accents.
   ========================================================= */

/* --- single term --- */
article.gl-single { max-width: var(--post-measure); margin: 0 auto; padding: 0 0 8px; }
.gl-head { padding: clamp(40px, 6vw, 68px) 0 0; }
.gl-head .st-crumbs { margin-bottom: 18px; }
article.gl-single h1 { font-weight: 800; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; }
.gl-lead { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--ink); margin: 0; max-width: 640px; }

/* extended explanation (mirrors the settlement/article reading styles) */
.gl-single .content { font-size: 18px; line-height: 1.75; color: var(--ink); margin-top: 28px; }
.gl-single .content > *:first-child { margin-top: 0; }
.gl-single .content p { margin: 0 0 1.35em; }
.gl-single .content h2 { font-weight: 800; font-size: clamp(23px, 3vw, 28px); line-height: 1.2; letter-spacing: -0.02em; margin: 40px 0 14px; }
.gl-single .content h3 { font-weight: 700; font-size: 22px; line-height: 1.25; margin: 30px 0 10px; }
.gl-single .content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.gl-single .content a:hover { text-decoration-thickness: 2px; }
.gl-single .content ul, .gl-single .content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.gl-single .content li { margin: 0 0 .5em; padding-left: 4px; }
.gl-single .content li::marker { color: var(--blue); font-weight: 700; }
.gl-single .content blockquote { margin: 28px 0; padding: 20px 24px; background: var(--surface-2); border-radius: var(--radius-card); font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.gl-single .content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.gl-single .content th { text-align: left; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); background: var(--surface-2); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gl-single .content td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gl-single .content tr:last-child td { border-bottom: 0; }

/* soft CTA toward the settlements hub */
.gl-cta { margin: 40px 0 0; padding: 30px 32px; background: var(--surface-2); border-radius: var(--radius-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gl-cta__text { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); max-width: 500px; }
.gl-cta .claim-btn { text-decoration: none; }

/* related terms */
.gl-related { margin: 52px 0 0; }
.gl-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.gl-related__head h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.gl-related__all { font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.gl-related__all:hover { text-decoration: none; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gl-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--st-border); border-radius: var(--radius-card); padding: 20px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.gl-card:hover { border-color: var(--blue-light); background: var(--surface-2); box-shadow: 0 4px 18px rgba(16,24,40,.06); }
.gl-card__title { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
.gl-card__link { color: inherit; text-decoration: none; }
.gl-card__link:hover { text-decoration: none; }
.gl-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gl-card__def { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* footnote block reuses .st-footnotes; extra separation when it stands alone */
.gl-footnotes { margin-top: 48px; }

/* --- A-Z archive --- */
.gl-atoz { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 16px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.gl-atoz__l { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: var(--radius-pill); font-weight: 800; font-size: 15px; color: var(--blue); background: rgba(0,81,255,.08); }
.gl-atoz__l:hover { background: var(--blue); color: #fff; text-decoration: none; }
.gl-atoz__l--off { color: var(--ink-3); background: transparent; }

.gl-index { padding: 8px 0 16px; }
.gl-letter { margin: 0; padding: 26px 0 0; }
.gl-letter__h { font-weight: 900; font-size: 26px; color: var(--blue); margin: 0 0 8px; padding: 0 0 8px; border-bottom: 2px solid var(--line); scroll-margin-top: 96px; }
.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-row { position: relative; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--radius-card); transition: border-color .15s ease, background-color .15s ease; }
.gl-row:hover { border-color: var(--blue-light); background: var(--surface-2); }
.gl-row__link { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.gl-row__link:hover { text-decoration: none; }
.gl-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gl-row__def { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 768px) {
  .gl-single .content { font-size: 17px; }
  .gl-lead { font-size: 19px; }
  .gl-cta { padding: 24px 20px; }
  .gl-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Settlement deadline calendar — inc/deadline-calendar.php
   A month grid + agenda of settlement claim deadlines. Reuses the status-pill,
   monogram, and no-proof helpers/classes; tones map to the same green/amber/
   blue/grey status language used across the settlement surfaces. Grid is
   desktop-only (<=768px swaps to the always-present agenda list).
   ========================================================================== */

.cal-page__head { padding: clamp(28px, 5vw, 56px) 0 0; }
.cal-page__head h1 { font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; }
.cal-page__intro { max-width: 720px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.cal-page__intro p { margin: 0 0 12px; }

.cal { margin: 28px 0 0; }

/* --- top bar: month title + prev/today/next --- */
.cal-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 16px; }
.cal-bar__title { font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.cal-bar__sub { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.cal-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.cal-nav__btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border: 1px solid var(--st-border); border-radius: var(--radius-pill); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.cal-nav__btn:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
.cal-nav__btn--icon { width: 42px; padding: 0; font-size: 17px; }
.cal-nav__btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* --- legend --- */
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* --- month grid (desktop) --- */
.cal-grid-wrap { border: 1px solid var(--st-border); border-radius: var(--radius-card); overflow: hidden; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { background: #fff; padding: 12px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--st-border); }
.cal-grid th abbr { text-decoration: none; border: 0; cursor: default; }
.cal-cell { width: 14.285%; height: 120px; vertical-align: top; padding: 8px 8px 6px; border-left: 1px solid var(--st-border); border-top: 1px solid var(--st-border); }
.cal-grid tbody tr:first-child .cal-cell { border-top: 0; }
.cal-grid td:first-child { border-left: 0; }
.cal-cell--blank { background: repeating-linear-gradient(-45deg, #fafbfc, #fafbfc 6px, #f4f6f9 6px, #f4f6f9 12px); }
.cal-cell--past { background: #fbfcfd; }
.cal-cell--today { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cal-cell--has .cal-daynum { color: var(--ink); }
.cal-cell--past .cal-daynum { color: var(--ink-3); }
.cal-cell--today .cal-daynum { background: var(--blue); color: #fff; border-radius: 50%; }

.cal-evs { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.cal-ev { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; }
.cal-ev:hover { text-decoration: none; background: #e6ebf4; }
.cal-ev__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cal-ev__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev--open .cal-ev__dot { background: var(--st-green); }
.cal-ev--closing .cal-ev__dot { background: var(--st-amber); }
.cal-ev--upcoming .cal-ev__dot { background: var(--blue); }
.cal-ev--closed { opacity: .55; }
.cal-ev--closed .cal-ev__dot { background: var(--ink-3); }
.cal-more { display: inline-block; margin-top: 2px; padding: 2px 4px; font-size: 11.5px; font-weight: 700; color: var(--blue); }
.cal-more:hover { text-decoration: none; }

/* --- agenda (always present; the sole view <=768px) --- */
.cal-agenda { margin: 34px 0 0; }
.cal-agenda__h { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 4px; }
.cal-ag__day { margin: 22px 0 0; }
.cal-ag__date { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 0 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .01em; color: var(--ink); border-bottom: 1px solid var(--st-border); scroll-margin-top: 90px; }
.cal-ag__here { padding: 2px 9px; background: rgba(0,81,255,.10); color: var(--blue); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cal-ag__count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cal-ag__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-ag__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--st-border); border-radius: var(--radius-card); transition: border-color .15s ease, background-color .15s ease; }
.cal-ag__item:hover { border-color: var(--blue-light); background: var(--surface-2); }
.cal-ag__body { flex: 1; min-width: 0; }
.cal-ag__title { display: block; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.cal-ag__title:hover { color: var(--blue); text-decoration: none; }
.cal-ag__sub { display: flex; align-items: center; gap: 8px; margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cal-ag__pill { flex: none; }
.st-tile--mini { width: 42px; height: 42px; border-radius: 11px; font-size: 19px; }

.cal-empty { padding: 40px 24px; text-align: center; background: var(--surface-2); border-radius: var(--radius-card); color: var(--ink-2); font-size: 15.5px; }
.cal-empty p { margin: 0; }

/* --- standing compliance note --- */
.cal-note { margin: 26px 0 0; padding: 16px 20px; background: var(--surface-2); border-radius: var(--radius-card); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.cal-note strong { color: var(--ink); font-weight: 700; }

@media (max-width: 768px) {
  .cal-grid-wrap { display: none; }
  .cal-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .cal-nav { justify-content: space-between; }
  .cal-nav__btn { flex: 1; }
  .cal-nav__btn--icon { flex: none; }
  .cal-ag__item { flex-wrap: wrap; }
  .cal-ag__pill { order: 3; flex: 0 0 100%; margin: 4px 0 0 56px; }
}