/* Extra component classes not in the base components.css.
   Same token vocabulary — spinner, tooltip, progress, skeleton, empty state. */

/* ── Spinner ── */
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-spinner{display:inline-block;border-radius:50%;border:3px solid var(--bento-theme-color-border-base);border-top-color:var(--bento-theme-color-icon-base);animation:hs-spin .7s linear infinite;box-sizing:border-box;flex-shrink:0}
.hs-spinner--inverse{border-color:rgba(255,255,255,.3);border-top-color:#fff}

/* ── Tooltip ── */
.hs-tooltip-wrap{position:relative;display:inline-flex}
.hs-tooltip{position:absolute;z-index:1120;pointer-events:none;opacity:0;transition:opacity 120ms;white-space:nowrap;background:var(--bento-component-tooltip-fill);color:var(--bento-component-tooltip-text);padding:6px 12px;border-radius:var(--bento-theme-border-radii-03);font:var(--hs-type-body-sm);max-width:250px}
.hs-tooltip-wrap:hover .hs-tooltip,.hs-tooltip-wrap:focus-within .hs-tooltip{opacity:1}
.hs-tooltip--top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px}
.hs-tooltip--bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px}
.hs-tooltip--left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}
.hs-tooltip--right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}

/* ── Progress bar ── */
.hs-progress{width:100%;height:var(--bento-component-progress-bar-height-md);border-radius:999px;background:var(--bento-component-progress-bar-fill-track);overflow:hidden}
.hs-progress--sm{height:var(--bento-component-progress-bar-height-sm)}
.hs-progress--lg{height:var(--bento-component-progress-bar-height-lg)}
.hs-progress>i{display:block;height:100%;border-radius:inherit;background:var(--bento-component-progress-bar-fill-indicator);transition:width 200ms}

/* ── Skeleton ── */
@keyframes hs-shimmer { 100% { background-position:-200% 0 } }
.hs-skeleton{background:linear-gradient(90deg,var(--bento-component-skeleton-bg) 25%,color-mix(in srgb,var(--bento-component-skeleton-bg) 60%,#000 6%) 37%,var(--bento-component-skeleton-bg) 63%);background-size:200% 100%;animation:hs-shimmer 1.4s ease infinite;border-radius:var(--bento-theme-border-radii-03)}
.hs-skeleton--circle{border-radius:50%}
.hs-skeleton--text{height:16px;border-radius:4px}

/* ── Empty state ── */
.hs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 24px}
.hs-empty .hs-empty-icon{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bento-theme-color-bg-surface-recessed);color:var(--bento-theme-color-icon-subtle)}
.hs-empty .hs-empty-icon .material-symbols-outlined{font-size:32px}
.hs-empty-actions{display:flex;gap:8px}

/* ── Stepper ── */
.hs-stepper{display:inline-flex;align-items:center;gap:8px}
.hs-stepper .hs-stepper-val{min-width:48px;text-align:center;font:var(--hs-type-body-md-b)}

/* ── Slider (native range) ── */
.hs-slider{-webkit-appearance:none;appearance:none;cursor:pointer}
.hs-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--bento-component-slider-thumb-bg);box-shadow:var(--bento-theme-elevation-shadow-raised);cursor:pointer}
.hs-slider::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--bento-component-slider-thumb-bg);box-shadow:var(--bento-theme-elevation-shadow-raised);cursor:pointer}
.hs-slider:disabled{opacity:.4;cursor:not-allowed}

/* ── File uploader drop zone ── */
.hs-uploader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:40px 48px;border:2px dashed var(--bento-component-file-uploader-border-color);border-radius:var(--bento-theme-border-radii-03);background:var(--bento-component-file-uploader-fill);color:var(--bento-theme-color-text-base);cursor:pointer;transition:background 120ms,border-color 120ms}
.hs-uploader:hover{background:var(--bento-component-file-uploader-fill-hovered);border-color:var(--bento-component-file-uploader-border-color-hovered)}

/* ── Table ── */
.hs-table{width:100%;border-collapse:collapse;font:var(--hs-type-body-md);background:var(--bento-component-table-fill)}
.hs-table th,.hs-table td{text-align:left;padding:var(--bento-component-table-cell-padding-y) var(--bento-component-table-cell-padding-x);border-bottom:1px solid var(--bento-component-table-border);vertical-align:middle}
.hs-table thead th{font:var(--hs-type-body-sm-b);color:var(--bento-theme-color-text-subtle);white-space:nowrap}
.hs-table tbody tr{transition:background 120ms}
.hs-table tbody tr:hover{background:var(--bento-component-table-fill-hovered)}
.hs-table tbody tr.is-selected{background:var(--bento-component-table-selected-fill)}
.hs-table td.num,.hs-table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── Toggle group / display toggle (segmented pill) ── */
.hs-toggle-group{display:inline-flex;padding:2px;gap:2px;background:var(--bento-theme-color-bg-surface-recessed);border-radius:999px}
.hs-toggle-group button{appearance:none;border:0;background:transparent;height:36px;padding:0 16px;border-radius:999px;font:var(--hs-type-body-sm-b);color:var(--bento-theme-color-text-subtle);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background 120ms,color 120ms}
.hs-toggle-group button .material-symbols-outlined{font-size:18px}
.hs-toggle-group button.is-active{background:var(--hs-surface);color:var(--hs-fg);box-shadow:var(--bento-theme-elevation-shadow-raised)}

/* ── Button choice (selectable card option) ── */
.hs-choice{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--bento-theme-color-border-base);border-radius:8px;cursor:pointer;background:var(--hs-surface);transition:border-color 120ms,background 120ms}
.hs-choice:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-choice.is-selected{border-width:2px;border-color:var(--bento-theme-color-border-selected);padding:15px}
.hs-choice .hs-choice-body{display:flex;flex-direction:column;gap:2px}

/* ── Thumbnail ── */
.hs-thumb{background:var(--bento-component-thumbnail-fill-placeholder);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:var(--bento-theme-color-icon-subtle);flex-shrink:0}
.hs-thumb img{width:100%;height:100%;object-fit:cover}

/* ── Overlays: modal / drawer / popover ── */
.hs-overlay{position:absolute;inset:0;background:var(--bento-theme-color-opacity-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}
.hs-modal{box-sizing:border-box;/* I6 */background:var(--hs-surface);border-radius:16px;box-shadow:var(--bento-theme-elevation-shadow-overlay-bottom);max-width:448px;width:calc(100% - 48px);padding:24px;display:flex;flex-direction:column;gap:16px}
.hs-drawer{position:fixed;top:0;right:0;height:100vh;width:336px;background:var(--hs-surface);box-shadow:var(--bento-theme-elevation-shadow-drawer-from-left);display:flex;flex-direction:column;z-index:1001}
.hs-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bento-theme-color-border-subtle);height:64px;box-sizing:border-box}
.hs-drawer-body{padding:16px;overflow:auto;flex:1}
/* MEASURED 2026-09-07 on Perch's date-range dialog (role=dialog,
   aria-haspopup=dialog, 368×396, anchored to its trigger, no scrim), surface
   rgb(253,253,253) = #FDFDFD: radius 8px all four corners, box-shadow the
   two-layer overlay-bottom value (which --bento-theme-elevation-shadow-
   overlay-bottom ALREADY matched character-for-character — four numeric
   components and two alphas, not a coincidence), border 0px none.
   The 1px border was ours; production has none. That is the only delta.
   ⚠ THIS GOVERNS ANCHORED-TO-TRIGGER POPOVERS ONLY. Do not generalise it.
   The Notifications panel measures the SAME #FDFDFD surface and is radius 0
   with NO shadow — two components, same theme, opposite treatments. So the
   variable is the COMPONENT CLASS, not the theme: edge-anchored full-height
   panels are flush and unshadowed, and CENTRED MODALS are still unmeasured
   (the only one captured sits on off-Light #FCFCFB). See §K111/§K111a. */
.hs-popover{background:var(--hs-surface);border-radius:8px;box-shadow:var(--bento-theme-elevation-shadow-overlay-bottom);border:0;padding:16px;max-width:288px}

/* ── Dropdown menu / listbox surface ── */
.hs-menu{background:var(--hs-surface);border:1px solid var(--bento-theme-color-border-subtle);border-radius:8px;box-shadow:var(--bento-theme-elevation-shadow-overlay-bottom);padding:4px;min-width:200px;display:flex;flex-direction:column;box-sizing:border-box}
.hs-menu-item{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:8px;cursor:pointer;font:var(--hs-type-body-md);color:var(--hs-fg);border:0;background:transparent;text-align:left;width:100%}
.hs-menu-item:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-menu-item[aria-disabled="true"]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed}
.hs-menu-item .material-symbols-outlined{font-size:20px;color:var(--bento-theme-color-icon-base)}
.hs-menu-sep{height:1px;background:var(--bento-theme-color-border-subtle);margin:4px 0}
.hs-menu-label{font:var(--hs-type-meta-b);text-transform:uppercase;letter-spacing:.04em;color:var(--bento-theme-color-text-subtle);padding:8px 12px 4px}

/* ── Emoji button + reaction ── */
.hs-emoji-btn{width:40px;height:40px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:background 120ms}
.hs-emoji-btn:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-reaction{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--bento-theme-color-border-base);background:var(--hs-surface);cursor:pointer;font:var(--hs-type-body-sm-b);color:var(--hs-fg);transition:background 120ms,border-color 120ms}
.hs-reaction:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-reaction.is-selected{background:var(--bento-theme-color-bg-info);border-color:var(--bento-theme-color-bg-primary);color:var(--bento-theme-color-bg-primary)}

/* ── Carousel ── */
.hs-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.hs-carousel>*{scroll-snap-align:start;flex:0 0 auto}

/* ── Action bar ── */
.hs-action-bar{display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:8px;background:var(--hs-surface)}
.hs-action-bar--floating{box-shadow:var(--bento-theme-elevation-shadow-overlay-bottom)}
.hs-action-bar--outlined{border:1px solid var(--bento-theme-color-border-base)}
.hs-action-bar .sep{width:1px;align-self:stretch;background:var(--bento-theme-color-border-subtle);margin:2px 0}

/* ── Profile picker (pill trigger) ── */
.hs-profile-picker{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 6px;border-radius:999px;border:0;background:transparent;cursor:pointer;font:var(--hs-type-body-md-b);color:var(--hs-fg);transition:background 120ms}
.hs-profile-picker:hover{background:var(--bento-palette-ref-palette-grey-100)}

/* ── Tree ── */
.hs-tree-row{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;font:var(--hs-type-body-md)}
.hs-tree-row:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-tree-row .twist{font-size:20px;color:var(--bento-theme-color-icon-base);transition:transform 120ms}

/* ── Chip assist ── */
.hs-chip-assist{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;background:var(--bento-component-chip-fill);color:var(--bento-component-chip-text);font:var(--hs-type-body-sm-b);max-width:200px;transition:background 120ms}
.hs-chip-assist:hover{background:var(--bento-component-chip-fill-hovered)}
.hs-chip-assist .material-symbols-outlined{font-size:16px}

/* ── Stepped progress ── */
.hs-steps{display:flex;gap:8px;width:100%}
.hs-steps>i{flex:1;height:4px;border-radius:999px;background:var(--bento-component-progress-step-fill-todo)}
.hs-steps>i.done{background:var(--bento-component-progress-step-fill-done)}

/* ── Message bubbles ── */
.hs-msg{max-width:320px;padding:10px 14px;border-radius:16px;font:var(--hs-type-body-md);line-height:1.35}
.hs-msg--in{background:var(--bento-theme-color-bg-surface-recessed);color:var(--hs-fg);border-bottom-left-radius:4px}
.hs-msg--out{background:var(--bento-theme-color-bg-primary);color:var(--bento-theme-color-text-on-primary);border-bottom-right-radius:4px}

/* ── Link preview ── */
.hs-link-preview{display:flex;gap:0;max-width:576px;border:1px solid var(--bento-theme-color-border-subtle);border-radius:8px;overflow:hidden;background:var(--hs-surface)}
.hs-link-preview .lp-media{width:104px;flex-shrink:0;background:var(--bento-theme-color-bg-surface-recessed);display:flex;align-items:center;justify-content:center;color:var(--bento-theme-color-icon-subtle)}
.hs-link-preview .lp-body{padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}


/* ── Overlay button (over media) ── */
.hs-ovly{height:40px;border:0;padding:0 16px;border-radius:8px;font:var(--hs-type-button);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background 120ms}
.hs-ovly .material-symbols-outlined{font-size:18px}
.hs-ovly--filled{background:var(--bento-component-overlay-button-filled-fill);color:var(--bento-component-overlay-button-filled-text-noninverse)}
.hs-ovly--filled:hover{background:var(--bento-component-overlay-button-filled-fill-hovered)}
.hs-ovly--filled:active{background:var(--bento-component-overlay-button-filled-fill-pressed)}
.hs-ovly--filled.hs-ovly--inverse{background:var(--bento-component-overlay-button-filled-inverse-fill);color:var(--bento-component-overlay-button-filled-text-inverse)}
.hs-ovly--filled.hs-ovly--inverse:hover{background:var(--bento-component-overlay-button-filled-inverse-fill-hovered)}
.hs-ovly--filled.hs-ovly--inverse:active{background:var(--bento-component-overlay-button-filled-inverse-fill-pressed)}
.hs-ovly--ghost{background:transparent;color:var(--bento-component-overlay-button-ghost-text-noninverse)}
.hs-ovly--ghost:hover{background:var(--bento-component-overlay-button-ghost-fill-hovered-noninverse)}
.hs-ovly--ghost:active{background:var(--bento-component-overlay-button-ghost-fill-pressed-noninverse)}
.hs-ovly--ghost.hs-ovly--inverse{color:var(--bento-component-overlay-button-ghost-text-inverse)}
.hs-ovly--ghost.hs-ovly--inverse:hover{background:var(--bento-component-overlay-button-ghost-fill-hovered-inverse)}
.hs-ovly--ghost.hs-ovly--inverse:active{background:var(--bento-component-overlay-button-ghost-fill-pressed-inverse)}
.hs-ovly--icon{width:40px;padding:0;border-radius:50%;justify-content:center}

/* ── Option trigger ── */
.hs-option-trigger{border:0;background:var(--bento-component-option-trigger-fill);color:var(--bento-component-option-trigger-text);border-radius:var(--bento-component-option-trigger-radius,8px);padding:var(--bento-component-option-trigger-padding-y-inner,8px) var(--bento-component-option-trigger-padding-x,12px);min-width:var(--bento-component-option-trigger-min-width,auto);display:inline-flex;align-items:center;gap:var(--bento-component-option-trigger-gap-inline,8px);font:var(--hs-type-body-md-b);cursor:pointer;transition:background 120ms}
.hs-option-trigger:hover,.hs-option-trigger.is-hovered{background:var(--bento-component-option-trigger-fill-hovered)}
.hs-option-trigger:active,.hs-option-trigger.is-pressed,.hs-option-trigger.is-open{background:var(--bento-component-option-trigger-fill-pressed)}
.hs-option-trigger.is-focused{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:0}
.hs-option-trigger:disabled{background:var(--bento-component-option-trigger-fill-disabled);color:var(--bento-component-option-trigger-text-disabled);cursor:not-allowed}
.hs-option-trigger .material-symbols-outlined{font-size:20px}

/* ── Org trigger (transparent, in headers/drawers) ── */
.hs-org-trigger{border:0;background:transparent;display:inline-flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;text-align:left;transition:background 120ms}
.hs-org-trigger:hover,.hs-org-trigger.is-hovered{background:var(--bento-component-option-trigger-fill-hovered)}
.hs-org-trigger.is-open{background:var(--bento-component-option-trigger-fill-pressed)}
.hs-org-trigger .logo{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font:var(--hs-type-body-sm-b);flex-shrink:0}
.hs-org-trigger .org{font:var(--hs-type-body-md-b);color:var(--bento-theme-color-text-base)}
.hs-org-trigger .seat{font:var(--hs-type-body-sm);color:var(--bento-theme-color-text-subtle)}
.hs-org-trigger .chev{font-size:20px;color:var(--bento-theme-color-icon-base)}

/* ── Time picker ── */
.hs-tp-input{box-sizing:border-box;/* I6 */width:100%;height:var(--bento-component-input-min-height,40px);padding:0 var(--bento-component-input-padding-x,16px);background:var(--bento-component-input-fill,var(--hs-surface));border:1px solid var(--hs-border-input);border-radius:var(--bento-component-input-border-radius,8px);display:inline-flex;align-items:center;gap:8px;font:var(--hs-type-body-md);color:var(--bento-theme-color-text-base);cursor:pointer}
.hs-tp-input.is-focused{border-color:var(--hs-border-focus);box-shadow:0 0 0 2px var(--hs-focus-halo)}
.hs-tp-opt{display:flex;align-items:center;padding:6px 10px;border-radius:8px;font:var(--hs-type-body-md);cursor:pointer}
.hs-tp-opt:hover{background:var(--bento-component-list-item-fill-hovered)}
.hs-tp-opt.is-selected{background:var(--bento-component-list-item-fill-selected);font-weight:600}

/* ── List item (inline dropdown / org menu) ── */
.hs-list-item{display:flex;align-items:center;gap:16px;padding:0 var(--bento-component-list-item-padding-x);min-height:var(--bento-component-list-item-min-height);cursor:pointer;font:var(--hs-type-body-md-b);color:var(--hs-fg);transition:background 120ms}
.hs-list-item--compact{min-height:var(--bento-component-list-item-min-height-compact)}
.hs-list-item:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-list-item-body{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;padding:8px 0}
.hs-list-item-title{font:var(--hs-type-body-md-b);color:var(--hs-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-list-item-desc{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}
.hs-list-item-trail{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);flex-shrink:0}
.hs-list-item[aria-disabled="true"]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed;pointer-events:none}
.hs-list-item:hover{background:var(--bento-component-list-item-fill-hovered)}
.hs-list-item.is-selected{background:var(--bento-component-list-item-fill-selected)}

