*, ::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.17 | 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 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     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::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

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;
}

body {
  font-family: Nunito, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: Fredoka, ui-rounded, system-ui, sans-serif;
}

.sh {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background-color: var(--sh-bg);
  color: var(--sh-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sh h1, .sh h2, .sh h3, .sh h4 {
  font-family: Fraunces, Georgia, serif;
  color: var(--sh-text-1);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.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;
  }
}

/* ─── Pressable — tactile press feel ───────────────────── */

.pressable {
  transition: transform 100ms;
}

.pressable:active {
  transform: scale(0.96);
}

/* ─── Status chips (legacy Board & Reward) ─────────────── */

/* hex values taken directly from tailwind.config.js and Tailwind defaults */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ink-100 / ink-600 */

/* ─── Card treatments (legacy Board & Reward) ──────────── */

/* ─── Coin badge (legacy) ──────────────────────────────── */

/* ─── Buttons (legacy Board & Reward) ─────────────────── */

.btn,
  .btn-primary,
  .btn-quest,
  .btn-duty,
  .btn-ghost,
  .btn-danger {
  transition: transform 100ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0.75rem;
  /* rounded-xl */
  padding: 8px 16px;
  font-family: Fredoka, ui-rounded, system-ui, sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.btn:active,
  .btn-primary:active,
  .btn-quest:active,
  .btn-duty:active,
  .btn-ghost:active,
  .btn-danger:active {
  transform: scale(0.96);
}

.btn-primary {
  background-color: #363e4d;
  color: #ffffff;
}

/* ink-800 */

.btn-primary:hover {
  background-color: #3e495b;
}

/* ink-700 */

/* quest-500 */

/* quest-600 */

/* duty-500 */

/* duty-600 */

/* ink-50 */

/* rose-600 */

/* rose-700 */

/* ─── Buttons ──────────────────────────────────────────── */

.sh-btn,
  .sh-btn-primary,
  .sh-btn-secondary,
  .sh-btn-brass,
  .sh-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  /* a comfortable touch target on phones and tablets */
  padding: 8px 16px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--sh-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms, color 150ms, border-color 150ms, opacity 150ms, transform 100ms;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sh-btn:active,
  .sh-btn-primary:active,
  .sh-btn-secondary:active,
  .sh-btn-brass:active,
  .sh-btn-danger:active {
  transform: scale(0.97);
}

.sh-btn:disabled,
  .sh-btn-primary:disabled,
  .sh-btn-secondary:disabled,
  .sh-btn-brass:disabled,
  .sh-btn-danger:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  pointer-events: none;
}

.sh-btn-primary {
  background: var(--sh-primary);
  color: var(--sh-primary-fg);
}

.sh-btn-primary:hover {
  background: var(--sh-primary-hi);
}

.sh-btn-secondary {
  background: var(--sh-surface);
  color: var(--sh-text-1);
  border-color: var(--sh-border-2);
}

.sh-btn-secondary:hover {
  background: var(--sh-surface-2);
  border-color: var(--sh-text-3);
}

.sh-btn-brass {
  background: var(--sh-brass);
  color: var(--sh-brass-fg);
  border-color: transparent;
}

.sh-btn-brass:hover {
  background: var(--sh-brass-hi);
  color: #FFFFFF;
}

.sh-btn-danger {
  background: var(--color-danger);
  color: var(--color-danger-fg);
}

.sh-btn-danger:hover {
  opacity: 0.88;
}

/* ─── Card ─────────────────────────────────────────────── */

.sh-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  /* Flat, confident: no shadows. Border + bg contrast does the work. */
}

/* ─── Status chips ─────────────────────────────────────── */

.sh-chip,
  .sh-chip-pending,
  .sh-chip-approved,
  .sh-chip-done,
  .sh-chip-rejected,
  .sh-chip-waiting,
  .sh-chip-neutral {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* pending — brass: "we're waiting on you" */

.sh-chip-pending  {
  background: var(--sh-brass-bg);
  color: var(--sh-brass-hi);
  border-color: var(--sh-brass-2);
}

/* approved — sage: done, confirmed */

.sh-chip-approved,
  .sh-chip-done     {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: rgba(61,107,79,.20);
}

/* rejected — brick red: definitive no */

.sh-chip-rejected {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: rgba(184,58,49,.20);
}

/* waiting — blush: submitted, watching */

.sh-chip-waiting  {
  background: var(--sh-blush-bg);
  color: var(--sh-blush);
  border-color: var(--sh-blush-2);
}

/* neutral — muted */

.sh-chip-neutral  {
  background: var(--sh-surface-2);
  color: var(--sh-text-2);
  border-color: var(--sh-border);
}

/* Aliases for model status values */

.sh-chip-skipped   {
  background: var(--sh-surface-2);
  color: var(--sh-text-2);
  border-color: var(--sh-border);
}

/* ─── Coin badge ───────────────────────────────────────── */

.sh-coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: 100px;
  background: var(--sh-brass);
  color: var(--sh-brass-fg);
  font-family: Fraunces, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sh-coin-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Duty card ────────────────────────────────────────── */

/* Calm, grounded: muted plum border-left, standard surface */

.sh-duty-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-left: 3px solid var(--color-plum-400);
  border-radius: var(--sh-radius-lg);
  padding: 16px;
}

/* ─── Quest card ───────────────────────────────────────── */

/* Energetic: brass border-left + warm tint — immediately distinct from duty */

.sh-quest-card {
  background: var(--sh-brass-bg);
  border: 1px solid var(--sh-brass-2);
  border-left: 3px solid var(--sh-brass);
  border-radius: var(--sh-radius-lg);
  padding: 16px;
  position: relative;
}

/* ─── Empty state ──────────────────────────────────────── */

.sh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--sh-text-2);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.sh-empty-headline {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sh-text-1);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.sh-empty-body {
  font-size: 0.875rem;
  color: var(--sh-text-2);
  margin-bottom: 24px;
  max-width: 280px;
  line-height: 1.6;
}

/* ─── Nav ──────────────────────────────────────────────── */

.sh-nav {
  background: var(--sh-primary);
  border-bottom: 1px solid rgba(0,0,0,.12);
  position: sticky;
  top: 0;
  z-index: 40;
}

.sh-nav-inner {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 12px;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 16px;
}

.sh-nav-wordmark {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  opacity: 0.95;
}

.sh-nav-wordmark:hover {
  opacity: 1;
}

.sh-nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

.sh-nav-app-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  white-space: nowrap;
}

.sh-nav-app-label:hover {
  color: #FFFFFF;
}

.sh-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sh-nav-link {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--sh-radius-sm);
  transition: color 150ms, background 150ms;
  white-space: nowrap;
}

.sh-nav-link:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,.10);
}

.sh-nav-link.active {
  color: #FFFFFF;
  background: rgba(255,255,255,.15);
}

.sh-nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sh-role-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.sh-theme-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--sh-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.70);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
}

.sh-theme-btn:hover {
  background: rgba(255,255,255,.18);
  color: #FFFFFF;
}

/* ─── Bottom tab bar (mobile, all apps) ───────────────── */

.sh-btab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--sh-radius-md);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--sh-text-3);
  transition: color 150ms, background 150ms;
}

.sh-btab.active {
  color: var(--sh-primary);
  background: var(--sh-primary-bg);
}

.sh-btab:hover:not(.active) {
  color: var(--sh-text-2);
}

/* ─── Form controls ────────────────────────────────────── */

.sh-form-select,
  .sh-form-input {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-md);
  min-height: 44px;
  padding: 6px 10px;
  background: var(--sh-surface);
  color: var(--sh-text-1);
  outline: none;
  transition: border-color 150ms;
}

.sh-form-select:focus,
  .sh-form-input:focus {
  border-color: var(--sh-primary);
}

.sh-form-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--sh-primary);
}

.sh-form-checkbox:focus-visible {
  outline: 2px solid var(--sh-primary);
  outline-offset: 2px;
}

/* ─── Shared HTMX fade-in ──────────────────────────────── */

@keyframes sh-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to   {
    opacity: 1;
    transform: translateY(0);
  }
}

.sh .htmx-added {
  animation: sh-in 180ms ease forwards;
}

.sh .htmx-indicator {
  opacity: 0;
  transition: opacity 200ms;
}

.sh .htmx-request .htmx-indicator,
  .sh .htmx-request.htmx-indicator {
  opacity: 1;
}

/* S: tick springs in and the card settles; untick springs back */

.sh-settle {
  animation: sh-settle 300ms cubic-bezier(.34,1.56,.64,1) both;
}

.sh-spring-back {
  animation: sh-spring-back 260ms ease-out both;
}

/* S: a quest sent back returns quietly, with its note */

.sh-card-return {
  animation: sh-slide-in 320ms ease-out both;
}

/* M: accepting a quest flips its card, and a stamp lands on it */

