/* ===================================================================== PlayFocus (HELP-77) — the page: the shell, the board, the list, the FilterPanel and the record's tabs. Laid out here; the components are the design system's own (design-system/components/bundle.css, HELP-111 story 6), and every colour, radius and shadow is one of its tokens (armando-tokens.css, story 4), so every piece follows the seven palettes and Light and Dark. The pieces the design system has no component for (HELP-111 stories 11 to 13) are laid out here from tokens only, each said so where it is, to be proposed on the design system's artifact: the board's phases, columns, human-gate columns and folded strips, the list's column and group headers, the Detail sections, the remark, the comment box, the rows of the Files, Links, Mockups, History and Cost tabs, the mockup viewer, the menus' box beside the rail, WorkingStatus's tooltip and the Tabs' accordion on a phone. Screen sizes, as the sheet's: the rail collapsed (72 px) from 600 to 1439 px, expanded (240 px) by default from 1440 px; below 600 px it stays collapsed until the PlayFocus mobile requirement. ===================================================================== */ /* --------------------------------------------------------------------- Type (HELP-111 story 5): the design system's three families Outfit for titles, JetBrains Mono for record IDs, Inter for the rest. All three faces are here, in the one stylesheet Armando keeps, so Armando has its type whichever of the shared sheets it stops loading (tokens.css declares Inter for the other pages; the same file twice is fetched once). Served by the app, never fetched from Google at runtime (JHE, 22 Oct 2026); each is one variable file, latin subset. ------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Inter.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/Outfit.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/JetBrainsMono.woff2') format('woff2'); } /* * The design system's own type tokens (design-system/tokens.css), by * their own names, so Armando's rules read --type-title rather than a * size of their own. One difference, on purpose: --font-sans is Inter, * as HELP-111 asks, where the design system has since moved its body * face to IBM Plex Sans, which the app does not serve yet. On .pf, so * these win over a sheet that writes the same names on :root. */ .pf { --font-sans: Inter, system-ui, sans-serif; --font-display: Outfit, Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --type-display: 700 24px/32px var(--font-display); --type-display-tracking: -0.02em; --type-title-lg: 700 20px/28px var(--font-display); --type-title-lg-tracking: -0.01em; --type-title: 700 18px/26px var(--font-display); --type-title-tracking: -0.01em; --type-body-lg: 500 16px/24px var(--font-sans); --type-body: 500 14px/20px var(--font-sans); --type-label: 700 14px/20px var(--font-sans); --type-label-tracking: 0.06em; --type-mobile-caption: 600 12px/16px var(--font-sans); --type-mobile-label: 700 12px/16px var(--font-sans); --type-mobile-label-tracking: 0.06em; --type-id: 700 14px/20px var(--font-mono); } /* ===================================================================== The page's own pieces, moved here from playfocus-sheet.css when bundle.css took its place (HELP-111 story 6), in the design system's tokens (story 4). Each is the page's until the story named over it redraws it as the design system's component; where it shares a class with bundle.css it is written to win over it, so it keeps working until then. ===================================================================== */ /* The tones the page-own pieces below take from data-tone, one accent per meaning, from the design system's tokens. A person is human-ring, never a status colour; an agent with no tone neutral-500. They go with those pieces (HELP-111 stories 7, 11 and 13). */ .pf [data-tone="draft"], .pf [data-tone="todo"] { --tone: var(--category-draft); } .pf [data-tone="prepare"] { --tone: var(--category-prepare); } .pf [data-tone="deliver"] { --tone: var(--category-deliver); } .pf [data-tone="release"] { --tone: var(--category-release); } .pf [data-tone="done"], .pf [data-tone="resolved"] { --tone: var(--category-done); } .pf [data-tone="rejected"], .pf [data-tone="open"] { --tone: var(--category-rejected); } .pf [data-tone="inprogress"], .pf [data-tone="worked"] { --tone: var(--state-working); } .pf [data-tone="waiting"] { --tone: var(--state-waiting); } .pf [data-tone="approval"] { --tone: var(--brand-gold); } .pf [data-tone="human"] { --tone: var(--agent-human-gate); } .pf [data-tone="pending"] { --tone: var(--state-pending); } .pf [data-tone="agent"] { --tone: var(--neutral-500); } .pf [data-tone="person"] { --tone: var(--human-ring); } /* The page's label style (FormGroupLabel's look, HELP-111 story 9), its icon and its focus ring. */ .pf .pf-label { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600); } .pf .pf-ico { display: block; flex: none; } .pf :focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand-gold); } /* WorkingStatus is bundle.css's pf-work (HELP-111 story 13), its accent set per state from tokens. Its README's tooltip (Avatar, name, 'since …') has no rules in bundle.css: drawn here from tokens, shown on hover. To propose. */ .pf-work { position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; } .pf-work > span:not(.pf-work__tip) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pf-work__tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: var(--z-tooltip); display: none; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--neutral-300); border-radius: var(--radius-md); background: var(--neutral-0); box-shadow: var(--elevation-3); color: var(--neutral-900); font-weight: 500; white-space: nowrap; } .pf-work:hover > .pf-work__tip { display: inline-flex; } /* Checkbox (HELP-111 story 8) is bundle.css's card. Its lg (option tiles) zooms the md card by scale-lg, as Button's lg does, since bundle.css draws only sm and md. */ .pf-check--lg { zoom: var(--scale-lg); } /* The count beside a filter value is the proposed Checkbox count (armando-proposed.css, HELP-111 story 14). */ /* MenuButton, ActionsMenu and MultiSelect are bundle.css's (HELP-111 story 12). Only their stacking here: above the page's sticky pieces, from the design system's z-index tokens; and a count beside an option, right-aligned. */ .pf .pf-menu, .pf .pf-ms__list { z-index: var(--z-dropdown); } .pf-ms__list { max-height: 320px; overflow-y: auto; } .pf-ms__count { margin-left: auto; color: var(--neutral-600); font-variant-numeric: tabular-nums; } .pf-ms__field .pf-muted { padding: 0 4px; color: var(--neutral-500); } .pf-ms__field > .pf-svg { flex: none; color: var(--neutral-600); } .pf-ms__chip button { color: inherit; } .pf-opt > span:last-child { min-width: 0; } /* Tabs are bundle.css's (HELP-111 story 13), as a real tablist: the selected tab is aria-selected, where bundle.css marks aria-current, so its underline is given to aria-selected here; a tab is a link, without its underline. */ .pf-tab { text-decoration: none; } .pf-tab[aria-selected="true"] { border-bottom-color: var(--brand-gradient-from); background: transparent; color: var(--neutral-900); font-weight: 600; } /* PageHeader and Breadcrumb are bundle.css's (HELP-111 story 12); the trail wraps rather than overflow, and the root's Logo slot stays empty until the rename requirement draws the mark. */ .pf-crumbs { flex-wrap: wrap; min-width: 0; } /* StatusButton, AttributeCluster, RecordPanel and Cell are bundle.css's (HELP-111 story 13). A Cell's title holds the row's words (the whole row is the link), its main line as the README's title link would be. */ .pf-cell__title > .pf-cell__main { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--neutral-900); } .pf-cell__title > .pf-cell__name { max-width: 100%; } .pf-cell > .pf-pill, .pf-cell > .pf-work { min-width: 0; } /* The file, link, history and cost rows of a record have no row component yet: their person and date pieces. To propose. */ .pf-cell--person > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pf-cell--date { color: var(--neutral-600); white-space: nowrap; } /* SuggestedAnswer, AnswerBubble, QuestionBubble, ArchivedQuestion and ChatThreadItem are bundle.css's (HELP-111 story 11), in Chat and on the Comments tab alike. Here only what the page adds to them: long text wraps, the RefLink keeps its own width, the bubble being answered is ringed, and the named pill's state takes its tone. */ .pf-question__text, .pf-answer__text, .pf-archived__msg p, .pf-suggest__t { white-space: pre-wrap; overflow-wrap: anywhere; } .pf-question-ref { display: flex; min-width: 0; } .pf-question__head { outline: none; } .pf-question__head:focus-visible { border-radius: var(--radius-sm); box-shadow: var(--focus-ring); } .pf-question[data-replying="true"] .pf-question__box { border-color: var(--brand-red); box-shadow: 0 0 0 1px var(--brand-red); } /* QuestionBubble's named pill is drawn waiting by bundle.css; answered (working) and done take their own state's tokens. */ .pf-named--state[data-state="working"] { border-color: color-mix(in srgb, var(--state-working) 45%, var(--neutral-0)); background: color-mix(in srgb, var(--state-working) 8%, var(--neutral-0)); } .pf-named--state[data-state="done"] { border-color: color-mix(in srgb, var(--state-done) 45%, var(--neutral-0)); background: color-mix(in srgb, var(--state-done) 8%, var(--neutral-0)); } .pf-named__state { color: var(--state-waiting-text); } .pf-named--state[data-state="working"] .pf-named__state { color: var(--state-working-text); } .pf-named--state[data-state="done"] .pf-named__state { color: var(--state-done-text); } /* A member's answer on the Comments tab is grey, an administrator's the burgundy bubble (HELP-81). */ .pf-answer[data-who="member"] .pf-answer__text { background: var(--neutral-100); color: var(--neutral-900); } .pf-answer .pf-accepted { align-self: flex-end; } /* What was suggested stays readable beside a resolved question's answer, dimmed (HELP-81, story 10). */ .pf-suggest[data-resolved="true"] { background: var(--neutral-50); } .pf-suggest[data-resolved="true"] .pf-suggest__k, .pf-suggest[data-resolved="true"] .pf-suggest__t { color: var(--neutral-700); } /* ChatThreadItem as a link, in a list. */ a.pf-thread { color: var(--neutral-900); text-decoration: none; box-sizing: border-box; } .pf-chat-list > li:last-child > .pf-thread { border-bottom: 0; } /* On the Comments tab an open question says it waits, at the start of its actions. */ .pf-question-waiting { margin-right: auto; align-self: center; font-weight: 700; color: var(--state-waiting-text); } /* RequirementCard and StoryCard are bundle.css's (HELP-111 story 13). The whole card is one link: the gold focus border and the focus-ring, and the 'Open detail' overlay on focus as on hover. In a board column, a grid or a hover card it takes the room it is given, not the README's 264 px. */ .pf-card { box-sizing: border-box; color: var(--neutral-900); text-decoration: none; } a.pf-card:focus-visible { border-color: var(--brand-gold); box-shadow: var(--focus-ring); } a.pf-card:focus-visible .pf-card__open { display: flex; } .pf-card__agents { display: inline-flex; gap: 6px; } /* The mono ID keeps its width; a long StatusPill gives way and ellipsises. */ .pf-card__head .pf-id { flex: none; } .pf-card__head .pf-pill { min-width: 0; } .pf-card__head .pf-pill > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pf-card__meta dd .pf-avatar { vertical-align: middle; } .pf-col .pf-card, .pf-storygrid .pf-card, .pf-pstate-cards .pf-card, .pf-chat-previewbox > .pf-card, .pf-cy-cardbtn .pf-card { width: 100%; } /* NavFooter's palette menu: each palette's swatch is ThemeSwitcher's (pf-swatch) in that palette's own paper, white, accent and ink (the design system's theme-* tokens), small enough for a menu row. */ .pf-palette__opt .pf-swatch { flex: none; width: 64px; height: 24px; } .pf-theme-swatch i:nth-child(1) { background: var(--sw-paper); } .pf-theme-swatch i:nth-child(3) { background: var(--sw-accent); } .pf-theme-swatch i:nth-child(4) { background: var(--sw-ink); } .pf-theme-swatch[data-theme="flaming-red"] { --sw-paper: var(--theme-red-paper); --sw-accent: var(--theme-red-accent); --sw-ink: var(--theme-red-ink); } .pf-theme-swatch[data-theme="royal-gold"] { --sw-paper: var(--theme-gold-paper); --sw-accent: var(--theme-gold-accent); --sw-ink: var(--theme-gold-ink); } .pf-theme-swatch[data-theme="monochrome"] { --sw-paper: var(--theme-mono-paper); --sw-accent: var(--theme-mono-accent); --sw-ink: var(--theme-mono-ink); } .pf-theme-swatch[data-theme="lavendel"] { --sw-paper: var(--theme-lavender-paper); --sw-accent: var(--theme-lavender-accent); --sw-ink: var(--theme-lavender-ink); } .pf-theme-swatch[data-theme="orange"] { --sw-paper: var(--theme-orange-paper); --sw-accent: var(--theme-orange-accent); --sw-ink: var(--theme-orange-ink); } .pf-theme-swatch[data-theme="ocean"] { --sw-paper: var(--theme-ocean-paper); --sw-accent: var(--theme-ocean-accent); --sw-ink: var(--theme-ocean-ink); } .pf-theme-swatch[data-theme="albiceleste"] { --sw-paper: var(--theme-albiceleste-paper); --sw-accent: var(--theme-albiceleste-accent); --sw-ink: var(--theme-albiceleste-ink); } /* FormFieldLegenda is a

: bundle.css sets no margin on it, so the browser's paragraph margin goes. */ .pf-legenda { margin: 0; } /* A RadioCard that cannot be chosen (a part already built) reads as Button's disabled state does. */ .pf-radio[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* Toast, InlineAlert and EmptyState (HELP-111 story 10) are bundle.css's. An area's message stands off the screen's edges. */ #pf-screen > .pf-empty, #pf-screen > .pf-alert, .pf-chat > .pf-empty, .pf-chat > .pf-alert { margin: 20px 24px; } .pf-tabpanel .pf-empty, .pf-sp-panel .pf-empty { margin: 8px 0 16px; } /* The load-status line is the proposed LoadStatus (armando-proposed.css, HELP-111 story 15). */ /* * NavFooter's and ArmandoNav's menus beside the rail (HELP-111 story 12): * radius-2xl and elevation-popover, as NavFooter's README has the palette * menu; their rows are bundle.css's menu rows (pf-menu__item). bundle.css * draws no box for them, so it is placed here, from tokens; the selected * row is theme-selected-bg with a brand-red border. */ .pf-popover { position: fixed; z-index: var(--z-popover); display: flex; flex-direction: column; gap: 2px; width: 280px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 8px; box-sizing: border-box; border: 1px solid var(--neutral-300); border-radius: var(--radius-2xl); background: var(--neutral-0); box-shadow: var(--elevation-popover); color: var(--neutral-900); } .pf-popover[hidden] { display: none; } .pf-railmenu .pf-menu__item { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; text-decoration: none; } .pf-railmenu .pf-menu__item[aria-checked="true"] { border-color: var(--brand-red); background: var(--theme-selected-bg); font-weight: 600; } .pf-railmenu__who { display: flex; flex-direction: column; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--neutral-100); } .pf-railmenu__who span { color: var(--neutral-600); overflow-wrap: anywhere; } /* Browser notifications in the profile menu (moved from FenixHelper's bell, 23 Oct 2026): its line wraps at the menu's width. */ .pf-railmenu .pf-menu__note { max-width: 280px; } /* The invitation's Turn on and Not now, under the Toast's words. */ .pf-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pf-palette { width: 340px; } .pf-palette__words, .pf-app-words { display: flex; flex-direction: column; min-width: 0; } .pf-palette__words small, .pf-app-words small { font-size: 14px; color: var(--neutral-600); font-weight: 400; } /* The Logo (HELP-111, the rename to Armando), its README's colours: on the rail's white tile the A is brand-burgundy (bundle.css paints the tile's text brand-red after it), the wordmark 'armando' is Outfit 700 at 22 px and always lowercase; About Armando's mark takes the row's own colour. */ .pf-rail__tile .pf-logo__mark { color: var(--brand-burgundy); } .pf-rail__appname { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; } .pf-foot__row > .pf-logo__mark { flex: none; width: 22px; height: 22px; color: inherit; } .pf-app-tile .pf-logo__mark { width: 22px; height: 22px; } .pf-app-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--neutral-0); font-weight: 800; } .pf-app-tile[data-app="fenix"] { background: linear-gradient(135deg, var(--brand-burgundy), var(--brand-red)); } .pf-app-tile[data-app="playfocus"] { border: 1px solid var(--neutral-200); background: var(--neutral-0); color: var(--brand-burgundy); } /* --------------------------------------------------------------------- The atoms as bundle.css draws them (HELP-111 story 6), and the few things their READMEs ask of the consumer that bundle.css leaves to it ------------------------------------------------------------------ */ /* Button sizes zoom the whole button by scale-sm / scale-lg (its README), never its height alone. */ .pf-btn--sm { zoom: var(--scale-sm); } .pf-btn--lg { zoom: var(--scale-lg); } /* StatusPill's other two sizes (its README: xs 22 px in dense grids, lg 34 px in a hero); sm 24 and md 28 are bundle.css's. */ .pf-pill--xs { height: 22px; padding: 0 7px 0 6px; gap: 4px; } .pf-pill--lg { height: 34px; padding: 0 14px 0 11px; } /* StateBadge: its glyph is white on the disc (its README); the markup draws it in currentColor. Its sm size is 12 px. */ .pf-state__dot { color: var(--neutral-0); } .pf-state__dot--sm { width: 12px; height: 12px; } /* Badge: a zero on a card counter shows at half opacity (its README); in navigation it is hidden. */ .pf-badge[data-zero="true"] { opacity: .5; } .pf-badge[hidden] { display: none; } /* The design system's boxes set their own display, so a hidden one is hidden here (InlineAlert, Toast, EmptyState, Dialog's alert band). */ .pf-alert[hidden], .pf-toast[hidden], .pf-empty[hidden], .pf-dialog__alert[hidden], .pf-legenda[hidden] { display: none; } .pf-body { margin: 0; } /* #app, because tokens.css lays out every other page's #app as a padded column. */ #app.pf-app { display: grid; gap: 0; padding: 0; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; background: var(--neutral-50); } #app.pf-app[hidden] { display: none; } /* --------------------------------------------------------------------- ArmandoNav and NavFooter are bundle.css's (HELP-111 story 12). Here only what the page's frame asks: the rail is the window's height and stays as the page scrolls (not the README preview's 860 px), and its focus ring shows on the red. ------------------------------------------------------------------ */ #app > .pf-rail { position: sticky; top: 0; z-index: 5; height: 100vh; min-height: 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; } .pf-rail__app { width: 100%; text-align: left; } .pf-rail__app:hover { background: var(--on-rail-hover); } .pf-rail__collapse:disabled { opacity: .5; cursor: default; } .pf-rail :focus-visible { box-shadow: 0 0 0 3px var(--neutral-0); } .pf-rail__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pf-foot__row .pf-rail__label { flex: 1 1 auto; } .pf-rail:not(.pf-rail--collapsed) .pf-foot__profile .pf-rail__label { display: flex; flex-direction: column; } .pf-foot__profile .pf-rail__label > * { overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------------------- The page beside the rail ------------------------------------------------------------------ */ .pf-main { display: flex; flex-direction: column; min-width: 0; } .pf-screen { flex: 1 1 auto; min-width: 0; padding: 20px 24px 40px; outline: none; } .pf-screen[data-screen="record"] { padding: 0 0 40px; } /* The ViewRibbon is a band across the page (its README); what is under it keeps the screen's sides. */ .pf-screen[data-screen="requirements"], .pf-screen[data-screen="stories"] { padding: 0 0 40px; } .pf-screen[data-screen="requirements"] > :not(.pf-ribbon):not(.pf-loadstatus), .pf-screen[data-screen="stories"] > :not(.pf-ribbon):not(.pf-loadstatus) { margin-left: 24px; margin-right: 24px; } /* ViewRibbon (bundle.css); LoadStatus under it brings its own side padding (space-6). */ .pf-ribbon { margin-bottom: 12px; } /* --------------------------------------------------------------------- The board: phases side by side, a column per state (rev 3, B1) ------------------------------------------------------------------ */ .pf-board { display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; padding-bottom: 12px; } .pf-phase { flex: none; display: flex; flex-direction: column; gap: 8px; } .pf-phase-head { margin: 0; } .pf-phase-head button { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--neutral-700); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .pf-phase-head button[aria-disabled="true"] { cursor: default; } .pf-phase-cols { display: flex; align-items: flex-start; gap: 12px; } .pf-phase-cols[hidden] { display: none; } .pf-col { flex: none; display: flex; flex-direction: column; gap: 8px; width: 264px; padding: 10px; box-sizing: border-box; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-100); } .pf-col[data-gate="true"] { border: 1.5px dashed var(--agent-human-gate); background: color-mix(in srgb, var(--agent-human-gate) 4%, var(--neutral-50)); } .pf-col-head { display: flex; align-items: center; gap: 8px; } .pf-col-head h3 { margin: 0; display: inline-flex; min-width: 0; } .pf-col-info { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); background: var(--neutral-0); color: var(--neutral-700); cursor: pointer; } .pf-col-gate { margin: 0; color: var(--agent-human-gate); font-weight: 700; } .pf-col-note { margin: 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--neutral-0); color: var(--neutral-700); } .pf-col-cards { display: flex; flex-direction: column; gap: 10px; min-height: 40px; } /* A folded column, '{State} · 0', standing on its side. */ .pf-strip { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 220px; box-sizing: border-box; border: 1.5px dashed var(--border-placeholder); border-radius: var(--radius-lg); color: var(--neutral-600); font-weight: 700; text-decoration: none; } .pf-strip span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .pf-strip[data-unused="true"] { color: var(--neutral-500); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--neutral-100) 8px 9px); } a.pf-strip:hover { border-color: var(--brand-gold); color: var(--brand-gold-ink); } /* The card on the board: dragged by an administrator. */ .pf-board .pf-card { cursor: pointer; touch-action: pan-x pan-y; } .pf-card[data-flash="true"] { box-shadow: inset 0 0 0 2px var(--brand-gold), var(--focus-ring); transition: box-shadow .2s ease; } .pf-card[data-dragging="true"] { opacity: .4; } .pf-card-ghost { position: fixed; z-index: var(--z-hovercard); pointer-events: none; box-shadow: var(--elevation-4); transform: rotate(2deg); } /* Dragging: where the card may go opens with the drop-zone border and the gold selection under the pointer; the rest dims and takes nothing. */ .pf-board[data-dragging="true"] [data-drop="no"] { opacity: .45; cursor: not-allowed; } .pf-board[data-dragging="true"] .pf-col[data-drop="ok"] { border: 1.5px dashed var(--neutral-400); } .pf-board[data-dragging="true"] .pf-strip[data-drop="ok"] { width: 264px; min-height: 120px; } .pf-board[data-dragging="true"] .pf-strip[data-drop="ok"] span { writing-mode: horizontal-tb; transform: none; } .pf-board[data-dragging="true"] [data-over="true"] { border: 2px solid var(--brand-gold); box-shadow: var(--focus-ring); background: var(--brand-gold-tint); } body:has(.pf-card-ghost) { cursor: grabbing; user-select: none; } /* --------------------------------------------------------------------- The board grouped by epic, release or owner (HELP-72): bundle.css's Board, GroupHeader and RequirementCard states, untouched. Here only the frame around it: the board box fills the window under the ribbon and the load line and is the one thing that scrolls (Steven's answer (a), 21 Oct 2026), so its horizontal scrollbar stays at the window's bottom; in a very short window it keeps about 360 px and the page scrolls instead. The Status board keeps the page scroll above. ------------------------------------------------------------------ */ .pf-main:has(.pf-board--lanes) { height: 100vh; } .pf-screen[data-screen="requirements"]:has(.pf-board--lanes) { display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; } #pf-req-body:has(> .pf-board--lanes) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 360px; } .pf-board.pf-board--lanes { display: block; flex: 1 1 auto; min-height: 360px; padding-bottom: 0; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); } .pf-board--lanes:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; box-shadow: var(--focus-ring); } .pf-board--lanes .pf-bcell > .pf-card { width: 100%; } .pf-board--lanes .pf-bfold:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; } /* --------------------------------------------------------------------- The list (rev 3, l1) ------------------------------------------------------------------ */ .pf-list { overflow-x: auto; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); } /* RequirementRow (bundle.css's grid): one link; the list scrolls sideways under 1120 px (its README). */ .pf-list .pf-rowgrid { min-width: 1100px; } a.pf-rowgrid { color: var(--neutral-900); text-decoration: none; } a.pf-rowgrid:hover { background: var(--neutral-50); } a.pf-rowgrid:focus-visible { position: relative; z-index: 1; } /* The column header and the group header have no component: the header in the label's look, the group a fold. To propose. */ .pf-rowhead { min-height: 40px; background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); font-weight: 700; color: var(--neutral-600); } .pf-grouphead { display: block; min-width: 1100px; border-bottom: 1px solid var(--neutral-100); background: var(--neutral-50); } .pf-grouphead button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--neutral-900); font: inherit; font-weight: 700; cursor: pointer; } /* --------------------------------------------------------------------- Dialogs: the README's Dialog, and the page's other modal surfaces ------------------------------------------------------------------ */ /* Dialog (HELP-111 story 9): a native

