/* ==========================================================================
   site.css - 4autoinsurance.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{
  --ai-ink:#1f2937; --ai-ink-2:#4b5563; --ai-ink-3:#6b7280;
  --ai-surface:#ffffff; --ai-surface-2:#f7f9fc; --ai-surface-3:#eef3f9;
  --ai-line:#e7eaf0; --ai-line-2:#d6dde8;
  --ai-link:#0060a9; --ai-accent:var(--accent,#1abc9c);
  --ai-good:#0f7b4f; --ai-good-bg:#ecf8f2;
  --ai-warn:#9a5b00; --ai-warn-bg:#fff6e6;
  --ai-info:#1d4f8c; --ai-info-bg:#eef4fc;
  --ai-s1:#2563eb; --ai-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(--ai-surface); border:1px solid var(--ai-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(--ai-ink-3); }
.sk-tile-value{ font-size:18px; font-weight:700; color:var(--ai-ink); line-height:1.3; overflow-wrap:anywhere; }
.sk-tile-value a{ color:var(--ai-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(--ai-surface); border:1px solid var(--ai-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(--ai-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(--ai-surface-3); font-size:11.5px; font-weight:700; color:var(--ai-ink-2); text-align:center; }
.sk-ranked td:first-child, .sk-ranked th:first-child{ width:48px; text-align:right; color:var(--ai-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(--ai-surface); border:1px solid var(--ai-line); border-radius:var(--radius,10px); box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); color:var(--ai-ink); }
.sk-calc:empty{ display:none; }
.sk-calc-intro{ margin:0 0 14px; font-size:15px; color:var(--ai-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(--ai-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(--ai-ink); }
.sk-help{ margin:0; font-size:12.5px; line-height:1.45; color:var(--ai-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(--ai-surface-2); border:1px solid var(--ai-line-2); color:var(--ai-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(--ai-surface-2); border:1px solid var(--ai-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(--ai-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(--ai-line); text-align:left; vertical-align:top; }
.sk-calc-table tbody th{ font-weight:500; color:var(--ai-ink-2); }
.sk-calc-table td{ font-weight:600; color:var(--ai-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(--ai-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(--ai-ink-3); }
.sk-calc-compare td{ font-weight:500; }
.sk-calc-all td, .sk-calc-all th{ font-size:13.5px; }
.sk-quote-grid td{ padding:4px; min-width:150px; }
.sk-quote-grid th[scope=row]{ min-width:180px; font-size:13px; }
.sk-sub{ display:block; font-size:12px; font-weight:400; color:var(--ai-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(--ai-good-bg); border-color:var(--ai-good); color:#0b4f33; }
.sk-verdict-warn{ background:var(--ai-warn-bg); border-color:var(--ai-warn); color:#6b3f00; }
.sk-verdict-info{ background:var(--ai-info-bg); border-color:var(--ai-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(--ai-line); stroke-width:1; }
.sk-chart-tick{ font-size:11px; fill:var(--ai-ink-3); }
.sk-chart-line{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.sk-chart-line.sk-s1{ stroke:var(--ai-s1); }
.sk-chart-line.sk-s2{ stroke:var(--ai-s2); stroke-dasharray:6 4; }
.sk-chart-legend{ display:flex; gap:16px; margin:4px 0 0; font-size:12.5px; color:var(--ai-ink-2); }
.sk-key::before{ content:""; display:inline-block; width:16px; height:3px; margin:0 6px 3px 0; vertical-align:middle; background:var(--ai-s1); }
.sk-key.sk-s2::before{ background:var(--ai-s2); }

.sk-tool-card .ss-card-icon{ color:var(--ai-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; }
  .sk-quote-grid input, .sk-calc-form-2 input, .sk-calc-form-2 textarea{ border:0; border-bottom:1px solid #999; border-radius:0; }
}

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

.ai-tabs{ display:none; }
.ai-tabbed .ai-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.ai-tab{ padding:5px 12px; border:1px solid var(--ai-line-2); border-radius:999px; background:var(--ai-surface); font-size:13.5px; font-weight:600; color:var(--ai-ink-2); cursor:pointer; }
.ai-tab:hover{ border-color:var(--ai-link); color:var(--ai-link); }
.ai-tab[aria-selected="true"]{ background:var(--ai-link); border-color:var(--ai-link); color:#fff; }
.ai-panel-h{ margin:14px 2px 8px; font-size:16px; font-weight:700; }
.ai-tabbed .ai-panel-h{ display:none; }

.ai-state-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.ai-state-grid a{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--ai-line); border-radius:8px; background:var(--ai-surface); text-decoration:none; color:var(--ai-ink); font-size:13.5px; }
.ai-state-grid a:hover{ border-color:var(--ai-link); color:var(--ai-link); }
.ai-abbr{ flex:0 0 auto; min-width:30px; padding:2px 0; border-radius:5px; background:var(--ai-surface-3); font-size:11.5px; font-weight:800; text-align:center; color:var(--ai-link); }
.ai-state-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

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

/* ------------------------------------------------------ 4. dark mode -- */
html[data-fs-theme="dark"]{
  --ai-ink:var(--fs-heading,#dde5ef); --ai-ink-2:var(--fs-ink-2,#b4bfcd); --ai-ink-3:var(--fs-ink-3,#8fa2b8);
  --ai-surface:var(--fs-surface,#161d26); --ai-surface-2:var(--fs-surface-2,#1d2631); --ai-surface-3:var(--fs-surface-3,#232e3c);
  --ai-line:var(--fs-line,#232e3b); --ai-line-2:var(--fs-line-2,#2f3c4c);
  --ai-link:var(--fs-link,#79b8ff);
  --ai-good:#3fbf86; --ai-good-bg:rgba(63,191,134,.12);
  --ai-warn:#e2a53f; --ai-warn-bg:rgba(226,165,63,.12);
  --ai-info:#79b8ff; --ai-info-bg:rgba(121,184,255,.12);
  --ai-s1:#79b8ff; --ai-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(--ai-surface); border-color:var(--ai-line); color:var(--ai-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(--ai-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(--ai-link); }
html[data-fs-theme="dark"] .sk-prose code{ background:var(--ai-surface-3); color:var(--ai-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(--ai-line); }
html[data-fs-theme="dark"] .sk-facts tbody th, html[data-fs-theme="dark"] .sk-term-row dd{ color:var(--ai-ink-2); }
html[data-fs-theme="dark"] .sk-facts thead th{ background:var(--ai-surface-2); }
html[data-fs-theme="dark"] .sk-toc, html[data-fs-theme="dark"] .sk-callout{ background:var(--ai-surface-2); border-color:var(--ai-line); color:var(--ai-ink-2); }
html[data-fs-theme="dark"] .sk-az a{ background:var(--ai-surface-2); border-color:var(--ai-line); color:var(--ai-link); }
html[data-fs-theme="dark"] .sk-in-affix{ background:var(--ai-surface-3); border-color:var(--ai-line-2); color:var(--ai-ink-2); }
html[data-fs-theme="dark"] .sk-prose blockquote{ color:var(--ai-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(--ai-link); text-decoration:none; }