.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); font-size: 14px; letter-spacing: 0.02em; }

.nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    white-space: nowrap;
    transition: color 0.16s ease;
}

.nav__item:hover { color: var(--text); }


.nav__item.active { color: var(--text); }

.nav__item.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
    animation: omWipe 0.5s ease-out 0.2s both;
}

.nav__item svg { flex: 0 0 auto; }


@media (max-width: 720px) {
    .nav__item span { display: none; }
    .nav { gap: 18px; }
}




.acct-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: color-mix(in srgb, var(--text) 68%, transparent);
    white-space: nowrap;
    transition: color 0.16s ease;
}

.acct-link:hover { color: var(--text); }

@media (max-width: 900px) {
    .acct-link span { display: none; }
}


.avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--divider);
    background: transparent;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.avatar--lg { width: 40px; height: 40px; font-size: 15px; }


.acct { position: relative; }
.acct summary { list-style: none; cursor: pointer; display: inline-flex; }
.acct summary::-webkit-details-marker { display: none; }
.acct summary:hover .avatar { border-color: var(--accent-line); }

.acct__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 268px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-lg);
    animation: omFade 0.14s ease-out both;
}

.acct__id { display: flex; align-items: center; gap: 12px; }
.acct__who { min-width: 0; display: flex; flex-direction: column; }
.acct__who strong { font-family: var(--font-heading); font-size: 17px; font-weight: 600; }
.acct__who span { font-size: 12.5px; color: var(--text-70); overflow: hidden; text-overflow: ellipsis; }
/* Label and tag on one line. */
.acct__section { margin-top: 14px; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.acct__section > .tags { margin-top: 0; }
/* The divider sits on the first action, so the two read as one block. */
.acct__action { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }
.acct__action + .acct__signout { margin-top: 8px; padding-top: 0; border-top: 0; }
.acct__signout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }




.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    max-width: var(--measure);
    margin: 0 auto;
}

.hero h1 {
    margin: 20px 0 0;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero h1 span { display: block; }
.hero h1 .accent { color: var(--band-accent); }
.hero__lede { max-width: 46ch; margin: 22px 0 0; font-size: 17px; line-height: 1.55; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }


.hero__panel {
    position: relative;
    padding: 24px 26px 22px;
    border-color: var(--band-line);
    background: rgb(0 0 0 / 14%);
}

.hero__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--band-accent);
}

