/* prod2 (2026-10-08) design spec: load AFTER prod1b.*.css on all three sites.
 * Only existing tokens are used: --brand-text, --brand, --background, --foreground, --card,
 * --muted, --muted-foreground, --border (light / .dark / .dark.black, and Anime's dark-only shell).
 * No images. Icons are inline lucide SVGs from the astro-icon set the builds already use. */

/* ---------- S1 Hero CTAs (prod2 decision) ---------- */
/* CTA1 Check Codes = btn-primary (solid brand). CTA2 tool = btn-outline.sq-hero-cta-tool (brand outline + left icon).
 * Both 48px. Side-by-side 50/50 from ≥390 (existing prod1b grid). Stacked full-width below 390.
 * Stack breakpoint is 389.98px (not 379.98): at 380 Loot "Forge Planner"+icon wraps to 2 lines (66px). */
.sq-hero-cta-row .btn-primary,
.sq-hero-cta-row .btn-outline {
  min-height: 48px !important;
  border-width: 1px;
  border-style: solid;
  gap: 0.375rem;
}
.sq-hero-cta-row .btn-primary { border-color: transparent; }
.sq-hero-cta-row .btn-outline.sq-hero-cta-tool {
  color: hsl(var(--brand-text)) !important;
  background: hsl(var(--background) / 0.55) !important;
  border-color: hsl(var(--brand-text)) !important;
}
.sq-hero-cta-row .btn-outline.sq-hero-cta-tool svg { width: 1rem; height: 1rem; flex: none; }
html.dark .sq-hero-cta-row .btn-outline.sq-hero-cta-tool {
  background: rgba(255,255,255,0.06) !important;
  color: hsl(var(--brand-light)) !important;
  border-color: hsl(var(--brand-light)) !important;
}
/* Anime shell Hero: tool outline uses yellow accent on the dark band */
.sq-hero .sq-hero-cta-row .btn-outline.sq-hero-cta-tool {
  color: var(--sq-accent, #facc15) !important;
  border-color: var(--sq-accent, #facc15) !important;
  background: rgba(255,255,255,0.07) !important;
}
@media (max-width: 767px) {
  /* tighter padding + 14px icon so Loot "Forge Planner" stays 1 line in a 159px cell at 390 */
  .sq-hero-cta-row .btn-primary,
  .sq-hero-cta-row .btn-outline { padding: 0.75rem 0.875rem; }
  .sq-hero-cta-row .btn-outline.sq-hero-cta-tool svg { width: 0.875rem; height: 0.875rem; }
}
/* OVERRIDE the prod1b rule `@media (max-width: 379.98px) { .sq-hero-cta-row { grid-template-columns: 1fr } }` — load this sheet after prod1b. */
@media (max-width: 389.98px) {
  .sq-hero-cta-row { grid-template-columns: 1fr; margin-top: 1.25rem; }
}
@media (min-width: 390px) and (max-width: 767px) {
  .sq-hero-cta-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- S2 Top-nav tool item (Loot/Fish; Anime keeps .sq-nav-featured) ---------- */
.nav-tool {
  color: hsl(var(--brand-text));
  background-color: hsl(var(--brand-text) / 0.08);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-text) / 0.3);
}
.nav-tool:hover,
.nav-tool[aria-current="page"] { background-color: hsl(var(--brand-text) / 0.14); }
.dark .nav-tool { color: hsl(var(--brand-light)); } /* Loot dark: 4.57 -> above 6 */

/* ---------- S3 Tool card (one component: /codes/, guides) ---------- */
.tool-card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 0.875rem;
  padding: 1rem;
  border: 1px solid hsl(var(--brand-text) / 0.3);
  border-radius: 0.75rem;
  background-color: hsl(var(--brand-text) / 0.06);
}
.tool-card-icon,
.info-callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  color: hsl(var(--brand-text));
  background-color: hsl(var(--background));
  box-shadow: inset 0 0 0 1px hsl(var(--brand-text) / 0.25);
}
.tool-card-icon svg,
.info-callout-icon svg { width: 1.25rem; height: 1.25rem; }
.tool-card-title { margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); }
.tool-card-desc { margin: 0.125rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.tool-card-btn,
.info-callout-cta {
  grid-column: 1 / -1;
  gap: 0.375rem;
  min-height: 46px;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tool-card-btn svg,
.info-callout-cta svg { width: 1rem; height: 1rem; flex: none; }
@media (min-width: 640px) {
  .tool-card { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 1rem; padding: 1rem 1.25rem; }
  .tool-card-icon { width: 2.75rem; height: 2.75rem; }
  .tool-card-btn { grid-column: auto; }
}

/* ---------- S4 Info callout (Loot /guides/forge-recipes/ top; compact variant on the planner) ---------- */
.info-callout {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 0.875rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid hsl(var(--brand-text) / 0.3);
  border-radius: 1rem;
  background-color: hsl(var(--brand-text) / 0.05);
}
.info-callout-title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: hsl(var(--foreground)); }
.info-callout-body { grid-column: 1 / -1; margin: 0; font-size: 1rem; line-height: 1.625rem; color: hsl(var(--foreground)); }
.info-callout-body + .info-callout-body { margin-top: -0.25rem; }
.info-callout-cta { min-height: 48px; font-size: 1rem; width: 100%; }
@media (min-width: 768px) {
  .info-callout {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 1.25rem;
    row-gap: 0.375rem;
    padding: 1.5rem 1.75rem;
  }
  .info-callout-icon { width: 3rem; height: 3rem; grid-row: 1 / span 2; }
  .info-callout-icon svg { width: 1.5rem; height: 1.5rem; }
  .info-callout-body { grid-column: 2; }
  .info-callout-cta { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: auto; }
}
.info-callout--compact { margin-top: 0; padding: 1rem 1.25rem; }
.info-callout--compact .info-callout-title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.info-callout--compact .info-callout-body { font-size: 0.875rem; line-height: 1.375rem; }

/* ---------- S5 Forge Planner calculator (Loot) ---------- */
.forge-calc-grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 1024px) {
  .forge-calc-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
  .forge-result { position: sticky; top: 5rem; }
}
.ore-row-head,
.ore-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 2.75rem;
  column-gap: 0.5rem;
  align-items: center;
}
.ore-row { grid-template-areas: "ore count remove" "mult mult ."; row-gap: 0.375rem; }
.ore-row > .calc-select-wrap { grid-area: ore; }
.ore-row > .calc-qty { grid-area: count; }
.ore-row > .calc-remove { grid-area: remove; }
.ore-row > .calc-mult { grid-area: mult; }
.ore-row-head { padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.ore-rows { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 379.98px) {
  .ore-row-head, .ore-row { grid-template-columns: minmax(0, 1fr) 4rem 2.75rem; column-gap: 0.375rem; }
}
@media (min-width: 768px) {
  .ore-row-head, .ore-row { grid-template-columns: minmax(0, 1fr) 6rem 2.75rem; column-gap: 0.75rem; }
}
/* 3rd field state: agreed ore = one muted line; "Varies by source" ore = label + chip + own-value input */
.calc-mult { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.calc-mult b { font-weight: 700; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.calc-mult-label { font-weight: 600; }
.calc-mult .calc-field { flex: 1 0 100%; max-width: 14rem; }
.calc-mult .calc-field::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
.calc-field {
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--muted-foreground) / 0.75);
  border-radius: 0.5rem;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 1rem;          /* 16px: no iOS focus zoom */
  line-height: 1.5rem;
}
.calc-field:focus-visible { outline: 2px solid hsl(var(--brand-text)); outline-offset: 1px; border-color: hsl(var(--brand-text)); }
.calc-field[aria-invalid="true"] { border-color: hsl(var(--brand-text)); }
.calc-select-wrap { position: relative; min-width: 0; }
.calc-select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.calc-select-wrap > svg { position: absolute; right: 0.75rem; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; pointer-events: none; color: hsl(var(--muted-foreground)); }
.calc-qty { padding: 0 0.5rem; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.calc-qty::-webkit-outer-spin-button,
.calc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 0.5rem; background: transparent;
  color: hsl(var(--muted-foreground)); cursor: pointer;
}
.calc-remove:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }
.calc-remove:focus-visible { outline: 2px solid hsl(var(--brand-text)); outline-offset: -2px; }
.calc-remove svg { width: 1.125rem; height: 1.125rem; }
.ore-rows[data-count="1"] .calc-remove { visibility: hidden; }
.calc-qty, .calc-mult .calc-field { font-variant-numeric: tabular-nums; }
.calc-add { gap: 0.375rem; min-height: 44px; margin-top: 0.75rem; font-weight: 600; }
.calc-add svg { width: 1rem; height: 1rem; }
.calc-add[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.calc-hint { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 639.98px) { .calc-add { width: 100%; } }

.forge-result {
  border: 1px solid hsl(var(--brand-text) / 0.3);
  border-radius: 0.75rem;
  background-color: hsl(var(--brand-text) / 0.06);
  padding: 1rem 1.125rem;
}
.forge-result--empty { border-style: dashed; border-color: hsl(var(--muted-foreground) / 0.5); background-color: transparent; }
.forge-result-label { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.forge-result-value { margin-top: 0.25rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
.forge-result--empty .forge-result-value { color: hsl(var(--muted-foreground)); }
.forge-result-sub { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.forge-result-divider { height: 1px; margin: 1rem 0; background-color: hsl(var(--border)); }
.forge-cats { display: grid; gap: 0.875rem; margin: 0.625rem 0 0; padding: 0; list-style: none; }
.forge-cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.forge-cat-name { font-weight: 700; color: hsl(var(--foreground)); }
.forge-cat-pct { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
.forge-bar { position: relative; height: 0.5rem; margin-top: 0.375rem; overflow: hidden; border-radius: 9999px; background-color: hsl(var(--muted)); }
.forge-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background-color: hsl(var(--brand-text)); }
.forge-bar > .forge-bar-range { background-color: hsl(var(--brand-text) / 0.4); }
.forge-cat-src { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.forge-cat-srcs { margin: 0.375rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.125rem; color: hsl(var(--muted-foreground)); }
.forge-cat-srcs b { font-weight: 700; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.forge-cat--rest .forge-cat-name,
.forge-cat--rest .forge-cat-pct { font-weight: 600; color: hsl(var(--muted-foreground)); }
.forge-cat--rest .forge-bar > span { background-color: hsl(var(--muted-foreground) / 0.45); }
.forge-result-foot { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.125rem; color: hsl(var(--muted-foreground)); }
.forge-result-foot p + p { margin-top: 0.375rem; }
.forge-result-foot .forge-src-line { color: hsl(var(--foreground)); }
.forge-empty-note { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.375rem; color: hsl(var(--muted-foreground)); }

/* ---------- S6 Status chips: Reported + Expired only ---------- */
/* "Varies by source" reuses the neutral Reported chip look */
.code-status.code-status--varies { background: rgba(100,116,139,.14); color: #334155; border-color: rgba(100,116,139,.28); }
.dark .code-status.code-status--varies { background: rgba(148,163,184,.16); color: #cbd5e1; border-color: rgba(148,163,184,.3); }

/* ---------- S7 Event dates (time-limited guides: Loot Boss Invasion, later Anime Tower if event-bound) ---------- */
/* Neutral, informational: same tokens as a muted chip. Live and ended states share the styling; only the copy changes. */
.event-dates {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background-color: hsl(var(--muted) / 0.6);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.event-dates svg { width: 1rem; height: 1rem; flex: none; color: hsl(var(--muted-foreground)); }
.event-dates time { font-weight: 700; white-space: nowrap; }
.event-dates--sm { margin-top: 0.75rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
.event-dates--sm svg { width: 0.875rem; height: 0.875rem; }

/* ---------- S8 Expired block: longer intro + 44px summary ---------- */
.codes-expired summary { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* 38px -> 44px tap target; keeps the native marker */

/* "Source · date" pairs never break inside a pair (same rule the Code list already uses) */
.forge-cat-src .src-item,
.forge-result-foot .src-item,
.info-callout .src-item { white-space: nowrap; }

/* Light theme: .nav-tool current/hover text #19665e so contrast stays above 4.5 on the /.14 fill; dark and black unchanged. */
html:not(.dark) .nav-tool:hover,
html:not(.dark) .nav-tool[aria-current="page"] { color: #19665e; }
/* Table scrollport fix: tables inside .overflow-x-auto fill the box and wrap normally, but never
   shrink below their min-content width, so the wrapper scrolls only when a column cannot wrap any
   narrower. The wrapper is pinned so a wide table cannot stretch its ancestors. */
.overflow-x-auto {
  min-width: 0;
  max-width: 100%;
}
.overflow-x-auto > table,
.overflow-x-auto > table.w-full {
  width: 100%;
  min-width: min-content;
}
/* Codes mobile-card exception: the code tables switch to a card layout on small screens with
   overflow:visible, so they keep a plain full-width table. */
section[aria-label="Code list"] .overflow-x-auto > table,
section[aria-label="Code list"] .overflow-x-auto > table.w-full,
.codes-expired .overflow-x-auto > table,
.codes-expired .overflow-x-auto > table.w-full {
  width: 100%;
  min-width: 0;
}

/* Numeric table columns stay on one line (Rod stats: Luck, Speed, Max weight). */
#rod-stats + .overflow-x-auto td:nth-child(n+3) { white-space: nowrap; }
/* Short header label below 400px. The full label stays in the DOM (visually hidden) for screen readers and search. */
.th-short { display: none; }
@media (max-width: 399.98px) {
  .th-full { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .th-short { display: inline; text-decoration: none; }
  /* Narrow screens: slightly tighter cell padding so the one-line numbers still fit at 390px. */
  #rod-stats + .overflow-x-auto th,
  #rod-stats + .overflow-x-auto td { padding-left: 0.375rem; padding-right: 0.375rem; }
}

/* Adsterra slots: Native top + 300x250 bottom, reserved height (no CLS), theme-following, Sponsored label */
.ad-wrap{box-sizing:border-box;width:100%;max-width:48rem;margin:2rem auto}
.ad-wrap--top{min-height:90px}
@media (min-width:640px){.ad-wrap--top{min-height:100px}}
.ad-wrap--bottom{min-height:calc(250px + 2.35rem + 2px)}
.ad-wrap--inset{width:calc(100% - 2rem)}
.ad-wrap--grid{grid-column:1/-1;margin:.5rem auto}
.ad-slot{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;width:100%;height:100%;min-height:inherit;margin:0;padding:.35rem .5rem .5rem;border:1px solid hsl(var(--border));border-radius:.5rem;background:hsl(var(--card));overflow:visible}
.ad-slot__label{display:block;font-size:.6875rem;line-height:1rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.ad-slot__body{display:flex;justify-content:center;align-items:center;width:100%}
.ad-slot__body--native,.ad-slot__body--native>div{display:block;width:100%;max-width:100%}
.ad-slot--bottom{align-items:center}
.ad-slot__body--banner{flex:0 0 auto;width:300px;height:250px;overflow:hidden}
.ad-slot__body--banner>div,.ad-slot__body--banner iframe{display:block;width:300px;height:250px;border:0}
@media (max-width:339.98px){.ad-wrap--bottom{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}.ad-wrap--bottom .ad-slot{border-radius:0;border-left:0;border-right:0;padding-inline:0}}