/* ============================================================
   LAPIS — CWC Master Recipe Ebook Design System (Vol 1 - 24)
   Mobile-first, responsive, zero dependencies.
   Material: Refined Liquid Glass with user-adjustable clarity.
   Type: Plus Jakarta Sans.
   ============================================================ */

@layer lapis.tokens, lapis.base, lapis.material, lapis.components, lapis.ebook, lapis.utils;

/* ---------- 1. TOKENS ------------------------------------- */
@layer lapis.tokens {
  :root {
    --paper:        #F7F6F3;
    --paper-2:      #EDEBE6;
    --paper-3:      #E4E1DA;
    --ink:          #101512;
    --ink-2:        #4A534E;
    --ink-3:        #8A928D;
    --line:         #101512;

    --pandan:       #1E6F52;   /* Primary culinary action */
    --pandan-dark:  #144D39;
    --pandan-soft:  #E3EFE9;
    --kunyit:       #E8A33D;   /* Time, heat, ratings, gold badges */
    --kunyit-soft:  #FBF2E3;
    --chilli:       #C4442C;   /* Destructive / alert */

    /* Glass tokens — clarity is user-tunable (0 = tinted, 1 = crystal clear) */
    --glass-clarity: 0.45;
    --glass-tint:   255 255 255;
    --glass-alpha:  calc(0.88 - (var(--glass-clarity) * 0.36));
    --glass-blur:   28px;
    --glass-sat:    1.7;
    --glass-edge:   rgb(255 255 255 / 0.55);
    --glass-shade:  rgb(16 21 18 / 0.10);

    /* Typography — Plus Jakarta Sans, 1.200 scale */
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --t-cap:   0.75rem;   /* 12px */
    --t-fine:  0.875rem;  /* 14px */
    --t-body:  1rem;      /* 16px */
    --t-lead:  1.1875rem; /* 19px */
    --t-sub:   1.4375rem; /* 23px */
    --t-title: 1.75rem;   /* 28px */
    --t-display: clamp(2rem, 7vw, 3.25rem);

    --lh-tight: 1.1;
    --lh-read:  1.62;
    --tr-tight: -0.03em;
    --tr-body:  -0.011em;

    /* 4pt Spacing rhythm */
    --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
    --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;

    /* Corner Radii */
    --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
    --hair: 0.5px solid rgb(16 21 18 / 0.10);

    /* Motion Curves */
    --ease: linear(0,.006,.025,.101 6.3%,.18,.267,.362,.461,.562,.66,.752,.834,.903 26.6%,.93,.954,.973,.988,.999,1.007,1.011 38.5%,1.012,1.008,1.004,1.001,.999 55.5%,.999,1);
    --dur: 420ms;
    --dur-fast: 200ms;

    /* Responsive boundaries */
    --reach: 660px;
    --wide: 1160px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:        #0D110F;
      --paper-2:      #161C19;
      --paper-3:      #1F2723;
      --ink:          #F1F3F1;
      --ink-2:        #A8B1AC;
      --ink-3:        #6C756F;
      --pandan:       #4FBE8E;
      --pandan-dark:  #389A70;
      --pandan-soft:  #163025;
      --kunyit-soft:  #2B2313;
      --glass-tint:   32 40 36;
      --glass-alpha:  calc(0.86 - (var(--glass-clarity) * 0.34));
      --glass-edge:   rgb(255 255 255 / 0.14);
      --glass-shade:  rgb(0 0 0 / 0.42);
      --hair:         0.5px solid rgb(255 255 255 / 0.12);
    }
  }

  :root[data-theme="dark"] {
    --paper:        #0D110F;
    --paper-2:      #161C19;
    --paper-3:      #1F2723;
    --ink:          #F1F3F1;
    --ink-2:        #A8B1AC;
    --ink-3:        #6C756F;
    --pandan:       #4FBE8E;
    --pandan-dark:  #389A70;
    --pandan-soft:  #163025;
    --kunyit-soft:  #2B2313;
    --glass-tint:   32 40 36;
    --glass-alpha:  calc(0.86 - (var(--glass-clarity) * 0.34));
    --glass-edge:   rgb(255 255 255 / 0.14);
    --glass-shade:  rgb(0 0 0 / 0.42);
    --hair:         0.5px solid rgb(255 255 255 / 0.12);
    color-scheme: dark;
  }

  :root[data-theme="light"] {
    --paper:        #F7F6F3;
    --paper-2:      #EDEBE6;
    --paper-3:      #E4E1DA;
    --ink:          #101512;
    --ink-2:        #4A534E;
    --ink-3:        #8A928D;
    --pandan:       #1E6F52;
    --pandan-dark:  #144D39;
    --pandan-soft:  #E3EFE9;
    --kunyit-soft:  #FBF2E3;
    --glass-tint:   255 255 255;
    --glass-alpha:  calc(0.88 - (var(--glass-clarity) * 0.36));
    --glass-edge:   rgb(255 255 255 / 0.55);
    --glass-shade:  rgb(16 21 18 / 0.10);
    --hair:         0.5px solid rgb(16 21 18 / 0.10);
    color-scheme: light;
  }
}

