/* ══ CliB Agency — the surface system ═══════════════════════════════════════
   One file, both pages. It was written when index.html carried its own inline
   <style> and styles.css served contact.html alone: the answer to that split
   was not to copy the system into both, but to put it somewhere both of them
   link. That split is gone since 2026-08-13 — styles.css is now the single
   source for both pages — and this file keeps its job either way: the surface
   system lives here and nowhere else. It is loaded FIRST in both documents,
   so a page stylesheet can still set an element's padding, its radius and its
   layout. What a page stylesheet may no longer set is an element's FILL, its
   EDGE or its SHADOW. Those live here and only here.

   Brief: Base-Knowledge/Agency-Website/Briefs/brief-surfaces-and-shadows.md
   Standard: design-rules.md — §1 (shadows), §2 (hover), §4 (radius), §5
   (surfaces). This file changes §1 and §5; see §7 of the brief and the report.

   ── The idea ──────────────────────────────────────────────────────────────
   The site had seventeen fills at card level. It has one, at three densities.
   The reference is the header at .scrolled — rgba(10,8,20,.72) behind
   blur(14px) saturate(140%) with a 1px light edge. Boris named that panel as
   the thing he wants everywhere, so it is not "a" plate, it is THE plate, and
   the other two densities are the same glass doing a different job:

     --plate-quiet   something sitting ON a plate, or on a busy surface, that
                     must not read as a second plate: a chip, a filter pill, an
                     input, a closed FAQ row.
     --plate         a plate: card, panel, header, footer, CTA, FAQ open.
     --plate-dense   something floating over ARBITRARY content — a photo, the
                     page itself — that has to stay legible whatever is under
                     it: the mobile menu, a badge on a thumbnail, a lightbox
                     control.

   Three, not seven. Fewer and either badges go unreadable on a bright
   thumbnail or a chip on a card reads as a second card; more and the eye
   cannot hold the difference, which is the state we are leaving.

   ── The edge ──────────────────────────────────────────────────────────────
   The shadow under a card is gone, so the border has to hold the edge alone.
   --border moves .08 → .14 and --border-hover .16 → .24. Every rule on the
   site already reads those two names, so the whole site gets the stronger edge
   from this one line, and the light theme gets its mirror.

   The top facet is an INSET bevel, not a shadow: 1px of light on the upper
   edge, the same device .btn-primary has always carried. It is inside the
   element's own box, it casts nothing, and it is what makes glass read as
   glass rather than as a flat tint.

   ── The shadow ────────────────────────────────────────────────────────────
   --shadow (0 1px 2px rgba(0,0,0,.45)) is gone. It was a contact shadow, and
   the four things still allowed a shadow do not touch the page — they float
   over it. --shadow-float is sized for that job.                            */

:root{
  /* the one glass. Four blur radii (6, 8, 14, 20) became one. */
  --plate-blur: blur(14px) saturate(140%);

  --plate-quiet: rgba(10,8,20,.42);
  --plate:       rgba(10,8,20,.72);
  --plate-dense: rgba(10,8,20,.90);
  /* hover: the same plate, lightened ~3% — design-rules.md §2. Written as its
     own tint rather than as a lower alpha, because lowering the alpha shows
     more of the backdrop, which is not the same thing as getting lighter. */
  --plate-hi:       rgba(22,19,36,.74);
  --plate-quiet-hi: rgba(26,22,44,.46);

  /* Not a fourth density — a state. A plate that is selected, open or being
     pressed says so in the accent, and it is a fill rather than a glow:
     design-rules.md §2, "accent without light". */
  --plate-accent: rgba(89,0,255,.30);
  /* The one accent wash on the site: the page's closing block, and the same
     card on contact.html. It is a fill inside the element, not a halo behind
     it — design-rules.md §1 forbids the second, not the first. It sits ON the
     plate rather than instead of it: same glass, same edge, plus this.
     It is here, as a name, so it cannot spread: one token, two users. */
  --plate-wash: radial-gradient(680px 340px at 50% 0%,rgba(89,0,255,.34),transparent 70%);

  /* the edge that replaced the shadow */
  --border:       rgba(255,255,255,.14);
  --border-hover: rgba(255,255,255,.24);
  --plate-bevel:  rgba(255,255,255,.10);

  /* The screen a mock-up is drawn on. Deliberately NOT a plate and NOT a theme
     token: a scene is a screenshot of a dark app pasted into the page, and
     roughly twenty hardcoded white texts and rules inside the scenes would
     wash out the moment the screen under them went translucent. Brief §6.6. */
  --scene-bg:     #0A0812;
  --scene-border: rgba(255,255,255,.08);

  /* The full-screen dimmer, §5c. One value where there were two (.82 and .85
     for the same object class) and one blur, without the plate's saturate. */
  --scrim:      rgba(5,4,10,.84);
  --scrim-blur: blur(14px);

  /* The one shadow left on the site. Only for objects that genuinely float
     over the page: the header island, the mobile menu, the lightbox, the video
     modal and their own controls. Brief §4. */
  --shadow-float: 0 18px 44px -20px rgba(0,0,0,.72);

  /* One selection ring for the whole site. There were five, with five radii
     and five colours. Brief §4. */
  --ring-line: rgba(155,107,255,.9);
  --ring-halo: rgba(89,0,255,.18);
}

