/* glass.css — Hustler's Mansion Liquid Glass.
 *
 * A SKIN, not a structure. Every rule here maps onto a class app.html already
 * has: the hero card, the board tiles, settings cards, buttons. Nothing new is
 * introduced into the markup and no screen changes what it says or shows.
 *
 * THE MATERIAL RULE. The page stays flat — no bloom, no mesh, no gradient
 * field. All the glass lives in the tiles, and there is deliberately no
 * backdrop-filter anywhere: a flat page has nothing behind a tile to refract,
 * so it would cost blur passes and buy nothing. The material is the tile's own
 * face gradient plus rim plus layered shadow.
 *
 * Two things are forbidden and both are the usual way this goes wrong: a hard
 * two-tone split (every gradient falls smooth top to bottom at 172deg) and a
 * shine bar (glare is a wide soft wash you only notice when it moves).
 *
 * PRESS IS THE POINT. The old-school button feel is the surface sinking
 * inward, not gloss. Every tile and every button gets it.
 */

/* ── The four themes ──────────────────────────────────────────────────────
   Loaded as skins beside onyx and ivory. Each is one block, which is the only
   thing that stops a cue like this decaying into modals and one chart that
   "looked better" six months from now. */

:root[data-skin="forest"] {
  --bg: #1B221F;   --face-a: #3B4F45; --face-b: #101814;
  --brand: #D8CDB0; --brand-weak: rgba(216,205,176,.16);
  --rim: #2F4034;  --text: #EFF3EE;  --muted: #9DAA9F; --faint: #93A295; /* 4.59 on surface; #7C8A7E failed at 3.39 */
  --surface: #2A3831; --surface-2: #223029;
  --border: rgba(216,205,176,.16); --border-2: rgba(216,205,176,.28);
  --line-soft: rgba(216,205,176,.12);
  --green: #4CC98A; --green-weak: rgba(76,201,138,.16);
  --amber: #DDAA55; --amber-weak: rgba(221,170,85,.16);
  --red: #E0705E;   --red-weak: rgba(224,112,94,.16);
  --on-brand: #1B221F; --r-lg: 15px; --r-md: 13px;
  --spec-a: .22; --spec-o: .6; --glare-o: .57; --glare-tint: rgba(255,244,220,.40);
  color-scheme: dark;
}
:root[data-skin="ink"] {
  --bg: #1C1E21;   --face-a: #3B434E; --face-b: #14171B;
  --brand: #C3CDD8; --brand-weak: rgba(195,205,216,.16);
  --rim: #39414B;  --text: #F0F3F7;  --muted: #9BA5B0; --faint: #929CA8; /* 4.78 on surface; #7B8590 failed at 3.55 */
  --surface: #2A3038; --surface-2: #222831;
  --border: rgba(195,205,216,.16); --border-2: rgba(195,205,216,.28);
  --line-soft: rgba(195,205,216,.12);
  --green: #46CB8D; --green-weak: rgba(70,203,141,.16);
  --amber: #DCAE5E; --amber-weak: rgba(220,174,94,.16);
  --red: #E0705E;   --red-weak: rgba(224,112,94,.16);
  --on-brand: #1C1E21; --r-lg: 15px; --r-md: 13px;
  --spec-a: .22; --spec-o: .6; --glare-o: .57; --glare-tint: rgba(255,244,220,.40);
  color-scheme: dark;
}
:root[data-skin="steel"] {
  --bg: #EEF1F3;   --face-a: #FFFFFF; --face-b: #F4F7F9;
  --brand: #3D5A6C; --brand-weak: #E3EAEE;
  --rim: #A6B6BF;  --text: #12181C;  --muted: #5C6970; --faint: #7C878D;
  --surface: #FFFFFF; --surface-2: #F4F7F9;
  --border: rgba(166,182,191,.34); --border-2: rgba(166,182,191,.55);
  --line-soft: rgba(34,50,59,.08);
  --green: #0E7454; --green-weak: #E2F1EB;
  --amber: #8B6212; --amber-weak: #F4EBDA;
  --red: #B4433A;   --red-weak: #FBE9E7;
  --on-brand: #FFFFFF; --r-lg: 15px; --r-md: 13px;
  --shadow-rgb: 34,50,59;
  --spec-a: .85; --spec-o: .6; --glare-o: .57; --glare-tint: rgba(255,255,255,.55);
  color-scheme: light;
}
:root[data-skin="porcelain"] {
  --bg: #F7F7F7;   --face-a: #D8DEF3; --face-b: #F4F6F9;
  --brand: #1E3A5F; --brand-weak: #E4E9F4;
  --rim: #9FB0C4;  --text: #14181F;  --muted: #5D6875; --faint: #7E8894;
  --surface: #FFFFFF; --surface-2: #F4F6F9;
  --border: rgba(159,176,196,.34); --border-2: rgba(159,176,196,.55);
  --line-soft: rgba(95,93,229,.08);
  --green: #117447; --green-weak: #E3F0E9;
  --amber: #8B6212; --amber-weak: #F4EBDA;
  --red: #990505;   --red-weak: #FBE9E9;
  --on-brand: #FFFFFF; --r-lg: 26px; --r-md: 20px;
  --shadow-rgb: 95,93,229;
  --spec-a: .85; --spec-o: 1; --glare-o: .55; --glare-tint: rgba(255,255,255,.55);
  color-scheme: light;
}