/* ---------- 2. BASE --------------------------------------- */
@layer lapis.base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: var(--lh-read);
    letter-spacing: var(--tr-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  h1, h2, h3, h4 {
    margin: 0; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 800;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-title); }
  h2 { font-size: var(--t-sub); }
  h3 { font-size: var(--t-lead); font-weight: 700; }
  p  { margin: 0 0 var(--s3); max-width: 68ch; text-wrap: pretty; }
  a  { color: inherit; text-decoration: none; }
  img, video { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; cursor: pointer; }

  :where(a, button, [tabindex]):focus-visible {
    outline: 2.5px solid var(--pandan);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/* ---------- 3. MATERIAL: LIQUID GLASS --------------------- */
@layer lapis.material {
  .lp-glass {
    background: rgb(var(--glass-tint) / var(--glass-alpha));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: var(--hair);
    box-shadow:
      inset 0 1px 0 var(--glass-edge),
      0 2px 4px var(--glass-shade),
      0 12px 32px -12px var(--glass-shade);
  }

  .lp-glass--over-media::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(rgb(var(--glass-tint) / 0.0), rgb(var(--glass-tint) / 0.24));
    pointer-events: none;
  }

  @supports not (backdrop-filter: blur(1px)) {
    .lp-glass { background: rgb(var(--glass-tint) / 0.96); }
  }
}

