/* === Stardew Valley Value Guide === */

:root {
  --q-silver: #8e98a6;
  --q-gold: #d6a32e;
  --q-irid: #9b6dd6;
  --q-irid-bg: #efe6fb;
  --gain: #3a9d6e;
}

/* Wider page so the data tables can show every column on desktop; text stays readable. */
main { max-width: 960px; }
.subtitle, .profit-basis, .sub-desc, .table-foot { max-width: 660px; }

/* --- Tabs (self-contained; this card doesn't load decide.css) --- */
.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: 90px;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab:hover {
  color: var(--ink);
  background: var(--pick-bg);
  transform: none;
  border-color: transparent;
}
.tab.picked {
  background: var(--pick-bg);
  border-color: var(--pick-border);
  color: var(--primary-dark);
}
.tabs.subtabs {
  margin-bottom: 0.75rem;
  box-shadow: none;
  background: #fffaf5;
}

/* --- Filters --- */
.sdv-search {
  width: 100%;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font: inherit;
  background: var(--card);
  transition: border-color 0.15s ease;
}
.sdv-search:focus { outline: none; border-color: var(--primary); }

.filter-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.filter-label {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  min-width: 86px;
}
.filter-row .options { flex: 1; gap: 0.4rem; }

.filter-row .pill {
  padding: 0.34rem 0.8rem;
  font-size: 0.85rem;
}
/* profession pills carry a tiny tooltip via title; tint when active */
.pill.prof.picked {
  background: #e7f4ee;
  border-color: var(--gain);
  color: #277552;
}

/* quality selector pills, tinted by tier when active */
.pill.q-pill.picked.q-reg    { background: #eef0f4; border-color: var(--ink); color: var(--ink); }
.pill.q-pill.picked.q-silver { background: #eef1f5; border-color: var(--q-silver); color: var(--q-silver); }
.pill.q-pill.picked.q-gold   { background: #fdf3da; border-color: var(--q-gold); color: #9a6a00; }
.pill.q-pill.picked.q-irid   { background: var(--q-irid-bg); border-color: var(--q-irid); color: var(--q-irid); }

/* clickable price rows */
.sdv-table tr.clickable { cursor: pointer; }
.go {
  color: var(--border);
  font-weight: 700;
  margin-left: 0.4rem;
  transition: color 0.12s ease, transform 0.12s ease;
  display: inline-block;
}
.sdv-table tr.clickable:hover .go { color: var(--primary); transform: translateX(2px); }
.price-cell { font-weight: 700; color: var(--primary-dark); }
.price-cell.botanist::after { content: " ✦"; color: var(--q-irid); font-size: 0.8em; }

/* back link */
.link-back {
  background: none;
  border: none;
  padding: 0.2rem 0;
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  width: auto;
}
.link-back:hover { color: var(--primary-dark); transform: none; border: none; }

/* detail header + price chips */
.detail-head { margin: 0.25rem 0 1rem; }
.detail-head h2 {
  margin: 0 0 0.2rem;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--primary-dark);
}
.detail-meta { margin: 0; color: var(--muted); font-size: 0.95rem; }

.price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.5rem;
}
.chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  min-width: 74px;
}
.chip.picked { border-color: var(--pick-border); box-shadow: 0 2px 8px rgba(255,107,157,0.18); }
.chip .chip-q { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.chip .chip-v {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chip.q-silver .chip-v { color: var(--q-silver); }
.chip.q-gold .chip-v { color: var(--q-gold); }
.chip.q-irid .chip-v { color: var(--q-irid); }
.chip-note { color: var(--muted); font-size: 0.82rem; }
.no-proc { background: #fffaf5; border: 2px dashed var(--border); border-radius: 14px; padding: 0.9rem 1.1rem; }

/* --- Table --- */
.table-wrap {
  margin-top: 1rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  background: var(--card);
  box-shadow: var(--shadow);
  max-height: 70vh;
}
.sdv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.sdv-table th,
.sdv-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
}
.sdv-table th.num, .sdv-table td.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sdv-table .cell-days { white-space: nowrap; }
.sdv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff4ef;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--border);
  font-size: 0.82rem;
}
.sdv-table th.sortable { cursor: pointer; user-select: none; }
.sdv-table th.sortable:hover { color: var(--primary-dark); }
.sdv-table th.sorted::after { content: " \25BE"; color: var(--primary); }
.sdv-table th.sorted.asc::after { content: " \25B4"; }