.sh-card-flip {
  animation: sh-flip-in 480ms cubic-bezier(.2,.8,.2,1) both;
  transform-origin: 50% 0;
}

.sh-stamp-wrap {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sh-stamp {
  border: 4px solid var(--color-success);
  color: var(--color-success);
  border-radius: 12px;
  padding: 6px 22px;
  font: 700 2.4rem/1.1 Fraunces, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--sh-surface) 80%, transparent);
  animation: sh-stamp 1900ms cubic-bezier(.2,.8,.2,1) 250ms both;
}

/* M: handing a quest in presses a wax seal */

.sh-seal {
  margin-top: 1.25rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  font: 700 .95rem/1.1 Fraunces, Georgia, serif;
  text-align: center;
  border: 4px double rgba(255,255,255,.55);
  animation: sh-seal 700ms cubic-bezier(.2,.9,.3,1.3) 350ms both;
}

/* M: the quest board is a pinned parchment */

.sh-board {
  background: linear-gradient(180deg, #F6EEDC, #EFE3C8);
  border: 1px solid var(--sh-brass-2);
  border-radius: var(--sh-radius-xl);
  padding: 16px;
  position: relative;
}

.sh-board-card {
  background: #FFFDF6;
  border-color: var(--sh-brass-2);
}

.sh-board-card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--sh-blush);
  border: 2px solid rgba(34,24,43,.25);
}

.sh-board h2, .sh-board .text-brass-600, .sh-board .text-brass-800 {
  color: #503D16;
}

[data-theme="dark"] .sh-board {
  background: linear-gradient(180deg, #3A2C3F, #33263A);
  border-color: var(--sh-border-2);
}

[data-theme="dark"] .sh-board-card {
  background: var(--sh-surface);
}

[data-theme="dark"] .sh-board h2, [data-theme="dark"] .sh-board .text-brass-600 {
  color: var(--sh-brass);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-board {
    background: linear-gradient(180deg, #3A2C3F, #33263A);
    border-color: var(--sh-border-2);
  }

  :root:not([data-theme="light"]) .sh-board-card {
    background: var(--sh-surface);
  }

  :root:not([data-theme="light"]) .sh-board h2, :root:not([data-theme="light"]) .sh-board .text-brass-600 {
    color: var(--sh-brass);
  }
}

/* M: the savings bar fills with a shimmer; an affordable goal glows and bounces (flat ring, no shadows) */

.sh-shimmer {
  position: relative;
  overflow: hidden;
}

.sh-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sh-shimmer 1100ms ease-out 700ms 1 both;
}

.sh-goal-ready {
  animation: sh-ready 1100ms ease-in-out 600ms 3 both;
  border-color: var(--sh-brass);
}

/* The mute switch on the Me tab */

.sh-switch {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--sh-border-2);
  transition: background 150ms;
}

.sh-switch[aria-checked="true"] {
  background: var(--color-success);
}

.sh-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.9rem - 6px);
  height: calc(1.9rem - 6px);
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms;
}

.sh-switch[aria-checked="true"] .sh-switch-knob {
  transform: translateX(1.35rem);
}

/* L: full-screen celebrations */

.sh-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,24,43,.82);
  animation: sh-fade 200ms ease-out both;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

.sh-overlay-out {
  animation: sh-fade-out 200ms ease-in both;
}

