/* ==========================================================================
   bto-ring-strip.css — the service pages' work strip (BTO-0008, v2 of 2026-10-14)
   Pairs with assets/js/bto-ring-strip.js. Markup: src/service-template.mjs svcStrip().
   No dependency. Loaded only by a page that names "bto-ring-strip" in its panels, BEFORE site.css: a rule
   here that meets a site rule is written one step more specific (.svx …).

   TWO STATES OF ONE STRIP.
     .svx          THE CSS STRIP (v1, kept as the fallback, now flat): the films in groups along one band,
                   a native sideways scroller with two round buttons and two ends. What a visitor gets under
                   reduced motion, without WebGL, after a lost WebGL context, and with scripts off.
     .svx.is-gl    THE RING (the spec: the vault's creative_director_kerimov_strip_spec.md): the script draws
                   the films on a canvas that fills the band (a drum of pictures around a turning camera,
                   endless, bending with speed). Since 2026-10-15 the section is a stage, the band at its
                   middle, and the canvas covers all of it: a grid floor under the films (the vault's
                   creative_director_ring_grid_texture.md, round 4). The film list stays in the page for
                   screen readers, moved far off to the left, where site.js never sees it on screen and so
                   never plays it twice.

   SIZES. The CSS strip: a card's height follows its shape from --svx-h (a 9:16 film's height),
   k = (0.5625/ar)^0.42, worked out in svcStrip(); --svx-h holds a 9:16 film at 132px wide or more (242px
   on a phone, 136px wide). The ring sizes itself in the script from the band's width (spec 4.2 and 5.1).

   THE WORDS (the Creative Director's spec of 2026-10-15, the vault's creative_director_strip_depth_receive_spec.md,
   section 5): no plate on a film while the script runs (.svx.is-js hides the tags as the site hides any words
   kept for screen readers); under the band, the details panel (.svd): the round buttons at the container's
   edges, between them a centred caption for the group in focus, then the page's credit line. In the ring a
   thin spark needle marks the band's middle. With scripts off the tags show on the flat strip, the panel's row
   stays hidden and the credit line stands under the band. */

.svx {
  position: relative;          /* holds the visually hidden heading and the live region (site.css .sr is absolutely placed) */
  --svx-h: 242px;                          /* a 9:16 film's height */
  --svx-gap: clamp(56px, 10vw, 176px);     /* between groups */
  --svx-in: 12px;                          /* between the cards of a group */
  --svx-amp: 10px;                         /* how far a group sits above or below the band's centre */
  --svx-edge: max(var(--margin), 6vw);     /* the band's first and last card from the window's sides */
  padding-block: 0;
  color: var(--text);
}
/* after a light section (Brand films & ads: the bento) the pine band needs the light rhythm above it */
:not(.sv--field, .band--field, .theme-navy) + .svx { padding-top: var(--sv-pad, 64px); }
@media (min-width: 48rem) { .svx { --svx-h: 270px; --svx-amp: 14px; } }
@media (min-width: 64rem) { .svx { --svx-in: 16px; } }
@media (min-width: 80rem) { .svx { --svx-h: 280px; } }

/* ---------- the CSS strip: a native sideways scroller ----------
   Touch, a trackpad's sideways swipe, shift + wheel and the arrow keys (once it has focus) move it with no
   script at all. It never scrolls up or down, so a plain wheel over it scrolls the page. The padding above
   and below is the room a card needs: its group's swing and its own lift (1.25 x --svx-amp) and 6px for its
   tilt; below, 19px more for the tag hanging under it. */
.svx__track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;          /* a swipe past the end never turns into "back" */
  scrollbar-width: none;
  --svx-reach: calc(var(--svx-amp) * 1.25 + 6px);
  padding-block: var(--svx-reach) calc(var(--svx-reach) + 19px);
  outline: none;
}
.svx__track::-webkit-scrollbar { display: none; }
.svx__track:focus-visible { box-shadow: inset 0 0 0 2px var(--spark); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .svx__track { cursor: grab; } }
.svx.is-dragging .svx__track { cursor: grabbing; user-select: none; }
.svx__track img { -webkit-user-drag: none; user-select: none; }

.svx__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--svx-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--svx-edge);              /* on the list, not the scroller, so the end padding scrolls */
  list-style: none;
}
/* one band height on every service page from 768 up, whatever shapes a page's films are; on a phone the
   band is as tall as its tallest card, so a page of wide films keeps a short strip */
@media (min-width: 48rem) { .svx__list { min-height: var(--svx-h); } }
.svx__group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--svx-in);
  translate: 0 calc(var(--gy, 0) * var(--svx-amp));
}

