/* Attentive shape layer — loaded AFTER components.css. Colour/type/spacing come from tokens.css; this file changes SHAPE and layout to match
   the Figma "Attentive Library" file: 64px shell, warm-wash page head with the filter card inside it, 12px cards,
   6px buttons, 1px #DCDCDC hairlines, NO box-shadows (the stuck filter card gets a 1px hairline instead). */

/* Page background: warm wash fading into the off-white page (Figma gradient on the page head) */
body { background: var(--hub-background) linear-gradient(to bottom, var(--at-color-warm-wash), var(--hub-background)) no-repeat top / 100% calc(var(--at-space-120) * 2 + var(--at-space-60)); }

/* Shell: 64px white, name left, nothing else */
.shell { height: calc(var(--at-space-60) + var(--at-space-4)); padding: 0 var(--at-space-32); border-bottom: 0; }
.shell-name { gap: var(--at-space-4); padding: 0; }
.shell .breadcrumb { padding: 0; }
.breadcrumb ol { gap: var(--at-space-8); min-width: 0; }
.breadcrumb li { gap: var(--at-space-8); }
.breadcrumb li:not(:last-child)::after { color: var(--hub-text-secondary); }
.breadcrumb a { color: var(--hub-text-secondary); }

/* Page head: transparent over the wash; 60px between blocks */
.page-head { background: none; padding: var(--at-space-32) var(--at-space-32) var(--at-space-60); gap: var(--at-space-60); border: 0; }
.page-head h1 { color: var(--at-color-ink); }
.page-head-logo { flex-direction: row; align-items: center; gap: var(--at-space-24); }
.page-head-logo img { width: var(--at-space-48); height: var(--at-space-48); }
.page-head-rule { width: 0; height: var(--at-space-32); border-right: 1px solid var(--hub-border-subtle-01); }
.detail-list { display: flex; flex-direction: column; gap: var(--at-space-8); width: 480px; max-width: 100%; }
.detail-row { display: flex; align-items: center; gap: var(--at-space-8); min-height: var(--at-space-24); }
.detail-row dt { color: var(--hub-text-primary); white-space: nowrap; }
.detail-row dd { color: var(--hub-text-secondary); }

/* Filter card: white 12px card with 6px padding; borderless search + bordered 32px dropdowns. Sticks under the shell. */
.filter-bar { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--at-space-8); position: sticky; top: calc(var(--at-space-60) + var(--at-space-4) + var(--at-space-16)); margin: 0 var(--at-space-32); padding: var(--at-space-6); background: var(--hub-layer-01); border-radius: var(--at-radius-card); box-shadow: none; }
.filter-bar { transition: box-shadow var(--at-button-transition); }
.filter-bar.is-stuck { box-shadow: 0 var(--at-space-4) var(--at-space-16) color-mix(in srgb, var(--at-color-black) 16%, transparent); }
.filter-bar .field { height: var(--at-space-32); padding: 0 var(--at-space-8); gap: var(--at-space-8); background: var(--hub-layer-01); border: 1px solid var(--hub-border-subtle-01); border-radius: var(--at-radius-button); }
.filter-bar .field-search { flex: 1 1 0; min-width: 0; border-color: transparent; }
.filter-bar .field-search:hover { background: var(--hub-layer-01); }
.filter-bar .field .icon { color: var(--hub-text-primary); }
.filter-bar .field-search .icon { color: var(--hub-text-primary); }
.filter-bar .dropdown { flex: none; }
.field:focus-within, .dropdown-trigger:focus-visible { outline-offset: 2px; }
.dropdown-menu, .attn-panel { box-shadow: 0 var(--at-space-4) var(--at-space-16) color-mix(in srgb, var(--at-color-black) 16%, transparent); border: 0; border-radius: var(--at-radius-card); overflow-y: auto; }
.dropdown-menu { margin-top: var(--at-space-4); }
@media (max-width: 960px) { .filter-bar { flex-wrap: wrap; } .filter-bar .field-search { flex: 1 1 100%; } }

/* Content + tiles: separate 12px cards, 16px gaps */
.content { padding: var(--at-space-60) var(--at-space-32); }
.filter-bar { margin-bottom: var(--at-space-32); }
.tiles { gap: var(--at-space-16); overflow: visible; }
.tile-group-title { color: var(--hub-text-primary); }
.tile { box-shadow: none; border: 1px solid var(--hub-border-subtle-01); border-radius: var(--at-radius-card); overflow: hidden; min-height: 0; transition: border-color var(--at-button-transition); }
.tile:hover, .tile:has(.tile-actions:hover) { background: var(--hub-layer-01); border-color: var(--at-color-ink); }
.tile-logo { width: auto; height: auto; display: flex; padding: var(--at-space-16); }
.tile-logo img { width: var(--at-space-32); height: var(--at-space-32); }
.tile-head { align-items: flex-start; gap: var(--at-space-4); padding: var(--at-space-16); }
.tile-logo + .tile-head { padding-top: var(--at-space-8); padding-bottom: var(--at-space-8); }
.crumbs { gap: var(--at-space-8); }
.crumbs .sep { color: var(--hub-text-secondary); opacity: .48; }
.tile-meta { padding: var(--at-space-16) var(--at-space-16) 0; }
.tile-desc { color: var(--at-color-ink-body); }
.tile-updated { color: var(--hub-text-secondary); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }
.tile-actions { flex: 0 0 auto; }
.link-btn { height: auto; padding: var(--at-space-14) var(--at-space-16); color: var(--hub-text-primary); }
.link-btn:hover { background: transparent; color: var(--at-color-accent); }
.link-btn .link-label { display: flex; align-items: center; gap: var(--at-space-8); min-width: 0; }
.tile-foot { padding: var(--at-space-8); justify-content: flex-end; }

/* Rows on project tiles: label left, value right, no leading icons. Copy icon always visible */
.row-btn { height: var(--at-space-48); min-height: 0; padding: 0 var(--at-space-16); gap: var(--at-space-8); }
.row-btn:hover { background: transparent; }
.row-btn .row-label { flex: 1 1 0; display: flex; align-items: center; gap: var(--at-space-8); }
.pw-row .pw-l { display: flex; align-items: center; gap: var(--at-space-8); }
.row-btn .row-value { flex: none; }
.row-btn .row-value + .icon { color: var(--hub-text-secondary); }

/* Tags: warm-wash pill */
.tag { height: var(--at-space-24); padding: 0 var(--at-space-8); gap: var(--at-space-4); border-radius: var(--at-radius-pill); background: var(--at-color-warm-wash); color: var(--hub-text-primary); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }

/* Buttons: 32px square, 6px radius, black */
.btn-icon, .btn-secondary { border-radius: var(--at-radius-button); }
.btn-icon { width: var(--at-space-32); height: var(--at-space-32); padding: 0; }
.attn-fab { border-radius: var(--at-radius-button); }
.switcher { border-radius: var(--at-radius-button); overflow: hidden; }

/* Headings: nothing uppercased */
h1, h2, h3 { text-transform: none; }

.filter-empty { color: var(--hub-text-secondary); padding: var(--at-space-32) 0; }
.tile-group + .tile-group { margin-top: var(--at-space-48); }
.tile-group-title { margin-bottom: var(--at-space-24); }

/* Reset: icon-only, same size and outline as the dropdowns */
.filter-bar .filter-reset { flex: none; display: grid; place-items: center; width: var(--at-space-32); height: var(--at-space-32); padding: 0; background: var(--hub-layer-01); border: 1px solid var(--hub-border-subtle-01); border-radius: var(--at-radius-button); color: var(--hub-text-primary); transition: background var(--at-button-transition); }
.filter-bar .filter-reset[hidden] { display: none; }
.filter-bar .filter-reset:hover { background: var(--hub-layer-hover-01); text-decoration: none; }

/* Dropdown options: no divider lines */
.dropdown-menu [role=option], .dropdown-menu [role=option]:first-child { border: 0; }

/* Tabler icons: 2px stroke at every size */
.icon path { vector-effect: non-scaling-stroke; }

/* Inverted header: black bar, white text */
.shell { background: var(--hub-background-inverse); color: var(--hub-text-inverse); }
.shell .breadcrumb li { color: var(--hub-text-inverse); }
.shell .breadcrumb li:not(:last-child)::after, .shell .breadcrumb a { color: color-mix(in srgb, var(--hub-text-inverse) 64%, transparent); }
.shell .breadcrumb a:hover { color: var(--hub-text-inverse); }
.shell-btn:hover { background: color-mix(in srgb, var(--hub-text-inverse) 12%, transparent); }


/* Figma update: hairline under the tile head and above the tile foot; 4px small controls; 20px Tabler icons at 1.25px stroke */
.tile-head { border-bottom: 1px solid var(--hub-border-subtle-01); }
.tile-logo + .tile-head { padding-top: var(--at-space-8); padding-bottom: var(--at-space-16); }
.tile-foot { border-top: 1px solid var(--hub-border-subtle-01); }
.link-btn { padding: var(--at-space-15) var(--at-space-16); }
.link-btn:hover { background: var(--hub-layer-hover-01); color: var(--hub-text-primary); }
.btn-icon, .attn-fab { border-radius: var(--at-radius-sm); }
.filter-bar .dropdown .field, .filter-bar .filter-reset { border-radius: var(--at-radius-sm); }
.filter-bar .dropdown .field:active, .filter-bar .filter-reset:active { background: var(--hub-field-pressed-01); }
.link-btn .icon, .btn-icon .icon, .filter-bar .icon, .row-btn .icon { width: 20px; height: 20px; }
.breadcrumb [aria-current="page"] { font-weight: var(--hub-type-heading-compact-01-weight); }
.tile-logo img { object-fit: contain; }
.page-head-logo img { object-fit: contain; }
.crumbs { flex-wrap: wrap; }

/* Client tile: project list is a fixed 4-row window that scrolls when longer; the arrow always sits at the bottom */
.tile-actions:has(.link-btn) { flex: none; height: calc(4 * (2 * var(--at-space-15) + var(--hub-type-body-compact-01-line-height))); overflow-y: auto; }
.tile-actions:has(.link-btn) .link-btn { flex: none; }
.tile:has(.link-btn) .tile-foot { margin-top: auto; }

/* Logos keep their ratio (width auto): 32px tall on Home tiles, 48px on the Client page, whatever their width; the width follows the ratio. */
.tile-logo img { height: var(--at-space-32); width: auto; }
.page-head-logo img { height: var(--at-space-48); width: auto; }


/* 8px radius on the icon button and the logos */
.btn-icon { border-radius: var(--at-radius-md); }
.tile-logo img, .page-head-logo img { border-radius: 0; }

/* Tile corner: 16px = 8px button radius + 8px inset, so the arrow button sits concentric with the card corner */
.tile { border-radius: var(--at-radius-lg); }



/* Heading styles follow the Figma names: page title h1 (48/60), client page title h3 (30/42), card titles h5 (20/30). All medium. */
.page-head h1 { font-size: var(--at-type-h1-size); line-height: var(--at-type-h1-line); font-weight: var(--at-type-h6-weight); }
.page-head-logo h1 { font-size: var(--at-type-h3-size); line-height: var(--at-type-h3-line); font-weight: var(--at-type-h3-weight); letter-spacing: var(--at-type-h3-tracking); }
.tile-title { font-size: var(--at-type-h5-size); line-height: var(--at-type-h5-line); font-weight: var(--at-type-h5-weight); }

/* Home tile: services and industry stack on separate lines (Figma Tile/Client) so nothing breaks mid-line */
.tile-services { color: var(--at-color-ink-body); margin: 0; }
.tile-industry { color: var(--hub-text-tertiary); margin: 0; }

/* Copy rows are <button>s: keep the same 14px text as the static rows (button.row-btn { font: inherit } was resetting it to 16px) */
button.row-btn { 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); }

/* Design panel button is a circle */
.attn-fab { border-radius: 50%; }

