/* ==========================================================================
   site.css - 4canine.com's own styles. Loads after app.css and
   sitekit.css (sk_css_once), so it only adds and adjusts.

   1. Profiles (insurers, states): stat tiles, fact sheets, lists, sources
   2. Tools: widget forms, results, charts, checklists, print
   3. Homepage additions: start-here tiles, finder, guide tabs, state grid
   4. Dark mode for everything above AND for the kit's own blocks, which
      sitekit.css paints light only. Keyed on html[data-fs-theme="dark"], the
      engine's switch (app.css section 14), reading its --fs-* tokens.
   ========================================================================== */

:root{
  --ck-ink:#1f2937; --ck-ink-2:#4b5563; --ck-ink-3:#6b7280;
  --ck-surface:#ffffff; --ck-surface-2:#f7f9fc; --ck-surface-3:#eef3f9;
  --ck-line:#e7eaf0; --ck-line-2:#d6dde8;
  --ck-link:#0a6f66; --ck-accent:var(--accent,#1abc9c);
  --ck-good:#0f7b4f; --ck-good-bg:#ecf8f2;
  --ck-warn:#9a5b00; --ck-warn-bg:#fff6e6;
  --ck-info:#0a5f58; --ck-info-bg:#e6f4f2;
  --ck-s1:#2563eb; --ck-s2:#e07a1f;
}

/* ---------------------------------------------------------- 1. profiles -- */
.sk-profile-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.sk-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:4px 2px 16px; }
.sk-tile{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:var(--radius,10px); box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); min-width:0; }
.sk-tile-label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ck-ink-3); }
.sk-tile-value{ font-size:18px; font-weight:700; color:var(--ck-ink); line-height:1.3; overflow-wrap:anywhere; }
.sk-tile-value a{ color:var(--ck-link); text-decoration:none; }
.sk-tiles-compact .sk-tile-value{ font-size:15.5px; }

.sk-factsheet{ margin-bottom:6px; }
.sk-fact-groups{ columns:2 330px; column-gap:18px; }
.sk-fact-group{ break-inside:avoid; margin-bottom:14px; display:inline-block; width:100%; }
.sk-fact-group .ss-block-title{ margin-bottom:6px; }
.sk-fact-group .sk-facts tbody th{ width:44%; white-space:normal; }
.sk-fact-group .sk-facts td{ overflow-wrap:anywhere; }
.sk-list-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:0 18px; }
.sk-list-grid .sk-cols{ columns:2 180px; }

.sk-sources ol{ margin:0; padding:12px 18px 12px 36px; background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:var(--radius,10px); font-size:13px; line-height:1.6; columns:2 360px; column-gap:28px; }
.sk-sources li{ break-inside:avoid; overflow-wrap:anywhere; }
.sk-sources a{ color:var(--ck-link); }

.sk-filter{ max-width:460px; margin:4px 2px 12px; }
.sk-cat-chips{ margin-top:10px; }
.sk-count{ display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:10px; background:var(--ck-surface-3); font-size:11.5px; font-weight:700; color:var(--ck-ink-2); text-align:center; }
.sk-ranked td:first-child, .sk-ranked th:first-child{ width:48px; text-align:right; color:var(--ck-ink-3); font-variant-numeric:tabular-nums; }
.sk-ranked tbody th{ min-width:220px; }
.sk-ranked td{ white-space:nowrap; }

.sk-picker{ display:flex; gap:8px; flex-wrap:wrap; max-width:520px; }
.sk-picker .form-select{ flex:1 1 220px; min-width:0; }
.sk-profile-card .sk-tiles{ margin:10px 0 6px; }

