/*
 * Pet Lifetime Cost — shared sketchbook design system
 * Loaded after all legacy typography/readability layers and before page-specific
 * late overrides. This keeps every template in one coherent visual language.
 */

body.site-sketchbook {
  --sk-ink: #202322;
  --sk-copy: #59605d;
  --sk-muted: #747a76;
  --sk-green: #0e7758;
  --sk-green-dark: #07543f;
  --sk-green-soft: #eaf5ef;
  --sk-yellow: #f8b927;
  --sk-yellow-soft: #fff4c8;
  --sk-coral: #f17868;
  --sk-coral-soft: #ffe7e1;
  --sk-paper: #f4f3f1;
  --sk-cream: #fffdf8;
  --sk-rule: #dddcd7;
  --sk-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sk-sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;

  --read-bg: var(--sk-paper);
  --read-surface: var(--sk-cream);
  --read-soft: var(--sk-green-soft);
  --read-ink: var(--sk-ink);
  --read-copy: var(--sk-copy);
  --read-muted: var(--sk-muted);
  --read-border: var(--sk-rule);
  --read-hero: var(--sk-green);
  --read-hero-2: var(--sk-green-dark);
  --read-accent: var(--sk-coral);

  --pcc-navy: var(--sk-ink) !important;
  --pcc-navy-mid: #353a37 !important;
  --pcc-blue: var(--sk-green) !important;
  --pcc-blue-mid: var(--sk-green-dark) !important;
  --pcc-blue-pale: var(--sk-green-soft) !important;
  --pcc-slate: var(--sk-copy) !important;
  --pcc-slate-mid: var(--sk-muted) !important;
  --pcc-off-white: var(--sk-paper) !important;
  --pcc-surface: var(--sk-cream) !important;
  --pcc-border: var(--sk-rule) !important;
  --pcc-font-display: var(--sk-serif) !important;
  --pcc-font-body: var(--sk-sans) !important;
  --pcc-font-ui: var(--sk-sans) !important;

  background:
    radial-gradient(circle at 30px 30px, rgba(255,255,255,.9) 0 4px, transparent 4.5px) 0 0 / 170px 170px,
    var(--sk-paper) !important;
  color: var(--sk-ink) !important;
}

body.site-sketchbook,
body.site-sketchbook * { font-family: var(--sk-sans) !important; }