/* The light zone, and the header while it is over one. Mirrored, not inverted:
   the fill is light, the edge is dark, the top facet stays light — that is how
   glass behaves in either theme. */
[data-theme="light"],
.header.nav--light{
  --plate-quiet: rgba(255,255,255,.62);
  --plate:       rgba(255,255,255,.82);
  --plate-dense: rgba(255,255,255,.94);
  --plate-hi:       rgba(255,255,255,.92);
  --plate-quiet-hi: rgba(255,255,255,.76);
  --plate-accent:   rgba(89,0,255,.10);

  --border:       rgba(13,10,24,.14);
  --border-hover: rgba(13,10,24,.26);
  --plate-bevel:  rgba(255,255,255,.75);
}

/* ══ 1. The plate ══════════════════════════════════════════════════════════
   Everything on the site that reads as a plate. If a selector is not on one of
   these lists it does not get a fill, and if it is, it does not get one
   anywhere else.                                                            */
.plate,
.header,
.footer,
.yt-panel, .sp-panel,
.pr-card, .sol-card, .tcard,
.proc-item.is-active .pi, .proc-item.is-active .pi:hover,
.proc-static .pi, html:not(.js) .pi,
details.faq[open],
.final-cta,
.contact-main, .contact-side{
  background-color:var(--plate);
  background-image:none;
  -webkit-backdrop-filter:var(--plate-blur);
          backdrop-filter:var(--plate-blur);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--plate-bevel);
}

/* ══ 2. Quiet ══════════════════════════════════════════════════════════════
   Sits on a plate, or on something already busy, and must stay under it.    */
.plate--quiet,
.chip,
.btn.btn-ghost,
.fchip,
.socials a,
details.faq,
.faq-ico, .sol-card .ico,
.pi:hover,
.yt-play,
.field input, .field select, .field textarea,
/* .btn{border:0} sits later in both page stylesheets, so a plain .btn-whatsapp
   or .btn-ghost here would win on the fill and lose on the edge. */
.btn.btn-whatsapp{
  background-color:var(--plate-quiet);
  background-image:none;
  -webkit-backdrop-filter:var(--plate-blur);
          backdrop-filter:var(--plate-blur);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--plate-bevel);
}

/* ══ 3. Dense ══════════════════════════════════════════════════════════════
   Floats over content we do not control — a thumbnail, the page underneath a
   menu. Same glass, enough of it to stay legible on anything.               */
/* A badge on a photograph does not follow the section's theme. What is behind
   it is somebody's thumbnail, not the page, so it stays dark glass with white
   ink in a light block exactly as in a dark one — the same reasoning that
   keeps --scene-bg out of the theme. Without this the play button on a video
   review in Testimonials came out as a pale disc on a bright frame. */
.yt-stat,
.thumb .cat, .thumb .zoom,
.tvid-badge, .yt-play,
.lb-close, .lb-nav, .vm-close{
  --plate-quiet: rgba(10,8,20,.42);
  --plate-dense: rgba(10,8,20,.90);
  --border:      rgba(255,255,255,.24);
  --plate-bevel: rgba(255,255,255,.14);
}

.plate--dense,
.nav.open,
.yt-stat,
.thumb .cat, .thumb .zoom,
.tvid-badge,
.lb-close, .lb-nav, .vm-close{
  background-color:var(--plate-dense);
  background-image:none;
  -webkit-backdrop-filter:var(--plate-blur);
          backdrop-filter:var(--plate-blur);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--plate-bevel);
}

/* ══ 4. Screens ════════════════════════════════════════════════════════════
   Not plates. A photo or a mock-up fills these edge to edge, so there is
   nothing behind them to blur and glass would buy a composited layer for
   nothing — brief §6.4. They take the edge and the dark screen the picture is
   letterboxed on, and no shadow.                                            */
.pr-ill, .sviz, .sviz-sm, .proc-stage,
.proc-static .proc-scene, html:not(.js) .proc-scene{
  background:var(--scene-bg);
  border:1px solid var(--scene-border);
}
/* .hero-row .ht is here rather than on the plate list for the same reason, and
   for a second one: there are thirty of them inside an infinite marquee, and a
   blur pass on each, every frame, would be paid for a surface no one can see
   through the photograph on top of it. */
.thumb, .tcard.yt, .hero-row .ht, .hero-card{
  background:var(--scene-bg);
  border:1px solid var(--border);
  /* .tcard.yt is a .tcard, so it would otherwise inherit the plate's blur and
     the plate's light bevel — a white hairline across the top of a video. */
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  box-shadow:none;
}

/* ══ 5. Floating ═══════════════════════════════════════════════════════════
   The only four things on the site still allowed a shadow, plus the controls
   that live inside them. They are off the page, not on it.                  */