.sh-overlay-stage {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.sh-overlay-title {
  margin-top: 1rem;
  font: 600 1.75rem/1.2 Fraunces, Georgia, serif;
  color: #fff;
}

.sh-overlay-sub {
  margin-top: .35rem;
  color: var(--color-blush-200, #ECB6BA);
  font-weight: 600;
}

.sh-overlay-list {
  margin-top: .75rem;
  color: #F4ECDC;
  font-weight: 600;
  font-size: .95rem;
}

.sh-overlay-btn {
  margin-top: 1.5rem;
  min-height: 48px;
}

.sh-overlay [hidden] {
  display: none !important;
}

.sh-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.juice-open > header {
  z-index: 60;
  pointer-events: none;
}

.sh-flying-coin {
  position: fixed;
  z-index: 70;
  font-size: 1.6rem;
  pointer-events: none;
  margin: -.8rem 0 0 -.8rem;
}

.sh-banner {
  font: 700 2.4rem/1.1 Fraunces, Georgia, serif;
  color: var(--sh-brass);
  animation: sh-banner 600ms cubic-bezier(.34,1.56,.64,1) both;
}

.sh-flame {
  margin-top: 1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sh-flame span {
  font-size: 4.5rem;
  animation: sh-flame 900ms cubic-bezier(.34,1.56,.64,1) both;
}

.sh-flame b {
  position: absolute;
  bottom: .15rem;
  font: 700 1.3rem/1 Fraunces, Georgia, serif;
  color: #22182B;
}

.sh-flame-big span {
  font-size: 7rem;
}

.sh-flame-big b {
  font-size: 2rem;
  bottom: .5rem;
}

.sh-chest-host {
  width: 11rem;
}

.sh-chest {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sh-chest-lid {
  transform-origin: 12px 46px;
  transition: transform 380ms cubic-bezier(.34,1.56,.64,1);
}

.sh-chest-glow {
  opacity: 0;
  transition: opacity 300ms;
}

.sh-chest-wait {
  animation: sh-wobble 1400ms ease-in-out infinite;
}

.sh-chest-open {
  animation: sh-shake 420ms ease-in-out 1 both;
}

.sh-chest-open .sh-chest-lid {
  transform: rotate(-32deg) translateY(-4px);
}

.sh-chest-open .sh-chest-glow {
  opacity: 1;
}

.sh-gift-host {
  position: relative;
  width: 9rem;
}

.sh-gift {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sh-gift-lid {
  transform-origin: 10px 34px;
  transition: transform 400ms cubic-bezier(.34,1.56,.64,1);
}

.sh-gift-wait {
  animation: sh-shake 700ms ease-in-out 1 both;
}

.sh-gift-prize {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 3.4rem;
  opacity: 0;
  transform: translate(-50%, 0) scale(.4);
}

.sh-gift-open .sh-gift-lid {
  transform: rotate(-28deg) translate(-6px,-10px);
}

.sh-gift-open .sh-gift-prize {
  animation: sh-prize 700ms cubic-bezier(.34,1.56,.64,1) both;
}

/* M: "Delivered" stamp slides in at the top and leaves by itself */

.sh-delivered {
  position: fixed;
  z-index: 55;
  top: calc(env(safe-area-inset-top) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  max-width: calc(100vw - 32px);
  background: var(--sh-surface);
  color: var(--sh-text-1);
  border: 2px solid var(--color-success);
  border-radius: var(--sh-radius-lg);
  animation: sh-drop 420ms cubic-bezier(.34,1.56,.64,1) both;
}

.sh-delivered b {
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sh-delivered-icon {
  font-size: 1.8rem;
}

.sh-delivered-out {
  animation: sh-fade-out 350ms ease-in both;
}

.sh-sparks-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #624776;
  color: #fff;
  font: 600 1rem/1.2 Fraunces, Georgia, serif;
  white-space: nowrap;
}

.sh-mini-pet {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  text-decoration: none;
}

.sh-mini-art {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
}

.pet-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pet-svg .pet-all {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.pet-svg .pet-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-blink 4.6s infinite;
}

.pet-wiggle .pet-all {
  animation: pet-wiggle 520ms ease-in-out 1 !important;
}

.pet-roll .pet-all {
  animation: pet-roll 700ms ease-in-out 1 !important;
}

.pet-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pet-stage {
  position: relative;
  width: min(18rem, 78vw);
  margin: .25rem auto 0;
}

.pet-touch {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pet-away {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem;
}

.pet-suitcase {
  font-size: 6rem;
}

.pet-title {
  font: 600 1.6rem/1.2 Fraunces, Georgia, serif;
  color: var(--sh-text-1);
  margin-top: .5rem;
}

.pet-sub {
  color: var(--sh-text-2);
  max-width: 24rem;
  margin-top: .25rem;
}

.pet-notice {
  width: 100%;
  max-width: 28rem;
  margin-bottom: .5rem;
  padding: .6rem 1rem;
  border-radius: var(--sh-radius-lg);
  background: var(--sh-surface-2);
  color: var(--sh-text-1);
  border: 1px solid var(--sh-border);
  font-weight: 600;
  animation: sh-slide-in 300ms ease-out both;
}

.pet-hatch-form {
  width: 100%;
  max-width: 28rem;
  margin-top: 1rem;
  padding: 1rem;
  text-align: left;
}

.pet-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.pet-choice {
  position: relative;
  display: block;
}

.pet-choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.pet-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  border: 2px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background: var(--sh-surface);
}

.pet-choice-card svg {
  width: 5rem;
  height: 5rem;
}

.pet-choice-name {
  font-weight: 700;
  color: var(--sh-text-1);
}

.pet-choice input:checked + .pet-choice-card {
  border-color: var(--sh-brass);
  background: var(--sh-brass-bg);
}

.pet-choice input:focus-visible + .pet-choice-card {
  outline: 3px solid var(--sh-primary);
  outline-offset: 2px;
}

.pet-meters {
  width: 100%;
  max-width: 20rem;
  margin-top: .75rem;
  display: grid;
  gap: .4rem;
}

.pet-meter {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.2rem;
}

.pet-meter i {
  flex: 1;
  height: .8rem;
  border-radius: 999px;
  background: var(--sh-surface-2);
  overflow: hidden;
}

.pet-meter b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sh-brass);
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}

.pet-meter:last-child b {
  background: var(--sh-blush);
}

.pet-heading {
  margin-top: 1.25rem;
  width: 100%;
  text-align: left;
  font: 600 1.1rem/1.2 Fraunces, Georgia, serif;
  color: var(--sh-text-1);
}

.pet-heading small {
  font: 500 .8rem "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--sh-text-3);
  margin-left: .35rem;
}

.pet-tray {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.pet-food {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .6rem .25rem;
  min-height: 5.5rem;
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  color: var(--sh-text-1);
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.pet-food-icon {
  font-size: 2rem;
  line-height: 1;
}

.pet-food-name {
  font-weight: 700;
  font-size: .85rem;
}

.pet-toy-note {
  font-size: .75rem;
  font-weight: 600;
  color: var(--sh-text-3);
}

.pet-food .sh-sparks-badge {
  font-size: .8rem;
  padding: 2px 8px;
}

.pet-food.is-short {
  opacity: .6;
}

.pet-food.is-played {
  opacity: .55;
}

.pet-food.is-new {
  border-style: dashed;
}

.sh-overlay-link {
  margin-top: 1rem;
}

.pet-title small {
  font: 600 .8rem "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--sh-text-3);
  margin-left: .25rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pet-growth {
  font-size: .85rem;
  font-weight: 600;
  color: var(--sh-text-3);
  margin-top: .1rem;
}

.pet-season {
  font-size: .7rem;
  font-weight: 700;
  color: var(--sh-blush);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pet-food.is-on {
  border-color: var(--sh-brass);
  background: var(--sh-brass-bg);
}

.pet-food.is-locked {
  opacity: .6;
}

.pet-svg.pet-in-room {
  border-radius: 22px;
}

.pet-stage .pet-svg.pet-in-room {
  border: 2px solid var(--sh-border);
}

.sh-sticker-book {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.sh-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .6rem .3rem;
  text-align: center;
  background: var(--sh-surface-2);
  border: 1px dashed var(--sh-border-2);
  border-radius: var(--sh-radius-lg);
  opacity: .7;
}

.sh-sticker.is-earned {
  background: var(--sh-surface);
  border: 2px solid var(--sh-brass);
  opacity: 1;
}

.sh-sticker-icon {
  font-size: 2.2rem;
  line-height: 1.1;
}

.sh-sticker:not(.is-earned) .sh-sticker-icon {
  filter: grayscale(1);
  opacity: .6;
}

.sh-sticker-name {
  font-weight: 700;
  font-size: .8rem;
  color: var(--sh-text-1);
}

.sh-sticker-how {
  font-size: .7rem;
  color: var(--sh-text-3);
}

.sh-level-badge {
  margin-top: 1rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sh-brass);
  color: #22182B;
  font: 700 3rem/1 Fraunces, Georgia, serif;
  border: 5px solid #F4ECDC;
  animation: sh-flame 800ms cubic-bezier(.34,1.56,.64,1) both;
}

.sh-grew-host {
  width: 12rem;
}

.sh-grew-host svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sh-grew-glow {
  animation: sh-shake 900ms ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(240,206,123,.95));
}

.sh-grew-pop {
  animation: sh-grew-pop 700ms cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 0 18px rgba(240,206,123,.8));
}

.sh-grew-still {
  filter: drop-shadow(0 0 14px rgba(240,206,123,.8));
}

.sh-sticker-toast {
  border-color: var(--sh-brass);
}

.sh-sticker-toast b {
  color: var(--sh-brass-hi, #846424);
}

.sh-peel {
  display: inline-block;
  animation: sh-peel 900ms cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: 0 100%;
}

.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;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-right-2 {
  right: -0.5rem;
}

.-top-1 {
  top: -0.25rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-16 {
  top: 4rem;
}

.top-2 {
  top: 0.5rem;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.order-last {
  order: 9999;
}

.col-span-full {
  grid-column: 1 / -1;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.mt-px {
  margin-top: 1px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-full {
  height: 100%;
}

.max-h-36 {
  max-height: 9rem;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-\[70vh\] {
  min-height: 70vh;
}

.min-h-\[80vh\] {
  min-height: 80vh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-\[52px\] {
  width: 52px;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-8 {
  min-width: 2rem;
}

.min-w-\[44px\] {
  min-width: 44px;
}

.min-w-\[520px\] {
  min-width: 520px;
}

.min-w-\[56px\] {
  min-width: 56px;
}

.min-w-\[72px\] {
  min-width: 72px;
}

.min-w-\[800px\] {
  min-width: 800px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

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

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.basis-full {
  flex-basis: 100%;
}

.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 check-draw {
  0% {
    stroke-dashoffset: 24;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.animate-check-draw {
  animation: check-draw 0.35s ease-out forwards;
}

@keyframes coin-pop {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }

  60% {
    transform: scale(1.25) rotate(180deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.animate-coin-pop {
  animation: coin-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pop-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pop-in {
  animation: pop-in 0.25s ease-out both;
}

.cursor-pointer {
  cursor: pointer;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-\[minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(0,1fr);
}

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

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.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-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-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * 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));
}

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

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

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-brass-600 {
  --tw-border-opacity: 1;
  border-color: rgb(201 154 61 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-plum-200 {
  --tw-border-opacity: 1;
  border-color: rgb(213 200 223 / var(--tw-border-opacity, 1));
}

.border-plum-400 {
  --tw-border-opacity: 1;
  border-color: rgb(147 123 171 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-brass-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 249 244 / var(--tw-bg-opacity, 1));
}

.bg-brass-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(201 154 61 / var(--tw-bg-opacity, 1));
}

.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-ink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(246 247 249 / var(--tw-bg-opacity, 1));
}

.bg-plum-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 250 / var(--tw-bg-opacity, 1));
}

.bg-plum-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(98 71 118 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-10 {
  padding: 2.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.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-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 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;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-\[env\(safe-area-inset-top\)\] {
  padding-top: env(safe-area-inset-top);
}

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

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-heading {
  font-family: Fraunces, Georgia, serif;
}

.font-ui {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[9px\] {
  font-size: 9px;
}

.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-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.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;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.5em\] {
  letter-spacing: 0.5em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-brass-600 {
  --tw-text-opacity: 1;
  color: rgb(201 154 61 / var(--tw-text-opacity, 1));
}

.text-brass-800 {
  --tw-text-opacity: 1;
  color: rgb(132 100 36 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-ink-900 {
  --tw-text-opacity: 1;
  color: rgb(48 54 66 / var(--tw-text-opacity, 1));
}

.text-plum-400 {
  --tw-text-opacity: 1;
  color: rgb(147 123 171 / var(--tw-text-opacity, 1));
}

.text-plum-600 {
  --tw-text-opacity: 1;
  color: rgb(98 71 118 / var(--tw-text-opacity, 1));
}

.text-plum-800 {
  --tw-text-opacity: 1;
  color: rgb(61 44 74 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.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: 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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring-2 {
  --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), var(--tw-shadow, 0 0 #0000);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  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-300 {
  transition-duration: 300ms;
}

/* ═══════════════════════════════════════════════════════════════
   SEND HELP DESIGN SYSTEM
   New unified tokens and components — all scoped to avoid conflict
   with existing Board & Reward and Meal Planner styles above.
   Component classes use .sh- prefix; base scope is class="sh" on body.
   ═══════════════════════════════════════════════════════════════ */

/* ── Raw colour ramps ─────────────────────────────────────────── */

:root {
  /* Plum — deep violet-purple, primary brand colour */
  --color-plum-50:  #F8F5FA;
  --color-plum-100: #ECE5F0;
  --color-plum-200: #D5C8DF;
  --color-plum-400: #937BAB;
  --color-plum-600: #624776;
  --color-plum-800: #3D2C4A;
  --color-plum-900: #22182B;
  /* Brass — warm gold, coins and quests */
  --color-brass-50:  #FBF9F4;
  --color-brass-100: #F4ECDC;
  --color-brass-200: #E9D7B5;
  --color-brass-400: #DBBD80;
  --color-brass-600: #C99A3D;
  --color-brass-800: #846424;
  --color-brass-900: #503D16;
  /* Blush — dusty rose, PENDING/WAITING states only. Never use for errors. */
  --color-blush-50:  #FCF3F4;
  --color-blush-100: #F6DFE0;
  --color-blush-200: #ECB6BA;
  --color-blush-400: #E28D93;
  --color-blush-600: #D8636B;
  --color-blush-800: #A32931;
  --color-blush-900: #661A1F;
  /* Semantic — separate from the blush ramp; these are for UI feedback states */
  --color-danger:      #B83A31;
  /* muted brick-red, sits within the palette without screaming */
  --color-danger-bg:   #FDF0EF;
  --color-danger-fg:   #FFFFFF;
  --color-success:     #3D6B4F;
  /* muted sage-green */
  --color-success-bg:  #EEF5F1;
  --color-success-fg:  #FFFFFF;
  --color-warning:     #C99A3D;
  /* brass doubles as warning */
  --color-warning-bg:  #FBF9F4;
  --color-warning-fg:  #22182B;
  /* ── Semantic surface / layout tokens (light mode) ───────────── */
  --sh-bg:           #F1EBE3;
  /* warm ivory */
  --sh-surface:      #FFFFFF;
  --sh-surface-2:    #F8F4EF;
  --sh-border:       #E5DDD4;
  --sh-border-2:     #D0C5B8;
  --sh-text-1:       #22182B;
  /* plum-900 */
  --sh-text-2:       #624776;
  /* plum-600 */
  --sh-text-3:       #937BAB;
  /* plum-400 */
  /* Primary (plum) */
  --sh-primary:      #3D2C4A;
  --sh-primary-fg:   #FFFFFF;
  --sh-primary-bg:   #F8F5FA;
  --sh-primary-2:    #ECE5F0;
  --sh-primary-hi:   #22182B;
  /* hover: go darker */
  /* Brass */
  --sh-brass:        #C99A3D;
  --sh-brass-fg:     #22182B;
  --sh-brass-bg:     #FBF9F4;
  --sh-brass-2:      #F4ECDC;
  --sh-brass-hi:     #846424;
  /* Blush (pending/waiting) */
  --sh-blush:        #D8636B;
  --sh-blush-fg:     #FFFFFF;
  --sh-blush-bg:     #FCF3F4;
  --sh-blush-2:      #F6DFE0;
  /* Radius tokens */
  --sh-radius-sm:    4px;
  --sh-radius-md:    8px;
  --sh-radius-lg:    12px;
  --sh-radius-xl:    16px;
}

/* ── Dark mode token overrides ──────────────────────────────── */

[data-theme="dark"] {
  --sh-bg:           #1F1726;
  --sh-surface:      #2A1D33;
  --sh-surface-2:    #3D2C4A;
  --sh-border:       #4D3A5A;
  --sh-border-2:     #624776;
  --sh-text-1:       #F8F5FA;
  --sh-text-2:       #D5C8DF;
  --sh-text-3:       #937BAB;
  --sh-primary:      #937BAB;
  --sh-primary-fg:   #1F1726;
  --sh-primary-bg:   rgba(61, 44, 74, 0.40);
  --sh-primary-2:    rgba(61, 44, 74, 0.60);
  --sh-primary-hi:   #D5C8DF;
  --sh-brass:        #DBBD80;
  --sh-brass-fg:     #22182B;
  --sh-brass-bg:     rgba(201, 154, 61, 0.12);
  --sh-brass-2:      rgba(201, 154, 61, 0.22);
  --sh-brass-hi:     #C99A3D;
  --sh-blush:        #E28D93;
  --sh-blush-fg:     #1F1726;
  --sh-blush-bg:     rgba(216, 99, 107, 0.14);
  --sh-blush-2:      rgba(216, 99, 107, 0.25);
  --color-danger-bg:   rgba(184, 58, 49, 0.16);
  --color-success-bg:  rgba(61, 107, 79, 0.16);
  --color-warning-bg:  rgba(201, 154, 61, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-bg: #1F1726;
    --sh-surface: #2A1D33;
    --sh-surface-2: #3D2C4A;
    --sh-border: #4D3A5A;
    --sh-border-2: #624776;
    --sh-text-1: #F8F5FA;
    --sh-text-2: #D5C8DF;
    --sh-text-3: #937BAB;
    --sh-primary: #937BAB;
    --sh-primary-fg: #1F1726;
    --sh-primary-bg: rgba(61,44,74,.40);
    --sh-primary-2: rgba(61,44,74,.60);
    --sh-primary-hi: #D5C8DF;
    --sh-brass: #DBBD80;
    --sh-brass-fg: #22182B;
    --sh-brass-bg: rgba(201,154,61,.12);
    --sh-brass-2: rgba(201,154,61,.22);
    --sh-brass-hi: #C99A3D;
    --sh-blush: #E28D93;
    --sh-blush-fg: #1F1726;
    --sh-blush-bg: rgba(216,99,107,.14);
    --sh-blush-2: rgba(216,99,107,.25);
    --color-danger-bg: rgba(184,58,49,.16);
    --color-success-bg: rgba(61,107,79,.16);
    --color-warning-bg: rgba(201,154,61,.12);
  }
}

/* ── Send Help base scope — applied via class="sh" on <body> ── */

/* ── Send Help components — all .sh-* classes ─────────────── */

/* ─────────────────────────────────────────────────────────────
   Meal Planner / Portal design system
   Scoped under [data-theme] — send_help_base.html sets data-theme on <html>.
   Old variables aliased to Send Help tokens so planner components
   automatically inherit the unified palette without template changes.
   ───────────────────────────────────────────────────────────── */

/* Alias legacy planner vars → Send Help tokens */

:root {
  --bg:         var(--sh-bg);
  --surface:    var(--sh-surface);
  --surface-2:  var(--sh-surface-2);
  --border:     var(--sh-border);
  --border-2:   var(--sh-border-2);
  --text-1:     var(--sh-text-1);
  --text-2:     var(--sh-text-2);
  --text-3:     var(--sh-text-3);
  --accent:     var(--sh-primary);
  --accent-fg:  var(--sh-primary-fg);
  --accent-bg:  var(--sh-primary-bg);
  --accent-2:   var(--sh-border-2);
  --accent-hi:  var(--sh-primary-hi);
  /* Meal type colours — no DS equivalent, kept as-is */
  --c-breakfast:#F59E0B;
  --c-lunch:    #14B8A6;
  --c-dinner:   var(--sh-primary);
  --c-brunch:   #EC4899;
  --c-snack:    #6366F1;
}

/* HTMX */

[data-theme] .htmx-indicator {
  opacity: 0;
  transition: opacity 200ms;
}

[data-theme] .htmx-request .htmx-indicator,
[data-theme] .htmx-request.htmx-indicator {
  opacity: 1;
}

@keyframes wmp-in {
  from {
    opacity:0;
    transform:translateY(4px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

[data-theme] .htmx-added {
  animation: wmp-in 180ms ease forwards;
}

/* Navigation */

[data-theme] .nav-wordmark {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text-1);
  transition: color 150ms;
  text-decoration: none;
}

[data-theme] .nav-wordmark:hover {
  color: var(--accent);
}

[data-theme] .nav-link {
  position: relative;
  padding: 5px 10px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 7px;
  text-decoration: none;
  transition: color 150ms, background 150ms;
  white-space: nowrap;
}

[data-theme] .nav-link:hover {
  color: var(--text-1);
  background: var(--surface-2);
}

[data-theme] .nav-link.active {
  color: var(--accent);
  background: var(--accent-bg);
}

/* Bottom tab bar */

[data-theme] .btab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--text-3);
  transition: color 150ms, background 150ms;
}

[data-theme] .btab.active {
  color: var(--accent);
  background: var(--accent-bg);
}

[data-theme] .btab:hover:not(.active) {
  color: var(--text-2);
}

/* Theme toggle */

[data-theme] .theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

[data-theme] .theme-btn:hover {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--border-2);
}

/* Buttons — override Family Tasks' btn-primary/secondary within planner pages */

[data-theme] .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 8px;
  transition: background 150ms, box-shadow 150ms;
  text-decoration: none;
}

[data-theme] .btn-primary:hover {
  background: var(--accent-hi);
  box-shadow: var(--sh-md);
}

[data-theme] .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  background: var(--surface);
  color: var(--text-1);
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 150ms, border-color 150ms;
}

[data-theme] .btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* Card */

[data-theme] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-sm);
}

/* Recipe card */

[data-theme] .recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow 200ms, transform 200ms, border-color 200ms;
}

[data-theme] .recipe-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--border-2);
}

[data-theme] .recipe-card.shortlisted {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), var(--sh-sm);
}

/* Planner grid */

[data-theme] .planner-cell {
  min-height: 48px;
  border-radius: 6px;
  transition: background 120ms, box-shadow 120ms;
}

[data-theme] .planner-cell.drop-over {
  background: var(--accent-bg) !important;
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (min-width: 768px) {
  [data-theme] .planner-page-width {
    max-width: 1600px;
  }

  [data-theme] .planner-cell {
    min-height: 132px;
  }
}

[data-theme] .meal-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left-width: 2.5px;
  border-radius: 5px;
  padding: 3px 6px 3px 5px;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-1);
  overflow: hidden;
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  transition: border-color 120ms, box-shadow 120ms;
}

[data-theme] .meal-pill:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-sm);
}

[data-theme] .meal-pill.dragging {
  cursor: grabbing;
  opacity: .5;
}

[data-theme] .meal-pill a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

[data-theme] .meal-pill.breakfast {
  border-left-color: var(--c-breakfast);
}

[data-theme] .meal-pill.lunch     {
  border-left-color: var(--c-lunch);
}

[data-theme] .meal-pill.dinner    {
  border-left-color: var(--c-dinner);
}

[data-theme] .meal-pill.brunch    {
  border-left-color: var(--c-brunch);
}

[data-theme] .meal-pill.snack     {
  border-left-color: var(--c-snack);
}

[data-theme] .cell-add-btn {
  width: 100%;
  text-align: left;
  font-size: .6875rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  transition: color 120ms, background 120ms;
}

[data-theme] .cell-add-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

[data-theme] .cell-search-input {
  width: 100%;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  padding: 5px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  outline: none;
  transition: border-color 150ms;
}

[data-theme] .cell-search-input:focus {
  border-color: var(--accent);
}

[data-theme] .cell-search-input::-moz-placeholder {
  color: var(--text-3);
}

[data-theme] .cell-search-input::placeholder {
  color: var(--text-3);
}

/* Shortlist */

[data-theme] .shortlist-card {
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  transition: box-shadow 150ms, transform 150ms, border-color 150ms;
  box-shadow: var(--sh-sm);
}

[data-theme] .shortlist-card:active {
  cursor: grabbing;
}

[data-theme] .shortlist-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
  border-color: var(--border-2);
}

[data-theme] .shortlist-card.dragging {
  opacity: .35;
  transform: scale(.94);
}

/* Tags */

[data-theme] .tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .6875rem;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

[data-theme] .tag-breakfast {
  background:rgba(245,158,11,.1);
  color:#B45309;
  border-color:rgba(245,158,11,.2);
}

[data-theme] .tag-lunch     {
  background:rgba(20,184,166,.1);
  color:#0D9488;
  border-color:rgba(20,184,166,.2);
}

[data-theme] .tag-dinner    {
  background:var(--accent-bg);
  color:var(--accent);
  border-color:var(--accent-2);
}

[data-theme] .tag-brunch    {
  background:rgba(236,72,153,.1);
  color:#BE185D;
  border-color:rgba(236,72,153,.2);
}

[data-theme] .tag-tested    {
  background:rgba(22,163,74,.1);
  color:#16A34A;
  border-color:rgba(22,163,74,.2);
}

[data-theme] .tag-wip       {
  background:rgba(245,158,11,.1);
  color:#B45309;
  border-color:rgba(245,158,11,.2);
}

[data-theme] .tag-wishlist  {
  background:rgba(236,72,153,.1);
  color:#BE185D;
  border-color:rgba(236,72,153,.2);
}

[data-theme] .tag-archived  {
  background:var(--surface-2);
  color:var(--text-3);
}

[data-theme] .tag-who       {
  background:rgba(99,102,241,.1);
  color:#4F46E5;
  border-color:rgba(99,102,241,.2);
}

[data-theme="dark"] .tag-breakfast {
  color:#FCD34D;
}

[data-theme="dark"] .tag-lunch     {
  color:#2DD4BF;
}

[data-theme="dark"] .tag-dinner    {
  color:var(--accent);
}

[data-theme="dark"] .tag-brunch    {
  color:#F9A8D4;
}

[data-theme="dark"] .tag-tested    {
  color:#4ADE80;
}

[data-theme="dark"] .tag-wip       {
  color:#FCD34D;
}

[data-theme="dark"] .tag-wishlist  {
  color:#F9A8D4;
}

[data-theme="dark"] .tag-who       {
  color:#818CF8;
}

/* Shopping */

[data-theme] .shop-toggle {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  transition: all 150ms;
}

[data-theme] .shop-toggle:hover:not(.have):not(.need):not(.eat) {
  border-color: var(--border-2);
}

[data-theme] .shop-toggle.have {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

[data-theme] .shop-toggle.need {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}

[data-theme] .shop-toggle.eat  {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
}

/* Forms */

[data-theme] .form-select,
[data-theme] .form-input {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--text-1);
  outline: none;
  transition: border-color 150ms;
}

[data-theme] .form-select:focus,
[data-theme] .form-input:focus {
  border-color: var(--accent);
}

/* Scrollbars */

[data-theme] .scrollbar-hide::-webkit-scrollbar {
  display: none;
}

[data-theme] .scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[data-theme] .planner-scroll {
  -webkit-overflow-scrolling: touch;
}

[data-theme] .planner-scroll::-webkit-scrollbar {
  height: 3px;
}

[data-theme] .planner-scroll::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme] .planner-scroll::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 2px;
}

[data-theme] .planner-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

/* Desktop shortlist placement dialog */

[data-theme] .desktop-placement-dialog {
  width:min(calc(100vw - 32px), 430px);
  margin:auto;
  padding:0;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  color:var(--text-1);
  box-shadow:0 24px 80px rgba(34,24,43,.28);
}

[data-theme] .desktop-placement-dialog::backdrop {
  background:rgba(34,24,43,.48);
  -webkit-backdrop-filter:blur(2px);
          backdrop-filter:blur(2px);
}

[data-theme] .desktop-placement-dialog form {
  display:grid;
  gap:22px;
  padding:24px;
}

[data-theme] .desktop-placement-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

[data-theme] .desktop-placement-eyebrow {
  margin:0 0 5px;
  color:var(--text-3);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

[data-theme] .desktop-placement-header h2 {
  margin:0;
  color:var(--text-1);
  font-family:Fraunces, Georgia, serif;
  font-size:1.4rem;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.025em;
}

[data-theme] .desktop-placement-header .tag {
  margin-top:10px;
}

[data-theme] .desktop-placement-close {
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 auto;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

[data-theme] .desktop-placement-close:hover {
  background:var(--accent-bg);
  color:var(--accent);
}

[data-theme] .desktop-placement-close:focus-visible, [data-theme] .desktop-placement-dialog select:focus-visible {
  outline:3px solid var(--accent-bg);
  outline-offset:2px;
}

[data-theme] .desktop-placement-fields {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

[data-theme] .desktop-placement-fields label {
  display:grid;
  gap:7px;
  color:var(--text-2);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

[data-theme] .desktop-placement-fields select {
  width:100%;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-1);
  padding:0 10px;
  font:600 .9375rem "Plus Jakarta Sans", system-ui, sans-serif;
}

[data-theme] .desktop-placement-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

@media (max-width: 767px) {
  [data-theme] .desktop-placement-dialog {
    display:none;
  }
}

/* Recipe cooking view */

[data-theme] .recipe-page {
  max-width: 1080px;
  margin: 0 auto;
}

[data-theme] .recipe-page-header {
  margin-bottom: 24px;
}

[data-theme] .recipe-back {
  display:inline-flex;
  margin-bottom:14px;
  color:var(--text-3);
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
}

[data-theme] .recipe-back:hover {
  color:var(--accent);
}

[data-theme] .recipe-page-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

[data-theme] .recipe-page h1 {
  max-width:760px;
  margin:0;
  color:var(--text-1);
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(2rem, 4vw, 3.5rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.045em;
}

[data-theme] .recipe-eyebrow {
  margin:0 0 6px;
  color:var(--text-3);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

[data-theme] .recipe-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}

[data-theme] .recipe-page-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

[data-theme] .recipe-cook-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(260px, .75fr);
  gap:18px;
  align-items:start;
}

[data-theme] .recipe-cook-sidebar {
  display:grid;
  gap:18px;
}

[data-theme] .recipe-panel {
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--sh-sm);
  padding:22px;
}

[data-theme] .recipe-panel h2 {
  margin:0;
  color:var(--text-1);
  font-size:1.35rem;
  letter-spacing:-.025em;
}

[data-theme] .recipe-panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

[data-theme] .recipe-count {
  display:grid;
  min-width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:var(--accent-bg);
  color:var(--accent);
  font-size:.8125rem;
  font-weight:800;
}

[data-theme] .recipe-cook-ingredients {
  display:grid;
  gap:0;
  margin:10px 0 0;
  padding:0;
  list-style:none;
}

[data-theme] .recipe-cook-ingredients li {
  display:grid;
  grid-template-columns:18px minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  border-bottom:1px solid var(--border);
  color:var(--text-1);
  font-size:1rem;
  font-weight:650;
}

[data-theme] .recipe-cook-ingredients li:last-child {
  border-bottom:0;
}

[data-theme] .recipe-ingredient-marker {
  width:13px;
  height:13px;
  border:1.5px solid var(--border-2);
  border-radius:50%;
}

[data-theme] .recipe-cook-ingredients strong {
  color:var(--text-2);
  font-size:.8125rem;
  font-weight:700;
  text-align:right;
}

[data-theme] .recipe-empty {
  margin:24px 0 0;
  color:var(--text-3);
  font-size:.9375rem;
}

[data-theme] .recipe-notes-panel {
  background:var(--sh-brass-bg);
  border-color:var(--sh-brass-2);
}

[data-theme] .recipe-notes-panel > p:last-child {
  margin:12px 0 0;
  color:var(--text-2);
  font-size:.9375rem;
  line-height:1.65;
}

[data-theme] .recipe-meta-list {
  display:grid;
  gap:12px;
  margin:18px 0 0;
}

[data-theme] .recipe-meta-list div {
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  gap:12px;
}

[data-theme] .recipe-meta-list dt {
  color:var(--text-3);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

[data-theme] .recipe-meta-list dd {
  margin:0;
  color:var(--text-1);
  font-size:.875rem;
  font-weight:650;
}

/* Deliberate recipe editor */

[data-theme] .recipe-editor-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(320px, .75fr);
  gap:18px;
  align-items:start;
}

[data-theme] .recipe-editor-form {
  display:grid;
  gap:16px;
  margin-top:18px;
}

[data-theme] .recipe-editor-form > label, [data-theme] .recipe-field-grid > label, [data-theme] .recipe-add-ingredient > label {
  display:grid;
  gap:6px;
  color:var(--text-2);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

[data-theme] .recipe-field-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

[data-theme] .recipe-editor-form input:not([type="checkbox"]), [data-theme] .recipe-editor-form select, [data-theme] .recipe-editor-form textarea {
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-1);
  padding:8px 10px;
  font:400 .9375rem "Plus Jakarta Sans", system-ui, sans-serif;
  outline:none;
}

[data-theme] .recipe-editor-form textarea {
  min-height:110px;
  resize:vertical;
}

[data-theme] .recipe-editor-form input:focus, [data-theme] .recipe-editor-form select:focus, [data-theme] .recipe-editor-form textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}

[data-theme] .recipe-checkbox {
  display:flex !important;
  align-items:center;
  gap:8px;
  color:var(--text-2) !important;
  font-size:.875rem !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

[data-theme] .recipe-checkbox input {
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

[data-theme] .recipe-form-error {
  padding:10px 12px;
  border:1px solid var(--color-danger);
  border-radius:8px;
  background:var(--color-danger-bg);
  color:var(--color-danger);
  font-size:.875rem;
}

[data-theme] .recipe-add-ingredient {
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

[data-theme] .recipe-ingredient-results {
  position:absolute;
  z-index:10;
  right:0;
  left:0;
  max-height:192px;
  overflow:auto;
  margin-top:4px;
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--sh-md);
}

[data-theme] .recipe-ingredient-results:empty {
  display:none;
}

[data-theme] .recipe-delete-form {
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border);
}

/* Native recipe import */

[data-theme] .recipe-import-page {
  max-width:1120px;
  margin:0 auto;
}

[data-theme] .recipe-import-hero {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

[data-theme] .recipe-import-hero h1 {
  margin:0;
  color:var(--text-1);
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(2.25rem, 5vw, 4.25rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.05em;
}

[data-theme] .recipe-import-hero > div > p:last-child {
  max-width:680px;
  margin:13px 0 0;
  color:var(--text-2);
  font-size:1rem;
  line-height:1.65;
}

[data-theme] .recipe-import-step {
  display:flex;
  width:76px;
  height:76px;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent-2);
  border-radius:50%;
  background:var(--accent-bg);
  color:var(--accent);
  font-family:Fraunces, Georgia, serif;
  font-size:1.65rem;
  font-weight:700;
  line-height:1;
}

[data-theme] .recipe-import-step small {
  margin-top:5px;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

[data-theme] .recipe-import-url-card {
  padding:clamp(22px, 4vw, 38px);
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--sh-md);
}

[data-theme] .recipe-import-url-card > label, [data-theme] .recipe-import-fields label, [data-theme] .recipe-import-ingredient > label:not(.recipe-import-include), [data-theme] .recipe-import-method, [data-theme] .recipe-nutrition-fields label, [data-theme] .recipe-import-notes {
  display:grid;
  gap:7px;
  color:var(--text-2);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

[data-theme] .recipe-import-url-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  margin-top:9px;
}

[data-theme] .recipe-import-url-row input {
  min-height:50px;
  font-size:1rem;
}

[data-theme] .recipe-import-url-row button {
  min-height:50px;
  padding-inline:22px;
}

[data-theme] .recipe-import-hint {
  margin:14px 0 0;
  color:var(--text-3);
  font-size:.8125rem;
}

[data-theme] .recipe-import-promise {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  margin-top:20px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--border);
}

[data-theme] .recipe-import-promise div {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:1px 10px;
  padding:18px;
  background:var(--surface-2);
}

[data-theme] .recipe-import-promise span {
  grid-row:1 / 3;
  color:var(--accent);
  font-family:Fraunces, Georgia, serif;
  font-size:1.35rem;
  font-weight:700;
}

[data-theme] .recipe-import-promise strong {
  color:var(--text-1);
  font-size:.875rem;
}

[data-theme] .recipe-import-promise small {
  color:var(--text-3);
  font-size:.72rem;
}

[data-theme] .recipe-candidate-list {
  display:grid;
  gap:10px;
}

[data-theme] .recipe-candidate-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--sh-sm);
}

[data-theme] .recipe-candidate-card > div {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

[data-theme] .recipe-candidate-card span {
  color:var(--text-3);
  font-family:Fraunces, Georgia, serif;
  font-size:1.2rem;
}

[data-theme] .recipe-candidate-card strong {
  overflow:hidden;
  color:var(--text-1);
  font-size:.9375rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

[data-theme] .recipe-import-review-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(300px, .75fr);
  gap:18px;
  align-items:start;
}

[data-theme] .recipe-import-main-column, [data-theme] .recipe-import-side-column, [data-theme] .recipe-cook-main {
  display:grid;
  gap:18px;
}

[data-theme] .recipe-import-section > .recipe-eyebrow:first-child + h2 {
  margin-bottom:18px;
}

[data-theme] .recipe-source-link {
  color:var(--accent);
  font-size:.75rem;
  font-weight:750;
  text-decoration:none;
}

[data-theme] .recipe-source-link:hover {
  text-decoration:underline;
}

[data-theme] .recipe-import-fields {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:15px;
  margin-top:18px;
}

[data-theme] .recipe-import-wide {
  grid-column:1 / -1;
}

[data-theme] .recipe-import-review-form input:not([type="checkbox"]), [data-theme] .recipe-import-review-form select, [data-theme] .recipe-import-review-form textarea {
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-1);
  padding:8px 10px;
  font:400 .9rem "Plus Jakarta Sans", system-ui, sans-serif;
  outline:none;
}

[data-theme] .recipe-import-review-form textarea {
  resize:vertical;
}

[data-theme] .recipe-import-review-form input:focus, [data-theme] .recipe-import-review-form select:focus, [data-theme] .recipe-import-review-form textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
}

[data-theme] .recipe-import-review-form .errorlist {
  margin:3px 0 0;
  padding:0;
  color:var(--color-danger);
  font-size:.72rem;
  font-weight:650;
  letter-spacing:0;
  list-style:none;
  text-transform:none;
}

[data-theme] .recipe-import-ingredient {
  display:grid;
  grid-template-columns:76px minmax(0, 1.3fr) minmax(130px, .85fr);
  gap:11px 14px;
  align-items:end;
  padding:17px 0;
  border-bottom:1px solid var(--border);
  transition:opacity .16s ease;
}

[data-theme] .recipe-import-ingredient:last-child {
  border-bottom:0;
  padding-bottom:0;
}

[data-theme] .recipe-import-ingredient.is-excluded {
  opacity:.55;
}

[data-theme] .recipe-import-include {
  display:flex;
  align-items:center;
  align-self:center;
  gap:7px;
  color:var(--text-2);
  font-size:.75rem;
  font-weight:750;
}

[data-theme] .recipe-import-source-line {
  grid-column:2 / -1;
  align-self:center;
}

[data-theme] .recipe-import-ingredient > label:nth-of-type(2) {
  grid-column:2;
}

[data-theme] .recipe-import-ingredient > label:nth-of-type(3) {
  grid-column:3;
}

[data-theme] .recipe-import-source-line small {
  color:var(--text-3);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

[data-theme] .recipe-import-source-line p {
  margin:3px 0 0;
  color:var(--text-1);
  font-size:.875rem;
  line-height:1.5;
}

[data-theme] .recipe-import-match {
  grid-column:2 / -1;
  min-height:18px;
}

[data-theme] .recipe-import-match span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:750;
}

[data-theme] .match-existing {
  background:var(--color-success-bg);
  color:var(--color-success);
}

[data-theme] .match-new {
  background:var(--sh-brass-bg);
  color:var(--sh-brass-hi);
}

[data-theme] .recipe-import-method {
  margin-top:18px;
}

[data-theme] .recipe-import-method textarea {
  min-height:310px;
  line-height:1.65;
  text-transform:none;
}

[data-theme] .recipe-nutrition-fields {
  display:grid;
  gap:12px;
  margin-top:18px;
}

[data-theme] .recipe-import-image-choice {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:18px;
  color:var(--text-1);
  cursor:pointer;
}

[data-theme] .recipe-import-image-choice input {
  margin-top:3px;
}

[data-theme] .recipe-import-image-choice span {
  display:grid;
  gap:4px;
}

[data-theme] .recipe-import-image-choice strong {
  font-size:.875rem;
}

[data-theme] .recipe-import-image-choice small {
  color:var(--text-3);
  font-size:.72rem;
  line-height:1.45;
}

[data-theme] .recipe-import-notes {
  margin-top:20px;
}

[data-theme] .recipe-import-save-card {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:13px;
  padding:18px;
  border-radius:16px;
  background:var(--text-1);
  color:var(--surface);
  box-shadow:var(--sh-md);
}

[data-theme] .recipe-import-save-card .recipe-import-step {
  width:58px;
  height:58px;
  border-color:transparent;
}

[data-theme] .recipe-import-save-card > div strong {
  color:var(--surface);
  font-family:Fraunces, Georgia, serif;
  font-size:1.2rem;
}

[data-theme] .recipe-import-save-card p {
  margin:5px 0 0;
  color:var(--border-2);
  font-size:.75rem;
  line-height:1.5;
}

[data-theme] .recipe-import-save-card button {
  grid-column:1 / -1;
  width:100%;
  background:var(--accent);
}

[data-theme] .recipe-detail-image {
  overflow:hidden;
  aspect-ratio:16 / 8;
  border-radius:16px;
  background:var(--surface-2);
  box-shadow:var(--sh-sm);
}

[data-theme] .recipe-detail-image img {
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
}

[data-theme] .recipe-method-panel h2 {
  margin-bottom:18px;
}

[data-theme] .recipe-method-copy {
  color:var(--text-1);
  font-size:.9375rem;
  line-height:1.75;
}

[data-theme] .recipe-method-copy p {
  margin:0 0 1em;
}

[data-theme] .recipe-editor-nutrition {
  display:grid;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

@media (max-width: 767px) {
  [data-theme] .recipe-page-heading {
    display:grid;
    align-items:start;
  }

  [data-theme] .recipe-page h1 {
    font-size:2.25rem;
  }

  [data-theme] .recipe-page-actions {
    width:100%;
  }

  [data-theme] .recipe-page-actions a {
    flex:1;
  }

  [data-theme] .recipe-cook-grid, [data-theme] .recipe-editor-grid {
    grid-template-columns:1fr;
  }

  [data-theme] .recipe-panel {
    padding:18px;
  }

  [data-theme] .recipe-field-grid {
    grid-template-columns:1fr;
  }

  [data-theme] .recipe-import-hero {
    align-items:flex-start;
  }

  [data-theme] .recipe-import-hero h1 {
    font-size:2.6rem;
  }

  [data-theme] .recipe-import-step {
    width:58px;
    height:58px;
    font-size:1.25rem;
  }

  [data-theme] .recipe-import-url-row, [data-theme] .recipe-import-review-grid {
    grid-template-columns:1fr;
  }

  [data-theme] .recipe-import-promise {
    grid-template-columns:1fr;
  }

  [data-theme] .recipe-candidate-card {
    align-items:stretch;
    flex-direction:column;
  }

  [data-theme] .recipe-import-fields {
    grid-template-columns:1fr;
  }

  [data-theme] .recipe-import-wide {
    grid-column:auto;
  }

  [data-theme] .recipe-import-ingredient {
    grid-template-columns:72px minmax(0, 1fr);
  }

  [data-theme] .recipe-import-source-line, [data-theme] .recipe-import-match {
    grid-column:1 / -1;
  }

  [data-theme] .recipe-import-ingredient > label:nth-of-type(2) {
    grid-column:2;
  }

  [data-theme] .recipe-import-ingredient > label:nth-of-type(3) {
    grid-column:1 / -1;
  }

  [data-theme] .recipe-import-ingredient > label:last-of-type {
    grid-column:1 / -1;
  }

  [data-theme] .recipe-detail-image {
    aspect-ratio:4 / 3;
  }
}

/* Touch-first planner. Desktop retains the compact week grid above. */

@media (max-width: 767px) {
  [data-theme] .mobile-shortlist-button {
    width: 100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 0 16px;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text-1);
    font:600 .875rem "Plus Jakarta Sans", system-ui, sans-serif;
  }

  [data-theme] .mobile-shortlist-button span:last-child {
    min-width:22px;
    padding:2px 7px;
    border-radius:999px;
    background:var(--accent-bg);
    color:var(--accent);
    font-size:.75rem;
  }

  [data-theme] .mobile-day-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 12px;
  }

  [data-theme] .mobile-icon-button {
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text-1);
    font-size:2rem;
    line-height:1;
  }

  [data-theme] .mobile-date-rail {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:4px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
  }

  [data-theme] .mobile-date-button {
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-3);
    font-size:.6875rem;
    font-weight:600;
  }

  [data-theme] .mobile-date-button strong {
    color:var(--text-1);
    font-size:1rem;
  }

  [data-theme] .mobile-date-button.active {
    background:var(--accent);
    color:var(--accent-fg);
  }

  [data-theme] .mobile-date-button.active strong {
    color:var(--accent-fg);
  }

  [data-theme] .mobile-today-link {
    display:block;
    margin:8px auto 14px;
    border:0;
    background:transparent;
    color:var(--accent);
    font-size:.8125rem;
    font-weight:600;
  }

  [data-theme] .mobile-meal-section {
    margin:0 0 10px;
    overflow:visible;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
  }

  [data-theme] .mobile-meal-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 12px 8px;
  }

  [data-theme] .mobile-meal-heading h2 {
    margin:0;
    color:var(--text-2);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
  }

  [data-theme] .mobile-add-button {
    min-height:32px;
    padding:4px 8px;
    border:0;
    border-radius:6px;
    background:var(--accent-bg);
    color:var(--accent);
    font-size:.8125rem;
    font-weight:700;
  }

  [data-theme] .mobile-empty-meal {
    width:calc(100% - 24px);
    min-height:44px;
    margin:0 12px 12px;
    border:1px dashed var(--border-2);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text-2);
    font:500 .875rem "Plus Jakarta Sans", system-ui, sans-serif;
    text-align:left;
    padding:0 12px;
  }

  [data-theme] .mobile-meal-card {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:52px;
    margin:0 12px 8px;
    padding:8px 8px 8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
  }

  [data-theme] .mobile-meal-card p {
    flex:1;
    margin:0;
    color:var(--text-1);
    font-size:.875rem;
    font-weight:600;
  }

  [data-theme] .mobile-meal-link {
    color:inherit;
    text-decoration:none;
  }

  [data-theme] .mobile-meal-link:hover {
    color:var(--accent);
    text-decoration:underline;
  }

  [data-theme] .mobile-meal-type-dot {
    width:4px;
    align-self:stretch;
    border-radius:999px;
    background:var(--accent);
  }

  [data-theme] .mobile-meal-type-dot.breakfast {
    background:var(--c-breakfast);
  }

  [data-theme] .mobile-meal-type-dot.brunch {
    background:var(--c-brunch);
  }

  [data-theme] .mobile-meal-type-dot.lunch {
    background:var(--c-lunch);
  }

  [data-theme] .mobile-meal-actions {
    position:relative;
  }

  [data-theme] .mobile-meal-actions summary {
    list-style:none;
    width:36px;
    min-height:36px;
    display:grid;
    place-items:center;
    border-radius:6px;
    color:var(--text-2);
    cursor:pointer;
  }

  [data-theme] .mobile-meal-actions summary::-webkit-details-marker {
    display:none;
  }

  [data-theme] .mobile-meal-actions div {
    position:absolute;
    z-index:5;
    right:0;
    top:38px;
    width:116px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    box-shadow:var(--sh-md);
  }

  [data-theme] .mobile-meal-actions button {
    width:100%;
    min-height:36px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text-1);
    text-align:left;
    padding:0 8px;
    font-size:.8125rem;
  }

  [data-theme] .mobile-meal-actions button:last-child {
    color:var(--color-danger);
  }

  [data-theme] .mobile-planner-dialog {
    width:min(100%, 480px);
    max-height:80vh;
    margin:auto 0 0;
    padding:0;
    border:0;
    border-radius:18px 18px 0 0;
    background:var(--surface);
    color:var(--text-1);
    box-shadow:0 -8px 32px rgba(0,0,0,.22);
  }

  [data-theme] .mobile-planner-dialog::backdrop {
    background:rgba(34,24,43,.45);
  }

  [data-theme] .mobile-planner-dialog > div, [data-theme] .mobile-planner-dialog form {
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  }

  [data-theme] .mobile-picker-heading {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:16px;
  }

  [data-theme] .mobile-picker-heading h2 {
    margin:2px 0 0;
    font-size:1.25rem;
  }

  [data-theme] .mobile-dialog-close {
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:var(--surface-2);
    color:var(--text-1);
    font-size:1.5rem;
  }

  [data-theme] .mobile-picker-search, [data-theme] .mobile-form-label select {
    width:100%;
    min-height:46px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text-1);
    font:400 .9375rem "Plus Jakarta Sans", system-ui, sans-serif;
  }

  [data-theme] .mobile-picker-results {
    max-height:42vh;
    margin:12px 0;
    overflow-y:auto;
  }

  [data-theme] .mobile-picker-results button {
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent;
    color:var(--text-1);
    text-align:left;
    font:600 .875rem "Plus Jakarta Sans", system-ui, sans-serif;
  }

  [data-theme] .mobile-picker-results small {
    color:var(--text-3);
    font-size:.75rem;
  }

  [data-theme] .mobile-picker-results p {
    color:var(--text-3);
  }

  [data-theme] .mobile-picker-toggle {
    min-height:40px;
    border:0;
    background:transparent;
    color:var(--accent);
    font-size:.8125rem;
    font-weight:700;
  }

  [data-theme] .mobile-form-label {
    display:block;
    margin:12px 0;
    color:var(--text-2);
    font-size:.8125rem;
    font-weight:700;
  }

  [data-theme] .mobile-form-label select {
    display:block;
    margin-top:6px;
  }
}