/* ------------------------------------------------------------- 2. tools -- */
.sk-calc{ margin:0 2px 10px; padding:18px 20px; background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:var(--radius,10px); box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); color:var(--ck-ink); }
.sk-calc:empty{ display:none; }
.sk-calc-intro{ margin:0 0 14px; font-size:15px; color:var(--ck-ink-2); max-width:80ch; }
.sk-calc-grid{ display:grid; grid-template-columns:minmax(260px, 5fr) minmax(280px, 6fr); gap:22px; align-items:start; }
.sk-calc-form{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 14px; margin:0; padding:0; border:0; min-width:0; }
.sk-calc-grid .sk-calc-form{ grid-template-columns:1fr; }
.sk-calc-form legend{ grid-column:1 / -1; float:none; width:auto; margin:0 0 2px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ck-ink-3); }
.sk-calc-form-2{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.sk-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sk-field-wide{ grid-column:1 / -1; }
.sk-field label, .sk-check label{ font-size:14px; font-weight:600; color:var(--ck-ink); }
.sk-help{ margin:0; font-size:12.5px; line-height:1.45; color:var(--ck-ink-3); }
.sk-in{ display:flex; align-items:stretch; }
.sk-in .form-control{ min-width:0; }
.sk-in-affix{ display:flex; align-items:center; padding:0 10px; background:var(--ck-surface-2); border:1px solid var(--ck-line-2); color:var(--ck-ink-2); font-weight:600; }
.sk-in-pre .sk-in-affix:first-child{ border-right:0; border-radius:6px 0 0 6px; }
.sk-in-pre .form-control{ border-top-left-radius:0; border-bottom-left-radius:0; }
.sk-in-suf .sk-in-affix:last-child{ border-left:0; border-radius:0 6px 6px 0; }
.sk-in-suf .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.sk-check{ display:flex; align-items:flex-start; gap:8px; margin:2px 0; padding-left:0; }
.sk-check .form-check-input{ margin:3px 0 0; flex:0 0 auto; float:none; }
.sk-check label{ font-weight:500; }

.sk-calc-result{ min-width:0; padding:14px 16px; background:var(--ck-surface-2); border:1px solid var(--ck-line); border-radius:var(--radius,10px); }
.sk-calc > .sk-calc-result{ margin-top:14px; }
.sk-calc-h{ margin:6px 0 8px; font-size:15px; font-weight:700; color:var(--ck-ink); }
.sk-calc-table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 10px; }
.sk-calc-table th, .sk-calc-table td{ padding:7px 8px; border-bottom:1px solid var(--ck-line); text-align:left; vertical-align:top; }
.sk-calc-table tbody th{ font-weight:500; color:var(--ck-ink-2); }
.sk-calc-table td{ font-weight:600; color:var(--ck-ink); font-variant-numeric:tabular-nums; }
.sk-calc-table tr.sk-strong th, .sk-calc-table tr.sk-strong td{ font-weight:700; color:var(--ck-ink); }
.sk-calc-table tr.sk-strong td{ font-size:16px; }
.sk-calc-table thead th{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ck-ink-3); }
.sk-calc-compare td{ font-weight:500; }
.sk-calc-all td, .sk-calc-all th{ font-size:13.5px; }
.sk-sub{ display:block; font-size:12px; font-weight:400; color:var(--ck-ink-3); }

