/* ===================================================================================================================
   THEME "tool-shop" (2026-10-16, docs/design-system.md "Naruto theme layer"): a ninja tool shop.
   Materials, every material page, Tools and the three calculators (the tools pages load this file before tools.css,
   so the theme block and the shop pieces below live in one place). A shop curtain over the page head (plain cloth
   panels, no writing), dark wooden shelves with a plank under every item, paper price tags (ink on parchment, a
   punched hole, clipped corners), hanging wooden signs for the group titles and canvas tool pouches for the big icons.
   Game art is shown as it is; material icons are never drawn wider than 128 px (their file size).
   =================================================================================================================== */
body[data-theme="tool-shop"] {
  --theme-accent: #e0a24a;
  --theme-accent-2: #ffd27a;
  --theme-chakra: #b8d4e6;
  --theme-cloth: #2c3a26; --theme-cloth-hi: #3c4f33; --theme-cloth-lo: #1c2618;
  --theme-glow: rgba(232, 160, 70, 0.13); --theme-glow-2: rgba(140, 180, 200, 0.05);
  --theme-texture: var(--nk-shuriken-url); --theme-texture-size: 150px; --theme-texture-opacity: 0.028;
  --theme-hero-frame: none;
  --theme-mark: var(--nk-shuriken-url);
  /* shop pieces */
  --shop-tag-cut: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  --shop-canvas: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #4a5536, #343d26);
  --shop-shelf-back: radial-gradient(80% 70% at 50% 30%, rgba(255, 190, 110, 0.10), transparent 70%), var(--nk-wood-dark);
  --shop-plank: linear-gradient(180deg, #b5773d 0%, #8a5528 30%, #5a3519 75%, #2e1a0b 100%);
  --shop-curtain: linear-gradient(180deg, #8a4a2a, #6b3a22 60%, #4a2716);   /* the shop curtain: persimmon-brown cloth */
}
/* paper ink colours for anything drawn on a tag (the page's own colour tokens, switched to ink) */
body[data-theme="tool-shop"] .shop-ink, body[data-theme="tool-shop"] .mat-card .unit-info, body[data-theme="tool-shop"] .m-tally > div,
body[data-theme="tool-shop"] .tl-mats a, body[data-theme="tool-shop"] .tl-pill, body[data-theme="tool-shop"] .tl-farm {
  --text: var(--nk-ink); --muted: var(--nk-ink-2); --faint: var(--nk-ink-3); --gold: #8a4b00; --ok: #2b6a1c; --accent: var(--nk-red-ink); --wip: #8a4b00; }

/* the shop curtain over the page head: cloth panels with slits on a wooden rod */
body[data-theme="tool-shop"] .page-hero { padding-top: 46px; }
body[data-theme="tool-shop"] .page-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 30px; pointer-events: none;
  background: linear-gradient(180deg, #2e1a0b, #8a5528 40%, #5a3519 80%, #2e1a0b) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(0, 0, 0, 0.55) calc(25% - 3px) 25%) 0 7px / 100% 23px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 7px, transparent 7px 12px) 0 calc(100% - 4px) / 100% 1px no-repeat,
    var(--shop-curtain) 0 7px / 100% 23px no-repeat;
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8); }
@media (max-width: 600px) { body[data-theme="tool-shop"] .page-hero { padding-top: 38px; } body[data-theme="tool-shop"] .page-hero::after { height: 24px; background-size: 100% 6px, 50% 18px, 100% 1px, 100% 18px; background-position: 0 0, 0 6px, 0 calc(100% - 3px), 0 6px; background-repeat: no-repeat, repeat-x, no-repeat, no-repeat; } }

/* the hero counts as price tags */
body[data-theme="tool-shop"] .m-tally { gap: 10px; background: none; box-shadow: none; overflow: visible; }
body[data-theme="tool-shop"] .m-tally > div { position: relative; padding: 16px 16px 10px; background: radial-gradient(circle at 50% 7px, #1a110a 0 3px, rgba(90, 53, 25, 0.5) 3.5px 4.5px, transparent 5px), var(--nk-parchment);
  clip-path: var(--shop-tag-cut); box-shadow: none; }
body[data-theme="tool-shop"] .m-tally > div + div { box-shadow: none; }
body[data-theme="tool-shop"] .m-tally dd { color: var(--nk-ink); }
body[data-theme="tool-shop"] .m-tally .t-ok dd { color: #2b6a1c; }
body[data-theme="tool-shop"] .m-tally dt { color: var(--nk-red-ink); }
@media (max-width: 760px) { body[data-theme="tool-shop"] .m-tally { gap: 6px; } body[data-theme="tool-shop"] .m-tally > div { padding: 14px 6px 8px; } body[data-theme="tool-shop"] .m-tally dt { letter-spacing: 0.02em; white-space: normal; } }

/* group titles: a hanging wooden shop sign on two strings */
body[data-theme="tool-shop"] .mat-group { position: relative; justify-self: start; width: max-content; max-width: 100%; margin: 26px 0 4px; padding: 9px 18px 10px; border-radius: 3px;
  font: 400 var(--fs-lg)/1.2 var(--nk-brush); letter-spacing: 0.02em; color: #fff3d6; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #2a1708, inset 0 0 0 4px rgba(255, 210, 160, 0.14), 0 8px 14px -8px rgba(0, 0, 0, 0.9); }
body[data-theme="tool-shop"] .mat-group::before, body[data-theme="tool-shop"] .mat-group::after { content: ""; position: absolute; top: -18px; width: 2px; height: 18px; border-radius: 0; background: #c9b48a; }
body[data-theme="tool-shop"] .mat-group::before { left: 22px; }
body[data-theme="tool-shop"] .mat-group::after { right: 22px; }
body[data-theme="tool-shop"] .mat-grid > .mat-group:first-child { margin-top: 22px; }

/* ---------- the shelves: every material sits on a plank in a dark wooden cubby, its paper tag under it ---------- */
body[data-theme="tool-shop"] a.mat-card { background: var(--nk-wood-dark); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 210, 160, 0.08), 0 10px 18px -12px rgba(0, 0, 0, 0.9); border-radius: 3px; }
body[data-theme="tool-shop"] a.mat-card:hover { box-shadow: 0 0 0 1px var(--el, var(--theme-accent)), 0 0 0 2px rgba(224, 162, 74, 0.35), 0 14px 22px -12px rgba(0, 0, 0, 0.9); }
body[data-theme="tool-shop"] .mat-card .unit-art { background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--el, #444) 30%, transparent), transparent 62%), var(--shop-shelf-back); }
body[data-theme="tool-shop"] .mat-card .unit-art::after { inset: auto 0 0 0; height: 16px; background: var(--shop-plank); box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.45), inset 0 -2px 0 var(--el, transparent); }
/* the icon at most 128 px (its file size: never stretched), standing on the plank */
.mat-card .unit-art img.icon { position: absolute; left: 50%; bottom: 14px; width: min(76%, 128px); height: auto; aspect-ratio: 1; padding: 0; transform: translateX(-50%); }
body[data-theme="tool-shop"] .mat-card .unit-art img.icon { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
body[data-theme="tool-shop"] .mat-card .unit-stars { bottom: 0; z-index: 1; height: 16px; align-items: center; }
body[data-theme="tool-shop"] .mat-card .unit-stars img { width: 14px; height: 14px; }
/* the price tag */
body[data-theme="tool-shop"] .mat-card .unit-info { margin: 6px 6px 6px; padding: 14px 8px 7px; min-height: 68px;
  background: radial-gradient(circle at 50% 6px, #1a110a 0 2.5px, rgba(90, 53, 25, 0.55) 3px 4px, transparent 4.5px), var(--nk-parchment); clip-path: var(--shop-tag-cut); }
body[data-theme="tool-shop"] .mat-card .unit-name { color: var(--nk-ink); }
body[data-theme="tool-shop"] .mat-card .b-ok { background: rgba(43, 106, 28, 0.14); }
body[data-theme="tool-shop"] .mat-card .b-off { color: var(--nk-ink-2); background: rgba(90, 53, 25, 0.14); }
body[data-theme="tool-shop"] .mat-card .unit-pct { color: var(--nk-ink-3); }

/* ---------- material page: the big icon in a canvas tool pouch (a flap with a snap, stitched edges) ---------- */
body[data-theme="tool-shop"] .mat-icon { position: relative; overflow: visible; border-radius: 6px 6px 14px 14px; background: var(--shop-canvas);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.35), 0 12px 22px -12px rgba(0, 0, 0, 0.9);
  outline: 1px dashed rgba(240, 225, 190, 0.38); outline-offset: -6px; }
body[data-theme="tool-shop"] .mat-icon::before { content: ""; position: absolute; z-index: 0; left: -3px; right: -3px; top: -10px; height: 22px; border-radius: 6px 6px 3px 3px;
  background: radial-gradient(circle at 50% 70%, #d8dde4 0 3px, #6f7a8a 3.5px 4.5px, transparent 5px), linear-gradient(180deg, #56613f, #3c4529); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5); }
body[data-theme="tool-shop"] .mat-icon img { position: relative; z-index: 1; max-width: 128px; max-height: 128px; margin-top: 8px; }
body[data-theme="tool-shop"] .mat-head { margin-top: 18px; }
/* the shop counter: section titles on a plank edge */
body[data-theme="tool-shop"] #mt-body .m-sec { box-shadow: inset 0 3px 0 rgba(181, 119, 61, 0.55), var(--shadow-card); }
body[data-theme="tool-shop"] #mt-body .it { background: var(--surface-2); }
/* the shop's prices on paper tags */
body[data-theme="tool-shop"] .src-row .cur, body[data-theme="tool-shop"] .src-meta .cur { color: var(--theme-accent-2); }

/* Materials list + material page (pages/materials.html, pages/material.html): hero tiles, the labelled toolbar and the
   "Best place to farm" card. Loaded after site.css. The tile rules match missions.css until the shared hero lands. */

/* ---------- hero + tiles ---------- */
.mp-head { display: flex; gap: 14px 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.mp-text { flex: 1 1 420px; min-width: 0; }
.mp-text h1 { margin-bottom: 6px; }
.mp-text p { margin: 0; }

/* ---------- toolbar: labelled groups, one per row on wide screens ---------- */
.mt-lab { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 761px) {
  .toolbar[data-fp="materials"] #filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
  .toolbar[data-fp="materials"] #filters > .chips { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .toolbar[data-fp="materials"] #filters .chips-label { min-width: 72px; }
  .toolbar[data-fp="materials"] #reset { grid-column: 2; grid-row: 1; justify-self: end; }
  .toolbar[data-fp="materials"] #count { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; }
  .toolbar[data-fp="materials"] #f-el, .toolbar[data-fp="materials"] #f-r { min-width: 0; }
}

/* ---------- material page: "Best place to farm" ---------- */
.bf-note { margin: 0 0 10px; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
a.bf-card { display: flex; flex-direction: column; background: var(--surface-2); border: 0; box-shadow: var(--ring); border-radius: var(--r-md); overflow: hidden; color: var(--text); min-width: 0; }
a.bf-card:hover { box-shadow: 0 0 0 1px var(--line-3); color: var(--text); }
.bf-img { position: relative; aspect-ratio: 512 / 130; background: var(--well); overflow: hidden; }
.bf-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 40px; text-align: center; color: var(--faint); font: 800 0.95rem var(--head); }
.bf-n { position: absolute; left: 8px; top: 8px; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: rgba(11, 13, 17, 0.8); color: var(--gold); font: 800 0.9rem/1 var(--head); }
.bf-img .badge { position: absolute; right: 8px; top: 8px; background: rgba(11, 13, 17, 0.8); }
.bf-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-name { font-weight: 700; overflow-wrap: anywhere; }
.bf-sub { color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.bf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; }
.bf-facts > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--well); min-width: 0; }
.bf-facts dt { font: 700 0.6rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.bf-facts dd { margin: 0; font: 700 1.05rem/1.1 var(--head); color: var(--text); }
.bf-facts > div:nth-child(2) dd { color: var(--ok); }
.bf-lucky { align-self: flex-start; margin-top: 4px; font: 700 var(--fs-xs)/1 var(--sans); color: #fcd34d; background: rgba(251, 191, 36, 0.12); padding: 4px 8px; border-radius: var(--r-pill); }
.bf-star { margin-right: 4px; }

/* ---------- group titles in the grid: the system's section title (accent bar) ---------- */
.mat-group { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-lg)/1.2 var(--head); letter-spacing: -0.01em; }
.mat-group::before { content: ""; flex: none; width: 3px; height: 1.05em; border-radius: 2px; background: var(--accent); }