/* Remastered Art configurator (remastered-art.html) */
.hdart-top { padding-top: 0; }
.hdart-status { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; padding: .85rem 1.1rem; border: 1px dashed var(--line-highlight); background: rgba(17, 26, 42, 0.6); color: var(--muted); }
.hdart-status[hidden] { display: none; }
.hdart-status.is-error { border-color: var(--laser-red); color: var(--ink); }
.hdart-explainer::before { content: "BRIEFING // REMASTERED ART"; }
.hdart-explainer ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.hdart-explainer li + li { margin-top: .35rem; }
.hdart-explainer strong { color: var(--ink); }

.hdart-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.75rem 0 1.25rem; }
.hdart-presets-label { margin-right: .35rem; color: var(--holo); font: 700 .85rem/1 'Rajdhani', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* Groups and pack cards */
.hdart-groups { min-height: 24rem; }
.hdart-loading { padding: 2rem; color: var(--muted); border: 1px dashed var(--line); text-align: center; }
.hdart-group { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.hdart-group-legend { display: flex; align-items: center; gap: .65rem; width: 100%; padding: 0 0 .6rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line); }
.hdart-group-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem; cursor: pointer; font: 700 1.35rem/1.2 'Rajdhani', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.hdart-group-meta { color: var(--muted); font-size: .95rem; letter-spacing: .08em; }
.hdart-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .85rem; }