.sk-verdict{ margin:10px 0 0; padding:10px 12px; border-radius:8px; border-left:4px solid; font-size:14.5px; line-height:1.5; }
.sk-verdict-good{ background:var(--ck-good-bg); border-color:var(--ck-good); color:#0b4f33; }
.sk-verdict-warn{ background:var(--ck-warn-bg); border-color:var(--ck-warn); color:#6b3f00; }
.sk-verdict-info{ background:var(--ck-info-bg); border-color:var(--ck-info); color:#173f70; }
.sk-verdict a{ color:inherit; text-decoration:underline; }
.sk-calc-note{ margin:0 4px 18px; }
.sk-calc-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 0; }
.sk-todo{ margin:0; padding-left:20px; font-size:14.5px; line-height:1.55; }
.sk-todo li{ margin-bottom:6px; }
.sk-steps{ margin:0 0 10px; padding-left:22px; }
.sk-steps li{ margin-bottom:4px; }

.sk-chart-wrap{ margin:8px 0 4px; }
.sk-chart{ width:100%; height:auto; display:block; }
.sk-chart-grid{ stroke:var(--ck-line); stroke-width:1; }
.sk-chart-tick{ font-size:11px; fill:var(--ck-ink-3); }
.sk-chart-line{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.sk-chart-line.sk-s1{ stroke:var(--ck-s1); }
.sk-chart-line.sk-s2{ stroke:var(--ck-s2); stroke-dasharray:6 4; }
.sk-chart-legend{ display:flex; gap:16px; margin:4px 0 0; font-size:12.5px; color:var(--ck-ink-2); }
.sk-key::before{ content:""; display:inline-block; width:16px; height:3px; margin:0 6px 3px 0; vertical-align:middle; background:var(--ck-s1); }
.sk-key.sk-s2::before{ background:var(--ck-s2); }

.sk-tool-card .ss-card-icon{ color:var(--ck-accent); }

@media (max-width:860px){
  .sk-calc-grid{ grid-template-columns:1fr; }
  .sk-calc{ padding:14px; }
}

@media print{
  #search-header, .custom-sidebar-menu, footer, .ss-crumbs, .sk-live, .sk-calc-actions, .sk-toc, .sk-block, nav{ display:none !important; }
  .sk-calc, .sk-calc-result{ box-shadow:none; border-color:#999; }
}

/* ------------------------------------------------------- 3. homepage -- */
.ck-h{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--ck-ink); }
.ck-sub{ margin:2px 0 0; font-size:14px; color:var(--ck-ink-2); }
.ck-start{ margin:14px 0 6px; padding:16px; background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:var(--radius,12px); box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); }
.ck-start-head{ margin:0 2px 12px; }
.ck-start-grid{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(260px, 2fr); gap:14px; }
.ck-start-tools{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ck-tile{ display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:10px; padding:12px; border:1px solid var(--ck-line); border-radius:10px; background:var(--ck-surface-2); text-decoration:none; color:var(--ck-ink); transition:border-color .15s, transform .15s; }
.ck-tile:hover{ border-color:var(--ck-link); transform:translateY(-1px); }
.ck-tile-icon{ grid-row:1 / 3; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:var(--ck-info-bg); color:var(--ck-link); }
.ck-tile-icon svg{ width:20px; height:20px; }
.ck-tile-title{ font-weight:700; font-size:15px; line-height:1.3; }
.ck-tile-text{ font-size:13px; color:var(--ck-ink-2); line-height:1.4; }
.ck-start-side{ display:flex; flex-direction:column; gap:10px; }
.ck-box{ padding:12px; border:1px solid var(--ck-line); border-radius:10px; background:var(--ck-surface-2); }
.ck-box-h{ display:flex; align-items:center; margin:0 0 8px; font-size:14.5px; font-weight:700; color:var(--ck-ink); }
.ck-box-h svg{ width:16px; height:16px; color:var(--ck-link); }
.ck-box .sk-picker{ max-width:none; }
.ck-finder{ display:flex; gap:8px; }
.ck-finder .form-control{ flex:1 1 auto; min-width:0; }
.ck-box-foot{ margin:8px 0 0; font-size:13px; }



@media (max-width:991.98px){
  .ck-start-grid{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .ck-start-tools{ grid-template-columns:1fr; }
  .ck-start{ padding:12px; }
}

/* ------------------------------------------------------ 4. dark mode -- */
html[data-fs-theme="dark"]{
  --ck-ink:var(--fs-heading,#dde5ef); --ck-ink-2:var(--fs-ink-2,#b4bfcd); --ck-ink-3:var(--fs-ink-3,#8fa2b8);
  --ck-surface:var(--fs-surface,#161d26); --ck-surface-2:var(--fs-surface-2,#1d2631); --ck-surface-3:var(--fs-surface-3,#232e3c);
  --ck-line:var(--fs-line,#232e3b); --ck-line-2:var(--fs-line-2,#2f3c4c);
  --ck-link:var(--fs-link,#5fd0c4);
  --ck-good:#3fbf86; --ck-good-bg:rgba(63,191,134,.12);
  --ck-warn:#e2a53f; --ck-warn-bg:rgba(226,165,63,.12);
  --ck-info:#5fd0c4; --ck-info-bg:rgba(95,208,196,.12);
  --ck-s1:#79b8ff; --ck-s2:#f0a35e;
}
html[data-fs-theme="dark"] .sk-verdict-good{ color:#bfeedb; }
html[data-fs-theme="dark"] .sk-verdict-warn{ color:#f6dcae; }
html[data-fs-theme="dark"] .sk-verdict-info{ color:#cfe3ff; }

/* The kit's own blocks (sitekit.css paints these light). */
html[data-fs-theme="dark"] .sk-prose,
html[data-fs-theme="dark"] .sk-facts,
html[data-fs-theme="dark"] .sk-tiers,
html[data-fs-theme="dark"] .sk-terms,
html[data-fs-theme="dark"] .sk-live-list,
html[data-fs-theme="dark"] .sk-cols,
html[data-fs-theme="dark"] .sk-answer{ background:var(--ck-surface); border-color:var(--ck-line); color:var(--ck-ink-2); }
html[data-fs-theme="dark"] .sk-prose h2, html[data-fs-theme="dark"] .sk-prose h3,
html[data-fs-theme="dark"] .sk-answer-title a, html[data-fs-theme="dark"] .sk-summary{ color:var(--ck-ink); }
html[data-fs-theme="dark"] .sk-prose a, html[data-fs-theme="dark"] .sk-facts a, html[data-fs-theme="dark"] .sk-live-list a,
html[data-fs-theme="dark"] .sk-term-row dt a, html[data-fs-theme="dark"] .sk-facts-list tbody th a{ color:var(--ck-link); }
html[data-fs-theme="dark"] .sk-prose code{ background:var(--ck-surface-3); color:var(--ck-ink); }
html[data-fs-theme="dark"] .sk-prose th, html[data-fs-theme="dark"] .sk-prose td,
html[data-fs-theme="dark"] .sk-facts th, html[data-fs-theme="dark"] .sk-facts td,
html[data-fs-theme="dark"] .sk-live-list li, html[data-fs-theme="dark"] .sk-term-row{ border-color:var(--ck-line); }
html[data-fs-theme="dark"] .sk-facts tbody th, html[data-fs-theme="dark"] .sk-term-row dd{ color:var(--ck-ink-2); }
html[data-fs-theme="dark"] .sk-facts thead th{ background:var(--ck-surface-2); }
html[data-fs-theme="dark"] .sk-toc, html[data-fs-theme="dark"] .sk-callout{ background:var(--ck-surface-2); border-color:var(--ck-line); color:var(--ck-ink-2); }
html[data-fs-theme="dark"] .sk-az a{ background:var(--ck-surface-2); border-color:var(--ck-line); color:var(--ck-link); }
html[data-fs-theme="dark"] .sk-in-affix{ background:var(--ck-surface-3); border-color:var(--ck-line-2); color:var(--ck-ink-2); }
html[data-fs-theme="dark"] .sk-prose blockquote{ color:var(--ck-ink-2); }

/* Grouped listings (sites/4autoinsurance.com/sitekit/templates/shared/listing.theme.php) */
.sk-head-link{ margin-left:10px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ck-link); text-decoration:none; }

/* ------------------------------------------------ 5. breeds and lists -- */
.ck-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.ck-chips a{ display:inline-block; padding:3px 10px; border:1px solid var(--ck-line-2); border-radius:999px; background:var(--ck-surface); color:var(--ck-ink-2); font-size:12.5px; font-weight:600; text-decoration:none; }
.ck-chips a:hover{ border-color:var(--ck-link); color:var(--ck-link); }
.ck-meter{ display:inline-grid; grid-auto-flow:column; gap:2px; vertical-align:middle; }
.ck-meter i{ width:12px; height:8px; border-radius:2px; background:var(--ck-line-2); }
.ck-meter i.on{ background:var(--ck-link); }
.ck-score-table td, .ck-score-table th{ vertical-align:middle; }
.ck-finder-pick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; margin:10px 0; }
.ck-result{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 12px; border:1px solid var(--ck-line); border-radius:10px; background:var(--ck-surface); margin:0 0 8px; }
.ck-result-n{ font-weight:800; font-size:15px; color:var(--ck-ink-3); text-align:right; font-variant-numeric:tabular-nums; }
.ck-result-name{ font-weight:700; font-size:16px; }
.ck-result-name a{ color:var(--ck-link); text-decoration:none; }
.ck-result-why{ grid-column:2 / 4; font-size:13.5px; color:var(--ck-ink-2); }
.ck-result-score{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }
.ck-dogcard{ display:grid; gap:6px; padding:14px 16px; border:1px solid var(--ck-line); border-radius:10px; background:var(--ck-surface); }
.ck-dogcard h3{ margin:0; font-size:18px; }
.ck-dog-list{ display:grid; gap:10px; }
@media (max-width:575.98px){ .ck-result{ grid-template-columns:26px minmax(0,1fr); } .ck-result-score{ grid-column:2; } .ck-result-why{ grid-column:2; } }