/* items.css: lane PAGES-ITEMS (ext_items.py, items.js). Item page and items list.
   Tokens and atoms only (theme.css, LOOK lane); no colour literal. Scope: .kind-item (item pages),
   .k-list .page-list / [data-items-list] (the list). No motion. */

/* ------------------------------------------------------------------ head: the game's item tooltip */

.item-head { align-items: flex-start; }
.item-head .item-tip { min-width: 0; flex: 1 1 auto; }
.item-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }   /* size: theme.css (whole-pixel title font) */
.itip { list-style: none; margin: 0 0 8px; padding: 0; line-height: 1.35; }
.itip li { margin: 0; overflow-wrap: anywhere; }
/* line colours: the game draws every line white (Main.cs:20541) except these */
.itip .tl-dim { color: var(--fg-soft); }            /* set bonus: game grey (130,130,130) fails AA here; soft ink (LOOK Deviation 7) */
.itip .tl-novalue { color: var(--fg-soft); }        /* "No value": game (120,120,120), same reason */
.itip .tl-master { color: var(--c-rare-m13); }
.itip .tl-coin-platinum { color: var(--c-coin-platinum); }
.itip .tl-coin-gold { color: var(--c-coin-gold); }
.itip .tl-coin-silver { color: var(--c-coin-silver); }
.itip .tl-coin-copper { color: var(--c-coin-copper); }
/* expert items: the game cycles the "Expert" line through the rainbow (Main.DiscoR/G/B, Main.cs:20749);
   a still page shows the same hues as a gradient of the rarity tokens (the name: theme.css) */
.itip .tl-expert, .item-tip[data-rare="-12"] .tip-title {
  background-image: linear-gradient(90deg, var(--c-rare-4), var(--c-rare-3), var(--c-rare-8), var(--c-rare-2), var(--c-rare-9), var(--c-rare-5));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.item-head .chips { margin: 0 0 6px; }
.item-head .quick { list-style: none; padding: 0; margin: 4px 0 0; }
.item-head .quick li { margin: 0 0 2px; }

/* fallback tooltip card (until the head hook exists) */
.item-tip .tip-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.item-tip[data-rare="-1"] .tip-title { color: var(--c-rare-m1); }
.item-tip[data-rare="1"] .tip-title { color: var(--c-rare-1); }
.item-tip[data-rare="2"] .tip-title { color: var(--c-rare-2); }
.item-tip[data-rare="3"] .tip-title { color: var(--c-rare-3); }
.item-tip[data-rare="4"] .tip-title { color: var(--c-rare-4); }
.item-tip[data-rare="5"] .tip-title { color: var(--c-rare-5); }
.item-tip[data-rare="6"] .tip-title { color: var(--c-rare-6); }
.item-tip[data-rare="7"] .tip-title { color: var(--c-rare-7); }
.item-tip[data-rare="8"] .tip-title { color: var(--c-rare-8); }
.item-tip[data-rare="9"] .tip-title { color: var(--c-rare-9); }
.item-tip[data-rare="10"] .tip-title { color: var(--c-rare-10); }
.item-tip[data-rare="11"] .tip-title { color: var(--c-rare-11); }
.item-tip[data-rare="-11"] .tip-title { color: var(--c-rare-m11); }
.item-tip[data-rare="-13"] .tip-title { color: var(--c-rare-m13); }

/* ------------------------------------------------------------------ coins (shop price look) */

.coins { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.coin { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.coin-ic { width: 16px; height: 16px; image-rendering: pixelated; }
.coin-platinum { color: var(--c-coin-platinum); }
.coin-gold { color: var(--c-coin-gold); }
.coin-silver { color: var(--c-coin-silver); }
.coin-copper { color: var(--c-coin-copper); }

/* rarity in the Numbers table: white text (LOOK rule 4) with a swatch of the name colour */
.rare-sw::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--c-panel-border); background: var(--c-rare-0); }
.rare-sw[data-rare="-1"]::before { background: var(--c-rare-m1); }
.rare-sw[data-rare="1"]::before { background: var(--c-rare-1); }
.rare-sw[data-rare="2"]::before { background: var(--c-rare-2); }
.rare-sw[data-rare="3"]::before { background: var(--c-rare-3); }
.rare-sw[data-rare="4"]::before { background: var(--c-rare-4); }
.rare-sw[data-rare="5"]::before { background: var(--c-rare-5); }
.rare-sw[data-rare="6"]::before { background: var(--c-rare-6); }
.rare-sw[data-rare="7"]::before { background: var(--c-rare-7); }
.rare-sw[data-rare="8"]::before { background: var(--c-rare-8); }
.rare-sw[data-rare="9"]::before { background: var(--c-rare-9); }
.rare-sw[data-rare="10"]::before { background: var(--c-rare-10); }
.rare-sw[data-rare="11"]::before { background: var(--c-rare-11); }
.rare-sw[data-rare="-11"]::before { background: var(--c-rare-m11); }
.rare-sw[data-rare="-12"]::before { background-image: linear-gradient(90deg, var(--c-rare-4), var(--c-rare-8), var(--c-rare-2), var(--c-rare-9), var(--c-rare-5)); }
.rare-sw[data-rare="-13"]::before { background: var(--c-rare-m13); }

/* ------------------------------------------------------------------ where to get */

.src-jump ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.src-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; color: var(--fg);
  background: var(--c-panel-bg); border: 6px solid transparent; border-image: var(--s-panel) 12 fill / 12px stretch; image-rendering: pixelated; }