/* ── Footer region ── */
.hs-footer{height:var(--bento-component-footer-region-height,64px);padding:0 var(--bento-component-footer-padding-x,24px);display:flex;align-items:center;justify-content:flex-end;gap:var(--bento-component-footer-inner-gap,8px);box-shadow:inset 0 1px 0 0 var(--bento-theme-color-border-subtle)}

/* ── Side nav rail ── */
.hs-sb{width:84px;background:var(--hs-surface);border-right:1px solid var(--hs-border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px}
.hs-sb-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:6px 0;text-decoration:none;cursor:pointer;color:var(--hs-fg);font:600 11px/14px var(--hs-font-body);border-radius:8px;transition:background 150ms}
.hs-sb-item:hover{background:rgba(28,28,28,0.04)}
.hs-sb-item--quiet{padding:4px 0}
.hs-sb-glyph{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--hs-fg)}
.hs-sb-glyph .material-symbols-outlined{font-size:22px}
.hs-sb-circle{width:40px;height:40px;border-radius:999px;background:var(--hs-action-primary);color:var(--hs-fg-inverse);display:flex;align-items:center;justify-content:center}
.hs-sb-circle .material-symbols-outlined{font-size:20px}
.hs-sb-circle--outline{background:transparent;color:var(--hs-fg);box-shadow:inset 0 0 0 1.5px var(--hs-fg)}

/* ── Calendar event chip ── */
.hs-cal-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:2px;font:700 12px/16px var(--hs-font-body)}
.hs-cal-chip .material-symbols-outlined{font-size:13px}

/* ── Emoji picker ── */
.hs-emoji-cat{appearance:none;border:0;flex:1;height:32px;background:transparent;border-radius:8px;cursor:pointer;font:18px/24px sans-serif}
.hs-emoji-cat:hover{background:var(--bento-component-list-item-fill-hovered)}
.hs-emoji-cat.is-active{background:var(--bento-component-list-item-fill-selected);box-shadow:inset 0 -2px 0 0 var(--bento-theme-color-bg-primary)}
.hs-emoji-cell{appearance:none;border:0;height:36px;width:36px;background:transparent;border-radius:8px;font:22px/24px sans-serif;cursor:pointer}
.hs-emoji-cell:hover{background:var(--bento-component-list-item-fill-hovered)}

/* ── Uploading state ── */
.hs-uploading-scrim{position:absolute;inset:0;background:var(--bento-component-feedback-uploading-fill)}
.hs-uploading-prog{position:absolute;left:6px;right:6px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,0.4);overflow:hidden}
.hs-uploading-prog>i{display:block;height:100%;background:#fff}

/* ── Hyperlink (comp-hyperlink) ── */
.hs-link{display:inline-flex;align-items:center;gap:4px;font:var(--hs-type-body-md-b);color:var(--bento-component-hyperlink-text-rest);text-decoration:underline;cursor:pointer;border-radius:2px}
.hs-link:hover,.hs-link:active{color:var(--bento-component-hyperlink-text-hovered)}
.hs-link:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-link .material-symbols-outlined{font-size:var(--bento-component-hyperlink-icon-size)}
.hs-link[aria-disabled="true"]{color:var(--bento-component-hyperlink-text-disabled);cursor:not-allowed;pointer-events:none}

/* ── Info button (comp-button-info) ── */
.hs-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;background:none;color:var(--bento-theme-color-icon-base);cursor:pointer;border-radius:50%}
.hs-info .material-symbols-outlined{font-size:16px}
.hs-info:hover{color:var(--hs-fg)}
.hs-info:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}

/* ── Header / sub-header (comp-header, comp-sub-header) ── */
.hs-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;height:var(--bento-component-header-height);padding:0 var(--bento-component-header-padding-x);background:var(--hs-surface);box-shadow:inset 0 -1px 0 0 var(--bento-theme-color-border-subtle);box-sizing:border-box}
.hs-header--flush{box-shadow:none}
.hs-header-slot{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:var(--bento-component-header-slot-height)}
.hs-header-title{font:var(--hs-type-title-section);color:var(--hs-fg);margin:0}
.hs-subheader{background:var(--bento-theme-color-bg-app)}

/* ── Snackbar (comp-snackbar) ── */
.hs-snackbar{display:flex;flex-direction:row;align-items:center;min-height:var(--bento-component-snackbar-min-height);border-radius:var(--bento-component-snackbar-radius);background:var(--bento-component-snackbar-fill);box-shadow:var(--bento-component-snackbar-shadow);overflow:hidden;max-width:560px}
.hs-snackbar-body{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px;flex:1;font:var(--hs-type-body-md);color:var(--bento-component-snackbar-text)}
.hs-snackbar-body .material-symbols-outlined{font-size:20px;flex-shrink:0}
.hs-snackbar-action{display:flex;padding:8px 8px 8px 0;flex-shrink:0}

/* ── Bulk action bar (comp-bulk-action-bar) ── */
.hs-bulk-bar{display:flex;flex-direction:row;align-items:center;gap:24px;height:var(--bento-component-bulk-action-bar-height);padding:0 8px 0 16px;border-radius:8px;background:var(--bento-component-snackbar-fill);box-shadow:var(--bento-component-snackbar-shadow);box-sizing:border-box}
.hs-bulk-bar-count{font:var(--hs-type-body-sm);line-height:24px;color:var(--bento-component-snackbar-text);white-space:nowrap}
.hs-bulk-bar-actions{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}
.hs-bulk-bar .hs-btn--icon{color:var(--bento-component-snackbar-text);background:transparent}
.hs-bulk-bar .hs-btn--icon:hover{background:rgba(253,253,253,.16)}

/* ── Tag list / chip filter list (comp-tag-list, comp-chip-filter-list) ── */
.hs-tag-list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--bento-component-tag-list-gap);min-height:var(--bento-component-tag-list-row-height)}
.hs-tag-list-more{appearance:none;border:0;background:none;padding:0;font:var(--hs-type-body-sm-b);color:var(--bento-theme-color-text-link);text-decoration:underline;cursor:pointer}
.hs-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px}

/* ── Event note (✽sflakes/comp-event-note) ── */
.hs-event-note{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--bento-component-event-note-gap);padding:var(--bento-component-event-note-padding-y) var(--bento-component-event-note-padding-x);border-radius:var(--bento-component-event-note-radius);font:var(--hs-type-body-sm-b);line-height:24px;cursor:pointer;transition:filter 120ms;min-width:0}
.hs-event-note:hover{filter:brightness(.96)}
.hs-event-note:active{filter:brightness(.92)}
.hs-event-note:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:1px}
.hs-event-note-main{display:flex;flex-direction:row;align-items:center;gap:var(--bento-component-event-note-gap);flex:1;min-width:0}
.hs-event-note-main .material-symbols-outlined{font-size:var(--bento-component-event-note-icon-size);flex-shrink:0}
.hs-event-note-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-event-note-time{flex-shrink:0;white-space:nowrap}

/* ── Calendar card (✽sflakes/comp-card-calendar) ── */
.hs-cal-card{display:flex;flex-direction:column;width:var(--bento-component-card-calendar-width);height:var(--bento-component-card-calendar-height);max-height:var(--bento-component-card-calendar-max-height);border-radius:8px;overflow:hidden;background:var(--hs-surface);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-subtle);cursor:pointer;transition:background 120ms}
.hs-cal-card--landscape{width:auto;height:auto;flex-direction:row}
.hs-cal-card:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-cal-card:active{background:var(--bento-theme-color-bg-surface-pressed)}
.hs-cal-card:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-cal-card-media{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:var(--bento-theme-color-bg-surface-recessed);overflow:hidden;min-height:0}
.hs-cal-card--landscape .hs-cal-card-media{flex:0 0 64px;width:64px;align-self:stretch}
.hs-cal-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-cal-card-body{display:flex;flex-direction:column;padding:var(--bento-component-card-calendar-padding);flex:1;min-height:0;gap:0}
.hs-cal-card-title{display:flex;flex-direction:row;align-items:center;gap:8px;font:var(--hs-type-body-md-b);color:var(--hs-fg);min-width:0}
.hs-cal-card-title>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-cal-card-meta{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);flex-shrink:0;white-space:nowrap}
.hs-cal-card-excerpt{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* ── Uploaded file row (comp-file-uploaded) ── */
.hs-file-row{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:var(--bento-component-file-uploaded-height);padding:0 16px;border-radius:var(--bento-component-file-uploaded-radius);background:var(--bento-component-file-uploaded-fill);font:var(--hs-type-body-md);color:var(--hs-fg);box-sizing:border-box}
.hs-file-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 0}
.hs-file-row-trail{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}
.hs-file-row-thumb{width:32px;height:32px;border-radius:4px;object-fit:cover;flex-shrink:0}
.hs-file-row .material-symbols-outlined{font-size:20px;flex-shrink:0}
.hs-file-row--negative{background:var(--bento-theme-color-bg-negative)}
.hs-file-row--negative .hs-file-row-name{color:var(--bento-theme-color-text-negative)}

