/* =========================================================================
   Delta Green Character Creation Wizard — Module Styles
   ========================================================================= */

/* --------------------------------------------------------------------------
   Design tokens — all colours live here so the palette is defined once.
   -------------------------------------------------------------------------- */
:root {
    /* ── Green accent ────────────────────────── */
    --dg-green: #c0e060;
    --dg-green-mid: #8db84f;
    --dg-green-light: #c8e88a;
    --dg-green-border: #6bad63;
    --dg-green-btn: #4a7c44;
    --dg-green-btn-hover: #5a9c54;

    /* ── Backgrounds ─────────────────────────── */
    --dg-bg-darkest: #111;
    --dg-bg-base: #1c1c1c;
    --dg-bg-sunken: #181818;
    --dg-bg-input: #1a1a1a;
    --dg-bg-raised: #252525;
    --dg-bg-muted: #2e2e2e;
    --dg-bg-green-dark: #2a3a20;
    --dg-bg-green-subtle: #1c2318;

    /* ── Borders ─────────────────────────────── */
    --dg-border: #333;
    --dg-border-subtle: #2e2e2e;
    --dg-border-panel: #3a3a3a;
    --dg-border-input: #444;
    --dg-border-light: #555;
    --dg-border-green: #3a4a30;
    --dg-border-green-bright: #5a803a;

    /* ── Text ────────────────────────────────── */
    --dg-text-white: #fff;
    --dg-text: #ddd;
    --dg-text-soft: #ccc;
    --dg-text-muted: #bbb;
    --dg-text-dim: #aaa;
    --dg-text-faint: #999;
    --dg-text-disabled: #888;
    --dg-text-ghost: #666;

    /* ── Warning / Danger ────────────────────── */
    --dg-warn: #d97742;
    --dg-warn-border: #fe640b;
    --dg-danger: #c0392b;
    --dg-danger-text: #d08080;
    --dg-danger-border: #7a3333;
    --dg-danger-bg: #3a1e1e;

    /* ── Blue / Info ─────────────────────────── */
    --dg-blue: #60aadf;
    --dg-blue-light: #8acae8;
    --dg-bg-blue: #1a2a3a;
    --dg-bg-blue-hover: #22405a;
    --dg-border-blue: #2a5a8a;

    /* ── Welcome phosphor ────────────────────── */
    --dg-phosphor: #00b41e;
    --dg-phosphor-dark: #00821a;
    --dg-phosphor-bg: #001f05;
    --dg-phosphor-bg-hover: #003a0c;
}

/* --------------------------------------------------------------------------
   Agent Wizard launch bar (injected at top of agent sheet)
   -------------------------------------------------------------------------- */
.dg-agent-wizard-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--dg-bg-darkest);
    border-bottom: 1px solid var(--dg-border);
    overflow: visible;          /* the SAN and File flyouts drop down over the sheet */
    position: relative;
    z-index: 20;
    transition: padding 0.2s ease;
}

/* Buttons container — wraps all action buttons; collapse hides the whole group */
.dg-wizard-bar-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.dg-agent-wizard-launch {
    background: #2a3a1a;
    border: 1px solid var(--dg-border-green);
    color: var(--dg-green);
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dg-agent-wizard-launch i {
    font-size: 2rem;
}

.dg-agent-wizard-launch:hover {
    background: var(--dg-border-green-bright);
    color: var(--dg-green-light);
}

/* PDF export button */
.dg-agent-pdf-export {
    background: var(--dg-bg-blue);
    border: 1px solid var(--dg-border-blue);
    color: var(--dg-blue);
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dg-agent-pdf-export i {
    font-size: 1.1rem;
}

.dg-agent-pdf-export:hover {
    background: var(--dg-bg-blue-hover);
    color: var(--dg-blue-light);
}

/* Toggle button — always visible, sits right of the buttons group */
.dg-wizard-bar-toggle {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.55;
    transition: opacity 0.15s ease;
    color: var(--dg-green-mid);
    font-size: 0.85rem;
    white-space: nowrap;
}

.dg-wizard-bar-toggle:hover,
.dg-wizard-bar-toggle:focus,
.dg-wizard-bar-toggle:active {
    opacity: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Label text — shown via JS; hidden (display:none) when collapsed */
.dg-wizard-bar-toggle-label {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dg-green-mid);
}

/* Delta Green triangle icon — pointing right = collapsed, pointing down = expanded */
.dg-wizard-bar-triangle {
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #5a8a30;
    transition: transform 0.2s ease;
    transform: rotate(90deg);
    /* pointing down when expanded */
}

/* Collapsed state — shrink bar padding */
.dg-wizard-bar-collapsed {
    padding-top: 4px;
    padding-bottom: 4px;
}

.dg-wizard-bar-collapsed .dg-wizard-bar-triangle {
    transform: rotate(0deg);
    /* pointing right when collapsed */
}


/* --------------------------------------------------------------------------
   Wrapper & Progress bar
   -------------------------------------------------------------------------- */
.dg-wizard-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-primary, "Signika", serif);
    background: var(--color-bg, var(--dg-bg-base));
    color: var(--color-text-primary, var(--dg-text));
    padding: 0.75rem 1rem;
    gap: 0.5rem;
}

.dg-wizard-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.dg-step-dot {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--dg-border-panel);
    flex-shrink: 0;
    transition: border-bottom-color 0.2s;
}

.dg-step-dot.done {
    border-bottom-color: #3e5e36;
}

.dg-step-dot.active {
    border-bottom-color: var(--dg-green-mid);
}

.dg-step-label {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--dg-text-disabled);
}

/* --------------------------------------------------------------------------
   Form & scroll area
   -------------------------------------------------------------------------- */
.dg-wizard-form {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.dg-step h2 {
    font-size: 1.25rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--dg-green);
    border-bottom: 1px solid var(--dg-border-panel);
    padding-bottom: 0.25rem;
}

.dg-step h3 {
    font-size: 1rem;
    color: var(--dg-text-dim);
    margin: 0.75rem 0 0.25rem;
}

.dg-hint {
    font-size: 0.85rem;
    color: var(--dg-text-faint);
    margin-bottom: 0.75rem;
}

.dg-warn {
    color: var(--dg-warn);
    font-size: 0.85rem;
}

