/* Progression ledger additions. The existing field-desk visual system stays intact. */
.decision-copy {
  min-width: 0;
  display: grid;
  gap: .22rem;
}

.codrop-line,
.winner-line {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.codrop-line {
  color: var(--sage);
}

.winner-line {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 8px;
}

.winner-line b {
  color: var(--text);
  font-weight: 700;
}

.route-evidence {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  max-width: 64ch;
  color: var(--muted);
  line-height: 1.38;
}

.route-evidence > span {
  display: block;
}

.confidence {
  width: max-content;
  padding: .13rem 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--ui), monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
}

.confidence-3 { color: var(--sage); border-color: color-mix(in srgb, var(--sage) 50%, var(--line)); }
.confidence-2 { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.confidence-0 { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }

.hoard-note {
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--sage) 50%, var(--line));
  color: var(--muted);
}

.trail-stop.green strong {
  color: var(--sage);
}

@media (max-width: 760px) {
  .winner-line { display: grid; grid-template-columns: auto 1fr; }
  .decision-copy { grid-column: 2 / -1; }
  .decision-cost { grid-column: 2 / -1; }
}

/* Phase 2 — the landing page is a working dispatch desk, not a sales page. */
.dispatch-board {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .72fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  min-height: 380px;
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0 3rem;
  border-bottom: 1px solid var(--line);
}

.dispatch-copy h1 { max-width: 850px; }
.dispatch-copy > p { max-width: 680px; margin-top: 24px; font-size: 16px; }

.dispatch-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  padding: 16px 16px 16px;
  color: var(--ink);
  background: var(--paper);
  box-shadow:none;

}

.dispatch-ticket::after {
  content: "";
  position: absolute;
  inset: 0 32% 0 auto;
  border-left: 1px dashed var(--line);
  pointer-events: none;
}

.ticket-stub {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font: 500 12px var(--ui), monospace;
  letter-spacing: 0;
  text-transform: none;
}

.dispatch-ticket .primary-action {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  border: 0;
  padding: 16px 16px;
  color: var(--dusk);
  background: var(--green);
  font-weight: 700;
}

.dispatch-ticket .primary-action:hover { background: color-mix(in srgb, var(--lantern) 85%, var(--chalk)); }
.dispatch-ticket > small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

.recent-plan { min-height: 68px; margin-top: 32px; }
.recent-button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  min-width: min(100%, 490px);
  padding: 12px 16px;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--ink2);
  text-align: left;
}
.recent-button > span { grid-column: 1 / -1; color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; }
.recent-button strong { display: flex; align-items: center; gap: 12px; font-family: var(--ui), serif; font-size: 16px; }
/* The 30px tile hangs ~8px below the letter baseline, so a geometric centre
   reads low next to the smaller type. Lift it optically without moving layout. */

.recent-button b { color: var(--muted); font-size: 12px; }
.recent-button:hover { border-color: var(--gold); }
.recent-empty { color: var(--muted); font-size: 12px; }

.desk-tools {
  margin: -16px 0 32px;
  color: var(--muted);
  font-size: 12px;
}

.desk-tools .text-action { font-size: 12px; }

