/*
 * 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 */
    grid-template-columns: 220px 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;
    grid-template-columns: repeat(3, 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 ---- */

/* 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;
}

.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;
    }
}