/* Powder & Plunder wiki — sits on top of the site's shared /assets/sw.css (warm studio theme, Oct 2026)
   and /assets/chrome.css (site header + footer).
   Generated pages copy this file verbatim; edit it here (V2/tools/wiki/assets), not in the site. */

:root {
    --wk-gold: #9A5B00;          /* readable gold-brown on cream */
    --wk-gold-soft: #FCEBC4;
    --wk-ember: #C4532A;
    --wk-red: #B4232A;
    --wk-card: #FFFFFF;
    --wk-card-hover: #FFFFFF;
    --wk-radius: 18px;
}

.wk-nav {
    position: sticky; top: 73px; z-index: 20;   /* tucks under the 72px site header */
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
    padding: 10px 0; margin-bottom: 8px;
    background: rgba(251,245,236,0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
}
.wk-nav-links { display: flex; flex-wrap: wrap; gap: 6px 4px; flex: 1 1 auto; min-width: 0; }
.wk-nav a { color: var(--text-muted); text-decoration: none; padding: 6px 9px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; }
.wk-nav a:hover, .wk-nav a:focus-visible { color: var(--text); background: var(--bg3); }
.wk-nav a[aria-current="page"] { color: #fff; background: var(--wk-ember); }
.wk-nav .wk-nav-home { color: var(--wk-ember); font-weight: 700; }
.wk-nav .wk-search { margin-left: auto; position: relative; flex: 0 1 190px; }

.wk-search-input {
    width: 100%; padding: 9px 14px; border-radius: 999px;
    border: 1.5px solid var(--border-hover); background: var(--bg2); color: var(--text);
    font: inherit; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 14px;
}
.wk-search-input:focus { outline: 3px solid var(--accent2); outline-offset: 1px; }
.wk-search-results {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px;
    list-style: none; background: var(--bg2); border: 1px solid var(--border-hover);
    border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md);
    text-transform: none; letter-spacing: 0;
}
.wk-nav .wk-search-results { left: auto; width: min(420px, 92vw); }
.wk-search-results a { display: block; padding: 10px 14px; color: var(--text); text-decoration: none; border-radius: 0; font-family: var(--font-body); font-size: 14px; }
.wk-search-results a small { display: block; color: var(--text-dim); font-family: var(--font-body); font-size: 12px; margin-top: 2px; }
.wk-search-results a:hover, .wk-search-results a.is-active { background: var(--wk-gold-soft); }
.wk-search-results .wk-empty { padding: 12px 14px; color: var(--text-muted); font-size: 14px; }

.wk-main { position: relative; z-index: 1; padding-bottom: 40px; }
.wk-hero { padding: 48px 0 20px; }
.wk-eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-ember); margin-bottom: 14px; }
.wk-hero .hero-title, .wk-shiphero .hero-title { font-size: clamp(44px, 9vw, 96px); }
.section-title small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 10px; vertical-align: middle; }
.section-title small a { color: var(--wk-ember); }

.wk-bigsearch { position: relative; max-width: 620px; margin: 4px 0 28px; }
.wk-bigsearch .wk-search-input { padding: 15px 20px; font-size: 16px; }

