/* Shared styles for The Wanderer's widgets (widgets/wanderer-kit/kit.js): ink on paper in light mode, ink-lit copper
   on black in dark mode, the engraved planet, redaction bars and the heading line. Colours come from the page
   (--ink, --bg, --muted) plus --wk-copper and --wk-panel, set for .p-wanderer in site.css. */
.wk { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px 26px 26px; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.wk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wk-head h3 { margin: 0; font-family: var(--wk-display); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wk-head span { font-size: 12px; color: var(--muted); }
.wk-serif { font-family: var(--wk-serif); }

/* Tabs: small engraved pills; the chosen one is filled with ink. */
.wk-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tab { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px 7px; border: 1px solid var(--line); border-radius: 100px; background: none; color: var(--ink); font: inherit; font-size: 12.5px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.wk-tab b { font-family: var(--wk-serif); font-size: 17px; line-height: 1; font-weight: 600; }
.wk-tab:hover, .wk-tab:focus-visible { border-color: var(--wk-copper); }
.wk-tab[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Redaction: ink bars where a sentence would be, with ragged ends like a block print. */
.wk-red { display: inline-flex; flex-wrap: wrap; gap: 3px 4px; vertical-align: middle; }
.wk-red i { display: block; width: calc(var(--w) * 3.4px); height: .82em; border-radius: 1.5px 2.5px 1px 2px; background: var(--ink); opacity: .82; }
.wk-red i:nth-child(3n) { border-radius: 2.5px 1px 2.5px 1px; }

/* Engraved planet: hatching in copper, the rising ink line, the rim and its orbits. */
.wk-planet { display: block; overflow: visible; }
.wk-planet .wk-hatch { fill: none; stroke: var(--wk-copper); stroke-width: .7; }
.wk-planet .wk-hatch--x { stroke-width: .55; opacity: .8; }
.wk-planet .wk-level { stroke: var(--wk-copper); stroke-width: .8; stroke-dasharray: 2 2; }
.wk-planet .wk-rim { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.wk-planet .wk-orbit { fill: none; stroke: var(--wk-copper); stroke-width: .6; opacity: .7; }
.wk-planet .wk-orbit--dot { stroke-dasharray: 1 2.5; }

/* A big number in the book's face. */
.wk-num { font-family: var(--wk-serif); font-weight: 600; font-size: 44px; line-height: .9; letter-spacing: -.01em; }
.wk-num small { font-size: .45em; font-weight: 500; color: var(--muted); }

.wk-fade-in { animation: wk-in .45s ease both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes wk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wk-fade-in { animation: none; } }