/* The device's icon grid, drawn from its own icons. */
.hero-dev { margin: 0 0 14px; padding: 12px; background: #1b1d21; border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / 30%); }
.hero-dev__screen {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #080c10;
    color: #efeff7;
    font-family: var(--font-body);
}
.hero-dev svg { fill: currentColor; }
.hero-dev__bar {
    display: flex; align-items: center; justify-content: space-between;
    height: 26px; padding: 0 10px;
    background: #020305;
    font-size: 12px; line-height: 1;
}
.hero-dev__status { display: flex; gap: 8px; color: #2969c6; }
.hero-dev__status svg { width: 12px; height: 12px; }
.hero-dev__status .is-dim { color: #8a93a0; }
.hero-dev__grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px; padding: 9px 12px;
}
.hero-dev__tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    aspect-ratio: 1 / .84;
    padding: 0 4px;
    text-align: center;
    background: #101c21;
    border-radius: 6px;
    font-size: 11px; line-height: 1.1;
    animation: devTile .5s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
.hero-dev__tile:nth-child(n+6) { animation-delay: .1s; }
.hero-dev__tile:nth-child(n+11) { animation-delay: .2s; }
.hero-dev__icon { flex: none; width: 24px; height: 24px; color: #2969c6; }
.hero-dev__badge { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; color: #4b5563; }
/* One tile answers a touch now and then, so the panel reads as alive. */
.hero-dev__tile:nth-child(2) { animation: devTile .5s cubic-bezier(0.3, 0.8, 0.3, 1) both, devTap 6s ease-in-out 2s infinite; }
@media (max-width: 480px) {
    .hero-dev { padding: 8px; }
    .hero-dev__grid { gap: 5px; padding: 8px; }
    .hero-dev__tile { font-size: 9px; gap: 3px; padding: 0 2px; }
    .hero-dev__icon { width: 18px; height: 18px; }
    .hero-dev__badge { display: none; }
}

@keyframes devTile { from { opacity: 0; transform: scale(.92); } }
@keyframes devTap {
    0%, 86%, 100% { background: #101c21; box-shadow: none; }
    90% { background: #163a5c; box-shadow: 0 0 0 2px #2969c6; }
}


.hero__panel .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__panel .stat { padding: 8px 12px; }
.hero__panel .stat strong { font-size: 24px; }
.hero__stats { margin-top: 0; }

.hero__bar-row { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.06em; color: var(--band-dim); }
.hero__bar { display: block; height: 3px; margin-top: 6px; background: color-mix(in srgb, #f2f2f3 18%, transparent); }
.hero__bar i { display: block; height: 3px; background: var(--band-accent); transform-origin: left; animation: omBar 2.4s cubic-bezier(0.3, 0.8, 0.3, 1) 0.8s both; }

/* The framed setup walkthrough. Height steps up where the frame stacks. */
.walkthrough { margin-top: 28px; padding: 0; overflow: hidden; }
.walkthrough iframe { display: block; width: 100%; height: 470px; border: 0; }
@media (max-width: 620px) { .walkthrough iframe { height: 640px; } }
.walkthrough__after { margin: 14px 0 0; font-size: 14px; }

.home-os { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; max-width: var(--measure); margin: 0 auto; }
.home-os h2 { font-size: clamp(32px, 5vw, 46px); line-height: 1.02; }
.home-os p { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-70); max-width: 48ch; }
.home-os a { border-bottom: 1px solid currentColor; }




.store { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; max-width: var(--measure); margin: 0 auto; }

.store__rail { position: sticky; top: 82px; align-self: start; }

.filters__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
}

.filters__head h2 { margin: 0; font-size: 27px; }
.filters__head svg { color: var(--accent); }
.filters__count { font-size: 12px; color: var(--text-70); white-space: nowrap; }


.filters__disclosure > summary {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 9px 14px;
    border: 1px solid var(--divider);
    list-style: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-70);
}

.filters__disclosure > summary::-webkit-details-marker { display: none; }
.filters__disclosure > summary:hover { border-color: var(--accent-line); color: var(--accent-text); }
.filters__disclosure > summary svg { margin-left: auto; transition: transform 0.22s ease; }
.filters__disclosure[open] > summary svg { transform: rotate(180deg); }

.filters__summary-hide { display: none; }
.filters__disclosure[open] .filters__summary-show { display: none; }
.filters__disclosure[open] .filters__summary-hide { display: inline; }

@media (max-width: 1080px) {
    .filters__disclosure > summary { display: flex; }
}

.filters__group { margin-top: 26px; }

.filters__group > p {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-70);
}


.filter {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
    font-size: 14px;
    color: var(--text-70);
    transition: color 0.14s ease;
}

.filter:hover { color: var(--text); }

.filter__box {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
    display: grid;
    place-items: center;
}

.filter[aria-pressed="true"] { color: var(--text); }
.filter[aria-pressed="true"] .filter__box { background: var(--accent); border-color: var(--accent); }
.filter__box svg { color: var(--on-accent); opacity: 0; }
.filter[aria-pressed="true"] .filter__box svg { opacity: 1; }


.results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--divider);
}

.results__head h2 { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-70); }


/* The store's tab strip sits above the search row, which draws its own rule. */
.store .tabs { margin-bottom: 26px; }


/* The sort dropdown: a <details> whose menu is plain links, one per order --
   the same no-circuit rule as every other control on this page. The menu is a
   popover rather than in-flow so opening it does not shove the grid down. */
.sort { position: relative; }
.sort > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.sort > summary::-webkit-details-marker { display: none; }
.sort > summary svg { color: var(--text-70); flex: none; }
.sort > summary:hover svg { color: var(--text); }
.sort[open] > summary svg { transform: rotate(180deg); }
.sort__label { color: var(--text-70); }
.sort__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--divider);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 12%, transparent);
}
.sort__menu a { padding: 9px 14px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.sort__menu a:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.sort__menu a[aria-current] { background: var(--surface); color: var(--accent-text); }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 30px; }

.pkg { display: flex; flex-direction: column; padding: 24px 22px 20px; }
.pkg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pkg__head h3 { margin: 0; min-width: 0; font-size: 27px; line-height: 1.1; }
.pkg__head h3 a { color: var(--text); }
.pkg:hover .pkg__head h3 a { color: var(--accent-text); }

.pkg__desc {
    margin: 12px 0 0;
    font-size: 14.5px;
    color: var(--text-70);
    min-height: calc(3 * 1.55em);
}


.pkg__tags { margin-top: 16px; margin-bottom: 18px; }

.pkg__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--divider);
}

.pkg__foot > * + * { margin-left: auto; }

.pkg__version, .pkg__price {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pkg__version { color: var(--text-70); }
.pkg__price { color: var(--accent-text); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px; text-align: center; }
.empty h3 { margin: 0; }




.dev-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.dev-toolbar__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.dev-toolbar__facet { display: flex; align-items: center; gap: 12px; }

.dev-rows { display: flex; flex-direction: column; gap: 30px; }

.dev-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 24px 26px;
}

.dev-row__index { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dev-row__index b { font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); }
.dev-row__index svg { color: var(--text-55); }

.dev-row__name { margin: 0 0 12px; font-size: 27px; line-height: 1.1; }

.dev-row__verified { padding-left: 24px; border-left: 1px solid var(--divider); font-size: 13.5px; color: var(--text-70); }
.dev-row__verified .field-label { display: block; margin-bottom: 4px; }
.dev-row__verified .mono { color: var(--text); }
.dev-row__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.dev-row__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }


.dev-row__actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }

.dev-row__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--divider);
}

.dev-row__buttons .btn { justify-content: flex-start; }

