/* =====================================================================
   MARROW ATELIER. THE ATMOSPHERE.  assets/css/atelier-atmo.css  (2026-09-16)

   The approved third pass (DESIGN-SYSTEM 11, Edwin: "this is the direction
   this looks great"), reproduced with the exact values of
   scratchpad/atelier/gen3.py and gen2.py: the atmosphere panel and its four
   moods, the frost card, the ink card, the flat shade, the hex score ring
   and the score row, the complete pill set, the mono and small labels, the
   card, the hairline and the big figure. Linked after atelier.css on every
   page that paints a panel. L5 and L6 read these classes and write no
   atmosphere rule of their own.

   THE THREE LAYERS OF A PANEL, bottom to top, each inside the panel's own
   box and radius, never on html, body or a pseudo element of either:
     1. THE SKY, the panel's own background: one linear-gradient at 165
        degrees of three flat opaque stops, four named moods, composed from
        the stop tokens css/styles.css declares (--atmo-<mood>-0, -1, -2; the
        last stop of sky and moss is --marrow-accent). A band, not a light:
        no centre, no falloff, never a transparent stop.
     2. THE BLURRED HONEYCOMB, .atmo::before: ONE data URI per mood
        (--atmo-hex-<mood>, css/styles.css) of four flat top hexagons filled
        with the ramp, blurred by filter: blur(46px) saturate(1.15), scaled
        1.15, at 0.95. This is the ONLY filter: blur on any Marrow surface and
        the only colour gradient the light source guard allows; the SVG
        carries no radialGradient, no filter element, no feGaussianBlur.
     3. THE WHITE LATTICE, .atmo::after: the same hex tile as the ground
        (--atelier-hex-tile, radius 42, 126 by 72.746) and the same alpha
        ramp, in white at 0.10. One tile, two colours: teal on cream for the
        page, white on the sky inside a panel.

   THE ONE FIX THE NUMBERS FORCED. White body copy directly on a panel reads
   3.11 on the sky mood's worst pixel, so body copy on a panel always sits
   inside .frost, .ink or .atl-shade, and the frost card carries a flat
   rgba(20,24,26,0.62) shade under its white veil (6.85 floor). A 40px or
   larger heading may sit directly on the atmosphere (3.0 floor).

   Tokens, never literals: every hex here is a var() of css/styles.css. White
   and the shade are written as rgba channels, which are not brand values.
   No radial gradient, no shadow, no drop-shadow, no keyframe. backdrop-filter
   on .frost and .pill.frosty is glass, not light. No em or en dashes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE ATMOSPHERE PANEL AND ITS FOUR MOODS.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .atmo {
  position: relative;
  color: var(--color-pure-white);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--atmo-sky-1);
  background-image: linear-gradient(165deg, var(--atmo-sky-0) 0%, var(--atmo-sky-1) 40%, var(--marrow-accent) 100%);
  box-shadow: none;
}
:root[data-mz-console="atelier"] .atmo[data-mood="dusk"] {
  background-color: var(--atmo-dusk-1);
  background-image: linear-gradient(165deg, var(--atmo-dusk-0) 0%, var(--atmo-dusk-1) 50%, var(--atmo-dusk-2) 100%);
}
:root[data-mz-console="atelier"] .atmo[data-mood="ember"] {
  background-color: var(--atmo-ember-1);
  background-image: linear-gradient(165deg, var(--atmo-ember-0) 0%, var(--atmo-ember-1) 50%, var(--atmo-ember-2) 100%);
}
:root[data-mz-console="atelier"] .atmo[data-mood="moss"] {
  background-color: var(--atmo-moss-1);
  background-image: linear-gradient(165deg, var(--atmo-moss-0) 0%, var(--atmo-moss-1) 50%, var(--marrow-accent) 100%);
}
/* Layer 2: the blurred honeycomb. The data URI is the whole drawing; the
   blur is a CSS filter on this pseudo element and nowhere else. */
:root[data-mz-console="atelier"] .atmo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--atmo-hex-sky);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(46px) saturate(1.15);
  transform: scale(1.15);
  opacity: 0.95;
}
:root[data-mz-console="atelier"] .atmo[data-mood="dusk"]::before { background-image: var(--atmo-hex-dusk); }
:root[data-mz-console="atelier"] .atmo[data-mood="ember"]::before { background-image: var(--atmo-hex-ember); }
:root[data-mz-console="atelier"] .atmo[data-mood="moss"]::before { background-image: var(--atmo-hex-moss); }
/* Layer 3: the white lattice at 0.10, the ground's own tile and ramp. */
:root[data-mz-console="atelier"] .atmo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-pure-white);
  opacity: var(--atelier-atmo-lattice-alpha);
  -webkit-mask-image: var(--atelier-hex-ramp), var(--atelier-hex-tile);
  mask-image: var(--atelier-hex-ramp), var(--atelier-hex-tile);
  -webkit-mask-size: 100% 100%, 126px 72.746px;
  mask-size: 100% 100%, 126px 72.746px;
  -webkit-mask-repeat: no-repeat, repeat;
  mask-repeat: no-repeat, repeat;
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Panel text. */
:root[data-mz-console="atelier"] .atmo :is(h1, h2, h3, .big, .serif) { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .atmo p { color: rgba(255, 255, 255, 0.88); }
:root[data-mz-console="atelier"] .atmo a { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .atmo .hair { border-top: 1px solid rgba(255, 255, 255, 0.14); }
:root[data-mz-console="atelier"] .atmo :is(.mono, .small) { color: rgba(255, 255, 255, 0.85); }
/* Emphasis inside panel BODY COPY. A <strong> or <em> in a panel paragraph
   inherits nothing from the cream ladder: the locale homes carry a bolded run
   in the hero sub that resolved to --ink-primary, near black on the shade,
   1.11. Two type selectors put this over the cream rules that claim a bare
   strong. HEADINGS ARE DELIBERATELY NOT LISTED: the italic pivot inside an h1
   or h2 is inked white by its own named rules in atelier-public.css, and
   tests/homepage-ground-is-atelier.test.mjs proves the pivot falls to the
   accent when those rules are taken away. A third rule reaching the pivot from
   here would keep it white under that mutation and quietly blind the proof. */
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) :is(p, li, dd, dt, figcaption) :is(strong, b, em, i) { color: inherit; }
/* The flat shade: body copy on a panel sits in one of these, or in a frost or ink card. */
:root[data-mz-console="atelier"] .atl-shade {
  position: relative;
  background: rgba(20, 24, 26, 0.62);
  border-radius: 24px;
  color: var(--color-pure-white);
}

/* ---------------------------------------------------------------------
   2. THE FROST CARD. White at 0.11 over a flat shade at 0.62, a 1px white
   hairline at 0.22, radius 20, blur 22. Labels white at 0.85 (5.50 on the
   sky mood's worst pixel), body white (6.85).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .frost {
  position: relative;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  color: var(--color-pure-white);
  box-shadow: none;
}
:root[data-mz-console="atelier"] .frost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: rgba(20, 24, 26, 0.62);
}
:root[data-mz-console="atelier"] .frost :is(.mono, .small) { color: rgba(255, 255, 255, 0.85); }
:root[data-mz-console="atelier"] .frost :is(h1, h2, h3, .big, .serif, p, a) { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .frost .hair { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---------------------------------------------------------------------
   3. THE INK CARD. Where lists live inside an atmosphere.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .ink {
  position: relative;
  background: var(--atelier-ink-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: var(--color-pure-white);
  box-shadow: none;
}
:root[data-mz-console="atelier"] .ink .mono { color: rgba(255, 255, 255, 0.62); }
:root[data-mz-console="atelier"] .ink .small { color: rgba(255, 255, 255, 0.72); }
:root[data-mz-console="atelier"] .ink :is(.big, a, h2, h3) { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .ink .hair { border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* ---------------------------------------------------------------------
   4. THE SCORE RING AND THE SCORE ROW. The partial is
   _components/marrow-hexring.svg.html: one flat top hexagon at radius
   size/2 - 4 rotated 30, stroked twice at 3.5, the track then the arc with
   pathLength 100, dasharray 100 and dashoffset 100 minus pct. The page sets
   --pct on the svg; colours are by ROLE through data-role, and by GROUND
   (DESIGN-SYSTEM 11.12): on cream the 11.1 ramp (sessions teal, activity
   mint, money copper, attention sky, the track --rule-strong); inside an
   atmosphere panel, a frost card, an ink card or the shade the VIVID dark
   ramp declared in css/styles.css (sessions and readiness --atelier-dark-teal,
   activity, adherence and connected --atelier-dark-aqua, attention, unread and
   waiting --atelier-dark-blue, money, earned and sent --atelier-dark-amber,
   the track --atelier-dark-track at white 0.28), because the cream hues sink
   on a dark ground (teal 1.09 on the moss frost). Every dark arc clears 3.0 on
   every mood; tests/atelier-dark-ramp.test.mjs measures it. The figure inside
   a ring stays white. Neither ramp colours a control, a link, a heading or a
   pill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .hexring {
  display: block;
  width: 72px;
  height: 72px;
  color: var(--marrow-accent);
}
:root[data-mz-console="atelier"] .hexring[data-role="activity"] { color: var(--atelier-mint); }
:root[data-mz-console="atelier"] .hexring[data-role="money"] { color: var(--atelier-copper); }
:root[data-mz-console="atelier"] .hexring[data-role="attention"] { color: var(--atelier-sky); }
:root[data-mz-console="atelier"] .hexring-track { stroke: var(--rule-strong); }
/* The dark grounds: the vivid ramp by role, the white 0.28 track. */
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) .hexring { color: var(--atelier-dark-teal); }
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) .hexring:is([data-role="activity"], [data-role="adherence"], [data-role="connected"]) { color: var(--atelier-dark-aqua); }
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) .hexring:is([data-role="attention"], [data-role="unread"], [data-role="waiting"]) { color: var(--atelier-dark-blue); }
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) .hexring:is([data-role="money"], [data-role="earned"], [data-role="sent"]) { color: var(--atelier-dark-amber); }
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink, .atl-shade) .hexring-track { stroke: var(--atelier-dark-track); }
/* No chip or bar rule here yet: on the six console pages the only data colour
   on a dark ground today is the score ring (the payouts table on the ink card
   prints its status as text from the frozen money JS). A chip, bar or chart
   that lands on a dark ground later carries data-role and reads the ramp
   through a rule added beside these, never a cream hue. */
