/*
 * split.this — shared "glass surface" recipe (D16).
 *
 * This file is loaded two ways:
 *   1. Directly via <link> in index.html, for light-DOM shell chrome (e.g. app-root's own
 *      top-level nav before it delegates to shadow children).
 *   2. Fetched as text and turned into a CSSStyleSheet by js/lib/glass.js, then pushed onto
 *      shadowRoot.adoptedStyleSheets so every component gets the same rules without duplicating
 *      this CSS inline in every component's template.
 *
 * R5 (perf): backdrop-filter blur is reserved for CARD/host-level surfaces — chrome, cards,
 * sheets, modals, nav. Apply `.glass` (or `:host(.glass)`) to a BOUNDED number of surfaces per
 * screen. List rows must use `.row-fill` / `.row-fill-alt` (flat translucent color, no blur) —
 * see expense-ledger.js / balance-sheet.js.
 */

.glass,
:host(.glass) {
  position: relative;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-continuous);
  border: 1px solid color-mix(in srgb, var(--glass-hairline) 74%, transparent);
  box-shadow: var(--glass-elev-2),
    inset 0 1px 0 0 var(--glass-stroke),
    inset 0 0 0 var(--glass-stroke-width) color-mix(in srgb, var(--glass-stroke) 60%, transparent);
  isolation: isolate;
  overflow: clip;
}

@supports (corner-shape: squircle) {
  .glass,
  :host(.glass) {
    corner-shape: squircle;
  }
}

.glass::before,
:host(.glass)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-specular);
  opacity: 0.9;
}

/* Elevation modifiers: raise a glass surface (e.g. a modal/sheet above a card). */
.glass--elev-1,
:host(.glass--elev-1) {
  box-shadow: var(--glass-elev-1), inset 0 1px 0 0 var(--glass-stroke);
}

.glass--elev-3,
:host(.glass--elev-3) {
  box-shadow: var(--glass-elev-3), inset 0 1px 0 0 var(--glass-stroke);
}

/* Interactive glass surfaces (buttons, chips) get a hover/active lift — cheap, no extra blur. */
.glass--interactive,
:host(.glass--interactive) {
  transition: transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.glass--interactive:hover,
:host(.glass--interactive:hover) {
  transform: translateY(-1px);
  box-shadow: var(--glass-elev-3), inset 0 1px 0 0 var(--glass-stroke);
}

.glass--interactive:active,
:host(.glass--interactive:active) {
  transform: translateY(0);
}

/*
 * R5: flat row fills for dense lists (expense-ledger rows, balance-sheet rows). NEVER pair
 * these with backdrop-filter — that's exactly the per-row blur cost R5 forbids.
 */
.row-fill {
  background: var(--row-fill);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--row-border) 78%, transparent);
}

.row-fill--alt {
  background: var(--row-fill-alt);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--row-border) 68%, transparent);
}

/* Semantic accents usable inside any glass surface without hardcoding color. */
.text-owed-to-you {
  color: var(--color-owed-to-you);
}

.text-you-owe {
  color: var(--color-you-owe);
}

/* Shared component vocabulary for the no-build Web Components stack. This sits in the adopted
   stylesheet so it normalizes controls across shadow roots without a bundled UI framework. */
button,
input,
select,
textarea {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  min-height: 2.75rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-border-strong) 76%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-control-fill);
  color: var(--color-text-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 52%, transparent),
    0 1px 1px color-mix(in srgb, var(--neutral-900) 4%, transparent);
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-control-placeholder);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  background: var(--color-control-fill-hover);
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border-strong));
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

button {
  min-height: 2.5rem;
  touch-action: manipulation;
  transition:
    transform var(--duration-fast) var(--easing-emphasized),
    box-shadow var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

button:not(:disabled):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active {
  transform: translateY(0) scale(0.99);
}

button.primary,
button[type="submit"]:not(.secondary):not(.link-button) {
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--color-primary) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 34%, transparent);
}

button.primary:not(:disabled):hover,
button[type="submit"]:not(.secondary):not(.link-button):not(:disabled):hover {
  box-shadow:
    0 16px 36px color-mix(in srgb, var(--color-primary) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 40%, transparent);
}

button.secondary,
.load-more {
  border: 1px solid color-mix(in srgb, var(--row-border) 88%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 38%, transparent);
}

.row,
.participant-row,
.item-row,
.item-editor-row,
.member-row,
.settlement-row {
  border: 1px solid color-mix(in srgb, var(--row-border) 76%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 30%, transparent);
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-emphasized);
}