/* ── Game feel (T-0277): the animations behind static/js/juice.js ────────────
   Small ones (S) are plain CSS on a class the server renders. Big ones (L) are the
   .sh-overlay layers juice.js builds. Reduced motion: no shakes, flashes or flying
   things, only fades (block at the end of this section). */

@keyframes sh-settle {
  0% {
    transform: scale(.94);
  }

  55% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes sh-spring-back {
  0% {
    transform: scale(1.03);
  }

  60% {
    transform: scale(.985);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes sh-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sh-flip-in {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(-75deg);
  }

  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0);
  }
}

@keyframes sh-stamp {
  0% {
    opacity: 0;
    transform: scale(2.6) rotate(-14deg);
  }

  18% {
    opacity: 1;
    transform: scale(.94) rotate(-8deg);
  }

  26% {
    transform: scale(1) rotate(-8deg);
  }

  75% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: scale(1) rotate(-8deg);
  }
}

@keyframes sh-seal {
  0% {
    opacity: 0;
    transform: scale(2) rotate(-20deg);
  }

  60% {
    opacity: 1;
    transform: scale(.92) rotate(6deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes sh-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes sh-ready {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 4px var(--sh-brass);
  }
}

@keyframes sh-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sh-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes sh-banner {
  0% {
    opacity: 0;
    transform: scale(.5) translateY(20px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes sh-flame {
  0% {
    transform: scale(.3);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes sh-wobble {
  0%, 100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@keyframes sh-shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-7px) rotate(-3deg);
  }

  40% {
    transform: translateX(7px) rotate(3deg);
  }

  60% {
    transform: translateX(-5px) rotate(-2deg);
  }

  80% {
    transform: translateX(4px) rotate(1deg);
  }
}

@keyframes sh-prize {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(.4);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -3.2rem) scale(1);
  }
}

@keyframes sh-drop {
  from {
    opacity: 0;
    transform: translate(-50%, -30px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Reduced motion (iOS "Reduce Motion"): celebrations become fades. Nothing shakes, flies or flashes. */

@media (prefers-reduced-motion: reduce) {
  .sh-settle, .sh-spring-back, .sh-card-return, .sh-card-flip, .sh-seal,
  .sh-banner, .sh-flame span, .sh-delivered, .animate-pop-in, .animate-coin-pop {
    animation: sh-fade 250ms ease-out both !important;
  }

  .sh-stamp {
    animation: sh-stamp-fade 1900ms ease-out 250ms both !important;
  }

  .sh-chest-wait, .sh-chest-open, .sh-gift-wait, .sh-goal-ready {
    animation: none !important;
  }

  .sh-chest-lid, .sh-gift-lid {
    transition: none !important;
  }

  .sh-gift-open .sh-gift-prize {
    animation: sh-fade 300ms ease-out both !important;
    opacity: 1;
    transform: translate(-50%, -3.2rem);
  }

  .sh-shimmer::after {
    display: none;
  }

  .sh-switch, .sh-switch-knob, [data-juice-bar] {
    transition: none !important;
  }
}

@keyframes sh-stamp-fade {
  0% {
    opacity: 0;
    transform: rotate(-8deg);
  }

  15%, 75% {
    opacity: 1;
    transform: rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: rotate(-8deg);
  }
}

/* ── Pets (T-0277 stage B): Sparks, the mini pet, the Pet tab ─────────────────────────────── */

@keyframes pet-blink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }

  96% {
    transform: scaleY(.1);
  }
}

@keyframes pet-bounce {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }

  45% {
    transform: translateY(-8px) scale(.98, 1.03);
  }

  60% {
    transform: translateY(0) scale(1.03, .97);
  }
}

@keyframes pet-droop {
  0%, 100% {
    transform: rotate(-1.5deg) scaleY(.97);
  }

  50% {
    transform: rotate(1.5deg) scaleY(.95);
  }
}

@keyframes pet-breathe {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03, 1.05);
  }
}

@keyframes pet-zzz {
  0%, 100% {
    opacity: .3;
    transform: translateY(2px);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes pet-bob {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes pet-hop {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-14px) scale(.96, 1.06);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes pet-wiggle {
  0%, 100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  80% {
    transform: rotate(-3deg);
  }
}

@keyframes pet-chomp {
  0%, 100% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.06, .94);
  }

  40% {
    transform: scale(.96, 1.05);
  }

  60% {
    transform: scale(1.06, .94);
  }

  80% {
    transform: scale(.98, 1.02);
  }
}

@keyframes pet-roll {
  0%, 100% {
    transform: rotate(0);
  }

  35% {
    transform: rotate(-14deg) translateX(-6px);
  }

  70% {
    transform: rotate(10deg) translateX(5px);
  }
}

@keyframes egg-wobble {
  0%, 100% {
    transform: rotate(calc(var(--egg-tilt, 2deg) * -1));
  }

  50% {
    transform: rotate(var(--egg-tilt, 2deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet-svg .pet-all, .pet-svg .pet-eyes, .pet-zzz, .pet-bubble, .pet-rumble {
    animation: none !important;
  }

  .pet-meter b {
    transition: none;
  }

  .pet-notice {
    animation: sh-fade 250ms ease-out both !important;
  }
}

/* ── Growing up, hats and rooms, levels, stickers (T-0277 stage C) ──────────────────────────── */

@keyframes sh-grew-pop {
  0% {
    transform: scale(.7);
  }

  60% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes sh-peel {
  0% {
    transform: rotate(-35deg) scale(.3);
    opacity: 0;
  }

  55% {
    transform: rotate(8deg) scale(1.15);
    opacity: 1;
  }

  75% {
    transform: rotate(-5deg) scale(1);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-level-badge, .sh-peel, .sh-grew-pop {
    animation: sh-fade 300ms ease-out both !important;
  }

  .sh-grew-glow {
    animation: none !important;
  }
}

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.hover\:border-\[color\:var\(--sh-border-2\)\]:hover {
  border-color: var(--sh-border-2);
}

.hover\:border-amber-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.hover\:border-plum-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(98 71 118 / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-plum-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 250 / var(--tw-bg-opacity, 1));
}

.hover\:text-amber-500:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.hover\:text-emerald-800:hover {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

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

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-75:hover {
  opacity: 0.75;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.focus\:border-emerald-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

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

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

@media (min-width: 640px) {
  .sm\:order-none {
    order: 0;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

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

  .sm\:basis-auto {
    flex-basis: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .sm\:items-center {
    align-items: center;
  }

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

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

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:hidden {
    display: none;
  }

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

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .md\:pb-8 {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}