/* Customization panel in the Core look (replaces the Carbon-era square panel): rounded card, hairline header, pill segmented control, soft toggle, rounded tooltip */
.attn-panel { border-radius: var(--at-radius-lg); background: var(--at-color-white); }
.attn-head { height: var(--at-space-48); padding: 0 var(--at-space-8) 0 var(--at-space-16); border-bottom: 1px solid var(--hub-border-subtle-01); }
.attn-close { width: var(--at-space-32); height: var(--at-space-32); border-radius: var(--at-radius-md); }
.attn-close:hover { background: var(--at-color-warm-wash); }
.attn-body { gap: var(--at-space-24); padding: var(--at-space-16); }
.attn-group { gap: var(--at-space-8); }
.attn-label { color: var(--hub-text-tertiary); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); letter-spacing: 0; }
.attn-label-row { display: flex; align-items: center; gap: var(--at-space-8); }
.attn-row { min-height: var(--at-space-32); }
.switcher { gap: var(--at-space-4); padding: var(--at-space-4); background: var(--at-color-warm-wash); border-radius: var(--at-radius-md); }
.switcher button { height: var(--at-space-32); border: 0; border-radius: var(--at-radius-button); color: var(--hub-text-secondary); }
.switcher button:hover { background: transparent; color: var(--hub-text-primary); }
.switcher button[aria-checked="true"] { background: var(--at-color-black); color: var(--at-color-white); }
.toggle-track { width: var(--at-space-40); height: var(--at-space-24); border-radius: var(--at-radius-pill); }
.toggle-thumb { top: var(--at-space-4); left: var(--at-space-4); width: var(--at-space-16); height: var(--at-space-16); background: var(--at-color-white); }
.toggle[aria-checked="true"] .toggle-track { background: var(--at-color-black); }
.toggle[aria-checked="true"] .toggle-thumb { transform: translateX(var(--at-space-16)); }
.attn-tip-pop { border-radius: var(--at-radius-md); background: var(--at-color-black); color: var(--at-color-white); padding: var(--at-space-8) var(--at-space-12); }
.attn-fab { background: var(--at-color-black); }

/* Customization panel behaviour = Convincely's control panel: one bottom-left tool that swaps between a round button and the panel.
   Panel scales/fades (origin bottom left) on collapse and expand, the button pops back in, hover lifts the button. Both are draggable. */
.attn-tool { position: fixed; left: var(--at-space-16); bottom: var(--at-space-16); z-index: 40; display: flex; flex-direction: column; align-items: flex-start; }
.attn-tool .attn-fab, .attn-tool .attn-panel { position: static; }
.attn-tool .attn-fab[hidden], .attn-tool .attn-panel[hidden] { display: none; }
.attn-tool .attn-panel { max-height: calc(100vh - 2 * var(--at-space-24)); transform-origin: bottom left; transition: transform var(--at-panel-transition) ease, opacity var(--at-panel-transition) ease; }
.attn-tool .attn-panel.closing { transform: scale(.7); opacity: 0; }
.attn-tool .attn-fab { cursor: pointer; touch-action: none; transition: transform var(--at-panel-transition) ease, box-shadow var(--at-panel-transition) ease, background var(--at-panel-transition) ease; }
.attn-tool .attn-fab:hover { transform: translateY(calc(-1 * var(--at-space-4) / 2)) scale(1.06); box-shadow: 0 var(--at-space-8) var(--at-space-24) color-mix(in srgb, var(--at-color-black) 24%, transparent); }
.attn-tool .attn-fab:active { cursor: grabbing; transform: scale(.97); }
.attn-tool .attn-fab.pop { animation: attn-pop var(--at-panel-transition) ease; }
@keyframes attn-pop { from { transform: scale(.6); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.attn-tool .attn-panel.is-dragging { transition: none; }
/* Info tip opens above its label, as in Convincely */
.attn-tool .attn-label-row { position: relative; }
.attn-tool .attn-tip { position: static; }
.attn-tool .attn-tip-pop { top: auto; bottom: calc(100% + var(--at-space-8)); left: 0; width: auto; max-width: none; transform: none; }
.attn-tool .attn-tip:hover .attn-tip-pop, .attn-tool .attn-tip:focus-visible .attn-tip-pop { transform: none; }
@media (prefers-reduced-motion: reduce) { .attn-tool .attn-panel, .attn-tool .attn-fab { transition: none; animation: none; } }

/* Dark panel header, as in Convincely, so the panel reads as one piece with the round button */
.attn-head { background: var(--at-color-black); color: var(--at-color-white); border-bottom: 0; }
.attn-head h2 { color: var(--at-color-white); }
.attn-close { color: color-mix(in srgb, var(--at-color-white) 65%, transparent); }
.attn-close:hover { background: color-mix(in srgb, var(--at-color-white) 16%, transparent); color: var(--at-color-white); }

/* Viewport options as rounded tags that wrap, so the group can grow past three options (same 32px height as before) */
.switcher { flex-wrap: wrap; gap: var(--at-space-8); padding: 0; background: none; border-radius: 0; overflow: visible; }
.switcher button { flex: 0 1 auto; padding: 0 var(--at-space-16); border-radius: var(--at-radius-pill); background: var(--at-color-warm-wash); white-space: nowrap; transition: background var(--at-panel-transition) ease, color var(--at-panel-transition) ease; }
.switcher button:hover { background: var(--at-color-line); color: var(--hub-text-primary); }
.switcher button[aria-checked="true"] { background: var(--at-color-black); color: var(--at-color-white); }
.attn-icon-btn { width: var(--at-space-32); height: var(--at-space-32); border-radius: var(--at-radius-md); color: color-mix(in srgb, var(--at-color-white) 65%, transparent); }
.attn-icon-btn:hover { background: color-mix(in srgb, var(--at-color-white) 16%, transparent); color: var(--at-color-white); }
#attn-collapse .icon { width: var(--at-space-20); height: var(--at-space-20); }
.attn-head-divider { background: color-mix(in srgb, var(--at-color-white) 24%, transparent); }

/* Client filter bar (Figma "Filter bar"): search | filters | password (copy, more) | Design System.
   Secondary = outlined; Tertiary = icon only, no fill. */
.filter-bar { align-items: center; }
.filter-sep { flex: none; align-self: stretch; width: 0; border-right: 1px solid var(--hub-border-subtle-01); margin: 0 var(--at-space-8); }
.pw { flex: none; display: flex; align-items: center; gap: var(--at-space-8); position: relative; }
.pw-label, .pw-value { white-space: nowrap; }
.pw-label { color: var(--hub-text-tertiary); }
.pw-value { color: var(--hub-text-primary); font-weight: var(--hub-type-heading-compact-01-weight); }
.pw { gap: var(--at-space-12); }
.pw .btn-tertiary { margin-left: calc(-1 * var(--at-space-4)); }
.pw-value[hidden] { display: none; }
.btn-tertiary { display: grid; place-items: center; width: var(--at-space-32); height: var(--at-space-32); padding: 0; background: none; border: 0; border-radius: var(--at-radius-sm); color: var(--hub-text-primary); cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.btn-tertiary:hover { background: var(--at-color-warm-wash); }
.btn-tertiary:active { background: var(--hub-field-pressed-01); }
.btn-tertiary:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.btn-tertiary:disabled { color: var(--hub-text-tertiary); cursor: not-allowed; background: none; }
.btn-tertiary .icon { width: 20px; height: 20px; }
.btn-tertiary .icon-copied { display: none; }
.btn-tertiary.is-copied .icon-copy { display: none; }
.btn-tertiary.is-copied .icon-copied { display: block; }
.btn-outline { flex: none; display: inline-flex; align-items: center; gap: var(--at-space-8); height: var(--at-space-32); padding: 0 var(--at-space-4); background: var(--hub-layer-01); color: var(--hub-text-primary); border: 1px solid var(--at-color-ink); border-radius: var(--at-radius-sm); text-decoration: none; cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.btn-outline:hover { background: var(--at-color-warm-wash); }
.btn-outline:active { background: var(--hub-field-pressed-01); }
.btn-outline:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.btn-outline[aria-disabled="true"] { color: var(--hub-text-tertiary); border-color: var(--hub-border-subtle-01); cursor: not-allowed; background: var(--hub-layer-01); }
.btn-outline .icon { width: 20px; height: 20px; }
.btn-outline span { padding: 0 var(--at-space-8); }
.pw-more { position: relative; }
.pw-menu { left: auto; right: 0; min-width: max-content; margin-top: var(--at-space-4); }
.pw-menu[role=menu] [role=menuitem] { display: flex; align-items: center; height: var(--at-space-40); padding: 0 var(--at-space-16); color: var(--hub-text-secondary); cursor: pointer; border: 0; }
.pw-menu [role=menuitem]:hover, .pw-menu [role=menuitem]:focus-visible { background: var(--hub-layer-hover-01); color: var(--hub-text-primary); outline: 0; }
.pw-menu [role=menuitem][aria-disabled="true"] { color: var(--hub-text-tertiary); cursor: not-allowed; background: none; }
/* Wrapped (search on its own row): dividers stay, the password group is pushed to the right next to Design System */
.filter-bar > .filter-sep:first-of-type { margin-left: auto; }

/* Inverted panel: the whole Customization panel is dark so it stands out from the (light) prototype page. */
.attn-panel { background: var(--at-color-black); color: var(--at-color-white); box-shadow: 0 var(--at-space-8) var(--at-space-24) color-mix(in srgb, var(--at-color-black) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--at-color-white) 16%, transparent); }
.attn-head { border-bottom: 1px solid color-mix(in srgb, var(--at-color-white) 16%, transparent); }
.attn-label { color: color-mix(in srgb, var(--at-color-white) 65%, transparent); }
.attn-tip { color: color-mix(in srgb, var(--at-color-white) 65%, transparent); }
.attn-row { color: var(--at-color-white); }
.switcher button { background: color-mix(in srgb, var(--at-color-white) 16%, transparent); color: var(--at-color-white); }
.switcher button:hover { background: color-mix(in srgb, var(--at-color-white) 28%, transparent); color: var(--at-color-white); }
.switcher button[aria-checked="true"] { background: var(--at-color-white); color: var(--at-color-black); }
.attn-tip-pop { background: var(--at-color-white); color: var(--at-color-black); }
.attn-fab { box-shadow: 0 0 0 1px color-mix(in srgb, var(--at-color-white) 24%, transparent); }
.attn-panel .toggle-track { background: color-mix(in srgb, var(--at-color-white) 24%, transparent); }
.attn-panel .toggle[aria-checked="true"] .toggle-track { background: var(--at-color-white); }
.attn-panel .toggle-thumb { background: var(--at-color-white); }
.attn-panel .toggle[aria-checked="true"] .toggle-thumb { background: var(--at-color-black); }

/* Show / hide password */
.btn-tertiary .icon-eye-off { display: none; }
.btn-tertiary[aria-pressed="true"] .icon-eye { display: none; }
.btn-tertiary[aria-pressed="true"] .icon-eye-off { display: block; }
.pw .btn-tertiary + .btn-tertiary, .pw .btn-tertiary + .pw-more { margin-left: calc(var(--at-space-8) - var(--at-space-12)); }  /* 8px between eye, copy and more */
.pw-value { min-width: 0; }

/* ── Prototype stage ──
   Desktop: the design fills the window (scrollbar shown). Tablet / Mobile: the Figma iPad Pro 11" (landscape) and iPhone 18 Pro bezels (assets/devices), scaled by --fit (set by fit() in the page)
   so the whole device fits the window height. The status bar is part of the screen: content starts below it (--safe-top) and scrolls under a soft glass edge. No scrollbar on Tablet / Mobile.
   Device and screen sizes are content measured from the Figma components, not spacing. */
.proto-stage { position: fixed; inset: 0; overflow: hidden; background: var(--hub-layer-01); }
.proto-device, .proto-screen { position: absolute; inset: 0; }
.proto-screen { overflow: auto; background: var(--hub-layer-01); }
.proto-glass, .proto-status, .proto-bezel { display: none; }
.proto-stage:not([data-viewport="Desktop"]) { display: grid; grid-template: 100% / 100%; place-items: center; background: var(--at-color-warm-wash); }
.proto-stage:not([data-viewport="Desktop"]) .proto-device { position: relative; inset: auto; width: var(--dev-w); height: var(--dev-h); transform: scale(var(--fit, 1)); }
.proto-stage:not([data-viewport="Desktop"]) .proto-screen { inset: auto; left: var(--scr-x); top: var(--scr-y); width: var(--scr-w); height: var(--scr-h); box-sizing: border-box; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom, 0px); scrollbar-width: none; border-radius: var(--scr-r); }
.proto-stage:not([data-viewport="Desktop"]) .proto-screen::-webkit-scrollbar { display: none; }
.proto-stage:not([data-viewport="Desktop"]) :is(.proto-glass, .proto-status, .proto-bezel) { display: block; position: absolute; pointer-events: none; }
.proto-stage:not([data-viewport="Desktop"]) :is(.proto-glass, .proto-status) { left: var(--scr-x); top: var(--scr-y); width: var(--scr-w); border-radius: var(--scr-r) var(--scr-r) 0 0; }
.proto-stage:not([data-viewport="Desktop"]) .proto-status { height: var(--status-h); background: center / 100% 100% no-repeat; }
.proto-stage:not([data-viewport="Desktop"]) .proto-bezel { inset: 0; background: center / 100% 100% no-repeat; }
/* Status bar is plain white at rest; once the content scrolls (.is-scrolled, set by the page) it turns to scroll-edge glass: content passing under it is blurred and frosted, fading out below it. */
.proto-stage:not([data-viewport="Desktop"]) .proto-status { background-color: var(--at-color-white); transition: background-color var(--at-panel-transition) ease; }
.proto-stage.is-scrolled:not([data-viewport="Desktop"]) .proto-status { background-color: transparent; }
.proto-glass { opacity: 0; transition: opacity var(--at-panel-transition) ease; }
.proto-stage.is-scrolled .proto-glass { opacity: 1; }
.proto-stage:not([data-viewport="Desktop"]) .proto-glass { height: calc(var(--safe-top) + var(--at-space-24)); backdrop-filter: blur(var(--at-space-8)) saturate(1.6); -webkit-backdrop-filter: blur(var(--at-space-8)) saturate(1.6); background: linear-gradient(to bottom, color-mix(in srgb, var(--at-color-white) 72%, transparent), transparent); -webkit-mask-image: linear-gradient(to bottom, var(--at-color-black) 55%, transparent); mask-image: linear-gradient(to bottom, var(--at-color-black) 55%, transparent); }
.proto-stage[data-viewport="Mobile"] { --dev-w: 450px; --dev-h: 920px; --scr-x: 24px; --scr-y: 23px; --scr-w: 402px; --scr-h: 874px; --scr-r: 58px; --safe-top: 62px; --status-h: 62px; --safe-bottom: 100px; }
.proto-stage[data-viewport="Mobile"] .proto-bezel { background-image: url(assets/devices/iphone-bezel.png); }
.proto-stage[data-viewport="Mobile"] .proto-status { background-image: url(assets/devices/iphone-status.svg?v=2); }
.proto-stage[data-viewport="Tablet"] { --dev-w: 1320px; --dev-h: 940px; --scr-x: 55px; --scr-y: 53px; --scr-w: 1210px; --scr-h: 834px; --scr-r: 28px; --safe-top: 86px; --status-h: 32px; }
.proto-stage[data-viewport="Tablet"] .proto-bezel { background-image: url(assets/devices/ipad-bezel.png); }
.proto-stage[data-viewport="Tablet"] .proto-status { background-image: url(assets/devices/ipad-status.svg); }

/* Client head: services, industry and the client's text sit under the name */
.page-head-logo { align-items: flex-start; }
.page-head-logo > img { align-self: center; }
.client-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--at-space-4); min-width: 0; }
.client-title h1 { margin: 0; }
.client-services { margin: 0; color: var(--at-color-ink-body); }
.client-industry { margin: 0; color: var(--hub-text-tertiary); }
.client-text { margin: var(--at-space-8) 0 0; max-width: 40em; color: var(--at-color-ink-body); }
.client-services[hidden], .client-industry[hidden], .client-text[hidden] { display: none; }
.page-head-rule { align-self: stretch; height: auto; }
.pw .pw-more .btn-tertiary { margin-left: 0; }

