/* Hammer web design · option 03, Floating detail sheet.
   Shared by public, member, staff, owner and standalone web layouts. */
@media screen {
  html:root :is(body, #app)[data-hammer-web-ui] {
    --hw-base: #161b24;
    --hw-content: #252c37;
    --hw-glass: rgba(32, 39, 51, .74);
    --hw-edge: rgba(255, 255, 255, .28);
    --hw-line: rgba(224, 233, 247, .14);
    --hw-ink: #f5f6f8;
    --hw-muted: #bec5ce;
    --hw-accent: #ffd28a;
    --hw-accent-glass: rgba(255, 210, 138, .13);
    --hw-accent-edge: rgba(255, 210, 138, .45);
    --hw-warm: #75562d;
    --hw-cool: #2d4e72;
    --hw-warm-wash: rgba(117, 86, 45, .18);
    --hw-cool-wash: rgba(45, 78, 114, .35);
    --hw-field: rgba(18, 25, 36, .78);
    --hw-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 -1px 1px rgba(255, 255, 255, .12);
    --hw-ease: cubic-bezier(.22, 1, .36, 1);
    --hw-font: 'Hammer UI Digits', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hg-blue: var(--hw-accent);
    --hg-line: var(--hw-line);
    --hg-glass: var(--hw-glass);
    --hcg-surface: var(--hw-glass);
    --hcg-rim: var(--hw-edge);
    --hcg-ink: var(--hw-ink);
    --hcg-muted: var(--hw-muted);
    --hm-bg: var(--hw-base);
    --hm-panel: var(--hw-glass);
    --hm-border: var(--hw-line);
    --hm-text: var(--hw-ink);
    --hm-muted: var(--hw-muted);
    --hm-gold: var(--hw-accent);
    --hp-ink: var(--hw-ink);
    --hp-paper: var(--hw-base);
    --hp-midnight: var(--hw-base);
    --hp-muted: var(--hw-muted);
    --hp-copper: var(--hw-accent);
    --hp-copper-dark: var(--hw-accent);
    --hp-line: var(--hw-line);
    --hpa-line: var(--hw-line);
    --hpa-muted: var(--hw-muted);
    --bg: var(--hw-base);
    --panel: var(--hw-glass);
    --raised: var(--hw-content);
    --line: var(--hw-line);
    --text: var(--hw-ink);
    --muted: var(--hw-muted);
    color-scheme: dark;
    color: var(--hw-ink) !important;
    background: radial-gradient(ellipse at 100% 100%, var(--hw-warm-wash), transparent 58%), radial-gradient(ellipse at 0 0, var(--hw-cool-wash), transparent 58%), var(--hw-base) !important;
    min-width: 0;
    accent-color: var(--hw-accent);
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(#app, .facade, .hm-main, .hp-auth, .hra-member, .hm-member-shell) { background: transparent !important; }
  html:root :is(body, #app)[data-hammer-web-ui] .hammer-soft-glass-page {
    --hg-blue: var(--hw-accent); --hg-line: var(--hw-line); --hg-glass: var(--hw-glass);
    --hpa-line: var(--hw-line); --hpa-muted: var(--hw-muted);
  }

  /* Reuse the same floating material across each module's existing components. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(.box, .card, .hw-surface, .hm-panel, .hm-stat, .hm-stats, .ho-panel, .ho-card, .hpa-panel, .hra-panel, .hra-metric, .hai-panel, .hat-panel, .hib-panel, .hib-form-panel, .hib-member-card, .hds-panel, .hmo-card, .hm-card, .hmc-card, .atlas-panel, .attention-panel, .exercise-card, .hls-inbody, .ha-ai-entry, .hp-auth-panel, .hp-package, .hp-trainer, .hmb-folder, .metric, .hm-membership-strip) {
    background: var(--hw-glass) !important;
    border: 1px solid var(--hw-edge) !important;
    border-radius: 24px !important;
    color: var(--hw-ink) !important;
    box-shadow: var(--hw-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    min-width: 0;
  }
  html:root :is(body, #app)[data-hammer-web-ui] .hm-stats > .hm-stat {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hm-topbar, .hp-header, .navbar, .hm-sidebar, .side, .sticky-footer) {
    background: rgba(22, 27, 36, .88) !important; border-color: var(--hw-line) !important;
    color: var(--hw-ink); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hm-workspace, .hm-avatar, .hm-brief-link > i, .hmb-folder-icon, .hpa-symbol) {
    background: var(--hw-accent-glass) !important; border-color: var(--hw-accent-edge) !important; color: var(--hw-accent) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hp-eyebrow, .hm-eyebrow, .ho-blue, .hra-eyebrow, .hpa-eyebrow, .hm-action-icon, .hm-action-arrow, .hm-title-dot) { color: var(--hw-accent) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hp-muted, .hm-muted, .hra-muted, .hp-auth-intro, .hp-field-help, .hm-stat-unit, .ho-caption, .has-text-grey, .has-text-grey-light) { color: var(--hw-muted) !important; }

  /* Buttons keep their actions and sizes; every module uses the same finish. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(.button, .btn, .hp-button, .hib-button, .hra-button, .hai-button, .hir-button, .hds-button, .hmc-button, .ho-primary, .ho-outline, .hat-primary, .hm-small-button, .slanted-button, .hls-inbody-action, .primary, .secondary, .text-button, .ho-utilities > a, button.download, button.expand-all, button.full-analysis, button.account, .hp-menu-toggle, .hm-menu-toggle, .hpa-prompts button, .hra-prompts button, .hat-prompts button, .pagination-link, .pagination-previous, .pagination-next) {
    box-sizing: border-box;
    min-height: 44px;
    height: auto;
    padding: 10px 16px;
    border: 1px solid var(--hw-edge) !important;
    border-radius: 19px !important;
    background: var(--hw-glass) !important;
    color: var(--hw-ink) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 -1px 1px rgba(255, 255, 255, .12), 0 4px 15px rgba(0, 0, 0, .12) !important;
    font-family: var(--hw-font) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-shadow: none !important;
    text-transform: none;
    text-decoration: none !important;
    white-space: normal;
    overflow-wrap: break-word;
    transform: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 180ms var(--hw-ease), border-color 180ms var(--hw-ease), color 180ms var(--hw-ease), box-shadow 180ms var(--hw-ease), opacity 180ms var(--hw-ease) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.button.is-primary, .btn-primary, .hp-button, .ho-primary, .hat-primary, .primary, .hra-button:not(.hra-secondary), .hai-button:not(.hai-secondary), .hir-button:not(.hir-secondary), .hib-button:not(.hib-secondary), .hds-button:not(.hds-secondary), .hmc-button, .pagination-link.is-current) {
    background: var(--hw-accent-glass) !important; border-color: var(--hw-accent-edge) !important; color: var(--hw-accent) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hm-action) {
    background: var(--hw-content) !important; border: 1px solid var(--hw-edge) !important; border-radius: 24px !important;
    color: var(--hw-ink) !important; box-shadow: var(--hw-shadow) !important; transform: none !important;
  }
  @media (hover: hover) {
    html:root :is(body, #app)[data-hammer-web-ui] :is(.button, .btn, .hp-button, .hib-button, .hra-button, .hai-button, .hir-button, .hds-button, .hmc-button, .ho-primary, .ho-outline, .hat-primary, .hm-small-button, .primary, .secondary, .text-button, .ho-utilities > a, button.download, button.expand-all, button.full-analysis, button.account, .hp-menu-toggle, .hm-menu-toggle, .hpa-prompts button, .hra-prompts button, .pagination-link, .pagination-previous, .pagination-next):hover:not(:disabled):not([aria-disabled="true"]) {
      background: rgba(76, 86, 104, .74) !important; border-color: rgba(255, 255, 255, .58) !important; color: var(--hw-ink) !important;
    }
    html:root :is(body, #app)[data-hammer-web-ui] :is(.button.is-primary, .btn-primary, .hp-button, .ho-primary, .hat-primary, .primary, .hra-button:not(.hra-secondary), .hai-button:not(.hai-secondary), .hir-button:not(.hir-secondary), .hib-button:not(.hib-secondary), .hds-button:not(.hds-secondary), .hmc-button):hover:not(:disabled) {
      background: rgba(255, 210, 138, .22) !important; border-color: var(--hw-accent) !important; color: var(--hw-accent) !important;
    }
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.button, .btn, .hp-button, .hib-button, .hra-button, .hai-button, .hir-button, .ho-primary, .hm-small-button, .primary, .secondary):active:not(:disabled) {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .08), inset 0 1px 1px rgba(255, 255, 255, .5) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(button:disabled, .button[disabled], [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.dialog-close, .ho-sheet .ho-section-heading > a, .hm-nav-close, .remove-line, .hpc-remove) {
    place-items: center; min-width: 44px; min-height: 44px; padding: 0;
    border: 1px solid var(--hw-edge) !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, .1) !important; color: var(--hw-ink) !important;
  }

  /* Inputs, pickers, and selected tabs belong to the same material family. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="color"]), textarea, select, .select2-selection--single, .vs__dropdown-toggle) {
    box-sizing: border-box; min-height: 44px; max-width: 100%; border: 1px solid var(--hw-edge) !important;
    border-radius: 13px !important; background: var(--hw-field) !important; color: var(--hw-ink) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16) !important; caret-color: var(--hw-accent);
    font-family: var(--hw-font); font-size: 16px;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.ho-search > input, .vs__search, .select2-search__field) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(input, textarea)::placeholder { color: var(--hw-muted) !important; opacity: 1; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(input, textarea):-webkit-autofill { -webkit-text-fill-color: var(--hw-ink); -webkit-box-shadow: 0 0 0 1000px var(--hw-base) inset !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--hw-accent) !important; outline-offset: 3px; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hg-tabs, #hammer-member-menu.hnm-nav) {
    background: var(--hw-glass) !important; border-color: var(--hw-edge) !important; border-radius: 27px !important;
    box-shadow: var(--hw-shadow) !important; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  }
  html:root :is(body, #app)[data-hammer-web-ui] .hg-tabs :is(a, button, [role="tab"]) { color: var(--hw-muted) !important; background: transparent !important; border-radius: 21px !important; box-shadow: none !important; }
  html:root :is(body, #app)[data-hammer-web-ui] .hg-tabs::before {
    background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .48), inset 0 -1px 1px rgba(255, 255, 255, .16) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] .hg-tabs :is(.hg-tab-selected, [aria-selected="true"], [aria-current="page"], .is-selected) { color: var(--hw-accent) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.navbar-dropdown, .dropdown-content, .select2-dropdown, .vs__dropdown-menu, .flatpickr-calendar) {
    background: var(--hw-content) !important; border: 1px solid var(--hw-edge) !important;
    color: var(--hw-ink) !important; border-radius: 19px !important; box-shadow: var(--hw-shadow) !important;
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.select2-selection__rendered, .vs__selected, .flatpickr-day, .flatpickr-weekday, .flatpickr-current-month) { color: var(--hw-ink) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.flatpickr-day.selected, .select2-results__option--highlighted, .vs__dropdown-option--highlight) { background: var(--hw-accent-glass) !important; color: var(--hw-accent) !important; border-color: var(--hw-accent-edge) !important; }

  /* Option 03: inset, floating sheets with a soft entrance and steady text. */
  html:root :is(body, #app)[data-hammer-web-ui] :is(.ho-sheet, .modal-card, .profile-dialog) {
    background: var(--hw-glass) !important; border: 1px solid var(--hw-edge) !important;
    border-radius: 27px !important; color: var(--hw-ink) !important; box-shadow: var(--hw-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
    max-height: calc(90vh - 24px); max-height: calc(90dvh - env(safe-area-inset-bottom) - 24px);
  }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.modal-card-head, .modal-card-body, .modal-card-foot) { background: transparent !important; border-color: var(--hw-line) !important; color: var(--hw-ink) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.modal-card-head, .modal-card-foot) { flex-wrap: wrap; gap: 12px; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.modal-background, .ho-sheet-backdrop) { background: rgba(10, 19, 32, .32) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] .profile-dialog::backdrop { background: rgba(10, 19, 32, .32); }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.modal.is-active .modal-card, .profile-dialog[open]) { animation: hw-sheet-in 460ms var(--hw-ease); }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.ho-detail-rows > div, .hmb-bill, .hmb-list-heading, .hmb-total, .hm-panel-heading, .hm-panel-foot) { border-color: var(--hw-line) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.hmb-receipt, .hra-consent, .ha-consent) { background: var(--hw-field) !important; border-color: var(--hw-line) !important; border-radius: 16px; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.table, table) { background: transparent; color: var(--hw-ink); }
  html:root :is(body, #app)[data-hammer-web-ui] :is(td, th) { border-color: var(--hw-line) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] thead th { background: rgba(22, 27, 36, .7) !important; color: var(--hw-muted) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] .table.is-striped tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025) !important; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.table-container, .table-wrap, .hp-table-scroll, .scroll) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  html:root :is(body, #app)[data-hammer-web-ui] .container:has(> table) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  html:root :is(body, #app)[data-hammer-web-ui] :is(.buttons, .hm-inline-actions, .hm-heading-actions, .hra-toolbar, .hir-actions, .hib-actions) { flex-wrap: wrap; gap: 10px; }

  @media (max-width: 600px) {
    html:root :is(body, #app)[data-hammer-web-ui] :is(.button, .btn, .hp-button, .hib-button, .hra-button, .hai-button, .hir-button, .hds-button, .hmc-button, .hm-small-button, .primary, .secondary) { min-height: 44px; max-width: 100%; }
    html:root :is(body, #app)[data-hammer-web-ui] :is(.modal-card, .profile-dialog) { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: auto 12px max(12px, env(safe-area-inset-bottom)); }
    html:root :is(body, #app)[data-hammer-web-ui] .modal { justify-content: flex-end; }
    html:root :is(body, #app)[data-hammer-web-ui] :is(.modal-card-body, .modal-card-head, .modal-card-foot) { padding: 18px; }
    html:root :is(body, #app)[data-hammer-web-ui] .line-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
    html:root :is(body, #app)[data-hammer-web-ui] .line-row > .field:first-child { grid-column: 1 / -1; }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:root :is(body, #app)[data-hammer-web-ui] { --hw-glass: #252c37; --hw-field: #121924; }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html:root :is(body, #app)[data-hammer-web-ui] { --hw-glass: #252c37; --hw-field: #121924; --hw-edge: #93a0b1; }
    html:root :is(body, #app)[data-hammer-web-ui] *, html:root :is(body, #app)[data-hammer-web-ui] *::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html:root :is(body, #app)[data-hammer-web-ui] *, html:root :is(body, #app)[data-hammer-web-ui] *::before, html:root :is(body, #app)[data-hammer-web-ui] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    html:root :is(body, #app)[data-hammer-web-ui] { --hw-ink: CanvasText; --hw-muted: CanvasText; --hw-accent: LinkText; --hw-edge: ButtonText; --hw-line: CanvasText; --hw-glass: Canvas; --hw-field: Field; }
  }
}
@keyframes hw-sheet-in { from { opacity: 0; transform: translateY(32px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }