/* Attentive Library components — built ONLY from tokens.css (Carbon).
   Layout reference: Figma "Home" frame (Attentive Library, Design Hub) node 11144:762. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--hub-font-sans); background: var(--hub-background); color: var(--hub-text-primary); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
  font-size: var(--hub-type-body-01-size); font-weight: var(--hub-type-body-01-weight); line-height: var(--hub-type-body-01-line-height); letter-spacing: var(--hub-type-body-01-letter-spacing); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.icon { display: block; flex: none; fill: currentColor; }

/* Type styles (from @carbon/type via tokens.css) */
.type-body-compact-01 { font-size: var(--hub-type-body-compact-01-size); font-weight: var(--hub-type-body-compact-01-weight); line-height: var(--hub-type-body-compact-01-line-height); letter-spacing: var(--hub-type-body-compact-01-letter-spacing); }
.type-body-01 { font-size: var(--hub-type-body-01-size); font-weight: var(--hub-type-body-01-weight); line-height: var(--hub-type-body-01-line-height); letter-spacing: var(--hub-type-body-01-letter-spacing); }
.type-heading-compact-01 { font-size: var(--hub-type-heading-compact-01-size); font-weight: var(--hub-type-heading-compact-01-weight); line-height: var(--hub-type-heading-compact-01-line-height); letter-spacing: var(--hub-type-heading-compact-01-letter-spacing); }
.type-heading-02 { font-size: var(--hub-type-heading-02-size); font-weight: var(--hub-type-heading-02-weight); line-height: var(--hub-type-heading-02-line-height); letter-spacing: var(--hub-type-heading-02-letter-spacing); }
.type-heading-03 { font-size: var(--hub-type-heading-03-size); font-weight: var(--hub-type-heading-03-weight); line-height: var(--hub-type-heading-03-line-height); letter-spacing: var(--hub-type-heading-03-letter-spacing); }
.type-heading-04 { font-size: var(--hub-type-heading-04-size); font-weight: var(--hub-type-heading-04-weight); line-height: var(--hub-type-heading-04-line-height); letter-spacing: var(--hub-type-heading-04-letter-spacing); }
.type-heading-07 { font-size: var(--hub-type-heading-07-size); font-weight: var(--hub-type-heading-07-weight); line-height: var(--hub-type-heading-07-line-height); letter-spacing: var(--hub-type-heading-07-letter-spacing); }

