/* Settings (tabs, rows, rebinding capture), credits, controls card and dialogs. */

/* ------------------------------------------------------------------ settings */

.ds-tabs {
    display: flex;
    gap: calc(4 * var(--u));
    border-bottom: 1px solid var(--line);
    margin-bottom: calc(14 * var(--u));
}

.ds-tab {
    position: relative;
    padding: calc(10 * var(--u)) calc(18 * var(--u));
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: calc(17 * var(--t));
    font-weight: 700;
    letter-spacing: 0.16em;
    min-height: var(--tap);
}

.ds-tab:hover { color: var(--ink); }
.ds-tab.is-active { color: var(--ink); }

.ds-tab.is-active::after {
    content: '';
    position: absolute;
    left: calc(10 * var(--u));
    right: calc(10 * var(--u));
    bottom: -1px;
    height: calc(3 * var(--u));
    background: var(--tan-2);
}

.ds-settings-body,
.ds-credits-body,
.ds-controls-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: calc(10 * var(--u));
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 204, 147, 0.4) transparent;
}

.ds-settings-layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, calc(1120 * var(--u))) minmax(calc(300 * var(--u)), 1fr);
    gap: calc(36 * var(--u));
    min-height: 0;
}

.ds-set-info {
    align-self: start;
    padding: calc(18 * var(--u)) calc(22 * var(--u));
    background: rgba(10, 13, 11, 0.78);
    border-top: calc(2 * var(--u)) solid var(--tan-2);
}