/* ---------- 4. COMPONENTS --------------------------------- */
@layer lapis.components {
  /* 4.1 VESSEL */
  .lp-vessel {
    position: relative;
    display: flex; flex-direction: column; height: 100%;
    width: 100%; text-align: left;
    background: var(--paper-2);
    border: var(--hair);
    border-radius: var(--r-lg);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .lp-vessel:hover {
    box-shadow: 0 8px 24px -6px var(--glass-shade);
  }
  .lp-vessel:active { transform: scale(0.98); }

  .lp-vessel__body {
    padding: var(--s4) var(--s4) var(--s5);
    flex: 1; display: flex; flex-direction: column;
  }
  .lp-vessel__kicker {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--t-cap); font-weight: 700; color: var(--pandan);
    margin-bottom: var(--s2);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .lp-vessel__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-lead); font-weight: 700;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    line-height: 1.25;
    min-height: 2.5em;
  }
  .lp-vessel__meta {
    display: flex; align-items: center; gap: var(--s3);
    font-size: var(--t-fine); color: var(--ink-2);
    margin-top: auto; padding-top: var(--s3); flex-wrap: wrap;
  }

  /* Page State — Vessel becomes full screen Reader */
  .lp-vessel[data-state="page"] {
    display: block; height: auto;
    border-radius: 0; border: 0; background: var(--paper);
    position: fixed; inset: 0; z-index: 40;
    overflow-y: auto; overscroll-behavior: contain; cursor: default;
  }
  .lp-vessel[data-state="page"] .lp-vessel__title {
    display: block; -webkit-line-clamp: unset; min-height: unset;
    font-size: var(--t-display); font-weight: 800;
  }
  .lp-vessel[data-state="page"]:active { transform: none; }
  .lp-vessel[data-state="page"]:hover { box-shadow: none; }
  .lp-vessel[data-state="page"] .lp-vessel__body {
    max-width: var(--reach); margin-inline: auto;
    padding: var(--s4) var(--s4) calc(var(--s8) + var(--safe-b) + 40px);
  }
  .lp-vessel[data-state="page"] .lp-vessel__title {
    font-size: var(--t-display); font-weight: 800;
    margin-top: var(--s2); margin-bottom: var(--s3);
  }

  /* 4.2 BAR */
  .lp-bar {
    view-transition-name: lp-bar;
    position: fixed; z-index: 50;
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--s4) + var(--safe-b));
    width: min(calc(100% - var(--s5)), 540px);
    border-radius: var(--r-pill);
    padding: var(--s2);
    display: flex; align-items: center; gap: var(--s1);
    transition: width var(--dur) var(--ease), border-radius var(--dur) var(--ease),
                padding var(--dur) var(--ease), bottom var(--dur) var(--ease);
  }
  .lp-bar__tab {
    flex: 1; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; gap: 4px;
    padding: var(--s2) var(--s1); border-radius: var(--r-pill);
    font-size: var(--t-cap); font-weight: 600; color: var(--ink-3);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    min-height: 44px;
  }
  .lp-bar__tab[aria-selected="true"] { color: var(--ink); background: rgb(var(--glass-tint) / 0.65); font-weight: 700; }
  .lp-bar__tab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

  /* Bar state: search */
  .lp-bar[data-state="search"] { border-radius: var(--r-lg); padding: var(--s3); }
  .lp-bar[data-state="search"] .lp-bar__tab { display: none; }
  .lp-bar__field {
    display: none; width: 100%; border: 0; background: none;
    font: inherit; font-size: var(--t-body); padding: var(--s2) var(--s3);
    color: var(--ink);
  }
  .lp-bar__field:focus { outline: none; }
  .lp-bar[data-state="search"] .lp-bar__field { display: block; }
  .lp-bar__search-close {
    display: none; border: 0; background: none; color: var(--ink-2);
    font-size: var(--t-cap); font-weight: 700; padding: var(--s2) var(--s3);
  }
  .lp-bar[data-state="search"] .lp-bar__search-close { display: block; }

  /* Bar state: cooking */
  .lp-bar[data-state="cooking"] { border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
  .lp-bar[data-state="cooking"] .lp-bar__tab { display: none; }
  .lp-bar__live { display: none; width: 100%; align-items: center; gap: var(--s3); }
  .lp-bar[data-state="cooking"] .lp-bar__live { display: flex; }
  .lp-bar__step { flex: 1; font-size: var(--t-fine); line-height: 1.35; overflow: hidden; }
  .lp-bar__step b { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-cap); color: var(--kunyit); font-weight: 800; }
  .lp-bar__step span {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--ink);
  }

  /* 4.3 MEDIA */
  .lp-media {
    position: relative; display: block; width: 100%;
    aspect-ratio: var(--ratio, 4 / 3);
    background: var(--paper-3);
    border-radius: var(--r-md);
    overflow: hidden; border: 0; padding: 0; cursor: pointer;
  }
  .lp-media > img, .lp-media > video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 450ms var(--ease);
  }
  .lp-media > img[data-loaded], .lp-media > video[data-loaded] { opacity: 1; }
  .lp-media > video { display: none; }
  .lp-media[data-state="playing"] > img { display: none; }
  .lp-media[data-state="playing"] > video { display: block; }
  .lp-media[data-state="playing"] { cursor: default; }

  .lp-media__fallback {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--s4);
    background: radial-gradient(circle at 80% 20%, rgb(30 111 82 / 0.25) 0%, rgb(30 111 82 / 0.05) 50%, transparent 100%), var(--paper-3);
    color: var(--ink);
    border: var(--hair);
  }
  .lp-media__fallback-top {
    display: flex; justify-content: space-between; align-items: center;
  }
  .lp-media__fallback-vol {
    font-size: var(--t-cap); font-weight: 800; color: var(--pandan);
    background: var(--pandan-soft); padding: 2px 8px; border-radius: var(--r-pill);
  }
  .lp-media__fallback-center {
    margin-block: auto; text-align: center; opacity: 0.25;
  }
  .lp-media__fallback-center svg { width: 48px; height: 48px; fill: currentColor; }
  .lp-media__fallback-bottom {
    font-size: var(--t-fine); font-weight: 700; color: var(--ink-2);
  }

  .lp-media__cue {
    position: absolute; inset-inline-start: var(--s3); inset-block-end: var(--s3);
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3) var(--s2) var(--s2);
    border-radius: var(--r-pill); font-size: var(--t-cap); font-weight: 700;
    color: var(--ink);
  }
  .lp-media[data-state="playing"] .lp-media__cue { display: none; }
  .lp-media__cue svg { width: 14px; height: 14px; fill: currentColor; }

  .lp-vessel[data-state="page"] .lp-media { --ratio: 16 / 9; border-radius: 0; }
  .lp-vessel:not([data-state="page"]) > .lp-media:first-child {
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
  }

  /* 4.4 PILL */
  .lp-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 44px; padding: 0 var(--s5);
    border: var(--hair); border-radius: var(--r-pill);
    background: var(--paper-2); color: var(--ink);
    font-size: var(--t-fine); font-weight: 700; letter-spacing: var(--tr-body);
    cursor: pointer; white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), min-width var(--dur) var(--ease);
  }
  .lp-pill:active { transform: scale(0.96); }
  .lp-pill--primary { background: var(--pandan); color: #fff; border-color: transparent; }
  .lp-pill--primary:hover { background: var(--pandan-dark); }
  .lp-pill--quiet { background: none; border-color: transparent; color: var(--ink-2); padding-inline: var(--s3); }
  .lp-pill--sm { min-height: 34px; padding: 0 var(--s3); font-size: var(--t-cap); }
  .lp-pill[aria-pressed="true"] { background: var(--pandan-soft); color: var(--pandan); border-color: transparent; }
  .lp-pill[data-state="busy"] { min-width: 44px; padding: 0; pointer-events: none; }
  .lp-pill[data-state="busy"] .lp-pill__label { display: none; }
  .lp-pill[data-state="busy"]::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: lp-spin 700ms linear infinite;
  }
  @keyframes lp-spin { to { transform: rotate(360deg); } }

  /* 4.5 SHEET */
  .lp-sheet { border: 0; padding: 0; background: none; max-width: 100%; width: 100%; }
  .lp-sheet::backdrop { background: rgb(6 10 8 / 0.45); backdrop-filter: blur(4px); }
  .lp-sheet[open] { position: fixed; inset: auto 0 0 0; margin: 0; }
  .lp-sheet__panel {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--s3) var(--s4) calc(var(--s6) + var(--safe-b));
    max-height: 86vh; overflow-y: auto;
    margin-inline: auto; width: 100%; max-width: 580px;
    animation: lp-rise var(--dur) var(--ease);
    color: var(--ink);
  }
  @keyframes lp-rise { from { transform: translateY(100%); } }
  .lp-sheet__grip {
    width: 44px; height: 5px; border-radius: var(--r-pill);
    background: var(--ink-3); opacity: .45; margin: 0 auto var(--s4);
  }
  @media (min-width: 720px) {
    .lp-sheet[open] { inset: 0; display: grid; place-items: center; }
    .lp-sheet__panel { border-radius: var(--r-xl); max-width: 500px; }
    @keyframes lp-rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
  }
}