is the scrim (pf-dlg), so the browser moves focus in, keeps it there, closes on Esc and hides it when closed; inside it bundle.css's .pf-dialog box, untouched. Below 600 px bundle.css makes the box full screen; the scrim lets it. */ dialog.pf-dlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; box-sizing: border-box; border: 0; background: transparent; color: var(--neutral-900); } dialog.pf-dlg[open] { display: flex; align-items: center; justify-content: center; } dialog.pf-dlg::backdrop { background: color-mix(in srgb, var(--neutral-900) 40%, transparent); } @media (max-width: 600px) { dialog.pf-dlg { padding: 0; } dialog.pf-dlg[open] { align-items: stretch; } } /* The one modal surface that is no component of the design system (a Dialog is a form or a record's task): the full-screen mockup viewer. To propose on the artifact. */ .pf-modal { padding: 0; border: 1px solid var(--neutral-300); border-radius: var(--radius-2xl); background: var(--neutral-0); color: var(--neutral-900); box-shadow: var(--elevation-5); } .pf-modal::backdrop { background: color-mix(in srgb, var(--neutral-900) 35%, transparent); } .pf-modal h2 { margin: 0; font: var(--type-title); letter-spacing: var(--type-title-tracking); } .pf-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--neutral-200); } .pf-dialog-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--neutral-200); } /* The FilterPanel (bundle.css's pf-filters, HELP-111 story 12) on its scrim: a native dialog at the right edge, the panel the window's height with its body scrolling; the full width on a phone. */ dialog.pf-fpanel { position: fixed; inset: 0 0 0 auto; width: auto; height: 100%; max-width: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--neutral-900); } dialog.pf-fpanel[open] { display: flex; } dialog.pf-fpanel::backdrop { background: color-mix(in srgb, var(--neutral-900) 35%, transparent); } dialog.pf-fpanel > .pf-filters { height: 100%; max-width: 100vw; box-sizing: border-box; } .pf-filters__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .pf-filters__body > .pf-check { width: 100%; } .pf-filters__body fieldset > .pf-check { width: 100%; } /* A mockup or a stored copy always opens full screen, the whole browser window with no box or margin (Steven, 20 Oct 2026, as on the Helper Backlog): it is checked at its real size. Not the Fullscreen API, so Escape still closes it. The frame is drawn on the browser's own light canvas whatever the theme: a mockup is its own page, and one with no background of its own would be black text on a dark frame. */ .pf-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; box-sizing: border-box; flex-direction: column; } .pf-viewer[open] { display: flex; } .pf-viewer .pf-dialog-head { flex: none; padding: 10px 16px; } .pf-viewer-acts { display: flex; align-items: center; gap: 8px; } .pf-viewer-unsent { flex: none; margin: 8px 16px 0; } .pf-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; padding: 12px 16px 16px; } .pf-viewer iframe { flex: 1 1 0; min-width: 0; width: 100%; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: Canvas; color-scheme: light; } /* A feedback round's notes (lib/mockup-feedback.js), beside the frame, numbered as the pins in it are. A person's feedback, so the app's accent and neutrals: purple is the colour of AI assistance. */ .pf-mf-panel { width: 340px; flex: none; box-sizing: border-box; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-50); } .pf-mf-panel[hidden] { display: none; } .pf-mf-panel > * { flex: none; margin: 0; } .pf-mf-title { font: var(--type-title); letter-spacing: var(--type-title-tracking); } .pf-mf-notes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pf-mf-note { display: flex; flex-direction: column; gap: 4px; } .pf-mf-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .pf-mf-num { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border: 0; border-radius: var(--radius-pill); cursor: pointer; background: var(--brand-red); color: var(--neutral-0); font: inherit; font-size: 14px; font-weight: 700; line-height: 24px; } .pf-mf-what { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .pf-mf-panel textarea.pf-input { font-size: 14px; } .pf-mf-panel .pf-form-acts { margin-top: 0; } @media (max-width: 760px) { .pf-viewer-body { flex-direction: column; padding: 8px; } .pf-mf-panel { width: 100%; max-height: 45%; } .pf-viewer iframe { width: 100%; min-height: 0; } } /* Manage epics (HELP-102): the Dialog's manage variant and its ManageList are bundle.css's, untouched. Only the one line the list area says while it reads, or when there is no epic yet, is laid out here: Button's spinner beside the words (Pino), in the secondary text colour. */ .pf-epics__line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 0; color: var(--neutral-600); } /* An epic's product (HELP-86 story 9, here since HELP-88): the add row's Product beside the name, and each row's product in words after its name. */ .pf-epics__product { flex: 0 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pf-epics__of { flex: none; font-weight: 500; color: var(--neutral-600); } /* --------------------------------------------------------------------- The record: header, tabs, panels (rev 3 part 2) ------------------------------------------------------------------ */ .pf-record-box { margin: 24px; } /* The title row and the tabs, one block (HELP-85). */ .pf-record-top { background: var(--neutral-0); } .pf-record-top > .pf-tabs { padding: 0 24px; background: var(--neutral-0); border-bottom: 1px solid var(--neutral-200); } /* RecordHeader (bundle.css) above the Tabs: the tab rail carries the line under it. */ .pf-record { border-bottom: 0; } .pf-record__title:focus { outline: none; } .pf-record__title { overflow-wrap: anywhere; } .pf-record__body > .pf-recpanel { flex: 1 1 auto; min-width: 0; } .pf-record__summary { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-tabpanel { padding: 20px 24px; outline: none; } .pf-tab-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } /* Forms on the record: the fields are bundle.css's FormField (HELP-111 story 9); a choice of one (Kind, For, Part, Owner) is the proposed single-choice MultiSelect (armando-proposed.css, story 16). */ .pf-form { display: flex; flex-direction: column; gap: 14px; } .pf-form-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } /* Detail sections (rev 3, r1): keys in the sheet's label style, gold ink. */ .pf-detail { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 980px; padding: 20px 24px; box-sizing: border-box; border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); background: var(--neutral-0); } .pf-detail > .pf-btn { position: absolute; top: 14px; right: 16px; } .pf-detail-section { display: flex; flex-direction: column; gap: 4px; } .pf-detail-key { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-gold-ink); } .pf-detail-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 22px; } /* Stories (rev 3, r2). */ .pf-stories { display: flex; flex-direction: column; gap: 16px; } .pf-stories-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pf-stories-bar > .pf-btn { margin-left: auto; } .pf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pf-story-form { max-width: 720px; padding: 16px; border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); background: var(--neutral-0); } .pf-storygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .pf-card[data-flash="true"] { border-color: var(--brand-gold); box-shadow: var(--focus-ring); transition: box-shadow .2s ease; } .pf-question__text.pf-message-text { font-weight: 500; } .pf-question__box .pf-answer { margin-top: 4px; } /* Comments (rev 3, r3). */ .pf-comments { display: flex; flex-direction: column; gap: 14px; max-width: 900px; } /* Show and Hide resolved above the threads (HELP-119, frames D1, D2): 10 px apart, under the Tabs. */ .pf-cfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pf-cfilter .pf-btn--menu > .pf-svg:first-child { color: var(--neutral-600); } /* A comment thread: pf-cthread, so it never meets bundle.css's ChatThreadItem (pf-thread), which Chat's threads are (HELP-111 story 11). */ .pf-cthread { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .pf-remark { padding: 10px 14px; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); max-width: 760px; } .pf-remark-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* GitHub's mark (HELP-43): the merge icon in an Avatar's place, neutral, since GitHub is neither a person nor an agent. */ .pf-system-mark { color: var(--neutral-600); } .pf-remark-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 21px; } .pf-hint { flex-basis: 100%; text-align: right; } .pf-reply { display: flex; flex-direction: column; gap: 6px; width: 100%; } .pf-compose { display: flex; flex-direction: column; gap: 8px; max-width: 760px; padding: 14px 16px; border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); background: var(--neutral-0); } .pf-compose-label { font-weight: 700; } .pf-compose .pf-form-acts { justify-content: flex-end; } .pf-chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .pf-chosen li { display: flex; align-items: center; gap: 8px; } .pf-filechips { display: flex; flex-wrap: wrap; gap: 6px; } .pf-filechips:empty { display: none; } .pf-filechip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); background: var(--neutral-50); color: var(--neutral-900); font: inherit; cursor: pointer; } /* Files, links (rev 3, r4). */ .pf-files, .pf-links, .pf-mockups, .pf-history, .pf-cost { display: flex; flex-direction: column; gap: 10px; max-width: 1000px; } .pf-filelist, .pf-linklist, .pf-costlist { border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-filelist:empty, .pf-linklist:empty { display: none; } .pf-filerow, .pf-linkrow, .pf-costrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 48px; padding: 8px 14px; box-sizing: border-box; border-bottom: 1px solid var(--neutral-100); } .pf-filerow:last-child, .pf-linkrow:last-child, .pf-costrow:last-child { border-bottom: 0; } .pf-files > .pf-filerow { border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: var(--neutral-0); } .pf-filename { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--neutral-900); font: inherit; cursor: pointer; text-align: left; } .pf-filename b { text-decoration: underline; text-decoration-color: var(--neutral-300); } .pf-filetag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--neutral-100); font-size: 14px; font-weight: 700; color: var(--neutral-700); } .pf-file-on { flex-basis: 100%; } .pf-filerow > .pf-btn--icon { margin-left: auto; } .pf-link-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 auto; min-width: 0; } .pf-link-a { color: var(--brand-burgundy); font-weight: 600; overflow-wrap: anywhere; } .pf-link-by { flex-basis: 100%; } .pf-link-acts { display: flex; gap: 6px; } /* The link form is a Dialog's body (HELP-111 story 9): FormFields stacked 14 px apart, as FormGroup stacks them. */ .pf-link-form { display: flex; flex-direction: column; gap: 14px; } /* Mockups, history, cost (rev 3, r4). */ .pf-mockgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .pf-mockcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); color: var(--neutral-900); font: inherit; text-align: left; cursor: pointer; } .pf-mockcard:hover { box-shadow: inset 0 0 0 2px var(--brand-gold); } .pf-mockthumb { display: block; height: 72px; background: repeating-linear-gradient(135deg, var(--neutral-50) 0 10px, var(--neutral-100) 10px 20px); } .pf-mockwords { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; } .pf-mockwords .pf-muted { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; } .pf-histlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-histline { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; border-bottom: 1px solid var(--neutral-100); } .pf-histline:last-child { border-bottom: 0; } .pf-hist-time { flex: none; width: 48px; font-variant-numeric: tabular-nums; } .pf-hist-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .pf-hist-id code { font-family: var(--font-mono); } .pf-cost-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; } .pf-cost-tile { margin: 0; padding: 12px 14px; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-cost-tile dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; } .pf-cost-tile dd.pf-muted { font-size: 14px; font-weight: 500; } .pf-costrow .pf-cell--person { flex: 1 1 auto; } .pf-cost-amount { font-weight: 700; font-variant-numeric: tabular-nums; } .pf-costrow--total { background: var(--neutral-50); font-weight: 700; } /* --------------------------------------------------------------------- Chat (HELP-81): Steven's IMG_4774.png and IMG_4775.png, Pino's rev 2 ------------------------------------------------------------------ */ /* The page: the load line, then the threads column beside the conversation, the composer at the bottom. */ .pf-screen[data-screen="chat"] { padding: 0; } .pf-chat { display: flex; flex-direction: column; height: calc(100vh - 53px); min-height: 480px; } .pf-chat-line { margin: 0; padding: 8px 24px; border-bottom: 1px solid var(--neutral-100); background: var(--neutral-0); } .pf-chat-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; } .pf-chat-threads { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px; overflow-y: auto; border-right: 1px solid var(--neutral-200); background: var(--neutral-0); } .pf-chat-seg { align-self: flex-start; } .pf-chat-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pf-chat-none { padding: 10px 8px; color: var(--neutral-600); } /* In Dark ChatThreadItem's count goes a quarter towards the dark paper, to keep its white number at 4.5:1. */ :root[data-mode="dark"] .pf-count-red { background: color-mix(in srgb, var(--brand-red) 75%, var(--neutral-0)); } .pf-chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--neutral-50); } .pf-chat-allchats { display: none; align-items: center; gap: 6px; padding: 10px 24px 0; color: var(--brand-burgundy); font-weight: 700; text-decoration: none; } .pf-chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0); } .pf-chat-head-names { display: flex; flex-direction: column; min-width: 0; margin-right: auto; } .pf-chat-role { font-size: 14px; color: var(--neutral-600); } .pf-chat-head h2 { margin: 0; font: var(--type-title); letter-spacing: var(--type-title-tracking); } .pf-chat-openpill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--feedback-new-bg); color: var(--feedback-new); font-size: 14px; font-weight: 800; } .pf-chat-notice:empty { display: none; } .pf-chat-notice { display: flex; align-items: center; gap: 8px; margin: 14px 24px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--category-done) 40%, var(--neutral-0)); border-radius: var(--radius-md); background: var(--feedback-success-bg); color: var(--feedback-success); font-weight: 700; } .pf-chat-notice[data-kind="error"] { border-color: color-mix(in srgb, var(--category-rejected) 30%, var(--neutral-0)); background: var(--feedback-danger-bg); color: var(--feedback-danger); } .pf-chat-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 22px; min-height: 0; padding: 16px 24px 24px; overflow-y: auto; outline: none; } /* QuestionBubble in a thread: the line saying what an answer does sits at the start of its actions. */ .pf-question { width: 100%; } .pf-chatq-hint { margin-right: auto; align-self: center; font-size: 14px; color: var(--neutral-600); } .pf-chat-chip { max-width: 100%; } /* A RefLink's ID never wraps: the title is what gives way (RefLink README: the title ellipsised). */ .pf-ref .pf-id { flex: none; white-space: nowrap; } .pf-chat-chipdot { flex: none; color: var(--neutral-500); } .pf-chat-chipnum { flex: none; } /* The composer: answers only (Steven's (a)). */ .pf-composer { display: flex; flex-direction: column; gap: 6px; padding: 12px 24px 14px; border-top: 1px solid var(--neutral-200); background: var(--neutral-0); } .pf-composer-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; max-width: 100%; padding: 3px 6px 3px 10px; border-radius: var(--radius-pill); background: var(--feedback-new-bg); color: var(--feedback-new); font-size: 14px; font-weight: 800; } .pf-composer-chip > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pf-composer-chip button { display: inline-flex; padding: 4px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; } .pf-composer-row { display: flex; align-items: center; gap: 12px; } .pf-composer-row textarea { flex: 1 1 auto; min-height: 56px; } .pf-composer-row textarea:disabled { background: var(--neutral-50); cursor: not-allowed; } .pf-composer-send { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--brand-gradient-from), var(--brand-gradient-to)); color: var(--neutral-0); cursor: pointer; } .pf-composer-send:disabled { opacity: .45; cursor: not-allowed; } .pf-composer-line { margin: 0; font-size: 14px; color: var(--neutral-600); } /* The archive: each day under its DayDivider, its ArchivedQuestions below. */ .pf-chatday { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .pf-chatday-cards { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .pf-chatres { max-width: 880px; } .pf-chatres-text { margin: 0; } .pf-accepted { margin: 0; font-size: 14px; font-weight: 700; color: var(--feedback-success); } .pf-chat-olderrow { display: flex; justify-content: center; } /* The reference preview: the record's own RequirementCard or StoryCard as a hover card (elevation-4, z-hovercard), hoverable and dismissable (WCAG 1.4.13); a plain line while it is read or when the read failed. */ .pf-chat-previewbox { position: fixed; z-index: var(--z-hovercard); box-sizing: border-box; } .pf-chat-previewbox > .pf-card { box-shadow: var(--elevation-4); } .pf-chat-previewbox > p { margin: 0; padding: 8px 12px; border: 1px solid var(--neutral-300); border-radius: var(--radius-md); background: var(--neutral-0); box-shadow: var(--elevation-4); } .pf-chat-previewfail { color: var(--feedback-danger); font-weight: 700; } .pf-cthread[data-flash="true"] { border-radius: var(--radius-xl); box-shadow: 0 0 0 2px var(--brand-gold); } /* Below 1024 px, one column: the threads, or one conversation with '← All chats' (R5). */ @media (max-width: 1023px) { .pf-chat-cols { grid-template-columns: minmax(0, 1fr); } .pf-chat[data-pane="thread"] .pf-chat-threads { display: none; } .pf-chat[data-pane="list"] .pf-chat-pane { display: none; } .pf-chat[data-pane="list"] .pf-chat-threads { border-right: 0; } .pf-chat-allchats { display: inline-flex; } } /* ===================================================================== Stories (HELP-79): the list, its filters, the full story panel, and a requirement's files, links and mockups grouped by story. ===================================================================== */ /* The stories list: StoryRow (bundle.css) with the columns the stories have today, Story · Title · Agent · Status · Comments · Updated (no issue reports yet). */ .pf-slist .pf-rowgrid--story { grid-template-columns: 130px minmax(240px, 1fr) 170px 130px 70px 120px; min-width: 900px; } .pf-slist .pf-grouphead { min-width: 900px; } .pf-srow[data-archived="true"] .pf-cell__main, .pf-srow[data-archived="true"] .pf-cell__id { color: var(--neutral-600); font-weight: 500; } .pf-cell[data-cell="title"] { gap: 8px; } .pf-chip-archived { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px dashed var(--border-placeholder); border-radius: var(--radius-pill); background: var(--neutral-50); color: var(--neutral-700); font-size: 14px; font-weight: 600; line-height: 1; } .pf-sgrouphead .pf-grouphead-cell { display: flex; align-items: center; gap: 10px; min-height: 42px; padding-right: 16px; } .pf-sgroup-toggle .pf-id { font-size: 14px; } .pf-sgroup-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--neutral-900); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pf-sgroup-title:hover { color: var(--brand-red); } .pf-sgroup-count { flex: none; font-size: 14px; } .pf-sgroup-pill { margin-left: auto; flex: none; } /* Below 1024 px each row stacks: code, title, then status · agent · comments · updated. */ @media (max-width: 1023px) { .pf-slist { overflow-x: visible; } .pf-slist .pf-rowhead { display: none; } .pf-slist .pf-rowgrid--story, .pf-slist .pf-grouphead { min-width: 0; } .pf-slist .pf-rowgrid--story { grid-template-columns: auto auto auto 1fr; grid-template-areas: "code code code code" "title title title title" "status agent count date"; gap: 2px 12px; padding: 10px 16px; } .pf-slist .pf-cell { min-height: 0; } .pf-slist [data-cell="code"] { grid-area: code; } .pf-slist [data-cell="title"] { grid-area: title; } .pf-slist [data-cell="status"] { grid-area: status; } .pf-slist [data-cell="agent"] { grid-area: agent; } .pf-slist [data-cell="count"] { grid-area: count; } .pf-slist [data-cell="date"] { grid-area: date; } .pf-slist .pf-cell__main { white-space: normal; } .pf-sgrouphead .pf-grouphead-cell { flex-wrap: wrap; } } /* The story panel (HELP-111 story 9): bundle.css's SidePanel --wide, fixed at the right over the page, not modal; bundle.css gives it the full width below 600 px. Its head wraps rather than overflowing. */ .pf-sp-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-popover); } .pf-sp-side[hidden] { display: none; } .pf-sp-side .pf-side__head { flex-wrap: wrap; } .pf-sp-side .pf-side__title { outline: none; } .pf-sp-walk { display: inline-flex; align-items: center; gap: 4px; } .pf-sp-tabs { padding: 0 24px; overflow-x: auto; } .pf-sp-side .pf-sp-panel { padding: 16px 24px 24px; } .pf-sp-only { padding: 24px; } .pf-sp-req { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--brand-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pf-sp-req .pf-id { margin-right: 6px; color: inherit; } .pf-sp-req > span + span { font-weight: 500; } .pf-sp-panel { flex: 1 0 auto; padding: 16px 20px 32px; } .pf-sp-attr { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pf-sp-attr .pf-muted { font-size: 14px; } .pf-sp-ownercell { position: relative; } /* The attribute clips long values; the Owner picker's list hangs out of its cell. */ .pf-sp .pf-attrs dd:has(> .pf-sp-ownercell) { overflow: visible; } .pf-sp-detail-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .pf-chip-part { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); background: var(--neutral-50); font-size: 14px; font-weight: 600; } .pf-sp-statement { margin: 0 0 18px; line-height: 1.55; } .pf-sp-criteria { margin: 6px 0 18px; padding-left: 22px; line-height: 1.55; } .pf-sp-criteria li + li { margin-top: 4px; } .pf-sp-pages { margin: 6px 0 0; } .pf-sp-panel .pf-detail-key { margin: 0; } .pf-sp-form { display: flex; flex-direction: column; gap: 18px; max-width: 880px; } .pf-sp-panel .pf-compose { margin-top: 12px; } /* --------------------------------------------------------------------- The details on the right from 1440 px (HELP-85) The record: the title row and the tabs stick together at the top of the window, and the Details RecordPanel sits in a 300 px column beside every tab, sticking under them; it scrolls on its own only when it is taller than the window. The story sheet: its tabs stick at the top of the SidePanel's body, and a 260 px column beside the open tab holds the same RecordPanel. Below 1440 px the details stay in the RecordHeader and the SidePanel's body, as before. The AttributeCluster in the column reads its narrow width and puts each key beside its value. ------------------------------------------------------------------ */ #pf-screen { --record-top: 0px; } .pf-sp-side { --sp-top: 0px; } #pf-screen[data-details="panel"] .pf-record-top, #pf-screen[data-details="hidden"] .pf-record-top { position: sticky; top: 0; z-index: var(--z-raised); } #pf-screen[data-details="panel"] .pf-record-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; } .pf-record-body > .pf-tabpanel { grid-column: 1; grid-row: 1; min-width: 0; } .pf-record-body > .pf-details { grid-column: 2; grid-row: 1; } .pf-sp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: stretch; } .pf-sp-body > .pf-sp-tabs { grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: var(--z-raised); background: var(--neutral-0); } .pf-sp-body > .pf-sp-panel { grid-column: 1; grid-row: 2; min-width: 0; } .pf-sp-body > .pf-details { grid-column: 2; grid-row: 1 / span 2; } .pf-details { --details-top: var(--record-top); width: 300px; min-width: 0; box-sizing: border-box; } .pf-details[data-kind="story"] { --details-top: var(--sp-top); width: 260px; } .pf-details-inner { position: sticky; top: var(--details-top); max-height: calc(100vh - var(--details-top)); overflow-y: auto; box-sizing: border-box; padding: 16px 24px 24px 0; } /* An open dropdown is not cut off by the panel's own scrolling. */ .pf-details-inner:has(.pf-pick) { max-height: none; overflow: visible; } /* In the panel the chevron points right, the way the panel goes when hidden. */ .pf-details .pf-record__toggle[aria-expanded="true"] .pf-svg { transform: none; } /* An administrator's values (Type, Epic, FenixHelper release) and Assign to…, in the head and in the panel. */ .pf-pick-anchor { position: relative; display: inline-block; min-width: 0; max-width: 100%; } .pf-attr-stack { display: inline-flex; flex-direction: column; align-items: inherit; gap: 2px; min-width: 0; } .pf-attr-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pf-details .pf-attr-line, .pf-details .pf-attrs__value > span { white-space: normal; overflow: visible; overflow-wrap: break-word; } /* A long key (FenixHelper release) wraps before a short value does. */ .pf-details .pf-attrs dt { flex: 0 1 auto; min-width: 0; white-space: normal; } .pf-details .pf-attrs dd:has(.pf-pick-anchor) { flex: none; max-width: 65%; } .pf-attrs dd:has(.pf-pick-anchor) { overflow: visible; } .pf-attr-stack .pf-btn--sm { margin-left: -8px; } /* RecordHeader's summary line when the details are hidden (HELP-92 story 4), holding the same editable values. One line: the Agent words give way first, then each value, down to about 4.5em with its full value in its title. The items are flattened into the line so each label, separator and value is sized on its own. */ .pf-record__summary.pf-summary { display: flex; align-items: baseline; flex: 1 1 auto; overflow: visible; } .pf-summary-agent { flex: 0 1000 auto; min-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-summary-sep { flex: none; padding: 0 .35em; } .pf-summary-item { display: contents; } .pf-summary-label { flex: none; margin-right: .35em; } /* The 4.5em floor is set per value once drawn (fitSummary in playfocus-record.js), so a short value keeps its own width. */ .pf-summary .pf-pick-anchor, .pf-summary .pf-attr-line, .pf-summary .pf-ms { flex: 0 1 auto; width: auto; min-width: 4.5em; } .pf-summary .pf-attrs__value { max-width: 100%; margin: -4px 0; } .pf-summary .pf-attrs__value > span { white-space: nowrap; } /* The release's dropdown, at the end of the line, opens leftwards so it stays on the screen. */ .pf-summary .pf-summary-item:last-child .pf-pick { left: auto; right: 0; } /* AttributeCluster's dropdown (its README): the pf-menu list under the value, the search above six. */ .pf-pick { top: calc(100% + 6px); left: -6px; z-index: var(--z-dropdown); width: 300px; max-width: calc(100vw - 40px); box-sizing: border-box; white-space: normal; text-align: left; } .pf-details .pf-pick { width: 260px; } /* In the narrow layout (a side panel, a phone) the dropdown aligns to the right, as the README has it. */ @container pf-attrs (max-width: 399px) { .pf-pick { left: auto; right: -6px; } } .pf-pick .pf-ms__search { width: 100%; box-sizing: border-box; } .pf-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; outline: none; } .pf-pick .pf-menu__item[data-active="true"] { background: var(--brand-sand); box-shadow: var(--focus-ring); } .pf-pick .pf-menu__item[aria-selected="true"][data-active="true"] { background: var(--brand-gold-tint); } .pf-pick-words { min-width: 0; overflow-wrap: anywhere; } .pf-pick .pf-menu__desc { font-size: 14px; } .pf-pick .pf-legenda, .pf-pick > .pf-btn { margin: 4px 10px 6px; } /* A requirement's files, links and mockups by story (story 9). */ .pf-tab-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .pf-ms.pf-for { width: auto; min-width: 240px; max-width: 320px; } .pf-bystory { display: flex; flex-direction: column; gap: 16px; } .pf-bystory-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--neutral-700); } .pf-bystory-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--neutral-200); } /* ===================================================================== Issue reports (HELP-80): the list, the report form, the issue record, and what stories, requirement cards and Files tabs show of them. Built from the design system's components: IssueRow's frame and Cell variants, ImpactMeter for the severity, StatusPill and StatusButton for the status, Dialog, FormField, RadioCard and FileField for the forms, RecordHeader and AttributeCluster for the record. ===================================================================== */ /* The list: IssueRow's frame (bundle.css) with the columns the issue reports have, ID · Title · Severity · Status · Linked stories · Reported by · Updated. */ .pf-ilist .pf-rowgrid--issue { grid-template-columns: 90px minmax(220px, 1fr) 110px 130px 180px 160px 130px; } .pf-icodes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } /* The Requirements list gains Issues beside Comm.: RequirementRow's columns and one 64 px more. */ .pf-rlist .pf-rowgrid--req { grid-template-columns: 90px minmax(220px, 1fr) 180px 120px 150px 130px 64px 64px 100px; } .pf-rlist .pf-rowgrid, .pf-rlist .pf-grouphead { min-width: 1200px; } /* The Stories list gains Issues after Comments; the story link, in the title cell, stretches over its row, the issue keys sit above it. */ .pf-slist .pf-rowgrid--story { grid-template-columns: 130px minmax(240px, 1fr) 170px 130px 70px 170px 120px; min-width: 1080px; } .pf-slist .pf-grouphead { min-width: 1080px; } .pf-srow { position: relative; } div.pf-srow:hover { background: var(--neutral-50); } .pf-srow-link { min-width: 0; color: inherit; text-decoration: none; } .pf-srow-link::after { content: ""; position: absolute; inset: 0; } .pf-srow-link:focus-visible { outline: none; } .pf-srow:has(.pf-srow-link:focus-visible) { z-index: 1; outline: 2px solid var(--brand-gold); outline-offset: -2px; box-shadow: var(--focus-ring); } .pf-slist [data-cell="issues"] { position: relative; z-index: 1; flex-wrap: wrap; gap: 2px 8px; } .pf-sissue { color: var(--feedback-danger); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 1023px) { .pf-slist .pf-rowgrid--story { grid-template-areas: "code code code code" "title title title title" "status agent count date" "issues issues issues issues"; } .pf-slist [data-cell="issues"] { grid-area: issues; } .pf-slist .pf-rowgrid--story, .pf-slist .pf-grouphead { min-width: 0; } } /* The report form: the design system's Dialog, wider for its two columns. */ .pf-report .pf-dialog { max-width: 760px; } .pf-report-body { display: flex; flex-direction: column; gap: 14px; } /* New requirement (HELP-93): the Dialog, modal and 640 px wide; its form one column of fields, the picker rows FormGroup's. */ .pf-newreq__body { display: flex; flex-direction: column; gap: 14px; } .pf-report-two, .pf-idetail-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pf-report-steps > .pf-btn { align-self: flex-start; } .pf-steplist { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; } .pf-steplist li { padding-left: 2px; } .pf-steplist li > * { vertical-align: middle; } .pf-steplist .pf-input { width: calc(100% - 48px); margin-right: 8px; } .pf-picked { display: flex; flex-wrap: wrap; gap: 6px; } .pf-picker { position: relative; display: flex; flex-direction: column; gap: 4px; } .pf-picker-list { position: absolute; top: 40px; left: 0; right: 0; z-index: 6; margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto; border: var(--border-default); border-radius: var(--radius-md); background: var(--neutral-0); box-shadow: var(--elevation-3); } .pf-picker-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; } .pf-picker-opt[data-active="true"], .pf-picker-opt:hover { background: var(--brand-gold-tint); } .pf-picker-note { margin: 0; font-size: 14px; } .pf-picker-note:empty { display: none; } .pf-filled { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--brand-gold-tint); color: var(--neutral-900); font-size: 14px; } .pf-filled:empty { display: none; } /* The record: AttributeCluster's values, the requirements' keys, the steps. */ .pf-irecordhead .pf-attrs dd { overflow: visible; } .pf-iattr { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pf-iattr .pf-muted { font-size: 14px; } .pf-ireqs { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; } .pf-isteps { margin: 0; padding-left: 22px; line-height: 22px; } /* Linked stories: the code and title one link, Unlink a button of its own. */ .pf-ilinked { display: flex; flex-direction: column; gap: 10px; max-width: 1000px; } .pf-ilinklist { margin: 0; padding: 0; list-style: none; border: var(--border-subtle); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-ilinkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 48px; padding: 8px 14px; border-bottom: var(--border-hairline); } .pf-ilinkrow:last-of-type { border-bottom: 0; } .pf-ilink-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 320px; min-width: 0; } .pf-ilink { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--neutral-900); text-decoration: none; } .pf-ilink b { text-decoration: underline; text-underline-offset: 2px; } .pf-ilinkrow .pf-btn[aria-disabled="true"] { opacity: .5; } .pf-ilink-why { margin: 0; padding: 0 14px 10px; font-size: 14px; } .pf-ilink-form { display: flex; flex-direction: column; gap: 6px; max-width: 720px; padding: 14px 16px; border: var(--border-subtle); border-radius: var(--radius-xl); background: var(--neutral-0); } /* Comments on an issue report. */ .pf-icomment { max-width: 760px; padding: 12px 14px; border: var(--border-subtle); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-icomment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pf-icomment-head time { color: var(--neutral-700); font-size: 14px; } .pf-icomment-head .pf-btn { margin-left: auto; } .pf-icomment-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 21px; } /* The story panel's Issue reports tab. */ .pf-sp-issues { margin: 0; padding: 0; list-style: none; border: var(--border-subtle); border-radius: var(--radius-lg); background: var(--neutral-0); } .pf-sp-issues li + li { border-top: var(--border-hairline); } .pf-sp-issue { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--neutral-900); text-decoration: none; } .pf-sp-issue:hover { background: var(--neutral-50); } .pf-sp-issue b { flex: 1 1 auto; min-width: 0; } @media (max-width: 1023px) { .pf-report-two, .pf-idetail-two { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================== HELP-90: Chat's page ribbon and the cycle through open questions, drawn since HELP-111 story 11 as the design system's QuestionCycle. ===================================================================== */ /* A band of its own, as the board's view ribbon: 12 px above and below, 24 px at the sides, a line under it. */ .pf-chat-ribbon { flex: none; gap: 12px; margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0); } .pf-chat-ribbon .pf-ribbon-search { flex: 1 1 220px; min-width: 200px; } .pf-chat-line { border: 0; } .pf-cy-switch { display: inline-flex; } .pf-chat-notype { margin: 20px 24px; } /* The cycle (HELP-111 story 11) is bundle.css's QuestionCycle: CycleHeader, CycleToolbar, CycleContext, QuestionCard with its AnswerOptions, and the record in a SidePanel. What is left here only places them in the page: the screen's height, the room the cost toast and the keyboard take, the card as one button. */ .pf-cy { min-height: calc(100vh - 53px); padding-bottom: var(--cost-h, 0px); box-sizing: border-box; } .pf-cy-state { padding: 24px; } .pf-cy .pf-empty__title, .pf-qcard__q { outline: none; } .pf-qcard__q { white-space: pre-wrap; overflow-wrap: anywhere; } .pf-qcard__answer { scroll-margin-bottom: calc(var(--cost-h, 0px) + var(--kb, 0px) + 16px); } .pf-qcard__answer textarea { min-height: 84px; resize: vertical; } .pf-cyclebar .pf-btngroup > .pf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* The card is the one control that opens the SidePanel: the gold focus border and focus-ring of a card link. */ .pf-cy-cardbtn { border-radius: var(--radius-md); cursor: pointer; outline: none; } .pf-cy-cardbtn:hover .pf-card { box-shadow: inset 0 0 0 2px var(--brand-gold), var(--elevation-1); } .pf-cy-cardbtn:focus-visible { box-shadow: var(--focus-ring); } .pf-cy-cardbtn:focus-visible .pf-card { border-color: var(--brand-gold); } /* The SidePanel at the right of the window, over the page and not modal, as the story panel; bundle.css gives it the full width below 600 px. */ .pf-cy-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-popover); } .pf-cy-sidetext { white-space: pre-wrap; overflow-wrap: anywhere; } /* On a phone the ButtonGroup and the card's actions take the width, their buttons 44 px high (at least 40, Pino's note). */ .pf-cy[data-phone="true"] .pf-cyclehead, .pf-cy[data-phone="true"] .pf-cyclebar { padding-left: 16px; padding-right: 16px; } .pf-cy[data-phone="true"] .pf-cy-switch, .pf-cy[data-phone="true"] .pf-btngroup, .pf-cy[data-phone="true"] .pf-cyclebar__end { display: flex; width: 100%; } .pf-cy[data-phone="true"] .pf-cy-switch .pf-seg, .pf-cy[data-phone="true"] .pf-cyclebar__end .pf-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; } .pf-cy[data-phone="true"] .pf-seg button { justify-content: center; min-height: 40px; } .pf-cy[data-phone="true"] .pf-btngroup > .pf-btn { flex: 1 1 0; height: 44px; padding: 0 8px; justify-content: center; } .pf-cy[data-phone="true"] .pf-qcard__actions .pf-btn { flex: 1 1 0; height: 44px; justify-content: center; } .pf-cy[data-phone="true"] .pf-cyclehead > .pf-btn--ghost { min-height: 44px; } .pf-cy[data-phone="true"] .pf-cy-state { padding: 16px; } @media (max-width: 1023px) { .pf-chat-ribbon { padding: 10px 16px; } .pf-chat-ribbon .pf-ribbon-search { flex-basis: 100%; } } /* --------------------------------------------------------------------- The Decision bar at Design Approval (HELP-91, story 5). Not on the sheet yet: the gate column's dashed human-gate border and ground around the sheet's Button, ActionsMenu, Avatar and time. Send back and Approve design stay together on one line when the bar wraps. ------------------------------------------------------------------ */ .pf-decide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 16px; border: 1.5px dashed var(--agent-human-gate); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--agent-human-gate) 4%, var(--neutral-50)); } .pf-decide-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pf-decide h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--neutral-900); } .pf-decide-who { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--neutral-800); } .pf-decide-who time { font-weight: 600; } .pf-decide-more { margin: 0; } .pf-decide-link { color: var(--brand-burgundy); font-weight: 600; } .pf-decide-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--neutral-700); } .pf-decide-acts { flex: none; display: flex; align-items: center; gap: 8px; } .pf-decide-acts .pf-menu { min-width: 240px; } .pf-decide-dialog { width: min(560px, calc(100vw - 32px)); } .pf-decide-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; } .pf-decide-dialog-body > p { margin: 0; } .pf-decide-dialog-line { color: var(--neutral-700); } .pf-decide-label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--neutral-900); } .pf-decide-count { align-self: flex-end; font-size: 14px; } .pf-decide-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: var(--border-subtle); } /* HELP-92: on a phone a dropdown opens under its row, across the cluster, in the flow (Jasper's answer a). */ .pf-attrs__pair:has(> .pf-pick--under) { flex-wrap: wrap; } .pf-pick.pf-pick--under { position: static; flex: 1 1 100%; width: auto; max-width: none; margin: 4px 0; box-shadow: none; } /* --------------------------------------------------------------------- The FenixHelper release board (HELP-44, stories 4 to 6), Pino's design B1-B6. The sections and the RequirementCards are the design system's; since HELP-103 so are the release card (ReleaseCard), its Steps and Past FenixHelper releases (bundle.css). ------------------------------------------------------------------ */ .pf-rb-ribbon { justify-content: flex-end; } /* The product switch (HELP-103, 23 Oct 2026) at the ribbon's start, the actions at its end. */ .pf-rb-switch { margin-right: auto; } .pf-rb-switch:empty { display: none; } .pf-rb-body { display: flex; flex-direction: column; gap: 28px; } .pf-rb-body[aria-busy="true"] { gap: 0; } .pf-rb-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .pf-rb-head { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--neutral-900); } .pf-rb-sub { margin: -6px 0 0; max-width: 72ch; color: var(--neutral-600); } .pf-rb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; align-items: start; } .pf-rb-cards > .pf-card { min-width: 0; } /* A member that could not be read: the card's frame, not a link. */ .pf-rb-unread { cursor: default; } .pf-rb-unread-line { margin: 0; color: var(--neutral-600); } /* Not in a FenixHelper release: a heading per status category, with its tone bar. */ .pf-rb-cathead { display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-800); } .pf-rb-catbar { width: 4px; height: 18px; border-radius: 2px; background: var(--tone); } /* Below 600 px: the ribbon stacks with Refresh full width. */ @media (max-width: 599px) { .pf-rb-ribbon { flex-direction: column; align-items: stretch; } .pf-rb-ribbon .pf-btn { justify-content: center; } } /* --------------------------------------------------------------------- FenixHelper releases managed in Armando (HELP-103). The ReleaseCard, Steps, Dialogs, FormFields, InlineAlert and the rest are bundle.css's own since HELP-111; playfocus-releases.css, which stood in for them, is gone. These are the board's own parts and the icons' layout. ------------------------------------------------------------------ */ .pf-rb-ribbon-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pf-rb-phoneline { margin: 0; color: var(--neutral-700); } .pf-alert > .pf-ico { flex: none; margin-top: 2px; } .pf-alert--action > .pf-ico { align-self: flex-start; } .pf-ref .pf-ico { flex: none; color: var(--brand-burgundy); } .pf-ref--ext .pf-ico:last-of-type { color: var(--neutral-600); } .pf-legenda > .pf-ico { flex: none; margin-top: 3px; } dialog.pf-rb-dialog { display: none; width: min(640px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; flex-direction: column; overflow: hidden; } dialog.pf-rb-dialog[open] { display: flex; } dialog.pf-rb-dialog::backdrop { background: color-mix(in srgb, var(--neutral-900) 40%, transparent); } .pf-dialog__body .pf-rb-note { color: var(--neutral-700); } .pf-rcard__meta .pf-rb-mono { font-family: var(--font-mono); font-weight: 700; } .pf-rb-pastrow { padding: 10px 0; border-top: var(--border-hairline); } .pf-rb-pastrow .pf-rb-pastname { font-weight: 700; color: var(--neutral-900); } .pf-rb-keys { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; } /* A release's Armando issue reports (HELP-80 story 16, from the Helper Backlog with HELP-88): under the members, one row each in the member footer's frame and ground. */ .pf-rb-issues { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pf-rb-issues__head { margin: 0; font-weight: 700; color: var(--neutral-800); } .pf-rb-issues__list { margin: 0; padding: 0; list-style: none; border: var(--border-default); border-radius: var(--radius-md); background: var(--card-footer); } .pf-rb-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 44px; padding: 6px 8px 6px 12px; color: var(--neutral-700); } .pf-rb-issue + .pf-rb-issue { border-top: var(--border-hairline); } .pf-rb-issue__what { display: inline-flex; align-items: baseline; gap: 8px; flex: 1 1 240px; min-width: 0; } .pf-rb-issue__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neutral-900); } .pf-rb-issue__title.pf-muted { color: var(--neutral-600); } .pf-rb-issue__fix--built { color: var(--state-done-text); font-weight: 600; } .pf-rb-issue .pf-btn { height: 30px; margin-left: auto; } .pf-rb-head:focus { outline: none; } .pf-rb-head:focus-visible { border-radius: var(--radius-xs); box-shadow: 0 0 0 2px var(--brand-gold), var(--focus-ring); } @media (max-width: 599px) { .pf-rb-ribbon-acts > .pf-btn { flex: 1 1 auto; } } @media (max-width: 599px) { dialog.pf-rb-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; border-radius: 0; } } /* --------------------------------------------------------------------- Assign to on the record (HELP-95, PyCF7DZxMHqdvs46llTF): the Actions menu with its Assign to group (ActionsMenu's group with a note), 340 px, scrolling inside itself (its height is set when it opens). The flags are RecordHeader's notes row. ------------------------------------------------------------------ */ .pf-menu[data-size="wide"] { width: 340px; max-width: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain; } .pf-menu__item--person { align-items: flex-start; text-align: left; } .pf-menu__item--person .pf-avatar { margin-top: 1px; } .pf-menu__item--person .pf-menu__desc { font-size: 14px; line-height: 18px; } .pf-menu__item--person[aria-disabled="true"] .pf-avatar { opacity: .5; } /* The click-through guide (HELP-47, story 16): GuideStep as bundle.css draws it, placed in the viewport by playfocus-guide.js. Fixed, so it stays beside its part whichever box scrolls; its titles may shrink so the title ellipsises; and never Dialog's full-height phone box, because the sheet sits above the MobileTabBar with the page still readable above it. */ .pf-guide.pf-guide--live { position: fixed; min-height: 0; } .pf-guide__titles { min-width: 0; } .pf-guide--sheet.pf-guide--live { top: auto; } /* HELP-99: the pull request's External RefLink in the record's notes row; a URL label ellipsises (Lia's note). */ .pf-record__notes .pf-ref--ext { max-width: 100%; vertical-align: bottom; } .pf-record__notes .pf-ref--ext .pf-ref__title { max-width: 32ch; } /* --------------------------------------------------------------------- The Team panel (HELP-104, Pino's D1-D4): who works on a requirement, between the ribbon and the load line. A helper card wears its tone on a 3 px top edge and its mark; a human gate is drawn as the board draws its gate columns. Design-system tokens only (HELP-111); text at 14 px. ------------------------------------------------------------------ */ .pf-team-btn > .pf-svg:last-child { transition: transform 150ms ease; } .pf-team-btn[aria-expanded="true"] { background: var(--brand-gold-tint); border-color: var(--brand-gold); } .pf-team-btn[aria-expanded="true"] > .pf-svg:last-child { transform: rotate(180deg); } .pf-team { margin: 0 0 12px; padding: 12px 14px 14px; background: var(--neutral-0); border: var(--border-subtle); border-radius: var(--radius-lg); } .pf-team:focus { outline: none; } .pf-team h2 { margin: 0 0 10px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--neutral-900); } .pf-team-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .pf-team-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; background: var(--neutral-0); border: var(--border-subtle); border-top: 3px solid var(--tone); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; color: var(--neutral-800); overflow-wrap: anywhere; } .pf-team-card[data-gate="true"] { border: 1.5px dashed var(--agent-human-gate); background: color-mix(in srgb, var(--agent-human-gate) 4%, var(--neutral-50)); } .pf-team-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .pf-team-who { font-size: 14px; font-weight: 700; color: var(--neutral-900); } .pf-team-role { font-weight: 600; color: color-mix(in srgb, var(--tone) 70%, var(--neutral-900)); } .pf-team-card[data-gate="true"] .pf-team-role { color: var(--agent-human-gate); } .pf-team-blurb { color: var(--neutral-700); } .pf-team-where { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--neutral-600); } /* A step after the merge in the cycle's QuestionCard (HELP-121): its guide follows the card's width, as QuestionBubble's step variant does. */ .pf-qcard--step .pf-qcard__box { container: pf-stepq / inline-size; } .pf-stepq__head { display: flex; flex-direction: column; } /* Armando's help (HELP-120): the glue the shell needs around HelpButton and HelpPanel's dialog (bundle.css, design system 0.13). The dialog's head puts the face beside the title, as the README's sheet shows it; a side panel or the full-screen ground in the bottom-right corner hides the button (HelpButton's README: it never covers a SidePanel's footer). */ .pf-helpp__headline { display: flex; align-items: center; gap: 10px; min-width: 0; } .pf-helpp__none { margin: 8px 0 0; color: var(--neutral-600); } body:has(.pf-side, .pf-st-ground--full, .pf-guide--live) .pf-help--docked { display: none; } /* HELP-130 (lVN4NTqydYfwnGRSFk4W). The dialog is 60% of the window on a desktop (Steven, 24 Oct), keeping its 240px art column and its height; a phone keeps the full-screen sheet. */ @media (min-width: 600px) { .pf-helpd .pf-helpp--dialog:not(.pf-helpp--sheet) { width: 60vw; min-width: min(640px, calc(100vw - 32px)); } } /* A help-article or guide row is the link as a whole (round 4): the title, and on hover or focus the thread-hover ground with Read or Open on its right; the brand-gold ring for the keyboard. */ .pf-helpp__rows .pf-helpp__guide { padding: 0; } .pf-helpp__row { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; padding: 8px; border-radius: var(--radius-md, 8px); color: var(--neutral-900); text-decoration: none; } .pf-helpp__row-act { display: none; align-items: center; gap: 4px; flex: none; font-weight: 600; color: var(--brand-burgundy); } .pf-helpp__row:hover, .pf-helpp__row:focus-visible { background: var(--thread-hover); } .pf-helpp__row:hover .pf-helpp__row-act, .pf-helpp__row:focus-visible .pf-helpp__row-act { display: inline-flex; } .pf-helpp__row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold); } .pf-helpp__manage { margin-top: 8px; } /* The start view has no foot; the meta line's actions sit together on the right (P2, P4). */ .pf-helpp__nofoot { display: none; } .pf-helpp__meta-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; } .pf-helpp .pf-disc__body > .pf-btn--primary, .pf-helpd .pf-disc__body > .pf-btn--primary { align-self: flex-start; margin-top: 8px; } /* 'Ask me' to the left of the help button, vertically centred on it, on hover and keyboard focus (story 2). */ .pf-help__tip { position: fixed; top: auto; left: auto; right: calc(24px + 56px + 10px); bottom: calc(24px + 28px - 16px); } #pf-help:hover + .pf-help__tip, #pf-help:focus-visible + .pf-help__tip { visibility: visible; opacity: 1; } @media (max-width: 599px), (hover: none) { .pf-help__tip { display: none; } } /* FenixHelper's floating Report button leaves Armando's screens (story 3): its form stays, opened from Armando's 'Report a problem' entries, above the help button so neither covers the other; on a phone above the MobileTabBar and the help button. Where Armando's shell is not shown (the gate, the refusal) it stays. */ body:has(#app.pf-app:not([hidden])) .fab-button { display: none; } body:has(#app.pf-app:not([hidden])) .fab { right: 24px; bottom: calc(24px + 56px + 12px); } body:has(#app.pf-app:not([hidden])) .fab-panel { bottom: 0; max-height: calc(100vh - 24px - 56px - 12px - 16px); overflow: auto; } @media (max-width: 599px) { body:has(#app.pf-app:not([hidden])) .fab { right: 16px; bottom: calc(72px + 48px + 12px + env(safe-area-inset-bottom, 0px)); } body:has(#app.pf-app:not([hidden])) .fab-panel { width: calc(100vw - 32px); max-height: calc(100vh - 72px - 48px - 12px - 16px - env(safe-area-inset-bottom, 0px)); } /* Over a screen's create fab the help button sits higher, and the form above it. */ body:has(#app.pf-app:not([hidden])):has(.pf-help--over-fab) .fab { bottom: calc(140px + 48px + 12px + env(safe-area-inset-bottom, 0px)); } body:has(#app.pf-app:not([hidden])):has(.pf-help--over-fab) .fab-panel { max-height: calc(100vh - 140px - 48px - 12px - 16px - env(safe-area-inset-bottom, 0px)); } /* HELP-132 story 6: Toast's pf-toasts--over-help clears the docked help button; over a create fab the button sits higher, and so do the toasts. */ body:has(.pf-help--over-fab) .pf-toasts--over-help { bottom: calc(140px + 48px + 12px + env(safe-area-inset-bottom, 0px)); } } /* The help articles screen (HELP-120, stories 10 and 11): the ribbon's Tabs with the screen's primary at the right, ManageList's rows with who changed each last, and the questions as cards (stacked on a phone). */ .pf-help-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .pf-help-ribbon__acts { margin-left: auto; } .pf-help-row .pf-mrow__name { flex-wrap: wrap; row-gap: 2px; } .pf-help-row__by { flex-basis: 100%; font-weight: 400; color: var(--neutral-600); } /* About Armando (HELP-131): the page's layout around the design system's Tabs, AttributeCluster, Chips, GroupHeaders, ResourceRows and ReleaseNotes (0.15); on a phone the four parts are its Disclosures, with no styles of their own. */ .pf-about-panel { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: calc(832px + 48px); box-sizing: border-box; padding: 8px 24px 32px; } .pf-about-h { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900); } .pf-about-h:focus { outline: none; } .pf-about-h:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; } .pf-about-intro .pf-helpp__intro > * { margin: 0; } .pf-about-intro .pf-helpp__intro > * + * { margin-top: 8px; } .pf-about-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .pf-about-bar .pf-search { flex: 0 1 360px; min-width: 0; } .pf-about-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pf-about-groups { overflow: hidden; background: var(--neutral-0); border: var(--border-default); border-radius: var(--radius-lg); } .pf-about-groups > .pf-rrows { padding: 4px 16px; } .pf-about-groups > .pf-helpp__none { margin: 0; padding: 12px 16px; } .pf-about-reading { display: flex; flex-direction: column; gap: 8px; } .pf-about-article { padding: 20px; background: var(--neutral-0); border: var(--border-default); border-radius: var(--radius-lg); } .pf-about-notes { display: flex; flex-direction: column; gap: 16px; } .pf-about-parts { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .pf-about-parts .pf-disc__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* HELP-131 story 5: each article's category beside its title, in neutral-600; 'No category' when it has none. */ .pf-help-row__cat { font-weight: 500; color: var(--neutral-600); } .pf-help-qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; } .pf-help-kept { margin: 0; color: var(--neutral-600); } .pf-help-qlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .pf-help-q { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: var(--neutral-0); border: var(--border-default); border-radius: var(--radius-lg); } .pf-help-q > p { margin: 0; } .pf-help-q__meta { color: var(--neutral-600); } .pf-help-q__meta strong { color: var(--neutral-900); } .pf-help-q__question { font-weight: 600; color: var(--neutral-900); overflow-wrap: anywhere; } .pf-help-q__answer { color: var(--neutral-700); overflow-wrap: anywhere; } .pf-help-q__md > * { margin: 0; } .pf-help-q__md > * + * { margin-top: 6px; } .pf-help-q__from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; } .pf-help-q__unknown { margin: 0; } .pf-help-more { display: flex; justify-content: center; margin-top: 12px; } .pf-hart-preview { display: flex; flex-direction: column; gap: 6px; } .pf-hart-preview__body { padding: 12px 14px; background: var(--neutral-50); border: var(--border-subtle); border-radius: var(--radius-md); } .pf-hart-preview__empty { margin: 0; color: var(--neutral-600); }