.dg-flavour {
    font-style: italic;
    color: var(--dg-text-dim);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.dg-step-welcome {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

.dg-step-welcome h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
}

.dg-step-welcome .dg-flavour {
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 1rem;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.7;
}

.dg-step-welcome>p:not(.dg-flavour) {
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto 1rem;
    font-family: 'Courier New', Courier, monospace;
}

/* Welcome step: everything is pyramid phosphor green */
[data-step="welcome"] {
    color: var(--dg-phosphor);
}

[data-step="welcome"] .dg-step-dot {
    border-bottom-color: var(--dg-phosphor-dark);
}

[data-step="welcome"] .dg-step-dot.active {
    border-bottom-color: var(--dg-phosphor);
}

[data-step="welcome"] .dg-step-label,
[data-step="welcome"] .dg-step h2,
[data-step="welcome"] .dg-step p,
[data-step="welcome"] .dg-flavour,
[data-step="welcome"] strong {
    color: var(--dg-phosphor);
    border-bottom-color: var(--dg-phosphor-dark);
}

[data-step="welcome"] .dg-btn-primary,
[data-step="welcome"] .dg-btn-secondary {
    background: var(--dg-phosphor-bg);
    border-color: var(--dg-phosphor);
    color: var(--dg-phosphor);
}

[data-step="welcome"] .dg-btn-primary:hover,
[data-step="welcome"] .dg-btn-secondary:hover {
    background: var(--dg-phosphor-bg-hover);
}

[data-step="welcome"] .dg-wizard-nav i {
    color: var(--dg-phosphor);
}


.dg-welcome-pyramid {
    display: block;
    width: 100%;
    height: 220px;
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Statistics step
   -------------------------------------------------------------------------- */
.dg-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.dg-stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: var(--dg-bg-raised);
    border: 1px solid var(--dg-border-panel);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
}

.dg-stat-block label,
.dg-stat-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--dg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dg-stat-block input[type="number"] {
    width: 3.5rem;
    text-align: center;
    font-size: 1.1rem;
    background: var(--dg-bg-input);
    border: 1px solid var(--dg-border-light);
    color: var(--dg-text);
    border-radius: 3px;
    padding: 0.1rem;
}

.dg-stat-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--dg-green);
}

.dg-x5 {
    font-size: 0.72rem;
    color: var(--dg-text-ghost);
}

.dg-descriptor {
    font-size: 0.7rem;
    color: var(--dg-text-disabled);
    font-style: italic;
    text-align: center;
}

.dg-points-bar {
    text-align: center;
    font-size: 0.9rem;
    color: var(--dg-text-muted);
    margin-bottom: 0.6rem;
}

.dg-points-remaining {
    font-weight: bold;
    font-size: 1.05rem;
    color: var(--dg-green);
}

.dg-points-remaining.depleted {
    color: var(--dg-text-disabled);
}

.dg-stat-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dg-adjust-btn {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1rem;
    line-height: 1;
    background: var(--dg-border);
    border: 1px solid var(--dg-border-light);
    color: var(--dg-green);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-adjust-btn:hover {
    background: var(--dg-border-input);
    border-color: var(--dg-green);
}

.dg-stat-input {
    width: 3rem;
    text-align: center;
    font-size: 1.1rem;
    background: var(--dg-bg-input);
    border: 1px solid var(--dg-border-light);
    color: var(--dg-text);
    border-radius: 3px;
    padding: 0.1rem;
}

.dg-derived-bar {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.6rem 1rem;
    margin: 0.75rem 0 0.25rem;
    background: var(--dg-bg-input);
    border: 1px solid var(--dg-border);
    border-radius: 4px;
}

.dg-derived-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.dg-derived-label {
    color: var(--dg-text-faint);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dg-derived-item strong {
    color: var(--dg-green);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.dg-stats-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.dg-stats-actions .dg-btn-secondary {
    flex: 1;
    min-width: 8rem;
}

/* --------------------------------------------------------------------------
   Profession step
   -------------------------------------------------------------------------- */
.dg-select-profession {
    width: 100%;
    font-size: 0.95rem;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-light);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.75rem;
}

.dg-profession-desc {
    background: var(--dg-bg-sunken);
    border: 1px solid var(--dg-border);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
}

.dg-desc-text {
    white-space: pre-wrap;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--dg-text-muted);
    margin: 0;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Skills step
   -------------------------------------------------------------------------- */
.dg-skills-table {
    width: 100%;
    font-size: 0.82rem;
    border-collapse: collapse;
}

.dg-skills-table thead th {
    background: var(--dg-bg-raised);
    color: var(--dg-text-faint);
    font-weight: bold;
    padding: 0.3rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--dg-border-input);
}

.dg-skills-table tbody tr {
    border-bottom: 1px solid var(--dg-bg-raised);
}

.dg-skills-table tbody tr:hover {
    background: var(--dg-bg-raised);
}

.dg-skills-table td {
    padding: 0.25rem 0.5rem;
}

.dg-skill-required td:first-child {
    color: var(--dg-green);
}

.dg-skill-optional td:first-child {
    color: var(--dg-text-muted);
}

.dg-num {
    text-align: right;
    width: 3rem;
}

.dg-center {
    text-align: center;
}

.dg-required-badge {
    color: var(--dg-green-border);
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Bonds step
   -------------------------------------------------------------------------- */
.dg-bond-block {
    margin-bottom: 0.6rem;
}

.dg-bond-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-bond-num {
    font-size: 0.93rem;
    color: var(--dg-text-disabled);
    min-width: 1.2rem;
}

.dg-bond-name {
    flex: 1;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.3rem 0.4rem;
    font-size: 0.88rem;
}

.dg-bond-score {
    width: 3.5rem;
    text-align: center;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.3rem;
    font-size: 0.88rem;
}

.dg-bond-details {
    margin: 0.2rem 0 0 1.6rem;
    padding: 0.25rem 0.5rem;
    border-left: 2px solid var(--dg-border-green);
    background: var(--dg-bg-sunken);
    border-radius: 0 3px 3px 0;
}

.dg-bond-relationship {
    font-size: 0.93rem;
    color: var(--dg-green-mid);
    font-weight: bold;
}

.dg-bond-description {
    font-size: 0.93rem;
    color: var(--dg-text-faint);
    margin: 0.15rem 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* Bond dataset picker row */
.dg-bond-dataset-row {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}

.dg-bond-dataset-row label {
    font-size: 0.82rem;
    color: var(--dg-text-dim);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-bond-dataset-select {
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Biography step
   -------------------------------------------------------------------------- */
.dg-bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.dg-bio-grid label {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
    color: var(--dg-text-dim);
    gap: 0.2rem;
}

.dg-bio-grid input {
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.3rem 0.4rem;
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Review step
   -------------------------------------------------------------------------- */
.dg-review-section {
    margin-bottom: 0.75rem;
}

.dg-stats-readonly .dg-stat-block {
    pointer-events: none;
}

.dg-review-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.dg-review-skill {
    background: var(--dg-bg-raised);
    border: 1px solid var(--dg-border-panel);
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    font-size: 0.78rem;
    color: var(--dg-text-muted);
}

.dg-review-bond {
    font-size: 0.85rem;
    color: var(--dg-text-soft);
    padding: 0.1rem 0;
}

.dg-review-bio-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    align-items: baseline;
}

.dg-review-bio-key {
    font-weight: bold;
    color: var(--dg-text-faint);
    font-size: 0.8rem;
    text-transform: capitalize;
    white-space: nowrap;
}

.dg-review-bio-val {
    font-size: 0.82rem;
    color: var(--dg-text-soft);
}

/* --------------------------------------------------------------------------
   Navigation bar
   -------------------------------------------------------------------------- */
.dg-wizard-nav {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dg-border);
    gap: 0.5rem;
}

.dg-nav-spacer {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.dg-btn-primary,
.dg-btn-secondary,
.dg-btn-small {
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid;
    transition: background 0.15s;
}

.dg-btn-primary {
    background: var(--dg-green-btn);
    color: var(--dg-text-white);
    border-color: var(--dg-green-border);
}

.dg-btn-primary:hover {
    background: var(--dg-green-btn-hover);
}

.dg-btn-secondary {
    background: var(--dg-bg-muted);
    color: var(--dg-text-soft);
    border-color: var(--dg-border-light);
}

.dg-btn-secondary:hover {
    background: var(--dg-border-panel);
}

.dg-btn-small {
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    background: var(--dg-bg-raised);
    color: var(--dg-text-soft);
    border-color: var(--dg-border-input);
}

.dg-btn-small:hover {
    background: var(--dg-border);
}

.dg-btn-danger {
    border-color: var(--dg-danger-border);
    color: var(--dg-danger-text);
}

.dg-btn-danger:hover {
    background: var(--dg-danger-bg);
}

.dg-btn-finish {
    font-size: 0.95rem;
    padding: 0.4rem 1.2rem;
    background: var(--dg-bg-blue);
    border-color: var(--dg-border-blue);
}

.dg-btn-finish:hover {
    background: var(--dg-bg-blue-hover);
}

.dg-btn-export-pdf {
    font-size: 0.95rem;
    padding: 0.4rem 1.2rem;
    background: var(--dg-bg-blue);
    border-color: var(--dg-border-blue);
    color: var(--dg-blue);
}

.dg-btn-export-pdf:hover {
    background: var(--dg-bg-blue-hover);
    color: var(--dg-blue-light);
}

/* --------------------------------------------------------------------------
   Tips collapsible panels
   -------------------------------------------------------------------------- */
.dg-tips {
    background: var(--dg-bg-green-subtle);
    border: 1px solid var(--dg-border-green);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
}

.dg-tips summary {
    cursor: pointer;
    color: var(--dg-green-mid);
    font-weight: bold;
    font-size: 0.82rem;
    list-style: none;
    user-select: none;
}

.dg-tips summary::before {
    content: '▶ ';
    font-size: 0.65rem;
}

.dg-tips[open] summary::before {
    content: '▼ ';
}

.dg-tips p {
    margin: 0.4rem 0 0;
    color: var(--dg-text-dim);
    line-height: 1.5;
}

.dg-tips-list {
    margin: 0.3rem 0 0 1rem;
    padding: 0;
    color: var(--dg-text-faint);
    line-height: 1.6;
}

/* Nested tips accordion inside .dg-tips */
.dg-tips-inner {
    margin-top: 0.5rem;
    border-top: 1px solid var(--dg-bg-muted);
    padding-top: 0.4rem;
}

.dg-tips-inner>summary {
    font-size: 0.8rem;
    color: var(--dg-text-dim);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dg-tips-inner>summary::before {
    content: '▶ ';
    font-size: 0.65rem;
}

.dg-tips-inner[open]>summary::before {
    content: '▼ ';
}

/* --------------------------------------------------------------------------
   Bonus skills step — 8 dropdown slots
   -------------------------------------------------------------------------- */
.dg-bonus-skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: var(--dg-bg-raised);
    border-radius: 4px;
    border: 1px solid var(--dg-border-panel);
}

.dg-picks-counter {
    font-size: 0.95rem;
    color: var(--dg-text-soft);
}

.dg-bonus-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
}

.dg-bonus-slot-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    background: var(--dg-bg-input);
    border: 1px solid var(--dg-bg-muted);
    border-radius: 3px;
}

.dg-bonus-slot-label {
    font-size: 0.9rem;
    color: var(--dg-text-disabled);
    min-width: 3.5rem;
    flex-shrink: 0;
}

.dg-bonus-slot-select {
    flex: 1;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-size: 0.93rem;
    font-family: inherit;
}

/* Custom specialty input — hidden by default, shown by JS when '_custom_*' selected */
.dg-bonus-custom-input {
    display: none;
    width: 150px;
    flex-shrink: 0;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-text-ghost);
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-size: 0.93rem;
    font-family: inherit;
}

/* Background package picker row */
.dg-bonus-pack-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0.25rem 0;
}

.dg-bonus-choice-note {
    font-size: 0.93rem;
    color: var(--dg-text-faint);
    margin: 0.4rem 0 0.6rem;
}

.dg-bonus-choice-note strong {
    color: var(--dg-green);
}

.dg-bonus-pack-row label {
    font-size: 0.93rem;
    color: var(--dg-text-dim);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-bonus-pack-row select {
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
}

.dg-bonus-pack-desc {
    width: 100%;
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--dg-text-faint);
    font-style: italic;
    line-height: 1.5;
}

/* ---- Skills reference (bonus_skills step) — 3 side-by-side tables ---- */
.dg-skills-ref-details {
    margin-top: 1rem;
}

.dg-skills-ref-details>summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--dg-text-soft);
    padding: 0.25rem 0.5rem;
    background: var(--dg-bg-raised);
    border: 1px solid var(--dg-border-panel);
    border-radius: 4px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-skills-ref-details>summary::before {
    content: '▶';
    font-size: 0.7rem;
    color: var(--dg-text-faint);
    transition: transform 0.15s;
}