/* UI shell header — 48px, white, bottom hairline */
.shell { position: sticky; top: 0; z-index: 20; height: 48px; flex: none; display: flex; align-items: center; background: var(--hub-layer-01); border-bottom: 1px solid var(--hub-border-subtle-01); }
.shell-btn { width: 48px; height: 48px; display: grid; place-items: center; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.shell-btn:hover { background: var(--hub-layer-hover-01); }
.shell-name { display: flex; gap: 3px; align-items: center; padding: 0 var(--hub-spacing-07) 0 var(--hub-spacing-05); white-space: nowrap; }
.shell-name b { font-weight: var(--hub-type-heading-compact-01-weight); }
.shell-spacer { flex: 1; }

/* Page header: 3-column grid. Title spans 2, shortcut tile sits in column 3 */
.page-head { flex: none; display: flex; flex-direction: column; padding: var(--hub-spacing-07) var(--hub-spacing-07) 96px; background: var(--hub-layer-01); }
.page-side { display: flex; flex-direction: column; }
.page-side > * { flex: 1 0 auto; background: var(--hub-layer-01); padding: var(--hub-spacing-06); }
.page-side > .side-link { display: flex; flex-direction: column; justify-content: space-between; gap: var(--hub-spacing-03); border-left: 1px solid var(--hub-border-subtle-01); border-top: 1px solid var(--hub-border-subtle-01); color: var(--hub-text-primary); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.page-side > .side-link:hover { background: var(--hub-layer-hover-01); }
.side-link .icon { color: var(--hub-link-primary); }

/* Content + client tiles: 1px gaps over a subtle-border background draw the hairlines */
.content { flex: 1 0 auto; padding: var(--hub-spacing-10) var(--hub-spacing-07) var(--hub-spacing-07); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; }
/* Tile grid by Carbon breakpoint (@carbon/layout): sm 2 cols, md (42rem) 3 cols, lg (66rem) 4 cols */
@media (min-width: 42rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; min-height: 416px; background: var(--hub-layer-01); /* hairlines only where tiles meet: shadows outside the grid are clipped by .tiles */ box-shadow: -1px 0 0 0 var(--hub-border-subtle-01), 0 -1px 0 0 var(--hub-border-subtle-01); }
.tile-logo { width: 72px; height: 72px; display: grid; place-items: center; }
.tile-logo img { width: 38.875px; height: auto; display: block; }
.tile-head { display: flex; flex-direction: column; gap: var(--hub-spacing-02); padding: var(--hub-spacing-05); }
.tile-title { font-size: var(--hub-type-heading-02-size); font-weight: var(--hub-type-heading-02-weight); line-height: var(--hub-type-heading-02-line-height); letter-spacing: var(--hub-type-heading-02-letter-spacing); }
.crumbs { display: flex; gap: var(--hub-spacing-03); color: var(--hub-text-secondary); }
.crumbs .sep { color: var(--hub-text-placeholder); }
.tile-actions { display: flex; flex-direction: column; flex: 1 0 0; }
.link-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--hub-spacing-03); padding: 15px var(--hub-spacing-05); color: var(--hub-link-primary); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.link-btn:hover { background: var(--hub-layer-hover-01); }
.tile-foot { display: flex; justify-content: flex-end; }
.btn-icon, .btn-secondary { display: flex; align-items: center; justify-content: center; padding: var(--hub-spacing-05); background: var(--hub-button-secondary); color: var(--hub-text-on-color); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.btn-icon:hover, .btn-secondary:hover { background: var(--hub-button-secondary-hover); }
.btn-icon:active, .btn-secondary:active { background: var(--hub-button-secondary-active); }

@media (max-width: 640px) { .page-head { gap: var(--hub-spacing-09); } .filters { flex-wrap: wrap; } .filters .field { flex: 1 1 40%; } .filters .field-grow { flex: 1 1 100%; } .page-head h1 { font-size: var(--hub-type-heading-05-size); line-height: var(--hub-type-heading-05-line-height); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Filter bar: Default-size (48px) search input + dropdowns; sticks under the shell on scroll */
.filters { display: flex; gap: 1px; }
.field { position: relative; display: flex; align-items: center; height: 48px; padding: 0 var(--hub-spacing-05); background: var(--hub-field-01); border-bottom: 1px solid var(--hub-border-strong-01); cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.field:hover,.dropdown:has(.dropdown-trigger[aria-expanded="true"]) { background: var(--hub-field-hover-01, var(--hub-field-01)); }
.field:focus-within { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.field-grow { flex: 1 1 0; min-width: 0; }
.field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field-input { all: unset; box-sizing: border-box; width: 100%; min-width: 0; color: var(--hub-text-primary); cursor: inherit; }
.field-input::placeholder { color: var(--hub-text-placeholder); opacity: 1; }
.dropdown { z-index: 1; }
.dropdown-trigger { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--hub-spacing-03); width: 100%; color: var(--hub-text-primary); cursor: pointer; }
.dropdown-trigger:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 4px; }
.dropdown-value { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-trigger .icon { flex: none; transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
.dropdown-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dropdown-menu { max-height: 320px; overflow-y: auto; position: absolute; top: 100%; left: 0; right: 0; min-width: max-content; margin: 0; padding: 0; list-style: none; background: var(--hub-layer-01); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  transform-origin: top; transition: opacity var(--hub-motion-fast) var(--hub-motion-entrance-expressive), transform var(--hub-motion-fast) var(--hub-motion-entrance-expressive), visibility 0s; }

.dropdown-menu [role=option] { display: flex; align-items: center; height: 40px; padding: 0 var(--hub-spacing-05); color: var(--hub-text-secondary); cursor: pointer; border-top: 1px solid var(--hub-border-subtle-01); }
.dropdown-menu [role=option]:first-child { border-top: 0; }
.dropdown-menu [role=option]:hover { background: var(--hub-layer-hover-01); color: var(--hub-text-primary); }
.dropdown-menu [role=option][aria-selected="true"] { color: var(--hub-text-primary); background: var(--hub-layer-selected-01); }
.dropdown-menu [role=option]:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }

/* Theme toggle: show the icon for the theme you would switch to */
.theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-asleep { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-asleep { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: inline; } }
.dropdown:nth-last-child(-n+2) .dropdown-menu { left: auto; right: 0; }

/* Sticky filter bar: Fluid (64px, labels) at rest, Default (48px, no labels) once stuck under the shell */

/* Search field with leading icon (Carbon search icon) */
.field-search { gap: var(--hub-spacing-03); cursor: text; }
.field-search .icon { color: var(--hub-text-secondary); }

/* Read-only tag (Carbon tag, gray) */
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--hub-spacing-03); border-radius: 24px; background: var(--hub-tag-background-gray); color: var(--hub-tag-color-gray); font-size: var(--hub-type-label-01-size); line-height: var(--hub-type-label-01-line-height); letter-spacing: var(--hub-type-label-01-letter-spacing); white-space: nowrap; }

/* Client page: logo above title, project card */
.page-head-logo { display: flex; flex-direction: column; gap: var(--hub-spacing-07); }
.page-head-logo img { width: 38.875px; height: auto; display: block; }
.tile-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hub-spacing-05); padding: var(--hub-spacing-05) var(--hub-spacing-05) 0; }
.tile-desc { color: var(--hub-text-secondary); }
.tile-updated { color: var(--hub-text-placeholder); }
.row-btn { display: flex; align-items: center; gap: var(--hub-spacing-03); min-height: 48px; padding: 0 var(--hub-spacing-05); color: var(--hub-text-primary); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.row-btn:hover { background: var(--hub-layer-hover-01); }
.row-btn .row-value { flex: 1 1 0; min-width: 0; text-align: right; color: var(--hub-text-secondary); }
.row-btn .row-label { flex: 1 1 auto; }
.row-btn .row-value + .icon { color: var(--hub-link-primary); }
.row-btn > .icon:first-child { color: var(--hub-text-primary); }

/* Whole card is clickable: the Open button's link stretches over the tile; inner links stay above it */
.tile .btn-icon::after { content: ""; position: absolute; inset: 0; }
.tile .btn-icon:focus-visible { outline: none; }
.tile .btn-icon:focus-visible::after { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.tile .tile-actions { position: relative; z-index: 1; }
.tile .btn-icon { position: static; }
.tile .tile-foot { position: static; }
.tile .btn-icon .icon { position: relative; }
.tile:hover { background: var(--hub-layer-hover-01); }
.tile:has(.tile-actions:hover) { background: var(--hub-layer-01); }

/* Breadcrumb (Carbon, from Figma): links in link-primary, "/" separators and current page in text-primary.
   Medium = 14px/8px gaps (default); add .breadcrumb-sm for Small = 12px/4px gaps. */
.breadcrumb ol { display: flex; align-items: center; gap: var(--hub-spacing-03); margin: 0; padding: 0; list-style: none; white-space: nowrap; min-width: 96px; }
.breadcrumb li { display: flex; align-items: center; gap: var(--hub-spacing-03); color: var(--hub-text-primary); }
.breadcrumb li:not(:last-child)::after { content: "/"; }
.breadcrumb a { color: var(--hub-link-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sm ol, .breadcrumb-sm li { gap: var(--hub-spacing-02); font-size: var(--hub-type-label-01-size); line-height: var(--hub-type-label-01-line-height); letter-spacing: var(--hub-type-label-01-letter-spacing); }
.shell .breadcrumb { padding: 0 var(--hub-spacing-07) 0 var(--hub-spacing-03); }
.breadcrumb a:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.shell-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }

/* Filter panel (Carbon "selecting multiple categories": vertical categories on the left, multiselect checkboxes) */
.browse { flex: 1 0 auto; display: grid; grid-template-columns: 1fr; align-items: start; }
.filter-panel { background: var(--hub-layer-01); border-bottom: 1px solid var(--hub-border-subtle-01); padding: var(--hub-spacing-05) var(--hub-spacing-05) var(--hub-spacing-06); }
@media (min-width: 66rem) {
  .browse { grid-template-columns: 256px minmax(0, 1fr); }
  .filter-panel { position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--hub-border-subtle-01); }
  .filter-search { padding: var(--hub-spacing-06) var(--hub-spacing-07) 0; }
}
.link-text { all: unset; box-sizing: border-box; cursor: pointer; color: var(--hub-link-primary); }
.link-text:hover { text-decoration: underline; }
.link-text:focus-visible { outline: 2px solid var(--hub-focus); }
.filter-panel form { display: flex; flex-direction: column; gap: var(--hub-spacing-06); }
.filter-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.filter-legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin-bottom: var(--hub-spacing-03); color: var(--hub-text-secondary); }
.count-tag { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--hub-spacing-03); height: 24px; padding: 0 var(--hub-spacing-03) 0 var(--hub-spacing-04); border-radius: 24px; background: var(--hub-background-inverse); color: var(--hub-text-inverse); font-size: var(--hub-type-label-01-size); cursor: pointer; }
.count-tag[hidden] { display: none; }
.count-tag:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.count-tag .icon { width: 12px; height: 12px; }
.check { display: flex; align-items: center; gap: var(--hub-spacing-03); min-height: 32px; cursor: pointer; color: var(--hub-text-primary); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--hub-icon-primary); color: transparent; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.check input:checked + .check-box { background: var(--hub-icon-primary); color: var(--hub-icon-inverse); }
.check input:focus-visible + .check-box { outline: 2px solid var(--hub-focus); outline-offset: 1px; }
.check.is-extra { display: none; }
.filter-group.is-expanded .check.is-extra { display: flex; }
.show-more { margin-top: var(--hub-spacing-03); }
.results-count { color: var(--hub-text-secondary); margin: 0 0 var(--hub-spacing-05); }
.empty { color: var(--hub-text-secondary); padding: var(--hub-spacing-07) 0; }
.empty[hidden] { display: none; }
.tile[hidden] { display: none; }

/* Customization panel = Carbon-styled shared skin for the stamped prototype panel (templates/prototype); markup + behaviour are per-prototype stamps.
   (floating prototype controls, Carbon-styled): FAB + panel, content switchers, toggles */
.attn-fab { position: fixed; right: var(--hub-spacing-05); bottom: var(--hub-spacing-05); z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; background: var(--hub-button-primary); color: var(--hub-text-on-color); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.attn-fab:hover { background: var(--hub-button-primary-hover); }
.attn-fab:active { background: var(--hub-button-primary-active); }
.attn-fab:focus-visible, .attn-close:focus-visible, .switcher button:focus-visible, .toggle:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.attn-panel { position: fixed; right: var(--hub-spacing-05); bottom: calc(var(--hub-spacing-05) + 56px); z-index: 40; width: min(320px, calc(100vw - 2 * var(--hub-spacing-05))); max-height: calc(100vh - 140px); overflow-y: auto; background: var(--hub-layer-01); color: var(--hub-text-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  transform-origin: bottom right; transition: opacity var(--hub-motion-moderate) var(--hub-motion-expressive), transform var(--hub-motion-moderate) var(--hub-motion-expressive), visibility 0s; }

.attn-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding-left: var(--hub-spacing-05); border-bottom: 1px solid var(--hub-border-subtle-01); }
.attn-head h2 { margin: 0; font-size: var(--hub-type-heading-compact-01-size); font-weight: var(--hub-type-heading-compact-01-weight); }
.attn-close { width: 48px; height: 48px; display: grid; place-items: center; }
.attn-close:hover { background: var(--hub-layer-hover-01); }
.attn-body { display: flex; flex-direction: column; gap: var(--hub-spacing-05); padding: var(--hub-spacing-05); }
.attn-group { display: flex; flex-direction: column; gap: var(--hub-spacing-03); }
.attn-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 32px; }
.attn-label { color: var(--hub-text-secondary); font-size: var(--hub-type-label-01-size); line-height: var(--hub-type-label-01-line-height); letter-spacing: var(--hub-type-label-01-letter-spacing); }
.switcher { display: flex; background: var(--hub-layer-accent-01); }
.switcher button { flex: 1 1 0; height: 40px; padding: 0 var(--hub-spacing-03); color: var(--hub-text-secondary); border-left: 1px solid var(--hub-border-subtle-01); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.switcher button:first-child { border-left: 0; }
.switcher button:hover { background: var(--hub-layer-hover-01); color: var(--hub-text-primary); }
.switcher button[aria-checked="true"] { background: var(--hub-background-inverse); color: var(--hub-text-inverse); }
.toggle { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; }
.toggle-track { position: relative; width: 48px; height: 24px; border-radius: 12px; background: var(--hub-toggle-off); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--hub-background); transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
.toggle[aria-checked="true"] .toggle-track { background: var(--hub-button-primary); }
.toggle[aria-checked="true"] .toggle-thumb { transform: translateX(24px); }
.toggle:focus-visible .toggle-track { outline: 2px solid var(--hub-focus); outline-offset: 1px; }

/* Prototype state hooks driven by the panel */
.browse .tiles[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.browse .tiles[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.browse .tiles[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.browse .tiles[data-density="compact"] .tile { min-height: 320px; }
.browse.no-panel { grid-template-columns: 1fr; }
.browse.no-panel .filter-panel { display: none; }
.tiles[hidden] { display: none; }


/* Sticky filter bar under the shell: search + dropdowns (Default size, 48px) */
.filter-sentinel { height: 0; }
.filter-bar .field-search { cursor: text; }

/* Grouped results: category heading + tile grid; empty groups are hidden */
.tile-group + .tile-group { margin-top: var(--hub-spacing-09); }
.tile-group-title { margin: 0 0 var(--hub-spacing-06); font-weight: var(--hub-type-heading-04-weight); }
.tile-group[hidden], .tiles[hidden] { display: none; }

/* Card rows: static (Status, Version) vs copy-to-clipboard buttons (URL, Password) */
button.row-btn { width: 100%; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.row-static:hover { background: none; }
.row-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.row-btn .icon-copied { display: none; }
.row-btn.is-copied .icon-copy { display: none; }
.row-btn.is-copied .icon-copied { display: block; color: var(--hub-text-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────── Motion (IBM Carbon motion guide, values from @carbon/motion via tokens.css) ─────────
   Productive = quick, functional; expressive = significant moments. Entrances decelerate, exits accelerate.
   contextual surfaces (menus, tags): fast-02, scale 0.96 + fade.  invoke (panel from its trigger): moderate-02, standard expressive.
   reveal (disclosure): moderate-01, entrance productive.  page/list entrances: slow-01, entrance productive, short stagger. */
.dropdown-menu[hidden] { display: block; opacity: 0; transform: scale(var(--hub-motion-scale)); visibility: hidden; pointer-events: none; transition: opacity var(--hub-motion-fast) var(--hub-motion-exit-expressive), transform var(--hub-motion-fast) var(--hub-motion-exit-expressive), visibility 0s linear var(--hub-motion-fast); }
.attn-panel[hidden] { display: block; opacity: 0; transform: scale(var(--hub-motion-scale)); visibility: hidden; pointer-events: none; transition: opacity var(--hub-motion-moderate) var(--hub-motion-expressive), transform var(--hub-motion-moderate) var(--hub-motion-expressive), visibility 0s linear var(--hub-motion-moderate); }

@keyframes hub-rise { from { opacity: 0; transform: translateY(var(--hub-spacing-03)); } to { opacity: 1; transform: none; } }
@keyframes hub-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hub-pop { from { opacity: 0; transform: scale(var(--hub-motion-scale)); } to { opacity: 1; transform: none; } }
@keyframes hub-reveal { from { opacity: 0; transform: translateY(calc(-1 * var(--hub-spacing-02))); } to { opacity: 1; transform: none; } }

.page-head h1 { animation: hub-fade var(--hub-motion-slow-01) var(--hub-motion-entrance-productive) both; }
.tile { animation: hub-rise var(--hub-motion-slow-01) var(--hub-motion-entrance-productive) both; animation-delay: calc(var(--i, 0) * 40ms); }
.filter-panel { animation: hub-fade var(--hub-motion-slow-01) var(--hub-motion-entrance-productive) both; }
.count-tag:not([hidden]) { animation: hub-pop var(--hub-motion-fast) var(--hub-motion-entrance-expressive) both; }
.filter-group.is-expanded .check.is-extra { animation: hub-reveal var(--hub-motion-moderate-01) var(--hub-motion-entrance-productive) both; }
.results-count .results-n { display: inline-block; }
.attn-fab { transition: background var(--hub-motion-fast) var(--hub-motion-productive), transform var(--hub-motion-fast) var(--hub-motion-productive); }
.attn-fab:active { transform: scale(var(--hub-motion-scale)); }
.check-box .icon { transform: scale(0.6); transition: transform var(--hub-motion-fast) var(--hub-motion-entrance-productive); }
.check input:checked + .check-box .icon { transform: none; }
.tile-title, .link-btn .icon, .btn-icon .icon, .row-btn .icon { transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
.link-btn:hover .icon { transform: translateX(2px); }
/* Theme switch: cross-fade colours instead of snapping (class is added for one beat by components.js) */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color var(--hub-motion-moderate) var(--hub-motion-productive), color var(--hub-motion-moderate) var(--hub-motion-productive), border-color var(--hub-motion-moderate) var(--hub-motion-productive), fill var(--hub-motion-moderate) var(--hub-motion-productive) !important; }

/* Search + filters as a floating card on the gray page (Carbon icon-library pattern): sits below the page header,
   sticks under the shell on scroll and gains a shadow once stuck. */
.filter-bar { position: sticky; top: calc(48px + var(--hub-spacing-07)); z-index: 10; margin-bottom: var(--hub-spacing-09); background: var(--hub-border-subtle-01); box-shadow: 0 1px 0 var(--hub-border-subtle-01); transition: box-shadow var(--hub-motion-moderate) var(--hub-motion-productive); }
.filter-bar.is-stuck { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.filter-bar .field { background: var(--hub-layer-01); border-bottom: 0; }
.filter-bar .field:hover, .filter-bar .dropdown:has(.dropdown-trigger[aria-expanded="true"]) { background: var(--hub-layer-hover-01); }
.filter-bar .field-search:hover { background: var(--hub-layer-01); }

/* Filter card as a 4-column grid: search spans 2 (3 on pages with a single dropdown), dropdowns take 1 each */
.filter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.filter-bar .field-search { grid-column: span 2; }
.filter-bar-3 .field-search { grid-column: span 3; }
.filter-reset { flex: none; color: var(--hub-link-primary); cursor: pointer; white-space: nowrap; }
.filter-reset[hidden] { display: none; }
.filter-reset:hover { text-decoration: underline; }
.filter-reset:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
@media (max-width: 640px) { .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-bar .field-search, .filter-bar-3 .field-search { grid-column: 1 / -1; } }

/* Panel extras: tooltip on group labels, draggable header, pill/check config groups */
.attn-label-row { display: flex; align-items: center; gap: var(--hub-spacing-02); }
.attn-tip { all: unset; box-sizing: border-box; position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; cursor: help; color: var(--hub-icon-secondary); }
.attn-tip:focus-visible { outline: 2px solid var(--hub-focus); }
.attn-tip-pop { position: absolute; left: calc(100% + var(--hub-spacing-03)); top: 50%; width: max-content; max-width: 220px; padding: var(--hub-spacing-03) var(--hub-spacing-05); background: var(--hub-background-inverse); color: var(--hub-text-inverse); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); letter-spacing: var(--hub-type-body-compact-01-letter-spacing); opacity: 0; visibility: hidden; transform: translateY(-50%) scale(var(--hub-motion-scale)); transform-origin: left center; pointer-events: none; transition: opacity var(--hub-motion-fast) var(--hub-motion-exit-expressive), transform var(--hub-motion-fast) var(--hub-motion-exit-expressive), visibility 0s linear var(--hub-motion-fast); }
.attn-tip:hover .attn-tip-pop, .attn-tip:focus-visible .attn-tip-pop { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity var(--hub-motion-fast) var(--hub-motion-entrance-expressive), transform var(--hub-motion-fast) var(--hub-motion-entrance-expressive), visibility 0s; }
.attn-head { cursor: grab; touch-action: none; user-select: none; }
.attn-panel.is-dragging .attn-head { cursor: grabbing; }
.attn-panel.is-dragging { transition: none; }
.attn-checks { display: flex; flex-direction: column; gap: var(--hub-spacing-02); }

/* Panel header actions: home (back to the client page), comment, internal notes, divider, collapse */
.attn-head { padding-left: var(--hub-spacing-05); }
.attn-head-actions { display: flex; align-items: center; }
.attn-icon-btn { all: unset; box-sizing: border-box; width: 40px; height: 48px; display: grid; place-items: center; cursor: pointer; color: var(--hub-text-primary); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.attn-icon-btn:hover { background: var(--hub-layer-hover-01); }
.attn-icon-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
.attn-head-divider { width: 1px; height: 24px; margin: 0 var(--hub-spacing-02); background: var(--hub-border-subtle-01); }