.src-jump a:hover { color: var(--fg); text-decoration: none; border-image: var(--s-panel-hover) 12 fill / 12px stretch; }
.src-group { margin: 0 0 16px; }
.src-group > h3, .kind-item .card h3 { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; font-size: 1.125rem; }
.src-group > h3 .n, .kind-item .card h3 .n { color: var(--fg-soft); font-weight: 400; font-size: var(--fs-s); }

/* recipes */
.rcps { list-style: none; margin: 0; padding: 0; }
.rcp { padding: 6px 0; border-bottom: 2px solid var(--c-info-border); }
.rcp:last-child { border-bottom: 0; }
.rcp-out { font-weight: 700; margin: 0 0 4px; }
.ing { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 4px; padding: 0; }
.rcp-at { font-size: var(--fs-s); }
.rcp-at .note { margin-left: 8px; }

/* recipe group ("Any Wood"): members on hover or focus, drawn in the tooltip box */
.grp { position: relative; display: inline-flex; align-items: center; gap: 0.3em; cursor: help; border-bottom: 1px dotted var(--fg-soft); }
.grp img { width: var(--icon); height: var(--icon); object-fit: contain; image-rendering: pixelated; }
.grp-pop { display: none; position: absolute; left: 0; top: 100%; z-index: 20; width: max-content; max-width: min(22rem, 80vw);
  padding: 4px 6px; background: var(--c-tip-bg); border: 10px solid transparent; border-image: var(--s-tip) 10 fill / 10px stretch;
  image-rendering: pixelated; font-weight: 400; line-height: 1.6; }
.grp:hover .grp-pop, .grp:focus .grp-pop, .grp:focus-within .grp-pop { display: block; }

/* tables: wide ones scroll inside their own box (phone rule) */
.tbl-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 8px; }
table.data.item-drops td, .kind-item table.data td { vertical-align: middle; }
table.data td.notes span, ul.conds span { display: block; font-size: var(--fs-s); }
table.data .pct { color: var(--fg-soft); font-size: var(--fs-s); white-space: nowrap; }
table.data td.num { white-space: nowrap; }
ul.conds { list-style: none; padding: 0; margin: 0 0 8px; }
ul.conds > li { padding: 4px 0; border-bottom: 2px solid var(--c-info-border); }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.mode-tabs .chip[data-mode="expert"][aria-pressed="true"] { color: var(--c-mode-expert); }
.mode-tabs .chip[data-mode="master"][aria-pressed="true"] { color: var(--c-mode-master); }
tr[hidden] { display: none; }

/* ------------------------------------------------------------------ other cards */

.item-numbers th { width: 40%; }
.used .at { font-size: var(--fs-s); color: var(--fg-soft); }
.used .at a { color: var(--fg-soft); }
.set { margin: 0 0 12px; }
.set .pieces { list-style: none; padding: 0; margin: 0 0 4px; }
.set .bonus { margin: 0; }
.prefix-chips { margin-top: 6px; }
.prefix-chips .chip { font-size: var(--fs-s); }
.prefix-chips .chip a { color: var(--fg); }
.prefix-chips .chip.best { border-image: var(--s-panel-hover) 12 fill / 12px stretch; }
.refs.also { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; list-style: none; padding: 0; }
@media (min-width: 640px) { .refs.also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.decraft { margin: 0 0 8px; }

/* ------------------------------------------------------------------ items list (misc.js hub filter) */

.kind-item table.item-list td:nth-child(n+2) { white-space: nowrap; }
.kind-item table.item-list td:first-child { min-width: 12em; }
@media (max-width: 719px) {
  /* phone: each chip group is one row that scrolls inside its own box, so the list starts on the first screen */
  .kind-item form.filters fieldset.facet { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .kind-item form.filters fieldset.facet legend { position: sticky; left: 0; }
  .kind-item form.filters fieldset.facet .chip { flex: none; white-space: nowrap; }
}