.dg-skills-ref-details[open]>summary::before {
    transform: rotate(90deg);
}

.dg-skills-ref-cols {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    align-items: flex-start;
}

.dg-skills-ref-table {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    border-collapse: collapse;
    border: 1px solid var(--dg-border-panel);
    border-radius: 4px;
    overflow: hidden;
}

.dg-skills-ref-table thead th {
    background: var(--dg-bg-raised);
    color: var(--dg-text-faint);
    font-weight: bold;
    padding: 0.25rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--dg-border-input);
    white-space: nowrap;
}

.dg-skills-ref-table thead th.dg-num {
    text-align: right;
    width: 2.6rem;
}

.dg-skills-ref-table td.dg-num {
    width: 2.6rem;
}

.dg-skills-ref-row td {
    padding: 0.18rem 0.4rem;
}

.dg-skills-ref-row {
    border-bottom: 1px solid var(--dg-bg-raised);
}

.dg-skills-ref-row:hover td {
    background: var(--dg-bg-raised);
}

.dg-skill-boosted .dg-skill-ref-boost,
.dg-skill-boosted .dg-skill-ref-value {
    color: var(--dg-green);
    font-weight: bold;
}

.dg-skill-custom td:first-child {
    font-style: italic;
    color: var(--dg-text-muted);
}

/* --------------------------------------------------------------------------
   Skills step — optional pick chooser section
   -------------------------------------------------------------------------- */
.dg-optional-picks-section {
    background: var(--dg-bg-green-subtle);
    border: 1px solid var(--dg-border-green);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.dg-opt-section-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.dg-opt-heading {
    font-size: 0.95rem;
    color: var(--dg-green);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dg-opt-skill-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.3rem;
    border-radius: 3px;
    margin-bottom: 0.15rem;
}

.dg-opt-skill-row:hover {
    background: rgba(160, 210, 60, 0.06);
}

.dg-opt-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
    min-width: 200px;
}

.dg-opt-label input[type="checkbox"] {
    accent-color: var(--dg-green-mid);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.dg-opt-skill-name {
    font-size: 0.9rem;
    color: var(--dg-text);
}

.dg-opt-skill-value {
    font-size: 0.85rem;
    color: var(--dg-green-mid);
    font-weight: 600;
    min-width: 38px;
    text-align: right;
}

.dg-opt-spec-input {
    flex: 1;
    min-width: 160px;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
}

/* optional-picks counter in skills step */
.dg-opt-picks-counter {
    font-size: 0.82rem;
    color: var(--dg-green-mid);
    margin-bottom: 0;
}

.dg-opt-picks-counter.at-limit {
    color: var(--dg-warn);
}

/* --------------------------------------------------------------------------
   Biography step — additions
   -------------------------------------------------------------------------- */
.dg-bio-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dg-border-panel);
}