.dev-revs { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dev-revs > div { display: flex; align-items: baseline; gap: 10px; }

.dev-revs > div > span:last-child { flex: 1 1 0; min-width: 0; }

@media (max-width: 1080px) {
    .dev-row { grid-template-columns: 46px minmax(0, 1fr); gap: 20px; }
    .dev-row__index { flex-direction: row; }
    .dev-row__verified, .dev-row__actions, .dev-row__made { grid-column: 2; }
    .dev-row__verified { padding-left: 0; border-left: 0; border-top: 1px solid var(--divider); padding-top: 16px; }
    .dev-row__actions { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
    
    .dev-row__buttons { flex-direction: row; flex-wrap: wrap; padding-top: 0; border-top: 0; }
}

@media (max-width: 640px) {
    .dev-row { grid-template-columns: minmax(0, 1fr); }
    .dev-row__verified, .dev-row__actions, .dev-row__made { grid-column: 1; }
}




.detail { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start; max-width: var(--measure); margin: 0 auto; }

/* The related-products shelf under the detail grid. Same measure and the same
   auto margins as `.detail`, so its left edge lands on the product title's
   rather than on the page edge -- the shelf is full width, but it is not a
   full-bleed band. */
.detail-related { max-width: var(--measure); margin: 0 auto; }
.detail__main { min-width: 0; }
.detail__rail { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 24px; }

.crumbs { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--band-dim); }
.crumbs a { color: var(--band-accent); }
.crumbs span[aria-current] { color: var(--band-text); }

.detail__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.detail__title-row h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); }


.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch; }
.gallery--single { grid-template-columns: minmax(0, 1fr); }
.gallery__stack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; min-height: 0; }

.shot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: var(--surface);
    cursor: zoom-in;
    overflow: hidden;
}

.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot--primary { aspect-ratio: 16 / 10; }
.gallery__stack .shot { height: 100%; }
.shot:hover { border-color: var(--accent-line); }

.detail-section { margin-top: 48px; }
.detail-section > h2 { margin: 0 0 18px; font-size: clamp(24px, 3vw, 32px); }
/* NO max-width HERE. The column is ALREADY the measure: .detail is capped at
   --measure and gives this side minmax(0, 1fr) next to a fixed rail, so a
   second cap in ch just stops the text short of the tables and lists beside
   it and reads as a bug rather than as typography. Constrain the CONTAINER,
   never the paragraph. */
.detail-prose { font-size: 16px; line-height: 1.6; color: var(--text-70); }
.detail-list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.7; color: var(--text-70); }

/* The Features section: two columns of check-led lines on desktop, collapsing
   with the rest of the detail layout on phones. */
.feature-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; font-size: 15px; line-height: 1.55; color: var(--text-70); }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; }
.feature-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent-text); }

/* The /devices closing plate, on .band__split's proportions. */
.onboard { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 44px; align-items: start; padding: 28px; }

.detail-card { padding: 22px 24px; }
.detail-card__title { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-70); margin-bottom: 16px; }

.detail-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.detail-price__amount { font-family: var(--font-heading); font-size: 40px; font-weight: 600; line-height: 1; }
.detail-price__terms { font-size: 13px; color: var(--text-70); }
.detail-announce { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--text-70); }

.detail-rule { height: 1px; background: var(--divider); margin: 18px 0; }
.detail-note { margin: 14px 0 0; font-size: 13px; color: var(--text-70); }

.detail-meta { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.detail-meta > div { display: flex; justify-content: space-between; gap: 12px; }
.detail-meta > div > span:first-child { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-70); }
.detail-meta > div > span:last-child { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }

.detail-boards { display: flex; flex-direction: column; gap: 1px; }

.board-fit {
    display: block;
    padding: 11px 13px;
    border: 1px solid transparent;
    color: var(--text);
    transition: border-color 0.16s ease, background 0.16s ease;
}

a.board-fit:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.board-fit__name { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; }
.board-fit__spec { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-70); }
.board-fit__reason { display: block; font-size: 12px; color: var(--text-70); margin-top: 3px; }
.board-fit--unsupported { opacity: 0.55; }

.detail-more > summary { cursor: pointer; padding: 11px 13px; font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.detail-more[open] > summary { border-bottom: 1px solid var(--divider); margin-bottom: 4px; }

.detail-own__links { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.detail-own__sep { color: var(--text-55); }


.detail-dock {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 25;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px var(--gutter);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--divider);
}

.detail-dock__amount { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }

@media (max-width: 720px) {
    .detail-dock.is-docked { display: flex; }
}




.editor { display: flex; flex-direction: column; gap: 30px; max-width: 860px; }
.editor__card { padding: 24px 26px; }
.editor__card > h2 { margin: 0 0 18px; font-size: 27px; }
.editor__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.editor__stack { display: flex; flex-direction: column; gap: 16px; }

.facts { display: flex; flex-direction: column; gap: 1px; background: var(--divider); }
.facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 12px 14px; background: var(--bg); align-items: baseline; }
.facts > div > span:first-child { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-70); }
.facts code { font-size: 13px; }
.facts small { grid-column: 2; font-size: 11.5px; color: var(--text-70); }

.rev-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.rev-row input, .rev-row select { min-height: 34px; padding: 5px 9px; font-size: 13px; width: auto; }