.row:hover,
.participant-row:hover,
.item-row:hover,
.item-editor-row:hover,
.member-row:hover,
.settlement-row:hover {
  background: var(--row-fill-hover);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--row-border));
}

.row:active {
  transform: scale(0.995);
}

label {
  font-weight: 500;
}

/*
 * prefers-reduced-transparency: tokens.css's --glass-tint/--glass-blur/--glass-saturate already
 * collapse to solid/zero values here, but M6.3's R5 audit found that leaving `backdrop-filter`
 * declared as `blur(0px) saturate(1)` (an identity filter, computed from those zeroed tokens)
 * doesn't reliably guarantee the browser skips creating a backdrop-filter compositing layer —
 * some engines allocate the layer based on the property being *present*, not on whether its
 * arguments happen to be no-ops. Force it to `none` outright (design-language.md §7's
 * authoritative recipe) so this is a real, verifiable "no backdrop-filter" state, not just a
 * visually-equivalent one. We also drop the inset specular stroke's translucency assumption here
 * for crisp edges.
 */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  :host(.glass) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--glass-elev-2), inset 0 0 0 1px var(--glass-stroke);
  }

  .glass::before,
  :host(.glass)::before {
    display: none;
  }
}

/*
 * prefers-reduced-motion: tokens.css already zeroes --duration-fast/--duration-base, which
 * neuters `.glass--interactive`'s hover/active transition timing in practice. This explicit
 * override is defense-in-depth at the shared-recipe level (design-language.md §7's authoritative
 * `.glass-surface { transition: none; }` rule) so any glass-surface transition/entrance animation
 * is guaranteed off here regardless of whether a future consumer remembers to use the duration
 * tokens.
 */
@media (prefers-reduced-motion: reduce) {
  .glass,
  :host(.glass),
  .glass--interactive,
  :host(.glass--interactive),
  button,
  input,
  select,
  textarea,
  .row,
  .participant-row,
  .item-row,
  .item-editor-row,
  .member-row,
  .settlement-row {
    transition: none;
  }
}

/*
 * M6.4 (a11y, design-language.md §7): the shared double-ring `:focus-visible` recipe. This file
 * is already adopted into every component's shadow root (js/lib/glass.js's `adoptGlass()`), so
 * putting the ring rules HERE — rather than duplicating them per component — is what makes them
 * reachable inside every shadow root for free. Deliberately generic (not scoped to `.glass`): a
 * bare `:focus-visible` matches every native control (button/input/select/a) AND any custom
 * `tabindex` row (expense-ledger/search-view rows) inside ANY shadow root that has adopted this
 * sheet, whether that root uses `.glass` or is flat. Keyed on `:focus-visible`, never `:focus`,
 * so a mouse/touch activation never shows a ring while keyboard navigation always does.
 *
 * The inner ring's color is --color-surface-base (the app-wide page background, not the local
 * surface's own tint) so it reads as a "cut" between the control's edge and the outer colored
 * ring on both glass and flat surfaces alike — matching the authoritative recipe.
 */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-surface-base),
    0 0 0 5px var(--color-primary);
  transition: box-shadow var(--duration-fast) var(--easing-standard);
}

/* Glass surfaces keep their elevation shadow layered under the ring (design-language.md §7's
   `.glass-surface:focus-visible` recipe) so a focused card/sheet/nav doesn't visually lose its
   depth while focused. Matches `.glass--interactive:hover`'s specificity (one class + one
   pseudo-class) and is declared after it, so a simultaneously-hovered-and-focused control still
   shows the ring rather than losing the tie to the hover rule above. */
.glass:focus-visible,
:host(.glass:focus-visible) {
  box-shadow:
    var(--glass-elev-2),
    0 0 0 3px var(--color-surface-base),
    0 0 0 5px var(--color-primary);
}

/*
 * Coral outer ring for destructive / "you owe" / dispute affordances (design-language.md §7:
 * "use --color-accent instead of --color-primary for the outer ring on destructive/coral-context
 * controls") — components opt in with `.focus-ring-accent` on the control itself (e.g. a delete
 * button, a dispute Resolve/Dismiss action, a conflict Discard action).
 */
.focus-ring-accent:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-surface-base),
    0 0 0 5px var(--color-accent);
}

.glass.focus-ring-accent:focus-visible,
:host(.glass.focus-ring-accent:focus-visible) {
  box-shadow:
    var(--glass-elev-2),
    0 0 0 3px var(--color-surface-base),
    0 0 0 5px var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  :focus-visible,
  .focus-ring-accent:focus-visible {
    transition: none;
  }
}