.dg-bio-actions .dg-btn-secondary {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: transparent;
    border-color: var(--dg-border-light);
    color: var(--dg-text-faint);
    letter-spacing: 0.04em;
}

.dg-bio-actions .dg-btn-secondary:hover {
    background: var(--dg-bg-raised);
    color: var(--dg-text-soft);
    border-color: var(--dg-green);
}

.dg-bio-full-row {
    grid-column: 1 / -1 !important;
}

.dg-bio-grid textarea {
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}

.dg-motivations-block {
    border: 1px solid var(--dg-border-panel);
    border-radius: 4px;
    padding: 0.5rem 0.75rem 0.75rem;
    margin-top: 0.25rem;
}

.dg-motivations-block legend {
    color: var(--dg-text-dim);
    font-size: 0.8rem;
    padding: 0 0.3rem;
}

.dg-motivations-block input {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}

.dg-review-motivations {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--dg-text-soft);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Specialty skills section (skills step)
   -------------------------------------------------------------------------- */
.dg-specialty-section {
    margin-top: 1.25rem;
    border-top: 1px solid var(--dg-border);
    padding-top: 0.75rem;
}

.dg-specialty-heading {
    color: var(--dg-text-dim);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.75rem 0 0.4rem;
}

.dg-specialty-heading:first-of-type {
    margin-top: 0;
}

.dg-specialty-row,
.dg-specialty-opt-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

.dg-specialty-row.dg-specialty-empty {
    background: rgba(254, 100, 11, 0.08);
}

.dg-specialty-group {
    flex: 0 0 130px;
    font-size: 0.85rem;
    color: var(--dg-text);
    font-weight: 600;
}

.dg-specialty-input {
    flex: 1;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.dg-specialty-empty .dg-specialty-input {
    border-color: var(--dg-warn-border);
}

.dg-specialty-input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dg-specialty-input.dg-specialty-dupe {
    border-color: var(--dg-danger);
    background: rgba(192, 57, 43, 0.15);
    outline: 1px solid var(--dg-danger);
}

.dg-specialty-value {
    flex: 0 0 38px;
    text-align: right;
    font-size: 0.85rem;
    color: var(--dg-text-dim);
}

.dg-specialty-opt-row .dg-opt-check {
    flex-shrink: 0;
}

.dg-review-skill-specialty {
    font-style: italic;
    opacity: 0.9;
}

.dg-review-bonus-divider {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dg-text-faint);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--dg-border);
}

.dg-review-jump-inline {
    font-size: 0.75rem;
    padding: 0;
    opacity: 0.7;
}

.dg-review-skill-bonus {
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Equipment step
   -------------------------------------------------------------------------- */
.dg-eq-layout {
    display: flex;
    gap: 0.75rem;
    height: 380px;
}

.dg-eq-left {
    flex: 1.4;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dg-eq-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dg-eq-search-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.dg-eq-search-input {
    flex: 1;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.dg-eq-count {
    font-size: 0.75rem;
    color: var(--dg-text-disabled);
    white-space: nowrap;
}

.dg-eq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
}

.dg-eq-cat-btn {
    background: var(--dg-bg-raised);
    border: 1px solid var(--dg-border-panel);
    color: var(--dg-text-disabled);
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.dg-eq-cat-btn:hover {
    background: var(--dg-border);
    color: var(--dg-text-soft);
}

.dg-eq-cat-btn.active {
    background: var(--dg-bg-green-dark);
    border-color: var(--dg-border-green-bright);
    color: var(--dg-green);
}

.dg-eq-catalog {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--dg-bg-muted);
    border-radius: 4px;
    padding: 0.2rem;
}

.dg-eq-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--dg-bg-raised);
    font-size: 0.78rem;
    gap: 0.3rem;
}

.dg-eq-item:hover {
    background: #1e2218;
}

.dg-eq-item.in-loadout {
    opacity: 0.5;
}

.dg-eq-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.dg-eq-item-name {
    color: var(--dg-text-soft);
    line-height: 1.3;
}

.dg-eq-add-btn {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.9rem;
    background: var(--dg-bg-green-dark);
    border: 1px solid var(--dg-border-green-bright);
    color: var(--dg-green-mid);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dg-eq-add-btn:hover:not(:disabled) {
    background: #3a5028;
}

.dg-eq-add-btn:disabled {
    opacity: 0.4;
    cursor: default;
    color: var(--dg-green-border);
}

.dg-eq-empty {
    color: var(--dg-text-ghost);
    font-size: 0.8rem;
    padding: 0.5rem;
    text-align: center;
}

.dg-eq-loadout-header {
    font-size: 0.88rem;
    font-weight: bold;
    color: var(--dg-text-dim);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-eq-loadout-badge {
    background: var(--dg-green-btn);
    color: var(--dg-text-white);
    border-radius: 10px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
}

.dg-eq-loadout {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--dg-bg-muted);
    border-radius: 4px;
    padding: 0.2rem;
    margin-bottom: 0.4rem;
}

.dg-eq-loadout-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--dg-bg-raised);
    font-size: 0.78rem;
}

.dg-eq-loadout-name {
    flex: 1;
    color: var(--dg-text-soft);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-eq-remove-btn {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.75rem;
    background: var(--dg-danger-bg);
    border: 1px solid var(--dg-danger-border);
    color: var(--dg-danger-text);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dg-eq-remove-btn:hover {
    background: var(--dg-danger-bg);
}

.dg-eq-clear-btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    margin-top: 0.2rem;
}

/* Quick loadout buttons row */
.dg-eq-loadout-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--dg-bg-muted);
}

.dg-eq-loadout-btns-label {
    font-size: 0.78rem;
    color: var(--dg-text-disabled);
    flex-shrink: 0;
}

/* Custom item add row */
.dg-eq-custom-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.3rem 0;
}

.dg-eq-custom-input {
    flex: 1;
    background: var(--dg-bg-input);
    color: var(--dg-text);
    border: 1px solid var(--dg-border-input);
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Expense level badges
   -------------------------------------------------------------------------- */
.dg-eq-expense,
.dg-exp-badge {
    font-size: 0.65rem;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.dg-exp-incidental {
    background: var(--dg-bg-muted);
    color: var(--dg-text-disabled);
    border: 1px solid var(--dg-border-input);
}

.dg-exp-standard {
    background: var(--dg-bg-blue);
    color: var(--dg-blue);
    border: 1px solid var(--dg-border-blue);
}

.dg-exp-unusual {
    background: #2a2a10;
    color: #b0a040;
    border: 1px solid #5a5020;
}

.dg-exp-major {
    background: #2a1a10;
    color: #c07040;
    border: 1px solid #6a3820;
}

.dg-exp-extreme {
    background: #2a1010;
    color: #c04040;
    border: 1px solid #6a2020;
}

/* --------------------------------------------------------------------------
   Review step — equipment
   -------------------------------------------------------------------------- */
.dg-review-equipment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.dg-review-eq-item {
    background: var(--dg-bg-raised);
    border: 1px solid var(--dg-border-panel);
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    font-size: 0.78rem;
    color: var(--dg-text-muted);
}

/* --------------------------------------------------------------------------
   Bond relationship input
   -------------------------------------------------------------------------- */
.dg-bond-relationship-row {
    padding: 0.15rem 0.3rem 0.3rem 1.8rem;
}

.dg-bond-relationship-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--dg-bg-input);
    color: var(--dg-text-soft);
    border: 1px solid var(--dg-border-panel);
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
    font-style: italic;
}

