/*
 * Ecosystem page: section headings, the device tables, and the closing CTA. Markup
 * comes from docs/source/_ext/ecosystem_grid.py; colors come from the theme's
 * --pst-* tokens so light and dark modes both work.
 */

/* ------------------------------------------------------- section headings -- */

/* Tighter to its own standfirst than to the table it follows, so a heading reads as
   the start of what is under it rather than the end of what is above. */
.eco-section > h2 {
    margin-top: 2.75rem;
    margin-bottom: 0.5rem;
}

/* The paragraph straight after the heading is the section's standfirst: smaller and
   quieter than body copy, and measured so it does not run the full content width. */
.eco-section > h2 + p {
    max-width: 620px;
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pst-color-text-muted);
}

.eco-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--pst-color-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    vertical-align: middle;
    color: var(--pst-color-text-muted);
}

/* The pill is decoration for the heading, not for the table of contents. */
.bd-toc .eco-count,
.bd-sidebar-secondary .eco-count,
.bd-sidebar-primary .eco-count {
    display: none;
}

/* ---------------------------------------------------------- link markers -- */

/* Matches the mock: a 13px box against 13px text. Links that stay inside the docs or
   the IsaacTeleop repository get no arrow, tracking links included. */
.eco-link-arrow {
    flex: none;
    width: 13px;
    height: 13px;
}

/* Screen-reader only: sighted users get the arrow above, or nothing where an arrow on
   every row of the device table would read as decoration. */
.eco-link-external-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------ get started -- */

/* Same border, surface and radius as everything else on the page. The section used to be
   a dark gradient panel, which read as an advertisement dropped into a reference page. */
.eco-paths {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Column so the action can be pushed to the foot: the two buttons then line up even
   though the copy above them is not the same length. */
.eco-path {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    background: var(--pst-color-surface);
}

.eco-path p {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--pst-color-text-muted);
}

/* First paragraph is the panel's title. */
.eco-path > p:first-child {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--pst-color-text-base);
}

.eco-path-action {
    margin-top: auto;
}

.eco-path-action p {
    margin: 0;
}

/* Bottom margin because this is the last thing on the page: without it the button runs
   into the theme's previous/next pager. */
.eco-cta {
    max-width: 40rem;
    margin: 2rem 0 1.5rem;
}

.eco-cta p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pst-color-text-muted);
}

.eco-cta-actions {
    margin-top: 1rem;
}

.eco-cta-actions p {
    margin: 0;
}

.eco-path-action a,
.eco-cta-actions a {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The two paths are alternatives to each other, so they carry the same weight and the
   green is spent once, on the contact button below them. */
.eco-path-action a {
    border-color: var(--pst-color-border);
    color: var(--pst-color-text-base) !important;
}

.eco-path-action a:hover {
    border-color: var(--pst-color-primary);
    background: rgba(118, 185, 0, 0.08);
}

.eco-cta-actions a {
    background: var(--pst-color-primary);
    color: #000 !important;
}

.eco-cta-actions a:hover {
    background: #8fd400;
}

.eco-path-action a:focus-visible,
.eco-cta-actions a:focus-visible {
    outline: 2px solid var(--pst-color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------- device table -- */

/* Devices are looked up rather than browsed, so this section is a table. The visual
   break from the card grids above is the point: it reads as reference. */

/* Bottom margin because the table is the last thing on the page: without it the
   planned line runs into the theme's previous/next pager. */
.eco-section > h2 + p + .device-matrix {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.device-grid {
    display: grid;
    /* device | input modes | Details button */
    --device-name-col: 220px;
    grid-template-columns: var(--device-name-col) 1fr 160px;
    border-top: 2px solid var(--pst-color-text-base);
}

/* Cells are paragraphs, so the theme's vertical rhythm would break every row. */
.device-grid p {
    margin: 0;
}

.device-col {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pst-color-border);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pst-color-text-muted);
}

/* The third column has no label: the buttons under it describe themselves. The cell
   stays so the header rule runs the full width. */
.device-col-action {
    text-align: right;
}

/* Full-width heading row splitting the table into its two connection paths. Muted, not
   green: in a table whose device names are already links, a green heading reads as one. */
.device-group {
    grid-column: 1 / -1;
    padding: 1.375rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pst-color-text-muted);
}

.device-name,
.device-modes,
.device-action {
    border-bottom: 1px solid var(--pst-color-border-muted);
}

.device-name,
.device-modes {
    padding: 0.875rem 1rem;
}

.device-name {
    font-size: 0.9375rem;
    font-weight: 500;
}

.device-modes {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pst-color-text-base);
}