:root[data-mz-console="atelier"] .hexring-arc {
  stroke: currentColor;
  stroke-dashoffset: calc(100 - var(--pct, 0));
  transition: stroke-dashoffset var(--mz-dur-base) ease;
}
:root[data-mz-console="atelier"] .score-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 22px 26px;
}
:root[data-mz-console="atelier"] .score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
}
:root[data-mz-console="atelier"] .score-dial {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-mz-console="atelier"] .score-dial .hexring { position: absolute; inset: 0; }
:root[data-mz-console="atelier"] .score-val {
  position: relative;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-pure-white);
  font-variant-numeric: tabular-nums;
}
:root[data-mz-console="atelier"] .score-label { font-size: 14px; letter-spacing: 0.35px; color: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------------
   5. THE PILLS, COMPLETE SET. Height 44, padding 0 24, radius 9999, Inter
   500 at 15. On cream .pill.dark is the one filled action; on an atmosphere
   .pill.white is, and nothing on the cream below is then .pill.dark.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 9999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  background-image: none;
  transition: background-color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease, color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] .pill.dark { background: var(--atelier-onyx); color: var(--color-pure-white); border: 1px solid var(--atelier-onyx); }
:root[data-mz-console="atelier"] .pill.ghost { background: transparent; color: var(--color-soft-charcoal); border: 1px solid var(--color-soft-charcoal); }
:root[data-mz-console="atelier"] .pill.ghost:hover { color: var(--ink-primary); border-color: var(--ink-primary); }
:root[data-mz-console="atelier"] .pill.quiet { background: transparent; color: var(--color-soft-charcoal); border: 1px solid var(--color-dusk); height: 36px; padding: 0 16px; font-size: 14px; }
:root[data-mz-console="atelier"] .pill.white { background: var(--color-pure-white); color: var(--atelier-ink-card); border: 1px solid var(--color-pure-white); }
:root[data-mz-console="atelier"] .pill.frosty {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-pure-white);
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
:root[data-mz-console="atelier"] .pill.outline { background: transparent; color: var(--color-pure-white); border: 1px solid rgba(255, 255, 255, 0.55); }
:root[data-mz-console="atelier"] .pill:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 3px; }
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink) .pill:focus-visible { outline-color: var(--color-pure-white); }
/* The frosted arrow disc on the two home doors. */
:root[data-mz-console="atelier"] .frost.disc { width: 52px; height: 52px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------------------------------------------------------------------
   6. LABELS, THE CARD, THE HAIRLINE, THE BIG FIGURE (11.7, 11.8).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--atelier-sage);
}
:root[data-mz-console="atelier"] .small {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.35px;
  color: var(--atelier-sage);
}
:root[data-mz-console="atelier"] .card {
  background: var(--atelier-card);
  border: 1px solid var(--color-stone-border);
  border-radius: 8px;
  padding: var(--space-3);
  box-shadow: none;
  background-image: none;
}
:root[data-mz-console="atelier"] .hair { border-top: 1px solid var(--color-stone-border); }
:root[data-mz-console="atelier"] .big {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--atelier-onyx);
}
:root[data-mz-console="atelier"] :is(.atmo, .frost, .ink) .big { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.08;
}
/* The one filled pill per screen when the fold is an atmosphere: nothing on the cream below is .pill.dark. Held by tests/atelier-one-filled-pill (L5). */