.gal { display: flex; flex-direction: column; gap: 18px; }
.gal__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.gal__head h2 { margin: 2px 0 0; font-size: 27px; }
.gal__count { text-align: right; }
.gal__count strong { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }
.gal__count span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-70); }


.gal__drop { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px 26px; border-style: dashed; transition: border-color 0.18s ease, background 0.18s ease; }
.gal__drop:hover, .gal__drop:focus-within { border-color: var(--accent-line); background: var(--accent-soft); }
.gal__drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gal__drop-icon { color: var(--accent); }
.gal__drop-text { flex: 1 1 240px; min-width: 0; }
.gal__drop-text strong { display: block; font-family: var(--font-heading); font-size: 19px; font-weight: 600; }
.gal__drop-text span { font-size: 13px; color: var(--text-70); }
.gal__drop-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.gal__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.gal__status { font-family: var(--font-mono); font-size: 12px; color: var(--text-70); margin-left: auto; }

.gal__rows { display: flex; flex-direction: column; gap: 10px; }

.gal__row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; }
.gal__row.is-drag-over { border-color: var(--accent-line); background: var(--accent-soft); }

.gal__handle { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-55); cursor: grab; }
.gal__handle:active { cursor: grabbing; }
.gal__handle b { font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.gal__move { display: flex; flex-direction: column; gap: 2px; }
.gal__move button { width: 22px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid var(--divider); background: transparent; color: var(--text-55); cursor: pointer; }
.gal__move button:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent-text); }
.gal__move button:disabled { opacity: 0.3; cursor: not-allowed; }

.gal__thumbwrap { position: relative; }
.gal__thumb { width: 96px; height: 62px; object-fit: cover; border: 1px solid var(--divider); background: var(--surface); }
.gal__cover { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

.gal__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gal__meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.gal__meta strong { font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.gal__meta span { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-70); }
.gal__hint { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-70); }
.gal__nudge { color: var(--warn); font-style: normal; }
.gal__del { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--divider); background: transparent; color: var(--text-55); cursor: pointer; }
.gal__del:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 720px) {
    .gal__row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .gal__thumbwrap { grid-row: 2; grid-column: 1 / -1; }
}




.mydev { display: flex; flex-direction: column; gap: 24px; max-width: 860px; }
.mydev__row { padding: 22px 24px; }
.mydev__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mydev__head h2 { margin: 0; font-size: 24px; }
.mydev__id { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-70); }
.mydev__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; font-size: 13px; }
.mydev__facts b { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-70); margin-right: 6px; }
.mydev__head h2 a { color: inherit; text-decoration: none; }
.mydev__head h2 a:hover { text-decoration: underline; }


.mydev__actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }


.mydev__rename > summary { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; cursor: pointer; list-style: none; }
.mydev__rename > summary::-webkit-details-marker { display: none; }
.mydev__rename > summary svg { flex: none; color: var(--text-70); }
.mydev__rename > summary:hover svg { color: var(--text); }
.mydev__rename-x { display: none; }
.mydev__rename[open] .mydev__rename-pencil { display: none; }
.mydev__rename[open] .mydev__rename-x { display: block; }
.mydev__rename > form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.mydev__rename input[type="text"] { width: 260px; max-width: 100%; }
.mydev__danger > summary { cursor: pointer; font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-70); }
.mydev__danger > summary:hover { color: var(--text); }
.mydev__danger-body { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.mydev__danger-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mydev__danger-row > div { flex: 1 1 380px; min-width: 0; }
.mydev__danger-row strong { font-size: 14px; }
.mydev__danger-row p { margin: 4px 0 0; font-size: 13px; max-width: 62ch; }
.mydev__danger-row form { display: flex; align-items: center; gap: 8px; }
.mydev__danger-row input[type="text"] { width: 130px; }




.lic-place { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.lic-place__on { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.lic-place__on code { font-size: 12px; color: var(--text-70); }
.lic-place__form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lic-place__form .field { min-width: 220px; }
.lic-place__note { font-size: 12.5px; flex-basis: 100%; }





.setup__browsers { width: fit-content; max-width: 100%; margin-top: 18px; }

.setup-tabs { margin-top: 18px; }


/* Separators are per-tab borders, not a gap over a coloured strip: the tabs do
   not fill the row, so that trick leaves grey blocks on a wrapped line. */
.setup-tabs__strip {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--divider);
    border-right: 0;
    border-bottom: 0;
}

.setup-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    flex: 0 0 auto;
    padding: 13px 18px;
    border: 0;
    border-right: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    background: var(--bg);
    color: var(--text-70);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.setup-tab:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.setup-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


.setup-tab--extra { color: var(--text-70); }


.setup-tab__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: var(--surface);
    color: var(--text-70);
    font-size: 12.5px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}


.setup-tab__num--icon { background: transparent; }
.setup-tab__num--icon svg { display: block; }


.setup-tab[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--accent-soft-text);
    box-shadow: inset 0 -3px 0 var(--accent);
}

.setup-tab[aria-selected="true"] .setup-tab__num {
    background: var(--accent-fill);
    color: var(--on-accent);
}

