/* Article body styling for imported wiki guides (dark theme only, like the
   rest of the wiki). The HTML inside .wiki-prose arrives PRE-RENDERED and
   sanitized from the content generator; these rules only style it. */

.wiki-prose {
    color: #d1d5db; /* gray-300 */
    line-height: 1.75;
    font-size: 1rem;
}

.wiki-prose h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(55, 65, 81, 0.8); /* gray-700 */
}

.wiki-prose h3 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

/* The navbar is sticky and 4rem tall, so a bare #anchor jump parks the heading
   underneath it. This is also what makes WikiCommon.smoothScrollTo() — a plain
   scrollIntoView() — land correctly for the rail ToC, with no JS involved. */
.wiki-prose h2,
.wiki-prose h3 {
    scroll-margin-top: 5rem;
}

.wiki-prose p {
    margin: 0.75rem 0;
}

.wiki-prose a {
    color: #60a5fa; /* blue-400 */
    text-decoration: none;
}

.wiki-prose a:hover {
    color: #93c5fd; /* blue-300 */
    text-decoration: underline;
}

.wiki-prose strong {
    color: #f9fafb;
    font-weight: 600;
}

.wiki-prose ul,
.wiki-prose ol {
    margin: 0.75rem 0 0.75rem 1.5rem;
}

.wiki-prose ul {
    list-style: disc;
}

.wiki-prose ol {
    list-style: decimal;
}

.wiki-prose li {
    margin: 0.35rem 0;
}

.wiki-prose code {
    background: rgba(17, 24, 39, 0.8); /* gray-900 */
    border: 1px solid rgba(55, 65, 81, 0.6);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.875em;
    color: #fbbf24; /* amber-400 */
}