.ds-set-info-title { font-size: calc(26 * var(--t)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ds-set-info-text { margin-top: calc(8 * var(--u)); font-size: calc(17 * var(--t)); font-weight: 500; color: var(--ink-2); line-height: 1.4; }
.ds-set-info-meta { margin-top: calc(14 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--line); font-size: calc(14 * var(--t)); color: var(--tan-2); letter-spacing: 0.1em; }
.ds-set-info-meta:empty { display: none; }

.ds-set-list { display: flex; flex-direction: column; }

.ds-set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(430 * var(--u));
    align-items: center;
    gap: calc(24 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-bottom: 1px solid rgba(236, 232, 220, 0.07);
}

.ds-set-row:hover { background: rgba(236, 232, 220, 0.035); }
.ds-set-label { font-size: calc(19 * var(--t)); font-weight: 600; letter-spacing: 0.04em; }
.ds-set-help { font-size: calc(14 * var(--t)); font-weight: 500; color: var(--muted); margin-top: calc(2 * var(--u)); }
.ds-set-section { margin: calc(22 * var(--u)) 0 calc(4 * var(--u)); font-size: calc(15 * var(--t)); letter-spacing: 0.3em; color: var(--tan-2); }
.ds-set-note { font-size: calc(15 * var(--t)); color: var(--muted); margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); font-weight: 500; }

.ds-seg { display: flex; justify-self: end; }

.ds-seg-btn {
    min-width: max(var(--tap), calc(76 * var(--u)));
    height: max(var(--tap), calc(36 * var(--u)));
    padding: 0 calc(12 * var(--u));
    /* One line per option ("AUTO SPRINT"): a wrapped label spills into the next row. */
    white-space: nowrap;
    border: 1px solid var(--line-2);
    background: rgba(14, 18, 15, 0.8);
    color: var(--muted);
    font-size: calc(14 * var(--t));
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ds-seg-btn + .ds-seg-btn { border-left: 0; }
.ds-seg-btn:hover { color: var(--ink); }
.ds-seg-btn.is-active { background: var(--tan); color: #15180f; border-color: var(--tan); text-shadow: none; }

.ds-stepper { display: flex; align-items: center; justify-self: end; }

.ds-stepper-btn {
    width: max(var(--tap), calc(36 * var(--u)));
    height: max(var(--tap), calc(36 * var(--u)));
    border: 1px solid var(--line-2);
    background: rgba(14, 18, 15, 0.8);
    font-size: calc(18 * var(--t));
    font-weight: 700;
}

.ds-stepper-value {
    min-width: calc(140 * var(--u));
    text-align: center;
    font-size: calc(17 * var(--t));
    letter-spacing: 0.1em;
}

.ds-range { --fill: 50%; display: flex; align-items: center; gap: calc(14 * var(--u)); }

.ds-range-input {
    flex: 1;
    height: calc(24 * var(--u));
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.ds-range-input::-webkit-slider-runnable-track {
    height: calc(4 * var(--u));
    background: linear-gradient(90deg, var(--tan-2) var(--fill), rgba(236, 232, 220, 0.18) var(--fill));
}

.ds-range-input::-moz-range-track {
    height: calc(4 * var(--u));
    background: linear-gradient(90deg, var(--tan-2) var(--fill), rgba(236, 232, 220, 0.18) var(--fill));
}

.ds-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: calc(14 * var(--u));
    height: calc(22 * var(--u));
    margin-top: calc(-9 * var(--u));
    background: var(--ink);
    border: 0;
    box-shadow: 0 0 0 calc(2 * var(--u)) rgba(0, 0, 0, 0.6);
}

.ds-range-input::-moz-range-thumb {
    width: calc(14 * var(--u));
    height: calc(22 * var(--u));
    background: var(--ink);
    border: 0;
    border-radius: 0;
}

.ds-range-value { min-width: calc(86 * var(--u)); text-align: right; font-size: calc(17 * var(--t)); font-weight: 700; }

.ds-readout {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--u));
    padding: calc(14 * var(--u)) calc(18 * var(--u));
    margin-bottom: calc(10 * var(--u));
    background: rgba(10, 13, 11, 0.8);
    border-left: calc(3 * var(--u)) solid var(--tan-2);
}

.ds-readout-label { font-size: calc(12 * var(--t)); letter-spacing: 0.3em; color: var(--muted); }
.ds-readout-main { font-size: calc(36 * var(--t)); font-weight: 700; letter-spacing: 0.06em; }
.ds-readout-sub { font-size: calc(14 * var(--t)); color: var(--ink-2); letter-spacing: 0.04em; }

.ds-bind-table { display: flex; flex-direction: column; }

.ds-bind-group {
    margin-top: calc(14 * var(--u));
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    font-size: calc(13 * var(--t));
    letter-spacing: 0.3em;
    color: var(--muted);
}

.ds-bind-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(170 * var(--u)) calc(170 * var(--u));
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    border-bottom: 1px solid rgba(236, 232, 220, 0.06);
}

.ds-bind-action { font-size: calc(17 * var(--t)); font-weight: 600; letter-spacing: 0.03em; }

.ds-key {
    height: max(var(--tap), calc(34 * var(--u)));
    border: 1px solid var(--line-2);
    border-bottom-width: calc(2 * var(--u));
    background: rgba(14, 18, 15, 0.85);
    font-size: calc(15 * var(--t));
    font-weight: 700;
    letter-spacing: 0.1em;
}

.ds-key:hover { border-color: var(--tan-2); color: var(--tan-2); }
.ds-key.is-empty { color: var(--dim); }

.ds-capture-overlay {
    position: absolute;
    inset: calc(-90 * var(--u)) calc(-60 * var(--u)) calc(-40 * var(--u));
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--u));
    background: rgba(4, 6, 5, 0.9);
    outline: none;
}

.ds-capture-title { font-size: calc(34 * var(--t)); font-weight: 700; letter-spacing: 0.14em; text-align: center; }
.ds-capture-hint { max-width: calc(760 * var(--u)); font-size: calc(17 * var(--t)); color: var(--ink-2); text-align: center; font-weight: 500; }
.ds-capture-actions { display: flex; gap: calc(12 * var(--u)); }

/* ------------------------------------------------------------------ credits and controls */

.ds-md {
    max-width: calc(1100 * var(--u));
    font-size: calc(16 * var(--t));
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    user-select: text;
    -webkit-user-select: text;
}