.desk-drawers {
  display: grid;
  /* Six work areas. Five columns left Places alone on a second row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0;
  padding: 1px;
  background: var(--line);
}

.desk-drawer {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 24px;
  border: 0;
  color: var(--text);
  background: var(--ink2);
  text-align: left;
}
.desk-drawer.featured { box-shadow: inset 0 2px var(--green); }
.desk-drawer:hover { background: var(--paper2); }
.drawer-code { color: var(--muted); font: 600 12px var(--ui), sans-serif; letter-spacing: .04em; }
.desk-drawer strong { margin-top: 16px; font: 700 20px var(--ui), sans-serif; letter-spacing: -.01em; }
.desk-drawer p { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.drawer-action { margin-top: auto; padding-top: 16px; color: var(--green); font-size: 13px; font-weight: 600; }

.desk-lower { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.readiness-card, .rule-card { padding: 24px; border: 1px solid var(--line); background: var(--slate); }
.readiness-score { color: var(--gold); font: 500 12px var(--ui), monospace; }
.readiness-rows > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }
.readiness-rows b { color: var(--muted); font-family: var(--ui), monospace; font-size: 12px; }
.readiness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); }
.readiness-dot.ready { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent); }
.rule-card h2 { max-width: 470px; }
.rule-stack { margin: 16px 0; }
.rule-stack > div { padding: 12px 0; border-top: 1px solid var(--line); }
.rule-stack span { color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; }
.rule-stack p { margin-top: 4px; font-size: 12px; }
.text-action { padding: 0; border: 0; color: var(--gold); background: transparent; font-weight: 700; font-size: 12px; }

.account-import-callout {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
  margin: 24px 0;
  padding: 16px 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line));
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.account-import-callout strong { font-family: var(--ui), serif; font-size: 20px; }
.account-import-callout p { margin-top: 4px; font-size: 12px; }
.account-import-callout a { flex: 0 0 auto; text-decoration: none; }

.lab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 24px 0; background: var(--line); border: 1px solid var(--line); }
.lab-principles article { padding: 16px; background: var(--ink2); }
.lab-principles span { color: var(--gold); font: 500 12px var(--ui), monospace; }
.lab-principles strong { display: block; margin-top: 12px; font-family: var(--ui), serif; font-size: 16px; }
.lab-principles p { margin-top: 4px; font-size: 12px; }

.knowledge-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px 0 16px; border: 1px solid var(--line); background: var(--line); }
.knowledge-status > div { display: grid; grid-template-columns: 10px 1fr; gap: 4px 12px; align-items: center; padding: 16px; background: var(--ink2); }
.knowledge-status strong { font-size: 12px; }
.knowledge-status b { grid-column: 2; color: var(--gold); font: 500 12px var(--ui), monospace; }
.knowledge-status > p { grid-column: 1 / -1; padding: 12px 16px; background: color-mix(in srgb, var(--amber) 10%, transparent); font-size: 12px; }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-light.good { background: var(--green); }
.status-light.warn { background: var(--amber); }
.library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.source-list > p { margin: -8px 0 16px; font-size: 12px; }
.strategy-rules article, .mechanics-index article { padding: 16px 0; border-top: 1px solid var(--line); }
.strategy-rules article > div { display: flex; justify-content: space-between; gap: 16px; }
.strategy-rules span, .strategy-rules b { font: 500 12px var(--ui), monospace; text-transform: none; }
.strategy-rules span { color: var(--gold); }
.strategy-rules b { color: var(--amber); }
.strategy-rules b.supported { color: var(--green); }
.strategy-rules p { margin-top: 8px; font-size: 12px; }
.strategy-rules small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.mechanics-index article > div { display: flex; gap: 12px; align-items: center; }
.mechanics-index strong, .mechanics-index small { display: block; }
.mechanics-index small { color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; }
.mechanics-index p { margin: 8px 0 4px; font-size: 12px; }
.mechanics-index > article > b { color: var(--muted); font-size: 12px; font-weight: 500; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--lantern);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .dispatch-board { grid-template-columns: 1fr; min-height: 0; }
  .dispatch-ticket { max-width: 680px; }
  .desk-drawers { grid-template-columns: repeat(2, 1fr); }
  .knowledge-status { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .masthead { overflow: hidden; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tab { flex: 0 0 auto; }
  .desk-lower, .library-grid { grid-template-columns: 1fr; }
  .lab-principles { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .masthead { height: auto; min-height: 68px; flex-wrap: wrap; padding-top: 12px; }
  .brand { flex: 1 1 auto; }
  .tabs { order: 3; width: calc(100vw - 24px); height: 42px; }
  .tab { padding: 0 12px; }
  .dispatch-board { padding-top: 2.5rem; gap: 32px; }
  .dispatch-ticket { grid-template-columns: 1fr; box-shadow:none; }
  .dispatch-ticket::after { display: none; }
  .ticket-stub, .dispatch-ticket .primary-action, .dispatch-ticket > small { grid-column: 1; }
  .desk-drawers, .knowledge-status { grid-template-columns: 1fr; }
  .desk-drawer { min-height: 195px; }
  .account-import-callout { align-items: flex-start; flex-direction: column; }
  .knowledge-status > p { grid-column: 1; }
}

/* Phase 2 refinement — calmer hierarchy, explicit locations, local account review.
   Palette now lives solely in style.css :root (the almanac theme); this block
   used to redefine it dark and was overriding the theme. */
body {
  background: var(--ink);
}

.masthead {
  background: var(--dusk);
  backdrop-filter: none;
}

.resource-trail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-shadow: none;
  margin-bottom: 16px;
}
@media (max-width: 860px) { .resource-trail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .resource-trail { grid-template-columns: minmax(0, 1fr); } .trail-stop { min-height: 0; border-right: 0; } }