.setup-tab[aria-selected="true"] .setup-tab__num--icon {
    background: transparent;
    color: var(--accent-text);
}


/* Controls left at a fixed measure, what the step means right. */
.setup-panel {
    padding-top: 26px;
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.setup-panel:focus { outline: none; }


.setup-panel__card { max-width: 100%; }


.setup-aside { max-width: 46ch; }
.setup-aside__title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-70);
    margin: 0 0 14px;
}
.setup-aside p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text-70); }
.setup-aside p:last-child { margin-bottom: 0; }


.setup-install {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.setup-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.setup-card__head { display: flex; align-items: center; gap: 10px; }
.setup-card__head h3 { margin: 0; font-size: 19px; }
.setup-card__head svg { color: var(--accent); flex: 0 0 auto; }
.setup-card p.muted { margin: 0; font-size: 13px; }
.setup-card .form { display: flex; flex-direction: column; gap: 10px; }
.setup-card .field { margin: 0; }

.setup-card > button,
.setup-card > form { margin-top: auto; align-self: flex-start; }
.setup-card__note { margin: 0; font-size: 12.5px; color: var(--text-70); }


.setup__lede { margin: 14px 0 0; }


.setup__bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--divider); }
/* Where a token goes, said beside the button that sends it. Quiet type, because
   it is a reassurance and not a warning. */
.setup__private {
    margin: 10px 0 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .7;
}

.setup__status { font-size: 14px; }
.setup__status.is-ok { color: var(--ok); }
.setup__status.is-err { color: var(--danger); }
.setup__log-wrap > summary { cursor: pointer; width: fit-content; font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-70); }
.setup__log-wrap > summary:hover { color: var(--text); }
.setup__log { display: block; width: 100%; max-height: 260px; overflow: auto; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--divider); background: var(--surface); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

.setup__log:empty { display: none; }


.combo { position: relative; }


.combo__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--text-55);
    pointer-events: none;
    z-index: 1;
}
.combo__icon--search { left: 11px; }
.combo__icon--caret { right: 10px; transition: transform 0.16s ease; }


.combo__input[aria-expanded="true"] ~ .combo__icon--caret { transform: translateY(-50%) rotate(180deg); }


/* [type="text"] needed: it outranks a plain .form .combo__input. */
.form input[type="text"].combo__input { padding-left: 36px; padding-right: 34px; }


.combo__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-md);
}


.combo__opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 12px;
    font-size: 14px;
    cursor: pointer;
}

.combo__zone { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.combo__zone b { font-weight: 600; color: var(--accent-text); }
.combo__off { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-70); }


.combo__opt:hover,
.combo__opt.is-active { background: var(--accent-soft); color: var(--accent-soft-text); }
.combo__opt:hover .combo__zone b,
.combo__opt.is-active .combo__zone b,
.combo__opt:hover .combo__off,
.combo__opt.is-active .combo__off { color: inherit; }


.combo__opt[aria-selected="true"] .combo__zone { font-weight: 600; }

.combo__empty,
.combo__more { padding: 9px 12px; font-size: 12.5px; color: var(--text-70); }
.combo__more { border-top: 1px solid var(--divider); }


.ble-list { display: flex; flex-direction: column; gap: 6px; max-height: 232px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.ble-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--divider); background: var(--surface); font-size: 13.5px; }
.ble-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ble-row__meta { grid-column: 1; font-size: 11.5px; color: var(--text-70); }
.ble-row button { grid-column: 2; grid-row: 1 / span 2; }
.ble-row--empty { display: block; border-style: dashed; color: var(--text-70); }
.ble-actions { display: flex; gap: 8px; margin-top: 12px; }




.fw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
.fw-row { padding: 20px 22px; }
.fw-row__head { display: flex; align-items: center; gap: 12px; }
.fw-row__head h3 { margin: 0; font-size: 19px; }
.fw-row__driver { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; }
.fw-row__driver svg { flex: 0 0 auto; }
.fw-row__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }


.install__track { height: 6px; margin-top: 16px; border: 1px solid var(--divider); background: var(--surface); }
.install__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 140ms linear; }





#yos-shots {
    padding: 0;
    width: min(92vw, 900px);
    max-width: min(92vw, 900px);
    max-height: 90dvh;
    overflow: hidden;
    border: 1px solid var(--divider);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
}

/* Flex only while OPEN. An unconditional display on a <dialog> overrides the
   browser's closed-state display:none, and the closed lightbox rendered as an
   empty strip at the foot of every page that includes it. */
#yos-shots[open] {
    display: flex;
    flex-direction: column;
}

#yos-shots::backdrop { background: rgb(10 12 16 / 62%); }
.shots__head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.shots__head strong { font-family: var(--font-heading); font-size: 19px; font-weight: 600; }


.shots__body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 14px; }

.shots__body img {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    align-self: stretch;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--divider);
}

.shots__nav { flex: 0 0 auto; }
.shots__nav { border: 1px solid var(--divider); background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 10px 12px; }
.shots__nav:hover { border-color: var(--accent-line); color: var(--accent-text); }




