@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap);
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 0 0% 3.9%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
    }
    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
    }
    * {
  border-color: hsl(0 0% 89.8%);
  border-color: hsl(var(--border));
}
    body {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}
    [data-debug-wrapper="true"] {
        display: contents !important;
    }

    [data-debug-wrapper="true"] > * {
        margin-left: inherit;
        margin-right: inherit;
        margin-top: inherit;
        margin-bottom: inherit;
        padding-left: inherit;
        padding-right: inherit;
        padding-top: inherit;
        padding-bottom: inherit;
        column-gap: inherit;
        row-gap: inherit;
        gap: inherit;
        border-left-width: inherit;
        border-right-width: inherit;
        border-top-width: inherit;
        border-bottom-width: inherit;
        border-left-style: inherit;
        border-right-style: inherit;
        border-top-style: inherit;
        border-bottom-style: inherit;
        border-left-color: inherit;
        border-right-color: inherit;
        border-top-color: inherit;
        border-bottom-color: inherit;
    }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.\!inline {
  display: inline !important;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.w-10 {
  width: 2.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[1px\] {
  width: 1px;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -webkit-max-content;
  max-width: max-content;
}
.flex-1 {
  flex: 1 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(0.5rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(0.5rem - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(0.5rem - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-destructive {
  border-color: hsl(0 84.2% 60.2%);
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(0 84.2% 60.2% / 0.5);
  border-color: hsl(var(--destructive) / 0.5);
}
.border-input {
  border-color: hsl(0 0% 89.8%);
  border-color: hsl(var(--input));
}
.border-primary {
  border-color: hsl(0 0% 9%);
  border-color: hsl(var(--primary));
}
.border-primary\/50 {
  border-color: hsl(0 0% 9% / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}
.bg-background {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-border {
  background-color: hsl(0 0% 89.8%);
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--card));
}
.bg-destructive {
  background-color: hsl(0 84.2% 60.2%);
  background-color: hsl(var(--destructive));
}
.bg-foreground {
  background-color: hsl(0 0% 3.9%);
  background-color: hsl(var(--foreground));
}
.bg-muted {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(0 0% 96.1% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(0 0% 9%);
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(0 0% 9% / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(0 0% 9% / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-secondary {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--secondary));
}
.bg-transparent {
  background-color: transparent;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(0 0% 9%);
  fill: hsl(var(--primary));
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.leading-none {
  line-height: 1;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-foreground {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}
.text-card-foreground {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(0 84.2% 60.2%);
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--destructive-foreground));
}
.text-foreground {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(0 0% 3.9% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-muted-foreground {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}
.text-popover-foreground {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(0 0% 9%);
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}
.text-secondary-foreground {
  color: hsl(0 0% 9%);
  color: hsl(var(--secondary-foreground));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\!running {
  animation-play-state: running !important;
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}

body {
    margin: 0;
    background: #0A0A0A;
    color: #F5EBDD;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family:
        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.file\:border-0::-webkit-file-upload-button {
  border-width: 0px;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::-webkit-file-upload-button {
  background-color: transparent;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:text-sm::-webkit-file-upload-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::-webkit-file-upload-button {
  font-weight: 500;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-foreground::-webkit-file-upload-button {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.file\:text-foreground::file-selector-button {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(0.5rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.5rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child {
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(0.5rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.5rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.focus-within\:relative:focus-within {
  position: relative;
}

.focus-within\:z-20:focus-within {
  z-index: 20;
}

.hover\:bg-accent:hover {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(0 84.2% 60.2% / 0.8);
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(0 84.2% 60.2% / 0.9);
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-muted:hover {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(0 0% 96.1% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-primary:hover {
  background-color: hsl(0 0% 9%);
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/80:hover {
  background-color: hsl(0 0% 9% / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(0 0% 9% / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary:hover {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(0 0% 96.1% / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:text-accent-foreground:hover {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.hover\:text-foreground:hover {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.hover\:text-muted-foreground:hover {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary-foreground:hover {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.focus\:bg-accent:focus {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.focus\:bg-primary:focus {
  background-color: hsl(0 0% 9%);
  background-color: hsl(var(--primary));
}

.focus\:text-accent-foreground:focus {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.focus\:text-primary-foreground:focus {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}

.focus\:opacity-100:focus {
  opacity: 1;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(0 0% 96.1% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}

.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(0 0% 89.8%);
  border-color: hsl(var(--border));
}

.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--muted));
}

.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(0 0% 9%);
  background-color: hsl(var(--primary));
}

.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}

.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(0 84.2% 60.2% / 0.3);
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(0 84.2% 60.2%);
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(0 0% 98%);
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(0 0% 96.1% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(0 0% 9%);
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(0 0% 96.1% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(0 0% 89.8%);
  background-color: hsl(var(--input));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(0 0% 98%);
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(0 0% 9%);
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=active\]\:shadow[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dark\:border-destructive:is(.dark *) {
  border-color: hsl(0 84.2% 60.2%);
  border-color: hsl(var(--destructive));
}

@media (min-width: 640px) {

  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
    border-radius: var(--radius);
  }

  .sm\:text-left {
    text-align: left;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.\[\&\+div\]\:text-xs+div {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
  border-top-right-radius: calc(0.5rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.5rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
  border-top-left-radius: calc(0.5rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.5rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
  border-radius: calc(0.5rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(0 0% 96.1%);
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(0.5rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.5rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(0.5rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.5rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(0 0% 96.1% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(0.5rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.5rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}

.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(0 84.2% 60.2%);
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(0 0% 3.9%);
  color: hsl(var(--foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(0 0% 45.1%);
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

/**
 * Reading Shell — Claude/ChatGPT-style chat surface for /interpret.
 * Mobile-first. Dark charcoal #1C1C1E base. Sage primary, blush + cream accents.
 *
 * Layout: top bar + sticky tab strip + scrolling content + fixed composer.
 * Chart lives in a full-screen overlay panel (mobile) or side-drawer (desktop),
 * accessed from the top-right "Chart" button on every tab.
 */

:root {
  --rs-bg:        #141414;
  --rs-surface:   #242426;
  --rs-raise:     #2E2E30;
  --rs-border:    rgba(255, 255, 255, 0.08);
  --rs-border-mid:rgba(255, 255, 255, 0.14);
  --rs-white:     #FFFFFF;
  --rs-cream:     #F6F4F0;
  --rs-muted:     #C8C2B8;
  --rs-dim:       #7A756E;
  --rs-sage:      #8A9E8C;
  --rs-sage-dim:  #6B7D6C;
  --rs-blush:     #E6C2BF;
  --rs-blush-soft:#EFD3CC;
  --rs-gold:      #BC9F6E;
  --rs-sage-faint:rgba(138, 158, 140, 0.10);
  --rs-blush-faint:rgba(230, 194, 191, 0.10);
  --rs-serif:     'Playfair Display', serif;
  --rs-sans:      'Montserrat', sans-serif;
}

/* ── "The practice" inline panel (methodology) ────────────────────────
   Calm, ADHD-friendly onboarding card at the top of the Chat-with-Liora
   welcome view. Liora's intro CTA reveals + scrolls to it. Holds editable
   text now and a welcome video later. Disappears once a conversation starts. */
.rs-practice {
  flex: none;
  margin: 0 0 28px;
  border: 1px solid rgba(212, 165, 154, 0.32);
  border-radius: 18px;
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
  overflow: hidden;
}
.rs-practice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
}
.rs-practice-headtext { min-width: 0; }
.rs-practice-eyebrow {
  margin: 0 0 7px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E6C2BF;
  color: var(--rs-blush);
}
.rs-practice-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 23px;
  line-height: 1.25;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-practice-toggle {
  flex-shrink: 0;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid rgba(212, 165, 154, 0.45);
  border-radius: 999px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.rs-practice-toggle:hover {
  color: #FFFFFF;
  color: var(--rs-white);
  border-color: #E6C2BF;
  border-color: var(--rs-blush);
  background: rgba(212, 165, 154, 0.14);
}
.rs-practice-body { padding: 2px 0 24px; }
.rs-practice-body p {
  margin: 0 0 15px;
  max-width: none;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15.5px;
  line-height: 1.72;
  color: #F6F4F0;
  color: var(--rs-cream);
}
.rs-practice-body p:last-child { margin-bottom: 0; }
.rs-practice-video {
  position: relative;
  margin-top: 20px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.rs-practice-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Psychology of the Cycle (Using This App page) ──────────────────── */
.rs-practice-headline { font-size: 22px !important; line-height: 1.45 !important; }
.rs-psychology { margin-top: 16px; padding-top: 18px; border-top: 0.5px solid rgba(255, 255, 255, 0.14); border-top: 0.5px solid var(--rs-border-mid); text-align: center; }
.rs-psychology-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-size: 22px;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 18px;
}
.rs-psychology-title em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-psychology-p {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15.5px;
  line-height: 1.72;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0 auto 15px;
  max-width: 680px;
}
/* Desktop: eight phase-words arranged in a circle, echoing the lunar-cycle
   motif used elsewhere (moon-phase glyphs). Hidden under 760px — eight
   labelled points don't fit a narrow screen, so .rs-psych-chips (below)
   takes over there instead (same content, grid layout). */
.rs-psych-wheel {
  position: relative;
  width: 380px;
  height: 380px;
  margin: 0;
}
.rs-psych-wheel-wrap {
  max-width: 680px;
  display: flex;
  justify-content: center;
  margin: 41px auto 56px;
}
.rs-psych-wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 124px;
  margin-left: -62px;
  margin-top: -26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}
.rs-psych-wheel-num {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #BC9F6E;
  color: var(--rs-gold);
}
.rs-psych-wheel-word {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 18px;
  color: #F6F4F0;
  color: var(--rs-cream);
}
.rs-psych-chips { display: none; }
@media (max-width: 760px) {
  .rs-psych-wheel { display: none; }
  .rs-psych-wheel-wrap { display: none; }
  .rs-psych-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
    margin: 41px auto 41px;
    max-width: 680px;
  }
  .rs-psych-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-family: var(--rs-sans);
    font-size: 13.5px;
    color: #F6F4F0;
    color: var(--rs-cream);
  }
  .rs-psych-chip-num { color: #BC9F6E; color: var(--rs-gold); font-weight: 600; letter-spacing: 0.05em; }
}
/* Inline gold link to the Your Natal Chart tab — plain highlighted text,
   not a pill, sitting mid-sentence. */
.rs-psychology-chart-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0 1px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15.5px;
  font-weight: 600;
  color: #BC9F6E;
  color: var(--rs-gold);
  cursor: pointer;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(188, 159, 110, 0.4);
          text-decoration-color: rgba(188, 159, 110, 0.4);
  transition: color 0.15s ease;
}
.rs-psychology-chart-link:hover { color: #d8bd86; }
/* Research & References trigger — plain highlighted gold text, not a pill
   (Lisa's call: a pill here would feel bulky at the end of this block). */
.rs-psychology-refs-trigger {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15px;
  font-weight: 600;
  color: #BC9F6E;
  color: var(--rs-gold);
  cursor: pointer;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(188, 159, 110, 0.4);
          text-decoration-color: rgba(188, 159, 110, 0.4);
  transition: color 0.15s ease;
}
.rs-psychology-refs-trigger:hover { color: #d8bd86; }
.rs-refs-list { display: flex; flex-direction: column; gap: 22px; margin: 22px 0 28px; }
.rs-ref-item { max-width: 680px; }
.rs-ref-title {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15px;
  font-weight: 600;
  color: #BC9F6E;
  color: var(--rs-gold);
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(188, 159, 110, 0.4);
          text-decoration-color: rgba(188, 159, 110, 0.4);
  margin-bottom: 4px;
}
.rs-ref-title:hover { color: #d8bd86; }
.rs-ref-desc { font-family: 'Montserrat', sans-serif; font-family: var(--rs-sans); font-size: 14px; line-height: 1.6; color: #F6F4F0; color: var(--rs-cream); margin: 0 0 4px; }
.rs-ref-relevant { font-family: 'Montserrat', sans-serif; font-family: var(--rs-sans); font-size: 13px; color: #C8C2B8; color: var(--rs-muted); margin: 0; font-style: italic; }
.rs-refs-closing {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  line-height: 1.6;
  color: #C8C2B8;
  color: var(--rs-muted);
  max-width: 680px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.14);
  border-top: 0.5px solid var(--rs-border-mid);
}

@media (max-width: 720px) {
  .rs-practice { margin-bottom: 22px; border-radius: 16px; }
  .rs-practice-head { padding: 18px 17px; gap: 12px; }
  .rs-practice-title { font-size: 19px; }
  .rs-practice-toggle { padding: 7px 14px; font-size: 11.5px; }
  .rs-practice-body { padding: 0 0 18px; }
  .rs-practice-body p { font-size: 15px; }
}


/* ── Liora entrance intro (once per session) ──────────────────────────
   Full-screen dim overlay. Liora's orb sweeps in from the right and lands
   centre, then a greeting bubble fades in offering a tour of the method. */
.rs-liora-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 12, 14, 0);
  animation: rs-intro-scrim-in 0.6s ease forwards;
}
.rs-liora-intro[data-phase="leaving"] {
  animation: rs-intro-scrim-out 0.5s ease forwards;
  pointer-events: none;
}
@keyframes rs-intro-scrim-in  { to { background: rgba(12, 12, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }
@keyframes rs-intro-scrim-out { from { background: rgba(12, 12, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } to { background: rgba(12, 12, 14, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }

.rs-liora-intro-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.rs-liora-intro-orb {
  width: 132px;
  height: 132px;
  object-fit: contain;
  -webkit-user-select: none;
          user-select: none;
  filter: drop-shadow(0 0 26px rgba(212, 165, 154, 0.45));
  transform: translateX(120vw);
  opacity: 0;
}
.rs-liora-intro[data-phase="entering"] .rs-liora-intro-orb,
.rs-liora-intro[data-phase="greeting"] .rs-liora-intro-orb {
  animation: rs-orb-bounce-in 2s cubic-bezier(0.19, 1, 0.3, 1) forwards;
}
.rs-liora-intro[data-phase="greeting"] .rs-liora-intro-orb {
  animation: rs-orb-bounce-in 2s cubic-bezier(0.19, 1, 0.3, 1) forwards,
             rs-orb-breathe 8s ease-in-out 2.1s infinite;
}
.rs-liora-intro[data-phase="leaving"] .rs-liora-intro-orb {
  animation: rs-orb-float-out 0.6s ease forwards;
}
@keyframes rs-orb-bounce-in {
  0%   { transform: translateX(115vw) scale(0.82); opacity: 0; }
  55%  { opacity: 1; }
  78%  { transform: translateX(-10px) scale(1.03); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes rs-orb-breathe {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(212, 165, 154, 0.34)); transform: translateY(0) scale(1); }
  50%      { filter: drop-shadow(0 0 34px rgba(212, 165, 154, 0.52)); transform: translateY(-4px) scale(1.03); }
}
@keyframes rs-orb-float-out {
  to { transform: translateY(-30px) scale(0.9); opacity: 0; }
}

.rs-liora-intro-bubble {
  opacity: 0;
  transform: translateY(14px);
}
.rs-liora-intro[data-phase="greeting"] .rs-liora-intro-bubble {
  animation: rs-intro-bubble-in 0.55s ease 0.15s forwards;
}
@keyframes rs-intro-bubble-in { to { opacity: 1; transform: translateY(0); } }

.rs-liora-intro-greeting {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 30px;
  line-height: 1.2;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 12px;
}
.rs-liora-intro-greeting em { font-style: italic; color: #E6C2BF; color: var(--rs-blush); }
.rs-liora-intro-sub {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: #C8C2B8;
  color: var(--rs-muted);
  margin: 0 auto 26px;
  max-width: 400px;
}
.rs-liora-intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rs-liora-intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: #8A9E8C;
  background: var(--rs-sage);
  color: #16221A;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 24px rgba(138, 158, 140, 0.28);
}
.rs-liora-intro-cta:hover { transform: translateY(-1px); background: #9BB09D; box-shadow: 0 10px 28px rgba(138, 158, 140, 0.4); }
.rs-liora-intro-cta svg { width: 15px; height: 15px; }
.rs-liora-intro-dismiss {
  background: none;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rs-liora-intro-dismiss:hover { color: #F6F4F0; color: var(--rs-cream); }

@media (max-width: 720px) {
  .rs-liora-intro-orb { width: 108px; height: 108px; }
  .rs-liora-intro-greeting { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-liora-intro-orb,
  .rs-liora-intro[data-phase="greeting"] .rs-liora-intro-orb { animation: none; transform: none; opacity: 1; }
  .rs-liora-intro-bubble { animation: none; opacity: 1; transform: none; }
}


.rs-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: #141414;
  background: var(--rs-bg);
}

/* ── Chart-save error banner ────────────────────────────────────────── */
.rs-save-error {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(212, 165, 154, 0.10);
  border-bottom: 0.5px solid rgba(212, 165, 154, 0.55);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  line-height: 1.45;
}
.rs-save-error-text { flex: 1 1; min-width: 0; }
.rs-save-error-retry {
  flex-shrink: 0;
  background: #8A9E8C;
  background: var(--rs-sage);
  color: #1a2a1a;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.rs-save-error-retry:hover { background: #9CB09E; }
.rs-save-error-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #C8C2B8;
  color: var(--rs-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.rs-save-error-dismiss:hover { color: #FFFFFF; color: var(--rs-white); }

/* ── First-visit onboarding nudge ──────────────────────────────────── */
/* Soft sage-bordered tooltip pinned next to the sidebar's Tab 2 icon. */
.rs-nudge {
  position: fixed;
  top: 132px;
  left: 76px;
  z-index: 80;
  max-width: 280px;
  padding: 14px 16px 12px;
  background: rgba(36, 36, 38, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(138, 158, 140, 0.42);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(138, 158, 140, 0.08);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  pointer-events: auto;
  animation: rs-nudge-in 380ms cubic-bezier(.2,.7,.2,1) both;
}
.rs-nudge::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 28px;
  width: 12px;
  height: 12px;
  background: rgba(36, 36, 38, 0.96);
  border-left: 0.5px solid rgba(138, 158, 140, 0.42);
  border-bottom: 0.5px solid rgba(138, 158, 140, 0.42);
  transform: rotate(45deg);
}
.rs-nudge-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #8A9E8C;
  color: var(--rs-sage);
  margin: 0 0 8px;
}
.rs-nudge-text {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #F6F4F0;
  color: var(--rs-cream);
}
.rs-nudge-text em { color: #8A9E8C; color: var(--rs-sage); font-style: italic; font-weight: 500; }
.rs-nudge-actions { display: flex; justify-content: flex-end; }
.rs-nudge-dismiss {
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 200ms ease;
}
.rs-nudge-dismiss:hover { color: #8A9E8C; color: var(--rs-sage); }

/* First-visit sidebar coachmark — points at the rail (mobile/collapsed). */
.rs-coach {
  position: fixed;
  top: 64px;
  left: 76px;
  z-index: 80;
  max-width: 300px;
  padding: 18px 20px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(138, 158, 140, 0.40);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(28, 28, 30, 0.22), 0 0 0 1px rgba(138, 158, 140, 0.10);
  color: #242426;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  animation: rs-nudge-in 380ms cubic-bezier(.2,.7,.2,1) both;
}
.rs-coach::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 22px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-left: 1px solid rgba(138, 158, 140, 0.40);
  border-bottom: 1px solid rgba(138, 158, 140, 0.40);
  transform: rotate(45deg);
}
.rs-coach-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #4C5E4E;
  margin: 0 0 9px;
}
.rs-coach-text {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 14px;
  color: #242426;
  color: var(--rs-tip-text, #242426);
}
.rs-coach-text em { color: #3F5141; color: var(--rs-tip-accent, #3F5141); font-style: italic; font-weight: 600; }
.rs-coach-actions { display: flex; justify-content: flex-end; }
.rs-coach-dismiss {
  background: transparent;
  border: none;
  color: #7A756E;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 200ms ease;
}
.rs-coach-dismiss:hover { color: #6B7D6C; color: var(--rs-sage-dim); }
@media (max-width: 720px) {
  .rs-coach { top: 58px; left: 64px; right: 14px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-coach { animation: none; }
}

/* Gentle sage halo around the Tab 2 icon while the nudge is on-screen. */
.rs-sidebar-tab[data-nudge-target="true"] {
  position: relative;
}
.rs-sidebar-tab[data-nudge-target="true"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(138, 158, 140, 0.55);
  animation: rs-nudge-pulse 1800ms ease-out infinite;
  pointer-events: none;
}

@keyframes rs-nudge-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rs-nudge-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(138, 158, 140, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(138, 158, 140, 0); }
  100% { box-shadow: 0 0 0 0   rgba(138, 158, 140, 0); }
}

@media (max-width: 720px) {
  .rs-nudge {
    top: auto;
    bottom: 96px;
    left: 14px;
    right: 14px;
    max-width: none;
  }
  .rs-nudge::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-nudge { animation: none; }
  .rs-sidebar-tab[data-nudge-target="true"]::after { animation: none; }
}

.rs-app {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  background: #141414;
  background: var(--rs-bg);
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 300;
  overflow: hidden;
  position: relative;
}
.rs-main {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #141414;
  background: var(--rs-bg);
  overflow: hidden;
}

/* ── Left sidebar (reading nav) ─────────────────────────────────────── */
.rs-sidebar {
  flex-shrink: 0;
  background: #242426;
  background: var(--rs-surface);
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
  border-right: 0.5px solid var(--rs-border);
  display: flex;
  flex-direction: column;
  width: 56px;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  z-index: 30;
}
.rs-sidebar[data-open="true"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rs-sidebar-toggle {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #BC9F6E;
  color: var(--rs-gold);
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-sidebar-toggle-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.rs-sidebar[data-open="true"] .rs-sidebar-toggle-label { opacity: 1; width: auto; }
.rs-sidebar[data-open="true"] .rs-sidebar-toggle { flex-direction: row-reverse; }
.rs-sidebar-toggle:hover {
  color: #E0BC83;
  background: #2E2E30;
  background: var(--rs-raise);
}
.rs-sidebar-toggle svg { width: 20px; height: 20px; }
.rs-sidebar-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
}
.rs-sidebar-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 12px 0 12px 0;
  width: 100%;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.rs-sidebar-tab[data-active="true"] {
  color: #FFFFFF;
  color: var(--rs-white);
  border-left-color: #8A9E8C;
  border-left-color: var(--rs-sage);
  background: rgba(159, 173, 159, 0.15);
  font-weight: 500;
}
.rs-sidebar-tab[data-active="true"] .rs-sidebar-tab-icon { color: #8A9E8C; color: var(--rs-sage); }
.rs-sidebar-tab:hover { color: #F6F4F0; color: var(--rs-cream); }
.rs-sidebar-tab-icon {
  flex-shrink: 0;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-sidebar-tab-icon svg { width: 20px; height: 20px; }
.rs-sidebar-tab-label {
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  opacity: 0;
  transition: opacity 0.18s ease;
  font-weight: 400;
}
.rs-sidebar[data-open="true"] .rs-sidebar-tab-label { opacity: 1; }
@media (min-width: 1024px) {
  .rs-sidebar[data-tab="interpret"] .rs-sidebar-tab-label { opacity: 1; }
}
.rs-sidebar-placements {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  padding: 14px 0 24px;
}
.rs-sidebar-section-label {
  padding: 16px 18px 8px;
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: #F6F4F0;
  color: var(--rs-cream);
}
.rs-sidebar-section { margin-top: 6px; }
.rs-sidebar-subsection {
  padding: 6px 18px 4px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7A756E;
  color: var(--rs-dim);
}
.rs-sidebar-placement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.rs-sidebar-placement-row:hover { background: #2E2E30; background: var(--rs-raise); }
/* "What's Live in Your Sky" main-content list (added 31 Aug 2026) — reuses
   the placement-row look, now genuinely clickable (1 Sep 2026: rows route
   into Liora's Moon chat). */
.rs-sky-window-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
  max-width: 560px;
}
.rs-sky-window-row {
  border-radius: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--ls-border-soft, rgba(255,255,255,0.06));
}
/* Playfair, matches the "Ask Liora about this moon" heading convention —
   an obvious invitation, not body copy. Elegant/symmetrical per Lisa
   (precision brand): centered above the now-pill-styled rows below.
   Replaced the plain rs-journal-intro paragraph 1 Sep 2026. */
.rs-sky-window-cta {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 4px 0 22px;
}
.rs-sky-window-cta em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
/* Orb/date as a rounded chip (matches .rs-chart-pill), not plain text —
   makes each row read as a tappable chip rather than a data row. */
.rs-sky-window-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #BC9F6E;
  color: var(--rs-gold);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rs-sky-window-row:hover .rs-sky-window-pill { border-color: rgba(198, 157, 100, 0.5); }
/* Applying (tightening, building) vs separating (loosening, past exact) —
   real astrological terms as text, not an unexplained arrow icon (Lisa 1
   Sep 2026: members won't know what an arrow means). Still inside the same
   pill, not a second badge. */
.rs-sky-window-direction {
  margin-right: 6px;
  padding-right: 6px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.14);
  border-right: 0.5px solid var(--rs-border-mid);
}
.rs-sky-window-direction[data-direction="applying"] { color: #E6C2BF; color: var(--rs-blush); }
.rs-sky-window-direction[data-direction="separating"] { color: #C8C2B8; color: var(--rs-muted); opacity: 0.85; }
.rs-sidebar-placement-planet {
  font-size: 13.5px;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-sidebar-placement-sign {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #BC9F6E;
  color: var(--rs-gold);
  flex-shrink: 0;
}
.rs-sidebar-placement-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rs-sidebar-placement-cluster {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #7A756E;
  color: var(--rs-dim);
  white-space: normal;
}
/* ── "Explore Your Natal Chart" — 7 cards, Stage A (2 Nov 2026) ──
   Sits below the chart wheel inside the Chart tab's own scroll area.
   Charcoal/gold/rose, minimalist editorial — no illustrations. */
.rs-explore-cards {
  max-width: none;
  margin: 0;
  padding: 40px clamp(20px, 4vw, 70px) 40px;
  background: #1C1C1E;
}
/* Typography hierarchy match (3 Nov 2026): section heading/intro scoped
   to this section only, to mirror "Your Reading"'s sizing exactly without
   touching the shared .rs-journal-page-title/.rs-journal-intro classes
   used elsewhere (Moon tab, Journal pages). */
.rs-explore-cards .rs-journal-page-title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 14px;
}
.rs-explore-cards .rs-journal-intro {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-explore-moon-note { margin-top: -2px; }
.rs-explore-moon-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 22px;
  margin: 4px 0 28px;
  background: transparent;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--rs-gold);
  border-radius: 999px;
  color: #BC9F6E;
  color: var(--rs-gold);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rs-explore-moon-cta-btn:hover { background: rgba(230, 194, 191, 0.10); background: var(--rs-blush-faint); }
/* Subtle gold divider marking the intentional break between "Your Reading"
   and "Explore Your Birth Chart" — replaces the empty unmarked gap. */
.rs-chart-section-divider {
  margin: 40px 0 0;
  height: 0;
  border-top: 1px solid rgba(232, 223, 206, 0.25);
  flex-shrink: 0;
}
.rs-explore-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-top: 22px;
}
.rs-explore-card {
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 14px;
  background: #242426;
  background: var(--rs-surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
  display: flex;
  flex-direction: column;
}
.rs-explore-card[data-open="true"] { border-color: rgba(188, 159, 110, 0.45); }
.rs-explore-card-head {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 16px 16px 14px;
  transition: background-color 0.15s ease;
}
@media (hover: hover) {
  .rs-explore-card-head:hover { background: #2E2E30; background: var(--rs-raise); }
  .rs-phase-acc-header:hover { background: #2E2E30; background: var(--rs-raise); }
}
.rs-explore-card-head:focus-visible { outline: 2px solid #BC9F6E; outline: 2px solid var(--rs-gold); outline-offset: -2px; }
.rs-explore-card-headtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-explore-card-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 17px;
  font-weight: 400;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-explore-card-desc {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: #C8C2B8;
  color: var(--rs-muted);
  min-height: 37.5px;
}
.rs-explore-card-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: #BC9F6E;
  color: var(--rs-gold);
  transition: transform 0.2s ease;
}
.rs-explore-card[data-open="true"] .rs-explore-card-chevron { transform: rotate(90deg); }
.rs-explore-card-reveal {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  padding: 6px 4px;
}
.rs-explore-placement-row { padding: 10px 14px; cursor: default; align-items: center; }
.rs-explore-placement-row:hover { background: transparent; }
.rs-explore-placement-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
}
/* "Explore with Liora" per-row action (3 Nov 2026) — ghost pill, quieter
   than .rs-new-chat-btn since every row on an open card has one. */
.rs-explore-row-liora-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  background: transparent;
  color: #BC9F6E;
  color: var(--rs-gold);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rs-explore-row-liora-btn:hover { background: rgba(188, 159, 110, 0.12); border-color: #BC9F6E; border-color: var(--rs-gold); }
/* ── "Explore with Liora" — integrated chat, inline below the cards
   (3 Nov 2026). Same background/typography treatment as .rs-explore-cards
   so the two sections read as one continuous page, not separate panels. */
.rs-explore-liora {
  max-width: none;
  margin: 0;
  padding: 40px clamp(20px, 4vw, 70px) 40px;
  background: #1C1C1E;
}
.rs-explore-liora .rs-journal-page-title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 28px;
  text-align: center;
}
.rs-explore-liora .rs-journal-intro {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 auto 22px;
  text-align: center;
}
.rs-explore-liora .rs-journal-intro:last-of-type {
  margin-bottom: 40px;
}
/* The head row's sticky-to-scroll-top behaviour exists for the dedicated
   Chat/Moon tabs, where it's the first thing in the scroll area. Here it
   sits mid-page, so sticking would float a bar over the cards above it. */
.rs-explore-liora .rs-chat-head-row {
  position: static;
  top: auto;
  background: transparent;
  margin-bottom: 10px;
}
/* Composer blends into the section instead of reading as a separate
   floating panel — no raised surface, no top border. Doubled class for
   specificity: .rs-composer's own background/border rule is declared later
   in this file, so a single-class override here would otherwise lose to it
   on source order alone. */
.rs-composer.rs-composer-inline {
  flex-shrink: 0;
  background: transparent;
  border-top: none;
  padding: 18px clamp(16px, 6vw, 72px) 0;
}
/* True page footer (3 Nov 2026) — the composer's own credit line is
   removed on the chart tab (see renderComposer) so the whole section reads
   as one open page instead of a boxed panel; this is the one copy of it,
   placed after everything else in the chart tab's scroll area. */
.rs-chart-footer {
  text-align: center;
  padding: 28px clamp(20px, 4vw, 70px) 40px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #F6F4F0;
  color: var(--rs-cream);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .rs-explore-placement-row { flex-wrap: wrap; row-gap: 8px; }
  .rs-explore-row-liora-btn { margin-left: auto; }
  .rs-explore-card-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rs-explore-card-head { padding: 15px 14px 13px; }
  .rs-explore-card-title { font-size: 16px; }
  .rs-explore-card-desc { font-size: 12.5px; line-height: 1.5; }
  .rs-explore-card-chevron { width: 15px; height: 15px; }
}
/* ── "Join the Circle" card restored beneath the chart cards (3 Nov 2026) ──
   Reuses the same CMS keys (community-strip.*) and navigation as the
   iframe's original strip — relocated here since the iframe can't render
   after the cards. Sits on the same #1C1C1E background as the cards. */
.rs-chart-community-cta {
  max-width: 580px;
  margin: 40px auto 0;
  padding: 48px 40px;
  background: #242426;
  background: var(--rs-surface);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 14px;
  text-align: center;
}
/* Mobile override must come AFTER the base rule (same specificity). */
@media (max-width: 640px) {
  .rs-chart-community-cta { margin: 40px 16px 0; padding: 40px 24px; }
}
.rs-chart-community-heading {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 400;
  color: #FFFFFF;
  color: var(--rs-white);
  line-height: 1.35;
  margin: 0 0 24px;
}
.rs-chart-community-heading em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; font-weight: 300; }
.rs-chart-community-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 22px;
  background: transparent;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--rs-gold);
  border-radius: 999px;
  color: #BC9F6E;
  color: var(--rs-gold);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rs-chart-community-button:hover {
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
}
.rs-sidebar-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 56px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  z-index: 20;
  padding: 0;
}

/* ── "Explore your chart" sections (rail) ───────────────────────────── */
.rs-sidebar-explore {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  padding: 12px 0 24px;
  flex: 0 0 auto;
}

/* Chat library (Chat with Liora tab): New reading + past chats list */
.rs-sidebar-library {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  padding: 16px 12px 24px;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.rs-sidebar-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 999px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.rs-sidebar-new:hover { border-color: #8A9E8C; border-color: var(--rs-sage); color: #FFFFFF; color: var(--rs-white); background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); }
.rs-sidebar-new svg { width: 16px; height: 16px; flex-shrink: 0; }
.rs-sidebar-convos { display: flex; flex-direction: column; }
.rs-sidebar-convo {
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rs-sidebar-convo:hover { background: #2E2E30; background: var(--rs-raise); color: #FFFFFF; color: var(--rs-white); }
.rs-sidebar-convo[data-active="true"] { background: #2E2E30; background: var(--rs-raise); color: #FFFFFF; color: var(--rs-white); }
.rs-sidebar-convo-journal { color: #F6F4F0; color: var(--rs-cream); }

/* Kill the browser's default blue focus ring across the reading shell;
   replace with a quiet on-brand sage ring for keyboard users only. */
.rs-sidebar button:focus,
.rs-composer button:focus,
.rs-starter:focus,
.rs-moon-option:focus,
.rs-moon-back:focus,
.rs-sidebar-group:focus,
.rs-flyout button:focus { outline: none; box-shadow: none; }
.rs-sidebar button:focus-visible,
.rs-composer button:focus-visible,
.rs-starter:focus-visible,
.rs-moon-option:focus-visible,
.rs-moon-back:focus-visible,
.rs-sidebar-group:focus-visible,
.rs-flyout button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #8A9E8C;
  box-shadow: 0 0 0 1.5px var(--rs-sage);
  border-radius: 12px;
}
.rs-sidebar-explorebtn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 999px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.rs-sidebar-explorebtn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rs-sidebar-explorebtn:hover { border-color: #8A9E8C; border-color: var(--rs-sage); color: #FFFFFF; color: var(--rs-white); background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); }
.rs-sidebar-explorebtn[data-active="true"] { border-color: #8A9E8C; border-color: var(--rs-sage); background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); color: #FFFFFF; color: var(--rs-white); }
/* Attention-grabbing "How to work with Liora" guide link — routes back to
   the /lunar-sanctuary landing page where the full Liora instructions live.
   Blush accent + a slow breathing glow so it draws the eye without shouting. */
.rs-liora-guide-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  text-align: left;
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
  border: 1px solid rgba(212, 165, 154, 0.45);
  border-radius: 14px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(212, 165, 154, 0.0);
  animation: rs-liora-guide-glow 4.5s ease-in-out infinite;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.rs-liora-guide-btn:hover {
  transform: translateY(-1px);
  border-color: #E6C2BF;
  border-color: var(--rs-blush);
  background: rgba(212, 165, 154, 0.16);
}
.rs-liora-guide-spark {
  color: #E6C2BF;
  color: var(--rs-blush);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.rs-liora-guide-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1; min-width: 0; }
.rs-liora-guide-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.rs-liora-guide-sub {
  font-size: 11.5px;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.75;
  letter-spacing: 0.01em;
}
.rs-liora-guide-arrow { width: 14px; height: 14px; flex-shrink: 0; color: #E6C2BF; color: var(--rs-blush); }
.rs-liora-replay {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 4px 12px;
  margin-bottom: 6px;
  background: none;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rs-liora-replay:hover { color: #E6C2BF; color: var(--rs-blush); }
.rs-liora-replay svg { width: 13px; height: 13px; flex-shrink: 0; }
@keyframes rs-liora-guide-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 165, 154, 0.0); }
  50% { box-shadow: 0 0 18px 1px rgba(212, 165, 154, 0.30); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-liora-guide-btn { animation: none; }
}

.rs-sidebar-newchat {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 16px;
  background: transparent;
  border: none;
  color: #C8C2B8;
  color: var(--rs-muted);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rs-sidebar-newchat svg { width: 13px; height: 13px; flex-shrink: 0; }
.rs-sidebar-newchat:hover { color: #F6F4F0; color: var(--rs-cream); }

/* "New chat" in the sidebar — a clear, labelled action that starts a fresh
   reading (returns to the 12-theme starters). Label + sub so its purpose is
   obvious; only clears the view, never deletes saved history. */
.rs-sidebar-startnew {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 16px;
  background: transparent;
  border: none;
  color: #C8C2B8;
  color: var(--rs-muted);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rs-sidebar-startnew svg { width: 16px; height: 16px; flex-shrink: 0; }
.rs-sidebar-startnew:hover { color: #F6F4F0; color: var(--rs-cream); }
.rs-sidebar-startnew-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-sidebar-startnew-label { font-size: 13.5px; letter-spacing: 0.04em; color: inherit; }
.rs-sidebar-startnew-sub { font-size: 11.5px; line-height: 1.25; color: #7A756E; color: var(--rs-dim); white-space: nowrap; }
.rs-sidebar-actions { display: flex; gap: 8px; margin-bottom: 18px; }
.rs-sidebar-actions .rs-sidebar-new { flex: 1 1; margin-bottom: 0; }
.rs-sidebar-chartbtn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 999px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.rs-sidebar-chartbtn svg { width: 15px; height: 15px; }
.rs-sidebar-chartbtn:hover { border-color: #8A9E8C; border-color: var(--rs-sage); color: #FFFFFF; color: var(--rs-white); }
.rs-sidebar-chartbtn[data-active="true"] { border-color: #8A9E8C; border-color: var(--rs-sage); background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); color: #FFFFFF; color: var(--rs-white); }
.rs-sidebar-empty {
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 12px;
}

/* Conversation title at the top of a Chat thread (matches the design mock) */
.rs-chat-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin: 0;
}

/* "Start new chat" — sits next to the Chat/Moon thread title. A real button
   (not a subtle text link) per Lisa's call: the screen already holds a lot,
   so this needs to be found at a glance, not discovered by accident. The
   caption underneath is the reassurance that nothing is lost. */
.rs-chat-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 18px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
  margin-bottom: 6px;
  /* Sticks to the top of the scroll area so "Start new chat" stays reachable
     without scrolling back up through a long conversation (Lisa Aug 2026). */
  /* -24px cancels out .rs-scroll's padding-top so the sticky header covers
     that gap fully instead of leaving a sliver of scrolled content peeking
     above it (Lisa Aug 2026 bug report). */
  position: -webkit-sticky;
  position: sticky;
  top: -24px;
  z-index: 5;
  background: #141414;
  background: var(--rs-bg);
}
.rs-chat-head-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rs-new-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--rs-gold);
  background: rgba(255, 255, 255, 0.05);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rs-new-chat-btn:hover { background: rgba(188, 159, 110, 0.12); border-color: #BC9F6E; border-color: var(--rs-gold); }
.rs-new-chat-btn-plus { font-size: 16px; line-height: 1; margin-top: -1px; }
.rs-chat-head-titles .rs-moon-detail-title,
.rs-chat-head-titles .rs-chat-title { margin: 0; }
.rs-new-chat-caption {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 1;
  margin: 0;
}
@media (max-width: 640px) {
  .rs-chat-title { font-size: 21px; }
  .rs-chat-head-row { gap: 8px; }
  .rs-new-chat-btn { padding: 7px 12px; font-size: 11.5px; }
  .rs-new-chat-caption { font-size: 13px; }
}

.rs-sidebar-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 16px 11px 18px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: #C8C2B8;
  color: var(--rs-muted);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.rs-sidebar-group:hover { color: #F6F4F0; color: var(--rs-cream); background: #2E2E30; background: var(--rs-raise); }
.rs-sidebar-group[data-open="true"] {
  color: #FFFFFF;
  color: var(--rs-white);
  border-left-color: #8A9E8C;
  border-left-color: var(--rs-sage);
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
}
.rs-sidebar-group-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rs-sidebar-group-label { white-space: normal; font-family: 'Montserrat', sans-serif; font-family: var(--rs-sans); }
.rs-sidebar-group-sub {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.25;
  color: #C8C2B8;
  color: var(--rs-muted);
  white-space: normal;
}
.rs-sidebar-group[data-open="true"] .rs-sidebar-group-sub,
.rs-sidebar-group:hover .rs-sidebar-group-sub { color: #F6F4F0; color: var(--rs-cream); }
.rs-sidebar-group-chevron {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: #7A756E;
  color: var(--rs-dim);
  transition: transform 0.2s ease, color 0.15s ease;
}
.rs-sidebar-group[data-open="true"] .rs-sidebar-group-chevron {
  transform: rotate(90deg);
  color: #8A9E8C;
  color: var(--rs-sage);
}

/* ── Section flyout (placement list) ────────────────────────────────── */
.rs-flyout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 45;
}
.rs-flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(330px, 92vw);
  background: #2E2E30;
  background: var(--rs-raise);
  border-right: 0.5px solid rgba(255, 255, 255, 0.14);
  border-right: 0.5px solid var(--rs-border-mid);
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.55);
  z-index: 60;
  display: flex;
  flex-direction: column;
  animation: rs-flyout-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rs-flyout-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.rs-flyout-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 12px 20px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
}
.rs-flyout-headings { min-width: 0; }
.rs-flyout-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
}
.rs-flyout-sub {
  margin: 5px 0 0;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.3;
  color: #C8C2B8;
  color: var(--rs-muted);
}
.rs-flyout-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.15s ease;
}
.rs-flyout-close:hover { color: #FFFFFF; color: var(--rs-white); }
.rs-flyout-close svg { width: 18px; height: 18px; }
.rs-flyout-hint {
  margin: 0;
  padding: 12px 20px 4px;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: #C8C2B8;
  color: var(--rs-muted);
}
.rs-flyout-list {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 24px;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.rs-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: #242426;
  background: var(--rs-surface);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
}
.rs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.rs-back:hover { color: #BC9F6E; color: var(--rs-gold); }
.rs-topbar-center {
  flex: 1 1;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
  font-size: 14px;
  color: #E6C2BF;
  color: var(--rs-blush);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.rs-chart-btn:hover { border-color: #8A9E8C; border-color: var(--rs-sage); color: #8A9E8C; color: var(--rs-sage); }
.rs-chart-btn svg { width: 13px; height: 13px; }

/* ── Tab strip ──────────────────────────────────────────────────────── */
.rs-tabstrip {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: #242426;
  background: var(--rs-surface);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rs-tabstrip::-webkit-scrollbar { display: none; }
.rs-tab {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 400;
  padding: 14px 18px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.rs-tab[data-active="true"] {
  color: #FFFFFF;
  color: var(--rs-white);
  border-bottom-color: #8A9E8C;
  border-bottom-color: var(--rs-sage);
}
.rs-tab:hover { color: #F6F4F0; color: var(--rs-cream); }

/* ── Scrolling content ──────────────────────────────────────────────── */
.rs-scroll {
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Suggestions (empty-state on Interpret tab) ─────────────────────── */
.rs-suggestions-head {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 22px;
  line-height: 1.35;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 8px 0 6px;
  font-weight: 400;
}
.rs-suggestions-head em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-suggestions-sub {
  color: #C8C2B8;
  color: var(--rs-muted);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 18px;
}
.rs-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.rs-cat-pill {
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #C8C2B8;
  color: var(--rs-muted);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  font-weight: 400;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rs-cat-pill[data-active="true"] {
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
  border-color: #8A9E8C;
  border-color: var(--rs-sage);
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-cat-pill:hover { color: #FFFFFF; color: var(--rs-white); }
.rs-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-prompt-btn {
  text-align: left;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border: 0.5px solid var(--rs-border);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rs-prompt-btn:hover {
  border-color: #E6C2BF;
  border-color: var(--rs-blush);
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
  color: #FFFFFF;
  color: var(--rs-white);
}

/* ── Lazy-suggest banner ────────────────────────────────────────────── */
.rs-suggest-banner {
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
  border: 0.5px solid #6B7D6C;
  border: 0.5px solid var(--rs-sage-dim);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.rs-suggest-banner:hover { border-color: #8A9E8C; border-color: var(--rs-sage); }
.rs-suggest-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8A9E8C;
  color: var(--rs-sage);
  margin: 0 0 6px;
  font-weight: 500;
}
.rs-suggest-text {
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0;
}
.rs-suggest-text em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }

/* ── Messages ───────────────────────────────────────────────────────── */
.rs-msg {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.7;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: var(--rs-read-body);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.rs-msg[data-role="user"] {
  align-self: flex-end;
  background: #2E2E30;
  background: var(--rs-raise);
  color: #F6F4F0;
  color: var(--rs-cream);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border: 0.5px solid var(--rs-border);
  border-bottom-right-radius: 6px;
}
.rs-msg[data-role="assistant"] {
  align-self: stretch;
  background:
    radial-gradient(120% 82% at 84% 0%, rgba(230, 194, 191, 0.055) 0%, transparent 56%),
    linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.28);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30);
  color: #FFFFFF;
  color: var(--rs-white);
  padding: clamp(28px, 3.2vw, 42px) clamp(26px, 3.2vw, 48px);
  max-width: 100%;
}
.rs-msg[data-role="assistant"] p { margin: 0 0 12px; }
.rs-msg-link {
  color: #8A9E8C;
  color: var(--rs-sage);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.rs-msg-link:hover { color: #F6F4F0; color: var(--rs-cream); opacity: 0.92; }
/* Gentle nudge after a completed reading: invites the member to reply in
   their own words (replaces the old reflex-tap gold links). Subtle, fades in. */
.rs-reply-hint {
  align-self: flex-start;
  max-width: 100%;
  margin: 4px 0 2px;
  padding-left: 18px;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: #F6F4F0;
  color: var(--rs-cream);
  animation: rs-reply-hint-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
.rs-reply-hint::before {
  content: "\2193";
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  color: #8A9E8C;
  color: var(--rs-sage);
  opacity: 0.7;
}
@keyframes rs-reply-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-reply-hint { animation: none; }
}

.rs-typing-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: #8A9E8C;
  background: var(--rs-sage);
  border-radius: 50%;
  margin: 0 2px;
  animation: rs-typing 1.4s ease-in-out infinite;
}
.rs-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.rs-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes rs-typing {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.25); }
}

.rs-status-flash {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #BC9F6E;
  color: var(--rs-gold);
  vertical-align: middle;
  opacity: 0;
  animation: rs-status-flash-in 1.8s ease-in-out;
}
@keyframes rs-status-flash-in {
  0% { opacity: 0; }
  18% { opacity: 0.85; }
  78% { opacity: 0.85; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-status-flash { animation: none; opacity: 0.85; }
}

/* ── Phase tab opener ───────────────────────────────────────────────── */
.rs-phase-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 8px;
}
.rs-phase-head {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 26px;
  line-height: 1.25;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 4px;
  font-weight: 400;
}
.rs-phase-sub {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 17px;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 14px;
}
.rs-phase-sub em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-phase-dict {
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border: 0.5px solid var(--rs-border);
  border-radius: 14px;
  padding: 16px 18px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-size: var(--rs-read-body);
  line-height: 1.7;
}
.rs-phase-dict p { margin: 0 0 12px; }
.rs-phase-dict p:last-child { margin: 0; }

/* "Your next step" / "Your intention" — at the BOTTOM of the same reading
   card (.rs-phase-dict), not a separate box (1 Sep 2026, v14 alignment
   gap; moved inline 1 Sep 2026 per Lisa's review). Divider mirrors
   .rs-phase-alive's top-border pattern used elsewhere in this card. */
.rs-next-step-inline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
}
.rs-next-step-label {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #E6C2BF;
  color: var(--rs-blush);
  margin: 0 0 8px;
}
.rs-next-step-text {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 16px;
  line-height: 1.6;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0 0 12px;
  white-space: pre-wrap;
}
.rs-next-step-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 30px;
  border-radius: 999px;
  border: none;
  background: #8A9E8C;
  background: var(--rs-sage);
  color: #141414;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.rs-next-step-btn:hover { opacity: 0.85; }
@media (max-width: 640px) {
  .rs-next-step-text { font-size: 15px; }
}

.rs-phase-alive {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.5;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-phase-alive em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }

/* ── Goals tab ──────────────────────────────────────────────────────── */
.rs-goals-section {
  margin-bottom: 28px;
}
.rs-goals-section-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 18px;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 6px;
  font-weight: 400;
}
.rs-goals-section-sub {
  font-size: 16.5px;
  color: #C8C2B8;
  color: var(--rs-muted);
  margin: 0 0 12px;
  line-height: 1.6;
}
.rs-goals-section-sub em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-goals-textarea {
  width: 100%;
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 14px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 16px;
  line-height: 1.55;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  min-height: 64px;
  transition: border-color 0.15s ease;
}
.rs-goals-textarea:focus { border-color: #8A9E8C; border-color: var(--rs-sage); }
.rs-goals-save-btn {
  margin-top: 10px;
  background: #8A9E8C;
  background: var(--rs-sage);
  color: #1a2a1a;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rs-goals-save-btn:hover { background: #9CB09E; }
.rs-goals-save-btn:disabled { background: #6B7D6C; background: var(--rs-sage-dim); color: rgba(20, 33, 15, 0.55); opacity: 1; cursor: default; }
.rs-goals-note-row {
  padding: 12px 14px;
  background: #2E2E30;
  background: var(--rs-raise);
  border-radius: 12px;
  margin-bottom: 8px;
}
.rs-goals-note-date {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7A756E;
  color: var(--rs-dim);
  display: block;
  margin-bottom: 6px;
}
.rs-goals-note-text {
  font-size: 16.5px;
  line-height: 1.65;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
  white-space: pre-wrap;
}

/* ── Journal · Intentions & Reflections (own pages, dark reading-card look) ── */
.rs-journal {
  max-width: none;
  margin: 0;
  padding: clamp(10px, 1.6vw, 22px) clamp(4px, 1.4vw, 22px) 64px;
  width: 100%;
}
/* Moon Phase Check-Ins only — horizontal padding matched to the Birth Chart
   page's approved clamp(20px, 4vw, 70px) (3 Nov 2026). Scoped to this one
   page via data-testid so the Sky window, which shares .rs-journal, is
   unaffected. */
.rs-journal[data-testid="intentions-detail"] {
  padding-left: clamp(20px, 4vw, 70px);
  padding-right: clamp(20px, 4vw, 70px);
}
.rs-journal-page-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.28;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 8px 0 14px;
}
.rs-journal-page-title em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-journal-intro {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.75;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0 0 28px;
  max-width: 620px;
}
.rs-journal-intro p { margin: 0 0 14px; }
.rs-journal-intro p:last-of-type { margin-bottom: 30px; }
.rs-journal-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #8A9E8C;
  background: var(--rs-sage);
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #16221A;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(138, 158, 140, 0.22);
  transition: transform 0.18s ease, background-color 0.18s ease, gap 0.15s ease;
}
.rs-journal-readmore:hover { background: #9BB09D; transform: translateY(-1px); gap: 11px; }
.rs-journal-compose {
  background:
    radial-gradient(120% 82% at 84% 0%, rgba(230, 194, 191, 0.055) 0%, transparent 56%),
    linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.28);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: 40px;
}
.rs-journal-titleinput,
.rs-journal-textarea {
  width: 100%;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 12px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  padding: 13px 15px;
  transition: border-color 0.15s ease;
}
.rs-journal-titleinput {
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.rs-journal-textarea {
  font-size: 15.5px;
  line-height: 1.7;
  resize: vertical;
  min-height: 92px;
}
.rs-journal-titleinput::placeholder,
.rs-journal-textarea::placeholder { color: #7A756E; color: var(--rs-dim); }
.rs-journal-titleinput:focus,
.rs-journal-textarea:focus { outline: none; border-color: #E6C2BF; border-color: var(--rs-blush); }
.rs-journal-save-btn {
  margin-top: 16px;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: #BC9F6E;
  background: var(--rs-gold);
  color: #1a1712;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.rs-journal-save-btn:hover:not(:disabled) { background: #d4c295; transform: translateY(-1px); }
.rs-journal-save-btn:disabled { opacity: 0.4; cursor: default; }
.rs-journal-cancel-btn {
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 999px;
  background: transparent;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rs-journal-cancel-btn:hover { border-color: #E6C2BF; border-color: var(--rs-blush); color: #E6C2BF; color: var(--rs-blush); }
.rs-journal-empty {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14.5px;
  color: #7A756E;
  color: var(--rs-dim);
  font-style: italic;
  margin: 0;
}
.rs-journal-list { display: flex; flex-direction: column; gap: 16px; }
.rs-journal-card {
  background:
    radial-gradient(120% 82% at 84% 0%, rgba(230, 194, 191, 0.05) 0%, transparent 56%),
    linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.24);
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.24);
}
.rs-journal-card-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rs-journal-card-date,
.rs-journal-card-moon {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rs-journal-card-date { color: #BC9F6E; color: var(--rs-gold); }
.rs-journal-card-moon {
  color: #E6C2BF;
  color: var(--rs-blush);
  padding-left: 12px;
  border-left: 1px solid rgba(198, 157, 100, 0.3);
}
.rs-journal-card-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.15rem;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 8px;
}
.rs-journal-card-text {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.8;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
  white-space: pre-wrap;
}
.rs-journal-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rs-journal-card-btn {
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s ease;
}
.rs-journal-card-btn:hover { color: #BC9F6E; color: var(--rs-gold); }
.rs-journal-card-btn-del:hover { color: #E6C2BF; color: var(--rs-blush); }
.rs-journal-editscrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 6, 6, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rs-journal-editpanel {
  width: min(560px, 100%);
  background: linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.34);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  padding: clamp(24px, 3vw, 34px);
}
.rs-journal-editpanel .rs-journal-titleinput { margin: 12px 0; }
.rs-journal-editpanel-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.rs-journal-editpanel-actions .rs-journal-save-btn { margin-top: 0; }

/* ── Intentions phase accordion ── */
.rs-phase-accordion { display: flex; flex-direction: column; gap: 10px; }
.rs-phase-acc-item {
  border: 1px solid rgba(246, 244, 240, 0.24);
  border-radius: 14px;
  background: #242426;
  background: var(--rs-surface);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.rs-phase-acc-item[data-current] {
  border-color: rgba(246, 244, 240, 0.24);
}
.rs-phase-acc-item[data-open="true"] {
  border-color: rgba(246, 244, 240, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
.rs-phase-acc-item[data-current][data-open="true"] { border-color: rgba(246, 244, 240, 0.45); }
.rs-phase-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}
.rs-phase-acc-header:focus-visible { outline: 2px solid #BC9F6E; outline: 2px solid var(--rs-gold); outline-offset: -2px; }
.rs-phase-accordion-glyph {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.rs-phase-acc-headtext {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rs-phase-acc-name {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.12rem;
  color: #FFFFFF;
  color: var(--rs-white);
  letter-spacing: 0.01em;
}
.rs-phase-acc-preview {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  color: #F6F4F0;
  color: var(--rs-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rs-phase-acc-preview[data-empty="true"] { color: #F6F4F0; color: var(--rs-cream); }
.rs-phase-acc-nameline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rs-phase-acc-date {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  flex-shrink: 0;
}
.rs-phase-acc-daterange {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin-top: 2px;
}
/* Top bar above the intentions accordion: current cycle label + previous-cycles button */
.rs-intentions-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 30px;
}
.rs-cycle-banner {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
}
.rs-cycle-localnote {
  display: inline-block;
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.55;
  color: currentColor;
  color: var(--rs-ink, currentColor);
}
.rs-phase-acc-tag {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #14210F;
  background: #8A9E8C;
  background: var(--rs-sage);
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.rs-phase-acc-chevron {
  color: #BC9F6E;
  color: var(--rs-gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.rs-phase-acc-item[data-open="true"] .rs-phase-acc-chevron { transform: rotate(180deg); }
.rs-phase-acc-body {
  padding: 8px 18px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.rs-phase-acc-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 14px 0 0;
}
/* Left-align the open card's eyebrow + teaching text with the composer's inner
   text (the textarea has 18px inner left padding). Direct-child so past-cycle
   row eyebrows are unaffected. */
.rs-phase-acc-body > .rs-phase-acc-eyebrow { padding: 0 18px; }
.rs-phase-acc-eyebrow + .rs-phase-acc-desc { margin-top: 8px; }
.rs-phase-acc-eyebrow + .rs-phase-row-desc { margin-top: 6px; }
.rs-phase-acc-desc {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15px;
  line-height: 1.68;
  color: #FBFAF7;
  opacity: 1;
  margin: 14px 0 16px;
  padding: 0 18px;
  animation: rsPhaseTextGlow 2.6s ease-out 1;
}
.rs-phase-heading-acc {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-size: 1.12rem;
  color: #FBFAF7;
  margin: 14px 0 8px;
  padding: 0 18px;
  animation: rsPhaseTextGlow 2.6s ease-out 1;
}
.rs-phase-body-acc {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15px;
  line-height: 1.68;
  color: #FBFAF7;
  margin: 0 0 10px;
  padding: 0 18px;
  animation: rsPhaseTextGlow 2.6s ease-out 1;
}
.rs-phase-body-acc:last-of-type { margin-bottom: 16px; }
/* One-time calm gold glow on the teaching text when a phase card opens.
   The body (and this paragraph) mounts fresh each time a phase opens, so the
   animation plays once per open. It starts warm-gold + softly lit and settles
   to the resting cream. Disabled for reduced-motion users below. */
@keyframes rsPhaseTextGlow {
  0%   { text-shadow: 0 0 20px rgba(188, 159, 110, 0.9); color: #F4E6C2; }
  55%  { text-shadow: 0 0 12px rgba(188, 159, 110, 0.55); color: #FBFAF7; }
  100% { text-shadow: 0 0 0 rgba(188, 159, 110, 0); color: #FBFAF7; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-phase-acc-desc { animation: none; text-shadow: none; color: #FBFAF7; }
}
/* Large inline typing area inside an open phase section */
.rs-phase-bigtext {
  width: 100%;
  min-height: 200px;
  resize: vertical;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  padding: 16px 18px;
  transition: border-color 0.15s ease;
}
.rs-phase-bigtext::placeholder { color: #7A756E; color: var(--rs-dim); }
.rs-phase-bigtext:focus { outline: none; border-color: #E6C2BF; border-color: var(--rs-blush); }
.rs-phase-charcount {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.55;
  text-align: right;
  margin: 6px 0 0;
}
.rs-phase-acc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.rs-phase-acc-actions .rs-journal-save-btn { margin-top: 0; }
.rs-phase-delete-btn { margin-top: 0; margin-right: auto; }
.rs-phase-delete-btn[data-confirm] { border-color: #E6C2BF; border-color: var(--rs-blush); color: #E6C2BF; color: var(--rs-blush); }
.rs-phase-saved-note {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 12px 0 0;
}
.rs-phase-acc-body .rs-journal-textarea { min-height: 78px; }

/* Focus mode: when a section is open, the closed rows shrink to slim,
   tap-to-switch bars and the open writing area grows to fill most of the
   screen (calm, one-thing-at-a-time). Scoped to the Intentions view. */
.rs-phase-accordion[data-hasopen] .rs-phase-acc-item:not([data-open="true"]) .rs-phase-acc-header {
  padding-top: 11px;
  padding-bottom: 11px;
}
.rs-phase-accordion[data-hasopen] .rs-phase-acc-item:not([data-open="true"]) .rs-phase-acc-preview {
  display: none;
}
.rs-phase-accordion[data-hasopen] .rs-phase-acc-item:not([data-open="true"]) .rs-phase-acc-name {
  font-size: 1rem;
}
.rs-phase-accordion[data-hasopen] .rs-phase-acc-item[data-open="true"] .rs-phase-bigtext {
  min-height: max(220px, calc(100vh - 430px));
}
.rs-phase-acc-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.rs-phase-acc-history-head {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 2px;
}
.rs-phase-entry {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.rs-phase-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rs-phase-entry-date {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A756E;
  color: var(--rs-dim);
}
.rs-phase-entry-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rs-phase-entry-icon {
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-phase-entry-icon:hover { color: #BC9F6E; color: var(--rs-gold); background: rgba(188, 159, 110, 0.1); }
.rs-phase-entry-icon[data-confirm="true"] {
  color: #14210F;
  background: #E6C2BF;
  background: var(--rs-blush);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.rs-phase-entry-text {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
  white-space: pre-wrap;
}
.rs-phase-entry-editactions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.rs-phase-entry-editactions .rs-journal-save-btn,
.rs-phase-entry-editactions .rs-journal-cancel-btn { margin-top: 0; padding: 9px 18px; }

/* This Cycle cross-phase view */
.rs-cycle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(198, 157, 100, 0.4);
  border-radius: 999px;
  color: #BC9F6E;
  color: var(--rs-gold);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: 22px;
  transition: background 0.15s ease, color 0.15s ease;
}
.rs-cycle-toggle:hover { background: rgba(188, 159, 110, 0.12); }
.rs-cycle-list { display: flex; flex-direction: column; gap: 12px; }
.rs-cycle-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
}
.rs-cycle-row[data-current="true"] { border-left: 3px solid #BC9F6E; border-left: 3px solid var(--rs-gold); }
.rs-cycle-row-body { flex: 1 1; min-width: 0; }
.rs-cycle-row-name {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.08rem;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 4px;
}
.rs-cycle-row-date {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 6px;
}
.rs-cycle-row-text {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.7;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
  white-space: pre-wrap;
}
.rs-cycle-row-empty {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
}

/* Search / filter bar above the cycle accordion */
.rs-journal-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}
.rs-journal-select,
.rs-journal-dateinput {
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  padding: 10px 12px;
}
.rs-journal-select:focus,
.rs-journal-dateinput:focus { outline: none; border-color: #E6C2BF; border-color: var(--rs-blush); }
.rs-journal-dateinput { color-scheme: dark; }
.rs-journal-search .rs-journal-cancel-btn { padding: 9px 16px; }
.rs-search-results { display: flex; flex-direction: column; gap: 12px; }

/* Phase filter: calm row of pills to look back at one phase (no dates) */
.rs-phase-filter-label {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 4px 0 12px;
}
.rs-phase-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.rs-phase-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 999px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rs-phase-filter-pill:hover { border-color: rgba(198, 157, 100, 0.5); }
.rs-phase-filter-pill[data-active] {
  border-color: #BC9F6E;
  border-color: var(--rs-gold);
  background: rgba(188, 159, 110, 0.14);
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-phase-filter-pill .rs-phase-accordion-glyph { flex-shrink: 0; }
.rs-backto-cycles { align-self: flex-start; margin-bottom: 4px; }

/* Write-your-intention call to action (opens the pop-out composer) */
.rs-write-intention-btn { margin-top: 0; }

/* Pop-out composer: full-screen on mobile, large centred panel on desktop */
.rs-composer-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 6, 0.74);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rs-composer-panel {
  width: min(720px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.36);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  padding: clamp(22px, 3vw, 34px);
}
.rs-composer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.rs-composer-headtext { flex: 1 1; min-width: 0; }
.rs-composer-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.5rem;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 2px 0 0;
}
.rs-composer-close {
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
  display: inline-flex;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-composer-close:hover { color: #E6C2BF; color: var(--rs-blush); background: rgba(230, 194, 191, 0.1); }
.rs-composer-desc {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  line-height: 1.6;
  color: #7A756E;
  color: var(--rs-dim);
  font-style: italic;
  margin: 0 0 18px;
}
.rs-composer-textarea {
  flex: 1 1;
  width: 100%;
  min-height: 40vh;
  resize: none;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 14px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  padding: 18px 20px;
}
.rs-composer-textarea::placeholder { color: #7A756E; color: var(--rs-dim); }
.rs-composer-textarea:focus { outline: none; border-color: #E6C2BF; border-color: var(--rs-blush); }
.rs-composer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.rs-composer-actions .rs-journal-save-btn,
.rs-composer-actions .rs-journal-cancel-btn { margin-top: 0; }

@media (max-width: 640px) {
  .rs-composer-scrim { padding: 0; }
  .rs-composer-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  }
  .rs-composer-textarea { min-height: 0; }
}


/* Phase rows stacked inside an expanded cycle */
.rs-phase-row {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rs-phase-row:first-child { border-top: none; }
.rs-phase-row[data-current] {
  border-left: 3px solid #BC9F6E;
  border-left: 3px solid var(--rs-gold);
  padding-left: 14px;
  margin-left: -14px;
}
.rs-phase-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rs-phase-row-name {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.08rem;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-phase-row-desc {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.92;
  font-style: italic;
  margin: 0 0 14px;
}
.rs-phase-heading-row {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 1.08rem;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.95;
  margin: 8px 0 4px;
}
.rs-phase-body-row {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.92;
  font-style: italic;
  margin: 0 0 6px;
}
.rs-phase-body-row:last-of-type { margin-bottom: 14px; }
.rs-phase-row-muted {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  color: #7A756E;
  color: var(--rs-dim);
  font-style: italic;
  margin: 0;
}

/* ── Mobile (Step 7): stack entry rows, larger tap targets, badge wrap ── */
@media (max-width: 640px) {
  .rs-phase-acc-name { font-size: 1rem; }
  .rs-phase-acc-header { gap: 12px; padding: 14px; align-items: flex-start; flex-wrap: wrap; }
  .rs-phase-acc-tag { order: 3; flex-basis: 100%; align-self: flex-start; width: -webkit-fit-content; width: fit-content; margin-top: 4px; }
  .rs-phase-row-head { gap: 10px; }
  .rs-phase-entry-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .rs-phase-entry-actions { align-self: flex-end; gap: 12px; }
  .rs-phase-entry-icon {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}


.rs-goals-session-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid transparent;
  border-radius: 12px;
  margin-bottom: 8px;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rs-goals-session-row:hover { border-color: #8A9E8C; border-color: var(--rs-sage); background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); }
.rs-goals-session-open {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 4px 13px 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  text-align: left;
}
.rs-goals-session-title {
  font-size: 16px;
  color: #FFFFFF;
  color: var(--rs-white);
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-goals-session-date { color: #7A756E; color: var(--rs-dim); font-weight: 400; }
.rs-goals-session-continue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A9E8C;
  color: var(--rs-sage);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rs-goals-session-continue svg { width: 13px; height: 13px; }
.rs-goals-session-row:hover .rs-goals-session-continue { opacity: 1; }
.rs-goals-session-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  background: transparent;
  border: none;
  border-left: 0.5px solid rgba(255, 255, 255, 0.08);
  border-left: 0.5px solid var(--rs-border);
  color: #7A756E;
  color: var(--rs-dim);
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-goals-session-delete:hover { color: #E6C2BF; color: var(--rs-blush); background: rgba(212, 165, 154, 0.10); }
.rs-goals-session-delete svg { width: 16px; height: 16px; }
.rs-goals-empty {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.65;
  color: #7A756E;
  color: var(--rs-dim);
  padding: 14px 16px;
  border: 0.5px dashed rgba(255, 255, 255, 0.14);
  border: 0.5px dashed var(--rs-border-mid);
  border-radius: 12px;
  margin: 0;
}
/* Two-column Journal on desktop; stacked on mobile. */
.rs-goals-grid { display: block; }
@media (min-width: 980px) {
  .rs-goals-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 40px;
    gap: 40px;
    align-items: start;
    max-width: 1100px;
  }
}
/* Opening reading (interpret tab) */
.rs-resume {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
  border: 0.5px solid #8A9E8C;
  border: 0.5px solid var(--rs-sage);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 24px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.rs-resume:hover { background: rgba(138, 158, 140, 0.18); transform: translateY(-1px); }
.rs-resume-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1; min-width: 0; }
.rs-resume-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #8A9E8C;
  color: var(--rs-sage);
}
.rs-resume-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 16px;
  color: #FFFFFF;
  color: var(--rs-white);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-resume svg { width: 18px; height: 18px; color: #8A9E8C; color: var(--rs-sage); flex-shrink: 0; }
.rs-opener {
  background:
    radial-gradient(120% 82% at 84% 0%, rgba(230, 194, 191, 0.055) 0%, transparent 56%),
    linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.30);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  padding: clamp(30px, 3.4vw, 48px) clamp(28px, 3.4vw, 52px);
  margin: 4px 0 18px;
  animation: rs-opener-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rs-opener-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rs-opener-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 14px;
  animation: rs-opener-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.rs-opener-body {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: var(--rs-read-body);
  line-height: 1.55;
  color: #F6F4F0;
  color: var(--rs-cream);
  white-space: pre-wrap;
  animation: rs-opener-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
}
/* Gold uppercase label tying the theme pills to the "New chat / Pick a new
   theme" action — mirrors the sidebar section labels. */
.rs-themes-label {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 6px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .rs-opener, .rs-opener-eyebrow, .rs-opener-body { animation: none; }
}
/* Saved-to-Journal confirmation */
.rs-saved-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
  border: 0.5px solid #8A9E8C;
  border: 0.5px solid var(--rs-sage);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 22px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  animation: rs-nudge-in 320ms ease both;
}
.rs-saved-flash em { color: #8A9E8C; color: var(--rs-sage); font-style: italic; }
.rs-saved-flash-link {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 0.5px solid #8A9E8C;
  border: 0.5px solid var(--rs-sage);
  color: #8A9E8C;
  color: var(--rs-sage);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rs-saved-flash-link:hover { background: #8A9E8C; background: var(--rs-sage); color: #14210f; }

/* ── Composer ───────────────────────────────────────────────────────── */
.rs-composer {
  flex-shrink: 0;
  background: #242426;
  background: var(--rs-surface);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
/* Stale saved Moon chat ("Option A"): the notice + "Start a new chat"
   button should read as part of the page, not a distinct raised panel —
   so this state drops the composer's normal lighter surface color and
   matches the main reading background instead. */
.rs-composer.rs-composer-flat { background: #141414; background: var(--rs-bg); }
/* Single persistent provenance line beneath the composer. Replaces the
   per-response credit (which felt repetitive on every Liora reply). */
.rs-composer-credit {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 1;
  text-align: center;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-top: 0.5px solid var(--rs-border);
  line-height: 1.55;
}
.rs-composer-credit-sep { opacity: 0.7; margin: 0 3px; }

/* Monthly conversation quota counter — quiet line above the composer input. */
.rs-quota-counter {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7A756E;
  color: var(--rs-dim);
  padding: 0 4px 8px;
  text-align: right;
}
/* Cap-reached upgrade notice — replaces the composer input when the member
   has used their monthly conversations. */
.rs-cap-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 8px 6px 4px;
}
.rs-cap-notice-text {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0;
  max-width: 420px;
}
.rs-cap-upgrade-btn {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a2a1a;
  background: #8A9E8C;
  background: var(--rs-sage);
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.rs-cap-upgrade-btn:hover { background: #A0B5A2; transform: translateY(-1px); }

/* Rhythm tier upgrade gate (shown in Moon, Intentions, Reflections tabs) */
.rs-btn-upgrade {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #0d160d;
  background: #8A9E8C;
  background: var(--rs-sage);
  border: none;
  padding: 14px 32px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin: 24px 0 20px;
  display: inline-block;
}
.rs-btn-upgrade:hover { background: #A0B5A2; transform: translateY(-1px); }

.rs-upgrade-subnote {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  line-height: 1.65;
  color: #C8C2B8;
  color: var(--rs-muted);
  margin: 0;
  max-width: 520px;
}
.rs-upgrade-subnote-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: #CDB58C;
  color: var(--rs-gold-light, #CDB58C);
  text-decoration: underline;
  cursor: pointer;
}
.rs-upgrade-subnote-link:hover { color: #F6F4F0; color: var(--rs-cream); }

/* Free-tier "fuller reading" block appended below the Chart Wheel tab —
   surfaces the same cached opener text + a couple of extra placements
   (deterministic, no extra AI cost) plus a note pointing to Account. */
.rs-chart-freereading {
  padding: 8px 18px 32px;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rs-chart-highlights {
  background: linear-gradient(180deg, #1C1C1C 0%, #161616 60%);
  border: 1px solid rgba(198, 157, 100, 0.22);
  border-radius: 16px;
  padding: 22px 24px;
}
.rs-chart-highlights-label {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 14px;
}
.rs-chart-highlight-line {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0 0 8px;
}
.rs-chart-highlight-line:last-child { margin-bottom: 0; }
.rs-chart-highlight-line strong { color: #FFFFFF; color: var(--rs-white); font-weight: 600; }
.rs-chart-upgrade-note {
  border-top: 1px solid rgba(198, 157, 100, 0.18);
  padding-top: 16px;
}

.rs-composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
/* "Chats & chart" opener docked in the bottom bar. Mobile-only compact icon
   (desktop uses the side rail), so it never covers reading content. */
.rs-composer-drawer-btn { display: none; }
.rs-composer-input {
  flex: 1 1;
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 22px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  padding: 11px 16px;
  resize: none;
  outline: none;
  min-height: 44px;
  max-height: 120px;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
}
.rs-composer-input:focus { border-color: #8A9E8C; border-color: var(--rs-sage); }
.rs-composer-input::placeholder { color: #D6D1C7; opacity: 1; }
.rs-composer-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #F6F4F0;
  color: var(--rs-cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rs-composer-icon:hover { border-color: #8A9E8C; border-color: var(--rs-sage); color: #8A9E8C; color: var(--rs-sage); }
.rs-composer-icon svg { width: 18px; height: 18px; }
.rs-composer-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #8A9E8C;
  background: var(--rs-sage);
  border: none;
  color: #14210f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(138, 158, 140, 0.30);
  transition: background 0.15s ease, transform 0.12s ease;
}
.rs-composer-send:hover:not(:disabled) { background: #A0B5A2; transform: translateY(-1px); }
.rs-composer-send:disabled { background: #8A9E8C; background: var(--rs-sage); opacity: 1; cursor: default; box-shadow: 0 2px 10px rgba(138, 158, 140, 0.30); }
.rs-composer-send svg { width: 19px; height: 19px; }
.rs-composer-image {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #8A9E8C;
  color: var(--rs-sage);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease;
}
.rs-composer-image:hover:not(:disabled) { background: rgba(138, 158, 140, 0.14); color: #F6F4F0; color: var(--rs-cream); transform: translateY(-1px); }
.rs-composer-image:disabled { opacity: 0.4; cursor: default; }
.rs-composer-image svg { width: 19px; height: 19px; }
.rs-msg-image-link {
  display: block;
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  max-width: 420px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rs-msg-image-link:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34); }
.rs-msg-image { display: block; width: 100%; height: auto; }
.rs-msg-image-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(138, 158, 140, 0.12);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
}
.rs-msg-image-label { font-size: 12px; color: #8A9E8C; color: var(--rs-sage); font-style: italic; }
.rs-msg-image-error {
  margin-top: 10px;
  font-size: 12px;
  color: #8A9E8C;
  color: var(--rs-sage);
  opacity: 0.8;
  font-style: italic;
}
.rs-msg-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--rs-gold);
  background: rgba(255, 255, 255, 0.04);
  color: #BC9F6E;
  color: var(--rs-gold);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.rs-msg-retry-btn:hover { background: rgba(188, 159, 110, 0.14); color: #F6F4F0; color: var(--rs-cream); }
@media (max-width: 640px) {
  .rs-msg-retry-btn { padding: 7px 14px; font-size: 12.5px; }
}
.rs-moon-continue-practice-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--rs-gold);
  background: rgba(255, 255, 255, 0.05);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rs-moon-continue-practice-btn:hover { background: rgba(188, 159, 110, 0.12); border-color: #BC9F6E; border-color: var(--rs-gold); }
@media (max-width: 640px) {
  .rs-moon-continue-practice-btn { padding: 7px 12px; font-size: 11.5px; }
}
.rs-composer-close {
  text-align: center;
  margin-top: 8px;
}
.rs-composer-close-btn {
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #8A9E8C;
  color: var(--rs-sage);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rs-composer-close-btn:hover { background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); color: #F6F4F0; color: var(--rs-cream); border-color: #8A9E8C; border-color: var(--rs-sage); }
.rs-composer-close-btn:disabled { opacity: 0.85; cursor: default; }

/* ── Chart overlay ──────────────────────────────────────────────────── */
.rs-chart-overlay {
  position: fixed;
  inset: 0;
  background: #141414;
  background: var(--rs-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.rs-chart-overlay[data-open="true"] {
  transform: translateX(0);
  pointer-events: auto;
}
.rs-chart-overlay-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: #242426;
  background: var(--rs-surface);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
}
.rs-chart-overlay-title {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 20px;
  color: #FFFFFF;
  color: var(--rs-white);
}
.rs-chart-overlay-title em {
  color: #E6C2BF;
  color: var(--rs-blush);
  font-style: italic;
}
.rs-chart-overlay-close {
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.rs-chart-overlay-close:hover { border-color: #E6C2BF; border-color: var(--rs-blush); color: #E6C2BF; color: var(--rs-blush); }
.rs-chart-overlay-scroll {
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
}
.rs-chart-section-label {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #141414;
  background: var(--rs-bg);
  padding: 14px 18px 8px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  z-index: 1;
}
.rs-chart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  color: inherit;
  transition: background 0.12s ease;
}
.rs-chart-row:hover { background: #2E2E30; background: var(--rs-raise); }
.rs-chart-row:active { background: rgba(138, 158, 140, 0.10); background: var(--rs-sage-faint); }
.rs-chart-planet {
  font-size: 14px;
  color: #FFFFFF;
  color: var(--rs-white);
  font-weight: 400;
}
.rs-chart-sign-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.rs-chart-sign {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
  font-size: 15px;
  color: #E6C2BF;
  color: var(--rs-blush);
}
.rs-chart-arrow {
  color: #7A756E;
  color: var(--rs-dim);
  font-size: 14px;
}

/* ── Tab 1: Your Real Sky Chart ─────────────────────────────────────── */
.rs-chart-intro {
  padding: 22px 18px 12px;
  background: #141414;
  background: var(--rs-bg);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
}
.rs-chart-intro-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--rs-gold);
  margin: 0 0 10px;
}
.rs-chart-intro-text {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 18.5px;
  line-height: 1.5;
  color: #FFFFFF;
  color: var(--rs-white);
  margin: 0 0 16px;
}
.rs-chart-intro-text em {
  color: #E6C2BF;
  color: var(--rs-blush);
  font-style: italic;
}
.rs-chart-pill-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
}
.rs-chart-pill-row::-webkit-scrollbar { display: none; }
.rs-chart-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 999px;
  padding: 8px 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rs-chart-pill:hover {
  border-color: #8A9E8C;
  border-color: var(--rs-sage);
  background: rgba(138, 158, 140, 0.10);
  background: var(--rs-sage-faint);
}
.rs-chart-pill-planet { color: #FFFFFF; color: var(--rs-white); font-weight: 400; }
.rs-chart-pill-sign {
  color: #E6C2BF;
  color: var(--rs-blush);
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: italic;
}
.rs-chart-frame {
  min-height: 70vh;
  flex-shrink: 0;
  background: #0A0A0A;
}
.rs-chart-frame > * {
  width: 100%;
  min-height: 70vh;
}
.rs-main > .rs-scroll:has(.rs-chart-frame) {
  background: #1C1C1E;
}

/* ── Conversation starters (Tab 2 empty state) ──────────────────────── */
.rs-starter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 18px;
}
.rs-starter-card {
  background: #2E2E30;
  background: var(--rs-raise);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border: 0.5px solid var(--rs-border-mid);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 15.5px;
  line-height: 1.35;
  color: #FFFFFF;
  color: var(--rs-white);
  cursor: pointer;
  overflow-wrap: break-word;
  min-height: 70px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rs-starter-house {
  color: #BC9F6E;
  color: var(--rs-gold);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: 5px;
}
.rs-starter-inner { display: block; }
.rs-starter-card:hover {
  border-color: #E6C2BF;
  border-color: var(--rs-blush);
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
}

/* ── Tablet/Desktop layout (≥ 900px) ────────────────────────────────── */
@media (min-width: 900px) {
  .rs-app {
    /* Full-width app surface: sidebar flush left, main fills the rest. */
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .rs-sidebar {
    width: 64px;
  }
  .rs-sidebar[data-open="true"] {
    width: 320px;
    /* Desktop: sit in the flex flow and push the chat aside instead of
       floating over it (overlay drawer is kept only on mobile). */
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    box-shadow: none;
  }
  /* No dimming backdrop on desktop — both panels are fully visible. */
  .rs-sidebar-backdrop {
    display: none;
  }
  /* Constrain only the reading content for a comfortable measure; the
     sidebar and composer container still span full width. Tab 2/3/4 are
     left-aligned with a comfy left margin (no centered-island feel). */
  .rs-scroll {
    padding: 40px 32px 24px;
    width: 100%;
  }
  /* Desktop .rs-scroll padding-top grows from 24px to 40px here, so the
     sticky "Start new chat" header needs a bigger negative offset to still
     fully cover the gap (see base rule ~line 934). */
  .rs-chat-head-row { top: -40px; }
  .rs-scroll[data-testid="scroll-phase"],
  .rs-scroll[data-testid="scroll-goals"] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 40px 24px;
  }
  /* Liora chat + reading text: comfortable wide measure (spreads across the
     page instead of hugging a narrow left column) — left-aligned. */
  .rs-scroll[data-testid="scroll-interpret"],
  .rs-scroll[data-testid="scroll-journal"] {
    max-width: 1180px;
    padding: 40px 40px 24px;
  }
  /* Tab 1 (chart) gets the FULL main-area width — Lisa Feb 8 2026:
     the chart canvas should fill edge-to-edge with the wheel + headings
     centered inside, not float as a 1180px tile. The iframe itself has
     a reading-mode override that widens its .app wrapper from 70% to
     100% so the wheel scales up to use the new space. */
  .rs-main > .rs-scroll[data-testid="scroll-area"],
  .rs-main > .rs-scroll:has(.rs-chart-frame) {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
  }
  .rs-composer {
    padding: 16px 32px;
  }
  .rs-composer-row {
    max-width: 100%;
    margin: 0;
  }
  .rs-msg {
    max-width: 80%;
    font-size: var(--rs-read-body);
    line-height: 1.72;
  }
  .rs-suggestions-head { font-size: 28px; }
  .rs-starter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-chart-overlay {
    max-width: 480px;
    left: auto;
    right: 0;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
  }
}


/* ── Opener bubble (Tab 2 V5-voice opening) ────────────────────────── */
/* Distinguishes the cached opener from the live conversation: warm
   sage-faint background, soft top accent, slightly larger leading.
   It anchors the conversation without screaming for attention. */
.rs-msg.rs-msg-opener {
  align-self: stretch;
  max-width: 100%;
  background: rgba(138, 158, 140, 0.07);
  border: 0.5px solid rgba(138, 158, 140, 0.22);
  border-left: 2px solid #8A9E8C;
  border-left: 2px solid var(--rs-sage);
  border-radius: 12px;
  padding: 22px 24px 22px 22px;
  margin-bottom: 14px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.01em;
}
.rs-msg-opener-eyebrow {
  margin: 0 0 10px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A9E8C;
  color: var(--rs-sage);
}
.rs-msg-opener-body {
  white-space: pre-wrap;
}

/* ── Desktop split-view: persistent placement sidebar on Tab 2 ──────
   On screens ≥1024px and when the sidebar is anchored to Tab 2, keep
   it expanded by default so the member never has to hunt for the
   placement list. Mobile + tablet behavior is unchanged. */
@media (min-width: 1024px) {
  .rs-sidebar[data-tab="interpret"] {
    width: 304px;
  }
  /* Hide the collapse chevron on desktop when pinned open — the
     placements panel is the whole point of Tab 2 here. */
  .rs-sidebar[data-tab="interpret"] .rs-sidebar-toggle {
    display: none;
  }
  /* Liora chat fills the full reading width, matching the Moon tab. */
  .rs-app:has(.rs-sidebar[data-tab="interpret"]) .rs-scroll[data-testid="scroll-interpret"] {
    padding: 40px 32px 24px;
  }
  /* Flyout sits BESIDE the pinned rail (no overlay/dimming on desktop). */
  .rs-flyout {
    left: 304px;
    width: 300px;
    z-index: 25;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.4);
  }
  .rs-flyout-backdrop {
    background: transparent;
    z-index: 24;
  }
}


/* ── MOBILE READABILITY PASS (Lisa Feb 10 2026) ────────────────────────
   Goal: minimal elegance, simplicity, MUCH bigger text on phones.
   Edge-to-edge layout for all Tabs 2/3/4 chat surfaces.
   Readability is the primary consideration. */
@media (max-width: 720px) {
  /* Push the scroll surface to the screen edges with just enough
     internal gutter that prose doesn't kiss the bezel. The previous
     18px feel was too inset on phones. */
  .rs-scroll {
    padding: 22px 14px 14px;
    gap: 18px;
  }
  /* Using This App page (Psychology of the Cycle block) needs more side
     gutter than chat surfaces — long headline + list labels were sitting
     too close to the screen edge on phones (Lisa report). */
  .rs-scroll[data-testid="scroll-practice"],
  .rs-scroll[data-testid="scroll-references"] {
    padding-left: 28px;
    padding-right: 28px;
  }
  .rs-practice-headline { font-size: 19px !important; }
  .rs-practice-eyebrow { font-size: 8.5px !important; letter-spacing: 0.22em !important; margin-bottom: 14px !important; }
  .rs-psychology-title { font-size: 19px; }
  .rs-psychology-p { font-size: 14.5px; }
  .rs-ref-title { font-size: 14px; }

  /* Compact "Chats & chart" opener in the bottom bar (mobile only). */
  .rs-composer-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.55);
    background: rgba(201, 169, 110, 0.12);
    color: #BC9F6E;
    color: var(--rs-gold, #bc9f6e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
  }
  .rs-composer-drawer-btn:active { background: rgba(201, 169, 110, 0.24); }
  .rs-composer-drawer-btn svg { width: 20px; height: 20px; }
  /* Bigger chat message text — the centre-of-attention on Tabs 2 & 3.
     Was 14.5px (too small to read comfortably on a phone). */
  .rs-msg {
    font-size: var(--rs-read-body);
    line-height: 1.6;
    max-width: 96%;
    padding: 14px 18px;
  }
  /* Opener bubble — even larger so the V5 paragraph reads like a
     proper opening paragraph, not a chat tooltip. */
  .rs-msg.rs-msg-opener { padding: 22px 18px 20px; }
  .rs-msg-opener-body { font-size: 19px; line-height: 1.6; }
  .rs-msg-opener-eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    margin-bottom: 12px;
  }
  /* Empty-state copy (Where to begin · italic title · sub) */
  .rs-suggestions-head { font-size: 26px; line-height: 1.3; margin-top: 6px; }
  .rs-suggestions-sub { font-size: 15.5px; line-height: 1.55; margin-bottom: 8px; }
  /* Starter cards — bigger tap target + bigger label */
  .rs-starter-card { font-size: 16px; padding: 18px 18px; }
  /* Phase eyebrow (small caps "WHERE TO BEGIN" etc) */
  .rs-phase-eyebrow { font-size: 11px; letter-spacing: 0.28em; }
  /* Tab 1 chart intro — bigger lead line so the "Tap any placement
     below" prompt reads naturally */
  .rs-chart-intro-text { font-size: 18px; line-height: 1.45; }
  /* Composer (text input) — bigger input text */
  .rs-composer { padding: 14px 14px 18px; }
  .rs-composer textarea, .rs-composer input { font-size: 16.5px; line-height: 1.5; }
}

/* ── Moon, Intentions & Reflections — drill-in (Lisa Jun 2026) ── */
.rs-moon-menu { display: flex; flex-direction: column; }
.rs-moon-journal-divider {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  background: var(--rs-border);
  margin: 30px 0 26px;
}
.rs-moon-glyph {
  width: 96px;
  max-width: 96px;
  margin: 4px 0 18px;
  opacity: 0;
  animation: rs-moon-glyph-in 700ms ease forwards;
}
.rs-moon-glyph svg { width: 100%; height: auto; display: block; }
@keyframes rs-moon-glyph-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-moon-glyph { animation: none; opacity: 1; }
}
.rs-moon-options { margin-top: 40px; }
.rs-moon-option {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 24px 2px; border: none; border-top: 0.5px solid rgba(255, 255, 255, 0.08); border-top: 0.5px solid var(--rs-border);
  background: transparent; text-align: left; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans); transition: opacity .15s ease;
}
.rs-moon-options .rs-moon-option:last-child { border-bottom: 0.5px solid rgba(255, 255, 255, 0.08); border-bottom: 0.5px solid var(--rs-border); }
.rs-moon-option:hover { opacity: .78; }
.rs-moon-option-ico { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #8A9E8C; color: var(--rs-sage); }
.rs-moon-option-ico svg { width: 21px; height: 21px; }
.rs-moon-option-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rs-moon-option-title { font-size: 17px; color: #FFFFFF; color: var(--rs-white); }
.rs-moon-option-sub { font-size: 17px; color: #7A756E; color: var(--rs-dim); }
.rs-moon-option-arrow { margin-left: auto; width: 18px; height: 18px; color: #7A756E; color: var(--rs-dim); flex-shrink: 0; }

.rs-moon-detail { display: flex; flex-direction: column; }
.rs-moon-back {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  position: relative; z-index: 90;
  background: transparent; border: none; cursor: pointer; padding: 0; margin-bottom: 30px;
  color: #BC9F6E;
  color: var(--rs-gold); font-family: 'Montserrat', sans-serif; font-family: var(--rs-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}
.rs-moon-back:hover { color: #d8bd86; }
.rs-moon-back svg { width: 18px; height: 18px; }
.rs-moon-detail-title { font-family: 'Playfair Display', serif; font-family: var(--rs-serif); font-size: 30px; line-height: 1.15; color: #FFFFFF; color: var(--rs-white); font-weight: 400; margin: 0 0 22px; }
.rs-moon-detail-title em { color: #E6C2BF; color: var(--rs-blush); font-style: italic; }
.rs-moon-detail-intro { font-size: 17px; line-height: 1.6; color: #C8C2B8; color: var(--rs-muted); margin: 0 0 20px; max-width: 680px; }
/* Moon-phase header — glyph + (Today / phase / sign) as one grounded row
   (Lisa Jun 2026). Replaces the lone left-floating glyph above the title. */
.rs-moon-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 4px 0 24px;
}
.rs-moon-header .rs-moon-glyph {
  flex-shrink: 0;
  width: 88px;
  max-width: 88px;
  margin: 0;
}
.rs-moon-header-text { min-width: 0; }
.rs-moon-header-text .rs-phase-eyebrow { margin-bottom: 6px; }
.rs-moon-header-text .rs-phase-head { margin-bottom: 4px; }
.rs-moon-header-text .rs-phase-sub { margin: 0; }
@media (max-width: 760px) {
  .rs-moon-header { gap: 16px; }
  .rs-moon-header .rs-moon-glyph { width: 72px; max-width: 72px; }
}

/* Sidebar saved-question row — convo title + hover-reveal trash, with a
   gentle inline confirm so nothing is deleted by accident. */
.rs-sidebar-convo-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
}
.rs-sidebar-convo-row .rs-sidebar-convo { flex: 1 1; min-width: 0; }
.rs-sidebar-convo-actions { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
.rs-sidebar-convo-rename {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
  padding: 3px 0;
}
.rs-sidebar-convo-rename-input {
  flex: 1 1;
  min-width: 0;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 8px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13px;
  padding: 6px 9px;
}
.rs-sidebar-convo-rename-input:focus { outline: none; border-color: #E6C2BF; border-color: var(--rs-blush); }
.rs-sidebar-convo-del {
  flex-shrink: 0;
  opacity: 0;
  background: transparent;
  border: none;
  color: #7A756E;
  color: var(--rs-dim);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  border-radius: 8px;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.rs-sidebar-convo-del svg { width: 15px; height: 15px; }
.rs-sidebar-convo-row:hover .rs-sidebar-convo-del,
.rs-sidebar-convo-row:focus-within .rs-sidebar-convo-del { opacity: 1; }
.rs-sidebar-convo-del:hover { color: #E6C2BF; color: var(--rs-blush); background: rgba(212, 165, 154, 0.10); }
.rs-sidebar-convo-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 6px;
}
.rs-sidebar-convo-confirm-yes,
.rs-sidebar-convo-confirm-no {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-sidebar-convo-confirm-yes { color: #E6C2BF; color: var(--rs-blush); }
.rs-sidebar-convo-confirm-yes:hover { color: #E0B3A6; background: rgba(212, 165, 154, 0.10); }
.rs-sidebar-convo-confirm-no { color: #7A756E; color: var(--rs-dim); }
.rs-sidebar-convo-confirm-no:hover { color: #F6F4F0; color: var(--rs-cream); }
/* Touch devices have no hover — keep the trash quietly visible. */
@media (hover: none) {
  .rs-sidebar-convo-del { opacity: 0.55; }
}
/* Inline "Ask Liora about this moon" chat — lives on the same page as the
   moon reading (Lisa Jun 2026). Flex column so the user/assistant bubbles
   keep their left/right alignment. */
.rs-moon-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.rs-moon-chat .rs-moon-journal-divider { margin: 30px 0 24px; }
.rs-moon-chat .rs-moon-detail-title { margin-bottom: 12px; }
.rs-moon-chat .rs-moon-detail-intro { margin-bottom: 4px; }

@media (max-width: 760px) {
  .rs-moon-detail-title { font-size: 24px; }
  .rs-moon-option-title, .rs-moon-option-sub, .rs-moon-detail-intro { font-size: 16px; }
}


/* ── Desktop empty-state density (Lisa Jun 2026) ───────────────────────
   On the Chat with Liora tab, the opening stack (eyebrow → title → sub →
   "From Liora" opener → THEMES → pills) carried too much vertical air,
   pushing the first theme-pill row below the fold. Tighten the rhythm so
   at least the top of the first pill row is always visible on load —
   reclaimed almost entirely from whitespace, the reading text size is
   left intact (opener leading nudged 1.55 → 1.5 only). */
@media (min-width: 900px) {
  .rs-scroll[data-testid="scroll-interpret"] {
    gap: 16px;
    padding-top: 26px;
  }
  .rs-scroll[data-testid="scroll-interpret"] .rs-suggestions-sub { margin-bottom: 0; }
  .rs-scroll[data-testid="scroll-interpret"] .rs-opener { margin: 0; padding: 14px 22px; }
  .rs-scroll[data-testid="scroll-interpret"] .rs-opener-eyebrow { margin-bottom: 10px; }
  .rs-scroll[data-testid="scroll-interpret"] .rs-opener-body { line-height: 1.5; }
  .rs-scroll[data-testid="scroll-interpret"] .rs-themes-label { margin: 0; }
  .rs-scroll[data-testid="scroll-interpret"] .rs-starter-grid { margin-top: 0; }
}

/* ── Mobile tab strip (≤720px) — labelled top nav (Lisa Jun 2026) ──────
   Replaces the cramped left icon rail on phones: the 3 reading tabs become
   a labelled horizontal strip pinned under the header (Chart · Liora ·
   Moon). The left rail disappears when collapsed and only re-appears as a
   slide-in drawer ("Chats & chart") on the Chat tab. Desktop is untouched. */
.rs-mobile-tabbar { display: none; }
.rs-mobile-drawer-btn { display: none; }

@media (max-width: 720px) {
  .rs-mobile-tabbar {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: #242426;
    background: var(--rs-surface);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0.5px solid var(--rs-border);
  }
  .rs-mobile-tab {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 9px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7A756E;
    color: var(--rs-dim);
    font-family: 'Montserrat', sans-serif;
    font-family: var(--rs-sans);
    position: relative;
    transition: color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .rs-mobile-tab-icon { display: inline-flex; }
  .rs-mobile-tab svg { width: 19px; height: 19px; }
  .rs-mobile-tab-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .rs-mobile-tab[data-active="true"] { color: #FFFFFF; color: var(--rs-white); font-weight: 600; }
  .rs-mobile-tab[data-active="true"] .rs-mobile-tab-icon { color: #8A9E8C; color: var(--rs-sage); }
  .rs-mobile-tab[data-active="true"]::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 2.5px;
    background: #8A9E8C;
    background: var(--rs-sage);
    border-radius: 2px;
  }

  /* The top strip owns tab switching now — hide the left rail's toggle +
     tab icons on phones. The rail collapses to zero width and only opens
     as the slide-in drawer. */
  .rs-sidebar-toggle,
  .rs-sidebar-tabs { display: none; }
  .rs-sidebar:not([data-open="true"]) {
    width: 0;
    border-right: none;
  }
  /* Open drawer = comfortable reading width on a phone. Widened (Lisa Jul
     2026) so titles + labels breathe; content is nowrap+ellipsis so the
     extra width never causes uneven wrapping or edge-spill. */
  .rs-sidebar[data-open="true"] {
    width: 92vw;
    max-width: 380px;
    padding-top: 18px;
  }

  /* Mobile-only "Chats & chart" pill that opens the drawer (Chat tab).
     Sticky so it never scrolls out of view on long conversations. */
  .rs-mobile-drawer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    position: -webkit-sticky;
    position: sticky;
    top: 8px;
    z-index: 30;
    border: 1px solid rgba(201, 169, 110, 0.55);
    background: rgba(18, 18, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #F6F4F0;
    color: var(--rs-cream, #f0e8df);
    border-radius: 999px;
    padding: 12px 22px;
    font-family: 'Montserrat', sans-serif;
    font-family: var(--rs-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
  }
  .rs-mobile-drawer-btn svg { width: 17px; height: 17px; flex-shrink: 0; color: #BC9F6E; color: var(--rs-gold, #bc9f6e); }
  .rs-mobile-drawer-btn .rs-drawer-btn-chevron { width: 15px; height: 15px; margin-left: 2px; }
}

/* ── "What Liora remembers": member-facing cross-chat memory control ── */
.rs-memory-card {
  margin-top: 4px;
}
.rs-memory-profile {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
  border-left: 2px solid #E6C2BF;
  border-left: 2px solid var(--rs-blush);
  border-radius: 10px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.rs-memory-empty {
  margin: 12px 0 0;
  color: #C8C2B8;
  color: var(--rs-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.rs-memory-meta {
  margin: 8px 0 0;
  color: #7A756E;
  color: var(--rs-dim);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.rs-memory-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rs-memory-reset-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border: 1px solid var(--rs-border-mid);
  color: #C8C2B8;
  color: var(--rs-muted);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rs-memory-reset-btn:hover:not(:disabled) { border-color: #E6C2BF; border-color: var(--rs-blush); color: #E6C2BF; color: var(--rs-blush); }
.rs-memory-reset-btn:disabled { opacity: 0.5; cursor: default; }
.rs-memory-status {
  margin: 12px 0 0;
  color: #8A9E8C;
  color: var(--rs-sage);
  font-size: 12.5px;
}

/* ── One-time note from Liora about her cross-chat memory ── */
.rs-liora-memnote {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(230, 194, 191, 0.10);
  background: var(--rs-blush-faint);
  border: 1px solid #E6C2BF;
  border: 1px solid var(--rs-blush);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.rs-liora-memnote-text {
  margin: 0;
  flex: 1 1 260px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  line-height: 1.6;
}
.rs-liora-memnote-dismiss {
  flex-shrink: 0;
  background: #E6C2BF;
  background: var(--rs-blush);
  border: none;
  color: #1a1410;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.rs-liora-memnote-dismiss:hover { opacity: 0.85; }


/* ════════════════════════════════════════════════════════════════════
   "More tools" reading-tools navigation (trigger + left-slide drawer)
   ════════════════════════════════════════════════════════════════════ */

/* Trigger bar sits at the top-left of the reading area. */
.rs-tools-triggerbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid var(--rs-border);
  background: #141414;
  background: var(--rs-bg);
  z-index: 20;
}
.rs-tools-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  background: transparent;
  border: 1px solid rgba(196, 164, 107, 0.42);
  border-radius: 999px;
  padding: 7px 18px;
  color: #F6F4F0;
  color: var(--rs-cream);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rs-tools-trigger-newdot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #BC9F6E;
  background: var(--rs-gold);
  animation: rs-newdot-pulse 2.2s ease-in-out infinite;
}
@keyframes rs-newdot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #141414, 0 0 0 0 rgba(196, 164, 107, 0.5); box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 0 rgba(196, 164, 107, 0.5); }
  50% { box-shadow: 0 0 0 2px #141414, 0 0 0 5px rgba(196, 164, 107, 0); box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 5px rgba(196, 164, 107, 0); }
}
.rs-tools-trigger:hover { border-color: #BC9F6E; border-color: var(--rs-gold); color: #FFFFFF; color: var(--rs-white); background: rgba(196, 164, 107, 0.08); }
.rs-tools-trigger-label { line-height: 1; }
.rs-tools-trigger-chat { display: none; }
.rs-tools-trigger-chat svg { width: 18px; height: 18px; }
/* Desktop: three-line hamburger square (matches .ls-app-eyebrow-burger). */
.rs-tools-trigger-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 18px;
}
.rs-tools-trigger-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* Mobile: chat-icon pill instead of the hamburger (so it never reads as a
   duplicate of the top-right account hamburger). */
@media (max-width: 720px) {
  .rs-tools-trigger-burger { display: none; }
  .rs-tools-trigger-chat { display: inline-flex; }
  .rs-tools-triggerbar { padding: 10px 14px; }
}

/* Drawer head */
.rs-tools-head {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid var(--ls-border-soft, rgba(255,255,255,0.10));
}
.rs-tools-head-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: normal;
  font-size: 1.15rem;
  color: #F6F4F0;
  color: var(--rs-cream);
  letter-spacing: 0.01em;
}
/* Intentional blush highlight on ONE word of a multi-word title. */
.rs-tools-accent { color: #E6C2BF; color: var(--rs-blush); }
.rs-tools-head-sub {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A756E;
  color: var(--rs-dim);
}
/* Temporary heads-up while Liora's readings are being reworked (added 5 Aug
   2026) — sits with the drawer head so it's visible on every reading-tools
   surface without needing its own dismiss/state logic. Remove once the
   underlying work is done. */
.rs-tools-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(188, 159, 110, 0.28);
  background: rgba(188, 159, 110, 0.08);
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.9;
}

/* Top-level section label = Playfair Display, NON-italic (the switchers). */
.ls-nav-drawer .rs-tools-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
  padding: 15px 4px;
  margin: 0;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.18rem;
  color: #F6F4F0;
  color: var(--rs-cream);
  letter-spacing: 0.01em;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.rs-tools-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  color: #BC9F6E;
  color: var(--rs-gold);
  opacity: 0.9;
}
.rs-tools-label { line-height: 1.2; }
.rs-tools-lock { margin-left: auto; opacity: 0.45; flex-shrink: 0; }
.ls-nav-drawer .rs-tools-item:hover { color: #BC9F6E; color: var(--rs-gold); padding-left: 8px; }
.ls-nav-drawer .rs-tools-item[data-active="true"] {
  color: #BC9F6E;
  color: var(--rs-gold);
  box-shadow: inset 3px 0 0 #BC9F6E;
  box-shadow: inset 3px 0 0 var(--rs-gold);
  padding-left: 10px;
}

/* Blush variant (added 1 Sep 2026, "Your Natal Chart" / "About Your Moon
   Cycle") — replaces the gold hover/active treatment with white text +
   the existing per-word blush accent (.rs-tools-accent), so these read the
   same as the heading-only rail labels next to them instead of flashing
   gold on click. */
.ls-nav-drawer .rs-tools-item.rs-tools-item-blush:hover { color: #F6F4F0; color: var(--rs-cream); padding-left: 8px; }
.ls-nav-drawer .rs-tools-item.rs-tools-item-blush[data-active="true"] {
  color: #F6F4F0;
  color: var(--rs-cream);
  box-shadow: inset 3px 0 0 #E6C2BF;
  box-shadow: inset 3px 0 0 var(--rs-blush);
  padding-left: 10px;
}

/* Heading-turned-toggle rail groups ("Create with the Moon" / "What's Live
   in Your Sky", unified 4 Sep 2026 with "Explore your chart"'s existing
   accordion pattern — see .rs-tools-explore-toggle above). This wraps the
   icon + label (+ optional lock) as one flex cluster so the outer toggle's
   space-between only ever splits it from the chevron, regardless of
   whether the lock icon is present. */
.rs-tools-toggle-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Sub-items = Montserrat, indented + lighter (submenu status). Padding
   made symmetric left/right (3 Nov 2026) so every submenu chip shares the
   same edges/width regardless of nesting depth. */
.ls-nav-drawer .rs-tools-sub {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 14px;
  margin: 0;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #C8C2B8;
  color: var(--rs-muted);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.ls-nav-drawer .rs-tools-sub:hover { color: #F6F4F0; color: var(--rs-cream); padding-left: 18px; }
.ls-nav-drawer .rs-tools-sub-action {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F6F4F0;
  color: var(--rs-cream);
  padding: 15px 4px;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
}
.ls-nav-drawer .rs-tools-sub-action:hover { color: #BC9F6E; color: var(--rs-gold); padding-left: 8px; }
.ls-nav-drawer .rs-tools-sub-static { color: #7A756E; color: var(--rs-dim); cursor: default; }
/* "What's Live in Your Sky" section label (3 Nov 2026) — a quiet Playfair
   Display heading, not a button: no background, no border, not clickable.
   This Week / Next 28 Days sit open underneath it, always. */
.ls-nav-drawer .rs-tools-sky-heading {
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #F6F4F0;
  color: var(--rs-cream);
  background: none;
  border: none;
  margin: 10px 4px 6px;
  padding: 0;
}
.ls-nav-drawer .rs-tools-sub-static:hover { padding-left: 18px; color: #7A756E; color: var(--rs-dim); }

/* "Explore your chart" collapsible header — styled as a main Playfair heading. */
.ls-nav-drawer .rs-tools-explore-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
  padding: 15px 4px;
  margin: 0;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F6F4F0;
  color: var(--rs-cream);
  transition: color 0.2s ease;
}
.ls-nav-drawer .rs-tools-explore-toggle:hover { color: #BC9F6E; color: var(--rs-gold); }
.rs-tools-chevron { width: 18px; height: 18px; transition: transform 0.24s ease; flex-shrink: 0; }
.ls-nav-drawer .rs-tools-explore-toggle[data-open="true"] .rs-tools-chevron { transform: rotate(90deg); }
.ls-nav-drawer .rs-tools-explore-toggle[data-open="true"] { color: #F6F4F0; color: var(--rs-cream); }
/* Saved chart/moon questions: Montserrat, matching the Intentions/Reflections sub links */
.ls-nav-drawer .rs-tools-qtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #C8C2B8;
  color: var(--rs-muted);
  border-bottom: none;
}
.ls-nav-drawer .rs-tools-qtoggle > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ls-nav-drawer .rs-tools-qtoggle:hover { color: #F6F4F0; color: var(--rs-cream); }
.ls-nav-drawer .rs-tools-qtoggle .rs-tools-chevron { width: 15px; height: 15px; flex-shrink: 0; }
/* "Today's Reading" / "Intentions" / "This Week" / "Next 28 Days" — static
   right-facing chevron marking these as clickable nav links (they navigate,
   they don't expand inline, so no rotate-on-open like .rs-tools-sub-toggle).
   Sized/coloured to exactly match .rs-tools-qtoggle's chevron above (Saved
   chart/moon questions) per Lisa's request 1 Sep 2026 — was 14px/opacity 0.7,
   now 15px/full opacity, identical to the qtoggle chevron. */
.ls-nav-drawer .rs-tools-sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ls-nav-drawer .rs-tools-sub-nav > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ls-nav-drawer .rs-tools-sub-nav .rs-tools-chevron { width: 15px; height: 15px; flex-shrink: 0; }
.rs-tools-explore-list { display: flex; flex-direction: column; padding-left: 6px; }
.rs-tools-subgroup { display: flex; flex-direction: column; }
/* Section toggle gains a chevron on desktop (it expands inline). */
.ls-nav-drawer .rs-tools-sub-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls-nav-drawer .rs-tools-sub-toggle .rs-tools-chevron { width: 14px; height: 14px; opacity: 0.7; }
.ls-nav-drawer .rs-tools-sub-toggle[data-open="true"] { color: #F6F4F0; color: var(--rs-cream); }
.ls-nav-drawer .rs-tools-sub-toggle[data-open="true"] .rs-tools-chevron { transform: rotate(90deg); }
.ls-nav-drawer .rs-tools-sub-toggle:hover { padding-left: 18px; }
/* Submenu "card" treatment (3 Nov 2026) — default lighter-charcoal chip
   with rounded corners, delicate gold outline on hover, distinct rose/gold
   wash when it's the current page. Font/letter-spacing above untouched;
   focus-visible keeps the browser's default outline. */
.ls-nav-drawer .rs-tools-sub-nav,
.ls-nav-drawer .rs-tools-qtoggle,
.ls-nav-drawer .rs-tools-sub-toggle {
  background: #2E2E30;
  background: var(--rs-raise);
  border: 1px solid transparent;
  border-radius: 8px;
  margin: 0 0 4px;
}
.ls-nav-drawer .rs-tools-sub-nav:hover,
.ls-nav-drawer .rs-tools-qtoggle:hover,
.ls-nav-drawer .rs-tools-sub-toggle:hover {
  border-color: rgba(188, 159, 110, 0.5);
}
.ls-nav-drawer .rs-tools-sub-nav[data-active="true"] {
  background: rgba(230, 194, 191, 0.14);
  border-color: #BC9F6E;
  border-color: var(--rs-gold);
  color: #F6F4F0;
  color: var(--rs-cream);
}
/* Nested one level deeper (This Week / Next 28 Days under What's Live in
   Your Sky) — left-inset only, right edge stays aligned with everything
   else, so the hierarchy reads without an oversized indent. */
.rs-tools-nested-list { display: flex; flex-direction: column; margin-left: 14px; }

/* Icon-above-heading section pattern (3 Nov 2026, agreed structure) —
   "Create with the Moon", "Your Birth Chart", "Using This App". Centred
   icon in the existing gold tone, centred Playfair Display heading below
   it. Birth Chart's heading is the one clickable variant (it IS the nav
   target); the other two are plain labels, their actions live in the
   submenu chips beneath them. */
.rs-tools-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 6px;
  color: #BC9F6E;
  color: var(--rs-gold);
  opacity: 0.9;
}
.ls-nav-drawer .rs-tools-section-heading {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: #F6F4F0;
  color: var(--rs-cream);
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: none;
}
.ls-nav-drawer .rs-tools-section-heading-btn {
  cursor: pointer;
  transition: color 0.2s ease;
}
.ls-nav-drawer .rs-tools-section-heading-btn:hover { color: #BC9F6E; color: var(--rs-gold); }
.rs-tools-section-divider {
  height: 1px;
  background: rgba(198, 157, 100, 0.16);
  margin: 10px 4px 4px;
}
/* Inline placement sub-menu. Hidden by default (mobile uses the popped-out
   flyout to save space); shown on desktop where the rail is docked. */
.rs-tools-placements { display: none; }
.rs-tools-placements .rs-sidebar-placement-row { padding: 8px 4px 8px 24px; }
.rs-tools-placements .rs-sidebar-placement-planet { font-size: 13px; }
.rs-tools-placements .rs-sidebar-placement-sign { font-size: 12.5px; }
@media (max-width: 899px) {
  /* Mobile: the section is just a link into the flyout — no chevron. */
  .ls-nav-drawer .rs-tools-sub-toggle .rs-tools-chevron { display: none; }
}
@media (min-width: 900px) {
  /* Desktop: expand the section inline in the docked rail... */
  .rs-tools-placements {
    display: flex;
    flex-direction: column;
    padding-left: 4px;
    margin: 2px 0 8px;
    border-left: 1px solid rgba(198, 157, 100, 0.18);
  }
  /* ...and never pop out the flyout on desktop. */
  .rs-flyout,
  .rs-flyout-backdrop { display: none !important; }
}


/* Saved-question section headings — main Playfair headings. */
.rs-tools-subhead {
  margin: 4px 0 0;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F6F4F0;
  color: var(--rs-cream);
}
.rs-tools-empty {
  margin: 2px 0 4px;
  padding: 0 4px 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 12px;
  color: #7A756E;
  color: var(--rs-dim);
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════
   BuddyBoss-style reading-tools panel.
   Mobile (< 900px): unchanged — the "More tools" pill opens the left
   slide-over drawer (.ls-nav-drawer-left overlay).
   Desktop (>= 900px): the panel is DOCKED in the layout as a permanent
   left rail (mirrors the Groups .ls-bb-rail), always visible, and can
   collapse to an icon-only rail. No backdrop, no blur.
   ══════════════════════════════════════════════════════════════════════ */

/* The row that holds the docked rail + the app content. On mobile it is a
   plain block (the drawer floats over via position:fixed). */
.rs-shell-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* Desktop collapse toggle + mobile close: shown per breakpoint below. */
.rs-tools-collapse {
  display: none;
  position: absolute;
  top: 16px;
  right: 14px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rs-border);
  border-radius: 6px;
  color: #cfc6ba;
  color: var(--rs-cream-soft, #cfc6ba);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.rs-tools-collapse:hover { color: #BC9F6E; color: var(--rs-gold); border-color: #BC9F6E; border-color: var(--rs-gold); }
/* Reading-tools drawer surface tone (lighter panel), mobile + desktop.
   Matches the Birth Chart exploration cards exactly (--rs-surface). */
.ls-nav-drawer.ls-nav-drawer-left.rs-tools-dock { background: #242426; background: var(--rs-surface); }

@media (min-width: 900px) {
  /* Dock the rail: sit in the flex flow and push the content aside. */
  .ls-nav-drawer.ls-nav-drawer-left.rs-tools-dock {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    align-self: stretch;
    width: 272px;
    max-width: 272px;
    flex-shrink: 0;
    transform: none !important;
    pointer-events: auto;
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid var(--rs-border);
    background: #242424;
    padding: 26px 18px 32px;
    overflow-y: auto;
    z-index: 1;
    transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* The mobile close button never shows on desktop; the collapse toggle does. */
  .rs-tools-dock .ls-nav-drawer-close { display: none; }
  .rs-tools-dock .rs-tools-collapse { display: inline-flex; }
  /* Give the head room for the collapse toggle. */
  .rs-tools-dock .rs-tools-head { padding-right: 40px; }
  /* Hide the "More tools" pill trigger on desktop (rail is always docked). */
  .rs-tools-triggerbar { display: none; }
  /* Backdrop never applies on desktop. */
  .rs-tools-dock ~ .ls-nav-drawer-backdrop,
  .ls-nav-drawer-backdrop { display: none; }

  /* Collapsed = icon rail. */
  .ls-nav-drawer.rs-tools-dock.is-collapsed {
    width: 82px;
    max-width: 82px;
    padding-top: 62px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .rs-tools-dock.is-collapsed .rs-tools-head,
  .rs-tools-dock.is-collapsed .rs-tools-label,
  .rs-tools-dock.is-collapsed .rs-tools-sub,
  .rs-tools-dock.is-collapsed .rs-tools-subhead,
  .rs-tools-dock.is-collapsed .rs-tools-empty,
  .rs-tools-dock.is-collapsed .rs-tools-explore-toggle,
  .rs-tools-dock.is-collapsed .rs-tools-explore-list {
    display: none;
  }
  .rs-tools-dock.is-collapsed .rs-tools-collapse {
    right: 50%;
    transform: translateX(50%);
  }
  .rs-tools-dock.is-collapsed .ls-nav-drawer .rs-tools-item,
  .rs-tools-dock.is-collapsed .rs-tools-item {
    justify-content: center;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 6px;
    border-bottom: none;
  }
  .rs-tools-dock.is-collapsed .rs-tools-item:hover { padding-left: 4px; }
  .rs-tools-dock.is-collapsed .rs-tools-item[data-active="true"] {
    box-shadow: inset 3px 0 0 #BC9F6E;
    box-shadow: inset 3px 0 0 var(--rs-gold);
    padding-left: 4px;
  }
  .rs-tools-dock.is-collapsed .rs-tools-item.rs-tools-item-blush[data-active="true"] {
    box-shadow: inset 3px 0 0 #E6C2BF;
    box-shadow: inset 3px 0 0 var(--rs-blush);
  }
  .rs-tools-dock.is-collapsed .rs-tools-ico { width: auto; }
}

/* ── Reading provenance: credit line + Share, chat watermark, share card ── */

/* Attribution shown under each finished Liora reading. */
.rs-liora-credit {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--rs-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.72;
  margin: 14px 0 0;
  line-height: 1.5;
}
.rs-liora-credit-cr {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 1px;
}

/* Faint always-on brand watermark behind the chat, so any raw screenshot
   still carries the mark. Kept very subtle. */
.rs-scroll-branded { position: relative; }
.rs-scroll-branded::before {
  content: "Lunar Sanctuary";
  position: fixed;
  right: 26px;
  bottom: 92px;
  font-family: 'Playfair Display', serif;
  font-family: var(--rs-serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F6F4F0;
  color: var(--rs-cream);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.rs-scroll-branded > * { position: relative; z-index: 1; }
/* The watermark rule above forces position:relative on every direct child,
   which cancels the sticky "Start new chat" header on the Chat tab (Lisa
   Aug 2026 bug report). Win back sticky with a more specific selector. */
.rs-scroll-branded > .rs-chat-head-row { position: -webkit-sticky; position: sticky; z-index: 5; }


/* ==========================================================================
   AsOne.Earth — parent brand pages (homepage, six-week-arc, readings)
   Path-based, shares the deployment with Lunar Sanctuary. Reuses the brand
   tokens from App.css (--ls-*). Prefix: .ao-  (keeps clear of .ls-/.rs-).
   ========================================================================== */

.ao-page {
  min-height: 100vh;
  background: #1A1A1A;
  background: var(--ls-panel-bg, #1A1A1A);
  color: #F5EBDD;
  color: var(--ls-cream, #F5EBDD);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.ao-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 72px);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #141414;
  background: var(--ls-hero-bg, #141414);
}
.ao-nav-brand {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--ls-cream);
  cursor: pointer;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ao-nav-brand em { font-style: italic; color: var(--ls-blush); }
/* Back-to-home chevron shown before the brand on non-home tabs. Sized to the
   brand, muted gold, with a subtle nudge-left on hover so it reads as "back". */
.ao-nav-back-arrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  margin-right: -2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ao-nav-brand--back:hover .ao-nav-back-arrow { transform: translateX(-3px); opacity: 0.85; }
.ao-nav--sage .ao-nav-back-arrow { color: #16210f; }
.ao-footer-brand { display: flex; align-items: center; gap: 10px; }
.ao-brand-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 0.5px solid rgba(201,169,110,0.35); }
.ao-nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.ao-nav-link {
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-cream);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: 'Montserrat', sans-serif;
}
.ao-nav-link:hover { color: var(--ls-gold-light); }
/* Active "front door" tab — underline so members know which tab they're on. */
.ao-nav-link.is-active {
  color: var(--ls-gold-light);
  position: relative;
}
.ao-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Sage nav variant — Readings & Six Week Arc (matches the Lunar Sanctuary
   top bar). Dark, readable text on sage green. */
.ao-nav--sage { background: #9FAD9F; }
.ao-nav--sage .ao-nav-brand span,
.ao-nav--sage .ao-nav-brand em,
.ao-nav--sage .ao-nav-link { color: #16210f; }
.ao-nav--sage .ao-nav-link:hover { color: #000; }
.ao-nav--sage .ao-nav-link.is-active { color: #000; }
.ao-nav--sage .ao-nav-cta { color: #16210f; border-color: rgba(0,0,0,0.42); }
.ao-nav--sage .ao-nav-cta:hover { background: rgba(0,0,0,0.08); }
.ao-nav-cta {
  border: 0.5px solid var(--ls-gold);
  color: var(--ls-gold-light);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
  font-family: 'Montserrat', sans-serif;
}
.ao-nav-cta:hover { background: var(--ls-gold); color: #1a160c; }
.ao-nav-links-mobile-hide { }

/* ── Mobile hamburger + dropdown menu (shown ≤760px) ─────────────────── */
.ao-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid rgba(198, 157, 100, 0.35);
  border-radius: 10px;
  cursor: pointer;
}
.ao-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ls-cream);
  border-radius: 2px;
  transition: background 0.2s ease;
}
.ao-nav--sage .ao-nav-burger { border-color: rgba(0,0,0,0.35); }
.ao-nav--sage .ao-nav-burger span { background: #16210f; }
.ao-nav-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 24;
}
.ao-nav-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: clamp(16px, 5vw, 40px);
  z-index: 25;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: #1A1A1A;
  background: var(--ls-panel-bg, #1A1A1A);
  border: 1px solid rgba(198, 157, 100, 0.28);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  animation: ao-menu-in 0.18s ease;
}
@keyframes ao-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ao-nav-menu-link {
  text-align: left;
  background: none;
  border: none;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 13px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ao-nav-menu-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--ls-gold-light); }
.ao-nav-menu-divider { height: 1px; background: rgba(198, 157, 100, 0.18); margin: 6px 6px; }
.ao-nav-menu-cta { color: var(--ls-gold-light); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
@media (max-width: 760px) {
  .ao-nav-links .ao-nav-link { display: none; }
  .ao-nav-burger { display: flex; }
  /* Mobile: centre display elements (headings, eyebrows, hero CTAs).
     Body copy stays LEFT-aligned per the brand house style. */
  .ao-page .ao-eyebrow,
  .ao-page .ao-h1,
  .ao-page .ao-h2 { text-align: center; }
  .ao-page .ao-hero-actions { justify-content: center; }
  /* Slimmer, more elegant pill buttons on phones (Lisa Jul 2026) — the
     sage CTA read too large/chunky. Tighter padding + slightly smaller
     type keeps it refined without hurting tappability. */
  .ao-page .ao-btn {
    padding: 12px 22px;
    font-size: 11px;
    letter-spacing: 0.16em;
    gap: 8px;
  }
  /* A touch more breathing room at the screen edges so copy doesn't sit
     so close to the bezel. */
  .ao-page .ao-hero,
  .ao-page .ao-section { padding-left: 26px; padding-right: 26px; }
  .ao-page .ao-nav { padding-left: 24px; padding-right: 24px; }
}

/* ── Shared section rhythm ───────────────────────────────────────────── */
.ao-section { padding: clamp(64px, 9vw, 130px) clamp(20px, 6vw, 80px); }
.ao-wrap { max-width: 1120px; margin: 0 auto; }
.ao-eyebrow {
  color: var(--ls-gold-light);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 18px;
}
.ao-blush { color: var(--ls-blush); font-style: italic; }
.ao-h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  color: var(--ls-white);
}
.ao-h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 22px;
  color: var(--ls-white);
}
.ao-lead { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.7; color: var(--ls-cream); max-width: 60ch; }
.ao-body { font-size: 1.08rem; line-height: 1.78; color: var(--ls-muted); max-width: 64ch; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.ao-hero { padding: clamp(70px, 12vw, 150px) clamp(20px, 6vw, 80px) clamp(56px, 8vw, 110px); position: relative; background: #141414; background: var(--ls-hero-bg, #141414); }
.ao-hero-inner { max-width: 1120px; margin: 0 auto; }
.ao-hero .ao-lead { margin-bottom: 38px; }
.ao-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.ao-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  border: 0.5px solid transparent;
  transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ao-btn:hover { transform: translateY(-2px); }
.ao-btn-primary { background: var(--ls-sage); color: #15211a; font-weight: 600; }
.ao-btn-primary:hover { background: var(--ls-sage-soft); }
.ao-btn-ghost { border-color: #BC9F6E; border-color: var(--ls-gold, #BC9F6E); color: #BC9F6E; color: var(--ls-gold-light, #BC9F6E); background: transparent; }
.ao-btn-ghost:hover { border-color: #BC9F6E; border-color: var(--ls-gold, #BC9F6E); background: rgba(196, 164, 107, 0.10); color: #BC9F6E; color: var(--ls-gold-light, #BC9F6E); }
.ao-btn-gold { border-color: #BC9F6E; border-color: var(--ls-gold, #BC9F6E); color: #BC9F6E; color: var(--ls-gold-light, #BC9F6E); background: transparent; }
.ao-btn-gold:hover { border-color: #BC9F6E; border-color: var(--ls-gold, #BC9F6E); background: rgba(196, 164, 107, 0.10); color: #BC9F6E; color: var(--ls-gold-light, #BC9F6E); }

/* ── Methodology ─────────────────────────────────────────────────────── */
.ao-method { border-top: 0.5px solid var(--ls-border-soft); border-bottom: 0.5px solid var(--ls-border-soft); }
.ao-method-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: clamp(34px, 6vw, 84px); gap: clamp(34px, 6vw, 84px); align-items: start; }
.ao-method-points { display: flex; flex-direction: column; gap: 26px; }
.ao-method-point { padding-left: 22px; border-left: 2px solid #1F2A1F; border-left: 2px solid var(--ls-sage-deep, #1F2A1F); }
.ao-method-point h4 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 1.2rem; color: var(--ls-cream); margin: 0 0 8px; }
.ao-method-point p { margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--ls-muted); }
@media (max-width: 820px) { .ao-method-grid { grid-template-columns: 1fr; } }

/* ── Ways to work — offer cards ──────────────────────────────────────── */
.ao-offers-head { margin-bottom: clamp(48px, 6.5vw, 84px); }
.ao-offers { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 22px; gap: 22px; }
@media (max-width: 920px) { .ao-offers { grid-template-columns: 1fr; } }

/* Six Week Arc modules: 2-up on desktop, horizontal swipe strip on mobile */
.ao-arc-weeks { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .ao-arc-weeks {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 12px;
    scrollbar-width: none;
  }
  .ao-arc-weeks::-webkit-scrollbar { display: none; }
  .ao-arc-weeks > .ao-offer {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
}

.ao-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #161616;
  background: var(--ls-card-bg, #161616);
  border: 0.5px solid rgba(198, 157, 100, 0.34);
  border: 0.5px solid var(--ls-border, rgba(198, 157, 100, 0.34));
  border-radius: 18px;
  padding: 34px 30px 30px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.ao-offer:hover { transform: translateY(-6px); border-color: rgba(198, 157, 100, 0.42); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.ao-offer--primary { border-color: rgba(159, 173, 159, 0.4); background: linear-gradient(180deg, rgba(159, 173, 159, 0.07), var(--ls-card-bg) 60%); }
.ao-offer-tag {
  position: absolute; top: -10px; left: 28px;
  background: var(--ls-sage); color: #15211a;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.ao-offer-icon { width: 38px; height: 38px; color: var(--ls-gold-light); margin-bottom: 18px; }
.ao-offer-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ao-offer-icon svg { width: 100%; height: 100%; }
.ao-offer h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 1.5rem; color: var(--ls-white); margin: 0 0 10px; }
.ao-offer-kicker { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-blush); margin: 0 0 14px; }
.ao-offer p { font-size: 0.95rem; line-height: 1.62; color: var(--ls-muted); margin: 0 0 18px; }
.ao-offer ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.ao-offer li { font-size: 0.9rem; color: var(--ls-cream-soft); padding-left: 20px; position: relative; line-height: 1.4; }
.ao-offer li::before { content: "·"; position: absolute; left: 6px; color: var(--ls-gold); font-weight: 700; }
.ao-offer-cta { margin-top: auto; align-self: flex-start; }

/* ── About ───────────────────────────────────────────────────────────── */
.ao-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; grid-gap: clamp(30px, 6vw, 70px); gap: clamp(30px, 6vw, 70px); align-items: center; }
.ao-about-portrait {
  aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  border: 0.5px solid var(--ls-border); background: #1A1A1A; background: var(--ls-panel-bg, #1A1A1A);
}
.ao-about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ao-about-portrait-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ls-gold-dim); font-size: 60px; font-family: 'Playfair Display', serif; }
@media (max-width: 820px) { .ao-about-grid { grid-template-columns: 1fr; } .ao-about-portrait { max-width: 320px; } }

/* ── Testimonials ────────────────────────────────────────────────────── */
.ao-testimonials { background: transparent; border-top: 0.5px solid var(--ls-border-soft); }
.ao-quotes { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 22px; gap: 22px; margin-top: 44px; }
@media (max-width: 920px) { .ao-quotes { grid-template-columns: 1fr; } }
.ao-quote { border: 0.5px solid var(--ls-border-soft); border-radius: 16px; padding: 30px 26px; background: #161616; background: var(--ls-card-bg, #161616); }
.ao-quote-mark { font-family: 'Playfair Display', serif; font-size: 44px; line-height: 0.4; color: var(--ls-gold-dim); }
.ao-quote-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,169,110,0.4); display: block; }
.ao-quote p { font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--ls-cream); margin: 16px 0 18px; }
.ao-quote cite { font-style: normal; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-blush); }
.ao-placeholder { outline: 1px dashed var(--ls-gold-dim); outline-offset: -1px; }
.ao-arc-hero-img { width: 100%; max-width: 760px; margin: clamp(28px, 4vw, 44px) 0 0; border-radius: 16px; border: 0.5px solid var(--ls-border-soft); display: block; }
.ao-placeholder-tag { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-gold); opacity: 0.7; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ao-footer { border-top: 0.5px solid var(--ls-border-soft); padding: clamp(48px, 6vw, 80px) clamp(20px, 6vw, 80px) 50px; }
.ao-footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.ao-footer-brand { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--ls-cream); }
.ao-footer-brand em { font-style: italic; color: var(--ls-blush); }
.ao-footer-tagline { font-size: 0.85rem; color: var(--ls-muted); margin-top: 8px; max-width: 30ch; line-height: 1.6; }
.ao-footer-col { display: flex; flex-direction: column; gap: 11px; }
.ao-footer-col h5 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-gold-light); margin: 0 0 4px; font-weight: 600; }
.ao-footer-col a, .ao-footer-col button { font-size: 0.88rem; color: var(--ls-muted); background: none; border: none; cursor: pointer; text-align: left; padding: 0; transition: color 0.2s ease; font-family: 'Montserrat', sans-serif; }
.ao-footer-col a:hover, .ao-footer-col button:hover { color: var(--ls-cream); }
.ao-footer-legal { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-top: 40px; padding: 24px clamp(20px, 6vw, 80px) 0; box-sizing: border-box; border-top: 0.5px solid var(--ls-border-soft); font-size: 0.78rem; color: var(--ls-muted); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }

/* ── Sub-page hero (six-week-arc / readings) ─────────────────────────── */
.ao-subhero { padding: clamp(56px, 9vw, 120px) clamp(20px, 6vw, 80px) clamp(30px, 5vw, 60px); background: #141414; background: var(--ls-hero-bg, #141414); }

/* ── Contact form (readings) ─────────────────────────────────────────── */
.ao-form { max-width: 560px; display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.ao-field { display: flex; flex-direction: column; gap: 8px; }
.ao-field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-cream-soft); }
.ao-field input, .ao-field textarea {
  background: #1A1A1A;
  background: var(--ls-panel-bg, #1A1A1A);
  border: 0.5px solid rgba(198, 157, 100, 0.34);
  border: 0.5px solid var(--ls-border, rgba(198, 157, 100, 0.34));
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  transition: border-color 0.2s ease;
}
.ao-field input:focus, .ao-field textarea:focus { outline: none; border-color: var(--ls-sage); }
.ao-field textarea { resize: vertical; min-height: 130px; }
.ao-form-note { font-size: 0.85rem; color: var(--ls-muted); line-height: 1.6; }
.ao-form-error { color: var(--ls-blush); font-size: 0.9rem; }
.ao-form-success {
  border: 0.5px solid rgba(159, 173, 159, 0.4);
  background: rgba(159, 173, 159, 0.08);
  border-radius: 14px; padding: 26px;
}
.ao-form-success h3 { font-family: 'Playfair Display', serif; font-weight: 500; color: var(--ls-cream); margin: 0 0 8px; font-size: 1.3rem; }
.ao-form-success p { color: var(--ls-muted); margin: 0; line-height: 1.6; }

/* ── Blush italic accents inside CMS-driven headings (HTML <em>) ──────── */
.ao-h1 em, .ao-h2 em, .ao-offer h3 em, .ao-method-point h4 em {
  color: var(--ls-blush);
  font-style: italic;
}

/* ── Sage promo banner (top of home page) ────────────────────────────── */
.ao-promo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 clamp(20px, 5vw, 72px);
  height: 44px;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  color: #000000;
  position: relative;
  z-index: 30;
}
.ao-promo-banner--solo {
  /* Only the "Already a member? Sign in" button is showing (no trial CTA) —
     keep it right-aligned instead of sliding to the start, which is what a
     lone flex child does under space-between. */
  justify-content: flex-end;
}
.ao-promo-left, .ao-promo-right {
  background: none;
  border: none;
  cursor: pointer;
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  transition: opacity 0.2s ease;
}
.ao-promo-left:hover, .ao-promo-right:hover { opacity: 0.7; }
.ao-promo-sub { font-weight: 400; letter-spacing: 0.12em; margin-left: 8px; opacity: 0.8; text-transform: none; }
/* Signed-in member: single centred, bright "Return to Lunar Sanctuary" door. */
.ao-promo-banner--member { justify-content: center; position: relative; }
.ao-promo-signout {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #16210f;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  padding: 4px 2px;
  transition: opacity 0.2s ease;
}
.ao-promo-signout:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 600px) {
  .ao-promo-signout { font-size: 9px; letter-spacing: 0.1em; right: 12px; }
}
.ao-promo-return {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  cursor: pointer;
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  animation: aoPromoReturnIn 0.5s ease both;
}
.ao-promo-return-arrow {
  font-size: 14px;
  transition: transform 0.25s ease;
}
.ao-promo-return:hover .ao-promo-return-arrow { transform: translateX(5px); }
@keyframes aoPromoReturnIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .ao-promo-sub { display: none; }
  .ao-promo-banner { padding: 0 18px; }
  .ao-promo-left, .ao-promo-right { font-size: 9.5px; letter-spacing: 0.12em; }
  .ao-promo-return { font-size: 10px; letter-spacing: 0.14em; }
}

/* ── Home hero — desktop: text left + animation right; mobile: stacked
   with eyebrow+headline above the animation (centered) ──────────────── */
.ao-hero--orrery { padding: clamp(40px, 6vw, 88px) clamp(20px, 6vw, 80px) clamp(56px, 8vw, 110px); }
.ao-hero-grid2 {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: clamp(24px, 5vw, 64px);
  gap: clamp(24px, 5vw, 64px);
}
.ao-hero-textcol { text-align: left; }
.ao-hero-textcol .ao-lead { margin-bottom: 34px; }
.ao-hero-orrery {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  filter: brightness(1.14) drop-shadow(0 0 60px rgba(198, 157, 100, 0.16));
}
.ao-hero-orrery svg { width: 100%; height: auto; display: block; }
.ao-hero-orrery--mobile { display: none; }

/* Lisa Jul 2026: on desktop, make the orbital art a touch larger and sit it
   toward the RIGHT edge of its column (rather than centred). Desktop only —
   the mobile instance keeps its own smaller, centred sizing below. */
@media (min-width: 881px) {
  .ao-hero-orrery--desktop {
    max-width: 560px;
    margin-left: auto;
    margin-right: 0;
  }
}

/* Sign-in prompt below the hero CTAs */
.ao-hero-signin {
  margin: 24px 0 0;
  font-size: 0.95rem;
  color: #BC9F6E;
  color: var(--ls-gold, #BC9F6E);
  letter-spacing: 0.01em;
}
.ao-hero-signin-link {
  background: none;
  border: none;
  cursor: pointer;
  color: #BC9F6E;
  color: var(--ls-gold-light, #BC9F6E);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: 8px;
  padding: 0 0 2px;
  border-bottom: 1px solid rgba(198, 157, 100, 0.5);
  transition: color 0.2s ease;
}
.ao-hero-signin-link:hover { color: var(--ls-blush); }

@media (max-width: 880px) {
  .ao-hero-grid2 { grid-template-columns: 1fr; gap: 0; }
  .ao-hero-textcol { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .ao-hero-textcol .ao-hero-actions { justify-content: center; }
  .ao-hero-orrery--desktop { display: none; }
  .ao-hero-orrery--mobile {
    display: block;
    max-width: 300px;
    opacity: 0.92;
    margin: clamp(10px, 1.6vw, 20px) auto clamp(16px, 2.4vw, 28px);
  }
}

/* Star twinkle keyframes used by the injected orrery SVG */
@keyframes tw-a { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
@keyframes tw-b { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes tw-c { 0%, 100% { opacity: .8; } 50% { opacity: .1; } }
@keyframes tw-d { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }

/* ── Entrance animation ──────────────────────────────────────────────── */
@keyframes ao-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.ao-reveal { opacity: 0; animation: ao-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@media (prefers-reduced-motion: reduce) {
  .ao-reveal { animation: none; opacity: 1; }
  .ao-btn:hover, .ao-offer:hover { transform: none; }
  .ao-hero-orrery svg * { animation: none !important; }
}

/* ============================================================
   Lunar Sanctuary · AsOne.Earth — React shell styling
   Fonts: Playfair Display (display) + Montserrat (body)
   Palette locked.
   ============================================================ */

:root {
  /* Backgrounds — soft warm-grey charcoal (no mahogany/sepia tones) */
  --ls-hero-bg: #0A0A0A;
  --ls-body-bg: #141414;
  --ls-panel-bg: #1A1A1A;
  --ls-card-bg: #161616;

  /* Gold accents (kept — used sparingly for highlights only). Sandy, muted. */
  --ls-gold: #BC9F6E;
  --ls-gold-light: #CDB58C;
  --ls-gold-dim: #4A3F28;

  --ls-sage: #9FAD9F;
  --ls-sage-soft: #B8C4B8;
  --ls-sage-deep: #1F2A1F;

  --ls-blush: #E6C2BF;
  --ls-blush-soft: #EFD3CC;

  --ls-cream: #F5EBDD;
  --ls-cream-soft: #D8CDB8;
  /* Was #8B8578 (warm brown-muted, hard to read). Now reads as a cream so
     every non-bold line stays comfortably legible on charcoal backgrounds. */
  --ls-muted: #D8CDB8;

  /* Editable text colors — overridden by Control Room theme save.
     Primary (main) = near-white. Secondary (muted) = cream. Lisa's rule:
     "all text that isn't bold must be either primary white or secondary
     cream — anything dimmer is too hard to read." */
  --ls-white: #FFFFFF;
  --ls-text-main: var(--ls-white);

  /* Global font-size scale — set by Control Room "Font size scale" slider.
     Default 1.00. Applied as percentage on documentElement so all rem
     units scale together. Mobile gets an additional bump via useContent. */
  --ls-font-scale: 1.00;

  --ls-border: rgba(232, 223, 206, 0.42);
  --ls-border-soft: rgba(232, 223, 206, 0.30);
}

/* ── Member reading text size (header "Text size" control) ──────────────
   --rs-read-body scales the reading-tools prose; --ls-read-body scales the
   community feed body copy. Set on <html data-textsize> by useTextSize. */
:root { --rs-read-body: 1.1rem; --ls-read-body: 0.94rem; }
:root[data-textsize="lg"] { --rs-read-body: 1.24rem; --ls-read-body: 1.06rem; }
:root[data-textsize="xl"] { --rs-read-body: 1.42rem; --ls-read-body: 1.2rem; }

/* Text-size control — pill that lives in the global header (desktop nav +
   mobile drawer). */
.rs-textsize {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(232, 223, 206, 0.42);
  border: 0.5px solid var(--ls-border);
  border-radius: 999px;
  padding: 3px 5px 3px 11px;
}
.rs-textsize-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin-right: 3px;
  white-space: nowrap;
}
.rs-textsize-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.rs-textsize-btn[data-size="md"] { font-size: 11px; }
.rs-textsize-btn[data-size="lg"] { font-size: 14px; }
.rs-textsize-btn[data-size="xl"] { font-size: 17px; }
.rs-textsize-btn:hover { color: #FFFFFF; color: var(--ls-white); }
.rs-textsize-btn[data-active="true"] { background: #9FAD9F; background: var(--ls-sage); color: #0A0A0A; }
.rs-textsize-drawer { margin: 4px 0 10px; }


* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  background: #141414;
  background: var(--ls-body-bg);
  color: #FFFFFF;
  color: var(--ls-text-main);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(198, 157, 100, 0.3); color: #F5EBDD; color: var(--ls-cream); }

a { color: #E6C2BF; color: var(--ls-blush); text-decoration: none; cursor: pointer; }
a:hover { color: #EFD3CC; color: var(--ls-blush-soft); }

/* Defensive — buttons + form controls don't inherit `font-family` from
   body in Chrome/Firefox/Safari by default. Force them to so every
   custom CTA stays in our brand font (Montserrat) automatically. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Mobile readability boost — bump every rem-based text size by 8% on
   phone widths so the reading prose, post bodies, form labels, and admin
   strings all step up to a comfortable reading size without us touching
   every individual selector. The Control Room font-size slider still
   applies on top of this via documentElement.style.fontSize (set in
   useContent.js — mobile multiplier is applied there too so admin saves
   stack cleanly). Frames / borders / chart wheel are unaffected (they
   use fixed px or clamp() with vw caps). */
@media (max-width: 768px) {
  html {
    font-size: 108%;
  }
}

/* ===========================
   Auth pages
   =========================== */
.ls-auth-page {
  min-height: 100vh;
  background: #0A0A0A;
  background: var(--ls-hero-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  position: relative;
}

.ls-back {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: pointer;
}
.ls-back:hover { color: #BC9F6E; color: var(--ls-gold); }

.ls-auth-card {
  width: 100%;
  max-width: 460px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  padding: 56px 48px;
  position: relative;
}
.ls-auth-card::before, .ls-auth-card::after {
  content: '✦';
  position: absolute;
  font-size: 10px;
  color: #BC9F6E;
  color: var(--ls-gold);
  opacity: 0.4;
}
.ls-auth-card::before { top: 18px; left: 18px; }
.ls-auth-card::after { bottom: 18px; right: 18px; }

.ls-eyebrow {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  margin: 0 0 28px;
  font-weight: 500;
}

/* Brand opt-out: any descendant of an uppercased element that should keep its
   natural casing (e.g. "AsOne.Earth"). Letter-spacing tightened so the brand
   reads naturally inside a wide-spaced eyebrow. */
.ls-brand {
  text-transform: none !important;
  letter-spacing: 0.04em;
}

.ls-h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}
.ls-h1 em { font-style: italic; color: #E6C2BF; color: var(--ls-blush); font-weight: 400; }

.ls-sub {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin: 0 0 32px;
}

.ls-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  margin: 22px 0 10px;
  font-weight: 500;
}
.ls-label span { color: #4A3F28; color: var(--ls-gold-dim); font-weight: 400; }

.ls-input {
  width: 100%;
  padding: 14px 16px;
  background: #0A0A0A;
  background: var(--ls-hero-bg);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ls-input:focus { border-color: #BC9F6E; border-color: var(--ls-gold); background: #0F0F0F; }
.ls-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ls-btn-primary {
  margin-top: 20px;
  padding: 9px 22px;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  border: none;
  border-radius: 9999px;
  color: #1C2A1C;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ls-btn-primary:hover:not(:disabled) { background: #B8C4B8; transform: translateY(-1px); }
.ls-btn-primary:disabled { opacity: 0.38; cursor: not-allowed; }

/* Sage is the primary — no modifier needed. Charcoal+gold is the secondary ghost style. */

/* Continue with Google button — pill, matched to the sage magic-link button */
.ls-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 32px;
  background: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid #FFFFFF;
  border-radius: 9999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ls-btn-google:hover { background: #F2F2F2; }
.ls-btn-google:active { transform: scale(0.997); }
.ls-btn-google svg { flex-shrink: 0; }

/* "or with magic link" divider */
.ls-or-divider {
  position: relative;
  margin: 22px 0 18px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
}
.ls-or-divider::before,
.ls-or-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 90px);
  height: 1px;
  background: rgba(198, 157, 100, 0.18);
}
.ls-or-divider::before { left: 0; }
.ls-or-divider::after { right: 0; }
.ls-or-divider span {
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  padding: 0 14px;
  position: relative;
  z-index: 1;
}


.ls-btn-ghost {
  margin-top: 12px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.ls-btn-ghost:hover { border-color: #BC9F6E; color: #BC9F6E; }

.ls-error {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(230, 194, 191, 0.06);
  border-left: 2px solid #E6C2BF;
  border-left: 2px solid var(--ls-blush);
  color: #E6C2BF;
  color: var(--ls-blush);
  font-size: 0.85rem;
  line-height: 1.6;
}

.ls-notice {
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: rgba(159, 173, 159, 0.08);
  border-left: 2px solid #9FAD9F;
  border-left: 2px solid var(--ls-sage);
  color: #B8C4B8;
  color: var(--ls-sage-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}
.ls-notice-soft { background: rgba(198, 157, 100, 0.05); border-left-color: #BC9F6E; border-left-color: var(--ls-gold); color: #D8CDB8; color: var(--ls-cream-soft); }

.ls-footnote {
  margin-top: 36px;
  font-size: 11px;
  color: #D8CDB8;
  color: var(--ls-muted);
  line-height: 1.7;
  text-align: center;
}

.ls-sent {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
}

/* ===========================
   App shell
   =========================== */
.ls-app-shell { background: #0A0A0A; background: var(--ls-hero-bg); min-height: 100vh; }

.ls-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  padding: 0 32px;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  z-index: 100;
}
.ls-nav-brand {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.ls-nav-brand .ls-sep { color: #BC9F6E; color: var(--ls-gold); margin: 0 8px; }
.ls-nav-brand .ls-asone { color: #D8CDB8; color: var(--ls-cream-soft); font-style: italic; }
.ls-nav-links {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
.ls-nav-links a {
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}
.ls-nav-links a:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
  color: #BC9F6E;
  color: var(--ls-gold);
  font-size: 11px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  overflow: hidden;
}
.ls-nav-avatar.has-img { background: none; }
.ls-nav-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ── Hamburger trigger ── */
.ls-nav-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease;
}
.ls-nav-burger:hover { border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-nav-burger-icon {
  position: relative;
  width: 20px;
  height: 14px;
  display: inline-block;
}
.ls-nav-burger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #F5EBDD;
  background: var(--ls-cream);
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
}
.ls-nav-burger-icon span:nth-child(1) { top: 0; }
.ls-nav-burger-icon span:nth-child(2) { top: 6px; }
.ls-nav-burger-icon span:nth-child(3) { top: 12px; }
.ls-nav-burger-icon.is-open span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.ls-nav-burger-icon.is-open span:nth-child(2) { opacity: 0; }
.ls-nav-burger-icon.is-open span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
/* ── Combined eyebrow + nav row (used on /app only) ── */
.ls-app-eyebrow-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.30);
  background: #0A0A0A;
  z-index: 30;
  min-height: 76px;
  box-sizing: border-box;
  gap: 32px;
}
.ls-app-eyebrow-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #d8cdb8;
  flex: 1 1;
  min-width: 0;
}
.ls-app-eyebrow-text .ls-brand {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.02em;
}
.ls-app-eyebrow-text .ls-brand-a { color: #FFFFFF; }
.ls-app-eyebrow-text .ls-brand-e { color: #E6C2BF; color: var(--ls-blush); font-style: italic; }
.ls-app-eyebrow-text .ls-eyebrow-tagline {
  display: block;
  margin-top: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
}
.ls-app-eyebrow-text .ls-lockup-sep {
  margin: 0 0.5em;
  opacity: 0.4;
}
.ls-app-eyebrow-text .ls-app-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #FFFFFF;
  vertical-align: baseline;
}
.ls-app-eyebrow-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
}
.ls-app-eyebrow-nav a {
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.ls-app-eyebrow-nav a:hover { color: #BC9F6E; color: var(--ls-gold); }

/* 3-way segmented toggle: Lunar Sanctuary · Groups · Reading tools.
   Sits in the signed-in nav on every page so members can move between the
   three core surfaces without losing their session. */
.ls-nav-seg {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(201, 169, 110, 0.30);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.ls-nav-seg a {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 999px;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ls-nav-seg a:hover { color: #BC9F6E; color: var(--ls-gold); background: rgba(201, 169, 110, 0.08); }
.ls-nav-seg a[data-active="true"] {
  color: #141414;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
}
.ls-nav-seg a[data-active="true"]:hover { color: #141414; background: #9FAD9F; background: var(--ls-sage, #9FAD9F); }
.ls-nav-seg-soon {
  margin-left: 5px;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: #9FAD9F;
  vertical-align: super;
}
.ls-nav-seg a[data-active="true"] .ls-nav-seg-soon { color: #2b3a2b; }

/* "🌙 X new" buzz pill on the Groups tab — a soft blush nudge so members
   feel there's fresh activity the moment they land. Clears when they open
   the group (group_reads baseline). */
.ls-nav-new-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #E6C2BF;
  background: var(--ls-blush, #E6C2BF);
  color: #1a1410;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
  animation: ls-newpill-pop 0.35s ease-out 1;
}
.ls-nav-drawer-seg .ls-nav-new-pill { font-size: 0.62rem; margin-left: 9px; }
@keyframes ls-newpill-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Drawer version — stacked full-width pills at the top of the mobile menu. */
.ls-nav-drawer .ls-nav-drawer-seg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 18px;
}
.ls-nav-drawer .ls-nav-drawer-seg a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 14px;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ls-nav-drawer .ls-nav-drawer-seg a:hover {
  padding-left: 18px;
  color: #BC9F6E;
  color: var(--ls-gold);
  border-color: rgba(201, 169, 110, 0.55);
}
.ls-nav-drawer .ls-nav-drawer-seg a[data-active="true"] {
  color: #141414;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  border-color: #9FAD9F;
  border-color: var(--ls-sage, #9FAD9F);
}
.ls-nav-drawer .ls-nav-drawer-seg a[data-active="true"]:hover {
  color: #141414;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
}

/* Reading-tools return button: when the member is AWAY from the reading tools
   (segment inactive), give it a soft sage fill + a gentle 3-breath glow pulse
   when the drawer opens, so it's not missed (session-replay loop fix). It
   rests after ~4.5s. No pulse when already on the reading tools. */
.ls-nav-drawer .ls-nav-drawer-seg a[data-testid="drawer-seg-reading"][data-active="false"] {
  color: #FFFFFF;
  color: var(--ls-white, #F5F1E8);
  background: rgba(159, 173, 159, 0.14);
  border-color: rgba(159, 173, 159, 0.6);
}
@keyframes lsReadingBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(159, 173, 159, 0); }
  50% { box-shadow: 0 0 0 6px rgba(159, 173, 159, 0.30); }
}
.ls-nav-drawer.is-open .ls-nav-drawer-seg a[data-testid="drawer-seg-reading"][data-active="false"] {
  animation: lsReadingBreath 1.5s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
  .ls-nav-drawer.is-open .ls-nav-drawer-seg a[data-testid="drawer-seg-reading"][data-active="false"] { animation: none; }
}

/* "Get your reading" — primary nav CTA. Outline sage button so it
   reads as the clear next step in the row of muted nav links.
   Lisa Feb 2026: logged-in users land on `/` and use this to step
   into their reading. */
.ls-app-eyebrow-nav a.ls-nav-cta {
  color: #9FAD9F;
  color: var(--ls-sage, #9FAD9F);
  border: 1px solid #9FAD9F;
  border: 1px solid var(--ls-sage, #9FAD9F);
  padding: 6px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.ls-app-eyebrow-nav a.ls-nav-cta:hover {
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  color: #141414;
}
/* "Your reading tools" — PRIMARY drawer action. Filled sage pill (not an
   outline like the other links) + an icon, so it reads as the one clear way
   back into the app. A soft glow "breathes" 3 times when the drawer opens to
   draw the eye, then rests (notification ring, not alarm). */
.ls-nav-drawer a.ls-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #14271a;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  border: 1px solid #9FAD9F;
  border: 1px solid var(--ls-sage, #9FAD9F);
  border-radius: 999px;
  text-align: center;
  padding: 15px 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 4px 0 18px;
}
.ls-nav-drawer a.ls-nav-cta:hover {
  background: #B8C4B8;
  background: var(--ls-sage-soft, #B8C4B8);
  color: #0c1a0c;
  padding-left: 20px;
}
.ls-nav-cta-icon { display: inline-flex; flex-shrink: 0; }
.ls-nav-cta-icon svg { width: 18px; height: 18px; }
/* Signed-out (AsOne) drawer CTA: slightly smaller pill + more breathing room
   above it (below the "1:1 with Lisa" link). */
.ls-nav-drawer a.ls-nav-cta.ao-drawer-cta {
  padding: 12px 20px;
  font-size: 0.78rem;
  margin-top: 20px;
}
@keyframes lsCtaBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(159, 173, 159, 0); }
  50% { box-shadow: 0 0 0 7px rgba(159, 173, 159, 0.30); }
}
.ls-nav-drawer.is-open a.ls-nav-cta {
  animation: lsCtaBreath 1.5s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
  .ls-nav-drawer.is-open a.ls-nav-cta { animation: none; }
}
.ls-app-eyebrow-nav .ls-nav-avatar {
  margin-left: 4px;
  margin-right: 4px;
}
.ls-app-eyebrow-burger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(198, 157, 100, 0.40);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.ls-app-eyebrow-burger:hover { border-color: #BC9F6E; border-color: var(--ls-gold); }

/* iframe sits below the eyebrow row */
.ls-app-iframe {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  border: none;
  background: #0A0A0A;
}
.ls-app-iframe.is-paid {
  top: 76px;
  height: calc(100vh - 76px);
}
.ls-app-iframe.is-free {
  top: 116px; /* 40px banner + 76px eyebrow row */
  height: calc(100vh - 116px);
}
.ls-app-iframe.is-anon {
  top: 40px; /* 40px promo banner only — no eyebrow nav for anonymous */
  height: calc(100vh - 40px);
}

/* ── Anonymous Lunar Sanctuary header (AsOneNav + promo banner) ──
   Fixed above the fixed iframe so anonymous visitors always have the
   brand + inter-page nav (no more dead-end). The iframe's top offset is
   measured from this element's real height in Landing.js. */
.ls-anon-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}
.ls-anon-header .ao-nav {
  position: static;
  /* Match the Lunar Sanctuary hero background exactly. The hero lives inside
     the chart-engine iframe, whose --hero-bg is #141414, so the nav must be
     #141414 too (not #1A1A1A) or the bar and the hero read as two stacked
     headers with a visible seam between them. */
  background: #141414;
}

/* ── Promo banner (anonymous + trial-ended states on /) ── */
.ls-promo-banner {
  /* In flow (not fixed) so it sits ABOVE the eyebrow row instead of
     covering it. Mobile was rendering the sage banner on top of the
     eyebrow nav before. */
  position: relative;
  width: 100%;
  height: 40px;
  background: #9FAD9F;
  background: var(--ls-sage, #9FAD9F);
  color: #14271a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 50;
  box-sizing: border-box;
}
.ls-promo-banner-left {
  color: #14271a;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.ls-promo-banner-left .ls-promo-sub {
  font-weight: 400;
  opacity: 0.78;
  margin-left: 10px;
  letter-spacing: 0.14em;
}
.ls-promo-banner-right {
  color: #14271a;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.18s ease;
}
.ls-promo-banner-right:hover { opacity: 0.7; }
.ls-promo-banner-left:hover { opacity: 0.7; }

@media (max-width: 720px) {
  .ls-promo-banner {
    padding: 0 14px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .ls-promo-banner-left .ls-promo-sub { display: none; }
  .ls-app-iframe.is-anon { top: 40px; height: calc(100vh - 40px); }
}

@media (max-width: 960px) {
  .ls-app-eyebrow-nav { display: none; }
  .ls-app-eyebrow-burger { display: flex; }
}
@media (max-width: 720px) {
  .ls-app-eyebrow-row { padding: 18px 16px; min-height: 60px; gap: 12px; }
  .ls-app-eyebrow-text {
    font-size: 0.98rem;
    letter-spacing: 0.03em;
  }
  /* Mobile: reduce the lockup to just "Lunar Sanctuary" — hide the
     parent-brand prefix, separator and tagline so the header reads calm
     and elegant instead of a long wrapping line. */
  .ls-app-eyebrow-text .ls-brand,
  .ls-app-eyebrow-text .ls-lockup-sep,
  .ls-app-eyebrow-text .ls-eyebrow-tagline { display: none; }
  .ls-app-eyebrow-text .ls-app-name { font-size: 1.2rem; letter-spacing: 0.03em; }
  .ls-app-iframe.is-paid { top: 60px; height: calc(100vh - 60px); }
  .ls-app-iframe.is-free { top: 100px; height: calc(100vh - 100px); }
}

/* Notifications bell: lives in the top eyebrow row on every screen size —
   on mobile it sits right beside the hamburger with its blush unread counter. */
.ls-notif-header { display: inline-flex; align-items: center; }
.ls-nav-drawer .ls-nav-drawer-notif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 2px;
  padding: 12px 4px 14px;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
}
.ls-nav-drawer .ls-nav-drawer-notif-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: #BC9F6E;
  color: var(--ls-gold);
}
.ls-nav-drawer .ls-nav-drawer-notif .ls-notif-trigger { color: #D8CDB8; color: var(--ls-cream-soft); }
/* Keep the notifications dropdown inside the drawer width (was 340px/88vw,
   which overflowed the drawer's left edge and got clipped). */
.ls-nav-drawer .ls-notif-panel {
  width: 260px;
  max-width: calc(84vw - 56px);
  right: 0;
  left: auto;
}


/* ── Mobile drawer ── */
.ls-nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99;
  animation: ls-fade-in 0.22s ease;
}
.ls-nav-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;            /* fallback for older Safari */
  height: 100dvh;           /* dynamic viewport, respects iOS chrome */
  width: 84vw;
  max-width: 320px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border-left: 1px solid rgba(232, 223, 206, 0.42);
  border-left: 1px solid var(--ls-border);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
  padding: 80px 28px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ls-nav-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.ls-nav-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(198, 157, 100, 0.40);
  color: #BC9F6E;
  color: var(--ls-gold);
  padding: 8px 14px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ls-nav-drawer-close:hover { border-color: #BC9F6E; border-color: var(--ls-gold); color: #CDB58C; color: var(--ls-gold-light); }
.ls-nav-drawer-close .ls-drawer-close-x {
  font-size: 14px;
  line-height: 1;
}
.ls-nav-drawer-close .ls-drawer-close-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}
.ls-nav-drawer-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-nav-drawer-meta { min-width: 0; flex: 1 1; }
.ls-nav-drawer-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-nav-drawer-email {
  font-size: 11px;
  color: #D8CDB8;
  color: var(--ls-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ls-nav-drawer a {
  display: block;
  padding: 14px 4px;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid rgba(198, 157, 100, 0.16);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.ls-nav-drawer a:hover { color: #BC9F6E; color: var(--ls-gold); padding-left: 8px; }

/* Drawer section headers — small italic Playfair gold, lots of breathing
   room. Visually groups items without busy borders.
   Lisa Feb 2026: makes the unified mobile drawer feel editorial, not app-y. */
.ls-nav-drawer-section {
  margin: 28px 0 6px;
  padding: 0 4px;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: #BC9F6E;
  color: var(--ls-gold);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(198, 157, 100, 0.34);
  padding-bottom: 6px;
}
.ls-nav-drawer-section:first-of-type { margin-top: 18px; }

/* ── Left-slide reading-tools drawer (mirror of the account drawer) ──
   Same panel, close button, spacing and dividers as the right-hand nav
   drawer; hinged on the LEFT edge. */
.ls-nav-drawer.ls-nav-drawer-left {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid rgba(232, 223, 206, 0.42);
  border-right: 1px solid var(--ls-border);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%);
}
.ls-nav-drawer.ls-nav-drawer-left.is-open { transform: translateX(0); }

/* "Soon" items — muted, not tappable, with a tiny pill */
.ls-nav-drawer a.ls-nav-drawer-soon {
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: default;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ls-nav-drawer a.ls-nav-drawer-soon:hover { padding-left: 4px; color: #D8CDB8; color: var(--ls-muted); }
.ls-nav-soon-pill {
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 2px 8px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #D8CDB8;
  color: var(--ls-muted);
  text-transform: uppercase;
  border-radius: 2px;
}

/* "My Groups" items — coloured swatch + name. Mixed-case, not uppercase. */
.ls-nav-drawer a.ls-nav-drawer-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 15px;
  font-weight: 400;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-nav-drawer a.ls-nav-drawer-group.is-active {
  color: #F5EBDD;
  color: var(--ls-cream);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 3px 0 0 rgba(240, 230, 210, 0.45);
  font-weight: 600;
}
.ls-nav-drawer-group-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ls-nav-drawer-signout {
  margin-top: auto;
  border-bottom: none !important;
  color: #E6C2BF !important;
  color: var(--ls-blush) !important;
}

@keyframes ls-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 960px) {
  .ls-nav-links-desktop { display: none !important; }
  .ls-nav-burger { display: flex; }
}

@media (max-width: 720px) {
  .ls-nav { padding: 0 16px; }
  .ls-nav-brand { font-size: 0.85rem; }
  .ls-nav-brand .ls-asone { display: none; }
  .ls-nav-brand .ls-sep { margin: 0 6px; }
}

.ls-trial-banner {
  position: relative;
  background: rgba(198, 157, 100, 0.07);
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 9px 24px;
  text-align: center;
  z-index: 40;
}
.ls-trial-banner a {
  margin-left: 14px;
  color: #9FAD9F;
  color: var(--ls-sage);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  font-weight: 500;
}
.ls-trial-banner a:hover { color: #B8C4B8; color: var(--ls-sage-soft); }

@media (max-width: 720px) {
  .ls-trial-banner {
    font-size: 0.72rem;
    padding: 8px 16px;
    line-height: 1.5;
  }
  .ls-trial-banner a {
    margin-left: 8px;
    display: inline-block;
  }
}

/* ===========================
   Account page
   =========================== */
.ls-account-page {
  min-height: 100vh;
  background: #141414;
  background: var(--ls-body-bg);
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-account-header {
  display: flex;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  /* Stick to top + solid bg so scrolling content cannot bleed through
     the nav. Matches the Community topbar treatment. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #141414;
  background: var(--ls-body-bg);
  z-index: 50;
}
.ls-account-header .ls-back { position: static; }

.ls-account-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.ls-account-wrap--lower {
  padding-top: 0;
  padding-bottom: 96px;
}

/* Tiers block sits outside the 720px wrap, centred independently */
.ls-tiers-outer {
  max-width: 960px;
  margin: 36px auto 0;
  padding: 0 24px;
  position: relative;
}
.ls-tiers-begin-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: #F5EBDD;
  color: var(--ls-cream, #FAF6F0);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.ls-tiers-outer::before {
  content: "✦";
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #BC9F6E;
  color: var(--ls-gold, #BC9F6E);
  opacity: 0.5;
}
.ls-tiers-outer .ls-section-eyebrow {
  margin-bottom: 12px;
}

/* "Generate another reading" — small contextual sub-action under the H1.
   Sage text, no chrome, no underline until hover. Mirrors the rest of
   the eyebrow nav language. */
.ls-account-new-reading {
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B5C7B7;
  color: var(--sage-light, #B5C7B7);
  cursor: pointer;
  transition: color 200ms ease, letter-spacing 200ms ease;
}
.ls-account-new-reading:hover {
  color: #BC9F6E;
  color: var(--ls-gold, #BC9F6E);
  letter-spacing: 0.22em;
}

.ls-section { margin-top: 56px; position: relative; }
.ls-section::before {
  content: '✦';
  position: absolute;
  top: -32px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #BC9F6E;
  color: var(--ls-gold);
  opacity: 0.5;
}

.ls-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  margin: 0 0 18px;
  font-weight: 500;
}
/* Blush sprinkle for emphasis words inside eyebrow headings.
   Italic inside uppercase caps reads oddly, so we keep the caps + tracking
   and just shift colour to blush — same effect: a quiet visual sparkle. */
.ls-section-eyebrow em {
  color: #E6C2BF;
  color: var(--ls-blush);
  font-style: normal;
  font-weight: 500;
}
.ls-section-eyebrow-warn { color: #E6C2BF; color: var(--ls-blush); }
.ls-section-eyebrow-warn em { color: #BC9F6E; color: var(--ls-gold); font-style: normal; }


/* ── /account → Referral block (CMS-editable, warm blush treatment) ── */
.ls-referral-section { margin-top: 56px; }
.ls-referral-eyebrow {
  color: #E6C2BF !important;
  color: var(--ls-blush) !important;
}
.ls-referral-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(230,194,191,0.06) 0%, rgba(230,194,191,0.015) 100%),
    rgba(22, 18, 16, 0.65);
  border: 1px solid rgba(230,194,191,0.18);
  padding: 32px 36px 36px;
}
.ls-referral-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 1px;
  background: rgba(230,194,191,0.55);
}
.ls-referral-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin: 0 0 14px 0;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.ls-referral-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
  margin: 0 0 22px 0;
  max-width: 560px;
  font-weight: 300;
}
.ls-btn-referral {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: transparent;
  border: 1px solid #E6C2BF;
  border: 1px solid var(--ls-blush);
  color: #E6C2BF;
  color: var(--ls-blush);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.35s ease, color 0.35s ease;
}
.ls-btn-referral:hover {
  background: #E6C2BF;
  background: var(--ls-blush);
  color: #1a1410;
}
@media (max-width: 720px) {
  .ls-referral-card { padding: 26px 22px 28px; }
  .ls-referral-heading { font-size: 1.25rem; }
  .ls-btn-referral { padding: 12px 22px; font-size: 0.62rem; letter-spacing: 0.3em; }
}

/* ---- Invite a friend (personal referral link) ---- */
.ls-invite-link-row {
  display: flex;
  gap: 10px;
  margin: 0 0 22px 0;
  max-width: 560px;
}
.ls-invite-link-field {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(22, 18, 16, 0.55);
  border: 1px solid rgba(230, 194, 191, 0.28);
  color: #F5EBDD;
  color: var(--ls-cream, #f0e6d2);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  padding: 12px 14px;
  border-radius: 2px;
  letter-spacing: 0.01em;
}
.ls-invite-link-field:focus { outline: none; border-color: #E6C2BF; border-color: var(--ls-blush); }
.ls-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: #9FAD9F;
  background: var(--ls-sage, #9fad9f);
  border: 1px solid #9FAD9F;
  border: 1px solid var(--ls-sage, #9fad9f);
  color: #1a1410;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.2s ease;
}
.ls-invite-btn:hover { opacity: 0.88; }
.ls-invite-btn-ghost {
  background: transparent;
  color: #BC9F6E;
  color: var(--ls-gold, #bc9f6e);
  border-color: #BC9F6E;
  border-color: var(--ls-gold, #bc9f6e);
}
.ls-invite-btn-ghost:hover { background: rgba(188, 159, 110, 0.12); opacity: 1; }

/* Community left-rail compact variant */
.ls-invite-rail { margin-top: 26px; }
.ls-invite-rail-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
  margin: 6px 0 12px 0;
  font-weight: 300;
}
.ls-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-invite-actions .ls-invite-btn { padding: 9px 14px; font-size: 0.6rem; letter-spacing: 0.14em; }

@media (max-width: 720px) {
  .ls-invite-link-row { flex-direction: column; }
  .ls-invite-btn { justify-content: center; }
}

/* Liora usage / spend meter */
.ls-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 18px;
}
.ls-usage-card {
  background: rgba(255,255,255,0.03);
  background: var(--ls-charcoal-soft, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 22px;
}
.ls-usage-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold, #bc9f6e);
  margin: 0 0 8px 0;
}
.ls-usage-card-total {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #F5EBDD;
  color: var(--ls-cream, #e9e0cf);
  margin: 0 0 14px 0;
}
.ls-usage-breakdown { display: flex; flex-direction: column; gap: 8px; }
.ls-usage-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
}
.ls-usage-line em { font-style: normal; opacity: 0.6; font-size: 0.72rem; }

/* Member memory drill-down (admin) */
.ls-memory-detail {
  background: rgba(255,255,255,0.03);
  background: var(--ls-charcoal-soft, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.ls-memory-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold, #bc9f6e);
  margin-bottom: 8px;
}
.ls-memory-profile, .ls-memory-note {
  white-space: pre-wrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
  background: rgba(0,0,0,0.16);
  border-left: 2px solid #9FAD9F;
  border-left: 2px solid var(--ls-sage, #9fad9f);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
}
.ls-memory-note { border-left-color: #BC9F6E; border-left-color: var(--ls-gold, #bc9f6e); font-size: 0.8rem; }



.ls-card {
  background: #161616;
  background: var(--ls-card-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  padding: 36px 32px;
}

.ls-form .ls-label:first-of-type { margin-top: 0; }

.ls-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ls-meta-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  margin-bottom: 6px;
}
.ls-meta-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  text-transform: capitalize;
}
.ls-meta-note {
  font-size: 0.85rem;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  line-height: 1.7;
  margin: 8px 0 16px;
}

@media (max-width: 720px) {
  .ls-nav { padding: 0 16px; }
  .ls-nav-brand { font-size: 0.85rem; }
  .ls-nav-links { gap: 16px; }
  .ls-nav-links a { font-size: 10px; letter-spacing: 0.2em; }
  .ls-nav-avatar { display: none; }
  .ls-account-wrap { padding: 40px 16px 64px; }
  .ls-auth-card { padding: 40px 28px; }
}

/* ===========================
   Admin panel
   =========================== */
.ls-admin-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.ls-admin-group {
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 999px;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ls-admin-group.active { background: #E6C2BF; background: var(--ls-blush); border-color: #E6C2BF; border-color: var(--ls-blush); color: #2a1712; }
.ls-admin-group:hover:not(.active) { color: #F5EBDD; color: var(--ls-cream); border-color: #F5EBDD; border-color: var(--ls-cream); }
.ls-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  margin-top: 14px;
}
.ls-tab {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ls-tab.active { color: #E6C2BF; color: var(--ls-blush); border-bottom-color: #E6C2BF; border-bottom-color: var(--ls-blush); }
.ls-tab:hover:not(.active) { color: #F5EBDD; color: var(--ls-cream); }

.ls-textarea {
  font-family: 'Montserrat', sans-serif;
  resize: vertical;
  line-height: 1.6;
}
.ls-voice-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
}

.ls-content-row {
  padding: 20px 0;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-content-row:last-child { border-bottom: none; }
.ls-email-group-label {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  color: #FAF6F0;
  margin: 32px 0 0;
  padding: 10px 0 10px 14px;
  border-left: 3px solid #9FAD9F;
  border-left: 3px solid var(--ls-sage, #9fad9f);
  background: rgba(159, 173, 159, 0.06);
  border-radius: 0 4px 4px 0;
}
.ls-email-group-label:first-child { margin-top: 12px; }
.ls-content-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 11px;
  color: #9FAD9F;
  color: var(--ls-sage);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-overridden-badge {
  background: rgba(159, 173, 159, 0.16);
  color: #9FAD9F;
  color: var(--ls-sage);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  text-transform: uppercase;
}
.ls-content-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.ls-btn-sm {
  margin-top: 0;
  padding: 10px 18px;
  font-size: 10px;
  width: auto;
  letter-spacing: 0.28em;
}

.ls-theme-grid { display: flex; flex-direction: column; gap: 20px; }
.ls-theme-row { display: flex; flex-direction: column; gap: 6px; }
.ls-theme-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 400;
  color: #CDB58C;
  color: var(--ls-gold-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(198,157,100,0.18);
  outline: none;
}
.ls-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #BC9F6E;
  background: var(--ls-gold);
  cursor: pointer;
  border: 2px solid #141414;
  border: 2px solid var(--ls-body-bg);
}
.ls-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #BC9F6E;
  background: var(--ls-gold);
  cursor: pointer;
  border: 2px solid #141414;
  border: 2px solid var(--ls-body-bg);
}
.ls-theme-input { display: flex; gap: 12px; align-items: center; }
.ls-color-picker {
  width: 56px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.ls-theme-input .ls-input { flex: 1 1; max-width: 240px; }


/* ──────────────────────────────────────────────
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ────────────────────────────────────────────── */
.ls-legal-page {
  min-height: 100vh;
  background: #0A0A0A;
  background: var(--ls-hero-bg);
  padding: 80px 24px 96px;
  position: relative;
  display: flex;
  justify-content: center;
}

.ls-legal-article {
  width: 100%;
  max-width: 740px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  padding: 72px 64px;
  position: relative;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
}

.ls-legal-article::before,
.ls-legal-article::after {
  content: '✦';
  position: absolute;
  font-size: 10px;
  color: #BC9F6E;
  color: var(--ls-gold);
  opacity: 0.45;
}
.ls-legal-article::before { top: 18px; left: 18px; }
.ls-legal-article::after { bottom: 18px; right: 18px; }

/* Trial math disclosure (Account page) */
.ls-trial-disclosure {
  margin: 18px 0 22px;
  padding: 18px 22px;
  border: 1px solid rgba(198, 157, 100, 0.34);
  background: rgba(198, 157, 100, 0.04);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 300;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  line-height: 1.9;
}
.ls-trial-disclosure-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  letter-spacing: 0.04em;
}
.ls-trial-disclosure-mark {
  font-size: 8px;
  letter-spacing: 0.4em;
  color: #BC9F6E;
  color: var(--ls-gold);
  opacity: 0.5;
}

.ls-membership-includes {
  margin: 6px 0 20px;
  padding: 18px 22px;
  border: 1px solid rgba(159, 173, 159, 0.30);
  border-radius: 4px;
  background: rgba(159, 173, 159, 0.05);
}
.ls-membership-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  font-weight: 300;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  line-height: 1.8;
  margin: 0 0 14px;
}
.ls-membership-note em {
  font-style: italic;
  color: #B8C4B8;
  color: var(--ls-sage-light, #B8C4B8);
}
.ls-membership-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ls-membership-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  line-height: 1.6;
}
.ls-membership-list li:last-child { margin-bottom: 0; }
.ls-membership-list li::before {
  content: '☽';
  position: absolute;
  left: 0;
  top: 0;
  color: #BC9F6E;
  color: var(--ls-gold);
  font-size: 0.9rem;
}


/* Membership tiers block on the Account tab */
.ls-tiers-subtitle {
  margin: 0 0 20px;
  max-width: 620px;
}
.ls-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .ls-tiers-grid { grid-template-columns: 1fr; }
}
.ls-tier-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 28px;
  border: 1px solid rgba(159, 173, 159, 0.26);
  border-radius: 6px;
  background: rgba(159, 173, 159, 0.04);
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}
.ls-tier-card:hover {
  border-color: rgba(198, 157, 100, 0.42);
  transform: translateY(-2px);
}
.ls-tier-card-recommended {
  border-color: rgba(198, 157, 100, 0.44);
  background: rgba(198, 157, 100, 0.05);
}
.ls-tier-card-current {
  border-color: #9FAD9F;
  border-color: var(--ls-sage, #9fad9f);
  background: rgba(159, 173, 159, 0.10);
}
.ls-tier-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ls-tier-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  letter-spacing: 0.01em;
}
.ls-tier-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(198, 157, 100, 0.5);
  color: #BC9F6E;
  color: var(--ls-gold);
  white-space: nowrap;
}
.ls-tier-pill-current {
  border-color: #9FAD9F;
  border-color: var(--ls-sage, #9fad9f);
  color: #b8c4b8;
  color: var(--ls-sage-light, #b8c4b8);
}
.ls-tier-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin-bottom: 16px;
}
.ls-tier-bullets {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex: 1 1;
}
.ls-tier-bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  font-weight: 300;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  line-height: 1.55;
}
.ls-tier-bullets li:last-child { margin-bottom: 0; }
.ls-tier-bullets li::before {
  content: '☽';
  position: absolute;
  left: 0;
  top: 0;
  color: #BC9F6E;
  color: var(--ls-gold);
  font-size: 0.8rem;
}
.ls-tier-cta { width: 100%; margin-top: auto; padding: 16px 22px; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; }
.ls-tier-current-note {
  margin-top: auto;
  padding-top: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8c4b8;
  color: var(--ls-sage-light, #b8c4b8);
  text-align: center;
}
.ls-tiers-manage { margin-top: 20px; }


.ls-legal-h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.15;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.ls-legal-h1 em {
  font-style: italic;
  color: #E6C2BF;
  color: var(--ls-blush);
  font-weight: 400;
}

.ls-legal-meta {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  margin: 0 0 40px;
  font-weight: 400;
}

.ls-legal-body h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin: 36px 0 14px;
  letter-spacing: 0.005em;
}

.ls-legal-body p {
  margin: 0 0 16px;
}

.ls-legal-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.ls-legal-body ul li {
  margin: 0 0 10px;
}

.ls-legal-body strong {
  color: #F5EBDD;
  color: var(--ls-cream);
  font-weight: 500;
}

.ls-legal-body a {
  color: #BC9F6E;
  color: var(--ls-gold);
  border-bottom: 1px solid rgba(198, 157, 100, 0.4);
  padding-bottom: 1px;
}
.ls-legal-body a:hover {
  color: #CDB58C;
  color: var(--ls-gold-light);
}

.ls-legal-divider {
  margin: 56px 0 28px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 157, 100, 0.3), transparent);
}

@media (max-width: 720px) {
  .ls-legal-page { padding: 64px 16px 72px; }
  .ls-legal-article { padding: 48px 28px; }
}

/* ──────────────────────────────────────────────
   FOOTER inside lunar-sanctuary.html iframe parent
   (used only on the React shell pages, not the iframe)
   ────────────────────────────────────────────── */
.ls-app-footer {
  position: relative;
  width: 100%;
  padding: 24px 24px 28px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  border-top: 1px solid rgba(232, 223, 206, 0.42);
  border-top: 1px solid var(--ls-border);
  background: #0A0A0A;
  background: var(--ls-hero-bg);
  z-index: 2;
}

/* Admin Content — collapsible sections */
.ls-content-section {
  border-top: 1px solid rgba(232, 223, 206, 0.42);
  border-top: 1px solid var(--ls-border);
}
.ls-content-section:first-child { border-top: none; }
.ls-content-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  color: #F5EBDD;
  color: var(--ls-cream);
  transition: color 0.2s ease;
}
.ls-content-section-header:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-content-section-caret {
  color: #BC9F6E;
  color: var(--ls-gold);
  font-size: 14px;
  width: 16px;
}
.ls-content-section-title {
  flex: 1 1;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding-right: 12px;
}
.ls-content-section-count {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-weight: 400;
}

/* Admin Content — page group (top level: "Landing page", "Reading page" etc.) */
.ls-content-page-group {
  border-top: 1px solid rgba(232, 223, 206, 0.42);
  border-top: 1px solid var(--ls-border);
  padding-bottom: 4px;
}
.ls-content-page-group:first-child { border-top: none; }
.ls-content-page-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Playfair Display', serif;
  color: #F5EBDD;
  color: var(--ls-cream);
  transition: color 0.2s ease;
}
.ls-content-page-header:hover { color: #F5EBDD; color: var(--ls-cream); opacity: 0.85; }
.ls-content-page-caret {
  color: #9FAD9F;
  color: var(--ls-sage);
  font-size: 18px;
  width: 18px;
  padding-top: 2px;
}
.ls-content-page-title {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
}
.ls-content-page-label {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.ls-content-page-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: normal;
  font-weight: 400;
}
.ls-content-page-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  white-space: nowrap;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
/* "Last edited 12 mins ago" timestamp sitting under the section/key count.
   Quieter than the main count (smaller, no caps, italic) so it reads as
   metadata, not headline. */
.ls-content-page-last-edited {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-style: italic;
  color: #D8CDB8;
  color: var(--ls-muted);
  opacity: 0.85;
}

/* Small "View live →" link in the page header. Opens in a new tab so Lisa
   can see exactly what she's editing. Click handler stops propagation so
   it doesn't collapse the page group. */
.ls-content-page-live {
  display: inline-block;
  margin-right: 18px;
  padding: 6px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9FAD9F;
  color: var(--ls-sage, #9fad9f);
  text-decoration: none;
  border: 1px solid rgba(159, 173, 159, 0.32);
  border-radius: 2px;
  background: rgba(159, 173, 159, 0.04);
  white-space: nowrap;
  align-self: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ls-content-page-live:hover {
  color: #F5EBDD;
  color: var(--ls-cream);
  border-color: #9FAD9F;
  border-color: var(--ls-sage, #9fad9f);
  background: rgba(159, 173, 159, 0.12);
}

/* Sections nested inside a page group: card-style with clear separation */
.ls-content-page-group .ls-content-section {
  margin: 8px 0;
  border: 1px solid rgba(229, 217, 200, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  padding: 0 16px;
}
.ls-content-page-group .ls-content-section-header {
  padding: 14px 0;
  font-size: 12.5px;
}
.ls-content-page-group .ls-content-section-title {
  color: #D8CDB8;
  color: var(--ls-cream-soft);
}

/* The friendly "where this shows up" hint under a section header. */
.ls-content-section-hint {
  margin: 4px 0 14px 30px;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #F5EBDD;
  color: var(--ls-cream);
  background: rgba(159, 173, 159, 0.06);
  border-left: 2px solid #9FAD9F;
  border-left: 2px solid var(--ls-sage, #9fad9f);
  border-radius: 0 4px 4px 0;
}

/* Per-key hint sitting between the key name and the textarea. */
.ls-content-key-hint {
  margin: 4px 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: italic;
}

/* Textarea styling — pairs with .ls-content-input on Moon Phases panel */
textarea.ls-content-input {
  background: rgba(20, 20, 20, 0.6) !important;
  border: 1px solid rgba(229, 217, 200, 0.28) !important;
  color: #F5EBDD !important;
  color: var(--ls-cream) !important;
  padding: 12px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
  min-height: 140px;
  border-radius: 2px;
}
textarea.ls-content-input:focus {
  outline: none;
  border-color: #BC9F6E !important;
  border-color: var(--ls-gold) !important;
  background: rgba(20, 20, 20, 0.85) !important;
}
input[type="text"].ls-content-input {
  background: rgba(20, 20, 20, 0.6) !important;
  border: 1px solid rgba(229, 217, 200, 0.28) !important;
  color: #F5EBDD !important;
  color: var(--ls-cream) !important;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  border-radius: 2px;
}
input[type="text"].ls-content-input:focus {
  outline: none;
  border-color: #BC9F6E !important;
  border-color: var(--ls-gold) !important;
  background: rgba(20, 20, 20, 0.85) !important;
}

.ls-app-footer a {
  color: #D8CDB8;
  color: var(--ls-muted);
  margin: 0 14px;
}
.ls-app-footer a:hover {
  color: #BC9F6E;
  color: var(--ls-gold);
}


/* ===========================
   Community (Phase 2)
   =========================== */
.ls-community-page {
  min-height: 100vh;
  background: #141414;
  background: var(--ls-body-bg);
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 80px;
}
.ls-community-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 24px 0;
}
.ls-community-sub {
  max-width: 540px;
  margin: 14px 0 32px;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
}
.ls-community-paywall {
  margin: 24px 0 32px;
  padding: 24px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  background: rgba(198, 157, 100, 0.04);
  text-align: left;
}
.ls-community-paywall p { margin: 0 0 14px; color: #D8CDB8; color: var(--ls-cream-soft); }
.ls-community-loading,
.ls-community-empty {
  padding: 32px 0;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: italic;
}

/* composer */
.ls-community-composer {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border-radius: 0;
}
.ls-community-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #F5EBDD;
  color: var(--ls-cream);
  min-height: 64px;
}
.ls-community-input::placeholder { color: #D8CDB8; color: var(--ls-muted); }
.ls-community-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.ls-community-counter { font-size: 0.72rem; color: #D8CDB8; color: var(--ls-muted); letter-spacing: 0.06em; }
.ls-cta {
  background: #E6C2BF;
  background: var(--ls-blush);
  color: #3a2420;
  border: none;
  padding: 9px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ls-cta:hover:not(:disabled) { background: #EFD3CC; background: var(--ls-blush-soft); }
.ls-cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* Community paywall / upgrade CTA — pill-shaped with darker, bolder text
   (per Lisa's request: rounded ends + higher-contrast label). */
.ls-community-paywall .ls-cta {
  border-radius: 999px;
  padding: 13px 30px;
  color: #241210;
  font-weight: 600;
}

/* feed */
.ls-community-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* post card */
.ls-community-post {
  padding: 20px 22px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  position: relative;
}
.ls-community-post.is-host-post {
  border: 1px solid rgba(245, 235, 221, 0.20);
  background: #1A1A1A;
  background: var(--ls-panel-bg);
}
.ls-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ls-post-author {
  font-weight: 600;
  font-size: 1.02rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Playfair Display', serif;
  font-style: normal;
}
.ls-post-time { font-size: 0.7rem; color: #D8CDB8; color: var(--ls-muted); letter-spacing: 0.04em; }
.ls-post-body {
  margin: 0 0 14px;
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 0.94rem;
  font-size: var(--ls-read-body);
  color: #FFFFFF;
  color: var(--ls-white);
}
/* Hyperlinks inside post + comment bodies. Sage underline so they read
   as clickable without shouting. word-break: break-word keeps long URLs
   from blowing out the column on mobile. */
.ls-post-link {
  color: #9FAD9F;
  color: var(--ls-sage, #9fad9f);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-word;
  cursor: pointer;
}
.ls-post-link:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-post-delete,
.ls-comment-delete {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  line-height: 1;
}
.ls-post-delete:hover,
.ls-comment-delete:hover { color: #BC9F6E; color: var(--ls-gold); }

.ls-post-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
}
.ls-post-like,
.ls-post-comment-toggle {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.ls-post-like.is-liked { color: #E6C2BF; color: var(--ls-blush, #E6C2BF); }
.ls-post-like:hover,
.ls-post-comment-toggle:hover { color: #BC9F6E; color: var(--ls-gold); }

/* host badge */
.ls-role-badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.3;
}
.ls-role-badge.is-host {
  color: #BC9F6E;
  color: var(--ls-gold);
  border-color: #BC9F6E;
  border-color: var(--ls-gold);
  background: transparent;
}
.ls-role-badge.is-member {
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  border-color: rgba(245, 235, 221, 0.30);
  background: transparent;
}

/* comments */
.ls-post-comments {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ls-post-comments-empty,
.ls-post-comments-loading {
  color: #D8CDB8;
  color: var(--ls-muted);
  font-size: 0.8rem;
  font-style: italic;
}
/* ─── Facebook-style comment bubbles + one-level threading ─── */
.ls-post-comments { gap: 2px; }   /* tighter than the old boxed stack */
.ls-c-thread { margin-bottom: 4px; }
.ls-c {
  display: block;
  padding: 5px 0;
  position: relative;
}
.ls-c-bubble {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 10px 16px 12px;
}
.ls-c.is-host .ls-c-bubble { background: rgba(255, 255, 255, 0.05); }
.ls-c-namerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ls-c-name {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.95rem;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-c-body {
  margin: 0;
  font-size: 0.94rem;
  font-size: var(--ls-read-body);
  line-height: 1.55;
  color: #FFFFFF;
  color: var(--ls-white);
  white-space: pre-wrap;
  word-break: break-word;
}
.ls-c-mention { color: #E6C2BF; color: var(--ls-blush, #E6C2BF); font-weight: 400; }
.ls-c-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 7px 14px 2px;
}
.ls-c-time { font-size: 0.68rem; color: #D8CDB8; color: var(--ls-muted); }
.ls-c-action {
  background: none;
  border: none;
  padding: 5px 2px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #D8CDB8;
  color: var(--ls-muted);
  transition: color 0.15s ease;
}
.ls-c-action:hover { color: #F5EBDD; color: var(--ls-cream); }
.ls-c-action-danger:hover { color: #E6C2BF; color: var(--ls-blush, #E6C2BF); }
/* Comment edit: plain clickable words (no button boxes) for maximum room. */
.ls-c-edit-cancel, .ls-c-edit-save {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.15s ease;
}
.ls-c-edit-cancel { color: #D8CDB8; color: var(--ls-muted); }
.ls-c-edit-cancel:hover { color: #F5EBDD; color: var(--ls-cream); }
.ls-c-edit-save { color: #BC9F6E; color: var(--ls-gold); }
.ls-c-edit-save:hover { color: #CDB58C; color: var(--ls-gold-light); }
.ls-c-edit-save:disabled { opacity: 0.4; cursor: not-allowed; }
/* React trigger (emoji smiley) sits inline in the light action row */
.ls-c-react-trigger {
  color: #D8CDB8 !important;
  color: var(--ls-muted) !important;
  padding: 5px !important;
  width: auto !important;
  height: auto !important;
}
.ls-c-react-trigger svg { width: 18px; height: 18px; }
.ls-c-react-trigger:hover { color: #F5EBDD !important; color: var(--ls-cream) !important; background: none !important; }
/* Reaction pills below the bubble */
.ls-c-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px 0 14px;
}
.ls-c-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ls-c-react-pill:hover { background: rgba(255, 255, 255, 0.1); }
.ls-c-react-pill.is-mine {
  background: rgba(230, 194, 191, 0.14);
  border-color: rgba(230, 194, 191, 0.5);
}
.ls-c-react-count { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; color: #D8CDB8; color: var(--ls-cream-soft); }
/* "View N replies" link on collapsed long threads */
.ls-view-replies {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #D8CDB8;
  color: var(--ls-muted);
  transition: color 0.15s ease;
}
.ls-view-replies:hover { color: #F5EBDD; color: var(--ls-cream); }
.ls-c-replies {
  margin-left: 15px;
  padding-left: 24px;
  position: relative;
}
.ls-c-replies > .ls-c.is-reply { position: relative; margin-bottom: 8px; }
/* Facebook-style curved elbow: hooks from the thread spine into each reply's
   avatar, visually linking it back to the comment it belongs to. */
.ls-c-replies > .ls-c.is-reply::before {
  content: "";
  position: absolute;
  left: -24px;
  top: -6px;
  width: 22px;
  height: 38px;
  border-left: 1.5px solid rgba(232, 223, 206, 0.30);
  border-left: 1.5px solid var(--ls-border-soft);
  border-bottom: 1.5px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1.5px solid var(--ls-border-soft);
  border-bottom-left-radius: 14px;
  pointer-events: none;
}
/* continuous vertical spine between consecutive replies — extended by the
   extra 8px margin-bottom above so it still bridges cleanly into the next
   reply's elbow instead of leaving a visible gap. */
.ls-c-replies > .ls-c.is-reply:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 32px;
  bottom: -14px;
  border-left: 1.5px solid rgba(232, 223, 206, 0.30);
  border-left: 1.5px solid var(--ls-border-soft);
  pointer-events: none;
}
/* Replies read as lighter/nested vs. their root comment (subtler bubble),
   so a long stack of replies doesn't read as one dense, uniform wall —
   readability follow-up, 10 Sep 2026 ("visually too dense once the thread
   gets long"). */
.ls-c-replies > .ls-c.is-reply .ls-c-bubble { background: rgba(255, 255, 255, 0.032); }
/* Facebook-style inline reply composer: sits directly under the thread it
   belongs to, indented + hooked into the spine like a reply. */
.ls-c-reply-inline {
  margin-left: 6px;
  padding-left: 18px;
  margin-top: 6px;
  position: relative;
}
.ls-c-reply-inline::before {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  width: 18px;
  height: 46px;
  border-left: 1.5px solid rgba(232, 223, 206, 0.30);
  border-left: 1.5px solid var(--ls-border-soft);
  border-bottom: 1.5px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1.5px solid var(--ls-border-soft);
  border-bottom-left-radius: 14px;
  pointer-events: none;
}
.ls-reply-chip.is-hint {
  background: none;
  padding: 4px 2px;
  margin: 8px 0 0;
  font-size: 0.68rem;
  opacity: 0.75;
}
.ls-c.is-deeplinked .ls-c-bubble {
  animation: ls-deeplink-flash 2.4s ease-out 1;
  scroll-margin-top: 110px;
}
.ls-reply-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 6px 14px;
  margin: 8px 0 -6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: #D8CDB8;
  color: var(--ls-muted);
}
.ls-reply-chip strong { color: #F5EBDD; color: var(--ls-cream); font-weight: 600; }
.ls-reply-chip-x {
  background: none; border: none; cursor: pointer;
  color: #D8CDB8;
  color: var(--ls-muted); font-size: 0.8rem; padding: 0 2px;
  transition: color 0.15s ease;
}
/* 24 Aug 2026: "Replying to X" nested inside the reply box itself, as its
   own top row, instead of floating as a separate band above it. */
.ls-reply-pill > .ls-reply-chip {
  order: 0;
  flex: 1 1 100%;
  margin: -2px -2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  border-radius: 12px 12px 0 0;
}
.ls-reply-chip-x:hover { color: #F5EBDD; color: var(--ls-cream); }

/* ─── Notifications bell + panel ─── */
.ls-notif-wrap { position: relative; display: inline-flex; align-items: center; }
.ls-notif-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #d8cdb8);
  transition: color 0.15s ease, background 0.15s ease;
}
.ls-notif-trigger:hover { color: #F5EBDD; color: var(--ls-cream, #f0e6d2); background: rgba(255, 255, 255, 0.05); }
.ls-notif-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(230, 194, 191, 0.18);
  color: #F5EBDD;
  color: var(--ls-cream, #f0e6d2);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ls-notif-avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ls-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E6C2BF;
  background: var(--ls-blush, #E6C2BF);
  color: #1a1410;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ls-notif-backdrop { position: fixed; inset: 0; z-index: 60; }
.ls-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 61;
  width: 340px;
  max-width: 88vw;
  max-height: 460px;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.ls-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-notif-markall {
  background: none; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem; letter-spacing: 0.04em;
  color: #D8CDB8;
  color: var(--ls-muted); font-weight: 600;
  transition: color 0.15s ease;
}
.ls-notif-markall:hover { color: #E6C2BF; color: var(--ls-blush, #E6C2BF); }
.ls-notif-empty { padding: 18px 14px; color: #D8CDB8; color: var(--ls-muted); font-size: 0.84rem; }
.ls-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.ls-notif-item:hover { background: rgba(255, 255, 255, 0.04); }
.ls-notif-item.is-unread { background: rgba(230, 194, 191, 0.07); }
.ls-notif-body { flex: 1 1; min-width: 0; }
.ls-notif-text { margin: 0; font-size: 0.82rem; color: #D8CDB8; color: var(--ls-cream-soft); line-height: 1.4; }
.ls-notif-text strong { color: #F5EBDD; color: var(--ls-cream); font-weight: 600; }
.ls-notif-snippet {
  margin: 3px 0 0;
  font-size: 0.76rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-notif-time { font-size: 0.66rem; color: #D8CDB8; color: var(--ls-muted); }
.ls-notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E6C2BF;
  background: var(--ls-blush, #E6C2BF);
  flex-shrink: 0; margin-top: 6px;
}
.ls-comment-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 6px;
}
.ls-comment-input {
  flex: 1 1;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  padding: 10px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.94rem;
  font-size: var(--ls-read-body);
  line-height: 1.6;
  color: #F5EBDD;
  color: var(--ls-cream);
  outline: none;
  resize: vertical;
  min-height: 72px;
}
.ls-comment-submit {
  background: transparent;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
  color: #BC9F6E;
  color: var(--ls-gold);
  padding: 7px 14px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.ls-comment-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.ls-comment-submit:hover:not(:disabled) { background: #BC9F6E; background: var(--ls-gold); color: #1a1a1a; }

/* ─── Always-visible reply row (pill input + emoji + round send) ─── */
.ls-reply-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.ls-reply-pill {
  position: relative;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  border-radius: 18px;
  padding: 8px 60px 8px 14px;
  transition: border-color 0.18s ease;
}
.ls-reply-pill:focus-within { border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-reply-input {
  flex: 1 1 100%;
  order: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.94rem;
  font-size: var(--ls-read-body);
  line-height: 1.5;
  padding: 6px 2px 2px;
  min-height: 28px;
  max-height: 140px;
}
.ls-reply-input::placeholder { color: #D8CDB8; color: var(--ls-muted); opacity: 0.7; }
.ls-reply-send {
  /* 24 Aug 2026: anchored inside the bottom-right corner of the pill
     itself, instead of sitting as a separate round button outside it. */
  position: absolute;
  right: 8px;
  bottom: 8px;
  order: 4;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #9FAD9F;
  background: var(--ls-sage);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #15211a;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.ls-reply-send:hover:not(:disabled) { background: #B8C4B8; background: var(--ls-sage-soft); transform: translateY(-1px); }
.ls-reply-send:disabled { opacity: 1; cursor: default; }
/* Photo attach + emoji sit together on their own row BELOW the text,
   left-aligned and matched to the same 34px height so they line up. */
.ls-reply-attach {
  order: 2;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #D8CDB8;
  color: var(--ls-muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.ls-reply-attach:hover:not(:disabled) { color: #BC9F6E; color: var(--ls-gold); background: rgba(198, 157, 100, 0.1); }
.ls-reply-attach:disabled { opacity: 0.4; cursor: default; }
.ls-reply-pill .ls-emoji-wrap { order: 3; display: inline-flex; align-items: center; }
.ls-reply-pill .ls-emoji-btn { width: 38px; height: 38px; padding: 0; }
/* Photo preview above the composer while composing */
.ls-c-photo-preview {
  position: relative;
  display: inline-block;
  margin: 0 0 8px 4px;
}
.ls-c-photo-preview img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 12px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  display: block;
}
.ls-c-photo-preview button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  color: #F5EBDD;
  color: var(--ls-cream);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
/* Rendered photo inside a posted comment/reply */
.ls-c-photo {
  display: inline-block;
  margin-top: 8px;
}
.ls-c-photo img {
  max-width: 100%;
  max-height: 340px;
  border-radius: 14px;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  display: block;
}


/* ─── Emoji picker ─── */
.ls-emoji-wrap { position: relative; display: inline-flex; }
.ls-emoji-btn {
  background: none;
  border: none;
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: color 0.18s ease, background 0.18s ease;
}
.ls-emoji-btn:hover { color: #BC9F6E; color: var(--ls-gold); background: rgba(255,255,255,0.05); }
.ls-emoji-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: 288px;
  max-height: 300px;
  overflow-y: auto;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.ls-emoji-group + .ls-emoji-group { margin-top: 10px; }
.ls-emoji-group-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  margin-bottom: 6px;
}
.ls-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2px;
  gap: 2px;
}
.ls-emoji-cell {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 0;
  border-radius: 8px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.ls-emoji-cell:hover { background: rgba(255,255,255,0.08); transform: scale(1.15); }

/* ── Full Facebook-style picker (search + category tabs + scroll) ── */
.ls-emoji-panel-full {
  width: 340px;
  max-height: 380px;
  padding: 10px 10px 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ls-emoji-search-row { flex-shrink: 0; margin-bottom: 8px; }
.ls-emoji-search {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 999px;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.ls-emoji-search:focus { border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-emoji-search::placeholder { color: #D8CDB8; color: var(--ls-muted); }
.ls-emoji-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  overflow-x: auto;
}
.ls-emoji-tab {
  flex: 1 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 6px 4px;
  border-radius: 8px;
  opacity: 0.75;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.ls-emoji-tab:hover { background: rgba(255,255,255,0.06); opacity: 1; }
.ls-emoji-tab.is-active { background: rgba(159,173,159,0.18); opacity: 1; }
.ls-emoji-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.ls-emoji-section + .ls-emoji-section { margin-top: 12px; }
.ls-emoji-section .ls-emoji-group-label {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  padding: 4px 0 5px;
  z-index: 1;
}
.ls-emoji-empty {
  padding: 28px 0;
  text-align: center;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: italic;
  font-size: 0.84rem;
}

.ls-bb-composer-attach-emoji { color: #D8CDB8; color: var(--ls-cream-soft); }

@media (max-width: 640px) {
  /* Keep the emoji picker fully on-screen on phones: pin it within the
     viewport instead of anchoring (and overflowing) off the button. */
  .ls-emoji-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 92px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 44vh;
  }
  .ls-emoji-panel-full {
    left: 8px;
    right: 8px;
    bottom: 10px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 62vh;
  }
  .ls-community-wrap { padding: 12px 16px 0; }
  .ls-community-post { padding: 16px 14px; }
}


/* lifecycle email status pills */
.ls-pill {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
}
.ls-pill-draft { color: #D8CDB8; color: var(--ls-cream-soft); border-color: rgba(232, 223, 206, 0.42); border-color: var(--ls-border); }
.ls-pill-approved { color: #BC9F6E; color: var(--ls-gold); border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-pill-sent { color: #9FAD9F; color: var(--ls-sage, #9FAD9F); border-color: #9FAD9F; border-color: var(--ls-sage, #9FAD9F); }

/* ===========================
   BuddyBoss-style Community shell
   =========================== */
.ls-bb-shell {
  min-height: 100vh;
  background: #141414;
  background: var(--ls-body-bg);
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
}
.ls-bb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  /* Solid charcoal so scrolling content cannot bleed through. Removed
     the previous backdrop-filter — on some iOS Safari builds the blur
     left the topbar partly transparent and post content read through
     the nav icons. */
  background: #141414;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
}
.ls-bb-back {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.ls-bb-back:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-bb-topbar-right { display: flex; gap: 12px; align-items: center; margin-left: auto; }

/* Kill the in-page Community topbar + mobile drawer on mobile.
   Lisa Feb 2026: the unified AppEyebrowNav drawer is now the single
   mobile menu across every page — Community's own left-side drawer
   was competing with it. Desktop keeps the LeftRail sidebar untouched. */
@media (max-width: 720px) {
  .ls-bb-topbar { display: none !important; }
  .ls-bb-drawer,
  .ls-bb-drawer-backdrop { display: none !important; }
}
.ls-bb-icon-btn {
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ls-bb-icon-btn:hover:not(:disabled) { color: #BC9F6E; color: var(--ls-gold); border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-bb-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ls-bb-body {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  grid-gap: 28px;
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 28px 80px;
}
/* Groups grid / News Feed have no right-hand widget, so the main column
   spans the full width instead of leaving a dead 280px gap on the right. */
.ls-bb-body--full {
  grid-template-columns: 240px 1fr;
}
/* Group detail: left rail + a full-width group area. The banner spans the
   whole area; the feed + About-group widget sit in a 2-col row beneath it. */
.ls-bb-body--group {
  grid-template-columns: 240px 1fr;
}
.ls-bb-group-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ls-bb-group-cols {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-gap: 28px;
  gap: 28px;
  align-items: start;
}
/* Group feed column is NOT a panel — the composer and each post are separate
   free-floating cards on the page (matches the approved reference). */
.ls-bb-feed-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Left rail */
.ls-bb-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
}
.ls-bb-brand {
  display: block;
  padding: 6px 14px 14px;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  cursor: pointer;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  margin-bottom: 10px;
  font-style: italic;
}
.ls-bb-nav { display: flex; flex-direction: column; gap: 2px; }
.ls-bb-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 1.02rem;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ls-bb-nav-item:hover:not(:disabled) { background: rgba(255,255,255,0.03); color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-nav-item.is-active { color: #F5EBDD; color: var(--ls-cream); background: rgba(255, 255, 255, 0.05); box-shadow: inset 3px 0 0 rgba(240, 230, 210, 0.45); }
.ls-bb-nav-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.ls-bb-soon {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  padding: 2px 6px;
}
.ls-bb-rail-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
}
.ls-bb-rail-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted);
  margin: 0 0 12px;
  padding: 0 14px;
}
.ls-bb-group-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}
.ls-bb-group-link:hover { background: rgba(255,255,255,0.03); color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-group-link.is-active {
  color: #F5EBDD;
  color: var(--ls-cream);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 3px 0 0 rgba(240, 230, 210, 0.45);
}
.ls-bb-group-link.is-active .ls-bb-group-link-name { font-weight: 600; }
.ls-bb-group-link-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
}
.ls-bb-group-link-name { line-height: 1.3; }

/* Main column */
.ls-bb-main {
  min-width: 0;
  /* Lisa Feb 2026: centre column sits on a lighter grey panel so the
     page feels less like a dark void. Pulls from --ls-panel-bg which
     respects the Control Room theme. */
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 4px;
  padding: 28px 28px 36px;
}
@media (max-width: 720px) {
  .ls-bb-main { padding: 18px 14px 28px; border-radius: 0; }
}
.ls-bb-main-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  margin-bottom: 22px;
}

/* Membership cue — calm "manage membership + how to sign back in" line */
.ls-membership-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 22px;
  flex-wrap: wrap;
}
.ls-membership-cue-text {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #C5BBA8);
  letter-spacing: 0.01em;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(159, 173, 159, 0.4);
          text-decoration-color: rgba(159, 173, 159, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, -webkit-text-decoration-color 0.2s ease;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, -webkit-text-decoration-color 0.2s ease;
}
.ls-membership-cue-text:hover {
  color: #B8C4B8;
  color: var(--ls-sage-light, #B8C4B8);
  -webkit-text-decoration-color: rgba(159, 173, 159, 0.9);
          text-decoration-color: rgba(159, 173, 159, 0.9);
}
.ls-membership-cue-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #9FAD9F;
  cursor: help;
  outline: none;
  line-height: 0;
}
.ls-membership-cue-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: -webkit-max-content;
  width: max-content;
  max-width: 280px;
  background: #1a2a1a;
  color: #E8E0D2;
  border: 1px solid rgba(159, 173, 159, 0.35);
  border-radius: 6px;
  padding: 10px 13px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 40;
}
.ls-membership-cue-info:hover .ls-membership-cue-tip,
.ls-membership-cue-info:focus-visible .ls-membership-cue-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .ls-membership-cue-tip { max-width: 220px; left: 0; transform: translateY(4px); }
  .ls-membership-cue-info:hover .ls-membership-cue-tip,
  .ls-membership-cue-info:focus-visible .ls-membership-cue-tip { transform: translateY(0); }
}

.ls-bb-page-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  color: #F5EBDD;
  color: var(--ls-cream);
}
/* "Groups" heading matches the group-card headline size/weight
   ("The Circle" / "Office Hours"). */
.ls-bb-page-title[data-testid="bb-groups-title"] {
  font-size: 1.05rem;
  font-weight: 400;
}
.ls-bb-page-title-count {
  color: #E6C2BF;
  color: var(--ls-blush);
  font-size: 1rem;
  margin-left: 4px;
  font-style: italic;
}

.ls-bb-back-link {
  display: inline-block;
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
}
.ls-bb-back-link:hover { color: #BC9F6E; color: var(--ls-gold); }

/* Groups grid */
.ls-bb-groups-grid {
  display: grid;
  /* auto-fit + minmax: cards stretch to fill the full width (no bunching on
     the left, no dead space on the right) and the row naturally holds 3 today
     or up to 4+ equal cards in future without hard-coding a column count. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 22px;
  gap: 22px;
  align-items: stretch;
}
.ls-bb-group-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ls-bb-group-card:hover {
  border-color: #BC9F6E;
  border-color: var(--ls-gold);
  box-shadow: inset 0 0 0 1px #BC9F6E;
  box-shadow: inset 0 0 0 1px var(--ls-gold);
  transform: translateY(-2px);
}
.ls-bb-group-card-foot {
  padding: 24px 26px 36px;
}
.ls-bb-group-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ls-group-lock-icon {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.ls-bb-group-card:hover .ls-group-lock-icon { opacity: 1; }
.ls-bb-group-card-meta {
  font-size: 0.72rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  /* Reserve space for 2 lines (tag + "Active Xh ago") even when a card has
     no tag (e.g. a paid group with tier access, no "Free"/"Available on
     upgrade" text) — otherwise that card's meta block is 1 line shorter,
     pushing its avatar row + button up out of alignment with sibling cards
     that DO have a tag line. Reported by Lisa via screenshot 3 Aug 2026. */
  min-height: 2.1rem;
}
.ls-bb-group-card-members {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ls-bb-group-card-members-count {
  font-size: 0.74rem;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  letter-spacing: 0.04em;
}
.ls-bb-group-card.is-not-entered { cursor: default; }
.ls-bb-group-card.is-not-entered:hover {
  border-color: rgba(232, 223, 206, 0.30);
  border-color: var(--ls-border-soft);
  box-shadow: none;
  transform: none;
}
.ls-bb-group-tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ls-bb-group-tag--free { color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-group-tag--upgrade { color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-group-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 24px auto 0;
  padding: 8px 16px;
  background: transparent;
  border-radius: 999px;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ls-bb-group-card-cta--join {
  border: 1px solid rgba(159, 173, 159, 0.55);
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-bb-group-card-cta--join:hover:not(:disabled) { background: #9FAD9F; background: var(--sage, #9FAD9F); border-color: #9FAD9F; border-color: var(--sage, #9FAD9F); color: #0A0A0A; }
.ls-bb-group-card-cta--join:disabled { opacity: 0.6; cursor: default; }
.ls-bb-group-card-cta--upgrade {
  border: 1px solid rgba(212, 175, 122, 0.55);
  color: #BC9F6E;
  color: var(--ls-gold);
}
.ls-bb-group-card-cta--upgrade:hover { background: #BC9F6E; background: var(--ls-gold); border-color: #BC9F6E; border-color: var(--ls-gold); color: #1a1a1a; }
.ls-bb-group-card-cta--enter {
  border: 1px solid rgba(159, 173, 159, 0.4);
  background: transparent;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
}
.ls-bb-group-card-cta--enter:hover { background: rgba(159, 173, 159, 0.16); border-color: #9FAD9F; border-color: var(--sage, #9FAD9F); color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-join-gate {
  max-width: 460px;
  margin: 40px auto 0;
  text-align: center;
  padding: 32px 28px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 18px;
}
.ls-bb-join-gate-line {
  font-size: 0.9rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ls-bb-join-gate .ls-bb-join-btn { width: auto; padding: 11px 32px; margin-top: 0; }

/* Group banner — Playfair wordmark on the group's colour.
   ONE fixed, uniform size for every group (precision over flourish): the two
   lines read as an even pair, the wordmark is top-anchored, and the bottom-left
   sigil sits in the reserved lower-left corner without squeezing the text. */
.ls-bb-group-banner {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ls-bb-group-banner.is-large {
  aspect-ratio: 7/2;
  margin-bottom: 20px;
  align-items: center;
  padding-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.ls-bb-group-banner-inner {
  width: 100%;
  text-align: center;
  color: #1a1a1a;
  font-family: 'Playfair Display', serif;
  padding: 0 16px;
}
.ls-bb-banner-top {
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0.32em;
  white-space: nowrap;
}
.ls-bb-banner-em {
  font-size: 1.42rem;
  line-height: 1.2;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}
.ls-bb-banner-em em { font-style: italic; }
/* Large hero banner (group detail page): same even wordmark, scaled up. */
.ls-bb-group-banner.is-large .ls-bb-group-banner-inner {
  padding: 0 28px;
}
.ls-bb-group-banner.is-large .ls-bb-banner-top {
  font-size: 1.7rem;
  letter-spacing: 0.24em;
  margin-bottom: 0.3em;
}
.ls-bb-group-banner.is-large .ls-bb-banner-em {
  font-size: 1.9rem;
}
.ls-bb-group-banner-sigil {
  display: none;
}
.ls-bb-group-banner.is-large + .ls-bb-group-tabs { margin-top: 18px; }

/* Tabs */
.ls-bb-group-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  margin-bottom: 22px;
}
.ls-bb-tab {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ls-bb-tab:hover { color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-tab.is-active {
  color: #E6C2BF;
  color: var(--ls-blush);
  border-bottom-color: #E6C2BF;
  border-bottom-color: var(--ls-blush);
}

/* Composer */
.ls-bb-composer {
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  padding: 16px;
  margin-bottom: 22px;
}
.ls-bb-composer-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ls-bb-composer-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  min-height: 56px;
}
.ls-bb-composer-input::placeholder { color: #D8CDB8; color: var(--ls-muted); }

/* ─── Composer trigger (BuddyBoss-style — click to open modal) ─── */
.ls-bb-composer-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  color: #D8CDB8;
  color: var(--ls-muted);
  font-size: 0.92rem;
  text-align: left;
  margin-bottom: 18px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ls-bb-composer-trigger:hover {
  border-color: rgba(198, 157, 100, 0.4);
  background: rgba(255,255,255,0.02);
}
.ls-bb-composer-trigger-text { flex: 1 1; }

/* ─── Composer modal ─── */
.ls-composer-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 200;
  animation: ls-fade-in 0.18s ease;
}
.ls-composer-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 640px);
  max-height: 88vh;
  background: #141414;
  background: var(--ls-body-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
  z-index: 201;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  padding: 22px 22px 18px;
  animation: ls-modal-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}
@keyframes ls-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-modal-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.ls-composer-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-composer-modal-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-composer-modal-close {
  background: transparent; border: none; color: #D8CDB8; color: var(--ls-cream-soft);
  cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.18s ease;
}
.ls-composer-modal-close:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-composer-modal-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 10px;
}
.ls-composer-modal-author { color: #F5EBDD; color: var(--ls-cream); font-size: 0.92rem; }
.ls-composer-modal-context {
  font-size: 0.74rem;
  color: #BC9F6E;
  color: var(--ls-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2px;
}
.ls-composer-modal-input {
  width: 100%;
  min-height: 220px;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 4px;
  outline: none;
  padding: 14px 16px;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.18s ease;
}
.ls-composer-modal-input:focus {
  border-color: rgba(198, 157, 100, 0.5);
}
.ls-composer-modal-counter {
  text-align: right;
  font-size: 0.74rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ls-composer-modal-counter.is-warn { color: #CDB58C; color: var(--ls-gold-light); }
.ls-composer-modal-counter.is-over { color: #E6C2BF; font-weight: 500; }
.ls-composer-modal-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}
.ls-composer-modal-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
  gap: 12px;
  flex-wrap: wrap;
}
.ls-composer-modal-cta-row { display: flex; gap: 10px; }
.ls-bb-btn-secondary {
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  padding: 11px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.ls-bb-btn-secondary:hover {
  border-color: #D8CDB8;
  border-color: var(--ls-cream-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
}

/* "(edited)" inline tag next to timestamps */
.ls-edited-tag {
  color: #D8CDB8;
  color: var(--ls-muted);
  font-style: italic;
  font-size: 0.85em;
}

/* Edit pencil on posts + comments */
.ls-post-edit, .ls-comment-edit {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.18s ease;
}
.ls-post-edit:hover, .ls-comment-edit:hover { color: #BC9F6E; color: var(--ls-gold); }

.ls-comment-edit-row {
  margin-top: 6px;
  padding: 6px 0 4px;
}
/* Inline comment edit: no typing-box chrome, full width so the comment
   being edited gets maximum room (reads like editing the text in place). */
.ls-comment-edit-row .ls-comment-input {
  border: none;
  background: transparent;
  padding: 0;
  font-size: max(1.08rem, 0.94rem);
  font-size: max(1.08rem, var(--ls-read-body));
  line-height: 1.72;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  resize: vertical;
}
.ls-comment-edit-row .ls-comment-input:focus {
  outline: none;
  box-shadow: none;
}

/* Mobile: modal occupies full screen */
@media (max-width: 720px) {
  .ls-composer-modal {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    top: 0; left: 0;
    transform: none;
    border: none;
    border-radius: 0;
    padding: 18px 16px 14px;
  }
  @keyframes ls-modal-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .ls-composer-modal-input { min-height: 160px; }
}
.ls-bb-composer-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 12px 0 0 48px;
}
.ls-bb-composer-photo {
  position: relative;
  aspect-ratio: 1/1;
  background: rgba(0,0,0,0.4);
}
.ls-bb-composer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-bb-composer-photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.65);
  color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 22px;
  border-radius: 50%;
}
.ls-bb-composer-yt {
  margin: 12px 0 0 48px;
  display: flex; gap: 8px; align-items: center;
}
.ls-bb-composer-yt-input {
  flex: 1 1;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
  padding: 8px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  outline: none;
}
.ls-bb-composer-yt-remove {
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-muted);
  cursor: pointer;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ls-bb-composer-yt-remove:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-bb-composer-err {
  margin: 8px 0 0 48px;
  color: #E6C2BF;
  color: var(--ls-blush, #E6C2BF);
  font-size: 0.78rem;
}
.ls-bb-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
}
.ls-bb-composer-attachers { display: flex; gap: 6px; }
.ls-bb-composer-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  cursor: pointer;
}
.ls-bb-composer-attach:hover:not(:disabled) { color: #BC9F6E; color: var(--ls-gold); border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-bb-composer-attach:disabled { opacity: 0.45; cursor: not-allowed; }

/* Avatar */
.ls-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #BC9F6E;
  color: var(--ls-gold);
  border-radius: 50%;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  flex-shrink: 0;
  font-weight: 500;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
}
.ls-avatar.has-img { overflow: hidden; padding: 0; background: none; }
.ls-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Account → profile picture card */
.ls-avatar-card { display: flex; align-items: center; gap: 22px; }
.ls-avatar-preview {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.ls-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-avatar-preview-initial {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 2rem; color: #BC9F6E; color: var(--ls-gold);
}
.ls-avatar-actions { flex: 1 1; min-width: 0; }
.ls-avatar-btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .ls-avatar-card { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.ls-avatar.is-host {
  border: 1.5px solid #BC9F6E;
  border: 1.5px solid var(--ls-gold);
  background: transparent;
}
.ls-avatar-stack { display: inline-flex; align-items: center; gap: 5px; }
.ls-avatar-stack .ls-avatar { margin-left: 0; }

/* Post card (BuddyBoss-style override) */
.ls-bb-feed { display: flex; flex-direction: column; gap: 16px; }
.ls-bb-empty { color: #D8CDB8; color: var(--ls-muted); font-style: italic; padding: 24px 0; }
.ls-bb-post {
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(245, 235, 221, 0.45);
  border-radius: 14px;
  padding: 24px 22px 20px;
  position: relative;
}
.ls-bb-post.is-host-post {
  border: 1px solid rgba(245, 235, 221, 0.20);
  background: #1A1A1A;
  background: var(--ls-panel-bg);
}
.ls-bb-post.is-pinned {
  border-color: rgba(245, 235, 221, 0.28);
}
/* Deep-link from email: brief blush halo so the visitor sees what the
   email was pointing at after auto-scroll. Animation removes itself
   when the .is-deeplinked class is dropped (~2.4s after mount). */
.ls-bb-post.is-deeplinked {
  animation: ls-deeplink-flash 2.4s ease-out 1;
  scroll-margin-top: 96px;
}
/* "View post" linked text shown above a deep-linked comment (cream on the
   dark feed). Plain link, not a pill — minimal footprint. */
.ls-view-post-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #F5EBDD;
  color: var(--ls-cream);
  cursor: pointer;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(245, 235, 221, 0.4);
          text-decoration-color: rgba(245, 235, 221, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s ease, -webkit-text-decoration-color 0.15s ease;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, -webkit-text-decoration-color 0.15s ease;
}
.ls-view-post-link:hover {
  color: #FFFFFF;
  color: var(--ls-white);
  -webkit-text-decoration-color: #F5EBDD;
          text-decoration-color: #F5EBDD;
  -webkit-text-decoration-color: var(--ls-cream);
          text-decoration-color: var(--ls-cream);
}

/* Same blush flash for a deep-linked comment from a reply notification. */
.ls-comment.is-deeplinked {
  animation: ls-deeplink-flash 2.4s ease-out 1;
  scroll-margin-top: 110px;
  border-radius: 10px;
}
/* Blush-pink PULSE (3 gentle throbs) so the visitor who lands from an email
   notification clearly sees the exact post/comment it pointed at. */
@keyframes ls-deeplink-flash {
  0%   { box-shadow: 0 0 0 0 rgba(230, 194, 191, 0); border-color: rgba(230, 194, 191, 0.85); }
  10%  { box-shadow: 0 0 26px 7px rgba(230, 194, 191, 0.65), 0 0 0 2px rgba(230, 194, 191, 0.8); }
  25%  { box-shadow: 0 0 0 0 rgba(230, 194, 191, 0.05); }
  40%  { box-shadow: 0 0 26px 7px rgba(230, 194, 191, 0.65), 0 0 0 2px rgba(230, 194, 191, 0.8); }
  55%  { box-shadow: 0 0 0 0 rgba(230, 194, 191, 0.05); }
  70%  { box-shadow: 0 0 26px 7px rgba(230, 194, 191, 0.65), 0 0 0 2px rgba(230, 194, 191, 0.8); }
  100% { box-shadow: 0 0 0 0 rgba(230, 194, 191, 0); }
}
/* Blush-pink "no longer available" toast for a deleted post/comment
   deep-link -- stays until dismissed, reuses the same pulse as a found
   target above, then keeps a quiet blush border while it's up. */
[data-sonner-toast].ls-toast-deleted-notice {
  animation: ls-deeplink-flash 2.4s ease-out 1;
  border: 1px solid #E6C2BF !important;
  border: 1px solid var(--ls-blush) !important;
}

.ls-bb-post-pin-badge {
  position: absolute;
  top: -10px;
  left: 18px;
  background: #141414;
  background: var(--ls-body-bg);
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
  color: #BC9F6E;
  color: var(--ls-gold);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 12px 5px;
  border-radius: 999px;
  z-index: 2;
}
.ls-post-pin {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  transition: color 0.2s ease;
}
.ls-post-pin:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-bb-post.is-pinned .ls-post-pin { color: #BC9F6E; color: var(--ls-gold); }
.ls-bb-post-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.ls-bb-post-head-meta { flex: 1 1; min-width: 0; }
.ls-bb-post-author-row { display: flex; align-items: center; gap: 12px; }

/* Post photos grid */
.ls-bb-post-photos {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin: 12px 0;
  border-radius: 0;
  overflow: hidden;
}
.ls-bb-post-photos.n-1 {
  /* Single-photo posts: tall portrait images were taking over the feed.
     Show the whole photo, centred, capped at a sensible feed height. */
  grid-template-columns: 1fr;
  max-height: 560px;
  background: #0e0e0e;
}
.ls-bb-post-photos.n-1 .ls-bb-post-photo { aspect-ratio: auto; height: 100%; max-height: 560px; }
.ls-bb-post-photos.n-1 .ls-bb-post-photo img { object-fit: contain; }
.ls-bb-post-photos.n-2 { grid-template-columns: 1fr 1fr; }
.ls-bb-post-photos.n-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ls-bb-post-photos.n-3 > :first-child { grid-row: span 2; }
.ls-bb-post-photos.n-4 { grid-template-columns: 1fr 1fr; }
.ls-bb-post-photo {
  display: block;
  background: rgba(0,0,0,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.ls-bb-post-photos.n-3 > :first-child { aspect-ratio: auto; }
.ls-bb-post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.ls-bb-post-photo:hover img { transform: scale(1.02); }

/* YouTube embed */
.ls-bb-post-yt {
  margin: 12px 0;
  aspect-ratio: 16/9;
  background: #000;
}
.ls-bb-post-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Photos tab grid */
.ls-bb-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}
.ls-bb-photo-tile {
  background: rgba(0,0,0,0.3);
  border: none;
  padding: 0;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
}
.ls-bb-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.ls-bb-photo-tile:hover img { transform: scale(1.04); }

/* Videos tab grid */
.ls-bb-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.ls-bb-video-tile {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.ls-bb-video-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-bb-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Lightbox */
.ls-lightbox {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.ls-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.ls-lightbox-close,
.ls-lightbox-prev,
.ls-lightbox-next {
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
}
.ls-lightbox-close { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 16px; }
.ls-lightbox-prev,
.ls-lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 60px; font-size: 28px;
}
.ls-lightbox-prev { left: 24px; }
.ls-lightbox-next { right: 24px; }

/* Right rail */
.ls-bb-right-rail { align-self: start; position: static; }
.ls-bb-right-card {
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 14px;
  padding: 20px;
}
.ls-bb-right-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-bb-right-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ls-bb-right-eyebrow {
  display: block;
  font-size: 0.76rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  margin-bottom: 4px;
  font-weight: 500;
}
.ls-bb-right-line {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  line-height: 1.5;
}
.ls-bb-join-btn {
  width: 100%;
  margin-top: 18px;
  padding: 11px 0;
  background: transparent;
  border: 1px solid #9FAD9F;
  border: 1px solid var(--sage, #9FAD9F);
  border-radius: 8px;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ls-bb-join-btn:hover:not(:disabled) { background: #9FAD9F; background: var(--sage, #9FAD9F); color: #0A0A0A; }
.ls-bb-join-btn:disabled { opacity: 0.6; cursor: default; }
.ls-bb-joined-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
  font-size: 0.74rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1080px) {
  .ls-bb-body { grid-template-columns: 220px 1fr; gap: 22px; padding: 20px 18px; }
  .ls-bb-body--group { grid-template-columns: 220px 1fr; }
  .ls-bb-group-cols { grid-template-columns: 1fr; }
  .ls-bb-right-rail { display: none; }
}
@media (max-width: 720px) {
  /* Lisa Feb 10 2026 — push the community body to the screen edges.
     Internal cards/posts own their own padding. */
  .ls-bb-body { grid-template-columns: 1fr; gap: 18px; padding: 16px 0; }
  .ls-bb-body--group { grid-template-columns: 1fr; }
  /* Hide the desktop side rail on mobile — its content moves into the drawer */
  .ls-bb-rail { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile hamburger + BuddyBoss-style slide-in drawer
   ───────────────────────────────────────────────────────────────────── */
.ls-bb-burger {
  display: none; /* desktop hides it */
  background: transparent;
  border: none;
  padding: 8px;
  margin-right: 4px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: stretch;
}
.ls-bb-burger span {
  display: block;
  height: 2px;
  width: 22px;
  background: #F5EBDD;
  background: var(--ls-cream);
  transition: background 0.2s ease;
}
.ls-bb-burger:hover span { background: #BC9F6E; background: var(--ls-gold); }

.ls-bb-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.ls-bb-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ls-bb-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: #141414;
  background: var(--ls-body-bg);
  border-right: 1px solid rgba(232, 223, 206, 0.30);
  border-right: 1px solid var(--ls-border-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
  z-index: 100;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-family: 'Montserrat', sans-serif;
  -webkit-overflow-scrolling: touch;
}
.ls-bb-drawer.is-open { transform: translateX(0); }

.ls-bb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-bb-drawer-close {
  background: transparent;
  border: none;
  color: #F5EBDD;
  color: var(--ls-cream);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ls-bb-drawer-close:hover { color: #BC9F6E; color: var(--ls-gold); }
.ls-bb-drawer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #BC9F6E;
  color: var(--ls-gold);
  letter-spacing: 0.01em;
}

.ls-bb-drawer-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-bb-drawer-user-name {
  font-size: 0.92rem;
  color: #F5EBDD;
  color: var(--ls-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-bb-drawer-user-email {
  font-size: 0.72rem;
  color: #D8CDB8;
  color: var(--ls-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-bb-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 6px;
}
.ls-bb-drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.18s ease, color 0.18s ease;
  width: 100%;
}
.ls-bb-drawer-item:hover:not(:disabled) {
  background: rgba(255,255,255,0.04);
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-bb-drawer-item.is-active {
  background: rgba(255, 255, 255, 0.05);
  color: #F5EBDD;
  color: var(--ls-cream);
  box-shadow: inset 3px 0 0 rgba(240, 230, 210, 0.45);
}
.ls-bb-drawer-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ls-bb-drawer-signout {
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin-top: 6px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
  border-radius: 0;
  padding-top: 16px;
}

/* Share AsOne.Earth row — subtle gold accent so it reads as the "give us a hand"
   moment, not just another nav item. */
.ls-bb-drawer-share {
  color: #BC9F6E;
  color: var(--ls-gold);
  margin-top: 4px;
}
.ls-bb-drawer-share:hover:not(:disabled) {
  background: rgba(198, 157, 100, 0.08);
  color: #CDB58C;
  color: var(--ls-gold-light);
}
.ls-bb-drawer-share-note {
  margin: 4px 14px 8px;
  font-size: 0.78rem;
  font-style: italic;
  color: #9FAD9F;
  color: var(--ls-sage);
  letter-spacing: 0.02em;
}

.ls-bb-drawer-section {
  padding: 10px 6px 4px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
  margin-top: 6px;
}
.ls-bb-drawer-eyebrow {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin: 8px 14px 6px;
}
.ls-bb-drawer-group {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 4px;
}
.ls-bb-drawer-group:hover { background: rgba(255,255,255,0.04); color: #F5EBDD; color: var(--ls-cream); }
.ls-bb-drawer-group.is-active {
  color: #F5EBDD;
  color: var(--ls-cream);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 3px 0 0 rgba(240, 230, 210, 0.45);
  font-weight: 600;
}
.ls-bb-drawer-quick { padding-bottom: 24px; }

/* "New activity" badge on a group in My Groups (rail + both drawers).
   Small gold pill pushed to the right edge of the row. */
.ls-group-unread-badge {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #BC9F6E;
  background: var(--ls-gold, #BC9F6E);
  color: #141414;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Show the hamburger only on mobile widths, hide the "← Your reading" desktop
   label so it doesn't crowd the topbar; the drawer carries that link instead. */
@media (max-width: 720px) {
  .ls-bb-burger { display: inline-flex; }
  .ls-bb-back { display: none; }
  .ls-bb-topbar { padding: 12px 16px; }
}


/* ─────────────────────────────────────────────────────────────────────
   Journal page — editorial archive of past readings + private notes
   ───────────────────────────────────────────────────────────────────── */
.ls-journal-page {
  min-height: 100vh;
  background: #141414;
  background: var(--ls-body-bg, #141414);
  color: #F5EBDD;
  color: var(--ls-cream, #F5EBDD);
  font-family: 'Montserrat', sans-serif;
}
.ls-journal-main { max-width: 820px; margin: 0 auto; padding: 56px 24px 96px; }
.ls-journal-header { margin-bottom: 48px; text-align: center; }
.ls-journal-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold, #BC9F6E); margin: 0 0 18px;
}
.ls-journal-title {
  font-family: 'Playfair Display', serif; font-weight: 400; font-size: 2.2rem;
  line-height: 1.25; color: #F5EBDD; color: var(--ls-cream, #F5EBDD); font-style: italic; margin: 0 0 18px;
}
.ls-journal-sub {
  font-size: 0.95rem; line-height: 1.7; color: #D8CDB8; color: var(--ls-cream-soft, #D8CDB8);
  max-width: 580px; margin: 0 auto;
}
.ls-journal-loading, .ls-journal-empty, .ls-journal-err {
  text-align: center; font-style: italic; color: #D8CDB8; color: var(--ls-cream-soft, #D8CDB8); padding: 32px 0;
}
.ls-journal-err { color: #E6C2BF; }
.ls-journal-list { display: flex; flex-direction: column; gap: 18px; }
.ls-journal-card {
  background: #1A1A1A;
  background: var(--ls-panel-bg, #1c1c1c);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft, rgba(255,255,255,0.06));
  transition: border-color 0.18s ease;
}
.ls-journal-card:hover { border-color: rgba(198, 157, 100, 0.40); }
.ls-journal-card-head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; grid-gap: 18px; gap: 18px;
  padding: 22px 24px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.ls-journal-card-phase {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem;
  color: #F5EBDD;
  color: var(--ls-cream, #F5EBDD); line-height: 1.3;
}
.ls-journal-card-date {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted, #8B8578); margin-top: 4px;
}
.ls-journal-card-sub {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-cream-soft, #D8CDB8); text-align: right;
}
.ls-journal-quality { color: #CDB58C; color: var(--ls-gold-light, #E0C58E); }
.ls-journal-toggle {
  background: transparent; border: 1px solid rgba(232, 223, 206, 0.30); border: 1px solid var(--ls-border-soft, rgba(255,255,255,0.06));
  color: #D8CDB8;
  color: var(--ls-cream-soft, #D8CDB8); width: 32px; height: 32px;
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.ls-journal-toggle:hover { color: #BC9F6E; color: var(--ls-gold, #BC9F6E); border-color: #BC9F6E; border-color: var(--ls-gold, #BC9F6E); }
.ls-journal-card-body {
  padding: 4px 24px 28px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft, rgba(255,255,255,0.06));
}
.ls-journal-block { padding: 22px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.ls-journal-block:last-child { border-bottom: none; }
.ls-journal-block h3 {
  font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.15rem;
  color: #CDB58C;
  color: var(--ls-gold-light, #E0C58E); margin: 0 0 14px; letter-spacing: 0.01em;
}
.ls-journal-prose p, .ls-journal-block p {
  font-size: 0.95rem; line-height: 1.78; color: #D8CDB8; color: var(--ls-cream-soft, #D8CDB8); margin: 0 0 12px;
}
.ls-journal-block p strong { color: #F5EBDD; color: var(--ls-cream, #F5EBDD); letter-spacing: 0.06em; }

.ls-journal-notes {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(198, 157, 100, 0.38);
}
.ls-journal-notes-eyebrow {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold, #BC9F6E); margin-bottom: 10px;
}
.ls-journal-notes-caption {
  font-size: 0.82rem; line-height: 1.5; color: #D8CDB8; color: var(--ls-muted, #8B8578);
  font-family: 'Montserrat', sans-serif; margin: 0 0 12px;
}
.ls-journal-notes-input {
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft, rgba(255,255,255,0.06));
  color: #F5EBDD;
  color: var(--ls-cream, #F5EBDD); padding: 14px 16px;
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 1rem; line-height: 1.7; resize: vertical;
  transition: border-color 0.18s ease;
}
.ls-journal-notes-input:focus { outline: none; border-color: rgba(198, 157, 100, 0.5); }
.ls-journal-notes-input::placeholder {
  font-style: italic; color: #D8CDB8; color: var(--ls-muted, #8B8578);
  font-family: 'Playfair Display', serif;
}
.ls-journal-notes-status {
  margin-top: 6px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #D8CDB8;
  color: var(--ls-muted, #8B8578); text-align: right;
  font-style: normal; font-family: 'Montserrat', sans-serif;
}

@media (max-width: 720px) {
  .ls-journal-main { padding: 36px 16px 64px; }
  .ls-journal-title { font-size: 1.7rem; }
  .ls-journal-card-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  .ls-journal-card-sub { grid-column: 1 / -1; text-align: left; }
  .ls-journal-card-body { padding: 4px 18px 24px; }
}


/* ──────────────────────────────────────────────────────────────────


/* ──────────────────────────────────────────────────────────────────
   /interpret — Phase 2 (full rebuild faithful to Claude's prototype
   structure with AsOne.Earth branding applied).
   ────────────────────────────────────────────────────────────────── */
.ls-interpret-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #141414;
  background: var(--ls-body-bg);
  color: #FFFFFF;
  color: var(--ls-text-main);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

/* ── Empty state: no stored reading yet ── */
.ls-interpret-empty {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 28px 120px;
  max-width: 640px;
  margin: 0 auto;
  min-height: calc(100vh - 76px);
}
.ls-interpret-empty-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  margin: 0 0 22px 0;
}
.ls-interpret-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.18;
  color: #FFFFFF;
  color: var(--ls-text-main);
  margin: 0 0 22px 0;
  font-weight: 400;
}
.ls-interpret-empty-title em {
  color: #E8B8C0;
  font-style: italic;
}
.ls-interpret-empty-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #D8CDB8;
  color: var(--ls-text-cream, #D8CDB8);
  max-width: 460px;
  margin: 0 0 38px 0;
}
.ls-interpret-empty-cta {
  background: #9FAD9F;
  color: #1a2a1a;
  border: none;
  padding: 16px 36px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ls-interpret-empty-cta:hover {
  background: #B0BFB0;
  transform: translateY(-1px);
}


/* ── Top bar ── */
.ls-interpret-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 40px 22px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
}
.ls-interpret-wordmark {
  flex: 1 1;
  min-width: 0;
}
.ls-interpret-wordmark-true,
.ls-interpret-wordmark-13 {
  font-family: 'Playfair Display', serif;
  font-size: 1.95rem;
  font-weight: 400;
  color: #FFFFFF;
  color: var(--ls-text-main);
  line-height: 1.15;
}
.ls-interpret-wordmark-13 {
  color: #E6C2BF;
  color: var(--ls-blush);
  font-style: italic;
}
.ls-interpret-wordmark-sub {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-interpret-topright {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  padding-top: 16px;
  white-space: nowrap;
}

/* ── Tabs ── */
.ls-interpret-tabs {
  display: flex;
  gap: 0;
  padding: 0 40px;
  border-bottom: 1px solid rgba(232, 223, 206, 0.30);
  border-bottom: 1px solid var(--ls-border-soft);
  overflow-x: auto;
}
.ls-interpret-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 18px 0;
  margin-right: 36px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ls-interpret-tab em {
  font-style: italic;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-interpret-tab:hover { color: #FFFFFF; color: var(--ls-text-main); }
.ls-interpret-tab:hover em { color: #E6C2BF; color: var(--ls-blush); }
.ls-interpret-tab.is-active {
  color: #FFFFFF;
  color: var(--ls-text-main);
  border-bottom-color: #BC9F6E;
  border-bottom-color: var(--ls-gold);
}
.ls-interpret-tab.is-active em { color: #E6C2BF; color: var(--ls-blush); }

/* ── Body (sidebar + main) ── */
.ls-interpret-body {
  flex: 1 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-gap: 0;
  gap: 0;
  align-items: flex-start;
}

/* ── Sidebar (chart legend) ── */
.ls-interpret-legend {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: stretch;
  padding: 32px 24px 32px 40px;
  border-right: 1px solid rgba(232, 223, 206, 0.30);
  border-right: 1px solid var(--ls-border-soft);
  max-height: calc(100vh - 0px);
  overflow-y: auto;
}
.ls-interpret-legend-empty {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-style: italic;
  margin: 0;
}
.ls-interpret-legend-section { margin-bottom: 28px; }
.ls-interpret-legend-heading {
  margin: 0 0 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  font-weight: 500;
}
.ls-interpret-legend-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}
.ls-interpret-legend-item:hover:not(:disabled) { background: rgba(198, 157, 100, 0.04); }
.ls-interpret-legend-item:disabled { opacity: 0.6; cursor: not-allowed; }
.ls-interpret-legend-planet {
  font-family: 'Playfair Display', serif;
  font-size: 0.98rem;
  color: #FFFFFF;
  color: var(--ls-text-main);
}
.ls-interpret-legend-sign {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #E6C2BF;
  color: var(--ls-blush);
  font-style: italic;
}

/* ── Main pane ── */
.ls-interpret-main {
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 60vh;
}

/* ── Suggestions block ── */
.ls-interpret-suggestions { display: flex; flex-direction: column; gap: 22px; }
.ls-interpret-suggestions-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  color: var(--ls-text-main);
  line-height: 1.3;
}
.ls-interpret-suggestions-title em {
  color: #E6C2BF;
  color: var(--ls-blush);
  font-style: italic;
}
.ls-interpret-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ls-interpret-cat {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  color: #F5EBDD;
  color: var(--ls-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.ls-interpret-cat:hover { border-color: #BC9F6E; border-color: var(--ls-gold); color: #FFFFFF; color: var(--ls-text-main); }
.ls-interpret-cat.is-active {
  background: rgba(198, 157, 100, 0.10);
  border-color: #BC9F6E;
  border-color: var(--ls-gold);
  color: #FFFFFF;
  color: var(--ls-text-main);
}

.ls-interpret-cat-panel {
  padding: 22px 24px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 6px;
}
.ls-interpret-cat-panel-heading {
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
}
.ls-interpret-prompts { display: flex; flex-direction: column; gap: 8px; }
.ls-interpret-prompt {
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  border-radius: 4px;
  color: #FFFFFF;
  color: var(--ls-text-main);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ls-interpret-prompt:hover:not(:disabled) {
  border-color: #9FAD9F;
  border-color: var(--ls-sage);
  background: rgba(159, 173, 159, 0.06);
}
.ls-interpret-prompt:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Chat messages ── */
.ls-interpret-chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.ls-interpret-msg {
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.75;
  max-width: 88%;
  white-space: pre-wrap;
}
.ls-interpret-msg.is-user {
  align-self: flex-end;
  background: rgba(159, 173, 159, 0.10);
  border: 1px solid rgba(159, 173, 159, 0.22);
  color: #FFFFFF;
  color: var(--ls-text-main);
}
.ls-interpret-msg.is-assistant {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(232, 223, 206, 0.30);
  border: 1px solid var(--ls-border-soft);
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-interpret-typing { letter-spacing: 4px; color: #BC9F6E; color: var(--ls-gold); }

/* ── Composer ── */
.ls-interpret-input-area {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
}
.ls-interpret-input {
  flex: 1 1;
  resize: none;
  padding: 14px 16px;
  background: #161616;
  background: var(--ls-card-bg);
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  border-radius: 4px;
  color: #FFFFFF;
  color: var(--ls-text-main);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.96rem;
  line-height: 1.55;
  min-height: 48px;
  max-height: 160px;
}
.ls-interpret-input:focus { outline: none; border-color: #BC9F6E; border-color: var(--ls-gold); }
.ls-interpret-send {
  padding: 14px 26px;
  background: #9FAD9F;
  background: var(--ls-sage);
  border: none;
  border-radius: 4px;
  color: #1a1a1a;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ls-interpret-send:hover:not(:disabled) { background: #B8C4B8; background: var(--ls-sage-soft); }
.ls-interpret-send:disabled {
  background: #9FAD9F;
  background: var(--ls-sage);
  color: rgba(26, 26, 26, 0.45);
  opacity: 0.85;
  cursor: not-allowed;
}

.ls-interpret-close-row { display: flex; justify-content: flex-end; }
.ls-interpret-close-btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid #9FAD9F;
  border: 1px solid var(--ls-sage);
  border-radius: 4px;
  color: #B8C4B8;
  color: var(--ls-sage-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.ls-interpret-close-btn:hover:not(:disabled) { background: rgba(159, 173, 159, 0.08); color: #FFFFFF; color: var(--ls-text-main); }
.ls-interpret-close-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Coming soon (Tabs 2 & 3 placeholders) ── */
.ls-interpret-coming-soon { padding: 64px 12px; display: flex; flex-direction: column; gap: 14px; }
.ls-interpret-soon-eyebrow {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
}
.ls-interpret-soon-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 2rem;
  color: #FFFFFF;
  color: var(--ls-text-main);
}
.ls-interpret-soon-title em { color: #E6C2BF; color: var(--ls-blush); font-style: italic; }
.ls-interpret-soon-body { margin: 0; font-size: 1rem; line-height: 1.7; color: #F5EBDD; color: var(--ls-cream); max-width: 600px; }

/* ── Disclaimer ── */
.ls-interpret-disclaimer {
  padding: 22px 40px 28px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  font-style: italic;
  border-top: 1px solid rgba(232, 223, 206, 0.30);
  border-top: 1px solid var(--ls-border-soft);
}
.ls-interpret-disclaimer a { color: #9FAD9F; color: var(--ls-sage); font-style: normal; }
.ls-interpret-disclaimer a:hover { color: #B8C4B8; color: var(--ls-sage-soft); }

/* Tab label visibility — desktop sees full label, mobile sees short. */
.ls-tab-desktop-label { display: inline; }
.ls-tab-mobile-label { display: none; }

/* Mobile drawer toggles + hint banner — DESKTOP HIDDEN, mobile only */
.ls-interpret-hint,
.ls-interpret-drawer-toggle { display: none; }

/* On desktop the suggestions block always shows; mobile uses the drawer. */

/* ── Mobile (≤ 900px): chat-first design with 3 collapsibles ──────── */
@media (max-width: 900px) {
  /* TOP BAR — slim, single-purpose. Wordmark only (tagline killed on
     mobile per Lisa, saves ~80px of vertical space). FULL CHART label
     also moves into the chart drawer. */
  .ls-interpret-topbar {
    padding: 20px 20px 14px;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(232, 223, 206, 0.30);
    border-bottom: 1px solid var(--ls-border-soft);
  }
  .ls-interpret-wordmark-true,
  .ls-interpret-wordmark-13 { font-size: 1.7rem; line-height: 1.15; }
  .ls-interpret-wordmark-13 {
    color: #E6C2BF;
    color: var(--ls-blush);
    font-weight: 400;
    font-style: italic;
  }
  .ls-interpret-wordmark-sub { display: none; }  /* tagline hidden on mobile */
  .ls-interpret-topright { display: none; }       /* moved to chart drawer */

  /* TABS — short labels, distributed evenly so all 3 fit at 390px */
  .ls-tab-desktop-label { display: none; }
  .ls-tab-mobile-label { display: inline; }
  .ls-interpret-tabs {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: visible;
  }
  .ls-interpret-tab {
    font-size: 0.95rem;
    margin: 0;
    padding: 14px 8px;
    text-align: center;
  }
  .ls-interpret-tab.is-active {
    border-bottom-color: #BC9F6E;
    border-bottom-color: var(--ls-gold);
  }

  /* BODY — single column, padded to clear the sticky composer */
  .ls-interpret-body { grid-template-columns: 1fr; padding-bottom: 196px; }

  /* HINT BANNER — blush, friendly instruction */
  .ls-interpret-hint {
    display: block;
    margin: 16px 20px 4px;
    padding: 12px 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #F5EBDD;
    color: var(--ls-cream);
    background: rgba(230, 194, 191, 0.06);
    border-left: 2px solid #E6C2BF;
    border-left: 2px solid var(--ls-blush);
    border-radius: 0 4px 4px 0;
  }
  .ls-interpret-hint em { color: #E6C2BF; color: var(--ls-blush); font-style: italic; font-weight: 400; }

  /* DRAWER TOGGLES — clean, full-width, taps to open */
  .ls-interpret-drawer-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 40px);
    margin: 8px 20px 0;
    padding: 14px 16px;
    background: #1A1A1A;
    background: var(--ls-panel-bg);
    border: 1px solid rgba(232, 223, 206, 0.30);
    border: 1px solid var(--ls-border-soft);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #FFFFFF;
    color: var(--ls-text-main);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease;
  }
  .ls-interpret-drawer-toggle.is-open {
    border-color: #BC9F6E;
    border-color: var(--ls-gold);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }
  .ls-interpret-drawer-caret { color: #BC9F6E; color: var(--ls-gold); width: 14px; }
  .ls-interpret-drawer-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: #E6C2BF;
    color: var(--ls-blush);
    font-style: italic;
  }

  /* LEGEND — hidden by default, opens via drawer toggle */
  .ls-interpret-legend {
    display: none;
    position: static;
    max-height: none;
    padding: 18px 20px 22px;
    margin: 0 20px;
    border: 1px solid #BC9F6E;
    border: 1px solid var(--ls-gold);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #1A1A1A;
    background: var(--ls-panel-bg);
  }
  .ls-interpret-legend.is-mobile-open { display: block; }
  .ls-interpret-legend-section { margin-bottom: 18px; }
  .ls-interpret-legend-section:last-child { margin-bottom: 0; }
  .ls-interpret-legend-heading {
    margin: 0 0 10px;
    font-size: 0.62rem;
    color: #E6C2BF;
    color: var(--ls-blush);
  }
  .ls-interpret-legend-planet { font-size: 1.04rem; }
  .ls-interpret-legend-sign { font-size: 0.9rem; }
  .ls-interpret-legend-item { padding: 9px 0; }

  /* SUGGESTIONS BLOCK — hidden by default, opens via drawer */
  .ls-interpret-suggestions {
    display: none;
    margin: 0 20px;
    padding: 18px 16px;
    border: 1px solid #BC9F6E;
    border: 1px solid var(--ls-gold);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #1A1A1A;
    background: var(--ls-panel-bg);
  }
  .ls-interpret-suggestions.is-mobile-open { display: flex; flex-direction: column; gap: 16px; }
  .ls-interpret-suggestions-title {
    font-size: 1.05rem;
    line-height: 1.4;
  }
  .ls-interpret-cat { font-size: 0.85rem; padding: 9px 14px; }
  .ls-interpret-cat-panel { padding: 14px; background: #161616; background: var(--ls-card-bg); }
  .ls-interpret-prompt { font-size: 0.98rem; line-height: 1.55; padding: 12px 14px; }

  /* PAST SESSIONS LIST */
  .ls-interpret-sessions-list {
    list-style: none;
    margin: 0 20px;
    padding: 14px 16px;
    border: 1px solid #BC9F6E;
    border: 1px solid var(--ls-gold);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #1A1A1A;
    background: var(--ls-panel-bg);
  }
  .ls-interpret-session-item {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(232, 223, 206, 0.30);
    border-bottom: 1px dashed var(--ls-border-soft);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .ls-interpret-session-item:last-child { border-bottom: none; }
  .ls-interpret-session-title { font-family: 'Playfair Display', serif; font-size: 1rem; color: #FFFFFF; color: var(--ls-text-main); }
  .ls-interpret-session-meta { font-size: 0.72rem; color: #D8CDB8; color: var(--ls-cream-soft); letter-spacing: 0.04em; }

  /* MAIN PANE — chat is the hero */
  .ls-interpret-main { padding: 8px 20px 24px; gap: 16px; }
  .ls-interpret-msg { font-size: 1.04rem; max-width: 96%; padding: 14px 16px; line-height: 1.7; }

  /* COMPOSER — full-width textarea on top, centred Send button below.
     Lisa's spec: "chat bubble should cover the width of the screen
     with the send button centred underneath". */
  .ls-interpret-input-area {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #141414;
    background: var(--ls-body-bg);
    padding: 12px 20px 18px;
    border-top: 1px solid rgba(232, 223, 206, 0.30);
    border-top: 1px solid var(--ls-border-soft);
    z-index: 10;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    display: flex;
  }
  .ls-interpret-input {
    width: 100%;
    font-size: 1.04rem;
    padding: 14px;
    min-height: 76px;
    line-height: 1.5;
  }
  .ls-interpret-send {
    align-self: center;
    min-width: 200px;
    padding: 13px 32px;
    font-size: 0.78rem;
  }

  /* DISCLAIMER — scrollable above sticky composer */
  .ls-interpret-disclaimer {
    padding: 18px 20px 24px;
    margin-bottom: 180px;
    font-size: 0.86rem;
    line-height: 1.7;
  }

  /* COMING-SOON STUBS */
  .ls-interpret-soon-title { font-size: 1.6rem; }
  .ls-interpret-soon-body { font-size: 1.02rem; }
}

/* ── Tab 2 (Phase) + Tab 3 (Goals) mockup styles ───────────────────── */
.ls-tab-phase,
.ls-tab-goals { display: flex; flex-direction: column; gap: 10px; }
.ls-phase-eyebrow {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #BC9F6E;
  color: var(--ls-gold);
  font-weight: 500;
}
.ls-phase-title {
  margin: 4px 0 2px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.1;
  color: #FFFFFF;
  color: var(--ls-text-main);
}
.ls-phase-sub {
  margin: 0 0 8px;
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  font-size: 1.1rem;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-phase-sub em { color: #E6C2BF; color: var(--ls-blush); font-style: italic; }
.ls-hint-tab { margin: 14px 0 8px; }
.ls-phase-block {
  margin: 0 0 8px;
  padding: 16px 18px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border: 1px solid #BC9F6E;
  border: 1px solid var(--ls-gold);
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-size: 1rem;
  line-height: 1.7;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-phase-block p { margin: 0; }
.ls-goals-divider {
  height: 1px;
  background: rgba(232, 223, 206, 0.30);
  background: var(--ls-border-soft);
  margin: 14px 0;
}
.ls-goals-intention {
  margin: 6px 0 12px;
  padding: 18px 20px;
  background: #1A1A1A;
  background: var(--ls-panel-bg);
  border-left: 3px solid #E6C2BF;
  border-left: 3px solid var(--ls-blush);
  border-radius: 0 4px 4px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: #FFFFFF;
  color: var(--ls-text-main);
}
.ls-goals-edit {
  align-self: flex-start;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid #9FAD9F;
  border: 1px solid var(--ls-sage);
  border-radius: 4px;
  color: #B8C4B8;
  color: var(--ls-sage-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.ls-goals-edit:hover { background: rgba(159, 173, 159, 0.08); color: #FFFFFF; color: var(--ls-text-main); }

@media (max-width: 900px) {
  .ls-tab-phase, .ls-tab-goals { margin: 0; padding: 0 20px 96px; }
  .ls-phase-title { font-size: 1.6rem; }
  .ls-phase-sub { font-size: 1rem; }
  .ls-tab-phase .ls-interpret-drawer-toggle,
  .ls-tab-goals .ls-interpret-drawer-toggle { width: 100%; margin: 6px 0 0; }
  .ls-tab-phase .ls-phase-block,
  .ls-tab-goals .ls-phase-block { margin: 0; }
  .ls-tab-goals { padding-bottom: 32px; }
  .ls-goals-intention { font-size: 1.05rem; padding: 14px 16px; }
}

/* Goals tab — intention empty state (user-written, never pre-generated). */
.ls-goals-intention-prompt {
  margin: 6px 0 12px;
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #F5EBDD;
  color: var(--ls-cream);
}
.ls-goals-intention-prompt em { color: #E6C2BF; color: var(--ls-blush); font-style: italic; font-weight: 400; }
.ls-goals-intention-input {
  width: 100%;
  min-height: 90px;
  margin-bottom: 12px;
}
.ls-goals-set-btn {
  align-self: center;
  min-width: 200px;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.ls-goals-note-row { padding: 12px 0; border-bottom: 1px dashed rgba(232, 223, 206, 0.30); border-bottom: 1px dashed var(--ls-border-soft); }
.ls-goals-note-row:last-child { border-bottom: none; }
.ls-goals-note-date {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #D8CDB8;
  color: var(--ls-cream-soft);
  margin-bottom: 4px;
}
.ls-goals-note-text { margin: 0; font-size: 0.96rem; line-height: 1.6; color: #F5EBDD; color: var(--ls-cream); white-space: pre-wrap; }


/* ── MOBILE READABILITY PASS (Lisa Feb 10 2026) ────────────────────────
   Global mobile uplift across Community, Account, Auth surfaces.
   Goal: minimal elegance, simplicity, MUCH bigger text on phones.
   Edge-to-edge cards. Readability is the primary consideration. */
@media (max-width: 720px) {
  /* ── Community ───────────────────────────────────────────────────
     Push the main feed surface flush to the screen edges. Cards keep
     their own internal padding so prose still has breathing room. */
  .ls-bb-main {
    padding: 16px 0 24px;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .ls-bb-post {
    padding: 22px 18px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0 0 14px;
  }
  .ls-bb-post.is-host-post {
    /* No gold rail on mobile — edge-to-edge card keeps the calm cream frame */
    border-left: none;
  }
  .ls-bb-page-title { font-size: 1.7rem; }
  .ls-bb-page-title-count { font-size: 1.2rem; }
  .ls-bb-page-title[data-testid="bb-groups-title"] { font-size: 1.25rem; }
  .ls-post-body {
    /* The whole point of community on mobile: bigger, calmer prose.
       Stays >= 1.08rem but grows when the member picks a larger size. */
    font-size: max(1.08rem, 0.94rem);
    font-size: max(1.08rem, var(--ls-read-body));
    line-height: 1.72;
  }
  /* Comments match post body exactly — one uniform body size across the feed. */
  .ls-c-body {
    font-size: max(1.08rem, 0.94rem);
    font-size: max(1.08rem, var(--ls-read-body));
    line-height: 1.72;
  }
  /* The "@name" mention matches the comment-name label size (0.95rem), not the
     larger body text — only the mention span is affected, body stays untouched. */
  .ls-c-mention { font-size: 0.95rem; }
  .ls-bb-post-author-row { gap: 10px; }
  .ls-bb-post-author-row .ls-bb-post-author { font-size: 1rem; }
  .ls-bb-post-author-row .ls-bb-post-time { font-size: 0.82rem; }
  /* Group cards (Circle / Office Hours): contained cards with a small,
     even border on all sides + a gentle side inset, so the light banners
     sit inside a clean frame (no stray grey top/bottom hairline). */
  .ls-bb-groups-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 14px;
  }
  .ls-bb-group-card {
    border: 1px solid rgba(232, 223, 206, 0.30);
    border: 1px solid var(--ls-border-soft);
    border-radius: 14px;
  }
  /* Group detail page: one shared 14px side inset so the hero banner, the
     composer box and the post "speech bubbles" all line up to the same width
     as the banner. */
  .ls-bb-group-page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ls-bb-group-banner.is-large {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 2.3 / 1;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* Restore the contained-bubble look for posts inside a group (the news-feed
     rule strips side borders for edge-to-edge; here they sit at banner width). */
  .ls-bb-group-page .ls-bb-post {
    border: 1px solid rgba(245, 235, 221, 0.45);
    border-radius: 14px;
  }
  .ls-bb-group-page .ls-bb-post.is-host-post {
    border: 1px solid rgba(245, 235, 221, 0.20);
  }
  /* Tighten the gap between the banner and the FEED/PHOTOS/VIDEOS tabs. */
  .ls-bb-group-banner.is-large + .ls-bb-group-tabs { margin-top: 16px; }
  .ls-bb-group-card-name { font-size: 1.25rem; }
  .ls-bb-group-card-meta { font-size: 0.85rem; }
  .ls-bb-group-card-members-count { font-size: 0.92rem; }
  /* "Groups (2)" page title — give it the page-edge inset so it doesn't
     run into the screen border */
  .ls-bb-main > h1.ls-bb-page-title,
  .ls-bb-main > .ls-bb-main-head {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ── Account ─────────────────────────────────────────────────────
     Wrap goes truly edge-to-edge (was 16px inset). Internal sections
     own their own padding. */
  .ls-account-wrap {
    padding: 36px 0 64px;
  }
  .ls-account-wrap > .ls-eyebrow,
  .ls-account-wrap > .ls-h1,
  .ls-account-wrap > .ls-account-new-reading,
  .ls-account-wrap > p { padding-left: 18px; padding-right: 18px; }
  .ls-account-wrap > section,
  .ls-account-wrap > .ls-account-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 18px;
    padding-right: 18px;
  }
  .ls-eyebrow { font-size: 11.5px; letter-spacing: 0.36em; }
  .ls-h1 { font-size: 2.2rem; line-height: 1.18; }
  .ls-sub { font-size: 1.12rem; line-height: 1.75; }

  /* ── Auth card (login / magic-link landing) ─────────────────────── */
  .ls-auth-card { padding: 36px 22px; }
  .ls-auth-card .ls-h1 { font-size: 2.05rem; }
}

/* ── Account → Liora & privacy: preference row + on/off toggle ── */
.ls-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ls-pref-title { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: #F5EBDD; color: var(--ls-cream); font-weight: 600; }
.ls-switch {
  position: relative;
  width: 48px;
  height: 27px;
  border-radius: 999px;
  border: 1px solid rgba(232, 223, 206, 0.42);
  border: 1px solid var(--ls-border);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ls-switch:disabled { opacity: 0.6; cursor: default; }
.ls-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #D8CDB8;
  background: var(--ls-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ls-switch.is-on { background: #9FAD9F; background: var(--ls-sage); border-color: #9FAD9F; border-color: var(--ls-sage); }
.ls-switch.is-on .ls-switch-knob { transform: translateX(21px); background: #15211a; }
.ls-pref-off-note { color: #D8CDB8; color: var(--ls-muted); font-style: italic; margin-top: 4px; }

/* Subtle ownership mark, now inline at the end of the wordmark itself
   (right after "Lunar Sanctuary") instead of on its own row below. */
.ls-app-eyebrow-text .ls-copyright-symbol {
  font-size: 0.62rem;
  margin-left: 3px;
  color: #D8CDB8;
  color: var(--ls-muted, #9a9a97);
  opacity: 0.7;
  vertical-align: super;
}