/* a card: one film at its own shape, with its still tilt and lift. Flat: the CSS strip never turns a card. */
.svx__card {
  position: relative;
  flex: none;
  translate: 0 calc(var(--dy, 0) * var(--svx-amp));
  rotate: var(--rz, 0deg);
}
.svx .svx__card .film { width: calc(var(--svx-h) * var(--k, 1) * var(--ar)); }
@media (max-width: 47.99rem) { .svx .svx__card .film { width: calc(var(--svx-h) * var(--kp, var(--k, 1)) * var(--ar)); } }
.svx .svx__card .film__frame { box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6); }

/* the tag: the group's kind and a cleared client's name, on its last card's lower corner. Shown only with scripts
   off; while the script runs it is words for screen readers (below) and the details panel carries them */
.svx__tag {
  position: absolute;
  right: -10px;
  bottom: -13px;
  z-index: 2;
  rotate: var(--tz, 0deg);
  white-space: nowrap;                     /* one line; a tag longer than its card reaches left past it */
  padding: 8px 12px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 84%, var(--cloud)) 0%, var(--leaf) 100%);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(244, 247, 251, 0.12);
  color: var(--cloud);
  font-size: 0.6875rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
@media (min-width: 64rem) { .svx__tag { font-size: 0.75rem; padding: 9px 14px 8px; } }
/* while the script runs: no plate on any film (the site's .sr, so screen readers still read the list's tags), and
   the CSS strip no longer leaves room under its cards for a tag's hang */
.svx.is-js .svx__tag { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; rotate: none; box-shadow: none; background: none; }
.svx.is-js .svx__track { padding-bottom: var(--svx-reach); }

/* ---------- the details panel (spec 5.2-5.3): the words for the group in focus, under the band ----------
   One row: the back button at the container's left edge, the caption centred, the forward button at its right
   edge, both vertically centred on the caption. The caption: the index (13/20, tabular, 60%), the title (28/34;
   24/30 from 768; 20/26 on a phone), one centred row of fields (an 11/16 spaced capital label at 56%, its value
   15/22 at 92%, 28px apart; 18 and wrapping on a phone), an optional one-sentence line (16/24 at 72%); 6px between
   them. The page's credit line under it all, word for word. 20px from the band to the caption. */