@media (max-width: 1080px) {
    .hero,
    .home-os,
    .store,
    .detail { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    
    [data-r="stack"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }

    
    .setup-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .store__rail,
    .detail__rail { position: static; top: auto; }

    .gallery { grid-template-columns: minmax(0, 1fr); }
    .gallery__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }

    .feature-list { grid-template-columns: minmax(0, 1fr); }
}


.table__sub.is-ready { color: var(--accent-text); }
.table__sub.is-warn { color: var(--warn); }


/* ---------------------------------------------------------------------------
   Admin dashboard.

   COLUMNS AND NOT A LINE. Revenue on a day with no sale is genuinely nothing,
   and a line drawn across that gap invents trade which did not happen. The
   empty slots carry as much meaning as the full ones, so the baseline runs the
   whole width whether or not a bar stands on it.

   NO SCRIPT. Every column carries a native title attribute and that is the
   entire tooltip layer. The admin pages are static SSR, and a hover handler
   here would open a SignalR circuit to show a number the markup already holds.
   --------------------------------------------------------------------------- */
.chart { display: flex; flex-direction: column; gap: 9px; }
.chart__frame { display: flex; gap: 12px; }

/* The ticks carry the values that no bar is labelled with, so they align
   vertically: tabular figures here, proportional on the stat tiles. */
.chart__ticks {
    flex: 0 0 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-70);
}
.chart__ticks span { line-height: 1; }
.chart__ticks span:first-child { transform: translateY(-0.35em); }
.chart__ticks span:last-child { transform: translateY(0.35em); }

.chart__plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 170px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 1px solid var(--divider);
}

/* Hairline and solid, one step off the surface: enough to read a height
   against, quiet enough that the bars stay the loudest ink on the panel. */
.chart__grid { position: absolute; inset: 0; pointer-events: none; }
.chart__grid::before,
.chart__grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--divider);
}
.chart__grid::before { top: 0; }
.chart__grid::after { top: 50%; }

.chart__col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Capped rather than filling its slot -- a seven-day window would otherwise
   render seven slabs, and the leftover width of a band is meant to be air.
   Rounded at the data end only; square where it meets the baseline. */
.chart__bar {
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    background: var(--accent-600);
    border-radius: 4px 4px 0 0;
}

.chart__axis {
    display: flex;
    justify-content: space-between;
    padding-left: 64px;
    font-size: 11px;
    color: var(--text-70);
}

/* The dashboard stacks blocks that other admin pages show one at a time, so it
   owns the rhythm between them. Scoped to this page rather than added to .bp:
   every other page places a single panel and would gain a stray top margin.

   The gap was once structural as well as cosmetic, back when every .bp drew
   corner marks outside its own box and touching panels overlapped each other's.
   Only the header panel carries marks now, so this is rhythm alone. */
.dash > * + * { margin-top: 22px; }

/* Admin section bands: Dashboard, Products and Boards.

   .band__row aligns to flex-end, so the action buttons sit at the BOTTOM of
   whichever column is taller -- which means the heading block's height decides
   where they land. Products carried no lede at all, standing its buttons two
   lines higher than its neighbours', and they jumped on every navigation
   between the three.

   All three now carry a lede. This floor is the belt to that braces: it holds
   the heading column at the height of a two-line lede, so a page whose text
   happens to wrap shorter still puts its buttons in the same place. A floor
   and not a fixed height -- a genuinely taller block must still be allowed to
   grow rather than have its text clipped. */
.band--admin .band__row > :first-child { min-height: 104px; }

/* A .bp panel carries NO padding of its own, by design -- .table pads its own
   cells, so a table sits flush and looks inset. Everything else this page puts
   in a panel had no such padding and ended up against the border: the heading
   sat on the top rule and the plot ran into both sides.

   So the inset is given to the contents that lack one, and the tables are left
   alone. Padding the panel itself would have doubled theirs to 38px. 16px is
   not a taste: it is the .table cell inset, so a heading lines up with the
   column below it. */
.dash .bp > .section-head { padding: 15px 16px 13px; }
.dash .bp > .tabs    { padding: 0 16px; }
.dash .bp > .chart        { padding: 16px 16px 14px; }
.dash .bp > details       { padding: 0 16px 14px; }
.dash .bp > .empty        { padding: 26px 16px 30px; }

/* The stat grid draws its dividers with a 1px gap over a tinted background, so
   its tiles must reach the panel edge -- an inset would leave the rules
   floating short of the border they are meant to meet. */
.dash .bp > .stats { padding: 0; }

/* The one figure the page leads with. Same component as its neighbours, one
   size up, so the hierarchy does not cost a new type style. */
.stat--lead strong { font-size: 44px; }

/* The dashboard's two chart panels, side by side: the trend needs the width,
   the bar list is a list. One column when the pair would squeeze the plot. */
.dash-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; }
@media (max-width: 980px) { .dash-duo { grid-template-columns: minmax(0, 1fr); } }

/* The zero-suppressed line under the trend: refunds and failures are orders
   the bars deliberately leave out. Inset to the chart's own 16px. */
.dash .bp > .chart__note { margin: 0; padding: 0 16px 14px; font-size: 12.5px; color: var(--text-70); }

