/* BourneWise connected-coin texture + misted glass system. */

html[data-skin="paper"] {
  --lq-dense: url("../assets/textures/lianqian/lianqian-dense-clay-tile.webp?v=20260825f");
  --lq-outline: url("../assets/textures/lianqian/lianqian-outline-silver-tile.webp?v=20260825f");
  --lq-spaced: url("../assets/textures/lianqian/lianqian-spaced-medallion-tile.webp?v=20260825f");
  --lq-diagonal: url("../assets/textures/lianqian/lianqian-diagonal-clay-tile.webp?v=20260825f");
  --lux-glass: color-mix(in srgb, var(--bw-palette-cloud, var(--paper)) 54%, transparent);
  --lux-glass-quiet: color-mix(in srgb, var(--bw-palette-cloud, var(--paper)) 38%, transparent);
}

html[data-skin="paper"] body {
  isolation: isolate;
  background-color: var(--bw-palette-cloud, var(--paper));
}

/* A quiet connected-coin field replaces the former floral monogram. */
html[data-skin="paper"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--lq-outline) 0 0 / 30px 30px repeat;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: multiply;
  opacity: .12;
}

/* The casting/chat route uses the same artwork at a smaller scale, creating
   a denser textile field without increasing its visual weight. */
html[data-skin="paper"] body[data-page="app"]::after {
  background-size: 24px 24px;
  opacity: .105;
}

html[data-skin="paper"] body > :not(.mtn-bg):not(.lq-texture-stage):not(script):not(style) {
  position: relative;
  z-index: 2;
}

/* Text pages use two real image layers so each full-screen section can
   crossfade to a different member of the same connected-coin family. The
   layers are built by poster-pages.js and styled here; the block routes'
   own look lives in blocks/method/legal.css. */
.lq-texture-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.lq-texture-layer {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-repeat: repeat;
  /* The scanned plates have slightly uneven measured repeat periods. Render
     their connected coins on a square grid so circular details stay circular
     instead of inheriting the scan's vertical stretch. */
  background-size: var(--lq-size, 28px) var(--lq-size, 28px);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: none;
  transition: opacity 760ms var(--ease-out);
  will-change: opacity;
}
.lq-texture-layer.is-current {
  opacity: var(--lq-opacity, .2);
}
.lq-texture-layer[data-pattern="0"] { --lq-size: 27px; --lq-opacity: .15; }
.lq-texture-layer[data-pattern="1"] { --lq-size: 25px; --lq-opacity: .3; }
.lq-texture-layer[data-pattern="2"] { --lq-size: 66px; --lq-opacity: .2; }
.lq-texture-layer[data-pattern="3"] { --lq-size: 30px; --lq-opacity: .2; }

/* Coloured coins behave like editorial art, not badges. They occupy the
   breathing room beside copy and are cut directly from the same pattern. */
.lq-accent {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(72px, 9vw, 138px);
  height: auto;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  opacity: .66;
}

.lq-accent--about-hero { top: 28%; right: 5.5%; width: clamp(86px, 9vw, 132px); }
.lq-accent--about-panel { right: 7%; bottom: 8%; width: clamp(58px, 7vw, 94px); opacity: .52; }
.lq-accent--guide { top: 11%; right: 5%; width: clamp(88px, 10vw, 148px); }
.lq-accent--legal-intro { top: 16%; left: 52%; right: auto; width: clamp(82px, 8vw, 124px); }
.lq-accent--legal-clause { right: 7%; bottom: 9%; width: clamp(54px, 6vw, 82px); opacity: .5; }

/* The shared misted material that used to sit here — the :where() glass plane,
   its heavier second plane, and the hover weight — is gone. Measured state by
   state across five routes and every media it declares, not one of its
   properties won on any element: refinement.css owns the glass now. What is
   left in this file is only what still decides something. */

