/* ==========================================================================
   Cyber City · pages v0.1 · 2026-10-02 (M3.1, first live version)
   What the first live pages need beyond the system's classes: the layout of the front page's first screen, the
   "on the way" page, the product grid and the product page. Load order: tokens.css, fonts.css, pixel-kit.css,
   foundations.css, motifs.css, motion.css, shell.css, then this file.

   Rules of this file (the same as shell.css; tools/check-pages.mjs reads them as a lint)
   · Every class starts with ecc-. States are the system's is-* classes.
   · Every colour, font, radius, duration and space is a token. Sizes the scale does not have are built from it with
     calc(); the only written lengths are hairlines (1px, 2px), the breakpoints, and two container widths in rem.
   · No letter-spacing, no font-size of its own: type comes from the system's helpers (.ecc-display, .ecc-h1,
     .ecc-h3, .ecc-lead, .ecc-mono) and the type tokens.
   · It sets two of the system's hooks on single elements, the way tokens.css means them to be used:
     --ecc-floor (where a product stands on its stage) and --ecc-icon-spark (the lit spark of a department icon).
   · Movement is the system's (the power-on of motion.css, the card lift). Nothing here animates.
   · Nothing here picks a theme: Day is the default, Night is <html data-theme="night">.
   · Mobile first: the phone layout is the base, 761px and 1181px add the wider ones (the header's own steps).

   Contents
   0 shared pieces · 1 front page: the first screen · 2 the "on the way" page · 3 product lists · 4 product page (product.css) ·
   5 search results · 6 print
   ========================================================================== */

/* =========================================================== 0 · SHARED PIECES */
/* the modules of a page sit one gap apart, like every module of the shell */
main > * + * { margin-top: var(--ecc-gap); }
.ecc-nb { white-space: nowrap; } /* two words that stay together: "Lease-to-own", "1–2 days" */

/* the store's facts as a list: the address opens directions, the phone calls (the look of the footer's list) */
.ecc-facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; color: var(--ecc-ink-2); }
.ecc-facts li { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); }
.ecc-facts .ecc-icon { color: var(--ecc-ink); }
.ecc-facts a {
  display: inline-flex; align-items: center; min-width: var(--ecc-hit); min-height: var(--ecc-hit); border-radius: var(--ecc-r-voxel);
  color: var(--ecc-ink); overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--ecc-s-1);
}
@media (hover: hover) and (pointer: fine) {
  .ecc-facts a:hover { text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; }
}

/* the departments as a list of links with their icons (the "on the way" page) */
.ecc-deptlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-deptlist__link {
  display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-s-7); padding: var(--ecc-s-1) var(--ecc-s-2) var(--ecc-s-1) 0;
  border-radius: var(--ecc-r-sm); color: var(--ecc-ink); text-decoration: none; overflow-wrap: break-word;
}
.ecc-deptlist__link:active { background: var(--ecc-wash-strong); --ecc-icon-spark: var(--ecc-spark); }
.ecc-deptlist__link:focus-visible { --ecc-icon-spark: var(--ecc-spark); }
@media (hover: hover) and (pointer: fine) {
  .ecc-deptlist__link:hover { background: var(--ecc-wash); --ecc-icon-spark: var(--ecc-spark); }
}
@media (min-width: 761px) { .ecc-deptlist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .ecc-deptlist { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ============================================== 1 · FRONT PAGE: THE FIRST SCREEN */
/* The approved first screen (identity/system/motion.html): the hero panel, the first product with its two answers,
   two more products, the departments, and under them the trust strip. The system's own classes draw the parts
   (.ecc-stage, .ecc-line, .ecc-ticker, .ecc-led, .ecc-chrome-text, .ecc-boot); this block is the grid they sit in.
   Phone: two columns. 761px: six. 1181px: twelve columns and two rows, as tall as the window leaves room for. */
.ecc-home__hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-home__kicker, .ecc-home__label, .ecc-ptile__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }

/* the hero panel: dark in Day and in Night (.ecc-ctx-panel), with the quiet dot grid */
.ecc-home__head { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; padding: var(--ecc-s-5); }
.ecc-home__title { margin: auto 0 0; padding-top: var(--ecc-s-6); }
.ecc-home__support { max-width: 30em; margin-top: var(--ecc-s-3); }
.ecc-home__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-3); margin: var(--ecc-s-5) 0; }
.ecc-home__ctas .ecc-btn { flex: 1 1 auto; }
.ecc-home__head .ecc-ticker { flex: none; margin-top: auto; }