/* Top sellers: horizontal bars, values riding the bar ends. One hue across
   the list -- the products are names, not series, and the length is the
   value. Rounded at the data end, square at the left baseline, like the
   trend's columns are at theirs. */
.dash .bp > .hbars { padding: 6px 16px 18px; }
.hbars { list-style: none; margin: 0; display: grid; gap: 13px; align-content: start; }
.hbars li { display: grid; grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); align-items: center; gap: 12px; }
.hbars__name {
    font-size: 13.5px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbars__name:hover { color: var(--accent-text); text-decoration: underline; }
.hbars__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbars__bar {
    flex: 0 0 auto;
    height: 10px;
    min-width: 2px;
    background: var(--accent-600);
    border-radius: 0 4px 4px 0;
}
.hbars__val { font-size: 12.5px; color: var(--text-70); white-space: nowrap; }

/* The catalogue's status mix on the products card. An ordinal ramp on the
   accent -- darker the closer to published -- because the states are one
   workflow, not four identities; delisted stands outside the workflow and
   wears gray. The key beside it carries the counts, so color is never the
   only channel. */
.mix { margin-top: 14px; display: grid; gap: 8px; }
.mix__bar { display: flex; gap: 2px; height: 10px; }
.mix__seg { min-width: 2px; }
.mix__seg--draft { background: var(--accent-500); }
.mix__seg--listed { background: var(--accent-700); }
.mix__seg--published { background: var(--accent-900); }
.mix__seg--delisted { background: color-mix(in srgb, var(--text) 45%, var(--bg)); }
.mix__key {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--text-70);
}
.mix__key li { display: inline-flex; align-items: center; gap: 6px; }
.mix__key .mix__seg { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* Money and counts sit in columns that must line up down the table. This is
   the case tabular figures exist for -- unlike the stat tiles above, whose
   values stand alone and read loose with forced-width digits. */
.table td.num,
.table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* Underline tabs -- the admin dashboard's panels and the store's Apps /
   Asset packs split share this one strip.

   UNDERLINE TABS, not the .seg segmented control the window selector uses.
   Both would otherwise be identical strips of uppercase links sitting inches
   apart while doing unrelated jobs -- one filters the whole page, the other
   swaps the panel beneath it. The underline reads as "this belongs to what is
   below"; the filled segment reads as "this is a setting".

   Each tab is a real link to a query string, so there is no active-state
   scripting here: the server renders one panel and marks one tab. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 26px;
    border-bottom: 1px solid var(--divider);
}

.tabs a {
    display: inline-flex;
    align-items: center;
    /* Tighter than it looks: the brackets already bind the count to the label,
       so the gap only has to keep them from touching. */
    gap: 5px;
    padding: 14px 2px 12px;
    /* Pulls the tab's own rule onto the strip's border rather than under it,
       so the active tab sits ON the line instead of above a doubled one. */
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-70);
}

.tabs a:hover { color: var(--text); }

/* aria-current is the selected state -- the attribute a screen reader reads
   and the style are the same fact, so they cannot drift apart. */
.tabs a[aria-current] {
    color: var(--accent-text);
    border-bottom-color: var(--accent-600);
}

/* The row count. Tabular so a two-digit badge does not shift its label. */
.tabs__n {
    font-size: 12px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text-70);
}
.tabs a[aria-current] .tabs__n { color: var(--accent-text); }

.tabs__meta {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-text);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Reviews (plan/REVIEWS.md S9)
   --------------------------------------------------------------------------- */

/* Stars. The glyph inherits currentColor for its outline and fills with the
   accent, so one component works on a card, in a band and inside a table. */
.stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.stars__star { width: 18px; height: 18px; flex: 0 0 auto; }
.stars--sm .stars__star { width: 14px; height: 14px; }
.stars__outline { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.stars__fill { fill: var(--accent); stroke: none; }

/* The badge beside a product title. A link, because it scrolls to the section
   that explains the number. */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--band-text);
    text-decoration: none;
}
.rating-badge:hover { text-decoration: underline; }

.pkg__rating { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; }

.rev-summary {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--divider);
}
@media (max-width: 620px) { .rev-summary { grid-template-columns: 1fr; } }

.rev-summary__score { display: flex; flex-direction: column; gap: 6px; }
.rev-summary__score strong {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
}

/* The distribution. Each row is a filter link, so the whole row is the target
   rather than the number at its end. */
.rev-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rev-bars a {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;
}
.rev-bars a:hover { background: var(--accent-soft); }
.rev-bars a[aria-current] { background: var(--accent-soft); }
.rev-bars__n { font-size: 13px; color: var(--text-70); font-variant-numeric: tabular-nums; }
.rev-bars__track { height: 8px; background: var(--divider); border-radius: 999px; overflow: hidden; }
.rev-bars__fill { display: block; height: 100%; background: var(--accent); }
.rev-bars__count {
    font-size: 13px;
    color: var(--text-70);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rev-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 4px; }

