/* ═══════════════════════════════════════════════════════════════════════════
   THE SHOP FLOOR — the signed-in portal.

   The login is a cold street where you push the shop door open. This is what
   is on the other side of it: the warm inside of the shop. Lamplight, timber,
   plaster and brass, with your balance on the till, your limits on shelf tags,
   and your gift history printed on a receipt roll.

   Everything is scoped to body.view-app-active. Base component styles still
   live in style.css; this is the material layer over them.
   ═══════════════════════════════════════════════════════════════════════════ */

body.view-app-active {
  color-scheme: dark;

  /* The room */
  --sf-room: #140f0b;
  --sf-wall: #221811;
  --sf-wall-lit: #2e2016;
  --sf-timber: #2b1d13;
  --sf-timber-dark: #1b120c;
  --sf-counter: #3b291b;

  /* Metal */
  --sf-brass: #cfa059;
  --sf-brass-lit: #ffdca4;
  --sf-brass-dim: rgba(207, 160, 89, 0.34);
  --sf-steel: #6f6459;

  /* Light */
  --sf-lamp: #ffb85c;
  --sf-lamp-hot: #ffe9c4;

  /* Paper */
  --sf-paper: #ece2cc;
  --sf-paper-warm: #f4ecd8;
  --sf-paper-note: #f0dfa4;
  --sf-paper-ink: #3a2f21;

  /* Type on dark */
  --sf-ink: #f7efe1;
  --sf-ink-soft: rgba(232, 218, 196, 0.74);
  --sf-ink-faint: rgba(214, 197, 170, 0.5);

  /* Signals */
  --sf-ok: #7fc98a;
  --sf-warn: #efb45c;
  --sf-bad: #f0705f;

  --sf-label: 0.14em;
  --sf-edge: rgba(255, 236, 205, 0.09);

  /* Remap the shared brand ramp so every panel on every tab follows the room
     without each one needing its own override. */
  --brand: var(--sf-brass);
  --brand-light: var(--sf-brass-lit);
  --brand-deep: #a8762f;
  --brand-tint: var(--sf-brass);
  --brand-pale: var(--sf-brass-lit);
  --brand-soft: #f0d5a6;
  --brand-wash: #fff3dc;
  --brand-rgb: 207, 160, 89;
  --brand-light-rgb: 255, 220, 164;
  --brand-deep-rgb: 168, 118, 47;
  --brand-tint-rgb: 207, 160, 89;
  --brand-pale-rgb: 255, 220, 164;
  --brand-wash-rgb: 255, 243, 220;
  --brand-glow: rgba(207, 160, 89, 0.34);
  --brand-dim: rgba(207, 160, 89, 0.14);

  /* Every feature shipped its own cold accent — sky on support, blue on 2FA,
     blurple on the Discord surfaces, cyan on NEW badges, lavender on titles.
     Each becomes a warm metal instead, so the tabs stop reading as a different
     product from the room they sit in. */
  --cyan-rgb: 255, 200, 130;          /* NEW badges, perf toggle → lit brass */
  --cyan-soft-rgb: 255, 224, 176;
  --sky: #d99a4e;                     /* support → copper */
  --sky-rgb: 217, 154, 78;
  --sky-soft: #f0bd78;
  --sky-soft-rgb: 240, 189, 120;
  --blue: #c98a3c;                    /* 2FA → aged brass */
  --blue-rgb: 201, 138, 60;
  --blue-soft: #e3ab63;
  --blue-soft-rgb: 227, 171, 99;
  --blue-pale: #f6e3c2;
  --blurple: #b8762f;                 /* Discord + V-Bucks surfaces → bronze */
  --blurple-rgb: 184, 118, 47;
  --blurple-pale: #f3ddb9;
  --blurple-pale-rgb: 243, 221, 185;
  --lav-pale: #fdf4e4;                /* panel titles → warm chalk */
  --lav-soft-rgb: 245, 233, 213;

  /* Success was a cold mint and neutrals were a blue-grey slate; both read as
     daylight next to lamplight. Sage and warm stone sit in the room instead. */
  --ok: #5fa86c;
  --ok-rgb: 95, 168, 108;
  --ok-mid: #6bb478;
  --ok-mid-rgb: 107, 180, 120;
  --ok-bright: #7fc98a;
  --ok-bright-rgb: 127, 201, 138;
  --ok-deep-rgb: 74, 140, 86;
  --ok-soft: #9ed6a6;
  --ok-pale: #cfe9d2;
  --slate: #a2937f;
  --slate-rgb: 162, 147, 127;
  --slate-pale: #d6c9b4;
  --slate-wash: #ece2cc;
  --slate-wash-rgb: 236, 226, 204;

  /* The long tail: glows, washes and near-black surfaces from the old deck that
     only surface in specific states (modals, flows, empty and error views).
     Each hue family walks the same luminance ladder in warm. */
  --aqua-01: #c2822f;
  --aqua-02: #e0a44e;
  --aqua-03: #ffd79a;
  --aqua-04: #f0d3a6;
  --aqua-05: #f7e6c9;
  --aqua-06: #f5e3c4;
  --aqua-07: #f6e5c8;
  --aqua-08: #f8e9ce;
  --aqua-09: #faeed8;
  --aqua-10: #fbf1de;
  --aqua-11: #fcf3e2;
  --aqua-12: #fdf7ea;

  --azure-01: #0a0705;
  --azure-02: #120c08;
  --azure-03: #130d08;
  --azure-04: #1a1009;
  --azure-05: #17100a;
  --azure-06: #221710;
  --azure-07: #241811;
  --azure-08: #9c6a28;
  --azure-09: #b8792c;
  --azure-10: #e8bd7c;
  --azure-11: #fbf1de;
  --azure-12: #fdf5e6;

  --coolgrey-01: #12100c;
  --coolgrey-02: #1a1610;
  --dusk-rgb: 205, 188, 160;

  /* Same ladder, hue rotated to amber with saturation eased back, so each
     one keeps its original lightness and only stops being blue. */
  --cool-01-rgb: 17, 12, 7;
  --cool-02-rgb: 13, 10, 6;
  --cool-03-rgb: 17, 12, 7;
  --cool-04-rgb: 19, 13, 7;
  --cool-05-rgb: 21, 16, 11;
  --cool-06-rgb: 19, 14, 9;
  --cool-07-rgb: 19, 15, 11;
  --cool-08-rgb: 26, 19, 9;
  --cool-09-rgb: 30, 21, 10;
  --cool-10-rgb: 27, 20, 11;
  --cool-11-rgb: 27, 22, 17;
  --cool-12-rgb: 29, 22, 13;
  --cool-13-rgb: 32, 24, 14;
  --cool-14-rgb: 33, 26, 19;
  --cool-15-rgb: 31, 25, 19;
  --cool-16-rgb: 40, 29, 17;
  --cool-17-rgb: 86, 56, 21;
  --cool-18-rgb: 85, 57, 25;
  --cool-19-rgb: 57, 45, 32;
  --cool-20-rgb: 65, 42, 16;
  --cool-21-rgb: 140, 92, 38;
  --cool-22-rgb: 221, 173, 119;
  --cool-23-rgb: 219, 170, 113;
  --cool-24-rgb: 178, 116, 45;
  --cool-25-rgb: 198, 128, 49;
  --cool-26-rgb: 229, 192, 149;
  --cool-27-rgb: 158, 150, 141;
  --cool-28-rgb: 228, 191, 149;
  --cool-29-rgb: 231, 197, 159;
  --cool-30-rgb: 195, 188, 181;
  --cool-31-rgb: 236, 210, 181;
  --cool-32-rgb: 230, 195, 156;
  --cool-33-rgb: 208, 196, 182;
  --cool-34-rgb: 231, 198, 161;
  --cool-35-rgb: 212, 201, 188;
  --cool-36-rgb: 229, 193, 151;
  --cool-37-rgb: 213, 207, 201;
  --cool-38-rgb: 224, 180, 129;
  --cool-39-rgb: 223, 179, 129;
  --cool-40-rgb: 240, 219, 195;
  --cool-41-rgb: 227, 211, 193;
  --cool-42-rgb: 241, 222, 200;
  --cool-43-rgb: 240, 219, 195;
  --cool-44-rgb: 242, 228, 213;
  --cool-45-rgb: 247, 235, 221;
  --cool-46-rgb: 244, 228, 210;
  --cool-47-rgb: 234, 228, 221;
  --cool-48-rgb: 241, 221, 198;
  --cool-49-rgb: 239, 233, 226;
  --cool-50-rgb: 244, 240, 236;
  --cool-51-rgb: 250, 244, 237;
  --cool-52-rgb: 248, 238, 227;
  --cool-53-rgb: 251, 246, 240;
  --cool-54-rgb: 250, 244, 237;
  --cool-55-rgb: 253, 250, 246;
  --cool-56-rgb: 253, 251, 248;

  --indigo-01: #0b0806;
  --indigo-02: #0e0a07;
  --indigo-03: #100b08;
  --indigo-04: #130d09;
  --indigo-05: #150e0a;
  --indigo-06: #1c1410;
  --indigo-07: #6d4a1c;
  --indigo-08: #c08a3a;

  --mint-01: #100e09;
  --mint-02: #6bb478;
  --mint-03: #7fc98a;
  --mint-04: #74bf80;
  --mint-05: #93d29c;
  --mint-06: #a8dcae;

  --violet-01: #4a2408;
  --violet-02: #7a4a12;
  --violet-03: #cf9a3f;
  --violet-04: #dfae5e;
  --violet-05: #f7e6cb;
  --violet-06: #fdf5e8;
  --bg: var(--sf-room);
  --text: var(--sf-ink);
  --muted: var(--sf-ink-soft);
  --surface: rgba(43, 29, 19, 0.72);
  --surface-solid: #241811;
  --surface-2: #2c1e14;
  --surface-hover: #38271a;
  --border: var(--sf-edge);
  --border-hover: var(--sf-brass-dim);
  --radius: 6px;
  --radius-sm: 4px;

  background: var(--sf-room);
  color: var(--sf-ink);
}