.header,
.nav.open,
.lb-stage, .vm-frame,
.lb-close, .lb-nav, .vm-close{
  box-shadow:var(--shadow-float);
}
/* the two frames a modal is built from: a picture, so a screen rather than a
   plate, but floating, so a shadow */
.lb-stage{background:var(--scene-bg);border:1px solid var(--border-hover)}
/* the video letterboxes itself; the frame only needs the same dark screen
   every other picture surface on the site uses */
.vm-frame{background:var(--scene-bg);border:1px solid var(--border-hover)}
/* the controls keep their bevel on top of the float shadow */
.lb-close, .lb-nav, .vm-close{
  box-shadow:var(--shadow-float),inset 0 1px 0 var(--plate-bevel);
}
/* the header island's bevel likewise */
.header, .nav.open{
  box-shadow:var(--shadow-float),inset 0 1px 0 var(--plate-bevel);
}

/* ══ 5b. Where a plate has nothing to look at ══════════════════════════════
   Process. Measured 2026-07-28: the spread of the page behind an active step
   card is 0-2 — a flat --bg-stage plate. The section is pinned for ~4500px, so
   nothing moves behind it either; .proc-glow crosses the left column only on
   step 1 and travels right after that. A blur pass there buys no picture and
   costs a composited layer per step on the one section with a history of
   frame drops, so the steps keep the fill, the edge and the bevel and give up
   the blur. Same rule already applied to .thumb, .ch-pill and .hero-row .ht:
   glass only where there is something to see through it.                     */
.pi, .pi:hover,
.proc-item.is-active .pi, .proc-item.is-active .pi:hover,
.proc-static .pi, html:not(.js) .pi{
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* ══ 5c. Scrims ════════════════════════════════════════════════════════════
   The full-screen dimmer behind a lightbox or a video modal. Not a plate and
   deliberately not on the plate's blur: --plate-blur carries saturate(140%),
   which exists to make a small panel read as glass over a colourful page. On a
   full-screen dimmer that same saturate pushes the colour of the whole page
   underneath, which is the opposite of what a dimmer is for. So it is its own
   pair of names — and they are names, not the two literals that used to sit
   inline with two different alphas.                                          */
.lightbox, .vmodal{
  background:var(--scrim);
  -webkit-backdrop-filter:var(--scrim-blur);
          backdrop-filter:var(--scrim-blur);
}

/* ══ 6. Hover ══════════════════════════════════════════════════════════════
   design-rules.md §2, unchanged: the edge lightens, the surface lightens a few
   per cent, nothing lifts and nothing scales.                               */
@media (hover:hover) and (pointer:fine){
  .pr-card:hover, .sol-card:hover, .tcard:hover{
    border-color:var(--border-hover);
    background-color:var(--plate-hi);
  }
  /* a quiet surface lightens onto the quiet ramp, not onto the plate — a shut
     FAQ row that jumped to full plate density on hover would read as opening */
  .chip:hover, .btn-ghost:hover, .fchip:hover, details.faq:hover{
    border-color:var(--border-hover);
    background-color:var(--plate-quiet-hi);
  }
  /* the accent state, for controls that answer a click */
  .socials a:hover,
  .lb-close:hover, .lb-nav:hover, .vm-close:hover,
  .tcard.yt:hover .yt-play,
  .btn.btn-whatsapp:hover{
    background-color:var(--plate-accent);
    border-color:var(--accent-lilac);
  }
}
.fchip.active,
details.faq[open] .faq-ico,
.btn.btn-whatsapp{
  background-color:var(--plate-accent);
  border-color:var(--accent-soft);
}

/* The closing block, on both pages. Tried as a bare plate first and it did not
   hold — it came out as the dullest panel on a page it is supposed to close.
   See the report: there are shots of it with and without. */
.final-cta{background-image:var(--plate-wash)}

/* ══ 7. Rings ══════════════════════════════════════════════════════════════
   A ring is a second border, not a shadow — brief §4. One line colour, one
   halo, everywhere it is used.                                              */
.pr-card .ring, .cn-ring, .abx-ring{
  border:1.5px solid var(--ring-line);
  box-shadow:0 0 0 3px var(--ring-halo);
}
.yt-card--clib .yt-thumb{
  outline:1.5px solid var(--ring-line);
  box-shadow:0 0 0 3px var(--ring-halo);
}
@media(hover:hover){
  .yt-card--clib:hover .yt-thumb{box-shadow:0 0 0 5px var(--ring-halo)}
}

/* ══ 8. Where glass cannot go ══════════════════════════════════════════════
   Brief §6.1: a mask on an ancestor makes it a backdrop root, so a blur inside
   it has nothing left to look at. .hero-channels is masked at both ends, which
   is what dissolves the marquee into the wall, so the pills inside it take the
   tint without the blur. They are the one place on the site where the fill is
   the whole of the surface — and they are also the one place where a blur pass
   per pill, on an infinite marquee, would be paid for every frame.          */
.ch-pill{
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  background-color:var(--plate-dense);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--plate-bevel);
}
@media (hover:hover) and (pointer:fine){
  .ch-pill:hover{border-color:var(--border-hover);background-color:var(--plate-hi)}
}