/* Client head: services and industry on one line, same size, divided by a dot */
.client-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-space-8); color: var(--at-color-ink-body); }
.client-meta .sep { opacity: .48; }
.client-meta[hidden] { display: none; }

/* Mobile only: Safari's bottom toolbar (Figma "Toolbar - Bottom - Safari"): back, address and more in separate liquid-glass pills, over a soft bottom scroll edge and the home indicator.
   Content leaves room for it (--safe-bottom) and scrolls under it. Chrome typography is the iOS system font, not the library's. */
.proto-safari, .proto-home { display: none; }
.proto-stage[data-viewport="Mobile"] .proto-safari { position: absolute; display: flex; align-items: center; gap: var(--at-space-8); box-sizing: border-box; left: var(--scr-x); width: var(--scr-w); height: 86px; padding: var(--at-space-4) 34px 34px; bottom: calc(var(--dev-h) - var(--scr-y) - var(--scr-h)); border-radius: 0 0 var(--scr-r) var(--scr-r); font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--at-color-black); pointer-events: none; }
.proto-stage[data-viewport="Mobile"] .proto-safari::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + var(--at-space-24)); border-radius: inherit; backdrop-filter: blur(var(--at-space-4)); -webkit-backdrop-filter: blur(var(--at-space-4)); background: linear-gradient(to top, color-mix(in srgb, var(--at-color-white) 85%, transparent), transparent); -webkit-mask-image: linear-gradient(to top, var(--at-color-black) 50%, transparent); mask-image: linear-gradient(to top, var(--at-color-black) 50%, transparent); }
.proto-pill { position: relative; display: flex; align-items: center; justify-content: center; flex: none; height: var(--at-space-48); border-radius: var(--at-radius-pill); background: color-mix(in srgb, var(--at-color-black) 4%, var(--at-color-white)); box-shadow: 0 var(--at-space-8) calc(var(--at-space-40)) color-mix(in srgb, var(--at-color-black) 12%, transparent); }
.proto-pill-icon { width: var(--at-space-48); }
.proto-pill-address { flex: 1 1 0; min-width: 0; gap: 0; padding: 0 var(--at-space-4); }
.proto-pill-address img { flex: none; width: 15.4px; height: 18px; margin: 0 2.3px; }
.proto-pill svg { flex: none; }
.proto-pill-address svg { flex: none; }
.proto-pill-url { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--at-space-16); font-weight: 500; }
.proto-stage[data-viewport="Mobile"] .proto-home { position: absolute; display: block; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: var(--at-radius-pill); background: var(--at-color-black); bottom: calc(var(--dev-h) - var(--scr-y) - var(--scr-h) + var(--at-space-8)); pointer-events: none; }

/* Tablet only: Safari's top toolbar (Figma "Toolbar - Top - Safari (iPad)"), directly under the status bar: sidebar + back, centred address bar, share / new tab / tabs. */
.proto-safari-top { display: none; }
.proto-stage[data-viewport="Tablet"] .proto-safari-top { position: absolute; display: flex; align-items: center; gap: var(--at-space-8); box-sizing: border-box; left: var(--scr-x); top: calc(var(--scr-y) + var(--status-h)); width: var(--scr-w); padding: 0 var(--at-space-10, 10px); font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--at-color-black); pointer-events: none; }
.proto-safari-top .proto-pill { height: 44px; }
.proto-safari-top .proto-pill-icon { width: 44px; }
.proto-safari-top .proto-lead, .proto-safari-top .proto-trail { flex: 1 1 0; display: flex; align-items: center; gap: var(--at-space-12); }
.proto-safari-top .proto-trail { justify-content: flex-end; }
.proto-safari-top .proto-pill-address { flex: none; width: 388px; color: var(--at-color-black); }
.proto-safari-top .proto-pill-group { gap: 6px; padding: 0 6px; width: 132px; box-sizing: border-box; justify-content: space-between; }

/* Status tag: colour mirrors the status */
.tile-meta { display: flex; flex-wrap: wrap; gap: var(--at-space-8); }
.tag-status { background: var(--at-color-status-archived-bg); color: var(--at-color-status-archived-fg); }
.tag-status[data-status="In progress"] { background: var(--at-color-status-progress-bg); color: var(--at-color-status-progress-fg); }
.tag-status[data-status="Completed"] { background: var(--at-color-status-completed-bg); color: var(--at-color-status-completed-fg); }
.tag-status[data-status="Paused"] { background: var(--at-color-status-paused-bg); color: var(--at-color-status-paused-fg); }
.tag-status[data-status="Archived"] { background: var(--at-color-status-archived-bg); color: var(--at-color-status-archived-fg); }
/* Card password row: label, masked value, then eye / copy / more at 8px */
.pw-row { gap: var(--at-space-8); }
.pw-row .pw-v { font-weight: var(--hub-type-heading-compact-01-weight); }
.pw-row .btn-tertiary { flex: none; }
.pw-row .row-value + .btn-tertiary { margin-left: 0; }
.pw-row .btn-tertiary:last-child, .pw-row .pw-more { margin-right: calc(-1 * var(--at-space-4)); }
.pw-row .pw-more .btn-tertiary { margin-right: 0; }
.pw-row .pw-menu { z-index: 5; }
.tile-meta { flex-direction: row; align-items: center; }
/* Card password row: label over value on the left (the value can be a 12 character password), buttons on the right */
.pw-row { height: var(--at-space-48); min-height: var(--at-space-48); padding-top: 0; padding-bottom: 0; }
.pw-row .pw-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: var(--at-space-16); }
.pw-row .pw-l { color: var(--hub-text-primary); }
.pw-row .pw-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:has(.pw-menu:not([hidden])) { overflow: visible; }
/* Cards keep a readable width: as many columns as fit at 320px minimum (replaces the fixed 2/3/4 columns) */
.tiles, .browse .tiles { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
/* Description: three lines, then an ellipsis */
.tile-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Card thumbnail (full width, 16:9, no padding) */
.tile-thumb { border-bottom: 1px solid var(--hub-border-subtle-01); overflow: hidden; }
.tile-thumb-img { aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--at-color-black) 20%, var(--at-color-off-white)) center / cover no-repeat; }

/* Panel with no groups (e.g. icon sets): show only the header actions. */
.attn-body:empty { display: none; }
.attn-panel:has(.attn-body:empty) .attn-head { border-bottom: 0; }

