/* ============================================================
   Dog Age Chart — Plugin Stylesheet
   All rules scoped under .dach-widget so this never leaks into
   (or conflicts with) the active theme or other plugins.
   ============================================================ */
.dach-widget{
  --dach-bg:#F6F7F2; --dach-card:#FFFFFF;
  --dach-primary:#2D5D4F; --dach-primary-dark:#1E4238; --dach-primary-light:#E7EFEA;
  --dach-accent:#E8A33D;
  --dach-ink:#1F2A24; --dach-ink-soft:#52604F; --dach-line:#DDE3DA;
  --dach-font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dach-r-lg:20px; --dach-r-md:14px; --dach-r-sm:10px;
  --dach-shadow-soft:0 4px 16px rgba(31,42,36,.06),0 1px 3px rgba(31,42,36,.08);
  --dach-shadow-lift:0 12px 32px rgba(31,42,36,.12),0 2px 6px rgba(31,42,36,.08);
  --dach-t:180ms cubic-bezier(.4,0,.2,1);
  --dach-c-small:#E8A33D; --dach-c-medium:#2D5D4F; --dach-c-large:#3E7CB1; --dach-c-giant:#A0473D;
  --dach-stage-puppy:#FFF3DC; --dach-stage-young:#E7F3EA; --dach-stage-adult:#E7EFEA; --dach-stage-mature:#FCEFD9; --dach-stage-senior:#FBE3D3; --dach-stage-geriatric:#F6D7D4;

  font-family:var(--dach-font); color:var(--dach-ink); line-height:1.5;
  max-width:960px; margin:0 auto; -webkit-font-smoothing:antialiased;
}
.dach-widget, .dach-widget *, .dach-widget *::before, .dach-widget *::after{ box-sizing:border-box; }
.dach-widget img, .dach-widget svg{ display:block; }
.dach-widget button{ font-family:inherit; }
.dach-widget :focus-visible{ outline:3px solid var(--dach-accent); outline-offset:2px; border-radius:6px; }
.dach-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.dach-skip-link{ position:absolute; left:-999px; background:#fff; color:var(--dach-primary-dark); padding:12px 18px; border-radius:8px; font-weight:700; z-index:100; }
.dach-skip-link:focus{ left:14px; top:14px; }

.dach-hero{ background:linear-gradient(135deg,var(--dach-primary-dark),var(--dach-primary) 130%); color:#fff; border-radius:var(--dach-r-lg); padding:26px 24px; margin-bottom:-34px; position:relative; z-index:1; }
.dach-hero h2{ font-size:clamp(22px,5vw,28px); line-height:1.2; margin:0 0 8px; font-weight:800; letter-spacing:-.01em; }
.dach-hero p{ margin:0; font-size:14.5px; color:rgba(255,255,255,.88); max-width:58ch; }

.dach-card{ background:var(--dach-card); border-radius:var(--dach-r-lg); box-shadow:var(--dach-shadow-lift); padding:24px; margin-bottom:20px; position:relative; z-index:2; }
@media (min-width:600px){ .dach-card{ padding:32px; } }
.dach-widget h3.dach-section-title{ font-size:20px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.dach-section-sub{ color:var(--dach-ink-soft); font-size:14px; margin:0 0 18px; }

.dach-chart-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.dach-legend-toggle{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--dach-line); background:#fff; padding:8px 13px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity var(--dach-t), border-color var(--dach-t); }
.dach-legend-toggle .dach-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.dach-legend-toggle.off{ opacity:.4; }
.dach-chart-frame{ width:100%; overflow-x:auto; }
.dach-chart-frame svg{ width:100%; height:auto; min-width:520px; }

.dach-jump-box{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:6px; }
.dach-jump-field{ flex:1; min-width:160px; }
.dach-jump-field label{ display:block; font-weight:700; font-size:13px; margin-bottom:6px; }
.dach-widget .dach-jump-field input{ width:100%; padding:11px 13px; font-size:15px; border-radius:var(--dach-r-sm); border:1.5px solid var(--dach-line); background:#fff; color:var(--dach-ink); }
.dach-widget .dach-jump-field input:focus{ border-color:var(--dach-primary); box-shadow:0 0 0 4px rgba(45,93,79,.12); outline:none; }
.dach-jump-btn{ background:var(--dach-primary); color:#fff; border:none; padding:11px 18px; border-radius:var(--dach-r-sm); font-weight:700; font-size:14px; cursor:pointer; transition:background var(--dach-t); }
.dach-jump-btn:hover{ background:var(--dach-primary-dark); }

.dach-table-scroll{ overflow-x:auto; border-radius:var(--dach-r-md); border:1px solid var(--dach-line); }
table.dach-age-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
table.dach-age-table thead th{ background:var(--dach-primary-dark); color:#fff; padding:12px 10px; text-align:center; font-weight:700; position:sticky; top:0; }
table.dach-age-table thead th:first-child{ text-align:left; }
table.dach-age-table tbody td{ padding:10px; text-align:center; border-bottom:1px solid var(--dach-line); }
table.dach-age-table tbody td:first-child{ text-align:left; font-weight:800; color:var(--dach-primary-dark); background:var(--dach-primary-light); position:sticky; left:0; }
table.dach-age-table tbody tr:last-child td{ border-bottom:none; }
table.dach-age-table tbody tr.dach-highlight td{ outline:2.5px solid var(--dach-accent); outline-offset:-2px; }
.dach-stage-chip{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; margin-top:3px; }

.dach-stage-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.dach-stage-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--dach-ink-soft); }
.dach-stage-legend .dach-sw{ width:12px; height:12px; border-radius:3px; }

table.dach-breed-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.dach-breed-table thead th{ background:var(--dach-primary-dark); color:#fff; padding:11px 10px; text-align:left; font-weight:700; }
table.dach-breed-table tbody td{ padding:10px; border-bottom:1px solid var(--dach-line); }
table.dach-breed-table tbody tr:last-child td{ border-bottom:none; }
table.dach-breed-table tbody tr:nth-child(even){ background:#FBFCFA; }
.dach-size-tag{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#fff; }

.dach-callout{ background:var(--dach-primary-light); border-radius:var(--dach-r-sm); padding:14px 16px; font-size:13.5px; color:var(--dach-ink-soft); margin-top:14px; display:flex; gap:8px; align-items:flex-start; }
.dach-callout svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--dach-primary); }

.dach-action-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.dach-btn-ghost{ display:inline-flex; align-items:center; gap:7px; background:var(--dach-primary-light); color:var(--dach-primary-dark); font-size:13px; font-weight:700; padding:10px 14px; border-radius:var(--dach-r-sm); border:none; cursor:pointer; transition:background var(--dach-t); }
.dach-btn-ghost:hover{ background:#dcebe4; }
.dach-btn-ghost svg{ width:15px; height:15px; }

.dach-faq-item{ border-bottom:1px solid var(--dach-line); }
.dach-faq-item:first-child{ border-top:1px solid var(--dach-line); }
.dach-faq-q{ width:100%; text-align:left; background:none; border:none; padding:15px 4px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14.5px; font-weight:700; color:var(--dach-ink); cursor:pointer; }
.dach-faq-q svg{ width:17px; height:17px; flex-shrink:0; transition:transform var(--dach-t); color:var(--dach-primary); }
.dach-faq-q[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dach-faq-a{ overflow:hidden; max-height:0; transition:max-height 260ms ease; }
.dach-faq-a p{ margin:0 4px 15px; color:var(--dach-ink-soft); font-size:14px; }

@media print{
  .dach-jump-box, .dach-action-row, .dach-skip-link{ display:none !important; }
  .dach-card{ box-shadow:none; }
}