/* ── Character counter (.nested-character-counter) ── */
.hs-char-count{display:block;text-align:right;font:var(--hs-type-body-md);color:var(--bento-component-character-counter-text);font-variant-numeric:tabular-nums}
.hs-char-count.is-error{color:var(--bento-component-character-counter-text-error)}

/* ── Field label (comp-label) ── */
.hs-label-row{display:flex;flex-direction:row;align-items:center;gap:4px;font:var(--hs-type-body-md-b);color:var(--hs-fg)}
.hs-label-req{color:var(--bento-theme-color-text-negative)}
.hs-label-opt{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}

/* ── Sub-menu (comp-dropdown-sub-menu) ── */
.hs-submenu-wrap{position:relative}
.hs-submenu{position:absolute;left:100%;top:-8px;z-index:1130}
.hs-menu-item--parent{justify-content:space-between}

/* ── Listed progress (.nested-progress/listed-steps) ── */
.hs-listed-progress{display:flex;flex-direction:column;gap:0}
.hs-listed-step{display:flex;flex-direction:row;align-items:flex-start;gap:16px;position:relative}
.hs-listed-step-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;align-self:stretch}
.hs-listed-step-marker{display:flex;align-items:center;justify-content:center;width:var(--bento-component-progress-indicator-size);height:var(--bento-component-progress-indicator-size);border-radius:50%;flex-shrink:0;font:var(--hs-type-body-md-b);background:var(--bento-component-progress-indicator-fill-todo);color:var(--hs-fg-secondary);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-base)}
.hs-listed-step-marker .material-symbols-outlined{font-size:var(--bento-component-progress-indicator-icon-size)}
.hs-listed-step--active .hs-listed-step-marker{background:var(--bento-component-progress-indicator-fill-active);color:var(--bento-theme-color-text-inverse);box-shadow:none}
.hs-listed-step--done .hs-listed-step-marker{background:var(--bento-component-progress-indicator-fill-done);color:var(--bento-theme-color-text-inverse);box-shadow:none}
.hs-listed-step-track{flex:1;width:2px;min-height:16px;background:var(--bento-theme-color-border-base);margin:4px 0}
.hs-listed-step--done .hs-listed-step-track{background:var(--bento-component-progress-indicator-fill-done)}
.hs-listed-step-body{display:flex;flex-direction:column;gap:2px;padding-bottom:24px;flex:1;min-width:0}
.hs-listed-step:last-child .hs-listed-step-body{padding-bottom:0}
.hs-listed-step-title{font:var(--hs-type-body-md-b);color:var(--hs-fg)}
.hs-listed-step-desc{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}
.hs-listed-step[aria-disabled="true"] .hs-listed-step-title,.hs-listed-step[aria-disabled="true"] .hs-listed-step-desc{color:var(--bento-theme-color-text-disabled)}

/* ── Conversation thread (doc-conversation) ── */
.hs-conversation{display:flex;flex-direction:column;gap:16px;padding:16px}
.hs-conversation-day{display:flex;flex-direction:row;align-items:center;gap:16px;font:var(--hs-type-meta);color:var(--hs-fg-secondary)}
.hs-conversation-day::before,.hs-conversation-day::after{content:"";flex:1;height:1px;background:var(--bento-theme-color-border-subtle)}

/* ── Reaction group (comp-emoji-reaction-group) ── */
.hs-reaction-group{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}

/* ── Calendar day cell (.nested-calendar-day-surface / -week) ── */
.hs-cal-grid{display:grid;grid-template-columns:repeat(7,var(--bento-component-calendar-day-size));gap:0}
.hs-cal-dow{display:flex;align-items:center;justify-content:center;width:var(--bento-component-calendar-day-size);height:var(--bento-component-calendar-day-size);font:var(--hs-type-body-md-b);color:var(--hs-fg-secondary)}
.hs-cal-day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--bento-component-calendar-day-size);height:var(--bento-component-calendar-day-size);border:0;padding:0;background:none;border-radius:50%;font:var(--hs-type-body-md);color:var(--hs-fg);cursor:pointer;transition:background 120ms}
.hs-cal-day:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-cal-day:active{background:var(--bento-theme-color-bg-surface-pressed)}
.hs-cal-day:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:1px}
.hs-cal-day--muted{color:var(--hs-fg-secondary)}
.hs-cal-day--today{box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-base)}
.hs-cal-day--range{background:var(--bento-component-calendar-day-fill-range);border-radius:0}
.hs-cal-day--range-first{border-radius:50% 0 0 50%}
.hs-cal-day--range-last{border-radius:0 50% 50% 0}
.hs-cal-day--selected{background:var(--bento-component-calendar-day-fill-selected);box-shadow:inset 0 0 0 2px var(--bento-component-calendar-day-ring-selected);border-radius:50%}
.hs-cal-day[disabled]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed;background:none}

/* ── Form control list (comp-form-control-list) ── */
.hs-control-list{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.hs-control-list--row{flex-direction:row;flex-wrap:wrap;gap:24px}
.hs-control-list-legend{font:var(--hs-type-body-md-b);color:var(--hs-fg);padding:0;margin-bottom:4px}
.hs-control-list-desc{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);margin-bottom:4px}
.hs-control-list-error{font:var(--hs-type-body-sm);color:var(--bento-theme-color-text-negative);display:flex;align-items:center;gap:4px;margin-top:4px}
.hs-control-list-error .material-symbols-outlined{font-size:16px}
.hs-control-row{display:flex;align-items:flex-start;gap:8px;font:var(--hs-type-body-md);color:var(--hs-fg);cursor:pointer;min-height:24px}
.hs-control-row[aria-disabled="true"]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed}
.hs-control-row-body{display:flex;flex-direction:column;gap:2px}
.hs-control-row-desc{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}

/* ── Avatar stack (comp-avatar-stack) — referenced by AvatarStack ── */
.hs-avatar-stack{display:inline-flex;align-items:center}
.hs-avatar-stack>*+*{margin-left:-8px}
.hs-avatar-stack>*{box-shadow:0 0 0 2px var(--hs-surface)}

/* ── Tree root (comp-tree) — referenced by Tree ── */
.hs-tree{display:flex;flex-direction:column}

/* ── Focus rings (core rule: 2px --bento-theme-color-border-focus, never removed) ──
   Standalone controls get a 2px offset ring; full-width rows and grid cells use an
   inset ring so the outline can't be clipped by the container. */
.hs-textarea:focus-visible,
.hs-slider:focus-visible,
.hs-chip-filter:focus-visible,
.hs-chip-assist:focus-visible,
.hs-emoji-btn:focus-visible,
.hs-reaction:focus-visible,
.hs-tag-list-more:focus-visible,
.hs-toggle:focus-visible,
.hs-check:focus-visible,
.hs-radio:focus-visible,
.hs-choice:focus-within,
.hs-emoji-cat:focus-visible,
.hs-emoji-cell:focus-visible,
.hs-cal-card:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-tab:focus-visible,
.hs-menu-item:focus-visible,
.hs-tree-row:focus-visible,
.hs-sb-item:focus-visible,
.hs-tp-opt:focus-visible,
.hs-option:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-toggle-group button:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-stepper button:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}