/* ── The material ─────────────────────────────────────────────────────────
   .pv is the hero card, .saka-w a board tile, .set-card a settings card, .pvl
   the day list. All existing classes — this file gives them a face. */
:root[data-skin="forest"] .pv,      :root[data-skin="ink"] .pv,
:root[data-skin="steel"] .pv,       :root[data-skin="porcelain"] .pv,
:root[data-skin="forest"] .saka-w,  :root[data-skin="ink"] .saka-w,
:root[data-skin="steel"] .saka-w,   :root[data-skin="porcelain"] .saka-w,
:root[data-skin="forest"] .set-card,:root[data-skin="ink"] .set-card,
:root[data-skin="steel"] .set-card, :root[data-skin="porcelain"] .set-card,
:root[data-skin="forest"] .pvl,     :root[data-skin="ink"] .pvl,
:root[data-skin="steel"] .pvl,      :root[data-skin="porcelain"] .pvl {
  position: relative;
  /* isolation + a negative pseudo, or the specular knocks absolutely
     positioned chrome out of place. */
  isolation: isolate;
  border: 0;
  border-radius: var(--r-lg);
  background-image: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff) 0%,
    color-mix(in srgb, var(--face-b) 96%, #fff) 100%);
  transition: box-shadow 320ms cubic-bezier(.16,1,.3,1),
              transform 140ms cubic-bezier(.16,1,.3,1),
              background 320ms cubic-bezier(.16,1,.3,1);
}

/* DARK — elevation is made of LIGHT. A black drop shadow on #1B221F is
   invisible, so depth brightens the top edge and the rim and blooms a faint
   accent halo; a true-black contact shadow still pins the tile to the page.
   This is why dark needs a far higher depth number than light — they are not
   the same scale. */
:root[data-skin="forest"] .pv,     :root[data-skin="ink"] .pv,
:root[data-skin="forest"] .saka-w, :root[data-skin="ink"] .saka-w,
:root[data-skin="forest"] .set-card, :root[data-skin="ink"] .set-card,
:root[data-skin="forest"] .pvl,    :root[data-skin="ink"] .pvl {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.64),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 1px 2px rgba(0,0,0,1),
    0 10px 22px rgba(0,0,0,.9),
    0 3px 26px color-mix(in srgb, var(--brand) 11%, transparent);
}
/* LIGHT — shadow reads normally, so keep it low; shadow on a pale page
   muddies fast. */
:root[data-skin="steel"] .pv,     :root[data-skin="porcelain"] .pv,
:root[data-skin="steel"] .saka-w, :root[data-skin="porcelain"] .saka-w,
:root[data-skin="steel"] .set-card, :root[data-skin="porcelain"] .set-card,
:root[data-skin="steel"] .pvl,    :root[data-skin="porcelain"] .pvl {
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a) 60%, #fff),
    inset 0 -1.5px 0 color-mix(in srgb, var(--brand) 11%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 34%, transparent),
    0 1px 2px rgba(var(--shadow-rgb), .036),
    0 6px 12px rgba(var(--shadow-rgb), .028),
    0 20px 40px rgba(var(--shadow-rgb), .048);
}