:where(button,.btn,.cta,.choose,.exchange,.send,.next,.back,.tab,.progress-step) {
  transition: background-color 190ms ease, color 190ms ease, box-shadow 190ms ease, transform 90ms ease-out !important;
}
:where(button,.btn,.cta,.choose,.exchange,.send,.next,.back,.tab,.progress-step):active {
  transform: scale(.985) !important;
}

/* ⚠️ RETIRED 2026-09-02 — the answer surface is no longer a pane.
   Owner: 「背景处先不加遮挡」. This rule put a glass fill, a 14px backdrop-filter
   and an inset white highlight on .reading and .msg-user, so the reading sat on
   a plate over the landscape; measured, `article.reading` was painting
   rgba(255,255,255,.22) with a white inset shadow. It is also the expensive
   kind of occlusion: a backdrop-filter over a range that moves has to re-blur
   every frame, which this repo has already measured as the single largest cost
   on this route.
   The reading's look now lives in refinement.css under "THE READING,
   REDESIGNED". Deleted rather than overridden — the standing protocol for these
   two legacy sheets is that they only shrink. */
body[data-page="app"] :is(.msg-user,.reading) { border: 0 !important; }
body[data-page="app"] :is(.composer,.reading,.msg-user,.method-menu,.carry-menu)::before,
body[data-page="app"] :is(.composer,.reading,.msg-user,.method-menu,.carry-menu)::after {
  border: 0 !important;
}

/* The usage spread is gone from pricing.html: hiding its plate left a 260px
   empty panel, the "strange box" it always read as; the rates carry its
   sentence now. .hero left this list 2026-08-26: it also killed the scrim. */
body[data-page="pricing"] :is(.plans,.rates,.packs)::before,
body[data-page="pricing"] :is(.plans,.packs)::after,
body:is([data-page="about"],[data-page="guide"],[data-page="legal"]) :is(
  .why-card,.method,.progress,.guide-stage,.lesson-card,.example,.rate,.toc,.pull,.headline,.clause
)::after {
  content: none !important;
}

@media (max-width: 760px) {
  html[data-skin="paper"] body::after {
    background-size: 25px 25px;
    opacity: .105;
  }
  html[data-skin="paper"] body[data-page="app"]::after {
    background-size: 21px 21px;
    opacity: .095;
  }
  .lq-texture-layer[data-pattern="0"] { --lq-size: 23px; --lq-opacity: .14; }
  .lq-texture-layer[data-pattern="1"] { --lq-size: 22px; --lq-opacity: .28; }
  .lq-texture-layer[data-pattern="2"] { --lq-size: 56px; --lq-opacity: .19; }
  .lq-texture-layer[data-pattern="3"] { --lq-size: 25px; --lq-opacity: .19; }
  .lq-accent { width: 62px; opacity: .48; }
  .lq-accent--about-hero { top: 8%; right: 14px; width: 66px; }
  .lq-accent--guide { top: 9%; right: 14px; width: 76px; }
  .lq-accent--legal-intro { top: 13%; left: auto; right: 14px; width: 66px; }
  .lq-accent--about-panel,
  .lq-accent--legal-clause { right: 16px; bottom: 7%; width: 54px; opacity: .4; }
}