/* Outer columns sit flush with the page text; only the gutters between them pad. */
.device-col:first-child,
.device-name,
.device-group {
    padding-left: 0;
}

.device-col-action,
.device-action {
    padding-right: 0;
}

/* ---- details disclosure ---- */

/* The button sits in the third column and its panel spans the row underneath rather
   than floating: a popover on the rightmost column clips at the viewport edge, does
   not print, and breaks reading order. */
.device-action {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0.625rem 0 0.625rem 1rem;
}

/* A native <details> holding nothing but its <summary>. It supplies the button
   semantics, the keyboard handling, and -- through the shared `name` -- closing the open
   panel when another opens, none of which we then have to write in JavaScript. The panel
   is a sibling grid item, not a child, so it can span all three columns; that also keeps
   the device name a plain link, since a link inside a <summary> both navigates and
   toggles. */
.device-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(118, 185, 0, 0.35);
    border-radius: 3px;
    background: rgba(118, 185, 0, 0.1);
    font-size: 0.8125rem;
    line-height: 1.2;
    color: #3f6100;
    white-space: nowrap;
    cursor: pointer;
    /* inline-flex already drops the marker in current browsers; the pseudo-element
       covers Safari before 16. */
    list-style: none;
}

.device-toggle::-webkit-details-marker {
    display: none;
}

.device-toggle:hover,
.device-disclosure[open] .device-toggle {
    border-color: rgba(118, 185, 0, 0.5);
    background: rgba(118, 185, 0, 0.18);
}

.device-toggle:focus-visible {
    outline: 2px solid var(--pst-color-primary);
    outline-offset: 2px;
}

/* Same reason as the handle chip: green ink is unreadable on the dark surface. */
html[data-theme="dark"] .device-toggle {
    color: #a3d84d;
}

/* "Details ▾" closed, "Close ✕" open. Both labels are in the markup and CSS shows one,
   so the swap needs no script. */
.device-toggle-label::after {
    content: " ▾";
}

.device-toggle-label.is-open::after {
    content: " ✕";
}

.device-disclosure:not([open]) .device-toggle-label.is-open,
.device-disclosure[open] .device-toggle-label:not(.is-open) {
    display: none;
}

/* ---- details panel ---- */

.device-panel {
    grid-column: 1 / -1;
    display: grid;
    /* Requirements opens on the same line as the modes column above it, so an open row
       reads down one edge. The first track is that column plus the cell padding it gains,
       less the panel padding and the gap it loses: 220px + 1rem - 1.5rem - 2rem. */
    grid-template-columns: calc(var(--device-name-col) - 2.5rem) 1fr 1fr;
    /* Row gap only ever applies under a company mark: without one the panel is a
       single row of columns. */
    column-gap: 2rem;
    row-gap: 1.125rem;
    padding: 1.375rem 1.5rem;
    border-bottom: 1px solid var(--pst-color-border-muted);
    background: var(--pst-color-surface);
}

/* Collapsed unless its own row is open. Scoped to :has() support because that is what
   ties the panel to a disclosure it is not nested in; where the selector is missing
   every panel simply renders open, which is verbose but hides nothing. */
@supports selector(:has(*)) {
    .device-panel {
        display: none;
    }
    .device-action:has(.device-disclosure[open]) + .device-panel {
        display: grid;
    }
}