/* The room supplies its own light, so the global orb field steps aside. */
body.view-app-active .bg-orbs { display: none; }

/* Sign-out: warm light fills the room, then the door animation takes over. */
body.is-walking-out::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: auto;
  background: radial-gradient(
    circle at 50% 48%,
    #fff6e6 0%,
    #ffce8e 20%,
    rgba(255, 168, 74, 0.72) 48%,
    rgba(20, 12, 7, 0.97) 100%
  );
  opacity: 0;
  animation: sfWalkOutWashIn 0.34s ease-in forwards;
}

body.is-walking-out-door::after {
  animation: sfWalkOutWashOut 0.38s ease-out forwards;
}

/* Don't play the usual view entrance while the camera is walking out. */
body.is-walking-out #view-login.view-active {
  animation: none !important;
}

@keyframes sfWalkOutWashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sfWalkOutWashOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-walking-out::after,
  body.is-walking-out-door::after {
    display: none;
  }
}

/* ── The shared header, dressed for the room ─────────────────────────────── */

body.view-app-active .header {
  background: linear-gradient(180deg, rgba(30, 21, 14, 0.94) 0%, rgba(26, 18, 12, 0.72) 74%, transparent 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}

/* A brass line along the counter edge instead of the old violet streak. */
body.view-app-active .header::after {
  background: linear-gradient(90deg, transparent, var(--sf-brass-dim) 20%, rgba(255, 220, 164, 0.5) 50%, var(--sf-brass-dim) 80%, transparent);
  opacity: 1;
}

body.view-app-active .header-ambient-glow,
body.view-app-active .header-ambient-shimmer,
body.view-app-active .header-ambient-line {
  display: none;
}

body.view-app-active .brand-name { color: var(--sf-ink); }
body.view-app-active .brand-sub { color: var(--sf-brass); }

body.view-app-active .brand-mark-glow,
body.view-app-active .brand-mark-ring {
  display: none;
}

body.view-app-active .brand-logo {
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sf-brass-dim), 0 4px 10px rgba(8, 5, 3, 0.5);
}

/* Account chip in the header reads as a brass nameplate. */
body.view-app-active .header-user-trigger {
  border: 1px solid var(--sf-brass-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, #33231a, #241811);
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.08);
}

body.view-app-active .header-user-trigger:hover {
  border-color: rgba(207, 160, 89, 0.6);
  background: linear-gradient(180deg, #3a281c, #2a1c13);
}

body.view-app-active .header-user-avatar-ring { display: none; }

body.view-app-active .header-user-menu {
  border: 1px solid var(--sf-edge);
  border-radius: 5px;
  background: linear-gradient(180deg, #33231a, #221710);
  box-shadow: 0 22px 50px rgba(8, 5, 3, 0.65);
}

body.view-app-active .header-user-menu-glow { display: none; }

/* ── The room ────────────────────────────────────────────────────────────── */

body.view-app-active .portal-shell {
  position: relative;
  isolation: isolate;
}

.sf-room {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Clipped so drifting dust can never extend the page's scroll area. */
  overflow: hidden;
  pointer-events: none;
}

/* The room is built from light and texture only, never from furniture. Panels
   cover the backdrop in an arbitrary shape, so anything with edges of its own
   ends up sliced into stray rectangles wherever the content happens not to
   reach. Continuous gradients get cropped by the layout without showing a seam. */
.sf-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 38% at 22% -6%, rgba(255, 184, 92, 0.17), transparent 64%),
    radial-gradient(ellipse 54% 34% at 78% -8%, rgba(255, 184, 92, 0.12), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 120%, rgba(255, 170, 80, 0.05), transparent 70%),
    linear-gradient(180deg, #2b1d14 0%, #221811 38%, #1a120c 72%, #120d09 100%);
}

/* Light falls off towards the corners the way it does away from a lamp. */
.sf-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 26%, transparent 40%, rgba(10, 7, 4, 0.55) 100%);
}

/* Plaster tooth, so the walls are not a flat gradient. */
.sf-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Two pendant lamps over the counter. */
.sf-lamps {
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
}

.sf-lamp {
  position: absolute;
  top: -12%;
  width: 34%;
  height: 100%;
  background: radial-gradient(ellipse 50% 46% at 50% 0%, rgba(255, 197, 122, 0.22), transparent 68%);
}

.sf-lamp--l { left: 6%; }
.sf-lamp--r { right: 4%; width: 30%; }

/* Shelving in silhouette along the back wall. */
/* Ground: a soft darkening underfoot with no horizon line and no boards, since
   either would be chopped into a box by whatever panel sits in front of it. */
.sf-floor {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(9, 6, 4, 0.5) 62%, rgba(7, 5, 3, 0.78) 100%);
}

.sf-motes {
  position: absolute;
  inset: 0 0 30%;
  overflow: hidden;
}

.sf-mote {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(255, 220, 170, 0.8);
  opacity: 0;
  animation: sfDrift var(--dur) linear var(--delay) infinite;
}

@keyframes sfDrift {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  18% { opacity: var(--o); }
  82% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(24px, -70px, 0); }
}

/* ── Shared surfaces: everything on every tab sits on timber ─────────────── */

body.view-app-active .panel,
body.view-app-active .card,
body.view-app-active .glass,
body.view-app-active .portal-card {
  border-radius: 6px;
  border: 1px solid var(--sf-edge);
  background:
    linear-gradient(180deg, rgba(255, 200, 140, 0.05), transparent 30%),
    linear-gradient(180deg, var(--sf-timber) 0%, #241811 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 184, 0.08),
    0 14px 34px rgba(8, 5, 3, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* A brass edge along the top of every panel, like a counter lip. */
body.view-app-active .panel::before,
body.view-app-active .portal-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-brass-dim) 22%, var(--sf-brass-dim) 78%, transparent);
}

body.view-app-active .panel-title,
body.view-app-active h1,
body.view-app-active h2,
body.view-app-active h3 {
  color: var(--sf-ink);
}

body.view-app-active .panel-sub,
body.view-app-active .page-desc {
  color: var(--sf-ink-soft);
}

/* Buttons become brass register keys. */
body.view-app-active .btn-primary {
  background: linear-gradient(180deg, #e5b571 0%, #c8934c 52%, #a8762f 100%);
  color: #2a1c09;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.7),
    inset 0 -2px 3px rgba(88, 56, 12, 0.5),
    0 6px 16px rgba(8, 5, 3, 0.5);
  text-shadow: 0 1px 0 rgba(255, 242, 214, 0.35);
}

body.view-app-active .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 234, 0.8),
    inset 0 -2px 3px rgba(88, 56, 12, 0.45),
    0 10px 22px rgba(8, 5, 3, 0.55),
    0 0 22px rgba(207, 160, 89, 0.35);
}

body.view-app-active .btn-ghost,
body.view-app-active .btn-secondary {
  background: linear-gradient(180deg, #35241a, #2a1c13);
  border: 1px solid var(--sf-brass-dim);
  color: var(--sf-ink);
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.07);
}

body.view-app-active .btn-ghost:hover,
body.view-app-active .btn-secondary:hover {
  border-color: rgba(207, 160, 89, 0.6);
  background: #33231a;
}

body.view-app-active .btn:focus-visible,
body.view-app-active .app-tab:focus-visible,
body.view-app-active .sf-key:focus-visible {
  outline: 2px solid var(--sf-brass-lit);
  outline-offset: 3px;
}

/* Inputs are paper slips on the counter — ink on cream, not a near-black well.
   The previous fill (#1c130d) was what made every text field read as a stray
   black bar against the warm timber around it. */
body.view-app-active input[type='text'],
body.view-app-active input[type='number'],
body.view-app-active input[type='search'],
body.view-app-active input[type='email'],
body.view-app-active input[type='password'],
body.view-app-active select,
body.view-app-active textarea {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 3px;
  background: linear-gradient(178deg, #f6efdd 0%, #e8ddc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #241d12;
  caret-color: #8a6a2c;
}

body.view-app-active input::placeholder,
body.view-app-active textarea::placeholder {
  color: rgba(58, 47, 33, 0.55);
}

body.view-app-active .vbucks-amount-input::placeholder,
body.view-app-active .vbucks-recipient-input::placeholder {
  /* Must set -webkit-text-fill-color: base styles use near-white fill that
     otherwise wins over `color` on cream paper inputs. Keep this softer than
     typed ink (#241d12) so idle placeholder ≠ active typing. */
  color: #7a6240;
  -webkit-text-fill-color: #7a6240;
  opacity: 1;
}

/* Status chip above the Epic field — timber inset, not a cream slab. */
body.view-app-active .settings-epic-badge {
  border: 1px solid rgba(255, 236, 205, 0.1);
  border-radius: 0.65rem;
  background:
    linear-gradient(180deg, rgba(255, 200, 140, 0.06), transparent 70%),
    rgba(20, 13, 9, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.04);
  color: var(--sf-ink, #f7efe1);
}

body.view-app-active .settings-epic-badge--empty {
  border-color: rgba(255, 236, 205, 0.08);
  background: rgba(20, 13, 9, 0.28);
}

body.view-app-active .settings-epic-badge-label {
  color: var(--sf-ink-faint, rgba(214, 197, 170, 0.58));
}

body.view-app-active .settings-epic-badge-value {
  color: var(--sf-ink, #f7efe1);
}

body.view-app-active .settings-epic-badge-meta {
  color: var(--sf-ink-soft, rgba(232, 218, 196, 0.7));
}

body.view-app-active .settings-about-item {
  border: 1px solid rgba(255, 236, 205, 0.1);
  border-radius: 0.65rem;
  background:
    linear-gradient(180deg, rgba(255, 200, 140, 0.05), transparent 70%),
    rgba(20, 13, 9, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.04);
}

body.view-app-active .settings-about-label {
  color: var(--sf-ink-faint, rgba(214, 197, 170, 0.58));
}

body.view-app-active .settings-about-value {
  border-color: rgba(207, 160, 89, 0.28);
  background: rgba(255, 184, 92, 0.1);
  color: var(--sf-brass-lit, #ffdca4);
}

body.view-app-active input:focus,
body.view-app-active select:focus,
body.view-app-active textarea:focus {
  border-color: rgba(168, 118, 47, 0.7);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 3px rgba(207, 160, 89, 0.22);
}

/* Support message fields: style.css paints these black on :focus
   (`background: rgba(0,0,0,.34)`), which turns the cream paper slip into a
   void and hides dark ink / placeholders. Keep them on the counter paper. */
body.view-app-active .support-field input,
body.view-app-active .support-field textarea,
body.view-app-active .support-composer textarea,
body.view-app-active .support-edit-input,
body.view-app-active #developer-support-claim-name,
body.view-app-active #developer-support-reply,
body.view-app-active .support-field input:focus,
body.view-app-active .support-field textarea:focus,
body.view-app-active .support-composer textarea:focus,
body.view-app-active .support-edit-input:focus,
body.view-app-active #developer-support-claim-name:focus,
body.view-app-active #developer-support-reply:focus {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 0.8rem;
  background: linear-gradient(178deg, #f6efdd 0%, #e8ddc4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 18px rgba(8, 5, 3, 0.14);
  color: #241d12;
  -webkit-text-fill-color: #241d12;
  caret-color: #8a6a2c;
}

body.view-app-active .support-field input:focus,
body.view-app-active .support-field textarea:focus,
body.view-app-active .support-composer textarea:focus,
body.view-app-active .support-edit-input:focus,
body.view-app-active #developer-support-claim-name:focus,
body.view-app-active #developer-support-reply:focus {
  border-color: rgba(168, 118, 47, 0.7);
  background: linear-gradient(178deg, #faf4e4 0%, #eee2c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(207, 160, 89, 0.22),
    0 10px 22px rgba(8, 5, 3, 0.16);
}

body.view-app-active .support-field input::placeholder,
body.view-app-active .support-field textarea::placeholder,
body.view-app-active .support-composer textarea::placeholder,
body.view-app-active .support-edit-input::placeholder,
body.view-app-active #developer-support-reply::placeholder {
  color: #7a6240;
  -webkit-text-fill-color: #7a6240;
  opacity: 1;
}

/* Prefixed wraps (settings, V-Bucks) own the paper surface; the nested
   input stays clear so you don't get a black rectangle floating inside a frame. */
body.view-app-active .settings-input-wrap,
body.view-app-active .vbucks-input-wrap,
body.view-app-active .gifting-add-friend-wrap {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 0.8rem;
  background: linear-gradient(178deg, #f6efdd 0%, #e8ddc4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 18px rgba(8, 5, 3, 0.14);
}

body.view-app-active .settings-input-wrap:focus-within,
body.view-app-active .vbucks-input-wrap:focus-within,
body.view-app-active .gifting-add-friend-wrap:focus-within {
  border-color: rgba(168, 118, 47, 0.7);
  background: linear-gradient(178deg, #faf4e4 0%, #eee2c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(207, 160, 89, 0.22),
    0 10px 22px rgba(8, 5, 3, 0.16);
}

/* Nested inputs must stay clear — the wrap already owns the paper fill.
   (A trailing-comma selector bug previously painted these with the special
   hint chip styles, which made the Epic field look like a double cream box.) */
body.view-app-active .settings-input-wrap input,
body.view-app-active .vbucks-input-wrap input,
body.view-app-active .gifting-add-friend-wrap input,
body.view-app-active .vbucks-amount-input,
body.view-app-active .vbucks-recipient-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #241d12;
  -webkit-text-fill-color: #241d12;
  caret-color: #8a6a2c;
}

body.view-app-active .settings-input-wrap input::placeholder,
body.view-app-active .vbucks-input-wrap input::placeholder,
body.view-app-active .gifting-add-friend-wrap input::placeholder {
  color: #7a6240;
  -webkit-text-fill-color: #7a6240;
  opacity: 1;
}

body.view-app-active .settings-input-prefix,
body.view-app-active .gifting-add-friend-prefix {
  color: rgba(58, 47, 33, 0.5);
}

body.view-app-active .settings-username-special {
  border: 0;
  background: rgba(58, 47, 33, 0.08);
  color: #8a6127;
}

body.view-app-active .settings-username-special:hover,
body.view-app-active .settings-username-special:focus-visible {
  border: 0;
  background: rgba(184, 118, 47, 0.18);
  color: #5f4218;
}

body.view-app-active .vbucks-input-prefix {
  background: rgba(58, 47, 33, 0.08);
  border-right-color: rgba(58, 47, 33, 0.16);
}

body.view-app-active .vbucks-input-wrap-discord .vbucks-input-prefix {
  background: rgba(184, 118, 47, 0.14);
  color: #8a6127;
}

body.view-app-active .vbucks-input-prefix img {
  /* Ink the Discord V emoji so it reads on cream paper (source art is white). */
  filter: brightness(0) saturate(100%);
  opacity: 0.82;
}

/* Slim sticky shop strip — search + filters only. Stats scroll away below. */
body.view-app-active .shop-controls {
  position: sticky;
  top: calc(65px + 0.55rem);
  margin: 0 0.85rem;
  padding: 0.45rem 0.55rem;
  overflow: visible;
  border: 1px solid rgba(255, 220, 170, 0.12);
  border-radius: 0.85rem;
  background:
    linear-gradient(180deg, rgba(255, 200, 140, 0.07), transparent 70%),
    rgba(22, 15, 10, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 184, 0.08),
    0 12px 28px rgba(8, 5, 3, 0.45);
  isolation: isolate;
  color: var(--sf-ink, #f7efe1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.view-app-active .shop-controls::before {
  content: none;
}

body.view-app-active .shop-controls::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0.5rem;
  left: 0.5rem;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 9, 6, 0.45), transparent);
}

body.view-app-active .shop-controls-top {
  gap: 0.5rem;
  margin-bottom: 0;
  padding-top: 0;
}

body.view-app-active .shop-search {
  max-width: none;
  flex: 1 1 240px;
  min-width: 0;
}

body.view-app-active .shop-search input,
body.view-app-active .search-wrap.shop-search input {
  border: 1px solid rgba(255, 220, 170, 0.12);
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--sf-ink, #f7efe1);
  font-weight: 600;
  min-height: 2.55rem;
}

body.view-app-active .shop-search input::placeholder,
body.view-app-active .search-wrap.shop-search input::placeholder {
  color: rgba(214, 197, 170, 0.45);
  font-weight: 500;
}

body.view-app-active .shop-search input:focus,
body.view-app-active .search-wrap.shop-search input:focus {
  border-color: rgba(207, 160, 89, 0.55);
  box-shadow: 0 0 0 3px rgba(207, 160, 89, 0.16);
}

body.view-app-active .shop-search .search-icon-svg,
body.view-app-active .shop-search .icon {
  color: rgba(214, 197, 170, 0.55);
}

body.view-app-active .shop-search .search-clear {
  background: rgba(255, 220, 170, 0.08);
  color: rgba(214, 197, 170, 0.75);
}

/* Sort is a brass plate. Density is a sliding enamel switch. */
body.view-app-active .shop-sort-label {
  color: rgba(58, 47, 33, 0.55);
  letter-spacing: 0.12em;
}

body.view-app-active .shop-sort-trigger {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 0 rgba(58, 47, 33, 0.06);
  color: #241d12;
  font-weight: 700;
}

body.view-app-active .shop-sort-trigger:hover {
  border-color: rgba(168, 118, 47, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 248, 230, 0.4));
}

body.view-app-active .shop-sort-menu.is-open .shop-sort-trigger,
body.view-app-active .shop-sort-trigger:focus-visible {
  border-color: rgba(168, 118, 47, 0.75);
  box-shadow: 0 0 0 3px rgba(207, 160, 89, 0.22);
}

body.view-app-active .shop-sort-trigger-chevron {
  border-color: #8a6a2c;
  opacity: 0.85;
}

body.view-app-active .shop-sort-options {
  border: 1px solid rgba(58, 47, 33, 0.22);
  border-radius: 6px;
  background: linear-gradient(178deg, #fffaf0, #f3e8d0);
  box-shadow: 0 18px 40px rgba(8, 5, 3, 0.35);
  color: #241d12;
}

body.view-app-active .shop-sort-option {
  color: #3a2f21;
  border-radius: 3px;
}

body.view-app-active .shop-sort-option:hover,
body.view-app-active .shop-sort-option:focus-visible {
  background: rgba(194, 143, 72, 0.18);
  color: #241d12;
}

body.view-app-active .shop-sort-option.is-selected {
  background: linear-gradient(180deg, #e7ba76, #c28f48);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.7), 0 2px 0 #7d5520;
  color: #2c1d08;
}

body.view-app-active .shop-density {
  padding: 0.18rem;
  border: 1px solid rgba(58, 47, 33, 0.22);
  border-radius: 3px;
  background: rgba(58, 47, 33, 0.06);
}

body.view-app-active .shop-density-thumb {
  top: 0.18rem;
  bottom: 0.18rem;
  left: 0.18rem;
  width: calc(50% - 0.18rem);
  border-radius: 2px;
  background: linear-gradient(180deg, #e7ba76, #c28f48);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.65), 0 2px 0 #7d5520;
}

body.view-app-active .shop-density-btn {
  border-radius: 2px;
  color: rgba(58, 47, 33, 0.62);
  font-weight: 700;
}

body.view-app-active .shop-density-btn.is-active {
  background: transparent;
  box-shadow: none;
  color: #2c1d08;
}

/* Sticky filter button: compact brass control on the dark strip. */
body.view-app-active .shop-controls .shop-filter-toggle {
  border: 1px solid rgba(207, 160, 89, 0.35);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(255, 184, 92, 0.16), rgba(43, 29, 19, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.1);
  color: var(--sf-brass-lit, #ffdca4);
  font-weight: 700;
  min-height: 2.55rem;
  padding: 0.45rem 0.85rem;
}

body.view-app-active .shop-controls .shop-filter-toggle:hover {
  border-color: rgba(207, 160, 89, 0.55);
  background: linear-gradient(180deg, rgba(255, 184, 92, 0.22), rgba(43, 29, 19, 0.65));
  color: #ffe7b8;
}

body.view-app-active .shop-controls .shop-filter-toggle[aria-expanded='true'] {
  border-color: rgba(125, 85, 32, 0.55);
  background: linear-gradient(180deg, #e7ba76, #c28f48);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.7), 0 2px 0 #7d5520;
  color: #2c1d08;
}

body.view-app-active .shop-controls .shop-filter-toggle .icon {
  color: inherit;
  opacity: 0.9;
}

/* Sheet / drawer filters keep the stamped paper tags. */
body.view-app-active .shop-filter,
body.view-app-active .shop-price-chip,
body.view-app-active .shop-giftable-toggle,
body.view-app-active .shop-reset,
body.view-app-active .shop-sheet .shop-filter-toggle {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #3a2f21;
  font-weight: 700;
}

body.view-app-active .shop-filter:hover,
body.view-app-active .shop-price-chip:hover,
body.view-app-active .shop-giftable-toggle:hover,
body.view-app-active .shop-reset:hover,
body.view-app-active .shop-sheet .shop-filter-toggle:hover {
  border-color: rgba(168, 118, 47, 0.55);
  background: rgba(255, 255, 255, 0.55);
  color: #241d12;
}

body.view-app-active .shop-filter.is-active,
body.view-app-active .shop-price-chip.is-active,
body.view-app-active .shop-giftable-toggle.is-active,
body.view-app-active .shop-sheet .shop-filter-toggle[aria-expanded='true'] {
  border-color: rgba(125, 85, 32, 0.55);
  background: linear-gradient(180deg, #e7ba76, #c28f48);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.7), 0 2px 0 #7d5520;
  color: #2c1d08;
}

body.view-app-active .shop-filter .icon,
body.view-app-active .shop-giftable-toggle .icon,
body.view-app-active .shop-reset .icon,
body.view-app-active .shop-sheet .shop-filter-toggle .icon {
  color: inherit;
  opacity: 0.85;
}

body.view-app-active .shop-filter-count {
  border-radius: 2px;
  background: rgba(58, 47, 33, 0.1);
  color: rgba(58, 47, 33, 0.7);
}

body.view-app-active .shop-filter.is-active .shop-filter-count {
  background: rgba(44, 29, 8, 0.18);
  color: #2c1d08;
}

body.view-app-active .shop-price-filter {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.view-app-active .shop-price-filter:focus-within,
body.view-app-active .shop-price-filter.is-active {
  border-color: rgba(168, 118, 47, 0.7);
  background: #fff8e8;
  box-shadow: 0 0 0 3px rgba(207, 160, 89, 0.2);
}

body.view-app-active .shop-price-filter-label {
  color: rgba(58, 47, 33, 0.55);
}

body.view-app-active .shop-price-filter input {
  background: transparent;
  box-shadow: none;
  border: none;
  color: #241d12;
}

body.view-app-active .shop-price-filter input::placeholder {
  color: rgba(58, 47, 33, 0.45);
}

body.view-app-active .shop-price-clear {
  border-radius: 2px;
  background: rgba(58, 47, 33, 0.1);
  color: rgba(58, 47, 33, 0.7);
}

body.view-app-active .shop-price-clear:hover {
  background: rgba(168, 118, 47, 0.22);
  color: #241d12;
}

/* Stats line scrolls with the catalog — not trapped in the sticky strip. */
body.view-app-active .shop-meta-bar {
  margin: 0.55rem 0.85rem 0.3rem;
  padding: 0 0.1rem;
  border-top: none;
  color: rgba(214, 197, 170, 0.55);
}

body.view-app-active .shop-meta-count {
  color: rgba(247, 239, 225, 0.9);
  font-weight: 750;
}

body.view-app-active .shop-meta-sync {
  color: rgba(214, 197, 170, 0.45);
}

body.view-app-active .shop-meta-chip {
  border-radius: 999px;
}

body.view-app-active .shop-meta-chip--ok {
  border: 1px solid rgba(127, 201, 138, 0.28);
  background: rgba(127, 201, 138, 0.12);
  color: #9fd8a8;
}

/* Filter drawer / panel is the same inventory sheet language. */
body.view-app-active .shop-sheet {
  border-color: rgba(58, 47, 33, 0.28);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(178deg, #f7efdc, #ebe0c6);
  color: #241d12;
  box-shadow: 0 -18px 50px rgba(8, 5, 3, 0.55);
}

@media (min-width: 721px) {
  body.view-app-active .shop-sheet {
    border-radius: 12px;
    box-shadow: 0 28px 70px rgba(8, 5, 3, 0.55);
  }
}

body.view-app-active .shop-sheet-handle {
  background: rgba(58, 47, 33, 0.28);
}

body.view-app-active .shop-sheet-head,
body.view-app-active .shop-sheet-foot {
  border-color: rgba(58, 47, 33, 0.16);
  background: transparent;
}

body.view-app-active .shop-sheet-title { color: #241d12; }

body.view-app-active .shop-sheet-close {
  border-radius: 3px;
  background: rgba(58, 47, 33, 0.08);
  color: rgba(58, 47, 33, 0.7);
}

body.view-app-active .shop-sheet-backdrop {
  background: rgba(20, 12, 7, 0.62);
}

@media (max-width: 720px) {
  body.view-app-active .shop-controls {
    margin: 0 0.65rem;
    padding: 0.4rem 0.45rem;
    top: calc(65px + 0.4rem);
    background:
      linear-gradient(180deg, rgba(255, 200, 140, 0.07), transparent 70%),
      rgba(22, 15, 10, 0.96);
  }

  body.view-app-active .shop-meta-bar {
    margin: 0.45rem 0.65rem 0.2rem;
  }

  body.view-app-active .shop-filter-toggle-label {
    /* Keep the sticky row one-line on phones */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.view-app-active .shop-controls .shop-filter-toggle {
    padding: 0.45rem 0.7rem;
  }
}

/* Shop-card actions become brass plates on the item, not dark chips. */
body.view-app-active .shop-card-btn .shop-card-action {
  border: 1px solid var(--sf-brass-dim);
  border-radius: 3px;
  background: linear-gradient(180deg, #3b2a1c, #261a11);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.12);
  color: var(--sf-brass-lit);
  font-weight: 700;
}

body.view-app-active .shop-card-btn .shop-card-action .icon { color: var(--sf-brass); }

/* Giftable right now: a struck brass key. */
body.view-app-active .shop-card-btn .shop-card-action--ready {
  border-color: rgba(70, 46, 12, 0.4);
  background: linear-gradient(180deg, #e7ba76, #c28f48);
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, 0.7), 0 3px 0 #7d5520;
  color: #2c1d08;
}

body.view-app-active .shop-card-btn .shop-card-action--ready .icon { color: #2c1d08; }

/* Blocked for a reason: still legible, but clearly not a key you can press. */
body.view-app-active .shop-card-btn .shop-card-action--locked,
body.view-app-active .shop-card-btn .shop-card-action--unlock,
body.view-app-active .shop-card-btn .shop-card-action--no-balance,
body.view-app-active .shop-card-btn .shop-card-action--no-slots,
body.view-app-active .shop-card-btn .shop-card-action--unregistered {
  border-color: rgba(239, 180, 92, 0.34);
  background: linear-gradient(180deg, #33261a, #221810);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.08);
  color: var(--sf-warn);
}

body.view-app-active .shop-card-btn .shop-card-action--locked .icon,
body.view-app-active .shop-card-btn .shop-card-action--unlock .icon,
body.view-app-active .shop-card-btn .shop-card-action--no-balance .icon,
body.view-app-active .shop-card-btn .shop-card-action--no-slots .icon,
body.view-app-active .shop-card-btn .shop-card-action--unregistered .icon {
  color: var(--sf-warn);
}

/* Tooltips are written on a paper label, like everything else you can read. */
body.view-app-active .corner-tooltip-glow { display: none; }

body.view-app-active .corner-tooltip-panel {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 2px;
  background: linear-gradient(178deg, #f6efdd, #e5dabf);
  box-shadow: 0 14px 32px rgba(8, 5, 3, 0.55);
}

body.view-app-active .corner-tooltip-panel::before { display: none; }
body.view-app-active .corner-tooltip-title { color: #241d12; }
body.view-app-active .corner-tooltip-detail { color: rgba(58, 47, 33, 0.78); }

body.view-app-active .corner-tooltip-arrow {
  border-color: rgba(58, 47, 33, 0.28);
  background: #efe5cd;
  box-shadow: none;
}

body.view-app-active .toast {
  border: 1px solid var(--sf-edge);
  border-radius: 4px;
  background: linear-gradient(180deg, #2e2016, #201610);
  box-shadow: 0 16px 40px rgba(8, 5, 3, 0.6);
  color: var(--sf-ink);
}

/* ── The counter chalkboard (page intro) ─────────────────────────────────── */

body.view-app-active .page-intro {
  position: relative;
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
  border: none;
  background: none;
  box-shadow: none;
}

/* The header is the counter itself: one warm oak surface with the grain running
   across it and a brass lip along the front edge. It replaced a framed slate
   board, which had a frame, a separate inner panel and a hanging rail to draw —
   three edges and a bar of dead space before any of the content began. */
body.view-app-active .page-intro-shell {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 216, 158, 0.16), transparent 26%),
    radial-gradient(ellipse 60% 100% at 22% 0%, rgba(255, 196, 120, 0.12), transparent 70%),
    repeating-linear-gradient(178deg, rgba(74, 43, 17, 0.28) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(178deg, rgba(255, 214, 158, 0.05) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #533620 0%, #402816 52%, #2d1b0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 194, 0.22),
    0 16px 36px rgba(8, 5, 3, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Brass lip capping the counter's front edge. */
body.view-app-active .page-intro-shell::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(180deg, var(--sf-brass-lit), var(--sf-brass) 45%, #7d5520 100%);
  opacity: 0.85;
}

body.view-app-active .page-intro-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1.15rem, 2.4vw, 1.45rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.2vw, 1.3rem);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.view-app-active .page-intro-leading {
  display: flex;
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
  align-items: flex-start;
  min-width: 0;
}

/* Enamel tile in a brass surround, matching the department plates. */
body.view-app-active .page-intro-icon-wrap {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(38px, 5vw, 46px);
  height: clamp(38px, 5vw, 46px);
  border: 1px solid rgba(207, 160, 89, 0.45);
  border-radius: 3px;
  background: linear-gradient(180deg, #2b1c11, #1b1109);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.14),
    0 2px 6px rgba(8, 5, 3, 0.45);
}

body.view-app-active .page-intro-icon,
body.view-app-active .page-intro-icon .icon,
body.view-app-active .page-intro-icon-wrap .icon {
  color: var(--sf-brass-lit);
}

body.view-app-active .page-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--sf-label);
  text-transform: uppercase;
  color: rgba(233, 189, 124, 0.78);
}

body.view-app-active .page-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.025em;
  color: var(--sf-ink);
  text-shadow: 0 1px 2px rgba(20, 10, 3, 0.55);
}

body.view-app-active .page-desc {
  max-width: 62ch;
  color: rgba(240, 223, 196, 0.72);
}

body.view-app-active .page-welcome {
  font-size: 0.76rem;
  color: rgba(233, 214, 184, 0.5);
}

/* Role tags sit as small stamps beside the board title. */
body.view-app-active .page-title .role-badges {
  gap: 0.32rem;
}

body.view-app-active .page-title .role-badge {
  padding: 0.2rem 0.44rem;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.12);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

body.view-app-active .page-title .role-badge::before { display: none; }

body.view-app-active .page-title .role-badge-dot { display: none; }

body.view-app-active .page-title .role-badge--developer {
  border-color: rgba(93, 255, 200, 0.45);
  background: linear-gradient(180deg, rgba(93, 255, 200, 0.14), rgba(93, 255, 200, 0.04));
  color: #9ff5d8;
}

body.view-app-active .page-title .role-badge--beta_tester {
  border-color: rgba(255, 180, 84, 0.55);
  background: linear-gradient(180deg, rgba(255, 180, 84, 0.16), rgba(255, 180, 84, 0.04));
  color: #ffd49a;
}


/* Chips are small brass-edged tags laid on the counter. */
body.view-app-active .page-intro-chips { gap: 0.45rem; }

body.view-app-active .page-chip {
  border: 1px solid rgba(207, 160, 89, 0.34);
  border-radius: 2px;
  background: rgba(22, 13, 7, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.07);
  color: rgba(244, 229, 205, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.view-app-active .page-chip:hover {
  border-color: rgba(207, 160, 89, 0.6);
  background: rgba(30, 18, 9, 0.6);
}

body.view-app-active .page-chip .icon { color: rgba(224, 180, 116, 0.82); }
body.view-app-active .page-chip .vbuck-label { color: rgba(233, 208, 172, 0.62); }

body.view-app-active .page-chip--success {
  border-color: rgba(127, 201, 138, 0.5);
  color: #d8f2dc;
}

body.view-app-active .page-chip--success .icon { color: var(--sf-ok); }

body.view-app-active .page-chip--warning {
  border-color: rgba(239, 180, 92, 0.5);
  color: #f8e5bf;
}

body.view-app-active .page-chip--warning .icon { color: var(--sf-warn); }

body.view-app-active .page-chip--muted { color: rgba(233, 214, 184, 0.58); }

/* Refresh used to be a 3D service bell — a novelty prop that fought the title
   for attention. It's a quiet brass plate now: same job, no costume. */
body.view-app-active .page-refresh-btn {
  position: relative;
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  border: none;
  border-radius: 3px;
  background: none;
  box-shadow: none;
}

body.view-app-active .page-refresh-btn::before,
body.view-app-active .page-refresh-btn::after {
  content: none;
  display: none;
}

body.view-app-active .page-refresh-btn-inner {
  position: static;
  display: inline-flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(168, 118, 47, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, #3b2a1c, #261a11);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.14);
  color: var(--sf-brass-lit);
  transform: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.12s var(--ease);
}

body.view-app-active .page-refresh-btn-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.view-app-active .page-refresh-btn .icon {
  color: var(--sf-brass-lit);
}

body.view-app-active .page-refresh-btn:hover .page-refresh-btn-inner {
  border-color: rgba(207, 160, 89, 0.75);
  background: linear-gradient(180deg, #46321f, #2e1f12);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.22);
}

body.view-app-active .page-refresh-btn:active .page-refresh-btn-inner {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(8, 5, 3, 0.45);
}

body.view-app-active .page-refresh-btn:focus-visible {
  outline: 2px solid var(--sf-brass-lit);
  outline-offset: 3px;
}

body.view-app-active .page-refresh-btn-glow { display: none; }

/* ── Department rail (tabs) ──────────────────────────────────────────────── */

/* Position is deliberately left to the base stylesheet: it is `sticky` with a
   `top` offset on desktop and `static` below 1024px. Forcing `relative` here
   would apply that `top` as a real offset and shove the rail over the panels. */
body.view-app-active .app-tabs {
  gap: 1.05rem;
  /* Left padding leaves room for the rail the labels hang off. */
  padding: 0.8rem 0.7rem 0.9rem 1.6rem;
  border: 1px solid var(--sf-edge);
  border-radius: 5px;
  background: linear-gradient(180deg, #35251a, #2a1c13 40%, #1f150e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.07), 0 12px 28px rgba(8, 5, 3, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Keep the brass rail/brackets inside this panel, not painted on the page. */
  overflow: hidden;
  isolation: isolate;
}

/* One brass rail per nav group (Departments / Early access). */
body.view-app-active .app-tabs::before {
  display: none;
}

body.view-app-active .app-tabs-group {
  position: relative;
  gap: 0.35rem;
}

body.view-app-active .app-tabs-group::before {
  content: '';
  position: absolute;
  top: 1.45rem;
  bottom: 0.15rem;
  left: -0.7rem;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7d5520, var(--sf-brass) 45%, var(--sf-brass-lit));
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.5);
  z-index: 0;
  pointer-events: none;
}


body.view-app-active .app-tabs-label {
  padding: 0.1rem 0 0.5rem;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}


/* Each tab is an enamel plate hung off the rail. */
body.view-app-active .app-tab {
  position: relative;
  z-index: 1;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0.52rem 0.75rem;
  border: 1px solid rgba(255, 226, 184, 0.12);
  border-radius: 3px;
  background: linear-gradient(180deg, #2f2016 0%, #241811 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.09), 0 4px 10px rgba(8, 5, 3, 0.45);
  color: var(--sf-ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Base .app-tab uses overflow:hidden, which clipped the rail brackets. */
  overflow: visible;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, box-shadow 0.2s;
}

/* The bracket joining each plate to the rail. */
body.view-app-active .app-tab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.72rem;
  width: 0.72rem;
  height: 1px;
  background: rgba(207, 160, 89, 0.55);
  transform: translateY(-50%);
  pointer-events: none;
}

body.view-app-active .app-tab.active::before {
  background: rgba(207, 160, 89, 0.95);
  box-shadow: 0 0 6px rgba(207, 160, 89, 0.35);
}

body.view-app-active .app-tab:hover {
  transform: translateX(2px);
  color: var(--sf-ink);
  background: linear-gradient(180deg, #38271a 0%, #2a1c13 100%);
}

body.view-app-active .app-tab.active {
  border-color: rgba(207, 160, 89, 0.55);
  background: linear-gradient(180deg, #e7ba76 0%, #c9964e 100%);
  color: #2c1d08;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.7),
    0 6px 16px rgba(8, 5, 3, 0.5),
    0 0 22px rgba(207, 160, 89, 0.3);
}

/* The base stylesheet paints these violet from the old brand; the shop is brass. */
body.view-app-active .app-tab-icon {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 226, 184, 0.12);
  border-radius: 3px;
  background: rgba(255, 226, 184, 0.05);
  box-shadow: none;
}

body.view-app-active .app-tab:hover .app-tab-icon { border-color: var(--sf-brass-dim); }

body.view-app-active .app-tab.active .app-tab-icon {
  border-color: rgba(70, 46, 12, 0.35);
  background: rgba(52, 34, 8, 0.2);
  box-shadow: none;
}

body.view-app-active .app-tab.active .icon,
body.view-app-active .app-tab.active .app-tab-icon .icon { color: #2c1d08; }

body.view-app-active .app-tab.active::after { display: none; }

body.view-app-active .app-tab-badge {
  border-radius: 999px;
  background: #c9463a;
  color: #fff4ef;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

body.view-app-active .app-tab-new {
  border-radius: 2px;
  background: rgba(207, 160, 89, 0.2);
  color: var(--sf-brass-lit);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
}

body.view-app-active .app-tab.active .app-tab-new {
  background: rgba(44, 29, 8, 0.28);
  color: #3b2708;
}

/* ── The till (dashboard hero) ───────────────────────────────────────────── */

body.view-app-active .overview-hero {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

body.view-app-active .overview-hero::before { display: none; }

.sf-till {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 184, 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 200, 140, 0.06), transparent 26%),
    linear-gradient(180deg, #3a281b 0%, #2a1c13 55%, #201610 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.14),
    0 20px 46px rgba(8, 5, 3, 0.55);
}

/* Brass strip across the top of the machine. */
.sf-till::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sf-brass) 18%, var(--sf-brass-lit) 50%, var(--sf-brass) 82%, transparent);
}

.sf-till-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.9rem, 2.2vw, 1.3rem) clamp(1rem, 2.4vw, 1.5rem) 0;
}

.sf-kicker {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}

.sf-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--sf-ink);
}

/* Session state as a stamped brass tag. */
.sf-session-tag {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--sf-brass-dim);
  border-radius: 2px;
  background: rgba(20, 13, 8, 0.5);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-ink-soft);
}

.sf-session-tag-lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sf-warn);
  box-shadow: 0 0 8px currentcolor;
  color: var(--sf-warn);
}

.sf-session-tag.is-live { border-color: rgba(127, 201, 138, 0.45); color: #d8f2dc; }
.sf-session-tag.is-live .sf-session-tag-lamp { background: var(--sf-ok); color: var(--sf-ok); }

/* The mechanical readout */
.sf-readout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  align-items: flex-end;
  padding: clamp(0.9rem, 2.2vw, 1.3rem) clamp(1rem, 2.4vw, 1.5rem);
}

.sf-readout-block { min-width: 0; }

.sf-readout-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}

/* Digits sit in a recessed window, each on its own drum. */
.sf-drums {
  display: inline-flex;
  gap: 3px;
  align-items: stretch;
  padding: 6px;
  border-radius: 3px;
  background: #120c08;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 226, 184, 0.07);
}

.sf-drum {
  display: grid;
  place-items: center;
  min-width: clamp(20px, 3vw, 28px);
  padding: clamp(0.2rem, 0.6vw, 0.34rem) 0.1rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #f2ece0 0%, #cfc7b6 48%, #efe9dd 52%, #b8b0a0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #221a10;
}

.sf-drum--sep {
  min-width: 0;
  padding-inline: 0.16rem;
  background: none;
  box-shadow: none;
  color: var(--sf-brass);
}

.sf-drum--unit {
  min-width: 0;
  align-self: center;
  padding: 0.28rem 0.42rem;
  background: none;
  box-shadow: none;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-brass-lit);
}

.sf-readout-hint {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.7rem;
  color: var(--sf-ink-soft);
}

/* Engraved plate of account facts. */
.sf-plate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  flex: 1 1 320px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 226, 184, 0.09);
}

.sf-engrave {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(180deg, #2e2016, #241811);
  min-width: 0;
}

.sf-engrave-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}

.sf-engrave-value {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sf-ink);
}

.sf-engrave-denom {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sf-ink-soft);
}

.sf-engrave.is-warn .sf-engrave-value { color: var(--sf-warn); }

/* Register keys */
.sf-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0 clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.4rem);
}

.sf-key {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #3a2a1c 0%, #2a1c13 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.14),
    0 4px 0 #14100b,
    0 8px 16px rgba(8, 5, 3, 0.5);
  color: var(--sf-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.sf-key .icon { color: var(--sf-brass-lit); }

.sf-key--main {
  background: linear-gradient(180deg, #e7ba76 0%, #c28f48 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.75),
    0 4px 0 #7d5520,
    0 8px 18px rgba(8, 5, 3, 0.5);
  color: #2c1d08;
}

.sf-key--main .icon { color: #2c1d08; }

/* Keys travel when struck. */
.sf-key:hover { transform: translateY(-1px); }

.sf-key:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.1), 0 1px 0 #14100b, 0 2px 6px rgba(8, 5, 3, 0.5);
}

/* ── Shelf tags (metrics) ────────────────────────────────────────────────── */

body.view-app-active .overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: clamp(0.6rem, 1.6vw, 1rem);
}

/* A printed card seated in a holder on the shelf lip — not a dark panel.
   Ink on cream is what makes these read instantly as shop labels. */
.sf-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.7rem 0.85rem 0.95rem;
  border-radius: 2px 2px 3px 3px;
  background:
    linear-gradient(178deg, #f6efdd 0%, #eae0c8 58%, #ded3b8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 22px rgba(8, 5, 3, 0.45);
  color: var(--sf-paper-ink);
}

/* The dark holder the card is slotted into. */
.sf-tag::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #46331f, #241811);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.16);
}

.sf-tag-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(58, 47, 33, 0.62);
}

.sf-tag-value {
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: #241d12;
}

.sf-tag-value--text {
  overflow: hidden;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-tag-denom {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(58, 47, 33, 0.55);
}

.sf-tag-sub {
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(58, 47, 33, 0.72);
}

/* Printed rule, filled in with ink. */
.sf-tag-meter {
  height: 5px;
  margin-top: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(58, 47, 33, 0.16);
}

.sf-tag-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6a2c, #b8913f);
}

/* Stamped on with a rubber stamp, slightly off-square. */
.sf-tag-stamp {
  align-self: flex-start;
  margin-top: 0.28rem;
  padding: 0.16rem 0.46rem;
  border: 1.5px solid currentcolor;
  border-radius: 2px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1.6deg);
}

.sf-tag-stamp--ok { color: #2f7a3f; }
.sf-tag-stamp--warn { color: #9a6412; }
.sf-tag-stamp--bad { color: #ab2b21; }

/* Something needing attention gets a marker line down the edge. */
.sf-tag.is-warn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 2px 0 0 0;
  background: #c8892a;
}

.sf-tag--action {
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.sf-tag--action:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 16px 30px rgba(8, 5, 3, 0.5);
}

.sf-tag--action:focus-visible {
  outline: 2px solid var(--sf-brass-lit);
  outline-offset: 3px;
}

/* ── Pinned note (alerts) ────────────────────────────────────────────────── */

.sf-note {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: center;
  padding: 0.9rem 1.1rem 0.95rem;
  border-radius: 1px;
  background: linear-gradient(162deg, var(--sf-paper-note) 0%, #e2cd8c 100%);
  box-shadow: 0 12px 28px rgba(8, 5, 3, 0.5);
  color: #3a2f16;
  transform: rotate(-0.5deg);
}

.sf-note-pin {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9c8c, #c33a2c 66%, #7d1c14);
  box-shadow: 0 2px 4px rgba(40, 20, 10, 0.5);
  transform: translateX(-50%);
}

.sf-note-copy {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.sf-note-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.94rem;
  color: #2c2210;
}

.sf-note .btn-link {
  color: #6d4d12;
  font-weight: 700;
  text-decoration: underline;
}

.sf-note-key {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a2a1c, #241811);
  box-shadow: 0 3px 0 #150f0a, 0 6px 14px rgba(8, 5, 3, 0.4);
  color: var(--sf-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.sf-note-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #150f0a; }

body.view-app-active .friendship-status-banner {
  border: 1px solid rgba(58, 47, 33, 0.28);
  border-radius: 3px;
  background: linear-gradient(178deg, #f6efdd 0%, #e8ddc4 100%);
  box-shadow: 0 12px 28px rgba(8, 5, 3, 0.45);
  color: #241d12;
}

body.view-app-active .friendship-status-banner--pending {
  border-color: rgba(168, 118, 47, 0.45);
  background: linear-gradient(178deg, #faf4e4 0%, #eee2c8 100%);
}

body.view-app-active .friendship-status-banner-icon {
  background: rgba(58, 47, 33, 0.08);
  color: #8a6127;
}

body.view-app-active .friendship-status-banner-copy span,
body.view-app-active .friendship-status-banner-foot {
  color: rgba(58, 47, 33, 0.72) !important;
}

/* ── Punch clock (unlock session) ────────────────────────────────────────── */

.sf-clock {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  align-items: center;
  padding: clamp(0.9rem, 2.2vw, 1.2rem) clamp(1rem, 2.4vw, 1.4rem);
  overflow: hidden;
  border: 1px solid rgba(127, 201, 138, 0.26);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(127, 201, 138, 0.07), transparent 34%),
    linear-gradient(180deg, #2b2116 0%, #201610 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.1), 0 14px 32px rgba(8, 5, 3, 0.5);
}

.sf-clock-face {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe6b8, #c9964e 62%, #8a5f25);
  box-shadow: inset 0 -2px 5px rgba(70, 44, 10, 0.5), 0 6px 14px rgba(8, 5, 3, 0.5);
  color: #2c1d08;
}

.sf-clock-body {
  flex: 1 1 220px;
  min-width: 0;
}

.sf-clock-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: center;
}

.sf-clock-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sf-ink);
}

.sf-clock-live {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-ok);
}

.sf-clock-live span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-ok);
  box-shadow: 0 0 8px var(--sf-ok);
}

/* Credits are punched holes on a card. */
.sf-punches {
  display: inline-flex;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 2px;
  background: rgba(18, 12, 8, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sf-punch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 226, 184, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.sf-punch.is-left {
  background: radial-gradient(circle at 36% 30%, var(--sf-brass-lit), var(--sf-brass) 70%);
  box-shadow: 0 0 8px rgba(255, 220, 164, 0.6);
}

.sf-clock-credits {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--sf-ink-soft);
}

.sf-clock-count {
  flex: 1 1 190px;
  min-width: 0;
}

.sf-clock-count-top {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  justify-content: space-between;
}

.sf-clock-count-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}

.sf-clock-count-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sf-brass-lit);
}

.sf-clock-track {
  height: 5px;
  margin-top: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 226, 184, 0.1);
}

.sf-clock-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sf-ok), #b6e8bd);
  box-shadow: 0 0 10px rgba(127, 201, 138, 0.5);
  transition: width 1s linear;
}

.sf-clock-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.66rem;
  color: var(--sf-ink-faint);
}

/* startSessionTimer toggles `is-urgent` on #session-expiry-wrap, so urgency is
   styled from the countdown outward rather than on the clock body. */
.sf-clock-count.is-urgent .sf-clock-count-value { color: var(--sf-bad); }

.sf-clock-count.is-urgent .sf-clock-fill {
  background: linear-gradient(90deg, var(--sf-bad), #ffa79a);
  box-shadow: 0 0 10px rgba(240, 112, 95, 0.5);
}

/* ── Receipt roll (recent gifts) ─────────────────────────────────────────── */

body.view-app-active #recent-gifts-panel {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

body.view-app-active #recent-gifts-panel::before { display: none; }

body.view-app-active .overview-recent-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.9rem;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #3a2a1c, #241811);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.12);
}

body.view-app-active .overview-recent-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: rgba(207, 160, 89, 0.16);
  color: var(--sf-brass-lit);
}

body.view-app-active .recent-gifts-count {
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--sf-brass-dim);
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-brass-lit);
}

/* The paper itself, torn along the bottom. */
body.view-app-active .recent-gifts-list {
  display: block;
  padding: 0.9rem 1.1rem 1.5rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(58, 47, 33, 0.07) 27px 28px),
    linear-gradient(180deg, var(--sf-paper-warm), var(--sf-paper));
  color: var(--sf-paper-ink);
  box-shadow: 0 16px 34px rgba(8, 5, 3, 0.5);
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(7px 6px at 7px 0, transparent 98%, #000 100%);
  mask-image: linear-gradient(#000 0 0), radial-gradient(7px 6px at 7px 0, transparent 98%, #000 100%);
  -webkit-mask-size: 100% calc(100% - 6px), 14px 6px;
  mask-size: 100% calc(100% - 6px), 14px 6px;
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}

.sf-receipt-head {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(58, 47, 33, 0.35);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(58, 47, 33, 0.62);
}

.sf-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.15rem 0.65rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(58, 47, 33, 0.22);
}

.sf-line:last-child { border-bottom: none; }

.sf-line-thumb {
  grid-row: 1 / span 3;
  align-self: start;
  width: 36px;
  height: 36px;
  margin-top: 0.1rem;
  overflow: hidden;
  border-radius: 8px;
  /* Dark recessed well so light/white Fortnite art stays readable on cream paper. */
  border: 1px solid rgba(20, 14, 8, 0.42);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 236, 205, 0.12), transparent 58%),
    linear-gradient(180deg, #2c2318 0%, #14100c 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

.sf-line-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 2px;
  box-sizing: border-box;
}

.sf-line-thumb-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(233, 208, 172, 0.78);
}

.sf-line-thumb-fallback .icon {
  width: 16px;
  height: 16px;
}

.sf-line-item {
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-line-when {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: rgba(58, 47, 33, 0.66);
}

.sf-line-to {
  grid-column: 2 / -1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(58, 47, 33, 0.72);
}

.sf-line-slot {
  grid-column: 2 / -1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.64rem;
  color: rgba(58, 47, 33, 0.6);
}

.sf-line-track {
  flex: 1 1 auto;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(58, 47, 33, 0.16);
}

.sf-line-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(58, 47, 33, 0.5);
}

/* The empty state prints on the roll too — the base rules colour it for a dark
   panel, which left white text on cream paper. */
body.view-app-active .recent-gifts-empty {
  padding: 1.9rem 1.5rem 1.6rem;
  color: rgba(58, 47, 33, 0.72);
}

body.view-app-active .recent-gifts-empty p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #241d12;
}

body.view-app-active .recent-gifts-empty-sub { color: rgba(58, 47, 33, 0.66); }

body.view-app-active .recent-gifts-empty-icon {
  width: 44px;
  height: 44px;
  border: 1.5px dashed rgba(58, 47, 33, 0.3);
  border-radius: 3px;
  background: rgba(58, 47, 33, 0.05);
  box-shadow: none;
  color: rgba(58, 47, 33, 0.55);
}

.sf-receipt-foot {
  padding-top: 0.6rem;
  margin-top: 0.5rem;
  border-top: 1px dashed rgba(58, 47, 33, 0.35);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(58, 47, 33, 0.5);
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */

.sf-skeleton {
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 226, 184, 0.06), rgba(255, 226, 184, 0.13), rgba(255, 226, 184, 0.06));
  background-size: 200% 100%;
  animation: sfShimmer 1.5s ease-in-out infinite;
}

/* Placeholders printed on a card need ink, not light. */
.sf-tag .sf-skeleton {
  background: linear-gradient(90deg, rgba(58, 47, 33, 0.1), rgba(58, 47, 33, 0.2), rgba(58, 47, 33, 0.1));
  background-size: 200% 100%;
}

@keyframes sfShimmer {
  from { background-position: 180% 0; }
  to { background-position: -60% 0; }
}

/* ── Panel entrance ──────────────────────────────────────────────────────── */

body.view-app-active .app-tab-panel.active {
  animation: sfPanelIn 0.42s var(--motion-ease-out) both;
}

@keyframes sfPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  body.view-app-active .page-intro-body {
    flex-direction: column;
    align-items: stretch;
  }

  body.view-app-active .page-intro-actions { align-self: flex-start; }
  .sf-readout { flex-direction: column; align-items: stretch; }
  .sf-plate { flex: 1 1 auto; }
}

/* Under 1024px the base layout turns the nav into a horizontal scroller, so the
   rail lies down with it and the brackets move to the top of each plate. */
@media (max-width: 1023px) {
  /* Keep the department strip inside the viewport; the plates scroll inside. */
  body.view-app-active .portal-body {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  /* The base drops the nav to `static` here, so give the rail something to
     anchor to without reintroducing the sticky offset. */
  body.view-app-active .app-tabs {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Horizontal inset comes from first-tab margin + ::after spacer so the
       last plate isn't clipped mid-label against the panel edge. */
    padding: 1.5rem 0 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-padding-inline: 0.7rem;
    scroll-snap-type: x proximity;
    gap: 0.35rem;
    /* Brass rail on the scrollport chrome — ::before is a scrolling child and
       was sliding away mid-swipe, so the bar looked cut off. */
    background-image:
      linear-gradient(180deg, var(--sf-brass-lit), var(--sf-brass) 45%, #7d5520),
      linear-gradient(180deg, #35251a, #2a1c13 40%, #1f150e 100%);
    background-size: calc(100% - 1.4rem) 3px, auto;
    background-position: 0.7rem 0.7rem, 0 0;
    background-repeat: no-repeat;
  }

  body.view-app-active .app-tabs::before,
  body.view-app-active .app-tabs-group::before {
    display: none;
  }

  /* Trailing scroll spacer (base stylesheet also defines this; keep aligned). */
  body.view-app-active .app-tabs::after {
    content: '';
    flex: 0 0 0.7rem;
    width: 0.7rem;
    height: 1px;
    pointer-events: none;
    order: 999;
  }

  body.view-app-active .app-tabs-group {
    flex-direction: row;
    align-items: center;
  }


  body.view-app-active .app-tab {
    scroll-snap-align: start;
  }

  body.view-app-active .app-tabs-group:first-child .app-tab:first-of-type {
    margin-left: 0.7rem;
  }

  body.view-app-active .app-tab::before {
    top: -0.62rem;
    left: 50%;
    width: 1px;
    height: 0.62rem;
    transform: translateX(-50%);
  }

  body.view-app-active .app-tab:hover { transform: translateY(-2px); }
}

@media (max-width: 620px) {
  body.view-app-active .app-tabs {
    padding-top: 1.35rem;
  }

  body.view-app-active .app-tabs-group:first-child .app-tab:first-of-type {
    margin-left: 0.55rem;
  }

  body.view-app-active .app-tabs::after {
    flex-basis: 0.55rem;
    width: 0.55rem;
  }

  .sf-keys { flex-direction: column; }
  .sf-key { justify-content: center; }
  .sf-drum { font-size: 1.3rem; min-width: 19px; }
  body.view-app-active .recent-gifts-list { padding-inline: 0.8rem; }
}

/* ── Reduced motion & lite mode ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sf-mote,
  .sf-skeleton {
    animation: none !important;
  }

  .sf-mote { display: none; }

  body.view-app-active .app-tab-panel.active { animation: none; }
}

html.perf-balanced .sf-wall::after {
  display: none !important;
}

html.perf-balanced body.view-app-active .panel,
html.perf-balanced body.view-app-active .card,
html.perf-balanced body.view-app-active .glass,
html.perf-balanced body.view-app-active .portal-card,
html.perf-balanced body.view-app-active .app-tabs {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-lite .sf-motes,
html.perf-lite .sf-wall::after {
  display: none !important;
}

html.perf-lite .sf-skeleton { animation: none !important; }

html.perf-lite body.view-app-active .panel,
html.perf-lite body.view-app-active .card,
html.perf-lite body.view-app-active .glass,
html.perf-lite body.view-app-active .portal-card,
html.perf-lite body.view-app-active .app-tabs {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}