@media (prefers-reduced-transparency: reduce) {
  :where(
    .sidebar,.composer,.method-menu,.carry-menu,.coach,.coach-card,.pagehead,
    .top,.card,.ledgerstrip,.billing-toggle,.plan,.rate-card,.estimator,.pack,
    .term,.billing-mail-note,.toast,.progress,.controls,.section .panel,
    .account-menu,.popover,.modal,.dialog,.sheet
  ) {
    background-color: color-mix(in srgb, var(--bw-palette-cloud, var(--paper)) 94%, transparent) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :where(.sidebar,.composer,.pagehead,.top,.card,.plan,.rate-card,.estimator,.pack,.progress,.controls,.section .panel) {
    border: 1px solid currentColor !important;
    background-color: color-mix(in srgb, var(--bw-palette-cloud, var(--paper)) 96%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lq-texture-layer { transition: opacity 140ms linear; transform: none; }
  :where(button,.btn,.cta,.choose,.exchange,.send,.next,.back,.tab,.progress-step) {
    transition: color 140ms ease, background-color 140ms ease !important;
    transform: none !important;
  }
}

/* Chrome lock -------------------------------------------------------------
   UI chrome does not inherit the rotating landscape palette. The landscape
   keeps changing behind the product; every control and carrier stays in one
   stable material system. That decision is kept.

   What changed is the material. The carriers used to be a 58–84% wash of
   #FFDE96 — a saturated gold — so every panel on the site was gold, not
   glass, and the composited surface measured |R−B| 68 mean / 89 max across
   all 180 colour groups. Two consequences followed from that one choice:
   the site read yellow under every palette, and --dim on a gold carrier put
   six text roles below WCAG at every single group.

   The carrier is now neutral and translucent, and the warmth arrives the way
   it does in real glass: through the backdrop, lifted by saturate(), not
   mixed into the panel. Accent and ink keep their values — those are brand,
   not material. */
html[data-skin="paper"] {
  --soft-peach: #FFDE96;
  --soft-peach-accent: #A85E46;  /* was #DE795D — see refinement.css, solid buttons */
  --soft-peach-cream: #F4E8CE;
  --soft-peach-paper: #EBDDCA;
  --soft-peach-ink: #34251F;
  /* was #765B4E: 3.7:1 on the old carrier, and it is used for nearly every
     secondary line on the site. Darkened to clear 4.5:1 on the new one. */
  --soft-peach-muted: #5C463B;
  --soft-peach-line: color-mix(in srgb, var(--soft-peach-ink) 14%, transparent);
  --soft-peach-glass: var(--ui-glass);
  --soft-peach-glass-soft: var(--ui-glass-soft);
  --soft-peach-glass-strong: var(--ui-glass-strong);
  --lux-glass: var(--soft-peach-glass);
  --lux-glass-quiet: var(--soft-peach-glass-soft);
}

html[data-skin="paper"] body {
  --cp-ink: var(--soft-peach-ink);
  --cp-accent: var(--soft-peach-accent);
  --cp-on-accent: var(--soft-peach-ink);
  --cp-carrier: var(--soft-peach-glass);
  --cp-carrier-strong: var(--soft-peach-glass-strong);
  --cp-tint: color-mix(in srgb, var(--soft-peach-accent) 12%, var(--soft-peach));
  --cp-line: var(--soft-peach-line);
  --cp-line-strong: color-mix(in srgb, var(--soft-peach-ink) 31%, transparent);
  --cp-line-accent: color-mix(in srgb, var(--soft-peach-accent) 62%, transparent);
  --terracotta: var(--soft-peach-accent);
  --ink: var(--soft-peach-ink);
  --dim: var(--soft-peach-muted);
}

/* Stable glass carriers. The repeated texture remains visible underneath,
   but the carrier colour itself never changes with the environment. */
html[data-skin="paper"] body :is(.composer,.method-menu,.carry-menu,.coach,.coach-card,
  .pagehead,.top,.card,.ledgerstrip,.billing-toggle,.plan,.rate-card,
  .estimator,.pack,.term,.billing-mail-note,.toast,.progress,.controls,
  .section .panel,.account-menu,.popover,.modal,.dialog,.sheet
) {
  color: var(--soft-peach-ink);
  /* A transparent border makes a translucent panel float with no edge, which
     is the difference between glass and a wash. Glass is read at its rim. */
  border-color: var(--ui-line) !important;
  background-color: var(--soft-peach-glass) !important;
  background-image: none !important;
  /* The carriers had no backdrop-filter at all, so nothing behind them was
     ever refracted — the single biggest reason none of this read as glass. */
  -webkit-backdrop-filter: var(--ui-glass-filter);
  backdrop-filter: var(--ui-glass-filter);
  box-shadow: var(--ui-glass-edge), var(--ui-shadow) !important;
}
html[data-skin="paper"] body :is(.sidebar,.pa.pagehead,.top,.card,.section .panel,.modal,.dialog,.sheetound-color: var(--soft-peach-glass-strong) !important;
}

/* App: retain the established sidebar/composer layout, freeze only its UI
   material. Reading content remains quieter than the controls. */
/* ⚠️⚠️ RETIRED 2026-09-02. This rule was silently beating refinement.css, and
   the comment there had already spotted the danger and drawn the wrong
   conclusion: it says "luxury-glass.css sets this property from a later sheet
   at equal specificity" and answers with !important — but BOTH were !important
   and both were (0,3,1), so between two equal-weight !important declarations
   the LATER SHEET wins, and this one is later. The documented .72 sidebar had
   therefore never rendered; measured, the panel was still .42, which is the
   value refinement's own note says is too low for its labels once the blur came
   off. The backdrop-filter here was dead too, removed with the blur.
   Deleted rather than out-weighed: these two legacy sheets only shrink. */
/* The composer and the menus that spawn from it are the most-looked-at glass
   on the site, so they carry the heavier blur and sit a step more opaque than
   the panels behind them. */
html[data-skin="paper"] body[data-page="app"] :is(.composer,.method-menu,.carry-menu,.guide-coach,.signin-coach) {
  background-color: var(--ui-glass-strong) !important;
  border: var(--ui-hairline) solid var(--ui-line) !important;
  -webkit-backdrop-filter: var(--ui-glass-filter-strong);
  backdrop-filter: var(--ui-glass-filter-strong);
  box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised) !important;
}
/* Reading surfaces stay quieter than the controls and take no blur: long-form
   text over a refracted backdrop is harder to read, and the reading pane is
   the one place on the site where legibility outranks material. */
/* ⚠️ RETIRED 2026-09-02 with the rule above, and for the same reason. The
   second of these was what kept the question in a terracotta pill — the loudest
   object on the page, and it held the INPUT rather than the answer. */

/* Pricing keeps the living landscape. Its plans are fixed peach glass, so
   the texture and line-art can be read through the material without tinting
   every control a different colour. */
html[data-skin="paper"] body[data-page="pricing"] .mtn-bg,
html[data-skin="paper"] body[data-page="pricing"] .mtn-sky {
  display: block !important;
}
html[data-skin="paper"] body[data-page="pricing"] :is(
  .plan,.rate-card,.estimator,.pack,.term,.ledgerstrip,.billing-toggle,.billing-mail-note
) {
  color: var(--soft-peach-ink) !important;
  border: 0 !important;
  background-color: var(--soft-peach-glass-strong) !important;  /* the copy that actually paints these cards */
  background-image: none !important;
}
/* The featured plan used `inset 0 3px 0 <accent>` — a hard, unblurred 3px slab
   of pure accent across the top, which the 14px radius then clips at both
   upper corners, leaving two ragged stubs. It also replaced the box-shadow
   outright, so the one card meant to look most considered was the only one
   without the specular glass edge, and it carried a different ambient shadow
   (-32px spread) from its two neighbours.
   Featured is now said with elevation and a tinted rim: it sits one step
   higher on the same ladder, and its hairline picks up the accent. Nothing
   about it is a different kind of object from the cards beside it. */
html[data-skin="paper"] body[data-page="pricing"] :is(.plan.featured,.plan.feat) {
  background-color: var(--soft-peach-glass-strong) !important;
  border-color: color-mix(in srgb, var(--soft-peach-accent) 46%, transparent) !important;
  box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised) !important;
}
html[data-skin="paper"] body[data-page="pricing"] :is(.choose,.cta) {
  background-color: color-mix(in srgb, var(--soft-peach-accent) 82%, var(--soft-peach-ink)) !important;
  color: var(--on-accent) !important;   /* --paper on this fill is 4.51:1; white 5.86:1 */
}

/* Text pages: one flat colour per major editorial field. There are no
   gradients and no glass behind body copy; measure and alignment are kept
   deliberately consistent from section to section. */

/* Utility pages: form fields are opaque enough to stay legible. The card and
   panel grounds that used to be set here are owned by refinement.css. */
/* .field is deliberately NOT in this list. It is the wrapper holding the
   label and the input, so giving it a control's border and ground drew a
   box around the label with a second box for the input inside it. Only
   things you actually type in or press are controls. */
html[data-skin="paper"] body:is([data-page="login"],[data-page="settings"]) :is(input,select,.tabs,.prov) {
  color: var(--soft-peach-ink) !important;
  /* Inputs are solid, not glass. Text you are being asked to type and check
     should not have a moving landscape refracting behind it, and a field with
     a transparent border has no edge to aim at. */
  border: var(--ui-hairline) solid var(--ui-line) !important;
  background-color: color-mix(in srgb, var(--soft-peach-accent) 4%, #FFFFFF) !important;
}
/* Login was the last route still built from the old gold: an 86% #FFDE96 hero
   and 82% cream fields, which is why it looked like a different product from
   the page it is reached from. The hero is a surface, so it is glass; the
   active tab is a control, so it is solid. Same two materials as everywhere. */
/* The .card-hero background override is gone. It set --ui-glass-warm on a
   hero that sits INSIDE a card already painted --ui-glass-strong, so the
   two translucencies composited to a different tone and drew a seam
   across the card — and with !important it silently undid the fix made
   in login.html. One carrier, one material. */
/* Kept, and measured: the rule-level probe called this dead, and the
   before/after capture caught it winning. Removing it dropped the active tab
   to 76% white with no shadow — a control reading as glass. A probe's verdict
   is worth what the probe is worth; the visible diff decides. */
html[data-skin="paper"] body[data-page="login"] .tab.on {
  background-color: #FFFFFF !important;
  box-shadow: var(--ui-solid-shadow) !important;
}
html[data-skin="paper"] body[data-page="login"] :is(.prov.submit) {
  background-color: color-mix(in srgb, var(--soft-peach-accent) 82%, var(--soft-peach-ink)) !important;
  color: var(--on-accent) !important;   /* --paper on this fill is 4.51:1; white 5.86:1 */
}
html[data-skin="paper"] body[data-page="settings"] > .toast {
  position: fixed !important;
  left: 50%;
  z-index: 60;
}

@media (max-width: 760px) {
  
  
}

@media (prefers-reduced-transparency: reduce) {
  html[data-skin="paper"] body :is(
    .sidebar,.compos.composer,.method-menu,.carry-menu,.coach,.coach-card,.pagehead,
    .top,.card,.ledgerstrip,.billing-toggle,.plan,.rate-card,.estimator,.pack,
    .term,.billing-mail-note,.toast,.progress,.controls,.section .panel,
    .account-menu,.popover,.modal,.dialog,.sheet
  lor: color-mix(in srgb, var(--soft-peach) 94%, transparent) !important;
  }
}

/* Texture under long-form copy --------------------------------------------
   The connected-coin field runs at .15–.30 multiply. Over the poster pages'
   saturated grounds that puts its own light-to-dark span in the same range as
   the body text, so the eye separates pattern from copy line by line instead
   of reading. Cut it on the three text routes: still legible as material at
   arm's length, no longer competing at reading distance. */

/* Secondary actions -------------------------------------------------------
   "Back" was drawn as a bare underline in the inherited colour at the page's
   own opacity, which on the darker poster steps left it near-invisible — a
   navigation control you have to hunt for. Give it the same glass body as
   every other control so it is quiet by weight rather than by disappearing. */