/* Pathminder design system -- the pieces PM1's stylesheet does not have yet. * * WHAT THIS FILE IS * finder.css, beside this file, is the design system as PM1 implements it, vendored * and never edited here (design_system/VENDORED.md). The designer's design-system * drops sometimes run ahead of it: a component is specified, a page in this * repository needs it, and PM1 has not built it. That component is written HERE, * in the design system's own names (pm-*, and the designer's token names), so that * it is a design-system component from its first day -- reusable by the meeting * finder when that is rebuilt in this repository -- and not a page's private copy. * * IT SHOULD ONLY EVER SHRINK. When a re-sync of finder.css brings a piece that is * here, delete it from here; a test fails until it is (tests/portal/ * test_components.py compares the names the two files define). Nothing that * belongs to one page goes in this file: portal-only layout is portal.css's. * * Loaded after finder.css and before portal.css (portal/templates/portal/base.html). * Same rules as finder.css and portal.css: every literal once, in a token; no hex * or px in a rule; hover inside @media (hover: hover) with :active repeating it; * one breakpoint at 768px. PM1's token dialect: a type token is weight/size/line * only, and the rule appends the family. * * WHAT IS HERE * 1. Status banner -- design-system drops 3 and 5 (2026-10-13, 2026-10-26), * StatusBanner, in all four of its tones: success, warning, error and quiet. * Markup: templates/cotton/pm/status_banner.html. * 2. Artwork ground -- design-system drop 4 (2026-10-26), --color-art-ground * (tokens/colors.css). A token only: the fill of an artwork's own band, so * nothing flashes while the image loads. Used by the host portal's hero band * (portal.css, .hp-home__band). * 3. Square rails -- design-system drop 9 (2026-10-26), tokens/base.css. PM1's * stylesheet now gives every link and button 7px corners, so that a focus ring * follows them; an element that draws a 3px rail opts out with data-rail, or * the rail curls up at both ends. * 4. Count field -- design-system drop 5 (2026-10-26), CountField: one number to * enter, large between two buttons on a phone. Markup: * templates/cotton/pm/count_field.html. * 5. Action row -- design-system drop 5, ActionRow: a button and the note that * says its deadline or consequence, beside it or under it. Markup: * templates/cotton/pm/action_row.html. * 6. Bar chart -- design-system drops 11 and 12 (2026-10-27/28), BarChart, and * the host portal's handoff drops 17 and 18 (screen 13): attendance per * meeting or per month, full and compact sizes, normal and dense forms. * Markup: templates/cotton/pm/bar_chart.html and bar_chart_bar.html. * 7. Searchable select and flags -- design-system drop 14 (2026-10-29), * SelectField `searchable`, OptionRow `leading`, Flag; the host portal's handoff * drop 24 (07b, 07b2: the phone country picker). The select field is PM1's * (.pm-selectfield); what searching adds is the .pm-combobox block. Markup: * templates/cotton/pm/select_field.html (`searchable`). * 8. Quiet button -- design-system drop 15 (2026-10-29), QuietButton with a * glyph; the host portal's handoff drop 26 (the page actions on a meeting's * page). Markup: templates/cotton/pm/quiet_button.html. * 9. Text menu -- design-system drop 16 (2026-10-29): TextAction as a menu * button, OptionRow as a menu item radio; the host portal's handoff drop 28 * (the Attendance card's reminders menu). Markup: * templates/cotton/pm/text_menu.html. */ :root { /* ---- Status banner: the designer's colours for its two tones of its own, under * the designer's names (tokens/colors.css in the design-system drop). Status teal * and status amber are for banners only: never a pill, a rail or anything on the * map. The error tone takes the design system's canceled red, and the quiet tone * its ordinary inks; both are in finder.css already. */ --color-status-success-ink: #0f4a43; /* its words, and Dismiss */ --color-status-success-glyph: #17675d; --color-status-success-bg: #e3f2f0; --color-status-success-line: #8cc4bc; --color-status-warning-ink: #5e400c; --color-status-warning-glyph: #8a6116; --color-status-warning-bg: #fbf3e2; --color-status-warning-line: #e3c98f; /* ... and its measurements, which the designer's component writes in place. */ --mix-statusbanner-hover: 8%; /* how much of the ink tints Dismiss under a pointer */ --space-statusbanner: 14px 6px 14px 16px; /* Dismiss brings its own room on the right */ --space-statusbanner-bare: 14px 16px; /* ... and a banner without one */ --space-statusbanner-close: -11px 0; /* ... and overhangs the padding above and below it */ --size-statusbanner-glyph: 18px; --size-statusbanner-close-glyph: 14px; --line-statusbanner-glyph: 1.3; /* the glyph on the lead's line height, so they share a first line */ --measure-statusbanner: 640px; /* its widest on desktop, padding and border included */ /* ---- Count field: the screen's one large number, on a phone only. The design * system's own name for it is --type-count-field, because PM1's --type-count is * the 13px count beside a filter option (design-system drop 6). */ --type-count-field: 700 56px/1; --size-countfield: 200px; /* desktop: an ordinary field, this wide */ --size-countfield-step: 72px; /* phone: each button's width */ --size-countfield-row: 80px; /* ... and the row's height: buttons and field */ --size-countfield-glyph: 24px; /* the minus and plus */ --space-countfield-input: 0 6px; /* the number has the field nearly to itself */ /* ---- Action row: a note beside its button drops under it below this width, * and is never wider than this. */ --size-actionrow-note: 260px; --measure-actionrow-note: 560px; /* ---- Artwork ground: the cream that artwork is drawn on. It is a marketing * colour, and this is the ONLY place the design system lets one be a CSS value: * as the background of the band an artwork sits in. Never text, a button, a * border, a fill or a glyph. */ --color-art-ground: #f7f4ec; /* ---- Bar chart: the designer's sizes (Design System Update - Attendance * History, 2026-10-27), desktop first; the phone's are re-pointed below. */ --size-barchart-plot: 200px; /* the plot's height, full size */ --size-barchart-plot-m: 160px; --size-barchart-plot-compact: 96px; /* ... compact (the Attendance card) */ --size-barchart-plot-compact-m: 80px; --size-barchart-bar: 36px; /* a bar's widest */ --size-barchart-bar-m: 20px; --gap-barchart-slot: 9px; /* between slots, sparse form */ --gap-barchart-slot-m: 4px; --gap-barchart-dense: 2px; /* ... dense form */ --gap-barchart-dense-m: 1px; --gap-barchart-value: 4px; /* the count, above its bar */ --gap-barchart-lines: 4px; /* the gap lines stand 16px under the axis: 12 + 4 */ --size-barchart-headroom: 18px; /* the dense plot's empty top, where the selected count stands */ --size-barchart-pick: 14px; /* ... that count's line, and a selected gap's glyph */ --size-barchart-mark: 6px; /* a gap in the dense form: a mark under the baseline */ --size-barchart-axis-line: 17.5px; /* an axis line, empty or not */ --size-barchart-readout: 20px; /* the dense readout's line, before anything is read */ --size-barchart-digit: 8px; /* the dense y-axis labels' column: this per digit of its top value */ --line-barchart-gap-glyph: 19px; /* a gap line's glyph, on its text's first line */ --line-barchart-legend-glyph: 21px; /* ... and a legend label's, on its label's line */ /* ---- Searchable select and flags (design-system drop 14). */ --size-flag-w: 20px; /* a country's flag, 4:3 */ --size-flag-h: 15px; --radius-flag: 2px; --opacity-option-lead-disabled: 0.45; /* a disabled row's flag */ --space-option-lead-disabled: 2px; /* ... set down to its name's first line */ --space-option-count-disabled: 3px; /* ... and its count */ --size-combobox-clear: 13px; /* the filter's clear glyph */ /* ---- Text menu (design-system drop 16): its popover's width on desktop, and * OptionRow's own padding, which is not the stylesheet's option row's. */ --size-textmenu: 340px; --space-textmenu-row: 9px 16px; /* ... and its dialog's link (drop 31, Q61): 600 14px on a line of 1.3, 32px at * least, 6px above it and 9px below. */ --type-textmenu-link: 600 14px/1.3; --size-textmenu-link: 32px; --space-textmenu-link: 6px 16px 9px; } /* ========================================================================== Status banner () The outcome of something the person just did, said where they will notice it. Not .pm-banner, which is the finder's "this meeting is canceled" and announcement banner: a different thing with a different meaning. ========================================================================== */ /* THE TONE IS FIVE COLOURS, set on the banner itself; every part below reads them. So a tone is one short rule, and the parts are written once. Success is the default; the others are modifiers (the designer's StatusBanner `tone`). */ .pm-statusbanner { --statusbanner-bg: var(--color-status-success-bg); --statusbanner-line: var(--color-status-success-line); --statusbanner-glyph: var(--color-status-success-glyph); --statusbanner-lead: var(--color-status-success-ink); --statusbanner-message: var(--color-status-success-ink); } .pm-statusbanner--warning { --statusbanner-bg: var(--color-status-warning-bg); --statusbanner-line: var(--color-status-warning-line); --statusbanner-glyph: var(--color-status-warning-glyph); --statusbanner-lead: var(--color-status-warning-ink); --statusbanner-message: var(--color-status-warning-ink); } /* Error is the design system's canceled red, in all three inks. */ .pm-statusbanner--error { --statusbanner-bg: var(--color-canceled-bg); --statusbanner-line: var(--color-canceled-line); --statusbanner-glyph: var(--color-canceled); --statusbanner-lead: var(--color-canceled); --statusbanner-message: var(--color-canceled); } /* Quiet is the note's grey with the card's edge: an outcome worth saying that needs no colour ("Check your email."). */ .pm-statusbanner--quiet { --statusbanner-bg: var(--color-surface-hover); --statusbanner-line: var(--color-line-card); --statusbanner-glyph: var(--color-ink-glyph); --statusbanner-lead: var(--color-ink-strong); --statusbanner-message: var(--color-ink-body); } /* The designer's values, measured against the host portal's Log out and Account mocks (handoff drops 7 and 8). On desktop it is at most 640px wide, edge to edge. */ .pm-statusbanner { display: flex; align-items: flex-start; gap: var(--gap-chip); max-width: var(--measure-statusbanner); padding: var(--space-statusbanner-bare); background: var(--statusbanner-bg); border: 1px solid var(--statusbanner-line); border-radius: var(--radius-card); /* Clear of the screen's edge when its script brings it into view. */ scroll-margin: var(--gap-block); } /* Dismiss brings its own room on the right. */ .pm-statusbanner:has(.pm-statusbanner__close) { padding: var(--space-statusbanner); } .pm-statusbanner__glyph { flex: none; font-size: var(--size-statusbanner-glyph); line-height: var(--line-statusbanner-glyph); color: var(--statusbanner-glyph); } /* The lead, and the sentence 3px under it. Both are evened out over their lines (text-wrap: pretty), as the designer's component sets them (handoff drop 14, Q10). */ .pm-statusbanner__text { display: flex; flex-direction: column; gap: var(--gap-hairline); flex: 1; min-width: 0; } .pm-statusbanner__lead { font: var(--type-label) var(--font-text); color: var(--statusbanner-lead); text-wrap: pretty; } .pm-statusbanner__message { font: var(--type-meta) var(--font-text); color: var(--statusbanner-message); text-wrap: pretty; } /* Dismiss: 44px to press. Its margin lets it overhang the banner's padding, so a banner with a lead alone is no taller for having it. Under a pointer it takes a tint of the banner's own ink (mixed here, so the ink is written once). */ .pm-statusbanner__close { flex: none; display: flex; align-items: center; justify-content: center; width: var(--size-tap-min); height: var(--size-tap-min); margin: var(--space-statusbanner-close); border-radius: var(--radius-inline); color: var(--statusbanner-lead); } .pm-statusbanner__close i { font-size: var(--size-statusbanner-close-glyph); line-height: 1; } @media (hover: hover) { .pm-statusbanner__close:hover { background: color-mix(in srgb, var(--statusbanner-lead) var(--mix-statusbanner-hover), transparent); } } .pm-statusbanner__close:active { background: color-mix(in srgb, var(--statusbanner-lead) var(--mix-statusbanner-hover), transparent); } @media (max-width: 767px) { /* The whole width of its column, inside the 16px gutter. */ .pm-statusbanner { max-width: none; } } /* ========================================================================== Square rails (design-system drop 9, tokens/base.css) ========================================================================== */ /* A link or button that draws a 3px rail -- a nav item, a menu row, a section link -- stays square, focus ring included; a rail never follows the corners. (PM1's own nav links already set this; the attribute is for the rest.) */ [data-rail] { border-radius: 0; } /* ========================================================================== Count field (, design-system drop 5, CountField) ========================================================================== */ /* Its label, then the field, then the helper or the error: 6px apart, as every field (.pm-field). */ .pm-countfield { display: flex; flex-direction: column; gap: var(--gap-glyph); } .pm-countfield__row { display: flex; align-items: stretch; gap: var(--gap-chip); } .pm-countfield .pm-countfield__input { font-variant-numeric: tabular-nums; } /* On the selected tint, the helper takes the ink for a tinted ground (design system, Surfaces): the subtle grey is for white only. */ .pm-countfield--on-tint .pm-helper { color: var(--color-ink-muted); } /* Desktop: the design system's ordinary number field, 200px wide -- the whole field, its label and helper too, as the designer's CountField is (a long question wraps above the box). The buttons are for phones only. */ @media not all and (max-width: 767px) { .pm-countfield { max-width: var(--size-countfield); } .pm-countfield__step { display: none; } } @media (max-width: 767px) { /* "One fewer" and "One more": 72 x 80, white, the control's edge and corners, the glyph in the action colour. Hidden (the attribute) until its script runs. */ .pm-countfield__step { flex: 0 0 var(--size-countfield-step); display: flex; align-items: center; justify-content: center; height: var(--size-countfield-row); padding: 0; background: var(--color-surface-card); border: 1px solid var(--color-line-control); border-radius: var(--radius-control); color: var(--color-action); cursor: pointer; } .pm-countfield__step[hidden] { display: none; } .pm-countfield__step i { font-size: var(--size-countfield-glyph); line-height: 1; } @media (hover: hover) { .pm-countfield__step:hover { background: var(--color-surface-hover); } } .pm-countfield__step:active { background: var(--color-surface-hover); } /* The number: the screen's one large figure, centred, filling the room between the buttons. A digit keypad opens for it (inputmode). */ .pm-countfield .pm-countfield__input { flex: 1 1 auto; min-width: 0; height: var(--size-countfield-row); padding: var(--space-countfield-input); font: var(--type-count-field) var(--font-text); font-variant-numeric: tabular-nums; text-align: center; } } /* ========================================================================== Action row (, design-system drop 5, ActionRow) ========================================================================== */ /* Desktop, one button sized to its label: the note BESIDE it, centred on it, 22px away, dropping 9px under it when less than 260px is left. */ .pm-actionrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-chip) var(--gap-group); } .pm-actionrow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-block); } .pm-actionrow__note { flex: 1 1 var(--size-actionrow-note); max-width: var(--measure-actionrow-note); font: var(--type-helper) var(--font-text); color: var(--color-ink-subtle); text-wrap: pretty; } /* On the selected tint, the ink for a tinted ground. */ .pm-actionrow--on-tint .pm-actionrow__note { color: var(--color-ink-muted); } /* Two actions or more: the note goes UNDER the whole row, 9px; beside, it would read as belonging to the last one only. */ .pm-actionrow--stack { flex-direction: column; align-items: flex-start; } .pm-actionrow--stack .pm-actionrow__note { flex: none; } @media (max-width: 767px) { /* On a phone every button is full width, so the note is always under it. */ .pm-actionrow { flex-direction: column; align-items: stretch; } .pm-actionrow__note { flex: none; } .pm-actionrow__actions .pm-button { width: 100%; } } /* ========================================================================== Bar chart (, design-system drops 11 and 12, BarChart) Attendance: one bar per meeting or per month, in the meeting's mode colour; square bars. The normal form prints the count above each bar and has no gridlines and no y-axis; the dense form has no counts, so it has a y-axis. ========================================================================== */ /* The legend, the plot and its axis, and the gap lines: 12px apart. */ .pm-barchart { --barchart-plot: var(--size-barchart-plot); --barchart-bar: var(--size-barchart-bar); --barchart-gap: var(--gap-barchart-slot); --barchart-dense-gap: var(--gap-barchart-dense); --barchart-axis-gap: var(--gap-chip); display: flex; flex-direction: column; gap: var(--gap-inline); } .pm-barchart--compact { --barchart-plot: var(--size-barchart-plot-compact); --barchart-axis-gap: var(--gap-glyph); } .pm-barchart__legend { display: flex; flex-wrap: wrap; gap: var(--gap-block); } /* Each label one text line tall, its glyph at the top on a line as tall as the label's (21px), as the design system's ModeLabel draws it inline. */ .pm-barchart__legend .pm-mode { align-items: flex-start; } .pm-barchart__legend .pm-mode i { line-height: var(--line-barchart-legend-glyph); } /* ---- Normal form: a count over every bar. ---- */ .pm-barchart__sparse { display: flex; flex-direction: column; gap: var(--barchart-axis-gap); } /* The plot is its height ABOVE the baseline (content-box): the 1px line is under it, not taken out of it, so the tallest bar is 82% of the full height. */ .pm-barchart__plot { display: flex; align-items: stretch; gap: var(--barchart-gap); box-sizing: content-box; height: var(--barchart-plot); border-bottom: 1px solid var(--color-line-control); } /* Every slot is the same width; its bar (or its gap's glyph) stands on the baseline with the count 4px above it. */ .pm-barchart__slot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--gap-barchart-value); } .pm-barchart__value { font: var(--type-field-label) var(--font-text); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink-strong); white-space: nowrap; } /* The bar: its height is its own attribute (a share of the plot). Where the count over the tallest bar would rise out of the plot -- the compact chart has 96px for 14px of count, 4px and 82% of 96 -- the bar gives way and the count stays in, as the design system's BarChart does. */ .pm-barchart__bar { display: block; flex: 0 1 auto; min-height: 0; width: 100%; max-width: var(--barchart-bar); overflow: hidden; } /* A one-mode bar is the SVG's own fill; a split bar draws its two parts in it. */ .pm-barchart__bar--in-person { background: var(--color-mode-in-person); } .pm-barchart__bar--online { background: var(--color-mode-online); } .pm-barchart__fill--in-person { fill: var(--color-mode-in-person); } .pm-barchart__fill--online { fill: var(--color-mode-online); } /* A slot with no count keeps its place and shows the glyph of its meaning, 6px above the baseline. */ .pm-barchart__slot > .pm-barchart__glyph { padding-bottom: var(--gap-glyph); } .pm-barchart__glyph { font-size: var(--size-glyph-sm); line-height: 1; } .pm-barchart__glyph--canceled { color: var(--color-canceled); } .pm-barchart__glyph--none { color: var(--color-ink-glyph); } /* Under each slot: the day, and the month at the first slot and where it changes (a month's chart: the month, and the year where it changes). Two lines at both sizes (handoff drop 18). */ .pm-barchart__axis { display: flex; gap: var(--barchart-gap); } .pm-barchart__tick { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; font: var(--type-caption) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-ink-muted); white-space: nowrap; } .pm-barchart__tick-line { min-height: var(--size-barchart-axis-line); } .pm-barchart__tick-mobile { display: none; } /* ---- Dense form: slots too narrow for their counts (handoff 13j, 13l, 13m). ---- */ .pm-barchart__dense { display: flex; flex-direction: column; gap: var(--gap-chip); } /* The selected slot, read out: its date, then its value. Announced as it moves. */ .pm-barchart__readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-hairline) var(--gap-chip); min-height: var(--size-barchart-readout); } .pm-barchart__readout-date { font: var(--type-label) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-ink-strong); } .pm-barchart__readout-value { font: var(--type-meta) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-ink-body); } /* The y-axis, the plot, its gap marks and its months are one tab stop. A finger dragging across it moves the selection; dragging up and down still scrolls. Two columns: the y-axis labels (as wide as the top value's digits, 8px each) and, 6px to their right, the plot -- the marks and the months stand under the plot, not under the labels (handoff drop 18). */ .pm-barchart__scrub { --barchart-gutter: var(--size-barchart-digit); display: grid; grid-template-columns: var(--barchart-gutter) minmax(0, 1fr); column-gap: var(--gap-glyph); touch-action: pan-y; cursor: default; border-radius: var(--radius-inline); } .pm-barchart__scrub--gutter-2 { --barchart-gutter: calc(2 * var(--size-barchart-digit)); } .pm-barchart__scrub--gutter-3 { --barchart-gutter: calc(3 * var(--size-barchart-digit)); } .pm-barchart__scrub--gutter-4 { --barchart-gutter: calc(4 * var(--size-barchart-digit)); } .pm-barchart__marks, .pm-barchart__months { grid-column: 2; } /* The y-axis: 0 and round steps, each label right-aligned and centred on its line, which is drawn behind the bars (1px, the hairline grey; the baseline keeps the control grey). A label or line sits at 0, 33, 50, 67 or 100% of the plot below its headroom: one, two or three lines above 0. The labels' column starts where the headroom ends, so the same classes place both. */ .pm-barchart__yaxis { position: relative; height: calc(var(--barchart-plot) - var(--size-barchart-headroom)); margin-top: var(--size-barchart-headroom); font: var(--type-caption) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-ink-muted); } .pm-barchart__grid { position: absolute; top: var(--size-barchart-headroom); right: 0; bottom: 0; left: 0; } .pm-barchart__ylabel { position: absolute; right: 0; line-height: 1; transform: translateY(50%); } .pm-barchart__gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-line-row); } .pm-barchart__at-0 { bottom: 0; } .pm-barchart__at-33 { bottom: 33.33%; } .pm-barchart__at-50 { bottom: 50%; } .pm-barchart__at-67 { bottom: 66.67%; } .pm-barchart__at-100 { bottom: 100%; } /* The plot keeps its height; its top 18px are headroom, so the slots -- and the bars, as shares of them -- scale to what is under it (handoff drop 19). The bars stand in front of the gridlines (positioned, and after them). */ .pm-barchart__plot--dense { position: relative; gap: var(--barchart-dense-gap); height: calc(var(--barchart-plot) - var(--size-barchart-headroom)); padding-top: var(--size-barchart-headroom); } .pm-barchart__plot--dense .pm-barchart__slot { position: relative; align-items: stretch; gap: 0; } .pm-barchart__plot--dense .pm-barchart__bar { max-width: none; } /* The selected slot (handoff drop 22; design-system drop 13). Its count stands in the headroom, centred on the bar, on a white patch so no gridline crosses it, and a 1px guide joins it to the bar's top; the bar takes a darker shade of its mode colour. A selected gap: its column is highlighted down to the baseline, with its glyph in the headroom and the guide the full height. Nothing else changes: the other bars are never faded (faded reads as disabled). */ .pm-barchart__pick, .pm-barchart__guide { display: none; } .pm-barchart__slot--selected .pm-barchart__pick { display: block; position: absolute; top: calc(-1 * var(--size-barchart-headroom)); left: 50%; transform: translateX(-50%); z-index: 1; padding: 0 var(--gap-hairline); background: var(--color-surface-card); font: var(--type-field-label) var(--font-text); line-height: var(--size-barchart-pick); font-variant-numeric: tabular-nums; color: var(--color-ink-strong); white-space: nowrap; } .pm-barchart__slot--selected .pm-barchart__pick--glyph { display: flex; padding: 0 2px; } .pm-barchart__pick--glyph .bi { font-size: var(--size-barchart-pick); line-height: 1; } .pm-barchart__slot--selected .pm-barchart__guide { display: block; position: relative; z-index: 1; flex: 1 1 auto; align-self: center; width: 1px; background: var(--color-ink-muted); } .pm-barchart__slot--gap.pm-barchart__slot--selected::before { content: ""; position: absolute; inset: 0 -1px; background: var(--color-line-row); } .pm-barchart__slot--selected .pm-barchart__bar--in-person { background: color-mix(in srgb, var(--color-mode-in-person) 75%, var(--color-ink-strong)); } .pm-barchart__slot--selected .pm-barchart__bar--online { background: color-mix(in srgb, var(--color-mode-online) 75%, var(--color-ink-strong)); } .pm-barchart__slot--selected .pm-barchart__fill--in-person { fill: color-mix(in srgb, var(--color-mode-in-person) 75%, var(--color-ink-strong)); } .pm-barchart__slot--selected .pm-barchart__fill--online { fill: color-mix(in srgb, var(--color-mode-online) 75%, var(--color-ink-strong)); } /* A meeting with no count leaves its slot empty (the plot only holds counts) and gets a mark in a 6px strip 3px under the baseline: the slot's full width, at least 2px, in its meaning's colour. A real count of 0 has no bar and no mark. The marks and the months are rows of cells as wide as the slots. */ .pm-barchart__marks, .pm-barchart__months { display: flex; gap: var(--barchart-dense-gap); } .pm-barchart__marks { height: var(--size-barchart-mark); margin-top: var(--gap-hairline); } .pm-barchart__markslot, .pm-barchart__month { flex: 1 1 0; min-width: 0; display: flex; } .pm-barchart__markslot { justify-content: center; } .pm-barchart__mark { width: 100%; min-width: 2px; } .pm-barchart__mark--canceled { background: var(--color-canceled); } .pm-barchart__mark--none { background: var(--color-ink-glyph); } /* One line: each month's name at its first slot, from that slot's left edge (it runs on over the slots after it). A month whose label the next one would crowd is left blank (handoff drop 18): its "off" class for the breakpoint, which the server guesses and pmChart sets from the measured plot (drop 23, Q54). Hidden, not removed, so it can still be measured; it takes no room either way. */ .pm-barchart__months { padding-top: var(--gap-glyph); height: var(--size-barchart-axis-line); box-sizing: content-box; font: var(--type-caption) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-ink-muted); } .pm-barchart__month { white-space: nowrap; overflow: visible; } .pm-barchart__hint { font: var(--type-helper) var(--font-text); color: var(--color-ink-subtle); } .pm-barchart__hint--mobile, .pm-barchart__hint--keys { display: none; } /* The arrow keys are offered only while the plot has keyboard focus; the plot's label says so to a screen reader all along (handoff drop 19). */ .pm-barchart__dense:has(.pm-barchart__scrub:focus-visible) .pm-barchart__hint { display: none; } .pm-barchart__dense:has(.pm-barchart__scrub:focus-visible) .pm-barchart__hint--keys { display: inline; } /* WHICH FORM SHOWS. A chart of meetings carries both: the dense one where the chart is dense at this breakpoint, the normal one elsewhere. pmChart sets both classes alike from the measured plot (handoff drop 23, Q54); until then, or with no script, they are the server's guess per breakpoint. */ @media not all and (max-width: 767px) { .pm-barchart--dense-desktop .pm-barchart__sparse, .pm-barchart:not(.pm-barchart--dense-desktop) .pm-barchart__dense { display: none; } .pm-barchart__monthname--off-desktop { visibility: hidden; } } /* ---- One line per kind of gap, 16px under the axis, 6px apart. ---- */ .pm-barchart__gaps { display: flex; flex-direction: column; gap: var(--gap-glyph); margin: 0; padding: var(--gap-barchart-lines) 0 0; list-style: none; } .pm-barchart__gapline { display: flex; align-items: flex-start; gap: var(--gap-glyph); font: var(--type-helper) var(--font-text); color: var(--color-ink-subtle); } .pm-barchart__gapline .pm-barchart__glyph { flex: none; line-height: var(--line-barchart-gap-glyph); } .pm-barchart__gapline > span { flex: 1 1 auto; min-width: 0; } .pm-barchart__gapline strong { font-weight: 600; color: var(--color-ink-body); } @media (max-width: 767px) { .pm-barchart { --barchart-plot: var(--size-barchart-plot-m); --barchart-bar: var(--size-barchart-bar-m); --barchart-gap: var(--gap-barchart-slot-m); --barchart-dense-gap: var(--gap-barchart-dense-m); } .pm-barchart--compact { --barchart-plot: var(--size-barchart-plot-compact-m); } .pm-barchart__value { font: var(--type-glyph-label) var(--font-text); line-height: 1; font-variant-numeric: tabular-nums; } .pm-barchart__slot--selected .pm-barchart__pick { font: var(--type-glyph-label) var(--font-text); line-height: var(--size-barchart-pick); font-variant-numeric: tabular-nums; /* the shorthand above resets it */ } .pm-barchart__tick-desktop { display: none; } .pm-barchart__tick-mobile { display: inline; } .pm-barchart__hint--desktop { display: none; } .pm-barchart__hint--mobile { display: inline; } /* Which form shows (see above), on a phone. */ .pm-barchart--dense-mobile .pm-barchart__sparse, .pm-barchart:not(.pm-barchart--dense-mobile) .pm-barchart__dense { display: none; } .pm-barchart__monthname--off-mobile { visibility: hidden; } } /* ========================================================================== 7. Searchable select and flags (design-system drop 14: SelectField `searchable`, OptionRow `leading`, Flag; host portal handoff drop 24, 07b) ========================================================================== */ /* A country's flag: an image, 4:3, its corners just softened. Decoration beside the name, never instead of it (alt=""). */ .pm-flag { display: block; flex: none; width: var(--size-flag-w); height: var(--size-flag-h); border-radius: var(--radius-flag); object-fit: cover; } /* The closed field: the flag, then the dial code. */ .pm-combobox .pm-selectfield__value { display: inline-flex; align-items: center; gap: var(--gap-chip); } /* The filter, fixed above the list: only the list scrolls. */ .pm-combobox__search { padding: var(--gap-glyph) var(--gap-inline); border-bottom: 1px solid var(--color-line-row); } .pm-combobox__searchbox { display: flex; align-items: center; gap: var(--gap-chip); height: var(--size-tap-min); padding: 0 var(--gap-inline); border: 1px solid var(--color-action); border-radius: var(--radius-control); background: var(--color-surface-card); } .pm-combobox__searchbox:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .pm-combobox__searchbox .bi-search { flex: none; font-size: var(--size-glyph-sm); color: var(--color-ink-muted); } .pm-combobox__filter { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: var(--type-body) var(--font-text); line-height: 1; color: var(--color-ink-strong); } .pm-combobox__filter::placeholder { color: var(--color-ink-subtle); } /* The box draws the ring; the field inside it draws none. */ .pm-combobox__filter:focus, .pm-combobox__filter:focus-visible { outline: none; } .pm-combobox__clear { flex: none; display: flex; align-items: center; height: 100%; padding: 0 var(--gap-hairline); color: var(--color-ink-muted); } .pm-combobox__clear i { font-size: var(--size-combobox-clear); line-height: 1; } .pm-combobox__clear[hidden] { display: none; } /* One line per row: radio, flag, name, count. The highlighted row (the arrow keys' place) takes the hover fill; the chosen one its checked radio and 600 name. */ .pm-combobox .pm-option[hidden] { display: none; } /* The list is a column with a maximum height: without this, a row whose reason takes a second line would be squeezed to the 44px minimum to fit. */ .pm-combobox .pm-option { flex-shrink: 0; } .pm-combobox .pm-option--active { background: var(--color-surface-hover); } .pm-combobox .pm-option[aria-selected="true"] .pm-radio__dot { border: var(--size-radio-ring) solid var(--color-action); } /* The count (a dial code) centred on its row, and a reason 3px under its name, as OptionRow draws them; the stylesheet's rows set both on the name's baseline. */ .pm-combobox .pm-option__count { flex: none; align-self: center; } .pm-combobox .pm-option__text { gap: var(--gap-hairline); } .pm-combobox .pm-option__name b { font-weight: 700; } /* Disabled, with its reason under the name: everything from the top, the flag faded and set down to the name's first line. */ .pm-combobox .pm-option--empty { align-items: flex-start; cursor: not-allowed; } .pm-combobox .pm-option--empty .pm-option__text { align-self: flex-start; } .pm-combobox .pm-option--empty .pm-option__lead { margin-top: var(--space-option-lead-disabled); opacity: var(--opacity-option-lead-disabled); } .pm-combobox .pm-option--empty .pm-option__count { align-self: flex-start; margin-top: var(--space-option-count-disabled); } .pm-combobox__none { margin: 0; padding: var(--gap-chip) var(--gap-block); font: var(--type-meta) var(--font-text); color: var(--color-ink-subtle); } .pm-combobox__none[hidden] { display: none; } @media (max-width: 767px) { /* The stylesheet sizes option rows up for touch on a phone (16px names, 24px radios); the searchable list keeps its desktop sizes there, as the design system draws it (host portal handoff drop 24, 07b phone): its rows are 44px tall already, and 221 of them want the smaller type. */ .pm-combobox .pm-option__name { font: var(--type-value) var(--font-text); } .pm-combobox .pm-option--selected .pm-option__name { font: var(--type-label) var(--font-text); } .pm-combobox .pm-option .pm-radio__dot { width: var(--size-control-box); height: var(--size-control-box); } } /* ========================================================================== 8. Quiet button (, design-system drop 15, QuietButton; host portal handoff drop 26, the page actions) ========================================================================== */ /* A small outlined control: 600 13px on a white ground, the control line, 9px corners. PM1 draws the same control as its host Contact and Manage meeting button (.pm-facil__contact), under a name that belongs to that one place and with an 11px chevron; this is the design system's general one, with a 15px glyph (10px padding + 15px glyph + 1px borders = 38px tall), so it is written here under the design system's name until PM1 has it. Its own radius, not the 7px PM1 gives every link: the design system keeps a component's radius on its focus ring (Button and this one, 9px). */ .pm-quietbutton { display: inline-flex; align-items: center; gap: var(--gap-glyph); flex: none; box-sizing: border-box; padding: var(--space-inline-control); border: 1px solid var(--color-line-control); border-radius: var(--radius-control); background: var(--color-surface-card); font: var(--type-glyph-label) var(--font-text); line-height: 1; color: var(--color-ink-body); text-decoration: none; } .pm-quietbutton .bi { flex: none; font-size: var(--size-glyph-sm); line-height: 1; } /* Hover: the action border and label, never an underline (PM1's `a:hover` would add one). Press: the same, instantly, on the quiet fill. */ @media (hover: hover) { .pm-quietbutton:hover { border-color: var(--color-action); color: var(--color-action); text-decoration: none; } } .pm-quietbutton:active { border-color: var(--color-action); color: var(--color-action); background: var(--color-surface-hover); text-decoration: none; } /* ========================================================================== 9. Text menu (, design-system drop 16: TextAction with `haspopup`, OptionRow `role="menuitemradio"`; host portal handoff drop 28) ========================================================================== */ /* The trigger: PM1's text action (.pm-action-link: 600 14px, action blue, 6px gaps) on a