/* ── Icon button, overlay (comp-icon-button-overlay) ── */
.hs-ovly-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--bento-component-icon-button-overlay-size);height:var(--bento-component-icon-button-overlay-size);padding:var(--bento-component-icon-button-overlay-padding);border:0;border-radius:50%;cursor:pointer;background:var(--bento-component-icon-button-overlay-fill);color:var(--hs-surface-white);box-sizing:border-box;transition:background 120ms}
.hs-ovly-icon .material-symbols-outlined{font-size:var(--bento-component-icon-button-overlay-icon-size)}
.hs-ovly-icon:hover{background:color-mix(in srgb,var(--bento-component-icon-button-overlay-fill) 100%,#000 12%)}
.hs-ovly-icon:active{background:color-mix(in srgb,var(--bento-component-icon-button-overlay-fill) 100%,#000 24%)}
.hs-ovly-icon:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-ovly-icon--ghost{background:transparent}
.hs-ovly-icon--ghost:hover{background:var(--bento-component-icon-button-overlay-fill)}
.hs-ovly-icon--inverse{background:var(--bento-component-icon-button-overlay-fill-inverse);color:var(--hs-fg)}
.hs-ovly-icon--inverse.hs-ovly-icon--ghost{background:transparent}
.hs-ovly-icon--inverse.hs-ovly-icon--ghost:hover{background:var(--bento-component-icon-button-overlay-fill-inverse)}

/* ── Active icon (comp-icon-active) ── */
.hs-icon-active{display:inline-flex;align-items:center;justify-content:center;color:var(--bento-theme-color-icon-base)}
.hs-icon-active.is-on{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}

/* ── Trailing icon (.nested-trailing-icon/*) ── */
.hs-trailing-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;color:var(--bento-theme-color-icon-base);flex-shrink:0}
.hs-trailing-icon .material-symbols-outlined{font-size:var(--bento-component-trailing-icon-size)}
.hs-trailing-icon--small .material-symbols-outlined{font-size:var(--bento-component-trailing-icon-size-small)}
.hs-trailing-icon--filled .material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.hs-trailing-icon--negative{color:var(--bento-theme-color-icon-negative)}
.hs-trailing-icon--positive{color:var(--bento-theme-color-icon-positive)}
.hs-trailing-icon:hover{color:var(--hs-fg)}
.hs-trailing-icon:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-trailing-icon[aria-disabled="true"],.hs-trailing-icon[disabled]{color:var(--bento-theme-color-icon-disabled);cursor:not-allowed}
.hs-trailing-icon[data-touch-target="true"]::after{content:"";position:absolute;width:var(--bento-component-trailing-icon-touch-target);height:var(--bento-component-trailing-icon-touch-target);left:50%;top:50%;transform:translate(-50%,-50%)}
.hs-trailing-icon--static{cursor:default}
.hs-trailing-icon--static:hover{color:inherit}

/* ── Input tag dismiss (.nested-input-tag-button) ── */
.hs-input-tag-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--bento-component-input-tag-button-padding);border:0;background:none;border-radius:50%;cursor:pointer;color:var(--hs-fg);flex-shrink:0}
.hs-input-tag-btn .material-symbols-outlined{font-size:var(--bento-component-input-tag-button-icon-size)}
.hs-input-tag-btn:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-input-tag-btn:active{background:var(--bento-theme-color-bg-surface-pressed)}
.hs-input-tag-btn:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-input-tag-btn[disabled]{color:var(--bento-theme-color-icon-disabled);cursor:not-allowed;background:none}

/* ── Chip clear (.nested-chip/clear) ── */
.hs-chip-clear{display:inline-flex;align-items:center;justify-content:center;padding:var(--bento-component-chip-clear-padding);border:0;background:none;border-radius:50%;cursor:pointer;color:var(--hs-fg);flex-shrink:0}
.hs-chip-clear .material-symbols-outlined{font-size:var(--bento-component-chip-clear-icon-size)}
.hs-chip-clear:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-chip-clear:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-chip-clear[disabled]{color:var(--bento-theme-color-icon-disabled);cursor:not-allowed;background:none}

/* ── Expander (.nested-expaned) ── */
.hs-expander{display:inline-flex;align-items:center;justify-content:center;width:var(--bento-component-expander-size);height:var(--bento-component-expander-size);flex-shrink:0}

/* ── Selectable text (.nested-selectable/text) ── */
.hs-selectable-text{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0}
.hs-selectable-text-label{font:var(--hs-type-body-md-b);color:var(--hs-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-selectable-text-sub{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-selectable-text[aria-disabled="true"] .hs-selectable-text-label,.hs-selectable-text[aria-disabled="true"] .hs-selectable-text-sub{color:var(--bento-theme-color-text-disabled)}

/* ── Card engagement row (.nested-card/engagement) ── */
.hs-engagement{display:flex;flex-direction:row;align-items:center;gap:24px;padding:8px 0}
.hs-engagement-stat{display:inline-flex;align-items:center;gap:4px;font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}
.hs-engagement-stat .material-symbols-outlined{font-size:16px}

/* ── Batch D support ── */
.hs-field-hint--error{color:var(--bento-theme-color-text-negative);display:inline-flex;align-items:center;gap:4px}
.hs-field-hint--error .material-symbols-outlined{font-size:16px}
.hs-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── List section heading (.nested-list-item/heading) ── */
.hs-list-heading{display:flex;flex-direction:row;align-items:flex-end;gap:8px;min-height:var(--bento-component-list-item-heading-height);padding:var(--bento-component-list-item-heading-padding);box-sizing:border-box}
.hs-list-heading-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;width:24px;flex-shrink:0;align-self:stretch;color:var(--hs-fg-secondary)}
.hs-list-heading-icon .material-symbols-outlined{font-size:20px}
.hs-list-heading-label{font:var(--hs-type-body-sm-b);color:var(--hs-fg-secondary);flex:1;min-width:0}

/* ── Snackbar action (.nested-snackbar-action) ── */
.hs-snackbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--bento-component-snackbar-action-padding);border:0;border-radius:8px;background:none;cursor:pointer;font:var(--hs-type-button);color:var(--bento-component-snackbar-text);white-space:nowrap}
.hs-snackbar-btn:hover{background:rgba(253,253,253,.16)}
.hs-snackbar-btn:active{background:rgba(253,253,253,.24)}
.hs-snackbar-btn:focus-visible{outline:2px solid var(--bento-theme-color-border-focus-alt);outline-offset:2px}

/* ── Nesting space (.nes-space/nesteding-space) — 32px per level ── */
.hs-nesting-space{display:flex;flex-direction:row;align-items:center;flex-shrink:0}
.hs-nesting-space>i{display:block;width:var(--bento-component-nesting-space-step);flex-shrink:0;align-self:stretch}
.hs-nesting-space--guides>i{box-shadow:inset 1px 0 0 0 var(--bento-theme-color-border-subtle)}

/* ── Touch target (.nested-touch/target) ── */
.hs-touch{position:relative}
.hs-touch::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--bento-component-touch-target-size);height:var(--bento-component-touch-target-size)}

/* ── Focus border (↪nested/focus-border) ── */
.hs-focus-border{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--bento-theme-color-border-focus)}
.hs-focus-border--inverse{box-shadow:0 0 0 2px var(--bento-theme-color-border-focus-alt)}

/* ── Table head cell (↪nested/table-cell-thead) ── */
.hs-th{display:flex;flex-direction:row;align-items:center;gap:8px;font:var(--hs-type-body-sm-b);color:var(--hs-fg-secondary)}
.hs-th--sortable{cursor:pointer;background:none;border:0;padding:0;text-align:left}
.hs-th--sortable:hover{color:var(--hs-fg)}
.hs-th--sortable:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-th .material-symbols-outlined{font-size:16px}
.hs-th--num{justify-content:flex-end}

/* ── Menu item artwork (.nes-dropdown-item/container-artwork | -avatar) ── */
.hs-menu-artwork{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;overflow:hidden;background:var(--bento-theme-color-bg-surface-recessed);color:var(--bento-theme-color-icon-base)}
.hs-menu-artwork--compact{width:24px;height:24px}
.hs-menu-artwork--avatar{border-radius:50%}
.hs-menu-artwork img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Accordion actions (.nested-accordion-actions) ── */
.hs-accordion-actions{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* ── Card slot (.nested-card-slot / .nes-crad/slot) ── */
.hs-card-slot{display:flex;flex-direction:column;gap:8px;min-width:0}
.hs-card-slot--bordered{border-top:1px solid var(--bento-theme-color-border-subtle);padding-top:16px}

/* ── Selection cleaner (.nested-cleaner/selection) ── */
.hs-selection-cleaner{display:flex;flex-direction:row;align-items:center;gap:8px;font:var(--hs-type-body-sm);color:var(--hs-fg-secondary)}

/* ── Bulk selection overlay (.nested-overlay-bulk-selection) ── */
.hs-bulk-overlay{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:1110}
.hs-bulk-overlay>*{pointer-events:auto}

/* ── Message media (.nested-message-media) ── */
.hs-msg-media{display:block;max-width:100%;border-radius:8px;overflow:hidden;background:var(--bento-theme-color-bg-surface-recessed)}
.hs-msg-media img{display:block;width:100%;height:auto}
.hs-msg-media--mine{margin-left:auto}

/* ── Progress indicator (.nested-progress/listed-indicator) ── */
.hs-progress-dot{display:inline-flex;align-items:center;justify-content:center;width:var(--bento-component-progress-indicator-size);height:var(--bento-component-progress-indicator-size);border-radius:50%;flex-shrink:0;font:var(--hs-type-body-md-b);background:var(--bento-component-progress-indicator-fill-todo);color:var(--hs-fg-secondary);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-base)}
.hs-progress-dot .material-symbols-outlined{font-size:var(--bento-component-progress-indicator-icon-size)}
.hs-progress-dot--active{background:var(--bento-component-progress-indicator-fill-active);color:var(--bento-theme-color-text-inverse);box-shadow:none}
.hs-progress-dot--done{background:var(--bento-component-progress-indicator-fill-done);color:var(--bento-theme-color-text-inverse);box-shadow:none}
.hs-progress-dot--disabled{background:var(--bento-theme-color-bg-disabled);color:var(--bento-theme-color-text-disabled);box-shadow:none}

