._boot_1rjaa_1 { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; background-color: var(--hs-public-menu-boot-bg, #570d00); pointer-events: none; } ._scrambleButton_1rjaa_11 { display: inline-grid; place-items: center; width: min(17.5rem, calc(100% - 3rem)); min-height: var(--hs-public-menu-boot-button-height, 3rem); padding: var(--hs-public-menu-boot-button-pad-y, 0.65rem) var(--hs-public-menu-boot-button-pad-x, 1.35rem); border: var(--hs-public-menu-boot-button-ring, 1.5px) solid var(--hs-public-online-menu-accent); border-radius: 999px; background: transparent; color: var(--hs-public-online-menu-accent); box-sizing: border-box; } ._scrambleLabel_1rjaa_25 { display: inline-block; min-width: 9.5ch; font-size: var(--hs-public-menu-boot-button-size, 0.8125rem); line-height: 1; font-weight: var(--hs-public-online-menu-lang-weight, 900); letter-spacing: var(--hs-public-online-menu-lang-tracking, 0.08em); text-transform: lowercase; text-align: center; white-space: nowrap; } /* * Local font entrypoint (ported from UI Kit). * Do not import external font CDNs or Google Fonts. */ /* * Material Symbols Outlined — local font, Apache-2.0. * Glyph file: public/fonts/MaterialSymbolsOutlined/MaterialSymbolsOutlined-400.ttf */ @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; src: url("/fonts/MaterialSymbolsOutlined/MaterialSymbolsOutlined-400.ttf") format("truetype"); font-display: swap; } .hs-material-symbol { font-family: var(--hs-font-material-symbols); font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; color: currentColor; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Black.woff2") format("woff2"); font-weight: 900 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Aurulent Sans Mono"; src: url("/fonts/AurulentSansMono/AurulentSansMNerdFontMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Jubel Trial"; src: url("/fonts/Jubel/jubeltrial-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --hs-font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hs-font-mono: "Aurulent Sans Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace; --hs-font-public-menu-logo: "Jubel Trial", var(--hs-font-ui); --hs-font-material-symbols: "Material Symbols Outlined", sans-serif; } body { font-family: var(--hs-font-ui); } code, pre, kbd, samp { font-family: var(--hs-font-mono); } html, body, #root { margin: 0; min-height: 100%; max-width: 100%; overflow-x: clip; } body { font-family: var(--hs-font-ui); background: var(--hs-bg); color: var(--hs-ink); font-size: var(--hs-text-md); line-height: 1.5; } button, input, textarea, select { font: inherit; } * { box-sizing: border-box; } /* ========================================================= HMS UI KIT COLOR TOKENS ONLY Palette: charcoal / indigo / teal / grey / dust No khaki, no moss, no foggy green. ========================================================= */ :root { /* Raw palette: Charcoal */ --hs-color-charcoal-950: #000000; --hs-color-charcoal-900: #090909; --hs-color-charcoal-850: #111111; --hs-color-charcoal-800: #232323; --hs-color-charcoal-700: #2c2c2c; --hs-color-charcoal-600: #353535; /* Raw palette: Japanese Indigo */ --hs-color-indigo-900: #16303d; --hs-color-indigo-850: #193746; --hs-color-indigo-800: #1c3e4e; --hs-color-indigo-700: #224d5f; --hs-color-indigo-650: #255468; --hs-color-indigo-600: #285c70; /* Raw palette: Steel Teal */ --hs-color-teal-700: #3f5a66; --hs-color-teal-650: #486675; --hs-color-teal-600: #517380; --hs-color-teal-500: #60899b; --hs-color-teal-450: #6692a4; --hs-color-teal-400: #6c9bad; /* Raw palette: Mid Grey */ --hs-color-grey-700: #757575; --hs-color-grey-650: #7e7e7e; --hs-color-grey-600: #808080; --hs-color-grey-500: #989898; --hs-color-grey-450: #a1a1a1; --hs-color-grey-400: #aaaaaa; /* Raw palette: Star Dust */ --hs-color-dust-300: #cec4c8; --hs-color-dust-250: #d8d3d1; --hs-color-dust-200: #e2ddda; --hs-color-dust-150: #f2edea; --hs-color-dust-100: #f9f3f1; --hs-color-dust-50: #fefaf8; /* Brand accent */ --hs-color-accent-500: #0317fc; --hs-color-accent-600: #0214d4; --hs-color-accent-400: #3d4dff; } :root, [data-theme="dark"] { color-scheme: dark; /* Core semantic colors */ --hs-bg: var(--hs-color-charcoal-950); --hs-surface: var(--hs-color-charcoal-850); --hs-soft: var(--hs-color-charcoal-800); --hs-line-soft: rgba(170, 170, 170, 0.14); --hs-line: rgba(170, 170, 170, 0.26); --hs-ink: var(--hs-color-dust-50); --hs-muted: var(--hs-color-grey-400); --hs-faint: var(--hs-color-grey-600); --hs-control-border: rgba(170, 170, 170, 0.34); /* Accent colors */ --hs-accent: var(--hs-color-accent-500); --hs-accent-hover: var(--hs-color-accent-400); --hs-accent-ink: var(--hs-color-dust-50); /* State colors without khaki */ --hs-success: var(--hs-color-teal-450); --hs-success-soft: rgba(102, 146, 164, 0.16); --hs-warning: var(--hs-color-indigo-600); --hs-warning-soft: rgba(40, 92, 112, 0.18); --hs-danger: #ef4444; --hs-danger-soft: rgba(239, 68, 68, 0.14); /* Skeleton colors */ --hs-skeleton-bg: rgba(170, 170, 170, 0.12); --hs-skeleton-highlight: rgba(170, 170, 170, 0.22); /* Legacy aliases */ --hs-field: var(--hs-surface); --hs-overlay: rgba(0, 0, 0, 0.72); --hs-hover: rgba(170, 170, 170, 0.08); --hs-selected: var(--hs-success-soft); --hs-focus: rgba(3, 23, 252, 0.38); --hs-disabled: rgba(170, 170, 170, 0.34); --hs-ink-muted: var(--hs-muted); --hs-text-link: var(--hs-accent); --hs-neutral-10: var(--hs-color-charcoal-950); --hs-neutral-20: var(--hs-color-charcoal-850); --hs-neutral-40: var(--hs-color-charcoal-700); --hs-neutral-60: var(--hs-color-grey-600); --hs-neutral-90: var(--hs-ink); --hs-action-10: var(--hs-color-dust-150); --hs-action-20: rgba(3, 23, 252, 0.16); --hs-action-40: rgba(3, 23, 252, 0.24); --hs-action-60: var(--hs-accent); --hs-action-80: var(--hs-color-accent-600); --hs-ruby-9: var(--hs-accent); --hs-ruby-10: var(--hs-accent-hover); --hs-ruby-11: var(--hs-accent); --hs-ruby-12: var(--hs-surface); --hs-status-success: var(--hs-success); --hs-status-warning: var(--hs-warning); --hs-status-danger: var(--hs-danger); --hs-status-danger-soft: var(--hs-danger-soft); } [data-theme="light"] { color-scheme: light; --hs-bg: #e3e3e3; --hs-surface: #f2f2f2; --hs-soft: #8f8f8f; --hs-line-soft: #d6d6d6; --hs-line: #808080; --hs-ink: #212121; --hs-muted: #333333; --hs-faint: #808080; --hs-control-border: #c2c2c2; --hs-accent: var(--hs-color-accent-500); --hs-accent-hover: var(--hs-color-accent-400); --hs-accent-ink: #ffffff; --hs-success: #000b9e; --hs-success-soft: #ffdd00; --hs-warning: #000b9e; --hs-warning-soft: #00638a; --hs-danger: #ef4444; --hs-danger-soft: rgba(239, 68, 68, 0.14); --hs-skeleton-bg: rgba(35, 35, 35, 0.06); --hs-skeleton-highlight: rgba(35, 35, 35, 0.1); --hs-field: #f2f2f2; --hs-overlay: #bfbfbf; --hs-hover: rgba(170, 170, 170, 0.08); --hs-selected: #ffffff; --hs-focus: rgba(3, 23, 252, 0.42); --hs-disabled: rgba(126, 126, 126, 0.34); --hs-ink-muted: var(--hs-muted); --hs-text-link: var(--hs-accent); --hs-neutral-10: var(--hs-bg); --hs-neutral-20: var(--hs-surface); --hs-neutral-40: var(--hs-soft); --hs-neutral-60: var(--hs-faint); --hs-neutral-90: var(--hs-ink); --hs-action-10: var(--hs-surface); --hs-action-20: rgba(3, 23, 252, 0.12); --hs-action-40: rgba(3, 23, 252, 0.2); --hs-action-60: var(--hs-accent); --hs-action-80: var(--hs-color-accent-600); --hs-ruby-9: var(--hs-accent); --hs-ruby-10: var(--hs-accent-hover); --hs-ruby-11: var(--hs-accent); --hs-ruby-12: var(--hs-ink); --hs-status-success: var(--hs-success); --hs-status-warning: var(--hs-warning); --hs-status-danger: #ef4444; --hs-status-danger-soft: var(--hs-danger-soft); } :root { /* Reference ramps — semantic use comes from [data-theme] blocks above */ /* Radix Ruby palette (reference steps 1–8; 9–12 mapped in theme) */ --hs-ruby-1: #fffcfd; --hs-ruby-2: #fff7f8; --hs-ruby-3: #feeaed; --hs-ruby-4: #ffdce1; --hs-ruby-5: #ffced6; --hs-ruby-6: #f8bfc8; --hs-ruby-7: #efacb8; --hs-ruby-8: #e592a3; --hs-ruby-a1: #ff005503; --hs-ruby-a2: #ff002008; --hs-ruby-a3: #f3002515; --hs-ruby-a4: #ff002523; --hs-ruby-a5: #ff002a31; --hs-ruby-a6: #e4002440; --hs-ruby-a7: #ce002553; --hs-ruby-a8: #c300286d; --hs-ruby-a9: #db002cb9; --hs-ruby-a10: #d2002cc4; --hs-ruby-a11: #c10030db; --hs-ruby-a12: #550016e8; --hs-ruby-dark-1: #191113; --hs-ruby-dark-2: #1e1517; --hs-ruby-dark-3: #3a141e; --hs-ruby-dark-4: #4e1325; --hs-ruby-dark-5: #5e1a2e; --hs-ruby-dark-6: #6f2539; --hs-ruby-dark-7: #883447; --hs-ruby-dark-8: #b3445a; --hs-ruby-dark-9: #e54666; --hs-ruby-dark-10: #ec5a72; --hs-ruby-dark-11: #ff949d; --hs-ruby-dark-12: #fed2e1; --hs-ruby-dark-a1: #f4124a09; --hs-ruby-dark-a2: #fe5a7f0e; --hs-ruby-dark-a3: #ff235d2c; --hs-ruby-dark-a4: #fd195e42; --hs-ruby-dark-a5: #fe2d6b53; --hs-ruby-dark-a6: #ff447665; --hs-ruby-dark-a7: #ff577d80; --hs-ruby-dark-a8: #ff5c7cae; --hs-ruby-dark-a9: #fe4c70e4; --hs-ruby-dark-a10: #ff617beb; --hs-ruby-dark-a11: #ff949d; --hs-ruby-dark-a12: #ffd3e2fe; /* Legacy alias */ --hs-ink-muted: var(--hs-muted); /* Category tags — pastel production palette */ --hs-tag-gray-bg: #ecece2; --hs-tag-gray-ink: #41453a; --hs-tag-gray-border: #d8d9ca; --hs-tag-cool-gray-bg: #e7ebec; --hs-tag-cool-gray-ink: #374248; --hs-tag-cool-gray-border: #d2dadd; --hs-tag-warm-gray-bg: #eee7e2; --hs-tag-warm-gray-ink: #4a3f3a; --hs-tag-warm-gray-border: #ddd2ca; --hs-tag-red-bg: #f8dddd; --hs-tag-red-ink: #8a2f32; --hs-tag-red-border: #ecc4c4; --hs-tag-orange-bg: #fae8d4; --hs-tag-orange-ink: #8a5528; --hs-tag-orange-border: #ecd4b4; --hs-tag-magenta-bg: #f5dfea; --hs-tag-magenta-ink: #843456; --hs-tag-magenta-border: #e8c5d6; --hs-tag-purple-bg: #e9e1f4; --hs-tag-purple-ink: #5f477f; --hs-tag-purple-border: #d6c7e9; --hs-tag-blue-bg: #dfe8f3; --hs-tag-blue-ink: #315d8e; --hs-tag-blue-border: #c8d7e8; --hs-tag-cyan-bg: #dcecef; --hs-tag-cyan-ink: #326b75; --hs-tag-cyan-border: #c4dfe4; --hs-tag-teal-bg: #d9ece8; --hs-tag-teal-ink: #2f6b60; --hs-tag-teal-border: #bddbd4; --hs-tag-green-bg: #dcebd8; --hs-tag-green-ink: #3f6f3a; --hs-tag-green-border: #c5dbc0; } /* HMS UI Kit — metrics contract entrypoint (spacing, sizing, typography, motion, layout). Colors live in hs-ui-kit-tokens.css. Token bodies live in ./metrics/*.css — keep import order stable. */ /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Lines — one unified line width for borders, dividers, separators */ --hs-line-width: 1px; --hs-line-color: var(--hs-line-soft); --hs-line-dash-length-ref: 2; --hs-line-dash-gap-ref: 4; --hs-line-dash-length: 2px; --hs-line-dash-gap: 4px; --hs-line-dash-period: calc(var(--hs-line-dash-length) + var(--hs-line-dash-gap)); /* Line hierarchy (see design-principles §7): --hs-line — outer shell / strong contour (modal, menu, segmented control) --hs-line-color — hairline dividers (alias → --hs-line-soft) --hs-control-border — form field chrome */ /* Motion */ --hs-transition-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-transition-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9); /* === Spacing scale — 4pt grid + Carbon 01–08 (src/docs/spacing-contract.md) === */ --hs-space-1: 4px; --hs-space-2: 8px; --hs-space-3: 12px; --hs-space-4: 16px; --hs-space-5: 24px; --hs-space-6: 32px; --hs-space-7: 48px; /* Inset — padding inside a component/surface */ --hs-inset-xs: var(--hs-space-1); --hs-inset-sm: var(--hs-space-2); --hs-inset-md: var(--hs-space-3); --hs-inset-lg: var(--hs-space-4); --hs-inset-xl: var(--hs-space-5); /* Gap — between child elements or between sibling components (parent-owned) */ --hs-gap-xs: var(--hs-space-1); --hs-gap-sm: var(--hs-space-2); --hs-gap-md: var(--hs-space-3); --hs-gap-lg: var(--hs-space-4); --hs-gap-xl: var(--hs-space-5); /* Page / section */ --hs-page-inset: var(--hs-inset-xl); --hs-page-gap: var(--hs-gap-xl); --hs-section-inset: var(--hs-inset-lg); --hs-section-gap: var(--hs-gap-lg); --hs-toolbar-gap: var(--hs-gap-md); /* Page header — one token per edge role (do not mix --hs-space-* on PageHeader) */ --hs-page-header-gap: var(--hs-space-4); --hs-page-header-block-end: var(--hs-space-5); --hs-page-header-block-end-compact: var(--hs-space-2); --hs-page-header-description-gap: var(--hs-space-2); /* Card */ --hs-card-inset: var(--hs-inset-lg); --hs-card-gap: var(--hs-gap-md); --hs-card-header-gap: var(--hs-gap-sm); --hs-card-body-gap: var(--hs-gap-md); --hs-card-footer-gap: var(--hs-gap-sm); /* Modal */ --hs-modal-backdrop-inset: var(--hs-inset-xl); --hs-modal-inset: var(--hs-inset-lg); --hs-modal-inset-compact: var(--hs-inset-md); --hs-modal-gap: var(--hs-gap-lg); --hs-modal-header-gap: var(--hs-gap-md); --hs-modal-body-gap: var(--hs-gap-lg); --hs-modal-footer-gap: var(--hs-gap-sm); /* Form */ --hs-form-gap: var(--hs-gap-md); --hs-form-section-gap: var(--hs-gap-lg); --hs-form-field-gap: var(--hs-space-label); --hs-form-toolbar-gap: var(--hs-gap-compact); --hs-form-toolbar-checkbox-size: var(--hs-checkbox-size); --hs-form-toolbar-checkbox-hit-size: var(--hs-form-field-size-dense-height); --hs-form-grid-gap: var(--hs-gap-md); --hs-form-footer-gap: var(--hs-gap-sm); /* Legacy aliases — prefer --hs-*-inset / --hs-*-gap in new CSS */ --hs-card-padding: var(--hs-card-inset); --hs-modal-padding: var(--hs-modal-inset); --hs-modal-footer-padding-y: var(--hs-inset-sm); --hs-modal-footer-padding-x: var(--hs-modal-inset); --hs-space-modal: var(--hs-modal-inset); --hs-surface-padding-sm: var(--hs-inset-sm); --hs-surface-padding-md: var(--hs-inset-md); --hs-surface-padding-lg: var(--hs-inset-lg); --hs-surface-gap-sm: var(--hs-gap-sm); --hs-surface-gap-md: var(--hs-gap-md); --hs-surface-gap-lg: var(--hs-gap-lg); /* === Numbered scale + layout roles (Stack, doc) === */ /* Numbered scale — parity with IBM Carbon spacing-01..08 (same px steps where we ship them) */ --hs-spacing-00: 0; --hs-spacing-01: var(--hs-space-tight); --hs-spacing-02: var(--hs-space-1); --hs-spacing-03: var(--hs-space-2); --hs-spacing-04: var(--hs-space-3); --hs-spacing-05: var(--hs-space-4); --hs-spacing-06: var(--hs-space-5); --hs-spacing-07: var(--hs-space-6); --hs-spacing-08: var(--hs-space-7); /* Inward roles — alias inset/gap tiers */ --hs-container-padding-compact: var(--hs-inset-sm); --hs-container-padding-default: var(--hs-inset-md); --hs-container-padding-comfortable: var(--hs-inset-lg); --hs-container-gap-compact: var(--hs-gap-sm); --hs-container-gap-default: var(--hs-gap-md); --hs-container-gap-relaxed: var(--hs-gap-lg); /* Outward roles — parent Stack/page grid only */ --hs-stack-gap-compact: var(--hs-gap-md); --hs-stack-gap-default: var(--hs-section-gap); --hs-stack-gap-relaxed: var(--hs-gap-xl); --hs-stack-gap-loose: var(--hs-page-gap); /* Viewport / overlay gutter */ --hs-overlay-inset-default: var(--hs-modal-backdrop-inset); --hs-overlay-inset-compact: var(--hs-modal-inset-compact); /* Scroll chrome (data-hs-scrollbar="minimal" — scrollbar.css) */ --hs-scrollbar-size: 4px; --hs-scrollbar-thumb-min-length: 2rem; --hs-scrollbar-thumb-radius: var(--hs-radius-pill); --hs-scrollbar-track: transparent; --hs-scrollbar-thumb: color-mix(in srgb, var(--hs-muted) 32%, transparent); --hs-scrollbar-thumb-hover: color-mix(in srgb, var(--hs-muted) 50%, transparent); --hs-scrollbar-thumb-active: color-mix(in srgb, var(--hs-ink) 22%, transparent); /* CssTokenSettingsEditor — compact editor rhythm */ --hs-doc-page-gap: var(--hs-space-3); --hs-doc-section-gap: var(--hs-space-2); --hs-doc-section-pad-top: var(--hs-space-2); --hs-doc-copy-control-gap: var(--hs-space-label); --hs-doc-preview-inline-gap: var(--hs-space-2); --hs-doc-preview-stack-gap: var(--hs-space-3); --hs-doc-copy-button-size: var(--hs-table-action-size); --hs-doc-copy-icon-size: var(--hs-table-action-icon-size); --hs-doc-copy-button-bg: color-mix(in srgb, var(--hs-bg) 72%, var(--hs-soft)); --hs-doc-copy-feedback-duration: 2s; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Layout motion */ --hs-motion-duration-layout: 200ms; /* Control height scale — shared by Button data-size and form field hosts */ --hs-control-height: 36px; --hs-control-height-xs: 22px; --hs-control-height-sm: 27px; --hs-control-height-md: 36px; --hs-control-height-lg: 44px; --hs-control-height-icon: 30px; /* Form field sizes (sm · md · lg) — canonical; dense = toolbar tier */ --hs-form-field-size-sm-height: var(--hs-control-height-sm); --hs-form-field-size-md-height: var(--hs-control-height-md); --hs-form-field-size-lg-height: var(--hs-control-height-lg); --hs-form-field-size-dense-height: 27px; --hs-form-field-size-sm-padding-x: var(--hs-control-padding-x-compact); --hs-form-field-size-md-padding-x: var(--hs-control-padding-x); --hs-form-field-size-lg-padding-x: var(--hs-space-4); --hs-form-field-size-dense-padding-x: var(--hs-control-padding-x-compact); --hs-form-field-size-sm-font-size: var(--hs-text-xs); --hs-form-field-size-md-font-size: var(--hs-text-md); --hs-form-field-size-lg-font-size: var(--hs-text-md); --hs-form-field-size-dense-font-size: var(--hs-text-xs); --hs-form-field-size-sm-label-size: var(--hs-text-label); --hs-form-field-size-md-label-size: var(--hs-text-label); --hs-form-field-size-lg-label-size: var(--hs-text-label); --hs-form-field-size-dense-label-size: calc(var(--hs-text-xs) * 0.8); --hs-form-field-size-sm-description-size: var(--hs-text-sm); --hs-form-field-size-md-description-size: var(--hs-text-sm); --hs-form-field-size-lg-description-size: var(--hs-text-sm); --hs-form-field-size-dense-description-size: calc(var(--hs-text-xs) * 0.8); --hs-form-field-size-sm-textarea-min-height: 64px; --hs-form-field-size-md-textarea-min-height: 76px; --hs-form-field-size-lg-textarea-min-height: 96px; --hs-form-field-size-dense-textarea-min-height: calc(3.25rem + 15px); --hs-form-field-size-dense-textarea-padding-y: var(--hs-space-2); --hs-form-field-size-sm-icon-size: var(--hs-control-height-sm); --hs-form-field-size-md-icon-size: var(--hs-control-height-icon); --hs-form-field-size-lg-icon-size: var(--hs-control-height-icon); --hs-form-field-size-dense-icon-size: var(--hs-size-icon-md); --hs-form-field-size-dense-icon-gap: var(--hs-space-1); --hs-form-field-select-chevron-inset: var(--hs-control-padding-x); --hs-form-field-select-chevron-border-top: 5px; --hs-form-field-select-chevron-border-side: 4px; /* File upload dropzone — FileUpload + ImageUploadDialog */ --hs-file-upload-dropzone-min-height: 16rem; --hs-file-upload-dropzone-padding: var(--hs-space-6); --hs-file-upload-dropzone-icon-circle: 3rem; --hs-file-upload-dropzone-icon-size: 32px; --hs-file-upload-dropzone-gap: var(--hs-space-2); /* Density scale — aliases for control-density.css hosts (legacy names) */ --hs-control-density-default-height: var(--hs-form-field-size-md-height); --hs-control-density-default-padding-x: var(--hs-form-field-size-md-padding-x); --hs-control-density-default-font-size: var(--hs-form-field-size-md-font-size); --hs-control-density-default-label-size: var(--hs-form-field-size-md-label-size); --hs-control-density-default-description-size: var(--hs-form-field-size-md-description-size); --hs-control-density-default-textarea-min-height: var(--hs-form-field-size-md-textarea-min-height); --hs-control-density-default-icon-size: var(--hs-form-field-size-md-icon-size); --hs-control-density-compact-height: var(--hs-form-field-size-sm-height); --hs-control-density-compact-padding-x: var(--hs-form-field-size-sm-padding-x); --hs-control-density-compact-font-size: var(--hs-form-field-size-sm-font-size); --hs-control-density-compact-label-size: var(--hs-form-field-size-sm-label-size); --hs-control-density-compact-description-size: var(--hs-form-field-size-sm-description-size); --hs-control-density-compact-textarea-min-height: var(--hs-form-field-size-sm-textarea-min-height); --hs-control-density-compact-icon-size: var(--hs-form-field-size-sm-icon-size); --hs-control-density-large-height: var(--hs-form-field-size-lg-height); --hs-control-density-large-padding-x: var(--hs-form-field-size-lg-padding-x); --hs-control-density-large-font-size: var(--hs-form-field-size-lg-font-size); --hs-control-density-large-label-size: var(--hs-form-field-size-lg-label-size); --hs-control-density-large-description-size: var(--hs-form-field-size-lg-description-size); --hs-control-density-large-textarea-min-height: var(--hs-form-field-size-lg-textarea-min-height); --hs-control-density-large-icon-size: var(--hs-form-field-size-lg-icon-size); --hs-control-density-dense-height: var(--hs-form-field-size-dense-height); --hs-control-density-dense-padding-x: var(--hs-form-field-size-dense-padding-x); --hs-control-density-dense-font-size: var(--hs-form-field-size-dense-font-size); --hs-control-density-dense-label-size: var(--hs-form-field-size-dense-label-size); --hs-control-density-dense-description-size: var(--hs-form-field-size-dense-description-size); --hs-control-density-dense-textarea-min-height: var(--hs-form-field-size-dense-textarea-min-height); --hs-control-density-dense-icon-size: var(--hs-form-field-size-dense-icon-size); --hs-checkbox-size: 20px; --hs-checkbox-hit-padding: 5px; --hs-checkbox-hit-size: 24px; --hs-checkbox-radius: var(--hs-radius-sm); --hs-checkbox-surface: var(--hs-surface); --hs-checkbox-border-color: var(--hs-control-border); --hs-checkbox-checked-color: var(--hs-accent); --hs-checkbox-checkmark-color: #ffffff; --hs-button-min-width-outline: 116px; --hs-button-min-width-primary: 96px; /* Semantic status */ --hs-status-published: rgba(48, 132, 82, 0.72); --hs-status-published-border: rgba(48, 132, 82, 0.88); --hs-status-draft: rgba(181, 123, 28, 0.62); --hs-status-draft-border: rgba(181, 123, 28, 0.78); --hs-status-hidden: rgba(123, 130, 116, 0.34); --hs-status-hidden-border: rgba(123, 130, 116, 0.48); --hs-status-dot-size: calc(var(--hs-size-icon-sm) * 0.9); --hs-status-info: #175cd3; --hs-tag-density-sm: 20px; --hs-tag-max-width: 220px; --hs-tag-height-md: 24px; --hs-tag-height-lg: 32px; --hs-tag-composer-width: 96px; --hs-tag-remove-size: 18px; --hs-tag-icon-size: 14px; /* Radius */ } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-radius-sm: 6px; --hs-radius-md: 8px; --hs-radius-pill: 999px; /* Public guest menu actions — cards & QR menu (not admin Button) */ --hs-public-menu-action-height: 31px; --hs-public-menu-action-min-width: 88px; --hs-public-menu-action-radius: var(--hs-radius-pill); --hs-public-menu-action-font-size: var(--hs-text-sm); --hs-public-menu-action-font-weight: var(--hs-font-weight-semibold); --hs-public-menu-action-fg: #ffffff; --hs-public-menu-quantity-height: var(--hs-public-menu-quantity-height-md); --hs-public-menu-quantity-text: var(--hs-public-menu-quantity-text-md); --hs-public-menu-quantity-glyph-text: var(--hs-public-menu-quantity-glyph-md); --hs-public-menu-quantity-weight: var(--hs-font-weight-semibold); --hs-public-menu-quantity-value-padding-inline: var(--hs-space-1); --hs-public-menu-quantity-height-sm: var(--hs-public-menu-add-height-sm); --hs-public-menu-quantity-height-md: var(--hs-public-menu-add-height-md); --hs-public-menu-quantity-height-lg: var(--hs-public-menu-add-height-lg); --hs-public-menu-quantity-min-width-sm: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-quantity-min-width-md: var(--hs-public-menu-add-min-width-md); --hs-public-menu-quantity-min-width-lg: var(--hs-public-menu-add-min-width-lg); --hs-public-menu-quantity-text-sm: var(--hs-text-2xs); --hs-public-menu-quantity-text-md: var(--hs-text-xs); --hs-public-menu-quantity-text-lg: var(--hs-text-sm); --hs-public-menu-quantity-glyph-sm: var(--hs-text-sm); --hs-public-menu-quantity-glyph-md: var(--hs-text-md); --hs-public-menu-quantity-glyph-lg: var(--hs-text-md); --hs-public-menu-quantity-outline-bg: #ffffff; --hs-public-menu-quantity-outline-border: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-outline-fg: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-outline-hover: #f9ecee; --hs-public-menu-quantity-soft-bg: #f5e8eb; --hs-public-menu-quantity-soft-fg: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-soft-hover: #ecd8de; --hs-public-menu-icon-size: var(--hs-control-height-sm); /* PublicMenuAddButton — fixed burgundy CTA (guest cards); unified size @ artboard scale */ --hs-public-menu-add-bg: #681c22; --hs-public-menu-add-bg-hover: #521222; --hs-public-menu-add-fg: #ffffff; --hs-public-menu-add-height-ref: 31; --hs-public-menu-add-min-width-ref: 88; --hs-public-menu-add-font-size-ref: 12; --hs-public-menu-add-padding-inline-ref: 12; --hs-public-menu-add-height-sm: calc(var(--hs-public-menu-add-height-ref) * 1px); --hs-public-menu-add-height-md: var(--hs-public-menu-add-height-sm); --hs-public-menu-add-height-lg: var(--hs-public-menu-add-height-sm); --hs-public-menu-add-min-width-sm: calc(var(--hs-public-menu-add-min-width-ref) * 1px); --hs-public-menu-add-min-width-md: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-add-min-width-lg: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-add-font-size-sm: calc(var(--hs-public-menu-add-font-size-ref) * 1px); --hs-public-menu-add-font-size-md: var(--hs-public-menu-add-font-size-sm); --hs-public-menu-add-font-size-lg: var(--hs-public-menu-add-font-size-sm); --hs-public-menu-add-padding-sm: 0 calc(var(--hs-public-menu-add-padding-inline-ref) * 1px); --hs-public-menu-add-padding-md: var(--hs-public-menu-add-padding-sm); --hs-public-menu-add-padding-lg: var(--hs-public-menu-add-padding-sm); /* Public menu actions — unitless refs for cqw scale on guest card hosts */ --hs-public-menu-action-radius-ref: 200; --hs-public-menu-icon-size-ref: 27; --hs-public-menu-add-height-sm-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-height-md-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-height-lg-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-min-width-sm-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-min-width-md-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-min-width-lg-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-font-size-sm-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-font-size-md-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-font-size-lg-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-padding-inline-sm-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-add-padding-inline-md-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-add-padding-inline-lg-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-quantity-text-ref: 10; --hs-public-menu-quantity-glyph-ref: 13; --hs-public-menu-quantity-text-sm-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-text-md-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-text-lg-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-glyph-sm-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-glyph-md-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-glyph-lg-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-value-padding-inline-ref: 4; /* Guest card photo upload — shared refs (cocktail + dish artboards) */ --hs-public-guest-photo-upload-icon-ref: 48; --hs-public-guest-photo-upload-title-ref: 12; --hs-public-guest-photo-upload-help-ref: 10; --hs-public-guest-photo-upload-gap-ref: 8; --hs-public-guest-photo-upload-radius-ref: 12; --hs-public-guest-photo-upload-title-leading: 1.2; --hs-public-guest-photo-upload-help-leading: 1.2; /* Public cocktail card — layout via GridCol span 1 · sm 2 · md 4 (two per row on 4/8/16) */ /* Reference 182×372 — cqw/cqh in publicCocktailCardScale.module.css */ --hs-public-cocktail-width-ref: 182; --hs-public-cocktail-height-ref: 372; --hs-public-cocktail-radius-ref: 28; --hs-radius-public-cocktail: var(--hs-public-cocktail-radius-ref); --hs-public-cocktail-aspect: 182 / 372; /* Guest palette — fixed hex; not tied to data-theme */ --hs-public-cocktail-surface: #ffffff; --hs-public-cocktail-ink: #64172b; --hs-public-cocktail-body-ink: #092715; --hs-public-cocktail-accent: var(--hs-public-cocktail-ink); --hs-public-cocktail-accent-hover: #521222; --hs-public-cocktail-action-fg: #ffffff; --hs-public-cocktail-chrome-surface: #ffffff; --hs-public-cocktail-chrome-muted: rgba(9, 39, 21, 0.56); --hs-public-cocktail-chrome-line: rgba(9, 39, 21, 0.18); --hs-public-cocktail-chrome-control-border: rgba(9, 39, 21, 0.24); --hs-public-cocktail-chrome-hover: rgba(9, 39, 21, 0.08); --hs-public-cocktail-chrome-ink: #092715; --hs-public-cocktail-chrome-focus: #092715; --hs-public-cocktail-emphasis-weight: var(--hs-font-weight-extrabold); --hs-public-cocktail-info-inset-right-ref: 14; --hs-public-cocktail-info-inset-bottom-ref: 16; --hs-public-cocktail-info-width-ref: 104; /* Legacy alias — slot width uses --hs-public-menu-add-min-width-md (guestMenuActionsScale). */ --hs-public-cocktail-action-width-ref: var(--hs-public-menu-add-min-width-md-ref); --hs-public-cocktail-tag-inset-top-ref: 16; --hs-public-cocktail-tag-inset-left-ref: 14; --hs-public-cocktail-tag-text-ref: 10; --hs-public-cocktail-tag-weight: 600; --hs-public-cocktail-tag-leading: 1; --hs-public-cocktail-tag-tracking: -0.01em; --hs-public-cocktail-tag-padding-inline-ref: 8; --hs-public-cocktail-copy-gap-ref: 8; --hs-public-cocktail-meta-inline-gap-ref: 8; --hs-public-cocktail-action-gap-ref: 8; --hs-public-cocktail-info-gap-ref: 8; --hs-public-cocktail-title-size-ref: 17; --hs-public-cocktail-title-weight: 900; --hs-public-cocktail-title-leading: 1.02; --hs-public-cocktail-title-tracking: -0.055em; --hs-public-cocktail-ingredients-text-ref: 7; --hs-public-cocktail-ingredients-weight: 600; --hs-public-cocktail-ingredients-leading: 1.16; --hs-public-cocktail-ingredients-tracking: -0.01em; --hs-public-cocktail-meta-text-ref: 7; --hs-public-cocktail-meta-weight: 600; --hs-public-cocktail-meta-leading: 1.16; --hs-public-cocktail-meta-tracking: -0.01em; --hs-public-cocktail-back-text-ref: 12; --hs-public-cocktail-back-text-weight: 600; --hs-public-cocktail-back-text-leading: 1.16; --hs-public-cocktail-back-text-tracking: -0.01em; --hs-public-cocktail-back-ingredients-text-ref: 10; --hs-public-cocktail-back-ingredients-weight: 600; --hs-public-cocktail-back-ingredients-leading: 1.16; --hs-public-cocktail-back-ingredients-tracking: -0.01em; --hs-public-cocktail-back-ingredients-offset-ref: 24; --hs-public-cocktail-photo-upload-icon-ref: var(--hs-public-guest-photo-upload-icon-ref); --hs-public-cocktail-photo-upload-title-ref: var(--hs-public-guest-photo-upload-title-ref); --hs-public-cocktail-photo-upload-help-ref: var(--hs-public-guest-photo-upload-help-ref); --hs-public-cocktail-photo-upload-gap-ref: var(--hs-public-guest-photo-upload-gap-ref); --hs-public-cocktail-photo-upload-radius-ref: var(--hs-public-guest-photo-upload-radius-ref); --hs-public-cocktail-photo-upload-title-leading: var(--hs-public-guest-photo-upload-title-leading); --hs-public-cocktail-photo-upload-help-leading: var(--hs-public-guest-photo-upload-help-leading); --hs-public-menu-action-bg: var(--hs-public-menu-add-bg); --hs-public-menu-action-bg-hover: var(--hs-public-menu-add-bg-hover); --hs-public-cocktail-action-height: var(--hs-public-menu-action-height); --hs-public-cocktail-action-radius: var(--hs-public-menu-action-radius); --hs-public-cocktail-quantity-text: var(--hs-public-menu-quantity-text); --hs-public-cocktail-quantity-glyph-text: var(--hs-public-menu-quantity-glyph-text); --hs-public-cocktail-quantity-weight: var(--hs-public-menu-quantity-weight); --hs-public-cocktail-quantity-value-padding-inline: var(--hs-public-menu-quantity-value-padding-inline); --hs-quantity-stepper-radius: var(--hs-public-menu-action-radius); /* Photo — height 100%, centered; imagePlacement offsets + scale */ --hs-public-cocktail-image-height: 100%; --hs-public-cocktail-image-offset-x: 0%; --hs-public-cocktail-image-offset-y: 0%; --hs-public-cocktail-image-scale: 1; /* Public menu dish card — 350×350; chroma → public-menu + semantic tokens; cqw in publicMenuDishCardScale */ --hs-public-menu-dish-width-ref: 350; --hs-public-menu-dish-height-ref: 350; --hs-public-menu-dish-radius-ref: 28; --hs-public-menu-dish-aspect: 1 / 1; /* Guest palette — fixed hex; not tied to data-theme (same rule as public cocktail card) */ --hs-public-menu-dish-surface: #ececec; --hs-public-menu-dish-title-ink: var(--hs-public-menu-add-bg); --hs-public-menu-dish-body-ink: var(--hs-public-cocktail-body-ink); --hs-public-menu-dish-price-ink: var(--hs-public-menu-add-bg); --hs-public-menu-dish-media-fallback: #e2e2e2; --hs-public-menu-dish-divider-color: var(--hs-public-menu-card-content-divider-color); --hs-public-menu-dish-image-height-ref: 205; --hs-public-menu-dish-photo-upload-icon-ref: var(--hs-public-guest-photo-upload-icon-ref); --hs-public-menu-dish-photo-upload-title-ref: var(--hs-public-guest-photo-upload-title-ref); --hs-public-menu-dish-photo-upload-help-ref: var(--hs-public-guest-photo-upload-help-ref); --hs-public-menu-dish-photo-upload-gap-ref: var(--hs-public-guest-photo-upload-gap-ref); --hs-public-menu-dish-photo-upload-radius-ref: var(--hs-public-guest-photo-upload-radius-ref); --hs-public-menu-dish-photo-upload-title-leading: var(--hs-public-guest-photo-upload-title-leading); --hs-public-menu-dish-photo-upload-help-leading: var(--hs-public-guest-photo-upload-help-leading); --hs-public-menu-dish-photo-chrome-muted: color-mix(in srgb, var(--hs-ink) 56%, transparent); --hs-public-menu-dish-photo-chrome-line: var(--hs-line-color); --hs-public-menu-dish-photo-chrome-hover: color-mix(in srgb, var(--hs-ink) 8%, transparent); --hs-public-menu-dish-photo-chrome-focus: var(--hs-ink); --hs-public-menu-dish-content-padding-inline-ref: var(--hs-public-menu-card-content-padding-inline-ref); --hs-public-menu-dish-content-padding-block-start-ref: 7; --hs-public-menu-dish-footer-padding-block-end-ref: var(--hs-public-menu-card-shell-padding-block-ref); --hs-public-menu-dish-tag-inset-top-ref: 20; --hs-public-menu-dish-tag-inset-left-ref: 20; --hs-public-menu-dish-tag-inset: var(--hs-public-menu-dish-tag-inset-top); --hs-public-menu-dish-title-size-ref: 18; --hs-public-menu-dish-title-leading-ref: 22; --hs-public-menu-dish-title-gap-ref: 6; --hs-public-menu-dish-description-size-ref: 10; --hs-public-menu-dish-description-leading-ref: 12; --hs-public-menu-dish-combo-size-ref: 13; --hs-public-menu-dish-combo-leading-ref: 15; --hs-public-menu-dish-combo-weight: var(--hs-font-weight-bold); --hs-public-menu-dish-combo-row-gap-ref: 4; --hs-public-menu-dish-combo-divider-gap-ref: 8; --hs-public-menu-dish-combo-checkbox-size-ref: 18; --hs-public-menu-dish-combo-checkbox-hit-size-ref: 24; --hs-public-menu-dish-combo-checkbox-hit-padding-ref: 5; --hs-public-menu-dish-combo-checkbox-gap-ref: 10; --hs-public-menu-dish-divider-dash-ref: var(--hs-public-menu-card-content-divider-dash-ref); --hs-public-menu-dish-divider-stroke-gap-ref: var(--hs-public-menu-card-content-divider-gap-ref); --hs-public-menu-dish-divider-thickness-ref: var(--hs-public-menu-card-content-divider-thickness-ref); --hs-public-menu-dish-footer-gap-ref: var(--hs-public-menu-card-row-inline-gap-ref); /* Legacy alias — dish footer slot uses --hs-public-menu-add-min-width-md. */ --hs-public-menu-dish-action-width-ref: var(--hs-public-menu-add-min-width-md-ref); --hs-public-menu-dish-volume-gap-ref: 8; --hs-public-menu-dish-price-size-ref: 22; --hs-public-menu-dish-price-leading-ref: 26; --hs-public-menu-dish-lift-ref: 4; --hs-public-menu-dish-title-weight: var(--hs-font-weight-extrabold); --hs-public-menu-dish-description-weight: var(--hs-font-weight-medium); --hs-public-menu-dish-price-weight: var(--hs-font-weight-extrabold); --hs-public-menu-dish-title-tracking: var(--hs-tracking-heading); --hs-public-menu-dish-price-tracking: 0; /* Shared guest card shell padding @ dish 350w — scales via --hs-scale-cqw-dish on composed scale hosts. */ --hs-public-menu-card-content-padding-inline-ref: 20; --hs-public-menu-card-shell-padding-block-ref: 20; --hs-public-menu-card-row-inline-gap-ref: 12; --hs-public-menu-card-row-cta-pad-ref: 6.5; /* Shared content dividers — dish .dishRule + list row separators (micro-dash). */ --hs-public-menu-card-content-divider-color: #d6d6d6; --hs-public-menu-card-content-divider-thickness-ref: 1; --hs-public-menu-card-content-divider-dash-ref: 2; --hs-public-menu-card-content-divider-gap-ref: 4; /* Public menu list group card — 350w (dish artboard); cqw in publicMenuListGroupCardScale */ --hs-public-menu-list-group-width-ref: var(--hs-public-menu-dish-width-ref); --hs-public-menu-list-group-radius-ref: var(--hs-public-menu-dish-radius-ref); --hs-public-menu-list-group-title-size-ref: 22; --hs-public-menu-list-group-title-line-ref: 26; --hs-public-menu-list-group-subtitle-size-ref: 11; --hs-public-menu-list-group-subtitle-line-ref: 13; --hs-public-menu-list-group-subtitle-gap-top-ref: 7; --hs-public-menu-list-group-subtitle-max-width-ref: 268; --hs-public-menu-list-group-subtitle-ink: var(--hs-color-charcoal-600); --hs-public-menu-list-row-min-height-ref: 44; --hs-public-menu-list-row-name-size-ref: 16; --hs-public-menu-list-row-name-line-ref: 20; --hs-public-menu-list-row-price-size-ref: 18; --hs-public-menu-list-row-price-line-ref: 20; --hs-public-menu-list-row-tag-gap-ref: 4; --hs-public-menu-list-group-surface: var(--hs-public-menu-dish-surface); --hs-public-menu-list-group-outline: var(--hs-line-soft); --hs-public-menu-list-row-divider: var(--hs-public-menu-card-content-divider-color); --hs-public-menu-list-row-name-ink: var(--hs-public-menu-list-row-price-ink); --hs-public-menu-list-row-meta-ink: var(--hs-public-cocktail-body-ink); --hs-public-menu-list-row-price-ink: var(--hs-public-menu-add-bg); /* Public online menu — Brighton webapp @ 402 cqw; fluid layout in publicMenuPage.css */ --hs-public-online-menu-width-ref: 402; --hs-public-menu-page-work-width-ref: 400; --hs-public-menu-page-logo-size-ref: 30; --hs-public-online-menu-screen-fill-ref: 88; --hs-public-online-menu-page-x-ref: 24; --hs-public-online-menu-page-pad-bottom-ref: 144; --hs-public-online-menu-header-content-top-ref: 25; --hs-public-online-menu-header-h-ref: 80; --hs-public-online-menu-header-sticky-pad-top-ref: 0; --hs-public-online-menu-header-sticky-pad-bottom-ref: 0; --hs-public-online-menu-stack-gap-ref: 6; --hs-public-online-menu-shell-section-gap-ref: 16; --hs-public-online-menu-body-gap-ref: 16; --hs-public-online-menu-menu-section-pad-top-ref: 10; --hs-public-online-menu-menu-section-margin-ref: 10; --hs-public-online-menu-menu-section-description-size-ref: 13; --hs-public-online-menu-menu-section-description-line-ref: 18; --hs-public-online-menu-menu-section-description-gap-ref: 8; --hs-public-online-menu-menu-group-title-size-ref: 30; --hs-public-online-menu-menu-group-title-gap-ref: 20; --hs-public-online-menu-card-grid-gap-ref: 20; --hs-public-online-menu-menu-group-title-tracking: 0; --hs-public-online-menu-scroll-margin-extra-ref: 16; --hs-public-online-menu-scroll-spy-band-ref: 40; --hs-public-online-menu-list-plaque-meta-col-ref: 34; --hs-public-online-menu-list-plaque-price-col-ref: 52; --hs-public-online-menu-list-plaque-bar-height-ref: 11; --hs-public-online-menu-list-plaque-bar-radius-ref: 5; --hs-public-online-menu-list-plaque-name-width-percent-ref: 72; --hs-public-online-menu-list-plaque-row-gap-ratio-ref: 0.75; --hs-public-online-menu-list-plaque-head-gap-ratio-ref: 0.5; --hs-public-online-menu-list-plaque-badge-pad-ratio-ref: 0.25; --hs-public-online-menu-list-plaque-margin-bottom-ref: 26; --hs-public-online-menu-list-plaque-pad-block-ref: 24; --hs-public-online-menu-list-plaque-pad-inline-ref: 16; --hs-public-online-menu-list-plaque-radius-ref: 20; --hs-public-online-menu-list-plaque-title-size-ref: 22; --hs-public-online-menu-list-plaque-title-gap-ref: 12; --hs-public-online-menu-list-plaque-subtitle-size-ref: 11; --hs-public-online-menu-list-plaque-subtitle-gap-ref: 16; --hs-public-online-menu-list-plaque-row-min-h-ref: 40; --hs-public-online-menu-list-plaque-row-gap-ref: 4; --hs-public-online-menu-list-plaque-badge-inset-ref: 12; --hs-public-online-menu-list-plaque-badge-font-size-ref: 10; --hs-public-online-menu-list-plaque-title-weight: 800; --hs-public-online-menu-list-plaque-subtitle-weight: 600; --hs-public-online-menu-list-plaque-badge-weight: 800; --hs-public-online-menu-start-pad-y-ref: 14; --hs-public-menu-page-footer-margin-ref: 24; --hs-public-menu-page-admin-entry-pad-x-ref: 18; --hs-public-menu-page-admin-entry-size-ref: 12; --hs-public-menu-page-admin-entry-weight: 900; --hs-public-online-menu-start-fade-duration: 280ms; --hs-public-online-menu-header-sticky-bg-duration: 260ms; --hs-public-online-menu-header-bg-scroll-y-ref: 40; --hs-public-online-menu-header-compact-scroll-y-ref: 520; --hs-public-online-menu-start-shell-inset-ref: 25; --hs-public-online-menu-start-categories-margin-ref: 32; --hs-public-online-menu-start-pad-bottom-ref: 24; --hs-public-online-menu-start-fade-shift-ref: 24; --hs-public-online-menu-start-logo-gap-ref: 14; --hs-public-online-menu-section-nav-gap-ref: 18; --hs-public-online-menu-header-icon-ref: 40; --hs-public-online-menu-header-chevron-ref: 18; --hs-public-online-menu-logo-size-ref: 31; --hs-public-online-menu-logo-line-ref: 31; --hs-public-online-menu-logo-weight: 950; --hs-public-online-menu-logo-tracking: -0.055em; --hs-public-online-menu-section-title-size-ref: 28; --hs-public-online-menu-search-trigger-ref: 40; --hs-public-online-menu-search-icon-ref: 18; --hs-public-online-menu-search-ring-ref: 1.5; --hs-public-online-menu-search-icon-stroke-ref: 2.05; --hs-public-online-menu-search-input-weight: 800; --hs-public-online-menu-search-input-tracking: -0.045em; --hs-public-online-menu-search-result-weight: 700; --hs-public-online-menu-search-icon-nudge-ref: 0; --hs-public-online-menu-search-icon-nudge-px-ref: 0.75; --hs-public-online-menu-search-close-size-ref: 36; --hs-public-menu-page-search-ease: cubic-bezier(0.19, 1, 0.22, 1); --hs-public-menu-page-search-ui-duration: 180ms; --hs-public-menu-page-search-ui-open-duration: 300ms; --hs-public-menu-page-search-ui-transform-duration: 240ms; --hs-public-menu-page-search-ui-open-ease: cubic-bezier(0.215, 0.61, 0.355, 1); --hs-public-menu-page-normal-opacity-duration: 280ms; --hs-public-online-menu-search-shell-top-ref: 20; --hs-public-online-menu-search-shell-top-active-ref: 16; --hs-public-online-menu-search-field-h-ref: 48; --hs-public-online-menu-search-inner-gap-ref: 6; --hs-public-online-menu-search-input-size-ref: 20; --hs-public-online-menu-search-input-slide-ref: 8; --hs-public-online-menu-normal-hide-shift-ref: 58; --hs-public-online-menu-search-open-delay: 280ms; --hs-public-online-menu-search-close-delay: 250ms; --hs-public-online-menu-category-size-ref: 30.132; --hs-public-online-menu-category-line-ratio-ref: 1.12; --hs-public-online-menu-category-row-min-h-ref: 43.2; --hs-public-online-menu-category-tracking-ref: 0.4; --hs-public-online-menu-category-rule-ref: 2; --hs-public-online-menu-category-gap-ref: 0; --hs-public-online-menu-category-weight: 800; /** Pull lang zone toward categories inside start-shell (negative margin on categories zone). */ --hs-public-online-menu-start-categories-lang-gap-ref: 20; --hs-public-online-menu-lang-pad-bottom-ref: 24; /** Raise lang switch vs baseline bottom pad (Figma tweak). */ --hs-public-online-menu-lang-lift-ref: 30; --hs-public-online-menu-lang-size-ref: 13; --hs-public-online-menu-lang-line-ref: 48; --hs-public-online-menu-lang-tracking-ref: 1.04; --hs-public-online-menu-lang-tracking: 0.08em; --hs-public-online-menu-lang-weight: 900; --hs-public-online-menu-category-nav-gap-ref: 8; --hs-public-online-menu-category-link-min-h-ref: 44; --hs-public-online-menu-category-link-size-ref: 22; --hs-public-online-menu-results-radius-ref: 20; --hs-public-online-menu-results-max-height: 50svh; --hs-public-online-menu-results-shift-y-ref: 8; --hs-public-online-menu-result-row-pad-block-ref: 10; --hs-public-online-menu-result-empty-pad-block-ref: 12; --hs-public-online-menu-close-bar-w-ref: 14; --hs-public-online-menu-close-bar-h-ref: 2; /* Guest #public-menu — each color token is independent (no var() coupling). */ --hs-public-menu-boot-bg: #570d00; --hs-public-menu-boot-stripe: #fdafbc; --hs-public-menu-boot-button-height: 3rem; --hs-public-menu-boot-button-pad-x: 1.35rem; --hs-public-menu-boot-button-pad-y: 0.65rem; --hs-public-menu-boot-button-size: 0.8125rem; --hs-public-menu-boot-button-ring: 1.5px; --hs-public-online-menu-accent: #fff0f3; --hs-public-online-menu-line: #fff0f3; --hs-public-online-menu-ink-muted: #ffe5ea; --hs-public-online-menu-header-bg: #210000; --hs-public-online-menu-header-field: #220000; --hs-public-online-menu-header-field-border: #ffe5ea; --hs-public-online-menu-results-bg: #210006; --hs-public-online-menu-results-border: #4d2028; --hs-public-online-menu-result-divider: #563339; --hs-public-online-menu-result-mark-bg: #491d25; --hs-public-online-menu-lang-active-ink: #210006; --hs-public-online-menu-lang-pill-inset-ref: 4; --hs-public-online-menu-lang-pill-gap-ref: 12; --hs-public-online-menu-lang-pill-pad-x-ref: 28; --hs-public-online-menu-lang-pill-min-w-ref: 92; --hs-public-online-menu-lang-slide-radius-ref: 999; --hs-public-online-menu-menu-ink: #fffafa; --hs-public-online-menu-header-idle-opacity: 1; --hs-public-online-menu-control-disabled-opacity: 0.34; --hs-public-online-menu-search-duration: 620ms; --hs-public-online-menu-search-ease: var(--hs-public-menu-page-search-ease); --hs-public-online-menu-scroll-padding-extra: 20px; --hs-public-online-menu-logo-font: var(--hs-font-ui); /* Guest cart chrome — bar, drawer, line cards (independent tokens; defaults match menu palette) */ --hs-public-menu-cart-bar-bg: #210000; --hs-public-menu-cart-drawer-bg: #210006; --hs-public-menu-cart-drawer-border: #4d2028; --hs-public-menu-cart-divider: #563339; --hs-public-menu-cart-ink: #fff0f3; --hs-public-menu-cart-ink-muted: #ffe5ea; --hs-public-menu-cart-scrim: rgba(33, 0, 0, 0.72); --hs-public-menu-cart-line-surface: #ececec; --hs-public-menu-cart-line-title: #681c22; --hs-public-menu-cart-line-muted: #837a7e; --hs-public-menu-cart-price: #681c22; --hs-public-menu-cart-cta-bg: #681c22; --hs-public-menu-cart-cta-fg: #ffffff; /* Guest QR landing after scan — `#/qr/{code}` / `/qr/{code}` (preview frame = public menu work width) */ --hs-qr-landing-width-ref: var(--hs-public-menu-page-work-width-ref); --hs-qr-landing-pad-x-ref: 24; --hs-qr-landing-pad-y-ref: 28; --hs-qr-landing-footer-pad-bottom-ref: 24; --hs-qr-landing-lang-size-ref: 13; --hs-qr-landing-lang-line-ref: 48; --hs-qr-landing-lang-gap-ref: 12; --hs-qr-landing-lang-pill-inset-ref: 4; --hs-qr-landing-lang-pill-gap-ref: 12; --hs-qr-landing-lang-pill-pad-x-ref: 28; --hs-qr-landing-lang-pill-min-w-ref: 92; --hs-qr-landing-lang-slide-radius-ref: 999; --hs-qr-landing-lang-ring-ref: 1.5; --hs-qr-landing-lead-size-ref: 28; --hs-qr-landing-lead-weight: 900; --hs-qr-landing-lead-tracking: -0.04em; --hs-qr-landing-title-size-ref: 24; --hs-qr-landing-title-weight: 800; --hs-qr-landing-title-tracking: -0.03em; --hs-qr-landing-body-size-ref: 15; --hs-qr-landing-cta-error-mix: #5a1a24; --hs-qr-landing-status-card-pad-ref: 20; --hs-qr-landing-section-gap-ref: 20; --hs-qr-landing-welcome-gap-ref: 10; --hs-qr-landing-welcome-title-gap-ref: 4; --hs-qr-landing-status-card-radius-ref: 20; /* Place plaque scale ref — internal, not exposed in admin editor */ --hs-qr-landing-place-design-w-ref: 438; --hs-qr-landing-place-card-h-ref: 140; --hs-qr-landing-place-card-radius-ref: 30; --hs-qr-landing-place-card-border-ref: 1; --hs-qr-landing-place-image-col-ref: 200; --hs-qr-landing-place-pad-inline-start-ref: 18; --hs-qr-landing-place-pad-inline-end-ref: 12; --hs-qr-landing-place-pad-block-ref: 16; --hs-qr-landing-place-gap-after-type-ref: -1; --hs-qr-landing-place-gap-after-code-ref: 20; --hs-qr-landing-place-type-size-ref: 32; --hs-qr-landing-place-type-weight: 700; --hs-qr-landing-place-type-letter-spacing-ref: -2; --hs-qr-landing-place-code-size-ref: 64; --hs-qr-landing-place-code-weight: 800; --hs-qr-landing-place-code-letter-spacing-ref: -3; --hs-qr-landing-place-hint-size-ref: 10; --hs-qr-landing-place-hint-weight: 600; --hs-qr-landing-place-ink: #ffffff; --hs-qr-landing-place-photo-bg: #ffffff; --hs-qr-landing-place-photo-chrome-ink: var(--hs-qr-landing-on-accent-ink); --hs-qr-landing-place-photo-chrome-muted: color-mix( in srgb, var(--hs-qr-landing-on-accent-ink) 62%, transparent ); --hs-qr-landing-place-photo-upload-icon-bg: #f2f2f2; --hs-qr-landing-cta-gap-ref: 12; --hs-qr-landing-cta-size-ref: 16; --hs-qr-landing-cta-line-ref: 52; --hs-qr-landing-cta-radius-ref: 14; --hs-qr-landing-accent: #ffa1b1; --hs-qr-landing-on-accent-ink: #210006; --hs-qr-landing-ink: #ffffff; --hs-qr-landing-ink-muted: color-mix(in srgb, #ffffff 82%, transparent); --hs-qr-landing-card-bg: #420000; --hs-qr-landing-card-border: #1f0002; /* BRGHT lava background — React Bits Grainient (BrghtLavaBackground) */ --hs-brght-lava-enabled: 1; --hs-brght-lava-color-1: #42000a; --hs-brght-lava-color-2: #570d00; --hs-brght-lava-color-3: #fdafbc; /* Boot / static fill — menu loading screen */ --hs-brght-lava-boot-bg: var(--hs-public-menu-boot-bg); --hs-brght-lava-time-speed: 0.25; --hs-brght-lava-color-balance: 0; --hs-brght-lava-warp-strength: 1; --hs-brght-lava-warp-frequency: 5; --hs-brght-lava-warp-speed: 2; --hs-brght-lava-warp-amplitude: 50; --hs-brght-lava-blend-angle: 0; --hs-brght-lava-blend-softness: 0.05; --hs-brght-lava-rotation-amount: 500; --hs-brght-lava-noise-scale: 2; --hs-brght-lava-grain-amount: 0.1; --hs-brght-lava-grain-scale: 2; --hs-brght-lava-grain-animated: 0; --hs-brght-lava-contrast: 1.5; --hs-brght-lava-gamma: 1; --hs-brght-lava-saturation: 1; --hs-brght-lava-center-x: 0.1; --hs-brght-lava-center-y: 0; --hs-brght-lava-zoom: 1.2; /* iPhone 16 logical screen + catalog device frame */ --hs-iphone16-screen-width-ref: 393; --hs-iphone16-screen-height-ref: 852; --hs-iphone16-scale-width-ref: var(--hs-iphone16-screen-width-ref); --hs-iphone16-chassis-radius-ref: 56; --hs-iphone16-screen-radius-ref: 47; --hs-iphone16-bezel-inline-ref: 10; --hs-iphone16-bezel-block-start-ref: 12; --hs-iphone16-bezel-block-end-ref: 14; --hs-iphone16-chassis-stroke-ref: 2; --hs-iphone16-screen-stroke-ref: 2; --hs-iphone16-chassis-surface: var(--hs-color-charcoal-700); --hs-iphone16-chassis-edge: var(--hs-color-charcoal-900); --hs-iphone16-screen-border: var(--hs-color-charcoal-950); --hs-iphone16-button-fill: var(--hs-color-charcoal-800); --hs-iphone16-island-fill: var(--hs-color-charcoal-950); --hs-iphone16-home-indicator: var(--hs-color-charcoal-600); /* Device mock iPhone — global styles: styles/deviceMockIphone.css */ --hs-device-mock-width: 280px; --hs-device-mock-aspect-w: 433; --hs-device-mock-aspect-h: 882; --hs-admin-guest-settings-panel-height: calc( var(--hs-device-mock-width) * var(--hs-device-mock-aspect-h) / var(--hs-device-mock-aspect-w) ); --hs-device-mock-chassis: #e5e5e5; --hs-device-mock-inner: #ffffff; --hs-device-mock-island: #f5f5f5; --hs-device-mock-screen: #ffffff; /* Safari chrome plates — see docs/DEVICE_MOCK_IPHONE.md + resolveDeviceMockSafariChromePercents() */ --hs-device-mock-safe-top: 11.5023%; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-device-mock-safe-bottom: 9.507%; --hs-device-mock-safe-chrome: #000000; /* Typography scale */ --hs-text-2xs: 0.5625rem; --hs-text-xs: 0.625rem; --hs-text-sm: 0.75rem; --hs-text-md: 0.8125rem; --hs-text-lg: 1.0625rem; --hs-text-xl: 1.25rem; --hs-text-2xl: 1.75rem; /* Semantic typography */ --hs-text-meta: var(--hs-text-2xs); --hs-text-kicker: var(--hs-text-xs); --hs-text-label: var(--hs-text-xs); --hs-text-body: var(--hs-text-md); --hs-text-modal-title: var(--hs-text-lg); --hs-text-section-title: var(--hs-text-xl); --hs-text-page-title: var(--hs-text-lg); --hs-text-display: 1.5rem; --hs-text-hero: 2.25rem; --hs-text-prose-h1: 2.5rem; --hs-text-prose-h2: 1.625rem; --hs-text-prose-h3: 1.3125rem; --hs-text-prose-h4: 1.125rem; --hs-text-prose-lead: 1.125rem; --hs-text-prose-h1-sm: 2rem; /* Font weight */ --hs-font-weight-regular: 400; --hs-font-weight-medium: 500; --hs-font-weight-semibold: 600; --hs-font-weight-bold: 700; --hs-font-weight-extrabold: 800; /* Letter spacing */ --hs-tracking-kicker: 0.08em; --hs-tracking-title: -0.04em; --hs-tracking-section: -0.03em; --hs-tracking-display: -0.05em; --hs-tracking-display-tight: -0.055em; --hs-tracking-heading: -0.035em; --hs-tracking-body-tight: -0.025em; /* Line height */ --hs-leading-tight: 1.1; --hs-leading-snug: 1.2; --hs-leading-normal: 1.5; --hs-leading-prose: 1.7; --hs-leading-prose-tight: 1.08; --hs-leading-prose-h2: 1.2; --hs-leading-prose-h3: 1.25; --hs-leading-prose-h4: 1.3; --hs-leading-prose-lead: 1.6; /* Layout rhythm */ --hs-space-header: 7px; --hs-space-label: 5px; /** Modal shell inset — header, body, footer (default / wide). */ --hs-space-micro: 3px; --hs-space-tight: 2px; /* Toggle — track and thumb geometry */ --hs-toggle-track-width-sm: 32px; --hs-toggle-track-height-sm: 18px; --hs-toggle-thumb-size-sm: 14px; --hs-toggle-track-width-md: 40px; --hs-toggle-track-height-md: 22px; --hs-toggle-thumb-size-md: 18px; --hs-gap-compact: 6px; --hs-gap-inline: 6px; --hs-underline-offset: 4px; /* Control padding */ --hs-control-padding-x: 10px; --hs-control-padding-x-compact: 8px; --hs-field-message-padding-inline: var(--hs-space-tight); --hs-segmented-padding-x: var(--hs-control-padding-x); --hs-segmented-padding-x-dense: var(--hs-space-header); /* Track height follows the same active scale as TextInput / Select on the host. */ --hs-segmented-track-height: var(--hs-control-active-height, var(--hs-form-field-size-md-height)); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-segmented-font-size-dense: var(--hs-text-2xs); --hs-segmented-font-weight-dense: var(--hs-font-weight-medium); --hs-segmented-line-height-dense: 1; /* Physical QR badge — 70×150 mm trim @ 4px/mm (280×600 design px, aspect 7:15); cqw in qrPhysicalBadgeScale */ --hs-qr-badge-width-ref: 280; --hs-qr-badge-sheet-width-ref: 640; --hs-qr-badge-sheet-gap-ref: 80; --hs-qr-badge-height-ref: 600; --hs-qr-badge-radius-ref: 30; --hs-qr-badge-aspect: 280 / 600; --hs-qr-badge-surface: #570001; --hs-qr-badge-ink: #e2cf6e; --hs-qr-badge-footer-tone-steps: 4; --hs-qr-badge-footer-tone-step-percent: 8%; --hs-qr-badge-footer-tone-mix: calc( var(--hs-qr-badge-footer-tone-steps) * var(--hs-qr-badge-footer-tone-step-percent) ); --hs-qr-badge-lanyard-slot-color: #ffffff; --hs-qr-badge-lanyard-slot-width-mm: 26; --hs-qr-badge-lanyard-slot-height-mm: 3; --hs-qr-badge-lanyard-slot-width-ref: 104; --hs-qr-badge-lanyard-slot-height-ref: 12; --hs-qr-badge-qr-zone-bg: #570001; --hs-qr-badge-red-surface: #570001; --hs-qr-badge-red-bg-spot-light: #ff8080; --hs-qr-badge-red-bg-spot-deep: #0f0000; --hs-qr-badge-red-ink: #e2cf6e; --hs-qr-badge-red-footer-ink: #e2cf6e; --hs-qr-badge-red-qr-zone-bg: #570001; --hs-qr-badge-blue-surface: #323e7d; --hs-qr-badge-blue-bg-spot-light: #010052; --hs-qr-badge-blue-bg-spot-deep: #9bd0ff; --hs-qr-badge-blue-ink: #f6ffb3; --hs-qr-badge-blue-footer-ink: #f6ffb3; --hs-qr-badge-footer-ink: var(--hs-qr-badge-red-footer-ink); --hs-qr-badge-blue-qr-zone-bg: #6181bd; --hs-qr-badge-content-padding-inline-ref: 24; --hs-qr-badge-work-width-ref: 232; --hs-qr-badge-padding-block-start-ref: 24; --hs-qr-badge-padding-block-end-ref: 24; --hs-qr-badge-gap-lanyard-slot-to-brand-ref: 24; --hs-qr-badge-brand-wordmark-fit-divisor-ref: 7; --hs-qr-badge-brand-font: var(--hs-public-online-menu-logo-font); --hs-qr-badge-brand-weight: 1000; --hs-qr-badge-brand-tracking: -0.05em; --hs-qr-badge-brand-line-height: 1; --hs-qr-badge-brand-line-gap-ref: 0; --hs-qr-badge-gap-brand-to-headline-ref: 14; --hs-qr-badge-headline-padding-block-ref: 0; --hs-qr-badge-headline-lead-to-services-gap-ref: 8; --hs-qr-badge-headline-line-clamp: 5; --hs-qr-badge-gap-headline-to-qr-ref: 10; --hs-qr-badge-headline-max-width-ref: var(--hs-qr-badge-work-width-ref); --hs-qr-badge-headline-size-ref: 18; --hs-qr-badge-headline-leading-ref: 22; --hs-qr-badge-headline-weight: var(--hs-font-weight-extrabold); --hs-qr-badge-headline-services-size-ref: 14; --hs-qr-badge-headline-services-leading-ref: 16; --hs-qr-badge-headline-services-weight: 600; --hs-qr-badge-headline-services-gap-ref: 2; --hs-qr-badge-qr-size-ref: 180; --hs-qr-badge-qr-zone-inset-ref: 4; --hs-qr-badge-qr-zone-radius-offset-ref: 2; --hs-qr-badge-qr-placeholder-size-ref: 160; --hs-qr-badge-qr-placeholder-padding-ref: 2; --hs-qr-badge-qr-placeholder-radius-ref: 8; --hs-qr-badge-qr-fg: #1a1a1a; --hs-qr-badge-qr-bg: #ffffff; --hs-qr-badge-bg-spot-x-pct: 45; --hs-qr-badge-bg-spot-y-pct: 45; --hs-qr-badge-bg-angle-deg: 90; --hs-qr-badge-bg-grain-opacity: 0.1; --hs-qr-badge-location-type-size-ref: 20; --hs-qr-badge-location-type-weight: var(--hs-font-weight-bold); --hs-qr-badge-gap-qr-to-location-ref: 10; --hs-qr-badge-gap-location-type-to-code-ref: 2; --hs-qr-badge-location-code-size-ref: 80; --hs-qr-badge-location-code-width-ref: 232; --hs-qr-badge-location-code-weight: 700; --hs-qr-badge-gap-location-to-footer-ref: 0; --hs-qr-badge-footer-size-ref: 10; --hs-qr-badge-footer-leading-ref: 14; --hs-qr-badge-footer-line-clamp: 3; --hs-qr-badge-footer-max-width-ref: 232; --hs-qr-badge-footer-weight: var(--hs-font-weight-bold); /* Beach location map — see map/README.md; artboard @ 1572×886 */ --hs-location-map-width-ref: 1572; --hs-location-map-height-ref: 886; --hs-location-map-aspect: 1572 / 886; --hs-location-map-sand: #f6f3ee; --hs-location-map-west-fill: #711b1c; --hs-location-map-east-fill: #323e7d; --hs-location-map-marker-ink: #ffffff; --hs-location-map-sea-ink: #323e7d; --hs-location-map-marker-square-ref: 51; --hs-location-map-marker-narrow-width-ref: 32; --hs-location-map-marker-narrow-height-ref: 59; --hs-location-map-marker-radius-ref: 6; --hs-location-map-label-chaise-size-ref: 11; --hs-location-map-label-chaise-leading-ref: 13; --hs-location-map-label-bed-size-ref: 13; --hs-location-map-label-bed-leading-ref: 16; --hs-location-map-sea-label-size-ref: 15; --hs-location-map-sea-label-leading-ref: 18; --hs-location-map-sea-label-top-ref: 848; --hs-location-map-inset-x-ref: 60; --hs-location-map-inset-top-ref: 16; --hs-location-map-inset-bottom-ref: 20; --hs-location-map-chrome-padding-y-ref: 10; --hs-location-map-chrome-content-height-ref: 32; --hs-location-map-chrome-band-height-ref: 52; --hs-location-map-chrome-gap-ref: 10; --hs-location-map-chrome-inner-gap-ref: 12; --hs-location-map-sea-band-height-ref: 22; --hs-location-map-sea-gap-ref: 8; --hs-location-map-overlay-padding-x-ref: 12; --hs-location-map-overlay-padding-y-ref: 7; --hs-location-map-overlay-gap-ref: 6; --hs-location-map-overlay-title-size-ref: 15; --hs-location-map-overlay-title-leading-ref: 18; --hs-location-map-overlay-hint-size-ref: 12; --hs-location-map-overlay-hint-leading-ref: 14; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Table density — admin workspace baseline */ --hs-table-bg: transparent; --hs-table-border-color: var(--hs-line-color); --hs-table-border-width: var(--hs-line-width); --hs-table-caption-padding-y: var(--hs-space-2); --hs-table-caption-color: var(--hs-muted); --hs-table-cell-padding-x: var(--hs-space-2); --hs-table-cell-padding-y: var(--hs-space-header); --hs-table-cell-padding-y-compact: var(--hs-space-micro); --hs-table-cell-divider-color: var(--hs-line-color); /* Column air — must match COLUMN_AIR_* in textMeasure.ts and data-table-column-air on */ --hs-table-column-air-x: 14px; --hs-table-column-air-total: calc(var(--hs-table-column-air-x) * 2); --hs-table-font-scale: 1.08; --hs-table-admin-compact-header-text: calc(var(--hs-text-xs) * var(--hs-table-font-scale)); --hs-table-admin-compact-body-text: calc(var(--hs-text-xs) * var(--hs-table-font-scale)); --hs-table-header-height: var(--hs-control-height-md); /* Same tone as compact/meta column headers (e.g. «Обновлено»). */ --hs-table-header-color: var(--hs-table-mono-color); --hs-table-header-font: var(--hs-font-mono); --hs-table-header-text: var(--hs-table-admin-compact-header-text); --hs-table-header-tracking: 0.02em; --hs-table-header-transform: none; --hs-table-body-text: var(--hs-table-admin-compact-body-text); --hs-table-body-line-height: var(--hs-leading-snug); --hs-table-secondary-text: calc(var(--hs-text-2xs) * var(--hs-table-font-scale)); --hs-table-secondary-color: var(--hs-muted); --hs-table-mono-text: var(--hs-table-admin-compact-body-text); --hs-table-mono-color: var(--hs-muted); --hs-table-primary-weight: var(--hs-font-weight-semibold); --hs-table-row-min-height: 44px; --hs-table-action-size: 24px; --hs-table-action-icon-size: 14px; --hs-table-action-gap: 3px; --hs-table-empty-padding: var(--hs-space-4); --hs-table-empty-color: var(--hs-muted); --hs-table-empty-line-height: var(--hs-leading-normal); --hs-table-admin-col-select-width: 34px; --hs-table-admin-col-name-width: 39%; --hs-table-admin-col-category-width: 27%; --hs-table-admin-col-category-inset: var(--hs-space-header); --hs-table-admin-col-status-width: var(--hs-table-admin-col-side-utility-width); --hs-table-admin-col-volume-width: 72px; --hs-table-admin-col-price-width: var(--hs-table-admin-col-side-utility-width); --hs-table-admin-col-side-utility-width: 64px; --hs-table-admin-col-actions-width: 58px; --hs-table-admin-compact-padding-x: 4px; --hs-table-admin-utility-gap: var(--hs-space-2); --hs-table-admin-utility-group-start: var(--hs-space-2); --hs-table-col-compact-max-share: 0.42; --hs-table-col-name-flex-weight: 31; --hs-table-col-category-flex-weight: 19; --hs-table-col-name-width: 31%; --hs-table-col-category-width: 19%; --hs-table-col-ch-px: 8px; --hs-table-col-fallback-workspace-width: 1040px; --hs-table-col-select-width: 42px; --hs-table-col-status-width: 64px; --hs-table-col-volume-width: 92px; --hs-table-col-price-width: 116px; --hs-table-col-actions-width: 86px; --hs-table-col-badge-width: 88px; --hs-table-col-meta-width: 80px; --hs-table-col-edge-air: 0.15; --hs-table-col-edge-air-compact: 0.12; --hs-table-col-edge-air-dense: 0.1; --hs-table-col-density-slot-px: 72; --hs-table-col-min-share-base: 0.35; --hs-table-col-min-share-density: 0.15; --hs-table-col-sample-rows: 12; /* Must match NAME_INLINE_TAG_GAP_PX in textMeasure.ts */ --hs-table-name-inline-gap: var(--hs-space-2); --hs-table-tag-scale: 0.75; --hs-table-tag-min-height: calc(var(--hs-tag-density-sm) * var(--hs-table-tag-scale)); --hs-table-tag-gap: calc(var(--hs-space-1) * var(--hs-table-tag-scale)); --hs-table-tag-padding-x: calc(var(--hs-control-padding-x-compact) * var(--hs-table-tag-scale)); --hs-table-tag-font-size: calc(var(--hs-text-xs) * var(--hs-table-tag-scale) * var(--hs-table-font-scale)); --hs-table-tag-line-height: 1; --hs-table-tag-icon-size: calc(14px * var(--hs-table-tag-scale)); --hs-table-tag-group-gap: calc(var(--hs-space-2) * var(--hs-table-tag-scale)); --hs-table-select-size: var(--hs-size-icon-md); --hs-table-select-dot-size: 8px; --hs-table-select-border-color: var(--hs-line); --hs-table-select-active-color: var(--hs-ink); --hs-table-mobile-row-gap: var(--hs-space-2); --hs-table-mobile-row-gap-inline: var(--hs-space-3); --hs-table-mobile-row-padding: var(--hs-control-padding-x); --hs-table-mobile-row-radius: var(--hs-radius-sm); --hs-table-mobile-label-gap: var(--hs-space-micro); --hs-table-toolbar-gap: var(--hs-space-3); --hs-table-toolbar-filter-width: 180px; --hs-table-toolbar-stack-breakpoint: var(--hs-breakpoint-stack-sm); --hs-table-toolbar-divider-height: var(--hs-control-height-sm); --hs-search-input-icon-gap: var(--hs-space-2); --hs-search-input-icon-size: var(--hs-control-active-icon-size, var(--hs-control-height-icon)); --hs-search-input-padding-inline-start: calc( var(--hs-control-active-padding-x, var(--hs-control-padding-x)) + var(--hs-search-input-icon-size) + var(--hs-search-input-icon-gap) ); --hs-table-workspace-gap: var(--hs-space-3); --hs-table-section-gap: var(--hs-space-3); --hs-table-footer-color: var(--hs-faint); --hs-table-footer-font-size: calc(var(--hs-text-kicker) * var(--hs-table-font-scale)); --hs-table-footer-gap: var(--hs-space-3); /** @deprecated Use --hs-table-workspace-gap on workspace root; kept for external refs only. */ --hs-table-footer-margin-top: var(--hs-table-workspace-gap); --hs-table-pattern-max-width: var(--hs-content-width-lg); /* Column kind contract — all project tables (see table-column-contract.css) */ --hs-table-header-text-align-default: left; --hs-table-col-align-start: left; --hs-table-col-align-end: right; --hs-table-col-align-center: center; --hs-table-col-text-align: var(--hs-table-header-text-align-default); --hs-table-col-numeric-font-variant: tabular-nums; --hs-table-col-presentation-compact-color: var(--hs-table-mono-color); --hs-table-col-presentation-compact-font-family: var(--hs-table-header-font); --hs-table-col-presentation-compact-font-size: var(--hs-table-mono-text); --hs-table-col-presentation-compact-line-height: var(--hs-leading-normal); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-table-actions-justify-end: flex-end; --hs-table-actions-justify-center: center; --hs-table-actions-justify: var(--hs-table-actions-justify-end); /* Focus ring */ --hs-focus-ring-width: 2px; --hs-focus-ring-offset: 1px; /* Content width */ --hs-content-width-sm: 620px; --hs-content-width-md: 720px; --hs-content-width-lead: 680px; --hs-content-width-lg: 1040px; --hs-content-width-xl: 1200px; --hs-content-width-prose: 860px; --hs-content-width-prose-h1: 760px; /* Breakpoints — token values for docs/JS; @media must use matching literal px/rem (var() invalid). */ --hs-breakpoint-stack-sm: 560px; --hs-breakpoint-content-md: var(--hs-content-width-md); --hs-breakpoint-reference-wide: 1024px; --hs-breakpoint-reference-narrow: 719px; --hs-breakpoint-grid-embedded: 35rem; --hs-breakpoint-grid-md: 42rem; --hs-breakpoint-grid-lg: 66rem; /* Grid system — column count lives in grid-system.css (--hs-grid-columns) */ --hs-grid-unit: 8px; --hs-page-max-width: var(--hs-content-width-xl); --hs-page-padding-inline: var(--hs-space-6); /* Component sizes */ --hs-z-overlay: 1000; --hs-z-popover: 1200; --hs-modal-max-width: 480px; --hs-modal-max-width-wide: 640px; --hs-modal-editor-viewport-inset: calc(var(--hs-space-5) * 2); --hs-modal-editor-height: 87dvh; /** Target dialog width (preview + fields); capped by viewport in Modal. */ --hs-modal-editor-width: 40rem; --hs-modal-editor-max-width: min(100%, calc(100vw - var(--hs-modal-editor-viewport-inset))); --hs-modal-editor-preview-min-width: 11rem; --hs-modal-editor-preview-column-ratio: 36%; /** Editor modal shell inset — header, body, footer; same rhythm as preview ↔ fields gap. */ --hs-modal-editor-inset: 20px; /** Stack preview above fields when the modal container is narrower than this. */ --hs-modal-editor-stack-breakpoint: 36rem; /** Cap scrollable preview band height in stack layout (content-driven row). */ --hs-modal-editor-stack-preview-max-height: 20rem; --hs-modal-max-width-sm: 400px; /* Menu item editor modal — dense host (see MenuItemEditorModal.module.css, control-density.css) */ --hs-menu-item-editor-gap: var(--hs-space-2); --hs-menu-item-editor-column-gap: var(--hs-modal-editor-inset); /** Fields column: combo/list rows stack below this width (side-by-side modal). */ --hs-menu-item-editor-fields-narrow-breakpoint: 24rem; /** Fields column: volume · price · tag become 2 columns below this width. */ --hs-menu-item-editor-fields-triple-breakpoint: 28rem; /** Scrollport inset so dense control focus rings are not clipped by overflow-x. */ --hs-menu-item-editor-fields-focus-gutter: var(--hs-line-width); --hs-menu-item-editor-fields-scrollbar-gap: 6px; --hs-menu-item-editor-control-height: var(--hs-control-density-dense-height); --hs-menu-item-editor-control-font-size: var(--hs-control-density-dense-font-size); --hs-menu-item-editor-textarea-min-height: var(--hs-control-density-dense-textarea-min-height); --hs-menu-item-editor-label-size: var(--hs-control-density-dense-label-size); --hs-menu-item-editor-description-size: var(--hs-control-density-dense-description-size); --hs-tag-swatch-bg: transparent; --hs-alert-media-size: 40px; --hs-alert-media-bg: color-mix(in srgb, var(--hs-muted) 12%, transparent); --hs-alert-media-ink: var(--hs-muted); --hs-alert-media-bg-danger: color-mix(in srgb, var(--hs-danger) 12%, transparent); --hs-size-icon-sm: 12px; --hs-size-icon-md: 18px; --hs-size-swatch-height: 48px; --hs-token-ref-chip-size: var(--hs-table-action-size); --hs-token-ref-preview-col: calc( var(--hs-token-ref-chip-size) + var(--hs-table-cell-padding-x) + var(--hs-table-column-air-x) ); --hs-token-ref-row-min-height: var(--hs-table-row-min-height); } /* * Global typography roles — [data-hs-type-role] on any element. * Specimen lists: [data-hs-type-samples] (doc pages, catalog). */ /* Scale */ [data-hs-type-role="hero"] { font-size: var(--hs-text-hero); font-weight: var(--hs-font-weight-extrabold); line-height: var(--hs-leading-tight); letter-spacing: var(--hs-tracking-display-tight); } [data-hs-type-role="text-2xl"] { font-size: var(--hs-text-2xl); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-tight); letter-spacing: var(--hs-tracking-title); } [data-hs-type-role="text-xl"] { font-size: var(--hs-text-xl); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-section); } [data-hs-type-role="text-lg"] { font-size: var(--hs-text-lg); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-snug); } [data-hs-type-role="text-md"] { font-size: var(--hs-text-md); line-height: var(--hs-leading-normal); } [data-hs-type-role="text-sm"] { font-size: var(--hs-text-sm); font-weight: var(--hs-font-weight-semibold); line-height: var(--hs-leading-snug); } [data-hs-type-role="text-xs"] { font-size: var(--hs-text-xs); line-height: var(--hs-leading-snug); } [data-hs-type-role="text-2xs"] { font-size: var(--hs-text-2xs); line-height: var(--hs-leading-snug); } [data-hs-type-role="text-display"] { font-size: var(--hs-text-display); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-display); } /* Semantic aliases (same tokens as scale, preset rhythm) */ [data-hs-type-role="page-title"] { font-size: var(--hs-text-page-title); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-tight); letter-spacing: var(--hs-tracking-title); } [data-hs-type-role="section-title"] { font-size: var(--hs-text-section-title); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-snug); letter-spacing: var(--hs-tracking-section); } [data-hs-type-role="modal-title"] { font-size: var(--hs-text-modal-title); font-weight: var(--hs-font-weight-bold); line-height: var(--hs-leading-snug); } [data-hs-type-role="body"] { font-size: var(--hs-text-body); line-height: var(--hs-leading-normal); } [data-hs-type-role="body-prose"] { font-size: var(--hs-text-body); line-height: var(--hs-leading-prose); } [data-hs-type-role="label"] { font-size: var(--hs-text-label); font-weight: var(--hs-font-weight-semibold); line-height: var(--hs-leading-snug); } [data-hs-type-role="kicker"] { color: var(--hs-faint); font-size: var(--hs-text-kicker); font-weight: var(--hs-font-weight-bold); letter-spacing: var(--hs-tracking-kicker); text-transform: uppercase; } [data-hs-type-role="meta"] { color: var(--hs-muted); font-size: var(--hs-text-meta); line-height: var(--hs-leading-snug); } /* Accents */ [data-hs-type-role="cell-primary"] { font-size: var(--hs-table-body-text); font-weight: var(--hs-table-primary-weight); line-height: var(--hs-table-body-line-height); } [data-hs-type-role="semibold"] { font-weight: var(--hs-font-weight-semibold); } [data-hs-type-role="bold"] { font-weight: var(--hs-font-weight-bold); } [data-hs-type-role="medium"] { font-weight: var(--hs-font-weight-medium); } [data-hs-type-role="muted"] { color: var(--hs-muted); font-size: var(--hs-text-sm); line-height: var(--hs-leading-snug); } [data-hs-type-role="faint"] { color: var(--hs-faint); font-size: var(--hs-text-xs); letter-spacing: var(--hs-tracking-kicker); text-transform: uppercase; } [data-hs-type-role="quote"] { border-left: var(--hs-focus-ring-width) solid var(--hs-line); padding-left: var(--hs-space-3); color: var(--hs-muted); font-size: var(--hs-text-md); font-style: italic; line-height: var(--hs-leading-prose); } [data-hs-type-role="mono-value"] { font-family: var(--hs-font-mono); font-size: var(--hs-text-sm); font-variant-numeric: tabular-nums; line-height: var(--hs-leading-snug); } [data-hs-type-role="technical"] { color: var(--hs-table-mono-color); font-family: var(--hs-font-mono); font-size: var(--hs-table-mono-text); line-height: var(--hs-leading-snug); } [data-hs-type-samples] a { color: var(--hs-ink); font-weight: var(--hs-font-weight-semibold); text-decoration: underline; text-underline-offset: var(--hs-underline-offset); } /* Specimen list layout (Typography catalog) */ [data-hs-type-samples] { display: grid; gap: var(--hs-space-4); } [data-hs-type-samples] [data-hs-type-specimen-group] { display: grid; gap: var(--hs-space-2); } [data-hs-type-samples] [data-hs-type-specimen-kicker] { margin: 0; color: var(--hs-faint); font-family: var(--hs-font-mono); font-size: var(--hs-text-kicker); font-weight: var(--hs-font-weight-bold); letter-spacing: var(--hs-tracking-kicker); text-transform: uppercase; } [data-hs-type-samples] [data-hs-type-specimen-list] { margin: 0; padding: 0; list-style: none; } [data-hs-type-samples] [data-hs-type-specimen-row] { display: grid; grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr); gap: var(--hs-space-3); align-items: baseline; padding: var(--hs-space-2) 0; border-top: var(--hs-line-width) solid var(--hs-line-color); } [data-hs-type-samples] [data-hs-type-specimen-row]:first-child { border-top: 0; } [data-hs-type-samples] [data-hs-type-specimen-label] { color: var(--hs-faint); font-family: var(--hs-font-mono); font-size: var(--hs-text-xs); font-weight: var(--hs-font-weight-bold); letter-spacing: var(--hs-tracking-kicker); text-transform: uppercase; } [data-hs-type-samples] [data-hs-type-specimen-content] { min-width: 0; } [data-hs-type-samples] [data-hs-type-specimen-content] > * { margin: 0; } @media (max-width: 720px) { [data-hs-type-samples] [data-hs-type-specimen-row] { grid-template-columns: 1fr; gap: var(--hs-space-micro); } } /** * Opt-in HMS DataTable column contract (v1). * Applies only inside [data-hs-table-contract="DataTable/v1"]. * * Alignment: header and cell share the same horizontal align (see data-column-align). * Defaults: columnKindContract.ts → getDefaultColumnAlign. * @see src/docs/data-table-alignment-contract.md */ /* --- Border model, dividers, column air (visual standard; not DataTable.module.css) --- */ :where([data-hs-table-contract="DataTable/v1"]) { /* Header strip (thead/th) should be visually darker than the table background. */ --hs-table-header-bg: color-mix(in srgb, var(--hs-table-bg) 90%, var(--hs-ink) 10%); --hs-table-sort-icon-reserve: 20px; } :where([data-hs-table-contract="DataTable/v1"]) table { border-collapse: separate; border-spacing: 0; table-layout: fixed; border-bottom: var(--hs-table-border-width) solid var(--hs-table-border-color); } :where([data-hs-table-contract="DataTable/v1"]) th, :where([data-hs-table-contract="DataTable/v1"]) td { padding-inline: var(--hs-table-column-air-x); } /* Header strip: one continuous plate; top/bottom contour only (no vertical cell dividers). */ :where([data-hs-table-contract="DataTable/v1"]) thead th { box-sizing: border-box; position: relative; border-bottom: 0; box-shadow: inset 0 calc(-1 * var(--hs-table-border-width)) 0 var(--hs-table-cell-divider-color); } :where([data-hs-table-contract="DataTable/v1"]) thead tr:first-child th { box-shadow: inset 0 var(--hs-table-border-width) 0 var(--hs-table-cell-divider-color), inset 0 calc(-1 * var(--hs-table-border-width)) 0 var(--hs-table-cell-divider-color); } :where([data-hs-table-contract="DataTable/v1"]) thead tr:first-child th:first-child { border-top-left-radius: var(--hs-radius-md); } :where([data-hs-table-contract="DataTable/v1"]) thead tr:first-child th:last-child { border-top-right-radius: var(--hs-radius-md); } :where([data-hs-table-contract="DataTable/v1"]) tbody td { box-sizing: border-box; border-bottom: var(--hs-table-border-width) solid var(--hs-table-cell-divider-color); } :where([data-hs-table-contract="DataTable/v1"]) tbody tr:last-of-type td { border-bottom: 0; } /* --- Header background, cell typography --- */ :where([data-hs-table-contract="DataTable/v1"]) table thead, :where([data-hs-table-contract="DataTable/v1"]) table thead th { background: var(--hs-table-header-bg); } :where([data-hs-table-contract="DataTable/v1"]) table th, :where([data-hs-table-contract="DataTable/v1"]) table td { padding-block: var(--hs-table-cell-padding-y); min-width: 0; overflow: hidden; vertical-align: middle; } :where([data-hs-table-contract="DataTable/v1"]) table th { height: var(--hs-table-header-height); padding-block: 0; color: var(--hs-table-header-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-header-text); letter-spacing: var(--hs-table-header-tracking); text-transform: var(--hs-table-header-transform); text-align: var(--hs-table-header-text-align-default); white-space: nowrap; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="name"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="category"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="text"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="description"] { overflow: visible; text-overflow: clip; } :where([data-hs-table-contract="DataTable/v1"]) table td { min-height: var(--hs-table-row-min-height); height: auto; font-size: var(--hs-table-body-text); line-height: var(--hs-table-body-line-height); overflow-wrap: anywhere; } :where([data-hs-table-contract="DataTable/v1"]) table > caption { text-align: left; padding: var(--hs-table-caption-padding-y) 0; color: var(--hs-table-caption-color); font-size: var(--hs-table-secondary-text); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-primary] { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-size: var(--hs-table-body-text); font-weight: var(--hs-table-primary-weight); line-height: var(--hs-table-body-line-height); text-align: inherit; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-secondary] { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; color: var(--hs-table-secondary-color); font-size: var(--hs-table-secondary-text); line-height: var(--hs-leading-normal); text-align: inherit; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-technical] { color: var(--hs-table-col-presentation-compact-color); font-family: var(--hs-table-col-presentation-compact-font-family); font-size: var(--hs-table-col-presentation-compact-font-size); line-height: var(--hs-table-col-presentation-compact-line-height); text-align: inherit; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-body] { display: block; width: 100%; min-width: 0; text-align: inherit; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-stack], :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-inline] { width: 100%; min-width: 0; text-align: inherit; } :where([data-hs-table-contract="DataTable/v1"]) table td [data-ui="tag"] { min-height: var(--hs-table-tag-min-height); gap: var(--hs-table-tag-gap); padding: 0 var(--hs-table-tag-padding-x); font-size: var(--hs-table-tag-font-size); line-height: var(--hs-table-tag-line-height); } :where([data-hs-table-contract="DataTable/v1"]) table td [data-ui="tag"] svg { width: var(--hs-table-tag-icon-size); height: var(--hs-table-tag-icon-size); } :where([data-hs-table-contract="DataTable/v1"]) table td [data-ui="tag-group"] { gap: var(--hs-table-tag-group-gap); } :where([data-hs-table-contract="DataTable/v1"]) tr[data-table-empty-row] td { padding: var(--hs-table-empty-padding) var(--hs-table-cell-padding-x); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-empty-cell] { color: var(--hs-table-empty-color); text-align: center; font-size: var(--hs-table-body-text); line-height: var(--hs-table-empty-line-height); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-loading-cell], :where([data-hs-table-contract="DataTable/v1"]) [data-table-error-cell] { padding: var(--hs-table-empty-padding) var(--hs-table-cell-padding-x); text-align: left; vertical-align: top; } /* --- Alignment utilities & inner wrappers --- */ :where([data-hs-table-contract="DataTable/v1"]) [data-table-align="left"] { text-align: left; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-align="right"] { text-align: right; font-variant-numeric: tabular-nums; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-align="center"] { text-align: center; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-header-inner] { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--hs-space-micro); width: 100%; max-width: 100%; box-sizing: border-box; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="left"] [data-table-header-inner] { justify-content: flex-start; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="center"] [data-table-header-inner] { justify-content: center; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="right"] [data-table-header-inner] { justify-content: flex-end; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-icon-center] { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-numeric] { display: block; width: 100%; min-width: 0; text-align: inherit; font-variant-numeric: tabular-nums; } :where([data-hs-table-contract="DataTable/v1"]) table td [data-table-cell-inline] { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--hs-table-name-inline-gap); min-width: 0; } :where([data-hs-table-contract="DataTable/v1"]) table td [data-table-cell-inline] [data-table-cell-primary] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--hs-table-primary-weight); } :where([data-hs-table-contract="DataTable/v1"]) table td [data-table-cell-inline] [data-ui="tag"] { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-interactive] { display: block; width: 100%; min-width: 0; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-interactive] input, :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-interactive] textarea { width: 100%; min-width: 0; max-width: 100%; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-sortable="true"][data-sort-active="true"] [data-table-header-inner] { padding-inline-end: var(--hs-table-sort-icon-reserve, 20px); box-sizing: border-box; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-align] { text-align: var(--hs-table-col-text-align); } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="left"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-align="left"] { --hs-table-col-text-align: var(--hs-table-col-align-start); } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="right"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-align="right"] { --hs-table-col-text-align: var(--hs-table-col-align-end); } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="center"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-align="center"] { --hs-table-col-text-align: var(--hs-table-col-align-center); } /* Numeric cells — tabular figures regardless of align source. */ :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="count"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="number"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="volume"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="quantity"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="percent"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="money"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="price"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="debt"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="cost"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="total"] { font-variant-numeric: var(--hs-table-col-numeric-font-variant); } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="id"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="id"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="code"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="code"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="date"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="date"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="datetime"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="datetime"], :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-kind="meta"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-kind="meta"] { color: var(--hs-table-col-presentation-compact-color); font-family: var(--hs-table-col-presentation-compact-font-family); font-size: var(--hs-table-col-presentation-compact-font-size); line-height: var(--hs-table-col-presentation-compact-line-height); font-variant-numeric: var(--hs-table-col-numeric-font-variant); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-body][data-table-align="left"] { text-align: left; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-body][data-table-align="right"] { text-align: right; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-cell-body][data-table-align="center"] { text-align: center; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-actions-content] { display: inline-flex; align-items: center; gap: var(--hs-table-action-gap); width: 100%; justify-content: var(--hs-table-actions-justify); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-actions-content][data-actions-align="center"] { --hs-table-actions-justify: var(--hs-table-actions-justify-center); } :where([data-hs-table-contract="DataTable/v1"]) [data-table-actions-content][data-actions-align="end"], :where([data-hs-table-contract="DataTable/v1"]) [data-table-actions-content]:not([data-actions-align]) { --hs-table-actions-justify: var(--hs-table-actions-justify-end); } /* Icon actions — fixed square hit target in table rows. */ [data-hs-table-contract="DataTable/v1"] [data-table-actions-content] button[data-table-action="icon"] { box-sizing: border-box; flex-shrink: 0; width: var(--hs-table-action-size); height: var(--hs-table-action-size); min-width: var(--hs-table-action-size); min-height: var(--hs-table-action-size); } [data-hs-table-contract="DataTable/v1"] [data-table-actions-content] button[data-table-action="icon"] svg { width: var(--hs-table-action-icon-size); height: var(--hs-table-action-icon-size); } /* Text actions — auto width, dense row height. */ [data-hs-table-contract="DataTable/v1"] [data-table-actions-content] button[data-table-action="text"] { box-sizing: border-box; flex-shrink: 0; width: auto; min-width: 0; height: var(--hs-form-field-size-dense-height); min-height: var(--hs-form-field-size-dense-height); } /** * Horizontal scroll policy (DataTable contract v1 only). */ :where([data-hs-table-contract="DataTable/v1"][data-horizontal-scroll="true"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; } :where([data-hs-table-contract="DataTable/v1"][data-horizontal-scroll="false"]) { overflow-x: hidden; } /* widthMode: growCollapse may clip */ :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-width-mode="growCollapse"], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-width-mode="growCollapse"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-width-mode="growCollapse"] [data-table-cell-clip], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-width-mode="growCollapse"] [data-table-cell-primary], :where([data-hs-table-contract="DataTable/v1"]) table td[data-column-width-mode="growCollapse"] [data-table-cell-secondary] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; overflow-wrap: normal; } /** * adminMenu card layout — container-driven via data-responsive-mode="cards" (not viewport media). */ :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) table, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) thead, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) tbody, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) tr, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td { display: block; width: 100%; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) thead { display: none; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) tbody { display: grid; gap: var(--hs-table-mobile-row-gap); padding: var(--hs-table-mobile-row-gap) 0; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) tbody tr { display: grid; grid-template-columns: var(--hs-table-select-size) minmax(0, 1fr) auto; grid-template-areas: "select name status" "category subcategory subcategory" "volume price actions"; gap: var(--hs-table-mobile-row-gap) var(--hs-table-mobile-row-gap-inline); padding: var(--hs-table-mobile-row-padding); border: var(--hs-table-border-width) solid var(--hs-table-border-color); border-radius: var(--hs-table-mobile-row-radius); } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td { height: auto; padding: 0; border: 0; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) tr[data-table-empty-row] td { padding: var(--hs-space-3) 0; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="select"] { grid-area: select; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="name"] { grid-area: name; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="status"] { grid-area: status; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="category"] { grid-area: category; display: block; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="text"] { grid-area: subcategory; display: block; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="volume"] { grid-area: volume; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="price"] { grid-area: price; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="actions"] { grid-area: actions; } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="category"]::before, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="text"]::before, :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) td[data-column-kind="volume"]::before { content: attr(data-label); display: block; margin-bottom: var(--hs-table-mobile-label-gap); color: var(--hs-table-header-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-header-text); text-transform: var(--hs-table-header-transform); } :where([data-hs-table-contract="DataTable/v1"][data-layout="adminMenu"][data-responsive-mode="cards"]) [data-table-empty-cell] { display: block; text-align: center; } /* --- Sortable headers --- */ :where([data-hs-table-contract="DataTable/v1"]) [data-table-sort-button] { display: inline-flex; align-items: center; gap: var(--hs-space-micro); min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="left"] [data-table-sort-button] { width: 100%; justify-content: flex-start; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="center"] [data-table-sort-button] { width: 100%; justify-content: center; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-column-align="right"] [data-table-sort-button] { width: 100%; justify-content: flex-end; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-sort-button]:focus-visible { outline: 2px solid var(--hs-focus-ring); outline-offset: 2px; } :where([data-hs-table-contract="DataTable/v1"]) [data-table-sort-indicator] { flex: 0 0 auto; color: var(--hs-table-header-color); font-size: var(--hs-table-secondary-text); line-height: 1; } :where([data-hs-table-contract="DataTable/v1"]) table th[data-sort-active="true"] [data-table-sort-indicator] { color: var(--hs-ink); } /* --- Pinned columns (table mode) --- */ :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"]) th[data-column-pin="left"], :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"]) td[data-column-pin="left"] { position: sticky; left: var(--hs-table-pin-left, 0); z-index: 2; background: var(--hs-table-bg); } :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"]) th[data-column-pin="right"], :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"]) td[data-column-pin="right"] { position: sticky; right: var(--hs-table-pin-right, 0); z-index: 2; background: var(--hs-table-bg); } :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"]) thead th[data-column-pin] { z-index: 3; background: var(--hs-table-header-bg); } :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"][data-horizontal-scroll="true"]) th[data-column-pin="left"], :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"][data-horizontal-scroll="true"]) td[data-column-pin="left"] { box-shadow: inset calc(-1 * var(--hs-line-width)) 0 0 var(--hs-table-cell-divider-color); } :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"][data-horizontal-scroll="true"]) th[data-column-pin="right"], :where([data-hs-table-contract="DataTable/v1"][data-responsive-mode="table"][data-horizontal-scroll="true"]) td[data-column-pin="right"] { box-shadow: inset var(--hs-line-width) 0 0 var(--hs-table-cell-divider-color); } /* --- Row state --- */ :where([data-hs-table-contract="DataTable/v1"]) tbody tr[data-row-state="dirty"] td { background: color-mix(in srgb, var(--hs-warning-soft) 55%, var(--hs-table-bg)); } :where([data-hs-table-contract="DataTable/v1"]) tbody tr[data-row-state="saving"] td { opacity: 0.72; } :where([data-hs-table-contract="DataTable/v1"]) tbody tr[data-row-state="error"] td { background: color-mix(in srgb, var(--hs-danger-soft) 70%, var(--hs-table-bg)); box-shadow: inset 0 0 0 var(--hs-line-width) color-mix(in srgb, var(--hs-danger) 35%, transparent); } :where([data-hs-table-contract="DataTable/v1"]) tbody tr[data-row-state="disabled"] td { opacity: 0.55; } /* * Form field size hosts — set active control tokens for primitives, Button (md), and SegmentedControl. * Canonical: [data-hs-field-size="sm" | "md" | "lg" | "dense"] * Legacy: [data-hs-control-density="default" | "compact" | "dense"] */ :root { --hs-control-active-height: var(--hs-form-field-size-md-height); --hs-control-active-padding-x: var(--hs-form-field-size-md-padding-x); --hs-control-active-font-size: var(--hs-form-field-size-md-font-size); --hs-control-active-label-size: var(--hs-form-field-size-md-label-size); --hs-control-active-description-size: var(--hs-form-field-size-md-description-size); --hs-control-active-textarea-min-height: var(--hs-form-field-size-md-textarea-min-height); --hs-control-active-icon-size: var(--hs-form-field-size-md-icon-size); } [data-hs-field-size="md"], [data-hs-control-density="default"] { --hs-control-active-height: var(--hs-form-field-size-md-height); --hs-control-active-padding-x: var(--hs-form-field-size-md-padding-x); --hs-control-active-font-size: var(--hs-form-field-size-md-font-size); --hs-control-active-label-size: var(--hs-form-field-size-md-label-size); --hs-control-active-description-size: var(--hs-form-field-size-md-description-size); --hs-control-active-textarea-min-height: var(--hs-form-field-size-md-textarea-min-height); --hs-control-active-icon-size: var(--hs-form-field-size-md-icon-size); } [data-hs-field-size="sm"], [data-hs-control-density="compact"] { --hs-control-active-height: var(--hs-form-field-size-sm-height); --hs-control-active-padding-x: var(--hs-form-field-size-sm-padding-x); --hs-control-active-font-size: var(--hs-form-field-size-sm-font-size); --hs-control-active-label-size: var(--hs-form-field-size-sm-label-size); --hs-control-active-description-size: var(--hs-form-field-size-sm-description-size); --hs-control-active-textarea-min-height: var(--hs-form-field-size-sm-textarea-min-height); --hs-control-active-icon-size: var(--hs-form-field-size-sm-icon-size); } [data-hs-field-size="lg"], [data-hs-control-density="lg"] { --hs-control-active-height: var(--hs-form-field-size-lg-height); --hs-control-active-padding-x: var(--hs-form-field-size-lg-padding-x); --hs-control-active-font-size: var(--hs-form-field-size-lg-font-size); --hs-control-active-label-size: var(--hs-form-field-size-lg-label-size); --hs-control-active-description-size: var(--hs-form-field-size-lg-description-size); --hs-control-active-textarea-min-height: var(--hs-form-field-size-lg-textarea-min-height); --hs-control-active-icon-size: var(--hs-form-field-size-lg-icon-size); } [data-hs-field-size="dense"], [data-hs-control-density="dense"], [data-hs-form-toolbar="dense"] { --hs-control-active-height: var(--hs-form-field-size-dense-height); --hs-control-active-padding-x: var(--hs-form-field-size-dense-padding-x); --hs-control-active-font-size: var(--hs-form-field-size-dense-font-size); --hs-control-active-label-size: var(--hs-form-field-size-dense-label-size); --hs-control-active-description-size: var(--hs-form-field-size-dense-description-size); --hs-control-active-textarea-min-height: var(--hs-form-field-size-dense-textarea-min-height); --hs-control-active-icon-size: var(--hs-form-field-size-dense-icon-size); --hs-search-input-icon-gap: var(--hs-form-field-size-dense-icon-gap); --hs-form-field-select-chevron-border-top: 4px; --hs-form-field-select-chevron-border-side: 3px; --hs-form-field-textarea-padding-y: var(--hs-form-field-size-dense-textarea-padding-y); } [data-hs-form-toolbar="dense"] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--hs-form-toolbar-gap); min-width: 0; } [data-hs-form-toolbar="dense"] [data-ui="form-field"] { gap: 0; } [data-hs-form-toolbar="dense"] [data-hs-form-toolbar-divider] { flex-shrink: 0; align-self: stretch; width: var(--hs-line-width); min-height: var(--hs-control-active-height); margin: 0; padding: 0; border: 0; background: var(--hs-line-color); } [data-hs-form-toolbar="dense"] [data-hs-form-toolbar-search] { flex: 1 1 auto; min-width: var(--hs-table-toolbar-filter-width); max-width: 20rem; } [data-hs-form-toolbar="dense"] [data-hs-form-toolbar-field] { flex: 0 1 auto; min-width: 0; } [data-hs-form-toolbar="dense"] [role="radiogroup"] { box-sizing: border-box; height: var(--hs-control-active-height); } [data-hs-form-toolbar="dense"] [data-ui="button"]:not([data-size="sm"]):not([data-size="lg"]) { height: var(--hs-control-active-height); padding-inline: var(--hs-control-active-padding-x); font-size: var(--hs-control-active-font-size); border-radius: var(--hs-radius-sm); } [data-hs-form-toolbar="dense"] [data-table-action="icon"] { width: var(--hs-control-active-height); height: var(--hs-control-active-height); } [data-hs-control-density="dense"] [data-ui="button"][data-size="dense"], [data-hs-field-size="dense"] [data-ui="button"][data-size="dense"] { border-radius: var(--hs-radius-sm); } [data-hs-form-toolbar="dense"] [data-hs-form-toolbar-checkbox] { display: inline-flex; flex-shrink: 0; align-items: center; } [data-hs-form-toolbar="dense"] [data-ui="checkbox"] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--hs-form-toolbar-checkbox-hit-size); height: var(--hs-form-toolbar-checkbox-hit-size); } [data-hs-form-toolbar="dense"] [data-ui="checkbox"] .hit { display: grid; place-items: center; box-sizing: border-box; width: var(--hs-form-toolbar-checkbox-hit-size); height: var(--hs-form-toolbar-checkbox-hit-size); min-width: 0; min-height: 0; padding: 0; margin: 0; } [data-hs-form-toolbar="dense"] [data-ui="checkbox"] .control { width: var(--hs-form-toolbar-checkbox-size); height: var(--hs-form-toolbar-checkbox-size); } [data-hs-form-toolbar="dense"] [data-ui="checkbox"] .indicator { width: calc(var(--hs-form-toolbar-checkbox-size) * 0.72); height: calc(var(--hs-form-toolbar-checkbox-size) * 0.72); } /* * Unified line contract — solid + micro-dash (2+4 @ 1px). * Tokens: --hs-line-width, --hs-line-color, --hs-line-dash-* in metrics.css. * Scale hosts may override --hs-line-rule-stroke, --hs-line-dash-pattern-length, * --hs-line-dash-pattern-period for proportional guest cards. */ .hs-line-rule-solid { display: block; width: 100%; height: var(--hs-line-width); border: 0; margin: 0; padding: 0; background: var(--hs-line-color); } .hs-line-dash-gradient, .hs-line-rule-dashed, .hs-line-between > * + *::before, .hs-line-edge-bottom::after { background-color: transparent; background-image: repeating-linear-gradient( to right, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); background-repeat: repeat-x; background-size: var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) var(--hs-line-rule-stroke, var(--hs-line-width)); background-position: 0 50%; } .hs-line-rule-dashed { display: block; width: 100%; height: var(--hs-line-rule-stroke, var(--hs-line-width)); border: 0; margin: 0; padding: 0; } .hs-line-between > * + * { position: relative; border-top: none; } .hs-line-between > * + *::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); } .hs-line-edge-bottom { position: relative; } .hs-line-edge-bottom::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); pointer-events: none; } .hs-line-border-dashed { border: var(--hs-line-width) dashed var(--hs-line-color); } .hs-line-border-dashed-bottom { border-bottom: var(--hs-line-width) dashed var(--hs-line-color); } .hs-line-rule-dashed-vertical { background-color: transparent; background-image: repeating-linear-gradient( to bottom, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); background-repeat: repeat-y; background-size: var(--hs-line-rule-stroke, var(--hs-line-width)) var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)); background-position: 50% 0; } /* Solid hairline on container edge — parent gains position: relative */ .hs-line-hairline-top::before, .hs-line-hairline-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); background: var(--hs-line-color); pointer-events: none; } .hs-line-hairline-top { position: relative; border-top: none; } .hs-line-hairline-top::before { top: 0; } .hs-line-hairline-bottom { position: relative; border-bottom: none; } .hs-line-hairline-bottom::after { bottom: 0; } /* Micro-dash frame (4 edges) — replaces native border: dashed on upload zones */ .hs-line-frame-dashed { --_hs-line-dash-h: repeating-linear-gradient( to right, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); --_hs-line-dash-v: repeating-linear-gradient( to bottom, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); border: none; background-image: var(--_hs-line-dash-h), var(--_hs-line-dash-h), var(--_hs-line-dash-v), var(--_hs-line-dash-v); background-size: 100% var(--hs-line-width), 100% var(--hs-line-width), var(--hs-line-width) 100%, var(--hs-line-width) 100%; background-position: top, bottom, left, right; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; } /* * Minimal scroll chrome — opt in with data-hs-scrollbar="minimal". * Tokens: --hs-scrollbar-* in metrics.css. Contract: src/docs/scroll-chrome.md */ [data-hs-scrollbar="minimal"] { scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: var(--hs-scrollbar-thumb) var(--hs-scrollbar-track); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar { width: var(--hs-scrollbar-size); height: var(--hs-scrollbar-size); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-track { background: var(--hs-scrollbar-track); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb { background-color: var(--hs-scrollbar-thumb); border-radius: var(--hs-scrollbar-thumb-radius); min-height: var(--hs-scrollbar-thumb-min-length); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb:hover { background-color: var(--hs-scrollbar-thumb-hover); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb:active { background-color: var(--hs-scrollbar-thumb-active); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-corner { background: transparent; } /* * Doc token reference —
styled with --hs-table-* tokens. * Columns: Образец | Токен | Значение | Назначение. * data-hs-token-ref-columns="2" lays out groups in two columns. */ [data-hs-token-ref] { display: grid; gap: var(--hs-space-2); } [data-hs-token-ref][data-hs-token-ref-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hs-space-4); align-items: start; } [data-hs-token-ref] [data-hs-token-ref-group] { display: grid; gap: var(--hs-space-2); min-width: 0; } [data-hs-token-ref] [data-hs-token-ref-group] + [data-hs-token-ref-group] { padding-top: var(--hs-space-2); } [data-hs-token-ref][data-hs-token-ref-columns="2"] [data-hs-token-ref-group] + [data-hs-token-ref-group] { padding-top: 0; } [data-hs-token-ref] [data-hs-token-ref-group-title] { margin: 0; color: var(--hs-table-caption-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-footer-font-size); font-weight: var(--hs-font-weight-bold); letter-spacing: var(--hs-table-header-tracking); text-transform: uppercase; } [data-hs-token-ref] [data-hs-token-ref-group-title-text] { color: var(--hs-table-caption-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-footer-font-size); font-weight: var(--hs-font-weight-bold); letter-spacing: var(--hs-table-header-tracking); line-height: var(--hs-leading-snug); text-transform: uppercase; } [data-hs-token-ref] [data-hs-token-ref-group-description] { margin: 0; color: var(--hs-muted); } /* * Token reference tables — flat rows, no cell or edge dividers. */ [data-hs-token-ref] table, [data-hs-token-ref-table] { width: 100%; border-collapse: collapse; } [data-hs-token-ref] td, [data-hs-token-ref-table] td { padding-inline: var(--hs-table-cell-padding-x); padding-block: var(--hs-table-cell-padding-y); vertical-align: middle; font-size: var(--hs-table-body-text); line-height: var(--hs-table-body-line-height); } [data-hs-token-ref] th, [data-hs-token-ref-table] th { padding-inline: var(--hs-table-cell-padding-x); padding-block: var(--hs-table-cell-padding-y); color: var(--hs-table-header-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-header-text); font-weight: var(--hs-font-weight-semibold); letter-spacing: var(--hs-table-header-tracking); text-align: left; vertical-align: bottom; } [data-hs-token-ref] th:first-child, [data-hs-token-ref-table] th:first-child { padding-inline-start: 0; width: var(--hs-token-ref-preview-col); text-align: center; } [data-hs-token-ref] td[data-hs-token-ref-cell="preview"], [data-hs-token-ref-table] td[data-hs-token-ref-cell="preview"] { width: var(--hs-token-ref-preview-col); padding-inline-start: 0; text-align: center; } [data-hs-token-ref] td[data-hs-token-ref-cell="token"] { min-width: 0; } [data-hs-token-ref] td[data-hs-token-ref-cell="token"] code { font-family: var(--hs-table-header-font); font-size: var(--hs-table-mono-text); word-break: break-word; } [data-hs-token-ref] td[data-hs-token-ref-cell="value"] { min-width: 0; } [data-hs-token-ref] [data-hs-token-ref-value] { color: var(--hs-table-mono-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-mono-text); } [data-hs-token-ref] td[data-hs-token-ref-cell="role"] { color: var(--hs-table-secondary-color); font-size: var(--hs-table-secondary-text); line-height: var(--hs-table-body-line-height); } [data-hs-token-ref] [data-hs-token-ref-preview], [data-hs-token-ref-table] [data-hs-token-ref-preview] { display: flex; align-items: center; justify-content: center; min-height: var(--hs-token-ref-row-min-height); } [data-hs-token-ref] [data-hs-token-ref-chip], [data-hs-token-ref-table] [data-hs-token-ref-chip] { display: block; flex-shrink: 0; width: var(--hs-token-ref-chip-size); height: var(--hs-token-ref-chip-size); border: var(--hs-table-border-width) solid var(--hs-table-cell-divider-color); border-radius: 50%; } [data-hs-token-ref-chip="spacer"] { visibility: hidden; } [data-hs-token-ref] [data-hs-token-ref-type-specimen] { display: inline-flex; align-items: center; justify-content: center; min-width: var(--hs-token-ref-chip-size); min-height: var(--hs-token-ref-chip-size); color: var(--hs-ink); font-weight: var(--hs-font-weight-semibold); line-height: 1; white-space: nowrap; } [data-hs-token-ref] [data-hs-token-ref-type-specimen="leading"] { flex-direction: column; line-height: inherit; } [data-hs-token-ref] [data-hs-token-ref-space] { height: var(--hs-space-3); min-width: 1px; max-width: 3rem; border-radius: var(--hs-radius-sm); background: var(--hs-ink); } [data-hs-token-ref] [data-hs-token-ref-spacing-stack] { display: flex; flex-direction: column; gap: var(--hs-token-ref-stack-gap, var(--hs-space-2)); align-items: stretch; width: 2.25rem; } [data-hs-token-ref] [data-hs-token-ref-spacing-stack] > span { display: block; height: 5px; border-radius: var(--hs-radius-sm); background: var(--hs-ink); } [data-hs-token-ref] [data-hs-token-ref-metrics-skeleton] { display: grid; box-sizing: border-box; width: 2.75rem; min-height: var(--hs-token-ref-chip-size); overflow: hidden; border: var(--hs-line-width) solid var(--hs-line-color); border-radius: var(--hs-radius-sm); background: var(--hs-bg); } [data-hs-token-ref-metrics-skeleton="modal"], [data-hs-token-ref-metrics-skeleton="card"] { grid-template-rows: auto 1fr auto; padding: var(--hs-token-ref-skeleton-padding, var(--hs-modal-inset)); gap: var(--hs-token-ref-skeleton-gap, var(--hs-modal-header-gap)); } [data-hs-token-ref-metrics-skeleton="card"] { padding: var(--hs-token-ref-skeleton-padding, var(--hs-card-inset)); gap: var(--hs-token-ref-skeleton-gap, var(--hs-card-gap)); } [data-hs-token-ref-metrics-skeleton="modal"] > span, [data-hs-token-ref-metrics-skeleton="card"] > span { display: block; border-radius: 2px; background: var(--hs-soft); } [data-hs-token-ref-metrics-skeleton="modal"] > span:nth-child(1), [data-hs-token-ref-metrics-skeleton="card"] > span:nth-child(1) { height: 5px; } [data-hs-token-ref-metrics-skeleton="modal"] > span:nth-child(2), [data-hs-token-ref-metrics-skeleton="card"] > span:nth-child(2) { min-height: 6px; } [data-hs-token-ref-metrics-skeleton="modal"] > span:nth-child(3), [data-hs-token-ref-metrics-skeleton="card"] > span:nth-child(3) { height: 4px; } [data-hs-token-ref-metrics-skeleton="form"] { grid-template-rows: auto auto; align-content: start; padding: var(--hs-token-ref-skeleton-padding, 0); gap: var(--hs-token-ref-skeleton-gap, var(--hs-form-field-gap)); } [data-hs-token-ref-metrics-skeleton="form"] > span { display: block; border-radius: 2px; background: var(--hs-soft); } [data-hs-token-ref-metrics-skeleton="form"] > span:nth-child(1) { height: 3px; width: 55%; } [data-hs-token-ref-metrics-skeleton="form"] > span:nth-child(2) { height: 10px; } [data-hs-token-ref-metrics-skeleton="table"] { align-content: center; padding-inline: var(--hs-token-ref-skeleton-padding, var(--hs-table-column-air-x)); padding-block: var(--hs-space-micro); } [data-hs-token-ref-metrics-skeleton="table"]::before { display: block; height: 6px; border-radius: 2px; background: var(--hs-ink); content: ""; } [data-hs-token-ref-metrics-skeleton="surface"] { align-content: stretch; padding: var(--hs-token-ref-skeleton-padding, var(--hs-surface-padding-md)); gap: var(--hs-token-ref-skeleton-gap, var(--hs-surface-gap-md)); } [data-hs-token-ref-metrics-skeleton="surface"] > span { display: block; min-height: 1.25rem; border-radius: 2px; background: color-mix(in srgb, var(--hs-soft) 88%, var(--hs-ink)); } [data-hs-token-ref] [data-hs-token-ref-radius] { width: 2.25rem; height: 1.25rem; border: var(--hs-table-border-width) solid var(--hs-line); background: var(--hs-soft); } [data-hs-token-ref] [data-hs-token-ref-control] { display: inline-flex; align-items: center; padding: 0 var(--hs-table-cell-padding-x); border: var(--hs-table-border-width) solid var(--hs-control-border); border-radius: var(--hs-radius-sm); background: var(--hs-field); color: var(--hs-table-mono-color); font-family: var(--hs-table-header-font); font-size: var(--hs-table-secondary-text); white-space: nowrap; } [data-hs-token-ref] [data-hs-token-ref-focus-sample] { display: block; width: 0.875rem; height: 0.875rem; border: var(--hs-table-border-width) solid var(--hs-line-color); border-radius: var(--hs-radius-sm); background: var(--hs-field); box-shadow: 0 0 0 var(--hs-token-ref-ring-offset, var(--hs-focus-ring-offset)) var(--hs-bg), 0 0 0 calc(var(--hs-token-ref-ring-offset, var(--hs-focus-ring-offset)) + var(--hs-token-ref-ring-width, var(--hs-focus-ring-width))) var(--hs-token-ref-ring-color, var(--hs-focus)); } [data-hs-token-ref] [data-hs-token-ref-motion] { display: inline-flex; gap: var(--hs-space-micro); align-items: center; width: 2.75rem; min-height: var(--hs-token-ref-chip-size); } [data-hs-token-ref] [data-hs-token-ref-motion-track] { display: block; flex: 1; min-width: 0; height: 4px; overflow: hidden; border-radius: var(--hs-radius-pill); background: var(--hs-soft); } [data-hs-token-ref] [data-hs-token-ref-motion-fill] { display: block; height: 100%; border-radius: inherit; background: var(--hs-ink); } [data-hs-token-ref] [data-hs-token-ref-motion-thumb] { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--hs-ink); transition: transform var(--hs-token-ref-motion-duration, var(--hs-transition-fast-effects)); } [data-hs-token-ref] tbody tr:hover [data-hs-token-ref-motion-thumb] { transform: translateX(0.65rem); } [data-hs-token-ref] [data-hs-token-ref-line] { display: block; width: 2.75rem; border-top: var(--hs-token-ref-line-width, var(--hs-line-width)) solid var(--hs-ink); } @media (max-width: 1024px) { [data-hs-token-ref][data-hs-token-ref-columns="2"] { grid-template-columns: 1fr; } [data-hs-token-ref][data-hs-token-ref-columns="2"] [data-hs-token-ref-group] + [data-hs-token-ref-group] { padding-top: var(--hs-space-2); } } /* Pattern catalog — compact token · value tables */ [data-hs-token-ref-density="compact"] { gap: var(--hs-space-2); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-group] { gap: var(--hs-gap-sm); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-group-title] { padding-block-end: var(--hs-space-2); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-group-title-text] { color: var(--hs-ink); font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); font-weight: var(--hs-font-weight-semibold); letter-spacing: normal; line-height: var(--hs-leading-snug); text-transform: none; } [data-hs-token-ref-density="compact"] [data-hs-token-ref-group-description] { font-size: var(--hs-text-xs); line-height: var(--hs-leading-normal); color: var(--hs-muted); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-group-title] .hs-material-symbol, [data-hs-token-ref-density="compact"] [data-hs-token-ref-group-title] svg { width: 1.125rem; height: 1.125rem; } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired="compact-preview"] { gap: var(--hs-space-2); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired-header] { gap: var(--hs-space-3); } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td[data-hs-token-ref-cell="preview"] { width: calc(var(--hs-token-ref-chip-size) + var(--hs-table-cell-padding-x)); padding-inline: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] [data-hs-token-ref-preview] { min-height: auto; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] td, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td { padding-block: var(--hs-space-1); font-size: var(--hs-text-xs); line-height: var(--hs-leading-normal); } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] td[data-hs-token-ref-cell="token"] code, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td[data-hs-token-ref-cell="token"] code { font-size: inherit; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] [data-hs-token-ref-value], [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] [data-hs-token-ref-value] { font-size: inherit; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] [data-hs-token-ref-note], [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] [data-hs-token-ref-note] { color: var(--hs-table-secondary-color); } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] td[data-hs-token-ref-cell="summary"], [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td[data-hs-token-ref-cell="summary"] { color: var(--hs-table-secondary-color); } /* * compact-preview + editor — shared column widths across stacked group tables * (preview fixed · token/summary ratio matches paired compact · editor fills rest). */ [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"]:has([data-hs-token-ref-cell="editor"]) { table-layout: fixed; min-width: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"]:has([data-hs-token-ref-cell="editor"]) td[data-hs-token-ref-cell="token"] { width: 26%; min-width: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"]:has([data-hs-token-ref-cell="editor"]) td[data-hs-token-ref-cell="summary"] { width: 24%; min-width: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td[data-hs-token-ref-cell="editor"] { min-width: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"]:has([data-hs-token-ref-cell="editor"]) td[data-hs-token-ref-cell="editor"] { width: auto; } @media (max-width: 720px) { [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"], [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"], [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] tbody, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] tbody, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] tr, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] tr, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] td, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td { display: table; width: auto; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] tr, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] tr { display: table-row; border-top: 0; padding-block: 0; } [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact"] td::before, [data-hs-token-ref-density="compact"] table[data-hs-token-ref-table="compact-preview"] td::before { content: none; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) thead { display: none; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) table, [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) tbody, [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) tr, [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) td { display: block; width: 100%; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) td { padding-inline: 0; border-top: 0; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) td[data-hs-token-ref-cell]::before { display: block; margin-bottom: var(--hs-space-micro); color: var(--hs-faint); content: attr(data-label); font-family: var(--hs-table-header-font); font-size: var(--hs-table-secondary-text); font-weight: var(--hs-font-weight-semibold); letter-spacing: var(--hs-tracking-kicker); text-transform: uppercase; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) tbody tr { padding-block: var(--hs-table-cell-padding-y); } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) tbody tr:first-child { padding-top: 0; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) td[data-hs-token-ref-cell="preview"] { width: auto; text-align: start; } [data-hs-token-ref]:not([data-hs-token-ref-density="compact"]) td[data-hs-token-ref-cell="preview"]::before { text-align: start; } } /* Paired compact tables: one grid row per index so left/right share height */ [data-hs-token-ref-paired="compact-preview"] { display: grid; gap: var(--hs-space-2); } [data-hs-token-ref-paired-header] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hs-space-4); } [data-hs-token-ref-paired-header] [data-hs-token-ref-group-title] { margin: 0; } [data-hs-token-ref-paired-body] { display: grid; } [data-hs-token-ref-paired-row] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hs-space-4); align-items: stretch; } [data-hs-token-ref-paired-row]:first-child { padding-top: 0; } [data-hs-token-ref-paired-side] { display: grid; grid-template-columns: calc(var(--hs-token-ref-chip-size) + var(--hs-table-cell-padding-x)) minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; column-gap: var(--hs-table-cell-padding-x); min-height: var(--hs-token-ref-row-min-height); padding-block: var(--hs-space-micro); font-size: var(--hs-text-2xs); line-height: var(--hs-leading-snug); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired-side] [data-hs-token-ref-preview] { min-height: var(--hs-token-ref-chip-size); } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired-side] [data-hs-token-ref-cell="preview"] { padding-inline: 0; } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired-side] [data-hs-token-ref-cell="token"] code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-hs-token-ref-density="compact"] [data-hs-token-ref-paired-side] [data-hs-token-ref-cell="summary"] { color: var(--hs-table-secondary-color); } @media (max-width: 719px) { [data-hs-token-ref-paired-header], [data-hs-token-ref-paired-row] { grid-template-columns: minmax(0, 1fr); } } /* Magic UI iPhone device mock — layout + tokens from metrics.css (metrics-layout-breakpoints.css). */ [data-hs-device-mock="iphone"] { position: relative; display: inline-block; flex: 0 0 auto; width: var(--hs-device-mock-width, 280px); max-width: 100%; margin-inline: auto; vertical-align: middle; line-height: 0; aspect-ratio: var(--hs-device-mock-aspect-w) / var(--hs-device-mock-aspect-h); } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-screen { position: absolute; z-index: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--hs-device-mock-screen, #ffffff); left: 4.9076%; top: 2.1825%; width: 89.9538%; height: 95.6349%; border-radius: 14.3132% / 6.6117%; } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-screen-content { position: relative; z-index: 0; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; /* Chassis uses line-height: 0 for SVG alignment — restore readable rhythm for guest UI. */ line-height: normal; } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-screen-content > * { width: 100%; height: 100%; min-height: 0; max-height: 100%; overflow: hidden; } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-safe-top, [data-hs-device-mock="iphone"] .hs-device-mock-iphone-safe-bottom { flex: 0 0 auto; width: 100%; background: var(--hs-device-mock-safe-chrome, #000000); } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-safe-top { height: var(--hs-device-mock-safe-top, 11.5%); } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-safe-bottom { height: var(--hs-device-mock-safe-bottom, 9.5%); } [data-hs-device-mock="iphone"] .hs-device-mock-iphone-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transform: translateZ(0); } .hs-device-mock-iphone-chassis { fill: var(--hs-device-mock-chassis, #e5e5e5); stroke: var(--hs-device-mock-chassis, #e5e5e5); stroke-width: 0.5; } .hs-device-mock-iphone-inner { fill: var(--hs-device-mock-inner, #ffffff); } .hs-device-mock-iphone-island { fill: var(--hs-device-mock-island, #f5f5f5); }