.svd { margin-top: 20px; }
.svd__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; }
.svd__row[hidden] { display: none; }
.svd__row > .svx__btn:first-child { justify-self: start; }
.svd__row > .svx__btn:last-child { justify-self: end; }
.svd__cap { display: grid; justify-items: center; align-content: center; row-gap: 6px; min-width: 0; text-align: center; transition: opacity 160ms linear, translate 160ms ease-out; }
.svd__cap.is-out { opacity: 0; translate: 0 4px; transition-duration: 90ms; }
.svd__idx { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: rgba(244, 247, 251, 0.6); }
.svd__title { margin: 0; font-size: 1.25rem; line-height: 1.625rem; font-weight: 400; letter-spacing: 0.1px; color: var(--cloud); text-wrap: balance; }
.svd__fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; }
.svd__fields:empty { display: none; }
.svd__fields > div { display: flex; align-items: baseline; gap: 8px; }
.svd__fields dt { font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 247, 251, 0.56); }
.svd__fields dd { margin: 0; font-size: 0.9375rem; line-height: 1.375rem; color: rgba(244, 247, 251, 0.92); }
.svd__note { max-width: 56ch; margin: 0; font-size: 1rem; line-height: 1.5rem; color: rgba(244, 247, 251, 0.72); text-wrap: pretty; }
.svd__note[hidden] { display: none; }
/* the page's credit line, word for word: 14/20 at 64%, at most 62ch, centred, 20px under the caption (13/19 on a phone) */
.svx .svx__line { max-width: 62ch; margin: 20px auto 0; text-align: center; font-size: 0.8125rem; line-height: 1.1875rem; color: rgba(244, 247, 251, 0.64); text-wrap: pretty; }
.svd__row[hidden] + .svx__line { margin-top: 16px; }
@media (min-width: 48rem) {
  .svd__row { grid-template-columns: 48px minmax(0, 1fr) 48px; column-gap: 24px; }
  .svd .svx__btn { width: 48px; height: 48px; }
  .svd__title { font-size: 1.5rem; line-height: 1.875rem; }
  .svd__fields { gap: 6px 28px; }
  .svx .svx__line { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 64rem) { .svd__title { font-size: 1.75rem; line-height: 2.125rem; } }
@media (prefers-reduced-motion: reduce) { .svd__cap { transition: none; } }
.svx.is-static .svx__btn { visibility: hidden; }  /* the CSS strip fits the window: nothing to move */
.svx .svx__btn { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.svx .svx__btn:hover:not([aria-disabled="true"]) { background: #FFFFFF; }
.svx .svx__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.svx .svx__btn .ic { width: 16px; height: 16px; }
/* the needle: 1 x 16px of spark at the middle of the band's foot, the ring's "this one" (WebGL only) */
.svx__needle { display: none; }
.svx.is-gl .svx__needle { display: block; position: absolute; left: 50%; bottom: 0; z-index: 2; width: 1px; height: 16px; background: var(--spark); pointer-events: none; }

/* ---------- the ring: the canvas fills the stage ----------
   The band's height is the script's (spec 4.2: 412-440px on a desktop, 400 on a tablet, 340 on a phone). The track
   is no scroller (overflow visible, not auto), so nothing (a screen reader's cursor included) can scroll the canvas
   out of place. Vertical touch moves stay the page's (touch-action: pan-y); sideways ones are the strip's.

   THE STAGE (the Creative Director's ring grid spec of 2026-10-15, 3.1, kept by round 4): the section becomes a stage
   with the band at its middle and the floor under it. The script sets --svx-stage (SM px of room above and below the
   band) and --svx-stage-foot (SM - 20 - P, under the details panel) on the section. The canvas reaches SM past the band
   at the top and the foot, so it covers the whole section; the panel's words and buttons sit above it, riding on the
   floor 20px under the band as before. Every rule here is gated on .is-gl: the CSS strip (reduced motion, no WebGL, a
   lost context) keeps today's height, and a missing property reads as 0 (today's layout). After a light section
   (Brand) the stage's room above replaces the light rhythm's padding: the void is that room. */
.svx.is-gl { padding-top: var(--svx-stage, 0px); padding-bottom: var(--svx-stage-foot, 0px); }
.svx.is-gl .svx__track { overflow: visible; padding: 0; border-radius: 0; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.svx.is-gl .svd { position: relative; z-index: 2; }
.svx.is-gl .svx__track:focus-visible { box-shadow: none; }
/* the focus ring sits over the canvas: 2px of spark inside a 2px pine edge (spec 4.10) */
.svx.is-gl .svx__track:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--spark), inset 0 0 0 4px var(--pine); }
/* the film list, read by screen readers, held far off the left edge: off every screen, so site.js plays none of it */
.svx.is-gl .svx__list { position: absolute; top: 0; left: -10000px; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; }
.svx__canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.svx.is-gl .svx__canvas { inset: auto 0; top: calc(-1 * var(--svx-stage, 0px)); height: calc(100% + 2 * var(--svx-stage, 0px)); }
.svx.is-gl.is-dragging .svx__canvas { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .svx.is-gl .svx__canvas { cursor: grab; } .svx.is-gl.is-dragging .svx__canvas { cursor: grabbing; } }

/* ---------- THE INFO BLOCK (Ash, 2026-10-25: the caption of a service page's slider "modelled on the HOME page's deck slider info ... not that much
   information, but pretty decent") ----------
   Modelled on the Home deck's side panel (site.css .wstack__note, .wstack__facts): the title, a hairline, the slide's one short line, then the facts as
   quiet rows (a muted label, the value in ink, a hairline under each). Under the stage, between the two round buttons, in a block at most 520px wide,
   left-aligned in itself. The title keeps the caption's own sizes (28/34, 24/30, 20/26). The index is small, at the title's far end, out of the way. At most two facts (the role, then the client) are the
   script's (data-info, bto-ring-strip.js); nothing here adds a word. No Format since 2026-10-27. Only a strip with `info` (svcStrip) carries .svx--info. */
.svx--info .svd__row { max-width: 640px; margin-inline: auto; }
.svx--info .svd__cap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title idx" "note note" "fields fields"; justify-items: stretch; align-content: start;
  column-gap: 0; row-gap: 0; width: 100%; max-width: 520px; margin-inline: auto; text-align: left; }
.svx--info .svd__title { grid-area: title; padding-bottom: 10px; border-bottom: 1px solid var(--on-ink-line); text-wrap: pretty; }   /* the caption's own sizes (28/34, 24/30, 20/26: P09) */
.svx--info .svd__idx { grid-area: idx; align-self: stretch; display: flex; align-items: flex-end; padding: 0 0 10px 16px; border-bottom: 1px solid var(--on-ink-line); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.04em; color: rgba(244, 247, 251, 0.5); }
.svx--info .svd__note { grid-area: note; max-width: 46ch; margin: 10px 0 0; font-size: 1rem; line-height: 1.5rem; }
.svx--info .svd__fields { grid-area: fields; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin-top: 4px; }
.svx--info .svd__fields > div { display: contents; }
.svx--info .svd__fields dt, .svx--info .svd__fields dd { padding: 7px 0; border-bottom: 1px solid var(--on-ink-line); font-size: 0.9375rem; line-height: 1.375rem; }
.svx--info .svd__fields dt { padding-right: 24px; letter-spacing: 0; text-transform: none; color: rgba(244, 247, 251, 0.56); }
.svx--info .svd__fields dd { color: var(--cloud); }