/* a product tile: its stage, then its name */
.ecc-ptile { display: flex; flex-direction: column; min-width: 0; }
.ecc-ptile__stage { flex: 1; min-height: calc(var(--ecc-s-9) + var(--ecc-s-8)); margin: var(--ecc-gap) var(--ecc-gap) 0; }
.ecc-ptile__label { position: absolute; left: var(--ecc-s-3); top: var(--ecc-s-3); z-index: var(--ecc-z-raised); }
.ecc-ptile__body { display: flex; flex-direction: column; padding: var(--ecc-s-1) var(--ecc-s-3) var(--ecc-s-2); }
.ecc-ptile__name { font-size: var(--ecc-t-body); text-wrap: balance; }
.ecc-ptile__name a { display: inline-flex; align-items: center; min-height: var(--ecc-hit); border-radius: var(--ecc-r-voxel); color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .ecc-ptile__name a:hover { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: var(--ecc-s-1); }
}
.ecc-ptile--wide, .ecc-ptile--small { grid-column: 2; }
.ecc-ptile--wide .ecc-stage__box, .ecc-ptile--small .ecc-stage__box { top: 30%; } /* the label keeps clear of the photo */
/* the white bike stands on the logo's chrome, not on the white studio light */
.ecc-ptile--small .ecc-ptile__stage { --ecc-floor: 12%; }
.ecc-ptile--small .ecc-ptile__stage::before { background: var(--ecc-chrome); }

/* The first product and its two answers (the answer line: motion.css, motion.md 14.13). Three rows: the stage, the
   answers, the name. The tile is a size container: where it is 285px wide or more the answers move up into the
   stage's own cell and stand beside the product, each at the end of its line (motion.js draws the lines). Narrower
   (a phone), they stay in their row under the product as two plain lines with their pads, and no line is drawn. */
.ecc-ptile--first {
  grid-column: 1; grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: calc(var(--ecc-s-9) * 5 + var(--ecc-s-6)); container: ecc-ptile / inline-size;
}
.ecc-ptile--first .ecc-ptile__stage { grid-area: 1 / 1; }
.ecc-ptile--first .ecc-ptile__body { grid-area: 3 / 1; }
.ecc-ptile__answers { grid-area: 2 / 1; display: grid; margin: 0; padding: var(--ecc-s-1) var(--ecc-s-3) 0; list-style: none; }
.ecc-ptile__answers .ecc-line__answer { column-gap: var(--ecc-s-2); font-size: var(--ecc-t-micro); } /* the sentence is 1.25em of it: 15px */
.ecc-ptile__answers .ecc-spark { display: none; } /* under the product: the pad, not the spark */
.ecc-ptile__answers .ecc-pad { display: inline-block; }
@container ecc-ptile (min-width: 17.8rem) {
  /* the product stands in the left half, under its own light; its two answers take the right half */
  .ecc-ptile--first .ecc-stage__box { left: 1%; right: 55%; }
  .ecc-ptile--first .ecc-ptile__stage::before, .ecc-ptile--first .ecc-ptile__stage::after { left: -54%; } /* the light keeps the product at its centre */
  .ecc-ptile--first .ecc-stage__floor { left: -7%; right: 47%; }
  .ecc-ptile--first .ecc-stage__pool { left: -19%; right: 35%; }
  .ecc-ptile--first .ecc-floorline { left: 3%; }
  .ecc-ptile__answers { grid-area: 1 / 1; position: relative; z-index: var(--ecc-z-raised); display: block; margin: var(--ecc-gap) var(--ecc-gap) 0; padding: 0; pointer-events: none; }
  .ecc-ptile__answers li { position: absolute; left: 52%; right: var(--ecc-s-2); pointer-events: auto; }
  /* each answer sits a little off the level of its pad (31.3% and 53% of the stage), so its line makes one 45° turn */
  .ecc-ptile__answers li:nth-child(1) { top: calc(31.3% - var(--ecc-s-6) - var(--ecc-s-2)); }
  .ecc-ptile__answers li:nth-child(2) { top: calc(53% - var(--ecc-s-1)); }
  .ecc-ptile__answers .ecc-line__answer { align-content: start; padding: var(--ecc-s-3) 0; }
  .ecc-ptile__answers .ecc-spark { display: inline-block; }
  .ecc-ptile__answers .ecc-pad { display: none; }
}

/* the departments: a graphite panel (.ecc-ctx-panel). Each name has its icon where the panel has room for it, and
   the hollow pad of the approved screen where it has not (the panel is two columns of twelve on a laptop). */