/* ── Progress action row (.nested-progress/action) ── */
.hs-progress-actions{display:flex;flex-direction:row;align-items:center;gap:8px}

/* ── Time input (.nested-time-input) ── */
.hs-time-input{display:inline-flex;flex-direction:row;align-items:center;gap:var(--bento-component-time-input-gap);font:var(--hs-type-body-md)}
.hs-time-seg{appearance:none;border:0;background:none;padding:0 2px;border-radius:2px;font:inherit;color:var(--hs-fg);cursor:pointer;font-variant-numeric:tabular-nums;min-width:16px;text-align:center}
.hs-time-seg[aria-selected="true"]{background:var(--bento-component-time-input-segment-fill-selected)}
.hs-time-seg:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:1px}
.hs-time-seg[disabled]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed;background:none}
.hs-time-sep{color:var(--hs-fg-secondary)}
.hs-time-input--empty .hs-time-seg{color:var(--hs-fg-secondary)}

/* ── Nav drawer heading (.nested-nav-drawer-item-heading) ── */
.hs-nav-heading{display:flex;flex-direction:row;align-items:flex-end;gap:16px;min-height:var(--bento-component-nav-heading-height);padding:0 16px;border-radius:8px;box-sizing:border-box}
.hs-nav-heading-content{display:flex;flex-direction:row;align-items:flex-end;gap:8px;padding:var(--bento-component-nav-heading-padding);flex:1;min-width:0}
.hs-nav-heading-title{font:var(--hs-type-body-sm-b);color:var(--hs-fg-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Trailing text (nested-trailing/text) ── */
.hs-trailing-text{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);flex-shrink:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-trailing-text--wrap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── Dropdown navigation item (.master-dropdown/item-navigation) ── */
.hs-dd-item{display:flex;flex-direction:row;align-items:center;min-height:var(--bento-component-dropdown-item-height);padding:0 16px;cursor:pointer;box-sizing:border-box;transition:background 120ms;font:var(--hs-type-body-md-b);color:var(--hs-fg)}
.hs-dd-item--compact{min-height:var(--bento-component-dropdown-item-height-compact)}
.hs-dd-item:hover{background:var(--bento-component-list-item-fill-hovered)}
.hs-dd-item:active{background:var(--bento-theme-color-bg-surface-pressed)}
.hs-dd-item.is-selected{background:var(--bento-component-list-item-fill-selected)}
.hs-dd-item:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-dd-item[aria-disabled="true"]{color:var(--bento-theme-color-text-disabled);cursor:not-allowed;pointer-events:none}
.hs-dd-item-control{display:flex;flex-direction:row;justify-content:center;align-items:center;width:var(--bento-component-dropdown-item-control-width);min-height:var(--bento-component-dropdown-item-control-min-height);padding-right:16px;flex-shrink:0;box-sizing:border-box}
.hs-dd-item-body{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;padding:8px 0}
.hs-dd-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-dd-item-sub{font:var(--hs-type-body-sm);color:var(--hs-fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Row media containers (nested-contanier-artwork | -avatar | -thumbnail) ── */
.hs-row-artwork{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--bento-component-row-artwork-padding);flex-shrink:0;box-sizing:border-box;color:var(--hs-fg)}
.hs-row-artwork .material-symbols-outlined{font-size:var(--bento-component-row-artwork-icon-size)}
.hs-row-media{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--bento-component-row-media-padding);flex-shrink:0;box-sizing:border-box}
.hs-row-media-inner{width:var(--bento-component-row-media-size);height:var(--bento-component-row-media-size);flex-shrink:0;overflow:hidden;background:var(--bento-theme-color-bg-surface-recessed)}
.hs-row-media--avatar .hs-row-media-inner{border-radius:50%}
.hs-row-media--thumbnail .hs-row-media-inner{border-radius:8px}
.hs-row-media-inner img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ Tree select (comp-tree-select · 67127:181635) ══════════════════════════
   Figma marks this "Component not yet available": trigger geometry is exact,
   the menu follows comp-dropdown-menu (400px) and comp-tree rows (56px). */
.hs-tree-select{position:relative;display:flex;flex-direction:column;gap:8px}
.hs-tree-select-trigger{display:flex;flex-direction:row;gap:8px;align-items:flex-start;min-height:40px;padding:0 16px;border-radius:8px;background:var(--hs-surface);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-input);box-sizing:border-box;cursor:text;overflow:hidden}
.hs-tree-select-trigger.is-open,.hs-tree-select-trigger:focus-within{box-shadow:inset 0 0 0 2px var(--bento-theme-color-border-focus)}
.hs-tree-select-trigger[aria-disabled="true"]{background:var(--bento-theme-color-bg-disabled);cursor:not-allowed}
.hs-tree-select-slot{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px 8px;padding:4px 0;align-items:center;flex:1;min-width:0}
.hs-tree-select-search{flex:1;min-width:80px;border:0;outline:0;background:none;font:var(--hs-type-body-md);color:var(--hs-fg);height:32px}
.hs-tree-select-search::placeholder{color:var(--bento-theme-color-text-placeholder)}
.hs-tree-select-menu{max-height:400px;overflow-y:auto;border-radius:8px;background:var(--hs-surface);box-shadow:var(--bento-component-snackbar-shadow);padding:8px 0;box-sizing:border-box}
.hs-tree-select-row{display:flex;flex-direction:row;align-items:center;min-height:56px;padding:0 16px;gap:0;box-sizing:border-box}
.hs-tree-select-row:hover{background:var(--bento-theme-color-bg-surface-hovered)}
.hs-tree-select-row.is-child{padding-left:48px}
.hs-tree-select-expand{display:flex;align-items:center;justify-content:center;width:24px;min-width:24px;height:24px;flex-shrink:0;padding:0;border:0;background:none;color:var(--hs-fg);cursor:pointer}
.hs-tree-select-expand .material-symbols-outlined{font-size:24px;transition:transform 120ms}
.hs-tree-select-control{display:flex;justify-content:center;width:40px;padding:0 8px;flex-shrink:0;box-sizing:border-box}
.hs-tree-select-label{font:var(--hs-type-body-md);color:var(--hs-fg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dismissible value tag inside the trigger (nested-input-tag) */
.hs-input-tag{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 8px;border-radius:4px;background:var(--bento-theme-color-bg-surface-intense);font:var(--hs-type-body-sm);color:var(--hs-fg);max-width:200px}
.hs-input-tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-input-tag-dismiss{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;background:none;color:var(--bento-theme-color-icon-base);cursor:pointer;flex-shrink:0}
.hs-input-tag-dismiss .material-symbols-outlined{font-size:16px}

/* ══ Input payment (comp-input-payment · 64459:183944) ══ */
.hs-input-payment{display:flex;flex-direction:row;gap:8px;align-items:center;height:40px;padding:8px 16px;border-radius:8px;background:var(--hs-surface);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-input);box-sizing:border-box;overflow:hidden}
.hs-input-payment:focus-within{box-shadow:inset 0 0 0 2px var(--bento-theme-color-border-focus)}
.hs-input-payment.is-invalid{box-shadow:inset 0 0 0 2px var(--bento-theme-color-border-negative)}
.hs-input-payment.is-disabled{background:var(--bento-theme-color-bg-disabled)}
.hs-input-payment-brand{width:29.167px;height:20px;flex-shrink:0;object-fit:contain}
.hs-input-payment-field{flex:1;min-width:0;border:0;outline:0;background:none;font:var(--hs-type-body-md);color:var(--hs-fg);text-overflow:ellipsis}
.hs-input-payment-field::placeholder{color:var(--bento-theme-color-text-placeholder)}

/* ══ Panel (comp-panel · 59111:85317) — layout region, not an overlay ══ */
.hs-panel{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px;background:var(--hs-surface);border-radius:var(--bento-theme-radius-lg,8px);box-shadow:inset 0 0 0 1px var(--bento-theme-color-border-subtle);box-sizing:border-box}
.hs-panel--bare{background:none;box-shadow:none;border-radius:0}

/* ══ Mobile bottom nav (comp-mobile-nav-bar-bottom · 61829:324428) ══ */
.hs-mobile-navbar{position:relative;display:flex;flex-direction:row;align-items:center;height:64px;background:var(--hs-surface);box-shadow:inset 0 1px 0 0 var(--bento-theme-color-border-subtle);box-sizing:border-box}
.hs-mobile-navbar-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;align-self:stretch;padding:0;border:0;background:none;cursor:pointer;color:var(--hs-fg);box-sizing:border-box}
/* Active indicator sits ON the bar hairline, not below it — one 2px line, never two. */
.hs-mobile-navbar-item.is-active::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--bento-theme-color-bg-surface-inverse)}
.hs-mobile-navbar-item:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-mobile-navbar-inner{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:34px;height:38px}
.hs-mobile-navbar-inner .material-symbols-outlined{font-size:16px}
.hs-mobile-navbar-label{font:600 14px/24px var(--hs-font-body);text-align:center;white-space:nowrap;color:var(--hs-fg)}
.hs-mobile-navbar-hint{position:absolute;left:30px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--bento-theme-color-bg-negative)}
.hs-mobile-navbar-counter{position:absolute;left:21.5px;top:-8px;min-width:22px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;border-radius:8px;background:var(--bento-theme-color-bg-negative);color:var(--bento-theme-color-text-inverse);font:600 11px/16px var(--hs-font-body);box-sizing:border-box}

/* ══ Mobile docked action sheet (comp-mobile-sheet-action · 59111:256271) ══ */
.hs-mobile-sheet-action{display:flex;flex-direction:column;align-items:stretch;background:var(--hs-surface);box-shadow:0 -1px 0 0 var(--bento-theme-color-border-subtle)}
.hs-mobile-sheet-action.is-docked{position:absolute;left:0;right:0;bottom:0}
.hs-mobile-sheet-action-body{display:flex;flex-direction:column;gap:8px;padding:16px;align-items:stretch}
.hs-mobile-home-indicator{display:flex;align-items:center;justify-content:center;height:34px}
/* ══ Mobile bottom sheet (comp-mobile-sheet-bottom · 65374:113078) ══
   Informational sheet — titled header + optional media + description body.
   Geometry transcribed from the .fig, not rounded. ══ */
.hs-mobile-sheet-bottom{width:375px;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-radius:16px 16px 0 0;background:var(--hs-surface)}
.hs-mobile-sheet-bottom-header{height:64px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:8px;align-items:center;justify-content:center;box-sizing:border-box}
.hs-mobile-sheet-handle{width:48px;height:4px;border-radius:100px;background:var(--bento-theme-color-icon-subtle,#767676);flex-shrink:0}
.hs-mobile-sheet-bottom-bar{height:48px;align-self:stretch;display:flex;flex-direction:row;gap:8px;align-items:center;flex-shrink:0}
.hs-mobile-sheet-slot{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hs-mobile-sheet-title{flex:1;min-width:0;font:600 18px/24px var(--bento-theme-font-families-primary);color:var(--hs-fg);text-align:center}
.hs-mobile-sheet-media{height:200px;flex-shrink:0;align-self:stretch;overflow:hidden}
.hs-mobile-sheet-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-mobile-sheet-bottom-body{flex-shrink:0;align-self:stretch;padding:24px 16px;font:400 16px/24px var(--bento-theme-font-families-primary);color:var(--hs-fg);box-sizing:border-box}
.hs-mobile-home-indicator span{width:139px;height:5px;border-radius:100px;background:var(--hs-fg)}

/* ── Payment brand slot (comp-input-payment 64459:183944) ── */
.hs-input-payment-brand{width:29.167px;height:20px;object-fit:contain;flex-shrink:0}
.hs-input-payment-brand--fallback{display:flex;align-items:center;justify-content:center;color:var(--bento-theme-color-icon-subtle)}
.hs-input-payment-brand--fallback .material-symbols-outlined{font-size:20px}

/* ── Navigation drawer (comp-navigation-drawer · collapsible + sub-page)
   Typography and head/section padding ported from templates/src/suite-shell.css
   2026-09-10 (.suite-drawer): head 64px with a bottom hairline and a 22px/700
   title; group headings 12px/700 uppercase 0.06em at 14px 20px 4px; items
   16px/400 at 10px 16px. Width 288px already matched. The template is the
   measured production read and wins on every disagreement. ── */
.hs-navdrawer{display:flex;flex-direction:column;width:288px;flex-shrink:0;background:var(--hs-surface);box-shadow:inset -1px 0 0 0 var(--bento-theme-color-border-subtle);box-sizing:border-box;overflow-y:auto}
.hs-navdrawer-head{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 20px;box-sizing:border-box;border-bottom:1px solid var(--bento-theme-color-border-subtle)}
.hs-navdrawer-title{font-family:var(--bento-theme-font-families-primary);font-size:22px;font-weight:700;line-height:1.2;color:var(--suite-ink);margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hs-navdrawer-back{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;font:var(--hs-type-body-sm-b);color:var(--bento-theme-color-text-link);border-radius:2px}
.hs-navdrawer-back:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:2px}
.hs-navdrawer-back .material-symbols-outlined{font-size:16px}
.hs-navdrawer-body{display:flex;flex-direction:column;gap:2px;padding:8px}
.hs-navdrawer-section{font-family:var(--bento-theme-font-families-primary);font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bento-theme-color-text-subtle);padding:14px 20px 4px}
.hs-navdrawer-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:none;width:100%;text-align:left;cursor:pointer;text-decoration:none;font-family:var(--bento-theme-font-families-primary);font-size:16px;font-weight:400;color:var(--suite-ink);box-sizing:border-box}
.hs-navdrawer-item:hover{background:var(--bento-component-list-item-fill-hovered)}
.hs-navdrawer-item.is-active{background:var(--bento-component-list-item-fill-selected);font-weight:600}
.hs-navdrawer-item.is-active .material-symbols-outlined{font-variation-settings:"FILL" 1}
.hs-navdrawer-item:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-navdrawer-item[aria-disabled="true"]{color:var(--bento-theme-color-text-disabled);pointer-events:none}
.hs-navdrawer-item .material-symbols-outlined{font-size:20px;color:var(--bento-theme-color-icon-base);flex-shrink:0}
.hs-navdrawer-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-navdrawer-item-chevron{font-size:20px;transition:transform 150ms}
.hs-navdrawer-item[aria-expanded="true"] .hs-navdrawer-item-chevron{transform:rotate(180deg)}
.hs-navdrawer-children{display:flex;flex-direction:column;gap:2px;padding-left:32px}

/* ── Table bulk actions (native · replaces the header row while rows are selected) ── */
.hs-table-wrap{position:relative;width:100%}
.hs-table-bulkrow > th{padding:0;border-bottom:1px solid var(--bento-component-table-border)}
.hs-table-bulkrow .hs-bulk-bar{width:100%;max-width:none;border-radius:0;box-shadow:none}
.hs-table-scroll{width:100%;overflow-x:auto}

/* ── Focus on inverse chrome (#0065FF measures 2.59:1 there — see colors.css) ── */
.hs-bulk-bar *:focus-visible,.hs-snackbar *:focus-visible,.hs-tooltip *:focus-visible{outline-color:var(--bento-theme-color-border-focus-inverse)}

/* ── Suite rail (comp-main-nav) · 80px global product rail ──
   Width reconciled to 80px 2026-09-10. Was 84px here while
   templates/src/suite-shell.css used --suite-rail-w: 80px and SKILL.md Rule 1
   documented 80 — three sources, two answers. 80 is the measured production
   read (2026-09-06), so 84 was the outlier. Surface is var(--hs-surface),
   NOT navy. ── */
/* PORTED FROM templates/src/suite-shell.css 2026-09-10. The canvas rail had
   DIVERGED from the template rail on six values; the template is the measured
   production read and won on every one:
     glyph puck          40px      -> 48px
     item box            76px wide -> width auto / min-width 48 / height 72
     glyph-to-label gap  4px       -> 0 (the circle's own padding is the gap)
     label line-height   14px      -> 24px, 14px/400 explicit
     group gap           space-02  -> 16px products / 2px utilities (TWO densities)
     active fill         bg-nav (dark teal rgb(0,73,99)) -> per-product pastel
                                      puck via [data-product], e.g. Perch
                                      --suite-perch-fill = #FFE2CB
   The dark-teal active fill was the canvas-only defect that produced navy
   chrome in .dc.html builds. --bento-theme-color-bg-nav must never fill a rail
   item. Utilities carry NO label and use the neutral-alt-300 active fill —
   a single item height for both groups is a defect (suite-shell.css L71-73).
   Border: kept as an inset box-shadow rather than the template's border-right
   so the rail measures exactly 80px rather than 81px; same 1px #EBEBEB edge. */
/* FULL HEIGHT IS PART OF THE COMPONENT (fixed 2026-09-23). The rail used to have
   no height, so it only reached the bottom when its parent happened to be a
   stretching full-height flex row; in a .dc.html mount, a canvas artboard or any
   content-height parent it collapsed to content height and the bottom tray
   stacked directly under the last product. Height comes from the rail itself now
   (100% of the parent, min 100dvh when the parent is unsized), the tray is pinned
   with margin-top:auto (not by a growing spacer), and the product group is the
   part that gives way when the viewport is too short — it scrolls, so the two
   groups can never collide. The viewport floor is scoped to a rail mounted
   straight into an unsized page (body/#root); inside any sized parent the rail
   takes the PARENT's height so it can never overflow a short container. Opt in
   elsewhere with data-fit="viewport". */
.hs-rail{display:flex;flex-direction:column;align-items:center;width:80px;flex-shrink:0;align-self:stretch;height:100%;padding:var(--bento-space-03) 0;background:var(--hs-surface);box-shadow:inset -1px 0 0 0 var(--bento-theme-color-border-subtle);box-sizing:border-box;overflow:hidden}
body>.hs-rail,#root>.hs-rail,.hs-rail[data-fit="viewport"]{min-height:100dvh}
.hs-rail-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:72px;flex-shrink:0;text-decoration:none}
.hs-rail-brand img{width:48px;height:48px;display:block}
.hs-rail-group{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.hs-rail-group::-webkit-scrollbar{width:0;height:0}
.hs-rail-group.is-utility{gap:2px;padding-bottom:8px;margin-top:auto;flex:none;overflow:visible}
.hs-rail-spacer{flex:0 1 auto;min-height:var(--bento-space-04)}
.hs-rail-item{display:flex;flex-direction:column;align-items:center;gap:0;width:auto;min-width:48px;height:72px;box-sizing:border-box;padding:0;border-radius:8px;text-decoration:none;cursor:pointer;color:var(--hs-fg)}
.hs-rail-item.is-util{width:48px;height:48px;justify-content:center}
.hs-rail-item.is-util .hs-rail-label{display:none}
.hs-rail-item:hover .hs-rail-glyph{background:var(--suite-nav-hover-wash);color:var(--bento-suite-nav-glyph-hover)}
.hs-rail-item:active .hs-rail-glyph{color:var(--bento-suite-nav-glyph-pressed)}
.hs-rail-item:focus-visible{outline:2px solid var(--bento-theme-color-border-focus);outline-offset:-2px}
.hs-rail-glyph{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;flex-shrink:0;color:var(--bento-theme-color-icon-base);transition:background-color 120ms,color 120ms}
.hs-rail-glyph .material-symbols-outlined{font-size:24px;font-variation-settings:"FILL" 0,"GRAD" 0,"opsz" 24,"wght" 400}
.hs-rail-label{font-family:var(--bento-theme-font-families-primary);font-size:14px;font-weight:400;line-height:24px;color:var(--suite-ink);text-align:center}
.hs-rail-item:not(.is-util).is-active .hs-rail-glyph .material-symbols-outlined{font-variation-settings:"FILL" 1,"GRAD" 0,"opsz" 24,"wght" 400}
.hs-rail-item.is-active[data-product="perch"] .hs-rail-glyph{background:var(--suite-perch-fill);color:var(--suite-perch-icon)}
.hs-rail-item.is-active[data-product="nest"] .hs-rail-glyph{background:var(--suite-nest-fill);color:var(--suite-nest-icon)}
.hs-rail-item.is-active[data-product="lumen"] .hs-rail-glyph{background:var(--suite-lumen-fill);color:var(--suite-lumen-icon)}
.hs-rail-item.is-active[data-product="parliament"] .hs-rail-glyph{background:var(--suite-parliament-fill);color:var(--suite-parliament-icon)}
.hs-rail-item.is-active[data-product="wisdom"] .hs-rail-glyph{background:var(--suite-wisdom-fill);color:var(--suite-wisdom-icon)}
.hs-rail-item.is-active[data-product="vigil"] .hs-rail-glyph{background:var(--suite-vigil-fill);color:var(--suite-vigil-icon)}
.hs-rail-item.is-active[data-product="perch"]:hover .hs-rail-glyph{background:var(--bento-suite-perch-fill-hover)}
.hs-rail-item.is-active[data-product="nest"]:hover .hs-rail-glyph{background:var(--bento-suite-nest-fill-hover)}
.hs-rail-item.is-active[data-product="lumen"]:hover .hs-rail-glyph{background:var(--bento-suite-lumen-fill-hover)}
.hs-rail-item.is-active[data-product="parliament"]:hover .hs-rail-glyph{background:var(--bento-suite-parliament-fill-hover)}
.hs-rail-item.is-active[data-product="wisdom"]:hover .hs-rail-glyph{background:var(--bento-suite-wisdom-fill-hover)}
.hs-rail-item.is-active[data-product="vigil"]:hover .hs-rail-glyph{background:var(--bento-suite-vigil-fill-hover)}
.hs-rail-item.is-util.is-active .hs-rail-glyph{background:var(--bento-system-sys-neutral-alt-300)}
.hs-rail-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--hs-cat-3-bg);color:var(--hs-cat-3-fg);font-family:var(--bento-theme-font-families-primary);font-size:12px;font-weight:600}

