/* === Shared primitives for the Stardew guides ===
 *
 * Loaded before each page's own stylesheet, so anything here can be overridden
 * below. Eleven pages had a byte-identical copy of the tab bar; this is the one
 * canonical version.
 *
 * A page picks its accent by mapping its own palette onto three variables:
 *
 *   :root { --tab-bg: var(--cc-bg); --tab-accent: var(--cc); --tab-text: var(--cc-dark); }
 *
 * Because those aliases resolve at use time, a page's html.dark block that
 * re-tints --cc automatically re-tints the tabs too — no dark-mode duplication.
 * (Named --tab-* rather than --accent because calendar.js sets --accent inline
 * per button for its per-season colours.) */

/* --- Tab bar --- */
.tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.45rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.tab {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab:hover {
  color: var(--ink);
  background: var(--tab-bg);
  transform: none;
  border-color: transparent;
}
.tab.picked {
  background: var(--tab-bg);
  border-color: var(--tab-accent);
  color: var(--tab-text);
}

/* --- Footer source note, used under every guide --- */
.src { display: block; margin-top: 0.3rem; font-size: 0.92em; opacity: 0.85; }

/* Where the numbers come from. These guides are only as good as the source they
   were checked against, so the source gets named and linked rather than left as
   "community references". */
.credit {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.credit a { color: inherit; text-decoration: underline; }
.credit a:hover { color: var(--primary-dark); }

/* The work-in-progress caveat. It used to be a large yellow slab under the hub's
   title, which put a warning in front of you before you had seen a single thing it
   was warning about. It belongs with the other small print, at the foot of the
   page, on every guide rather than just two of them. */
.wip {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}