/* The corner bloom. NEVER a band across the face. */
:root[data-skin="forest"] .pv::before,  :root[data-skin="ink"] .pv::before,
:root[data-skin="steel"] .pv::before,   :root[data-skin="porcelain"] .pv::before,
:root[data-skin="forest"] .saka-w::before, :root[data-skin="ink"] .saka-w::before,
:root[data-skin="steel"] .saka-w::before,  :root[data-skin="porcelain"] .saka-w::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: var(--spec-o);
  background: radial-gradient(88% 116% at 4% -34%,
    rgba(255,255,255,var(--spec-a)), transparent 62%);
}

/* PRESS. The surface sinks inward — the exact inverse of rising. On dark the
   face drops back to its unlit colour and the halo dies. */
:root[data-skin="forest"] .pv:active,     :root[data-skin="ink"] .pv:active,
:root[data-skin="forest"] .saka-w:active, :root[data-skin="ink"] .saka-w:active {
  background-image: linear-gradient(172deg, var(--face-a), var(--face-b));
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.6),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 1px 2px rgba(0,0,0,1);
}
:root[data-skin="steel"] .pv:active,     :root[data-skin="porcelain"] .pv:active,
:root[data-skin="steel"] .saka-w:active, :root[data-skin="porcelain"] .saka-w:active {
  transform: translateY(2px) scale(.991);
  box-shadow:
    inset 0 2px 6px rgba(var(--shadow-rgb), .17),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 55%, transparent);
}

/* Buttons get the same press, because the feel has to be the whole surface —
   a tile that sinks next to a button that does not reads as broken. */
:root[data-skin="forest"] .mini:active, :root[data-skin="ink"] .mini:active,
:root[data-skin="forest"] .btn:active,  :root[data-skin="ink"] .btn:active {
  box-shadow: inset 0 2px 7px rgba(0,0,0,.55);
  transform: translateY(1px);
}
:root[data-skin="steel"] .mini:active, :root[data-skin="porcelain"] .mini:active,
:root[data-skin="steel"] .btn:active,  :root[data-skin="porcelain"] .btn:active {
  transform: translateY(2px) scale(.991);
  box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .17);
}

/* Somebody who has asked their phone to stop moving things has asked once. A
   wash whose only job is to move has nothing to say when it cannot, so it goes
   entirely rather than being shortened. */
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="forest"] .pv, :root[data-skin="ink"] .pv,
  :root[data-skin="steel"] .pv,  :root[data-skin="porcelain"] .pv,
  :root[data-skin="forest"] .saka-w, :root[data-skin="ink"] .saka-w,
  :root[data-skin="steel"] .saka-w,  :root[data-skin="porcelain"] .saka-w {
    transition-duration: .001ms !important;
  }
}


/* ── The shop's own screens ───────────────────────────────────────────────
   The first pass only dressed the personal side — the hero, the tiles, the
   settings cards. The floor, the timeline, Team, Rent, Waiting and Reviews
   kept ivory-era surfaces and hairlines, so switching to the shop changed the
   page colour and almost nothing else. These are the same classes those
   screens already use; none of them gains structure here. */

:root[data-skin="forest"], :root[data-skin="ink"],
:root[data-skin="steel"],  :root[data-skin="porcelain"] {
  /* One place for a surface that is a panel rather than a card — the timeline
     body, the floor strip, a person row. Cards get the full material; these
     get its quieter relative, or the screen becomes a pile of competing
     shadows. */
  --panel: color-mix(in srgb, var(--face-a) 42%, var(--bg));
  --panel-rim: color-mix(in srgb, var(--brand) 18%, transparent);
}

:root[data-skin="forest"] .tl,   :root[data-skin="ink"] .tl,
:root[data-skin="steel"] .tl,    :root[data-skin="porcelain"] .tl,
:root[data-skin="forest"] .floor,:root[data-skin="ink"] .floor,
:root[data-skin="steel"] .floor, :root[data-skin="porcelain"] .floor {
  background: var(--panel);
  border: 1px solid var(--panel-rim);
  border-radius: var(--r-lg);
}

/* An appointment on the timeline and a chair on the floor are the two things
   you actually look at, so they take the accent rather than a grey. */