/* Paper has no buttons to press, so the panels open. */
@media print {
    .device-panel {
        display: grid !important;
    }
    .device-action {
        display: none;
    }
}

/* ---- company mark and version tag ---- */

/* Spans the panel's columns so they keep their own alignment underneath. No rule under
   it: with the mark alone, a divider reads as a header whose text failed to load. */
.device-panel p.device-panel-head {
    grid-column: 1 / -1;
    margin: 0;
}

/* Height rather than width: a wordmark is far wider than tall, and marks of unequal
   aspect ratio only look the same size when their cap height matches. */
.device-panel p.device-panel-head img {
    height: 1.25rem;
    width: auto;
    max-width: 9rem;
}

/* Below the columns, spanning them, and right-aligned: a note on the listing rather
   than a fourth column of it. */
.device-panel p.device-panel-foot {
    display: flex;
    grid-column: 1 / -1;
    margin: 0;
}

/* Right-aligned by its own margin, so it does not depend on how its parent distributes
   free space. Its own gap, tighter than the panel's, keeps the word with the branch. */
.device-since {
    display: flex;
    align-items: center;
    flex: none;
    gap: 0.375rem;
    margin-left: auto;
}

/* The panel's column headings, so the word reads as a label rather than as content. */
.device-since-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pst-color-text-muted);
}

/* Monospace because the label is a ref -- a release tag, or the branch name -- which is
   the string the reader is about to check out. */
.device-panel a.device-since-branch {
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--pst-color-border);
    border-radius: 999px;
    font-family: var(--pst-font-family-monospace);
    font-size: 0.6875rem;
    color: var(--pst-color-text-muted);
    white-space: nowrap;
    text-decoration: none;
}

.device-panel a.device-since-branch:hover,
.device-panel a.device-since-branch:focus-visible {
    border-color: currentcolor;
    color: var(--pst-color-link-hover);
}

/* No release branch has it yet, which is the one case a reader has to act on. */
.device-panel a.device-since-branch.is-main {
    border-color: var(--pst-color-primary);
    color: var(--pst-color-primary);
}

.device-panel h4.device-panel-heading {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pst-color-text-muted);
}

.device-panel p.device-panel-line {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.device-panel p.device-panel-line:last-child {
    margin-bottom: 0;
}

/* The arrow is spaced with a margin rather than by making the anchor a flex container:
   Sphinx splits an obfuscated address into several spans, and a flex gap would push
   every one of them apart -- "Veronica . li @ bytedance . com". */
.device-panel-line .eco-link-arrow {
    margin-left: 0.25rem;
    vertical-align: -0.1em;
}

/* ---- planned line ---- */

/* Not a row: a planned device has no input modes or setup path to put in one. */
.device-matrix p.device-planned {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--pst-color-text-muted);
}

.device-planned-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Pushed to the far end of the line, and styled as a status rather than an invitation. */
.device-planned-track {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 500;
    color: var(--pst-color-text-muted) !important;
}

.device-planned-track:hover,
.device-planned-track:focus {
    color: var(--pst-color-primary) !important;
}

/* Under 900px the three columns stop holding their content, so each device becomes a
   stacked record: name, modes, then its button, all left-aligned. */
@media (max-width: 900px) {
    .device-grid {
        grid-template-columns: 1fr;
        border-top: none;
    }
    .device-col {
        display: none;
    }
    .device-name {
        padding: 0 0 0.25rem;
        border-bottom: none;
        font-size: 1rem;
    }
    .device-modes {
        padding: 0.125rem 0;
        border-bottom: none;
    }
    /* The column headers are gone with the columns, so each cell names its own field. */
    .device-modes::before {
        content: attr(data-label) " ";
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--pst-color-text-muted);
    }
    .device-action {
        justify-content: flex-start;
        padding: 0.5rem 0 0.875rem;
    }
    .device-panel {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.125rem 0;
    }
    .device-planned-track {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
    .eco-paths {
        grid-template-columns: 1fr;
    }
}