.ecc-home__index { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--ecc-s-2); padding: var(--ecc-s-3) var(--ecc-s-3) var(--ecc-s-2); container: ecc-index / inline-size; }
.ecc-home__label { padding: var(--ecc-s-1) var(--ecc-s-1) 0; }
.ecc-home__depts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-home__depts a {
  display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-1);
  border-radius: var(--ecc-r-voxel); color: var(--ecc-ink); font-weight: var(--ecc-fw-medium); text-decoration: none; white-space: nowrap;
}
.ecc-home__depts a:active { background: var(--ecc-wash-strong); }
.ecc-home__depts a:focus-visible { --ecc-icon-spark: var(--ecc-spark); }
@media (hover: hover) and (pointer: fine) {
  .ecc-home__depts a:hover { background: var(--ecc-wash); --ecc-icon-spark: var(--ecc-spark); }
}
.ecc-home__depts .ecc-pad { background: transparent; }
.ecc-home__depts .ecc-icon { display: none; }
@container ecc-index (min-width: 12.5rem) {
  .ecc-home__depts .ecc-icon { display: inline-block; }
  .ecc-home__depts .ecc-pad { display: none; }
}

/* the trust strip: four facts of the store behind their pads */
.ecc-home__trust { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--ecc-gap) 0 0; padding: 0; list-style: none; }
.ecc-home__trust li {
  display: flex; align-items: center; gap: var(--ecc-s-3); min-height: calc(var(--ecc-s-7) + var(--ecc-s-3)); padding: var(--ecc-s-2) var(--ecc-s-4);
  border-top: 1px solid var(--ecc-line); font-weight: var(--ecc-fw-medium); line-height: 1.3; text-wrap: balance;
}
.ecc-home__trust li:first-child { border-top: 0; }

@media (min-width: 761px) {
  .ecc-home__hero { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ecc-home__head { min-height: calc(var(--ecc-s-9) * 4.5); padding: var(--ecc-s-5) var(--ecc-s-6); }
  .ecc-home__ctas .ecc-btn { flex: none; }
  .ecc-ptile__body { padding: var(--ecc-s-1) var(--ecc-s-4) var(--ecc-s-2); }
  .ecc-ptile__name { font-size: var(--ecc-t-h3); }
  .ecc-ptile--first { grid-column: 1 / span 3; }
  .ecc-ptile--wide, .ecc-ptile--small { grid-column: 4 / span 3; min-height: calc(var(--ecc-s-9) * 2 + var(--ecc-s-8)); }
  /* the drone: its name beside its stage */
  .ecc-ptile--wide { flex-direction: row-reverse; }
  .ecc-ptile--wide .ecc-ptile__stage { margin: var(--ecc-gap) var(--ecc-gap) var(--ecc-gap) 0; }
  .ecc-ptile--wide .ecc-ptile__body { flex: 0 0 42%; justify-content: flex-end; padding: var(--ecc-s-4) var(--ecc-s-2) var(--ecc-s-2) var(--ecc-s-5); }
  .ecc-ptile--wide .ecc-stage__box { top: 17%; }
  .ecc-ptile--small .ecc-stage__box { top: 26%; }
  .ecc-home__depts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecc-home__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-home__trust li { padding-inline: var(--ecc-s-5); }
  .ecc-home__trust li:nth-child(2) { border-top: 0; }
  .ecc-home__trust li:nth-child(even) { border-left: 1px solid var(--ecc-line); }
}
@media (min-width: 1181px) {
  /* the first screen fits the window: the notice, the header and the trust strip take about 224px of it */
  .ecc-home__hero {
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.38fr) minmax(0, 1fr);
    min-height: clamp(calc(var(--ecc-s-9) * 4.5), calc(100svh - var(--ecc-s-9) * 2 - var(--ecc-s-6)), calc(var(--ecc-s-9) * 6));
  }
  .ecc-home__head { grid-column: 1 / span 5; grid-row: 1 / span 2; min-height: 0; }
  .ecc-ptile--first { grid-column: 6 / span 3; grid-row: 1 / span 2; min-height: 0; }
  .ecc-ptile--wide { grid-column: 9 / span 4; grid-row: 1; min-height: 0; }
  .ecc-ptile--small { grid-column: 9 / span 2; grid-row: 2; min-height: 0; }
  .ecc-ptile--small .ecc-ptile__name { font-size: var(--ecc-t-body); }
  .ecc-home__index { grid-column: 11 / span 2; grid-row: 2; }
  .ecc-home__depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-home__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecc-home__trust li { border-top: 0; border-left: 1px solid var(--ecc-line); }
  .ecc-home__trust li:first-child { border-left: 0; }
}