:root[data-skin="forest"] .tlapt,  :root[data-skin="ink"] .tlapt,
:root[data-skin="steel"] .tlapt,   :root[data-skin="porcelain"] .tlapt {
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 96%, #fff),
    color-mix(in srgb, var(--face-b) 92%, #fff));
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 0 0 1px color-mix(in srgb, var(--brand) 34%, transparent),
              0 2px 8px rgba(0,0,0,.28);
}
:root[data-skin="forest"] .lane, :root[data-skin="ink"] .lane,
:root[data-skin="steel"] .lane,  :root[data-skin="porcelain"] .lane {
  background: color-mix(in srgb, var(--face-b) 60%, var(--bg));
  border-color: var(--panel-rim);
}
:root[data-skin="forest"] .lane-b, :root[data-skin="ink"] .lane-b,
:root[data-skin="steel"] .lane-b,  :root[data-skin="porcelain"] .lane-b {
  background: color-mix(in srgb, var(--brand) 62%, transparent);
}

/* Team's person rows and the day list: panels, not cards. The row separator
   is inset and faint — these belong together — while the container carries the
   only rim. */
:root[data-skin="forest"] .pvl-r, :root[data-skin="ink"] .pvl-r,
:root[data-skin="steel"] .pvl-r,  :root[data-skin="porcelain"] .pvl-r,
:root[data-skin="forest"] .row,   :root[data-skin="ink"] .row,
:root[data-skin="steel"] .row,    :root[data-skin="porcelain"] .row {
  background: transparent;
  border-color: var(--line-soft);
}
:root[data-skin="forest"] .pvl, :root[data-skin="ink"] .pvl,
:root[data-skin="steel"] .pvl,  :root[data-skin="porcelain"] .pvl {
  background: var(--panel);
}

/* Chips, pills and segmented controls across both sides. */
:root[data-skin="forest"] .mini, :root[data-skin="ink"] .mini,
:root[data-skin="steel"] .mini,  :root[data-skin="porcelain"] .mini,
:root[data-skin="forest"] .pill, :root[data-skin="ink"] .pill,
:root[data-skin="steel"] .pill,  :root[data-skin="porcelain"] .pill {
  background: color-mix(in srgb, var(--face-a) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--text);
}
:root[data-skin="forest"] .mini.gold, :root[data-skin="ink"] .mini.gold,
:root[data-skin="steel"] .mini.gold,  :root[data-skin="porcelain"] .mini.gold {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}

/* The week strip: day chips are small cards and get the face, so the strip
   stops looking like it belongs to a different app than the tile under it. */
:root[data-skin="forest"] .wkd:not(.sel), :root[data-skin="ink"] .wkd:not(.sel),
:root[data-skin="steel"] .wkd:not(.sel),  :root[data-skin="porcelain"] .wkd:not(.sel) {
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff),
    color-mix(in srgb, var(--face-b) 96%, #fff));
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* The picked day's fill is NOT overridden here — and that takes :not(.sel)
   on the face rules above, not just deleting the .sel override. The bare
   `[data-skin] .wkd` selector outguns app.html's `.wkd.sel` on specificity,
   so without the guard the skin's light face silently beat the brand fill
   while the text went --on-brand: white on white, a blank cell. app.html
   owns the selected shape; a skin only speaks up when it actually differs,
   the way cardboard does. */


/* ══ ORIGINAL · LIVE APP ═══════════════════════════════════════════════════
 *
 * The fifth theme, and the restrained one. `ivory` is what the app wears when
 * a shop has not picked a glass skin — which is every shop today — so this is
 * the material most people actually see, and the one that has to stay quiet.
 *
 * Same system as the four above, every optical parameter at zero: depth 0.0,
 * glare 0.00, specular 0.0. The bloom, the wash and all three drop shadows are
 * built, wired to variables, and switched off. A cream page is the ground least
 * able to carry shadow, and the four skins already prove the machinery works
 * when it is dialled up. What is left is the rim, one warm hairline along the
 * bottom inside edge, and the sink on press.
 *
 * THE ACCENT STAYS THE TENANT'S. The site's hero board takes Hustler's Mansion
 * gold because the landing page is 123Chair's own brand. In here --brand is the
 * SHOP's colour and theme.js writes it inline on <html>, so a fixed gold would
 * repaint every shop's app in a colour they did not choose. That is why the
 * gold-on-gold collision between the accent and "needs attention" is a
 * site-only problem and does not exist on this side.
 *
 * SPREAD: cards get the face and the press; panels get the quieter relative.
 * Same split the four skins use, so the app stays one system.
 */

:root[data-skin="ivory"] {
  --face-a: #FFFFFF;
  --face-b: #FFFFFF;
  --rim: #D9D2C0;              /* ivory's own --border-2 */
  --shadow-rgb: 90,72,30;      /* #5A481E — warm. Neutral shadow on cream reads as dirt. */
  --depth-1: 0;                /* 0 1px 2px   — contact */
  --depth-2: 0;                /* 0 6px 12px  — near    */
  --depth-3: 0;                /* 0 20px 40px — ambient */
  --spec-a: .85; --spec-o: 0;
  --glare-o: 0;  --glare-tint: rgba(255,255,255,.55);
  /* Panels, not cards. The timeline body, the floor strip, a person row. Cards
     get the full material; these get its quieter relative, or the screen
     becomes a pile of competing shadows. */
  --panel: color-mix(in srgb, var(--face-a) 42%, var(--bg));
  --panel-rim: color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ── The material: cards only ─────────────────────────────────────────────
   .pv the hero card, .saka-w a board tile, .set-card a settings card, .pvl the
   day list. The face falls at 172deg even though both stops are white — a
   smooth ramp with nowhere to go, which makes a hard split impossible here by
   accident and leaves the theme able to take two stops later. */
:root[data-skin="ivory"] .pv,
:root[data-skin="ivory"] .saka-w,
:root[data-skin="ivory"] .set-card,
:root[data-skin="ivory"] .pvl {
  position: relative;
  /* isolation + a negative pseudo, or the specular knocks absolutely
     positioned chrome (.saka-arrow) out of place. */
  isolation: isolate;
  border: 0;
  border-radius: var(--r-lg);
  background-image: linear-gradient(172deg, var(--face-a) 0%, var(--face-b) 100%);
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a) 60%, #fff),
    inset 0 -1.5px 0 color-mix(in srgb, var(--brand) 11%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 34%, transparent),
    0 1px 2px   rgba(var(--shadow-rgb), var(--depth-1)),
    0 6px 12px  rgba(var(--shadow-rgb), var(--depth-2)),
    0 20px 40px rgba(var(--shadow-rgb), var(--depth-3));
  transition: box-shadow 320ms var(--ease-out-smooth),
              transform 140ms var(--ease-out-smooth),
              background 320ms var(--ease-out-smooth);
}
/* A board tile keeps the engine's own radius rather than the card radius, or
   the grid stops reading as a grid. */
:root[data-skin="ivory"] .saka-w { border-radius: var(--saka-radius, var(--r-md)); }

/* An action tile fills with the accent's pale. saka.css sets the `background`
   shorthand, which resets background-image to none, so this has to restate the
   ramp or a filled tile loses its face. */
:root[data-skin="ivory"] .saka-w.act {
  background-image: linear-gradient(172deg,
    color-mix(in srgb, var(--brand-weak) 88%, #fff) 0%,
    var(--brand-weak) 100%);
}

:root[data-skin="ivory"] .pv:hover,
:root[data-skin="ivory"] .saka-w:hover {
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a) 60%, #fff),
    inset 0 -1.5px 0 color-mix(in srgb, var(--brand) 11%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 55%, transparent),
    0 1px 2px   rgba(var(--shadow-rgb), var(--depth-1)),
    0 10px 20px rgba(var(--shadow-rgb), var(--depth-2)),
    0 30px 56px rgba(var(--shadow-rgb), var(--depth-3));
}

/* PRESS IS THE POINT — the one thing not at zero, and the whole feel. The
   surface sinks, the rim firms, and the sink is the only place the warm shadow
   colour is ever actually visible. Overrides saka.css's flat scale(.985). */
:root[data-skin="ivory"] .pv:active,
:root[data-skin="ivory"] .saka-w:active {
  transform: translateY(2px) scale(.991);
  box-shadow:
    inset 0 2px 6px rgba(var(--shadow-rgb), .17),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 55%, transparent);
}

/* The corner bloom. NEVER a band across the face. */
:root[data-skin="ivory"] .pv::before,
:root[data-skin="ivory"] .saka-w::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: var(--spec-o);
  background: radial-gradient(88% 116% at 4% -34%,
    rgba(255,255,255,var(--spec-a)), transparent 62%);
}