.route-grid.three {
  grid-template-columns: 1.1fr 1fr 1fr;
}

.route-card {
  min-height: 0;
  box-shadow: none;
}

.route-card::before,
.market-route::before,
.grind-route::before {
  background: var(--line);
}

.verdict-route::before {
  background: var(--green);
}

.planner-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-bottom: 35px;
}

.planner-switches .event-switch { margin: 0; }

.drink-switch select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--ink3);
  font: inherit;
  font-size: 12px;
}

.planner-notice {
  margin: -24px 0 32px;
  padding: 8px 12px;
  border-left: 3px solid var(--amber);
  color: var(--muted);
  background: var(--ink2);
  font-size: 12px;
}

.planner-notice .text-action { font-size: 12px; }

.event-switch {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  margin: 0 0 35px auto;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--ink2);
  cursor: pointer;
}

.event-switch input {
  accent-color: var(--amber);
}

.event-switch b,
.event-switch small {
  display: block;
}

.event-switch b { font-size: 12px; }
.event-switch small { margin-top: .12rem; color: var(--muted); font-size: 12px; }

.decision-controls {
  display: grid;
  gap: 8px;
}

.location-choice {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  min-width: 190px;
}

.location-choice > span {
  color: var(--muted);
  font: 500 12px var(--ui), monospace;
  letter-spacing: 0;
  text-transform: none;
}

.location-choice select {
  width: 100%;
  padding: 8px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--ink);
  font-size: 12px;
}

.drop-chips {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 8px;
  margin-top: .2rem;
}

.drop-chip,
.account-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.drop-chip {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
}

.item-art.drop-art {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.drop-chip b,
.drop-chip small {
  display: block;
}

.drop-chip b { color: var(--text); font-size: 12px; }
.drop-chip small { color: var(--muted); font-size: 12px; }

.event-warning {
  padding: 8px 12px;
  border-left: 2px solid var(--amber);
  color: var(--text);
  background: color-mix(in srgb, var(--sage) 12%, transparent);
}

.route-choice.trade,
.route-choice.explore,
.route-choice.acorn,
.route-choice.fish,
.route-choice.vendor {
  color: var(--muted);
}

.route-choice.crop,
.route-choice.covered {
  color: var(--green);
}

.account-import-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 24px 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.account-import-copy {
  padding: 24px;
  background: var(--ink2);
}

.account-import-copy h2 { font-size: 24px; }
.account-import-copy p { margin-top: 8px; font-size: 12px; }

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.primary-link {
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--ink);
  background: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.snapshot-drop {
  display: grid;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.snapshot-drop input { width: 100%; color: var(--muted); }
.snapshot-drop strong, .snapshot-drop small { display: block; }
.snapshot-drop small { color: var(--muted); font-size: 12px; }

.account-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--ink2);
}

.account-empty strong { color: var(--text); }

.account-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.account-summary article {
  display: grid;
  gap: .24rem;
  padding: 16px;
  background: var(--ink2);
}

.account-summary span,
.account-summary small {
  color: var(--muted);
  font-size: 12px;
}

.account-summary span { font-family: var(--ui), monospace; text-transform: none; }
.account-summary strong { font: 650 20px var(--ui), serif; }

.account-consumables {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
}