.sdv-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s ease; }
.sdv-table tbody tr:last-child { border-bottom: none; }
.sdv-table tbody tr:hover { background: #fff7f2; }

.item-name { font-weight: 700; color: var(--ink); }
.tag-forage {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0 0.25rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cell-loc { color: var(--muted); font-size: 0.82rem; white-space: normal; }
.cell-days { color: var(--muted); font-size: 0.82rem; }

.q-reg  { color: var(--ink); }
.q-silver { color: var(--q-silver); }
.q-gold { color: var(--q-gold); font-weight: 700; }
.q-irid { color: var(--q-irid); }
td.q-irid.guaranteed { background: var(--q-irid-bg); font-weight: 700; border-radius: 6px; }
.dash { color: var(--border); }
.boosted { position: relative; }
.boosted::after {
  content: "▲";
  font-size: 0.55em;
  color: var(--gain);
  margin-left: 0.15rem;
  vertical-align: super;
}

.table-foot { color: var(--muted); font-size: 0.8rem; margin: 0.6rem 0 0; }
.empty-note { color: var(--muted); text-align: center; padding: 1.5rem 0; }

/* --- Best way to sell --- */
.sdv-select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.sdv-select:focus { outline: none; border-color: var(--primary); }

.prof-inline { margin-top: 0.85rem; gap: 0.4rem; }
.prof-inline .pill { font-size: 0.85rem; padding: 0.34rem 0.8rem; }

.sell-method {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.sell-method .m-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.sell-method .m-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
.sell-method .m-value {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sell-method .m-value small { font-size: 0.6em; color: var(--muted); font-weight: 600; }
.sell-method .bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: var(--pick-bg);
  overflow: hidden;
}
.sell-method .bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width 0.4s cubic-bezier(0.17,0.89,0.32,1.0);
}
.sell-method.best {
  border-color: var(--q-gold);
  box-shadow: 0 6px 20px rgba(214,163,46,0.28);
}
.sell-method.best .m-value { color: var(--q-gold); }
.sell-method.best .bar > span { background: linear-gradient(90deg, #f0c75a, var(--q-gold)); }
.best-badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--q-gold);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.sell-head {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0.5rem 0 1rem;
  color: var(--ink);
}
.proc-caption {
  margin: -0.6rem 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.proc-caption strong { color: var(--primary-dark); }
.sell-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
  line-height: 1.45;
}

/* --- Profitability --- */
.sub-desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.5rem; line-height: 1.45; }
.profit-basis {
  background: var(--q-irid-bg);
  border: 1px solid #d9c6f0;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: #5a4576;
  line-height: 1.45;
}
.profit-basis strong { color: var(--q-irid); }
.sdv-table td.rank { color: var(--muted); font-weight: 700; width: 1.5rem; text-align: right; }
.sdv-table tbody tr.top td { background: #fffaf0; }
.sdv-table tbody tr.top td.metric { color: var(--q-gold); font-weight: 700; }
.metric { font-weight: 700; color: var(--primary-dark); }
.season-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.s-spring { background: #e7f4ee; color: #277552; }
.s-summer { background: #fff0cc; color: #9a6a00; }
.s-fall   { background: #ffe2d4; color: #b04a23; }
.s-winter { background: #e2eef6; color: #2f6c93; }
.s-other  { background: var(--pick-bg); color: var(--primary-dark); }

/* --- Frozen label column(s): the item name stays put when scrolling right --- */
#prices-table th.freeze-name, #prices-table td.freeze-name,
#profit-table th.rank, #profit-table td.rank,
#profit-table th.freeze-name, #profit-table td.freeze-name {
  position: sticky;
}
#prices-table td.freeze-name,
#profit-table td.rank, #profit-table td.freeze-name {
  background: var(--card);
  z-index: 1;
}
#prices-table th.freeze-name, #prices-table td.freeze-name { left: 0; }
#profit-table th.rank, #profit-table td.rank {
  left: 0; width: 2.6rem; min-width: 2.6rem;
  padding-left: 0.55rem; padding-right: 0.35rem;
}
#profit-table th.freeze-name, #profit-table td.freeze-name { left: 2.6rem; }
#prices-table thead th.freeze-name,
#profit-table thead th.rank,
#profit-table thead th.freeze-name { z-index: 3; }
#prices-table tbody tr:hover td.freeze-name,
#profit-table tbody tr:hover td.rank,
#profit-table tbody tr:hover td.freeze-name { background: #fff7f2; }
#profit-table tbody tr.top td.rank,
#profit-table tbody tr.top td.freeze-name { background: #fffaf0; }
#prices-table th.freeze-name, #prices-table td.freeze-name,
#profit-table th.freeze-name, #profit-table td.freeze-name {
  border-right: 1px solid var(--border);
}

@media (max-width: 500px) {
  .sdv-table { font-size: 0.82rem; }
  .sdv-table th, .sdv-table td { padding: 0.4rem 0.5rem; }
  .filter-label { min-width: 100%; }
  .tab { font-size: 0.88rem; padding: 0.45rem 0.6rem; min-width: 0; }
  .th-days, .cell-days { display: none; }
  .sell-method .m-value { font-size: 1.25rem; }
}

/* === Expandable processed-item detail === */
.sdv-table tr.expandable { cursor: pointer; }
.sdv-table tr.expandable:hover td { background: var(--pick-bg); }
.exp-caret {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--primary);
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.sdv-table tr.open .exp-caret { transform: rotate(90deg); }
.sdv-table tr.open td { background: var(--pick-bg); }
#profit-table tbody tr.expandable:hover td.rank,
#profit-table tbody tr.expandable:hover td.freeze-name,
#profit-table tbody tr.open td.rank,
#profit-table tbody tr.open td.freeze-name { background: var(--pick-bg); }

.detail-row td {
  padding: 0 !important;
  background: var(--bg);
  border-bottom: 2px solid var(--pick-border);
}
.proc-detail {
  position: sticky;
  left: 0;
  width: min(680px, 92vw);
  padding: 1rem 1.1rem 1.1rem;
  box-sizing: border-box;
}
.pd-title {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.75rem;
}

.pstages {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.pstage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
}
.pstage.total { background: var(--pick-bg); border-color: var(--pick-border); }
.pstage-days {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.05rem;
  line-height: 1.1;
}
.pstage-name { font-size: 0.85rem; font-weight: 600; }
.pstage-note { font-size: 0.72rem; color: var(--muted); }
.pstage-plus { align-self: center; color: var(--muted); font-weight: 700; padding: 0 0.1rem; }

.pc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.4rem;
}
.pc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.pc-k { color: var(--muted); font-weight: 600; }
.pc-v { font-weight: 700; text-align: right; }
.pc-v small { font-weight: 600; color: var(--muted); font-size: 0.8em; }
.pc.hl .pc-v { color: var(--primary-dark); }
.pd-foot { margin: 0.85rem 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 560px) {
  .pc-grid { grid-template-columns: 1fr; gap: 0.1rem; }
  .proc-detail { padding: 0.85rem 0.9rem 1rem; }
}

/* Work-in-progress badge */
.wip-note {
  display: inline-block;
  margin: 0.1rem 0 0.9rem;
  padding: 0.3rem 0.85rem;
  background: var(--pick-bg);
  color: var(--primary-dark);
  border: 1px dashed var(--pick-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* --- Print button --- */
.print-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--btn);
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.print-btn:hover { border-color: var(--primary); color: var(--primary-dark); }

@media print {
  @page { size: landscape; margin: 0.5cm; }
  .crumb, .tabs, .subtabs, .sdv-search, .filter-row, .wip-note,
  .link-back, .empty-note, .print-btn, footer { display: none !important; }
  body {
    background: #fff !important;
    padding: 0.3rem 0 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main { max-width: none !important; }
  .header { margin-bottom: 0.4rem; }
  h1, .subtitle, .profit-basis, .table-foot { color: #000; }
  .table-wrap { overflow: visible !important; box-shadow: none !important; }
  .sdv-table { font-size: 0.72rem; box-shadow: none !important; }
  .sdv-table th, .sdv-table td { padding: 0.25rem 0.4rem; }
  .sdv-table tr { break-inside: avoid; }
  .sdv-table thead { display: table-header-group; }
  .sell-method { box-shadow: none !important; break-inside: avoid; }
}