/* TC-001 — see docs/TC/records/TC-001-11-08-26-datapack-tools-design-kit/tc_record.html
   Elkonia datapack tools design kit. Linked by the hub, MCDDD, MCJIG, MCVIEW and the Datapack Codex.
   Layout: night over Elkonia. A pixel sky opens each page, tools sit in Dark UI panels, a hotbar
   navigates (top on desktop, bottom on phones). One committed dark world, so no light theme.
   Panel greys are Vanilla Tweaks' DarkUI (gui/container/inventory.png). Every class is prefixed dpt-. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@500;700&family=Silkscreen:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  --dpt-night: #090c1a; --dpt-night-2: #11163a; --dpt-ink: #f3f5ff; --dpt-ink-dim: #c9cfe8;
  --dpt-panel: #535353; --dpt-panel-hi: #6b6b6b; --dpt-panel-lo: #333333; --dpt-edge: #000000;
  --dpt-slot: #333333; --dpt-slot-tl: #262626; --dpt-slot-br: #6b6b6b;
  --dpt-on-panel: #ffffff; --dpt-on-panel-dim: #f7f7f7;
  --dpt-green: #7cf08a; --dpt-orange: #ffb757; --dpt-pink: #ffa3dd; --dpt-cyan: #7fe0ff; --dpt-gold: #ffe066; --dpt-red: #ff7a7a;
  --dpt-tip-bg: #140a26; --dpt-tip-1: #6a3cff; --dpt-tip-2: #2e1585;
  --dpt-dirt: #5b3d22; --dpt-dirt-2: #4a311b; --dpt-grass: #5aa53a;
  --dpt-display: "Silkscreen", "Lucida Console", monospace;
  --dpt-body: "Atkinson Hyperlegible", "Segoe UI", Verdana, sans-serif;
  --dpt-mono: "JetBrains Mono", Consolas, monospace;
  font-size: 100%;            /* percent, so the browser's own text-size setting still scales the page */
}
:root[data-dpt-size="s"] { font-size: 87.5%; } :root[data-dpt-size="l"] { font-size: 118.75%; } :root[data-dpt-size="xl"] { font-size: 143.75%; }
[data-dpt-tool="mcddd"] { --dpt-acc: var(--dpt-green); }
[data-dpt-tool="mcjig"] { --dpt-acc: var(--dpt-orange); }
[data-dpt-tool="mcview"] { --dpt-acc: var(--dpt-pink); }
[data-dpt-tool="codex"] { --dpt-acc: var(--dpt-cyan); }
[data-dpt-tool="ai"], [data-dpt-tool="hub"] { --dpt-acc: var(--dpt-gold); }

body.dpt { margin: 0; background: var(--dpt-night); color: var(--dpt-ink); font: 700 1rem/1.45 var(--dpt-body); }
body.dpt::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--dpt-night); }
.dpt *, .dpt *::before, .dpt *::after { box-sizing: border-box; }
.dpt :focus-visible { outline: 3px solid var(--dpt-gold); outline-offset: 2px; }
.dpt img { max-width: 100%; }
.dpt-px { font-family: var(--dpt-display); letter-spacing: .02em; }
.dpt-gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dpt-inner { max-width: 1060px; margin: 0 auto; }

/* ---- Dark UI panel, corners stepped by one pixel ---- */
.dpt-panel { background: var(--dpt-panel); color: var(--dpt-on-panel); position: relative;
  box-shadow: inset 3px 3px 0 var(--dpt-panel-hi), inset -3px -3px 0 var(--dpt-panel-lo), 0 0 0 3px var(--dpt-edge);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  padding: .9rem 1rem 1rem; }