/* Collapsible sections (collapsible.js): the heading is a toggle with a chevron; a collapsed section shows only its heading */
.sec-toggle { display: inline-flex; align-items: center; gap: var(--at-space-8); padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.sec-toggle:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 4px; border-radius: var(--at-radius-sm); }
.sec-chevron { flex: none; color: var(--hub-text-secondary); transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
.sec-toggle:hover .sec-chevron { color: var(--hub-text-primary); }
.is-collapsed > .tile-group-title .sec-chevron, .is-collapsed > .ds-section-title .sec-chevron { transform: rotate(-90deg); }
.is-collapsed > :not(.tile-group-title):not(.ds-section-title) { display: none; }
.is-collapsed > .tile-group-title, .is-collapsed > .ds-section-title { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .sec-chevron { transition: none; } }
/* Collapsed sections sit 16px apart */
.tile-group.is-collapsed + .tile-group, .ds-section.is-collapsed + .ds-section, .fd-section.is-collapsed + .fd-section { margin-top: var(--at-space-16); }
/* Section count badge, next to the heading */
.tile-group-title, .ds-section-title { display: flex; align-items: center; gap: var(--at-space-12); }
.sec-count { display: inline-flex; align-items: center; height: var(--at-space-24); padding: 0 var(--at-space-8); border-radius: var(--at-radius-pill); background: var(--at-color-warm-wash); color: var(--hub-text-primary); font-weight: var(--hub-type-body-compact-01-weight); font-variant-numeric: tabular-nums; }
.sec-count:empty { display: none; }
.sec-toggle { gap: var(--at-space-12); }

/* Share button and share mode (share.js) */
.share-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--at-space-8); height: var(--at-space-32); padding: 0 var(--at-space-12); border: 0; border-radius: var(--at-radius-button); background: var(--hub-button-primary); color: var(--hub-text-on-color); font: inherit; cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.share-btn:hover { background: var(--hub-button-primary-hover); }
.share-btn:active { background: var(--hub-button-primary-active); }
.share-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.share-btn:disabled { background: var(--hub-border-subtle-01); color: var(--hub-text-tertiary); cursor: not-allowed; }
.share-check { display: none; }
.share-btn.is-copied .share-check { display: block; }
.is-share .shell .breadcrumb li:not(:last-child), .is-share .share-btn, .is-share .pw, .is-share .filter-sep { display: none; }
.is-share .shell .breadcrumb li:not(:last-child)::after { content: none; }
html.is-locked body > :not(.share-gate) { display: none !important; }
.share-gate { position: fixed; inset: 0; z-index: 100000; overflow: hidden; display: grid; place-items: center; padding: var(--at-space-24); background: var(--hub-background) linear-gradient(to bottom, var(--at-color-warm-wash), var(--hub-background)) no-repeat top / 100% 50%; }
.share-box { position: relative; z-index: 100000; width: min(23rem, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.share-logos { display: flex; align-items: center; gap: var(--at-space-12); margin-bottom: var(--at-space-24); }
.share-logo { display: block; height: var(--at-space-40); width: auto; max-width: calc(var(--at-space-60) + var(--at-space-24)); object-fit: contain; }
.share-logo-at { width: var(--at-space-40); }
.share-x { color: var(--hub-text-secondary); }
.share-title { margin: 0 0 var(--at-space-8); font-size: var(--at-type-h3-size); line-height: var(--at-type-h3-line); font-weight: var(--at-type-h3-weight); letter-spacing: var(--at-type-h3-tracking); }
.share-sub { margin: 0; color: var(--hub-text-secondary); }
.share-form { width: 100%; display: flex; flex-direction: column; gap: var(--at-space-12); margin-top: var(--at-space-40); }
.share-input { display: block; box-sizing: border-box; width: 100%; height: var(--at-space-48); padding: 0 var(--at-space-16); background: var(--hub-layer-01); color: var(--hub-text-primary); border: 1px solid var(--hub-border-subtle-01); border-radius: var(--at-radius-md); font: inherit; outline: 0; }
.share-input:focus { border: 2px solid var(--hub-focus); padding: 0 calc(var(--at-space-16) - 1px); }
.share-input[aria-invalid="true"] { border-color: var(--at-color-raspberry); }
.share-input::placeholder { color: var(--hub-text-placeholder); opacity: 1; }
.share-field { position: relative; width: 100%; }
.share-error { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.share-error-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.share-next { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--at-space-48); padding: 0 var(--at-space-24); border: 0; border-radius: var(--at-radius-md); background: var(--hub-button-primary); color: var(--hub-text-on-color); font: inherit; cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.share-next:hover { background: var(--hub-button-primary-hover); }
.share-next:active { background: var(--hub-button-primary-active); }
.share-next:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.share-next-err { display: none; }
.share-form:has(.share-input[aria-invalid="true"]) .share-next, .share-form:has(.share-input[aria-invalid="true"]) .share-next:hover, .share-form:has(.share-input[aria-invalid="true"]) .share-next:active { background: var(--at-color-raspberry); }
.share-form:has(.share-input[aria-invalid="true"]) .share-next-label { display: none; }
.share-form:has(.share-input[aria-invalid="true"]) .share-next-err { display: inline; }
/* The whole screen is a dot board behind the login box */
.share-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-image: radial-gradient(circle, var(--hub-border-subtle-01) 1px, transparent 1.25px); background-size: var(--at-space-24) var(--at-space-24); touch-action: none; }
/* Attentive logo at the start of the header: the brandmark as a mask, so it takes the header text colour (white on the dark bar). */
.shell-logo { flex: none; width: var(--at-space-24); height: var(--at-space-24); margin-right: var(--at-space-16); background: var(--hub-text-inverse); -webkit-mask: url(assets/attentive-logo.svg) center / contain no-repeat; mask: url(assets/attentive-logo.svg) center / contain no-repeat; }
.shell-logo:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: var(--at-space-4); }

/* Card list on Home: a hairline under each row. */
.tile-actions:has(.link-btn) .link-btn { border-bottom: 1px solid var(--hub-border-subtle-01); }
/* Project card (client page): a hairline under each detail row too. */
.tile-actions .row-btn { border-bottom: 1px solid var(--hub-border-subtle-01); }
/* The card footer already draws the line under the last row, so the last row has none (no double line). */
.tile-actions .row-btn:last-child, .tile-actions:has(.link-btn) .link-btn:last-child { border-bottom: 0; }
/* Filter bar: the white background around the fields gets 4px more padding (6 + 4 = 10px) and the card corner radius. */
.filter-bar { padding: calc(var(--at-space-6) + var(--at-space-4)); border-radius: var(--at-radius-card); }
/* Row dividers inside a card (and the footer line under the last row) are lighter than the card's outer border. */
.tile-actions .row-btn, .tile-actions:has(.link-btn) .link-btn { border-bottom-color: color-mix(in srgb, var(--hub-border-subtle-01) 50%, var(--hub-layer-01)); }
.tile .tile-foot { border-top-color: color-mix(in srgb, var(--hub-border-subtle-01) 50%, var(--hub-layer-01)); }
/* Scrollable card list: soft shadows at the top / bottom edge show there is more to scroll (they only appear while content is hidden in that direction). */
.tile-actions:has(.link-btn) {
  background:
    linear-gradient(var(--hub-layer-01) 30%, transparent) top / 100% var(--at-space-24) no-repeat local,
    linear-gradient(transparent, var(--hub-layer-01) 70%) bottom / 100% var(--at-space-24) no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--at-color-black) 6%, transparent), transparent) top / 100% var(--at-space-6) no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--at-color-black) 6%, transparent), transparent) bottom / 100% var(--at-space-6) no-repeat scroll;
}
/* Long values in a card's detail rows (e.g. the URL) are cut with an ellipsis; the label and icons keep their size. */
.tile-actions .row-btn .row-label { flex: 1 0 auto; }
.tile-actions .row-btn .row-value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Version tag next to a card title. With several versions it is a button that opens the version list. */
.tile-title-row { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--at-space-8); }
.tile-title-row .tile-title { font-size: var(--at-type-h6-size); line-height: var(--at-type-h6-line); font-weight: var(--at-type-h6-weight); }
.tag-version { height: var(--at-space-20); padding: 0 var(--at-space-6); font-size: var(--hub-type-label-01-size); line-height: var(--hub-type-label-01-line-height); }
.tag-version-btn { border: 0; cursor: pointer; font-family: inherit; color: var(--hub-text-primary); }
.tag-version-btn .icon { width: var(--at-space-12); height: var(--at-space-12); }
.tag-version-btn:hover { background: var(--hub-layer-hover-01); }
.tag-version-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.version-menu { right: auto; left: 0; min-width: var(--at-space-60); z-index: 6; }
.tile.is-highlight { outline: 2px solid var(--hub-focus); outline-offset: 2px; transition: outline-color var(--at-button-transition); }
/* A long URL is cut at the start (ellipsis on the left) so the end of the link stays visible. */
.tile-actions .row-btn .row-value-start-cut { direction: rtl; text-align: right; }
/* Type tag colours, one per type, so the kinds of card are easy to tell apart. Built from existing tokens. */
.tile-meta .tag { background: var(--at-color-warm-wash); color: var(--hub-text-primary); }
.tile[data-type="Prototype"] .tile-meta .tag { background: color-mix(in srgb, var(--at-color-raspberry) 12%, var(--hub-layer-01)); color: var(--at-color-raspberry); }
.tile[data-type="Media"] .tile-meta .tag { background: color-mix(in srgb, var(--at-color-blue-teal) 28%, var(--hub-layer-01)); color: var(--at-color-ink); }
.tile[data-type="Flow"] .tile-meta .tag { background: color-mix(in srgb, var(--at-color-ink) 10%, var(--hub-layer-01)); color: var(--at-color-ink); }
.link-btn[data-type="Prototype"] .type-icon { color: var(--at-color-raspberry); }
.link-btn[data-type="Media"] .type-icon { color: color-mix(in srgb, var(--at-color-blue-teal) 45%, var(--at-color-ink)); }
.link-btn[data-type="Flow"] .type-icon { color: var(--at-color-ink); }
/* Version tag: an outline (no fill), so it reads differently from the type tag. */
.tag-version { background: transparent; border: 1px solid var(--hub-border-strong-01); color: var(--hub-text-primary); }
.tag-version-btn:hover { background: var(--hub-layer-hover-01); }
/* Card text: "Last updated on" comes first at the body size; the description follows at the compact (caption) size. */
.tile-updated { font-size: var(--hub-type-body-01-size); line-height: var(--hub-type-body-01-line-height); }
.tile-desc { font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }
/* Card text colours swapped too: "Last updated on" takes the darker body colour, the description the lighter muted one, with 4px between them. */
.tile-updated { color: var(--at-color-ink-body); }
.tile-desc { color: var(--hub-text-secondary); padding-top: var(--at-space-4); }
/* Home card list: the version tag sits right before the row's arrow. */
.link-btn .link-end { display: flex; align-items: center; gap: var(--at-space-8); flex: none; }
/* "Updated yesterday": a clock icon, then the text at the same size as the description. */
.tile-updated { display: flex; align-items: center; gap: var(--at-space-4); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }
.tile-updated .icon { width: var(--at-space-16); height: var(--at-space-16); flex: none; }
.tile-title-row + .tile-updated { margin-top: var(--at-space-4); }
/* The whole card is a link (stretched over it); the version tag button and its list sit above that link so they can be clicked. */
.tag-version-btn { position: relative; z-index: 2; }
.version-menu { z-index: 3; }
/* Version list: opens right under the tag and looks like the filter dropdown menu (same options, current one shaded). */
.version-wrap { position: relative; display: inline-flex; }
.version-menu { left: 0; right: auto; min-width: max-content; margin-top: var(--at-space-4); z-index: 3; }
/* Version list rows (inside the dropdown): tag, title, "Latest · Updated …", arrow on the other versions. The current row is shaded like a selected dropdown option. */
.version-menu { width: calc(var(--at-space-60) * 5); max-width: calc(100vw - var(--at-space-32)); padding: var(--at-space-4); background: var(--hub-layer-01); }
.version-menu .version-opt { height: auto; min-height: 0; display: flex; align-items: center; gap: var(--at-space-12); padding: var(--at-space-12) var(--at-space-12); border-radius: var(--at-radius-md); color: var(--hub-text-primary); }
.version-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.version-title { font-weight: var(--hub-type-heading-compact-01-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-sub { color: var(--hub-text-secondary); font-size: var(--hub-type-label-01-size); line-height: var(--hub-type-label-01-line-height); white-space: nowrap; }
.version-go { flex: none; display: grid; place-items: center; color: var(--hub-text-secondary); }
.version-go .icon { width: var(--at-space-16); height: var(--at-space-16); }
/* The list is wider than a card: while it is open the card stops clipping it and rises above its neighbours. */
.tile:has(.version-menu:not([hidden])) { overflow: visible; z-index: 8; }
/* Version list: smaller text (the caption size minus 1–2px) and tighter padding. */
.version-menu .version-opt { gap: var(--at-space-8); padding: var(--at-space-8); font-size: calc(var(--at-type-caption-size) - 1px); line-height: var(--at-space-18); }
.version-menu .tag-version { height: var(--at-space-18); padding: 0 var(--at-space-6); font-size: calc(var(--at-type-caption-size) - 3px); line-height: var(--at-space-16); }
.version-title { font-size: calc(var(--at-type-caption-size) - 1px); line-height: var(--at-space-18); }
.version-sub { font-size: calc(var(--at-type-caption-size) - 2px); line-height: var(--at-space-16); }
.version-menu { width: calc(var(--at-space-60) * 4); padding: var(--at-space-4); }
.version-go .icon { width: var(--at-space-14); height: var(--at-space-14); }

/* Card footer: "Open prototype" label slides in to the left of the arrow button on hover/focus. */
.tile-foot { align-items: center; gap: var(--at-space-8); overflow: hidden; }
.open-label { color: var(--hub-text-primary); white-space: nowrap; opacity: 0; transform: translateX(var(--at-space-16)); transition: opacity var(--hub-motion-fast) var(--hub-motion-productive), transform var(--hub-motion-fast) var(--hub-motion-productive); pointer-events: none; }
.tile:hover .open-label, .tile:focus-within .open-label { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .open-label { transition: none; transform: none; } }

/* Open label sits at the far left of the card footer, medium weight; password stars sit at the right, next to the eye. */
.tile-foot { justify-content: space-between; }
.open-label { font-weight: var(--hub-type-heading-compact-01-weight); transform: translateX(calc(-1 * var(--at-space-16))); padding-left: var(--at-space-8); }
.pw-row .pw-text { justify-content: space-between; }

/* Home client tile: status tag at the top right of the logo row. */
.tile-logo { align-items: flex-start; }
.tile-logo .tile-status { margin-left: auto; }

/* The logo is the brand, so the client name under it on the Home tile is visually hidden (still read by screen readers and used for the Open label). */
.tile-logo + .tile-head .tile-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Home tile empty state (client with no cards yet): gradient block with a 32px image icon, "No prototypes yet" in the list area below; footer pushed to the bottom. */
.tile-empty .tile-thumb-img, .tile-thumb-none .tile-thumb-img { display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, var(--at-color-warm-wash), var(--hub-background)); color: var(--hub-text-secondary); }
.tile-empty .tile-thumb-img .icon, .tile-thumb-none .tile-thumb-img .icon { width: var(--at-space-32); height: var(--at-space-32); }
.tile-empty-text { margin: 0; padding: var(--at-space-15) var(--at-space-16); color: var(--hub-text-secondary); }
.tile:has(.tile-empty) .tile-foot { margin-top: auto; }
.tile:has(.tile-empty) .tile-actions { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.tile-empty-text { text-align: center; }

/* Fallback-font note (font-note.js): floating alert at the bottom right on every page */
.font-note { position: fixed; bottom: var(--at-space-16); right: var(--at-space-16); width: max-content; z-index: 99999; display: flex; align-items: center; gap: var(--at-space-8); max-width: calc(100vw - 2 * var(--at-space-16)); padding: var(--at-space-12) var(--at-space-16); background: var(--hub-layer-01); color: var(--hub-text-primary); border: 1px solid var(--hub-border-strong-01); border-radius: var(--at-radius-lg); box-shadow: 0 var(--at-space-4) var(--at-space-16) color-mix(in srgb, var(--hub-text-primary) 16%, transparent); }
.font-note-icon { flex: none; color: var(--hub-icon-secondary); }
.font-note-close { flex: none; display: grid; place-items: center; width: var(--at-space-24); height: var(--at-space-24); margin: calc(var(--at-space-4) * -1) calc(var(--at-space-8) * -1) calc(var(--at-space-4) * -1) 0; padding: 0; border: 0; border-radius: var(--at-radius-sm); background: none; color: var(--hub-icon-secondary); cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive), color var(--hub-motion-fast) var(--hub-motion-productive); }
.font-note-close:hover { background: var(--at-color-warm-wash); color: var(--hub-text-primary); }
.font-note-close:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }

/* Mobile: 16px side margin everywhere (header, page head, content). */
@media (max-width: 640px) {
  .shell { padding: 0 var(--at-space-16); }
  .page-head { padding-left: var(--at-space-16); padding-right: var(--at-space-16); }
  .content { padding-left: var(--at-space-16); padding-right: var(--at-space-16); }
  .filter-bar { margin-left: var(--at-space-16); margin-right: var(--at-space-16); }
  .filter-bar .dropdown.is-active { border-color: var(--at-color-ink); }
  /* Client head: logo + Share on the first row, name and meta below, no vertical rule or dangling dot */
  .page-head-logo { flex-wrap: wrap; gap: var(--at-space-16); }
  .page-head-logo > img { align-self: center; max-width: 60%; object-fit: contain; object-position: left; }
  .page-head-rule { display: none; }
  .page-head-logo .share-btn { order: 2; }
  .page-head-logo .client-title { order: 3; flex: 1 1 100%; }
  .client-meta { flex-direction: column; align-items: flex-start; gap: var(--at-space-4); }
  .client-meta .sep { display: none; }
  /* Filter bar: no vertical separators, password row and Design System button on their own full-width rows */
  .filter-bar .filter-sep { display: none; }
  .filter-bar .pw { flex: 1 0 auto; justify-content: flex-end; }
  /* Filters collapse behind the search field; the chevron opens them */
  .filter-bar .filter-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .filter-bar .field-search { flex: 1 1 calc(100% - var(--at-space-8) - var(--at-space-32)); min-width: 0; }
  .filter-bar .filter-toggle { align-self: center; }
  .filter-bar .field-search .field-input { text-overflow: ellipsis; }
  .filter-bar:not(.is-open):not(.is-closing) > :not(.field-search):not(.filter-toggle) { display: none; }
  .filter-bar.is-open .filter-toggle .icon { transform: rotate(180deg); }
  /* Version list: spans the card width instead of running off the screen */
  .version-wrap { position: static; }
  .version-menu { left: var(--at-space-16); right: var(--at-space-16); width: auto; max-width: none; min-width: 0; }
}

/* Compact filters (all widths): placeholder is muted until a value is picked; Sort is icon only */
.filter-bar .dropdown:not(.is-active) .dropdown-value { color: var(--hub-text-placeholder); }
.filter-bar .dropdown.is-active { border-color: var(--at-color-ink); }
.filter-bar .dropdown[data-sort] .dropdown-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Client with no logo yet: square image-icon placeholder at logo height (32px Home tile, 48px client page) */
.logo-none { display: flex; align-items: center; justify-content: center; width: var(--at-space-32); height: var(--at-space-32); background: linear-gradient(to bottom, var(--at-color-warm-wash), var(--hub-background)); color: var(--hub-text-secondary); }
.logo-none[hidden] { display: none; }
.page-head-logo .logo-none { width: var(--at-space-48); height: var(--at-space-48); flex: none; }
.logo-none .icon { width: var(--at-space-16); height: var(--at-space-16); }
.page-head-logo .logo-none .icon { width: var(--at-space-24); height: var(--at-space-24); }
.page-head-logo img[hidden] { display: none; }

/* Version list: every tag sits in the same fixed-width column so the titles start at one vertical line. */
.version-menu .version-tag-col { flex: none; display: flex; }
.version-menu .version-text { flex: 1 1 auto; min-width: 0; }
.version-menu .tag-version { flex: none; box-sizing: border-box; justify-content: center; text-align: center; }

/* Version list: no arrow by default, the tag sits at the right; on hover/focus the arrow slides in from the right and pushes the tag left */
.version-menu .version-go { width: 0; margin-left: calc(var(--at-space-8) * -1); overflow: hidden; opacity: 0; transform: translateX(var(--at-space-8)); transition: width var(--hub-motion-fast) var(--hub-motion-productive), margin var(--hub-motion-fast) var(--hub-motion-productive), opacity var(--hub-motion-fast) var(--hub-motion-productive), transform var(--hub-motion-fast) var(--hub-motion-productive); }
.version-menu .version-opt:hover .version-go, .version-menu .version-opt:focus-visible .version-go { width: var(--at-space-16); margin-left: 0; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .version-menu .version-go { transition: none; } }

/* Mobile Safari bottom bar: the home indicator is the Figma export of "Toolbar - Bottom - Safari" (node 35:781) as an SVG (assets/devices/safari-bottom.svg, 402 x 86, transparent); the pills are liquid glass like the attentive.framer.website header: a white 34% tint over the page, rim highlights, soft shadows, and liquid-glass.js adds the refracting backdrop-filter (Chromium). Other browsers keep the blur below. Values are the site's on purpose. */
.proto-stage[data-viewport="Mobile"] .proto-safari::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 86px; background: url("assets/devices/safari-bottom.svg") no-repeat center bottom / 402px 86px; z-index: 0; pointer-events: none; }
.proto-stage[data-viewport="Mobile"] .proto-home { display: none; }
.proto-stage[data-viewport="Mobile"] .proto-safari .proto-pill, .proto-stage[data-viewport="Tablet"] .proto-safari-top .proto-pill { z-index: 1; background: rgba(255, 255, 255, 0.34); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 1px 0 0 0 rgba(84, 84, 86, 0.16), -1px 0 0 0 rgba(84, 84, 86, 0.16), 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(84, 84, 86, 0.16), inset 0 -1px 0 0 rgba(84, 84, 86, 0.16), inset 0 2px 8px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 8px 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.56), inset 0 -1px 0 0 rgba(255, 255, 255, 0.56); }

/* Status bar: no blur or scroll-edge glass for now; a plain white bar, the same height as the status bar, at rest and while scrolling. */
.proto-stage:not([data-viewport="Desktop"]) .proto-glass { display: none; }
.proto-stage.is-scrolled:not([data-viewport="Desktop"]) .proto-status { background-color: var(--at-color-white); }

/* Hub header = the liquid glass pill from attentive.framer.website: a floating, centred pill (logo + breadcrumb) that sticks 16px from the top over the page, white 34% tint, rim highlights and soft shadows, with the refracting backdrop-filter from liquid-glass.js (Chromium; plain blur elsewhere). Values are the site's on purpose. */
.shell { position: sticky; top: var(--at-space-16); align-self: center; width: max-content; max-width: calc(100% - var(--at-space-32)); margin: var(--at-space-16) auto 0; padding: 0 var(--at-space-24); border-radius: var(--at-radius-pill); background: rgba(255, 255, 255, 0.34); color: var(--hub-text-primary); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 1px 0 0 0 rgba(84, 84, 86, 0.16), -1px 0 0 0 rgba(84, 84, 86, 0.16), 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(84, 84, 86, 0.16), inset 0 -1px 0 0 rgba(84, 84, 86, 0.16), inset 0 2px 8px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 8px 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.56), inset 0 -1px 0 0 rgba(255, 255, 255, 0.56); }
.shell .breadcrumb li { color: var(--hub-text-primary); }
.shell .breadcrumb li:not(:last-child)::after, .shell .breadcrumb a { color: var(--hub-text-secondary); }
.shell .breadcrumb a:hover { color: var(--hub-text-primary); }
.shell-btn:hover { background: color-mix(in srgb, var(--hub-text-primary) 8%, transparent); }
.shell-logo { background: var(--at-color-ink); }
.shell .breadcrumb ol { min-width: 0; }
.shell .breadcrumb li { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .shell { padding: 0 var(--at-space-16); } }

/* Header pill sits at the left (aligned with the page margin) and the sticky filter bar stops 16px below it when scrolling. */
.shell { align-self: center; margin: var(--at-space-16) auto 0; max-width: calc(100% - var(--at-space-32) * 2); }
.filter-bar { top: calc(var(--at-space-16) + var(--at-space-60) + var(--at-space-4) + var(--at-space-16)); }
@media (max-width: 640px) { .shell { max-width: calc(100% - var(--at-space-32)); } }

/* Header pill on page change, like attentive.framer.website: the pill itself is already there (no morph, no fade of the glass), and its contents (logo, then each breadcrumb item) fade in one after another, while the page content fades in as before. Off with reduced motion. */
@keyframes shell-item-in { from { opacity: 0; } to { opacity: 1; } }
.shell-logo, .shell .breadcrumb li, .shell-name { animation: shell-item-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.shell .breadcrumb li:nth-child(1) { animation-delay: 0.06s; }
.shell .breadcrumb li:nth-child(2) { animation-delay: 0.12s; }
.shell .breadcrumb li:nth-child(3) { animation-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) { .shell-logo, .shell .breadcrumb li, .shell-name { animation: none; } }

/* No blur or fade strip behind the Safari bottom bar for now (same as the status bar): only the glass pills and the home indicator. */
.proto-stage[data-viewport="Mobile"] .proto-safari::before { display: none; }

/* Solid strip behind the header pill, only while a sticky bar under it is actually stuck (design-system tabs only; `html.has-stuck` set by liquid-glass.js). It fades in and out lightly (0.2s) when the bar sticks or unsticks. Height = pill top gap + pill + gap below. Pages with the shell header only. */
body:has(> .shell)::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--at-space-16) + var(--at-space-60) + var(--at-space-4) + var(--at-space-16)); background: var(--hub-background); z-index: 15; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
html.has-stuck body:has(> .shell)::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body:has(> .shell)::before { transition: none; } }