/* ---------- 5. EBOOK SPECIALIZED LAYER --------------------- */
@layer lapis.ebook {
  /* Volume horizontal scroll rail */
  .lp-vol-rail-wrap {
    position: relative;
    margin-block: var(--s2);
  }
  .lp-vol-rail {
    display: flex; gap: var(--s2); overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--s2) var(--s4);
    -webkit-overflow-scrolling: touch;
  }
  .lp-vol-rail::-webkit-scrollbar { display: none; }
  .lp-vol-btn {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    border: var(--hair); background: var(--paper-2);
    font-size: var(--t-fine); font-weight: 700; color: var(--ink-2);
    transition: all var(--dur-fast) var(--ease);
    min-height: 38px;
  }
  .lp-vol-btn[data-active="true"] {
    background: var(--pandan); color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px -2px rgb(30 111 82 / 0.4);
  }
  .lp-vol-btn .count-tag {
    font-size: var(--t-cap); opacity: 0.8; font-weight: 600;
  }

  /* Interactive Ingredients checklist */
  .lp-ing-section { margin-block: var(--s5); }
  .lp-ing-heading {
    font-size: var(--t-lead); font-weight: 700; color: var(--ink);
    margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2);
  }
  .lp-ing-list { list-style: none; padding: 0; margin: 0; }
  .lp-ing-item {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) 0;
    border-block-start: var(--hair);
    cursor: pointer;
    transition: opacity var(--dur-fast) ease;
  }
  .lp-ing-item:first-child { border-block-start: 0; }
  .lp-ing-checkbox {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid var(--ink-3);
    display: grid; place-items: center; flex-shrink: 0;
    margin-top: 2px; transition: all var(--dur-fast) var(--ease);
  }
  .lp-ing-item[data-checked="true"] .lp-ing-checkbox {
    background: var(--pandan); border-color: var(--pandan);
  }
  .lp-ing-item[data-checked="true"] .lp-ing-checkbox svg {
    display: block; width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.5;
  }
  .lp-ing-item:not([data-checked="true"]) .lp-ing-checkbox svg { display: none; }
  .lp-ing-text {
    flex: 1; font-size: var(--t-body); line-height: 1.45;
  }
  .lp-ing-item[data-checked="true"] .lp-ing-text {
    text-decoration: line-through; opacity: 0.45;
  }

  /* Reader Steps with Numbers */
  .lp-step-list { list-style: none; padding: 0; margin: 0; counter-reset: step-counter; }
  .lp-step-item {
    counter-increment: step-counter;
    display: flex; gap: var(--s4);
    padding: var(--s4) 0;
    border-block-start: var(--hair);
  }
  .lp-step-item:first-child { border-block-start: 0; }
  .lp-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pandan-soft); color: var(--pandan);
    font-size: var(--t-cap); font-weight: 800;
    display: grid; place-items: center; flex-shrink: 0;
    margin-top: 2px;
  }
  .lp-step-body { flex: 1; font-size: var(--t-body); line-height: var(--lh-read); }

  /* Chef Tips Box */
  .lp-tips-card {
    background: var(--kunyit-soft);
    border: 1px solid rgb(232 163 61 / 0.35);
    border-radius: var(--r-md);
    padding: var(--s4);
    margin-block: var(--s6);
    color: var(--ink);
  }
  .lp-tips-header {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--t-fine); font-weight: 800; color: var(--kunyit);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s2);
  }
  .lp-tips-content {
    font-size: var(--t-fine); line-height: 1.55; white-space: pre-line;
  }

  /* Reader sticky top actions bar */
  .lp-reader-nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3);
    gap: var(--s2);
  }

  /* Badge styling */
  .badge-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: var(--t-cap); font-weight: 700;
  }
  .badge-tag--gold { background: var(--kunyit-soft); color: var(--kunyit); }
  .badge-tag--pandan { background: var(--pandan-soft); color: var(--pandan); }
}

