/* ==========================================================================
   Device Setup in the Welcome (js/device-setup.js), design C (owner 2026-11-08): how BENTO gets onto a board the IDE
   does not flash (the reTerminal). The steps sit in the Welcome under the board picker as pictures, one per step,
   with a tick each. IDE tokens only; body text 14 px; no text in --text-tertiary (too faint on white).
   ========================================================================== */

.ds-setup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
    font-family: var(--font-sans);
    color: var(--text-primary);
    scroll-margin-top: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.ds-setup.ds-flash {
    border-color: var(--tesa-primary);
    box-shadow: 0 0 0 5px var(--tesa-primary-light);
}

.ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.ds-lead { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.ds-notweb { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--tesa-primary-hover); }
.ds-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ds-progress {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tesa-primary-subtle);
    color: var(--tesa-primary-hover);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ds-fold { min-height: 32px; }

.ds-body { display: flex; flex-direction: column; gap: 12px; }
.ds-body[hidden] { display: none; }

.ds-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); }
.ds-tab {
    min-height: 40px;
    margin-bottom: -1px;
    padding: 0 14px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab.ds-tab-on { border-bottom-color: var(--tesa-primary); color: var(--text-primary); font-weight: 700; }
.ds-tab:focus-visible, .ds-tick:focus-visible, .ds-copy:focus-visible, .ds-fold:focus-visible {
    outline: 2px solid var(--tesa-primary);
    outline-offset: 2px;
}

.ds-path { display: flex; flex-direction: column; gap: 12px; }
.ds-when { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.ds-foot { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* the Installer's "not yet" bar: the download is shown as words, never as a link */
.ds-soonbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-muted);
}
.ds-download-off {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.ds-soon-note { flex: 1 1 260px; font-size: 13px; line-height: 1.5; color: var(--text-primary); }

/* a step with no picture (apt): tick, words, the command with Copy, a line under it */
.ds-rows { display: flex; flex-direction: column; gap: 8px; }
.ds-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
}
.ds-row.ds-done, .ds-card.ds-done { border-color: var(--tesa-primary-light); background: var(--tesa-primary-subtle); }
.ds-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-step-text { font-size: 14px; line-height: 1.55; color: var(--text-primary); }
.ds-row .ds-step-text { padding-top: 5px; }
.ds-more { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ds-cmd {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-muted);
}
.ds-cmd code {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.ds-copy { flex-shrink: 0; min-height: 32px; }

/* a step with a picture: the picture first and clear (nothing drawn over it: the owner wants the Installer's whole
   window), then the tick and one line, then what the picture is. The picture is a button: it opens larger. */
.ds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ds-card {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
}
.ds-pic {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-muted);
    cursor: zoom-in;
    overflow: hidden;
}
.ds-pic:hover { border-color: var(--tesa-primary-light); }
.ds-pic:focus-visible { outline: 2px solid var(--tesa-primary); outline-offset: 2px; }
.ds-pic img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}
.ds-card-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.ds-card-row .ds-step-text { padding-top: 6px; }
.ds-pic-tag { font-size: 12px; color: var(--text-secondary); }
.ds-tick, .ds-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ds-tick {
    border: 2px solid var(--tesa-primary);
    background: var(--bg-surface);
    color: var(--tesa-primary-hover);
    cursor: pointer;
}
.ds-tick.ds-on { border-color: var(--tesa-primary); background: var(--tesa-primary); color: #fff; }
.ds-num { background: var(--tesa-primary); color: #fff; font-size: 14px; }

/* a picture, larger, over the Welcome (z-index above the Welcome's 900) */
.ds-zoom {
    position: fixed; inset: 0;
    z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(17, 24, 39, 0.72);
}
.ds-zoom-fig {
    margin: 0;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(1280px, 96vw);
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-surface);
}
.ds-zoom-fig img { display: block; max-width: 100%; max-height: calc(92vh - 90px); object-fit: contain; border-radius: 8px; }
.ds-zoom-cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-sans); }
.ds-zoom-text { flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.ds-zoom-tag { font-size: 12px; color: var(--text-secondary); }
.ds-zoom-close { min-height: 36px; }

/* one picture after text steps sits beside the path's closing line */
.ds-end { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: center; }
.ds-end .ds-card { padding: 0; }
.ds-end { align-items: start; }

.ds-pair {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--tesa-primary-subtle);
}
.ds-pair-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ds-pair-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ds-pair-note { font-size: 13px; font-weight: 600; color: var(--tesa-primary-hover); }
.ds-pair .ds-card { background: var(--bg-surface); }

@media (max-width: 900px) {
    .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-end { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ds-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ds-setup { transition: none; }
}