.hdart-group-check, .hdart-pack-check { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.hdart-group-check:focus-visible, .hdart-pack-check:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.card.hdart-pack { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem; }
.card.hdart-pack:hover { transform: none; }
.card.hdart-pack.is-selected { border-color: var(--accent); background: linear-gradient(180deg, #1a2333 0%, #111724 100%); box-shadow: inset 0 0 0 1px rgba(255, 190, 91, 0.35), 0 0 14px rgba(255, 190, 91, 0.12); }
.card.hdart-pack:focus-within { border-color: var(--holo); }
.hdart-pack-body { flex: 1; min-width: 0; }
.hdart-pack-head { display: flex; align-items: center; gap: .55rem; }
/* The label covers the whole card, so a click anywhere toggles the pack (the preview button sits above it). */
.hdart-pack-name { font: 700 1.1rem/1.2 'Rajdhani', system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; }
.hdart-pack-name::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.hdart-pack-desc { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.hdart-pack-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .45rem 0 0; color: var(--holo); font: 700 .85rem/1.3 'Rajdhani', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.hdart-thumb { position: relative; z-index: 2; flex-shrink: 0; display: grid; place-items: center; width: 5.5rem; aspect-ratio: 8 / 5; padding: 0; overflow: hidden; border: 1px solid var(--line); background: #05080e; }
button.hdart-thumb { cursor: zoom-in; }
button.hdart-thumb:hover { border-color: var(--holo); box-shadow: 0 0 10px var(--holo-glow); }
button.hdart-thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hdart-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.hdart-thumb-empty { color: var(--line-highlight); font: 700 1.6rem/1 'Rajdhani', system-ui, sans-serif; background: repeating-linear-gradient(45deg, #0b111c 0 6px, #0e1522 6px 12px); }
.hdart-lightbox-viewport { aspect-ratio: auto; min-height: 12rem; }

/* Sticky summary bar */
.hdart-bar { position: sticky; bottom: 0; z-index: 20; margin-top: .5rem; border-top: 1px solid var(--accent); background: rgba(9, 14, 24, 0.94); backdrop-filter: blur(6px); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45); }
.hdart-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-block: .7rem; }
.hdart-bar-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font: 600 1.05rem/1.3 'Rajdhani', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hdart-bar-summary strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.hdart-bar-divider { color: var(--line-highlight); }
.hdart-bar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hdart-bar-actions .copy-btn { text-decoration: none; }
.hdart-bar-primary { color: var(--button-ink); background: var(--accent); border-color: var(--accent); }
.hdart-bar-primary:hover { color: var(--button-ink); background: #ffd88b; box-shadow: 0 0 12px var(--accent-glow); }

/* Outputs */
.hdart-output h2 { scroll-margin-top: 1rem; }
.hdart-empty { color: var(--muted); padding: 1rem; border: 1px dashed var(--line); }
.hdart-empty[hidden] { display: none; }
.hdart-links { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.hdart-link { padding: .65rem .9rem; border: 1px solid var(--line); background: rgba(17, 26, 42, 0.55); }
.hdart-link-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.hdart-link-name { font: 700 1.05rem/1.3 'Rajdhani', system-ui, sans-serif; letter-spacing: .05em; min-width: 14rem; }
.hdart-link-head .meta { margin: 0; }
.hdart-link-sha { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .35rem; }
.hdart-link-sha code { font-size: .78rem; overflow-wrap: anywhere; }
.hdart-sha-label { color: var(--muted); font: 700 .78rem/1 'Rajdhani', system-ui, sans-serif; letter-spacing: .1em; }
.hdart-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hdart-share .meta { margin: 0; overflow-wrap: anywhere; }

.hdart-path { margin: 1.25rem 0 1rem; }
.hdart-path-label { display: block; margin-bottom: .4rem; color: var(--holo); font: 700 .95rem/1.2 'Rajdhani', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hdart-path .path-input { width: 100%; max-width: 38rem; min-width: 0; }
.hdart-script-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.hdart-script-actions .copy-btn { text-decoration: none; }
.copy-btn:disabled, .copy-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.copy-btn:focus-visible, .faction-filter-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hdart-script { max-height: 28rem; overflow: auto; margin: 0 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--line); background: #05080e; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.hdart-script:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hdart-script code { padding: 0; border: 0; background: none; color: #cfe6ff; font-size: .8rem; line-height: 1.5; white-space: pre; }
.hdart-run-heading { margin-top: .5rem; }
.hdart-run { color: var(--muted); padding-left: 1.3rem; }
.hdart-run li + li { margin-top: .35rem; }
.hdart-run code { overflow-wrap: anywhere; }

@media (max-width: 38rem) {
  .hdart-pack-grid { grid-template-columns: 1fr; }
  .hdart-thumb { width: 4.5rem; }
  .hdart-bar-inner { padding-block: .55rem; }
  .hdart-bar-actions { width: 100%; }
  .hdart-bar-actions .copy-btn { flex: 1; justify-content: center; }
  .hdart-link-name { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hdart-bar { backdrop-filter: none; } }

/* Completion (overall + per pack) */
.hdart-overall { position: relative; margin-bottom: 1.5rem; padding: 1.15rem 1.25rem 1.1rem; border: 1px solid var(--line-highlight); background: linear-gradient(180deg, #131c2b 0%, #0d1421 100%); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.hdart-overall[hidden] { display: none; }
.hdart-overall-heading { margin: 0 0 .7rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--muted); }
.hdart-overall-pct { color: var(--accent); font-size: 1.6em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px var(--accent-glow); }
.hdart-overall-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .6rem 0 0; font: 600 1rem/1.3 'Rajdhani', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hdart-overall-meta strong { color: var(--ink); }
.hdart-overall .meta { margin-top: .35rem; }

.hdart-meter { position: relative; height: .55rem; border: 1px solid var(--line-highlight); background: #05080e; overflow: hidden; }
.hdart-meter[hidden] { display: none; }
.hdart-meter-lg { height: .9rem; }
.hdart-meter-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #df992d 0%, var(--accent) 70%, #ffd88b 100%); box-shadow: 0 0 10px var(--accent-glow); }
/* HUD tick marks every 10% */
.hdart-meter::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(9, 14, 24, 0.85) calc(10% - 1px) 10%); }
.hdart-progress-line { margin: .55rem 0 0; }
.hdart-meter-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem; margin: .3rem 0 0; font: 600 .85rem/1.3 'Rajdhani', system-ui, sans-serif; letter-spacing: .06em; color: var(--muted); }
.hdart-meter-text strong { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.hdart-meter-text span { font-size: .8rem; }
.hdart-complete { position: relative; z-index: 0; }

.hdart-thumb-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem .2rem; background: rgba(5, 8, 14, 0.85); color: var(--ink); font: 700 .62rem/1.2 'Rajdhani', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; }

/* Unfinished packs: greyed out, not selectable, still focusable (aria-disabled) */
.card.hdart-pack.is-locked { border-style: dashed; background: linear-gradient(180deg, #10161f 0%, #0b1018 100%); }
.card.hdart-pack.is-locked .hdart-pack-name { cursor: not-allowed; color: var(--muted); }
.card.hdart-pack.is-locked .hdart-pack-desc, .card.hdart-pack.is-locked .hdart-pack-meta { opacity: .6; }
.card.hdart-pack.is-locked .hdart-thumb img { filter: grayscale(1) brightness(.75); }
.card.hdart-pack.is-locked .hdart-pack-check { cursor: not-allowed; opacity: .45; }
.card.hdart-pack.is-locked .hdart-meter-fill { background: linear-gradient(90deg, #4b5d78 0%, #7d93b3 100%); box-shadow: none; }
.card.hdart-pack.is-locked .hdart-meter-text strong { color: var(--ink); }
.hdart-locked-note { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.hdart-locked-note .tag { margin-right: .25rem; }
.hdart-group-check:disabled { cursor: not-allowed; opacity: .4; }
.hdart-group-check:disabled + .hdart-group-name { cursor: default; }