/* Resource swatches and the resource mix grid (site/resources.js). The swatch colors are the header's
   tile colors (identity only); the grid tint encodes how far a player leans toward a resource. */
:root {
  --res-tint: 70%;  /* strongest lean; kept lower in dark mode so the light text keeps 4.5:1 */
  --res-wood: #2f6b3a; --res-brick: #b3532e; --res-sheep: #93c15a; --res-wheat: #e3b23c; --res-ore: #7d858c;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --res-tint: 40%;
    --res-wood: #4f9a5c; --res-brick: #cf6a43; --res-sheep: #9fcb69; --res-wheat: #e8bd52; --res-ore: #9aa2a9;
  }
}
:root[data-theme="dark"] {
  --res-tint: 40%;
  --res-wood: #4f9a5c; --res-brick: #cf6a43; --res-sheep: #9fcb69; --res-wheat: #e8bd52; --res-ore: #9aa2a9;
}

.res-sw { display: inline-block; width: 12px; height: 13px; flex: none; background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.res-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.res-v { display: flex; align-items: center; gap: 8px; }
.res-v .res-sw { width: 18px; height: 20px; }
.res-matrix th.colh .res-name { flex-direction: column; gap: 4px; font-size: 13px; }
.res-matrix td .cell.res-cell { background: color-mix(in oklab, var(--rc, var(--surface)) calc(var(--t, 0) * var(--res-tint)), var(--surface));
  box-shadow: inset 0 0 0 1px var(--hair); }
.res-matrix td .cell.res-cell span { color: var(--ink); font-variant-numeric: tabular-nums; }
.res-matrix td .cell.res-cell.clear span strong { font-weight: 750; }
.res-matrix tr.res-all th, .res-matrix tr.res-all td .cell b { color: var(--ink-2); font-weight: 600; }
.res-matrix tr.res-all td { padding-top: 10px; }
.fav-star { color: var(--ink); font-size: 12px; }
.fav-line { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; color: var(--ink-2); max-width: 720px; }
.fav-line .res-sw { position: relative; top: 1px; }
@media (max-width: 520px) {
  .res-matrix th.rowh { padding-right: 4px; white-space: normal; max-width: 64px; font-size: 13px; }
  .res-matrix th.rowh .who { gap: 4px; }
  .res-matrix td .cell.res-cell { min-width: 44px; height: 46px; margin: 1px; }
  .res-matrix td .cell.res-cell b { font-size: 13px; }
  .res-matrix td .cell.res-cell span { font-size: 10.5px; }
  .res-matrix th.colh .res-name { font-size: 12px; }
}
@media (max-width: 520px) {
  .res-panel { padding: 8px !important; }
}