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

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

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

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

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

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

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

/* Grouped listings (sites/4feline.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(--fe-link); text-decoration:none; }


/* ------------------------------------------------- 5. cat tools extras -- */
.fe-name{ margin:0 6px 6px 0; }
.fe-name[aria-pressed="true"]{ background:var(--fe-link); border-color:var(--fe-link); color:#fff; }
.sk-chips-wrap{ display:flex; flex-wrap:wrap; }
ul.sk-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
ul.sk-chips li{ padding:3px 10px; border:1px solid var(--fe-line-2); border-radius:999px; background:var(--fe-surface-2); font-size:13.5px; }
.fe-matches{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:10px; }
.fe-matches li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:baseline; padding:8px 10px; border:1px solid var(--fe-line); border-radius:8px; background:var(--fe-surface); }
.fe-matches a{ font-weight:700; color:var(--fe-link); text-decoration:none; }
.fe-match-pct{ font-size:13px; font-weight:700; color:var(--fe-ink); font-variant-numeric:tabular-nums; }
.fe-match-bar{ grid-column:1 / -1; display:block; height:6px; border-radius:3px; background:var(--fe-surface-3); overflow:hidden; }
.fe-match-bar i{ display:block; height:100%; background:var(--fe-s1); }
.fe-matches .sk-sub{ grid-column:1 / -1; font-size:13px; color:var(--fe-ink-3); }
.sk-chart-dot{ fill:var(--fe-s1); }
@media print{ .fe-start, .fe-box, .sk-calc-actions .btn { display:none; } }