/* MCVIEW web shell. TC-001 R6, R17 — see docs/TC/records/TC-001-10-30-26-mcview-structure-render-tool/tc_record.html
 *
 * The frame (bar, sky, Dark UI panels, buttons, footer, text size) comes from the shared datapack-tools kit at
 * /mcdatapack/kit/kit.css. This file styles only MCVIEW's own parts: the drop slot, the link box, the controls,
 * the report, the 3D view and the images. Dense, heavy, high contrast; every size in rem so browser zoom and the
 * kit's text-size buttons both scale it. The 3D view inside its frame keeps its own look (mcview/viewer.py). */

.dpt-panel h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: #fff; overflow-wrap: anywhere; font-family: var(--dpt-body); letter-spacing: 0; }
.hint { color: var(--dpt-on-panel-dim); font-size: .95rem; }
.dpt-main > .dpt-inner > .hint { color: var(--dpt-ink-dim, #c9cfe8); }
.hint a { color: var(--dpt-cyan, #7fe0ff); }

/* the way back, for a page whose kit did not load; the kit's bar carries it otherwise */
.nokit { margin: .5rem 1rem; }
.nokit a { color: #7fe0ff; font-weight: 700; }
body.dpt-ready .nokit { display: none; }

/* -- drop target: a big inset slot -- */
#drop { display: block; position: relative; text-align: center; padding: 2rem 1.2rem; cursor: pointer;
  background: #2b2b2b; box-shadow: inset 3px 3px 0 #111, inset -3px -3px 0 #6a6a6a; }
#drop:hover, #drop.over { background: #343434; box-shadow: inset 3px 3px 0 #111, inset -3px -3px 0 #6a6a6a, 0 0 0 2px var(--dpt-orange); }
#drop .big { display: block; font: 700 1.25rem/1.2 var(--dpt-display); color: var(--dpt-orange); margin: 0 0 .5rem; }
#drop:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, pre:focus-visible, a:focus-visible { outline: 3px solid var(--dpt-gold, #ffe066); outline-offset: 2px; }
#file { position: absolute; opacity: 0; width: 1px; height: 1px; }

.linkrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.linkrow label { font-size: .95rem; flex-basis: 100%; }
.linkrow .new { font: 700 .68rem/1 var(--dpt-display); background: var(--dpt-gold, #ffe066); color: #000; padding: .15rem .3rem; margin-left: .35rem; vertical-align: middle; }
.linkrow input { flex: 1 1 16rem; min-width: 0; font: 700 .95rem var(--dpt-mono); color: #ececec; background: #000; border: 2px solid #9a9a9a; padding: .45rem .55rem; }
.linkrow input::placeholder { color: #8a8a8a; }

/* R17 (Gate B): the status line sits in its own dark slot. Coloured text on the kit's #535353 panel reaches only
   3:1 (red) and 5.4:1 (green); on #0b0b0b it is 7.8:1 and 13.8:1, so an error stays readable for a low-vision reader. */
#status { margin: .8rem 0 0; min-height: 1.6rem; color: var(--dpt-green, #7cf08a); font-weight: 700;
  background: #0b0b0b; padding: .35rem .6rem; box-shadow: 0 0 0 2px #000; }
#status.bad { color: var(--dpt-red, #ff7a7a); }

/* -- controls: the game's button style -- */
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0; }
.row label { color: var(--dpt-on-panel-dim); font-size: .95rem; }
#render, #sheet { font: 700 .95rem/1 var(--dpt-display); color: #fff; text-shadow: 2px 2px 0 #222; background: #484848; border: 0; cursor: pointer;
  box-shadow: inset 2px 2px 0 #7a7a7a, inset -2px -3px 0 #262626, 0 0 0 2px #000; padding: .55rem .9rem; }
#render:hover, #sheet:hover { background: #4f5a9c; box-shadow: inset 2px 2px 0 #9aa6ff, inset -2px -3px 0 #2a2f5c, 0 0 0 2px #fff; }
button.primary { background: #3e8f3a !important; box-shadow: inset 2px 2px 0 #7fd67a, inset -2px -3px 0 #1e4d1c, 0 0 0 2px #000 !important; }
button.primary:hover { background: #4caa47 !important; }
button:disabled { opacity: .5; cursor: default; }
select, input[type=number] { font: 700 .95rem var(--dpt-body); color: #fff; background: #2b2b2b; border: 2px solid #9a9a9a; padding: .35rem .5rem; }
input[type=number] { width: 5.5rem; }
#structure { max-width: min(100%, 30rem); }

/* -- output -- */
#report { background: #0b0b0b; color: #ffd2c4; box-shadow: 0 0 0 2px #000, inset 4px 0 0 var(--dpt-red); padding: .8rem; margin: 0;
  max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 600 .92rem/1.45 var(--dpt-mono); }
/* R17 (Gate B): the 3D view breaks out of the kit's 1060 px column, up to 1400 px and never past the window */
#viewBox { margin-inline: min(0px, max(calc((100% - 1400px) / 2), calc((100% - 100vw + 48px) / 2))); }
#view { width: 100%; height: 80vh; border: 0; display: block; background: #0b0e14; box-shadow: 0 0 0 3px #000; }
#images { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: .6rem; }
figure { margin: 0; background: #2b2b2b; padding: .35rem; box-shadow: inset 2px 2px 0 #111, inset -2px -2px 0 #6a6a6a; }
figure img { width: 100%; display: block; }
figcaption { overflow-wrap: anywhere; font-size: .9rem; padding-top: .25rem; }
@media (max-width: 600px) { #view { height: 65vh; } }

/* If the shared kit fails to load, the page must still be readable: dark ground, light text. */
body { background: #090c1a; color: #f3f5ff; font-family: "Atkinson Hyperlegible", "Segoe UI", Verdana, sans-serif; }