.rev-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 26px; }
.rev { padding-bottom: 24px; border-bottom: 1px solid var(--divider); }
.rev:last-child { border-bottom: 0; padding-bottom: 0; }
.rev__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev__title { margin: 0; font-size: 19px; line-height: 1.25; }
.rev__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.rev__author { font-weight: 600; }
.rev__badge { display: inline-flex; align-items: center; gap: 5px; }
.rev__body { margin: 12px 0 0; line-height: 1.6; white-space: pre-line; }

.rev__photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rev__photos img {
    width: 116px;
    height: 116px;
    object-fit: cover;
    border: 1px solid var(--divider);
    display: block;
}

/* The publisher's reply, set apart so it does not read as another customer. */
.rev__reply {
    margin: 14px 0 0 0;
    padding: 12px 16px;
    background: var(--surface);
    border-left: 2px solid var(--accent);
}
.rev__reply p { margin: 6px 0 0; line-height: 1.55; }

.rev-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* The rating radios. The input is hidden from sight but NOT from the
   accessibility tree or the keyboard -- display:none would take it out of both,
   and this control has to be operable without a mouse. */
.rev-rate { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.rev-rate legend { padding: 0; margin-bottom: 8px; }
.rev-rate__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rev-rate__label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--divider);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
}
.rev-rate__input:checked + .rev-rate__label { border-color: var(--accent); background: var(--accent-soft); }
.rev-rate__input:focus-visible + .rev-rate__label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Review pager. Same shape as the admin tables' pager. */
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.pager a {
    min-width: 34px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--divider);
    text-decoration: none;
    color: inherit;
}
.pager a[aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

/* Moderation actions. A row that wraps rather than a toolbar, because the
   reject form carries a note field and is much wider than its buttons. */
.rev__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 14px; }
.rev__actions form { display: flex; align-items: center; gap: 8px; margin: 0; }
.rev__reject .input { width: min(320px, 60vw); }
.rev__reply-form { flex: 1 1 100%; }
.rev__reply-form summary { display: inline-flex; cursor: pointer; list-style: none; }
.rev__reply-form summary::-webkit-details-marker { display: none; }
.rev__reply-form form { display: block; margin-top: 10px; }
.rev__reply-form textarea { width: 100%; margin-bottom: 8px; }

/* The dashboard card's distribution: the same bars without the filter links,
   since nothing on a card is clickable except the card. */
.rev-bars--mini { margin-top: 14px; gap: 3px; }
.rev-bars--mini li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 26px; align-items: center; gap: 8px; }
.rev-bars--mini .rev-bars__track { height: 6px; }
.rev-bars--mini .rev-bars__n,
.rev-bars--mini .rev-bars__count { font-size: 12px; }

/* Privacy, Terms and Refunds. */
.legal { max-width: 76ch; }
.legal__date { margin: 0; font-size: 13px; }
.legal h2 { margin: 40px 0 0; font-size: 27px; }
.legal p { margin: 14px 0 0; line-height: 1.65; color: var(--text-70); }
.legal .legal__item { position: relative; margin-top: 8px; padding-left: 20px; }
.legal .legal__item::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 8px; height: 2px; background: var(--accent); }
.legal a { color: var(--accent-text); border-bottom: 1px solid currentColor; }

/* ---------------------------------------------------------------------------
   FAQ and Resources (plan/REVIEWS.md S11)
   --------------------------------------------------------------------------- */

.faq { display: grid; gap: 46px; }
.faq__group { display: grid; gap: 10px; }

/* Reading width comes from the COLUMN, not from a cap on the text. Two columns
   at width and one when narrow, so an answer fills its panel instead of hugging
   the left of an empty one. `align-items: start` keeps an open question from
   stretching its unopened neighbour. */
.faq__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 10px;
    align-items: start;
}

.faq__item { padding: 0; }
.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { flex: 0 0 auto; color: var(--accent); transition: transform 0.15s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__answer { padding: 0 22px 20px; }
.faq__answer p { margin: 0 0 10px; line-height: 1.65; color: var(--text-70); }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__ask { padding: 26px 22px; }
.faq__ask h2 { margin: 0 0 8px; font-size: 27px; }

.res-group { margin-bottom: 52px; }
.res-group__blurb { margin: 8px 0 26px; max-width: 62ch; }
.res-cards { gap: 24px; }

/* A resource card is a link that LEAVES the site, so its action row names the
   host rather than saying "open" -- where a click goes is worth knowing first. */
.res { padding: 22px; }
.res__title { font-size: 22px; margin-top: 6px; }
.res__author {
    margin: 6px 0 0;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-text);
}
.res__licence {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-70);
}
.res__licence svg { flex: 0 0 auto; margin-top: 2px; }
.res__go { margin-top: 18px; }
.res-submit { padding: 26px 22px; margin-top: 8px; }
.res-submit h2 { margin: 0 0 8px; font-size: 27px; }

/* Community links on a board's row in the device register. Placed explicitly,
   like every other child of .dev-row: without it the block auto-places into the
   narrow index track and wraps its label a word per line. The row gap is the
   only separation it needs. */
.dev-row__made { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Honeypot. Off-screen rather than display:none -- some bots skip hidden
   inputs, and this one is meant to be filled. aria-hidden and tabindex="-1"
   on the markup keep it away from anyone using a keyboard or a screen reader. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}