/* The header pill and the strip behind it are always on top of everything else on the page (alerts, dialogs, sticky bars, font note), regardless of the design elements below. */
.shell { z-index: 100001; }
body:has(> .shell)::before { z-index: 100000; }

/* Safari bar follows the page (device-tone.js samples what sits behind it and sets data-bar-tone on the stage): text, icons and home indicator turn light on a dark page. The status bar is not touched. */
.proto-pill { transition: color var(--at-panel-transition) ease; }
.proto-pill-address img { transition: filter var(--at-panel-transition) ease; }
/* the Safari bar home indicator never animates (it flips light or dark instantly) */
.proto-stage[data-viewport="Mobile"] .proto-safari::after { transition: none; }
.proto-stage[data-bar-tone="dark"] :is(.proto-safari, .proto-safari-top), .proto-stage[data-bar-tone="dark"] .proto-safari-top .proto-pill-address { color: var(--at-color-white); }
.proto-stage[data-bar-tone="dark"] .proto-pill-address img, .proto-stage[data-bar-tone="dark"][data-viewport="Mobile"] .proto-safari::after { filter: invert(1); }
@media (prefers-reduced-motion: reduce) { .proto-pill, .proto-pill-address img, .proto-stage .proto-safari::after { transition: none; } }

/* Dark page behind the Safari bar: the glass pills take a dark tint (and softer white rim lights) instead of the white one. */
.proto-stage[data-bar-tone="dark"][data-viewport="Mobile"] .proto-safari .proto-pill, .proto-stage[data-bar-tone="dark"][data-viewport="Tablet"] .proto-safari-top .proto-pill { background: color-mix(in srgb, var(--at-color-black) 34%, transparent); box-shadow: 1px 0 0 0 rgba(84, 84, 86, 0.16), -1px 0 0 0 rgba(84, 84, 86, 0.16), 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 0 rgba(255, 255, 255, 0.16), inset 0 2px 8px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 8px 0 rgba(255, 255, 255, 0.08); }


/* Client head actions: Figma, FigJam, divider, Share */
.head-actions { margin-left: auto; align-self: flex-start; display: flex; align-items: center; gap: var(--at-space-8); }
.head-actions .share-btn { margin-left: 0; align-self: auto; }
.head-actions [hidden] { display: none; }
.head-btn { display: inline-flex; align-items: center; gap: var(--at-space-8); height: var(--at-space-32); padding: 0 var(--at-space-12); border: 1px solid var(--hub-border-subtle-01); border-radius: var(--at-radius-button); background: var(--hub-layer-01); color: var(--hub-text-primary); text-decoration: none; transition: background var(--hub-motion-fast) var(--hub-motion-productive), border-color var(--hub-motion-fast) var(--hub-motion-productive); }
.head-btn:hover { background: var(--hub-layer-hover-01); border-color: var(--hub-border-strong-01); }
.head-btn:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.head-actions-rule { width: 0; height: var(--at-space-32); border-right: 1px solid var(--hub-border-subtle-01); margin: 0 var(--at-space-4); }
.filter-toggle { display: none; }
.filter-toggle .icon { transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
@media (prefers-reduced-motion: reduce) { .filter-toggle .icon { transition: none; } }
.head-actions .head-btn { font: inherit; }
.head-btn[aria-disabled="true"] { color: var(--hub-text-tertiary); cursor: not-allowed; }
.share-icon { display: block; }
.share-btn.is-copied .share-icon { display: none; }
.is-share .head-btn, .is-share .head-actions-rule { display: none; }
@media (max-width: 640px) {
  .page-head-logo .head-actions { order: 4; flex: 1 1 100%; margin-left: 0; align-self: auto; }
  #figma-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #figma-btn { padding: 0 var(--at-space-8); }
}

/* Customization panel foot: Access Figma */
.attn-foot { padding: var(--at-space-16); border-top: 1px solid color-mix(in srgb, var(--at-color-white) 16%, transparent); }
.attn-figma { gap: var(--at-space-8); text-decoration: none; }
.attn-figma { border-color: color-mix(in srgb, var(--at-color-white) 24%, transparent); color: var(--at-color-white); }
.attn-figma:hover { background: color-mix(in srgb, var(--at-color-white) 12%, transparent); }

/* Figma row on a project card is a link: warm hover wash, the arrow nudges up and right, the value darkens */
a.row-btn { text-decoration: none; cursor: pointer; transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
a.row-btn:hover, a.row-btn:focus-visible { background: var(--hub-layer-hover-01); }
a.row-btn .row-value, a.row-btn .row-value + .icon { transition: color var(--hub-motion-fast) var(--hub-motion-productive), transform var(--hub-motion-fast) var(--hub-motion-productive); }
a.row-btn:hover .row-value, a.row-btn:focus-visible .row-value { color: var(--hub-text-primary); }
a.row-btn:hover .row-value + .icon, a.row-btn:focus-visible .row-value + .icon { color: var(--hub-text-primary); transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { a.row-btn, a.row-btn .row-value, a.row-btn .row-value + .icon { transition: none; } a.row-btn:hover .row-value + .icon { transform: none; } }

/* URL row copies on a click anywhere in the row, so it gets the same hover wash as the Figma link row */
button.row-btn[data-copy] { transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
button.row-btn[data-copy]:hover, button.row-btn[data-copy]:focus-visible { background: var(--hub-layer-hover-01); }
button.row-btn[data-copy] .row-value, button.row-btn[data-copy] .row-value + .icon { transition: color var(--hub-motion-fast) var(--hub-motion-productive); }
button.row-btn[data-copy]:hover .row-value, button.row-btn[data-copy]:hover .row-value + .icon, button.row-btn[data-copy]:focus-visible .row-value, button.row-btn[data-copy]:focus-visible .row-value + .icon { color: var(--hub-text-primary); }
@media (prefers-reduced-motion: reduce) { button.row-btn[data-copy], button.row-btn[data-copy] .row-value, button.row-btn[data-copy] .row-value + .icon { transition: none; } }
button.row-btn[data-copy] .row-value + .icon { color: var(--hub-text-primary); }
a.row-btn .row-value + .icon { color: var(--hub-text-primary); }

/* Home tile foot row ("Open <Client> Library"): the whole row is the link (the arrow button stretches over the row, not the tile) and has the same warm hover wash as the card rows */
.tile[data-id] .tile-foot { position: relative; border-radius: 0 0 var(--at-radius-lg) var(--at-radius-lg); transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.tile[data-id] .tile-foot:hover, .tile[data-id] .tile-foot:focus-within { background: var(--hub-layer-hover-01); }
@media (prefers-reduced-motion: reduce) { .tile[data-id] .tile-foot { transition: none; } }

/* Client accent: hover colour of the card outline, the arrow button and Share is the client's brand colour (`brand` in clients-data.js, set as --client-brand on the tile / page); Attentive ink when a client has none */
.tile:hover, .tile:has(.tile-actions:hover) { border-color: var(--client-brand, var(--at-color-ink)); }
.tile .btn-icon, .share-btn { transition: background var(--hub-motion-fast) var(--hub-motion-productive); }
.tile:hover .btn-icon, .tile .btn-icon:hover { background: var(--client-brand, var(--hub-button-primary-hover)); color: var(--client-brand-fg, var(--at-color-white)); }
.tile[data-id]:hover .btn-icon { background: var(--client-brand, var(--hub-button-primary)); color: var(--client-brand-fg, var(--at-color-white)); }
.tile[data-id] .tile-foot:hover .btn-icon, .tile[data-id] .btn-icon:hover { background: var(--client-brand, var(--hub-button-primary-hover)); color: var(--client-brand-fg, var(--at-color-white)); }
.share-btn:hover:not(:disabled) { background: var(--client-brand, var(--hub-button-primary-hover)); color: var(--client-brand-fg, var(--at-color-white)); }
.tile[data-id] { cursor: pointer; }
.tile[data-id] a, .tile[data-id] button { cursor: pointer; }

/* Text balance (see text-wrap.css) */
/* Inherited, so every text block in the hub (card text, tiles, dialogs, panels, tables, alerts) wraps pretty; titles and headings balance. */
body { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6, [class*="title"], [class*="heading"], .tile-name, .tag, .badge { text-wrap: balance; }

/* The footer (label + arrow) always sits at the bottom of its card, whatever the card's height. */
.tile > .tile-foot, .tile .tile-foot { margin-top: auto; }

/* iPad: with a white global header the Safari bar sits on a white strip (device-tone.js sets data-bar-bg) */
.proto-stage[data-viewport="Tablet"][data-bar-bg="white"] .proto-safari-top::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: calc(var(--safe-top) - var(--status-h) + 3px); box-sizing: border-box; border-top: 1px solid var(--at-color-white); background: var(--at-color-white); z-index: 0; }

/* Safari bar icons are the supplied 36px SVGs (assets from Downloads/apple), inline as .sf, coloured with currentColor */
.proto-pill .sf { flex: none; width: 36px; height: 36px; }

/* No seams between stacked layers: the white strip behind the iPad Safari bar overlaps the status bar above it and the sticky header below it by 1px, and each layer has a white 1px edge on its top (strip: border-top; sticky header: box-shadow from device-tone.js) */
.proto-stage:not([data-viewport="Desktop"]) .proto-status { box-shadow: 0 1px 0 0 var(--at-color-white); }

/* Safari bars (iPhone and iPad): supplied SVGs. The reader and reload icons keep their own size (20x19, 15x19) with the original spacing; back and more are 36px. */
.proto-safari .proto-pill-address, .proto-safari-top .proto-pill-address { gap: var(--at-space-12); padding: 0 14px; }
.proto-pill .sf-s { flex: none; }
.proto-pill .sf-reader { margin: 0 2px; }

/* iPad toolbar spacing from Figma "Toolbar - Top - Safari (iPad)" (46:1016): button group 132 wide, 36px icons 6px from the edge and 6px apart; address bar 388 wide with the reader icon at 14, the URL in a 296 box at 46 and the two actions at 320 and 354 (20px cells) */
.proto-safari-top .proto-pill-address { position: relative; gap: 0; padding: 0; }
.proto-safari-top .proto-pill-address .sf-reader { position: absolute; left: 14px; top: 13px; margin: 0; }
.proto-safari-top .proto-pill-address svg:nth-of-type(2) { position: absolute; left: 320px; top: 14px; }
.proto-safari-top .proto-pill-address svg:nth-of-type(3) { position: absolute; left: 357px; top: 13px; }
.proto-safari-top .proto-pill-address .proto-pill-url { position: absolute; left: 46px; top: 0; width: 296px; height: 44px; line-height: 44px; flex: none; }

/* Delight on open: the menu eases in (drops from 8px above, no bounce) and its options arrive one after another (60ms steps would feel slow, so 30ms). Exits stay the quick fade. Off with reduced motion. Same stagger for the mobile filters when they expand. */
@media (prefers-reduced-motion: no-preference) {
  :root { --at-ease: ease-in-out; }
  .dropdown-menu:not([hidden]) { transition: opacity var(--hub-motion-fast) var(--hub-motion-entrance-expressive), transform var(--at-button-transition) var(--at-ease), visibility 0s; }
  .dropdown-menu[hidden] { transform: translateY(calc(var(--at-space-8) * -1)) scale(calc(var(--hub-motion-scale) - 0.06)); }
  .dropdown-trigger .icon:not(.icon-sort) { transition: transform var(--at-button-transition) var(--at-ease); }
  .dropdown-menu:not([hidden]) [role=option] { animation: hub-rise var(--at-button-transition) var(--hub-motion-entrance-expressive) both; }
  .dropdown-menu:not([hidden]) [role=option]:nth-child(2) { animation-delay: 30ms; }
  .dropdown-menu:not([hidden]) [role=option]:nth-child(3) { animation-delay: 60ms; }
  .dropdown-menu:not([hidden]) [role=option]:nth-child(4) { animation-delay: 90ms; }
  .dropdown-menu:not([hidden]) [role=option]:nth-child(5) { animation-delay: 120ms; }
  .dropdown-menu:not([hidden]) [role=option]:nth-child(n+6) { animation-delay: 150ms; }
  @media (max-width: 640px) {
    .filter-bar.is-open > :not(.field-search):not(.filter-toggle) { animation: hub-rise var(--at-button-transition) var(--hub-motion-entrance-expressive) both; }
    .filter-bar.is-open > .dropdown:nth-of-type(2) { animation-delay: 30ms; }
    .filter-bar.is-open > .dropdown:nth-of-type(3) { animation-delay: 60ms; }
    .filter-bar.is-open > .pw { animation-delay: 90ms; }
  }
}

/* Tablet and below: the head actions drop below the logo and title instead of squeezing beside them; button labels never wrap. */
.head-btn, .share-btn { white-space: nowrap; }
@media (max-width: 960px) {
  .page-head-logo { flex-wrap: wrap; }
  .page-head-logo .head-actions { order: 4; flex: 1 1 100%; margin-left: 0; align-self: auto; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .page-head-logo .head-actions { justify-content: flex-end; }
}

/* Home title is centred, in line with the centred header pill */
.page-head > h1 { text-align: center; }

/* Inverted filter bar (dark on light, like the Customization panel): Home and client page. Menus that open from it stay light. */
.filter-bar { background: var(--hub-background-inverse); color: var(--hub-text-inverse); }
.filter-bar .field, .filter-bar .field:hover, .filter-bar .field-search:hover { background: transparent; }
.filter-bar .field { border-color: color-mix(in srgb, var(--hub-text-inverse) 24%, transparent); }
.filter-bar .field-search { border-color: transparent; }
.filter-bar .dropdown:hover, .filter-bar .dropdown:has(.dropdown-trigger[aria-expanded="true"]) { background: color-mix(in srgb, var(--hub-text-inverse) 12%, transparent); }
.filter-bar .dropdown .field:active, .filter-bar .filter-reset:active { background: color-mix(in srgb, var(--hub-text-inverse) 20%, transparent); }
.filter-bar .field .icon, .filter-bar .field-search .icon, .filter-bar .btn-tertiary, .filter-bar .filter-reset { color: var(--hub-text-inverse); }
.filter-bar .field-input, .filter-bar .dropdown-trigger { color: var(--hub-text-inverse); }
.filter-bar .field-input::placeholder, .filter-bar .dropdown:not(.is-active) .dropdown-value { color: color-mix(in srgb, var(--hub-text-inverse) 64%, transparent); }
.filter-bar .dropdown.is-active { border-color: var(--hub-text-inverse); }
.filter-bar .pw-label { color: color-mix(in srgb, var(--hub-text-inverse) 64%, transparent); }
.filter-bar .pw-value { color: var(--hub-text-inverse); }
.filter-bar .btn-tertiary:hover { background: color-mix(in srgb, var(--hub-text-inverse) 12%, transparent); }
.filter-bar .btn-tertiary:active { background: color-mix(in srgb, var(--hub-text-inverse) 20%, transparent); }
.filter-bar .filter-sep { border-right-color: color-mix(in srgb, var(--hub-text-inverse) 24%, transparent); }

/* Native device mode (device-mode.js): on a real phone or tablet the design fills the screen, with no bezel, status bar or Safari chrome. */
.proto-stage.is-native { display: block; background: var(--hub-layer-01); --safe-top: 0px; --safe-bottom: 0px; }
.proto-stage.is-native .proto-device { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
.proto-stage.is-native .proto-screen { position: absolute; inset: 0; width: auto; height: auto; padding: 0; border-radius: 0; }
.proto-stage.is-native :is(.proto-glass, .proto-status, .proto-bezel, .proto-safari, .proto-safari-top, .proto-home) { display: none; }
.proto-stage.is-native .proto-frame { width: 100%; height: 100%; border: 0; }
/* Viewport options that do not fit the device */
.switcher button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Type icons in the Types options: the same icons as the card badges. */
.dropdown-menu { padding: var(--at-space-4); }
.dropdown-menu [role=option] { border-radius: var(--at-radius-sm); }
.dropdown-menu [role=option]:has(.opt-dot) { display: flex; align-items: center; gap: var(--at-space-8); }
.dropdown-menu .opt-dot { flex: none; width: var(--at-space-8); height: var(--at-space-8); border-radius: var(--at-radius-pill); background: var(--dot, var(--at-color-muted)); }
.dropdown-menu [role=option]:has(.opt-icon) { display: flex; align-items: center; gap: var(--at-space-8); }
.filter-bar .dropdown-menu .opt-icon { flex: none; width: var(--at-space-16); height: var(--at-space-16); color: currentColor; }

/* Type icons in the Types options take the badge colour of their type. */
.filter-bar .dropdown-menu [role=option][data-type="Prototype"] .opt-icon { color: var(--at-color-raspberry); }
.filter-bar .dropdown-menu [role=option][data-type="Media"] .opt-icon { color: color-mix(in srgb, var(--at-color-blue-teal) 45%, var(--at-color-ink)); }
.filter-bar .dropdown-menu [role=option][data-type="Flow"] .opt-icon { color: var(--at-color-ink); }

/* Reset button in the inverted filter bar: same look as the other fields (it was a white block with a white icon). */
.filter-bar .filter-reset { background: transparent; border-color: color-mix(in srgb, var(--hub-text-inverse) 24%, transparent); }
.filter-bar .filter-reset:hover { background: color-mix(in srgb, var(--hub-text-inverse) 12%, transparent); }

/* Thumbnail templates (Figma Thumbnail, node 48:860): 318 x 180 frame, warm gradient, 16px inset; the grey block is the screen placeholder. */
.tile-thumb-desktop .tile-thumb-img, .tile-thumb-mobile .tile-thumb-img { aspect-ratio: 318 / 180; display: flex; justify-content: center; padding: var(--at-space-16) var(--at-space-16) 0; background: linear-gradient(to bottom, var(--at-color-warm-wash), var(--hub-background)); overflow: hidden; }
.thumb-screen { background: color-mix(in srgb, var(--at-color-black) 20%, var(--at-color-off-white)); }
.tile-thumb-desktop .thumb-screen { flex: 1; border-radius: var(--at-radius-md) var(--at-radius-md) 0 0; }
.tile-thumb-mobile .thumb-screen { flex: none; align-self: flex-start; width: calc(var(--at-space-16) * 10); aspect-ratio: 160 / 347.636; border-radius: var(--at-radius-lg); }
.tile-thumb-full .tile-thumb-img, .tile-thumb .tile-thumb-img { aspect-ratio: 318 / 180; }

/* Live preview inside the thumbnail screen */
.thumb-screen { position: relative; overflow: hidden; }
.thumb-frame { position: absolute; top: 0; left: 0; border: 0; background: var(--at-color-white); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity var(--at-button-transition); }
.thumb-frame.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .thumb-frame { transition: none; } }

/* Full-bleed thumbnail (everything that is not a prototype): the preview fills the whole frame, no gradient or inset. */
.tile-thumb-full .tile-thumb-img { position: relative; display: block; }
.tile-thumb-full .thumb-screen { position: absolute; inset: 0; }

/* Table thumbnail: the desktop template with the page running off the right edge (shown at 64%, cropped by the frame). */
.tile-thumb-table .tile-thumb-img { padding: var(--at-space-24) 0 0 var(--at-space-24); justify-content: flex-start; }
.tile-thumb-table .thumb-screen { border-radius: 0; }
.tile-thumb-table .thumb-screen, .tile-thumb-table .thumb-frame { background: transparent; }
.tile-thumb-mobile .thumb-screen.has-device { background: transparent; border-radius: 0; }
.tile-thumb-mobile .thumb-screen.has-device .thumb-frame { background: transparent; }

/* Status bar (user 2026-10-27): a gradient of the colour of the section behind it, 100% at the top to 0% at the bottom; device-tone.js sets --status-bg. Replaces the plain white bar and its seam shadow. */
@property --status-bg { syntax: '<color>'; inherits: true; initial-value: white; }
/* No animation on the status bar colour or between gradient and solid: the logic runs first (device-tone.js), then the colour is applied at once. */
.proto-stage:not([data-viewport="Desktop"]) .proto-status, .proto-stage.is-scrolled:not([data-viewport="Desktop"]) .proto-status { background-color: transparent; box-shadow: none; transition: none; }
.proto-stage[data-viewport="Mobile"] .proto-status { background-image: url(assets/devices/iphone-status.svg?v=2), linear-gradient(to bottom, var(--status-bg), transparent); }
.proto-stage[data-viewport="Tablet"] .proto-status { background-image: url(assets/devices/ipad-status.svg), linear-gradient(to bottom, var(--status-bg), transparent); }
/* Under a sticky or fixed header the status bar is solid in the header's colour, no gradient (device-tone.js sets data-status-solid). */
.proto-stage[data-status-solid]:not([data-viewport="Desktop"]) .proto-status { background-color: var(--status-bg); }
.proto-stage[data-status-solid][data-viewport="Mobile"] .proto-status { background-image: url(assets/devices/iphone-status.svg?v=2); }
.proto-stage[data-status-solid][data-viewport="Tablet"] .proto-status { background-image: url(assets/devices/ipad-status.svg); }

/* In Progress review queue: darker background, no frame at 48%, at the bottom of the page (user 2026-10-29) */
.tile-group-progress { --progress-bg: color-mix(in srgb, var(--at-color-line) 48%, transparent); position: relative; padding: var(--at-space-48) 0; background: var(--progress-bg); box-shadow: 0 0 0 100vmax var(--progress-bg); clip-path: inset(0 -100vmax); }
.tile-group + .tile-group-progress, .tiles + .tile-group-progress { margin-top: var(--at-space-48); }
/* Whole section reads as disabled at 48%; the card under the pointer or focus comes back to full (user 2026-10-29). Opacity sits on each part, not the section, so a hovered card can leave it. The entrance animation ends on the dimmed value so nothing flashes. */
.tile-group-progress { --progress-dim: 0.48; }
@keyframes hub-rise-dim { from { opacity: 0; transform: translateY(var(--hub-spacing-03)); } to { opacity: var(--progress-dim); transform: none; } }
.tile-group-progress .tile-group-title { opacity: var(--progress-dim); }
.tile-group-progress .tile { opacity: var(--progress-dim); animation-name: hub-rise-dim; animation-fill-mode: backwards; transition: border-color var(--at-button-transition), opacity var(--at-button-transition); }
.tile-group-progress .tile:hover, .tile-group-progress .tile:focus-within, .tile-group-progress .tile:has(.tile-actions:hover), .tile-group-progress .tile:has(.dropdown-menu:not([hidden])) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tile-group-progress .tile { transition: none; } }
@media (max-width: 640px) { .tile-group-progress { padding: var(--at-space-32) 0; } }

/* Header pill never overflows the screen: the breadcrumb shrinks and long items are cut with an ellipsis */
.shell .breadcrumb { min-width: 0; }
.shell .breadcrumb li { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.shell .breadcrumb li:last-child { flex-shrink: 1; }
.shell .breadcrumb li { overflow: visible; }
.shell .breadcrumb li > a, .shell .breadcrumb li > [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Concept type: lightbulb icon, amber tint (status-paused tokens) */
.tile[data-type="Concept"] .tile-meta .tag { background: var(--at-color-status-paused-bg); color: var(--at-color-status-paused-fg); }
.link-btn[data-type="Concept"] .type-icon { color: var(--at-color-status-paused-fg); }
.filter-bar .dropdown-menu [role=option][data-type="Concept"] .opt-icon { color: var(--at-color-status-paused-fg); }

/* Empty state template (Figma Empty states, node 51:95 in the Attentive Library file; user 2026-10-28): brandmark 64px, 24px gap (user 2026-10-28, was 16px in Figma), 16/22 medium label in text/tertiary, 8px padding, centred horizontally and vertically in the empty area. Used for every empty state in the hub. */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-space-24); padding: var(--at-space-24); box-sizing: border-box; width: 100%; min-height: 100%; text-align: center; }
.empty-state-img { display: block; flex: none; width: var(--at-space-64); height: var(--at-space-64); }
.empty-state-label { margin: 0; font-size: var(--at-type-h6-size); line-height: var(--at-type-h6-line); font-weight: var(--at-type-h6-weight); letter-spacing: var(--at-type-h6-tracking); color: var(--hub-text-tertiary); }
.filter-empty, .ds-empty-area { display: flex; align-items: center; justify-content: center; }
.filter-empty[hidden], .ds-empty-area[hidden] { display: none; }

/* Client page tabs (user 2026-10-28): Overview and Projects, Projects is the default. Same tab look as the design-system tabs. */
.client-tabs { display: flex; gap: var(--at-space-32); padding: 0 var(--at-space-32); margin-bottom: var(--at-space-32); border-bottom: 1px solid var(--hub-border-subtle-01); }
.client-tabs [role=tab] { height: var(--at-space-48); padding: 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--hub-text-secondary); font: inherit; font-size: var(--hub-type-body-compact-01-size); cursor: pointer; transition: color var(--hub-motion-fast) var(--hub-motion-productive); }
.client-tabs [role=tab]:hover { color: var(--hub-text-primary); }
.client-tabs [role=tab][aria-selected="true"] { color: var(--hub-text-primary); font-weight: var(--hub-type-heading-compact-01-weight); border-bottom-color: var(--at-color-ink); }
.client-tabs [role=tab]:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: -2px; }
#panel-projects[hidden], #panel-overview[hidden] { display: none; }

/* Overview: client and project summary for newcomers */
.overview { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--at-space-40); align-items: start; padding-top: 0; }
.overview[hidden] { display: none; }
.ov-nav { position: sticky; top: calc(var(--at-space-16) + var(--at-space-60) + var(--at-space-4) + var(--at-space-16) + var(--at-space-16)); display: flex; flex-direction: column; min-width: 0; }
.ov-nav a { display: block; padding: var(--at-space-4) 0; color: var(--hub-text-secondary); text-decoration: none; transition: color var(--hub-motion-fast) var(--hub-motion-productive); }
.ov-nav a:hover { color: var(--hub-text-primary); }
.ov-nav a[aria-current] { color: var(--hub-text-primary); font-weight: var(--hub-type-heading-compact-01-weight); }
.ov-nav a:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.ov-body { display: flex; flex-direction: column; gap: var(--at-space-60); min-width: 0; max-width: 800px; }
.ov-card { scroll-margin-top: calc(var(--at-space-16) + var(--at-space-60) + var(--at-space-4) + var(--at-space-16) + var(--at-space-16)); }
.ov-card { min-width: 0; }
.ov-title { margin: 0 0 var(--at-space-16); font-size: var(--at-type-h5-size); line-height: var(--at-type-h5-line); font-weight: var(--at-type-h5-weight); color: var(--hub-text-primary); }
.ov-text { margin: 0; color: var(--hub-text-secondary); max-width: 72ch; }
.ov-list { margin: 0; padding: 0; list-style: none; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: var(--at-space-16); padding: var(--at-space-12) 0; border-bottom: 1px solid color-mix(in srgb, var(--hub-border-subtle-01) 50%, var(--at-color-white)); }
.ov-row:first-child { padding-top: 0; }
.ov-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ov-row dt { margin: 0; flex: none; color: var(--hub-text-secondary); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }
.ov-row dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; color: var(--hub-text-primary); font-size: var(--hub-type-body-compact-01-size); line-height: var(--hub-type-body-compact-01-line-height); }
.ov-link { display: inline-flex; align-items: center; gap: var(--at-space-4); color: var(--hub-text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hub-border-subtle-01); }
.ov-link:hover { text-decoration-color: currentColor; }
.ov-link:focus-visible, .ov-mod-btn:focus-visible, .ov-act:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.ov-count { color: var(--hub-text-secondary); white-space: nowrap; }
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-space-16); margin-bottom: var(--at-space-24); }
.ov-stat { display: flex; flex-direction: column; gap: var(--at-space-4); }
.ov-stat-n { font-size: var(--at-type-h4-size); line-height: var(--at-type-h4-line); font-weight: var(--at-type-h4-weight); color: var(--hub-text-primary); }
.ov-stat-l { color: var(--hub-text-secondary); }
.ov-mod-btn, .ov-act { display: flex; align-items: center; gap: var(--at-space-16); width: 100%; padding: 0; background: none; border: 0; font: inherit; color: var(--hub-text-primary); text-align: left; text-decoration: none; cursor: pointer; }
.ov-mod-btn .icon, .ov-act > .icon { flex: none; color: var(--hub-text-secondary); transition: transform var(--hub-motion-fast) var(--hub-motion-productive); }
.ov-mod-btn:hover .icon, .ov-act:hover > .icon { transform: translateX(var(--at-space-4)); }
.ov-mod-name { flex: 1 1 auto; min-width: 0; font-weight: var(--hub-type-heading-compact-01-weight); }
.ov-mod-types { display: flex; flex-wrap: wrap; gap: var(--at-space-8); justify-content: flex-end; }
.ov-act-title { font-weight: var(--hub-type-heading-compact-01-weight); }
.ov-act-sub { display: inline-flex; align-items: center; gap: var(--at-space-6); margin-left: auto; color: var(--hub-text-secondary); }
.ov-act-sub .icon { width: var(--at-space-16); height: var(--at-space-16); }
.overview .empty-state { padding: var(--at-space-32) var(--at-space-8); }
@media (max-width: 960px) { .overview { grid-template-columns: minmax(0, 1fr); gap: var(--at-space-24); } .ov-nav { position: static; flex-direction: row; flex-wrap: wrap; column-gap: var(--at-space-24); } .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .client-tabs { padding: 0 var(--at-space-16); gap: var(--at-space-24); }
  .ov-body { gap: var(--at-space-40); }
  .ov-mod-btn { flex-wrap: wrap; row-gap: var(--at-space-8); }
  .ov-mod-types { order: 3; flex: 1 1 100%; justify-content: flex-start; }
  .ov-act { flex-wrap: wrap; }
  .ov-act-sub { flex: 1 1 100%; margin-left: 0; }
}

/* Home tile with no cards: the empty state is centred in the space between the head and the footer */
.tile:has(.tile-actions > .empty-state) .tile-actions { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.tile:has(.tile-actions > .empty-state) .tile-foot { margin-top: auto; }

/* Customization button: label tooltip on hover/focus, same as the flow tools */
.attn-tool .attn-fab { position: relative; right: auto; bottom: auto; }
.attn-tool .attn-fab::after { content: attr(aria-label); position: absolute; left: calc(100% + var(--at-space-8)); top: 50%; transform: translateY(-50%); padding: var(--at-space-4) var(--at-space-8); border-radius: var(--at-radius-sm); background: var(--at-color-black); color: var(--at-color-white); font-size: var(--at-type-caption-size); line-height: var(--at-type-caption-line); font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--at-panel-transition) ease; }
.attn-tool .attn-fab:hover::after, .attn-tool .attn-fab:focus-visible::after { opacity: 1; }
@media (hover: none) { .attn-tool .attn-fab:hover::after { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .attn-tool .attn-fab::after { transition: none; } }

/* Customization panel foot: Add comment and Access Figma share the ghost button look, stacked */
.attn-foot { display: flex; flex-direction: column; gap: var(--at-space-8); }
.attn-addc { gap: var(--at-space-8); border-color: color-mix(in srgb, var(--at-color-white) 24%, transparent); color: var(--at-color-white); }
.attn-addc:hover { background: color-mix(in srgb, var(--at-color-white) 12%, transparent); }
.attn-foot .attn-addc[aria-pressed="true"] { background: var(--fb-card-active, color-mix(in srgb, var(--at-color-white) 24%, transparent)); }

/* Customization panel foot: one row, Add comment fills it, Access Figma is an icon-only square */
.attn-foot { flex-direction: row; align-items: center; }
.attn-foot .fb-btn.attn-addc { flex: 1 1 auto; width: auto; min-width: 0; white-space: nowrap; }
.attn-foot .fb-btn.attn-figma { flex: none; width: var(--at-space-40); padding: 0; }
.attn-foot .attn-figma span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Customization panel foot buttons: a quiet hairline instead of a full white border (beats the feedback.css ghost button) */
.attn-foot .fb-btn.attn-addc, .attn-foot .fb-btn.attn-figma { border-color: color-mix(in srgb, var(--at-color-white) 24%, transparent); }
.attn-foot .fb-btn.attn-addc:hover, .attn-foot .fb-btn.attn-figma:hover { border-color: color-mix(in srgb, var(--at-color-white) 40%, transparent); }

/* Bezel seam (user 2026-10-29): a 2px dark ring over the screen's edge, so no white line shows between the prototype and the bezel. The screen size is unchanged, only its outer 2px are covered. */
.proto-stage:not([data-viewport="Desktop"]) .proto-bezel::before { --bezel-seam: 2px; content: ""; position: absolute; left: var(--scr-x); top: var(--scr-y); width: var(--scr-w); height: var(--scr-h); box-sizing: border-box; border-radius: var(--scr-r); box-shadow: inset 0 0 0 var(--bezel-seam) var(--at-color-black); }

/* Card hover (user 2026-10-29): client and project cards lift 2px and get a soft shadow on hover, on top of the accent outline. Uses `translate` so it never fights the hub-rise entrance transform. */
.tile { transition: border-color var(--at-button-transition), box-shadow var(--at-button-transition), translate var(--at-button-transition); }
.tile:hover, .tile:has(.tile-actions:hover) { translate: 0 calc(var(--at-space-4) / -2); box-shadow: 0 var(--at-space-8) var(--at-space-24) color-mix(in srgb, var(--at-color-black) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .tile { transition: border-color var(--at-button-transition); } .tile:hover, .tile:has(.tile-actions:hover) { translate: none; } }

/* Collapsible section headings (client page sections, design-system sections) sit on a dashed divider, dash 2 and gap 4, same as the In Progress frame (user 2026-10-29). */
.tile-group-title, .ds-section-title { padding-bottom: var(--at-space-16); background: repeating-linear-gradient(to right, var(--hub-border-strong-01) 0 2px, transparent 2px 6px) left bottom / 100% 1px no-repeat; }

/* Customization panel: header and footer stay fixed, only the options scroll (user 2026-10-29). */
.attn-panel { display: flex; flex-direction: column; overflow: hidden; }
.attn-panel > .attn-head, .attn-panel > .attn-foot { flex: none; }
.attn-panel > .attn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Hub header tone: when the page behind the glass pill is dark (liquid-glass.js sets data-tone="dark"), text, logo and tint flip to light. */
.shell { transition: background-color var(--at-panel-transition) ease, color var(--at-panel-transition) ease; }
.shell[data-tone="dark"] { background: rgba(0, 0, 0, 0.34); color: var(--at-color-white); }
.shell[data-tone="dark"] .breadcrumb li { color: var(--at-color-white); }
.shell[data-tone="dark"] .breadcrumb li:not(:last-child)::after, .shell[data-tone="dark"] .breadcrumb a { color: color-mix(in srgb, var(--at-color-white) 72%, transparent); }
.shell[data-tone="dark"] .breadcrumb a:hover { color: var(--at-color-white); }
.shell[data-tone="dark"] .shell-logo { background: var(--at-color-white); }
.shell[data-tone="dark"] .shell-btn:hover { background: color-mix(in srgb, var(--at-color-white) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }