/* FishSnap website candidate: shared shell, control system and page components.
   Loaded after style.css and typography.css. Two control sizes only: 44px (large) and 36px (small). */
:root {
  --fs2-L: 44px; --fs2-S: 36px;
  --fs2-fsL: 15px; --fs2-fsS: 13.5px;
  --fs2-pxL: 18px; --fs2-pxS: 14px;
  --fs2-gap: 10px;
  --fs2-line: #b9cbc7;
  --fs2-amber: #8a4a12; --fs2-amber-line: #e6c89f; --fs2-amber-bg: #fdf3e6;
  --fs2-stop: #9a2f1c; --fs2-stop-bg: #fbeae6;
  --fs2-mint: #e5f0ed; --fs2-teal-d: #154f4c;
  --header: 72px;
}

/* ---------- controls ---------- */
.fs2-c, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--fs2-L); min-width: var(--fs2-L); padding: 0 var(--fs2-pxL);
  border-radius: 999px; border: 1.5px solid var(--fs2-line); background: #fff; color: var(--ink);
  font: 600 var(--fs2-fsL)/1 Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%;
}
.btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.secondary, .btn.ghost, .btn.outline { background: #fff; color: var(--ink); border-color: var(--fs2-line); }
.btn.small { height: var(--fs2-S); padding: 0 var(--fs2-pxS); font-size: var(--fs2-fsS); }
.fs2-c .fs2-lb, .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs2-c.fs2-s { height: var(--fs2-S); min-width: var(--fs2-S); padding: 0 var(--fs2-pxS); font-size: var(--fs2-fsS); }
.fs2-c.fs2-p { background: var(--ink); border-color: var(--ink); color: #fff; }
.fs2-c:hover:not(:disabled), .btn:hover:not(:disabled) { border-color: var(--aqua); }
.fs2-c:disabled, .fs2-c.is-disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.fs2-c:focus-visible, .btn:focus-visible, .fs2-door:focus-visible { outline: 3px solid rgba(23,107,114,.45); outline-offset: 2px; }
.fs2-grp { display: flex; flex-wrap: wrap; gap: var(--fs2-gap); align-items: center; }
.fs2-grp.fs2-eq { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.fs2-grp.fs2-eq > .fs2-c, .fs2-grp.fs2-eq > .btn { width: 100%; }
.fs2-in { height: var(--fs2-L); width: 100%; border: 1.5px solid var(--fs2-line); border-radius: 12px; padding: 0 14px; font: 500 var(--fs2-fsL)/1 Inter, sans-serif; color: var(--ink); background: #fff; min-width: 0; }
.fs2-tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; max-width: 100%; border-radius: 6px;
  font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; background: var(--fs2-mint); color: var(--fs2-teal-d);
}
.fs2-tag-nr { background: transparent; color: var(--fs2-amber); border: 1px solid var(--fs2-amber-line); }
.fs2-tag-ex { background: #fbe3d3; color: #7a2f10; }
.fs2-tag-wd { background: #e2f3e6; color: #1d5a2c; }
.fs2-tag-dk { background: var(--ink); color: #fff; }

/* ---------- header ---------- */
.fs2-header .fs2-shell { gap: 18px; }
.fs2-doors { display: none; align-items: center; gap: 2px; margin-left: 6px; flex: 1 1 auto; min-width: 0; }
.fs2-door {
  display: inline-flex; align-items: center; gap: 4px; height: var(--fs2-S); padding: 0 14px; border-radius: 999px;
  border: 1.5px solid transparent; background: transparent; color: #33474c; font: 600 var(--fs2-fsS)/1 Inter, sans-serif;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fs2-door svg { width: 14px; height: 14px; transition: transform .15s ease; }
.fs2-door:hover { background: #fff; color: var(--ink); }
.fs2-door.is-active { background: var(--fs2-mint); color: var(--fs2-teal-d); }
.fs2-door[aria-expanded="true"] svg { transform: rotate(180deg); }
.fs2-group { position: relative; }
.fs2-menu {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 320px; max-width: calc(100vw - 24px); padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.fs2-menu[hidden] { display: none; }
.fs2-menu-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.fs2-menu-item:hover, .fs2-menu-item:focus-visible { background: var(--bg); }
.fs2-menu-item b { font-size: 15px; }
.fs2-menu-item small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.fs2-menu-item[aria-current="page"] b { color: var(--aqua); }
.fs2-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 8px; }
.fs2-util { display: none; grid-template-columns: repeat(3, 108px); gap: 8px; margin-left: auto; }
.fs2-util .fs2-c { height: var(--fs2-S); padding: 0 12px; font-size: var(--fs2-fsS); width: 100%; position: relative; }
.fs2-count { position: static; min-width: 20px; height: 20px; border: 0; margin-left: 2px; flex: none; }
.fs2-count.hide { display: none; }
.fs2-header .nav-actions { margin-left: auto; }
/* Visual QA: the JS-inserted .back-to-top control can push the approved hamburger
   (.menu-btn) past the right edge of very narrow phones once it becomes visible on scroll
   (measured overflow at 320-340px). Hide it there so Search / My tank / Open menu stay
   fully on-screen and reachable; it still works normally from ~375px up. */
@media (max-width: 374px) {
  .nav-actions .back-to-top { display: none !important; }
}
.fs2-phone-only { display: grid; }
.fs2-tabbar { display: none; }

/* Raised from 1000px: five dropdown doors + the chevron on each + the equal-width
   utility row (Search/My tank/Account) + an in-flow Back to top control do not fit
   together below ~1180px. Below that width the phone/tablet drawer nav is used
   instead, so the crowded desktop row never renders where it would collide. */
@media (min-width: 1180px) {
  .fs2-doors { display: flex; }
  .fs2-util { display: grid; }
  .fs2-header .nav-actions { margin-left: 0; }
  .fs2-header .nav-actions .fs2-phone-only { display: none; }
}
@media (max-width: 1179px) {
  .fs2-tabbar {
    position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--fs2-tabs, 4), minmax(0, 1fr));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px rgba(11,32,39,.06);
  }
  .fs2-tabbar a {
    display: grid; justify-items: center; align-content: center; gap: 3px; height: 56px; padding: 6px 4px; text-decoration: none;
    color: #52666b; font: 600 11px/1 Inter, sans-serif; min-width: 0;
  }
  .fs2-tabbar a .fs2-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fs2-tabbar a[aria-current="page"] { color: var(--fs2-teal-d); box-shadow: inset 0 3px 0 var(--aqua); background: var(--fs2-mint); }
  .fs2-tab-gl svg { width: 20px; height: 20px; display: block; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .page-back { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  body:has(.sticky-mobile-cta) .page-back { bottom: calc(132px + env(safe-area-inset-bottom)) !important; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sticky-mobile-cta { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
}
.fs2-tabbar { --fs2-tabs: 4; }
body[data-page="kids"] .fs2-tabbar, body[data-page="kids-parents"] .fs2-tabbar { --fs2-tabs: 5; }

/* phone menu sheet (uses the existing drawer mechanics) */
.fs2-sheet { display: grid; gap: 0; }
.fs2-sheet-h { margin: 18px 0 4px !important; font: 600 11px/1.2 "JetBrains Mono", monospace !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--muted); }
.fs2-sheet-list { display: grid; }
.fs2-sheet-list a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 14px 2px; border-bottom: 1px solid var(--line); font: 600 1.1rem/1.25 Inter, sans-serif; text-decoration: none; color: var(--ink); }
.fs2-sheet-list a[aria-current="page"] { color: var(--aqua); }
.fs2-sheet-list a small { flex: 1 1 100%; font: 500 .8rem/1.35 Inter, sans-serif; color: var(--muted); }
.fs2-sheet-list a small:empty { display: none; }
.fs2-drawer-group { border-bottom: 1px solid var(--line); }
.fs2-drawer-group:first-of-type { border-top: 1px solid var(--line); margin-top: 6px; }
.fs2-drawer-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 !important; padding: 16px 2px; cursor: pointer; list-style: none;
}
.fs2-drawer-summary::-webkit-details-marker { display: none; }
.fs2-drawer-summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-top: -2px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.fs2-drawer-group[open] > .fs2-drawer-summary::after { transform: rotate(-135deg); }
.fs2-drawer-group .fs2-sheet-list { padding-bottom: 6px; }
.fs2-drawer-group .fs2-sheet-list a { border-bottom: 0; padding: 10px 2px; }
.fs2-sheet-account { margin-top: 4px; }
.fs2-sheet-account a { border-bottom: 0; }

/* ---------- footer ---------- */
.fs2-footer .footer-bottom { flex-wrap: wrap; gap: 8px 24px; }
.fs2-footer .footer-bottom span:last-child { max-width: 46rem; }
/* the shared nav map adds an App column (Discover, Plan, Learn, App, More + FishSnap).
   Six real columns wrap labels like "Species by country" or "100 aquarium ideas" once
   the brand block takes its share of the row, so keep the existing clean 3-column,
   2-row grid at normal desktop widths instead of stretching to six thin columns. */
@media (min-width: 1160px) {
  .fs2-footer .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
}

/* ---------- home ---------- */
.fs2-home-hero .hero-grid { align-items: stretch; }
.fs2-home-hero .hero-copy { min-height: 0; padding-block: clamp(28px, 5vw, 56px); }
.fs2-brandline { margin: 0 0 10px; color: var(--aqua); font: 600 .95rem/1.3 Inter, sans-serif; }
.fs2-home-hero .hero-search { display: flex; align-items: center; gap: 10px; }
.fs2-home-hero .hero-search .btn { flex: none; height: var(--fs2-L); }
.fs2-home-hero .hero-search .fs2-short { display: none; }
.fs2-try { display: grid; gap: 8px; margin-top: 16px; }
.fs2-try > span { font-size: 13px; color: var(--muted); }
.fs2-try .fs2-grp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs2-try .fs2-c { height: var(--fs2-S); font-size: var(--fs2-fsS); width: 100%; }
.fs2-situations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fs2-situation { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.fs2-situation h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.fs2-situation p { margin: 0 0 6px; color: var(--muted); }
.fs2-situation .fs2-c { justify-self: start; }
.fs2-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fs2-more-card { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink); }
.fs2-more-card:hover { border-color: var(--aqua); }
.fs2-more-card h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.fs2-more-card p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 999px) { .fs2-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) {
  .fs2-situations, .fs2-more-grid { grid-template-columns: 1fr; }
  .fs2-try .fs2-grp { grid-template-columns: 1fr; }
  .fs2-home-hero .hero-search .fs2-long { display: none; }
  .fs2-home-hero .hero-search .fs2-short { display: inline; }
  .fs2-home-hero .hero-search .btn { width: auto; padding: 0 16px; }
  .fs2-home-hero .hero-search .btn svg { display: none; }
}

/* ---------- review status on cards and profiles ---------- */
.species-card .fs2-tag-nr { margin-top: 6px; justify-self: start; }
.card-tank-action.is-unavailable { opacity: .6; border-style: dashed; cursor: not-allowed; }
.fs2-profile-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }
.fs2-profile-status p { margin: 0; font-size: .9rem; color: var(--muted); max-width: 46rem; }
.fs2-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs2-gap); margin-top: 12px; max-width: 460px; }
.fs2-profile-actions .btn { width: 100%; }
@media (max-width: 479px) { .fs2-profile-actions { grid-template-columns: 1fr; max-width: none; } }

/* ---------- plan (Tools) ---------- */
.fs2-plan-notice { background: var(--fs2-mint); border-bottom: 1px solid var(--line); padding: 12px 0; }
.fs2-plan-notice .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fs2-plan-notice p { margin: 0; font-size: .95rem; max-width: 60rem; }
.fs2-keep { margin-top: 24px; display: grid; gap: 14px; }
.fs2-keep-note { margin: 0; color: var(--muted); font-size: .9rem; max-width: 52rem; }
.fs2-next { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.fs2-next h4 { margin: 0 0 8px; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fs2-next ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fs2-next li span { display: block; color: var(--muted); font-size: .88rem; }
.fs2-linkbox { display: grid; gap: 6px; }
.fs2-linkbox label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 559px) { .fs2-keep .fs2-grp.fs2-eq { grid-template-columns: 1fr; } }
@media print {
  .fs2-header, [data-site-header], .announcement-bar, .fs2-tabbar, .fs2-keep .fs2-grp, .site-footer, .back-to-top, .page-back { display: none !important; }
}

/* ---------- Marketplace example system ---------- */
.fs2-example-strip {
  position: sticky; top: var(--header); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  padding: 9px 16px; background: #fdf3e6; border-bottom: 1px solid var(--fs2-amber-line); color: #5b3209; font-size: .84rem; text-align: center;
}
.fs2-example-strip strong { letter-spacing: .06em; text-transform: uppercase; font: 700 .72rem/1 "JetBrains Mono", monospace; background: #fbe3d3; color: #7a2f10; padding: 4px 8px; border-radius: 5px; }
.fs2-hatch { height: 10px; background: repeating-linear-gradient(135deg, #f0d6b6 0 8px, transparent 8px 16px); border-block: 1px solid var(--fs2-amber-line); }
.fs2-ex-ribbon, .listing-card .card-image, .listing-photo { position: relative; }
.listing-card .card-image::after, .listing-photo::after {
  content: "EXAMPLE"; position: absolute; left: 0; top: 14px; padding: 5px 12px 5px 10px; background: #7a2f10; color: #fff;
  font: 700 .68rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; border-radius: 0 6px 6px 0; pointer-events: none; z-index: 2;
}
.listing-card .card-badge { right: 12px; left: auto; }
.price, [data-listing-price], .cart-item .price, [data-subtotal], [data-total] {
  border: 1px dashed #d9a86b; border-radius: 8px; padding: 2px 8px; background: #fffaf2; width: fit-content;
}
.price::after, [data-listing-price]::after, [data-subtotal]::after, [data-total]::after { content: " (example)"; font-size: .62em; font-weight: 600; color: var(--fs2-amber); letter-spacing: .02em; }
.fs2-ex-note { margin: 12px 0; padding: 12px 14px; border: 1px dashed #d9a86b; border-radius: 12px; background: #fffaf2; font-size: .9rem; color: #5b3209; }
.fs2-ex-note b { display: block; margin-bottom: 2px; }

/* ---------- Videos ---------- */
.fs2-yt-slot { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed var(--fs2-line); border-radius: 999px; font-size: .82rem; color: var(--muted); }
.fs2-video-guide { margin: 10px 0 0; font-size: .88rem; }
.fs2-video-guide a { color: var(--aqua); font-weight: 600; }
.video-card .fs2-c { width: 100%; margin-top: 10px; }

/* ---------- guide next actions ---------- */
.fs2-next-actions { margin-top: 40px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: grid; gap: 12px; }
.fs2-next-actions h2 { margin: 0; }
.fs2-next-actions .fs2-grp.fs2-eq { max-width: 760px; }
@media (max-width: 679px) { .fs2-next-actions .fs2-grp.fs2-eq { grid-template-columns: 1fr; } }

/* ---------- long-page structure ---------- */
.fs2-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.fs2-toc a { display: inline-flex; align-items: center; height: var(--fs2-S); padding: 0 14px; border: 1.5px solid var(--fs2-line); border-radius: 999px; text-decoration: none; color: var(--ink); font: 600 var(--fs2-fsS)/1 Inter, sans-serif; background: #fff; white-space: nowrap; }
.fs2-toc a:hover { border-color: var(--aqua); }

/* ---------- App page ---------- */
.fs2-app-note { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }

/* phone hero search: keep the label visible (the legacy rule hides every span inside .btn) */
.fs2-home-hero .hero-search .btn { width: auto !important; padding: 0 var(--fs2-pxL) !important; }
.fs2-home-hero .hero-search .btn span { display: inline !important; }
.fs2-home-hero .hero-search .btn .fs2-long, .fs2-home-hero .hero-search .btn .fs2-short { display: none !important; }
.fs2-home-hero .hero-search .btn .fs2-long { display: inline !important; }
@media (max-width: 679px) {
  .fs2-home-hero .hero-search .btn .fs2-long { display: none !important; }
  .fs2-home-hero .hero-search .btn .fs2-short { display: inline !important; }
  .fs2-home-hero .hero-search input { padding-right: 8px; min-width: 0; }
}

/* species profile actions: one grid, one primary per group */
body[data-page="species"] .profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs2-gap); max-width: 520px; }
body[data-page="species"] .profile-actions .btn, body[data-page="species"] .fs2-profile-actions .btn { width: 100%; }
.fs2-profile-actions { max-width: 520px; }
.fs2-profile-actions .btn { background: #fff; color: var(--ink); }
.fs2-profile-actions .btn:disabled { opacity: .55; border-style: dashed; cursor: not-allowed; }
.fs2-profile-actions .btn.saved { background: var(--fs2-mint); border-color: #8fbdb4; color: var(--fs2-teal-d); }
/* legacy action groups: equal full-width rows on phones, never clipped */
@media (max-width: 560px) {
  .tools-hero-actions, .page-actions, .form-actions, .seller-hero-actions, .seller-heading-actions, .seller-import-actions,
  .planner-livestock-actions, .merch-hero-actions, .merch-section-actions, .aquarium-library-actions,
  .aquarium-import-actions, .app-callout-actions, .profile-planning-actions, .profile-suitability-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .tools-hero-actions > .btn, .page-actions > .btn, .form-actions > .btn, .seller-hero-actions > .btn,
  .planner-livestock-actions > .btn, .merch-hero-actions > .btn, .app-callout-actions > .btn { width: 100%; }
  body[data-page="species"] .profile-actions, .fs2-profile-actions { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
.fs2-home-hero .hero-search input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.fs2-home-hero .hero-search > svg { flex: none; }
.fs2-home-hero .hero-search { padding: 6px 6px 6px 16px !important; gap: 8px; }
.fs2-home-hero .hero-search .btn { position: static !important; inset: auto !important; margin: 0 !important; }
.fs2-home-hero .hero-search input { padding: 0 !important; height: 100%; background: transparent; border: 0; outline: 0; }
@media (max-width: 679px) { .fs2-home-hero .hero-search .btn { padding: 0 14px !important; } }
.fs2-home-hero .hero-search > svg { position: static !important; translate: none !important; left: auto !important; width: 20px; height: 20px; }
@media (max-width: 999px) { .fs2-tabbar a { padding-inline: 2px; font-size: 10.5px; letter-spacing: -.01em; } }
.seller-info { flex-wrap: wrap; }
.seller-info .btn { flex: 0 0 auto; max-width: none; }

/* adjacent controls in one group: identical width and height (group is as wide as its widest label), stacked full-width on phones */
@media (min-width: 561px) {
  .tools-hero-actions, .page-actions, .form-actions, .seller-hero-actions, .merch-hero-actions, .app-callout-actions,
  .fk-hero .fs2-grp, .fs2-eq-auto {
    display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--fs2-gap); align-items: stretch; width: auto;
  }
  .tools-hero-actions > .btn, .page-actions > .btn, .form-actions > .btn, .seller-hero-actions > .btn, .merch-hero-actions > .btn,
  .app-callout-actions > .btn, .fk-hero .fs2-grp > .fs2-c { width: 100%; }
}
@media (max-width: 560px) {
  .fk-hero .fs2-grp, .fs2-eq-auto { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .fk-hero .fs2-grp > .fs2-c { width: 100%; }
}
.fs2-yt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; margin: 8px 0 2px; border: 1.5px dashed var(--fs2-line); border-radius: 999px; background: #fff; width: fit-content; max-width: 100%; }
.fs2-yt b { font: 700 .95rem/1 Inter, sans-serif; color: var(--ink); }
.fs2-yt em { font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.fs2-yt svg { flex: none; }
.species-card .card-body .fs2-tag-nr { display: flex; width: fit-content; margin: 8px 0 2px; }
body.drawer-open .fs2-tabbar, body.modal-open .fs2-tabbar { display: none; }
.drawer-panel { padding-bottom: 32px; }
/* browse-only (not yet reviewed) profile: identity, badge and Save only */
body.fs2-browse-only .profile-actions, body.fs2-browse-only .filter-bar, body.fs2-browse-only .profile-sections, body.fs2-browse-only .profile-suitability-section,
body.fs2-browse-only .sticky-mobile-cta, body.fs2-browse-only .fact-pills, body.fs2-browse-only .profile-aside { display: none !important; }
/* My tank count: a corner badge, so the label is always complete and the three header buttons stay identical in size */
.fs2-util { grid-template-columns: repeat(3, 116px); }
.fs2-util .fs2-c { overflow: visible; }
.fs2-util .fs2-count { position: absolute; top: -7px; right: -5px; min-width: 20px; height: 20px; margin: 0; padding: 0 5px; border: 2px solid var(--bg); box-sizing: content-box; line-height: 1; font-size: 11px; }
/* equal-width control groups wrap into equal columns instead of shrinking labels */
.fs2-grp.fs2-eq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fs2-yt { padding: 6px 12px; }
.v2-youtube-logo strong { font: 800 14px/1 Inter, sans-serif; color: #17364d; }

/* ================= visual QA polish pass ================= */
/* contents rows keep the container's centring and use equal, single-line pills */
.fs2-toc { margin: 18px auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); justify-content: start; gap: 8px; }
.fs2-toc a { justify-content: center; }
@media (max-width: 559px) { .fs2-toc { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); } }

/* library sub-navigation pills: one width, equal columns on phones */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.subnav a { min-width: 152px; justify-content: center; text-align: center; }
@media (max-width: 559px) { .subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .subnav a { min-width: 0; width: 100%; } }

/* card action rows: one size, pinned to the bottom of the card so rows line up */
.card-grid > *, .card-grid > article { display: flex; flex-direction: column; }
.species-card .card-body, .listing-card .card-body, .video-card .card-body, .merch-card-body, .tank-idea-body, .aquarium-library-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.species-card .card-action-row { margin-top: auto; padding-top: 12px; }
.card-action-row .card-tank-action { width: 100%; height: var(--fs2-S); justify-content: center; font: 600 var(--fs2-fsS)/1 Inter, sans-serif; }
.listing-card .price-row, .merch-card-foot { margin-top: auto; }
.aquarium-library-actions, .tank-idea-body > .btn { margin-top: auto; }
.tank-idea-body > .btn { align-self: stretch; }
.aquarium-library-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs2-gap); }
.aquarium-library-actions .btn { width: 100%; }

/* profile actions: both rows share one width */
body[data-page="species"] .profile-actions, .fs2-profile-actions { max-width: none; width: 100%; }

/* Tools: every planner step is the same width as the results panel */
.planner-workspace { max-width: none !important; }

/* Marketplace filter row: nothing scrolls or crops */
.market-toolbar > div[style*="overflow-x"] { overflow: visible !important; display: grid !important; grid-template-columns: repeat(2, 168px); gap: 8px !important; }
.market-toolbar .smooth-select { width: 100%; max-width: none; }
@media (max-width: 899px) { .market-toolbar > div[style*="overflow-x"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* shop banner: the placeholder logo must not sit behind the title */
.seller-hero > img { opacity: .12; filter: grayscale(1); }
.seller-hero { background: linear-gradient(135deg, #0f2d33, #1b4b52); }

/* Videos: the stray search glyph outside the input */
.video-library-section .search-field > span { display: none; }
.video-library-section .search-field { position: relative; }

/* App page: equal buttons and equal-height cards */
/* App page hero: "Open FishSnap app" / "Explore the catalogue" is .app-actions, not the never-matched .app-hero-actions this rule targeted before */
.app-actions { display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--fs2-gap); width: auto; }
.app-actions > .btn { width: 100%; }
@media (max-width: 559px) { .app-actions { display: grid !important; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); width: 100%; } }

/* Tools: spacing where two blocks met without a gap */
.planner-results-section h3 + ol, .planner-results-section .setup-checklist + h3 { margin-top: 22px; }

/* filter chip rows: equal columns that wrap, never a hidden scroll */
.video-series-list, .tank-library-filters { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 8px; overflow: visible !important; padding: 0; }
.video-series-list button, .tank-library-filters .chip { width: 100%; min-height: var(--fs2-S); padding-inline: 10px; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 559px) { .video-series-list, .tank-library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Kids stories: books wrap into a grid on wide screens instead of an off-screen shelf */
@media (min-width: 760px) { .v2-book-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .v2-shelf-note { display: none; } }
@media (min-width: 760px) and (max-width: 1049px) { .v2-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* classic Kids page controls: equal widths */
.kids-difficulty { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kids-game-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.kids-game-filters button { width: 100%; }
/* visual QA pass: readable body copy on About, planner guidance spacing, link trio */
.editorial-grid p.muted, .tool-card p.muted { color: #4d5a54; }
.planner-guidance-panel { margin-top: 32px; }
.planner-guidance-panel h3, .planner-guidance-panel h4 { margin-top: 0; }
.planner-path-actions { display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; }
.planner-path-actions a { width: 100%; }
.planner-path-actions a { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; min-height: var(--fs2-S); padding: 8px 14px; border: 1.5px solid #cfd6d2; border-radius: 999px; text-decoration: none; line-height: 1.25; white-space: nowrap; }
/* visual QA pass 2: no scroll-hidden control rows on phones; equal grids instead */
/* Legal "On this page" sidebar only (About's own .fs2-toc, art.html's collection navs and Kids classic's nav must not be swept in by a generic nav selector: that regressed About) */
.legal-sidebar nav { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; overflow: visible !important; }
.legal-sidebar nav > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fs2-S); padding: 6px 12px; text-align: center; white-space: nowrap; line-height: 1.2; }
@media (min-width: 900px) { .legal-sidebar nav { grid-template-columns: minmax(0, 1fr) !important; } .legal-sidebar nav > a { justify-content: flex-start; text-align: left; } }
/* App picker: restore the site's own single-column desktop list (a 3-column override here squeezed 4 real options into tiny wrapped, cropped cells) */
.seller-dashboard-nav nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible !important; }
.seller-dashboard-nav nav button { width: 100%; min-width: 0; justify-content: space-between; white-space: normal; text-align: left; }
@media (min-width: 900px) { .seller-dashboard-nav nav { display: flex !important; flex-direction: column; } }
@media (max-width: 419px) {
  .market-toolbar > div[style*="overflow-x"] { grid-template-columns: 1fr !important; }
  .subnav { grid-template-columns: 1fr; }
  .subnav a { min-width: 0; }
}
.market-toolbar, .market-toolbar > * { min-width: 0; }
.chip { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; height: auto; min-height: var(--fs2-S); line-height: 1.2; padding-block: 6px; }
.book-purchase-grid, .book-purchase-copy { min-width: 0; }
.book-purchase-copy h2 { overflow-wrap: anywhere; }
.merch-model-card { min-width: 0; }
.tank-library-filters .chip, .video-series-list button, .chip { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; height: auto !important; min-height: var(--fs2-S); line-height: 1.2; padding-block: 6px; }
@media (max-width: 899px) { .book-purchase-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.book-format-grid, .book-format-card, .book-purchase-panel { min-width: 0; max-width: 100%; }
@media (max-width: 379px) { .seller-dashboard-nav nav { grid-template-columns: 1fr; } }
/* home hero pills: one clean row, never two-line pills */
.visual-stats { display: flex; flex-wrap: nowrap; gap: 8px; }
.visual-stats .glass-pill { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 519px) { .visual-stats .glass-pill:first-child { display: none; } .visual-stats { flex-wrap: wrap; } }

/* ================= visual QA pass 3 (independent review round 2) ================= */
/* Learn hero tags: the recovered baseline forces exactly 3 equal fixed columns, which breaks ("Aquarium ideas" wraps) anywhere
   the panel is narrower than ~150px per column - including some desktop widths (1200, 1024), not only phones. Use a
   self-adjusting grid instead of a fixed count so every label always keeps its own full-width, single-line column. */
body[data-page="journal"] .hero-tags { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important; }

/* Seller dashboard "Recommended next": Edit inventory / Upload CSV must be equal width regardless of .secondary */
.seller-action-primary > div:has(> .btn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seller-action-primary > div:has(> .btn) > .btn { width: 100%; }
@media (max-width: 419px) { .seller-action-primary > div:has(> .btn) { grid-template-columns: minmax(0, 1fr); } }

/* Art page: both local sub-navs stack to one column under 480px so no label wraps and every pill stays the same height */
@media (max-width: 479px) {
  .store-collection-nav { grid-template-columns: minmax(0, 1fr) !important; }
  .store-collection-nav a { min-height: var(--fs2-S) !important; padding: 8px 12px !important; font-size: var(--fs2-fsS) !important; }
  .store-collection-nav a > span { display: inline-flex !important; }
  .wood-chapter-nav { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  .wood-chapter-nav a { min-width: 0; width: 100%; }
}
/* desktop: the three collection pills follow content width by default ("Portuguese ceramics" is wider than "Wire + Bead"); equalise them */
@media (min-width: 480px) { .wood-chapter-nav a { min-width: 200px; } }

/* Filter chip groups: no longer exempt from single-line labels. Full label kept, but stacked to one column early
   so each chip has the full row width instead of wrapping inside a narrow grid cell. */
@media (max-width: 620px) {
  .tank-library-filters { grid-template-columns: minmax(0, 1fr) !important; }
}


/* Cart summary: the "(example)" price pill has a light cream background everywhere on the site (readable with dark ink text
   on white cards); inside the dark .summary-card the price text inherits white and becomes unreadable on that same cream
   pill. Force the pill's own dark ink colour here regardless of the card's white default. */
.summary-row [data-subtotal], .summary-row [data-total] { color: #5b3209 !important; }

/* App page closing callout: "Open FishSnap" / "Explore species" was a solid button next to a bare underlined
   text link. Give the link the same pill/outline treatment so the pair reads as one consistent choice, equal size. */
.app-callout-actions { display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: var(--fs2-gap); width: auto; }
.app-callout-actions .text-link { border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 10px 18px; text-decoration: none; border-bottom: 1px solid var(--line); justify-content: center; }
.app-callout-actions .text-link:hover { border-color: var(--ink); }
.app-callout-actions .btn, .app-callout-actions .text-link { width: 100%; }
@media (max-width: 559px) { .app-callout-actions { display: grid !important; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }

/* 404 page: same primary/secondary pair pattern, equal width */
.system-actions { display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--fs2-gap); width: auto; }
.system-actions > .btn { width: 100%; }
@media (max-width: 559px) { .system-actions { display: grid !important; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); width: 100%; } }

/* Art piece galleries (wire-bead/wood-piece/portuguese-piece thumbnails): 3 fixed columns are too narrow for
   "Beadwork detail" etc. under ~380px. Switch to a single-column row (small thumb + one-line label) there instead. */
@media (max-width: 379px) {
  .wb-thumbnails { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  .wb-thumbnails button { grid-template-columns: 44px 1fr; grid-template-rows: none; text-align: left; padding: 6px 10px; }
  .wb-thumb-image-frame { width: 44px; height: 44px; margin: 0; }
}

/* Video series filters: the base grid already self-adjusts; a forced 2-column phone override broke long labels
   ("Responsible keeping"). Let it size itself the same way tank-library-filters does. */
@media (max-width: 559px) { .video-series-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important; } }

/* Compact footer menus; keep the established container width. */
.fs2-footer .footer-links { align-items:start; }
@media(min-width:1160px) { .fs2-footer .footer-links { gap:6px 24px; } }
.fs2-footer .footer-bottom .footer-rights { max-width:52rem; }