.wk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 36px; }
.wk-fact { background: var(--wk-card); border: 1px solid var(--border); border-radius: var(--wk-radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.wk-fact b { display: block; font-family: var(--font-display); font-size: 34px; color: var(--wk-ember); line-height: 1; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.wk-fact span { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }

.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 40px; }
.wk-card {
    display: block; padding: 20px; border-radius: var(--wk-radius); text-decoration: none; color: var(--text);
    background: var(--wk-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s;
}
.wk-card:hover, .wk-card:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wk-card-ico { font-size: 26px; }
.wk-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin: 8px 0 4px; }
.wk-card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; }

.wk-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wk-strip-ship { text-decoration: none; color: var(--text-muted); font-size: 12px; text-align: center; padding: 8px; border-radius: 12px; border: 1px solid transparent; }
.wk-strip-ship:hover { border-color: var(--border-hover); color: var(--text); }
.wk-strip-ship img, .wk-strip-ship .wk-noimg { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; }
.wk-strip-ship.is-hostile span { color: var(--wk-red); }

.wk-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 40px; }
.wk-ship { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--wk-card); border: 1px solid var(--border); border-radius: var(--wk-radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.wk-ship:hover, .wk-ship:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wk-ship-img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: radial-gradient(ellipse at 50% 85%, #D8EAEC, #EEF5F6 70%); padding: 10px; }
.wk-ship-body { padding: 4px 16px 16px; }
.wk-ship-tier { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding-top: 8px; }
.wk-ship h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.015em; margin: 4px 0 2px; }
.wk-ship-waters { color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }
.wk-noimg { display: grid; place-items: center; font-size: 34px; color: var(--text-dim); }

.wk-chip { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--wk-gold-soft); color: var(--wk-gold); border: 1px solid rgba(154,91,0,0.15); }
.wk-chip a { color: inherit; text-decoration: none; }
.wk-chip-red { background: #F8DADA; color: var(--wk-red); border-color: rgba(180,35,42,.2); }
.wk-chip-dim { background: transparent; color: var(--text-muted); border-color: var(--border-hover); }

.wk-shiphero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 36px 0 24px; }
.wk-shipart img { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(42,31,23,.28)); }
.wk-states { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.wk-states button { font: inherit; font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--bg2); color: var(--text-muted); cursor: pointer; }
.wk-states button[aria-pressed="true"] { color: #fff; background: var(--wk-ember); border-color: var(--wk-ember); }
.wk-states button:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

.wk-table { width: 100%; border-collapse: collapse; margin: 12px 0 28px; font-size: 14px; }
/* Stand-alone data tables sit on a white card like the rest of the site (ladders already live inside one). */
.wk-table:not(.wk-ladder) { border-collapse: separate; border-spacing: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--wk-radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.wk-table:not(.wk-ladder) th:first-child, .wk-table:not(.wk-ladder) td:first-child { padding-left: 18px; }
.wk-table:not(.wk-ladder) th:last-child, .wk-table:not(.wk-ladder) td:last-child { padding-right: 18px; }
.wk-table:not(.wk-ladder) tbody tr:last-child > * { border-bottom: 0; }
.wk-table:not(.wk-ladder) thead th { background: var(--bg3); }
.wk-table th, .wk-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.wk-table thead th { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.wk-table tbody th { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.wk-table td small, .wk-muted, .wk-table small { color: var(--text-muted); }
.wk-table a, .wk-list a, .wk-lede a, .wk-up a, .wk-prevnext a, .wk-stamp a { color: var(--wk-ember); }
.wk-num { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.wk-facts-table { max-width: 680px; }
.wk-facts-table tbody th { width: 170px; }
tr:target, article:target { background: var(--wk-gold-soft); }

.wk-lede { color: var(--text-muted); max-width: 720px; line-height: 1.6; margin: -4px 0 14px; }
.wk-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.wk-toc a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--bg2); }
.wk-toc a:hover { border-color: var(--wk-ember); color: var(--wk-ember); }

.wk-list { list-style: none; margin: 8px 0 30px; }
.wk-list li { padding: 10px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.wk-tip { background: var(--wk-card); border: 1px solid var(--border); border-left: 4px solid var(--accent2); border-radius: 14px; padding: 14px 18px; margin: 0 0 10px; max-width: 760px; box-shadow: var(--shadow-sm); }
.wk-tip h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 4px; }
.wk-tip p { color: var(--text-muted); line-height: 1.6; }
.wk-guide { margin-bottom: 26px; }

.wk-up { background: var(--wk-card); border: 1px solid var(--border); border-radius: var(--wk-radius); padding: 16px 18px; margin-bottom: 10px; scroll-margin-top: 140px; box-shadow: var(--shadow-sm); }
.wk-up-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-up-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; margin-right: 6px; }
.wk-up-desc { margin: 8px 0 6px; line-height: 1.5; }
.wk-calc { margin-top: 10px; }
.wk-calc summary { cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--wk-ember); text-transform: uppercase; letter-spacing: .06em; }
.wk-calc-body { padding: 12px 0 2px; display: grid; gap: 8px; }
.wk-calc input[type="range"] { width: 100%; accent-color: var(--wk-ember); }
.wk-calc-out { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.wk-calc-out b { font-variant-numeric: tabular-nums; color: var(--wk-ember); font-weight: 700; }

.wk-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wk-ach { background: var(--wk-card); border: 1px solid var(--border); border-radius: var(--wk-radius); padding: 16px 18px; scroll-margin-top: 140px; box-shadow: var(--shadow-sm); }
.wk-ach h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
.wk-ach p { font-size: 14px; line-height: 1.5; margin: 4px 0 10px; }
.wk-ach-input { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; }
.wk-ach-input input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-hover); background: var(--bg2); color: var(--text); font: inherit; font-size: 14px; text-transform: none; }
.wk-ladder { margin: 10px 0 0; }
.wk-ladder td, .wk-ladder th { padding: 6px 10px; }
.wk-ladder tr.is-reached td { color: var(--green); }
.wk-ladder tr.is-reached td:first-child::after { content: ' ✓'; }

.wk-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 40px; }
.wk-cos-card { background: var(--wk-card); border: 1px solid var(--border); border-radius: var(--wk-radius); padding: 14px 16px 16px; scroll-margin-top: 140px; box-shadow: var(--shadow-sm); }
.wk-cos-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; margin: 10px 0 2px; }
.wk-cos-card p { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.wk-skin-svg { width: 100%; height: 120px; background: linear-gradient(180deg, #16364c, #2a5a70 62%, #193f50 62%); border-radius: 10px; }
.wk-theme-tile { position: relative; height: 120px; border-radius: 10px; overflow: hidden; background: var(--sky); }
.wk-theme-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--sea); }
.wk-theme-body { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 18px rgba(255,240,200,.45); }

.wk-prevnext { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; }
.wk-prevnext a { text-decoration: none; }
.wk-stamp { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; color: var(--text-dim); line-height: 1.7; }

@media (max-width: 860px) {
    .wk-nav { top: 0; }   /* the site header stops sticking at this width (chrome.css) */
}

@media (max-width: 760px) {
    .wk-nav { position: static; }
    .wk-nav-links { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .wk-nav-links::-webkit-scrollbar { display: none; }
    .wk-nav .wk-search { flex: 1 1 100%; margin-left: 0; }
    .wk-nav .wk-search-results { width: auto; left: 0; right: 0; }
    .wk-shiphero { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
    .wk-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wk-facts-table tbody th { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-card, .wk-ship { transition: none; }
    .wk-card:hover, .wk-ship:hover { transform: none; }
}