/* Raised buttons (owner 2026-11-01: "do this to any button we have"; mockup docs/explainers/raised-buttons-mockup.html).
   Loaded by admin.html, adminmobile.html, customer.html, book.html. Scoped under html.bn-raised, set by
   js/shared/bn-raised-buttons.js (preview switch ?raised=1 / ?raised=0, remembered per device).

   That script SORTS each button once as it appears (see its header):
     .bn-r       solid colour     -> full raised look, glow in its own colour (--bn-rc, set inline by the script)
     .bn-r-soft  white/very light -> soft shadow + press, no glow
     .bn-r-tile  tinted see-through -> gentle lift + press (phone In / In care / Out tiles)
     .bn-r-sm    height <= 32px   -> smaller shadow (row icon squares)
   Transparent / icon-only buttons, tabs, chips, nav and close buttons get no class and stay as they are.

   The depth is a translucent highlight/shade layered OVER the button's own background (background-image), so the
   button's colour never changes and inline colours work. Buttons that already had a gradient keep it (data-bn-grad):
   they only get the shadows.

   THEMES: the script MEASURES the page background and adds html.bn-raised-dark on a dark page (pages use different
   theme systems, some none). Base rules = LIGHT values; .bn-raised-dark rules = DARK values. */

html.bn-raised {
  --bn-rc: rgb(0 0 0 / .45);
}
html.bn-raised .bn-r-sm { --bn-gy: 4px; --bn-gb: 10px; --bn-lip: 1.5px; }

/* ---- full raised, DARK ---- */
html.bn-raised.bn-raised-dark .bn-r {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 calc(-1 * var(--bn-lip, 2px)) 0 rgb(0 0 0 / .28),
    0 1px 2px rgb(0 0 0 / .6),
    0 var(--bn-gy, 8px) var(--bn-gb, 20px) -6px color-mix(in srgb, var(--bn-rc) 55%, transparent) !important;
  transition: translate .06s ease, box-shadow .06s ease, opacity .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
/* ---- soft raised (white / light buttons), DARK ---- */
html.bn-raised.bn-raised-dark .bn-r-soft {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .6),
    inset 0 -1px 0 rgb(0 0 0 / .10),
    0 1px 2px rgb(0 0 0 / .45) !important;
  transition: translate .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ---- LIGHT (base) ---- */
html.bn-raised .bn-r {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    inset 0 calc(-1 * var(--bn-lip, 2px)) 0 rgb(0 0 0 / .16),
    0 1px 2px rgb(0 0 0 / .28),
    0 var(--bn-gy, 8px) var(--bn-gb, 20px) -8px color-mix(in srgb, var(--bn-rc) 70%, transparent) !important;
}
html.bn-raised .bn-r-soft {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 -1px 0 rgb(0 0 0 / .06),
    0 1px 2px rgb(0 0 0 / .12),
    0 3px 8px -4px rgb(0 0 0 / .18) !important;
}
/* ---- tinted tiles (see-through backgrounds): lift + press only, no highlight line, background untouched ---- */
html.bn-raised .bn-r-tile {
  box-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 4px 10px -5px rgb(0 0 0 / .22) !important;
  transition: translate .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color: transparent;
}
html.bn-raised.bn-raised-dark .bn-r-tile {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .5), 0 5px 12px -5px rgb(0 0 0 / .6) !important;
}

/* ---- the highlight/shade overlay. NOT on a button that already had its own gradient (data-bn-grad): it keeps its
   background untouched and only gets the shadows. ---- */
html.bn-raised.bn-raised-dark .bn-r:not([data-bn-grad="1"])            { background-image: linear-gradient(rgb(255 255 255 / .10), rgb(0 0 0 / .10)) !important; }
html.bn-raised.bn-raised-dark .bn-r-soft:not([data-bn-grad="1"])       { background-image: linear-gradient(rgb(255 255 255 / 0), rgb(0 0 0 / .05)) !important; }
html.bn-raised .bn-r:not([data-bn-grad="1"])                           { background-image: linear-gradient(rgb(255 255 255 / .16), rgb(0 0 0 / .07)) !important; }
html.bn-raised .bn-r-soft:not([data-bn-grad="1"])                      { background-image: linear-gradient(rgb(255 255 255 / 0), rgb(0 0 0 / .03)) !important; }

/* ---- PRESSED (both themes, outranks rest): sinks 1px, light flips to an inner shadow ---- */
html.bn-raised :is(.bn-r, .bn-r-soft, .bn-r-tile):active:not(:disabled):not([aria-disabled="true"]) {
  translate: 0 1px;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .3) !important;
}
html.bn-raised .bn-r:active:not(:disabled):not([aria-disabled="true"]):not([data-bn-grad="1"]) {
  background-image: linear-gradient(rgb(0 0 0 / .08), rgb(0 0 0 / .08)) !important;
}
html.bn-raised :is(.bn-r-soft, .bn-r-tile):active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 2px 3px rgb(0 0 0 / .14) !important;
}