.wiki-prose pre {
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(55, 65, 81, 0.6);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.wiki-prose pre code {
    background: none;
    border: none;
    padding: 0;
}

.wiki-prose blockquote {
    border-left: 3px solid #3b82f6; /* blue-500 */
    background: rgba(30, 58, 138, 0.15);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    color: #9ca3af;
}

.wiki-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.wiki-prose th {
    background: rgba(31, 41, 55, 0.9); /* gray-800 */
    color: #e5e7eb;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(55, 65, 81, 0.8);
}

.wiki-prose td {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(55, 65, 81, 0.6);
}

.wiki-prose tbody tr:hover {
    background: rgba(55, 65, 81, 0.3);
}

.wiki-prose hr {
    border: none;
    border-top: 1px solid rgba(55, 65, 81, 0.8);
    margin: 2rem 0;
}

.wiki-prose img {
    max-width: 100%;
    height: auto;              /* never distort: width is the only dimension we set */
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* An item's own render, shown just inside its link. Injected at read time by
   wiki_api.decorate_item_links(), never stored.

   Every rule here exists to undo `.wiki-prose img` above, which makes article
   images full-width blocks with a vertical margin — the exact opposite of what a
   1em inline icon needs. `width: auto` with a fixed height keeps a wide weapon
   render in proportion instead of squashing it into a square. */
.wiki-prose a .dz-item-icon {
    display: inline-block;
    height: 1.15em;
    width: auto;
    max-width: 2.5em;          /* a long rifle render must not push the line apart */
    margin: 0 0.3em 0 0;
    vertical-align: -0.2em;    /* sit on the baseline rather than riding above it */
    border-radius: 2px;
    object-fit: contain;
}

/* Deliberately NOT white-space: nowrap on the link. It would stop the icon being
   orphaned at the end of a line, but it would also stop a long item name wrapping
   at all, which overflows a narrow column — a worse problem than a rare stray
   icon. Inline-block already keeps the icon glued to the text that follows it. */

/* ---------------------------------------------------------------------------
   Article images: size and alignment.

   An admin picks from a fixed vocabulary rather than typing dimensions, because
   free-form width/height on a body that has to work from 360px to 4K is how you
   get a 900px-wide image inside a 320px column. Two axes, three values each:

     size   dz-img--sm (a third) | dz-img--md (half) | dz-img--full (default)
     align  dz-img--left | dz-img--right (both float, text wraps) | centred

   Everything is a share of the column, never a pixel count, so the same article
   reads correctly on a phone and on a monitor.
   --------------------------------------------------------------------------- */

.wiki-prose figure {
    margin: 1.5rem 0;
}

.wiki-prose figure img {
    display: block;
    width: 100%;
    margin: 0;
}

.wiki-prose figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #9ca3af;            /* gray-400 */
    text-align: center;
}

/* Size — applied to the figure, so the caption tracks the image's width. */
.wiki-prose .dz-img--sm   { width: 33%; }
.wiki-prose .dz-img--md   { width: 50%; }
.wiki-prose .dz-img--full { width: 100%; }

/* Centred is the default for anything not floated. */
.wiki-prose figure:not(.dz-img--left):not(.dz-img--right) {
    margin-left: auto;
    margin-right: auto;
}

/* Floated — text wraps alongside. The side margin is what stops the prose
   touching the image; the vertical one aligns the top with the paragraph. */
.wiki-prose .dz-img--left {
    float: left;
    margin: 0.35rem 1.5rem 1rem 0;
}

.wiki-prose .dz-img--right {
    float: right;
    margin: 0.35rem 0 1rem 1.5rem;
}

/* A float must not escape its section and collide with the next heading. */
.wiki-prose h2,
.wiki-prose h3,
.wiki-prose h4,
.wiki-prose table,
.wiki-prose blockquote { clear: both; }

/* A bare <img> the admin floated without a figure wrapper. */
.wiki-prose img.dz-img--left  { float: left;  margin: 0.35rem 1.5rem 1rem 0; }
.wiki-prose img.dz-img--right { float: right; margin: 0.35rem 0 1rem 1.5rem; }
.wiki-prose img.dz-img--sm    { width: 33%; }
.wiki-prose img.dz-img--md    { width: 50%; }

/* On a narrow screen a floated third-width image is unreadable and leaves a
   ribbon of text beside it, so every image becomes a full-width block. */
@media (max-width: 640px) {
    .wiki-prose .dz-img--left,
    .wiki-prose .dz-img--right,
    .wiki-prose .dz-img--sm,
    .wiki-prose .dz-img--md {
        float: none;
        width: 100%;
        margin: 1.25rem 0;
    }
}

/* Live settings — hydrated by WikiCommon.hydrateSettings() from
   /v1/wiki/settings via textContent (never an HTML sink). */
.dz-setting {
    color: #34d399; /* emerald-400 */
    font-weight: 600;
    white-space: nowrap;
}

/* `.dz-setting-live` is still applied by hydrateSettings() and is deliberately
   left unstyled: it marks a value that came from the live server rather than the
   baked-in fallback, which is worth keeping as a hook, but the "live" badge it
   used to draw repeated itself on every value in a sentence and added noise. The
   green already says the number is current, and the title attribute still spells
   out any per-server variance on hover. */

/* An in-game action prompt, as the player sees it on their screen */
.wiki-prose .dz-action {
    color: #e5e7eb;
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(75, 85, 99, 0.7);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.9em;
    white-space: nowrap;
}

/* A value read straight out of the game config */
.wiki-prose .dz-cfg {
    color: #93c5fd; /* blue-300 */
    font-weight: 600;
    white-space: nowrap;
}

/* Recipe cards rendered from a {{recipe:}} shortcode */
.wiki-prose .dz-recipe {
    width: auto;
    min-width: min(100%, 22rem);
    margin: 1.25rem 0;
}

.wiki-prose .dz-recipe thead th {
    background: rgba(30, 58, 138, 0.35); /* blue-900 */
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.wiki-prose .dz-recipe tbody th {
    width: 9rem;
    color: #9ca3af;
    font-weight: 500;
    background: rgba(31, 41, 55, 0.6);
}

.wiki-prose .dz-recipe small {
    color: #6b7280;
}

.wiki-prose .dz-economy {
    max-width: 32rem;
}

/* Keycard tier badges. The colours are the cards' own: tier 1 yellow, tier 2 cyan,
   tier 3 red, tier 4 violet — so the badge matches the card in your inventory. */
.dz-keycard {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    padding: 0.1rem 0.55rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dz-keycard-1 { color: #fbbf24; border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.12); }
.dz-keycard-2 { color: #22d3ee; border-color: rgba(34, 211, 238, 0.55); background: rgba(34, 211, 238, 0.12); }
.dz-keycard-3 { color: #f87171; border-color: rgba(248, 113, 113, 0.55); background: rgba(248, 113, 113, 0.12); }
.dz-keycard-4 { color: #c084fc; border-color: rgba(192, 132, 252, 0.55); background: rgba(192, 132, 252, 0.12); }

/* Rarity chips for "Spawns on" rows */
.dz-rarity {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
    border: 1px solid transparent;
}

.dz-rarity-common { color: #9ca3af; border-color: rgba(156, 163, 175, 0.4); }
.dz-rarity-uncommon { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.dz-rarity-rare { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); }
.dz-rarity-very_rare { color: #c084fc; border-color: rgba(192, 132, 252, 0.4); }
.dz-rarity-unique { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }

/* Loot-tier chips for "Where it spawns" rows. Tier here is the map's loot tier
   (<value name="Tier3"/>), NOT a keycard door tier - hence its own palette, so a
   T3 loot chip is never mistaken for a tier-3 keycard badge. */
.dz-tier {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    white-space: nowrap;
}

.dz-tier-1 { color: #86efac; border-color: rgba(134, 239, 172, 0.45); }
.dz-tier-2 { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.45); }
.dz-tier-3 { color: #fdba74; border-color: rgba(253, 186, 116, 0.45); }
.dz-tier-4 { color: #fca5a5; border-color: rgba(252, 165, 165, 0.45); }
/* Namalsk's types.xml goes up to Tier7 (Tier45/Tier67/Tier567 all occur), so the scale
   does not stop at 4 the way the vanilla terrains' does. */
.dz-tier-5 { color: #d8b4fe; border-color: rgba(216, 180, 254, 0.45); }
.dz-tier-6 { color: #f0abfc; border-color: rgba(240, 171, 252, 0.45); }
.dz-tier-7 { color: #fda4af; border-color: rgba(253, 164, 175, 0.45); }

/* Usage / container-tag chips in the same row. Deliberately quieter than the tier
   chips: an item can carry six of them and they must not shout over the numbers. */
.dz-econ-tag {
    display: inline-block;
    font-size: 0.7rem;
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid rgba(107, 114, 128, 0.4);
    background: rgba(107, 114, 128, 0.1);
    color: #d1d5db;
    white-space: nowrap;
}

.dz-econ-tag--tag { border-style: dashed; color: #9ca3af; }

/* Wraps a run of chips inside a table cell so they gap evenly and wrap cleanly. */
.dz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Draft banner */
.wiki-draft-banner {
    background: rgba(180, 83, 9, 0.2); /* amber-700 */
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fcd34d;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Sortable table headers (WikiCommon.makeSortable). The arrow only appears on the column
   currently doing the sorting, so a table at rest looks exactly as it did before. */
.wiki-prose table thead th[role="button"]:hover,
table.wikitable thead th[role="button"]:hover {
    color: #ffffff;
    background: rgba(55, 65, 81, 0.6);
}

.dz-sort-arrow {
    font-size: 0.75em;
    color: #60a5fa;
}


/* ------------------------------------------------------------------------
   Rail table of contents ("On this page"), built by WikiCommon.buildToc().

   The .toc-* names and the active treatment match the category ToC that
   wiki_weapons.html / wiki_attachments.html already define inline, so the two
   read as the same component. Everything is scoped under .wiki-toc because
   those pages declare their own bare .toc-link rules.
   ------------------------------------------------------------------------ */

.wiki-toc {
    display: none;   /* mobile, and until buildToc() finds headings */
    background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(55, 65, 81, 0.5);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

/* The rail stacks BELOW the article under lg, where a table of contents is no
   use to anyone — show it only once it is actually a side rail. */
@media (min-width: 1024px) {
    .wiki-toc:not(.is-empty) { display: block; }
}

.wiki-toc__title {
    margin: 0 0 0.5rem;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wiki-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wiki-toc .toc-item {
    position: relative;
    display: flex;
    align-items: center;
}

.wiki-toc .toc-link {
    display: block;
    flex: 1;
    padding: 5px 8px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    color: #9ca3af;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-decoration: none;
    transition: all 0.2s;
}

.wiki-toc .toc-link:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    text-decoration: none;
}

.wiki-toc .toc-link.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-left-color: #60a5fa;
    font-weight: 500;
}

/* h3s sit under their h2 */
.wiki-toc .toc-link--h3 {
    padding-left: 1.35rem;
    font-size: 0.78125rem;
    color: #6b7280;
}

/* Match the scrollbar treatment .overflow-wrapper already uses elsewhere. */
.wiki-rail::-webkit-scrollbar { width: 8px; }
.wiki-rail::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.wiki-rail::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.5); border-radius: 4px; }
.wiki-rail::-webkit-scrollbar-thumb:hover { background: rgba(96, 165, 250, 0.7); }

@media (prefers-reduced-motion: reduce) {
    .wiki-toc .toc-link { transition: none; }
}

/* --------------------------------------------------------------- recipe costs
   A workbench cost lists the materials the recipe uses: "25 x Nails, 4 x Sheet Metal".
   Each material is an item link, so it carries the same icon as any other item mention,
   and only the number is live.

   Everything below is COSMETIC and nothing here may become load-bearing. The first
   version rendered all four materials and hid the unused ones with `display: none`,
   with the separators as flex gaps and "free" as a class. The day this file did not
   reach the browser the page read
   "25 x Nails0 x Plank4 x Sheet Metal0 x Cinder Blockfree" — every wrong thing in that
   line was a CSS rule doing a renderer's job. The renderers emit only the materials in
   use, separated by a real text node, and "free" is a word. */
.dz-mat-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* The icon rule further up is scoped to .wiki-prose; recipe materials also appear
   outside it (the item detail page builds its own block), so the shape is restated. */
.dz-mat a .dz-item-icon,
.dz-recipe-mat .dz-item-icon {
    display: inline-block;
    height: 1.15em;
    width: auto;
    max-width: 2.5em;
    margin: 0 0.3em 0 0;
    vertical-align: -0.2em;
    border-radius: 2px;
    object-fit: contain;
}

/* Skinning-yield badge on an animal's drop cards. Overlaid on the shared item card so that
   partial stays generic -- every other grid that includes it has no yield to show. */
.dz-yield {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 9999px;
    border: 1px solid rgba(52, 211, 153, .45);
    background: rgba(2, 6, 16, .78);
    backdrop-filter: blur(6px);
    color: #6ee7b7;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dz-yield__zones {
    color: #94a3b8;
    font-size: .62rem;
    font-weight: 500;
}

/* Computed cost tables — built server-side from live settings and the content
   pack by wiki_api.fill_computed_tables(), so the numbers are what the cluster
   is actually running rather than whatever was true when the guide was written. */
.wiki-prose .dz-computed-wrap {
    /* These run to six or seven columns, which is wider than a phone. Scroll
       the table, never the page — there is no other overflow rule for prose
       tables. */
    overflow-x: auto;
    margin: 1.25rem 0;
}

.wiki-prose .dz-computed {
    width: auto;
    min-width: min(100%, 34rem);
    margin: 0;
}

.wiki-prose .dz-computed thead th {
    background: rgba(30, 58, 138, 0.35); /* blue-900, as .dz-recipe */
    color: #ffffff;
    white-space: nowrap;
    vertical-align: bottom;
}

.wiki-prose .dz-computed thead small {
    color: #93c5fd; /* blue-300 */
    font-weight: 400;
}

.wiki-prose .dz-computed tbody th {
    color: #9ca3af;
    font-weight: 500;
    background: rgba(31, 41, 55, 0.6);
    white-space: nowrap;
}

.wiki-prose .dz-computed tbody th small {
    color: #6b7280;
    font-weight: 400;
}

/* Tabular figures so digits do not jitter between rows — same reason
   .dz-mat-qty sets it. */
.wiki-prose .dz-computed .dz-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* The raid tables are wider still and read better a touch tighter. */
.wiki-prose .dz-raid {
    font-size: 0.85rem;
}

/* Three columns, but each row header carries a condition stage AND the range it
   covers. Let them wrap rather than force a scrollbar onto a table that would
   otherwise fit a phone. */
.wiki-prose .dz-clothing tbody th {
    white-space: normal;
}

/* "Find it on the map" — the Loot Finder link beside each map name in the spawn table on
   an item page. Sits with the other dz-* chips this table uses (.dz-rarity, .dz-tier,
   .dz-econ-tag) rather than in wiki-unified.css, which owns the table shell.

   Unscoped on purpose: every other rule up top is under .wiki-prose, and the item detail
   page builds its own blocks outside it — the same restatement .dz-item-icon needed. */
.dz-map-find {
    display: inline-block;
    margin-left: 0.4rem;
    color: #60a5fa;                      /* blue-400, as .wiki-section-title */
    font-size: 0.8em;
    text-decoration: none;
    vertical-align: baseline;
}

a.dz-map-find:hover {
    color: #93c5fd;                      /* blue-300 */
}

/* The map has no Loot Finder data. Shown rather than dropped, because "we cannot draw this
   map yet" is an answer; an item that simply spawns nowhere gets no icon at all and the
   difference should be visible. Not a link, so it takes no pointer and no hover. */
.dz-map-find--muted {
    color: #6b7280;                      /* gray-500 */
    cursor: default;
}