/* The ScrollHint disc (shared/components/ScrollHint.vue). The tint is mixed into the page
     colour instead of blurred over it, so it reads the same over faces that are scrolling. */
.smb-disc[data-v-ddcf52b4] {
    border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
    background-color: color-mix(in oklab, var(--primary) 16%, var(--background));
    color: var(--foreground);
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--primary) 8%, transparent),
      0 8px 22px -12px color-mix(in oklab, var(--primary) 55%, transparent);
    opacity: 0.85;
    transition:
      opacity 0.18s ease,
      background-color 0.18s ease,
      border-color 0.18s ease;
}
  /* UI-1942: the arrow bobs inside a still disc (the template's note) */
.smb-arrow[data-v-ddcf52b4] {
    animation: smb-bob-ddcf52b4 1.6s ease-in-out infinite;
}
.smb-disc[data-v-ddcf52b4]:hover,
  .smb-disc[data-v-ddcf52b4]:focus-visible {
    opacity: 1;
    background-color: color-mix(in oklab, var(--primary) 30%, var(--background));
    border-color: color-mix(in oklab, var(--primary) 70%, transparent);
}
@keyframes smb-bob-ddcf52b4 {
0%,
    100% {
      transform: translateY(0);
}
50% {
      transform: translateY(3px);
}
}
@media (prefers-reduced-motion: reduce) {
.smb-arrow[data-v-ddcf52b4] {
      animation: none;
}
}

  /* UI-2515: this block used to open with an unscoped `[aria-disabled='true'] { opacity: 50% }`, written in 2023 for the
     Headless UI RadioGroupOption this picker was built on (a disabled size rendered aria-disabled). The picker is reka-ui
     now and draws no aria-disabled element: a size the region does not offer is dimmed by its own `opacity-50
     pointer-events-none` class in the template. The rule outlived its markup and, unscoped and outside every cascade
     layer, halved every aria-disabled control in the dashboard once this module had loaded (Settings > Appearance's busy
     Save pill). Removed, with the @reference only its @apply needed. */

  /* UI-89 tier ladder. Written as plain CSS on purpose: it leans on color-mix
     off a per-card `--tier` custom property, which is what lets one rule set
     tint, border, glow and meter colour for four different accents. */
.power-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 640px) {
.power-tiers {
      grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.power-tier {
    --tier: var(--primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 0.75rem 0.875rem 0.8125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    text-align: start;
    cursor: pointer;
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
}

  /* The tint is a pseudo-element so the card can keep a solid background and
     still fade its accent in from the top left. */
.power-tier::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, color-mix(in oklch, var(--tier), transparent 90%), transparent 62%);
    pointer-events: none;
    transition: background 0.18s ease;
}
.power-tier > * {
    position: relative;
}
.power-tier:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--tier), transparent 55%);
}
.power-tier.is-selected {
    border-color: color-mix(in oklch, var(--tier), transparent 30%);
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--tier), transparent 55%),
      0 16px 32px -20px color-mix(in oklch, var(--tier), transparent 25%);
}
.power-tier.is-selected::before {
    background: linear-gradient(155deg, color-mix(in oklch, var(--tier), transparent 78%), transparent 68%);
}

  /* Fixed height: without it the badge is taller than the bare meter and the two
     badged cards push their tier name a few px below the other two. */
.power-tier__row {
    display: flex;
    width: 100%;
    min-height: 1.125rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4375rem;
}
.power-tier__meter {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.power-tier__bolt {
    width: 0.8125rem;
    height: 0.8125rem;
    color: color-mix(in oklch, var(--muted-foreground), transparent 80%);
}
.power-tier__bolt.is-lit {
    color: var(--tier);
}

  /* Wherever the picker sits in a narrow column (create wizard, phones) the meter
     and the badge cannot share a line: the card has ~120px of inner width and
     "Recommended" alone eats most of it, so the badge was being clipped. Below
     that, the badge drops to its own line. The min-height keeps the tier names
     level across badged and unbadged cards. Container query, not a media query,
     because it is the PICKER's width that decides this, not the window's. */
@container (max-width: 760px) {
.power-tier__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.3125rem;
      min-height: 2.375rem;
}
}
.power-tier__badge {
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--tier), transparent 88%);
    color: var(--tier);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.power-tier__name {
    color: var(--foreground);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
}

  /* The pitch carries the tier colour: it is the line that has to feel like a
     step up, and mixing a little foreground in keeps the slate tier legible. */
.power-tier__pitch {
    margin-top: 0.125rem;
    color: color-mix(in oklch, var(--tier), var(--foreground) 22%);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

  /* Two deliberate lines (compute, then storage) instead of one long string that
     wraps mid-unit at whatever width the picker happens to sit in. */
.power-tier__peak {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

  /* Plain CSS, no Tailwind at-rules, so this block needs no @reference. Every colour in it is a
     custom property the card set from a token. */
.rc-art[data-v-41581cd4] {
    position: relative;
    width: 5.5rem;
    height: 4.5rem;
}
.rc-art-back[data-v-41581cd4],
  .rc-art-front[data-v-41581cd4] {
    position: absolute;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
}
.rc-art-back[data-v-41581cd4] {
    top: 0;
    inset-inline-start: 0.25rem;
    background-image: linear-gradient(145deg, var(--rc-accent-2), var(--rc-accent));
    opacity: 0.5;
    transform: rotate(-8deg);
}
.rc-art-front[data-v-41581cd4] {
    bottom: 0;
    inset-inline-end: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(145deg, var(--rc-accent), var(--rc-accent-2));
}

  /* UI-720: RESTORED. `soft` had no interactive state at all, which was an omission rather than
     a decision: the hand-rolled benefit tile it replaced had one, and it was the best line in
     that file. Its own comment said why, and it is worth keeping verbatim, because this is
     exactly the property that gets flattened the next time someone tidies a stylesheet: the
     accent lifts on HOVER rather than on load, so a grid of six is calm to read and still
     feels like something you can look through.

     Six tinted rims at load is six things shouting at equal volume, which is the same as none
     of them shouting. Six neutral rims that each take the module's colour under the cursor
     spend the whole colour budget on the one card being looked at, and leave the hero the
     loudest thing on the page. The TILE stays accented at rest either way, which is what the
     old .landing-benefit-icon did.

     :focus-within as well as :hover, because hover-only meant a keyboard reader tabbing the
     grid never saw it at all. On a coarse pointer there is no hover, so there the lift is the
     resting state and the tone degrades to what `soft` has always been, which is the honest
     answer rather than a dead interaction.

     55% and 6%, not the old file's 40% and 4%: at 40% the border step is oklab dE 0.094 at the
     worst accent on light and at 4% the fill is dE 0.014, at or under one JND. The old hover
     was a two-property rule doing one property's job.

     Written through the port's own override variables, which is the seam frame/index.js:33
     leaves for exactly this. A `bg-` class on the panel is the one thing the surface rule
     forbids. `var(--background)` and `var(--border)` and not `var(--color-*)`: the raw tokens
     are what shared/style.css defines on :root, while the --color-* aliases live in an
     `@theme inline` block meant to be resolved by Tailwind rather than read from hand-written
     CSS.

     The transition sits on the PANEL, not on the Frame: the frame sets the variable, the panel
     is the element whose background-color and border-color resolve through it, and an
     unregistered custom property does not animate on its own. */
.rc-lift [data-slot='frame-panel'][data-v-71a8cef7] {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rc-lift[data-v-71a8cef7]:hover,
  .rc-lift[data-v-71a8cef7]:focus-within {
    --frame-panel-border-color: color-mix(in oklab, var(--rc-accent) 55%, var(--border));
    --frame-panel-bg: color-mix(in oklab, var(--rc-accent) 6%, var(--background));
}
@media (pointer: coarse) {
.rc-lift[data-v-71a8cef7] {
      --frame-panel-border-color: color-mix(in oklab, var(--rc-accent) 55%, var(--border));
      --frame-panel-bg: color-mix(in oklab, var(--rc-accent) 6%, var(--background));
}
}
@media (prefers-reduced-motion: reduce) {
.rc-lift [data-slot='frame-panel'][data-v-71a8cef7] {
      transition: none;
}
}