body.site-sketchbook h1,
body.site-sketchbook h2,
body.site-sketchbook .pcc-section-title,
body.site-sketchbook .guide-section__h2,
body.site-sketchbook .guide-hero__h1,
body.site-sketchbook .state-hero h1,
body.site-sketchbook .v3-title,
body.site-sketchbook .sp-title,
body.site-sketchbook .pcc-post-single__title,
body.site-sketchbook .journal-title {
  font-family: var(--sk-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.042em !important;
}

body.site-sketchbook a { color: var(--sk-green); }
body.site-sketchbook :focus-visible { outline-color: rgba(14,119,88,.55) !important; }

/* Shared header */
body.site-sketchbook .plc-header {
  border-bottom: 1px solid rgba(32,35,34,.08) !important;
  background: rgba(255,253,248,.94) !important;
  box-shadow: 0 7px 25px rgba(27,32,29,.045) !important;
  backdrop-filter: blur(16px);
}
body.site-sketchbook .plc-header__inner { max-width: 1260px; height: 70px; padding-inline: 26px; }
body.site-sketchbook .plc-brand { color: var(--sk-ink); }
body.site-sketchbook .plc-brand__icon { border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(14,119,88,.1); }
body.site-sketchbook .plc-brand__sub { color: var(--sk-muted); }
body.site-sketchbook .plc-nav a { color: #626864; border-radius: 999px; }
body.site-sketchbook .plc-nav a:hover,
body.site-sketchbook .plc-nav a.active { background: #f0eee8; color: var(--sk-green-dark); }
body.site-sketchbook .plc-nav__cta {
  margin-left: 10px;
  border: 1px solid var(--sk-green) !important;
  border-radius: 999px !important;
  background: var(--sk-green) !important;
  color: #fff !important;
}
body.site-sketchbook .plc-nav__cta:hover { background: var(--sk-green-dark) !important; }
body.site-sketchbook .plc-hamburger { border-color: var(--sk-rule); background: #fff; }
body.site-sketchbook .plc-hamburger span { background: var(--sk-ink); }
body.site-sketchbook .plc-mobile-nav { background: var(--sk-paper); }
body.site-sketchbook .plc-mobile-nav a { border-color: var(--sk-rule); background: var(--sk-cream); color: var(--sk-ink); }
body.site-sketchbook .plc-mobile-nav a:hover,
body.site-sketchbook .plc-mobile-nav a.active { border-color: #a9d1c0; background: var(--sk-green-soft); color: var(--sk-green-dark); }

/* Breadcrumbs */
body.site-sketchbook :is(.pcc-breadcrumb, .plc-breadcrumb) {
  border-color: var(--sk-rule) !important;
  background: rgba(255,253,248,.78) !important;
}
body.site-sketchbook :is(.pcc-breadcrumb__inner, .plc-breadcrumb__inner) { max-width: 1180px; }
body.site-sketchbook :is(.pcc-breadcrumb, .plc-breadcrumb) :is(a, span) { color: var(--sk-muted) !important; }
body.site-sketchbook :is(.pcc-breadcrumb, .plc-breadcrumb) a:hover { color: var(--sk-green) !important; }

/* Shared non-homepage heroes */
body.site-sketchbook:not(.home-sketchbook) :is(
  .pcc-page-hero,
  .sp-hero,
  .guide-hero,
  .state-hero,
  .bcg-hero,
  .cost-hero,
  .journal-hero
) {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--sk-rule) !important;
  background:
    radial-gradient(circle at 86% 24%, var(--sk-yellow) 0 7px, transparent 8px),
    radial-gradient(circle at 91% 38%, var(--sk-coral) 0 5px, transparent 6px),
    linear-gradient(135deg, var(--sk-cream), #f0efec) !important;
  color: var(--sk-ink) !important;
}
body.site-sketchbook:not(.home-sketchbook) :is(
  .pcc-page-hero,
  .sp-hero,
  .guide-hero,
  .state-hero,
  .bcg-hero,
  .cost-hero,
  .journal-hero
)::after {
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  border: 2px solid rgba(14,119,88,.13);
  border-radius: 48% 52% 58% 42%;
  content: '';
  transform: rotate(-12deg);
  pointer-events: none;
}
body.site-sketchbook:not(.home-sketchbook) :is(
  .pcc-page-hero,
  .sp-hero,
  .guide-hero,
  .state-hero,
  .bcg-hero,
  .cost-hero,
  .journal-hero
) :is(h1, h2, .sp-title, .guide-hero__h1) { color: var(--sk-ink) !important; }
body.site-sketchbook:not(.home-sketchbook) :is(
  .pcc-page-hero,
  .sp-hero,
  .guide-hero,
  .state-hero,
  .bcg-hero,
  .cost-hero,
  .journal-hero
) :is(p, .sp-desc, .guide-hero__lead) { color: var(--sk-copy) !important; }
body.site-sketchbook :is(.pcc-page-hero__badge, .sp-cat, .guide-hero__kicker, .state-badge) {
  border-color: #b8d9cb !important;
  background: var(--sk-green-soft) !important;
  color: var(--sk-green-dark) !important;
}
body.site-sketchbook .pcc-page-hero__serif { color: var(--sk-coral) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .guide-hero__stats { border-color: var(--sk-rule) !important; background: rgba(255,255,255,.64) !important; }
body.site-sketchbook .guide-stat__val { color: var(--sk-green-dark) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .guide-stat__lbl { color: var(--sk-muted) !important; }

/* Core surfaces and content rhythm */
body.site-sketchbook :is(.pcc-content-wrap, .guide-wrap, .state-wrap, .ins-wrap, .pcc-post-single) { position: relative; }
body.site-sketchbook :is(
  .pcc-card,
  .pcc-value-card,
  .guide-card,
  .state-card,
  .driver-card,
  .example-card,
  .fact-box,
  .related-card,
  .ins-card,
  .ins-how__card,
  .qbcard,
  .qstep,
  .journal-card,
  .snapshot-card,
  .info-card,
  .tier-card,
  .sidebar-card,
  .tool-card
) {
  border-color: var(--sk-rule) !important;
  border-radius: 20px !important;
  background: rgba(255,253,248,.94) !important;
  color: var(--sk-ink) !important;
  box-shadow: 0 14px 36px rgba(32,35,34,.055) !important;
}
body.site-sketchbook :is(.guide-card, .pcc-value-card, .related-card, .ins-how__card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.site-sketchbook :is(.guide-card, .pcc-value-card, .related-card, .ins-how__card):hover {
  transform: translateY(-3px);
  border-color: #c6d8cf !important;
  box-shadow: 0 18px 42px rgba(32,35,34,.09) !important;
}
body.site-sketchbook :is(.pcc-kicker, .guide-section__eyebrow, .state-card__eyebrow, .ins-step-label) {
  color: var(--sk-green) !important;
  letter-spacing: .12em !important;
}
body.site-sketchbook :is(.pcc-section-title, .guide-section__h2, .ins-card__title) { color: var(--sk-ink) !important; }
body.site-sketchbook :is(.pcc-lead, .pcc-value-desc, .guide-section__sub, .state-card p, .driver-card p, .ins-card p) { color: var(--sk-copy) !important; }
body.site-sketchbook .guide-card__icon {
  border-radius: 50% !important;
  background: var(--sk-yellow-soft) !important;
  color: #9c6700 !important;
}
body.site-sketchbook .guide-card__name { color: var(--sk-ink) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .guide-card__val { color: var(--sk-green-dark) !important; }
body.site-sketchbook .guide-card__cta { color: var(--sk-green) !important; }

/* Quick answers and highlighted notes */
body.site-sketchbook :is(
  .pcc-surface-note--info,
  .state-quick-answer,
  .quick-card,
  .pcc-post-answer,
  .comparison-note,
  .reserve-box
) {
  border-color: #ead9a2 !important;
  border-left: 5px solid var(--sk-yellow) !important;
  background: var(--sk-yellow-soft) !important;
  color: var(--sk-ink) !important;
}
body.site-sketchbook :is(.pcc-surface-note--mission, .mission-box) {
  border-color: #efc4ba !important;
  background: var(--sk-coral-soft) !important;
}
body.site-sketchbook :is(.pcc-surface-note--dark, .takeaway-box, .final-box, .sidebar-card.blue) {
  border-color: var(--sk-green) !important;
  background: var(--sk-green) !important;
  color: #fff !important;
}
body.site-sketchbook :is(.pcc-surface-note--dark, .takeaway-box, .final-box, .sidebar-card.blue) :is(h2, h3, p, li, strong, span) { color: #fff !important; }

/* Buttons and form controls */
body.site-sketchbook :is(
  .pcc-btn,
  .guide-cta__btn--primary,
  .state-hero__cta,
  .shc-btn,
  .ins-cta__btn--primary,
  .qbtn-next,
  .qres-cta,
  button[type="submit"]
) {
  border-color: var(--sk-yellow) !important;
  border-radius: 12px !important;
  background: var(--sk-yellow) !important;
  color: var(--sk-ink) !important;
  box-shadow: none !important;
}
body.site-sketchbook :is(
  .guide-cta__btn--secondary,
  .ins-cta__btn--secondary,
  .qbtn-back,
  .qretake
) {
  border-color: #b8d9cb !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--sk-green-dark) !important;
}
body.site-sketchbook :is(input, select, textarea) {
  border-color: #d5d6d1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--sk-ink) !important;
}
body.site-sketchbook :is(input, select, textarea):focus { border-color: var(--sk-green) !important; box-shadow: 0 0 0 3px rgba(14,119,88,.12) !important; }
body.site-sketchbook input[type="range"] { accent-color: var(--sk-green); }
body.site-sketchbook :is(.ins-pet-btn.active, .qopt.active, .qchip.active) { border-color: var(--sk-green) !important; background: var(--sk-green-soft) !important; color: var(--sk-green-dark) !important; }

/* Tables */
body.site-sketchbook :is(.pcc-table-wrap, .table-wrap, .state-table-wrap) {
  border-color: var(--sk-rule) !important;
  border-radius: 16px !important;
  background: var(--sk-cream) !important;
}
body.site-sketchbook table { background: var(--sk-cream) !important; color: var(--sk-ink) !important; }
body.site-sketchbook table thead,
body.site-sketchbook table th { background: var(--sk-green) !important; color: #fff !important; }
body.site-sketchbook table td { border-color: #e3e2dd !important; color: var(--sk-copy) !important; }
body.site-sketchbook table tbody tr:nth-child(even) { background: #faf8f1 !important; }

/* State guides */
body.site-sketchbook .state-hero__numbers { border-color: var(--sk-rule) !important; background: rgba(255,255,255,.72) !important; }
body.site-sketchbook .shn__val { color: var(--sk-green-dark) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .shn__lbl { color: var(--sk-muted) !important; }
body.site-sketchbook .state-main h2,
body.site-sketchbook .state-main h3 { color: var(--sk-ink) !important; }
body.site-sketchbook .state-main :is(p, li) { color: var(--sk-copy) !important; }
body.site-sketchbook .difference-badge { background: var(--sk-coral-soft) !important; color: #a54438 !important; }
body.site-sketchbook .tip-row { border-color: var(--sk-rule) !important; }

/* Blog index and article template */
body.site-sketchbook .pcc-post-single {
  max-width: 900px;
  padding-top: 54px;
  padding-bottom: 72px;
}
body.site-sketchbook .pcc-post-single__cat,
body.site-sketchbook .journal-card-meta { color: var(--sk-green) !important; }
body.site-sketchbook .pcc-post-single__title { max-width: 850px; color: var(--sk-ink) !important; font-size: clamp(44px, 6vw, 72px) !important; line-height: .98 !important; }
body.site-sketchbook .pcc-post-single__excerpt,
body.site-sketchbook .pcc-post-single__meta { color: var(--sk-copy) !important; }
body.site-sketchbook .pcc-post-single__hero {
  border: 1px solid var(--sk-rule);
  border-radius: 24px !important;
  background: var(--sk-cream) !important;
  box-shadow: 0 18px 45px rgba(32,35,34,.07);
}
body.site-sketchbook .pcc-post-body :is(h2, h3) { color: var(--sk-ink) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .pcc-post-body :is(p, li, blockquote) { color: var(--sk-copy) !important; }
body.site-sketchbook :is(.pcc-post-toc, .pcc-post-faq) { border-color: var(--sk-rule) !important; border-radius: 20px !important; background: var(--sk-cream) !important; }
body.site-sketchbook .pcc-post-insights p { border-color: var(--sk-rule) !important; border-radius: 16px !important; background: var(--sk-coral-soft) !important; color: var(--sk-copy) !important; }
body.site-sketchbook .pcc-post-faq details { border-color: var(--sk-rule) !important; }
body.site-sketchbook .pcc-post-faq summary { color: var(--sk-ink) !important; }
body.site-sketchbook .pcc-post-cta {
  border-radius: 22px !important;
  background: var(--sk-green) !important;
}
body.site-sketchbook .pcc-post-cta :is(h2, p, a) { color: #fff !important; }
body.site-sketchbook .pcc-post-tools a,
body.site-sketchbook .pcc-post-related article { border-color: var(--sk-rule) !important; border-radius: 16px !important; background: var(--sk-cream) !important; }
body.site-sketchbook .pcc-post-related small { color: var(--sk-coral) !important; }
body.site-sketchbook .journal-calculator { background: var(--sk-green) !important; }
body.site-sketchbook .journal-calculator :is(h2, p, span) { color: #fff !important; }

/* Breed detail template */
body.site-sketchbook #pcc-breed-v3 {
  --v3-navy: var(--sk-green);
  --v3-navy-light: #188463;
  --v3-navy-mid: var(--sk-green-dark);
  --v3-accent: var(--sk-coral);
  --v3-accent-2: var(--sk-yellow);
  --v3-text: var(--sk-ink);
  --v3-text-mid: var(--sk-copy);
  --v3-text-soft: var(--sk-muted);
  --v3-bg: var(--sk-paper);
  --v3-card: var(--sk-cream);
  --v3-border: var(--sk-rule);
}
body.site-sketchbook #pcc-breed-v3 :is(.v3-card, .v3-stat, .v3-panel) { border-radius: 20px !important; }
body.site-sketchbook #pcc-breed-v3 .v3-title { color: var(--sk-ink) !important; }
body.site-sketchbook #pcc-breed-v3 .v3-hero { background: linear-gradient(135deg, var(--sk-cream), #f0efec) !important; }

/* Current breed cost guide template */
body.site-sketchbook .breed-page {
  --breed-ink: var(--sk-ink);
  --breed-text: var(--sk-copy);
  --breed-muted: var(--sk-muted);
  --breed-blue: var(--sk-green);
  --breed-blue-dark: var(--sk-green-dark);
  --breed-blue-soft: var(--sk-green-soft);
  --breed-line: var(--sk-rule);
  --breed-warm: var(--sk-yellow);
  --breed-surface: var(--sk-cream);
  background: transparent !important;
}
body.site-sketchbook .breed-hero {
  border-bottom: 1px solid var(--sk-rule);
  background: var(--sk-cream) !important;
  color: var(--sk-ink) !important;
}
body.site-sketchbook .breed-hero__content {
  background:
    radial-gradient(circle at 88% 18%, var(--sk-yellow) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 28%, var(--sk-coral) 0 5px, transparent 6px),
    linear-gradient(135deg, var(--sk-cream), #f1f0ed) !important;
}
body.site-sketchbook .breed-hero__eyebrow {
  color: var(--sk-green) !important;
  letter-spacing: .14em !important;
}
body.site-sketchbook .breed-hero h1 {
  color: var(--sk-ink) !important;
  font-family: var(--sk-serif) !important;
  font-weight: 600 !important;
}
body.site-sketchbook .breed-hero .review-date { color: var(--sk-muted) !important; }
body.site-sketchbook .breed-hero .hero-stats div {
  border-color: var(--sk-rule) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
}
body.site-sketchbook .breed-hero .hero-stats dt { color: var(--sk-muted) !important; }
body.site-sketchbook .breed-hero .hero-stats dd {
  color: var(--sk-green-dark) !important;
  font-family: var(--sk-serif) !important;
  font-weight: 600 !important;
}
body.site-sketchbook .breed-hero__media { background: var(--sk-green-soft) !important; }
body.site-sketchbook .breed-page .section-nav {
  border-color: var(--sk-rule) !important;
  background: rgba(255,253,248,.96) !important;
}
body.site-sketchbook .breed-page .section-nav a { color: var(--sk-green-dark) !important; }
body.site-sketchbook .breed-page .section-nav a:hover { background: var(--sk-green-soft) !important; }
body.site-sketchbook .breed-page :is(.breed-section, .answer-card, .method-card, .next-steps, .sidebar-cta, .sidebar-links) {
  border-color: var(--sk-rule) !important;
  border-radius: 20px !important;
  background: var(--sk-cream) !important;
  box-shadow: 0 14px 36px rgba(32,35,34,.055) !important;
}
body.site-sketchbook .breed-page .answer-card {
  border-left: 5px solid var(--sk-yellow) !important;
  background: var(--sk-yellow-soft) !important;
}
body.site-sketchbook .breed-page :is(h2, h3) { color: var(--sk-ink) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .breed-page :is(p, li, dd) { color: var(--sk-copy) !important; }
body.site-sketchbook .breed-page .eyebrow { color: var(--sk-green) !important; }
body.site-sketchbook .breed-page .sidebar-cta { background: var(--sk-green) !important; }
body.site-sketchbook .breed-page .sidebar-cta :is(h2, h3, p, span, a) { color: #fff !important; }

/* Tool pages */
body.site-sketchbook :is(.ins-layout, .pcc-quiz-page) { color: var(--sk-ink); }
body.site-sketchbook .ins-num-block.highlight { border-color: #efd383 !important; background: var(--sk-yellow-soft) !important; }
body.site-sketchbook .ins-num-block__val { color: var(--sk-green-dark) !important; font-family: var(--sk-serif) !important; }
body.site-sketchbook .ins-verdict,
body.site-sketchbook .qres-hero { background: var(--sk-green) !important; color: #fff !important; }
body.site-sketchbook :is(.ins-verdict, .qres-hero) :is(h2, h3, p, span, strong) { color: #fff !important; }
body.site-sketchbook .ins-verdict :is(.ins-verdict__title, .ins-verdict__sub) { color: #fff !important; }
body.site-sketchbook .qprog-fill { background: var(--sk-coral) !important; }
body.site-sketchbook .qscore-badge { background: var(--sk-yellow) !important; color: var(--sk-ink) !important; }

/* Shared CTA bands */
body.site-sketchbook :is(.guide-cta, .bcg-cta, .ins-cta-card) {
  border-radius: 24px !important;
  background: var(--sk-green) !important;
  color: #fff !important;
}
body.site-sketchbook :is(.guide-cta, .bcg-cta, .ins-cta-card) :is(h2, p, span) { color: #fff !important; }

/* Footer */
body.site-sketchbook .plc-footer {
  border-top: 0 !important;
  background: var(--sk-green-dark) !important;
  color: rgba(255,253,248,.78) !important;
}
body.site-sketchbook .plc-footer__brand-name,
body.site-sketchbook .plc-footer__col h4 { color: #fffdf8 !important; }
body.site-sketchbook .plc-footer__desc,
body.site-sketchbook .plc-footer__col a,
body.site-sketchbook .plc-footer__bottom,
body.site-sketchbook .plc-footer__legal a { color: rgba(255,253,248,.68) !important; }
body.site-sketchbook .plc-footer__col a:hover { color: var(--sk-yellow) !important; }
body.site-sketchbook .plc-footer__badge {
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--sk-yellow) !important;
}
body.site-sketchbook .plc-footer__bottom { border-top-color: rgba(255,255,255,.12) !important; }

/* Legal/plain content pages */
body.site-sketchbook :is(.pcc-legal, .pcc-policy, .legal-wrap) {
  margin-block: 48px 72px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--sk-rule);
  border-radius: 24px;
  background: var(--sk-cream);
}

@media (max-width: 860px) {
  body.site-sketchbook .plc-header__inner { height: 60px; padding-inline: 16px; }
  body.site-sketchbook .plc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-sketchbook .plc-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body.site-sketchbook:not(.home-sketchbook) :is(.pcc-page-hero, .sp-hero, .guide-hero, .state-hero, .bcg-hero, .cost-hero, .journal-hero)::after { opacity: .45; }
  body.site-sketchbook .pcc-post-single { padding: 34px 16px 56px; }
  body.site-sketchbook .pcc-post-single__title { font-size: clamp(38px, 12vw, 54px) !important; }
  body.site-sketchbook .plc-footer__grid { grid-template-columns: 1fr; }
  body.site-sketchbook .plc-footer__brand { grid-column: auto; }
  body.site-sketchbook :is(.pcc-card, .guide-card, .state-card, .ins-card) { border-radius: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.site-sketchbook :is(.guide-card, .pcc-value-card, .related-card, .ins-how__card) { transition: none; }
}