/* deck.css — DRIFTDECK member deck panel (/deck/panel/), the hub's "Your deck" block and the portal-independent sign-in form. NEW FILE (no repo original). Loaded by default.hbs after screen.css: the .btn / .info-block / .warn-block / .card-status / .pf-kind / .sys-label / .blk-label primitives come from screen.css and are only sized (never recoloured) here. Every colour is a tokens.css variable, so html.light adapts by itself — with the one documented exception at the foot of this file. CLASS CONTRACT — this file is aligned to the vocabulary assets/js/deck-panel.js ACTUALLY emits (ROUND2-FINDINGS find:theme-ghost MAJOR / find:panel-js MINOR: the CSS and the JS had been written to two different vocabularies). The JS header is the contract; the JS was not renamed. The full emitted set, in the order the JS builds it: article.deck-tile[data-slug] -- + .deck-tile--stub when the slug is unlisted span.pf-kind -- "// " h3 -- display name, NO class p.deck-tile-tagline div.deck-chips -- listed tiles only (a stub has no chips) span.deck-chip.st-live|st-beta|st-staged|st-prototype|st-proposed span.deck-chip.deck-chip--surface span.deck-chip.deck-chip--vis -- owner-only modules div.deck-tile-actions a.btn[data-action=open] -- route / hosted / external surfaces span.deck-local > span.muted + small.deck-surface-note -- local surfaces button.btn.ghost[data-action=details|up|down] button.btn.ghost.deck-remove[data-action=remove] -- a stub carries ONLY this one div.deck-tile-details[hidden] -- listed tiles only p -- description, NO class p.deck-codename-status section.deck-dialog-group > h4 ul.deck-dialog-rows > li.deck-dialog-row span.deck-dialog-name · span.pf-kind · span.deck-chip.st-* · button.btn[data-action=add] p.deck-dialog-empty -- when a group has nothing to add #deck-status.is-ok|is-warn|is-error (the element also carries class="deck-status") #deck-dialog-status.is-ok|is-warn|is-error (class="deck-dialog-status") -- the dialog's own live region: a modal makes everything outside it inert, so #deck-status alone never reaches assistive technology while the add dialog is open. deck-panel.hbs renders it; the JS creates it only if the template ever stops doing so. a.deck-signin -- the JS "session ended" link inside #deck-status button.deck-retry + small.deck-hint -- the JS "signed in, but the deck service could not confirm your session" state, also inside #deck-status. A 401 no longer means "you are signed out": the JS asks the site's member API first and only says "session ended" when the site agrees. When the site says the reader IS a member, that state is shown instead — a Retry button and one line of hint, never a sign-in prompt. #deck-account-status.is-ok|is-warn|is-error (class="deck-dialog-status") -- the account dialog's live region, same inert-modal reason as #deck-dialog-status. #deck-account-body > .deck-account-row (span.deck-account-label + span.deck-account-value) > label.deck-account-field (span.deck-account-label + input.deck-account-input) > .deck-account-actions (button.btn[data-account=save|signout] + a.btn.ghost.deck-account-portal, rendered ONLY when the site's embedded account widget is detected as loaded) #deck-grid[aria-busy="true"], #deck-dialog-list[aria-busy="true"] and #deck-account-body[aria-busy="true"] -- set while a call is in flight (the action controls are disabled at the same time) NAME COLLISION, on purpose: the JS emits an ANCHOR a.deck-signin, while ROUND2-SPEC R2-A names the new sign-in FORM form.deck-signin. Both rule sets below are element-qualified so neither can reach the other. Do not drop the element qualifier. Mobile-first: one column by default; the tile grid widens by itself (auto-fill). */ /* ---------- panel shell ---------- */ .deck-panel { margin: 1.5rem 0 2.5rem; } /* [hidden] must beat any display the classes below set (#deck-empty, .deck-tile-details) */ .deck-panel [hidden], form.deck-signin [hidden] { display: none !important; } .deck-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; margin: 0 0 1rem; } .deck-toolbar h2 { margin: 0; font-size: 1.25rem; } .deck-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; width: 100%; } @media (min-width: 640px) { .deck-toolbar-actions { width: auto; margin-left: auto; } } /* button/anchor .btn parity (find:theme-ghost MINOR). screen.css has no button reset and .btn sets neither line-height, font-weight nor cursor, so