/* ============================================================================
   Liquid Glass — macOS 26  ·  Glass utility classes
   ----------------------------------------------------------------------------
   The translucent / blurred / edge-lit materials that Tailwind utilities can't
   express on their own. Import AFTER tokens.css. Works with OR without Tailwind
   (the @layer wrapper is optional — see the plain-CSS version note in README).

   Rule of thumb (from the design system):
     • CONTENT sits on opaque surfaces (bg-surface-* / glass-card / glass-window)
     • CHROME that floats over content is glass (glass-bar / glass-popover / …)
       Never blur the content itself.
   ========================================================================== */

@layer components {
  /* ---- Floating chrome materials --------------------------------------- */
  .glass-bar {
    background: var(--material-bar);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    border-bottom: 0.5px solid var(--separator);
  }

  .glass-sidebar {
    background: var(--material-sidebar);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-right: 0.5px solid var(--separator);
  }

  .glass-popover {
    background: var(--material-popover);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 0.5px solid var(--glass-edge);
    border-radius: var(--radius-popover);
    box-shadow: var(--shadow-popover), inset 0 1px 0 var(--glass-highlight);
  }

  .glass-hud {
    background: var(--material-hud);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    color: #fff;
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-popover);
    box-shadow: var(--shadow-popover);
  }

  /* A floating glass capsule (toolbar buttons, pills, controls over glass).
     Uses an INSET highlight + edge stroke instead of a heavy drop shadow. */
  .glass-capsule {
    background: var(--surface-control);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-glass);
  }

  /* ---- Opaque content surfaces ----------------------------------------- */
  .glass-card {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  .glass-window {
    background: var(--surface-window);
    border-radius: var(--radius-window);
    box-shadow: var(--shadow-window);
    border: 0.5px solid var(--separator);
    overflow: hidden;
  }

  /* ---- Control primitives ---------------------------------------------- */
  /* Filled "prominent" button (the single default action). */
  .btn-prominent {
    background: var(--tint-control);
    color: var(--text-on-tint);
    border: none;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-button-tinted);
    font: 500 13px/1 var(--font-system);
    padding: 0 var(--control-pad-x);
    height: var(--control-height);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-standard);
  }
  .btn-prominent:hover { filter: brightness(1.05); }
  .btn-prominent:active { filter: brightness(0.93); }

  /* Neutral bordered button (Cancel and secondary actions). */
  .btn-bordered {
    background: var(--surface-card);
    color: var(--text-primary);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-button), inset 0 0 0 0.5px var(--border-control);
    font: 500 13px/1 var(--font-system);
    padding: 0 var(--control-pad-x);
    height: var(--control-height);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-standard);
  }
  .btn-bordered:active { filter: brightness(0.95); }

  /* Soft tinted button. */
  .btn-tinted {
    background: color-mix(in srgb, var(--tint) 14%, transparent);
    color: var(--tint);
    border: none;
    border-radius: var(--radius-control);
    font: 500 13px/1 var(--font-system);
    padding: 0 var(--control-pad-x);
    height: var(--control-height);
    cursor: pointer;
  }

  /* Inset text field with the blue focus ring. */
  .field {
    background: var(--surface-content);
    color: var(--text-primary);
    border-radius: var(--radius-control);
    box-shadow: inset 0 0 0 1px var(--border-control);
    font: 400 13px/1 var(--font-system);
    height: var(--control-height);
    padding: 0 10px;
    outline: none;
    transition: box-shadow var(--dur-fast) var(--ease-standard);
  }
  .field::placeholder { color: var(--text-tertiary); }
  .field:focus {
    box-shadow: inset 0 0 0 1px var(--tint), 0 0 0 3px var(--focus-ring);
  }
}

/* ---------------------------------------------------------------------------
   Hover / press washes (apply on rows, toolbar buttons, menu items).
   --------------------------------------------------------------------------- */
@layer utilities {
  .wash-hover:hover  { background-color: rgba(120, 120, 128, 0.14); }
  .wash-active:active { filter: brightness(0.93); }
  /* Selected menu/list row: solid tint fill, white text. */
  .row-selected { background-color: var(--tint); color: var(--text-on-tint); }
}