/* The glare: a wide soft wash that crosses on hover, not a shine bar.
   `:not(.saka-gain)` is load-bearing — this rule outranks .saka-w.saka-gain::after
   on specificity, and without the guard the money-arrived flash would be
   silently replaced by an invisible wash. */
:root[data-skin="ivory"] .saka-w:not(.saka-gain)::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  top: -70%; left: -85%; width: 72%; height: 250%;
  transform: rotate(17deg);
  background: var(--glare-tint);
  filter: blur(22px);
  opacity: var(--glare-o);
  transition: left 900ms var(--ease-out-smooth);
}
:root[data-skin="ivory"] .saka-w:not(.saka-gain):hover::after { left: 155%; }

/* Buttons get the same press, because the feel has to be the whole surface —
   a tile that sinks next to a button that does not reads as broken. */
:root[data-skin="ivory"] .btn:active,
:root[data-skin="ivory"] .mini:active,
:root[data-skin="ivory"] .hg-edit:active,
:root[data-skin="ivory"] .saka-reset:active,
:root[data-skin="ivory"] .saka-addtile:active,
:root[data-skin="ivory"] .saka-gitem:active,
:root[data-skin="ivory"] .saka-x:active {
  transform: translateY(2px) scale(.991);
  box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .17);
}
/* A tappable row inside a tile is not a card, so it sinks without moving —
   translating a row inside an already-pressed tile double-counts the press. */
:root[data-skin="ivory"] .saka-rtap:active {
  box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .13);
}

/* ── Panels: the quieter relative ─────────────────────────────────────────
   The timeline body, the floor strip, a person row. No face, no press, one
   rim — these are ground for other things to sit on, not objects to press. */
:root[data-skin="ivory"] .tl,
:root[data-skin="ivory"] .floor {
  background: var(--panel);
  border: 1px solid var(--panel-rim);
  border-radius: var(--r-lg);
}
/* An appointment on the timeline and a chair on the floor are the two things
   you actually look at, so they take the accent rather than a grey. */
:root[data-skin="ivory"] .tlapt {
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 96%, #fff),
    color-mix(in srgb, var(--face-b) 92%, #fff));
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 0 0 1px color-mix(in srgb, var(--brand) 34%, transparent),
              0 1px 2px rgba(var(--shadow-rgb), .10);
}
:root[data-skin="ivory"] .lane {
  background: color-mix(in srgb, var(--face-b) 60%, var(--bg));
  border-color: var(--panel-rim);
}
:root[data-skin="ivory"] .lane-b { background: color-mix(in srgb, var(--brand) 62%, transparent); }

/* Team's person rows and the day list: the container carries the only rim and
   the separator between rows is inset and faint — these belong together. */
:root[data-skin="ivory"] .pvl-r,
:root[data-skin="ivory"] .row {
  background: transparent;
  border-color: var(--line-soft);
}

/* Chips, pills and segmented controls across both sides. Flat, not faced —
   direction B keeps the face for things you press as objects. */
:root[data-skin="ivory"] .mini,
:root[data-skin="ivory"] .pill {
  background: color-mix(in srgb, var(--face-a) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--text);
}
:root[data-skin="ivory"] .mini.gold {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}

/* The week strip: day chips are small cards and get the face, so the strip
   stops looking like it belongs to a different app than the tile under it. */
:root[data-skin="ivory"] .wkd:not(.sel) {
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff),
    color-mix(in srgb, var(--face-b) 96%, #fff));
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 0 0 1px color-mix(in srgb, var(--rim) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="ivory"] .pv,
  :root[data-skin="ivory"] .saka-w { transition-duration: .001ms !important; }
  :root[data-skin="ivory"] .saka-w:not(.saka-gain)::after { display: none; }
}

/* ── Money wears the material — every skin missed this screen ─────────── */
:root[data-skin="forest"] .pcard, :root[data-skin="ink"] .pcard,
:root[data-skin="steel"] .pcard, :root[data-skin="porcelain"] .pcard,
:root[data-skin="forest"] .hero, :root[data-skin="ink"] .hero,
:root[data-skin="steel"] .hero, :root[data-skin="porcelain"] .hero {
  position: relative; isolation: isolate; border: 0; border-radius: var(--r-lg);
  background-image: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff) 0%,
    color-mix(in srgb, var(--face-b) 96%, #fff) 100%);
}
:root[data-skin="forest"] .pcard, :root[data-skin="ink"] .pcard,
:root[data-skin="forest"] .hero, :root[data-skin="ink"] .hero {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.64),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 1px 2px rgba(0,0,0,1), 0 10px 22px rgba(0,0,0,.9);
}
:root[data-skin="steel"] .pcard, :root[data-skin="porcelain"] .pcard,
:root[data-skin="steel"] .hero, :root[data-skin="porcelain"] .hero {
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a) 60%, #fff),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 34%, transparent),
    0 1px 2px rgba(var(--shadow-rgb), .036), 0 20px 40px rgba(var(--shadow-rgb), .048);
}
:root[data-skin="forest"] .mchip, :root[data-skin="ink"] .mchip,
:root[data-skin="steel"] .mchip, :root[data-skin="porcelain"] .mchip,
:root[data-skin="forest"] .method-chip, :root[data-skin="ink"] .method-chip,
:root[data-skin="steel"] .method-chip, :root[data-skin="porcelain"] .method-chip {
  background: color-mix(in srgb, var(--face-a) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent); color: var(--text);
}

/* ── Depth below the daybar: the calendar and the menu join the material ──
   The timeline was a deliberate "quieter relative"; Keyno's call is that it
   reads as MISSING rather than quiet. It takes the card face now, and the
   services menu cards (.sv-card) — which never joined any skin — take it
   with it. */
:root[data-skin="forest"] .tl, :root[data-skin="ink"] .tl,
:root[data-skin="forest"] .sv-card, :root[data-skin="ink"] .sv-card {
  position: relative; isolation: isolate; border: 0; border-radius: var(--r-lg);
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff),
    color-mix(in srgb, var(--face-b) 96%, #fff));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent),
    0 1px 2px rgba(0,0,0,.9), 0 8px 18px rgba(0,0,0,.7);
}
:root[data-skin="steel"] .tl, :root[data-skin="porcelain"] .tl,
:root[data-skin="steel"] .sv-card, :root[data-skin="porcelain"] .sv-card {
  position: relative; isolation: isolate; border: 0; border-radius: var(--r-lg);
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--face-a) 92%, #fff),
    color-mix(in srgb, var(--face-b) 96%, #fff));
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a) 60%, #fff),
    inset 0 0 0 1px color-mix(in srgb, var(--rim) 34%, transparent),
    0 1px 2px rgba(var(--shadow-rgb), .05), 0 14px 30px rgba(var(--shadow-rgb), .06);
}
:root[data-skin="ivory"] .tl, :root[data-skin="ivory"] .sv-card {
  position: relative; isolation: isolate; border: 0; border-radius: var(--r-lg);
  background: linear-gradient(172deg, var(--face-a, #fff), var(--face-b, #fff));
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--face-a, #fff) 60%, #fff),
    inset 0 -1.5px 0 color-mix(in srgb, var(--brand) 11%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim, #D9D2C0) 34%, transparent);
}

/* fields: a recess cut into the glass */
:root[data-skin="forest"] .chip-input input, :root[data-skin="ink"] .chip-input input {
  background: rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.06); }
:root[data-skin="steel"] .chip-input input, :root[data-skin="porcelain"] .chip-input input,
:root[data-skin="ivory"] .chip-input input {
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  box-shadow: inset 0 1.5px 3px rgba(var(--shadow-rgb, 34,50,59), .12); }

/* appointments read HOT against the deeper card now */
:root[data-skin="forest"] .tlapt, :root[data-skin="ink"] .tlapt {
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--brand) 30%, var(--surface)),
    color-mix(in srgb, var(--brand) 18%, var(--surface-2)));
  border-left: 3px solid var(--brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.35);
}
:root[data-skin="steel"] .tlapt, :root[data-skin="porcelain"] .tlapt,
:root[data-skin="ivory"] .tlapt {
  background: color-mix(in srgb, var(--brand) 14%, #fff);
  border-left: 3px solid var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent),
    0 1px 3px rgba(var(--shadow-rgb, 34,50,59), .12);
}