.dg-bond-relationship-input::placeholder {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Review — derived attributes grid
   -------------------------------------------------------------------------- */
.dg-review-derived-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    column-gap: 0.25rem;
    align-items: baseline;
    font-size: 0.9rem;
    width: fit-content;
}

.dg-review-derived-grid span {
    color: var(--dg-text-faint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dg-review-derived-grid span:not(:first-child) {
    padding-left: 1.25rem;
}

.dg-review-derived-grid strong {
    color: var(--dg-green);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Review — jump-to section heading buttons
   -------------------------------------------------------------------------- */
.dg-review-jump-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--dg-text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.85;
    transition: color 0.15s, opacity 0.15s;
}

.dg-review-jump-btn:hover {
    color: var(--dg-green);
    opacity: 1;
    background: none;
    border: none;
}
/* --------------------------------------------------------------------------
   Building a New Profession (Zack's fork)
   -------------------------------------------------------------------------- */
.dg-custom-prof .dg-cp-head { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.dg-custom-prof .dg-cp-name { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.dg-custom-prof .dg-cp-bonds { display: flex; flex-direction: column; gap: 4px; }
.dg-custom-prof .dg-cp-budget { margin-left: auto; }
.dg-custom-prof .dg-cp-table select, .dg-custom-prof .dg-cp-table input { width: 100%; }
.dg-custom-prof .dg-cp-table .dg-cp-points { width: 70px; }
.dg-custom-prof .dg-cp-table td:first-child { width: 28px; }
.dg-custom-prof .dg-cp-over { color: #e0564b !important; font-weight: 700; }

/* Bonus picks past 80% (Zack's fork) and the background name */
.dg-bonus-slot-row.dg-bonus-over { outline: 1px solid #e0564b; background: rgba(224, 86, 75, .12); }
.dg-bonus-slot-row.dg-bonus-over select { color: #ff8a80; }
.dg-bonus-bg-name { margin: 8px 0 12px; }
.dg-bonus-bg-name label { display: flex; align-items: center; gap: 10px; }
.dg-bonus-bg-name input { flex: 1; }
.dg-review-bg { opacity: .85; font-style: italic; }

/* Zack's fork: pregens, stat sets, Damaged Veteran */
.dg-pregen-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--dg-border, #3a4a2a); border-radius: 4px; }
.dg-pregen-box h3 { margin: 0 0 4px; }
.dg-pregen-row { display: flex; gap: 8px; align-items: center; }
.dg-pregen-row select { flex: 1; }
.dg-stat-sets { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.dg-stat-sets .dg-set-values { opacity: .65; font-size: .85em; margin-left: 4px; }
.dg-stat-block[data-stat] { cursor: grab; }
.dg-stat-block.dg-dragging { opacity: .45; }
.dg-stat-block.dg-drop { outline: 2px dashed #7fbf4a; }
.dg-vet-entry { border: 1px solid var(--dg-border, #3a4a2a); border-radius: 4px; padding: 10px 12px; margin: 8px 0; }
.dg-vet-head { display: flex; gap: 8px; align-items: center; }
.dg-vet-head select { flex: 1; }
.dg-vet-body { opacity: .85; margin: 6px 0; }
.dg-vet-picks { display: grid; gap: 6px; margin: 6px 0; }
.dg-vet-pick { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 8px; align-items: center; }
.dg-vet-bond, .dg-vet-disorder { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.dg-vet-h3 { margin-top: 18px; }
.dg-vet-dis-row { display: flex; gap: 8px; margin: 4px 0; }
.dg-vet-dis-row input { flex: 1; }
.dg-vet-result { margin-top: 14px; }

/* Zack's fork: personal details, disorder picker */
.dg-personal-block textarea, .dg-personal-details textarea { width: 100%; resize: vertical; }
.dg-personal-row { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.dg-personal-details { margin-top: 14px; }
.dg-personal-details .dg-pd-row { display: grid; grid-template-columns: 200px 1fr; gap: 8px; align-items: start; margin: 6px 0; }
.dg-gain-disorder-btn { margin: 6px 0 8px; width: auto; }
.dg-disorder-picker .dg-dis-groups { max-height: 470px; overflow-y: auto; padding-right: 6px; }
.dg-disorder-picker fieldset { margin: 6px 0; }
.dg-disorder-picker .dg-dis-opt { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; border-bottom: 1px solid rgba(127,127,127,.2); }
.dg-disorder-picker .dg-dis-opt input[type=radio] { margin-top: 3px; flex: none; }
.dg-disorder-picker .dg-dis-opt small { opacity: .85; }
.dg-disorder-picker .dg-dis-opt input[type=text] { width: 100%; }
.dg-disorder-picker .dg-dis-line { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

.dg-pregen-loaded { color: #8fd16a; margin-top: 6px; }

/* Zack's fork: checklist, features, start over, Breaking Point */
.dg-checklist { border-color: #b8860b !important; }
.dg-check-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; }
.dg-check-ok { color: #8fd16a; }
.dg-feature-input { width: 100%; margin-top: 4px; text-align: center; font-style: italic; font-size: .9em; }
.dg-start-over { margin-left: 8px; opacity: .8; }
.dg-bp-alert { background: rgba(200, 40, 40, .18); border-left: 3px solid #c83030; padding: 6px 10px; }

/* Zack's fork: profession search */
.dg-profession-picker { display: flex; flex-direction: column; gap: 6px; }
.dg-prof-search { width: 100%; }
.dg-prof-count { font-size: .85em; opacity: .75; min-height: 1em; }

/* Zack's fork: kits, SAN tools, toolkit row */
.dg-kit-group { display: block; width: 100%; font-size: .85em; opacity: .75; margin: 6px 0 2px; }
.dg-kit-ours { border-style: dashed !important; }
.dg-san-tool label { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.dg-san-tool .dg-san-row { display: flex; gap: 10px; }
.dg-san-tool .dg-san-row label { flex: 1; }
.dg-toolkit-row { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.dg-toolkit-row button { flex: 1; min-width: 110px; }

/* Zack's fork: armory */
.dg-armory .dg-arm-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dg-armory .dg-arm-search { flex: 1; min-width: 200px; }
.dg-armory .dg-arm-exp { display: flex; gap: 8px; flex-wrap: wrap; font-size: .9em; }
.dg-armory .dg-arm-list { max-height: 560px; overflow-y: auto; margin-top: 6px; }
.dg-armory .dg-arm-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid rgba(127,127,127,.2); }
.dg-armory .dg-arm-row small { opacity: .75; }
.dg-armory .dg-arm-r { color: #e0564b; font-style: normal; font-size: .8em; }
.dg-armory .dg-arm-x { text-align: center; font-weight: 700; border-radius: 3px; padding: 2px 4px; font-size: .85em; }
.dg-armory .dg-exp-incidental { background: rgba(80,160,80,.25); }
.dg-armory .dg-exp-standard { background: rgba(70,130,200,.25); }
.dg-armory .dg-exp-unusual { background: rgba(200,170,60,.28); }
.dg-armory .dg-exp-major { background: rgba(220,120,40,.3); }
.dg-armory .dg-exp-extreme { background: rgba(200,50,50,.35); }
.dg-armory .dg-arm-btns { display: flex; gap: 4px; }
.dg-armory .dg-arm-btns button { width: auto; padding: 2px 8px; }

/* Zack's fork: chat cards, "status strip" (sample C, picked 2026-10-13). Built by scripts/chat-card.js */
.dgc { background: #151719; color: #ddd; border-radius: 6px; border-left: 5px solid #666; overflow: hidden; font: 12.5px/1.45 system-ui, sans-serif; }
.dgc-h { display: flex; align-items: center; gap: 8px; background: #23262a; padding: 6px 10px; }
.dgc-face { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; object-position: top; border: 0; flex: none; }
.dgc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dgc-who b { font-size: 14px; color: #f0f0f0; }
.dgc-who small { font-size: 11.5px; color: #9aa0a6; }
.dgc-body { padding: 6px 10px 8px; }
.dgc-out { font-weight: 800; letter-spacing: .05em; white-space: nowrap; color: #aaa; }
.dgc-sub { color: #8b9097; font-size: 11.5px; margin: 1px 0 4px; }
.dgc-sub b, .dgc-row b { color: #ddd; }
.dgc-row { font-size: 12px; color: #c4c8cd; margin: 3px 0; }
.dgc-row a { color: #9cc0ff; }
.dgc-bar { position: relative; height: 12px; background: #2a2d31; border-radius: 6px; margin: 6px 0 2px; overflow: hidden; }
.dgc-keep { position: absolute; top: 0; bottom: 0; left: 0; background: #3c8d5a; }
.dgc-lost { position: absolute; top: 0; bottom: 0; background: #d23b3b; }
.dgc-gain { position: absolute; top: 0; bottom: 0; background: #6fdc95; }
.dgc-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #f0b429; }
.dgc-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: #8b9097; }
.dgc-down { color: #ff9a9a; } .dgc-up { color: #8fe3aa; }
.dgc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dgc-chips span { border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; background: #2a2d31; color: #b8bcc2; }
.dgc-chips .dgc-red { background: #4a1518; color: #ff9a9a; }
.dgc-chips .dgc-green { background: #173a24; color: #8fe3aa; }
.dgc-chips .dgc-amber { background: #45330f; color: #ffd27a; }
.dgc-chips .dgc-blue { background: #16284a; color: #9cc0ff; }
.dgc-edge-red { border-left-color: #d23b3b; } .dgc-edge-red .dgc-out { color: #ff6b6b; }
.dgc-edge-green { border-left-color: #3c8d5a; } .dgc-edge-green .dgc-out { color: #6fdc95; }
.dgc-edge-amber { border-left-color: #f0b429; } .dgc-edge-amber .dgc-out { color: #ffd27a; }
.dgc-edge-blue { border-left-color: #4a7fd8; } .dgc-edge-blue .dgc-out { color: #9cc0ff; }
.dgc .dgc-agent { margin-top: 5px; }
.dgc .dgc-agent .dgc-chips { margin-top: 2px; }

/* Zack's fork: Medical panel (sample B's look, A's descriptions, C's team list; picked 2026-10-13) */
.dg-medical .window-content { padding: 0; background: #151719; }
.dg-med { color: #ddd; font: 12.5px/1.45 system-ui, sans-serif; display: flex; flex-direction: column; height: 100%; }
.dg-med button { background: #2a2d31; color: #eee; border: 1px solid #3a3d42; border-radius: 4px; padding: 2px 10px; font-size: 11.5px; width: auto; line-height: 1.5; flex: none; }
.dg-med .dayrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #0d0f10; border-bottom: 1px solid #2a2d31; flex-wrap: wrap; }
.dg-med .dayrow b { font-size: 13px; color: #fff; }
.dg-med .dayrow .home { color: #8b9097; font-size: 11.5px; margin-left: 10px; }
.dg-med .dayrow .home.open { color: #8fe3aa; font-weight: 700; }
.dg-med .dayrow .ovr { margin-left: auto; color: #8b9097; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.dg-med .cols { display: flex; flex: 1; min-height: 0; }
.dg-med .plist { width: 190px; flex: none; border-right: 1px solid #2a2d31; overflow-y: auto; }
.dg-med .pp { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #202326; cursor: pointer; align-items: flex-start; }
.dg-med .pp.on { background: #23262a; box-shadow: inset 3px 0 0 #4a7fd8; }
.dg-med .pp input { margin: 2px 0 0; flex: none; }
.dg-med .pp .nm { flex: 1; min-width: 0; }
.dg-med .pp b { font-size: 12px; color: #eee; }
.dg-med .mini { height: 4px; background: #2a2d31; border-radius: 2px; margin-top: 3px; overflow: hidden; }
.dg-med .mini i { display: block; height: 100%; }
.dg-med .plist .hint { color: #6b7076; font-size: 10.5px; padding: 6px 8px; }
.dg-med .chart { flex: 1; overflow-y: auto; }
.dg-med .hd { display: flex; gap: 8px; align-items: center; background: #23262a; padding: 7px 10px; }
.dg-med .hd img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; object-position: top; border: 0; flex: none; }
.dg-med .hd > div { flex: 1; min-width: 0; }
.dg-med .hd b { font-size: 15px; color: #f0f0f0; display: block; }
.dg-med .hd small { color: #9aa0a6; }
.dg-med .pz { display: inline-block; background: #0f2f2d; color: #8ee8de; border-radius: 10px; padding: 0 7px; font-size: 10.5px; font-weight: 600; margin: 2px 4px 0 0; }
.dg-med .meter { padding: 6px 10px 2px; }
.dg-med .ml { display: flex; justify-content: space-between; font-size: 11px; color: #8b9097; }
.dg-med .bar { height: 9px; background: #2a2d31; border-radius: 5px; margin: 2px 0 6px; overflow: hidden; }
.dg-med .bar i { display: block; height: 100%; border-radius: 5px; }
.dg-med .sec { padding: 8px 10px 2px; color: #8b9097; font: 700 10px/1 system-ui; letter-spacing: .08em; }
.dg-med .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 10px 6px; }
.dg-med .tile { border-radius: 6px; padding: 7px 8px; border-left: 4px solid; cursor: pointer; position: relative; }
.dg-med .tile:hover { filter: brightness(1.25); }
.dg-med .tile b { display: block; color: #eee; font-size: 13px; }
.dg-med .tile small { display: block; color: #a4aab0; font-size: 11px; line-height: 1.35; margin-top: 2px; }
.dg-med .tile small i { color: #7d838a; font-style: normal; }
.dg-med .tile .multi { float: right; font-style: normal; font-size: 11px; color: #9cc0ff; }
.dg-med .tile .why { display: block; margin-top: 4px; font-size: 10.5px; color: #ffd27a; }
.dg-med .tile.off { opacity: .55; cursor: not-allowed; }
.dg-med .tile.r { background: #2a1416; border-color: #d23b3b; }
.dg-med .tile.b { background: #141f33; border-color: #4a7fd8; }
.dg-med .tile.g { background: #14261b; border-color: #3c8d5a; }
.dg-med .tile.a { background: #2b2210; border-color: #f0b429; }
.dg-med .tile.p { background: #0f2625; border-color: #2bb5a8; }
.dg-med-form label { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.dg-med-form label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 6px; }
.dg-dmg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid rgba(127,127,127,.25); }
.dg-dmg-row label { flex-direction: row !important; align-items: center; gap: 4px; margin: 0 !important; }
.dg-apply-hit { margin-top: 6px; width: 100%; background: #3a1418; color: #ffb3b3; border: 1px solid #6b2226; border-radius: 4px; font-size: 12px; }

.dg-med .pp .who { display: block; color: #7d838a; font-size: 10.5px; line-height: 1.2; }
.dg-med .teamedit { margin: 6px 8px 0; }
.dg-team-pick fieldset { margin: 4px 0; border: 1px solid rgba(127,127,127,.35); border-radius: 4px; }
.dg-team-pick label { display: flex; align-items: center; gap: 6px; }
/* chat-card meters: each kind its own colour (SAN purple) */
.dgc-keep.k-san { background: #9b6ad8; } .dgc-keep.k-hp { background: #d23b3b; } .dgc-keep.k-wp { background: #4a7fd8; }
.dgc-keep.k-hp ~ .dgc-lost { background: #f0b429; }
.dg-team-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(127,127,127,.2); }
.dg-team-row label { flex: 1; display: flex; align-items: center; gap: 6px; }
.dg-team-row select { width: 150px; flex: none; }

/* Zack's fork: the sheet bar's SAN and File flyouts */
.dg-bar-menu { position: relative; display: inline-flex; }
.dg-bar-flyout { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 170px; flex-direction: column; gap: 2px; padding: 4px; background: #1c1f22; border: 1px solid #3a3d42; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.dg-bar-menu.open .dg-bar-flyout { display: flex; }
.dg-bar-flyout button { width: 100%; justify-content: flex-start; text-align: left; white-space: nowrap; }

/* Zack's fork: Threats tray (Handler) */
#dg-threat-tray { position: fixed; z-index: 70; background: rgba(13,15,16,.93); border: 1px solid #2a2d31; border-top: 3px solid #d23b3b; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.6); color: #ddd; font: 12px/1.35 system-ui, sans-serif; max-width: 80vw; }
#dg-threat-tray .dgt-head { display: flex; gap: 8px; align-items: center; padding: 3px 10px; font: 700 9.5px/1.4 system-ui; letter-spacing: .1em; color: #9aa0a6; cursor: move; }
#dg-threat-tray .dgt-head span { flex: 1; font-weight: 400; letter-spacing: 0; color: #6b7076; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dg-threat-tray .dgt-x, .dgt-fly .dgt-x { cursor: pointer; font-size: 15px; color: #9aa0a6; }
#dg-threat-tray .dgt-row { display: flex; gap: 8px; padding: 2px 10px 6px; overflow-x: auto; }
#dg-threat-tray .dgt-tk { position: relative; width: 58px; flex: none; text-align: center; cursor: pointer; }
#dg-threat-tray .dgt-tk small { display: block; font-size: 10px; color: #cfd3d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dg-threat-tray .ring { width: 50px; height: 50px; border-radius: 50%; padding: 3px; margin: auto; background: conic-gradient(#d23b3b calc(var(--p) * 1%), #2a2d31 0); }
#dg-threat-tray .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #0d0f10; background: #222; }
#dg-threat-tray .dgt-tk.hid img { opacity: .6; }
#dg-threat-tray .st { position: absolute; left: 0; top: 0; font-size: 12px; }
#dg-threat-tray .hid-i { position: absolute; right: 2px; top: 0; font-size: 12px; color: #9aa0a6; }
#dg-threat-tray .plus { width: 50px; height: 50px; border-radius: 50%; border: 2px dashed #555; display: grid; place-items: center; font-size: 22px; color: #9aa0a6; margin: auto; }
.dgt-fly { position: fixed; z-index: 80; width: 290px; background: #151719; color: #ddd; border: 1px solid #2a2d31; border-left: 4px solid #d23b3b; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.7); padding: 7px; font: 12px/1.35 system-ui, sans-serif; }
.dgt-fly .hd b { color: #fff; font-size: 13px; display: block; }
.dgt-fly .hd small, .dgt-fly small { color: #8b9097; }
.dgt-fly button { background: #2a2d31; color: #eee; border: 1px solid #3a3d42; border-radius: 4px; padding: 1px 7px; font-size: 11px; width: auto; line-height: 1.6; margin: 2px 2px 0 0; }
.dgt-fly button.r { background: #2a1416; border-color: #6b2226; color: #ffb3b3; }
.dgt-fly button.v { background: #2a1a3d; border-color: #4a2a63; color: #d9b8ff; }
.dgt-fly button.on { background: #45330f; border-color: #6b5a22; color: #ffd27a; }
.dgt-fly .atk, .dgt-fly .hpq, .dgt-fly .sts { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; }
.dgt-fly .hpq input { width: 46px; height: 22px; margin: 2px 2px 0 0; background: #101214; color: #fff; border: 1px solid #3a3d42; }
.dgt-cat { width: 380px; border-left-color: #9aa0a6; }
.dgt-cat .dgt-x { position: absolute; right: 8px; top: 4px; }
.dgt-cat .q { width: 100%; margin-top: 5px; height: 24px; background: #101214; color: #ddd; border: 1px solid #3a3d42; border-radius: 4px; }
.dgt-cat .tabs { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.dgt-cat .tabs span { padding: 1px 8px; border-radius: 4px; background: #1c1f22; color: #9aa0a6; cursor: pointer; font-size: 11px; }
.dgt-cat .tabs span.on { background: #2a2d31; color: #fff; }
.dgt-cat .lvl { display: block; margin-top: 5px; color: #9aa0a6; font-size: 11px; }
.dgt-cat .lvl select { width: auto; height: 22px; background: #101214; color: #ddd; border: 1px solid #3a3d42; }
.dgt-cat .list { max-height: 330px; overflow-y: auto; margin-top: 5px; }
.dgt-cat .it { display: flex; gap: 7px; align-items: center; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.dgt-cat .it:hover { background: #23262a; }
.dgt-cat .it.busy { opacity: .4; }
.dgt-cat .it img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #333; background: #222; flex: none; }
.dgt-cat .it b { display: block; color: #eee; font-size: 12px; }
.dg-land { display: flex; gap: 4px; margin-top: 4px; }
.dg-land .dg-dodged { background: #1c2a1f; color: #a8ecbf; border-color: #24593a; }
.dg-session-pick label { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; }
.dg-session-pick input { flex: none; margin-top: 3px; }
.dg-see-row { display: flex; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(127,127,127,.2); }
.dg-see-row label { flex: 1; display: flex; gap: 6px; align-items: center; margin: 0 !important; }
.dg-see-row select { width: 120px; flex: none; }
.dg-see-row input[type="number"] { width: 60px; flex: none; }

/* SAN loss: Agents as chips, one set of coloured result buttons (Zack 2026-10-15) */
.dg-san-agents { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; align-items: stretch; }
.dg-san-agents .dg-san-agent { height: auto !important; min-height: 38px; max-height: none !important; }
.dg-san-agent { width: auto !important; flex: none; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 3px 8px !important; border-radius: 6px; border: 1px solid rgba(127,127,127,.5); background: rgba(127,127,127,.12); opacity: .6; }
.dg-san-agent small { font-size: 10.5px; opacity: .75; }
.dg-san-agent em { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 0 4px; }
.dg-san-agent em:empty { display: none; }
.dg-san-res { display: flex; gap: 4px; margin: 4px 0; }
.dg-res { flex: 1; padding: 4px 0 !important; font-size: 13px; font-weight: 700; border-radius: 5px; border: 1px solid; }
.dg-res:hover { filter: brightness(1.25); }
.dg-res-g { background: #173a24; color: #8fe3aa; border-color: #2f7d48; }
.dg-res-y { background: #45330f; color: #ffd27a; border-color: #8a6a1f; }
.dg-res-r { background: #4a1518; color: #ff9a9a; border-color: #8a2a2f; }
.dg-res-x { background: #2a0a0c; color: #ff6b6b; border-color: #6b1a1d; }
.dg-res-n { background: #2a2d31; color: #ddd; border-color: #4a4d52; }
/* SAN loss paint (Zack 2026-10-15): chips take the colour of their result */
.dg-san-agents .dg-san-agent[data-res=""] { opacity: .5 !important; background: transparent !important; border: 1px dashed rgba(160,160,160,.6) !important; }
.dg-san-agents .dg-san-agent[data-res="roll"] { opacity: 1 !important; background: #24477f !important; border: 1px solid #6d9cf0 !important; color: #fff !important; }
.dg-san-agents .dg-san-agent[data-res="success"] { opacity: 1 !important; background: #173a24 !important; border: 1px solid #2f7d48 !important; color: #8fe3aa !important; }
.dg-san-agents .dg-san-agent[data-res="crit"] { opacity: 1 !important; background: #45330f !important; border: 1px solid #8a6a1f !important; color: #ffd27a !important; }
.dg-san-agents .dg-san-agent[data-res="failure"] { opacity: 1 !important; background: #4a1518 !important; border: 1px solid #8a2a2f !important; color: #ff9a9a !important; }
.dg-san-agents .dg-san-agent[data-res="fumble"] { opacity: 1 !important; background: #2a0a0c !important; border: 1px solid #b02a30 !important; color: #ff6b6b !important; }
.dg-san-agents .dg-san-agent b, .dg-san-agents .dg-san-agent small { color: inherit !important; }
.dg-san-agents .dg-san-agent em { font-style: normal; font-weight: 700; font-size: 10.5px; color: inherit; }
.dg-res.brush { box-shadow: 0 0 0 2px #fff inset, 0 0 8px rgba(255,255,255,.4); filter: brightness(1.3); }
.dg-san-agents .dg-san-agent, .dg-res { transition: none !important; }
.dg-drawing-text { width: 100%; min-height: 110px; resize: vertical; font-family: inherit; }

/* Sheet bar, one quiet row (Zack 2026-10-16): the Wizard is a small button like the rest, the SAN tools sit in the bar */
.dg-agent-wizard-bar { padding: 4px 8px; }
.dg-wizard-bar-buttons { gap: 4px; flex-wrap: wrap; }
.dg-wizard-bar-buttons > button, .dg-wizard-bar-buttons .dg-bar-menu-btn {
    padding: 3px 9px !important; font-size: .82rem !important; font-weight: 600; line-height: 1.5; height: auto; min-height: 0;
    border-radius: 4px; gap: 5px; display: inline-flex; align-items: center; white-space: nowrap; width: auto; flex: none;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); color: #d6d9dc;
}
.dg-wizard-bar-buttons > button i, .dg-wizard-bar-buttons .dg-bar-menu-btn i { font-size: .85rem !important; }
.dg-wizard-bar-buttons > button:hover, .dg-wizard-bar-buttons .dg-bar-menu-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.dg-wizard-bar-buttons > .dg-agent-wizard-launch { color: #9fd38a; border-color: rgba(120,190,100,.4); background: rgba(80,140,60,.12); }

/* temporary insanity stance buttons on the SAN card (Handler only) */
.dg-stance { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.dg-stance button { width: auto; flex: 1; padding: 2px 6px; font-size: 12px; font-weight: 700; border-radius: 4px; border: 1px solid; }
.dg-stance .dg-st-flee { background: #45330f; color: #ffd27a; border-color: #8a6a1f; }
.dg-stance .dg-st-struggle { background: #4a1518; color: #ff9a9a; border-color: #8a2a2f; }
.dg-stance .dg-st-submit { background: #16284a; color: #9cc0ff; border-color: #24406f; }
.dg-stance .dg-st-ins { background: #2a1a3d; color: #d9b8ff; border-color: #4a2a63; }
.dg-rest-who { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.dg-rest-who label { flex-direction: row !important; align-items: center; gap: 5px; margin: 0 !important; }

/* the op clock flyout (Handler) */
.dg-clock-fly { position: fixed; z-index: 90; width: 310px; background: #151719; color: #ddd; border: 1px solid #2a2d31; border-left: 4px solid #63d454; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.7); padding: 8px; font: 12px/1.35 system-ui, sans-serif; }
.dg-clock-fly .hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dg-clock-fly .hd b { font: 700 24px "Roboto Mono", Consolas, monospace; color: #63d454; }
.dg-clock-fly .hd span { flex: 1; color: #9aa0a6; font-size: 11px; }
.dg-clock-fly .hd .x { font-size: 16px; color: #9aa0a6; cursor: pointer; }
.dg-clock-fly .row { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.dg-clock-fly .row button { flex: 1; width: auto; padding: 2px 4px; font-size: 11.5px; background: #2a2d31; color: #eee; border: 1px solid #3a3d42; border-radius: 4px; line-height: 1.6; }
.dg-clock-fly .row button.on { background: #173a24; border-color: #2f7d48; color: #8fe3aa; }
.dg-clock-fly .row.set label { display: flex; align-items: center; gap: 4px; color: #9aa0a6; }
.dg-clock-fly .row.set input { height: 24px; background: #101214; color: #ddd; border: 1px solid #3a3d42; }
.dg-clock-fly .row.set input[type="number"] { width: 52px; }
.dg-med .dayrow .clk { font: 600 12px "Roboto Mono", Consolas, monospace; color: #63d454; }

/* Armory: players' requests waiting for the Handler, and the count on the toolbar button */
.dg-armory .dg-arm-reqs:not(:empty) { border: 1px solid #c0392b; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; background: rgba(192,57,43,.08); }
.dg-armory .dg-arm-reqs-h { font-weight: 700; color: #e06b5d; margin-bottom: 4px; letter-spacing: .04em; }
.dg-armory .dg-arm-req { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.08); }
.dg-armory .dg-arm-req:first-of-type { border-top: 0; }
#scene-controls button[data-tool="dgArmory"] { position: relative; }
#scene-controls button[data-tool="dgArmory"][data-count]::after { content: attr(data-count); position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #c0392b; color: #fff; font: 700 10px/16px sans-serif; text-align: center; box-sizing: border-box; }

/* Review: a stat or Bond score Damaged Veterans lowered (old value struck through) */
.dg-was { opacity: .55; font-weight: normal; }