/* ── Metric tile (the KPI pattern the docs referenced but never defined) ── */
.hs-metric{display:flex;flex-direction:column;gap:var(--bento-space-01);min-width:0}
.hs-metric-label{display:flex;align-items:center;gap:4px;font:var(--hs-type-body-sm);color:var(--bento-theme-color-text-subtle)}
.hs-metric-value{font:var(--hs-type-display-3);color:var(--hs-fg);font-variant-numeric:tabular-nums}
.hs-metric-delta{display:inline-flex;align-items:center;gap:2px;font:var(--hs-type-body-sm-b);font-variant-numeric:tabular-nums}
.hs-metric-delta--up{color:var(--bento-theme-color-text-positive)}
.hs-metric-delta--down{color:var(--bento-theme-color-text-negative)}
.hs-metric-delta--flat{color:var(--bento-theme-color-text-subtle)}
.hs-metric-delta .material-symbols-outlined{font-size:16px}
.hs-metric-foot{font:var(--hs-type-meta);color:var(--bento-theme-color-text-subtle)}

/* ── Brand / network marks (components/icons) ──
   Path 1 is the brand disc; the paths after it are the glyph knocked out of it.
   The materializer flattened both to currentColor, collapsing each mark into a
   solid blob — restore the two-tone split here. */
.hs-icon path{fill:currentColor}
.hs-icon path:not(:first-child){fill:var(--hs-surface)}
.hs-icon--mono path:first-child{fill:none}
.hs-icon--mono path:not(:first-child){fill:currentColor}
/* Not glyph-on-disc — the two-tone rule would knock out their own geometry. */
.hs-icon--flat path,.hs-icon--flat path:not(:first-child){fill:currentColor}

/* Nav drawer: link item + static footer (Confluence 11896979485 · 12636323850) */
.hs-navdrawer-item--link{color:var(--bento-theme-color-text-link);text-decoration:underline}
.hs-navdrawer-item--link:hover{color:var(--bento-theme-color-text-link-hovered)}
.hs-navdrawer-footer{margin-top:auto;padding:8px;border-top:1px solid var(--bento-theme-color-border-subtle);display:flex;flex-direction:column;gap:2px}
.hs-navdrawer{display:flex;flex-direction:column}
.hs-navdrawer-body{flex:1;min-height:0;overflow-y:auto}

/* ── App-core column + suite banner — implemented 2026-09-10.
   Production chain, measured: rail | section.appCore( banners, appBody ).
   appCore is a flex COLUMN; the banner is its first child at 68px with
   flex 0 1 auto (natural height only); appBody is the sibling flex ROW that
   holds the drawer and the content, so the DRAWER STARTS AT y68.
   Measured reference: banner x80 y0 h68 to the right edge; drawer x80.21 y68
   w288; rail w80.21; content x368.21.
   This geometry sat in templates/src/suite-shell.css as a COMMENT ONLY from
   2026-09-06 until now, so every shell laid rail | drawer | content out as one
   flex row and a banner was unrepresentable. Do not flatten it back.
   Banner internal padding/gap/content layout are UNMEASURED and therefore
   unset — supply spacing on children rather than inventing it here. ── */
.hs-appcore{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;height:100%}
.hs-suite-banner{display:flex;align-items:center;min-height:68px;flex:0 1 auto;box-sizing:border-box;background:var(--hs-surface);box-shadow:inset 0 -1px 0 0 var(--bento-theme-color-border-subtle)}
.hs-suite-banner--stack{flex-direction:column;align-items:stretch;background:none;box-shadow:none}
.hs-appbody{display:flex;flex-direction:row;flex:1 1 auto;min-height:0}

/* Table: select-all-beyond-page banner, bulk result, sticky columns (13330776079 · 11896979499) */
.hs-table-wrap{position:relative}
.hs-table-selectall{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;background:var(--bento-theme-color-bg-info);color:var(--bento-theme-color-text-base);font:var(--hs-type-body-sm);border-bottom:1px solid var(--bento-theme-color-border-subtle)}
.hs-table-result{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bento-theme-color-bg-warning);color:var(--hs-fg-warning);font:var(--hs-type-body-sm)}
.hs-table .is-sticky{position:sticky;left:0;z-index:1;background:var(--bento-theme-color-bg-surface)}
.hs-table-emptyrow td{padding:32px 16px;text-align:center;color:var(--bento-theme-color-text-subtle);font:var(--hs-type-body-md)}
.hs-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Accordion · outline variant — reads as a card, for data-heavy bodies (11897012225) */
.acc-list--outline{display:flex;flex-direction:column;gap:8px}
.acc-list--outline .acc-item{border:1px solid var(--bento-theme-color-border-subtle);border-radius:8px;background:var(--bento-theme-color-bg-surface)}
.acc-list--outline .acc-item+.acc-item{border-top:1px solid var(--bento-theme-color-border-subtle)}