/* ===================================================== 2 · THE "ON THE WAY" PAGE */
/* What a visitor gets on every page that is not built yet, and at an address that has no page: the page's own name
   as a small label, one headline, one calm sentence, two actions; the store's facts on a dark panel; the departments. */
.ecc-otw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-otw__main, .ecc-otw__store, .ecc-otw__depts { grid-column: 1 / -1; }
.ecc-otw__main { display: grid; align-content: center; gap: var(--ecc-s-4); min-height: calc(var(--ecc-s-9) * 3); }
.ecc-otw__store { display: grid; align-content: start; gap: var(--ecc-s-3); }
.ecc-otw__depts { display: grid; gap: var(--ecc-s-3); }
.ecc-otw__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); overflow-wrap: anywhere; }
.ecc-otw__title { text-wrap: balance; }
.ecc-otw__lead { max-width: 30em; }
.ecc-otw__actions { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-3); margin-top: var(--ecc-s-2); }
.ecc-otw__actions .ecc-btn { flex: 1 1 auto; }
@media (min-width: 761px) { .ecc-otw__actions .ecc-btn { flex: none; } }
@media (min-width: 1181px) {
  .ecc-otw__main { grid-column: span 7; }
  .ecc-otw__store { grid-column: span 5; align-content: center; }
}

/* ============================================================ 3 · PRODUCT LISTS */
/* The shop, a category, a brand, a tag, a product search: breadcrumb, the name, a count, the sub-categories as chips,
   a grid of the system's card, the pager. Two cards to a row on a phone, three from 761px, four from 1181px. */
.ecc-crumbsbar { min-width: 0; }
.ecc-arc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ecc-s-2) var(--ecc-s-5); }
.ecc-arc__title { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.ecc-arc__count { color: var(--ecc-ink-2); }
.ecc-arc__subs { flex: 1 1 100%; min-width: 0; }
.ecc-arc__chips { margin: var(--ecc-s-2) 0 0; padding: 0; list-style: none; }

.ecc-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); margin: var(--ecc-gap) 0 0; padding: 0; list-style: none; }
.ecc-pgrid__item { display: flex; min-width: 0; }
.ecc-pgrid__item > .ecc-card { flex: 1; }
@media (min-width: 761px) { .ecc-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .ecc-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The card is the system's (.ecc-card). Here: the whole card is one link, and the photo stands on the Day stage in
   both themes (.ecc-stage--day), because the catalogue photos have white backgrounds. multiply lets a white
   background sink into the studio light, so a photo with a background and a cut-out look the same
   (tools/check-pages.mjs reads the pixels at the corner of a white photo). */
.ecc-card--link { position: relative; }
.ecc-card--link .ecc-card__name { position: static; } /* the name's link stretches over the card, not over the name */
.ecc-card--link .ecc-card__name a:focus-visible { outline: none; }
.ecc-card--link .ecc-card__name a:focus-visible::after { border-radius: var(--ecc-r); outline: var(--ecc-focus-ring); outline-offset: calc(var(--ecc-focus-offset) * -1); }
.ecc-card__stage { margin: var(--ecc-gap) var(--ecc-gap) 0; aspect-ratio: 1 / 1; }
/* multiply is on the box, not on the photo: the box is a layer of its own (the system gives it a z-index), and a
   photo inside it would blend with nothing. The box blends with the studio light of the stage under it. */
.ecc-card__stage .ecc-stage__box { left: 8%; right: 8%; top: 8%; bottom: 8%; mix-blend-mode: multiply; }
/* The first screen's tiles turn through their products (theme 0.12.0, home.js): the next product fades in over the
   last; the answer line, drawn for the first product, steps aside while another one shows. */
.ecc-stage__box > .ecc-rot__next { position: absolute; inset: 0; z-index: var(--ecc-z-raised); opacity: 0; transition: opacity var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-stage__box > .ecc-rot__next.is-in { opacity: 1; }
.ecc-stage__box > .ecc-stage__img.is-leaving { opacity: 0; transition: opacity var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-ptile.is-away :is(.ecc-line__svg, .ecc-line__hot) { opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
/* A studio picture (.ecc-scene, a whole scene with its own background) fills any card's stage edge to edge, keeps a
   square picture's head in view, and does not blend with the studio light (Rayan, 4 Oct 2026). The product page has
   its own rule (product.css), for its gallery's change of photo. */
.ecc-stage__box:not(.ecc-pd__box):has(> img.ecc-scene) { inset: 0; mix-blend-mode: normal; }
.ecc-stage__box:not(.ecc-pd__box) > img.ecc-scene { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 36%; filter: none; }
.ecc-stage:has(> .ecc-stage__box > img.ecc-scene) > :is(.ecc-floorline, .ecc-stage__floor, .ecc-stage__pool) { opacity: 0; }
.ecc-card__photo { object-position: 50% 50%; }
/* makers' white is often 245 to 253, not 255: under multiply its edge shows as a faint box. A 4% lift turns that near-white
   into white so the photo melts into the stage (the same lift is on the category thumbs and the board) · added in v0.6.3 */
.ecc-card__photo { filter: brightness(1.04); } /* the product page has the same lift (product.css) */
.ecc-card--link .ecc-card__body { gap: var(--ecc-s-2); padding: var(--ecc-s-3) var(--ecc-s-3) var(--ecc-s-4); }
.ecc-card--link .ecc-card__name { font-size: var(--ecc-t-body); }
.ecc-card__cat { display: flex; align-items: center; gap: var(--ecc-s-2); min-width: 0; margin: 0; color: var(--ecc-ink-2); overflow-wrap: anywhere; }
.ecc-card__cat .ecc-pip { background: var(--ecc-control-line); } /* in a grid the pip is neutral: lime is for the chosen one */
@media (min-width: 761px) {
  .ecc-card--link .ecc-card__body { padding: var(--ecc-s-4) var(--ecc-s-5) var(--ecc-s-5); }
  .ecc-card--link .ecc-card__name { font-size: var(--ecc-t-h3); }
}

.ecc-pagerbar { display: flex; justify-content: center; padding: var(--ecc-s-4) 0 0; }
@media (max-width: 480px) { .ecc-pager__far { display: none; } } /* a phone keeps the row to one line: Previous, three pages, Next */

/* ============================================================= 4 · PRODUCT PAGE */
/* The product page has its own sheet since v0.9.0: product.css, loaded on a product page only (inc/product.php). */

/* =========================================================== 5 · SEARCH RESULTS */
/* a search that is not a product search: a plain list of titles, each under the kind of thing it is */
.ecc-results { margin: var(--ecc-gap) 0 0; padding: var(--ecc-s-2) var(--ecc-s-5); list-style: none; }
.ecc-results li + li { border-top: 1px solid var(--ecc-line); }
.ecc-results__link { display: grid; align-content: center; gap: var(--ecc-s-1); min-height: var(--ecc-s-8); padding: var(--ecc-s-3) 0; color: var(--ecc-ink); text-decoration: none; overflow-wrap: anywhere; }
.ecc-results__kind { color: var(--ecc-ink-2); }
.ecc-results__name { font-weight: var(--ecc-fw-strong); }
@media (hover: hover) and (pointer: fine) {
  .ecc-results__link:hover .ecc-results__name { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: var(--ecc-s-1); }
}

/* ================================================================== 6 · PRINT */
/* a printed page keeps the words and the photos and drops the controls */
@media print {
  .ecc-ticker, .ecc-home__ctas, .ecc-otw__actions, .ecc-pagerbar { display: none !important; }
}

/* a product whose photos are held back (a supplier sticker printed into them): the stage says so */
.ecc-nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--ecc-on-chrome); text-align: center; }

/* ---- a question and its answer ------------------------------------------------------------------------------
   Two voices, no third font: the question speaks in the strong voice; its answer sits on the answer line (a
   hairline with a lime pad at its head), a step in, in full ink. An open question keeps a lime pip, so the eye
   finds which answer belongs to which question. */
.ecc-acc--qa[open] > summary::before { content: ""; flex: none; order: -1; width: var(--ecc-s-2); height: var(--ecc-s-2); margin-right: calc(var(--ecc-s-2) * -1); border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.ecc-acc--qa > summary { justify-content: flex-start; }
.ecc-acc--qa > summary::after { margin-left: auto; }
.ecc-acc--qa > .ecc-acc__body { position: relative; margin: 0 0 var(--ecc-s-4) var(--ecc-s-1); padding: var(--ecc-s-1) 0 var(--ecc-s-1) var(--ecc-s-5); border-left: 2px solid var(--ecc-line-strong); color: var(--ecc-ink); }
.ecc-acc--qa > .ecc-acc__body::before { content: ""; position: absolute; top: 0; left: calc(var(--ecc-s-1) * -1); transform: translateX(-1px); width: var(--ecc-s-2); height: var(--ecc-s-2); border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
/* The motion switch reaches the sign of a question too: plus becomes minus at once. */
html[data-ecc-motion="paused"] .ecc-acc > summary::after { transition: none; }