.dpt-panel > h2, .dpt-h { margin: 0 0 .6rem; font: 700 1.05rem/1.1 var(--dpt-display); color: var(--dpt-on-panel-dim); letter-spacing: .04em; }
.dpt-slot { background: var(--dpt-slot); box-shadow: inset 3px 3px 0 var(--dpt-slot-tl), inset -3px -3px 0 var(--dpt-slot-br); display: grid; place-items: center; position: relative; }
.dpt-btn { font: 700 1rem/1 var(--dpt-display); color: #fff; text-shadow: 2px 2px 0 #222; background: #484848; border: 0; cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: inset 2px 2px 0 #7a7a7a, inset -2px -3px 0 #262626, 0 0 0 2px #000; padding: .55rem 1rem; }
.dpt-btn:hover { background: #4f5a9c; box-shadow: inset 2px 2px 0 #9aa6ff, inset -2px -3px 0 #2a2f5c, 0 0 0 2px #fff; }
.dpt-btn.dpt-go { background: #2b6a28; box-shadow: inset 2px 2px 0 #7fd67a, inset -2px -3px 0 #1e4d1c, 0 0 0 2px #000; }
.dpt-btn.dpt-go:hover { background: #33802f; box-shadow: inset 2px 2px 0 #a6f0a0, inset -2px -3px 0 #1e4d1c, 0 0 0 2px #fff; }
.dpt-btn[disabled] { opacity: .55; cursor: default; }

/* ---- item tooltip ---- */
.dpt-tip { position: absolute; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .1s, transform .1s;
  background: var(--dpt-tip-bg); border: 2px solid; border-image: linear-gradient(var(--dpt-tip-1), var(--dpt-tip-2)) 1; outline: 2px solid var(--dpt-tip-bg);
  padding: .35rem .55rem; min-width: 12rem; text-align: left; white-space: normal; }
.dpt-tip b { display: block; font: 700 1rem/1.2 var(--dpt-display); color: var(--dpt-acc, #fff); }
.dpt-tip span { display: block; font: 700 .85rem/1.3 var(--dpt-body); color: #b9b9d6; }
.dpt-tip i { display: block; font: 500 .75rem/1.3 var(--dpt-display); color: #8080b8; font-style: normal; margin-top: .2rem; }

/* ---- top bar + hotbar ---- */
.dpt-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(9,12,26,.97); border-bottom: 2px solid #000; box-shadow: 0 2px 0 #1d2246; }
.dpt-bar .dpt-inner { display: flex; align-items: center; gap: .9rem; padding-block: .4rem; max-width: 1200px; }
.dpt-brand { display: flex; align-items: center; gap: .45rem; text-decoration: none; }
.dpt-brand .dpt-logo { width: 2.5rem; height: 2.5rem; }
.dpt-brand .dpt-word { height: 1.6rem; width: auto; }
.dpt-hotbar { display: flex; padding: 3px; background: rgba(0,0,0,.6); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #5a5a5a; }
.dpt-hs { position: relative; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; text-decoration: none; }
.dpt-hs + .dpt-hs { box-shadow: -2px 0 0 #5a5a5a; }
.dpt-hs svg { width: 1.8rem; height: 1.8rem; transition: transform .1s; }
.dpt-hs .dpt-k { position: absolute; right: 2px; bottom: 0; font: 700 .62rem/1 var(--dpt-display); color: #fff; text-shadow: 1px 1px 0 #000; }
.dpt-hs:hover svg { transform: translateY(-2px) scale(1.06); }
.dpt-hs[aria-current="page"]::after { content: ""; position: absolute; inset: -4px; border: 3px solid #f2f2f2; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #000; pointer-events: none; }
.dpt-hs .dpt-tip { top: calc(100% + .7rem); left: 50%; transform: translate(-50%, -3px); }
.dpt-hs:hover .dpt-tip, .dpt-hs:focus-visible .dpt-tip { opacity: 1; transform: translate(-50%, 0); }
.dpt-bar .dpt-end { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.dpt-safe { font: 700 .78rem/1.2 var(--dpt-display); color: var(--dpt-green); }
.dpt-size { display: flex; gap: 4px; }
.dpt-size .dpt-btn { padding: .35rem .5rem; font-size: .85rem; min-width: 2.1rem; }
.dpt-size .dpt-btn[aria-pressed="true"] { background: #6e5500; box-shadow: inset 2px 2px 0 #ffe27a, inset -2px -3px 0 #5d4800, 0 0 0 2px #000; }

/* ---- sky hero ---- */
.dpt-sky { position: relative; overflow: hidden; background: var(--dpt-night-2); border-bottom: 3px solid #000; }
.dpt-sky > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.dpt-sky > .dpt-inner { position: relative; display: grid; align-content: center; justify-items: start; gap: .6rem; padding-block: 2.2rem 3.6rem; min-height: 15rem; }
/* TC-001 D2 (Gate B): the title's % width must resolve against the full row, not a shrink-to-fit h1,
   or the box is 0x0 until the PNG loads and the page jumps when it arrives. */
.dpt-sky > .dpt-inner > h1 { justify-self: stretch; }
.dpt-sky.dpt-small > .dpt-inner { min-height: 9.5rem; padding-block: 1.2rem 2.6rem; }
.dpt-sky .dpt-title { width: min(100%, 38rem); height: auto; /* TC-001 D2: keep the PNG's own aspect ratio */ filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.dpt-sky.dpt-small .dpt-title { width: min(70%, 15rem); }
.dpt-sky h1.dpt-title-text { margin: 0; font: 700 2.1rem/1.05 var(--dpt-display); color: var(--dpt-acc, var(--dpt-gold)); text-shadow: 3px 3px 0 #000; }
.dpt-sky .dpt-lead { max-width: 38rem; margin: 0; font-size: 1.12rem; color: var(--dpt-ink); text-shadow: 2px 2px 0 #000; }
.dpt-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.dpt-chip { font: 700 .76rem/1 var(--dpt-display); padding: .3rem .45rem; background: rgba(0,0,0,.6); color: var(--dpt-ink-dim); box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #3a3f6b; }

/* ---- advancement toast ---- */
.dpt-toast { display: grid; grid-template-columns: 2.6rem 1fr; gap: .1rem .7rem; align-items: center; background: #212121; color: #fff;
  box-shadow: inset 2px 2px 0 #4b4b4b, inset -2px -2px 0 #0f0f0f, 0 0 0 2px #000; padding: .55rem .8rem .55rem .6rem; max-width: 27rem; }
.dpt-toast .dpt-slot { width: 2.6rem; height: 2.6rem; grid-row: span 2; }
.dpt-toast .dpt-slot svg { width: 1.7rem; height: 1.7rem; }
.dpt-toast b { font: 700 .95rem/1.1 var(--dpt-display); color: var(--dpt-gold); }
.dpt-toast span { font-size: .92rem; line-height: 1.25; }
.dpt-toast.dpt-pop { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(4.6rem + env(safe-area-inset-top, 0px)); z-index: 50; animation: dpt-slide .35s ease-out; }
@keyframes dpt-slide { from { transform: translateX(120%); } to { transform: none; } }

/* ---- XP bar progress ---- */
.dpt-xp { display: grid; gap: .3rem; }
.dpt-xp .dpt-xpbar { height: 14px; background: #000; box-shadow: 0 0 0 2px #000; position: relative; overflow: hidden; }
.dpt-xp .dpt-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#a6ff4c, #5dbb1e); transition: width .15s; }
.dpt-xp .dpt-xpbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #000 calc(10% - 2px) 10%); }
.dpt-xp .dpt-lbl { font: 700 .85rem/1 var(--dpt-display); color: #a6ff4c; text-shadow: 1px 1px 0 #000; }

/* ---- hub inventory rows ---- */
.dpt-inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .7rem; }
.dpt-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .1rem .85rem; align-items: center; padding: .45rem; text-decoration: none; color: inherit; position: relative; }
.dpt-row:hover, .dpt-row:focus-visible { background: rgba(255,255,255,.1); }
.dpt-row .dpt-slot { width: 4.2rem; height: 4.2rem; grid-row: span 3; }
.dpt-row .dpt-slot svg { width: 2.8rem; height: 2.8rem; transition: transform .12s; }
.dpt-row:hover .dpt-slot::after { content: ""; position: absolute; inset: 3px; background: rgba(255,255,255,.3); }
.dpt-row:hover .dpt-slot svg { transform: scale(1.08); }
.dpt-row .dpt-nm { font: 700 1.25rem/1 var(--dpt-display); color: var(--dpt-acc); display: flex; align-items: baseline; gap: .5rem; text-shadow: 1px 1px 0 #000; }
.dpt-row .dpt-nm small { font: 700 .72rem/1 var(--dpt-display); color: var(--dpt-on-panel-dim); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; }
.dpt-row .dpt-q { font-size: 1.02rem; color: var(--dpt-on-panel); }
.dpt-row .dpt-d { font-weight: 400; font-size: .94rem; color: var(--dpt-on-panel-dim); }
.dpt-row.dpt-wide { grid-column: 1 / -1; }
.dpt-hint { font: 500 .8rem/1.3 var(--dpt-display); color: var(--dpt-on-panel-dim); margin-top: .6rem; }
.dpt-hint kbd { font: inherit; background: #2a2a2a; color: #fff; box-shadow: 0 0 0 1px #000, inset -1px -2px 0 #111; padding: 0 .3rem; }

/* ---- shared page pieces ---- */
.dpt-main { padding-block: 1.4rem 1.8rem; }
.dpt-main > .dpt-inner { display: grid; gap: 1.2rem; }
.dpt-main > .dpt-inner > * { min-width: 0; }   /* a wide report, frame or code block must not widen the page */
.dpt-strip { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; padding: .7rem .9rem; background: #1a1430; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #3b2f6b; }
.dpt-strip svg { width: 2.2rem; height: 2.2rem; flex: none; }
.dpt-strip b { font: 700 1rem/1.2 var(--dpt-display); color: var(--dpt-gold); display: block; }
.dpt-strip span { font-weight: 400; font-size: .92rem; color: var(--dpt-ink-dim); }
.dpt-strip:hover { box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #6a3cff; }
.dpt-code { position: relative; margin-top: .4rem; }
.dpt-code pre { margin: 0; background: #0b0b0b; color: #e8ffe0; font: 500 .85rem/1.5 var(--dpt-mono); padding: .7rem 4.8rem .7rem .8rem; overflow-x: auto; box-shadow: 0 0 0 2px #000; white-space: pre; }
.dpt-code .dpt-btn { position: absolute; top: .4rem; right: .4rem; font-size: .75rem; padding: .3rem .5rem; }
.dpt code { font: 700 .9em var(--dpt-mono); background: rgba(0,0,0,.35); padding: 0 .25em; }

/* ---- ad slots: nothing at all until ads are switched on ---- */
.dpt-ad { display: none; }
body.dpt-ads-on .dpt-ad, body.dpt-ads-preview .dpt-ad { display: grid; place-items: center; min-height: 92px; }
body.dpt-ads-preview .dpt-ad { font: 700 .72rem/1.2 var(--dpt-display); letter-spacing: .1em; text-transform: uppercase; color: #8c8c8c; text-align: center;
  background: repeating-linear-gradient(45deg, #15182c 0 8px, #11142a 8px 16px); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #2b3060; }
body.dpt-ads-preview .dpt-ad::before { content: "Ad slot · " attr(data-slot); }
.dpt-ad.dpt-rail { min-height: 600px; position: sticky; top: 5rem; }

/* ---- footer: grass over dirt ---- */
.dpt-foot { background: var(--dpt-dirt); box-shadow: inset 0 6px 0 var(--dpt-grass), inset 0 9px 0 #3c7a24; padding-block: 1.3rem 1.2rem;
  background-image: radial-gradient(var(--dpt-dirt-2) 1.5px, transparent 1.6px); background-size: 9px 9px; }
.dpt-foot .dpt-inner { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; font-size: .92rem; }
.dpt-foot a { color: #fff; text-shadow: 1px 1px 0 #000; }
.dpt-foot .dpt-r { margin-left: auto; color: #f3dcbf; text-shadow: 1px 1px 0 #000; font-weight: 400; }

/* ---- phones: the hotbar moves to the bottom of the screen ---- */
@media (max-width: 760px) {
  .dpt-safe { display: none; }
  .dpt-brand .dpt-logo { width: 2.1rem; height: 2.1rem; }
  .dpt-brand .dpt-word { height: 1.25rem; }
  .dpt-bar .dpt-inner { gap: .5rem; }
  .dpt-size { gap: 3px; } .dpt-size .dpt-btn { min-width: 1.75rem; padding: .3rem .3rem; font-size: .72rem; }
  .dpt-hotbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 35; }
  .dpt-hs { width: 3.3rem; height: 3.3rem; }
  .dpt-hs .dpt-tip { display: none; }
  body.dpt { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .dpt-inv { grid-template-columns: 1fr; }
  .dpt-sky > .dpt-inner { min-height: 12rem; padding-block: 1.4rem 3rem; }
  .dpt-toast.dpt-pop { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(3.8rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 440px) { .dpt-brand .dpt-word { display: none; } }
@media (prefers-reduced-motion: reduce) { .dpt-toast.dpt-pop { animation: none; } .dpt * { transition: none !important; } }

/* headings that carry numbers or long sentences use the body face: Silkscreen's digits
   (4 as a hooked glyph) are hard to read at small sizes for a low-vision reader */
.dpt-body-face { font-family: var(--dpt-body) !important; letter-spacing: 0 !important; }
.dpt-skip { position: absolute; left: -9999px; top: 0; background: var(--dpt-gold); color: #000; padding: .75rem 1rem; z-index: 70; font-weight: 700; }
.dpt-skip:focus { left: 0; }

/* phones at A+ and A++: labels wrap, slots shrink, nothing pushes the page sideways */
.dpt-row .dpt-nm { flex-wrap: wrap; }
.dpt-panel code, .dpt-panel a { overflow-wrap: anywhere; }
.dpt select { max-width: 100%; }
@media (max-width: 760px) { .dpt-hs { width: min(3.3rem, 18vw); height: min(3.3rem, 18vw); } }
/* links on the Dark UI grey: white and underlined. Coloured text cannot reach 7:1 on #535353. */
.dpt-panel a:not(.dpt-btn):not(.dpt-row) { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }