/* =====================================================================
   Tank Logic — premium-polish.css   (v14)
   Vanilla CSS UI polish. Loaded LAST so it wins on equal specificity.
   Uses explicit values (with token fallbacks) so it renders the same
   whether or not the design tokens resolve.
   ===================================================================== */

/* ============================================================
   1. NO HYPHENATION — drop whole words, never slice them
   ============================================================ */
html { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }

body, h1, h2, h3, h4, h5, h6,
p, li, a, span, label, summary, td, th, div, button, strong, em {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Wrap naturally; only break a string if it's a single unbreakable run
   (e.g. a long URL), never inside ordinary words. */
p, li, td, th, dd, dt, blockquote, figcaption, summary,
.smart-card, .tool-card, .related-card, .plan-card, .bns-card,
.result-card, .promo-strip__title, .promo-card, .about-feature__desc,
.tool-card-panel, .wstack__mineral {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Long headings scale down on small screens instead of breaking.
   clamp() never overflows and never gets uncomfortably small. */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.18; }
  h2 { font-size: clamp(1.25rem, 5.1vw, 1.6rem);  line-height: 1.22; }
}

/* ============================================================
   2. FLUID RESPONSIVE PADDING — stop the mobile squeeze
   ============================================================ */
@media (max-width: 600px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  .smart-card, .tool-card-panel, .tool-card, .result-card,
  .bns-card, .plan-card, .card, .sidebar-panel, .promo-card {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .smart-card, .tool-card-panel, .result-card, .bns-card {
    padding: 1.5rem 1.75rem;
  }
}

/* ============================================================
   3. PREMIUM MICRO-INTERACTIONS
   ============================================================ */

/* 3a. Crisp, branded focus ring (outline-based, no default glow).
   Tool classes are named explicitly so this overrides tool.css. */
.tool-input:focus, .tool-select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus {
  outline: 2px solid var(--accent, #6FBF8E);
  outline-offset: 2px;
  border-color: var(--accent, #6FBF8E);
  transition: outline-color .2s ease-in-out, border-color .2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

/* 3b. Soft shadows + refined borders on cards (replaces hard edges) */
.smart-card, .tool-card, .tool-card-panel, .related-card,
.bns-card, .plan-card, .result-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.28);
}

/* 3c. Gentle hover transitions + a tiny lift on interactive elements */
.btn, .related-card, .tool-card, .home-tool-card, .home-guide-card,
.promo-card, .promo-next__card, .about-sidebar-link, .preset-btn {
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out,
              background-color .2s ease-in-out, border-color .2s ease-in-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.related-card:hover, .tool-card:hover, .home-tool-card:hover,
.home-guide-card:hover, .promo-card:hover, .promo-next__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.18);
}

/* Disable lifts on touch devices so cards don't get stuck in a hover state */
@media (hover: none) {
  .btn:hover, .related-card:hover, .tool-card:hover, .home-tool-card:hover,
  .home-guide-card:hover, .promo-card:hover, .promo-next__card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.28);
  }
}

/* ============================================================
   4. RESULTS CARD PROMINENCE — premium data readout
   (!important only on background, to beat the inline theme block)
   ============================================================ */
.result-card--primary {
  background: linear-gradient(180deg, rgba(111,191,142,.12), rgba(111,191,142,.05)) !important;
  border: 1px solid rgba(111,191,142,.30);
  box-shadow: 0 2px 6px rgba(0,0,0,.30), 0 12px 30px rgba(0,0,0,.30);
}
.result-card--primary-blue {
  background: linear-gradient(180deg, rgba(96,165,214,.12), rgba(96,165,214,.05)) !important;
  border: 1px solid rgba(96,165,214,.30);
  box-shadow: 0 2px 6px rgba(0,0,0,.30), 0 12px 30px rgba(0,0,0,.30);
}

/* Heavier weight on the actual output numbers */
.result-value, .result-pct, .fish-total-val, .result-genotype {
  font-weight: 800;
  letter-spacing: -0.01em;
}