.ds-md h2, .ds-md h3, .ds-md h4 { color: var(--ink); letter-spacing: 0.08em; margin: calc(20 * var(--u)) 0 calc(6 * var(--u)); }
.ds-md h2 { font-size: calc(26 * var(--t)); }
.ds-md h3 { font-size: calc(20 * var(--t)); color: var(--tan-2); text-transform: uppercase; letter-spacing: 0.2em; }
.ds-md p { margin: calc(6 * var(--u)) 0; }
.ds-md ul, .ds-md ol { margin: calc(4 * var(--u)) 0; padding-left: calc(22 * var(--u)); }
.ds-md li { margin: calc(3 * var(--u)) 0; }
.ds-md a { color: var(--tan-2); text-underline-offset: 3px; word-break: break-word; }
.ds-md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--ink); background: rgba(236, 232, 220, 0.08); padding: 0 calc(4 * var(--u)); }
.ds-md .md-table { overflow-x: auto; }
.ds-md table { border-collapse: collapse; width: 100%; font-size: calc(14 * var(--t)); }
.ds-md th, .ds-md td { text-align: left; padding: calc(6 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid var(--line); vertical-align: top; }
.ds-md th { color: var(--tan-2); letter-spacing: 0.12em; }

.ds-loading { color: var(--muted); letter-spacing: 0.2em; padding: calc(20 * var(--u)) 0; }

.ds-error-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    max-width: calc(560 * var(--u));
    padding: calc(18 * var(--u));
    background: rgba(40, 12, 8, 0.7);
    border-left: calc(3 * var(--u)) solid var(--enemy);
}

.ds-error-title { font-size: calc(20 * var(--t)); font-weight: 700; letter-spacing: 0.1em; }
.ds-error-text { font-size: calc(16 * var(--t)); color: var(--ink-2); font-weight: 500; }

.ds-controls-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(28 * var(--u));
}

.ds-controls-row {
    display: grid;
    grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr);
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(5 * var(--u)) 0;
    border-bottom: 1px solid rgba(236, 232, 220, 0.06);
}

.ds-controls-keys { display: flex; gap: calc(5 * var(--u)); justify-content: flex-end; }
.ds-controls-action { font-size: calc(16 * var(--t)); color: var(--ink-2); font-weight: 500; }

.ds-controls-rules {
    margin-top: calc(22 * var(--u));
    max-width: calc(980 * var(--u));
    padding: calc(12 * var(--u)) calc(18 * var(--u));
    background: rgba(10, 13, 11, 0.75);
    border-left: calc(3 * var(--u)) solid var(--tan);
}

.ds-rule { margin: calc(5 * var(--u)) 0; font-size: calc(16 * var(--t)); font-weight: 500; color: var(--ink-2); }
.ds-rule::before { content: ''; display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-right: calc(10 * var(--u)); background: var(--tan-2); transform: translateY(calc(-2 * var(--u))) rotate(45deg); }
.ds-rule-touch { color: var(--muted); }

/* ------------------------------------------------------------------ dialog */

.ds-dialog {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.6);
}

.ds-dialog-box {
    width: min(calc(560 * var(--u)), 92vw);
    padding: calc(24 * var(--u)) calc(26 * var(--u));
    background: var(--panel-3);
    border-top: calc(3 * var(--u)) solid var(--enemy);
    box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.6);
}

.ds-dialog-title { font-size: calc(26 * var(--t)); font-weight: 700; letter-spacing: 0.14em; }
.ds-dialog-text { margin: calc(10 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(17 * var(--t)); font-weight: 500; color: var(--ink-2); }
.ds-dialog-actions { display: flex; gap: calc(10 * var(--u)); justify-content: flex-end; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 1400px) {
    .ds-settings-layout { grid-template-columns: minmax(0, 1fr); }
    .ds-set-info { display: none; }
}

@media (max-width: 1100px) {
    .ds-controls-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-set-row { grid-template-columns: minmax(0, 1fr) calc(360 * var(--u)); }
}