/* ---- DISABLED: flat, no lift ---- */
html.bn-raised :is(.bn-r, .bn-r-soft, .bn-r-tile):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none !important;
  translate: none;
}
html.bn-raised :is(.bn-r, .bn-r-soft, .bn-r-tile):is(:disabled, [aria-disabled="true"]):not([data-bn-grad="1"]) {
  background-image: none !important;
}

/* ---- TILES that are not <button>s (owner 2026-11-02: "main tiles on the app for the admins" + "where you select walks
   or boarding" on the customer side). The sorter only looks at buttons, so these are named here:
     .action-card    phone admin Home tiles (adminmobile.html #actionGrid)
     .layout-card    phone admin layout picker
     .service-option book.html service picker (Boarding / Day Care / Walks ...)
   Raised at rest, sink on press; the SELECTED one (.active / .selected) stays pressed in, like a pushed button.
   Their own backgrounds, borders and colours are untouched. ---- */
html.bn-raised :is(.action-card, .layout-card, .service-option) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -2px 0 rgb(0 0 0 / .07),
    0 1px 2px rgb(0 0 0 / .14),
    0 6px 14px -8px rgb(0 0 0 / .3) !important;
  transition: translate .06s ease, box-shadow .12s ease, transform .2s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
html.bn-raised.bn-raised-dark :is(.action-card, .layout-card, .service-option) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .08),
    inset 0 -2px 0 rgb(0 0 0 / .35),
    0 1px 2px rgb(0 0 0 / .55),
    0 8px 16px -8px rgb(0 0 0 / .75) !important;
}
html.bn-raised .service-option:not(.active):hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -2px 0 rgb(0 0 0 / .07),
    0 2px 3px rgb(0 0 0 / .14),
    0 10px 18px -8px rgb(0 0 0 / .32) !important;
}
html.bn-raised :is(.action-card, .layout-card, .service-option):active,
html.bn-raised :is(.service-option.active, .layout-card.selected, .layout-card.active) {
  translate: 0 1px;
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(0 0 0 / .03) !important;
}
html.bn-raised.bn-raised-dark :is(.action-card, .layout-card, .service-option):active,
html.bn-raised.bn-raised-dark :is(.service-option.active, .layout-card.selected, .layout-card.active) {
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .04) !important;
}
html.bn-raised .service-option.active:hover { transform: none; }
html.bn-raised .layout-card.disabled { box-shadow: none !important; }

/* ---- customer app Book flow (customer.html / customer-beta.html): business, service and pet pickers
   (owner 2026-11-02 screenshot: "these still dont look like buttons"). These cards are a pale grey on a white page,
   so the light version gets a clearer edge: a hairline border, a bottom lip and a deeper drop shadow. A chosen
   business / pet (.selected) stays pressed in. ---- */
html.bn-raised :is(.service-select-item, .business-select-item, .pet-select-item) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 -3px 0 rgb(15 23 42 / .07),
    0 1px 2px rgb(15 23 42 / .12),
    0 10px 20px -10px rgb(15 23 42 / .38) !important;
  border-color: rgb(15 23 42 / .09) !important;
  transition: translate .06s ease, box-shadow .12s ease, transform .15s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
html.bn-raised.bn-raised-dark :is(.service-select-item, .business-select-item, .pet-select-item) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .08),
    inset 0 -3px 0 rgb(0 0 0 / .35),
    0 1px 2px rgb(0 0 0 / .55),
    0 10px 18px -8px rgb(0 0 0 / .75) !important;
  border-color: rgb(255 255 255 / .1) !important;
}
html.bn-raised :is(.service-select-item, .business-select-item, .pet-select-item):active,
html.bn-raised :is(.business-select-item, .pet-select-item).selected {
  translate: 0 1px;
  box-shadow: inset 0 2px 6px rgb(15 23 42 / .16), inset 0 0 0 1px rgb(15 23 42 / .03) !important;
}
html.bn-raised :is(.business-select-item, .pet-select-item).selected { border-color: var(--service-color, var(--teal, #14b8a6)) !important; }
html.bn-raised.bn-raised-dark :is(.service-select-item, .business-select-item, .pet-select-item):active,
html.bn-raised.bn-raised-dark :is(.business-select-item, .pet-select-item).selected {
  box-shadow: inset 0 2px 7px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .04) !important;
}
html.bn-raised .service-select-item.mg-locked { box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.bn-raised :is(.bn-r, .bn-r-soft, .bn-r-tile, .action-card, .layout-card, .service-option,
    .service-select-item, .business-select-item, .pet-select-item) { transition: none; }
}