/* The archive's look for the Agent Toolkit wizard: the module's own layout (css/module.css), the archive's palette and type. */
:root {
    --font-primary: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
    --color-bg: #07090a;
    --color-text-primary: #c9d4cf;

    --dg-green: #4fd18b;
    --dg-green-mid: #4fd18b;
    --dg-green-light: #8fe6b4;
    --dg-green-border: #2a6e4b;
    --dg-green-btn: #1d4d35;
    --dg-green-btn-hover: #26663f;

    --dg-bg-darkest: #07090a;
    --dg-bg-base: #07090a;
    --dg-bg-sunken: #0a0d0e;
    --dg-bg-input: #07090a;
    --dg-bg-raised: #0d1112;
    --dg-bg-muted: #121819;
    --dg-bg-green-dark: #0b1a12;
    --dg-bg-green-subtle: #0b1510;

    --dg-border: #1f2a2a;
    --dg-border-subtle: #1a2323;
    --dg-border-panel: #1f2a2a;
    --dg-border-input: #263333;
    --dg-border-light: #2f3d3d;
    --dg-border-green: #1f3b2c;
    --dg-border-green-bright: #2a6e4b;

    --dg-text-white: #e6efe9;
    --dg-text: #c9d4cf;
    --dg-text-soft: #c9d4cf;
    --dg-text-muted: #a7b3ae;
    --dg-text-dim: #7d8b86;
    --dg-text-faint: #7d8b86;
    --dg-text-disabled: #6b7874;
    --dg-text-ghost: #55615d;

    --dg-phosphor: #4fd18b;
    --dg-phosphor-dark: #2a6e4b;
    --dg-phosphor-bg: #07090a;
    --dg-phosphor-bg-hover: #0b1a12;
}

.web-wrap { max-width: 1120px; margin: 0 auto; padding: 22px 16px 60px; }

/* the wizard sits in the page, not in a window */
#dg-chargen-wizard { background: none; border: 0; box-shadow: none; }
#dg-chargen-wizard .window-content.web-layout { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
#dg-chargen-wizard .dg-wizard-wrapper { height: auto; padding: 0; background: none; }
#dg-chargen-wizard .dg-wizard-form { overflow: visible; }
#dg-chargen-wizard .dg-wizard-progress { display: none; }
#dg-chargen-wizard h2, #dg-chargen-wizard h3 { font-family: var(--mono); color: #e6efe9; }
#dg-chargen-wizard h2 { border: 0; margin: .2em 0 .5em; font-size: 1.6rem; }
#dg-chargen-wizard .dg-step-welcome h2 { font-family: var(--mono); letter-spacing: .14em; color: var(--green); }
#dg-chargen-wizard input, #dg-chargen-wizard select, #dg-chargen-wizard textarea { font-family: var(--sans); }
#dg-chargen-wizard button { font-family: var(--mono); }

/* step list down the left */
.web-side { position: sticky; top: 84px; }
.web-steps { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .85rem; }
.web-steps button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; background: none; border: 0; border-left: 2px solid var(--line); color: var(--dim); cursor: pointer; font: inherit; }
.web-steps b { width: 1.4em; text-align: right; font-weight: 600; }
.web-steps .done button { color: var(--text); }
.web-steps .done b { color: var(--green); }
.web-steps .on button { border-left-color: var(--green); color: var(--green); background: var(--panel); }
.web-steps .warn button::after { content: "!"; color: var(--amber); margin-left: auto; }
.web-steps button:hover { color: var(--text); }
.web-portrait { margin: 18px 0 0; padding-left: 10px; }
.web-portrait img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 3px; display: block; }
.web-portrait figcaption { font-family: var(--mono); font-size: .75rem; color: var(--dim); margin-top: 4px; }

/* finish screen */
#finish h1 { margin-top: .2em; }
.finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.card2 h3 { margin-top: 0; }
.btn { font-family: var(--mono); font-size: .85rem; background: none; border: 1px solid var(--line); color: var(--text); padding: 8px 14px; border-radius: 3px; cursor: pointer; }
.btn:hover { border-color: var(--green-dim); }
.btn.go { border-color: var(--green); color: var(--green); }
.sent { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--green-dim); background: #0b1a12; border-radius: 4px; font-size: .92rem; }
.sent b { color: var(--green); font-family: var(--mono); margin-right: 8px; }
.sent b.warn { color: var(--amber); }
.nav-row { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }

/* notifications and confirm boxes (Foundry's own aren't here) */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--green); padding: 10px 12px; border-radius: 3px; font-size: .9rem; transition: opacity .5s; }
.toast.warn { border-left-color: var(--amber); }
.toast.error { border-left-color: var(--red); }
.toast.out { opacity: 0; }
.web-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; max-width: 520px; padding: 18px; }
.web-dialog::backdrop { background: #000a; }
.web-dialog h3 { margin-top: 0; }
.web-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (max-width: 760px) {
    #dg-chargen-wizard .window-content.web-layout { grid-template-columns: 1fr; gap: 12px; }
    .web-side { position: static; }
    .web-steps { display: flex; overflow-x: auto; }
    .web-portrait { display: none; }
    .web-steps button { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
    .web-steps .on button { border-bottom-color: var(--green); }
    .finish-grid { grid-template-columns: 1fr; }
    #dg-chargen-wizard .window-content > * { min-width: 0; }
    #dg-chargen-wizard .dg-stats-grid, #dg-chargen-wizard .dg-bonus-slots { grid-template-columns: 1fr 1fr; }
    #dg-chargen-wizard .dg-bio-grid, #dg-chargen-wizard .dg-review-bio-grid, #dg-chargen-wizard .dg-personal-details .dg-pd-row { grid-template-columns: 1fr; }
    #dg-chargen-wizard .dg-review-derived-grid { grid-template-columns: auto auto auto auto; }
    #dg-chargen-wizard .dg-vet-pick { grid-template-columns: 40px 1fr; }
    #dg-chargen-wizard table { display: block; overflow-x: auto; }
    #dg-chargen-wizard input, #dg-chargen-wizard select, #dg-chargen-wizard textarea { max-width: 100%; }
}