/* ---------- 6. UTILITIES ---------------------------------- */
@layer lapis.utils {
  .lp-wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--s4); }
  .lp-shelf { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
  @media (min-width: 580px) { .lp-shelf { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .lp-shelf { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
  .lp-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .lp-pad-bar { padding-block-end: calc(var(--s8) + var(--safe-b) + 20px); }
  .lp-fine { font-size: var(--t-fine); color: var(--ink-2); }
  .lp-cap  { font-size: var(--t-cap); color: var(--ink-3); font-weight: 600; }
  .lp-hidden { display: none !important; }
}

/* Morph transitions */
::view-transition-group(*) { animation-duration: var(--dur); animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: lp-fade-out 180ms both; }
::view-transition-new(root) { animation: lp-fade-in 240ms both; }
@keyframes lp-fade-out { to { opacity: 0; } }
@keyframes lp-fade-in { from { opacity: 0; } }

/* ---------- 7. ACCESS LOCK GATE & FALLBACK STYLES ---------- */
.lp-pill--gold {
  background: linear-gradient(135deg, #d4af37, #b89728) !important;
  color: #07080b !important;
  font-weight: 800 !important;
  border-color: transparent !important;
}
.lp-pill--gold:hover {
  background: linear-gradient(135deg, #e6c66e, #c5a033) !important;
}
.lp-glass--lock {
  background: rgba(220, 38, 38, 0.88) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.lp-glass--sample {
  background: rgba(16, 185, 129, 0.92) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.lp-sample-banner {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-size: var(--t-fine);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.vol-lock-banner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(16, 21, 18, 0.6));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--t-fine);
}