.account-consumables > span {
  display: grid;
  grid-template-columns: 32px auto;
  grid-template-rows: auto auto;
  gap: 0 8px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--ink2);
}

.account-consumables .item-art { grid-row: 1 / 3; }
.account-consumables b { font-size: 12px; }
.account-consumables small { color: var(--muted); font-size: 12px; }

.account-review-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 16px 16px;
  border-left: 3px solid var(--gold);
  background: var(--ink2);
}

.account-review-bar p { margin-top: .2rem; font-size: 12px; }
.account-review-bar .primary-action { border: 0; padding: 12px 16px; color: var(--ink); background: var(--gold); font-weight: 800; }

.account-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.account-detail-grid > article,
.account-warnings {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--ink2);
}

.account-detail-grid h2,
.account-warnings h2 { margin-bottom: 12px; font-size: 20px; }

.account-kv > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.account-kv span { color: var(--muted); text-transform: capitalize; }
.account-list { display: grid; gap: 8px; margin-top: 16px; }
.account-list > strong { color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; }
.account-list > span { color: var(--muted); font-size: 12px; }
.account-warnings { margin-top: 16px; }
.account-warnings p { padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.account-warnings .apply-success { color: var(--green); }

@media (max-width: 980px) {
  .route-grid.three { grid-template-columns: 1fr; }
  .account-summary { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .account-import-panel,
  .account-detail-grid { grid-template-columns: 1fr; }
  .account-summary { grid-template-columns: repeat(2, 1fr); }
  .account-review-bar { align-items: flex-start; flex-direction: column; }
  .decision-controls { grid-column: 2 / -1; }
  .event-switch { margin-left: 0; }
}

/* Cider-vs-AP working, shown under the planner switches */
.drink-compare{line-height:1.55}
.drink-compare b{color:var(--text)}
.stamina-switch input[type=number]{width:5.5rem;text-align:right}

/* Gathered goals (fish / explore / grow) — the Craft page's answer for
   something with no recipe: two plain options, no computed winner. */
.gather-panel { margin: 24px 0 8px; padding: 16px 16px 16px; border: 1px solid var(--line); background: var(--slate); }
.gather-head h2 { margin: .15rem 0 0; font-family: var(--ui), serif; font-size: 20px; line-height: 1.25; }
.gather-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.gather-where, .gather-where-fixed { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 12px; }
.gather-where > span, .gather-where-fixed > span { color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; }
.gather-where select { flex: 1 1 auto; max-width: 420px; }
.gather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 12px; }
.gather-col { padding: 12px 16px; border: 1px solid var(--line); background: var(--dusk); }
.gather-col > span { display: block; color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.gather-line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.gather-line:first-of-type { border-top: 0; }
.gather-line b { font-weight: 500; font-size: 13px; }
.gather-line strong { font-family: var(--ui), serif; font-size: 16px; }
.gather-line small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.gather-path { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.gather-path > span { display: block; color: var(--muted); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.gather-path .gather-line:first-of-type { border-top: 0; }
.gather-methods { display: grid; gap: 4px; margin-top: .2rem; }
.gather-method { display: flex; gap: 8px; align-items: flex-start; padding: 4px 8px; border: 1px solid transparent; cursor: pointer; }
.gather-method.on { border-color: color-mix(in srgb, var(--sage) 50%, var(--line)); background: color-mix(in srgb, var(--sage) 12%, transparent); }
.gather-method b { font-size: 13px; font-weight: 500; }
.gather-method small { display: block; color: var(--muted); font-size: 12px; }
.gather-none { margin: 0; color: var(--muted); font-size: 12px; }
.gather-acorn { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.gather-acorn small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gather-acorn b { font-size: 13px; }
.gather-mastery { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.gather-mastery b { color: var(--gold); }
.gather-others { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.gather-others b { color: var(--text); font-weight: 600; }
@media (max-width: 620px) { .gather-grid { grid-template-columns: 1fr; } .gather-where { flex-wrap: wrap; } }

/* --- whole-page guards ------------------------------------------------- */
/* Wide content scrolls inside its own box; the page itself never does. */
html, body { overflow-x: hidden; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs { scrollbar-width: thin; }

/* One consistent focus ring, so keyboard users can always see where they are. */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lantern);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Every way to get one ingredient, laid out on its row. The player picks;
   nothing is decided for them on price. */
.path-choices { display: grid; gap: 4px; margin-top: 8px; }
.path-head { color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; }
.path-pick {
  display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
  padding: 4px 8px; border: 1px solid transparent; cursor: pointer;
}
.path-pick.on { border-color: color-mix(in srgb, var(--sage) 50%, var(--line)); background: color-mix(in srgb, var(--sage) 12%, transparent); }
.path-pick.muted { cursor: default; opacity: .6; grid-template-columns: 1fr; }
.path-pick b { font-size: 12px; font-weight: 600; }
.path-pick small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.path-buy { padding: 4px 8px; border-top: 1px solid var(--line); }
.path-buy b { font-size: 12px; font-weight: 600; }
.path-buy small { color: var(--muted); font-size: 12px; }
.path-buy.muted { opacity: .6; }

.buy-rate { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.buy-rate .buy-per-k { width: 62px; padding: .12rem 4px; font: 500 12px var(--ui), monospace; }
.buy-rate .buy-cur { padding: .12rem .2rem; font-size: 12px; }
.buy-rate small { color: var(--muted); font-size: 12px; }
.buy-total { display: block; margin-top: .2rem; color: var(--muted); font-size: 12px; }
.buy-total b { color: var(--text); }
.buy-total.muted { font-style: italic; opacity: .8; }

/* What else the run brings in. Small chips so a 20-item haul stays scannable
   without competing with the item you actually came for. */
.gather-haul { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.gather-haul-head { display: block; color: var(--gold); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.haul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 4px; }
.haul-chip { display: grid; grid-template-columns: 26px 1fr; gap: 4px; align-items: center; padding: 4px 4px; border: 1px solid var(--line); background: var(--dusk); }
.haul-chip .item-art.haul-art { width: 26px; height: 26px; border-radius: 4px; }
.haul-chip b { display: block; font-size: 12px; font-weight: 600; }
.haul-chip small { display: block; color: var(--muted); font-size: 12px; line-height: 1.25; }
@media (max-width: 620px) { .haul-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }

/* Meal toggles: the picture is the control. Active state is a soft raised
   tile with a check, not a block of amber — that read as an alert, not a
   setting. The Hide control only collapses the row; it never changes a meal. */
.meal-strip-head { display: flex; align-items: center; gap: 8px; }
.meal-strip-head small { color: var(--muted); font: 500 12px var(--ui), monospace; text-transform: none; letter-spacing: 0; }
.meal-strip-toggle {
  margin-left: auto; padding: .1rem 8px; border: 1px solid var(--line);
  background: none; color: var(--muted); font: 500 12px var(--ui), monospace;
  text-transform: none; letter-spacing: 0; cursor: pointer; border-radius: 4px;
}
.meal-strip-toggle:hover { color: var(--text); border-color: var(--muted); }

.meal-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.meal-chip {
  position: relative; display: grid; grid-template-columns: 24px auto; gap: 4px;
  align-items: center; padding: 4px 8px 4px 4px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--dusk); cursor: pointer;
  opacity: .55; transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}
.meal-chip:hover { opacity: .85; }
.meal-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.meal-chip.on { opacity: 1; border-color: var(--water); background: var(--on-wash); }
.meal-chip.on::after {
  content: "✓"; position: absolute; top: -6px; right: -6px;
  width: 14px; height: 14px; display: grid; place-items: center;
  border-radius: 50%; background: var(--water); color: var(--dusk); font-size: 12px; font-weight: 700;
}
.meal-chip-name { font-size: 12px; font-weight: 500; white-space: nowrap; }
.meal-chip .item-art.meal-chip-art { width: 24px; height: 24px; border-radius: 4px; }
.meal-chip input:focus-visible + .item-art { outline: 2px solid var(--lantern); outline-offset: 2px; }